@nizivo/react 0.0.0-stage → 0.1.0

package/dist/card/card.js

@@ -0,0 +1,62 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/card/card.tsx
+function CardRoot({ tone = "surface", padding = "md", elevation = 0, render, className, ...rest }) {
+	return renderElement("div", render, {
+		tone,
+		padding,
+		elevation
+	}, {
+		"data-slot": "card",
+		"data-tone": tone,
+		"data-padding": padding,
+		"data-elevation": elevation === 1 ? "1" : void 0,
+		"data-nz-scheme": tone === "inverse" ? "inverse" : void 0,
+		...rest,
+		className: cx("nz-card", className)
+	});
+}
+function CardHeader({ render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "card-header",
+		...rest,
+		className: cx("nz-card-header", className)
+	});
+}
+function CardTitle({ level = 3, render, className, ...rest }) {
+	return renderElement(`h${level}`, render, {}, {
+		"data-slot": "card-title",
+		...rest,
+		className: cx("nz-card-title", className)
+	});
+}
+function CardDescription({ render, className, ...rest }) {
+	return renderElement("p", render, {}, {
+		"data-slot": "card-description",
+		...rest,
+		className: cx("nz-card-description", className)
+	});
+}
+function CardAction({ render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "card-action",
+		...rest,
+		className: cx("nz-card-action", className)
+	});
+}
+function CardBody({ render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "card-body",
+		...rest,
+		className: cx("nz-card-body", className)
+	});
+}
+function CardFooter({ render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "card-footer",
+		...rest,
+		className: cx("nz-card-footer", className)
+	});
+}
+//#endregion
+export { CardAction, CardBody, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };

package/dist/card/card.parts.d.ts

@@ -0,0 +1,6 @@
+import { CardAction, CardBody, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle } from "./card.js";
+declare namespace card_parts_d_exports {
+  export { CardAction as Action, CardBody as Body, CardDescription as Description, CardFooter as Footer, CardHeader as Header, CardRoot as Root, CardTitle as Title };
+}
+//#endregion
+export { CardAction as Action, CardBody as Body, CardDescription as Description, CardFooter as Footer, CardHeader as Header, CardRoot as Root, CardTitle as Title, card_parts_d_exports };

package/dist/card/card.parts.js

@@ -0,0 +1,14 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { CardAction, CardBody, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle } from "./card.js";
+//#region src/card/card.parts.ts
+var card_parts_exports = /* @__PURE__ */ __exportAll({
+	Action: () => CardAction,
+	Body: () => CardBody,
+	Description: () => CardDescription,
+	Footer: () => CardFooter,
+	Header: () => CardHeader,
+	Root: () => CardRoot,
+	Title: () => CardTitle
+});
+//#endregion
+export { CardAction as Action, CardBody as Body, CardDescription as Description, CardFooter as Footer, CardHeader as Header, CardRoot as Root, CardTitle as Title, card_parts_exports };

package/dist/card/index.d.ts

@@ -0,0 +1,3 @@
+import { CardAction, CardActionProps, CardBody, CardBodyProps, CardDescription, CardDescriptionProps, CardElevation, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardPadding, CardRoot, CardRootProps, CardRootState, CardTitle, CardTitleLevel, CardTitleProps, CardTone } from "./card.js";
+import { card_parts_d_exports } from "./card.parts.js";
+export { card_parts_d_exports as Card, CardAction, type CardActionProps, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, type CardElevation, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, CardRoot, type CardRootProps, type CardRootState, CardTitle, type CardTitleLevel, type CardTitleProps, type CardTone };

package/dist/card/index.js

@@ -0,0 +1,3 @@
+import { CardAction, CardBody, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle } from "./card.js";
+import { card_parts_exports } from "./card.parts.js";
+export { card_parts_exports as Card, CardAction, CardBody, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle };

package/dist/checkbox/checkbox.client.d.ts

@@ -0,0 +1,37 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails } from "../contracts/details.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/checkbox/checkbox.client.d.ts
+/** `'indeterminate'` is the mixed state of a "select all" box; it submits as unchecked. */
+export type CheckboxCheckedState = boolean | "indeterminate";
+/** Every change comes from the native `change` event: a click, Space, or a click on the label. */
+export type CheckboxChangeReason = "input";
+/** What a `render` function receives for the root `<label>`. */
+export interface CheckboxState {
+  /** An error message is presented (the Field's, or the `invalid` prop). */
+  invalid: boolean;
+  disabled: boolean;
+  required: boolean;
+}
+export interface CheckboxProps extends Omit<ComponentPropsWithRef<"input">, "type" | "checked" | "defaultChecked" | "children" | "readOnly" | "size"> {
+  /** Controlled state. `'indeterminate'` shows the dash; a click then reports `true`. */
+  checked?: CheckboxCheckedState;
+  /** Uncontrolled initial state. @default false */
+  defaultChecked?: CheckboxCheckedState;
+  /** Called after the consumer's own `onChange`, unless it called `preventDefault()`. */
+  onCheckedChange?: (checked: boolean, details: ChangeDetails<CheckboxChangeReason>) => void;
+  /** An error message is presented for this box. Inside a Field, the Field decides. */
+  invalid?: boolean;
+  /** Replaces the internal check and dash glyphs (decorative), shown while checked or mixed. */
+  indicator?: ReactNode;
+  /** Composition of the root `<label>`, the hit target. */
+  render?: RenderProp<CheckboxState>;
+  /** The label, after the box. Without one, name the box with `aria-label`. */
+  children?: ReactNode;
+}
+/**
+ * `className` and `style` go on the root `<label>`; every other attribute, `ref` included, goes on the
+ * native `<input>`, so form libraries (`register`, `setFocus`) reach the real control.
+ */
+export declare function Checkbox({ id, name, required, disabled, invalid, "aria-describedby": describedBy, checked, defaultChecked, onCheckedChange, indicator, render, className, style, children, ...rest }: CheckboxProps): ReactElement;
+//#endregion

package/dist/checkbox/checkbox.client.js

@@ -0,0 +1,81 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { CheckGlyph, MinusGlyph } from "../_internal/glyphs.js";
+import { details } from "../contracts/details.js";
+import { stateAttrs } from "../contracts/state.js";
+import { presented } from "../_internal/field.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { useLayoutEffect, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/checkbox/checkbox.client.tsx
+/**
+* `className` and `style` go on the root `<label>`; every other attribute, `ref` included, goes on the
+* native `<input>`, so form libraries (`register`, `setFocus`) reach the real control.
+*/
+function Checkbox({ id, name, required, disabled, invalid, "aria-describedby": describedBy, checked, defaultChecked, onCheckedChange, indicator, render, className, style, children, ...rest }) {
+	const field = useFieldControl({
+		id,
+		name,
+		required,
+		disabled,
+		invalid,
+		"aria-describedby": describedBy
+	});
+	const { readOnly: _readOnly, ...control } = field.controlProps;
+	const input = useRef(null);
+	const initiallyMixed = useRef(defaultChecked === "indeterminate");
+	const mixed = checked === void 0 ? void 0 : checked === "indeterminate";
+	useLayoutEffect(() => {
+		const element = input.current;
+		if (element === null) return;
+		if (mixed !== void 0) element.indeterminate = mixed;
+		else if (initiallyMixed.current) {
+			element.indeterminate = true;
+			initiallyMixed.current = false;
+		}
+	}, [mixed]);
+	const own = {
+		...control,
+		ref: input,
+		checked: checked === void 0 ? void 0 : checked === true,
+		defaultChecked: defaultChecked === void 0 ? void 0 : defaultChecked === true,
+		onChange(event) {
+			if (mixed === true) event.currentTarget.indeterminate = true;
+			onCheckedChange?.(event.currentTarget.checked, details("input", event.nativeEvent));
+		}
+	};
+	const state = {
+		invalid: field.invalid,
+		disabled: field.disabled,
+		required: field.required
+	};
+	return renderElement("label", render, state, {
+		"data-slot": "checkbox",
+		...stateAttrs(state),
+		className: cx("nz-checkbox nz-hit-target", className),
+		style,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("input", {
+				...mergeProps(own, rest),
+				type: "checkbox",
+				className: "nz-checkbox-input",
+				"data-slot": "checkbox-input"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-checkbox-indicator",
+				"data-slot": "checkbox-indicator",
+				"aria-hidden": "true",
+				children: indicator ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(CheckGlyph, {}), /* @__PURE__ */ jsx(MinusGlyph, {})] })
+			}),
+			presented(children) && /* @__PURE__ */ jsx("span", {
+				className: "nz-checkbox-label",
+				"data-slot": "checkbox-label",
+				children
+			})
+		] })
+	});
+}
+//#endregion
+export { Checkbox };

package/dist/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxChangeReason, CheckboxCheckedState, CheckboxProps, CheckboxState } from "./checkbox.client.js";
+export { Checkbox, type CheckboxChangeReason, type CheckboxCheckedState, type CheckboxProps, type CheckboxState };

package/dist/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from "./checkbox.client.js";

package/dist/config/config.client.d.ts

@@ -0,0 +1,9 @@
+import { JSX, ReactNode } from "react";
+//#region src/config/config.client.d.ts
+export interface NizivoConfigProps {
+  /** BCP 47 tag used by engine-backed parts. @default 'en-US' */
+  locale?: string;
+  children?: ReactNode;
+}
+export declare function NizivoConfig({ locale, children }: NizivoConfigProps): JSX.Element;
+//#endregion

package/dist/config/config.client.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext, use, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/config/config.client.tsx
+const ConfigContext = createContext({ locale: "en-US" });
+function NizivoConfig({ locale = "en-US", children }) {
+	const value = useMemo(() => ({ locale }), [locale]);
+	return /* @__PURE__ */ jsx(ConfigContext, {
+		value,
+		children
+	});
+}
+/** The resolved locale. Internal: engine roots read it through EngineLocale. */
+function useResolvedLocale() {
+	return use(ConfigContext).locale;
+}
+//#endregion
+export { NizivoConfig, useResolvedLocale };

package/dist/config/index.d.ts

@@ -0,0 +1,2 @@
+import { NizivoConfig, NizivoConfigProps } from "./config.client.js";
+export { NizivoConfig, type NizivoConfigProps };

package/dist/config/index.js

@@ -0,0 +1 @@
+export { NizivoConfig } from "./config.client.js";

package/dist/container/container.d.ts

@@ -0,0 +1,13 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/container/container.d.ts
+export interface ContainerProps extends ComponentPropsWithRef<"div"> {
+  /** Another element, for example `render={<main />}`. */
+  render?: RenderProp<Record<string, never>>;
+}
+/**
+ * Centres page content: at most `--nz-layout-content-max` wide (358, 976, 1280 px by viewport), with
+ * the responsive page margin `--nz-grid-margin` (16, 24, 32 px) on both sides.
+ */
+export declare function Container({ render, className, ...rest }: ContainerProps): ReactElement;
+//#endregion

package/dist/container/container.js

@@ -0,0 +1,16 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/container/container.tsx
+/**
+* Centres page content: at most `--nz-layout-content-max` wide (358, 976, 1280 px by viewport), with
+* the responsive page margin `--nz-grid-margin` (16, 24, 32 px) on both sides.
+*/
+function Container({ render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "container",
+		...rest,
+		className: cx("nz-container", className)
+	});
+}
+//#endregion
+export { Container };

package/dist/container/index.d.ts

@@ -0,0 +1,2 @@
+import { Container, ContainerProps } from "./container.js";
+export { Container, type ContainerProps };

package/dist/container/index.js

@@ -0,0 +1 @@
+export { Container } from "./container.js";

package/dist/contracts/details.d.ts

@@ -0,0 +1,13 @@
+//#region src/contracts/details.d.ts
+/**
+ * The second argument of every `on<X>Change(value, details)`. `reason` is Nizivo-owned: where the
+ * engine reports no cause, it is `'unknown'`, never a guess.
+ */
+export interface ChangeDetails<R extends string> {
+  reason: R | "unknown";
+  event?: Event;
+}
+/** Why an overlay opened or closed (§12.2). */
+export type OpenReason = "trigger" | "escape" | "outside-press" | "close-part" | "item-press" | "hidden" | "programmatic";
+export declare function details<R extends string = never>(reason: NoInfer<R> | "unknown", event?: Event): ChangeDetails<R>;
+//#endregion

package/dist/contracts/details.js

@@ -0,0 +1,9 @@
+//#region src/contracts/details.ts
+function details(reason, event) {
+	return event === void 0 ? { reason } : {
+		reason,
+		event
+	};
+}
+//#endregion
+export { details };

package/dist/contracts/index.d.ts

@@ -0,0 +1,5 @@
+import { RenderProp, renderElement, toRenderFn } from "./render.js";
+import { ChangeDetails, OpenReason, details } from "./details.js";
+import { mergeProps } from "./merge-props.js";
+import { Align, Orientation, STATE_ATTR_NAMES, Side, StateAttrs, StateInput, stateAttrs } from "./state.js";
+export { type Align, type ChangeDetails, type OpenReason, type Orientation, type RenderProp, STATE_ATTR_NAMES, type Side, type StateAttrs, type StateInput, details, mergeProps, renderElement, stateAttrs, toRenderFn };

package/dist/contracts/index.js

@@ -0,0 +1,5 @@
+import { mergeProps } from "./merge-props.js";
+import { renderElement, toRenderFn } from "./render.js";
+import { details } from "./details.js";
+import { STATE_ATTR_NAMES, stateAttrs } from "./state.js";
+export { STATE_ATTR_NAMES, details, mergeProps, renderElement, stateAttrs, toRenderFn };

package/dist/contracts/merge-props.d.ts

@@ -0,0 +1,16 @@
+//#region src/contracts/merge-props.d.ts
+type Props = Record<string, unknown>;
+/**
+ * Merges prop objects from left ("ours") to right ("theirs"):
+ * - `className` is concatenated, ours first, without repeating a class;
+ * - `style` is shallow-merged, theirs winning;
+ * - `on*` handlers are chained theirs-first, and ours skip when the event was `defaultPrevented`;
+ * - refs are merged into one callback ref;
+ * - any other key: the right-most defined value wins, and `undefined` never overrides.
+ *
+ * A function is created only when both sides supply one, so a server component that merges a
+ * consumer element never synthesises a handler or ref (functions cannot cross the RSC boundary).
+ */
+export declare function mergeProps(...sources: ReadonlyArray<Props | undefined>): Props;
+//#endregion
+export {};

package/dist/contracts/merge-props.js

@@ -0,0 +1,76 @@
+import { cx } from "../_internal/cx.js";
+//#region src/contracts/merge-props.ts
+/**
+* Merges prop objects from left ("ours") to right ("theirs"):
+* - `className` is concatenated, ours first, without repeating a class;
+* - `style` is shallow-merged, theirs winning;
+* - `on*` handlers are chained theirs-first, and ours skip when the event was `defaultPrevented`;
+* - refs are merged into one callback ref;
+* - any other key: the right-most defined value wins, and `undefined` never overrides.
+*
+* A function is created only when both sides supply one, so a server component that merges a
+* consumer element never synthesises a handler or ref (functions cannot cross the RSC boundary).
+*/
+function mergeProps(...sources) {
+	const out = {};
+	for (const source of sources) {
+		if (source === void 0) continue;
+		for (const key of Object.keys(source)) {
+			const theirs = source[key];
+			if (theirs === void 0) continue;
+			const ours = out[key];
+			out[key] = ours === void 0 ? theirs : mergeValue(key, ours, theirs);
+		}
+	}
+	return out;
+}
+function mergeValue(key, ours, theirs) {
+	if (key === "className" && typeof ours === "string" && typeof theirs === "string") return cx(ours, theirs);
+	if (key === "style" && isObject(ours) && isObject(theirs)) return {
+		...ours,
+		...theirs
+	};
+	if (key === "ref" && isRef(ours) && isRef(theirs)) return mergeRefs(ours, theirs);
+	if (/^on[A-Z]/.test(key) && isFunction(ours) && isFunction(theirs)) return chain(theirs, ours);
+	return theirs;
+}
+function chain(theirs, ours) {
+	return (...args) => {
+		theirs(...args);
+		if (!isPrevented(args[0])) ours(...args);
+	};
+}
+function isPrevented(event) {
+	return isObject(event) && event["defaultPrevented"] === true;
+}
+function isObject(value) {
+	return typeof value === "object" && value !== null;
+}
+function isFunction(value) {
+	return typeof value === "function";
+}
+function isRefObject(value) {
+	return isObject(value) && "current" in value;
+}
+function isRef(value) {
+	return isFunction(value) || isRefObject(value);
+}
+/** Assigns `node` and returns the ref's React 19 cleanup, if it returned one. */
+function assignRef(ref, node) {
+	if (isFunction(ref)) {
+		const cleanup = ref(node);
+		return isFunction(cleanup) ? cleanup : void 0;
+	}
+	ref.current = node;
+}
+/** One callback ref for both; honours React 19 ref cleanups. */
+function mergeRefs(a, b) {
+	return (node) => {
+		const cleanups = [assignRef(a, node), assignRef(b, node)];
+		return () => {
+			cleanups.forEach((cleanup, i) => cleanup ? cleanup() : assignRef(i === 0 ? a : b, null));
+		};
+	};
+}
+//#endregion
+export { mergeProps };

package/dist/contracts/render.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+//#region src/contracts/render.d.ts
+/**
+ * Composition without `asChild` or a polymorphic `as`:
+ * - element form: `render={<Link href="/orders" />}`, serializable from Server Components;
+ * - function form: `render={(props, state) => <a {...props} />}`, client code only.
+ */
+export type RenderProp<S> = ReactElement | ((props: Record<string, unknown>, state: S) => ReactElement);
+/**
+ * Renders `tag` with `props`, or the consumer's element/function with `props` merged in (ours first).
+ * Element form: `mergeProps` semantics (the element's props win), except that the part's own
+ * `PART_OWNED` attributes win over the element's.
+ */
+export declare function renderElement<S>(tag: string, render: RenderProp<S> | undefined, state: S, props: Record<string, unknown>): ReactElement;
+/** Normalises any render prop to the function form that engine adapters receive. */
+export declare function toRenderFn<S>(render: RenderProp<S> | undefined, tag: string): (props: Record<string, unknown>, state: S) => ReactElement;
+//#endregion

package/dist/contracts/render.js

@@ -0,0 +1,43 @@
+import { mergeProps } from "./merge-props.js";
+import { cloneElement, createElement, isValidElement } from "react";
+//#region src/contracts/render.ts
+/**
+* The presentational attributes (the `presentational` group of contracts/vocabulary.json). They
+* describe the part, so when a part renders through an element, the part's values win. That element
+* may be a server Button that RSC has already rendered to a host `<button data-slot="button">`.
+*/
+const PART_OWNED = [
+	"data-slot",
+	"data-variant",
+	"data-size",
+	"data-tone",
+	"data-full-width",
+	"data-padding",
+	"data-elevation",
+	"data-shape",
+	"data-gap",
+	"data-span",
+	"data-span-sm",
+	"data-span-lg",
+	"data-ratio"
+];
+/**
+* Renders `tag` with `props`, or the consumer's element/function with `props` merged in (ours first).
+* Element form: `mergeProps` semantics (the element's props win), except that the part's own
+* `PART_OWNED` attributes win over the element's.
+*/
+function renderElement(tag, render, state, props) {
+	if (typeof render === "function") return render(props, state);
+	if (isValidElement(render)) {
+		const merged = mergeProps(props, render.props);
+		for (const name of PART_OWNED) if (props[name] !== void 0) merged[name] = props[name];
+		return cloneElement(render, merged);
+	}
+	return createElement(tag, props);
+}
+/** Normalises any render prop to the function form that engine adapters receive. */
+function toRenderFn(render, tag) {
+	return (props, state) => renderElement(tag, render, state, props);
+}
+//#endregion
+export { PART_OWNED, renderElement, toRenderFn };

package/dist/contracts/state.d.ts

@@ -0,0 +1,42 @@
+//#region src/contracts/state.d.ts
+/** Value sets of the valued attributes, in contracts/vocabulary.json order (checked by the test). */
+export declare const SIDES: readonly ["top", "right", "bottom", "left"];
+export declare const ALIGNS: readonly ["start", "center", "end"];
+export declare const ORIENTATIONS: readonly ["horizontal", "vertical"];
+export declare const MIRRORS: readonly ["rtl"];
+export type Side = (typeof SIDES)[number];
+export type Align = (typeof ALIGNS)[number];
+export type Orientation = (typeof ORIENTATIONS)[number];
+/** Engine-independent state, as adapters derive it from the engine's render state. */
+export interface StateInput {
+  open?: boolean | undefined;
+  entering?: boolean | undefined;
+  exiting?: boolean | undefined;
+  side?: Side | undefined;
+  align?: Align | undefined;
+  nestedOpen?: boolean | undefined;
+  highlighted?: boolean | undefined;
+  selected?: boolean | undefined;
+  checked?: boolean | undefined;
+  indeterminate?: boolean | undefined;
+  pressed?: boolean | undefined;
+  focusVisible?: boolean | undefined;
+  disabled?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  required?: boolean | undefined;
+  invalid?: boolean | undefined;
+  placeholder?: boolean | undefined;
+  orientation?: Orientation | undefined;
+  loading?: boolean | undefined;
+  pending?: boolean | undefined;
+  empty?: boolean | undefined;
+  error?: boolean | undefined;
+  mirror?: (typeof MIRRORS)[number] | undefined;
+}
+/** `data-*` attributes keyed by name; presence attributes carry `""`. */
+export type StateAttrs = Record<`data-${string}`, string>;
+/** Every attribute name `stateAttrs()` can emit. */
+export declare const STATE_ATTR_NAMES: readonly string[];
+/** Maps state to vocabulary attributes. False and absent states emit nothing. */
+export declare function stateAttrs(state: StateInput): StateAttrs;
+//#endregion

package/dist/contracts/state.js

@@ -0,0 +1,42 @@
+//#region src/contracts/state.ts
+const PRESENCE = [
+	["open", "data-open"],
+	["entering", "data-entering"],
+	["exiting", "data-exiting"],
+	["nestedOpen", "data-nested-open"],
+	["highlighted", "data-highlighted"],
+	["selected", "data-selected"],
+	["checked", "data-checked"],
+	["indeterminate", "data-indeterminate"],
+	["pressed", "data-pressed"],
+	["focusVisible", "data-focus-visible"],
+	["disabled", "data-disabled"],
+	["readOnly", "data-readonly"],
+	["required", "data-required"],
+	["invalid", "data-invalid"],
+	["placeholder", "data-placeholder"],
+	["loading", "data-loading"],
+	["pending", "data-pending"],
+	["empty", "data-empty"],
+	["error", "data-error"]
+];
+const VALUED = [
+	["side", "data-side"],
+	["align", "data-align"],
+	["orientation", "data-orientation"],
+	["mirror", "data-mirror"]
+];
+/** Every attribute name `stateAttrs()` can emit. */
+const STATE_ATTR_NAMES = [...PRESENCE, ...VALUED].map(([, name]) => name);
+/** Maps state to vocabulary attributes. False and absent states emit nothing. */
+function stateAttrs(state) {
+	const out = {};
+	for (const [key, name] of PRESENCE) if (state[key] === true) out[name] = "";
+	for (const [key, name] of VALUED) {
+		const value = state[key];
+		if (value !== void 0) out[name] = value;
+	}
+	return out;
+}
+//#endregion
+export { STATE_ATTR_NAMES, stateAttrs };

package/dist/css/alert.css

@@ -0,0 +1,2 @@
+@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
+@layer nz.components{.nz-alert{--_nz-alert-bg:var(--nz-bg-info-subtle);--_nz-alert-icon-fg:var(--nz-icon-info);align-items:flex-start;gap:var(--nz-alert-gap,var(--nz-space-3));padding-block:var(--nz-alert-padding-block,var(--nz-space-3));padding-inline:var(--nz-alert-padding-inline,var(--nz-space-4));border-radius:var(--nz-alert-radius,var(--nz-radius-lg));background:var(--nz-alert-bg,var(--_nz-alert-bg));color:var(--nz-text-primary);display:flex}.nz-alert-icon{inline-size:var(--nz-size-icon-md);block-size:var(--nz-size-icon-md);color:var(--nz-alert-icon-fg,var(--_nz-alert-icon-fg));font-size:var(--nz-size-icon-md);flex:none;display:inline-flex;&>svg{block-size:100%;inline-size:100%}}.nz-alert-content{gap:var(--nz-space-0-5);flex-direction:column;flex:1;min-inline-size:0;display:flex}.nz-alert-title{font:var(--nz-alert-title-font,var(--nz-font-label-m-strong))}.nz-alert-description{color:var(--nz-text-secondary);font:var(--nz-alert-description-font,var(--nz-font-body-m))}.nz-alert-action{gap:var(--nz-space-2);flex-wrap:wrap;margin-block-start:var(--nz-space-2);display:flex}.nz-alert-dismiss{flex:none}.nz-alert>.nz-icon-button.nz-alert-dismiss{--_nz-icon-button-fg:var(--nz-alert-dismiss-fg,var(--nz-icon-secondary));margin-block:calc((var(--nz-size-icon-md) - var(--nz-size-control-sm)) / 2);margin-inline:calc((var(--nz-size-icon-sm) - var(--nz-size-control-sm)) / 2)}.nz-alert[data-tone=success]{--_nz-alert-bg:var(--nz-bg-success-subtle);--_nz-alert-icon-fg:var(--nz-icon-success)}.nz-alert[data-tone=warning]{--_nz-alert-bg:var(--nz-bg-warning-subtle);--_nz-alert-icon-fg:var(--nz-icon-warning)}.nz-alert[data-tone=critical]{--_nz-alert-bg:var(--nz-bg-critical-subtle);--_nz-alert-icon-fg:var(--nz-icon-critical)}@media (forced-colors:active){.nz-alert{outline-offset:-1px;outline:1px solid canvastext}}}

package/dist/css/badge.css

@@ -0,0 +1,2 @@
+@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
+@layer nz.components{.nz-badge{--_nz-badge-bg:var(--nz-bg-muted);--_nz-badge-fg:var(--nz-text-secondary);--_nz-badge-dot-bg:var(--nz-icon-secondary);align-items:center;gap:var(--nz-badge-gap,var(--nz-space-1-5));padding-block:var(--nz-space-0-5);padding-inline:var(--nz-badge-padding-inline,var(--nz-space-2));border-radius:var(--nz-badge-radius,var(--nz-radius-full));background:var(--nz-badge-bg,var(--_nz-badge-bg));color:var(--nz-badge-fg,var(--_nz-badge-fg));font:var(--nz-badge-font,var(--nz-font-label-m));white-space:nowrap;display:inline-flex}.nz-badge-dot{inline-size:var(--nz-space-1-5);block-size:var(--nz-space-1-5);border-radius:var(--nz-radius-full);background:var(--nz-badge-dot-bg,var(--_nz-badge-dot-bg));flex:none}.nz-badge[data-tone=success]{--_nz-badge-bg:var(--nz-bg-success-subtle);--_nz-badge-fg:var(--nz-text-success);--_nz-badge-dot-bg:var(--nz-icon-success)}.nz-badge[data-tone=warning]{--_nz-badge-bg:var(--nz-bg-warning-subtle);--_nz-badge-fg:var(--nz-text-warning);--_nz-badge-dot-bg:var(--nz-icon-warning)}.nz-badge[data-tone=critical]{--_nz-badge-bg:var(--nz-bg-critical-subtle);--_nz-badge-fg:var(--nz-text-critical);--_nz-badge-dot-bg:var(--nz-icon-critical)}.nz-badge[data-tone=info]{--_nz-badge-bg:var(--nz-bg-info-subtle);--_nz-badge-fg:var(--nz-text-info);--_nz-badge-dot-bg:var(--nz-icon-info)}.nz-badge[data-tone=brand]{--_nz-badge-bg:var(--nz-bg-brand);--_nz-badge-fg:var(--nz-text-on-brand);--_nz-badge-dot-bg:var(--nz-text-on-brand)}@media (forced-colors:active){.nz-badge{outline-offset:-1px;outline:1px solid canvastext}.nz-badge-dot{forced-color-adjust:none;background:canvastext}}}

package/dist/css/base.css

@@ -0,0 +1,2 @@
+@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
+@layer nz.base{:where(.nz-alert-dismiss,.nz-button,.nz-checkbox-input,.nz-dialog-close,.nz-dialog-trigger,.nz-icon-button,.nz-menu-trigger,.nz-native-select-trigger,.nz-radio-input,.nz-select-trigger,.nz-switch-input,.nz-tab-nav-link,.nz-tabs-tab,.nz-textarea,.nz-tooltip-trigger):is(:focus-visible,[data-focus-visible]){outline:var(--nz-border-width-focus) solid var(--nz-border-focus);outline-offset:2px}:where(.nz-menu-checkbox-item,.nz-menu-item,.nz-menu-radio-item,.nz-select-item):focus-visible{outline:none}:where(.nz-menu-checkbox-item,.nz-menu-item,.nz-menu-radio-item,.nz-select-item)[data-focus-visible],:where(.nz-segmented-control-item):is(:has(>input:focus-visible),[data-focus-visible]),:where(.nz-input):focus-within{outline:var(--nz-border-width-focus) solid var(--nz-border-focus);outline-offset:2px}[data-focus-inset]:is(:focus-visible,[data-focus-visible],:focus-within),[data-focus-inset]:has(>input:focus-visible){outline-offset:-2px}:where(.nz-alert-dismiss,.nz-button,.nz-checkbox-input,.nz-dialog-close,.nz-dialog-trigger,.nz-icon-button,.nz-menu-checkbox-item,.nz-menu-item,.nz-menu-radio-item,.nz-menu-trigger,.nz-native-select-trigger,.nz-radio-input,.nz-segmented-control-item,.nz-select-item,.nz-select-trigger,.nz-switch-input,.nz-tab-nav-link,.nz-tabs-tab,.nz-textarea,.nz-tooltip-trigger){touch-action:pan-x pan-y pinch-zoom}.nz-hit-target{position:relative}@media (pointer:coarse){.nz-hit-target:not([data-hit-inset]):after{content:"";inset:min(0px, calc((100% - var(--nz-size-touch-min)) / 2));position:absolute}}[data-nz-touch-targets=always] .nz-hit-target:not([data-hit-inset]):after{content:"";inset:min(0px, calc((100% - var(--nz-size-touch-min)) / 2));position:absolute}:dir(rtl) [data-mirror=rtl]{scale:-1 1}html{scroll-padding-block:var(--nz-layout-top-inset,0px) calc(var(--nz-layout-bottom-inset,0px) + var(--nz-toast-inset,0px))}@media (forced-colors:active){:where(.nz-checkbox-input,.nz-dialog-popup,.nz-menu-popup,.nz-radio-input,.nz-select-popup,.nz-switch-input,.nz-tooltip-popup){border:1px solid canvastext}:where(.nz-switch-thumb){forced-color-adjust:none;background:canvastext}:where(.nz-meter-track)::-moz-meter-bar{forced-color-adjust:none;background:highlight;outline-color:canvastext}:where(.nz-progress-bar-track)::-moz-progress-bar{forced-color-adjust:none;background:highlight;outline-color:canvastext}:where(.nz-meter-track)::-webkit-meter-even-less-good-value{forced-color-adjust:none;background:highlight;outline-color:canvastext}:where(.nz-meter-track)::-webkit-meter-optimum-value{forced-color-adjust:none;background:highlight;outline-color:canvastext}:where(.nz-meter-track)::-webkit-meter-suboptimum-value{forced-color-adjust:none;background:highlight;outline-color:canvastext}:where(.nz-progress-bar-track)::-webkit-progress-value{forced-color-adjust:none;background:highlight;outline-color:canvastext}:where(.nz-checkbox-input,.nz-radio-input,.nz-switch-input):checked{forced-color-adjust:none;background:highlight;outline-color:canvastext}:where(.nz-segmented-control-item):has(>input:checked){outline:2px solid highlight}:where(.nz-checkbox-input):indeterminate,:where(.nz-tab-nav-link)[aria-current=page]:before{forced-color-adjust:none;background:highlight;outline-color:canvastext}:where(.nz-icon-button)[aria-pressed=true],:where(.nz-menu-checkbox-item,.nz-menu-radio-item)[data-checked],:where(.nz-select-item)[data-selected]{color:highlighttext;forced-color-adjust:none;background:highlight;outline-color:canvastext}:where(.nz-tabs-tab)[data-selected]:before{forced-color-adjust:none;background:highlight;outline-color:canvastext}}}@layer nz.utilities{.nz-visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}}

package/dist/css/button.css

@@ -0,0 +1,2 @@
+@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
+@layer nz.components{.nz-button{--_nz-button-bg:var(--nz-bg-surface);--_nz-button-bg-hover:var(--nz-bg-hover);--_nz-button-bg-pressed:var(--nz-bg-pressed);--_nz-button-fg:var(--nz-text-primary);--_nz-button-border:var(--nz-border-default);--_nz-button-border-hover:var(--nz-border-strong);--_nz-button-shadow:none;--_nz-button-height:var(--nz-size-control-md);--_nz-button-padding-inline:var(--nz-space-4);--_nz-button-gap:var(--nz-space-2);--_nz-button-radius:var(--nz-radius-md);--_nz-button-font:var(--nz-font-label-m);--_nz-button-icon-size:var(--nz-size-icon-sm);box-sizing:border-box;justify-content:center;align-items:center;gap:var(--nz-button-gap,var(--_nz-button-gap));block-size:var(--nz-button-height,var(--_nz-button-height));padding-inline:var(--nz-button-padding-inline,var(--_nz-button-padding-inline));border:var(--nz-border-width-default) solid var(--nz-button-border,var(--_nz-button-border));border-radius:var(--nz-button-radius,var(--_nz-button-radius));background:var(--nz-button-bg,var(--_nz-button-bg));color:var(--nz-button-fg,var(--_nz-button-fg));box-shadow:var(--nz-button-shadow,var(--_nz-button-shadow));font:var(--nz-button-font,var(--_nz-button-font));cursor:pointer;transition:background-color var(--nz-duration-fast) var(--nz-easing-standard), border-color var(--nz-duration-fast) var(--nz-easing-standard), scale var(--nz-duration-instant) var(--nz-easing-standard);text-decoration:none;display:inline-flex;@media (hover:hover){&:hover:not(:disabled,[data-disabled],[aria-disabled=true]){background:var(--nz-button-bg-hover,var(--_nz-button-bg-hover));border-color:var(--nz-button-border-hover,var(--_nz-button-border-hover))}}&:active:not(:disabled,[data-disabled],[aria-disabled=true]){background:var(--nz-button-bg-pressed,var(--_nz-button-bg-pressed));border-color:var(--nz-button-border-hover,var(--_nz-button-border-hover));scale:var(--nz-scale-press)}&:focus-visible{box-shadow:var(--nz-button-shadow,var(--_nz-button-shadow)), 0 0 0 calc(var(--nz-border-width-focus) + 4px) var(--nz-focus-halo)}&:is(:disabled,[data-disabled]){background:var(--nz-button-bg-disabled,var(--nz-bg-disabled));color:var(--nz-button-fg-disabled,var(--nz-text-disabled));border-color:var(--nz-border-subtle);box-shadow:none;cursor:not-allowed}&[data-pending]{cursor:progress}&[data-full-width]{inline-size:100%}}.nz-button[data-variant=primary]{--_nz-button-bg:var(--nz-bg-brand);--_nz-button-bg-hover:var(--nz-bg-brand-hover);--_nz-button-bg-pressed:var(--nz-bg-brand-pressed);--_nz-button-fg:var(--nz-text-on-brand);--_nz-button-border:transparent;--_nz-button-border-hover:transparent;--_nz-button-shadow:var(--nz-elevation-button)}.nz-button[data-variant=tertiary]{--_nz-button-bg:transparent;--_nz-button-border:transparent;--_nz-button-border-hover:transparent}.nz-button[data-variant=critical]{--_nz-button-bg:var(--nz-bg-critical);--_nz-button-bg-hover:var(--nz-bg-critical-hover);--_nz-button-bg-pressed:var(--nz-bg-critical-hover);--_nz-button-fg:var(--nz-text-on-critical);--_nz-button-border:transparent;--_nz-button-border-hover:transparent}.nz-button[data-variant=accent]{--_nz-button-bg:var(--nz-bg-accent);--_nz-button-bg-hover:var(--nz-bg-accent-hover);--_nz-button-bg-pressed:var(--nz-bg-accent-hover);--_nz-button-fg:var(--nz-text-on-accent);--_nz-button-border:transparent;--_nz-button-border-hover:transparent}.nz-button[data-size=sm]{--_nz-button-height:var(--nz-size-control-sm);--_nz-button-padding-inline:var(--nz-space-3);--_nz-button-gap:var(--nz-space-1-5);--_nz-button-radius:var(--nz-radius-sm)}.nz-button[data-size=lg]{--_nz-button-height:var(--nz-size-control-lg);--_nz-button-padding-inline:var(--nz-space-5);--_nz-button-font:var(--nz-font-label-l);--_nz-button-icon-size:var(--nz-size-icon-md)}.nz-button-icon{inline-size:var(--_nz-button-icon-size);block-size:var(--_nz-button-icon-size);font-size:var(--_nz-button-icon-size);display:inline-flex}.nz-button[data-pending] .nz-glyph-spinner{animation:nz-button-spin var(--nz-duration-spin) linear infinite}.nz-button-pending-label{white-space:nowrap;text-overflow:ellipsis;text-align:center;grid-area:1/2;display:none;overflow:hidden}.nz-button-pending-label+.nz-button-label{grid-area:1/2}@media (prefers-reduced-motion:reduce){.nz-button[data-pending]{grid-auto-flow:column;align-content:center;display:inline-grid}.nz-button-pending-label{display:block}.nz-button-pending-label+.nz-button-label{opacity:0}}[data-nz-motion=reduce] .nz-button[data-pending]{grid-auto-flow:column;align-content:center;display:inline-grid}[data-nz-motion=reduce] .nz-button-pending-label{display:block}[data-nz-motion=reduce] .nz-button-pending-label+.nz-button-label{opacity:0}@keyframes nz-button-spin{to{rotate:1turn}}@media (forced-colors:active){.nz-button{border-color:buttontext}}}

package/dist/css/card.css

@@ -0,0 +1,2 @@
+@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
+@layer nz.components{.nz-card{--_nz-card-bg:var(--nz-bg-surface);--_nz-card-border:var(--nz-border-subtle);--_nz-card-padding:var(--nz-space-6);--_nz-card-shadow:none;gap:var(--nz-card-gap,var(--nz-space-5));padding:var(--nz-card-padding,var(--_nz-card-padding));border:var(--nz-border-width-default) solid var(--nz-card-border,var(--_nz-card-border));border-radius:var(--nz-card-radius,var(--nz-radius-xl));background:var(--nz-card-bg,var(--_nz-card-bg));box-shadow:var(--nz-card-shadow,var(--_nz-card-shadow));color:var(--nz-text-primary);flex-direction:column;display:flex}.nz-card[data-tone=subtle]{--_nz-card-bg:var(--nz-bg-subtle);--_nz-card-border:transparent}.nz-card[data-padding=sm]{--_nz-card-padding:var(--nz-space-5)}.nz-card[data-elevation="1"]{--_nz-card-shadow:var(--nz-elevation-1)}.nz-card[data-tone=inverse]{--_nz-card-border:transparent}.nz-card-header{align-items:center;gap:var(--nz-space-1) var(--nz-space-3);grid-template-columns:minmax(0,1fr);display:grid}.nz-card-title{font:var(--nz-card-title-font,var(--nz-font-heading-h4));letter-spacing:var(--nz-tracking-heading-h4);grid-column:1;margin:0}.nz-card-description{color:var(--nz-text-secondary);font:var(--nz-font-body-m);grid-column:1;margin:0}.nz-card-action{align-items:center;gap:var(--nz-space-2);color:var(--nz-icon-secondary);grid-area:1/2;display:flex}.nz-card-body{min-inline-size:0}.nz-card-footer{align-items:center;gap:var(--nz-space-3);flex-wrap:wrap;display:flex}@media (forced-colors:active){.nz-card{border-color:canvastext}}}

package/dist/css/checkbox.css

@@ -0,0 +1,2 @@
+@layer nz.tokens, nz.themes, nz.reset, nz.base, nz.components, nz.patterns, nz.utilities;
+@layer nz.components{.nz-checkbox{--_nz-checkbox-size:1.25rem;justify-content:start;align-items:start;column-gap:var(--nz-checkbox-gap,var(--nz-space-2));color:var(--nz-text-primary);font:var(--nz-font-body-m);cursor:pointer;grid-template-columns:auto auto;display:inline-grid}.nz-checkbox-input,.nz-checkbox-indicator{grid-area:1/1;margin-block-start:calc((1lh - var(--nz-checkbox-size,var(--_nz-checkbox-size))) / 2)}.nz-checkbox-input{--_nz-checkbox-bg:var(--nz-bg-surface);--_nz-checkbox-border:var(--nz-border-control);appearance:none;box-sizing:border-box;inline-size:var(--nz-checkbox-size,var(--_nz-checkbox-size));block-size:var(--nz-checkbox-size,var(--_nz-checkbox-size));border:var(--nz-border-width-default) solid var(--_nz-checkbox-border);border-radius:var(--nz-checkbox-radius,var(--nz-radius-xs));background:var(--_nz-checkbox-bg);font:inherit;cursor:inherit;transition:background-color var(--nz-duration-fast) var(--nz-easing-standard), border-color var(--nz-duration-fast) var(--nz-easing-standard);margin-block-end:0;margin-inline:0}.nz-checkbox-input[aria-invalid=true]:not(:checked,:indeterminate){--_nz-checkbox-border:var(--nz-border-critical)}.nz-checkbox-input:is(:checked,:indeterminate){--_nz-checkbox-bg:var(--nz-checkbox-accent,var(--nz-bg-brand));--_nz-checkbox-border:transparent}@media (hover:hover){.nz-checkbox:hover>.nz-checkbox-input:not(:disabled,:checked,:indeterminate){--_nz-checkbox-border:var(--nz-border-control-hover)}}.nz-checkbox-input:disabled{--_nz-checkbox-bg:var(--nz-bg-disabled);--_nz-checkbox-border:var(--nz-border-subtle)}.nz-checkbox-input:disabled:is(:checked,:indeterminate){--_nz-checkbox-bg:var(--nz-bg-muted);--_nz-checkbox-border:transparent}.nz-checkbox-indicator{inline-size:var(--nz-checkbox-size,var(--_nz-checkbox-size));block-size:var(--nz-checkbox-size,var(--_nz-checkbox-size));color:var(--nz-text-on-brand);pointer-events:none;visibility:hidden;place-items:center;font-size:.875rem;display:grid;&>*{grid-area:1/1}}.nz-checkbox-input:is(:checked,:indeterminate)+.nz-checkbox-indicator{visibility:visible}.nz-checkbox-input:indeterminate+.nz-checkbox-indicator>.nz-glyph-check,.nz-checkbox-input:not(:indeterminate)+.nz-checkbox-indicator>.nz-glyph-minus{display:none}.nz-checkbox-input:disabled+.nz-checkbox-indicator{color:var(--nz-text-disabled)}.nz-checkbox-label{grid-area:1/2}.nz-checkbox:is([data-disabled],:has(>.nz-checkbox-input:disabled)){color:var(--nz-text-disabled);cursor:not-allowed}@media (forced-colors:active){.nz-checkbox-input:is(:checked,:indeterminate){forced-color-adjust:none;background:highlight}.nz-checkbox-input:disabled:is(:checked,:indeterminate){background:graytext}.nz-checkbox-indicator{color:highlighttext;forced-color-adjust:none}}}