@refraction-ui/react 0.12.3 → 0.14.0

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { TimelineItemData, TimelineOrientation } from '../timeline/index.js';
+export { TimelineItemData, TimelineItemStatus, TimelineOrientation } from '../timeline/index.js';
+
+interface TimelineItemProps {
+    /** The normalised item data. */
+    item: Required<TimelineItemData>;
+    /** Orientation inherited from the parent Timeline. */
+    orientation: TimelineOrientation;
+    /** True when this is the last item (hides the trailing connector). */
+    isLast: boolean;
+}
+/** A single event entry inside a Timeline. */
+declare const TimelineItem: React.ForwardRefExoticComponent<TimelineItemProps & React.RefAttributes<HTMLLIElement>>;
+interface TimelineProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
+    /** Ordered list of events to render. */
+    items: TimelineItemData[];
+    /** Layout direction. Defaults to `'vertical'`. */
+    orientation?: TimelineOrientation;
+    /**
+     * Optional render-prop override for a single item.
+     * Receives the normalised item and its index; return a React node.
+     */
+    renderItem?: (item: Required<TimelineItemData>, index: number, isLast: boolean) => React.ReactNode;
+}
+/**
+ * Timeline — a time-ordered list of events with a marker rail.
+ *
+ * Renders `role="list"`; each item carries `role="listitem"`.
+ * Supports vertical (default) and horizontal orientations.
+ * Pass `renderItem` to take full control of individual entries.
+ */
+declare const Timeline: React.ForwardRefExoticComponent<TimelineProps & React.RefAttributes<HTMLUListElement>>;
+
+export { Timeline, TimelineItem, type TimelineItemProps, type TimelineProps };

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { VideoGridLayout } from '../video-grid/index.js';
+export { VideoGridLayout } from '../video-grid/index.js';
+import { VideoTileData } from '../react-video-tile/index.js';
+export { VideoTileData } from '../react-video-tile/index.js';
+
+interface VideoGridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** List of participant data to render as tiles. */
+    participants: VideoTileData[];
+    /**
+     * Grid layout mode.
+     * - 'auto'    — grid unless ≤1 participant (falls back to speaker)
+     * - 'grid'    — always uniform CSS grid
+     * - 'speaker' — spotlight for `spotlightId` (or first participant) + filmstrip
+     */
+    layout?: VideoGridLayout;
+    /**
+     * Participant `id` to spotlight in speaker view.
+     * Falls back to the first participant when omitted.
+     */
+    spotlightId?: string;
+}
+/**
+ * VideoGrid — adaptive participant grid for easyloops meetings.
+ *
+ * Composes `<VideoTile>` tiles in a responsive CSS grid (1→6 columns based on
+ * participant count) or a speaker-view layout (spotlight + filmstrip). The
+ * column math lives in the headless `@refraction-ui/video-grid` core so it is
+ * shared with the Astro adapter.
+ */
+declare const VideoGrid: React.ForwardRefExoticComponent<VideoGridProps & React.RefAttributes<HTMLDivElement>>;
+
+export { VideoGrid, type VideoGridProps };

package/dist/internal/react-video-tile/index.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { VideoTileMicState } from '../video-tile/index.js';
+export { VideoTileData, VideoTileMicState } from '../video-tile/index.js';
+
+interface VideoTileProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content' | 'color'> {
+    /** Participant display name — shown in the name chip and used for initials. */
+    name: string;
+    /** Current microphone state. Defaults to 'on'. */
+    micState?: VideoTileMicState;
+    /** Whether the participant is actively speaking. Adds an emerald ring. */
+    speaking?: boolean;
+    /** Whether the tile is pinned in the grid. Adds a primary ring. */
+    pinned?: boolean;
+    /** URL of the participant's avatar image, used in the fallback circle. */
+    avatarUrl?: string;
+    /**
+     * Media slot — pass a `<video>` element (or any ReactNode) to render as the
+     * tile's background media layer. When omitted, an avatar fallback is shown.
+     */
+    mediaSlot?: React.ReactNode;
+    /** Optional emoji/reaction badge rendered at the top-right of the tile. */
+    reaction?: React.ReactNode;
+}
+/**
+ * VideoTile — a single participant tile for a video meeting grid.
+ *
+ * Renders a `role="group"` container with an aspect-video aspect ratio.
+ * If a `mediaSlot` is provided it fills the tile; otherwise an avatar fallback
+ * with initials is centred on a muted background.
+ *
+ * Overlays:
+ * - Name chip (bottom-left) with optional mic-muted indicator
+ * - Speaking ring (emerald) when `speaking` is true
+ * - Pinned ring (primary) when `pinned` is true
+ * - Reaction badge (top-right) when `reaction` is provided
+ *
+ * Logic and styles come from the headless `@refraction-ui/video-tile` core.
+ */
+declare const VideoTile: React.ForwardRefExoticComponent<VideoTileProps & React.RefAttributes<HTMLDivElement>>;
+
+export { VideoTile, type VideoTileProps };

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { WizardStep, WizardOrientation } from '../wizard/index.js';
+export { WizardOrientation, WizardStep } from '../wizard/index.js';
+
+interface WizardContextValue {
+    currentIndex: number;
+    steps: WizardStep[];
+    orientation: WizardOrientation;
+}
+interface WizardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
+    /** Step definitions for the rail. */
+    steps: WizardStep[];
+    /** Controlled current step index (0-based). */
+    step?: number;
+    /** Initial step index for uncontrolled usage. */
+    defaultStep?: number;
+    /** Called when the current step changes (Back/Next). */
+    onStepChange?: (index: number) => void;
+    /** Called when the user completes the final step. */
+    onComplete?: () => void;
+    /** Orientation of the step rail. Default `'vertical'`. */
+    orientation?: WizardOrientation;
+    /** Label for the Next button. */
+    nextLabel?: React.ReactNode;
+    /** Label for the Back button. */
+    backLabel?: React.ReactNode;
+    /** Label for the button on the final step. */
+    completeLabel?: React.ReactNode;
+    /** Label for the Skip button (shown on optional steps only). */
+    skipLabel?: React.ReactNode;
+    /**
+     * Content for the active step. Either pass a render prop that receives the
+     * current step index, or plain children shown for every step.
+     */
+    children?: React.ReactNode | ((currentIndex: number) => React.ReactNode);
+}
+/**
+ * Wizard — a multi-step flow orchestration component.
+ *
+ * Renders a step rail (vertical by default) alongside the active step content
+ * and a footer with Back / Skip (optional steps) / Next-or-Complete actions.
+ * Supports controlled (`step` / `onStepChange`) and uncontrolled
+ * (`defaultStep`) usage. Logic and styles come from the headless
+ * `@refraction-ui/wizard` core.
+ *
+ * @example
+ * ```tsx
+ * <Wizard steps={steps} onComplete={handleComplete}>
+ *   {(index) => <StepContent stepIndex={index} />}
+ * </Wizard>
+ * ```
+ */
+declare const Wizard: React.ForwardRefExoticComponent<WizardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Access wizard state from within a child component rendered inside `<Wizard>`.
+ */
+declare function useWizard(): WizardContextValue;
+
+export { Wizard, type WizardProps, useWizard };

package/dist/internal/segmented-control/index.d.cts

@@ -0,0 +1,56 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+type SegmentedControlSize = 'sm' | 'md';
+/** Value identifying a single segment. */
+type SegmentedControlValue = string;
+interface SegmentedControlProps {
+    /** Currently selected segment value (controlled). */
+    value?: SegmentedControlValue;
+    /** Visual size of the control. */
+    size?: SegmentedControlSize;
+}
+interface SegmentedControlAPI {
+    /** ARIA attributes to spread on the group element. */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic group props for a segmented control.
+ *
+ * Returns `role="radiogroup"` plus data attributes; adapters spread these
+ * onto their group element and handle their own rendering/state.
+ */
+declare function createSegmentedControl(props?: SegmentedControlProps): SegmentedControlAPI;
+/**
+ * Pure keyboard-navigation rule shared by every adapter.
+ *
+ * Given the current index, the pressed key, and the item count, returns the
+ * index that focus/selection should move to. Arrow keys wrap; Home/End jump
+ * to the ends. Unhandled keys (or an empty group) return `current` unchanged.
+ *
+ * - ArrowRight / ArrowDown → next (wraps to 0 past the end)
+ * - ArrowLeft  / ArrowUp   → previous (wraps to last before 0)
+ * - Home                   → first
+ * - End                    → last
+ */
+declare function getNextSegmentIndex(current: number, key: string, count: number): number;
+
+/** Pill-shaped container that holds the segments (`role="radiogroup"`). */
+declare const segmentedControlVariants: (props?: ({
+    size?: "sm" | "md" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * A single segment (`role="radio"`). The `state` variant carries the
+ * active vs inactive visual treatment so adapters never inline these classes.
+ */
+declare const segmentedControlItemVariants: (props?: ({
+    size?: "sm" | "md" | undefined;
+    state?: "checked" | "unchecked" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type SegmentedControlAPI, type SegmentedControlProps, type SegmentedControlSize, type SegmentedControlValue, createSegmentedControl, getNextSegmentIndex, segmentedControlItemVariants, segmentedControlVariants };

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

@@ -0,0 +1,56 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+type SegmentedControlSize = 'sm' | 'md';
+/** Value identifying a single segment. */
+type SegmentedControlValue = string;
+interface SegmentedControlProps {
+    /** Currently selected segment value (controlled). */
+    value?: SegmentedControlValue;
+    /** Visual size of the control. */
+    size?: SegmentedControlSize;
+}
+interface SegmentedControlAPI {
+    /** ARIA attributes to spread on the group element. */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic group props for a segmented control.
+ *
+ * Returns `role="radiogroup"` plus data attributes; adapters spread these
+ * onto their group element and handle their own rendering/state.
+ */
+declare function createSegmentedControl(props?: SegmentedControlProps): SegmentedControlAPI;
+/**
+ * Pure keyboard-navigation rule shared by every adapter.
+ *
+ * Given the current index, the pressed key, and the item count, returns the
+ * index that focus/selection should move to. Arrow keys wrap; Home/End jump
+ * to the ends. Unhandled keys (or an empty group) return `current` unchanged.
+ *
+ * - ArrowRight / ArrowDown → next (wraps to 0 past the end)
+ * - ArrowLeft  / ArrowUp   → previous (wraps to last before 0)
+ * - Home                   → first
+ * - End                    → last
+ */
+declare function getNextSegmentIndex(current: number, key: string, count: number): number;
+
+/** Pill-shaped container that holds the segments (`role="radiogroup"`). */
+declare const segmentedControlVariants: (props?: ({
+    size?: "sm" | "md" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * A single segment (`role="radio"`). The `state` variant carries the
+ * active vs inactive visual treatment so adapters never inline these classes.
+ */
+declare const segmentedControlItemVariants: (props?: ({
+    size?: "sm" | "md" | undefined;
+    state?: "checked" | "unchecked" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type SegmentedControlAPI, type SegmentedControlProps, type SegmentedControlSize, type SegmentedControlValue, createSegmentedControl, getNextSegmentIndex, segmentedControlItemVariants, segmentedControlVariants };

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

@@ -0,0 +1,55 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+type SeparatorOrientation = 'horizontal' | 'vertical';
+interface SeparatorProps {
+    /** Orientation of the separator. Defaults to `'horizontal'`. */
+    orientation?: SeparatorOrientation;
+    /**
+     * 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;
+}
+/**
+ * ARIA attributes for a separator. Extends the shared base with
+ * `aria-orientation`, which is specific to the `separator` role.
+ */
+interface SeparatorAriaProps extends Partial<AccessibilityProps> {
+    'aria-orientation'?: SeparatorOrientation;
+}
+interface SeparatorAPI {
+    /** ARIA attributes to spread on the element. */
+    ariaProps: SeparatorAriaProps;
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Headless separator core — computes ARIA semantics and data attributes for
+ * a separator rule. JSX-free so it can be shared across framework adapters.
+ *
+ * Per ARIA, a decorative separator must not be announced (`role="none"`),
+ * while a semantic one exposes `role="separator"` and `aria-orientation`.
+ */
+declare function createSeparator(props?: SeparatorProps): SeparatorAPI;
+
+/**
+ * Visual variants for the separator rule.
+ *
+ * - `orientation: horizontal` → a full-width 1px line.
+ * - `orientation: vertical` → a full-height 1px line.
+ * - `labeled` → flex layout used by the labeled-divider variant, which
+ *   arranges a centered label between two flanking lines.
+ */
+declare const separatorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | undefined;
+    labeled?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Class for each flanking line in the labeled-divider variant. */
+declare const separatorLineClass = "h-px flex-1 bg-border";
+/** Class for the centered label in the labeled-divider variant. */
+declare const separatorLabelClass = "px-3 text-xs uppercase tracking-wide text-muted-foreground";
+
+export { type SeparatorAPI, type SeparatorOrientation, type SeparatorProps, createSeparator, separatorLabelClass, separatorLineClass, separatorVariants };

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

@@ -0,0 +1,55 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+type SeparatorOrientation = 'horizontal' | 'vertical';
+interface SeparatorProps {
+    /** Orientation of the separator. Defaults to `'horizontal'`. */
+    orientation?: SeparatorOrientation;
+    /**
+     * 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;
+}
+/**
+ * ARIA attributes for a separator. Extends the shared base with
+ * `aria-orientation`, which is specific to the `separator` role.
+ */
+interface SeparatorAriaProps extends Partial<AccessibilityProps> {
+    'aria-orientation'?: SeparatorOrientation;
+}
+interface SeparatorAPI {
+    /** ARIA attributes to spread on the element. */
+    ariaProps: SeparatorAriaProps;
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Headless separator core — computes ARIA semantics and data attributes for
+ * a separator rule. JSX-free so it can be shared across framework adapters.
+ *
+ * Per ARIA, a decorative separator must not be announced (`role="none"`),
+ * while a semantic one exposes `role="separator"` and `aria-orientation`.
+ */
+declare function createSeparator(props?: SeparatorProps): SeparatorAPI;
+
+/**
+ * Visual variants for the separator rule.
+ *
+ * - `orientation: horizontal` → a full-width 1px line.
+ * - `orientation: vertical` → a full-height 1px line.
+ * - `labeled` → flex layout used by the labeled-divider variant, which
+ *   arranges a centered label between two flanking lines.
+ */
+declare const separatorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | undefined;
+    labeled?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Class for each flanking line in the labeled-divider variant. */
+declare const separatorLineClass = "h-px flex-1 bg-border";
+/** Class for the centered label in the labeled-divider variant. */
+declare const separatorLabelClass = "px-3 text-xs uppercase tracking-wide text-muted-foreground";
+
+export { type SeparatorAPI, type SeparatorOrientation, type SeparatorProps, createSeparator, separatorLabelClass, separatorLineClass, separatorVariants };

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

@@ -0,0 +1,47 @@
+type SocialProvider = 'google' | 'github' | 'microsoft' | 'apple';
+/** "Continue with …" label shown on each provider's button. */
+declare const PROVIDER_LABELS: Record<SocialProvider, string>;
+/**
+ * Which providers render their brand mark monochrome (currentColor). GitHub and
+ * Apple are monochrome by design so they read correctly on dark/outline
+ * surfaces; Google and Microsoft keep their full brand color.
+ */
+declare const PROVIDER_MONO: Record<SocialProvider, boolean>;
+interface SocialAuthButtonProps {
+    /** Identity provider this button authenticates against. */
+    provider: SocialProvider;
+}
+interface SocialAuthButtonAPI {
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: Record<string, string>;
+    /** "Continue with …" label for the provider. */
+    label: string;
+    /** Whether the brand mark should render monochrome. */
+    mono: boolean;
+}
+/**
+ * Framework-agnostic core for a social sign-in button. Returns the provider
+ * label, monochrome hint, and the `data-provider` styling hook. No React/JSX.
+ */
+declare function createSocialAuthButton(props: SocialAuthButtonProps): SocialAuthButtonAPI;
+
+/** Wrapper around an individual social auth button (positions the lastUsed badge). */
+declare const socialAuthButtonVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Responsive grid wrapper: one column on mobile, two columns from `sm` up. */
+declare const socialAuthRowVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Floating "Last used" badge anchored to the top-right of a button. */
+declare const lastUsedBadgeVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { PROVIDER_LABELS, PROVIDER_MONO, type SocialAuthButtonAPI, type SocialAuthButtonProps, type SocialProvider, createSocialAuthButton, lastUsedBadgeVariants, socialAuthButtonVariants, socialAuthRowVariants };

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

@@ -0,0 +1,47 @@
+type SocialProvider = 'google' | 'github' | 'microsoft' | 'apple';
+/** "Continue with …" label shown on each provider's button. */
+declare const PROVIDER_LABELS: Record<SocialProvider, string>;
+/**
+ * Which providers render their brand mark monochrome (currentColor). GitHub and
+ * Apple are monochrome by design so they read correctly on dark/outline
+ * surfaces; Google and Microsoft keep their full brand color.
+ */
+declare const PROVIDER_MONO: Record<SocialProvider, boolean>;
+interface SocialAuthButtonProps {
+    /** Identity provider this button authenticates against. */
+    provider: SocialProvider;
+}
+interface SocialAuthButtonAPI {
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: Record<string, string>;
+    /** "Continue with …" label for the provider. */
+    label: string;
+    /** Whether the brand mark should render monochrome. */
+    mono: boolean;
+}
+/**
+ * Framework-agnostic core for a social sign-in button. Returns the provider
+ * label, monochrome hint, and the `data-provider` styling hook. No React/JSX.
+ */
+declare function createSocialAuthButton(props: SocialAuthButtonProps): SocialAuthButtonAPI;
+
+/** Wrapper around an individual social auth button (positions the lastUsed badge). */
+declare const socialAuthButtonVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Responsive grid wrapper: one column on mobile, two columns from `sm` up. */
+declare const socialAuthRowVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Floating "Last used" badge anchored to the top-right of a button. */
+declare const lastUsedBadgeVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { PROVIDER_LABELS, PROVIDER_MONO, type SocialAuthButtonAPI, type SocialAuthButtonProps, type SocialProvider, createSocialAuthButton, lastUsedBadgeVariants, socialAuthButtonVariants, socialAuthRowVariants };

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

@@ -0,0 +1,49 @@
+/** The available color variants for a sticky note. */
+type StickyNoteColor = 'yellow' | 'pink' | 'blue' | 'green' | 'purple' | 'orange';
+/** Ordered list of all sticky note colors — used for cycling and iteration. */
+declare const STICKY_NOTE_COLORS: StickyNoteColor[];
+/**
+ * Returns the next color in the cycle. Wraps from the last color back to the
+ * first. Useful for "add note" flows that auto-assign colors in sequence.
+ */
+declare function nextStickyColor(color: StickyNoteColor): StickyNoteColor;
+interface CreateStickyNoteOptions {
+    /** Color of the note. */
+    color: StickyNoteColor;
+}
+interface StickyNoteAPI {
+    /** Data attributes for styling hooks; spread onto the note container. */
+    dataAttributes: {
+        'data-color': StickyNoteColor;
+    };
+    /** ARIA props for the note container. */
+    ariaProps: {
+        role: 'group';
+    };
+}
+/**
+ * Build the framework-agnostic props for a sticky note container.
+ *
+ * Returns `role="group"` plus the `data-color` attribute that adapters use
+ * as a styling hook. Logic is pure and SSR-safe — no Math.random, no Date.
+ */
+declare function createStickyNote(options: CreateStickyNoteOptions): StickyNoteAPI;
+
+/**
+ * Note container with color variant.
+ *
+ * Sticky notes are intrinsically colorful — an approved exception to the
+ * semantic-token-only rule. Each color maps to a soft tint background with a
+ * readable dark text.
+ */
+declare const stickyNoteVariants: (props?: ({
+    color?: "yellow" | "pink" | "blue" | "green" | "purple" | "orange" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Class for the editable/static text area inside the note. */
+declare const stickyNoteTextClass = "flex-1 w-full resize-none bg-transparent text-sm leading-relaxed placeholder:opacity-60 outline-none";
+/** Class for the author chip rendered in the note footer. */
+declare const stickyNoteAuthorClass = "mt-auto text-xs font-medium opacity-70 truncate";
+
+export { type CreateStickyNoteOptions, STICKY_NOTE_COLORS, type StickyNoteAPI, type StickyNoteColor, createStickyNote, nextStickyColor, stickyNoteAuthorClass, stickyNoteTextClass, stickyNoteVariants };

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

@@ -0,0 +1,65 @@
+/** The semantic kind of a terminal output line. */
+type TerminalLineKind = 'command' | 'stdout' | 'stderr' | 'info' | 'success';
+/** A single line displayed in the terminal output panel. */
+interface TerminalLine {
+    /** Optional stable key for list rendering. */
+    id?: string;
+    /** Semantic kind — drives styling and screen-reader announcements. */
+    kind: TerminalLineKind;
+    /** Text content of the line. */
+    text: string;
+}
+interface TerminalAPI {
+    /**
+     * ARIA attributes to spread on the terminal container element.
+     * - `role="log"` semantics: assistive technologies announce appended content.
+     * - `aria-live="polite"` so new output does not interrupt the user mid-action.
+     */
+    ariaProps: {
+        role: 'log';
+        'aria-live': 'polite';
+        'aria-label'?: string;
+    };
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the prompt string shown before a command line.
+ *
+ * @param promptSymbol - The shell prompt character(s), e.g. `'$'` or `'❯'`.
+ * @param command - The command text that follows the prompt.
+ * @returns The formatted prompt string, e.g. `'$ python solution.py'`.
+ */
+declare function formatPrompt(promptSymbol: string, command: string): string;
+/**
+ * Build the framework-agnostic ARIA and data props for a terminal output panel.
+ *
+ * Returns `role="log"` (live region semantics for streaming output) plus data
+ * attributes; adapters spread these onto their scroll container.
+ */
+declare function createTerminal(options?: {
+    label?: string;
+}): TerminalAPI;
+
+/**
+ * The outer scroll container — a dark monospaced surface that houses all
+ * terminal lines. Uses semantic card tokens so it inherits the active theme.
+ */
+declare const terminalVariants: (props?: ({
+    maxHeight?: "sm" | "md" | "lg" | "none" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * A single terminal line. The `kind` variant maps each semantic category to
+ * the appropriate semantic token class — no raw color values inline.
+ */
+declare const terminalLineVariants: (props?: ({
+    kind?: "command" | "stdout" | "stderr" | "info" | "success" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** The prompt symbol (`$`, `❯`, …) preceding a command line. */
+declare const terminalPromptClass = "select-none mr-2 text-muted-foreground";
+
+export { type TerminalAPI, type TerminalLine, type TerminalLineKind, createTerminal, formatPrompt, terminalLineVariants, terminalPromptClass, terminalVariants };