50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T32d6,/* eslint-disable react-refresh/only-export-components */ import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' import { Progress } from '@/components/ui/progress' import { Spinner } from '@/components/ui/spinner' import { Upload, X, File, Image, FileText, FileCode, FileAudio, FileVideo } from 'lucide-react' // Types export interface FileRejection { file: File errors: Array<{ code: string; message: string }> } export interface DropzoneState { isDragging: boolean isDisabled: boolean acceptedFiles: File[] rejectedFiles: FileRejection[] reset: () => void } // Variants const dropzoneVariants = cva( 'relative flex flex-col items-center justify-center border-3 border-dashed border-foreground transition duration-200 cursor-pointer', { variants: { state: { idle: 'bg-background hover:bg-muted/30 shadow-[4px_4px_0px_hsl(var(--shadow-color))] hover:shadow-[6px_6px_0px_hsl(var(--shadow-color))] hover:translate-x-[-2px] hover:translate-y-[-2px]', dragging: 'border-solid border-primary bg-primary/10 scale-[1.02] shadow-[8px_8px_0px_hsl(var(--primary))]', disabled: 'opacity-50 cursor-not-allowed shadow-none', }, variant: { default: 'p-8', compact: 'p-6', minimal: 'p-3 border-2', }, }, defaultVariants: { state: 'idle', variant: 'default', }, } ) // Dropzone Props export interface DropzoneProps extends Omit, 'children'>, VariantProps { onFilesAccepted: (files: File[]) => void onFilesRejected?: (files: FileRejection[]) => void accept?: Record maxSize?: number maxFiles?: number disabled?: boolean children?: React.ReactNode | ((state: DropzoneState) => React.ReactNode) } const Dropzone = React.forwardRef( ( { onFilesAccepted, onFilesRejected, accept, maxSize = 10 * 1024 * 1024, // 10MB default maxFiles = 10, disabled = false, variant, className, children, ...props }, ref ) => { const [isDragging, setIsDragging] = React.useState(false) const [isFocused, setIsFocused] = React.useState(false) const [acceptedFiles, setAcceptedFiles] = React.useState([]) const [rejectedFiles, setRejectedFiles] = React.useState([]) const inputRef = React.useRef(null) const reset = React.useCallback(() => { setAcceptedFiles([]) setRejectedFiles([]) if (inputRef.current) inputRef.current.value = '' }, []) const state: DropzoneState = { isDragging, isDisabled: disabled, acceptedFiles, rejectedFiles, reset, } const stateVariant = disabled ? 'disabled' : isDragging ? 'dragging' : 'idle' // Validate file const validateFile = (file: File): FileRejection | null => { const errors: Array<{ code: string; message: string }> = [] // Check file size if (file.size > maxSize) { errors.push({ code: 'file-too-large', message: `File is larger than ${formatBytes(maxSize)}`, }) } // Check file type if (accept) { const acceptedTypes = Object.entries(accept).flatMap(([mimeType, extensions]) => { return [mimeType, ...extensions] }) const fileType = file.type const fileExtension = `.${file.name.split('.').pop()?.toLowerCase()}` const isAccepted = acceptedTypes.some((type) => { if (type.startsWith('.')) { return fileExtension === type.toLowerCase() } if (type.endsWith('/*')) { return fileType.startsWith(type.replace('/*', '/')) } return fileType === type }) if (!isAccepted) { errors.push({ code: 'file-invalid-type', message: 'File type not accepted', }) } } return errors.length > 0 ? { file, errors } : null } // Process files const processFiles = (fileList: FileList | null) => { if (!fileList || disabled) return const allFiles = Array.from(fileList) const accepted: File[] = [] const rejected: FileRejection[] = [] allFiles.forEach((file) => { const rejection = validateFile(file) if (rejection) { rejected.push(rejection) } else if (accepted.length >= maxFiles) { rejected.push({ file, errors: [{ code: 'too-many-files', message: `Too many files. Maximum is ${maxFiles}.` }], }) } else { accepted.push(file) } }) setAcceptedFiles(accepted) setRejectedFiles(rejected) if (accepted.length > 0) { onFilesAccepted(accepted) } if (rejected.length > 0) { onFilesRejected?.(rejected) } } // Event handlers const handleDragEnter = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() if (!disabled) { setIsDragging(true) } } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() // dragleave also fires when the cursor moves onto a child element; only // clear the highlight when the pointer actually leaves the dropzone. if (e.relatedTarget && e.currentTarget.contains(e.relatedTarget as Node)) { return } setIsDragging(false) } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() } const handleDrop = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(false) processFiles(e.dataTransfer.files) } const handleClick = () => { if (!disabled) { inputRef.current?.click() } } const handleKeyDown = (e: React.KeyboardEvent) => { if (!disabled && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault() inputRef.current?.click() } } const handleFocus = () => setIsFocused(true) const handleBlur = () => setIsFocused(false) const handleInputChange = (e: React.ChangeEvent) => { processFiles(e.target.files) e.target.value = '' } // Build accept string for input const acceptString = accept ? Object.entries(accept) .flatMap(([mimeType, extensions]) => [mimeType, ...extensions]) .join(',') : undefined return (

1} disabled={disabled} onChange={handleInputChange} className="hidden" /> {/* `state` is built entirely from useState values (isDragging, acceptedFiles, rejectedFiles) plus a useCallback — no ref is involved; the rule mis-flags the render-prop call. */} {typeof children === 'function' ? ( // eslint-disable-next-line react-hooks/refs children(state) ) : children ? ( children ) : ( )}

) } ) Dropzone.displayName = 'Dropzone' // Default content function DefaultDropzoneContent({ isDragging, variant, }: { isDragging: boolean variant: DropzoneProps['variant'] }) { return (

{variant !== 'minimal' && ( <>

{isDragging ? 'Drop files here' : 'Drag & drop files'}

or click to browse

)}

) } // File List Component export interface FileListProps extends React.HTMLAttributes { files: Array<{ file: File progress?: number error?: string uploading?: boolean }> onRemove?: (file: File) => void } const FileList = React.forwardRef( ({ files, onRemove, className, ...props }, ref) => { if (files.length === 0) return null return (

{files.map((item, index) => ( onRemove(item.file) : undefined} /> ))}

) } ) FileList.displayName = 'FileList' // File List Item interface FileListItemProps { file: File progress?: number error?: string uploading?: boolean onRemove?: () => void } function FileListItem({ file, progress, error, uploading, onRemove }: FileListItemProps) { const Icon = getFileIcon(file.type) return (

{/* getFileIcon is a lookup returning one of seven module-level lucide icons, not a factory — no component is created here. */} {/* eslint-disable-next-line react-hooks/static-components */}

{file.name}

{formatBytes(file.size)}

{error &&

{error}

} {uploading && progress !== undefined && ( )}

{uploading ? ( ) : onRemove ? ( // Icon-only, so it needs a name that says WHICH file: with N files // there would otherwise be N identically anonymous "button"s. ) : null}

) } // Helpers function formatBytes(bytes: number): string { if (bytes === 0) return '0 Bytes' const k = 1024 const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'] const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1) return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i] } function getFileIcon(mimeType: string) { if (mimeType.startsWith('image/')) return Image if (mimeType.startsWith('video/')) return FileVideo if (mimeType.startsWith('audio/')) return FileAudio if (mimeType.includes('pdf') || mimeType.includes('document')) return FileText if (mimeType.includes('code') || mimeType.includes('javascript') || mimeType.includes('json')) return FileCode return File } export { Dropzone, FileList, dropzoneVariants } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@boldkit","registryDependencies":["@boldkit/utils","@boldkit/progress","@boldkit/spinner"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/dropzone.tsx","content":"$52","type":"registry:ui","target":"components/ui/dropzone.tsx"}],"className":"h-[70svh] min-h-80"}]]}]