@cueplusplus/ui 0.13.0

package/dist/layout/item.js

@@ -0,0 +1,100 @@
+import { cn } from "../lib/cn.js";
+import { cva } from "../lib/cva.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/layout/item.tsx
+/**
+* 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" })} />
+*/
+const itemVariants = cva("flex w-full items-center gap-(--cue-space-4) rounded-(--radius-control) px-(--cue-pad-row-x) py-(--cue-pad-row-y) text-left font-mono text-(length:--cue-text-ui) text-fg", {
+	variants: {
+		variant: {
+			plain: "",
+			outline: "border border-border",
+			soft: "bg-surface-2"
+		},
+		interactive: {
+			true: "cursor-pointer transition-colors duration-150 outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "plain",
+		interactive: false
+	}
+});
+/**
+* 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} />
+*/
+const Item = React.forwardRef(function Item({ className, media, title, description, actions, variant, interactive = false, disabled, children, ...elementProps }, ref) {
+	const classes = cn(itemVariants({
+		variant,
+		interactive
+	}), className);
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		media === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			"data-slot": "item-media",
+			className: "flex shrink-0 items-center text-fg-muted",
+			children: media
+		}),
+		title === void 0 && description === void 0 ? null : /* @__PURE__ */ jsxs("span", {
+			"data-slot": "item-text",
+			className: "flex min-w-0 flex-1 flex-col gap-(--cue-space-1)",
+			children: [title === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "item-title",
+				className: "truncate text-fg",
+				children: title
+			}), description === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "item-description",
+				className: "truncate text-(length:--cue-text-label) text-fg-muted",
+				children: description
+			})]
+		}),
+		children,
+		actions === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			"data-slot": "item-actions",
+			className: "flex shrink-0 items-center gap-(--cue-space-2)",
+			children: actions
+		})
+	] });
+	if (interactive) return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		disabled,
+		"data-slot": "item",
+		className: classes,
+		...elementProps,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "item",
+		className: classes,
+		...elementProps,
+		children: content
+	});
+});
+//#endregion
+export { Item, itemVariants };

package/dist/layout/link.d.ts

@@ -0,0 +1,48 @@
+import { ClassProp, VariantProps } from "../lib/cva.js";
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/layout/link.d.ts
+/**
+ * The link recipe.
+ *
+ * The house rule is that a link is **not** underlined: in a console, body copy
+ * is rare and links are mostly labels inside dense furniture, where a rule
+ * under every one of them turns a panel into a page of hyperlinks. Colour on
+ * hover carries the affordance instead. The `underline` variant exists for the
+ * one place the rule is right — links inside a paragraph of prose, where colour
+ * alone would fail WCAG 1.4.1 — and it offsets the rule by 4px so descenders
+ * are not struck through.
+ *
+ * @example
+ * <a className={linkVariants({ variant: "underline" })} href="/docs">Docs</a>
+ */
+declare const linkVariants: (props?: ({
+  variant?: "plain" | "underline" | null | undefined;
+} & ClassProp) | undefined) => string;
+interface LinkProps extends React.ComponentPropsWithoutRef<"a">, VariantProps<typeof linkVariants> {
+  /**
+   * Open in a new tab, mark the anchor `rel="noreferrer noopener"` and append a
+   * `↗`. The glyph is not decoration: a link that replaces the user's context
+   * without warning is a WCAG 3.2.5 failure, and the arrow is the warning.
+   */
+  external?: boolean;
+  /**
+   * Replace the rendered element (Base UI render prop). Accepts an element —
+   * `render={<NextLink href="/x" />}` — or a function returning one. This is
+   * how the design system composes with a router without depending on one.
+   */
+  render?: useRender.RenderProp;
+}
+/**
+ * A text link: accent on hover, no rule unless you ask for one.
+ *
+ * @example
+ * <Link href="/patch">Patch</Link>
+ * @example
+ * <Link href="https://base-ui.com" external variant="underline">Base UI</Link>
+ * @example
+ * <Link render={<NextLink href="/cues" />}>Cues</Link>
+ */
+declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+//#endregion
+export { Link, LinkProps, linkVariants };

package/dist/layout/link.js

@@ -0,0 +1,63 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "../lib/cva.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/layout/link.tsx
+/**
+* The link recipe.
+*
+* The house rule is that a link is **not** underlined: in a console, body copy
+* is rare and links are mostly labels inside dense furniture, where a rule
+* under every one of them turns a panel into a page of hyperlinks. Colour on
+* hover carries the affordance instead. The `underline` variant exists for the
+* one place the rule is right — links inside a paragraph of prose, where colour
+* alone would fail WCAG 1.4.1 — and it offsets the rule by 4px so descenders
+* are not struck through.
+*
+* @example
+* <a className={linkVariants({ variant: "underline" })} href="/docs">Docs</a>
+*/
+const linkVariants = cva("cursor-pointer rounded-(--radius-control) font-mono text-fg transition-colors duration-150 outline-none hover:text-accent focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-accent", {
+	variants: { variant: {
+		plain: "no-underline",
+		underline: "underline decoration-border underline-offset-4 hover:decoration-accent"
+	} },
+	defaultVariants: { variant: "plain" }
+});
+/**
+* A text link: accent on hover, no rule unless you ask for one.
+*
+* @example
+* <Link href="/patch">Patch</Link>
+* @example
+* <Link href="https://base-ui.com" external variant="underline">Base UI</Link>
+* @example
+* <Link render={<NextLink href="/cues" />}>Cues</Link>
+*/
+const Link = React.forwardRef(function Link({ className, variant, external = false, render, children, ...elementProps }, ref) {
+	const externalProps = external ? {
+		target: "_blank",
+		rel: elementProps.rel ?? "noreferrer noopener"
+	} : null;
+	return useRender({
+		render,
+		ref,
+		defaultTagName: "a",
+		props: {
+			...elementProps,
+			...externalProps,
+			"data-slot": "link",
+			className: cn(linkVariants({ variant }), external ? "inline-flex items-center gap-(--cue-space-1)" : null, className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [children, external ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "link-external-glyph",
+				"aria-hidden": "true",
+				className: "shrink-0 text-(length:--cue-text-micro) leading-none select-none",
+				children: "↗"
+			}) : null] })
+		}
+	});
+});
+//#endregion
+export { Link, linkVariants };

package/dist/layout/pagination.d.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+//#region src/layout/pagination.d.ts
+/** A page number, or the ellipsis standing in for a run of hidden pages. */
+type PaginationEntry = number | "gap";
+/**
+ * Which page buttons to draw for a given position in a run of pages.
+ *
+ * Exported and pure so the layout rule can be unit-tested on its own — the
+ * awkward cases (a window that runs off either end, a gap standing in for one
+ * page) are arithmetic, not rendering, and every pager that gets them wrong
+ * gets them wrong here.
+ *
+ * The window keeps a constant width as it travels: near either end the missing
+ * siblings are spent on the near side instead, so the control does not change
+ * size as the user pages through. A gap that would hide exactly one page is
+ * replaced by that page, because an ellipsis costs the same room as the number
+ * it is hiding.
+ *
+ * @param page The current page, 1-based.
+ * @param pageCount How many pages there are in total.
+ * @param siblingCount How many pages to show either side of the current one.
+ * @returns Page numbers and `"gap"` markers, in display order.
+ * @example
+ * paginationRange(10, 20) // [1, "gap", 9, 10, 11, "gap", 20]
+ */
+declare function paginationRange(page: number, pageCount: number, siblingCount?: number): PaginationEntry[];
+interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "onChange" | "children"> {
+  /** The current page, 1-based. */
+  page: number;
+  /** How many pages there are in total. */
+  pageCount: number;
+  /** Called with the page a control asked for. Always within `1..pageCount`. */
+  onPageChange: (page: number) => void;
+  /** How many pages to show either side of the current one. Defaults to `1`. */
+  siblingCount?: number;
+  /** The nav's accessible name. Defaults to `"Pagination"`. */
+  label?: string;
+}
+/**
+ * The pager: previous, a window of page numbers, next.
+ *
+ * Renders nothing at all when there is a single page — a control offering no
+ * choice is chrome that says "there is more here" when there is not.
+ *
+ * Every page number is a real button with a spoken name ("Page 3"), because the
+ * bare numeral is meaningless read aloud out of context; the ellipses are
+ * `aria-hidden` for the same reason breadcrumb separators are.
+ *
+ * @example
+ * <Pagination page={page} pageCount={12} onPageChange={setPage} />
+ */
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Pagination, PaginationEntry, PaginationProps, paginationRange };

package/dist/layout/pagination.js

@@ -0,0 +1,121 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { IconButton } from "../primitives/icon-button.js";
+import { ChevronLeftGlyph, ChevronRightGlyph } from "./_glyphs.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/layout/pagination.tsx
+/**
+* Which page buttons to draw for a given position in a run of pages.
+*
+* Exported and pure so the layout rule can be unit-tested on its own — the
+* awkward cases (a window that runs off either end, a gap standing in for one
+* page) are arithmetic, not rendering, and every pager that gets them wrong
+* gets them wrong here.
+*
+* The window keeps a constant width as it travels: near either end the missing
+* siblings are spent on the near side instead, so the control does not change
+* size as the user pages through. A gap that would hide exactly one page is
+* replaced by that page, because an ellipsis costs the same room as the number
+* it is hiding.
+*
+* @param page The current page, 1-based.
+* @param pageCount How many pages there are in total.
+* @param siblingCount How many pages to show either side of the current one.
+* @returns Page numbers and `"gap"` markers, in display order.
+* @example
+* paginationRange(10, 20) // [1, "gap", 9, 10, 11, "gap", 20]
+*/
+function paginationRange(page, pageCount, siblingCount = 1) {
+	if (pageCount < 1) return [];
+	const run = (from, to) => Array.from({ length: Math.max(to - from + 1, 0) }, (_, index) => from + index);
+	if (pageCount <= siblingCount * 2 + 5) return run(1, pageCount);
+	const left = Math.max(page - siblingCount, 1);
+	const right = Math.min(page + siblingCount, pageCount);
+	const gapLeft = left > 2;
+	const gapRight = right < pageCount - 1;
+	const edgeRun = siblingCount * 2 + 3;
+	const entries = gapLeft ? gapRight ? [
+		1,
+		"gap",
+		...run(left, right),
+		"gap",
+		pageCount
+	] : [
+		1,
+		"gap",
+		...run(pageCount - edgeRun + 1, pageCount)
+	] : [
+		...run(1, edgeRun),
+		"gap",
+		pageCount
+	];
+	return entries.map((entry, index) => {
+		if (entry !== "gap") return entry;
+		const before = entries[index - 1];
+		const after = entries[index + 1];
+		return typeof before === "number" && typeof after === "number" && after - before === 2 ? before + 1 : entry;
+	});
+}
+/**
+* One page button: a square on the short rung of the control ladder, tinted
+* with `accent-soft` when it is the page you are on — never a solid accent
+* fill, which at console density reads as a second, louder button.
+*/
+const PAGE_BUTTON_CLASSES = "inline-flex h-control-sm min-w-control-sm cursor-pointer items-center justify-center rounded-(--radius-control) border-0 bg-transparent px-(--cue-space-2) font-mono text-(length:--cue-text-ui) tabular-nums text-fg-muted transition-colors duration-150 outline-none select-none hover:bg-surface-2 hover:text-fg focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-accent";
+/**
+* The pager: previous, a window of page numbers, next.
+*
+* Renders nothing at all when there is a single page — a control offering no
+* choice is chrome that says "there is more here" when there is not.
+*
+* Every page number is a real button with a spoken name ("Page 3"), because the
+* bare numeral is meaningless read aloud out of context; the ellipses are
+* `aria-hidden` for the same reason breadcrumb separators are.
+*
+* @example
+* <Pagination page={page} pageCount={12} onPageChange={setPage} />
+*/
+const Pagination = React.forwardRef(function Pagination({ className, page, pageCount, onPageChange, siblingCount = 1, label = "Pagination", ...elementProps }, ref) {
+	if (pageCount <= 1) return null;
+	const entries = paginationRange(page, pageCount, siblingCount);
+	return /* @__PURE__ */ jsxs("nav", {
+		ref,
+		"data-slot": "pagination",
+		"aria-label": label,
+		className: cn("flex items-center gap-(--cue-space-1)", className),
+		...elementProps,
+		children: [
+			/* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Previous page",
+				icon: ChevronLeftGlyph,
+				size: "sm",
+				disabled: page <= 1,
+				onClick: () => onPageChange(page - 1)
+			}),
+			entries.map((entry, index) => entry === "gap" ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "pagination-gap",
+				"aria-hidden": "true",
+				className: "inline-flex h-control-sm items-center justify-center px-(--cue-space-1) font-mono text-(length:--cue-text-ui) text-fg-subtle select-none",
+				children: "…"
+			}, `gap-${index}`) : /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "pagination-page",
+				"aria-label": `Page ${entry}`,
+				"aria-current": entry === page ? "page" : void 0,
+				onClick: () => onPageChange(entry),
+				className: cn(PAGE_BUTTON_CLASSES, entry === page ? "bg-accent-soft text-accent" : null),
+				children: entry
+			}, entry)),
+			/* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Next page",
+				icon: ChevronRightGlyph,
+				size: "sm",
+				disabled: page >= pageCount,
+				onClick: () => onPageChange(page + 1)
+			})
+		]
+	});
+});
+//#endregion
+export { Pagination, paginationRange };

package/dist/layout/preview.d.ts

@@ -0,0 +1,177 @@
+import { PreviewGround } from "./_ground.js";
+import * as React from "react";
+import { StyleSet } from "@cueplusplus/tokens";
+import { Density as Density$1, FontName, Mode, ThemeName } from "@cueplusplus/theme-base";
+//#region src/layout/preview.d.ts
+/** Where the chrome sits and what the stage's ground is. */
+type PreviewPresentation = "panel" | "frame";
+/** Which edges of the stage a reader may drag. */
+type PreviewAxis = "x" | "y" | "both";
+/** How far a resizable stage may go, in CSS pixels, and along which axes. */
+interface PreviewResizeOptions {
+  /** Which axes resize. Defaults to `"both"`; `"x"` or `"y"` narrows it to one grip. */
+  axis?: PreviewAxis;
+  /** The narrowest the stage may be made, in px. Defaults to `160`. */
+  minWidth?: number;
+  /**
+   * The widest the stage may be made, in px. Defaults to `1280`. The bound in
+   * force is the smaller of this and the frame's own width, measured live, so a
+   * stage never outgrows the frame — or the grid track — it sits in.
+   */
+  maxWidth?: number;
+  /** The shortest the stage may be made, in px. Defaults to `96`. */
+  minHeight?: number;
+  /** The tallest the stage may be made, in px. Defaults to `960`. */
+  maxHeight?: number;
+}
+interface PreviewProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
+  /** The specimen. It renders on the stage, inside whatever scope the stage sets. */
+  children: React.ReactNode;
+  /**
+   * The frame's accessible name — "Button preview". Required: a frame that holds
+   * controls and has no name is a group nobody can find.
+   */
+  label: string;
+  /**
+   * A theme for the stage only. Unset, the stage inherits — no attribute is
+   * emitted at all. **Naming a theme does not load it**: the stage is scoped to
+   * `[data-theme="<name>"]`, and that theme's stylesheet must already be on the
+   * page (`@cueplusplus/theme-<name>/theme.css`). The tools, the footer and
+   * anything they open stay in the page's theme. With no `mode`, the stage
+   * repeats the page's mode beside the theme — `"system"` included — so a light
+   * page's stage paints the theme's light block, not its dark one, and agrees
+   * with every overlay opened on it.
+   */
+  theme?: ThemeName;
+  /**
+   * Dark, light or system, for the stage only. A theme's light block is the
+   * compound selector `[data-theme][data-mode]`, so with no `theme` the stage
+   * restates the page's theme beside the mode; outside any `ThemeProvider` there
+   * is no theme to restate and the mode alone changes nothing. A stage
+   * `"system"` is stamped as it is, so the stylesheet's `[data-mode="system"]`
+   * block follows the OS; `useTheme().resolvedMode` read on the stage reports
+   * the page's resolved mode.
+   */
+  mode?: Mode;
+  /** A rung of the density ladder for the stage only, as a `<Density>` island would set it. */
+  density?: Density$1;
+  /** A font pairing for the stage only, as `data-font`. Portals still follow the root's pairing. */
+  font?: FontName;
+  /**
+   * A style set for the stage only: `console`, `editorial` or `marketing`.
+   *
+   * Unset, the stage inherits and **no attribute is emitted at all** — the same
+   * rule the other four follow here. Unlike `theme`, naming one loads nothing
+   * and needs nothing: the three sets are emitted by `@cueplusplus/tokens` into
+   * the stylesheet every consumer already imports, so a stage is scoped to
+   * `[data-style="<name>"]` and the block is on the page by construction.
+   *
+   * The set is republished to React as well as stamped, so a popover opened on
+   * the stage follows the stage rather than the page — a portal mounts on
+   * `<body>` and inherits nothing from the stage's DOM.
+   */
+  styleSet?: StyleSet;
+  /**
+   * Resize the stage by dragging or with the keyboard. `true` gives both axes
+   * inside the default bounds (160–1280 px wide, 96–960 px tall); an object
+   * narrows the axis or moves the bounds. The width never outgrows the frame:
+   * its bound in force is the smaller of `maxWidth` and the frame's own width,
+   * observed with a `ResizeObserver`, so a Preview in a grid track stays inside
+   * it as the viewport changes. The height is bounded by `maxHeight` alone, and
+   * a taller stage grows its frame. Unset, the stage is fixed: no grips, and
+   * nothing measured or observed.
+   *
+   * A resizable frame fills its container's width (`w-full`), because the room
+   * it measures has to be its container's. In a flex row or a centred column a
+   * frame sized by its content would measure its own stage, and a stage bounded
+   * by itself can only shrink, with each step lowering the ceiling. A fixed
+   * Preview keeps sizing to its content; `className` can still set a width.
+   */
+  resizable?: boolean | PreviewResizeOptions;
+  /** The top-right slot — by convention a row of `IconButton`s. Drawn outside the stage. */
+  tools?: React.ReactNode;
+  /** The strip under the stage: the thin text and the way out. Drawn outside the stage. */
+  footer?: React.ReactNode;
+  /**
+   * `"panel"` (the default, and what every existing caller gets): a bordered
+   * card, `tools` floating at the stage's top right, `footer` under it.
+   * `"frame"`: a design-canvas frame — the label row drawn *above* the stage
+   * rather than over it, four crosshair corners at the stage's outer corners,
+   * and a transparent stage so whatever the frame sits on shows through.
+   */
+  presentation?: PreviewPresentation;
+  /**
+   * The label row's leading slot, drawn only in `"frame"`. A plain node, or a
+   * control: apps/docs passes a `DropdownMenu` whose trigger is the frame's
+   * name. Unset, the row opens with `label` as text.
+   *
+   * A slot and not a built-in menu, because `Preview` imports no overlay today
+   * and `/` draws seventeen of it under a 766-byte headroom.
+   */
+  name?: React.ReactNode;
+  /** The count drawn after the name — how many items this frame holds. Frame only. */
+  count?: number;
+  /**
+   * The stage's ground. Defaults to `"dots"` in `"panel"` and `"none"` in
+   * `"frame"`, where the canvas under it already carries a ground and two dot
+   * grids at different pitches read as a moiré.
+   */
+  ground?: PreviewGround;
+  /**
+   * Whether `Frames.Item` captions are shown inside this stage. Defaults to
+   * `true`. Off is paint and nothing more: a hidden caption is still rendered,
+   * still in the tree and still read aloud (§4.1 Decision 4).
+   */
+  captions?: boolean;
+}
+/**
+ * A card for one component: a stage that is its own theme island, a slot for
+ * tools at the top right, and a footer.
+ *
+ * **Two presentations, one stage.** `"panel"`, the default and what every
+ * existing caller gets, is that card: a border, a fill, a dot grid under the
+ * specimen, and the tools floating over the stage's top right. `"frame"` is a
+ * design-canvas frame — no card, no border, no fill; the name, the count and
+ * the tools sit in a row *above* the stage rather than over it, four crosshairs
+ * mark the stage's outer corners, and the stage paints nothing by default, so
+ * whatever canvas the frame sits on shows through. Everything below holds in
+ * both.
+ *
+ * **The stage is the island; the chrome is not.** `theme`, `mode`, `density`,
+ * `font` and `styleSet` land on the stage element only, and the stage
+ * republishes the theme, density and style-set contexts so an overlay opened on
+ * it follows it. The tools, the footer, the grips and anything they open stay
+ * in the scope around the Preview — a `terminal` preview's own controls do not
+ * turn cyan. With none of the five set, the stage carries no attribute and
+ * costs what a `<div>` costs. A stage `theme` with no `mode` repeats the page's
+ * mode beside it.
+ *
+ * **`resizable` is handles of its own**, both axes by default: an edge grip per
+ * axis that is a keyboard-operable `separator` valued in pixels, and a corner
+ * grip for the pointer. Double-click resets an axis. The width never outgrows
+ * the frame: its bound in force is the frame's own width, observed live, when
+ * that is under `maxWidth`. Not `Resizable`, which is split panes on an
+ * optional peer.
+ *
+ * Props, not a compound: one stage and its slots, each saying what it is.
+ *
+ * @example
+ * <Preview label="Button preview" tools={<IconButton aria-label="Configure Button" icon={Wrench} />}>
+ *   <Button variant="primary">Take cue</Button>
+ * </Preview>
+ * @example
+ * <Preview label="Chip preview" theme="terminal" density="compact" resizable>
+ *   <Chip tone="accent">Standby</Chip>
+ * </Preview>
+ * @example
+ * <Preview label="Button" presentation="frame" count={3}>
+ *   <Button variant="primary">Take cue</Button>
+ * </Preview>
+ * @example
+ * <Preview label="Editorial band" styleSet="editorial" presentation="frame">
+ *   <Container className="max-w-(--cue-measure-prose)">…</Container>
+ * </Preview>
+ */
+declare const Preview: React.ForwardRefExoticComponent<PreviewProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Preview, PreviewAxis, type PreviewGround, PreviewPresentation, PreviewProps, PreviewResizeOptions };