@cueplusplus/ui 0.13.0

package/dist/primitives/chip.js

@@ -0,0 +1,238 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "../lib/cva.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/chip.tsx
+/**
+* The tinted-chip recipe: `bg-<tone>/10 border-<tone>/35 text-<tone>`, and the
+* two quieter readings of it — `outline`, which drops the fill, and `tag`,
+* which drops the fill and the voice with it.
+*
+* Every property that varies is emitted from exactly one place: one rim, one
+* ink, one fill, one gutter, one type size, always. Emitting `bg-<tone>/10`
+* from the tone map and then cancelling it with `bg-transparent` would leave
+* two competing utilities in the class string, and `chipVariants` is exported —
+* a caller who uses it without `cn` gets a raw string where the winner is
+* decided by stylesheet order rather than by which utility was written last.
+* `h-chip h-4` proves the point at the other end: `tailwind-merge` cannot even
+* see that as a conflict, because `chip` is a token name and not a scale step.
+* So nothing here cancels anything. What varies moves into `variants` or
+* `compoundVariants` until only one of it is ever emitted.
+*
+* That is why `neutral` carries no rim of its own. The other six tones rim
+* themselves at `/35` in all three variants, but the neutral line has two
+* weights in this system: `--cue-border` is a box edge, and a chip is a box;
+* `--cue-hair-strong` is the rule between things, and a tag is a mark on the
+* page rather than a container. The rim is therefore a compound of tone and
+* variant, exactly as the fill is.
+*
+* @example
+* <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
+* @example
+* <span className={chipVariants({ variant: "tag" })}>mcp</span>
+*/
+const chipVariants = cva("inline-flex h-chip select-none items-center justify-center gap-(--cue-space-2) whitespace-nowrap rounded-(--radius-control) border font-mono leading-none uppercase outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", {
+	variants: {
+		tone: {
+			neutral: "text-fg-muted",
+			accent: "border-accent/35 text-accent",
+			ok: "border-ok/35 text-ok",
+			busy: "border-busy/35 text-busy",
+			warn: "border-warn/35 text-warn",
+			danger: "border-danger/35 text-danger",
+			info: "border-info/35 text-info"
+		},
+		variant: {
+			tinted: "px-(--cue-space-3) text-(length:--cue-text-label) tracking-[0.15em]",
+			outline: "bg-transparent px-(--cue-space-3) text-(length:--cue-text-label) tracking-[0.15em]",
+			tag: "bg-transparent px-(--cue-space-2) text-(length:--cue-text-micro) tracking-[0.06em]"
+		},
+		interactive: {
+			true: "cursor-pointer disabled:pointer-events-none disabled:opacity-40",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			tone: "neutral",
+			variant: ["tinted", "outline"],
+			class: "border-border"
+		},
+		{
+			tone: "neutral",
+			variant: "tag",
+			class: "border-(--cue-hair-strong)"
+		},
+		{
+			tone: "neutral",
+			variant: "tinted",
+			class: "bg-surface-2"
+		},
+		{
+			tone: "accent",
+			variant: "tinted",
+			class: "bg-accent/10"
+		},
+		{
+			tone: "ok",
+			variant: "tinted",
+			class: "bg-ok/10"
+		},
+		{
+			tone: "busy",
+			variant: "tinted",
+			class: "bg-busy/10"
+		},
+		{
+			tone: "warn",
+			variant: "tinted",
+			class: "bg-warn/10"
+		},
+		{
+			tone: "danger",
+			variant: "tinted",
+			class: "bg-danger/10"
+		},
+		{
+			tone: "info",
+			variant: "tinted",
+			class: "bg-info/10"
+		},
+		{
+			tone: "neutral",
+			variant: ["tinted", "outline"],
+			interactive: true,
+			class: "hover:border-border-strong hover:text-fg"
+		},
+		{
+			tone: "neutral",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-border hover:text-fg"
+		},
+		{
+			tone: "accent",
+			variant: ["tinted", "outline"],
+			interactive: true,
+			class: "hover:border-accent/60 hover:bg-accent/20"
+		},
+		{
+			tone: "accent",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-accent/60"
+		},
+		{
+			tone: "ok",
+			variant: ["tinted", "outline"],
+			interactive: true,
+			class: "hover:border-ok/60 hover:bg-ok/20"
+		},
+		{
+			tone: "ok",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-ok/60"
+		},
+		{
+			tone: "busy",
+			variant: ["tinted", "outline"],
+			interactive: true,
+			class: "hover:border-busy/60 hover:bg-busy/20"
+		},
+		{
+			tone: "busy",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-busy/60"
+		},
+		{
+			tone: "warn",
+			variant: ["tinted", "outline"],
+			interactive: true,
+			class: "hover:border-warn/60 hover:bg-warn/20"
+		},
+		{
+			tone: "warn",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-warn/60"
+		},
+		{
+			tone: "danger",
+			variant: ["tinted", "outline"],
+			interactive: true,
+			class: "hover:border-danger/60 hover:bg-danger/20"
+		},
+		{
+			tone: "danger",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-danger/60"
+		},
+		{
+			tone: "info",
+			variant: ["tinted", "outline"],
+			interactive: true,
+			class: "hover:border-info/60 hover:bg-info/20"
+		},
+		{
+			tone: "info",
+			variant: "tag",
+			interactive: true,
+			class: "hover:border-info/60"
+		}
+	],
+	defaultVariants: {
+		tone: "neutral",
+		variant: "tinted",
+		interactive: false
+	}
+});
+/**
+* A compact status/label pill: mono, uppercase, wide-tracked, one line tall.
+*
+* `tone` uses the shared status vocabulary (`ok | busy | warn | danger | info`)
+* plus `neutral` and `accent`, so a chip, a `StatusDot` and a `Meter` always
+* agree on what "warn" looks like.
+*
+* `variant` sets how loudly it says it. `tinted` is the chip proper — a tone
+* tint behind tone ink. `outline` drops the fill and keeps the voice, for a
+* chip on an already-busy ground. `tag` drops both: a hairline rim, micro type
+* and closed tracking, for the facts that sit *beside* a row's name — a kind, a
+* lifecycle, a scope — where a row full of tinted chips would read as a row of
+* buttons. All three keep `h-chip`, so a mixed row still has one baseline.
+*
+* @example
+* <Chip tone="ok">online</Chip>
+* @example
+* <Chip tone="accent" variant="outline" interactive onClick={toggle}>dimmer</Chip>
+* @example
+* <Chip variant="tag">mcp</Chip>
+* @example
+* <Chip tone="danger" variant="tag">needs auth</Chip>
+*/
+const Chip = React.forwardRef(function Chip({ className, tone, variant, interactive = false, disabled, children, ...elementProps }, ref) {
+	const classes = cn(chipVariants({
+		tone,
+		variant,
+		interactive
+	}), className);
+	if (interactive) return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		disabled,
+		className: classes,
+		...elementProps,
+		children
+	});
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: classes,
+		...elementProps,
+		children
+	});
+});
+//#endregion
+export { Chip, chipVariants };

package/dist/primitives/icon-button.d.ts

@@ -0,0 +1,41 @@
+import { ClassProp, VariantProps } from "../lib/cva.js";
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/primitives/icon-button.d.ts
+/**
+ * Square sibling of `buttonVariants`: one `size-control-*` token instead of a
+ * height plus horizontal padding, so the hit target stays a perfect square at
+ * every density.
+ */
+declare const iconButtonVariants: (props?: ({
+  variant?: "ghost" | "primary" | "secondary" | "outline" | "danger" | "danger-outline" | null | undefined;
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & ClassProp) | undefined) => string;
+interface IconButtonProps extends Omit<React.ComponentPropsWithoutRef<"button">, "children">, VariantProps<typeof iconButtonVariants> {
+  /**
+   * Required. An icon-only control has no text to name it, so the label is not
+   * optional — the type makes forgetting it a compile error.
+   */
+  "aria-label": string;
+  /**
+   * The icon component to render (e.g. a lucide icon). Rendered `aria-hidden`
+   * and sized to the density icon token.
+   */
+  icon: React.ElementType;
+  /** Replace the rendered element (Base UI render prop). */
+  render?: useRender.RenderProp;
+}
+/**
+ * A square, icon-only button for toolbars, row affordances and panel headers.
+ *
+ * Defaults to the `ghost` variant: in a dense console most icon buttons should
+ * be invisible until hovered, speaking through text colour rather than a rim.
+ *
+ * @example
+ * <IconButton aria-label="Close panel" icon={X} />
+ * @example
+ * <IconButton aria-label="Delete cue" icon={Trash} variant="danger-outline" size="sm" />
+ */
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { IconButton, IconButtonProps };

package/dist/primitives/icon-button.js

@@ -0,0 +1,59 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "../lib/cva.js";
+import { buttonChassis, buttonTones } from "./button.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/primitives/icon-button.tsx
+/**
+* Square sibling of `buttonVariants`: one `size-control-*` token instead of a
+* height plus horizontal padding, so the hit target stays a perfect square at
+* every density.
+*/
+const iconButtonVariants = cva(buttonChassis, {
+	variants: {
+		variant: buttonTones,
+		size: {
+			sm: "size-control-sm",
+			md: "size-control-md",
+			lg: "size-control-lg"
+		}
+	},
+	defaultVariants: {
+		variant: "ghost",
+		size: "md"
+	}
+});
+/**
+* A square, icon-only button for toolbars, row affordances and panel headers.
+*
+* Defaults to the `ghost` variant: in a dense console most icon buttons should
+* be invisible until hovered, speaking through text colour rather than a rim.
+*
+* @example
+* <IconButton aria-label="Close panel" icon={X} />
+* @example
+* <IconButton aria-label="Delete cue" icon={Trash} variant="danger-outline" size="sm" />
+*/
+const IconButton = React.forwardRef(function IconButton({ className, variant, size, render, icon: Icon, type, ...elementProps }, ref) {
+	return useRender({
+		render,
+		ref,
+		defaultTagName: "button",
+		props: {
+			...render === void 0 ? { type: type ?? "button" } : type === void 0 ? {} : { type },
+			...elementProps,
+			className: cn(iconButtonVariants({
+				variant,
+				size
+			}), className),
+			children: /* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": "true",
+				className: cn("shrink-0", size === "sm" ? "size-icon-sm" : "size-icon-md")
+			})
+		}
+	});
+});
+//#endregion
+export { IconButton };

package/dist/primitives/index.d.ts

@@ -0,0 +1,10 @@
+import { Separator, SeparatorProps } from "./separator.js";
+import { Button, ButtonProps, buttonVariants } from "./button.js";
+import { StatusDot, StatusDotProps, StatusTone } from "./status-dot.js";
+import { Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, AvatarSize } from "./avatar.js";
+import { Chip, ChipProps, chipVariants } from "./chip.js";
+import { IconButton, IconButtonProps } from "./icon-button.js";
+import { Kbd, KbdProps } from "./kbd.js";
+import { Skeleton, SkeletonProps } from "./skeleton.js";
+import { Spinner, SpinnerProps } from "./spinner.js";
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Button, type ButtonProps, Chip, type ChipProps, IconButton, type IconButtonProps, Kbd, type KbdProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, StatusDot, type StatusDotProps, type StatusTone, buttonVariants, chipVariants };

package/dist/primitives/index.js

@@ -0,0 +1,10 @@
+import { Button, buttonVariants } from "./button.js";
+import { Chip, chipVariants } from "./chip.js";
+import { Spinner } from "./spinner.js";
+import { Separator } from "./separator.js";
+import { IconButton } from "./icon-button.js";
+import { StatusDot } from "./status-dot.js";
+import { Avatar, AvatarGroup } from "./avatar.js";
+import { Kbd } from "./kbd.js";
+import { Skeleton } from "./skeleton.js";
+export { Avatar, AvatarGroup, Button, Chip, IconButton, Kbd, Separator, Skeleton, Spinner, StatusDot, buttonVariants, chipVariants };

package/dist/primitives/kbd.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+//#region src/primitives/kbd.d.ts
+/** Props for {@link Kbd}: the native `<kbd>` surface plus `className`. */
+type KbdProps = React.ComponentPropsWithoutRef<"kbd">;
+/**
+ * A key cap for documenting shortcuts inline: `⌘K`, `Esc`, `Shift`.
+ *
+ * Static markup — no `"use client"`, so it renders on the server. Sized off the
+ * chip height so a `Kbd` and a `Chip` line up on the same row, and set in the
+ * micro type step because shortcut hints are reference material, not content.
+ *
+ * @example
+ * <span>Press <Kbd>⌘</Kbd><Kbd>K</Kbd> to search</span>
+ */
+declare const Kbd: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Kbd, KbdProps };

package/dist/primitives/kbd.js

@@ -0,0 +1,24 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/kbd.tsx
+/**
+* A key cap for documenting shortcuts inline: `⌘K`, `Esc`, `Shift`.
+*
+* Static markup — no `"use client"`, so it renders on the server. Sized off the
+* chip height so a `Kbd` and a `Chip` line up on the same row, and set in the
+* micro type step because shortcut hints are reference material, not content.
+*
+* @example
+* <span>Press <Kbd>⌘</Kbd><Kbd>K</Kbd> to search</span>
+*/
+const Kbd = React.forwardRef(function Kbd({ className, children, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("kbd", {
+		ref,
+		className: cn("inline-flex h-chip min-w-chip select-none items-center justify-center rounded-(--radius-control) border border-border bg-surface-2 px-(--cue-space-2) font-mono text-(length:--cue-text-micro) leading-none text-fg-muted", className),
+		...elementProps,
+		children
+	});
+});
+//#endregion
+export { Kbd };

package/dist/primitives/separator.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { Separator } from "@base-ui/react/separator";
+//#region src/primitives/separator.d.ts
+interface SeparatorProps extends Omit<Separator.Props, "className"> {
+  /** Extra classes, merged over the hairline defaults. */
+  className?: string;
+}
+/**
+ * A hairline rule that screen readers can see.
+ *
+ * Wraps Base UI's `Separator`, which contributes `role="separator"` and
+ * `aria-orientation`. The line itself is a 1px block painted with the `border`
+ * token rather than an actual CSS border: a bordered zero-height box collapses
+ * unpredictably inside flex rows, while a `h-px` block never does.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Separator />
+ * @example
+ * <div className="flex items-center gap-2">a <Separator orientation="vertical" /> b</div>
+ */
+declare const Separator$1: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Separator$1 as Separator, SeparatorProps };

package/dist/primitives/separator.js

@@ -0,0 +1,30 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Separator } from "@base-ui/react/separator";
+//#region src/primitives/separator.tsx
+/**
+* A hairline rule that screen readers can see.
+*
+* Wraps Base UI's `Separator`, which contributes `role="separator"` and
+* `aria-orientation`. The line itself is a 1px block painted with the `border`
+* token rather than an actual CSS border: a bordered zero-height box collapses
+* unpredictably inside flex rows, while a `h-px` block never does.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Separator />
+* @example
+* <div className="flex items-center gap-2">a <Separator orientation="vertical" /> b</div>
+*/
+const Separator$1 = React.forwardRef(function Separator$2({ className, orientation = "horizontal", ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx(Separator, {
+		ref,
+		orientation,
+		className: cn("shrink-0 bg-border", orientation === "vertical" ? "h-full w-px" : "h-px w-full", className),
+		...elementProps
+	});
+});
+//#endregion
+export { Separator$1 as Separator };

package/dist/primitives/skeleton.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+//#region src/primitives/skeleton.d.ts
+/** Props for {@link Skeleton}: the native `<div>` surface plus `className`. */
+type SkeletonProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * A loading placeholder block.
+ *
+ * Carries no intrinsic size — give it one with `className` (`h-4 w-24`) so the
+ * skeleton matches the shape of whatever is arriving. `aria-hidden` by default:
+ * a screen reader should hear the surrounding live region say "loading", not a
+ * fleet of empty boxes. The pulse stills under `prefers-reduced-motion`.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <Skeleton className="h-4 w-32" />
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Skeleton, SkeletonProps };

package/dist/primitives/skeleton.js

@@ -0,0 +1,27 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/skeleton.tsx
+/**
+* A loading placeholder block.
+*
+* Carries no intrinsic size — give it one with `className` (`h-4 w-24`) so the
+* skeleton matches the shape of whatever is arriving. `aria-hidden` by default:
+* a screen reader should hear the surrounding live region say "loading", not a
+* fleet of empty boxes. The pulse stills under `prefers-reduced-motion`.
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <Skeleton className="h-4 w-32" />
+*/
+const Skeleton = React.forwardRef(function Skeleton({ className, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"aria-hidden": "true",
+		className: cn("animate-pulse rounded-(--radius-control) bg-surface-2 motion-reduce:animate-none", className),
+		...elementProps
+	});
+});
+//#endregion
+export { Skeleton };

package/dist/primitives/spinner.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+//#region src/primitives/spinner.d.ts
+interface SpinnerProps extends Omit<React.ComponentPropsWithoutRef<"span">, "children"> {
+  /** Rung of the density icon ladder to draw at. Defaults to `"md"`. */
+  size?: "sm" | "md";
+  /** Accessible label announced while the spinner is on screen. Defaults to `"Loading"`. */
+  label?: string;
+}
+/**
+ * An indeterminate progress ring, drawn in CSS only — no SVG, no animation
+ * library, one element.
+ *
+ * The ring is a conic gradient masked to a hairline annulus, inked with
+ * `currentColor`, so it inherits whatever text colour surrounds it (a spinner
+ * inside a `danger` button is red without being told). Under
+ * `prefers-reduced-motion` the rotation stops and the ring stays as a static
+ * arc rather than disappearing.
+ *
+ * @example
+ * <Spinner size="sm" />
+ * @example
+ * <Button disabled><Spinner /> Rendering…</Button>
+ */
+declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { Spinner, SpinnerProps };

package/dist/primitives/spinner.js

@@ -0,0 +1,31 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/spinner.tsx
+/**
+* An indeterminate progress ring, drawn in CSS only — no SVG, no animation
+* library, one element.
+*
+* The ring is a conic gradient masked to a hairline annulus, inked with
+* `currentColor`, so it inherits whatever text colour surrounds it (a spinner
+* inside a `danger` button is red without being told). Under
+* `prefers-reduced-motion` the rotation stops and the ring stays as a static
+* arc rather than disappearing.
+*
+* @example
+* <Spinner size="sm" />
+* @example
+* <Button disabled><Spinner /> Rendering…</Button>
+*/
+const Spinner = React.forwardRef(function Spinner({ className, size = "md", label = "Loading", ...elementProps }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		role: "status",
+		"aria-label": label,
+		className: cn("inline-block shrink-0 animate-spin rounded-full motion-reduce:animate-none", "[background:conic-gradient(from_0deg,transparent_0deg,currentColor_320deg)]", "[mask:radial-gradient(farthest-side,#0000_calc(100%_-_1.5px),#000_calc(100%_-_1.5px))]", size === "sm" ? "size-icon-sm" : "size-icon-md", className),
+		...elementProps
+	});
+});
+//#endregion
+export { Spinner };

package/dist/primitives/status-dot.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+//#region src/primitives/status-dot.d.ts
+/**
+ * The five console states. `ok | busy | warn | danger` are the shared status
+ * vocabulary (same tokens as `Chip`, `Meter`, `Toast`); `idle` is the fifth,
+ * "nothing is happening here" state and is drawn hollow rather than filled.
+ */
+type StatusTone = "ok" | "busy" | "warn" | "danger" | "idle";
+interface StatusDotProps extends Omit<React.ComponentPropsWithoutRef<"span">, "children"> {
+  /** Which state to paint. `idle` renders a hollow ring. */
+  tone: StatusTone;
+  /**
+   * Pulse the dot to signal live activity. Automatically stilled under
+   * `prefers-reduced-motion`.
+   */
+  pulse?: boolean;
+  /**
+   * Diameter in px at the default 16px root font size. Emitted as `rem`, so it
+   * scales with browser zoom and the user's font size. Defaults to `6`.
+   */
+  size?: number;
+  /**
+   * Screen-reader text. Defaults to the tone name, which is usually the honest
+   * answer; pass something specific when the surrounding row does not say it.
+   */
+  label?: string;
+}
+/**
+ * A 6px state dot — the densest possible status indicator.
+ *
+ * Colour alone never carries meaning here: the dot is `aria-hidden` and the
+ * component always emits an `sr-only` label inside a `role="status"` wrapper,
+ * so the state is announced as well as shown (WCAG 1.4.1).
+ *
+ * The wrapper is `relative` for that label's sake and no other reason.
+ * `.sr-only` is `position: absolute`; without a positioned ancestor its
+ * containing block is the initial one, so its scrollable overflow lands on
+ * `<html>` rather than on whatever scroller it is nested in. One dot is
+ * harmless and a table of two thousand rows is a document several thousand
+ * pixels taller than anything visible on it.
+ *
+ * Static markup — no `"use client"`.
+ *
+ * @example
+ * <StatusDot tone="ok" />
+ * @example
+ * <StatusDot tone="busy" pulse label="Rendering preview" size={8} />
+ */
+declare const StatusDot: React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { StatusDot, StatusDotProps, StatusTone };