4e: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"] 4f: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"] 50:T1492,import { useCallback, useId, useRef, useState } from 'react' export interface FileWithPreview { id: string file: File preview?: string } export interface UseFileUploadOptions { accept?: string maxSize?: number maxFiles?: number onUpload?: (file: File) => Promise | void } export interface UseFileUploadReturn { files: FileWithPreview[] errors: string[] isDragging: boolean removeFile: (id: string) => void openFileDialog: () => void getInputProps: () => { ref: React.RefObject type: 'file' id: string accept?: string multiple: boolean onChange: (event: React.ChangeEvent) => Promise } handleDragEnter: (e: React.DragEvent) => void handleDragLeave: (e: React.DragEvent) => void handleDragOver: (e: React.DragEvent) => void handleDrop: (e: React.DragEvent) => void } export function useFileUpload( options: UseFileUploadOptions = {} ): UseFileUploadReturn { const { accept, maxSize, maxFiles = 1, onUpload } = options const id = useId() const inputRef = useRef(null) const dragCounterRef = useRef(0) const [files, setFiles] = useState([]) const [errors, setErrors] = useState([]) const [isDragging, setIsDragging] = useState(false) const validateFile = useCallback( (file: File): string | null => { if (accept) { const acceptedTypes = accept.split(',').map((t) => t.trim()) const fileType = file.type const isAccepted = acceptedTypes.some((type) => { if (type.endsWith('/*')) { return fileType.startsWith(type.replace('/*', '')) } return fileType === type }) if (!isAccepted) { return `File type not accepted. Allowed: ${accept}` } } if (maxSize && file.size > maxSize) { const maxSizeMB = (maxSize / (1024 * 1024)).toFixed(1) return `File too large. Max size: ${maxSizeMB}MB` } return null }, [accept, maxSize] ) const createPreview = useCallback( (file: File): Promise => { return new Promise((resolve) => { if (file.type.startsWith('image/')) { const reader = new FileReader() reader.onloadend = () => resolve(reader.result as string) reader.onerror = () => resolve(undefined) reader.readAsDataURL(file) } else { resolve(undefined) } }) }, [] ) const processFiles = useCallback( async (fileList: FileList | File[]) => { const filesArray = Array.from(fileList) const newErrors: string[] = [] const validFiles: FileWithPreview[] = [] for (const file of filesArray) { const error = validateFile(file) if (error) { newErrors.push(error) continue } const preview = await createPreview(file) validFiles.push({ id: `${Date.now()}-${Math.random()}`, file, preview, }) if (onUpload) { await onUpload(file) } } setErrors(newErrors) setFiles((prev) => { const combined = [...prev, ...validFiles] return combined.slice(0, maxFiles) }) }, [validateFile, createPreview, onUpload, maxFiles] ) const removeFile = useCallback((fileId: string) => { setFiles((prev) => prev.filter((f) => f.id !== fileId)) }, []) const openFileDialog = useCallback(() => { inputRef.current?.click() }, []) const handleFileChange = useCallback( async (event: React.ChangeEvent) => { const fileList = event.target.files if (fileList && fileList.length > 0) { await processFiles(fileList) } event.target.value = '' }, [processFiles] ) const getInputProps = useCallback(() => { return { ref: inputRef, type: 'file' as const, id: `${id}-file-input`, accept, multiple: maxFiles > 1, onChange: handleFileChange, } }, [id, accept, maxFiles, handleFileChange]) const handleDragEnter = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() dragCounterRef.current++ if (e.dataTransfer.items && e.dataTransfer.items.length > 0) { setIsDragging(true) } }, []) const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() dragCounterRef.current-- if (dragCounterRef.current === 0) { setIsDragging(false) } }, []) const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault() e.stopPropagation() }, []) const handleDrop = useCallback( async (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(false) dragCounterRef.current = 0 const fileList = e.dataTransfer.files if (fileList && fileList.length > 0) { await processFiles(fileList) } }, [processFiles] ) return { files, errors, isDragging, removeFile, openFileDialog, getInputProps, handleDragEnter, handleDragLeave, handleDragOver, handleDrop, } } 4d:["$","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":[null,["$","$L4e",null,{"namespace":"@joyco","registryDependencies":["@joyco/button"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/components/file-button.tsx","content":"'use client'\nimport { Button } from '@/components/ui/button'\nimport { useFileUpload } from '@/registry/hooks/use-file-upload'\n\nexport interface FileInputProps {\n onUpload: (file: File) => Promise | void\n inputProps?: React.InputHTMLAttributes\n}\n\nexport const FileInputButton = (\n props: FileInputProps & React.ComponentProps\n) => {\n const { inputProps, onUpload, children, ...buttonProps } = props\n const { openFileDialog, getInputProps } = useFileUpload({ onUpload })\n\n return (\n \n )\n}\n","type":"registry:component"},{"path":"registry/hooks/use-file-upload.tsx","content":"$50","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]