@cueplusplus/ui 0.1.0

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 { 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 { Separator, SeparatorProps } from "./separator.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 { IconButton } from "./icon-button.js";
+import { StatusDot } from "./status-dot.js";
+import { Avatar, AvatarGroup } from "./avatar.js";
+import { Kbd } from "./kbd.js";
+import { Separator } from "./separator.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,44 @@
+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).
+ *
+ * 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 };

package/dist/primitives/status-dot.js

@@ -0,0 +1,50 @@
+import { cn } from "../lib/cn.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/status-dot.tsx
+const DOT_TONES = {
+	ok: "bg-ok",
+	busy: "bg-busy",
+	warn: "bg-warn",
+	danger: "bg-danger",
+	idle: "border border-fg-subtle bg-transparent"
+};
+/** Default diameter in px — the smallest dot that still reads as a shape. */
+const DEFAULT_SIZE_PX = 6;
+/** px at the reference 16px root, converted so the dot tracks browser zoom. */
+const toRem = (px) => `${px / 16}rem`;
+/**
+* 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).
+*
+* Static markup — no `"use client"`.
+*
+* @example
+* <StatusDot tone="ok" />
+* @example
+* <StatusDot tone="busy" pulse label="Rendering preview" size={8} />
+*/
+const StatusDot = React.forwardRef(function StatusDot({ className, tone, pulse = false, size = DEFAULT_SIZE_PX, label, ...elementProps }, ref) {
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		role: "status",
+		className: cn("inline-flex shrink-0 items-center justify-center", className),
+		...elementProps,
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: cn("block shrink-0 rounded-full", DOT_TONES[tone], pulse ? "animate-pulse motion-reduce:animate-none" : null),
+			style: {
+				width: toRem(size),
+				height: toRem(size)
+			}
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label ?? tone
+		})]
+	});
+});
+//#endregion
+export { StatusDot };

package/dist/styles.css

@@ -0,0 +1,19 @@
+/*! @cueplusplus/ui — lane A stylesheet (Tailwind v4 consumers).
+ *
+ * Consumer app CSS:
+ *   @import "tailwindcss";
+ *   @import "@cueplusplus/ui/styles.css";
+ *
+ * Tailwind v4 does not scan node_modules, so the library registers its own
+ * sources: `@source "./"` resolves relative to THIS file, i.e. the shipped
+ * dist/, which is where the class strings live after the build.
+ */
+
+@import "@cueplusplus/tokens/theme.css";
+@import "@cueplusplus/tokens/tailwind.css";
+
+@source "./";
+
+@custom-variant density-ultra (&:where([data-density="ultra-compact"], [data-density="ultra-compact"] *));
+@custom-variant density-large (&:where([data-density="large"], [data-density="large"] *));
+@custom-variant mode-light (&:where([data-mode="light"], [data-mode="light"] *));

package/dist/system/density.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { Density } from "@cueplusplus/tokens";
+//#region src/system/density.d.ts
+interface DensityProps {
+  /** Level to apply to this subtree: `ultra-compact`, `normal` or `large`. */
+  density: Density;
+  /** Subtree that should render at `density`. */
+  children: React.ReactNode;
+  /** Extra classes for the island element. It is an ordinary `<div>` — style it like one. */
+  className?: string;
+  /** Inline styles for the island element. */
+  style?: React.CSSProperties;
+}
+/**
+ * Re-scope any subtree to a different density level.
+ *
+ * Renders a plain `<div data-density="…">`: the geometry custom properties are
+ * re-declared by the attribute selector and inherit down, so nesting is free and
+ * needs no JS. The matching React context is published alongside for the rare
+ * JS reads (`useDensity()`, `useControlHeight()`, portal stamping) — the DOM
+ * attribute, not the context, is what actually restyles the tree.
+ *
+ * Theme and mode are deliberately *not* re-scoped here: density is the only axis
+ * an island may override (spec §6).
+ *
+ * @example
+ * <Density density="ultra-compact">
+ *   <Toolbar />
+ * </Density>
+ */
+declare function Density$1({ density, children, className, style }: DensityProps): React.JSX.Element;
+//#endregion
+export { Density$1 as Density, DensityProps };

package/dist/system/density.js

@@ -0,0 +1,49 @@
+"use client";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/system/density.tsx
+/** Density level every unstamped subtree falls back to. */
+const DEFAULT_DENSITY = "normal";
+/** The three levels, as a runtime array for validating persisted input. */
+const DENSITY_LEVELS = [
+	"ultra-compact",
+	"normal",
+	"large"
+];
+/**
+* Nearest ambient density. `null` means "nothing has stamped a level yet", which
+* `useDensity()` reports as {@link DEFAULT_DENSITY}.
+*
+* Internal: consumers read it through `useDensity()`, never directly.
+*/
+const DensityContext = React.createContext(null);
+/**
+* Re-scope any subtree to a different density level.
+*
+* Renders a plain `<div data-density="…">`: the geometry custom properties are
+* re-declared by the attribute selector and inherit down, so nesting is free and
+* needs no JS. The matching React context is published alongside for the rare
+* JS reads (`useDensity()`, `useControlHeight()`, portal stamping) — the DOM
+* attribute, not the context, is what actually restyles the tree.
+*
+* Theme and mode are deliberately *not* re-scoped here: density is the only axis
+* an island may override (spec §6).
+*
+* @example
+* <Density density="ultra-compact">
+*   <Toolbar />
+* </Density>
+*/
+function Density({ density, children, className, style }) {
+	return /* @__PURE__ */ jsx(DensityContext.Provider, {
+		value: density,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-density": density,
+			className,
+			style,
+			children
+		})
+	});
+}
+//#endregion
+export { DEFAULT_DENSITY, DENSITY_LEVELS, Density, DensityContext };

package/dist/system/index.d.ts

@@ -0,0 +1,8 @@
+import { ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps } from "./theme-provider.js";
+import { Density, DensityProps } from "./density.js";
+import { CuePortalFrame, CuePortalFrameProps, useCuePortalProps } from "./portal.js";
+import { DEFAULT_STORAGE_KEY, PersistedPreferences, prepaintScript } from "./prepaint.js";
+import { ControlSize, useControlHeight, useDensity } from "./use-density.js";
+import { useTheme } from "./use-theme.js";
+import { Density as DensityLevel, Mode, ThemeName } from "@cueplusplus/tokens";
+export { type ControlSize, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, Density, type DensityLevel, type DensityProps, type Mode, type PersistedPreferences, type ResolvedMode, type ThemeContextValue, type ThemeName, ThemeProvider, type ThemeProviderProps, prepaintScript, useControlHeight, useCuePortalProps, useDensity, useTheme };

package/dist/system/index.js

@@ -0,0 +1,7 @@
+import { Density } from "./density.js";
+import { DEFAULT_STORAGE_KEY, prepaintScript } from "./prepaint.js";
+import { ThemeProvider } from "./theme-provider.js";
+import { CuePortalFrame, useCuePortalProps } from "./portal.js";
+import { useControlHeight, useDensity } from "./use-density.js";
+import { useTheme } from "./use-theme.js";
+export { CuePortalFrame, DEFAULT_STORAGE_KEY, Density, ThemeProvider, prepaintScript, useControlHeight, useCuePortalProps, useDensity, useTheme };

package/dist/system/portal.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+//#region src/system/portal.d.ts
+/**
+ * Props to spread onto a Base UI `Portal` part so the portal root inherits the
+ * caller's theme, density and mode.
+ *
+ * Returns a `container` element appended to `document.body` and stamped with
+ * `data-theme` / `data-density` / `data-mode` (plus `--cue-font-scale`) copied
+ * from the nearest provider and density island. The container is
+ * `display: contents`, so it changes no layout and creates no containing block —
+ * fixed-position overlay content behaves exactly as if it were a direct child of
+ * `<body>`.
+ *
+ * Before the container exists (server render, first client render) the object is
+ * empty, which leaves the Base UI default (`document.body`) in place.
+ *
+ * Every overlay in this system spreads this. It is the single fix for the
+ * nested-density portal bug (spec §6).
+ *
+ * @returns `{ container }` once mounted, `{}` otherwise.
+ * @example
+ * const portalProps = useCuePortalProps();
+ * <Popover.Portal {...portalProps}><Popover.Positioner>…</Popover.Positioner></Popover.Portal>
+ */
+declare function useCuePortalProps(): {
+  container?: HTMLElement;
+};
+interface CuePortalFrameProps {
+  /** Portal content to stamp. */
+  children: React.ReactNode;
+  /** Extra classes for the frame element. */
+  className?: string;
+  /** Inline styles, merged after `display: contents`. */
+  style?: React.CSSProperties;
+}
+/**
+ * Inline version of the portal contract, for portals whose container cannot be
+ * chosen (a third-party overlay, or content already portaled by something else).
+ *
+ * Wraps `children` in a `display: contents` element carrying the same
+ * `data-theme` / `data-density` / `data-mode` triple and `--cue-font-scale` as
+ * {@link useCuePortalProps}. Prefer the hook — a stamped container costs one
+ * element per overlay instead of one per render tree — and reach for this only
+ * when the container prop is not available.
+ *
+ * @example
+ * <SomeThirdPartyPortal><CuePortalFrame>{content}</CuePortalFrame></SomeThirdPartyPortal>
+ */
+declare function CuePortalFrame({ children, className, style }: CuePortalFrameProps): React.JSX.Element;
+//#endregion
+export { CuePortalFrame, CuePortalFrameProps, useCuePortalProps };