{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"file-dropzone","type":"registry:ui","title":"File Dropzone","description":"Drop files or browse for them, with type, size and count checks and a list of what was picked.","dependencies":["lucide-react"],"registryDependencies":["https://dashral.com/r/utils.json","https://dashral.com/r/lib-files.json","https://dashral.com/r/lib-locale.json","https://dashral.com/r/field.json"],"files":[{"path":"registry/dashral/file-dropzone.tsx","type":"registry:file","target":"components/dashral/file-dropzone.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { UploadCloudIcon, XIcon } from \"lucide-react\"\n\nimport { acceptLabel, accepts, FileThumb, formatBytes } from \"./lib/files\"\nimport { useLocale } from \"./lib/locale\"\nimport { cn } from \"./lib/utils\"\nimport { FieldWrapper, joinIds, splitFieldProps, useFieldControl, type FieldClassNames, type FieldControlProps, type FieldOwnProps } from \"./field\"\n\ntype FileDropzoneProps = FieldOwnProps & {\n /** Controlled list of files. Omit it (and use defaultValue) for an uncontrolled dropzone. */\n value?: File[]\n defaultValue?: File[]\n onValueChange?: (files: File[]) => void\n /** Like the `accept` attribute: \"image/*\", \".pdf,.docx\", \"image/png,image/jpeg\". */\n accept?: string\n multiple?: boolean\n maxFiles?: number\n /** Largest file, in bytes. */\n maxSize?: number\n disabled?: boolean\n required?: boolean\n /** The main line inside the drop area, e.g. \"Drop your logo here\". */\n title?: React.ReactNode\n /** false hides the list of picked files, to show your own (e.g. with upload progress). */\n showFiles?: boolean\n /** The line under it, inside the drop area; by default it says what's accepted and how big. */\n hint?: React.ReactNode\n id?: string\n name?: string\n /** Classes for the drop area and the list of files under it. */\n className?: string\n \"aria-invalid\"?: React.AriaAttributes[\"aria-invalid\"]\n classNames?: FieldClassNames & { dropzone?: string; files?: string }\n}\n\n/**\n * Drop files on it, or click (or press Enter / Space) to pick them. Checks type, size and count in the browser and\n * says what it turned down; the files themselves go wherever `onValueChange` sends them.\n */\nfunction FileDropzone(props: FileDropzoneProps) {\n const [field, { required: _required, ...control }] = splitFieldProps(props)\n return (\n \n \n \n )\n}\n\nfunction FileDropzoneControl({\n value,\n defaultValue = [],\n onValueChange,\n accept,\n multiple = true,\n maxFiles,\n maxSize,\n title,\n hint: hintProp,\n showFiles = true,\n classNames,\n name,\n className,\n ...rest\n}: Omit) {\n const { id, disabled, ...aria } = useFieldControl({ id: rest.id, disabled: rest.disabled, \"aria-invalid\": rest[\"aria-invalid\"] })\n const { t, locale } = useLocale()\n const [internal, setInternal] = React.useState(defaultValue)\n const files = value ?? internal\n const [dragging, setDragging] = React.useState(false)\n const [errors, setErrors] = React.useState([])\n const inputRef = React.useRef(null)\n const hintId = React.useId()\n const limit = multiple ? (maxFiles ?? Infinity) : 1\n\n function set(next: File[]) {\n if (value === undefined) setInternal(next)\n onValueChange?.(next)\n }\n\n function add(list: FileList | null) {\n if (!list || disabled) return\n const problems: string[] = []\n // One file at a time replaces the current one; otherwise new files are added up to the limit.\n let next = multiple ? [...files] : []\n for (const file of Array.from(list)) {\n if (!accepts(file, accept)) problems.push(t(\"fileType\", { name: file.name }))\n else if (maxSize !== undefined && file.size > maxSize) problems.push(t(\"fileSize\", { name: file.name, size: formatBytes(maxSize, locale) }))\n else if (next.length >= limit) problems.push(t(\"fileLimit\", { name: file.name, count: limit }))\n else if (!next.some((f) => f.name === file.name && f.size === file.size)) next = [...next, file]\n }\n setErrors(problems)\n set(next)\n }\n\n const hint =\n hintProp ??\n [accept && acceptLabel(accept, t), maxSize && t(\"upToSize\", { size: formatBytes(maxSize, locale) }), multiple && maxFiles && t(\"filesMax\", { count: maxFiles })].filter(Boolean).join(\" ยท \")\n\n return (\n