@nizivo/react 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,119 @@
+import { RenderProp } from "../contracts/render.js";
+import { ControlSize } from "../augment.js";
+import { ChangeDetails, OpenReason } from "../contracts/details.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";
+/**
+ * Strings the engine renders (§9.3 rule 7). `placeholder` is passed to the engine.
+ * Engine-owned with React Aria (not overridable): the visually hidden "Dismiss" buttons in the popup.
+ */
+export interface SelectLabels {
+  /** Shown while no value is chosen. React Aria's default is its localized "Select an item". */
+  placeholder: string;
+}
+export interface SelectRootProps {
+  value?: string | null;
+  defaultValue?: string | null;
+  /** `details.reason` is `'unknown'` with React Aria, which reports no cause. */
+  onValueChange?: (value: string | null, details: ChangeDetails<SelectValueReason>) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, details: ChangeDetails<OpenReason>) => void;
+  /**
+   * With `name`, a hidden native `<select>` carries the value into `FormData`. Inside a `Field`, the
+   * Field's `name`, `required`, `disabled` and presented error apply unless set here (an explicit
+   * `false` wins), and a click on its label focuses the trigger without opening the listbox.
+   */
+  name?: string;
+  required?: boolean;
+  disabled?: boolean;
+  /** An error message is presented (owned by Field, never by the engine). Inside a Field, the Field sets it. */
+  invalid?: boolean;
+  placeholder?: SelectLabels["placeholder"];
+  "aria-label"?: string;
+  /** Names the trigger together with the value. Inside a Field, the Field label id goes here (§16.1). */
+  "aria-labelledby"?: string;
+  /** 32 / 40 / 48 px. @default 'md' */
+  size?: ControlSize;
+  className?: string;
+  children: ReactNode;
+}
+export interface SelectRootState {
+  open: boolean;
+  disabled: boolean;
+}
+export interface SelectTriggerState {
+  open: boolean;
+  pressed: boolean;
+  focusVisible: boolean;
+  disabled: boolean;
+}
+export interface SelectValueState {
+  placeholder: boolean;
+}
+export interface SelectPopupState {
+  entering: boolean;
+  exiting: boolean;
+  side: Side;
+}
+export interface SelectItemState {
+  highlighted: boolean;
+  selected: boolean;
+  disabled: boolean;
+  focusVisible: boolean;
+}
+export interface SelectTriggerProps extends Omit<ComponentPropsWithRef<"button">, "children" | "disabled" | "type"> {
+  leadingIcon?: ReactNode;
+  /** Replaces the chevron glyph. */
+  indicator?: ReactNode;
+  /** Must render a `<button>` (a component that renders one is fine). */
+  render?: RenderProp<SelectTriggerState>;
+  /** Replaces the default `Select.Value`. */
+  children?: ReactNode;
+}
+export interface SelectValueProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+  /** Must render a `<span>`. */
+  render?: RenderProp<SelectValueState>;
+}
+export interface SelectPopupProps {
+  /** @default 'bottom' */
+  side?: "top" | "bottom";
+  /** @default 'start' */
+  align?: Align;
+  /** Distance from the trigger in px. @default 4 */
+  sideOffset?: number;
+  /** Portal container. Defaults to the parent overlay, else `document.body` (§12.1 L2). */
+  container?: Element | null;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}
+export interface SelectItemProps extends Omit<ComponentPropsWithRef<"div">, "children" | "id"> {
+  value: string;
+  /** Typeahead text; defaults to `children` when it is a string. */
+  textValue?: string;
+  disabled?: boolean;
+  /** Replaces the check shown at the end of the selected item; `null` shows none. Decorative. */
+  indicator?: ReactNode;
+  /** Must render a `<div>`. */
+  render?: RenderProp<SelectItemState>;
+  children: ReactNode;
+}
+type NoState = Record<string, never>;
+export interface SelectGroupProps extends Omit<ComponentPropsWithRef<"section">, "id"> {
+  /** Must render a `<section>`. */
+  render?: RenderProp<NoState>;
+}
+export interface SelectGroupLabelProps extends Omit<ComponentPropsWithRef<"header">, "id"> {
+  /** Must render a `<header>`. */
+  render?: RenderProp<NoState>;
+}
+export interface SelectSeparatorProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** Must render a `<div>`. */
+  render?: RenderProp<NoState>;
+}
+//#endregion
+export type { OpenReason };

package/dist/select/select.parts.d.ts

@@ -0,0 +1,6 @@
+import { SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectSeparator, SelectTrigger, SelectValue } from "./select.client.js";
+declare namespace select_parts_d_exports {
+  export { SelectGroup as Group, SelectGroupLabel as GroupLabel, SelectItem as Item, SelectPopup as Popup, SelectRoot as Root, SelectSeparator as Separator, SelectTrigger as Trigger, SelectValue as Value };
+}
+//#endregion
+export { SelectGroup as Group, SelectGroupLabel as GroupLabel, SelectItem as Item, SelectPopup as Popup, SelectRoot as Root, SelectSeparator as Separator, SelectTrigger as Trigger, SelectValue as Value, select_parts_d_exports };

package/dist/select/select.parts.js

@@ -0,0 +1,15 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectSeparator, SelectTrigger, SelectValue } from "./select.client.js";
+//#region src/select/select.parts.ts
+var select_parts_exports = /* @__PURE__ */ __exportAll({
+	Group: () => SelectGroup,
+	GroupLabel: () => SelectGroupLabel,
+	Item: () => SelectItem,
+	Popup: () => SelectPopup,
+	Root: () => SelectRoot,
+	Separator: () => SelectSeparator,
+	Trigger: () => SelectTrigger,
+	Value: () => SelectValue
+});
+//#endregion
+export { SelectGroup as Group, SelectGroupLabel as GroupLabel, SelectItem as Item, SelectPopup as Popup, SelectRoot as Root, SelectSeparator as Separator, SelectTrigger as Trigger, SelectValue as Value, select_parts_exports };

package/dist/separator/index.d.ts

@@ -0,0 +1,2 @@
+import { Separator, SeparatorProps, SeparatorState } from "./separator.js";
+export { Separator, type SeparatorProps, type SeparatorState };

package/dist/separator/index.js

@@ -0,0 +1 @@
+export { Separator } from "./separator.js";

package/dist/separator/separator.d.ts

@@ -0,0 +1,26 @@
+import { RenderProp } from "../contracts/render.js";
+import { Orientation } from "../contracts/state.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/separator/separator.d.ts
+export interface SeparatorState {
+  orientation: Orientation;
+  decorative: boolean;
+}
+export interface SeparatorProps extends Omit<ComponentPropsWithRef<"hr">, "children"> {
+  /** A vertical separator stretches to the height of its flex row. @default 'horizontal' */
+  orientation?: Orientation;
+  /**
+   * Purely visual, hidden from assistive technology (`role="none"`): the Figma Divider default
+   * (7370:95, M35). Pass `decorative={false}` for a separator that means something on its own, a
+   * break between two groups a screen reader should hear (an `<hr>`'s implicit `separator` role,
+   * with `aria-orientation` when vertical). @default true
+   */
+  decorative?: boolean;
+  render?: RenderProp<SeparatorState>;
+}
+/**
+ * An `<hr>`: a 1 px `border/subtle` line, Figma's Divider (7370:95). Decorative by default; spacing
+ * comes first, a line only when spacing is not enough (the Figma doc).
+ */
+export declare function Separator({ orientation, decorative, render, className, ...rest }: SeparatorProps): ReactElement;
+//#endregion

package/dist/separator/separator.js

@@ -0,0 +1,23 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/separator/separator.tsx
+/**
+* An `<hr>`: a 1 px `border/subtle` line, Figma's Divider (7370:95). Decorative by default; spacing
+* comes first, a line only when spacing is not enough (the Figma doc).
+*/
+function Separator({ orientation = "horizontal", decorative = true, render, className, ...rest }) {
+	const native = render === void 0;
+	return renderElement("hr", render, {
+		orientation,
+		decorative
+	}, {
+		"data-slot": "separator",
+		"data-orientation": orientation,
+		...rest,
+		className: cx("nz-separator", className),
+		role: decorative ? "none" : native ? void 0 : "separator",
+		"aria-orientation": !decorative && orientation === "vertical" ? "vertical" : void 0
+	});
+}
+//#endregion
+export { Separator };

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

@@ -0,0 +1,2 @@
+import { Skeleton, SkeletonProps, SkeletonShape, SkeletonState } from "./skeleton.js";
+export { Skeleton, type SkeletonProps, type SkeletonShape, type SkeletonState };

package/dist/skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from "./skeleton.js";

package/dist/skeleton/skeleton.d.ts

@@ -0,0 +1,20 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/skeleton/skeleton.d.ts
+/** Figma "Shape": a text line, a block (media, a chart) or a circle (an avatar). */
+export type SkeletonShape = "line" | "block" | "circle";
+export interface SkeletonState {
+  shape: SkeletonShape;
+}
+export interface SkeletonProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+  /** @default 'line' */
+  shape?: SkeletonShape;
+  render?: RenderProp<SkeletonState>;
+}
+/**
+ * One placeholder block, always hidden from assistive technology. The region it stands in for sets
+ * `aria-busy` and carries visually hidden "Loading …" text (§16.5). There is no `style` prop path:
+ * size it with a class, or with `--nz-skeleton-width`, `--nz-skeleton-height` and `--nz-skeleton-radius`.
+ */
+export declare function Skeleton({ shape, render, className, ...rest }: SkeletonProps): ReactElement;
+//#endregion

package/dist/skeleton/skeleton.js

@@ -0,0 +1,19 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/skeleton/skeleton.tsx
+/**
+* One placeholder block, always hidden from assistive technology. The region it stands in for sets
+* `aria-busy` and carries visually hidden "Loading …" text (§16.5). There is no `style` prop path:
+* size it with a class, or with `--nz-skeleton-width`, `--nz-skeleton-height` and `--nz-skeleton-radius`.
+*/
+function Skeleton({ shape = "line", render, className, ...rest }) {
+	return renderElement("span", render, { shape }, {
+		"data-slot": "skeleton",
+		"data-shape": shape,
+		...rest,
+		className: cx("nz-skeleton", className),
+		"aria-hidden": true
+	});
+}
+//#endregion
+export { Skeleton };

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

package/dist/split/split.js

@@ -0,0 +1,33 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/split/split.tsx
+/**
+* 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.
+*/
+function SplitRoot({ aside = "wide", render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "split",
+		"data-aside": aside,
+		...rest,
+		className: cx("nz-split", className)
+	});
+}
+/** The main column: it takes the rest of the row. */
+function SplitMain({ render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "split-main",
+		...rest,
+		className: cx("nz-split-main", className)
+	});
+}
+/** The side column, `aside` wide; pass `render={<aside />}` for complementary content. */
+function SplitAside({ render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "split-aside",
+		...rest,
+		className: cx("nz-split-aside", className)
+	});
+}
+//#endregion
+export { SplitAside, SplitMain, SplitRoot };

package/dist/split/split.parts.d.ts

@@ -0,0 +1,6 @@
+import { SplitAside, SplitMain, SplitRoot } from "./split.js";
+declare namespace split_parts_d_exports {
+  export { SplitAside as Aside, SplitMain as Main, SplitRoot as Root };
+}
+//#endregion
+export { SplitAside as Aside, SplitMain as Main, SplitRoot as Root, split_parts_d_exports };

package/dist/split/split.parts.js

@@ -0,0 +1,10 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { SplitAside, SplitMain, SplitRoot } from "./split.js";
+//#region src/split/split.parts.ts
+var split_parts_exports = /* @__PURE__ */ __exportAll({
+	Aside: () => SplitAside,
+	Main: () => SplitMain,
+	Root: () => SplitRoot
+});
+//#endregion
+export { SplitAside as Aside, SplitMain as Main, SplitRoot as Root, split_parts_exports };

package/dist/stack/index.d.ts

@@ -0,0 +1,2 @@
+import { LayoutGap, Stack, StackProps, StackState } from "./stack.js";
+export { type LayoutGap, Stack, type StackProps, type StackState };

package/dist/stack/index.js

@@ -0,0 +1 @@
+export { Stack } from "./stack.js";

package/dist/stack/stack.d.ts

@@ -0,0 +1,17 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/stack/stack.d.ts
+/** A `--nz-space-*` key: `'4'` is `--nz-space-4` (1rem), `'0-5'` is `--nz-space-0-5`. Token keys only. */
+export type LayoutGap = "0" | "0-5" | "1" | "1-5" | "2" | "3" | "4" | "5" | "6" | "8" | "10" | "12" | "16" | "20" | "24";
+export interface StackState {
+  gap: LayoutGap | undefined;
+}
+export interface StackProps extends ComponentPropsWithRef<"div"> {
+  /** Space between children. Absent, there is none. */
+  gap?: LayoutGap;
+  /** Another element, for example `render={<ul />}` for a list. */
+  render?: RenderProp<StackState>;
+}
+/** Children in a column. */
+export declare function Stack({ gap, render, className, ...rest }: StackProps): ReactElement;
+//#endregion

package/dist/stack/stack.js

@@ -0,0 +1,14 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/stack/stack.tsx
+/** Children in a column. */
+function Stack({ gap, render, className, ...rest }) {
+	return renderElement("div", render, { gap }, {
+		"data-slot": "stack",
+		"data-gap": gap,
+		...rest,
+		className: cx("nz-stack", className)
+	});
+}
+//#endregion
+export { Stack };

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

@@ -0,0 +1,2 @@
+import { StickyBar, StickyBarProps } from "./sticky-bar.js";
+export { StickyBar, type StickyBarProps };

package/dist/sticky-bar/index.js

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

package/dist/sticky-bar/sticky-bar.d.ts

@@ -0,0 +1,16 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/sticky-bar/sticky-bar.d.ts
+export interface StickyBarProps extends ComponentPropsWithRef<"div"> {
+  /** At the start, for example "2 items" and the total. */
+  summary?: ReactNode;
+  /** The actions, usually one or two `size="lg"` Buttons, at the end. */
+  children?: ReactNode;
+  render?: RenderProp<Record<string, never>>;
+}
+/**
+ * A bar that sticks to the bottom of the viewport while its section scrolls: the last child of the
+ * page's content, or of the region it acts on.
+ */
+export declare function StickyBar({ summary, render, className, children, ...rest }: StickyBarProps): ReactElement;
+//#endregion