@cueplusplus/ui 0.13.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-(--cue-leading-ui) 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,58 @@
+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 label. A button with no children and no other accessible name is a
+   * control a screen reader announces as nothing.
+   *
+   * Declared explicitly, although `React.ComponentPropsWithoutRef<"button">`
+   * already carries it, for the reason `Card.Header` and `Bento.Tile` declare
+   * theirs: docgen documents a prop only where the library *declares* it, so
+   * without this line the manifest files no `children` for the system's most
+   * used control — the props table omits it, and a propSet cannot name it,
+   * which is how `/play/button` came to preview an unlabelled `<button>`.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * 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,104 @@
+"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.
+*
+* `danger` is one of the two tones this system fills a control with — the other
+* is the amber on `TwoStepButton`'s confirm — and they are the two the palette
+* gives an ink of their own. It used to be painted `text-white`, a
+* literal chosen when there was nothing else to choose: white measures 2.99:1
+* on cue's own red in dark mode — the default theme, under AA and under the 3:1
+* floor a non-text control gets — and under AA on eight of the ten dark blocks
+* this system ships. `--cue-danger-fg` is authored against each theme's red and
+* clears 4.5:1 on all twenty. `test/destructive-ink.test.ts` measures it here,
+* at the call site, rather than measuring the token pair on its own.
+*
+* @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-danger-fg 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,73 @@
+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>`, 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>
+ */
+declare const chipVariants: (props?: ({
+  tone?: "danger" | "info" | "warn" | "busy" | "accent" | "ok" | "neutral" | null | undefined;
+  variant?: "outline" | "tinted" | "tag" | 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.
+ *
+ * `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>
+ */
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Chip, ChipProps, chipVariants };