@refraction-ui/react 0.4.2 → 0.6.0

package/dist/internal/thread-view/index.d.ts

@@ -0,0 +1,95 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+interface MessageReaction {
+    emoji: string;
+    count: number;
+    userReacted: boolean;
+}
+interface MessageAttachment {
+    id: string;
+    name: string;
+    url: string;
+    type: string;
+    size?: number;
+}
+interface MessageData {
+    /** Unique message ID */
+    id: string;
+    /** Author display info */
+    author: {
+        id: string;
+        name: string;
+        avatarUrl?: string;
+    };
+    /** Message content (can contain markdown) */
+    content: string;
+    /** Message timestamp */
+    timestamp: Date;
+    /** Reactions on this message */
+    reactions?: MessageReaction[];
+    /** Threaded replies */
+    replies?: MessageData[];
+    /** File attachments */
+    attachments?: MessageAttachment[];
+    /** Whether this message has been edited */
+    edited?: boolean;
+}
+interface ThreadViewProps {
+    /** Messages to display */
+    messages: MessageData[];
+    /** Callback when a reply is sent */
+    onReply?: (messageId: string, content: string) => void;
+    /** Callback when a reaction is toggled */
+    onReact?: (messageId: string, emoji: string) => void;
+    /** Current user ID (for highlighting own messages) */
+    currentUserId?: string;
+}
+interface ThreadViewState {
+    messages: MessageData[];
+    replyingTo: string | null;
+}
+interface ThreadViewAPI {
+    /** Current state */
+    state: ThreadViewState;
+    /** Start replying to a message */
+    startReply(messageId: string): void;
+    /** Cancel reply */
+    cancelReply(): void;
+    /** Send a reply */
+    reply(messageId: string, content: string): void;
+    /** Toggle a reaction on a message */
+    react(messageId: string, emoji: string): void;
+    /** Format a timestamp for display */
+    formatTimestamp(date: Date): string;
+    /** Format relative time (e.g., "2 minutes ago") */
+    formatRelativeTime(date: Date): string;
+    /** ARIA props for the thread container */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Get ARIA props for a message */
+    getMessageAriaProps(message: MessageData): Record<string, unknown>;
+    /** Get ARIA props for a reply button */
+    getReplyButtonAriaProps(messageId: string): Record<string, unknown>;
+    /** Generated IDs */
+    ids: {
+        thread: string;
+        label: string;
+    };
+}
+declare function formatTimestamp(date: Date): string;
+declare function formatRelativeTime(date: Date, now?: Date): string;
+declare function createThreadView(props: ThreadViewProps): ThreadViewAPI;
+
+declare const threadContainerStyles = "flex flex-col gap-1";
+declare const threadMessageStyles = "flex gap-3 px-4 py-2 hover:bg-accent/50 rounded-md transition-colors group";
+declare const threadAvatarStyles = "h-9 w-9 rounded-full bg-muted flex items-center justify-center text-sm font-medium overflow-hidden flex-shrink-0";
+declare const threadContentStyles = "flex-1 min-w-0";
+declare const threadAuthorStyles = "font-semibold text-sm";
+declare const threadTimestampStyles = "text-xs text-muted-foreground ml-2";
+declare const threadBodyStyles = "text-sm mt-0.5 whitespace-pre-wrap break-words";
+declare const threadReactionsStyles = "flex flex-wrap gap-1 mt-1";
+declare const threadReplyIndicatorStyles = "flex items-center gap-1 mt-1 text-xs text-primary cursor-pointer hover:underline";
+declare const threadActionsStyles = "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity";
+declare const threadAttachmentStyles = "flex items-center gap-2 mt-1 p-2 rounded border text-xs bg-muted/50";
+declare const threadEditedStyles = "text-xs text-muted-foreground ml-1";
+
+export { type MessageAttachment, type MessageData, type MessageReaction, type ThreadViewAPI, type ThreadViewProps, type ThreadViewState, createThreadView, formatRelativeTime, formatTimestamp, threadActionsStyles, threadAttachmentStyles, threadAuthorStyles, threadAvatarStyles, threadBodyStyles, threadContainerStyles, threadContentStyles, threadEditedStyles, threadMessageStyles, threadReactionsStyles, threadReplyIndicatorStyles, threadTimestampStyles };

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

@@ -0,0 +1,64 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+type ToastVariant = 'default' | 'success' | 'error' | 'warning';
+/** Get the icon name for a toast variant (colorblind-safe: meaning not conveyed by color alone) */
+declare function getToastIcon(variant: ToastVariant): string;
+interface ToastProps {
+    /** Visual variant */
+    variant?: ToastVariant;
+    /** Auto-dismiss duration in ms (default: 3000). Set to 0 to disable. */
+    duration?: number;
+    /** Whether the toast is open (controlled) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+interface ToastState {
+    open: boolean;
+    variant: ToastVariant;
+}
+interface ToastAPI {
+    /** Current toast state */
+    state: ToastState;
+    /** ARIA attributes for the toast element */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Dismiss the toast */
+    dismiss(): void;
+    /** Start the auto-dismiss timer */
+    startTimer(): void;
+    /** Pause the auto-dismiss timer (e.g. on hover) */
+    pauseTimer(): void;
+    /** Resume the auto-dismiss timer */
+    resumeTimer(): void;
+}
+declare function createToast(props?: ToastProps): ToastAPI;
+/** Entry in the toast manager */
+interface ToastEntry {
+    id: string;
+    message: string;
+    variant: ToastVariant;
+    duration: number;
+    createdAt: number;
+}
+interface ToastManagerAPI {
+    /** Add a new toast. Returns the toast id. */
+    toast(message: string, opts?: {
+        variant?: ToastVariant;
+        duration?: number;
+    }): string;
+    /** Dismiss a toast by id */
+    dismiss(id: string): void;
+    /** Current toast list (read-only) */
+    readonly toasts: ReadonlyArray<ToastEntry>;
+    /** Subscribe to toast list changes. Returns unsubscribe function. */
+    subscribe(fn: (toasts: ReadonlyArray<ToastEntry>) => void): () => void;
+}
+declare function createToastManager(): ToastManagerAPI;
+
+declare const toastVariants: (props?: ({
+    variant?: "default" | "success" | "error" | "warning" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type ToastAPI, type ToastEntry, type ToastManagerAPI, type ToastProps, type ToastState, type ToastVariant, createToast, createToastManager, getToastIcon, toastVariants };

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

@@ -0,0 +1,64 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+type ToastVariant = 'default' | 'success' | 'error' | 'warning';
+/** Get the icon name for a toast variant (colorblind-safe: meaning not conveyed by color alone) */
+declare function getToastIcon(variant: ToastVariant): string;
+interface ToastProps {
+    /** Visual variant */
+    variant?: ToastVariant;
+    /** Auto-dismiss duration in ms (default: 3000). Set to 0 to disable. */
+    duration?: number;
+    /** Whether the toast is open (controlled) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+interface ToastState {
+    open: boolean;
+    variant: ToastVariant;
+}
+interface ToastAPI {
+    /** Current toast state */
+    state: ToastState;
+    /** ARIA attributes for the toast element */
+    ariaProps: Partial<AccessibilityProps>;
+    /** Dismiss the toast */
+    dismiss(): void;
+    /** Start the auto-dismiss timer */
+    startTimer(): void;
+    /** Pause the auto-dismiss timer (e.g. on hover) */
+    pauseTimer(): void;
+    /** Resume the auto-dismiss timer */
+    resumeTimer(): void;
+}
+declare function createToast(props?: ToastProps): ToastAPI;
+/** Entry in the toast manager */
+interface ToastEntry {
+    id: string;
+    message: string;
+    variant: ToastVariant;
+    duration: number;
+    createdAt: number;
+}
+interface ToastManagerAPI {
+    /** Add a new toast. Returns the toast id. */
+    toast(message: string, opts?: {
+        variant?: ToastVariant;
+        duration?: number;
+    }): string;
+    /** Dismiss a toast by id */
+    dismiss(id: string): void;
+    /** Current toast list (read-only) */
+    readonly toasts: ReadonlyArray<ToastEntry>;
+    /** Subscribe to toast list changes. Returns unsubscribe function. */
+    subscribe(fn: (toasts: ReadonlyArray<ToastEntry>) => void): () => void;
+}
+declare function createToastManager(): ToastManagerAPI;
+
+declare const toastVariants: (props?: ({
+    variant?: "default" | "success" | "error" | "warning" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type ToastAPI, type ToastEntry, type ToastManagerAPI, type ToastProps, type ToastState, type ToastVariant, createToast, createToastManager, getToastIcon, toastVariants };

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

@@ -0,0 +1,45 @@
+import { AccessibilityProps, Side } from '../shared/index.cjs';
+
+interface TooltipProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: Side;
+    delayDuration?: number;
+}
+interface TooltipAPI {
+    /** Current open state */
+    state: {
+        open: boolean;
+    };
+    /** Props to spread on the trigger element */
+    triggerProps: Partial<AccessibilityProps> & {
+        'aria-describedby': string;
+    };
+    /** Props to spread on the content element */
+    contentProps: {
+        role: 'tooltip';
+        id: string;
+    };
+    /** Resolved placement */
+    placement: Side;
+    /** Open the tooltip */
+    open: () => void;
+    /** Close the tooltip (and clear any pending delay) */
+    close: () => void;
+    /** Open with delay */
+    openWithDelay: () => void;
+    /** The configured delay duration */
+    delayDuration: number;
+    /** Cancel any pending delay timer */
+    cancelDelay: () => void;
+}
+declare function createTooltip(props?: TooltipProps): TooltipAPI;
+
+declare const tooltipContentVariants: (props?: ({
+    side?: "top" | "right" | "bottom" | "left" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type TooltipAPI, type TooltipProps, createTooltip, tooltipContentVariants };

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

@@ -0,0 +1,45 @@
+import { AccessibilityProps, Side } from '../shared/index.js';
+
+interface TooltipProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: Side;
+    delayDuration?: number;
+}
+interface TooltipAPI {
+    /** Current open state */
+    state: {
+        open: boolean;
+    };
+    /** Props to spread on the trigger element */
+    triggerProps: Partial<AccessibilityProps> & {
+        'aria-describedby': string;
+    };
+    /** Props to spread on the content element */
+    contentProps: {
+        role: 'tooltip';
+        id: string;
+    };
+    /** Resolved placement */
+    placement: Side;
+    /** Open the tooltip */
+    open: () => void;
+    /** Close the tooltip (and clear any pending delay) */
+    close: () => void;
+    /** Open with delay */
+    openWithDelay: () => void;
+    /** The configured delay duration */
+    delayDuration: number;
+    /** Cancel any pending delay timer */
+    cancelDelay: () => void;
+}
+declare function createTooltip(props?: TooltipProps): TooltipAPI;
+
+declare const tooltipContentVariants: (props?: ({
+    side?: "top" | "right" | "bottom" | "left" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type TooltipAPI, type TooltipProps, createTooltip, tooltipContentVariants };

package/dist/internal/version-selector/index.d.cts

@@ -0,0 +1,68 @@
+import { KeyboardHandlerMap } from '../shared/index.cjs';
+
+interface VersionOption {
+    value: string;
+    label: string;
+    isLatest?: boolean;
+}
+interface VersionSelectorProps {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    versions: VersionOption[];
+}
+interface VersionSelectorAPI {
+    /** Current state */
+    state: {
+        selectedVersion: string;
+        isOpen: boolean;
+    };
+    /** Props to spread on the trigger element */
+    triggerProps: {
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        'aria-haspopup': 'listbox';
+        role: 'combobox';
+    };
+    /** Props to spread on the content/dropdown element */
+    contentProps: {
+        role: 'listbox';
+        id: string;
+    };
+    /** Get props for an individual option */
+    getOptionProps: (value: string) => {
+        role: 'option';
+        'aria-selected': boolean;
+        'data-value': string;
+        'data-latest'?: string;
+    };
+    /** Select a version */
+    select: (value: string) => void;
+    /** Open the dropdown */
+    open: () => void;
+    /** Close the dropdown */
+    close: () => void;
+    /** Keyboard handler map */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Pre-built keyboard event handler */
+    handleKeyDown: (event: KeyboardEvent) => void;
+}
+declare function createVersionSelector(props: VersionSelectorProps): VersionSelectorAPI;
+
+declare const versionSelectorVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const versionSelectorOptionVariants: (props?: ({
+    selected?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+declare const latestBadgeVariants: (props?: ({
+    variant?: "default" | "accent" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type VersionOption, type VersionSelectorAPI, type VersionSelectorProps, createVersionSelector, latestBadgeVariants, versionSelectorOptionVariants as optionVariants, versionSelectorVariants };

package/dist/internal/version-selector/index.d.ts

@@ -0,0 +1,68 @@
+import { KeyboardHandlerMap } from '../shared/index.js';
+
+interface VersionOption {
+    value: string;
+    label: string;
+    isLatest?: boolean;
+}
+interface VersionSelectorProps {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    versions: VersionOption[];
+}
+interface VersionSelectorAPI {
+    /** Current state */
+    state: {
+        selectedVersion: string;
+        isOpen: boolean;
+    };
+    /** Props to spread on the trigger element */
+    triggerProps: {
+        'aria-expanded': boolean;
+        'aria-controls': string;
+        'aria-haspopup': 'listbox';
+        role: 'combobox';
+    };
+    /** Props to spread on the content/dropdown element */
+    contentProps: {
+        role: 'listbox';
+        id: string;
+    };
+    /** Get props for an individual option */
+    getOptionProps: (value: string) => {
+        role: 'option';
+        'aria-selected': boolean;
+        'data-value': string;
+        'data-latest'?: string;
+    };
+    /** Select a version */
+    select: (value: string) => void;
+    /** Open the dropdown */
+    open: () => void;
+    /** Close the dropdown */
+    close: () => void;
+    /** Keyboard handler map */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Pre-built keyboard event handler */
+    handleKeyDown: (event: KeyboardEvent) => void;
+}
+declare function createVersionSelector(props: VersionSelectorProps): VersionSelectorAPI;
+
+declare const versionSelectorVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const versionSelectorOptionVariants: (props?: ({
+    selected?: "true" | "false" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+declare const latestBadgeVariants: (props?: ({
+    variant?: "default" | "accent" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type VersionOption, type VersionSelectorAPI, type VersionSelectorProps, createVersionSelector, latestBadgeVariants, versionSelectorOptionVariants as optionVariants, versionSelectorVariants };

package/dist/internal/video-player/index.d.cts

@@ -0,0 +1,50 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+interface VideoPlayerProps {
+    src?: string;
+    poster?: string;
+    autoplay?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+}
+type VideoState = 'idle' | 'loading' | 'playing' | 'paused' | 'ended';
+interface VideoPlayerAPI {
+    /** Current player state */
+    state: VideoState;
+    /** Transition to playing state */
+    play: () => void;
+    /** Transition to paused state */
+    pause: () => void;
+    /** Toggle between playing and paused */
+    togglePlay: () => void;
+    /** Toggle mute state */
+    toggleMute: () => boolean;
+    /** ARIA props for the player region */
+    ariaProps: Partial<AccessibilityProps>;
+    /** ARIA props for control buttons */
+    controlAriaProps: {
+        playPause: Partial<AccessibilityProps>;
+        mute: Partial<AccessibilityProps>;
+    };
+    /** Data attributes reflecting current state */
+    dataAttributes: Record<string, string>;
+}
+declare function createVideoPlayer(props?: VideoPlayerProps): VideoPlayerAPI;
+
+declare const playerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "full" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const controlsVariants: (props?: ({
+    visibility?: "visible" | "hidden" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const overlayVariants: (props?: ({
+    visibility?: "visible" | "hidden" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type VideoPlayerAPI, type VideoPlayerProps, type VideoState, controlsVariants, createVideoPlayer, overlayVariants, playerVariants };

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

@@ -0,0 +1,50 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+interface VideoPlayerProps {
+    src?: string;
+    poster?: string;
+    autoplay?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+}
+type VideoState = 'idle' | 'loading' | 'playing' | 'paused' | 'ended';
+interface VideoPlayerAPI {
+    /** Current player state */
+    state: VideoState;
+    /** Transition to playing state */
+    play: () => void;
+    /** Transition to paused state */
+    pause: () => void;
+    /** Toggle between playing and paused */
+    togglePlay: () => void;
+    /** Toggle mute state */
+    toggleMute: () => boolean;
+    /** ARIA props for the player region */
+    ariaProps: Partial<AccessibilityProps>;
+    /** ARIA props for control buttons */
+    controlAriaProps: {
+        playPause: Partial<AccessibilityProps>;
+        mute: Partial<AccessibilityProps>;
+    };
+    /** Data attributes reflecting current state */
+    dataAttributes: Record<string, string>;
+}
+declare function createVideoPlayer(props?: VideoPlayerProps): VideoPlayerAPI;
+
+declare const playerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "full" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const controlsVariants: (props?: ({
+    visibility?: "visible" | "hidden" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const overlayVariants: (props?: ({
+    visibility?: "visible" | "hidden" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type VideoPlayerAPI, type VideoPlayerProps, type VideoState, controlsVariants, createVideoPlayer, overlayVariants, playerVariants };

package/dist/internal/voice-pill/index.d.cts

@@ -0,0 +1,86 @@
+import { AccessibilityProps, TokenContract } from '../shared/index.cjs';
+
+type VoicePillSpeaker = 'ai' | 'user' | (string & {});
+type VoicePillPosition = 'inline' | 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'left-start' | 'left-center' | 'left-end' | 'right-start' | 'right-center' | 'right-end';
+interface VoicePillProps {
+    /** Speaker identity used for labels and data-speaker theming */
+    speaker?: VoicePillSpeaker;
+    /** Primary voice status text */
+    label: string;
+    /** Optional secondary status text */
+    sub?: string;
+    /** Voice activity intensity, clamped from 0 to 1 */
+    intensity?: number;
+    /** Whether voice output/input is muted */
+    muted?: boolean;
+    /** Callback for the optional mute toggle */
+    onToggleMute?: () => void;
+    /** Viewport position, or inline for embedding inside another layout */
+    position?: VoicePillPosition;
+}
+interface VoicePillStyleVars {
+    [key: `--${string}`]: string;
+}
+interface VoicePillAPI {
+    /** Display speaker label */
+    speaker: string;
+    /** Normalized key for data-speaker */
+    speakerKey: string;
+    /** Primary label */
+    label: string;
+    /** Secondary label */
+    sub?: string;
+    /** Clamped raw intensity */
+    intensity: number;
+    /** Intensity used for visual animation after muted state is applied */
+    visualIntensity: number;
+    /** Muted state */
+    muted: boolean;
+    /** Viewport position, or inline for embedding inside another layout */
+    position: VoicePillPosition;
+    /** Fallback initials for the speaker avatar */
+    initials: string;
+    /** Invoke the mute callback when provided */
+    toggleMute(): void;
+    /** ARIA props for the live status pill */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA props for the mute toggle */
+    toggleMuteAriaProps: Record<string, unknown>;
+    /** Data attributes reflecting speaker/state */
+    dataAttributes: Record<string, string>;
+    /** CSS custom properties that drive pulse visuals */
+    style: VoicePillStyleVars;
+}
+declare const DEFAULT_VOICE_PILL_SPEAKER = "ai";
+declare const DEFAULT_VOICE_PILL_POSITION: VoicePillPosition;
+declare function clampVoicePillIntensity(intensity?: number): number;
+declare function getVoicePillSpeakerKey(speaker?: VoicePillSpeaker): string;
+declare function getVoicePillSpeakerLabel(speaker?: VoicePillSpeaker): string;
+declare function getVoicePillInitials(speaker?: VoicePillSpeaker): string;
+declare function getVoicePillPosition(position?: VoicePillPosition): VoicePillPosition;
+declare function getVoicePillAriaLabel(props: {
+    speaker?: VoicePillSpeaker;
+    label: string;
+    sub?: string;
+    muted?: boolean;
+}): string;
+declare function getVoicePillPulseStyle(intensity?: number, muted?: boolean): VoicePillStyleVars;
+declare function createVoicePill(props: VoicePillProps): VoicePillAPI;
+
+declare const voicePillTokens: TokenContract;
+declare const voicePillRootStyles = "inline-flex min-w-0 max-w-[min(calc(100vw-2rem),22rem)] items-center gap-3 rounded-full border border-border bg-background px-3 py-2 text-foreground shadow-lg ring-1 ring-border/50 transition-opacity data-[muted=true]:opacity-80";
+declare const voicePillSpeakerStyles = "[--rfr-voice-pill-accent:hsl(var(--primary))] [--rfr-voice-pill-accent-foreground:hsl(var(--primary-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent:hsl(var(--accent-foreground))] data-[speaker=user]:[--rfr-voice-pill-accent-foreground:hsl(var(--accent))] data-[muted=true]:[--rfr-voice-pill-accent:hsl(var(--muted-foreground))]";
+declare const voicePillPositionVariants: (props?: ({
+    position?: "inline" | "top-start" | "top-center" | "top-end" | "bottom-start" | "bottom-center" | "bottom-end" | "left-start" | "left-center" | "left-end" | "right-start" | "right-center" | "right-end" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const voicePillAvatarWrapStyles = "relative flex h-10 w-10 shrink-0 items-center justify-center";
+declare const voicePillPulseRingStyles = "pointer-events-none absolute inset-0 rounded-full border border-[var(--rfr-voice-pill-accent)] opacity-[var(--rfr-voice-pill-ring-opacity)] motion-safe:animate-ping motion-reduce:animate-none";
+declare const voicePillAvatarStyles = "relative z-10 flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-[var(--rfr-voice-pill-accent)] text-[var(--rfr-voice-pill-accent-foreground)] text-xs font-semibold uppercase";
+declare const voicePillTextStyles = "min-w-0 flex-1";
+declare const voicePillLabelStyles = "block truncate text-sm font-medium leading-tight";
+declare const voicePillSubStyles = "block truncate text-xs leading-tight text-muted-foreground";
+declare const voicePillMuteButtonStyles = "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-border text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+
+export { DEFAULT_VOICE_PILL_POSITION, DEFAULT_VOICE_PILL_SPEAKER, type VoicePillAPI, type VoicePillPosition, type VoicePillProps, type VoicePillSpeaker, type VoicePillStyleVars, clampVoicePillIntensity, createVoicePill, getVoicePillAriaLabel, getVoicePillInitials, getVoicePillPosition, getVoicePillPulseStyle, getVoicePillSpeakerKey, getVoicePillSpeakerLabel, voicePillAvatarStyles, voicePillAvatarWrapStyles, voicePillLabelStyles, voicePillMuteButtonStyles, voicePillPositionVariants, voicePillPulseRingStyles, voicePillRootStyles, voicePillSpeakerStyles, voicePillSubStyles, voicePillTextStyles, voicePillTokens };