@nizivo/react 0.0.0-stage → 0.2.0

package/dist/input/input.client.d.ts

@@ -0,0 +1,39 @@
+import { RenderProp } from "../contracts/render.js";
+import { ControlSize } from "../augment.js";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
+//#region src/input/input.client.d.ts
+/** Text-like input types; the others (checkbox, file, date, …) are other components. */
+export type InputType = "text" | "email" | "search" | "password" | "number" | "tel" | "url";
+export interface InputState {
+  size: ControlSize;
+  /** An error message is presented (the Field's, or the `invalid` prop). */
+  invalid: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+}
+export interface InputProps extends Omit<ComponentPropsWithRef<"input">, "type" | "size" | "prefix" | "children"> {
+  /** @default 'text' */
+  type?: InputType;
+  /** 32 / 40 / 48 px, as Button and Select. @default 'md' */
+  size?: ControlSize;
+  /**
+   * An error message is presented for this input (§8.3). Inside a Field, the Field sets it; an
+   * explicit value here wins.
+   */
+  invalid?: boolean;
+  /** Decorative icon before the value (`aria-hidden`). */
+  leadingIcon?: ReactNode;
+  /** Decorative icon after the value (`aria-hidden`). */
+  trailingIcon?: ReactNode;
+  /** Text before the value, such as a currency sign; joined to the input's `aria-describedby`. */
+  prefix?: ReactNode;
+  /** Text after the value, such as a unit; joined to the input's `aria-describedby`. */
+  suffix?: ReactNode;
+  /**
+   * Composition of the root, the bordered box around the native `<input>`. `className` and `style`
+   * go on the root too; every other prop, `ref` included, goes on the `<input>`.
+   */
+  render?: RenderProp<InputState>;
+}
+export declare function Input({ type, size, id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, leadingIcon, trailingIcon, prefix, suffix, render, className, style, ...rest }: InputProps): JSX.Element;
+//#endregion

package/dist/input/input.client.js

@@ -0,0 +1,82 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { stateAttrs } from "../contracts/state.js";
+import { joinIds } from "../_internal/field.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/input/input.client.tsx
+function Input({ type = "text", size = "md", id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, leadingIcon, trailingIcon, prefix, suffix, render, className, style, ...rest }) {
+	const affix = useId();
+	const prefixId = prefix == null ? void 0 : `${affix}-prefix`;
+	const suffixId = suffix == null ? void 0 : `${affix}-suffix`;
+	const field = useFieldControl({
+		id,
+		name,
+		required,
+		disabled,
+		readOnly,
+		invalid: invalid ?? (ariaInvalid === true || ariaInvalid === "true" ? true : void 0),
+		"aria-describedby": joinIds(describedBy, prefixId, suffixId)
+	});
+	const state = {
+		size,
+		invalid: field.invalid,
+		disabled: field.disabled,
+		readOnly: field.readOnly
+	};
+	return renderElement("span", render, state, {
+		"data-slot": "input",
+		"data-size": size,
+		...stateAttrs({
+			invalid: state.invalid,
+			disabled: state.disabled,
+			readOnly: state.readOnly
+		}),
+		className: cx("nz-input", className),
+		style,
+		onMouseDown: focusInput,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			leadingIcon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-input-icon",
+				"data-slot": "input-icon",
+				"aria-hidden": "true",
+				children: leadingIcon
+			}),
+			prefix != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-input-prefix",
+				"data-slot": "input-prefix",
+				id: prefixId,
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...mergeProps(field.controlProps, rest),
+				type,
+				className: "nz-input-control",
+				"data-slot": "input-control"
+			}),
+			suffix != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-input-suffix",
+				"data-slot": "input-suffix",
+				id: suffixId,
+				children: suffix
+			}),
+			trailingIcon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-input-icon",
+				"data-slot": "input-icon",
+				"aria-hidden": "true",
+				children: trailingIcon
+			})
+		] })
+	});
+}
+function focusInput(event) {
+	const input = event.currentTarget.querySelector(":scope > .nz-input-control");
+	if (input === null || event.target === input || input.disabled) return;
+	event.preventDefault();
+	input.focus();
+}
+//#endregion
+export { Input };

package/dist/kbd/index.d.ts

@@ -0,0 +1,2 @@
+import { Kbd, KbdPlatform, KbdProps } from "./kbd.js";
+export { Kbd, type KbdPlatform, type KbdProps };

package/dist/kbd/index.js

@@ -0,0 +1 @@
+export { Kbd } from "./kbd.js";

package/dist/kbd/kbd.d.ts

@@ -0,0 +1,19 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/kbd/kbd.d.ts
+/** The `data-platform` values of the glyph spans; they match `data-nz-platform` (§8.3). */
+export type KbdPlatform = "apple" | "other";
+export interface KbdProps extends ComponentPropsWithRef<"kbd"> {
+  /**
+   * A shortcut such as `"mod+k"` or `"mod+shift+d"`, drawn for both platforms (`⌘⇧D` and
+   * `Ctrl+Shift+D`); CSS shows the one `data-nz-platform` names, and `other` when no ancestor sets it.
+   * `mod` is ⌘ on Apple platforms and Ctrl elsewhere; the plus key is `plus` (`"mod+plus"`, or
+   * `"mod++"`). Replaces `children`.
+   */
+  keys?: string;
+  /** Literal key text, for example `<Kbd>esc</Kbd>` or `<Kbd>↑↓</Kbd>`. */
+  children?: ReactNode;
+  render?: RenderProp<Record<string, never>>;
+}
+export declare function Kbd({ keys, render, className, children, ...rest }: KbdProps): ReactElement;
+//#endregion

package/dist/kbd/kbd.js

@@ -0,0 +1,68 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { splitKeys } from "../_internal/keys.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/kbd/kbd.tsx
+/** Key name → [Apple glyph, other platforms]. Anything else is drawn as written; one letter is uppercased. */
+const KEYS = {
+	mod: ["⌘", "Ctrl"],
+	cmd: ["⌘", "Win"],
+	command: ["⌘", "Win"],
+	meta: ["⌘", "Win"],
+	ctrl: ["⌃", "Ctrl"],
+	control: ["⌃", "Ctrl"],
+	alt: ["⌥", "Alt"],
+	option: ["⌥", "Alt"],
+	shift: ["⇧", "Shift"],
+	enter: ["↵", "Enter"],
+	return: ["↵", "Enter"],
+	esc: ["esc", "esc"],
+	escape: ["esc", "esc"],
+	tab: ["⇥", "Tab"],
+	backspace: ["⌫", "Backspace"],
+	delete: ["⌦", "Del"],
+	space: ["Space", "Space"],
+	plus: ["+", "+"],
+	up: ["↑", "↑"],
+	down: ["↓", "↓"],
+	left: ["←", "←"],
+	right: ["→", "→"]
+};
+/** `"mod+shift+d"` → `["⌘⇧D", "Ctrl+Shift+D"]`: Apple glyphs run together, others join with `+`. */
+function formatKeys(keys) {
+	const apple = [];
+	const other = [];
+	for (const key of splitKeys(keys)) {
+		const known = KEYS[key.toLowerCase()];
+		const text = key.length === 1 ? key.toUpperCase() : key;
+		apple.push(known?.[0] ?? text);
+		other.push(known?.[1] ?? text);
+	}
+	return [apple.join(""), other.join("+")];
+}
+function Kbd({ keys, render, className, children, ...rest }) {
+	return renderElement("kbd", render, {}, {
+		"data-slot": "kbd",
+		...rest,
+		className: cx("nz-kbd", className),
+		children: keys === void 0 ? children : glyphs(keys)
+	});
+}
+/** One span per platform when they differ; CSS hides the other (kbd.css). */
+function glyphs(keys) {
+	const [apple, other] = formatKeys(keys);
+	if (apple === other) return apple;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "nz-kbd-glyphs",
+		"data-slot": "kbd-glyphs",
+		"data-platform": "apple",
+		children: apple
+	}), /* @__PURE__ */ jsx("span", {
+		className: "nz-kbd-glyphs",
+		"data-slot": "kbd-glyphs",
+		"data-platform": "other",
+		children: other
+	})] });
+}
+//#endregion
+export { Kbd };

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

@@ -0,0 +1,2 @@
+import { KpiTile, KpiTileProps, KpiTileState, KpiTileTone } from "./kpi-tile.js";
+export { KpiTile, type KpiTileProps, type KpiTileState, type KpiTileTone };

package/dist/kpi-tile/index.js

@@ -0,0 +1 @@
+export { KpiTile } from "./kpi-tile.js";

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

@@ -0,0 +1,5 @@
+import { OpenReason } from "../contracts/details.js";
+import { MenuCheckboxItemProps, MenuCheckedReason, MenuGroupLabelProps, MenuGroupProps, MenuItemProps, MenuItemState, MenuItemTone, MenuLabels, MenuPopupProps, MenuPopupState, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuSide, MenuTriggerProps, MenuTriggerState } from "./menu.contract.js";
+import { MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger } from "./menu.client.js";
+import { menu_parts_d_exports } from "./menu.parts.js";
+export { menu_parts_d_exports as Menu, MenuCheckboxItem, type MenuCheckboxItemProps, type MenuCheckedReason, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, MenuItem, type MenuItemProps, type MenuItemState, type MenuItemTone, type MenuLabels, MenuPopup, type MenuPopupProps, type MenuPopupState, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuRoot, type MenuRootProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuTrigger, type MenuTriggerProps, type MenuTriggerState, type OpenReason };

package/dist/menu/index.js

@@ -0,0 +1,3 @@
+import { MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger } from "./menu.client.js";
+import { menu_parts_exports } from "./menu.parts.js";
+export { menu_parts_exports as Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger };

package/dist/menu/menu.client.d.ts

@@ -0,0 +1,14 @@
+import { MenuCheckboxItemProps, MenuGroupLabelProps, MenuGroupProps, MenuItemProps, MenuPopupProps, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuTriggerProps } from "./menu.contract.js";
+import { JSX } from "react";
+//#region src/menu/menu.client.d.ts
+export declare function MenuRoot(props: MenuRootProps): JSX.Element;
+export declare function MenuTrigger({ className, render, ...rest }: MenuTriggerProps): JSX.Element;
+export declare function MenuPopup({ side, align, sideOffset, container, "aria-label": label, className, style, children }: MenuPopupProps): JSX.Element;
+export declare function MenuItem({ className, tone, icon, shortcut, textValue, "aria-keyshortcuts": keyshortcuts, href, render, children, ...rest }: MenuItemProps): JSX.Element;
+export declare function MenuCheckboxItem({ className, tone, icon, shortcut, indicator, textValue, "aria-keyshortcuts": keyshortcuts, render, children, ...rest }: MenuCheckboxItemProps): JSX.Element;
+export declare function MenuRadioGroup({ className, render, ...rest }: MenuRadioGroupProps): JSX.Element;
+export declare function MenuRadioItem({ className, tone, icon, shortcut, indicator, textValue, "aria-keyshortcuts": keyshortcuts, render, children, ...rest }: MenuRadioItemProps): JSX.Element;
+export declare function MenuGroup({ className, render, ...rest }: MenuGroupProps): JSX.Element;
+export declare function MenuGroupLabel({ className, render, ...rest }: MenuGroupLabelProps): JSX.Element;
+export declare function MenuSeparator({ className, render, ...rest }: MenuSeparatorProps): JSX.Element;
+//#endregion

package/dist/menu/menu.client.js

@@ -0,0 +1,152 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { toRenderFn } from "../contracts/render.js";
+import { CheckGlyph } from "../_internal/glyphs.js";
+import { ariaKeyShortcuts } from "../_internal/keys.js";
+import { Kbd } from "../kbd/kbd.js";
+import { CheckboxItem, Group, GroupLabel, Item, Popup, RadioGroup, RadioItem, Root, Separator, Trigger } from "../_engines/react-aria/menu.client.js";
+import { isValidElement } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/menu/menu.client.tsx
+const renderDiv = toRenderFn(void 0, "div");
+function MenuRoot(props) {
+	return /* @__PURE__ */ jsx(Root, { ...props });
+}
+function MenuTrigger({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Trigger, {
+		...rest,
+		className: cx("nz-menu-trigger", className),
+		"data-slot": "menu-trigger",
+		render: toRenderFn(render, "button")
+	});
+}
+function MenuPopup({ side = "bottom", align = "start", sideOffset = 8, container, "aria-label": label, className, style, children }) {
+	return /* @__PURE__ */ jsx(Popup, {
+		side,
+		align,
+		sideOffset,
+		container,
+		className: cx("nz-menu-popup", className),
+		style,
+		"data-slot": "menu-popup",
+		render: renderDiv,
+		list: {
+			className: "nz-menu-list",
+			"data-slot": "menu-list",
+			"aria-label": label
+		},
+		children
+	});
+}
+/**
+* The row's content in Figma order. The inner spans carry classes only: every item kind shares them,
+* and a `data-slot` belongs to one component. `indicator` is set only on checkbox and radio items.
+*/
+function itemContent(icon, children, shortcut, indicator) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		icon != null && /* @__PURE__ */ jsx("span", {
+			className: "nz-menu-item-icon",
+			"aria-hidden": "true",
+			children: icon
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "nz-menu-item-label",
+			children
+		}),
+		shortcut !== void 0 && /* @__PURE__ */ jsx(Kbd, {
+			keys: shortcut,
+			className: "nz-menu-item-shortcut",
+			"aria-hidden": "true"
+		}),
+		indicator !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "nz-menu-item-indicator",
+			"aria-hidden": "true",
+			children: indicator ?? /* @__PURE__ */ jsx(CheckGlyph, {})
+		})
+	] });
+}
+/** Typeahead text and the announced shortcut, shared by every item kind. */
+function itemBehaviour(children, textValue, shortcut, keyshortcuts) {
+	return {
+		textValue: textValue ?? (typeof children === "string" ? children : void 0),
+		"aria-keyshortcuts": keyshortcuts ?? (shortcut === void 0 ? void 0 : ariaKeyShortcuts(shortcut))
+	};
+}
+/** The `href` of a `render={<Link href="…" />}` element, which makes the item a link item (§9.3 rule 3). */
+function elementHref(render) {
+	if (!isValidElement(render)) return void 0;
+	const { href } = render.props;
+	return typeof href === "string" ? href : void 0;
+}
+function MenuItem({ className, tone = "neutral", icon, shortcut, textValue, "aria-keyshortcuts": keyshortcuts, href, render, children, ...rest }) {
+	const link = href ?? elementHref(render);
+	return /* @__PURE__ */ jsx(Item, {
+		...rest,
+		...itemBehaviour(children, textValue, shortcut, keyshortcuts),
+		className: cx("nz-menu-item", className),
+		"data-slot": "menu-item",
+		"data-tone": tone,
+		"data-focus-inset": "",
+		href: link,
+		render: toRenderFn(render, link === void 0 ? "div" : "a"),
+		children: itemContent(icon, children, shortcut)
+	});
+}
+function MenuCheckboxItem({ className, tone = "neutral", icon, shortcut, indicator, textValue, "aria-keyshortcuts": keyshortcuts, render, children, ...rest }) {
+	return /* @__PURE__ */ jsx(CheckboxItem, {
+		...rest,
+		...itemBehaviour(children, textValue, shortcut, keyshortcuts),
+		className: cx("nz-menu-checkbox-item", className),
+		"data-slot": "menu-checkbox-item",
+		"data-tone": tone,
+		"data-focus-inset": "",
+		render: toRenderFn(render, "div"),
+		children: itemContent(icon, children, shortcut, indicator ?? null)
+	});
+}
+function MenuRadioGroup({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		...rest,
+		className: cx("nz-menu-radio-group", className),
+		"data-slot": "menu-radio-group",
+		render: toRenderFn(render, "section")
+	});
+}
+function MenuRadioItem({ className, tone = "neutral", icon, shortcut, indicator, textValue, "aria-keyshortcuts": keyshortcuts, render, children, ...rest }) {
+	return /* @__PURE__ */ jsx(RadioItem, {
+		...rest,
+		...itemBehaviour(children, textValue, shortcut, keyshortcuts),
+		className: cx("nz-menu-radio-item", className),
+		"data-slot": "menu-radio-item",
+		"data-tone": tone,
+		"data-focus-inset": "",
+		render: toRenderFn(render, "div"),
+		children: itemContent(icon, children, shortcut, indicator ?? null)
+	});
+}
+function MenuGroup({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Group, {
+		...rest,
+		className: cx("nz-menu-group", className),
+		"data-slot": "menu-group",
+		render: toRenderFn(render, "section")
+	});
+}
+function MenuGroupLabel({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(GroupLabel, {
+		...rest,
+		className: cx("nz-menu-group-label", className),
+		"data-slot": "menu-group-label",
+		render: toRenderFn(render, "header")
+	});
+}
+function MenuSeparator({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		...rest,
+		className: cx("nz-menu-separator", className),
+		"data-slot": "menu-separator",
+		render: toRenderFn(render, "div")
+	});
+}
+//#endregion
+export { MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger };