@refraction-ui/react 0.13.0 → 0.15.0

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

@@ -0,0 +1,97 @@
+/** A single selectable media device (camera, microphone, or speaker). */
+interface MediaDeviceOption {
+    id: string;
+    label: string;
+}
+/** The kind of media device. */
+type DeviceKind = 'camera' | 'microphone' | 'speaker';
+interface PreCallLobbyProps {
+    /** Whether the camera is currently enabled. */
+    cameraOn: boolean;
+    /** Whether the microphone is currently enabled. */
+    micOn: boolean;
+}
+interface PreCallLobbyAPI {
+    /** ARIA attributes to spread on the group element. */
+    ariaProps: {
+        role: 'group';
+        'aria-label': string;
+    };
+    /** Data attributes for styling hooks. */
+    dataAttributes: {
+        'data-camera': string;
+        'data-mic': string;
+    };
+}
+/**
+ * Build the framework-agnostic group props for a pre-call lobby / device-check panel.
+ *
+ * Returns `role="group"` plus data attributes reflecting camera and mic state.
+ * Adapters spread these onto their container and render the device pickers,
+ * preview, and join button themselves.
+ */
+declare function createPreCallLobby(props: PreCallLobbyProps): PreCallLobbyAPI;
+/**
+ * Convert a microphone level (0..1) to a count of lit bars.
+ *
+ * Pure function — no side effects, no JSX. Adapters use this to render
+ * the mic level meter by iterating `0..barCount` and lighting bars up to
+ * the returned value.
+ *
+ * @param level    Current mic level in the range [0, 1].
+ * @param barCount Total number of bars in the meter.
+ * @returns        Number of bars that should appear "lit" (0..barCount).
+ */
+declare function micLevelToBars(level: number, barCount: number): number;
+
+/**
+ * Outer lobby card — a centered panel that holds all preflight controls.
+ */
+declare const preCallLobbyVariants: (props?: ({} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * Camera preview area. The `camera` variant switches between the live preview
+ * slot and an avatar / placeholder shown when the camera is off.
+ */
+declare const preCallCameraVariants: (props?: ({
+    camera?: "on" | "off" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Placeholder shown inside the camera area when the camera is off. */
+declare const preCallCameraPlaceholderClass: string;
+/** Row that holds the label and the <select> for a device picker. */
+declare const preCallDeviceRowClass = "flex flex-col gap-1";
+/** Label text above a device picker. */
+declare const preCallDeviceLabelClass = "text-xs font-medium text-muted-foreground";
+/** The <select> element used for device selection. */
+declare const preCallDeviceSelectClass: string;
+/**
+ * Mic level meter container. Renders a row of bars.
+ */
+declare const preCallMicMeterClass = "flex items-end gap-0.5 h-5";
+/**
+ * An individual bar in the mic level meter.
+ * The `lit` variant distinguishes active (lit) from inactive bars.
+ */
+declare const preCallMicBarVariants: (props?: ({
+    lit?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Row holding the camera-toggle and mic-toggle buttons. */
+declare const preCallControlsRowClass = "flex items-center gap-3";
+/**
+ * Toggle button for camera or microphone.
+ * The `active` variant styles the enabled vs disabled states.
+ */
+declare const preCallToggleVariants: (props?: ({
+    active?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Primary "Join" button. */
+declare const preCallJoinButtonClass: string;
+
+export { type DeviceKind, type MediaDeviceOption, type PreCallLobbyAPI, type PreCallLobbyProps, createPreCallLobby, micLevelToBars, preCallCameraPlaceholderClass, preCallCameraVariants, preCallControlsRowClass, preCallDeviceLabelClass, preCallDeviceRowClass, preCallDeviceSelectClass, preCallJoinButtonClass, preCallLobbyVariants, preCallMicBarVariants, preCallMicMeterClass, preCallToggleVariants };

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

@@ -0,0 +1,61 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+/** CTA button/link visual variant. */
+type PricingCtaVariant = 'default' | 'outline';
+interface PricingCardOptions {
+    /** Whether this card is highlighted as the featured / recommended plan. */
+    featured?: boolean;
+}
+interface PricingCardAPI {
+    /** ARIA props to spread on the card container. */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for styling hooks and CSS selectors. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic props for a pricing plan card.
+ *
+ * Returns `role="group"` (semantically groups the plan's content without
+ * imposing listitem semantics on a standalone card) and a `data-featured`
+ * attribute that adapters can use for conditional ring/highlight styling.
+ */
+declare function createPricingCard(options?: PricingCardOptions): PricingCardAPI;
+
+/**
+ * Root pricing card container. The `featured` variant adds a primary-coloured
+ * ring to draw the eye to the recommended plan.
+ */
+declare const pricingCardVariants: (props?: ({
+    featured?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** "Best value" / "Most popular" badge above the plan name. */
+declare const pricingCardBadgeClass = "mb-3 inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary";
+/** Plan name (e.g. "Pro", "Starter"). */
+declare const pricingCardNameClass = "text-lg font-bold text-foreground";
+/** Main price figure (e.g. "$29", "Free"). */
+declare const pricingCardPriceClass = "text-3xl font-bold text-foreground";
+/** Billing period or qualifier (e.g. "/ month", "forever"). */
+declare const pricingCardPeriodClass = "text-sm text-muted-foreground";
+/** Short marketing description beneath the price. */
+declare const pricingCardDescriptionClass = "text-sm text-muted-foreground";
+/** Unordered list of included features. */
+declare const pricingCardFeatureListClass = "flex flex-col gap-2";
+/** A single feature row — tick icon + text. */
+declare const pricingCardFeatureRowClass = "flex items-start gap-2 text-sm text-foreground";
+/** Inline check SVG rendered before each feature string. */
+declare const pricingCardFeatureTickClass = "mt-0.5 size-4 shrink-0 text-primary";
+/**
+ * CTA button/link that appears at the bottom of the card.
+ *
+ * `default` — filled primary style (call to action on featured plans).
+ * `outline` — bordered secondary style (for non-featured plans).
+ */
+declare const pricingCtaVariants: (props?: ({
+    variant?: "default" | "outline" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type PricingCardAPI, type PricingCardOptions, type PricingCtaVariant, createPricingCard, pricingCardBadgeClass, pricingCardDescriptionClass, pricingCardFeatureListClass, pricingCardFeatureRowClass, pricingCardFeatureTickClass, pricingCardNameClass, pricingCardPeriodClass, pricingCardPriceClass, pricingCardVariants, pricingCtaVariants };

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

@@ -0,0 +1,120 @@
+/** The visual size of the gauge. */
+type GaugeSize = 'sm' | 'md' | 'lg';
+/** Tone mapped to a zone range. */
+type GaugeTone = 'default' | 'success' | 'warning' | 'danger';
+/**
+ * A threshold zone that applies a semantic tone when the gauge value falls
+ * at or below `upTo`. Zones should be listed in ascending `upTo` order; the
+ * first zone whose `upTo >= value` wins.
+ */
+interface GaugeZone {
+    /** Value up to (and including) which this zone applies. */
+    upTo: number;
+    /** Semantic tone for the arc while the value is in this zone. */
+    tone: GaugeTone;
+}
+interface RadialGaugeProps {
+    /** Current gauge value. */
+    value: number;
+    /** Minimum possible value. */
+    min?: number;
+    /** Maximum possible value. */
+    max?: number;
+    /** Visual size. */
+    size?: GaugeSize;
+}
+interface RadialGaugeAPI {
+    /** ARIA attributes to spread on the SVG element (`role="meter"`). */
+    ariaProps: Record<string, string | number>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+declare const GAUGE_SIZE_PX: Record<GaugeSize, number>;
+/**
+ * Clamp `value` to the inclusive range `[min, max]`.
+ */
+declare function clampValue(value: number, min: number, max: number): number;
+/**
+ * Map a `value` within `[min, max]` to a fraction in `[0, 1]`.
+ * Returns 0 when `min === max` to avoid division by zero.
+ */
+declare function valueToFraction(value: number, min: number, max: number): number;
+/**
+ * Convert polar coordinates to Cartesian.
+ * `angleDeg` is measured clockwise from the positive x-axis (SVG convention).
+ */
+declare function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Build an SVG arc path `d` string from `startAngleDeg` to `endAngleDeg`
+ * (both measured clockwise from the top / 12-o'clock position).
+ *
+ * Returns an empty string when the arc span is zero.
+ */
+declare function describeArc(cx: number, cy: number, r: number, startAngleDeg: number, endAngleDeg: number): string;
+/**
+ * Compute the `stroke-dashoffset` for a full-circle ring gauge.
+ *
+ * With `stroke-dasharray="circumference circumference"` and this offset, the
+ * visible portion of the stroke equals `fraction × circumference`.
+ */
+declare function gaugeStrokeDashoffset(fraction: number, circumference: number): number;
+/**
+ * Find the active zone tone for the current `value`.
+ * Zones are tested in ascending `upTo` order; the first zone whose
+ * `upTo >= value` wins. Falls back to `'default'` when no zone matches.
+ */
+declare function resolveZoneTone(value: number, zones: GaugeZone[], _max: number): GaugeTone;
+/**
+ * Build the framework-agnostic props for a radial gauge element.
+ *
+ * Returns `role="meter"` plus ARIA value attributes and data attributes;
+ * adapters spread these onto their `<svg>` element.
+ */
+declare function createRadialGauge(props: RadialGaugeProps): RadialGaugeAPI;
+
+/**
+ * Root SVG element variants — controls the rendered size via an inline
+ * width/height (adapters use GAUGE_SIZE_PX) and sets up the color context.
+ */
+declare const radialGaugeRootVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * Track (background) circle stroke class.
+ * Uses a muted foreground so it sits behind the value arc without competing.
+ */
+declare const gaugeTrackClass = "fill-none stroke-muted-foreground/20";
+/**
+ * Value arc stroke class — resolved per tone via {@link gaugeArcToneVariants}.
+ * `currentColor` stroke picks up the Tailwind text-* class applied by the
+ * tone variant so we only need one class-generating helper.
+ */
+declare const gaugeArcClass = "fill-none stroke-current transition-[stroke-dashoffset] duration-300 ease-out";
+/**
+ * Tone variants for the value arc.  Adapters combine this with `gaugeArcClass`.
+ */
+declare const gaugeArcToneVariants: (props?: ({
+    tone?: "default" | "success" | "warning" | "danger" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Center label (primary text) classes. */
+declare const gaugeLabelClass = "fill-foreground text-center font-semibold";
+/** Center sub-label (secondary text) classes. */
+declare const gaugeSublabelClass = "fill-muted-foreground";
+/**
+ * Font size for the primary label by size variant.
+ * Expressed as SVG `font-size` values (px) for use in the `<text>` element.
+ */
+declare const GAUGE_LABEL_FONT_SIZE: Record<'sm' | 'md' | 'lg', number>;
+/**
+ * Font size for the sub-label by size variant.
+ */
+declare const GAUGE_SUBLABEL_FONT_SIZE: Record<'sm' | 'md' | 'lg', number>;
+
+export { GAUGE_LABEL_FONT_SIZE, GAUGE_SIZE_PX, GAUGE_SUBLABEL_FONT_SIZE, type GaugeSize, type GaugeTone, type GaugeZone, type RadialGaugeAPI, type RadialGaugeProps, clampValue, createRadialGauge, describeArc, gaugeArcClass, gaugeArcToneVariants, gaugeLabelClass, gaugeStrokeDashoffset, gaugeSublabelClass, gaugeTrackClass, polarToCartesian, radialGaugeRootVariants, resolveZoneTone, valueToFraction };

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

@@ -0,0 +1,76 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+/** Visual size of a rating scale. */
+type RatingScaleSize = 'sm' | 'md';
+/** A single selectable point on the scale (1-indexed value + accessible label). */
+interface RatingScalePoint {
+    /** The value this point represents. */
+    value: number;
+    /** Accessible label for the point (falls back to the value). */
+    label?: string;
+}
+interface RatingScaleProps {
+    /** Currently selected value (controlled). */
+    value?: number;
+    /** Number of points on the scale. Ignored when {@link points} is given. */
+    count?: number;
+    /** Visual size. */
+    size?: RatingScaleSize;
+}
+interface RatingScaleAPI {
+    /** ARIA attributes to spread on the group element (`role="radiogroup"`). */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Build the framework-agnostic group props for a rating / Likert scale.
+ *
+ * Returns `role="radiogroup"` plus data attributes; adapters spread these onto
+ * their container and render the points themselves. A rating scale is a
+ * single-select control with radio semantics, like a segmented control, but
+ * tuned for ordinal self-rating (e.g. a 1–5 Likert prompt with end labels).
+ */
+declare function createRatingScale(props?: RatingScaleProps): RatingScaleAPI;
+/**
+ * Resolve the list of points for a scale from either an explicit list or a
+ * `count` (producing `1..count`). The single source of truth shared by every
+ * adapter so a `count={5}` scale renders identical points everywhere.
+ */
+declare function resolveRatingPoints(points: RatingScalePoint[] | undefined, count?: number): RatingScalePoint[];
+/**
+ * Pure keyboard-navigation rule shared by every adapter.
+ *
+ * Unlike a wrapping segmented control, an ordinal rating scale **clamps** at
+ * the ends (you can't wrap from "5 — strongly agree" back to "1"). Home/End
+ * jump to the extremes; unhandled keys return `current` unchanged.
+ *
+ * - ArrowRight / ArrowUp   → next (clamped to last)
+ * - ArrowLeft  / ArrowDown → previous (clamped to first)
+ * - Home                   → first
+ * - End                    → last
+ */
+declare function getNextRatingIndex(current: number, key: string, count: number): number;
+
+/** Container row that holds the points plus optional end labels. */
+declare const ratingScaleVariants: (props?: ({
+    size?: "sm" | "md" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Row of point buttons (the scale itself, between the end labels). */
+declare const ratingScaleTrackClass = "inline-flex items-center gap-1.5";
+/**
+ * A single point button. The `state` variant carries the selected vs unselected
+ * treatment so adapters never inline these classes.
+ */
+declare const ratingScaleItemVariants: (props?: ({
+    size?: "sm" | "md" | undefined;
+    state?: "checked" | "unchecked" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** End-label text flanking the scale (e.g. "Never seen this" / "Could write it"). */
+declare const ratingScaleLabelClass = "text-xs text-muted-foreground";
+
+export { type RatingScaleAPI, type RatingScalePoint, type RatingScaleProps, type RatingScaleSize, createRatingScale, getNextRatingIndex, ratingScaleItemVariants, ratingScaleLabelClass, ratingScaleTrackClass, ratingScaleVariants, resolveRatingPoints };

package/dist/internal/react-audience-feature-card/index.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+interface AudienceFeatureCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Kicker text displayed above the title (e.g. "For teams"). */
+    kicker?: React.ReactNode;
+    /** Main title — required. */
+    title: React.ReactNode;
+    /** Body copy. */
+    body: React.ReactNode;
+    /** Footer slot — pushed to bottom of the card. */
+    footer?: React.ReactNode;
+}
+/**
+ * AudienceFeatureCard — a marketing feature/audience card.
+ *
+ * Full-height flex-col layout so footers align across a row of cards.
+ * Accepts kicker, title, body, and an optional footer slot.
+ * Spreads `role="group"` from the headless core for accessibility.
+ */
+declare const AudienceFeatureCard: React.ForwardRefExoticComponent<AudienceFeatureCardProps & React.RefAttributes<HTMLDivElement>>;
+
+export { AudienceFeatureCard, type AudienceFeatureCardProps };

package/dist/internal/react-audio-room/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { AudioParticipant } from '../audio-room/index.js';
+export { AudioParticipant } from '../audio-room/index.js';
+
+interface SpeakingOrbProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** Participant display name; used for initials and aria-label. */
+    name: string;
+    /** Optional avatar image URL. Falls back to initials when absent. */
+    avatarUrl?: string;
+    /** Whether this participant is actively speaking. */
+    speaking?: boolean;
+    /** Whether this participant is muted. */
+    muted?: boolean;
+    /** Whether this participant has raised their hand. */
+    handRaised?: boolean;
+}
+/**
+ * SpeakingOrb — a circular avatar for one audio-room participant.
+ *
+ * Renders an avatar image (or initials fallback), an animated speaking ring
+ * when `speaking` is true, a mic-muted badge when `muted` is true, and an
+ * optional raised-hand badge. Fully accessible with `role="img"` and an
+ * `aria-label` set to the participant's name.
+ */
+declare const SpeakingOrb: React.ForwardRefExoticComponent<SpeakingOrbProps & React.RefAttributes<HTMLDivElement>>;
+interface AudioRoomProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** List of participants to render as speaking orbs. */
+    participants: AudioParticipant[];
+}
+/**
+ * AudioRoom — a responsive grid of SpeakingOrbs for an audio-only meeting.
+ *
+ * Column count is derived from `orbColumns(n)` so the layout adapts
+ * automatically as participants join or leave. The grid uses inline
+ * `gridTemplateColumns` because the column count is dynamic.
+ */
+declare const AudioRoom: React.ForwardRefExoticComponent<AudioRoomProps & React.RefAttributes<HTMLDivElement>>;
+
+export { AudioRoom, type AudioRoomProps, SpeakingOrb, type SpeakingOrbProps };

package/dist/internal/react-brand-network-cell/index.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+interface BrandNetworkCellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** Single character or short string used as the brand monogram. */
+    glyph: string;
+    /** CSS colour value for the glyph box background (brand tint). Applied via inline style. */
+    glyphBg?: string;
+    /** CSS colour value for the glyph text (brand tint). Applied via inline style. */
+    glyphColor?: string;
+    /** Primary identifier shown below the glyph (product domain or name). */
+    domain: string;
+    /** Supporting description text. */
+    body: string;
+    /** When provided, renders a link at the bottom of the card. */
+    href?: string;
+    /** Label for the link. Defaults to "Visit →". */
+    linkLabel?: string;
+    /** Marks this cell as the current/active product in the network. */
+    current?: boolean;
+}
+/**
+ * BrandNetworkCell — a card for surfacing related products in a brand network.
+ *
+ * Renders a glyph monogram (brand tint via inline style), the product domain,
+ * a "You are here" badge when `current`, body copy, and an optional visit link.
+ * The `current` variant adds `ring-1 ring-primary` to the card border.
+ */
+declare const BrandNetworkCell: React.ForwardRefExoticComponent<BrandNetworkCellProps & React.RefAttributes<HTMLDivElement>>;
+
+export { BrandNetworkCell, type BrandNetworkCellProps };

package/dist/internal/react-browser-chrome-mock/index.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { BrowserChromeStatus } from '../browser-chrome-mock/index.js';
+export { BrowserChromeStatus } from '../browser-chrome-mock/index.js';
+
+interface BrowserChromeMockProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** URL to display in the address bar. Bold domain + normal path. */
+    url: string;
+    /** Optional status badge shown in the chrome bar. */
+    status?: BrowserChromeStatus;
+}
+/**
+ * BrowserChromeMock — a decorative browser window frame.
+ *
+ * Renders a mock browser chrome with traffic-light dots, a monospace URL bar
+ * (bold domain + normal path), an optional live/rec status badge, and a
+ * content area for arbitrary children. Logic and styles come from the headless
+ * `@refraction-ui/browser-chrome-mock` core.
+ */
+declare const BrowserChromeMock: React.ForwardRefExoticComponent<BrowserChromeMockProps & React.RefAttributes<HTMLDivElement>>;
+
+export { BrowserChromeMock, type BrowserChromeMockProps };

package/dist/internal/react-call-controls/index.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { CallControlTone } from '../call-controls/index.js';
+export { CallControlItem, CallControlTone } from '../call-controls/index.js';
+
+interface CallControlButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'content'> {
+    /** Accessible label (used as aria-label and visible to screen readers). */
+    label: string;
+    /** Optional icon node rendered inside the button. */
+    icon?: React.ReactNode;
+    /** Visual/semantic tone of the button. */
+    tone?: CallControlTone;
+    /**
+     * Whether this control is currently in a "pressed" / toggled-on state.
+     * When provided, the button gains `aria-pressed`.
+     */
+    pressed?: boolean;
+    /** Visual size of the button. */
+    size?: 'sm' | 'md';
+}
+/**
+ * A single round meeting-control button with icon, accessible label,
+ * tone variants (default / active / destructive), and optional aria-pressed
+ * for toggleable controls (mic, camera, screen-share).
+ */
+declare const CallControlButton: React.ForwardRefExoticComponent<CallControlButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface CallControlsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content'> {
+    /** Visual size passed down to child buttons when using the composable API. */
+    size?: 'sm' | 'md';
+}
+/**
+ * Toolbar wrapper for a set of meeting-control buttons.
+ *
+ * Composable: render `<CallControlButton>` children directly.
+ *
+ * ```tsx
+ * <CallControls>
+ *   <CallControlButton label="Mute" icon={<MicIcon />} tone="active" pressed={true} />
+ *   <CallControlButton label="Leave" tone="destructive" />
+ * </CallControls>
+ * ```
+ */
+declare const CallControls: React.ForwardRefExoticComponent<CallControlsProps & React.RefAttributes<HTMLDivElement>>;
+
+export { CallControlButton, type CallControlButtonProps, CallControls, type CallControlsProps };

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ChecklistItemData } from '../checklist/index.js';
+export { ChecklistItemData } from '../checklist/index.js';
+
+interface ChecklistProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Controlled list of items. */
+    items?: ChecklistItemData[];
+    /** Initial items for uncontrolled usage. */
+    defaultItems?: ChecklistItemData[];
+    /** Called when an item is toggled, with the updated items array. */
+    onChange?: (items: ChecklistItemData[]) => void;
+    /** Called with the id of the item that was toggled. */
+    onItemToggle?: (id: string) => void;
+    /** Show a "{completed}/{total}" progress summary below the list. */
+    showProgress?: boolean;
+}
+/**
+ * Checklist — an interactive task list with optional progress summary.
+ *
+ * Supports controlled (`items`) and uncontrolled (`defaultItems`) usage.
+ * Each item renders as a `role="checkbox"` button; clicking toggles its
+ * checked state. Completed items receive muted + strikethrough styling.
+ * Logic and styles come from the headless `@refraction-ui/checklist` core.
+ */
+declare const Checklist: React.ForwardRefExoticComponent<ChecklistProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Checklist, type ChecklistProps };

package/dist/internal/react-editor-status-bar/index.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { StatusSegment } from '../editor-status-bar/index.js';
+export { StatusSegment, StatusSegmentTone } from '../editor-status-bar/index.js';
+
+/** Convenience props that map to common IDE status-bar segments. */
+interface EditorStatusBarConvenienceProps {
+    /** Current line number (1-indexed). */
+    line?: number;
+    /** Current column number (1-indexed). */
+    col?: number;
+    /** Indentation descriptor, e.g. `'Spaces: 4'` or `'Tab Size: 2'`. */
+    indentation?: string;
+    /** Language / runtime label, e.g. `'Python 3.11.4'`. */
+    language?: string;
+    /** File encoding, e.g. `'UTF-8'`. */
+    encoding?: string;
+    /** End-of-line sequence, e.g. `'LF'` or `'CRLF'`. */
+    eol?: string;
+    /** Persistence status label, e.g. `'Auto-saved'` or `'Unsaved changes'`. */
+    status?: string;
+}
+interface EditorStatusBarProps extends React.HTMLAttributes<HTMLDivElement>, EditorStatusBarConvenienceProps {
+    /**
+     * Explicit list of segments. When provided, the convenience props (`line`,
+     * `col`, `language`, etc.) are ignored and you have full control over which
+     * segments appear and where.
+     */
+    segments?: StatusSegment[];
+}
+/**
+ * EditorStatusBar — an IDE-style bottom bar.
+ *
+ * Accepts either an explicit `segments` array for full control, or the
+ * convenience props (`line`, `col`, `language`, `encoding`, `indentation`,
+ * `eol`, `status`) which are assembled into a standard left/right layout
+ * automatically.
+ *
+ * Uses `role="status"` with `aria-live="polite"` so cursor-position updates
+ * are announced to screen readers without interrupting flow.
+ */
+declare const EditorStatusBar: React.ForwardRefExoticComponent<EditorStatusBarProps & React.RefAttributes<HTMLDivElement>>;
+
+export { EditorStatusBar, type EditorStatusBarConvenienceProps, type EditorStatusBarProps };

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { EditorTabData } from '../editor-tabs/index.js';
+export { EditorTabData } from '../editor-tabs/index.js';
+
+interface EditorTabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** The list of tab entries to render. */
+    tabs: EditorTabData[];
+    /** The id of the currently active tab (controlled). */
+    activeId: string;
+    /** Called when the user clicks or navigates to a tab. */
+    onSelect: (id: string) => void;
+    /** Called when the user clicks the close button on a tab. */
+    onClose?: (id: string) => void;
+}
+/**
+ * EditorTabs — an IDE-style open-file tab bar.
+ *
+ * Renders `role="tablist"`; each tab is `role="tab"` with `aria-selected`.
+ * Supports optional icons, dirty-state dots, and close buttons. Keyboard
+ * navigation uses wrapping roving tabindex (ArrowLeft/Right, Home/End) via the
+ * headless `@refraction-ui/editor-tabs` core helper.
+ */
+declare const EditorTabs: React.ForwardRefExoticComponent<EditorTabsProps & React.RefAttributes<HTMLDivElement>>;
+
+export { EditorTabs, type EditorTabsProps };