@refraction-ui/react 0.13.0 → 0.14.0

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

@@ -0,0 +1,83 @@
+/**
+ * Layout mode for a VideoGrid.
+ *
+ * - 'auto'    — choose grid or speaker view based on participant count (≤1 forces speaker)
+ * - 'grid'    — always render an even CSS grid of tiles
+ * - 'speaker' — render one large spotlight tile + a filmstrip row for the rest
+ */
+type VideoGridLayout = 'auto' | 'grid' | 'speaker';
+/**
+ * Bucket label that describes the rough meeting size.
+ * Useful for analytics and adaptive UI decisions.
+ */
+type VideoGridBucket = 'solo' | 'pair' | 'small' | 'medium' | 'large' | 'townhall';
+interface VideoGridHeadlessProps {
+    /** Desired layout mode. */
+    layout?: VideoGridLayout;
+}
+interface VideoGridAPI {
+    /** ARIA attributes to spread on the grid container. */
+    ariaProps: {
+        role: 'group';
+    };
+    /** Data attributes for CSS styling hooks. */
+    dataAttributes: {
+        'data-layout': VideoGridLayout;
+        'data-count'?: string;
+    };
+}
+/**
+ * Compute the number of CSS grid columns for N participants.
+ *
+ * The responsive rule mirrors easyloops meeting layouts:
+ *
+ * | count | columns |
+ * |-------|---------|
+ * | 1     | 1       |
+ * | 2     | 2       |
+ * | 3–4   | 2       |
+ * | 5–9   | 3       |
+ * | 10–16 | 4       |
+ * | 17–25 | 5       |
+ * | 26+   | 6       |
+ */
+declare function computeGridColumns(count: number): number;
+/**
+ * Label the meeting size as a human-readable bucket.
+ *
+ * Useful for analytics events and adaptive UI decisions without
+ * coupling to the exact column math.
+ */
+declare function bucketByCount(count: number): VideoGridBucket;
+/**
+ * Build the framework-agnostic ARIA and data attributes for a VideoGrid
+ * container.  Adapters spread these onto their host element.
+ */
+declare function createVideoGrid(props?: VideoGridHeadlessProps): VideoGridAPI;
+
+/**
+ * Grid container variants.
+ *
+ * - `layout: 'grid'`    — uniform CSS grid; column count is set inline by the
+ *   adapter using `computeGridColumns` (gridTemplateColumns).
+ * - `layout: 'speaker'` — two-row layout: large spotlight on top, filmstrip row
+ *   below. The adapter renders the spotlight as the first child and a horizontal
+ *   overflow row for remaining tiles.
+ */
+declare const videoGridVariants: (props?: ({
+    layout?: "auto" | "grid" | "speaker" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** Full-bleed spotlight area in speaker view (takes up remaining vertical space). */
+declare const videoGridSpotlightClass = "relative flex-1 min-h-0 rounded-xl overflow-hidden bg-muted";
+/**
+ * Horizontal filmstrip row used in speaker view.
+ * Each tile in this row is constrained to a fixed width so the row scrolls
+ * rather than wraps on large calls.
+ */
+declare const videoGridFilmstripClass = "flex flex-row gap-2 overflow-x-auto py-1 shrink-0";
+/** Individual filmstrip tile wrapper — fixed width so they don't collapse. */
+declare const videoGridFilmstripTileClass = "w-36 shrink-0";
+
+export { type VideoGridAPI, type VideoGridBucket, type VideoGridHeadlessProps, type VideoGridLayout, bucketByCount, computeGridColumns, createVideoGrid, videoGridFilmstripClass, videoGridFilmstripTileClass, videoGridSpotlightClass, videoGridVariants };

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

@@ -0,0 +1,88 @@
+/** Microphone state for a video participant. */
+type VideoTileMicState = 'on' | 'muted';
+/** Data describing a video meeting participant tile. */
+interface VideoTileData {
+    /** Unique participant identifier. */
+    id: string;
+    /** Display name shown in the name chip. */
+    name: string;
+    /** Current microphone state. Defaults to 'on'. */
+    micState?: VideoTileMicState;
+    /** Whether the participant is currently speaking (active audio). */
+    speaking?: boolean;
+    /** Whether the tile is pinned in the grid. */
+    pinned?: boolean;
+}
+interface VideoTileHeadlessProps {
+    /** Whether the participant is actively speaking. */
+    speaking?: boolean;
+    /** Whether the tile is pinned in the grid. */
+    pinned?: boolean;
+}
+interface VideoTileAPI {
+    /** Data attributes for styling hooks — spread onto the tile container. */
+    dataAttributes: {
+        'data-speaking': string;
+        'data-pinned': string;
+    };
+    /** ARIA props — spread onto the tile container. */
+    ariaProps: {
+        role: 'group';
+    };
+}
+/**
+ * Derive framework-agnostic data attributes and ARIA props for a VideoTile.
+ *
+ * Adapters spread `dataAttributes` and `ariaProps` onto the tile container so
+ * CSS selectors and assistive technology can reflect the current participant
+ * state without coupling to a specific framework.
+ */
+declare function createVideoTile(props?: VideoTileHeadlessProps): VideoTileAPI;
+/**
+ * Derive up to two uppercase initials from a display name.
+ *
+ * Splits on whitespace and takes the first character of the first two words.
+ * Single-word names produce a single initial.
+ *
+ * @example
+ * getInitials('Maya Goldberg') // 'MG'
+ * getInitials('Alice')         // 'A'
+ */
+declare function getInitials(name: string): string;
+
+/**
+ * Root tile container — aspect-video, rounded corners, clipped media.
+ *
+ * `speaking` variant adds a visible ring to indicate active audio.
+ * `pinned` variant adds a stronger ring to mark a pinned participant.
+ *
+ * cva boolean-like variants use string values ('true'/'false') per the
+ * refraction-ui convention — callers must pass strings, not raw booleans.
+ */
+declare const videoTileVariants: (props?: ({
+    speaking?: "true" | "false" | undefined;
+    pinned?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * Name chip anchored to the bottom-left of the tile.
+ * Semi-transparent bg keeps it legible over any media content.
+ */
+declare const videoTileNameChipClass = "absolute bottom-2 left-2 flex items-center gap-1.5 rounded-md bg-background/70 px-2 py-0.5 text-xs font-medium text-foreground backdrop-blur-sm";
+/**
+ * Mic-muted icon container — sits inside the name chip at the trailing edge.
+ */
+declare const videoTileMicIconClass = "text-destructive";
+/**
+ * Avatar fallback circle — centred in the tile when no media stream is available.
+ */
+declare const videoTileAvatarFallbackClass = "absolute inset-0 flex items-center justify-center";
+/** Inner circle with initials. */
+declare const videoTileAvatarCircleClass = "flex size-16 items-center justify-center rounded-full bg-card text-foreground text-xl font-semibold select-none";
+/**
+ * Reaction badge slot — anchored to the top-right corner.
+ */
+declare const videoTileReactionBadgeClass = "absolute right-2 top-2 flex items-center justify-center rounded-full bg-background/70 px-1.5 py-0.5 text-sm backdrop-blur-sm";
+
+export { type VideoTileAPI, type VideoTileData, type VideoTileHeadlessProps, type VideoTileMicState, createVideoTile, getInitials, videoTileAvatarCircleClass, videoTileAvatarFallbackClass, videoTileMicIconClass, videoTileNameChipClass, videoTileReactionBadgeClass, videoTileVariants };

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

@@ -0,0 +1,148 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+/** A single step in a wizard flow. */
+interface WizardStep {
+    /** Unique identifier for the step. */
+    id: string;
+    /** Human-readable label shown in the step rail. */
+    label: string;
+    /** When true the user may skip this step. */
+    optional?: boolean;
+}
+/** The resolved status of a step relative to the current position. */
+type WizardStepStatus = 'complete' | 'current' | 'upcoming';
+/** A step enriched with its resolved status and position. */
+interface WizardStepState {
+    step: WizardStep;
+    status: WizardStepStatus;
+    index: number;
+}
+/** Orientation of the step rail. */
+type WizardOrientation = 'vertical' | 'horizontal';
+interface WizardProps {
+    /** Controlled current step index (0-based). */
+    currentIndex?: number;
+    /** Total number of steps. */
+    count?: number;
+    /** Orientation of the step rail. */
+    orientation?: WizardOrientation;
+}
+interface WizardAPI {
+    /** ARIA attributes to spread on the root element. */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Data attributes for styling hooks. */
+    dataAttributes: Record<string, string>;
+}
+/**
+ * Derive the status of every step from the current position.
+ *
+ * Steps before `currentIndex` are `'complete'`, the step at `currentIndex` is
+ * `'current'`, and every step after is `'upcoming'`.
+ */
+declare function getStepState(steps: WizardStep[], currentIndex: number): WizardStepState[];
+/**
+ * Returns the next step index, clamped to the last step so the wizard never
+ * advances past the final step.
+ */
+declare function getNextIndex(currentIndex: number, count: number): number;
+/**
+ * Returns the previous step index, clamped to 0 so the wizard never goes
+ * behind the first step.
+ */
+declare function getPrevIndex(currentIndex: number): number;
+/**
+ * Whether the wizard can advance from `currentIndex`.
+ *
+ * Returns `false` when already on the last step.
+ */
+declare function canAdvance(currentIndex: number, count: number): boolean;
+/**
+ * Fractional progress through the wizard (0 when on step 0, 1 when the final
+ * step is complete). Returns 0 for empty wizards.
+ *
+ * `wizardProgress(0, 4)` → 0   (just started)
+ * `wizardProgress(3, 4)` → 0.75
+ * `wizardProgress(4, 4)` → 1   (done)
+ */
+declare function wizardProgress(currentIndex: number, count: number): number;
+/**
+ * Build the framework-agnostic root props for a wizard component.
+ *
+ * Returns `role="group"` plus `data-step` / `data-orientation` attributes so
+ * adapters can spread them onto their container without duplicating logic.
+ */
+declare function createWizard(props?: WizardProps): WizardAPI;
+
+/**
+ * Root container that holds the step rail and the content/footer area
+ * side-by-side (vertical) or stacked (horizontal).
+ */
+declare const wizardVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * The step rail — the ordered list of step indicators.
+ * Vertical: a narrow column on the left. Horizontal: a row across the top.
+ */
+declare const wizardRailVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * A single step item in the rail. The `status` variant drives colour so
+ * adapters never inline these classes.
+ */
+declare const wizardStepItemVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | undefined;
+    status?: "complete" | "current" | "upcoming" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/**
+ * The circular step indicator (the number/check badge on the rail).
+ * `status` variant applies the appropriate background and text treatment.
+ */
+declare const wizardStepIndicatorVariants: (props?: ({
+    status?: "complete" | "current" | "upcoming" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** The label text next to / below the step indicator. */
+declare const wizardStepLabelVariants: (props?: ({
+    status?: "complete" | "current" | "upcoming" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** "(Optional)" sub-label shown beneath the step label. */
+declare const wizardStepOptionalClass = "text-xs text-muted-foreground";
+/**
+ * The connector line drawn between two adjacent step indicators.
+ * Positioned absolutely so the indicator sits on top of it.
+ */
+declare const wizardConnectorVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | undefined;
+    complete?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** The main content area to the right (vertical) or below (horizontal) the rail. */
+declare const wizardContentClass = "flex min-w-0 flex-1 flex-col";
+/** Footer row that holds the Back / Skip / Next-or-Complete buttons. */
+declare const wizardFooterClass = "mt-6 flex items-center gap-3";
+/** The primary action button (Next / Complete). */
+declare const wizardPrimaryButtonVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+/** The secondary action button (Back / Skip). */
+declare const wizardSecondaryButtonVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type WizardAPI, type WizardOrientation, type WizardProps, type WizardStep, type WizardStepState, type WizardStepStatus, canAdvance, createWizard, getNextIndex, getPrevIndex, getStepState, wizardConnectorVariants, wizardContentClass, wizardFooterClass, wizardPrimaryButtonVariants, wizardProgress, wizardRailVariants, wizardSecondaryButtonVariants, wizardStepIndicatorVariants, wizardStepItemVariants, wizardStepLabelVariants, wizardStepOptionalClass, wizardVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/react",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "All Refraction UI React components in one package — headless, accessible, zero-dependency",
   "type": "module",
   "main": "./dist/index.js",
@@ -54,6 +54,7 @@
     "@refraction-ui/react-analytics": "workspace:*",
     "@refraction-ui/react-animated-text": "workspace:*",
     "@refraction-ui/react-app-shell": "workspace:*",
+    "@refraction-ui/react-audio-room": "workspace:*",
     "@refraction-ui/react-auth": "workspace:*",
     "@refraction-ui/react-avatar": "workspace:*",
     "@refraction-ui/react-avatar-group": "workspace:*",
@@ -62,12 +63,14 @@
     "@refraction-ui/react-breadcrumbs": "workspace:*",
     "@refraction-ui/react-button": "workspace:*",
     "@refraction-ui/react-calendar": "workspace:*",
+    "@refraction-ui/react-call-controls": "workspace:*",
     "@refraction-ui/react-callout": "workspace:*",
     "@refraction-ui/react-card": "workspace:*",
     "@refraction-ui/react-card-grid": "workspace:*",
     "@refraction-ui/react-carousel": "workspace:*",
     "@refraction-ui/react-charts": "workspace:*",
     "@refraction-ui/react-checkbox": "workspace:*",
+    "@refraction-ui/react-checklist": "workspace:*",
     "@refraction-ui/react-code-block": "workspace:*",
     "@refraction-ui/react-code-editor": "workspace:*",
     "@refraction-ui/react-collapsible": "workspace:*",
@@ -83,14 +86,20 @@
     "@refraction-ui/react-dialog": "workspace:*",
     "@refraction-ui/react-diff-viewer": "workspace:*",
     "@refraction-ui/react-dropdown-menu": "workspace:*",
+    "@refraction-ui/react-editor-status-bar": "workspace:*",
+    "@refraction-ui/react-editor-tabs": "workspace:*",
     "@refraction-ui/react-emoji-picker": "workspace:*",
     "@refraction-ui/react-empty-state": "workspace:*",
     "@refraction-ui/react-feedback-dialog": "workspace:*",
     "@refraction-ui/react-file-tree": "workspace:*",
     "@refraction-ui/react-file-upload": "workspace:*",
+    "@refraction-ui/react-floating-reactions": "workspace:*",
+    "@refraction-ui/react-flow-editor": "workspace:*",
     "@refraction-ui/react-footer": "workspace:*",
     "@refraction-ui/react-form": "workspace:*",
+    "@refraction-ui/react-graph-view": "workspace:*",
     "@refraction-ui/react-icon-system": "workspace:*",
+    "@refraction-ui/react-infinite-canvas": "workspace:*",
     "@refraction-ui/react-inline-editor": "workspace:*",
     "@refraction-ui/react-input": "workspace:*",
     "@refraction-ui/react-input-group": "workspace:*",
@@ -98,8 +107,12 @@
     "@refraction-ui/react-keyboard-shortcut": "workspace:*",
     "@refraction-ui/react-language-selector": "workspace:*",
     "@refraction-ui/react-link-card": "workspace:*",
+    "@refraction-ui/react-live-captions": "workspace:*",
+    "@refraction-ui/react-live-cursors": "workspace:*",
+    "@refraction-ui/react-live-transcript": "workspace:*",
     "@refraction-ui/react-logger": "workspace:*",
     "@refraction-ui/react-markdown-renderer": "workspace:*",
+    "@refraction-ui/react-mini-map": "workspace:*",
     "@refraction-ui/react-mobile-nav": "workspace:*",
     "@refraction-ui/react-navbar": "workspace:*",
     "@refraction-ui/react-otp-input": "workspace:*",
@@ -107,9 +120,12 @@
     "@refraction-ui/react-password-input": "workspace:*",
     "@refraction-ui/react-payment": "workspace:*",
     "@refraction-ui/react-popover": "workspace:*",
+    "@refraction-ui/react-pre-call-lobby": "workspace:*",
     "@refraction-ui/react-presence-indicator": "workspace:*",
     "@refraction-ui/react-progress-display": "workspace:*",
+    "@refraction-ui/react-radial-gauge": "workspace:*",
     "@refraction-ui/react-radio": "workspace:*",
+    "@refraction-ui/react-rating-scale": "workspace:*",
     "@refraction-ui/react-reaction-bar": "workspace:*",
     "@refraction-ui/react-resizable-layout": "workspace:*",
     "@refraction-ui/react-rich-editor": "workspace:*",
@@ -126,18 +142,25 @@
     "@refraction-ui/react-social-auth-button": "workspace:*",
     "@refraction-ui/react-status-indicator": "workspace:*",
     "@refraction-ui/react-steps": "workspace:*",
+    "@refraction-ui/react-sticky-note": "workspace:*",
     "@refraction-ui/react-switch": "workspace:*",
     "@refraction-ui/react-table-of-contents": "workspace:*",
     "@refraction-ui/react-tabs": "workspace:*",
+    "@refraction-ui/react-terminal": "workspace:*",
+    "@refraction-ui/react-test-results": "workspace:*",
     "@refraction-ui/react-textarea": "workspace:*",
     "@refraction-ui/react-theme": "workspace:*",
     "@refraction-ui/react-thread-view": "workspace:*",
+    "@refraction-ui/react-timeline": "workspace:*",
     "@refraction-ui/react-toast": "workspace:*",
     "@refraction-ui/react-tooltip": "workspace:*",
     "@refraction-ui/react-version-selector": "workspace:*",
+    "@refraction-ui/react-video-grid": "workspace:*",
     "@refraction-ui/react-video-player": "workspace:*",
+    "@refraction-ui/react-video-tile": "workspace:*",
     "@refraction-ui/react-voice-pill": "workspace:*",
     "@refraction-ui/react-waveform": "workspace:*",
+    "@refraction-ui/react-wizard": "workspace:*",
     "@refraction-ui/shared": "workspace:*",
     "@types/react": "19.0.0",
     "@types/react-dom": "19.0.0",