@nizivo/react 0.0.0-stage → 0.1.0

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/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 };

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 { Align, Side } from "../contracts/state.js";
+import "../_internal/engine-part.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/native-select/index.d.ts

@@ -0,0 +1,2 @@
+import { NativeSelect, NativeSelectProps, NativeSelectState } from "./native-select.js";
+export { NativeSelect, type NativeSelectProps, type NativeSelectState };

package/dist/native-select/index.js

@@ -0,0 +1 @@
+export { NativeSelect } from "./native-select.js";

package/dist/native-select/native-select.d.ts

@@ -0,0 +1,43 @@
+import { RenderProp } from "../contracts/render.js";
+import { ControlSize } from "../augment.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/native-select/native-select.d.ts
+export interface NativeSelectState {
+  size: ControlSize;
+  /** An error message is presented: the `invalid` prop, or `aria-invalid` from a Field. */
+  invalid: boolean;
+  disabled: boolean;
+}
+export interface NativeSelectProps extends Omit<ComponentPropsWithRef<"select">, "size" | "multiple" | "readOnly"> {
+  /** 32 / 40 / 48 px, the Select trigger's heights. @default 'md' */
+  size?: ControlSize;
+  /**
+   * An error message is presented for this select (§8.3). A Field's function child passes
+   * `aria-invalid`, which counts too.
+   */
+  invalid?: boolean;
+  /**
+   * Text of a first, empty option shown until a value is chosen (`value=""`). With `required`,
+   * submitting it fails `valueMissing`. When neither `value` nor `defaultValue` is given, it is
+   * selected initially.
+   */
+  placeholder?: string;
+  /** Decorative icon before the value (`aria-hidden`), as on the Select trigger. */
+  leadingIcon?: ReactNode;
+  /** Replaces the chevron glyph. Decorative. */
+  indicator?: ReactNode;
+  /**
+   * `readOnly` is accepted and dropped, so a Field function child can be spread as it is: a
+   * `<select>` has no read-only state.
+   */
+  readOnly?: boolean | undefined;
+  /**
+   * Composition of the wrapper. `className` and `style` go on the wrapper too; every other prop,
+   * `ref` included, goes on the native `<select>`.
+   */
+  render?: RenderProp<NativeSelectState>;
+  /** `<option>` and `<optgroup>` elements. */
+  children?: ReactNode;
+}
+export declare function NativeSelect({ size, invalid, placeholder, leadingIcon, indicator, readOnly: _readOnly, render, className, style, value, defaultValue, disabled, "aria-invalid": ariaInvalid, children, ...rest }: NativeSelectProps): ReactElement;
+//#endregion

package/dist/native-select/native-select.js

@@ -0,0 +1,56 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { ChevronsUpDownGlyph } from "../_internal/glyphs.js";
+import { stateAttrs } from "../contracts/state.js";
+import { FIELD_CONTROL } from "../_internal/field.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/native-select/native-select.tsx
+function NativeSelect({ size = "md", invalid, placeholder, leadingIcon, indicator, readOnly: _readOnly, render, className, style, value, defaultValue, disabled = false, "aria-invalid": ariaInvalid, children, ...rest }) {
+	const state = {
+		size,
+		invalid: invalid ?? (ariaInvalid === true || ariaInvalid === "true"),
+		disabled
+	};
+	const initial = placeholder !== void 0 && value === void 0 && defaultValue === void 0 ? "" : defaultValue;
+	return renderElement("span", render, state, {
+		"data-slot": "native-select",
+		"data-size": size,
+		...stateAttrs({
+			invalid: state.invalid,
+			disabled
+		}),
+		className: cx("nz-native-select", className),
+		style,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			leadingIcon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-native-select-icon",
+				"data-slot": "native-select-icon",
+				"aria-hidden": "true",
+				children: leadingIcon
+			}),
+			/* @__PURE__ */ jsxs("select", {
+				...rest,
+				...value !== void 0 && { value },
+				...initial !== void 0 && { defaultValue: initial },
+				...disabled && { disabled: true },
+				"aria-invalid": state.invalid || void 0,
+				className: "nz-native-select-trigger",
+				"data-slot": "native-select-trigger",
+				children: [placeholder !== void 0 && /* @__PURE__ */ jsx("option", {
+					value: "",
+					disabled: true,
+					children: placeholder
+				}), children]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-native-select-chevron",
+				"data-slot": "native-select-chevron",
+				"aria-hidden": "true",
+				children: indicator ?? /* @__PURE__ */ jsx(ChevronsUpDownGlyph, {})
+			})
+		] })
+	});
+}
+Object.defineProperty(NativeSelect, FIELD_CONTROL, { value: true });
+//#endregion
+export { NativeSelect };

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

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

package/dist/progress-bar/index.js

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