@cueplusplus/ui 0.13.0

package/dist/layout/description-list.js

@@ -0,0 +1,37 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/layout/description-list.tsx
+const LAYOUTS = {
+	inline: "grid grid-cols-[max-content_minmax(0,1fr)] gap-x-(--cue-space-5) gap-y-(--cue-space-2)",
+	stacked: "flex flex-col gap-(--cue-space-3)"
+};
+/** The `<dl>` family: {@link DescriptionListRoot}, `Term` and `Detail`. */
+const DescriptionList = {
+	Root: React.forwardRef(function DescriptionListRoot({ className, layout = "inline", ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("dl", {
+			ref,
+			"data-slot": "description-list",
+			className: cn(LAYOUTS[layout], className),
+			...elementProps
+		});
+	}),
+	Term: React.forwardRef(function DescriptionListTerm({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("dt", {
+			ref,
+			"data-slot": "description-list-term",
+			className: cn("font-mono text-(length:--cue-text-label) tracking-[0.15em] text-fg-subtle uppercase", className),
+			...elementProps
+		});
+	}),
+	Detail: React.forwardRef(function DescriptionListDetail({ className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsx("dd", {
+			ref,
+			"data-slot": "description-list-detail",
+			className: cn("m-0 font-mono text-(length:--cue-text-ui) text-fg", className),
+			...elementProps
+		});
+	})
+};
+//#endregion
+export { DescriptionList };

package/dist/layout/frames.d.ts

@@ -0,0 +1,70 @@
+import { PreviewGround } from "./_ground.js";
+import * as React from "react";
+//#region src/layout/frames.d.ts
+/** How tall the canvas stands. A design board is short and wide on purpose. */
+type FramesHeight = "short" | "tall";
+interface FramesRootProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** The frames. Anything — this never inspects them. */
+  children: React.ReactNode;
+  /**
+   * The canvas's accessible name — "Button frames". Required: the canvas is a
+   * focusable scroll region, and a scroll region with no name is one a screen
+   * reader announces as nothing.
+   */
+  label: string;
+  /** `"short"` is 18.5rem, `"tall"` 27rem. A CSS length in `style` overrides both. */
+  height?: FramesHeight;
+  /** The canvas ground. Defaults to `"dots"`. */
+  ground?: PreviewGround;
+  /** The line in the bottom-right corner — "drag to pan · 8 frames". Unset, none is drawn. */
+  hint?: React.ReactNode;
+  /**
+   * Drag-to-pan with the pointer. Defaults to `true`. A drag that starts on a
+   * control is never a pan, so a frame's own controls stay usable — and "on a
+   * control" counts the control's own contents: the words inside a
+   * `role="menuitem"` row, the icon inside a `button`. A drag inside a
+   * role-bearing box that is not itself a control — a `role="group"` frame, a
+   * `role="region"` — still pans, because a frame is such a box and a board is
+   * mostly frames. Only the primary button drags; `false` binds no pointer
+   * listener at all; and the keyboard scrolls the canvas either way.
+   */
+  pan?: boolean;
+}
+interface FramesItemProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** The specimen. */
+  children: React.ReactNode;
+  /** The line under it. Hidden — not removed — when the frame sets `captions={false}`. */
+  caption?: React.ReactNode;
+  /** Draws the selection outline the frame gives the item a reader is inspecting. */
+  selected?: boolean;
+}
+/**
+ * A design canvas: frames side by side, each holding one axis of one component.
+ *
+ * `Frames.Root` is the canvas — short, wide, scrollable sideways, focusable,
+ * and pannable with the pointer. `Frames.Item` is one captioned cell, and it is
+ * used **inside a `Preview`** rather than inside the Root. The two are apart
+ * because that is how they are used, and a props-only API cannot say it.
+ *
+ * **The canvas knows nothing about its children.** It does not count them, does
+ * not index them and does not select one; `hint` is where a caller puts what it
+ * knows. A canvas that knew its frames would be a manifest API, and this is a
+ * slot API.
+ *
+ * @example
+ * <Frames.Root label="Button frames" hint="drag to pan · 3 frames">
+ *   <Preview presentation="frame" label="Tone" count={3} name={<ToneMenu />}>
+ *     <div className="flex flex-wrap items-end gap-(--cue-space-6)">
+ *       <Frames.Item caption="accent"><Button tone="accent">Take cue</Button></Frames.Item>
+ *       <Frames.Item caption="ok"><Button tone="ok">Take cue</Button></Frames.Item>
+ *       <Frames.Item caption="warn"><Button tone="warn">Take cue</Button></Frames.Item>
+ *     </div>
+ *   </Preview>
+ * </Frames.Root>
+ */
+declare const Frames: {
+  Root: React.ForwardRefExoticComponent<FramesRootProps & React.RefAttributes<HTMLDivElement>>;
+  Item: React.ForwardRefExoticComponent<FramesItemProps & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Frames, FramesHeight, FramesItemProps, FramesRootProps };

package/dist/layout/frames.js

@@ -0,0 +1,298 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { GROUND_CLASSES } from "./_ground.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/layout/frames.tsx
+/** One arrow press where nothing on the page has declared the space ladder's top rung. */
+const STEP_FALLBACK = 32;
+/** What a rem is worth where no document can be asked — `use-density.ts`'s own assumption. */
+const ASSUMED_ROOT_FONT_SIZE = 16;
+/** The root's font size, for a rung declared in rem. */
+function rootFontSize() {
+	if (typeof document === "undefined") return ASSUMED_ROOT_FONT_SIZE;
+	const size = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+	return Number.isFinite(size) && size > 0 ? size : ASSUMED_ROOT_FONT_SIZE;
+}
+/**
+* One rung of `--cue-space-8` in CSS pixels, read off the canvas itself.
+*
+* Off the canvas and not off the root, because the rung is a density token and
+* a canvas may sit inside a `<Density>` island — a compact board steps by a
+* compact rung, which is the whole point of spending a token instead of a
+* number. Read at the keypress rather than cached: the density under it can
+* change between two presses and nothing re-renders when it does.
+*
+* `null` is not a return value here. A page that declared nothing — a consumer
+* who imported no stylesheet, a server's first paint, jsdom — still has to move
+* when a reader presses an arrow, so there is a fallback and it is a number
+* this file owns.
+*/
+function rungOf(canvas) {
+	if (typeof window === "undefined") return STEP_FALLBACK;
+	const declared = window.getComputedStyle(canvas).getPropertyValue("--cue-space-8").trim();
+	const length = Number.parseFloat(declared);
+	if (!Number.isFinite(length) || length <= 0) return STEP_FALLBACK;
+	return declared.endsWith("rem") ? length * rootFontSize() : length;
+}
+/**
+* Where a drag may not start: the elements whose whole job is to be pressed.
+*
+* Matched with `closest` and not on the target alone, because a control in this
+* house is usually a box drawn round something else — an icon, a span, a label.
+* A drag that starts on the icon started on the button, and a pan that began
+* there would take the pointer capture with it and the press would never land.
+*
+* **The `[role=…]` half is the same sentence about controls this library draws
+* out of a `div`.** A `DropdownMenu.Item` is a `<div role="menuitem">` whose
+* label is a `<span>` inside it; an `option`, a `tab`, a `treeitem` are all that
+* shape. Without them here a reader who clicked a menu row *on its words* had
+* the canvas take the pointer capture and the `click` retargeted away — the row
+* worked from the keyboard and worked on its padding, and did nothing where the
+* text was. That was reported against the frame name menu and is a defect of
+* this predicate rather than of that menu.
+*
+* The list is ARIA's **standalone widget roles** — the ones that *are* a control
+* rather than a box holding controls, so a composite (`menu`, `listbox`,
+* `tablist`, `tree`, `radiogroup`, `toolbar`, `grid`) is deliberately absent:
+* those are chrome, and a drag on a menu's own padding is a pan. Three
+* standalone ones are absent too, each for its own reason — `progressbar` is
+* read and never operated, `tabpanel` is the content a `tab` switches to rather
+* than the thing pressed, and `gridcell` is a box holding content, so a drag
+* across a table inside a frame stays a pan.
+*
+* An allowlist and not a denylist of container roles, because the two fail in
+* opposite directions: a role missing from this list leaves the old behaviour
+* (the element itself is still matched by {@link ROLE_BEARING}), while a
+* container role missing from a denylist would silently stop the board panning.
+*/
+const CONTROLS = "button, a, input, select, textarea, [role=button], [role=checkbox], [role=link], [role=menuitem], [role=menuitemcheckbox], [role=menuitemradio], [role=option], [role=radio], [role=scrollbar], [role=searchbox], [role=separator], [role=slider], [role=spinbutton], [role=switch], [role=tab], [role=textbox], [role=treeitem]";
+/**
+* And the element directly under the pointer, if it bears a role of its own.
+*
+* On the target alone — `matches` and never `closest` — and that is the whole
+* difference between a canvas that pans and one that only offers to. A
+* `Preview` in its frame presentation is a `role="group"` and this canvas is a
+* `role="region"`, so nearly every point on a board has a role-bearing
+* ancestor. A board is mostly frames, and "drag to pan" that worked only in the
+* gaps between them would be a hint that lies. So a role-bearing *ancestor* is
+* a frame's chrome and a drag there is a pan; only a role-bearing element under
+* the pointer itself is something to press rather than something to grab.
+*
+* That is still true, and it is not the whole rule: the ancestors that are
+* *controls* rather than chrome are named in {@link CONTROLS} and matched with
+* `closest` there. This line stays `matches` for everything else, which is what
+* keeps a `role="group"` frame a thing to grab.
+*/
+const ROLE_BEARING = "[role]";
+/** Whether a pointer that went down here is pressing something rather than grabbing the board. */
+function isControl(target, canvas) {
+	if (target === canvas) return false;
+	return target.closest(CONTROLS) !== null || target.matches(ROLE_BEARING);
+}
+/** Static class per height, off the two the spec measured. Tailwind scans text. */
+const HEIGHT_CLASSES = {
+	short: "h-[18.5rem]",
+	tall: "h-[27rem]"
+};
+/**
+* The box: the height, the ground, the border, and the positioning context the
+* hint needs.
+*
+* Two elements and not one, because the hint has to stay in the corner while
+* the frames move under it. A hint absolutely positioned inside the scroller
+* would slide away with the first pan; one positioned against a box the
+* scroller fills stays where a reader left it. The ground is on the box for the
+* same reason — a board's grid does not move with its art.
+*/
+const ROOT_CLASS = "relative min-w-0 overflow-hidden rounded-(--radius-surface) border border-border";
+/**
+* The scroller: a row of frames, sideways only, with a rung of the space
+* ladder's top between them.
+*
+* `overflow-y: hidden` is the design and not an oversight — the board is "not
+* very high, not full screen", and a canvas that scrolled both ways would be a
+* viewport a reader can get lost in. `scroll-smooth` pairs with
+* `motion-reduce:scroll-auto` so the preference is honoured declaratively;
+* there is no frame loop here for `reduced-motion.test.ts` to find, and there
+* must not be.
+*/
+const CANVAS_CLASS = "flex h-full min-w-0 items-start gap-(--cue-space-8) overflow-x-auto overflow-y-hidden scroll-smooth p-(--cue-space-6) outline-none motion-reduce:scroll-auto focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent";
+/** The affordance, and only where there is something to afford. */
+const PANNABLE_CLASS = "cursor-grab";
+/**
+* While panning: the grabbing cursor, no text selection, and **no smooth
+* scrolling**. `scroll-behavior: smooth` animates every `scrollLeft` write, and
+* a drag writes one per pointer move — the canvas would lag the pointer by a
+* whole animation. `twMerge` resolves this against `scroll-smooth` above,
+* last one wins.
+*/
+const PANNING_CLASS = "cursor-grabbing scroll-auto select-none";
+/** The line in the corner. `pointer-events-none`, or it would swallow the drag it describes. */
+const HINT_CLASS = "pointer-events-none absolute right-(--cue-space-4) bottom-(--cue-space-3) z-10 font-mono text-(length:--cue-text-micro) text-fg-subtle";
+/**
+* The canvas: a short, wide, focusable scroll region that holds frames.
+*
+* **It knows nothing about its children.** It does not count them, index them
+* or select one — a canvas that knew its frames would be a manifest API, and
+* this is a slot API. `hint` is where a caller puts the count it knows and this
+* does not.
+*
+* @example
+* <Frames.Root label="Button frames" hint="drag to pan · 8 frames">
+*   <Preview presentation="frame" label="Tone" count={4}>…</Preview>
+* </Frames.Root>
+*/
+const FramesRoot = React.forwardRef(function FramesRoot({ children, label, height = "short", ground = "dots", hint, pan = true, className, ...elementProps }, ref) {
+	const drag = React.useRef(null);
+	const canvasRef = React.useRef(null);
+	const [panning, setPanning] = React.useState(false);
+	React.useEffect(() => {
+		if (pan) return;
+		const started = drag.current;
+		if (started === null) return;
+		canvasRef.current?.releasePointerCapture?.(started.id);
+		drag.current = null;
+		setPanning(false);
+	}, [pan]);
+	const scroll = (event) => {
+		if (event.defaultPrevented || event.target !== event.currentTarget) return;
+		const canvas = event.currentTarget;
+		let next = null;
+		if (event.key === "ArrowRight") next = canvas.scrollLeft + rungOf(canvas);
+		else if (event.key === "ArrowLeft") next = canvas.scrollLeft - rungOf(canvas);
+		else if (event.key === "PageDown") next = canvas.scrollLeft + canvas.clientWidth;
+		else if (event.key === "PageUp") next = canvas.scrollLeft - canvas.clientWidth;
+		else if (event.key === "Home") next = 0;
+		else if (event.key === "End") next = canvas.scrollWidth;
+		if (next === null) return;
+		event.preventDefault();
+		canvas.scrollLeft = Math.max(0, next);
+	};
+	const pointer = {
+		onPointerDown: (event) => {
+			if (event.button !== 0) return;
+			const canvas = event.currentTarget;
+			const target = event.target;
+			if (target !== null && isControl(target, canvas)) return;
+			canvas.setPointerCapture?.(event.pointerId);
+			drag.current = {
+				x: event.clientX,
+				left: canvas.scrollLeft,
+				id: event.pointerId
+			};
+			setPanning(true);
+		},
+		onPointerMove: (event) => {
+			const started = drag.current;
+			if (started === null) return;
+			event.currentTarget.scrollLeft = Math.max(0, started.left - (event.clientX - started.x));
+		},
+		onPointerUp: (event) => {
+			if (drag.current === null) return;
+			event.currentTarget.releasePointerCapture?.(event.pointerId);
+			drag.current = null;
+			setPanning(false);
+		},
+		onPointerCancel: () => {
+			drag.current = null;
+			setPanning(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...elementProps,
+		ref,
+		"data-slot": "frames",
+		className: cn(ROOT_CLASS, HEIGHT_CLASSES[height], GROUND_CLASSES[ground], className),
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: canvasRef,
+			role: "region",
+			tabIndex: 0,
+			"aria-label": label,
+			"data-slot": "frames-canvas",
+			"data-panning": panning ? "true" : void 0,
+			className: cn(CANVAS_CLASS, pan && PANNABLE_CLASS, panning && PANNING_CLASS),
+			onKeyDown: scroll,
+			...pan ? pointer : {},
+			children
+		}), hint === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			"data-slot": "frames-hint",
+			className: HINT_CLASS,
+			children: hint
+		})]
+	});
+});
+/** One cell: the specimen, and the line under it. */
+const ITEM_CLASS = "flex min-w-0 shrink-0 flex-col items-center gap-(--cue-space-2) rounded-(--radius-control) p-(--cue-space-2)";
+/** The one a reader is inspecting. An outline and not a border: a border would move the cell. */
+const ITEM_SELECTED_CLASS = "outline-2 outline-solid -outline-offset-1 outline-accent";
+const ITEM_BODY_CLASS = "flex min-w-0 items-center justify-center";
+/**
+* The caption, and the two properties that decide whether it is painted.
+*
+* Properties and not props threaded down from the frame: the switch belongs to
+* the frame — a reader turns captions off for a whole frame from its settings
+* popover, never for one item — and a property is how a switch reaches every
+* descendant without every descendant declaring it.
+*
+* **`opacity`, never `visibility`.** Zero opacity keeps the box *and* keeps the
+* node in the accessibility tree, which is exactly what §4.1 Decision 4
+* refuses to give up; `visibility: hidden` would keep the box and drop the
+* node. `pointer-events` rides with it so an unpainted caption cannot be
+* clicked or dragged over — two properties because `opacity` wants a number
+* and `pointer-events` wants a keyword, and a custom property is untyped text
+* that cannot be both.
+*
+* The **fallbacks** are what make an item legal outside a Preview: nothing
+* declares either property there, so the caption resolves to `1` and `auto` and
+* behaves like any other line, rather than inheriting the empty string and
+* vanishing.
+*/
+const ITEM_CAPTION_CLASS = "min-w-0 truncate text-center font-mono text-(length:--cue-text-micro) text-fg-subtle [opacity:var(--preview-captions,1)] [pointer-events:var(--preview-captions-pe,auto)]";
+/**
+* A design canvas: frames side by side, each holding one axis of one component.
+*
+* `Frames.Root` is the canvas — short, wide, scrollable sideways, focusable,
+* and pannable with the pointer. `Frames.Item` is one captioned cell, and it is
+* used **inside a `Preview`** rather than inside the Root. The two are apart
+* because that is how they are used, and a props-only API cannot say it.
+*
+* **The canvas knows nothing about its children.** It does not count them, does
+* not index them and does not select one; `hint` is where a caller puts what it
+* knows. A canvas that knew its frames would be a manifest API, and this is a
+* slot API.
+*
+* @example
+* <Frames.Root label="Button frames" hint="drag to pan · 3 frames">
+*   <Preview presentation="frame" label="Tone" count={3} name={<ToneMenu />}>
+*     <div className="flex flex-wrap items-end gap-(--cue-space-6)">
+*       <Frames.Item caption="accent"><Button tone="accent">Take cue</Button></Frames.Item>
+*       <Frames.Item caption="ok"><Button tone="ok">Take cue</Button></Frames.Item>
+*       <Frames.Item caption="warn"><Button tone="warn">Take cue</Button></Frames.Item>
+*     </div>
+*   </Preview>
+* </Frames.Root>
+*/
+const Frames = {
+	Root: FramesRoot,
+	Item: React.forwardRef(function FramesItem({ children, caption, selected = false, className, ...elementProps }, ref) {
+		return /* @__PURE__ */ jsxs("div", {
+			...elementProps,
+			ref,
+			"data-slot": "frames-item",
+			"data-selected": selected ? "true" : void 0,
+			className: cn(ITEM_CLASS, selected && ITEM_SELECTED_CLASS, className),
+			children: [/* @__PURE__ */ jsx("div", {
+				"data-slot": "frames-item-body",
+				className: ITEM_BODY_CLASS,
+				children
+			}), caption === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "frames-item-caption",
+				className: ITEM_CAPTION_CLASS,
+				children: caption
+			})]
+		});
+	})
+};
+//#endregion
+export { Frames };

package/dist/layout/grid.d.ts

@@ -0,0 +1,40 @@
+import { SpaceStep, StackAlign, StackJustify } from "./stack.js";
+import * as React from "react";
+//#region src/layout/grid.d.ts
+/** How many equal columns to lay out. */
+type GridColumns = 1 | 2 | 3 | 4 | 5 | 6;
+interface GridProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** How many equal columns. Defaults to `1`. Ignored when `minItemWidth` is set. */
+  cols?: GridColumns;
+  /** Which rung of the density space ladder to spend between cells. Defaults to `4`. */
+  gap?: SpaceStep;
+  /**
+   * Fill the row with as many columns of at least this width as fit, instead of
+   * a fixed count. Any CSS length (`"12rem"`, `"200px"`).
+   *
+   * Prefer this over a column count wherever the content has a natural minimum
+   * measure — it is responsive without a single breakpoint.
+   */
+  minItemWidth?: string;
+  /** Cross-axis alignment of the cells. */
+  align?: StackAlign;
+  /** Main-axis distribution of the tracks. */
+  justify?: StackJustify;
+}
+/**
+ * Two-dimensional layout: equal columns, or as many as fit.
+ *
+ * Same bargain as `Stack` — the gap is a rung of the density ladder rather than
+ * a hand-picked pixel value, so a card grid tightens with the rest of the
+ * console when the user asks for ultra-compact.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Grid cols={3} gap={5}>{cards}</Grid>
+ * @example
+ * <Grid minItemWidth="14rem" gap={4}>{cards}</Grid>
+ */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Grid, GridColumns, GridProps };

package/dist/layout/grid.js

@@ -0,0 +1,48 @@
+import { cn } from "../lib/cn.js";
+import { ALIGN_CLASSES, GAP_CLASSES, JUSTIFY_CLASSES } from "./stack.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/layout/grid.tsx
+/** Static class per count — Tailwind scans source text, not computed strings. */
+const COLUMN_CLASSES = {
+	1: "grid-cols-1",
+	2: "grid-cols-2",
+	3: "grid-cols-3",
+	4: "grid-cols-4",
+	5: "grid-cols-5",
+	6: "grid-cols-6"
+};
+/**
+* The auto-filling track. The measure travels as a custom property rather than
+* as an arbitrary value, so the track definition is one static class the
+* scanner always sees instead of a fresh one per call site.
+*/
+const AUTO_FILL_CLASS = "grid-cols-[repeat(auto-fill,minmax(var(--cue-grid-min),1fr))]";
+/**
+* Two-dimensional layout: equal columns, or as many as fit.
+*
+* Same bargain as `Stack` — the gap is a rung of the density ladder rather than
+* a hand-picked pixel value, so a card grid tightens with the rest of the
+* console when the user asks for ultra-compact.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Grid cols={3} gap={5}>{cards}</Grid>
+* @example
+* <Grid minItemWidth="14rem" gap={4}>{cards}</Grid>
+*/
+const Grid = React.forwardRef(function Grid({ className, cols = 1, gap = 4, minItemWidth, align, justify, style, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "grid",
+		className: cn("grid", minItemWidth === void 0 ? COLUMN_CLASSES[cols] : AUTO_FILL_CLASS, GAP_CLASSES[gap], align === void 0 ? null : ALIGN_CLASSES[align], justify === void 0 ? null : JUSTIFY_CLASSES[justify], className),
+		style: minItemWidth === void 0 ? style : {
+			"--cue-grid-min": minItemWidth,
+			...style
+		},
+		...elementProps
+	});
+});
+//#endregion
+export { Grid };

package/dist/layout/index.d.ts

@@ -0,0 +1,19 @@
+import { Link, LinkProps, linkVariants } from "./link.js";
+import { Sidebar, SidebarItemProps, SidebarRailProps, SidebarRootProps, SidebarSectionProps, useSidebar } from "./sidebar.js";
+import { Container, ContainerProps, ContainerWidth } from "./container.js";
+import { Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProps, AccordionRootProps, AccordionTriggerProps } from "./accordion.js";
+import { SpaceStep, Stack, StackAlign, StackJustify, StackProps } from "./stack.js";
+import { Bento, BentoColumns, BentoMinHeight, BentoRootProps, BentoRowSpan, BentoRows, BentoSpan, BentoTileProps } from "./bento.js";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./breadcrumb.js";
+import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardRootProps, CardTitleProps } from "./card.js";
+import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./collapsible.js";
+import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./description-list.js";
+import { PreviewGround } from "./_ground.js";
+import { Frames, FramesHeight, FramesItemProps, FramesRootProps } from "./frames.js";
+import { Grid, GridColumns, GridProps } from "./grid.js";
+import { Item, ItemProps, itemVariants } from "./item.js";
+import { Pagination, PaginationEntry, PaginationProps, paginationRange } from "./pagination.js";
+import { Preview, PreviewAxis, PreviewPresentation, PreviewProps, PreviewResizeOptions } from "./preview.js";
+import { Stepper, StepperProps, StepperState, StepperStep } from "./stepper.js";
+import { Timeline, TimelineContentProps, TimelineItemProps, TimelineMarkerProps, TimelineRootProps } from "./timeline.js";
+export { Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Container, type ContainerProps, type ContainerWidth, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Disclosure, type DisclosureProps, Frames, type FramesHeight, type FramesItemProps, type FramesRootProps, Grid, type GridColumns, type GridProps, Item, type ItemProps, Link, type LinkProps, Pagination, type PaginationEntry, type PaginationProps, Preview, type PreviewAxis, type PreviewGround, type PreviewPresentation, type PreviewProps, type PreviewResizeOptions, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, type SpaceStep, Stack, type StackAlign, type StackJustify, type StackProps, Stepper, type StepperProps, type StepperState, type StepperStep, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, itemVariants, linkVariants, paginationRange, useSidebar };

package/dist/layout/index.js

@@ -0,0 +1,18 @@
+import { Link, linkVariants } from "./link.js";
+import { Sidebar, useSidebar } from "./sidebar.js";
+import { Container } from "./container.js";
+import { Accordion } from "./accordion.js";
+import { Stack } from "./stack.js";
+import { Bento } from "./bento.js";
+import { Breadcrumb } from "./breadcrumb.js";
+import { Card } from "./card.js";
+import { Collapsible, Disclosure } from "./collapsible.js";
+import { DescriptionList } from "./description-list.js";
+import { Frames } from "./frames.js";
+import { Grid } from "./grid.js";
+import { Item, itemVariants } from "./item.js";
+import { Pagination, paginationRange } from "./pagination.js";
+import { Preview } from "./preview.js";
+import { Stepper } from "./stepper.js";
+import { Timeline } from "./timeline.js";
+export { Accordion, Bento, Breadcrumb, Card, Collapsible, Container, DescriptionList, Disclosure, Frames, Grid, Item, Link, Pagination, Preview, Sidebar, Stack, Stepper, Timeline, itemVariants, linkVariants, paginationRange, useSidebar };

package/dist/layout/item.d.ts

@@ -0,0 +1,65 @@
+import { ClassProp, VariantProps } from "../lib/cva.js";
+import * as React from "react";
+//#region src/layout/item.d.ts
+/**
+ * The media-object recipe: an optional leading glyph, two lines of text and a
+ * trailing slot, on the row padding rung.
+ *
+ * Framing and hover feedback are split across `variants` for the same reason as
+ * `chipVariants`: emitting a fill from one variant and cancelling it from
+ * another would leave two competing background utilities in the class string
+ * and lean on `tailwind-merge` to pick a winner.
+ *
+ * @example
+ * <div className={itemVariants({ variant: "outline" })} />
+ */
+declare const itemVariants: (props?: ({
+  variant?: "outline" | "plain" | "soft" | null | undefined;
+  interactive?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+interface ItemProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, VariantProps<typeof itemVariants> {
+  /** Leading slot: an icon, an avatar, a status dot. */
+  media?: React.ReactNode;
+  /** The item's name — one line, truncated rather than wrapped. */
+  title?: React.ReactNode;
+  /** One supporting line under the title, a rung smaller and muted. */
+  description?: React.ReactNode;
+  /**
+   * Trailing slot: a value, a chip, a control.
+   *
+   * Do not combine with `interactive` — the whole item is then a `<button>`,
+   * and a button may not contain another one. Put the controls beside the item
+   * instead, or drop `interactive` and make the title itself the link.
+   */
+  actions?: React.ReactNode;
+  /** Which framing to paint. Defaults to `"plain"`. */
+  variant?: "plain" | "outline" | "soft";
+  /**
+   * Render as a `<button>` with hover feedback and a focus ring instead of a
+   * static `<div>`. Use for items that select, open or toggle something.
+   */
+  interactive?: boolean;
+  /** Disable the interactive form. Ignored when `interactive` is not set. */
+  disabled?: boolean;
+  /** Extra content between the text column and the action slot. */
+  children?: React.ReactNode;
+}
+/**
+ * One thing in a list, with room for a glyph, a name, a line of detail and a
+ * control — the shape a settings entry, a search hit and a device row all want.
+ *
+ * Where `Row` is a line of a hairline table, `Item` is a self-contained object
+ * that can stand alone, sit in a `Stack` or fill a `Grid` cell. It is a real
+ * `<button>` when interactive rather than a `<div>` with an `onClick`, so
+ * keyboard users get it for free.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Item media={<StatusDot tone="ok" />} title="Node 12" description="10.0.0.12" />
+ * @example
+ * <Item interactive variant="outline" title="Front truss" onClick={open} />
+ */
+declare const Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Item, ItemProps, itemVariants };