@refraction-ui/react 0.4.2 → 0.6.0

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

@@ -0,0 +1,54 @@
+import { AccessibilityProps, KeyboardHandlerMap, FocusTrapConfig } from '../shared/index.cjs';
+
+interface DialogProps {
+    /** Whether the dialog is open (controlled) */
+    open?: boolean;
+    /** Whether the dialog starts open (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the dialog is modal (default: true) */
+    modal?: boolean;
+}
+interface DialogState {
+    open: boolean;
+}
+interface DialogAPI {
+    /** Current dialog state */
+    state: DialogState;
+    /** ARIA attributes for the trigger button */
+    triggerProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA attributes for the dialog content */
+    contentProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Data attributes for the overlay */
+    overlayProps: Record<string, string>;
+    /** Open the dialog */
+    open(): void;
+    /** Close the dialog */
+    close(): void;
+    /** Toggle the dialog */
+    toggle(): void;
+    /** Keyboard handlers (Escape to close) */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Generated IDs for aria linking */
+    ids: {
+        content: string;
+        title: string;
+        description: string;
+    };
+    /**
+     * Focus trap configuration for framework wrappers.
+     * Pass this to createFocusTrap() with a container element.
+     */
+    focusTrapConfig: Omit<FocusTrapConfig, 'container'>;
+}
+declare function createDialog(props?: DialogProps): DialogAPI;
+
+declare const overlayStyles = "fixed inset-0 z-50 bg-black/80";
+declare const dialogContentVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type DialogAPI, type DialogProps, type DialogState, createDialog, dialogContentVariants, overlayStyles };

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

@@ -0,0 +1,54 @@
+import { AccessibilityProps, KeyboardHandlerMap, FocusTrapConfig } from '../shared/index.js';
+
+interface DialogProps {
+    /** Whether the dialog is open (controlled) */
+    open?: boolean;
+    /** Whether the dialog starts open (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the dialog is modal (default: true) */
+    modal?: boolean;
+}
+interface DialogState {
+    open: boolean;
+}
+interface DialogAPI {
+    /** Current dialog state */
+    state: DialogState;
+    /** ARIA attributes for the trigger button */
+    triggerProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA attributes for the dialog content */
+    contentProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Data attributes for the overlay */
+    overlayProps: Record<string, string>;
+    /** Open the dialog */
+    open(): void;
+    /** Close the dialog */
+    close(): void;
+    /** Toggle the dialog */
+    toggle(): void;
+    /** Keyboard handlers (Escape to close) */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Generated IDs for aria linking */
+    ids: {
+        content: string;
+        title: string;
+        description: string;
+    };
+    /**
+     * Focus trap configuration for framework wrappers.
+     * Pass this to createFocusTrap() with a container element.
+     */
+    focusTrapConfig: Omit<FocusTrapConfig, 'container'>;
+}
+declare function createDialog(props?: DialogProps): DialogAPI;
+
+declare const overlayStyles = "fixed inset-0 z-50 bg-black/80";
+declare const dialogContentVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type DialogAPI, type DialogProps, type DialogState, createDialog, dialogContentVariants, overlayStyles };

package/dist/internal/dropdown-menu/index.d.cts

@@ -0,0 +1,55 @@
+import { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.cjs';
+
+interface DropdownMenuProps {
+    /** Whether the menu is open (controlled) */
+    open?: boolean;
+    /** Whether the menu starts open (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+interface MenuItemProps {
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Callback when the item is selected */
+    onSelect?: () => void;
+}
+interface DropdownMenuState {
+    open: boolean;
+}
+interface DropdownMenuAPI {
+    /** Current menu state */
+    state: DropdownMenuState;
+    /** ARIA attributes for the trigger button */
+    triggerProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA attributes for the menu content */
+    contentProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Factory for menu item props */
+    getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Open the menu */
+    open(): void;
+    /** Close the menu */
+    close(): void;
+    /** Toggle the menu */
+    toggle(): void;
+    /** Keyboard handlers for the menu */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Generated IDs for aria linking */
+    ids: {
+        content: string;
+    };
+}
+declare function createDropdownMenu(props?: DropdownMenuProps): DropdownMenuAPI;
+
+declare const menuContentVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const menuItemVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type DropdownMenuAPI, type DropdownMenuProps, type DropdownMenuState, type MenuItemProps, createDropdownMenu, menuContentVariants, menuItemVariants };

package/dist/internal/dropdown-menu/index.d.ts

@@ -0,0 +1,55 @@
+import { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.js';
+
+interface DropdownMenuProps {
+    /** Whether the menu is open (controlled) */
+    open?: boolean;
+    /** Whether the menu starts open (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+}
+interface MenuItemProps {
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Callback when the item is selected */
+    onSelect?: () => void;
+}
+interface DropdownMenuState {
+    open: boolean;
+}
+interface DropdownMenuAPI {
+    /** Current menu state */
+    state: DropdownMenuState;
+    /** ARIA attributes for the trigger button */
+    triggerProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA attributes for the menu content */
+    contentProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Factory for menu item props */
+    getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown>;
+    /** Open the menu */
+    open(): void;
+    /** Close the menu */
+    close(): void;
+    /** Toggle the menu */
+    toggle(): void;
+    /** Keyboard handlers for the menu */
+    keyboardHandlers: KeyboardHandlerMap;
+    /** Generated IDs for aria linking */
+    ids: {
+        content: string;
+    };
+}
+declare function createDropdownMenu(props?: DropdownMenuProps): DropdownMenuAPI;
+
+declare const menuContentVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const menuItemVariants: (props?: ({
+    [x: string]: string | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type DropdownMenuAPI, type DropdownMenuProps, type DropdownMenuState, type MenuItemProps, createDropdownMenu, menuContentVariants, menuItemVariants };

package/dist/internal/emoji-picker/index.d.cts

@@ -0,0 +1,77 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+type EmojiCategory = 'smileys' | 'people' | 'nature' | 'food' | 'travel' | 'activities' | 'objects' | 'symbols' | 'flags';
+interface EmojiEntry {
+    emoji: string;
+    name: string;
+    category: EmojiCategory;
+    keywords: string[];
+}
+declare const EMOJI_DATA: Record<EmojiCategory, EmojiEntry[]>;
+/** All categories in display order */
+declare const EMOJI_CATEGORIES: EmojiCategory[];
+/** Category display labels */
+declare const CATEGORY_LABELS: Record<EmojiCategory, string>;
+/** Get all emojis as a flat array */
+declare function getAllEmojis(): EmojiEntry[];
+
+interface EmojiPickerProps {
+    /** Callback when an emoji is selected */
+    onSelect?: (emoji: EmojiEntry) => void;
+    /** Initial search query */
+    search?: string;
+    /** List of recently used emojis */
+    recentEmojis?: EmojiEntry[];
+    /** Maximum recent emojis to show */
+    maxRecent?: number;
+}
+interface EmojiPickerState {
+    search: string;
+    activeCategory: EmojiCategory;
+    filteredEmojis: EmojiEntry[];
+    recentEmojis: EmojiEntry[];
+}
+interface EmojiPickerAPI {
+    /** Current state */
+    state: EmojiPickerState;
+    /** Set search query */
+    setSearch(query: string): void;
+    /** Select an emoji */
+    select(emoji: EmojiEntry): void;
+    /** Set active category tab */
+    setCategory(category: EmojiCategory): void;
+    /** Category tabs with labels */
+    categoryTabs: {
+        category: EmojiCategory;
+        label: string;
+        emoji: string;
+    }[];
+    /** ARIA props for the picker container */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA props for the search input */
+    searchInputProps: Record<string, unknown>;
+    /** Get ARIA props for an emoji button */
+    getEmojiAriaProps(emoji: EmojiEntry): Record<string, unknown>;
+    /** Generated IDs */
+    ids: {
+        container: string;
+        search: string;
+        grid: string;
+        label: string;
+    };
+}
+declare function createEmojiPicker(props?: EmojiPickerProps): EmojiPickerAPI;
+
+declare const emojiPickerContainerStyles = "w-80 rounded-lg border bg-popover text-popover-foreground shadow-md";
+declare const emojiPickerSearchStyles = "w-full border-b px-3 py-2 text-sm bg-transparent outline-none placeholder:text-muted-foreground";
+declare const emojiPickerCategoryBarStyles = "flex border-b px-1";
+declare const emojiPickerCategoryTabVariants: (props?: ({
+    state?: "active" | "inactive" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const emojiPickerGridStyles = "grid grid-cols-8 gap-0.5 p-2 max-h-64 overflow-y-auto";
+declare const emojiPickerEmojiButtonStyles = "flex items-center justify-center h-8 w-8 rounded cursor-pointer text-lg hover:bg-accent transition-colors";
+declare const emojiPickerSectionLabelStyles = "px-2 py-1 text-xs font-medium text-muted-foreground";
+
+export { CATEGORY_LABELS, EMOJI_CATEGORIES, EMOJI_DATA, type EmojiCategory, type EmojiEntry, type EmojiPickerAPI, type EmojiPickerProps, type EmojiPickerState, createEmojiPicker, emojiPickerCategoryBarStyles, emojiPickerCategoryTabVariants, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, emojiPickerSearchStyles, emojiPickerSectionLabelStyles, getAllEmojis };

package/dist/internal/emoji-picker/index.d.ts

@@ -0,0 +1,77 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+type EmojiCategory = 'smileys' | 'people' | 'nature' | 'food' | 'travel' | 'activities' | 'objects' | 'symbols' | 'flags';
+interface EmojiEntry {
+    emoji: string;
+    name: string;
+    category: EmojiCategory;
+    keywords: string[];
+}
+declare const EMOJI_DATA: Record<EmojiCategory, EmojiEntry[]>;
+/** All categories in display order */
+declare const EMOJI_CATEGORIES: EmojiCategory[];
+/** Category display labels */
+declare const CATEGORY_LABELS: Record<EmojiCategory, string>;
+/** Get all emojis as a flat array */
+declare function getAllEmojis(): EmojiEntry[];
+
+interface EmojiPickerProps {
+    /** Callback when an emoji is selected */
+    onSelect?: (emoji: EmojiEntry) => void;
+    /** Initial search query */
+    search?: string;
+    /** List of recently used emojis */
+    recentEmojis?: EmojiEntry[];
+    /** Maximum recent emojis to show */
+    maxRecent?: number;
+}
+interface EmojiPickerState {
+    search: string;
+    activeCategory: EmojiCategory;
+    filteredEmojis: EmojiEntry[];
+    recentEmojis: EmojiEntry[];
+}
+interface EmojiPickerAPI {
+    /** Current state */
+    state: EmojiPickerState;
+    /** Set search query */
+    setSearch(query: string): void;
+    /** Select an emoji */
+    select(emoji: EmojiEntry): void;
+    /** Set active category tab */
+    setCategory(category: EmojiCategory): void;
+    /** Category tabs with labels */
+    categoryTabs: {
+        category: EmojiCategory;
+        label: string;
+        emoji: string;
+    }[];
+    /** ARIA props for the picker container */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA props for the search input */
+    searchInputProps: Record<string, unknown>;
+    /** Get ARIA props for an emoji button */
+    getEmojiAriaProps(emoji: EmojiEntry): Record<string, unknown>;
+    /** Generated IDs */
+    ids: {
+        container: string;
+        search: string;
+        grid: string;
+        label: string;
+    };
+}
+declare function createEmojiPicker(props?: EmojiPickerProps): EmojiPickerAPI;
+
+declare const emojiPickerContainerStyles = "w-80 rounded-lg border bg-popover text-popover-foreground shadow-md";
+declare const emojiPickerSearchStyles = "w-full border-b px-3 py-2 text-sm bg-transparent outline-none placeholder:text-muted-foreground";
+declare const emojiPickerCategoryBarStyles = "flex border-b px-1";
+declare const emojiPickerCategoryTabVariants: (props?: ({
+    state?: "active" | "inactive" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const emojiPickerGridStyles = "grid grid-cols-8 gap-0.5 p-2 max-h-64 overflow-y-auto";
+declare const emojiPickerEmojiButtonStyles = "flex items-center justify-center h-8 w-8 rounded cursor-pointer text-lg hover:bg-accent transition-colors";
+declare const emojiPickerSectionLabelStyles = "px-2 py-1 text-xs font-medium text-muted-foreground";
+
+export { CATEGORY_LABELS, EMOJI_CATEGORIES, EMOJI_DATA, type EmojiCategory, type EmojiEntry, type EmojiPickerAPI, type EmojiPickerProps, type EmojiPickerState, createEmojiPicker, emojiPickerCategoryBarStyles, emojiPickerCategoryTabVariants, emojiPickerContainerStyles, emojiPickerEmojiButtonStyles, emojiPickerGridStyles, emojiPickerSearchStyles, emojiPickerSectionLabelStyles, getAllEmojis };

package/dist/internal/feedback-dialog/index.d.cts

@@ -0,0 +1,55 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+import { DialogAPI } from '../dialog/index.cjs';
+
+type FeedbackType = 'text' | 'video' | 'general';
+interface FeedbackDialogProps {
+    /** Whether the dialog is open (controlled) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Callback when feedback is submitted */
+    onSubmit?: (data: FeedbackData) => void | Promise<void>;
+    /** Feedback type */
+    type?: FeedbackType;
+}
+interface FeedbackData {
+    comment: string;
+    email?: string;
+    type: FeedbackType;
+    selectedText?: string;
+}
+interface FeedbackFormState {
+    comment: string;
+    email: string;
+    honeypot: string;
+}
+interface FeedbackDialogState {
+    open: boolean;
+    isSubmitting: boolean;
+    isSubmitted: boolean;
+}
+interface FeedbackDialogAPI {
+    /** Current state */
+    state: FeedbackDialogState;
+    /** Dialog props from the underlying createDialog */
+    dialogProps: DialogAPI;
+    /** Form field values */
+    formState: FeedbackFormState;
+    /** Set a form field value */
+    setField(field: keyof FeedbackFormState, value: string): void;
+    /** Submit the feedback form */
+    submit(): Promise<void>;
+    /** Reset form to initial state */
+    reset(): void;
+    /** ARIA props for the feedback dialog */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+}
+declare function createFeedbackDialog(props?: FeedbackDialogProps): FeedbackDialogAPI;
+
+declare const feedbackDialogVariants: (props?: ({
+    type?: "text" | "video" | "general" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type FeedbackData, type FeedbackDialogAPI, type FeedbackDialogProps, type FeedbackDialogState, type FeedbackFormState, type FeedbackType, createFeedbackDialog, feedbackDialogVariants };

package/dist/internal/feedback-dialog/index.d.ts

@@ -0,0 +1,55 @@
+import { AccessibilityProps } from '../shared/index.js';
+import { DialogAPI } from '../dialog/index.js';
+
+type FeedbackType = 'text' | 'video' | 'general';
+interface FeedbackDialogProps {
+    /** Whether the dialog is open (controlled) */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Callback when feedback is submitted */
+    onSubmit?: (data: FeedbackData) => void | Promise<void>;
+    /** Feedback type */
+    type?: FeedbackType;
+}
+interface FeedbackData {
+    comment: string;
+    email?: string;
+    type: FeedbackType;
+    selectedText?: string;
+}
+interface FeedbackFormState {
+    comment: string;
+    email: string;
+    honeypot: string;
+}
+interface FeedbackDialogState {
+    open: boolean;
+    isSubmitting: boolean;
+    isSubmitted: boolean;
+}
+interface FeedbackDialogAPI {
+    /** Current state */
+    state: FeedbackDialogState;
+    /** Dialog props from the underlying createDialog */
+    dialogProps: DialogAPI;
+    /** Form field values */
+    formState: FeedbackFormState;
+    /** Set a form field value */
+    setField(field: keyof FeedbackFormState, value: string): void;
+    /** Submit the feedback form */
+    submit(): Promise<void>;
+    /** Reset form to initial state */
+    reset(): void;
+    /** ARIA props for the feedback dialog */
+    ariaProps: Partial<AccessibilityProps> & Record<string, unknown>;
+}
+declare function createFeedbackDialog(props?: FeedbackDialogProps): FeedbackDialogAPI;
+
+declare const feedbackDialogVariants: (props?: ({
+    type?: "text" | "video" | "general" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+
+export { type FeedbackData, type FeedbackDialogAPI, type FeedbackDialogProps, type FeedbackDialogState, type FeedbackFormState, type FeedbackType, createFeedbackDialog, feedbackDialogVariants };

package/dist/internal/file-upload/index.d.cts

@@ -0,0 +1,91 @@
+import { AccessibilityProps } from '../shared/index.cjs';
+
+type FileStatus = 'pending' | 'uploading' | 'complete' | 'error';
+interface FileEntry {
+    /** Unique ID for this file entry */
+    id: string;
+    /** Original file name */
+    name: string;
+    /** File size in bytes */
+    size: number;
+    /** MIME type */
+    type: string;
+    /** Upload progress 0-100 */
+    progress: number;
+    /** Current status */
+    status: FileStatus;
+    /** Error message if status is 'error' */
+    error?: string;
+}
+interface FileUploadProps {
+    /** Accepted file types (e.g., 'image/*,.pdf') */
+    accept?: string;
+    /** Max file size in bytes */
+    maxSize?: number;
+    /** Max number of files */
+    maxFiles?: number;
+    /** Allow multiple file selection */
+    multiple?: boolean;
+    /** Callback when files are selected/added */
+    onFilesSelected?: (files: FileEntry[]) => void;
+    /** Callback when a validation error occurs */
+    onError?: (errors: FileUploadError[]) => void;
+}
+interface FileUploadError {
+    file: string;
+    code: 'type' | 'size' | 'count';
+    message: string;
+}
+interface FileUploadState {
+    files: FileEntry[];
+    isDragging: boolean;
+}
+interface FileUploadAPI {
+    /** Current state */
+    state: FileUploadState;
+    /** Add files (validates type, size, count) */
+    addFiles(files: Array<{
+        name: string;
+        size: number;
+        type: string;
+    }>): void;
+    /** Remove a file by ID */
+    removeFile(id: string): void;
+    /** Update a file's progress */
+    updateProgress(id: string, progress: number): void;
+    /** Set a file's status */
+    setStatus(id: string, status: FileStatus, error?: string): void;
+    /** ARIA props for the drop zone */
+    dropZoneProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA props for the file input */
+    inputProps: Record<string, unknown>;
+    /** Drag event handlers (for headless use) */
+    dragHandlers: {
+        onDragEnter(): void;
+        onDragLeave(): void;
+        onDragOver(): void;
+        onDrop(): void;
+    };
+    /** Generated IDs */
+    ids: {
+        dropZone: string;
+        input: string;
+        label: string;
+        fileList: string;
+    };
+}
+declare function formatFileSize(bytes: number): string;
+declare function createFileUpload(props?: FileUploadProps): FileUploadAPI;
+
+declare const fileUploadDropZoneVariants: (props?: ({
+    state?: "idle" | "dragging" | "disabled" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const fileUploadFileListStyles = "mt-4 space-y-2";
+declare const fileUploadFileItemStyles = "flex items-center gap-3 rounded-md border p-3 text-sm";
+declare const fileUploadProgressStyles = "h-1.5 w-full rounded-full bg-secondary overflow-hidden";
+declare const fileUploadProgressBarStyles = "h-full rounded-full bg-primary transition-all duration-300";
+declare const fileUploadRemoveButtonStyles = "ml-auto text-muted-foreground hover:text-foreground cursor-pointer";
+
+export { type FileEntry, type FileStatus, type FileUploadAPI, type FileUploadError, type FileUploadProps, type FileUploadState, createFileUpload, fileUploadDropZoneVariants, fileUploadFileItemStyles, fileUploadFileListStyles, fileUploadProgressBarStyles, fileUploadProgressStyles, fileUploadRemoveButtonStyles, formatFileSize };

package/dist/internal/file-upload/index.d.ts

@@ -0,0 +1,91 @@
+import { AccessibilityProps } from '../shared/index.js';
+
+type FileStatus = 'pending' | 'uploading' | 'complete' | 'error';
+interface FileEntry {
+    /** Unique ID for this file entry */
+    id: string;
+    /** Original file name */
+    name: string;
+    /** File size in bytes */
+    size: number;
+    /** MIME type */
+    type: string;
+    /** Upload progress 0-100 */
+    progress: number;
+    /** Current status */
+    status: FileStatus;
+    /** Error message if status is 'error' */
+    error?: string;
+}
+interface FileUploadProps {
+    /** Accepted file types (e.g., 'image/*,.pdf') */
+    accept?: string;
+    /** Max file size in bytes */
+    maxSize?: number;
+    /** Max number of files */
+    maxFiles?: number;
+    /** Allow multiple file selection */
+    multiple?: boolean;
+    /** Callback when files are selected/added */
+    onFilesSelected?: (files: FileEntry[]) => void;
+    /** Callback when a validation error occurs */
+    onError?: (errors: FileUploadError[]) => void;
+}
+interface FileUploadError {
+    file: string;
+    code: 'type' | 'size' | 'count';
+    message: string;
+}
+interface FileUploadState {
+    files: FileEntry[];
+    isDragging: boolean;
+}
+interface FileUploadAPI {
+    /** Current state */
+    state: FileUploadState;
+    /** Add files (validates type, size, count) */
+    addFiles(files: Array<{
+        name: string;
+        size: number;
+        type: string;
+    }>): void;
+    /** Remove a file by ID */
+    removeFile(id: string): void;
+    /** Update a file's progress */
+    updateProgress(id: string, progress: number): void;
+    /** Set a file's status */
+    setStatus(id: string, status: FileStatus, error?: string): void;
+    /** ARIA props for the drop zone */
+    dropZoneProps: Partial<AccessibilityProps> & Record<string, unknown>;
+    /** ARIA props for the file input */
+    inputProps: Record<string, unknown>;
+    /** Drag event handlers (for headless use) */
+    dragHandlers: {
+        onDragEnter(): void;
+        onDragLeave(): void;
+        onDragOver(): void;
+        onDrop(): void;
+    };
+    /** Generated IDs */
+    ids: {
+        dropZone: string;
+        input: string;
+        label: string;
+        fileList: string;
+    };
+}
+declare function formatFileSize(bytes: number): string;
+declare function createFileUpload(props?: FileUploadProps): FileUploadAPI;
+
+declare const fileUploadDropZoneVariants: (props?: ({
+    state?: "idle" | "dragging" | "disabled" | undefined;
+} & {
+    className?: string;
+}) | undefined) => string;
+declare const fileUploadFileListStyles = "mt-4 space-y-2";
+declare const fileUploadFileItemStyles = "flex items-center gap-3 rounded-md border p-3 text-sm";
+declare const fileUploadProgressStyles = "h-1.5 w-full rounded-full bg-secondary overflow-hidden";
+declare const fileUploadProgressBarStyles = "h-full rounded-full bg-primary transition-all duration-300";
+declare const fileUploadRemoveButtonStyles = "ml-auto text-muted-foreground hover:text-foreground cursor-pointer";
+
+export { type FileEntry, type FileStatus, type FileUploadAPI, type FileUploadError, type FileUploadProps, type FileUploadState, createFileUpload, fileUploadDropZoneVariants, fileUploadFileItemStyles, fileUploadFileListStyles, fileUploadProgressBarStyles, fileUploadProgressStyles, fileUploadRemoveButtonStyles, formatFileSize };