@nizivo/react 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,152 @@
+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, 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. */
+export type MenuSide = "top" | "bottom" | "start" | "end";
+/** Figma Menu Item `State=Critical`. `critical` items sit last, after a separator. */
+export type MenuItemTone = "neutral" | "critical";
+/** Why a checkbox item changed: the item was activated (pointer, touch or keyboard). */
+export type MenuCheckedReason = "item-press";
+/**
+ * Strings the engine renders (§9.3 rule 7). Engine-owned with React Aria (not overridable): `dismiss`,
+ * the visually hidden "Dismiss" buttons at both ends of the popup.
+ */
+export interface MenuLabels {
+  dismiss: string;
+}
+export interface MenuRootProps {
+  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 MenuTriggerState {
+  open: boolean;
+  pressed: boolean;
+  focusVisible: boolean;
+  disabled: boolean;
+}
+export interface MenuPopupState {
+  entering: boolean;
+  exiting: boolean;
+  side: Side;
+}
+export interface MenuItemState {
+  highlighted: boolean;
+  disabled: boolean;
+  focusVisible: boolean;
+  /** Checkbox and radio items only; always `false` on a plain item. */
+  checked: boolean;
+}
+export interface MenuTriggerProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /**
+   * Must render a `<button>`, for example an `IconButton` for a row's "…" menu:
+   * `render={<IconButton label="More actions" icon={<Ellipsis />} />}`.
+   */
+  render?: RenderProp<MenuTriggerState>;
+  children?: ReactNode;
+}
+export interface MenuPopupProps {
+  /** @default 'bottom' */
+  side?: MenuSide;
+  /** @default 'start' */
+  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 menu when the trigger's text does not (the trigger names it by default). */
+  "aria-label"?: string;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}
+/** What every item kind shares. */
+interface MenuItemBaseProps extends Omit<ComponentPropsWithRef<"div">, "children" | "id"> {
+  /** Typeahead text; defaults to `children` when it is a string. */
+  textValue?: string;
+  disabled?: boolean;
+  /** Called when the item is activated by pointer, touch or keyboard (Enter or Space). */
+  onAction?: () => void;
+  /** Whether activating the item closes the menu. @default true (false for a checkbox item) */
+  closeOnSelect?: boolean;
+  /** A leading glyph (16 px), for example `<Copy />` from `@nizivo/icons`. Decorative. */
+  icon?: ReactNode;
+  /**
+   * A keyboard shortcut drawn at the end with `Kbd` (`"mod+d"`), and announced through
+   * `aria-keyshortcuts`. A visual hint: the app implements the shortcut itself.
+   */
+  shortcut?: string;
+  /** @default 'neutral' */
+  tone?: MenuItemTone;
+  children: ReactNode;
+}
+export interface MenuItemProps extends MenuItemBaseProps {
+  /** Makes the item a link item: it renders an `<a>` and Enter follows it (§9.3 rule 3). */
+  href?: string;
+  target?: HTMLAttributeAnchorTarget;
+  rel?: string;
+  download?: boolean | string;
+  hrefLang?: string;
+  ping?: string;
+  referrerPolicy?: HTMLAttributeReferrerPolicy;
+  /**
+   * Renders a `<div>`, or an `<a>` with `href`. A router link works through `render`:
+   * `render={<Link href="/orders" />}` (the element's `href` makes it a link item, §9.3 rule 3).
+   */
+  render?: RenderProp<MenuItemState>;
+}
+export interface MenuCheckboxItemProps extends MenuItemBaseProps {
+  checked?: boolean;
+  /**
+   * The popup unmounts on close, so the Root keeps an uncontrolled item's state, keyed by the item's
+   * text (`textValue`, or string `children`): two checkbox items with the same text in one menu share
+   * it, and an item with neither starts from `defaultChecked` on every open. Use `checked` for state
+   * the app owns.
+   */
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean, details: ChangeDetails<MenuCheckedReason>) => void;
+  /** Replaces the check glyph shown while checked. */
+  indicator?: ReactNode;
+  /** Must render a `<div>`. */
+  render?: RenderProp<MenuItemState>;
+}
+export interface MenuRadioGroupProps extends Omit<ComponentPropsWithRef<"section">, "id" | "defaultValue"> {
+  value?: string | null;
+  /**
+   * The popup unmounts on close, so the Root keeps an uncontrolled group's choice, keyed by its
+   * items' `value`s (radio items placed directly, or through fragments and wrapper elements).
+   */
+  defaultValue?: string | null;
+  /** `details.reason` is `'unknown'` with React Aria, which reports no cause. */
+  onValueChange?: (value: string, details: ChangeDetails<MenuCheckedReason>) => void;
+  /** Must render a `<section>`. */
+  render?: RenderProp<Record<string, never>>;
+}
+export interface MenuRadioItemProps extends MenuItemBaseProps {
+  /** The value the group reports when this item is chosen. */
+  value: string;
+  /** Replaces the check glyph shown while chosen. */
+  indicator?: ReactNode;
+  /** Must render a `<div>`. */
+  render?: RenderProp<MenuItemState>;
+}
+type NoState = Record<string, never>;
+export interface MenuGroupProps extends Omit<ComponentPropsWithRef<"section">, "id"> {
+  /** Must render a `<section>`. */
+  render?: RenderProp<NoState>;
+}
+export interface MenuGroupLabelProps extends Omit<ComponentPropsWithRef<"header">, "id"> {
+  /** Must render a `<header>`. */
+  render?: RenderProp<NoState>;
+}
+export interface MenuSeparatorProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** Must render a `<div>`. */
+  render?: RenderProp<NoState>;
+}
+//#endregion
+export type { OpenReason };

package/dist/menu/menu.parts.d.ts

@@ -0,0 +1,6 @@
+import { MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger } from "./menu.client.js";
+declare namespace menu_parts_d_exports {
+  export { MenuCheckboxItem as CheckboxItem, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuPopup as Popup, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger };
+}
+//#endregion
+export { MenuCheckboxItem as CheckboxItem, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuPopup as Popup, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger, menu_parts_d_exports };

package/dist/menu/menu.parts.js

@@ -0,0 +1,17 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger } from "./menu.client.js";
+//#region src/menu/menu.parts.ts
+var menu_parts_exports = /* @__PURE__ */ __exportAll({
+	CheckboxItem: () => MenuCheckboxItem,
+	Group: () => MenuGroup,
+	GroupLabel: () => MenuGroupLabel,
+	Item: () => MenuItem,
+	Popup: () => MenuPopup,
+	RadioGroup: () => MenuRadioGroup,
+	RadioItem: () => MenuRadioItem,
+	Root: () => MenuRoot,
+	Separator: () => MenuSeparator,
+	Trigger: () => MenuTrigger
+});
+//#endregion
+export { MenuCheckboxItem as CheckboxItem, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuPopup as Popup, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger, menu_parts_exports };

package/dist/meter/index.d.ts

@@ -0,0 +1,2 @@
+import { Meter, MeterProps, MeterState, MeterTone } from "./meter.js";
+export { Meter, type MeterProps, type MeterState, type MeterTone };

package/dist/meter/index.js

@@ -0,0 +1 @@
+export { Meter } from "./meter.js";

package/dist/meter/meter.d.ts

@@ -0,0 +1,43 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/meter/meter.d.ts
+/** The colour of the optimum region. Outside it the browser's ranges pick warning, then critical. */
+export type MeterTone = "brand" | "success" | "warning" | "critical" | "neutral";
+export interface MeterState {
+  tone: MeterTone;
+  /** The value clamped to `min…max`. */
+  value: number;
+  min: number;
+  max: number;
+}
+export interface MeterProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** A measurement within a known range (storage used, stock left), not progress. Clamped to `min…max`. */
+  value: number;
+  /** @default 0 */
+  min?: number;
+  /** Must be above `min`. @default 100 */
+  max?: number;
+  /** Upper end of the low range. */
+  low?: number;
+  /** Lower end of the high range. */
+  high?: number;
+  /**
+   * The best value. Without it the browser puts the optimum in the middle of the range. For a quota or
+   * usage meter where high is bad, set `optimum={min}`; for stock, where low is bad, set `optimum={max}`.
+   */
+  optimum?: number;
+  /** The visible name. Without it, name the meter with `aria-label` or `aria-labelledby`. */
+  label?: ReactNode;
+  /** Shows the value beside the label (hidden from assistive technology, which reads the meter itself). @default true */
+  showValue?: boolean;
+  /** @default 'brand' */
+  tone?: MeterTone;
+  /** BCP 47 tag for the percentage. @default 'en-US' */
+  locale?: string;
+  /** Replaces the shown percentage and is read instead of it, for example "310 of 500". */
+  valueText?: string;
+  /** Composition of the root; the native `<meter>` inside keeps its semantics. */
+  render?: RenderProp<MeterState>;
+}
+export declare function Meter({ value, min, max, low, high, optimum, label, showValue, tone, locale, valueText, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, render, className, ...rest }: MeterProps): ReactElement;
+//#endregion

package/dist/meter/meter.js

@@ -0,0 +1,59 @@
+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/meter/meter.tsx
+function Meter({ value, min = 0, max = 100, low, high, optimum, label, showValue = true, tone = "brand", locale = "en-US", valueText, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, render, className, ...rest }) {
+	const labelId = useId();
+	const lo = Number.isFinite(min) ? min : 0;
+	const hi = Number.isFinite(max) && max > lo ? max : lo + 100;
+	const current = Number.isFinite(value) ? Math.min(Math.max(value, lo), hi) : lo;
+	const shown = valueText ?? new Intl.NumberFormat(locale, {
+		style: "percent",
+		maximumFractionDigits: 0
+	}).format((current - lo) / (hi - lo));
+	const hasLabel = label != null;
+	return renderElement("div", render, {
+		tone,
+		value: current,
+		min: lo,
+		max: hi
+	}, {
+		"data-slot": "meter",
+		"data-tone": tone,
+		...rest,
+		className: cx("nz-meter", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [(hasLabel || showValue) && /* @__PURE__ */ jsxs("div", {
+			className: "nz-meter-header",
+			"data-slot": "meter-header",
+			children: [hasLabel && /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: "nz-meter-label",
+				"data-slot": "meter-label",
+				children: label
+			}), showValue && /* @__PURE__ */ jsx("span", {
+				className: "nz-meter-value",
+				"data-slot": "meter-value",
+				"aria-hidden": "true",
+				children: shown
+			})]
+		}), /* @__PURE__ */ jsx("meter", {
+			className: "nz-meter-track",
+			"data-slot": "meter-track",
+			min: lo,
+			max: hi,
+			value: current,
+			low: finite(low),
+			high: finite(high),
+			optimum: finite(optimum),
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy ?? (hasLabel ? labelId : void 0),
+			"aria-valuetext": valueText
+		})] })
+	});
+}
+function finite(value) {
+	return value !== void 0 && Number.isFinite(value) ? value : void 0;
+}
+//#endregion
+export { Meter };

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