@refraction-ui/react 0.4.2 → 0.5.0

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

@@ -0,0 +1,95 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+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/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 };