@refraction-ui/react 0.12.3 → 0.14.0

package/dist/internal/react-input/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { InputValidationState } from '../input/index.js';
 export { InputType, inputVariants } from '../input/index.js';
 
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -19,6 +20,21 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
      * See the package README's "Sizing" section for more.
      */
     size?: 'sm' | 'default' | 'lg';
+    /**
+     * Validation affordance. Tints the border and wires `aria-invalid`:
+     * - `'valid'` → green border, trailing check icon, `aria-invalid={false}`
+     * - `'invalid'` → destructive border, `aria-invalid={true}`
+     *
+     * When omitted the input is rendered without a wrapper (identical to the
+     * legacy bare `<input>` markup), unless `leadingIcon` is set.
+     */
+    validationState?: InputValidationState;
+    /**
+     * Optional icon rendered inside the input's left padding. When provided
+     * (or when `validationState` is set) the input is wrapped in a relative
+     * `<div>` and gains left padding to make room for the icon.
+     */
+    leadingIcon?: React.ReactNode;
 }
 /**
  * Input component — renders a styled input with size support.

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-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-password-input/index.d.cts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { InputProps } from '../react-input/index.cjs';
+
+interface PasswordInputProps extends Omit<InputProps, 'type' | 'leadingIcon'> {
+    /**
+     * Accessible label for the reveal (show password) action.
+     * @default 'Show password'
+     */
+    revealLabel?: string;
+    /**
+     * Accessible label for the hide action.
+     * @default 'Hide password'
+     */
+    hideLabel?: string;
+}
+/**
+ * PasswordInput — a password field with a built-in reveal/hide toggle.
+ *
+ * Wraps the styled {@link Input} from `@refraction-ui/react-input`, toggling
+ * the underlying input `type` between `'password'` and `'text'`. Forwards all
+ * Input props (`value`, `onChange`, `validationState`, `minLength`, …) through
+ * to the underlying element, including the `ref`.
+ */
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { PasswordInput, type PasswordInputProps };

package/dist/internal/react-password-input/index.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { InputProps } from '../react-input/index.js';
+
+interface PasswordInputProps extends Omit<InputProps, 'type' | 'leadingIcon'> {
+    /**
+     * Accessible label for the reveal (show password) action.
+     * @default 'Show password'
+     */
+    revealLabel?: string;
+    /**
+     * Accessible label for the hide action.
+     * @default 'Hide password'
+     */
+    hideLabel?: string;
+}
+/**
+ * PasswordInput — a password field with a built-in reveal/hide toggle.
+ *
+ * Wraps the styled {@link Input} from `@refraction-ui/react-input`, toggling
+ * the underlying input `type` between `'password'` and `'text'`. Forwards all
+ * Input props (`value`, `onChange`, `validationState`, `minLength`, …) through
+ * to the underlying element, including the `ref`.
+ */
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { PasswordInput, type PasswordInputProps };

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-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-segmented-control/index.d.cts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { SegmentedControlSize } from '../segmented-control/index.cjs';
+export { SegmentedControlSize, SegmentedControlValue, createSegmentedControl, getNextSegmentIndex, segmentedControlItemVariants, segmentedControlVariants } from '../segmented-control/index.cjs';
+
+interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Controlled selected item value. */
+    value?: string;
+    /** Initial selected value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called with the newly selected item value. */
+    onValueChange?: (value: string) => void;
+    /** Visual size of the control. */
+    size?: SegmentedControlSize;
+}
+/**
+ * SegmentedControl — a pill-shaped single-select control with radio semantics.
+ *
+ * Renders `role="radiogroup"`; each {@link SegmentedControlItem} is a
+ * `role="radio"`. Supports controlled (`value`/`onValueChange`) and
+ * uncontrolled (`defaultValue`) usage, roving tabindex, arrow-key navigation
+ * with wrap, and Home/End jumps. Logic/styles come from the headless
+ * `@refraction-ui/segmented-control` core; styling via Tailwind utilities only.
+ */
+declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+interface SegmentedControlItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    /** Value identifying this item; selected when it matches the group value. */
+    value: string;
+}
+/**
+ * SegmentedControlItem — a single selectable segment (`role="radio"`).
+ *
+ * Children may include a leading icon. Only the active item is tabbable
+ * (roving tabindex); arrow/Home/End keys delegate navigation to the group,
+ * which applies the shared `getNextSegmentIndex` rule from the core.
+ */
+declare const SegmentedControlItem: React.ForwardRefExoticComponent<SegmentedControlItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps };

package/dist/internal/react-segmented-control/index.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { SegmentedControlSize } from '../segmented-control/index.js';
+export { SegmentedControlSize, SegmentedControlValue, createSegmentedControl, getNextSegmentIndex, segmentedControlItemVariants, segmentedControlVariants } from '../segmented-control/index.js';
+
+interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Controlled selected item value. */
+    value?: string;
+    /** Initial selected value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called with the newly selected item value. */
+    onValueChange?: (value: string) => void;
+    /** Visual size of the control. */
+    size?: SegmentedControlSize;
+}
+/**
+ * SegmentedControl — a pill-shaped single-select control with radio semantics.
+ *
+ * Renders `role="radiogroup"`; each {@link SegmentedControlItem} is a
+ * `role="radio"`. Supports controlled (`value`/`onValueChange`) and
+ * uncontrolled (`defaultValue`) usage, roving tabindex, arrow-key navigation
+ * with wrap, and Home/End jumps. Logic/styles come from the headless
+ * `@refraction-ui/segmented-control` core; styling via Tailwind utilities only.
+ */
+declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps & React.RefAttributes<HTMLDivElement>>;
+interface SegmentedControlItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    /** Value identifying this item; selected when it matches the group value. */
+    value: string;
+}
+/**
+ * SegmentedControlItem — a single selectable segment (`role="radio"`).
+ *
+ * Children may include a leading icon. Only the active item is tabbable
+ * (roving tabindex); arrow/Home/End keys delegate navigation to the group,
+ * which applies the shared `getNextSegmentIndex` rule from the core.
+ */
+declare const SegmentedControlItem: React.ForwardRefExoticComponent<SegmentedControlItemProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps };

package/dist/internal/react-separator/index.d.cts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SeparatorOrientation } from '../separator/index.cjs';
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Orientation of the separator. Defaults to `'horizontal'`. */
+    orientation?: SeparatorOrientation;
+    /**
+     * Optional centered label. Only meaningful for horizontal separators —
+     * renders a line on each side of the label (a "labeled divider").
+     */
+    label?: React.ReactNode;
+    /**
+     * When `true` (the default) the separator is purely visual and is hidden
+     * from assistive tech (`role="none"`). When `false` it is exposed as a
+     * semantic `role="separator"` with the appropriate `aria-orientation`.
+     */
+    decorative?: boolean;
+}
+/**
+ * Separator / LabeledDivider — a thin rule that visually divides content.
+ *
+ * Supports horizontal and vertical orientations and an optional centered
+ * label (the "labeled divider" variant, horizontal only). State and ARIA
+ * semantics come from the headless @refraction-ui/separator core; styling
+ * via Tailwind utility classes (no external CSS-in-JS).
+ */
+declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Separator, type SeparatorProps };

package/dist/internal/react-separator/index.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SeparatorOrientation } from '../separator/index.js';
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Orientation of the separator. Defaults to `'horizontal'`. */
+    orientation?: SeparatorOrientation;
+    /**
+     * Optional centered label. Only meaningful for horizontal separators —
+     * renders a line on each side of the label (a "labeled divider").
+     */
+    label?: React.ReactNode;
+    /**
+     * When `true` (the default) the separator is purely visual and is hidden
+     * from assistive tech (`role="none"`). When `false` it is exposed as a
+     * semantic `role="separator"` with the appropriate `aria-orientation`.
+     */
+    decorative?: boolean;
+}
+/**
+ * Separator / LabeledDivider — a thin rule that visually divides content.
+ *
+ * Supports horizontal and vertical orientations and an optional centered
+ * label (the "labeled divider" variant, horizontal only). State and ARIA
+ * semantics come from the headless @refraction-ui/separator core; styling
+ * via Tailwind utility classes (no external CSS-in-JS).
+ */
+declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Separator, type SeparatorProps };

package/dist/internal/react-social-auth-button/index.d.cts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ButtonProps } from '../react-button/index.cjs';
+import { SocialProvider } from '../social-auth-button/index.cjs';
+export { SocialProvider } from '../social-auth-button/index.cjs';
+
+interface SocialAuthButtonProps extends Omit<ButtonProps, 'variant' | 'children'> {
+    /** Identity provider this button authenticates against. */
+    provider: SocialProvider;
+    /** Marks this as the provider the user signed in with last. */
+    lastUsed?: boolean;
+    /** Shows a spinner and disables interaction. */
+    loading?: boolean;
+}
+/**
+ * A branded social sign-in button built on the outline Button. Renders the
+ * provider's brand icon and a "Continue with …" label, with optional loading
+ * and "Last used" affordances. Labels, the `data-provider` hook, and the
+ * monochrome decision come from the headless @refraction-ui/social-auth-button
+ * core; only the icon markup lives here.
+ */
+declare const SocialAuthButton: React.ForwardRefExoticComponent<SocialAuthButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface SocialAuthRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * Responsive grid wrapper for SocialAuthButtons: one column on mobile, two
+ * columns from the `sm` breakpoint up.
+ */
+declare const SocialAuthRow: React.ForwardRefExoticComponent<SocialAuthRowProps & React.RefAttributes<HTMLDivElement>>;
+
+export { SocialAuthButton, type SocialAuthButtonProps, SocialAuthRow, type SocialAuthRowProps };

package/dist/internal/react-social-auth-button/index.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ButtonProps } from '../react-button/index.js';
+import { SocialProvider } from '../social-auth-button/index.js';
+export { SocialProvider } from '../social-auth-button/index.js';
+
+interface SocialAuthButtonProps extends Omit<ButtonProps, 'variant' | 'children'> {
+    /** Identity provider this button authenticates against. */
+    provider: SocialProvider;
+    /** Marks this as the provider the user signed in with last. */
+    lastUsed?: boolean;
+    /** Shows a spinner and disables interaction. */
+    loading?: boolean;
+}
+/**
+ * A branded social sign-in button built on the outline Button. Renders the
+ * provider's brand icon and a "Continue with …" label, with optional loading
+ * and "Last used" affordances. Labels, the `data-provider` hook, and the
+ * monochrome decision come from the headless @refraction-ui/social-auth-button
+ * core; only the icon markup lives here.
+ */
+declare const SocialAuthButton: React.ForwardRefExoticComponent<SocialAuthButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface SocialAuthRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+/**
+ * Responsive grid wrapper for SocialAuthButtons: one column on mobile, two
+ * columns from the `sm` breakpoint up.
+ */
+declare const SocialAuthRow: React.ForwardRefExoticComponent<SocialAuthRowProps & React.RefAttributes<HTMLDivElement>>;
+
+export { SocialAuthButton, type SocialAuthButtonProps, SocialAuthRow, type SocialAuthRowProps };

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 };

package/dist/internal/react-terminal/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { TerminalLine } from '../terminal/index.js';
+export { TerminalLine, TerminalLineKind } from '../terminal/index.js';
+
+/** Height cap for the scrollable terminal surface. */
+type TerminalMaxHeight = 'sm' | 'md' | 'lg' | 'none';
+interface TerminalProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Lines to render in order. Each line's `kind` determines its styling. */
+    lines: TerminalLine[];
+    /**
+     * Prompt symbol prepended to `command` lines.
+     * @default '$'
+     */
+    promptSymbol?: string;
+    /**
+     * Maximum height of the scroll region before it becomes scrollable.
+     * @default 'md'
+     */
+    maxHeight?: TerminalMaxHeight;
+    /** Accessible label for the live region (e.g. `'Run output'`). */
+    'aria-label'?: string;
+}
+/**
+ * Terminal — a read-only output console panel.
+ *
+ * Renders a monospaced scroll region (`role="log"`, `aria-live="polite"`) with
+ * each line styled by its semantic kind:
+ * - `command` — foreground bold, prefixed with the prompt symbol
+ * - `stdout`  — foreground
+ * - `stderr`  — destructive (error token)
+ * - `info`    — muted-foreground
+ * - `success` — emerald / success token
+ *
+ * This is a presentational component — it has no internal state and does not
+ * handle keyboard input (v1). Pass new lines from the parent to stream output.
+ */
+declare const Terminal: React.ForwardRefExoticComponent<TerminalProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Terminal, type TerminalMaxHeight, type TerminalProps };

package/dist/internal/react-test-results/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { TestResultData } from '../test-results/index.js';
+export { TestResultData, TestStatus } from '../test-results/index.js';
+
+interface TestResultsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'results'> {
+    /** Array of test case results to display. */
+    results: TestResultData[];
+    /** When true, renders a summary bar showing "{passed}/{total} passed". */
+    showSummary?: boolean;
+}
+/**
+ * TestResults — displays a list of test case results with pass/fail/skip
+ * status, optional expected/actual diff for failures, and an optional summary
+ * bar.
+ *
+ * Renders `role="list"` on the container; each row has `role="listitem"`.
+ * Logic and styles come from the headless `@refraction-ui/test-results` core.
+ */
+declare const TestResults: React.ForwardRefExoticComponent<TestResultsProps & React.RefAttributes<HTMLDivElement>>;
+
+export { TestResults, type TestResultsProps };