4f: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"] 50: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"] 51:Tbcfd,"use client" import * as React from "react" import { mergeProps } from "@base-ui-components/react/merge-props" import { useRender } from "@base-ui-components/react/use-render" import { CircleCheck as CircleCheckIcon, File as FileGlyph, FileSpreadsheet as SpreadsheetGlyph, FileText as DocumentGlyph, LoaderCircle as LoaderCircleIcon, Plus as PlusIcon, TriangleAlert as TriangleAlertIcon, Upload as UploadIcon, X as CloseIcon, } from "honestui/icons" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Progress, ProgressIndicator, ProgressTrack, } from "@/components/ui/progress" import { FileUploadControllerContext, useFileUploadController, } from "./file-upload-context" import type { FileUploadAccept, FileUploadControllerValue, FileUploadDragState, FileUploadFocusTarget, FileUploadItem, FileUploadPartProps, FileUploadRejection, FileUploadStatus, } from "./file-upload-types" import { checkFileAgainstRules, createFileUploadId, formatFileSize, getFileExtension, toInputAcceptAttribute, } from "./file-upload-utils" /** * Shared item data type, published here as FileUploadItemData because the * composed row component owns the FileUploadItem name. */ export type { FileUploadAccept, FileUploadControllerValue, FileUploadDragState, FileUploadFocusTarget, FileUploadInputAttributes, FileUploadItem as FileUploadItemData, FileUploadPartProps, FileUploadRejection, FileUploadStatus, } from "./file-upload-types" /** True when a drag carrying `draggedCount` files cannot fit what is chosen. */ function exceedsRemainingCapacity( draggedCount: number, selectedCount: number, options: { multiple: boolean; maxFiles?: number } ) { if (!options.multiple) { return draggedCount > 1 } if (options.maxFiles === undefined) { return false } return draggedCount > Math.max(0, options.maxFiles - selectedCount) } function countDraggedFiles(dataTransfer: DataTransfer | null | undefined) { if (!dataTransfer) return 0 return Array.from(dataTransfer.items).filter((item) => item.kind === "file").length } function describeRejections(rejections: FileUploadRejection[]) { if (rejections.length === 0) return null return rejections.length === 1 ? `${rejections[0].file.name} rejected. ${rejections[0].reason}` : `${rejections.length} files rejected. ${rejections[0].reason}` } export interface FileUploadProps extends Omit, "defaultValue" | "onChange"> { /** Files owned by your application, each carrying its upload state. */ value?: FileUploadItem[] | undefined defaultValue?: FileUploadItem[] | undefined onValueChange?: ((items: FileUploadItem[]) => void) | undefined /** * MIME-to-extension pairs such as `{"image/png": [".png"]}`, or an HTML * accept string. This filters the picker and drives rejection reasons. */ accept?: FileUploadAccept | undefined multiple?: boolean maxFiles?: number /** In bytes; reasons quote the limit back with human units. */ maxSize?: number minSize?: number disabled?: boolean /** Runs after rules pass and files join the selection. */ onAccept?: ((items: FileUploadItem[]) => void) | undefined /** Runs once per selection with every rejected file and its reason. */ onReject?: ((rejections: FileUploadRejection[]) => void) | undefined onRemove?: ((item: FileUploadItem) => void) | undefined /** Your application starts the new request; Retry only reports intent. */ onRetry?: ((item: FileUploadItem) => void) | undefined validateFile?: ((file: File) => string | null) | undefined /** Reads pasted files while focus stays inside this uploader. */ allowPaste?: boolean /** Lets pickers choose folders. Support varies by browser; test yours. */ directory?: boolean capture?: "user" | "environment" } function FileUpload({ value: valueProp, defaultValue = [], onValueChange, accept, multiple = false, maxFiles, maxSize, minSize, disabled = false, onAccept, onReject, onRemove, onRetry, validateFile, allowPaste = false, directory = false, capture, className, children, ...rootProps }: FileUploadProps) { const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue) const isControlled = valueProp !== undefined const value = isControlled ? valueProp : uncontrolledValue const [rejections, setRejections] = React.useState([]) const [dragState, setDragState] = React.useState("idle") const [selectionError, setSelectionError] = React.useState(null) const [announcement, setAnnouncement] = React.useState(null) const [focusRequest, setFocusRequest] = React.useState<{ target: FileUploadFocusTarget nonce: number } | null>(null) const inputRef = React.useRef(null) const rootRef = React.useRef(null) const openerRef = React.useRef(null) const dragDepthRef = React.useRef(0) const focusNonceRef = React.useRef(0) const previousStatusesRef = React.useRef< Map | undefined >(undefined) // One polite region whose text swaps; content changes re-trigger reads. const announce = React.useCallback((message: string) => { setAnnouncement(message === "" ? "\u200b" : message) }, []) const setValue = React.useCallback( (nextItems: FileUploadItem[]) => { if (!isControlled) { setUncontrolledValue(nextItems) } onValueChange?.(nextItems) }, [isControlled, onValueChange] ) // Single mode always allows opening the picker again: Replace counts as a // legitimate reason to open it, only multiple mode has a hard ceiling. const maxFilesReached = maxFiles !== undefined && value.length >= maxFiles const canAddMore = !disabled && (multiple ? !maxFilesReached : true) const openPicker = React.useCallback(() => { if (disabled) return inputRef.current?.click() }, [disabled]) const activateFrom = React.useCallback( (element: HTMLElement) => { openerRef.current = element openPicker() }, [openPicker] ) const rememberDropzoneTrigger = React.useCallback((element: HTMLElement | null) => { openerRef.current = element }, []) const requestFocus = React.useCallback((target: FileUploadFocusTarget) => { focusNonceRef.current += 1 setFocusRequest({ target, nonce: focusNonceRef.current }) }, []) React.useEffect(() => { if (focusRequest?.target.kind !== "fallback" || disabled) return const fallback = rootRef.current?.querySelector( '[data-slot="file-upload-trigger"]:not(:disabled), [data-slot="file-upload-dropzone"]:not(:disabled)' ) fallback?.focus() }, [disabled, focusRequest]) React.useEffect(() => { const nextStatuses = new Map( value.map((item) => [item.id, item.status] as const) ) const previousStatuses = previousStatusesRef.current previousStatusesRef.current = nextStatuses if (!previousStatuses) return const messages = value.flatMap((item) => { if (previousStatuses.get(item.id) === item.status) return [] if (item.status === "success") { return [`${item.file.name} uploaded.`] } if (item.status === "error") { const reason = item.error ?.replace(/^upload failed\.?\s*/i, "") .trim() return [ `${item.file.name} upload failed.${reason ? ` ${reason}` : ""}`, ] } return [] }) if (messages.length > 0) { announce(messages.join(" ")) } }, [announce, value]) const batchLimitMessage = React.useCallback( () => `You can upload up to ${maxFiles} ${ maxFiles === 1 ? "file" : "files" }. Remove a file before adding another.`, [maxFiles] ) /** Rejects a whole batch, keeping whatever was already selected intact. */ const rejectBatch = React.useCallback( (files: File[], message: string) => { const rejected = files.map((file) => ({ id: createFileUploadId("rejected"), file, reason: message, })) setSelectionError(message) setRejections((current) => [...current, ...rejected]) onReject?.(rejected) announce(message) }, [announce, onReject] ) /** * Single mode takes one file; extra files in the same gesture explain why * they were left out instead of disappearing. */ const acceptSingleFile = React.useCallback( (files: File[]) => { const checks = { accept, minSize, maxSize, validateFile } const [first] = files let rejectionMessage: string | null = null if (!first) return const result = checkFileAgainstRules(first, checks) if (!result.valid) { rejectBatch([first], result.reason ?? "This file could not be added.") return } if (files.length > 1) { const extras = files.slice(1).map((file) => ({ id: createFileUploadId("rejected"), file, reason: "Only one file can be added here. Replace the current selection.", })) setRejections((current) => [...current, ...extras]) onReject?.(extras) rejectionMessage = describeRejections(extras) } const accepted = { id: createFileUploadId("file"), file: first, status: "pending" as const, } setValue([accepted]) onAccept?.([accepted]) announce( [`${first.name} added.`, rejectionMessage] .filter(Boolean) .join(" ") ) }, [accept, announce, maxSize, minSize, onAccept, onReject, rejectBatch, setValue, validateFile] ) const acceptMultipleFiles = React.useCallback( (files: File[]) => { const checks = { accept, minSize, maxSize, validateFile } const accepted: FileUploadItem[] = [] const rejected: FileUploadRejection[] = [] for (const file of files) { const result = checkFileAgainstRules(file, checks) if (result.valid) { accepted.push({ id: createFileUploadId("file"), file, status: "pending", }) } else { rejected.push({ id: createFileUploadId("rejected"), file, reason: result.reason ?? "This file could not be added.", }) } } const rejectionMessage = describeRejections(rejected) if (rejected.length > 0) { setRejections((current) => [...current, ...rejected]) onReject?.(rejected) } if (accepted.length === 0) { if (rejectionMessage) announce(rejectionMessage) return } setValue([...value, ...accepted]) onAccept?.(accepted) const acceptedMessage = accepted.length === 1 ? `${accepted[0].file.name} added.` : `${accepted.length} files added.` announce([acceptedMessage, rejectionMessage].filter(Boolean).join(" ")) }, [ accept, announce, maxSize, minSize, onAccept, onReject, setValue, validateFile, value, ] ) /** Shared entry point behind the picker, drops, and pastes. */ const selectFiles = React.useCallback( (incoming: FileList | File[] | null | undefined) => { const files = Array.from(incoming ?? []) setSelectionError(null) if (files.length === 0) return if (!multiple) { // Drops count as Replace here, matching the visible Replace action. acceptSingleFile(files) return } const remaining = maxFiles === undefined ? Number.POSITIVE_INFINITY : maxFiles - value.length if (remaining <= 0 || files.length > remaining) { // Whole batch stays out; partial acceptance hides the real limit. rejectBatch(files, batchLimitMessage()) return } acceptMultipleFiles(files) }, [ acceptMultipleFiles, acceptSingleFile, batchLimitMessage, maxFiles, multiple, rejectBatch, value.length, ] ) const removeItems = React.useCallback( (itemIds: string[], focusAfter = true) => { if (itemIds.length === 0) return const firstRemovedIndex = value.findIndex((entry) => itemIds.includes(entry.id) ) const nextValue = value.filter((entry) => !itemIds.includes(entry.id)) setSelectionError(null) setValue(nextValue) for (const entry of value) { if (itemIds.includes(entry.id)) { onRemove?.(entry) } } if (focusAfter && itemIds.length === 1 && firstRemovedIndex >= 0) { const neighbor = nextValue[firstRemovedIndex] ?? nextValue[firstRemovedIndex - 1] requestFocus( neighbor ? { kind: "item-remove", itemId: neighbor.id } : { kind: "fallback" } ) } }, [onRemove, requestFocus, setValue, value] ) const removeItem = React.useCallback( (itemId: string) => removeItems([itemId]), [removeItems] ) const clearAll = React.useCallback( () => { removeItems( value.map((item) => item.id), false ) requestFocus({ kind: "fallback" }) }, [removeItems, requestFocus, value] ) const removeRejection = React.useCallback( (rejectionId: string) => { const removedIndex = rejections.findIndex( (entry) => entry.id === rejectionId ) const nextRejections = rejections.filter( (entry) => entry.id !== rejectionId ) const neighbor = nextRejections[removedIndex] ?? nextRejections[removedIndex - 1] setRejections(nextRejections) if (nextRejections.length === 0) { setSelectionError(null) } if (neighbor) { requestFocus({ kind: "rejection-remove", rejectionId: neighbor.id, }) return } const selectedItem = value.at(-1) requestFocus( selectedItem ? { kind: "item-remove", itemId: selectedItem.id } : { kind: "fallback" } ) }, [rejections, requestFocus, value] ) const retryItem = React.useCallback( (item: FileUploadItem) => { onRetry?.(item) }, [onRetry] ) // Paste stays scoped to this uploader so other fields keep theirs. React.useEffect(() => { if (!allowPaste) return function handlePaste(event: ClipboardEvent) { if (!rootRef.current || disabled) return if (!rootRef.current.contains(document.activeElement)) return const files = event.clipboardData?.files if (files && files.length > 0) { event.preventDefault() selectFiles(files) } } document.addEventListener("paste", handlePaste) return () => document.removeEventListener("paste", handlePaste) }, [allowPaste, disabled, selectFiles]) const controllerValue = React.useMemo( () => ({ value, rejections, dragState, disabled, multiple, canAddMore, canRetry: onRetry !== undefined, selectionError, focusRequest, inputProps: { accept: toInputAcceptAttribute(accept), capture, multiple, ...(directory ? ({ webkitdirectory: "" } as const) : {}), }, openPicker, activateFrom, removeItem, removeRejection, clearAll, retryItem, rememberDropzoneTrigger, requestFocus, beginDrag(draggedCount) { if (disabled) return dragDepthRef.current += 1 const invalid = exceedsRemainingCapacity(draggedCount, value.length, { multiple, maxFiles, }) setDragState(invalid ? "invalid" : "valid") if (invalid) { // Visible copy flips alongside; the region catches screen readers. announce(batchLimitMessage()) } }, refreshDragValidity(draggedCount) { if (disabled) return setDragState( exceedsRemainingCapacity(draggedCount, value.length, { multiple, maxFiles, }) ? "invalid" : "valid" ) }, endDrag() { dragDepthRef.current = Math.max(0, dragDepthRef.current - 1) if (dragDepthRef.current === 0) { setDragState("idle") } }, cancelDrag() { dragDepthRef.current = 0 setDragState("idle") }, completeDrag(files) { dragDepthRef.current = 0 setDragState("idle") selectFiles(files) }, announce, }), [ accept, activateFrom, announce, batchLimitMessage, canAddMore, capture, clearAll, directory, disabled, dragState, focusRequest, maxFiles, multiple, openPicker, onRetry, rejections, rememberDropzoneTrigger, removeItem, removeRejection, requestFocus, retryItem, selectFiles, selectionError, value, ] ) return (

{children} { selectFiles(event.target.files) event.target.value = "" const opener = openerRef.current if (opener?.isConnected) { opener.focus() openerRef.current = null } }} />

{announcement}

) } /* -------------------------------------------------------------------------- */ /* Dropzone */ /* -------------------------------------------------------------------------- */ export interface FileUploadDropzoneProps extends React.ComponentProps<"button"> { /** Styles the layout wrapper that also holds the selection error. */ wrapperClassName?: string } /** * Clicking anywhere here opens the picker; Enter and Space do the same * through real button semantics. Child content joins the accessible name, * so keep the instruction inside rather than wiring extra labels. */ function FileUploadDropzone({ className, wrapperClassName, children, onClick, onDragEnter, onDragLeave, onDragOver, onDrop, disabled: disabledProp, "aria-describedby": describedByProp, ...props }: FileUploadDropzoneProps) { const controller = useFileUploadController("FileUploadDropzone") const buttonRef = React.useRef(null) const selectionErrorId = React.useId() const disabled = controller.disabled || disabledProp const describedBy = [ describedByProp, controller.selectionError ? selectionErrorId : undefined, ] .filter(Boolean) .join(" ") || undefined React.useEffect(() => { controller.rememberDropzoneTrigger(buttonRef.current) return () => controller.rememberDropzoneTrigger(null) // Registration follows mount/unmount; controller identity churn is noise. // eslint-disable-next-line react-hooks/exhaustive-deps }, []) React.useEffect(() => { if (controller.focusRequest?.target.kind !== "dropzone") return if (disabled) return buttonRef.current?.focus() }, [controller.focusRequest, disabled]) return (

{controller.selectionError ? (

{controller.selectionError}

) : null}

) } /* -------------------------------------------------------------------------- */ /* Dropzone content */ /* -------------------------------------------------------------------------- */ export type FileUploadIconProps = React.ComponentProps /** Small upload arrow; tint follows the active drag state. */ function FileUploadIcon({ className, ...props }: FileUploadIconProps) { const controller = useFileUploadController("FileUploadIcon") return ( ) } /** * Primary instruction line such as "Drop files here or click to browse". * Swap its wording during drags; color never carries that state alone. */ function FileUploadTitle({ className, ...props }: React.ComponentProps<"span">) { const controller = useFileUploadController("FileUploadTitle") return ( ) } /** Muted requirements line such as "PNG, JPG, PDF up to 10 MB". */ function FileUploadDescription({ className, ...props }: React.ComponentProps<"span">) { const controller = useFileUploadController("FileUploadDescription") return ( ) } /* -------------------------------------------------------------------------- */ /* Triggers and list-free actions */ /* -------------------------------------------------------------------------- */ /** * Renders any action that opens the picker: Choose file, Replace, or * + Add more files. Disables itself once the limit makes adding dishonest. */ function FileUploadTrigger({ render, children, ...props }: useRender.ComponentProps<"button">) { const controller = useFileUploadController("FileUploadTrigger") const typeValue: React.ButtonHTMLAttributes["type"] = render ? undefined : "button" // Built outside the call so object freshness stops flagging custom attrs. const triggerDefaults = { "data-slot": "file-upload-trigger", type: typeValue, disabled: controller.disabled || !controller.canAddMore, onClick: (event: React.MouseEvent) => { controller.activateFrom(event.currentTarget) }, } return useRender({ defaultTagName: "button", render, props: mergeProps<"button">( triggerDefaults, // Spread keeps React from excess-checking against the render-fn arm. { ...props, children, } ), }) } /** * Quiet "+ Add more files" action for lists that already hold something. * Children default to that phrasing; pass your own to match product voice. */ function FileUploadAddMore({ children, ...props }: Omit, "render">) { return ( } {...props}> ) } /** Shows itself above one file; local selections stay easy to rebuild. */ function FileUploadClear({ className, ...props }: Omit, "onClick">) { const controller = useFileUploadController("FileUploadClear") if (controller.value.length <= 1 || controller.disabled) { return null } return ( ) } /* -------------------------------------------------------------------------- */ /* List */ /* -------------------------------------------------------------------------- */ export interface FileUploadListProps extends React.ComponentProps<"ul"> { /** Set false when file-type tiles fit the list better than image thumbnails. */ showImagePreviews?: boolean } /** Selected rows plus recent rejections; absent when both collections are. */ function FileUploadList({ className, showImagePreviews = true, ...props }: FileUploadListProps) { const controller = useFileUploadController("FileUploadList") if (controller.value.length === 0 && controller.rejections.length === 0) { return null } return (

))}

) } const FileUploadItemContext = React.createContext(null) function useFileUploadItem(componentName: string) { const item = React.useContext(FileUploadItemContext) if (!item) { throw new Error(`<${componentName}> must render inside .`) } return item } export interface FileUploadItemProps extends React.ComponentProps<"li"> { item: FileUploadItem } function FileUploadItem({ item, className, children, ...props }: FileUploadItemProps) { return (

{children}

) } /* -------------------------------------------------------------------------- */ /* Item parts */ /* -------------------------------------------------------------------------- */ const previewTileClass = "flex size-10 shrink-0 flex-col items-center justify-center gap-y-0.5 rounded-[var(--hui-radius-1)] border-[0.5px] border-[var(--hui-color-border-base-secondary)] bg-[var(--hui-color-background-neutral-primary)] text-[var(--hui-color-foreground-base-secondary)]" /** * Image files get live thumbnails; everything else gets a quiet type tile. * Object URLs revoke themselves when rows unmount. Images larger than 50 MB * skip the thumbnail so one drop cannot stall the page. */ export interface FileUploadItemPreviewProps extends Omit, "src"> { src?: string /** Set false to render the file-type tile for images too. */ showImagePreview?: boolean } function FileUploadItemPreview({ className, src, showImagePreview = true, ...props }: FileUploadItemPreviewProps) { const item = useFileUploadItem("FileUploadItemPreview") const generatedUrl = useImagePreviewUrl(item.file, showImagePreview) const previewUrl = showImagePreview ? (src ?? generatedUrl) : null if (!previewUrl) { return ( ) } return ( /* The filename carries identity below; alt="" avoids repeating it. */ // Blob URLs cannot go through next/image, and the registry installs this // component outside Next projects too. // eslint-disable-next-line @next/next/no-img-element

) } function TileGlyph({ extension }: { extension: string }) { const glyphs: Record = { PDF: , DOC: , DOCX: , TXT: , CSV: , XLS: , XLSX: , } return ( <> {glyphs[extension] ?? } {extension.length <= 5 ? ( {extension} ) : null} ) } function useImagePreviewUrl(file: File, enabled: boolean) { const [previewUrl, setPreviewUrl] = React.useState(null) // Object URLs are external browser resources that preview rows mirror into // state; the returned cleanup revokes them the moment rows leave. /* eslint-disable react-hooks/set-state-in-effect */ React.useEffect(() => { if ( !enabled || !file.type.startsWith("image/") || file.size > 50 * 1024 * 1024 ) { setPreviewUrl(null) return } const url = URL.createObjectURL(file) setPreviewUrl(url) return () => URL.revokeObjectURL(url) }, [enabled, file]) /* eslint-enable react-hooks/set-state-in-effect */ return previewUrl } export type FileUploadItemContentProps = FileUploadPartProps function FileUploadItemContent({ className, ...props }: FileUploadItemContentProps) { return (

[data-slot=file-upload-item-progress]]:basis-full [&>[data-slot=file-upload-item-reason]]:basis-full", className )} {...props} /> ) } export type FileUploadItemActionsProps = FileUploadPartProps function FileUploadItemActions({ className, ...props }: FileUploadItemActionsProps) { return (

) } function FileUploadItemName({ className, ...props }: React.ComponentProps<"span">) { const item = useFileUploadItem("FileUploadItemName") return ( {item.file.name} ) } function FileUploadItemMetadata({ className, ...props }: React.ComponentProps<"span">) { const item = useFileUploadItem("FileUploadItemMetadata") const extension = getFileExtension(item.file.name) return ( {[formatFileSize(item.file.size), extension].filter(Boolean).join(" · ")} ) } function statusTone(status: FileUploadStatus | undefined) { switch (status) { case "success": return "text-[var(--hui-color-foreground-success-primary)]" case "error": return "text-[var(--hui-color-foreground-danger-primary)]" default: return "text-[var(--hui-color-foreground-base-secondary)]" } } function FileUploadItemStatus({ className, ...props }: React.ComponentProps<"span">) { const item = useFileUploadItem("FileUploadItemStatus") return ( ) } function StatusLine({ item }: { item: FileUploadItem }) { if (item.status === "uploading") { const percentKnown = typeof item.progress === "number" return ( <> {!percentKnown && ( )} {percentKnown ? "Uploading" : "Uploading..."} ) } if (item.status === "success") { return ( <> Uploaded ) } if (item.status === "error") { /* Applications own the sentence; show theirs verbatim. */ return ( <> {item.error ?? "Upload failed"} ) } /* No lifecycle attached yet: stay quiet instead of promising an upload. */ if (item.status === undefined) { return null } return "Waiting to upload" } /** Thin bar for running uploads; indeterminate while percent stays unknown. */ function FileUploadItemProgress({ className, ...props }: Omit, "value">) { const item = useFileUploadItem("FileUploadItemProgress") if (item.status !== "uploading") { return null } const percent = typeof item.progress === "number" ? Math.min(100, Math.max(0, item.progress)) : null return (

{/* Percent reaches assistive tech through the progressbar itself. */} {percent !== null ? ( ) : null}

) } /** Muted reason line under the filename; visible text beats tooltips. */ function FileUploadItemReason({ className, ...props }: React.ComponentProps<"span">) { const item = useFileUploadItem("FileUploadItemReason") if (!item.error) return null return ( {item.error} ) } /** Appears beside failed uploads only; your application owns the retry. */ function FileUploadItemRetry({ className, children, ...props }: Omit, "onClick">) { const item = useFileUploadItem("FileUploadItemRetry") const controller = useFileUploadController("FileUploadItemRetry") if (item.status !== "error" || !controller.canRetry) { return null } return ( ) } export interface FileUploadItemRemoveProps extends Omit, "onClick" | "aria-label"> { /** Overrides the generated "Remove {name}" accessible label. */ "aria-label"?: string onClick?: never } /** Icon control normally; swaps to plain Remove text beside Retry on error. */ function FileUploadItemRemove({ className, ...props }: FileUploadItemRemoveProps) { const item = useFileUploadItem("FileUploadItemRemove") const controller = useFileUploadController("FileUploadItemRemove") const buttonRef = React.useRef(null) const failed = item.status === "error" React.useEffect(() => { if ( controller.focusRequest?.target.kind === "item-remove" && controller.focusRequest.target.itemId === item.id ) { buttonRef.current?.focus() } }, [controller.focusRequest, item.id]) return ( ) } /** Rejected rows stay listed with their reason until someone removes them. */ function RejectedRow({ rejection }: { rejection: FileUploadRejection }) { const controller = useFileUploadController("FileUploadRejectedRow") const buttonRef = React.useRef(null) React.useEffect(() => { if ( controller.focusRequest?.target.kind === "rejection-remove" && controller.focusRequest.target.rejectionId === rejection.id ) { buttonRef.current?.focus() } }, [controller.focusRequest, rejection.id]) return (

{rejection.file.name} {[formatFileSize(rejection.file.size), getFileExtension(rejection.file.name)] .filter(Boolean) .join(" · ")} {rejection.reason}

) } /* -------------------------------------------------------------------------- */ /* Trigger companions */ /* -------------------------------------------------------------------------- */ /** Muted "report.pdf · 2.4 MB" summary next to button-only layouts. */ function FileUploadSummary({ className }: { className?: string }) { const controller = useFileUploadController("FileUploadSummary") return ( {controller.value.length === 0 ? "No file chosen" : controller.value .map((item) => [item.file.name, formatFileSize(item.file.size)] .filter(Boolean) .join(" · ") ) .join(", ")} ) } export { FileUpload, FileUploadAddMore, FileUploadClear, FileUploadDescription, FileUploadDropzone, FileUploadIcon, FileUploadItem, FileUploadItemActions, FileUploadItemContent, FileUploadItemMetadata, FileUploadItemName, FileUploadItemPreview, FileUploadItemProgress, FileUploadItemReason, FileUploadItemRemove, FileUploadItemRetry, FileUploadItemStatus, FileUploadList, FileUploadSummary, FileUploadTitle, FileUploadTrigger, } 52:Tccd,import type * as React from "react" /** Upload lifecycle reported by the application, not by FileUpload. */ export type FileUploadStatus = "pending" | "uploading" | "success" | "error" /** * One selected file plus whatever upload state the application attaches to * it. `status` stays optional so a freshly selected file needs no ceremony: * pick files first, enrich them once an upload starts. */ export interface FileUploadItem { id: string file: File status?: FileUploadStatus /** 0-100, or null while progress cannot be calculated. */ progress?: number | null /** Reason the upload failed, shown beside the retry action. */ error?: string } /** * A file that failed validation. Rejected files stay listed until dismissed; * they never enter `value`. */ export interface FileUploadRejection { id: string file: File /** Human-readable reason, safe to render as-is. */ reason: string } /** * Files currently dragged over the dropzone. `dragover` events expose how * many files are carried, never their names or sizes, so "invalid" means the * count already exceeds capacity. Type and size checks run on drop. */ export type FileUploadDragState = "idle" | "valid" | "invalid" /** Where keyboard focus should land after the next commit. */ export type FileUploadFocusTarget = | { kind: "fallback" } | { kind: "dropzone" } | { kind: "item-remove"; itemId: string } | { kind: "rejection-remove"; rejectionId: string } /** MIME-to-extension pairs such as {"image/png": [".png"]}, or an accept string. */ export type FileUploadAccept = Record | string /** Attributes forwarded to the hidden native input. */ export interface FileUploadInputAttributes { accept?: string capture?: "user" | "environment" multiple: boolean "webkitdirectory"?: "" } /** * Everything the composed parts share. Applications rarely touch this * directly; parts consume it through context. */ export interface FileUploadControllerValue { value: FileUploadItem[] rejections: FileUploadRejection[] dragState: FileUploadDragState disabled: boolean multiple: boolean /** False once the limit blocks honest adding; drives trigger disabling. */ canAddMore: boolean /** True when failed rows can call an application retry handler. */ canRetry: boolean selectionError: string | null focusRequest: { target: FileUploadFocusTarget; nonce: number } | null inputProps: FileUploadInputAttributes openPicker(): void /** Registers the activating element so focus can return after picking. */ activateFrom(element: HTMLElement): void removeItem(itemId: string): void removeRejection(rejectionId: string): void clearAll(): void retryItem(item: FileUploadItem): void rememberDropzoneTrigger(element: HTMLElement | null): void requestFocus(target: FileUploadFocusTarget): void beginDrag(draggedFileCount: number): void refreshDragValidity(draggedFileCount: number): void endDrag(): void cancelDrag(): void completeDrag(files: FileList): void announce(message: string): void } /** * Base props shared by wrapper-style parts so each accepts `className` and * native attributes like `id`, which is also how Field labels attach. */ export type FileUploadPartProps = React.ComponentProps<"div"> 53:T16b9,import type { FileUploadAccept } from "./file-upload-types" let idCounter = 0 /** Stable ids without assuming crypto.randomUUID support. */ export function createFileUploadId(prefix: string) { if (typeof crypto !== "undefined" && "randomUUID" in crypto) { return `${prefix}-${crypto.randomUUID()}` } idCounter += 1 return `${prefix}-${Date.now().toString(36)}-${idCounter}` } const KB = 1024 const MB = 1024 * 1024 /** Compact human size: 820 KB, 1.4 MB, 2 GB. Binary units, one decimal. */ export function formatFileSize(bytes: number): string { if (!Number.isFinite(bytes) || bytes < 0) { return "" } const formatter = new Intl.NumberFormat("en", { maximumFractionDigits: 1 }) if (bytes < KB) { return `${bytes} B` } if (bytes < MB) { return `${formatter.format(bytes / KB)} KB` } const gb = bytes / MB / 1024 return gb >= 1 ? `${formatter.format(gb)} GB` : `${formatter.format(bytes / MB)} MB` } export function getFileExtension(fileName: string): string { const dot = fileName.lastIndexOf(".") if (dot <= 0 || dot === fileName.length - 1) { return "" } return fileName.slice(dot + 1).toUpperCase() } interface NormalizedAccept { mimeTypes: Set wildcards: string[] extensions: Set } function normalizeAccept(accept?: FileUploadAccept | undefined): NormalizedAccept | null { if (!accept) { return null } const tokens = typeof accept === "string" ? accept.split(",").map((token) => token.trim()) : Object.entries(accept).flatMap(([mimeType, extensions]) => [ mimeType, ...extensions.map((extension) => extension.trim()), ]) const normalized: NormalizedAccept = { mimeTypes: new Set(), wildcards: [], extensions: new Set(), } for (const token of tokens) { if (!token) continue if (token.startsWith(".")) { normalized.extensions.add(token.slice(1).toLowerCase()) } else if (token.endsWith("/*")) { normalized.wildcards.push(token.slice(0, -2).toLowerCase()) } else { normalized.mimeTypes.add(token.toLowerCase()) } } return normalized } /** Format aliases collapse in prose so reasons read "JPG", not "JPEG or JPG". */ const extensionDisplayAliases: Record = { jpeg: "jpg", tiff: "tif", html: "htm", } /** Human list built from an accept record, e.g. "PNG, JPG, or PDF". */ export function describeAcceptedTypes( accept?: FileUploadAccept | undefined, ): string | null { if (!accept) { return null } const labels: string[] = [] if (typeof accept !== "string") { for (const extensions of Object.values(accept)) { labels.push(...extensions) } } else { labels.push(...accept.split(",").map((token) => token.trim())) } const unique = [ ...new Set( labels .filter(Boolean) .map((label) => label.replace(/^\./, "").toLowerCase()) .map((label) => extensionDisplayAliases[label] ?? label) .map((label) => label.toUpperCase()), ), ] if (unique.length === 0) { return null } if (unique.length === 1) { return unique[0] } if (unique.length === 2) { return `${unique[0]} or ${unique[1]}` } return `${unique.slice(0, -1).join(", ")}, or ${unique[unique.length - 1]}` } export function isFileAccepted(file: File, accept?: FileUploadAccept | undefined) { const normalized = normalizeAccept(accept) if (!normalized) { return true } const extension = file.name.includes(".") ? file.name.slice(file.name.lastIndexOf(".") + 1).toLowerCase() : "" if (extension && normalized.extensions.has(extension)) { return true } const mimeType = file.type.toLowerCase() if (normalized.mimeTypes.has(mimeType)) { return true } return normalized.wildcards.some((prefix) => mimeType.startsWith(`${prefix}/`)) } export interface FileUploadRuleCheckResult { valid: boolean reason?: string } export interface FileUploadRuleChecks { accept?: FileUploadAccept | undefined minSize?: number | undefined maxSize?: number | undefined validateFile?: ((file: File) => string | null) | undefined } /** * Per-file rules only. File-count limits are selection-level decisions the * root owns, because they depend on what has already been chosen. */ export function checkFileAgainstRules( file: File, checks: FileUploadRuleChecks, ): FileUploadRuleCheckResult { if (file.size === 0) { return { valid: false, reason: "This file is empty." } } if (checks.minSize !== undefined && checks.minSize > 0 && file.size < checks.minSize) { return { valid: false, reason: `This file is too small. Minimum size is ${formatFileSize(checks.minSize)}.`, } } if (checks.maxSize !== undefined && file.size > checks.maxSize) { return { valid: false, reason: `File is too large. Maximum is ${formatFileSize(checks.maxSize)}.`, } } if (!isFileAccepted(file, checks.accept)) { const allowed = describeAcceptedTypes(checks.accept) return { valid: false, reason: allowed ? `File type is not supported. Choose ${allowed}.` : "File type is not supported.", } } const custom = checks.validateFile?.(file) if (custom) { return { valid: false, reason: custom } } return { valid: true } } /** * HTML accept attribute for the hidden input. A record keeps its extension * pairs so pickers offer the right filter; strings pass through untouched. */ export function toInputAcceptAttribute(accept?: FileUploadAccept | undefined) { if (!accept) { return undefined } if (typeof accept === "string") { return accept } return Object.entries(accept) .map(([mimeType, extensions]) => [mimeType, ...extensions].join(",")) .join(",") } 4e:["$","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","@base-ui-components/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui-components%2Freact","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":"@base-ui-components/react"}]]}]}],["$","li","honestui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/honestui","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":"honestui"}]]}]}]]}],["$","$L4f",null,{"namespace":"@honestui","registryDependencies":["https://www.honestui.com/r/button.json","https://www.honestui.com/r/progress.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"file-upload.tsx","content":"$51","type":"registry:component","target":"components/ui/file-upload/file-upload.tsx"},{"path":"file-upload-context.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\n\nimport type { FileUploadControllerValue } from \"./file-upload-types\"\n\nexport const FileUploadControllerContext =\n React.createContext(null)\n\nFileUploadControllerContext.displayName = \"FileUploadControllerContext\"\n\nexport function useFileUploadController(\n componentName: string\n): FileUploadControllerValue {\n const controller = React.useContext(FileUploadControllerContext)\n\n if (!controller) {\n throw new Error(\n `<${componentName}> must be rendered inside so it can read selection state.`\n )\n }\n\n return controller\n}\n","type":"registry:component","target":"components/ui/file-upload/file-upload-context.tsx"},{"path":"file-upload-types.ts","content":"$52","type":"registry:component","target":"components/ui/file-upload/file-upload-types.ts"},{"path":"file-upload-utils.ts","content":"$53","type":"registry:component","target":"components/ui/file-upload/file-upload-utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]