bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
53 lines • 1.86 kB
TypeScript
export interface DropZoneProps {
onDrop?: (files: FileList) => void;
onFileSelect?: (file: File) => void;
accept?: string;
multiple?: boolean;
disabled?: boolean;
loading?: boolean;
className?: string;
height?: string | number;
icon?: React.ReactNode;
title?: string;
description?: string;
loadingText?: string;
dragActiveText?: string;
dragActiveDescription?: string;
maxSize?: number;
onError?: (error: string) => void;
size?: "sm" | "default" | "lg";
}
/**
* DropZone - Standardized drag & drop component with consistent styling
*
* Features:
* - Beautiful dashed border styling with CSS variables
* - Radix icons for consistent theming
* - Drag states with visual feedback
* - File validation and error handling
* - Fully accessible with keyboard support
* - Customizable content and styling
*
* @example
* ```tsx
* // Basic file upload
* <DropZone
* accept=".json,.txt"
* onFileSelect={(file) => processFile(file)}
* title="Import Backup"
* description="Drag & drop your backup file here"
* />
*
* // Custom data drop zone
* <DropZone
* icon={<TokensIcon />}
* title="Add Transaction Data"
* description="Drop your transaction files"
* height={200}
* />
* ```
*/
export declare function DropZone({ onDrop, onFileSelect, accept, multiple, disabled, loading, className, height, icon, title, description, loadingText, dragActiveText, dragActiveDescription, maxSize, onError, size, }: DropZoneProps): import("react/jsx-runtime").JSX.Element;
export declare const FileDropZone: (props: Omit<DropZoneProps, "icon" | "title">) => import("react/jsx-runtime").JSX.Element;
export declare const BackupDropZone: (props: Omit<DropZoneProps, "icon" | "title" | "accept">) => import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=DropZone.d.ts.map