@refraction-ui/react 0.13.0 → 0.15.0

package/dist/internal/react-floating-reactions/index.d.ts

@@ -0,0 +1,65 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { FloatingReaction } from '../floating-reactions/index.js';
+export { FloatingReaction } from '../floating-reactions/index.js';
+
+interface FloatingReactionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /**
+     * Controlled list of reactions currently visible in the overlay. The parent
+     * is responsible for adding items and removing them after REACTION_LIFETIME_MS
+     * (or use the useFloatingReactions hook which handles this automatically).
+     */
+    reactions: FloatingReaction[];
+    /**
+     * Total number of horizontal lane buckets used to spread reactions.
+     * @default 5
+     */
+    lanes?: number;
+}
+/**
+ * FloatingReactions — a controlled overlay that renders transient emoji
+ * reactions floating upward. Intended to be positioned absolutely over a
+ * meeting/video surface.
+ *
+ * - Reactions animate upward and fade via `animate-[float-up_3s_ease-out_forwards]`.
+ *   Consumers must supply the `@keyframes float-up` rule (see
+ *   `floatingReactionItemClass` in the core styles for the recommended keyframe).
+ * - The overlay is `pointer-events-none` so it never blocks interaction.
+ * - role="status" aria-live="polite" announces new reactions to screen readers.
+ */
+declare const FloatingReactions: React.ForwardRefExoticComponent<FloatingReactionsProps & React.RefAttributes<HTMLDivElement>>;
+interface ReactionBurstProps {
+    emoji: string;
+    lane?: number;
+    lanes?: number;
+}
+/**
+ * ReactionBurst renders a single emoji at the specified lane offset — useful
+ * for static demos or Storybook stories showing a specific burst position.
+ */
+declare function ReactionBurst({ emoji, lane, lanes }: ReactionBurstProps): react_jsx_runtime.JSX.Element;
+interface UseFloatingReactionsResult {
+    reactions: FloatingReaction[];
+    /**
+     * Add an emoji reaction. An auto-incrementing id (not Math.random) is
+     * generated internally unless you pass one explicitly.
+     */
+    emit: (emoji: string, options?: {
+        id?: string;
+        lane?: number;
+    }) => void;
+    /** Remove all current reactions immediately. */
+    clear: () => void;
+}
+/**
+ * Manages a list of FloatingReaction items with automatic expiry after
+ * REACTION_LIFETIME_MS. IDs use an incrementing ref counter — no Math.random.
+ *
+ * @example
+ * const { reactions, emit } = useFloatingReactions()
+ * // <FloatingReactions reactions={reactions} />
+ * // <button onClick={() => emit('👋')}>Wave</button>
+ */
+declare function useFloatingReactions(): UseFloatingReactionsResult;
+
+export { FloatingReactions, type FloatingReactionsProps, ReactionBurst, type ReactionBurstProps, type UseFloatingReactionsResult, useFloatingReactions };

package/dist/internal/react-flow-editor/index.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { FlowNode, FlowEdge } from '../flow-editor/index.js';
+export { FlowEdge, FlowNode } from '../flow-editor/index.js';
+
+interface FlowEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'results' | 'color' | 'content'> {
+    /** The nodes to render on the canvas. */
+    nodes: FlowNode[];
+    /** The directed edges connecting nodes. */
+    edges: FlowEdge[];
+    /** Called when a node is clicked; receives the node's id. */
+    onNodeClick?: (id: string) => void;
+    /**
+     * Called when a node has been dragged to a new position.
+     * Receives the node id and the new (x, y) canvas coordinates.
+     */
+    onNodeMove?: (id: string, x: number, y: number) => void;
+    /** Override the rendering of individual node boxes. */
+    renderNode?: (node: FlowNode) => React.ReactNode;
+    /** Id of the currently selected node (controlled). */
+    selectedId?: string;
+    /** Whether to show the pan/zoom grid. */
+    showGrid?: boolean;
+    /** Whether to show zoom/pan controls. */
+    showControls?: boolean;
+}
+/**
+ * FlowEditor — a node-and-edge diagram editor.
+ *
+ * Renders inside `<InfiniteCanvas>` so the whole graph is pan/zoomable.
+ * Edges are drawn as SVG cubic bezier paths behind the node boxes.
+ * Node drag is kept deliberately simple (pointer events, no external dep).
+ */
+declare const FlowEditor: React.ForwardRefExoticComponent<FlowEditorProps & React.RefAttributes<HTMLDivElement>>;
+
+export { FlowEditor, type FlowEditorProps };

package/dist/internal/react-graph-view/index.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { GraphNode, GraphEdge } from '../graph-view/index.js';
+export { GraphEdge, GraphNode, GraphNodeState } from '../graph-view/index.js';
+
+interface GraphViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'color' | 'content' | 'results'> {
+    /** Nodes to render. */
+    nodes: GraphNode[];
+    /** Directed edges connecting nodes. */
+    edges: GraphEdge[];
+    /** Called when a node chip is clicked (read-only — no selection state). */
+    onNodeClick?: (node: GraphNode) => void;
+    /** Show a legend summarising mastery-state counts. */
+    showLegend?: boolean;
+}
+/**
+ * GraphView — a read-only knowledge / dependency graph rendered inside an
+ * InfiniteCanvas (pan + zoom). Concept nodes are coloured by mastery state;
+ * edges are SVG curves. An optional legend shows per-state node counts.
+ *
+ * The component is intentionally read-only: clicking a node fires `onNodeClick`
+ * but never mutates the `nodes` array — the caller owns the data.
+ */
+declare const GraphView: React.ForwardRefExoticComponent<GraphViewProps & React.RefAttributes<HTMLDivElement>>;
+
+export { GraphView, type GraphViewProps };

package/dist/internal/react-infinite-canvas/index.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { CanvasTransform, Bounds } from '../infinite-canvas/index.js';
+export { Bounds, CanvasTransform } from '../infinite-canvas/index.js';
+
+interface InfiniteCanvasProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** Controlled zoom level. */
+    zoom?: number;
+    /** Controlled pan offset (x). */
+    x?: number;
+    /** Controlled pan offset (y). */
+    y?: number;
+    /** Whether pointer-drag-to-pan is enabled (uncontrolled mode). */
+    pan?: boolean;
+    /** Minimum zoom level (default 0.25). */
+    minZoom?: number;
+    /** Maximum zoom level (default 4). */
+    maxZoom?: number;
+    /** Show a dot-grid background. */
+    showGrid?: boolean;
+    /** Show the zoom-controls overlay (+, −, fit). */
+    showControls?: boolean;
+    /** Called when the transform changes (wheel or drag in uncontrolled mode). */
+    onTransformChange?: (transform: CanvasTransform) => void;
+    /** Content bounds used by the fit/reset control. */
+    contentBounds?: Bounds;
+}
+/**
+ * InfiniteCanvas — a pan/zoom viewport foundation.
+ *
+ * Renders a `role="group"` container that clips children and applies a CSS
+ * transform to a content layer, enabling infinite-canvas interactions
+ * (whiteboard, system-design diagram, goal-graph).
+ *
+ * Supports controlled (`zoom`/`x`/`y`) and uncontrolled usage. Wheel-to-zoom
+ * and pointer-drag-to-pan are enabled by default in uncontrolled mode. All
+ * pointer handlers are registered after mount so they are SSR-safe.
+ */
+declare const InfiniteCanvas: React.ForwardRefExoticComponent<InfiniteCanvasProps & React.RefAttributes<HTMLDivElement>>;
+
+export { InfiniteCanvas, type InfiniteCanvasProps };

package/dist/internal/react-live-captions/index.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { CaptionCue } from '../live-captions/index.js';
+export { CaptionCue } from '../live-captions/index.js';
+
+interface LiveCaptionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'color'> {
+    /** The full ordered list of caption cues. */
+    cues: CaptionCue[];
+    /**
+     * Maximum number of cue lines to display at once.
+     * @default 2
+     */
+    maxLines?: number;
+    /**
+     * How the container is positioned in the layout.
+     * @default 'static'
+     */
+    position?: 'static' | 'absolute';
+}
+/**
+ * LiveCaptions — a rolling caption overlay for meeting / video surfaces.
+ *
+ * Renders `role="log"` with `aria-live="polite"` so screen readers announce
+ * incoming cues without replaying the full history. Only the last `maxLines`
+ * cues are shown; non-final (interim) cues are rendered dimmed and italic.
+ * Logic and styles come from the headless `@refraction-ui/live-captions` core.
+ */
+declare const LiveCaptions: React.ForwardRefExoticComponent<LiveCaptionsProps & React.RefAttributes<HTMLDivElement>>;
+
+export { LiveCaptions, type LiveCaptionsProps };

package/dist/internal/react-live-cursors/index.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { CursorData } from '../live-cursors/index.js';
+export { CURSOR_COLORS, CursorData, assignCursorColor } from '../live-cursors/index.js';
+
+interface CursorProps {
+    /** Collaborator display name shown in the label chip. */
+    name: string;
+    /** Horizontal position in pixels from the left of the container. */
+    x: number;
+    /** Vertical position in pixels from the top of the container. */
+    y: number;
+    /** Hex color applied to both the SVG arrow and the label chip. */
+    color: string;
+}
+/**
+ * Cursor — a single labeled collaborator cursor (SVG arrow + name chip).
+ *
+ * Positioned absolutely via inline `left`/`top` style so it can be placed
+ * anywhere within its containing overlay. Color is applied via inline style
+ * (not a utility class) so each collaborator gets a unique hue without
+ * generating a CSS class per color.
+ */
+declare const Cursor: React.NamedExoticComponent<CursorProps>;
+interface LiveCursorsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** Array of collaborator cursor data to render. */
+    cursors: CursorData[];
+}
+/**
+ * LiveCursors — an absolutely-positioned overlay that renders one `<Cursor>`
+ * per collaborator.
+ *
+ * Drop this as a direct child of a `position: relative` container (e.g. a
+ * canvas or whiteboard surface). It fills the container via `absolute inset-0`
+ * and is `pointer-events-none` so it never blocks interaction.
+ *
+ * Colors are resolved via `assignCursorColor` when a cursor entry has no
+ * explicit `color`. The overlay is marked `aria-hidden` — cursors are
+ * decorative presence indicators, not interactive elements.
+ */
+declare const LiveCursors: React.ForwardRefExoticComponent<LiveCursorsProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Cursor, type CursorProps, LiveCursors, type LiveCursorsProps };

package/dist/internal/react-live-transcript/index.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { TranscriptEntry } from '../live-transcript/index.js';
+export { TranscriptEntry } from '../live-transcript/index.js';
+
+interface LiveTranscriptProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'color'> {
+    /** The ordered list of transcript entries to display. */
+    entries: TranscriptEntry[];
+    /** Tightens spacing between speaker blocks. */
+    compact?: boolean;
+}
+/**
+ * LiveTranscript — a speaker-attributed transcript panel for audio rooms and
+ * meetings.
+ *
+ * Consecutive entries from the same speaker are merged into a single block
+ * (one speaker header followed by all their text lines) so the panel stays
+ * readable. The container carries `role="log"` and `aria-live="polite"` so
+ * screen readers announce new entries without interrupting the user.
+ */
+declare const LiveTranscript: React.ForwardRefExoticComponent<LiveTranscriptProps & React.RefAttributes<HTMLDivElement>>;
+
+export { LiveTranscript, type LiveTranscriptProps };

package/dist/internal/react-marquee-strip/index.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+
+interface MarqueeStripProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** Eyebrow label shown before the items. */
+    label?: string;
+    /** List of text items to display. */
+    items: string[];
+    /**
+     * When `true` the items scroll continuously using a CSS `marquee` keyframe.
+     * The keyframe must be defined in the consuming app's global CSS:
+     *
+     * ```css
+     * @keyframes marquee {
+     *   from { transform: translateX(0); }
+     *   to   { transform: translateX(-50%); }
+     * }
+     * ```
+     *
+     * @default false
+     */
+    scroll?: boolean;
+}
+/**
+ * MarqueeStrip — a full-width label + tag strip, optionally scrolling.
+ *
+ * Static mode (`scroll={false}`, default): items flex-wrap in a row after the
+ * label. Scroll mode: items loop continuously via a CSS marquee animation;
+ * items are duplicated once internally for a seamless loop. Logic and
+ * data attributes come from the headless `@refraction-ui/marquee-strip` core.
+ */
+declare const MarqueeStrip: React.ForwardRefExoticComponent<MarqueeStripProps & React.RefAttributes<HTMLDivElement>>;
+
+export { MarqueeStrip, type MarqueeStripProps };

package/dist/internal/react-mastery-bar/index.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { MasteryBarSize } from '../mastery-bar/index.js';
+export { MasteryBarSize } from '../mastery-bar/index.js';
+
+interface MasteryBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content' | 'results'> {
+    /** Progress value (0–100). Values outside this range are clamped. */
+    value: number;
+    /** Label shown on the right side of the header row. */
+    label?: string;
+    /** Label shown on the left side of the header row. */
+    leadingLabel?: string;
+    /** Visual size of the track. */
+    size?: MasteryBarSize;
+    /** Renders the fill at reduced opacity to indicate a muted/secondary state. */
+    muted?: boolean;
+}
+/**
+ * MasteryBar — a labelled linear progress bar for skill/concept mastery.
+ *
+ * Renders `role="progressbar"` with aria-valuenow/min/max. Optionally renders
+ * a header row with a leading label (left) and a trailing label (right). Logic
+ * and styles come from the headless `@refraction-ui/mastery-bar` core.
+ */
+declare const MasteryBar: React.ForwardRefExoticComponent<MasteryBarProps & React.RefAttributes<HTMLDivElement>>;
+
+export { MasteryBar, type MasteryBarProps };

package/dist/internal/react-mini-map/index.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { MiniMapItem, Rect } from '../mini-map/index.js';
+export { MiniMapItem, Rect } from '../mini-map/index.js';
+
+interface MiniMapProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'results' | 'color' | 'content'> {
+    /** Items to render as dots on the minimap. */
+    items: MiniMapItem[];
+    /** Current viewport in world coordinates. Renders a viewport indicator rect. */
+    viewport?: Rect;
+    /** Width of the minimap box in px. */
+    width?: number;
+    /** Height of the minimap box in px. */
+    height?: number;
+    /** Padding inset in px (applied to all sides). */
+    padding?: number;
+    /**
+     * Called when the user clicks or drags in the minimap, with the new
+     * world-space viewport center `{ x, y }`.
+     */
+    onViewportChange?: (center: {
+        x: number;
+        y: number;
+    }) => void;
+}
+/**
+ * MiniMap — a canvas/editor overview map.
+ *
+ * Renders each `MiniMapItem` as a positioned dot and an optional `viewport`
+ * as a draggable indicator rectangle. All scale math lives in the headless
+ * `@refraction-ui/mini-map` core; the React layer only handles event binding
+ * and rendering. SSR-safe (no `Math.random` or `Date.now`).
+ */
+declare const MiniMap: React.ForwardRefExoticComponent<MiniMapProps & React.RefAttributes<HTMLDivElement>>;
+
+export { MiniMap, type MiniMapProps };

package/dist/internal/react-numbered-steps/index.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { NumberedStepItem } from '../numbered-steps/index.js';
+export { NumberedStepItem } from '../numbered-steps/index.js';
+
+interface NumberedStepsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** The step items to display (3–5 recommended). */
+    items: NumberedStepItem[];
+    /**
+     * Override the number of grid columns. Defaults to clamping item count to
+     * 2–5 via `stepColumns`.
+     */
+    columns?: number;
+}
+/**
+ * NumberedSteps — a static how-it-works step grid.
+ *
+ * Renders a CSS grid of step cards, each with a zero-padded ordinal badge
+ * (01, 02…), a title, and body copy. Not a stateful stepper — use the `Steps`
+ * component for that. Exposes `role="list"` semantics with each card as
+ * `role="listitem"`.
+ */
+declare const NumberedSteps: React.ForwardRefExoticComponent<NumberedStepsProps & React.RefAttributes<HTMLDivElement>>;
+
+export { NumberedSteps, type NumberedStepsProps };

package/dist/internal/react-pre-call-lobby/index.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { MediaDeviceOption } from '../pre-call-lobby/index.js';
+export { DeviceKind, MediaDeviceOption, PreCallLobbyAPI, createPreCallLobby, micLevelToBars } from '../pre-call-lobby/index.js';
+
+interface PreCallLobbyProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** Whether the camera is on. */
+    cameraOn: boolean;
+    /** Whether the microphone is on. */
+    micOn: boolean;
+    /** Called when the user toggles the camera. */
+    onToggleCamera?: () => void;
+    /** Called when the user toggles the microphone. */
+    onToggleMic?: () => void;
+    /** Current microphone level (0..1). */
+    micLevel?: number;
+    /** Available cameras. */
+    cameras?: MediaDeviceOption[];
+    /** Available microphones. */
+    microphones?: MediaDeviceOption[];
+    /** Available speakers. */
+    speakers?: MediaDeviceOption[];
+    /** Currently selected camera id. */
+    selectedCamera?: string;
+    /** Currently selected microphone id. */
+    selectedMicrophone?: string;
+    /** Currently selected speaker id. */
+    selectedSpeaker?: string;
+    /** Called when the user changes a device. */
+    onDeviceChange?: (kind: 'camera' | 'microphone' | 'speaker', deviceId: string) => void;
+    /** Slot rendered inside the camera preview area when the camera is on. */
+    previewSlot?: React.ReactNode;
+    /** Label for the join button. */
+    joinLabel?: string;
+    /** Called when the user clicks the join button. */
+    onJoin?: () => void;
+}
+/**
+ * PreCallLobby — device-check panel shown before joining a meeting.
+ *
+ * Renders a camera preview, mic level meter, device selectors for camera /
+ * microphone / speaker, toggle buttons for cam and mic, and a primary join CTA.
+ * Logic and styles come from the headless `@refraction-ui/pre-call-lobby` core.
+ * All device controls are plain HTML elements — no external component deps.
+ */
+declare const PreCallLobby: React.ForwardRefExoticComponent<PreCallLobbyProps & React.RefAttributes<HTMLDivElement>>;
+
+export { PreCallLobby, type PreCallLobbyProps };

package/dist/internal/react-pricing-card/index.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { PricingCtaVariant } from '../pricing-card/index.js';
+export { PricingCtaVariant } from '../pricing-card/index.js';
+
+interface PricingCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+    /** Optional badge label shown above the plan name (e.g. "Most popular"). */
+    badge?: string;
+    /** Plan name (e.g. "Pro", "Starter"). */
+    name: string;
+    /** Price string (e.g. "$29", "Free"). */
+    price: string;
+    /** Billing period or qualifier (e.g. "/ month"). */
+    period?: string;
+    /** Short marketing description. */
+    description?: string;
+    /** List of included features to render as a checklist. */
+    features: string[];
+    /** CTA button/link label. */
+    cta: string;
+    /** Visual variant for the CTA. */
+    ctaVariant?: PricingCtaVariant;
+    /** When provided, the CTA renders as an `<a>` tag. */
+    ctaHref?: string;
+    /** Click handler for the CTA button (ignored when `ctaHref` is provided). */
+    onCtaClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Highlights the card with a primary ring. */
+    featured?: boolean;
+}
+/**
+ * PricingCard — a self-contained pricing plan card.
+ *
+ * Renders an optional badge, the plan name, price + optional period, optional
+ * description, a feature checklist, and a full-width CTA (anchor when
+ * `ctaHref` is set, button otherwise). The `featured` prop adds a primary-
+ * colour ring to highlight the recommended plan. Logic and styles come from
+ * the headless `@refraction-ui/pricing-card` core.
+ */
+declare const PricingCard: React.ForwardRefExoticComponent<PricingCardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { PricingCard, type PricingCardProps };

package/dist/internal/react-radial-gauge/index.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { GaugeSize, GaugeZone } from '../radial-gauge/index.js';
+export { GaugeSize, GaugeTone, GaugeZone } from '../radial-gauge/index.js';
+
+interface RadialGaugeProps extends React.SVGAttributes<SVGSVGElement> {
+    /** Current value. */
+    value: number;
+    /** Minimum value. Defaults to 0. */
+    min?: number;
+    /** Maximum value. Defaults to 100. */
+    max?: number;
+    /** Visual size of the gauge. Defaults to 'md'. */
+    size?: GaugeSize;
+    /** Stroke thickness in px. Defaults to 8. */
+    thickness?: number;
+    /** Primary center label. When omitted and `showValue` is true, the numeric value is shown. */
+    label?: React.ReactNode;
+    /** Secondary label shown below the primary label. */
+    sublabel?: React.ReactNode;
+    /**
+     * Threshold zones that colour the arc based on the current value.
+     * List in ascending `upTo` order for clarity (internally sorted).
+     */
+    zones?: GaugeZone[];
+    /** Show the numeric value in the center when no explicit label is given. Defaults to true. */
+    showValue?: boolean;
+    /** Accessible name for the gauge. */
+    'aria-label'?: string;
+}
+/**
+ * RadialGauge — a circular progress / gauge component.
+ *
+ * Renders an SVG with a background track ring and a value arc whose length is
+ * proportional to the current value fraction. Center text shows the value or a
+ * custom label. Supports semantic zone colouring (success / warning / danger)
+ * so the arc hue communicates health at a glance — ideal for score cards,
+ * interview report rings, and dashboard KPIs.
+ *
+ * Accessibility: `role="meter"` with `aria-valuenow/min/max` on the SVG.
+ */
+declare const RadialGauge: React.ForwardRefExoticComponent<RadialGaugeProps & React.RefAttributes<SVGSVGElement>>;
+
+export { RadialGauge, type RadialGaugeProps };

package/dist/internal/react-rating-scale/index.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { RatingScalePoint, RatingScaleSize } from '../rating-scale/index.js';
+export { RatingScalePoint, RatingScaleSize } from '../rating-scale/index.js';
+
+interface RatingScaleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Controlled selected value. */
+    value?: number;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: number;
+    /** Called with the newly selected value. */
+    onValueChange?: (value: number) => void;
+    /** Number of points (1..count). Ignored when `points` is provided. */
+    count?: number;
+    /** Explicit points with accessible labels. */
+    points?: RatingScalePoint[];
+    /** Label shown before the scale (the low end). */
+    minLabel?: React.ReactNode;
+    /** Label shown after the scale (the high end). */
+    maxLabel?: React.ReactNode;
+    /** Visual size. */
+    size?: RatingScaleSize;
+    /** Disables the whole scale. */
+    disabled?: boolean;
+    /** Accessible name for the group. */
+    'aria-label'?: string;
+}
+/**
+ * RatingScale — a single-select ordinal rating / Likert control.
+ *
+ * Renders `role="radiogroup"`; each point is a `role="radio"` button with
+ * roving tabindex and arrow/Home/End keyboard navigation (clamped at the
+ * ends — ordinal scales don't wrap). Supports controlled (`value`) and
+ * uncontrolled (`defaultValue`) usage. Logic, point resolution, and styles
+ * come from the headless `@refraction-ui/rating-scale` core.
+ */
+declare const RatingScale: React.ForwardRefExoticComponent<RatingScaleProps & React.RefAttributes<HTMLDivElement>>;
+
+export { RatingScale, type RatingScaleProps };

package/dist/internal/react-section-head/index.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { SectionHeadAlign } from '../section-head/index.js';
+export { SectionHeadAlign } from '../section-head/index.js';
+
+interface SectionHeadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Optional eyebrow / kicker rendered above the title. */
+    kicker?: React.ReactNode;
+    /** Primary heading content (required). */
+    title: React.ReactNode;
+    /** Optional lede paragraph rendered below the title. */
+    lede?: React.ReactNode;
+    /** Horizontal alignment of the cluster. */
+    align?: SectionHeadAlign;
+    /** Override the heading element rendered for the title. Defaults to `h2`. */
+    as?: 'h1' | 'h2' | 'h3';
+}
+/**
+ * SectionHead — marketing section heading cluster.
+ *
+ * Renders an optional small-caps kicker above an `<h2>` title (configurable
+ * via `as`) with an optional lede paragraph below. Alignment is controlled via
+ * the `align` prop; layout classes come from the headless
+ * `@refraction-ui/section-head` core.
+ */
+declare const SectionHead: React.ForwardRefExoticComponent<SectionHeadProps & React.RefAttributes<HTMLDivElement>>;
+
+export { SectionHead, type SectionHeadProps };

package/dist/internal/react-stat-grid/index.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+export { StatItem, statColumns } from '../stat-grid/index.js';
+
+interface StatGridItem {
+    /** The primary value displayed prominently. Allows rich content in React. */
+    value: React.ReactNode;
+    /** The descriptive label shown below the value. */
+    label: React.ReactNode;
+}
+interface StatGridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
+    /** The stat items to display in the grid. */
+    items: StatGridItem[];
+    /**
+     * Number of columns. Defaults to `statColumns(items.length)`:
+     * 1 item → 1, 2 items → 2, 3+ items → 3.
+     */
+    columns?: number;
+}
+/**
+ * StatGrid — a marketing-style grid of stat callouts.
+ *
+ * Each item shows a large bold value and a small muted label. The grid
+ * automatically computes the column count from the number of items, or you can
+ * override it with `columns`. Uses `role="list"` / `role="listitem"` for
+ * accessible enumeration.
+ */
+declare const StatGrid: React.ForwardRefExoticComponent<StatGridProps & React.RefAttributes<HTMLDivElement>>;
+
+export { StatGrid, type StatGridItem, type StatGridProps };

package/dist/internal/react-sticky-note/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { StickyNoteColor } from '../sticky-note/index.js';
+export { STICKY_NOTE_COLORS, StickyNoteColor, nextStickyColor } from '../sticky-note/index.js';
+
+interface StickyNoteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content' | 'onSelect'> {
+    /** Color of the sticky note. */
+    color?: StickyNoteColor;
+    /** Text content of the note. */
+    text?: string;
+    /** Called when the text changes (makes text editable via a textarea). */
+    onTextChange?: (value: string) => void;
+    /** Optional author name shown in the note footer. */
+    author?: string;
+    /** Absolute x position in pixels (for board/canvas placement). */
+    x?: number;
+    /** Absolute y position in pixels (for board/canvas placement). */
+    y?: number;
+    /** Whether the note can be dragged. Requires `onMove` to receive updates. */
+    draggable?: boolean;
+    /** Called with the new `{ x, y }` position after a drag completes. */
+    onMove?: (position: {
+        x: number;
+        y: number;
+    }) => void;
+}
+/**
+ * StickyNote — a draggable colored note for whiteboard / canvas surfaces.
+ *
+ * - `color` selects the soft-tint palette (yellow, pink, blue, green, purple, orange).
+ * - `text` + `onTextChange` switch to an editable textarea; without `onTextChange` the
+ *   text is static.
+ * - `x` / `y` absolutely position the note; pair with `draggable` + `onMove` for
+ *   drag-to-reposition. Drag is implemented via pointer events and is SSR-safe (no
+ *   handlers attach until the component mounts on the client).
+ * - Forwards the ref to the outer `<div>`.
+ */
+declare const StickyNote: React.ForwardRefExoticComponent<StickyNoteProps & React.RefAttributes<HTMLDivElement>>;
+
+export { StickyNote, type StickyNoteProps };