@nizivo/react 0.1.0 → 0.2.1

package/dist/ranked-list/ranked-list.js

@@ -0,0 +1,153 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { InlineError } from "../inline-error/inline-error.js";
+import { dataStatusAttrs } from "../_internal/data-status.js";
+import { NumberValue } from "../number-value/number-value.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+import { Children, cloneElement, isValidElement, useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ranked-list/ranked-list.tsx
+/** Percent of the track, 0–100 with up to 3 decimals: deterministic attribute text. */
+function percent(value, max) {
+	const ratio = max > 0 && Number.isFinite(value) ? Math.min(1, Math.max(0, value / max)) : 0;
+	return `${Number((ratio * 100).toFixed(3))}%`;
+}
+function Bar({ width }) {
+	return /* @__PURE__ */ jsx("svg", {
+		className: "nz-ranked-list-bar",
+		"data-slot": "ranked-list-bar",
+		width: "100%",
+		height: "100%",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ jsx("rect", {
+			className: "nz-ranked-list-fill",
+			width,
+			height: "100%",
+			rx: "3"
+		})
+	});
+}
+/** `template` with `{label}` replaced by the title node, or dropped when there is no title. */
+function fill(template, title) {
+	const at = template.indexOf("{label}");
+	if (at < 0) return template;
+	const before = template.slice(0, at);
+	const after = template.slice(at + 7);
+	if (title == null) return `${before.trimEnd()}${after.trimStart()}`.trim();
+	if (typeof title === "string" || typeof title === "number") return `${before}${title}${after}`;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		before,
+		title,
+		after
+	] });
+}
+/** A row of the ready geometry with no content, for loading and for the reserved height. */
+function PlaceholderRow({ skeleton }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "nz-ranked-list-placeholder",
+		"data-slot": "ranked-list-placeholder",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "nz-ranked-list-row",
+			children: [skeleton && /* @__PURE__ */ jsx(Skeleton, { className: "nz-ranked-list-skeleton-label" }), skeleton && /* @__PURE__ */ jsx(Skeleton, { className: "nz-ranked-list-skeleton-value" })]
+		}), /* @__PURE__ */ jsx("span", { className: "nz-ranked-list-track" })]
+	});
+}
+function RankedListRoot({ title, titleLevel = 3, action, max, format, locale, status = "ready", pending = false, empty, error, rows = 5, labels, render, className, children, ...rest }) {
+	const titleId = `${useId()}-title`;
+	const items = Children.toArray(children);
+	const ranked = items.filter((child) => isValidElement(child) && child.type === RankedListItem);
+	const resolved = status === "ready" && items.length === 0 ? "empty" : status;
+	const leader = max ?? Math.max(0, ...ranked.map((item) => item.props.value));
+	const reserve = Array.from({ length: Math.max(0, Math.floor(rows)) }, (_, index) => index);
+	const Heading = `h${titleLevel}`;
+	let body;
+	if (resolved === "ready") body = /* @__PURE__ */ jsx("ol", {
+		className: "nz-ranked-list-list",
+		"data-slot": "ranked-list-list",
+		"aria-labelledby": title != null ? titleId : void 0,
+		children: items.map((child) => isValidElement(child) && child.type === RankedListItem ? cloneElement(child, {
+			max: child.props.max ?? leader,
+			format: child.props.format ?? format,
+			locale: child.props.locale ?? locale
+		}) : child)
+	});
+	else {
+		const message = resolved === "loading" ? /* @__PURE__ */ jsx("span", {
+			className: "nz-visually-hidden",
+			children: fill(labels?.loading ?? "Loading {label}", title)
+		}) : resolved === "error" ? error ?? /* @__PURE__ */ jsx(InlineError, { children: fill(labels?.error ?? "Could not load {label}", title) }) : empty ?? /* @__PURE__ */ jsx("p", {
+			className: "nz-ranked-list-empty",
+			children: fill(labels?.empty ?? "No data", title)
+		});
+		body = /* @__PURE__ */ jsxs("div", {
+			className: "nz-ranked-list-status",
+			"data-slot": "ranked-list-status",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "nz-ranked-list-reserve",
+				"aria-hidden": "true",
+				children: reserve.map((index) => /* @__PURE__ */ jsx(PlaceholderRow, { skeleton: resolved === "loading" }, index))
+			}), /* @__PURE__ */ jsx("div", {
+				className: "nz-ranked-list-message",
+				"data-slot": "ranked-list-message",
+				children: message
+			})]
+		});
+	}
+	const busy = resolved === "ready" && pending;
+	return renderElement("div", render, {
+		status: resolved,
+		pending: busy
+	}, {
+		"data-slot": "ranked-list",
+		...dataStatusAttrs(resolved, busy),
+		...rest,
+		className: cx("nz-card", "nz-ranked-list", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [(title != null || action != null) && /* @__PURE__ */ jsxs("div", {
+			className: "nz-ranked-list-header",
+			"data-slot": "ranked-list-header",
+			children: [title != null && /* @__PURE__ */ jsx(Heading, {
+				className: "nz-ranked-list-title",
+				"data-slot": "ranked-list-title",
+				id: titleId,
+				children: title
+			}), action]
+		}), body] })
+	});
+}
+function RankedListItem({ label, value, max, format, locale = "en-US", render, className, ...rest }) {
+	const width = percent(value, max ?? value);
+	const ratio = Number.parseFloat(width) / 100;
+	return renderElement("li", render, { ratio }, {
+		"data-slot": "ranked-list-item",
+		...rest,
+		className: cx("nz-ranked-list-item", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			className: "nz-ranked-list-row",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "nz-ranked-list-label",
+				"data-slot": "ranked-list-label",
+				children: label
+			}), /* @__PURE__ */ jsx(NumberValue, {
+				className: "nz-ranked-list-value",
+				value,
+				format: format ?? {},
+				locale
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "nz-ranked-list-track",
+			"data-slot": "ranked-list-track",
+			children: /* @__PURE__ */ jsx(Bar, { width })
+		})] })
+	});
+}
+/** "View all": a real link, at least 24 px tall (WCAG 2.5.8; figma/04 issue 7). */
+function RankedListAction({ render, className, ...rest }) {
+	return renderElement("a", render, {}, {
+		"data-slot": "ranked-list-action",
+		...rest,
+		className: cx("nz-ranked-list-action", className)
+	});
+}
+//#endregion
+export { RankedListAction, RankedListItem, RankedListRoot };

package/dist/ranked-list/ranked-list.parts.d.ts

@@ -0,0 +1,6 @@
+import { RankedListAction, RankedListItem, RankedListRoot } from "./ranked-list.js";
+declare namespace ranked_list_parts_d_exports {
+  export { RankedListAction as Action, RankedListItem as Item, RankedListRoot as Root };
+}
+//#endregion
+export { RankedListAction as Action, RankedListItem as Item, RankedListRoot as Root, ranked_list_parts_d_exports };

package/dist/ranked-list/ranked-list.parts.js

@@ -0,0 +1,10 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { RankedListAction, RankedListItem, RankedListRoot } from "./ranked-list.js";
+//#region src/ranked-list/ranked-list.parts.ts
+var ranked_list_parts_exports = /* @__PURE__ */ __exportAll({
+	Action: () => RankedListAction,
+	Item: () => RankedListItem,
+	Root: () => RankedListRoot
+});
+//#endregion
+export { RankedListAction as Action, RankedListItem as Item, RankedListRoot as Root, ranked_list_parts_exports };

package/dist/search-field/index.d.ts

@@ -0,0 +1,2 @@
+import { SearchField, SearchFieldLabels, SearchFieldProps, SearchFieldState } from "./search-field.client.js";
+export { SearchField, type SearchFieldLabels, type SearchFieldProps, type SearchFieldState };

package/dist/search-field/index.js

@@ -0,0 +1 @@
+export { SearchField } from "./search-field.client.js";

package/dist/search-field/search-field.client.d.ts

@@ -0,0 +1,55 @@
+import { RenderProp } from "../contracts/render.js";
+import { ControlSize } from "../augment.js";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
+//#region src/search-field/search-field.client.d.ts
+/** SearchField's own strings (§16.4): serialisable, English defaults. */
+export interface SearchFieldLabels {
+  /**
+   * The input's name when nothing else names it: no Field, `aria-label` or `aria-labelledby`. The
+   * placeholder is not a label. @default 'Search'
+   */
+  label: string;
+  /** The clear button's name. @default 'Clear search' */
+  clear: string;
+}
+export interface SearchFieldState {
+  size: ControlSize;
+  /** An error message is presented (the Field's, or the `invalid` prop). */
+  invalid: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  pending: boolean;
+  /** The input has a value, so the clear button shows. */
+  filled: boolean;
+}
+export interface SearchFieldProps extends Omit<ComponentPropsWithRef<"input">, "type" | "size" | "prefix" | "children"> {
+  /** 32 / 40 / 48 px, as Input, Button and Select (Figma's 42 is off the scale). @default 'md' */
+  size?: ControlSize;
+  /**
+   * An error message is presented for this field (§8.3). Inside a Field, the Field sets it; an
+   * explicit value here wins.
+   */
+  invalid?: boolean;
+  /**
+   * A keyboard shortcut such as `"mod+k"`, drawn at the end of the field with `Kbd` (⌘K on Apple
+   * platforms, Ctrl+K elsewhere) and announced through `aria-keyshortcuts`. The app binds the key
+   * itself (focus the field through its `ref`), as with IconButton's `shortcut`; hidden while the
+   * field has a value.
+   */
+  shortcut?: string;
+  /** Replaces the magnifier before the value (decorative, 16 px). */
+  icon?: ReactNode;
+  /**
+   * Results are on their way: the magnifier becomes a spinner and the root carries `data-pending`.
+   * Announce the outcome (the number of results) where the results are. @default false
+   */
+  pending?: boolean;
+  labels?: Partial<SearchFieldLabels>;
+  /**
+   * Composition of the root, the `<search>` box around the native `<input>`. `className` and
+   * `style` go on the root too; every other prop, `ref` included, goes on the `<input>`.
+   */
+  render?: RenderProp<SearchFieldState>;
+}
+export declare function SearchField({ size, id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, shortcut, icon, pending, labels: labelsProp, render, className, style, ...rest }: SearchFieldProps): JSX.Element;
+//#endregion

package/dist/search-field/search-field.client.js

@@ -0,0 +1,136 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { useLabels } from "../config/config.client.js";
+import { CloseGlyph, SearchGlyph, SpinnerGlyph } from "../_internal/glyphs.js";
+import { stateAttrs } from "../contracts/state.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { ariaKeyShortcuts } from "../_internal/keys.js";
+import { Kbd } from "../kbd/kbd.js";
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/search-field/search-field.client.tsx
+function hasText(value) {
+	return value != null && String(value) !== "";
+}
+/** The native value setter, so React sees the change, then the `input` event a user's edit fires. */
+function clearInput(input) {
+	Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(input, "");
+	input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+function SearchField({ size = "md", id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, shortcut, icon, pending = false, labels: labelsProp, render, className, style, ...rest }) {
+	const labels = useLabels("searchField", labelsProp);
+	const field = useFieldControl({
+		id,
+		name,
+		required,
+		disabled,
+		readOnly,
+		invalid: invalid ?? (ariaInvalid === true || ariaInvalid === "true" ? true : void 0),
+		"aria-describedby": describedBy
+	});
+	const input = useRef(null);
+	const [typed, setTyped] = useState(() => hasText(rest.defaultValue));
+	const filled = rest.value === void 0 ? typed : hasText(rest.value);
+	useEffect(() => {
+		const form = input.current?.form;
+		if (form == null) return void 0;
+		let timer;
+		const onReset = () => {
+			timer = setTimeout(() => setTyped((input.current?.value ?? "") !== ""), 0);
+		};
+		form.addEventListener("reset", onReset);
+		return () => {
+			form.removeEventListener("reset", onReset);
+			clearTimeout(timer);
+		};
+	}, []);
+	const unnamed = !field.inField && rest["aria-label"] === void 0 && rest["aria-labelledby"] === void 0;
+	const editable = !field.disabled && !field.readOnly;
+	const own = {
+		...field.controlProps,
+		ref: input,
+		"aria-label": unnamed ? labels?.label ?? "Search" : void 0,
+		"aria-keyshortcuts": shortcut === void 0 ? void 0 : ariaKeyShortcuts(shortcut),
+		onChange(event) {
+			setTyped(event.currentTarget.value !== "");
+		},
+		onKeyDown(event) {
+			const target = event.currentTarget;
+			if (event.key !== "Escape" || target.value === "" || target.readOnly) return;
+			event.preventDefault();
+			event.stopPropagation();
+			clearInput(target);
+		}
+	};
+	const state = {
+		size,
+		invalid: field.invalid,
+		disabled: field.disabled,
+		readOnly: field.readOnly,
+		pending,
+		filled
+	};
+	return renderElement("search", render, state, {
+		"data-slot": "search-field",
+		"data-size": size,
+		...stateAttrs({
+			invalid: state.invalid,
+			disabled: state.disabled,
+			readOnly: state.readOnly,
+			pending
+		}),
+		className: cx("nz-search-field", className),
+		style,
+		onMouseDown: focusInput,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-search-field-icon",
+				"data-slot": "search-field-icon",
+				"aria-hidden": "true",
+				children: pending ? /* @__PURE__ */ jsx(SpinnerGlyph, {}) : icon ?? /* @__PURE__ */ jsx(SearchGlyph, {})
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...mergeProps(own, rest),
+				type: "search",
+				className: "nz-search-field-control",
+				"data-slot": "search-field-control"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "nz-search-field-clear",
+				"data-slot": "search-field-clear",
+				"aria-label": labels?.clear ?? "Clear search",
+				tabIndex: -1,
+				hidden: !filled || !editable,
+				onClick: clearAndFocus,
+				children: /* @__PURE__ */ jsx(CloseGlyph, {})
+			}),
+			shortcut !== void 0 && /* @__PURE__ */ jsx("span", {
+				className: "nz-search-field-shortcut",
+				"data-slot": "search-field-shortcut",
+				"aria-hidden": "true",
+				hidden: filled,
+				children: /* @__PURE__ */ jsx(Kbd, { keys: shortcut })
+			})
+		] })
+	});
+}
+function control(root) {
+	return root?.querySelector(":scope > .nz-search-field-control") ?? null;
+}
+function focusInput(event) {
+	const input = control(event.currentTarget);
+	if (input === null || event.target === input || input.disabled) return;
+	event.preventDefault();
+	input.focus();
+}
+function clearAndFocus(event) {
+	const input = control(event.currentTarget.parentElement);
+	if (input === null) return;
+	clearInput(input);
+	input.focus();
+}
+//#endregion
+export { SearchField };

package/dist/select/select.contract.d.ts

@@ -1,8 +1,8 @@
 import { RenderProp } from "../contracts/render.js";
 import { ControlSize } from "../augment.js";
 import { ChangeDetails, OpenReason } from "../contracts/details.js";
-import { Align, Side } from "../contracts/state.js";
 import "../_internal/engine-part.js";
+import { Align, Side } from "../contracts/state.js";
 import { CSSProperties, ComponentPropsWithRef, ReactElement, ReactNode } from "react";
 //#region src/select/select.contract.d.ts
 export type SelectValueReason = "item-press" | "keyboard" | "typeahead" | "form-reset";

package/dist/sidebar/index.d.ts

@@ -0,0 +1,4 @@
+import { SidebarContent, SidebarContentProps, SidebarFooter, SidebarFooterProps, SidebarHeader, SidebarHeaderProps, SidebarLabels, SidebarRoot, SidebarRootProps } from "./sidebar.js";
+import { SidebarItem, SidebarItemProps } from "./sidebar-item.client.js";
+import { sidebar_parts_d_exports } from "./sidebar.parts.js";
+export { sidebar_parts_d_exports as Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarLabels, SidebarRoot, type SidebarRootProps };

package/dist/sidebar/index.js

@@ -0,0 +1,4 @@
+import { SidebarContent, SidebarFooter, SidebarHeader, SidebarRoot } from "./sidebar.js";
+import { SidebarItem } from "./sidebar-item.client.js";
+import { sidebar_parts_exports } from "./sidebar.parts.js";
+export { sidebar_parts_exports as Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarRoot };

package/dist/sidebar/sidebar-item.client.d.ts

@@ -0,0 +1,10 @@
+import { NavItemProps } from "../nav-item/nav-item.js";
+import { ReactElement } from "react";
+//#region src/sidebar/sidebar-item.client.d.ts
+export type SidebarItemProps = NavItemProps;
+/**
+ * A `NavItem` for a Sidebar: the same link, with a Tooltip that names it while the Sidebar is the
+ * icon rail (hover after the delay, keyboard focus at once; Escape closes it).
+ */
+export declare function SidebarItem({ className, ref, disabled, ...item }: SidebarItemProps): ReactElement;
+//#endregion

package/dist/sidebar/sidebar-item.client.js

@@ -0,0 +1,55 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { TooltipPopup, TooltipRoot, TooltipTrigger } from "../tooltip/tooltip.client.js";
+import { NavItem } from "../nav-item/nav-item.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/sidebar/sidebar-item.client.tsx
+/** Whether `link`'s label is out of the layout: the rail's visually hidden label is 1 px wide. */
+function inRail(link) {
+	const label = link?.querySelector(".nz-nav-item-label");
+	return label instanceof HTMLElement && label.getBoundingClientRect().width <= 1;
+}
+/** Writes `node` to every ref: the Tooltip trigger's (positioning), ours, and the consumer's. */
+function allRefs(...refs) {
+	return (node) => {
+		for (const ref of refs) if (typeof ref === "function") ref(node);
+		else if (typeof ref === "object" && ref !== null && "current" in ref) ref.current = node;
+	};
+}
+/**
+* A `NavItem` for a Sidebar: the same link, with a Tooltip that names it while the Sidebar is the
+* icon rail (hover after the delay, keyboard focus at once; Escape closes it).
+*/
+function SidebarItem({ className, ref, disabled, ...item }) {
+	const link = useRef(null);
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(TooltipRoot, {
+		open,
+		onOpenChange: (next) => setOpen(next && inRail(link.current)),
+		disabled: disabled === true,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: (props) => /* @__PURE__ */ jsx(NavItem, {
+			...item,
+			...triggerProps(props),
+			...disabled === void 0 ? {} : { disabled },
+			"data-slot": "sidebar-item",
+			className: cx("nz-sidebar-item", className),
+			ref: allRefs(props["ref"], link, ref)
+		}) }), /* @__PURE__ */ jsx(TooltipPopup, {
+			side: "end",
+			children: item.children
+		})]
+	});
+}
+/**
+* Keeps the trigger's handlers. Drops what would make the DOM differ from NavItem's server path:
+* the trigger's class, slot, `data-open` and `tabIndex` (a link is focusable already), the ref
+* (merged above), and `aria-describedby`: the tooltip repeats the link's name, so describing the link
+* by it would say the label twice.
+*/
+function triggerProps(props) {
+	const { className: _class, "data-slot": _slot, "data-open": _open, "aria-describedby": _described, tabIndex: _tabIndex, ref: _ref, type: _type, ...kept } = props;
+	return kept;
+}
+//#endregion
+export { SidebarItem };

package/dist/sidebar/sidebar.d.ts

@@ -0,0 +1,45 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/sidebar/sidebar.d.ts
+type Empty = Record<string, never>;
+/** Strings this part renders (§16.4). */
+export interface SidebarLabels {
+  /** The navigation landmark's name. @default 'Primary' */
+  nav: string;
+}
+export interface SidebarRootProps extends ComponentPropsWithRef<"nav"> {
+  /**
+   * Overrides the width the viewport gives: `true` keeps the icon rail and `false` the full sidebar
+   * at every width from 640 px, for an app with its own collapse control. Below 640 px the Sidebar
+   * is not shown either way. Absent, it follows the viewport.
+   */
+  collapsed?: boolean;
+  labels?: Partial<SidebarLabels>;
+  render?: RenderProp<Empty>;
+}
+export interface SidebarHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
+  /** The store's mark, for example a square `Avatar` (Figma's 32 px Store mark). The rail keeps it. */
+  mark?: ReactNode;
+  /** The store's name (Figma's Store). In the rail it leaves the layout and stays in the DOM. */
+  title?: ReactNode;
+  /** A line under the name, such as the store's domain. */
+  description?: ReactNode;
+  /** A link to the store's home or a store switcher's trigger: `render={<a href="/" />}`. */
+  render?: RenderProp<Empty>;
+}
+export interface SidebarContentProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Empty>;
+}
+export interface SidebarFooterProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Empty>;
+}
+/** The `<nav>` landmark around everything in the sidebar. */
+export declare function SidebarRoot({ collapsed, labels, render, className, ...rest }: SidebarRootProps): ReactElement;
+/** The store at the top: its mark, name and a line under it, on a card (Figma's Store Switcher). */
+export declare function SidebarHeader({ mark, title, description, render, className, children, ...rest }: SidebarHeaderProps): ReactElement;
+/** The destinations, `NavItem`s 4 px apart. */
+export declare function SidebarContent({ render, className, ...rest }: SidebarContentProps): ReactElement;
+/** Pushed to the bottom, for Settings (Figma's Spacer frame becomes an auto margin). */
+export declare function SidebarFooter({ render, className, ...rest }: SidebarFooterProps): ReactElement;
+//#endregion
+export {};

package/dist/sidebar/sidebar.js

@@ -0,0 +1,62 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/sidebar/sidebar.tsx
+/** The `<nav>` landmark around everything in the sidebar. */
+function SidebarRoot({ collapsed, labels, render, className, ...rest }) {
+	return renderElement("nav", render, {}, {
+		"aria-label": labels?.nav ?? "Primary",
+		"data-slot": "sidebar",
+		"data-collapsed": collapsed === true ? "" : void 0,
+		"data-expanded": collapsed === false ? "" : void 0,
+		...rest,
+		className: cx("nz-sidebar", className)
+	});
+}
+/** The store at the top: its mark, name and a line under it, on a card (Figma's Store Switcher). */
+function SidebarHeader({ mark, title, description, render, className, children, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "sidebar-header",
+		...rest,
+		className: cx("nz-sidebar-header", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			mark != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-sidebar-header-mark",
+				"data-slot": "sidebar-header-mark",
+				children: mark
+			}),
+			(title != null || description != null) && /* @__PURE__ */ jsxs("span", {
+				className: "nz-sidebar-header-text",
+				"data-slot": "sidebar-header-text",
+				children: [title != null && /* @__PURE__ */ jsx("span", {
+					className: "nz-sidebar-header-title",
+					"data-slot": "sidebar-header-title",
+					children: title
+				}), description != null && /* @__PURE__ */ jsx("span", {
+					className: "nz-sidebar-header-description",
+					"data-slot": "sidebar-header-description",
+					children: description
+				})]
+			}),
+			children
+		] })
+	});
+}
+/** The destinations, `NavItem`s 4 px apart. */
+function SidebarContent({ render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "sidebar-content",
+		...rest,
+		className: cx("nz-sidebar-content", className)
+	});
+}
+/** Pushed to the bottom, for Settings (Figma's Spacer frame becomes an auto margin). */
+function SidebarFooter({ render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "sidebar-footer",
+		...rest,
+		className: cx("nz-sidebar-footer", className)
+	});
+}
+//#endregion
+export { SidebarContent, SidebarFooter, SidebarHeader, SidebarRoot };

package/dist/sidebar/sidebar.parts.d.ts

@@ -0,0 +1,6 @@
+import { SidebarContent, SidebarFooter, SidebarHeader, SidebarRoot } from "./sidebar.js";
+declare namespace sidebar_parts_d_exports {
+  export { SidebarContent as Content, SidebarFooter as Footer, SidebarHeader as Header, SidebarRoot as Root };
+}
+//#endregion
+export { SidebarContent as Content, SidebarFooter as Footer, SidebarHeader as Header, SidebarRoot as Root, sidebar_parts_d_exports };

package/dist/sidebar/sidebar.parts.js

@@ -0,0 +1,11 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { SidebarContent, SidebarFooter, SidebarHeader, SidebarRoot } from "./sidebar.js";
+//#region src/sidebar/sidebar.parts.ts
+var sidebar_parts_exports = /* @__PURE__ */ __exportAll({
+	Content: () => SidebarContent,
+	Footer: () => SidebarFooter,
+	Header: () => SidebarHeader,
+	Root: () => SidebarRoot
+});
+//#endregion
+export { SidebarContent as Content, SidebarFooter as Footer, SidebarHeader as Header, SidebarRoot as Root, sidebar_parts_exports };

package/dist/split/index.d.ts

@@ -0,0 +1,3 @@
+import { SplitAside, SplitAsideProps, SplitAsideWidth, SplitMain, SplitMainProps, SplitRoot, SplitRootProps } from "./split.js";
+import { split_parts_d_exports } from "./split.parts.js";
+export { split_parts_d_exports as Split, SplitAside, type SplitAsideProps, type SplitAsideWidth, SplitMain, type SplitMainProps, SplitRoot, type SplitRootProps };

package/dist/split/index.js

@@ -0,0 +1,3 @@
+import { SplitAside, SplitMain, SplitRoot } from "./split.js";
+import { split_parts_exports } from "./split.parts.js";
+export { split_parts_exports as Split, SplitAside, SplitMain, SplitRoot };

package/dist/split/split.d.ts

@@ -0,0 +1,28 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/split/split.d.ts
+type Empty = Record<string, never>;
+/** `wide` is 08's 360 px aside (the 8 + 4 split); `narrow` its 232 px Settings nav column. */
+export type SplitAsideWidth = "narrow" | "wide";
+export interface SplitRootProps extends ComponentPropsWithRef<"div"> {
+  /** The aside's width while the columns sit side by side. @default 'wide' */
+  aside?: SplitAsideWidth;
+  render?: RenderProp<Empty>;
+}
+export interface SplitMainProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Empty>;
+}
+export interface SplitAsideProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Empty>;
+}
+/**
+ * The row. Put `Split.Main` and `Split.Aside` in reading order: the aside after the main column (an
+ * Overview's side panel), or first (a Settings page's section nav). They stack in that order.
+ */
+export declare function SplitRoot({ aside, render, className, ...rest }: SplitRootProps): ReactElement;
+/** The main column: it takes the rest of the row. */
+export declare function SplitMain({ render, className, ...rest }: SplitMainProps): ReactElement;
+/** The side column, `aside` wide; pass `render={<aside />}` for complementary content. */
+export declare function SplitAside({ render, className, ...rest }: SplitAsideProps): ReactElement;
+//#endregion
+export {};