@cueplusplus/ui 0.1.0

package/dist/overlays/tooltip.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/overlays/tooltip.d.ts
+interface TooltipProviderProps extends Tooltip.Provider.Props {}
+/**
+ * Shares one hover delay across a group of tooltips: once the first one has
+ * opened, its neighbours open instantly, so scanning a toolbar does not mean
+ * waiting out the delay at every button.
+ *
+ * @example
+ * <Tooltip.Provider delay={400}><Toolbar>…</Toolbar></Tooltip.Provider>
+ */
+declare function TooltipProvider(props: TooltipProviderProps): React.JSX.Element;
+interface TooltipRootProps extends Tooltip.Root.Props {}
+/** Groups the parts of one tooltip. Renders no element. */
+declare function TooltipRoot({ children, ...rootProps }: TooltipRootProps): React.JSX.Element;
+interface TooltipTriggerProps extends Tooltip.Trigger.Props {}
+interface TooltipContentProps extends Omit<Tooltip.Popup.Props, "className"> {
+  /** Extra classes for the popup surface. */
+  className?: string;
+  /** Extra classes for the positioner that places the popup. */
+  positionerClassName?: string;
+  /** Preferred side of the trigger. Defaults to `"top"`. */
+  side?: Tooltip.Positioner.Props["side"];
+  /** Alignment along that side. Defaults to `"center"`. */
+  align?: Tooltip.Positioner.Props["align"];
+  /** Gap in px between trigger and popup. Defaults to `4`. */
+  sideOffset?: Tooltip.Positioner.Props["sideOffset"];
+  /** Nudge along the alignment axis, in px. */
+  alignOffset?: Tooltip.Positioner.Props["alignOffset"];
+  /** Keep the popup mounted while closed. */
+  keepMounted?: boolean;
+}
+/**
+ * A short label revealed on hover or keyboard focus — what an icon-only control
+ * does, what an abbreviated column header means.
+ *
+ * Wraps Base UI's `Tooltip` and adds the two things a design system must not
+ * leave to the caller: the `role="tooltip"` / `aria-describedby` pairing, and
+ * the portal theme stamp. For anything longer than a label, reach for
+ * {@link InfoTip} (a focusable badge) or a `Popover` instead — hover-only
+ * content is unreachable on touch.
+ *
+ * @example
+ * <Tooltip.Root>
+ *   <Tooltip.Trigger render={<IconButton aria-label="Blackout" icon={Power} />} />
+ *   <Tooltip.Content>Fades every channel to zero</Tooltip.Content>
+ * </Tooltip.Root>
+ */
+declare const Tooltip$1: {
+  Provider: typeof TooltipProvider;
+  Root: typeof TooltipRoot;
+  Trigger: React.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Content: React.ForwardRefExoticComponent<Omit<TooltipContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Tooltip$1 as Tooltip, TooltipContentProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps };

package/dist/overlays/tooltip.js

@@ -0,0 +1,95 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useCuePortalProps } from "../system/portal.js";
+import { overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses } from "./_surface.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip } from "@base-ui/react/tooltip";
+//#region src/overlays/tooltip.tsx
+/**
+* The id the trigger points `aria-describedby` at and the popup answers to.
+*
+* Base UI does not wire the two together — its tooltip is a purely visual
+* affordance — so this layer does it. Without the pairing a screen reader user
+* gets no hint at all, and this system uses tooltips for real information
+* (see {@link InfoTip}).
+*/
+const TooltipIdContext = React.createContext(void 0);
+/**
+* Shares one hover delay across a group of tooltips: once the first one has
+* opened, its neighbours open instantly, so scanning a toolbar does not mean
+* waiting out the delay at every button.
+*
+* @example
+* <Tooltip.Provider delay={400}><Toolbar>…</Toolbar></Tooltip.Provider>
+*/
+function TooltipProvider(props) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, { ...props });
+}
+/** Groups the parts of one tooltip. Renders no element. */
+function TooltipRoot({ children, ...rootProps }) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsx(TooltipIdContext.Provider, {
+		value: id,
+		children: /* @__PURE__ */ jsx(Tooltip.Root, {
+			...rootProps,
+			children
+		})
+	});
+}
+/**
+* A short label revealed on hover or keyboard focus — what an icon-only control
+* does, what an abbreviated column header means.
+*
+* Wraps Base UI's `Tooltip` and adds the two things a design system must not
+* leave to the caller: the `role="tooltip"` / `aria-describedby` pairing, and
+* the portal theme stamp. For anything longer than a label, reach for
+* {@link InfoTip} (a focusable badge) or a `Popover` instead — hover-only
+* content is unreachable on touch.
+*
+* @example
+* <Tooltip.Root>
+*   <Tooltip.Trigger render={<IconButton aria-label="Blackout" icon={Power} />} />
+*   <Tooltip.Content>Fades every channel to zero</Tooltip.Content>
+* </Tooltip.Root>
+*/
+const Tooltip$1 = {
+	Provider: TooltipProvider,
+	Root: TooltipRoot,
+	Trigger: React.forwardRef(function TooltipTrigger({ className, ...elementProps }, ref) {
+		const id = React.useContext(TooltipIdContext);
+		return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+			ref,
+			"data-slot": "tooltip-trigger",
+			"aria-describedby": id,
+			className: cn(className),
+			...elementProps
+		});
+	}),
+	Content: React.forwardRef(function TooltipContent({ className, positionerClassName, side = "top", align, sideOffset = 4, alignOffset, keepMounted, children, ...popupProps }, ref) {
+		const portalProps = useCuePortalProps();
+		const id = React.useContext(TooltipIdContext);
+		return /* @__PURE__ */ jsx(Tooltip.Portal, {
+			keepMounted,
+			...portalProps,
+			children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+				className: cn(overlayPositionerClasses, positionerClassName),
+				side,
+				align,
+				sideOffset,
+				alignOffset,
+				children: /* @__PURE__ */ jsx(Tooltip.Popup, {
+					ref,
+					id,
+					role: "tooltip",
+					"data-slot": "tooltip-popup",
+					className: cn(overlaySurfaceClasses, overlayPopupTransitionClasses, "max-w-[16rem] px-(--cue-space-3) py-(--cue-space-2) font-mono text-(length:--cue-text-label) leading-relaxed text-fg", className),
+					...popupProps,
+					children
+				})
+			})
+		});
+	})
+};
+//#endregion
+export { Tooltip$1 as Tooltip };

package/dist/primitives/avatar.d.ts

@@ -0,0 +1,51 @@
+import { ClassProp, VariantProps } from "../lib/cva.js";
+import * as React from "react";
+//#region src/primitives/avatar.d.ts
+/** Rung of the control ladder an avatar (and its group) sits on. */
+type AvatarSize = "sm" | "md" | "lg";
+declare const avatarVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & ClassProp) | undefined) => string;
+interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<"span">, "children">, VariantProps<typeof avatarVariants> {
+  /** Image URL. Omit to go straight to the fallback. */
+  src?: string;
+  /** Alt text for the image, and the name the default initials are derived from. */
+  alt?: string;
+  /** What to show while the image loads or after it fails. Defaults to initials from `alt`. */
+  fallback?: React.ReactNode;
+}
+/**
+ * A round user/entity avatar sized off the density control ladder, so it lines
+ * up with the buttons and inputs on the same row.
+ *
+ * Wraps Base UI's `Avatar`, which owns the image-loading state machine: the
+ * fallback shows immediately, is replaced when the image decodes, and comes
+ * back if the image errors.
+ *
+ * @example
+ * <Avatar alt="Ada Lovelace" src="/ada.png" />
+ * @example
+ * <Avatar alt="Ada Lovelace" size="sm" />
+ */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+interface AvatarGroupProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Show at most this many avatars; the rest collapse into a `+N` chip. Omit for no limit. */
+  max?: number;
+  /** Size of the `+N` overflow chip. Match it to the avatars you pass in. Defaults to `"md"`. */
+  size?: AvatarSize;
+}
+/**
+ * An overlapping stack of {@link Avatar}s with a `+N` overflow chip.
+ *
+ * Each item after the first is pulled left by a negative inline-start margin
+ * and ringed in the page background colour, which is what reads as "stacked"
+ * rather than "crowded". Logical margins, so the stack flips correctly in RTL.
+ *
+ * @example
+ * <AvatarGroup max={3}>
+ *   {users.map((u) => <Avatar key={u.id} alt={u.name} src={u.avatar} />)}
+ * </AvatarGroup>
+ */
+declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, AvatarSize };

package/dist/primitives/avatar.js

@@ -0,0 +1,93 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "../lib/cva.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/primitives/avatar.tsx
+const avatarVariants = cva("relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full border border-border bg-surface-2 font-mono leading-none tracking-normal text-fg-muted uppercase", {
+	variants: { size: {
+		sm: "size-control-sm text-(length:--cue-text-micro)",
+		md: "size-control-md text-(length:--cue-text-label)",
+		lg: "size-control-lg text-(length:--cue-text-ui)"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** Overlap for stacked avatars: half a step of negative inline-start margin. */
+const OVERLAP_CLASS = "[margin-inline-start:calc(var(--cue-space-2)*-1)]";
+/**
+* "Ada Lovelace" → "AL"; "cue" → "CU"; nothing usable → "?".
+*
+* Deliberately naive and synchronous: initials are decoration behind a real
+* `alt`, not an identity claim.
+*/
+function initialsFrom(name) {
+	const words = (name ?? "").trim().split(/\s+/).filter(Boolean);
+	if (words.length === 0) return "?";
+	if (words.length === 1) return (words[0] ?? "").slice(0, 2).toUpperCase();
+	return `${words[0]?.[0] ?? ""}${words[words.length - 1]?.[0] ?? ""}`.toUpperCase();
+}
+/**
+* A round user/entity avatar sized off the density control ladder, so it lines
+* up with the buttons and inputs on the same row.
+*
+* Wraps Base UI's `Avatar`, which owns the image-loading state machine: the
+* fallback shows immediately, is replaced when the image decodes, and comes
+* back if the image errors.
+*
+* @example
+* <Avatar alt="Ada Lovelace" src="/ada.png" />
+* @example
+* <Avatar alt="Ada Lovelace" size="sm" />
+*/
+const Avatar$1 = React.forwardRef(function Avatar$2({ className, size, src, alt, fallback, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs(Avatar.Root, {
+		ref,
+		className: cn(avatarVariants({ size }), className),
+		...elementProps,
+		children: [src === void 0 ? null : /* @__PURE__ */ jsx(Avatar.Image, {
+			src,
+			alt: alt ?? "",
+			className: "size-full object-cover"
+		}), /* @__PURE__ */ jsx(Avatar.Fallback, {
+			className: "leading-none",
+			children: fallback ?? initialsFrom(alt)
+		})]
+	});
+});
+const OVERFLOW_SIZES = {
+	sm: "size-control-sm text-(length:--cue-text-micro)",
+	md: "size-control-md text-(length:--cue-text-micro)",
+	lg: "size-control-lg text-(length:--cue-text-label)"
+};
+/**
+* An overlapping stack of {@link Avatar}s with a `+N` overflow chip.
+*
+* Each item after the first is pulled left by a negative inline-start margin
+* and ringed in the page background colour, which is what reads as "stacked"
+* rather than "crowded". Logical margins, so the stack flips correctly in RTL.
+*
+* @example
+* <AvatarGroup max={3}>
+*   {users.map((u) => <Avatar key={u.id} alt={u.name} src={u.avatar} />)}
+* </AvatarGroup>
+*/
+const AvatarGroup = React.forwardRef(function AvatarGroup({ className, max, size = "md", children, ...elementProps }, ref) {
+	const items = React.Children.toArray(children);
+	const visible = max === void 0 ? items : items.slice(0, Math.max(0, max));
+	const overflow = items.length - visible.length;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("flex items-center", className),
+		...elementProps,
+		children: [visible.map((child, index) => /* @__PURE__ */ jsx("span", {
+			className: cn("relative inline-flex rounded-full ring-1 ring-bg", index === 0 ? null : OVERLAP_CLASS),
+			children: child
+		}, index)), overflow > 0 ? /* @__PURE__ */ jsx("span", {
+			className: cn("relative inline-flex shrink-0 items-center justify-center rounded-full border border-border bg-surface-3 font-mono leading-none text-fg-muted ring-1 ring-bg", OVERFLOW_SIZES[size], OVERLAP_CLASS),
+			children: `+${overflow}`
+		}) : null]
+	});
+});
+//#endregion
+export { Avatar$1 as Avatar, AvatarGroup };

package/dist/primitives/button.d.ts

@@ -0,0 +1,46 @@
+import { ClassProp, VariantProps } from "../lib/cva.js";
+import * as React from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/primitives/button.d.ts
+/**
+ * The `Button` class recipe, exported so other surfaces (a link that must look
+ * like a button, a third-party trigger) can borrow the exact same classes.
+ *
+ * @example
+ * <a className={buttonVariants({ variant: "primary", size: "sm" })} href="/go">Go</a>
+ */
+declare const buttonVariants: (props?: ({
+  variant?: "ghost" | "primary" | "secondary" | "outline" | "danger" | "danger-outline" | null | undefined;
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & ClassProp) | undefined) => string;
+interface ButtonProps extends React.ComponentPropsWithoutRef<"button">, VariantProps<typeof buttonVariants> {
+  /**
+   * Replace the rendered element (Base UI render prop). Accepts an element —
+   * `render={<a href="/x" />}` — or a function returning one. When set, the
+   * default `type="button"` is dropped so non-button elements stay valid.
+   */
+  render?: useRender.RenderProp;
+  /**
+   * Optional leading icon component (e.g. a lucide icon). Rendered
+   * `aria-hidden` and sized to the density icon token, so it tracks the density
+   * level without the caller passing a pixel size.
+   */
+  icon?: React.ElementType;
+}
+/**
+ * The system's primary action control.
+ *
+ * A real `<button>` by default, restyled entirely from tokens: height comes
+ * from the density control ladder, colour from the theme's accent/surface ramp.
+ * The focus ring is an `outline`, never a `box-shadow`, so it survives inside
+ * `overflow: hidden` panels.
+ *
+ * @example
+ * <Button variant="primary" size="sm" icon={Play}>Run cue</Button>
+ * @example
+ * // Compose with a router link instead of a <button>:
+ * <Button render={<Link href="/patch" />}>Patch</Button>
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Button, ButtonProps, buttonVariants };

package/dist/primitives/button.js

@@ -0,0 +1,94 @@
+"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/primitives/button.tsx
+/**
+* The chassis every control-shaped primitive shares: layout, mono type, the
+* density radius, the transition and the focus ring. Deliberately carries no
+* size and no colour so `Button` (height + horizontal padding) and `IconButton`
+* (one square token) can each add their own without fighting `tailwind-merge`.
+*
+* `focus-visible:outline-solid` is load-bearing, not decoration. In Tailwind v4
+* `outline-2` compiles to `outline-style: var(--tw-outline-style)` and
+* `outline-none` sets that property to `none` on the element — so a control
+* carrying both resolves its ring to `outline-style: none` and paints nothing.
+* Restoring the style at ring time is what makes the focus indicator exist
+* (WCAG 2.4.7). `test/focus-ring.test.ts` guards every occurrence.
+*
+* @internal Not part of the public API; imported by `icon-button.tsx`.
+*/
+const buttonChassis = "inline-flex select-none items-center justify-center gap-[0.4em] whitespace-nowrap rounded-(--radius-control) font-mono font-medium transition-colors duration-150 outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-40";
+/**
+* The shared colour vocabulary. `accent` is theme-controlled, so `primary`
+* reads as white-on-black in `cue` and cyan-on-near-black in `terminal` with no
+* per-theme branching here.
+*
+* @internal Not part of the public API; imported by `icon-button.tsx`.
+*/
+const buttonTones = {
+	primary: "bg-accent text-accent-fg hover:bg-accent-hover border border-transparent",
+	secondary: "border border-border text-fg-muted hover:border-border-strong hover:text-fg bg-surface-2",
+	ghost: "text-fg-muted hover:text-fg hover:bg-surface-2 border border-transparent",
+	outline: "border border-border text-fg hover:border-accent hover:text-accent bg-transparent",
+	danger: "bg-danger text-white hover:opacity-90 border border-transparent",
+	"danger-outline": "border text-danger bg-transparent hover:bg-danger/10 border-danger/40"
+};
+/**
+* The `Button` class recipe, exported so other surfaces (a link that must look
+* like a button, a third-party trigger) can borrow the exact same classes.
+*
+* @example
+* <a className={buttonVariants({ variant: "primary", size: "sm" })} href="/go">Go</a>
+*/
+const buttonVariants = cva(buttonChassis, {
+	variants: {
+		variant: buttonTones,
+		size: {
+			sm: "h-control-sm px-(--cue-space-4) text-(length:--cue-text-ui)",
+			md: "h-control-md px-(--cue-space-5) text-(length:--cue-text-ui)",
+			lg: "h-control-lg px-(--cue-space-6) text-(length:--cue-text-emphasis)"
+		}
+	},
+	defaultVariants: {
+		variant: "secondary",
+		size: "md"
+	}
+});
+/**
+* The system's primary action control.
+*
+* A real `<button>` by default, restyled entirely from tokens: height comes
+* from the density control ladder, colour from the theme's accent/surface ramp.
+* The focus ring is an `outline`, never a `box-shadow`, so it survives inside
+* `overflow: hidden` panels.
+*
+* @example
+* <Button variant="primary" size="sm" icon={Play}>Run cue</Button>
+* @example
+* // Compose with a router link instead of a <button>:
+* <Button render={<Link href="/patch" />}>Patch</Button>
+*/
+const Button = React.forwardRef(function Button({ className, variant, size, render, icon: Icon, children, type, ...elementProps }, ref) {
+	return useRender({
+		render,
+		ref,
+		defaultTagName: "button",
+		props: {
+			...render === void 0 ? { type: type ?? "button" } : type === void 0 ? {} : { type },
+			...elementProps,
+			className: cn(buttonVariants({
+				variant,
+				size
+			}), className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [Icon === void 0 ? null : /* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": "true",
+				className: cn("shrink-0", size === "sm" ? "size-icon-sm" : "size-icon-md")
+			}), children] })
+		}
+	});
+});
+//#endregion
+export { Button, buttonChassis, buttonTones, buttonVariants };

package/dist/primitives/chip.d.ts

@@ -0,0 +1,47 @@
+import { ClassProp, VariantProps } from "../lib/cva.js";
+import * as React from "react";
+//#region src/primitives/chip.d.ts
+/**
+ * The tinted-chip recipe: `bg-<tone>/10 border-<tone>/35 text-<tone>`.
+ *
+ * Tone and fill are split across `variants` and `compoundVariants` on purpose.
+ * Emitting `bg-<tone>/10` from the tone map and then cancelling it with
+ * `bg-transparent` for the outline variant would leave two competing background
+ * utilities in the class string and lean on `tailwind-merge` to pick a winner —
+ * which it cannot do reliably for token-named colours. Compound variants emit
+ * exactly one fill, always.
+ *
+ * @example
+ * <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
+ */
+declare const chipVariants: (props?: ({
+  tone?: "danger" | "info" | "warn" | "accent" | "ok" | "busy" | "neutral" | null | undefined;
+  variant?: "outline" | "tinted" | null | undefined;
+  interactive?: boolean | null | undefined;
+} & ClassProp) | undefined) => string;
+interface ChipProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof chipVariants> {
+  /**
+   * Render as a `<button>` with hover feedback instead of a static `<span>`.
+   * Use for filter pills and other clickable tags; leave off for pure labels.
+   */
+  interactive?: boolean;
+  /** Disable the interactive form. Ignored when `interactive` is not set. */
+  disabled?: boolean;
+  /** Chip content — normally one or two words, or a short count. */
+  children?: React.ReactNode;
+}
+/**
+ * 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.
+ *
+ * @example
+ * <Chip tone="ok">online</Chip>
+ * @example
+ * <Chip tone="accent" variant="outline" interactive onClick={toggle}>dimmer</Chip>
+ */
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Chip, ChipProps, chipVariants };

package/dist/primitives/chip.js

@@ -0,0 +1,152 @@
+"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>`.
+*
+* Tone and fill are split across `variants` and `compoundVariants` on purpose.
+* Emitting `bg-<tone>/10` from the tone map and then cancelling it with
+* `bg-transparent` for the outline variant would leave two competing background
+* utilities in the class string and lean on `tailwind-merge` to pick a winner —
+* which it cannot do reliably for token-named colours. Compound variants emit
+* exactly one fill, always.
+*
+* @example
+* <span className={chipVariants({ tone: "danger", variant: "outline" })}>fault</span>
+*/
+const chipVariants = cva("inline-flex h-chip select-none items-center justify-center gap-(--cue-space-2) whitespace-nowrap rounded-(--radius-control) border px-(--cue-space-3) font-mono text-(length:--cue-text-label) leading-none uppercase tracking-[0.15em] outline-none focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-1 focus-visible:outline-accent", {
+	variants: {
+		tone: {
+			neutral: "border-border 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: "",
+			outline: "bg-transparent"
+		},
+		interactive: {
+			true: "cursor-pointer disabled:pointer-events-none disabled:opacity-40",
+			false: ""
+		}
+	},
+	compoundVariants: [
+		{
+			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",
+			interactive: true,
+			class: "hover:border-border-strong hover:text-fg"
+		},
+		{
+			tone: "accent",
+			interactive: true,
+			class: "hover:border-accent/60 hover:bg-accent/20"
+		},
+		{
+			tone: "ok",
+			interactive: true,
+			class: "hover:border-ok/60 hover:bg-ok/20"
+		},
+		{
+			tone: "busy",
+			interactive: true,
+			class: "hover:border-busy/60 hover:bg-busy/20"
+		},
+		{
+			tone: "warn",
+			interactive: true,
+			class: "hover:border-warn/60 hover:bg-warn/20"
+		},
+		{
+			tone: "danger",
+			interactive: true,
+			class: "hover:border-danger/60 hover:bg-danger/20"
+		},
+		{
+			tone: "info",
+			interactive: true,
+			class: "hover:border-info/60 hover:bg-info/20"
+		}
+	],
+	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.
+*
+* @example
+* <Chip tone="ok">online</Chip>
+* @example
+* <Chip tone="accent" variant="outline" interactive onClick={toggle}>dimmer</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 };