51: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"] 52: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"] 53:T166c,"use client"; import * as React from "react"; import { FileIcon, UploadCloudIcon, XIcon } from "lucide-react"; import { enterChildren, gsap, marksIn, motionScale } from "@/lib/motion"; import { cn } from "@/lib/utils"; type FileDropzoneProps = Omit, "onChange"> & { /** Called with the accepted files (after accept/size checks). */ onFilesChange?: (files: File[]) => void; accept?: string; multiple?: boolean; /** Maximum size per file in bytes. */ maxSize?: number; hint?: React.ReactNode; }; const formatBytes = (n: number) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(0)} KB` : `${(n / 1048576).toFixed(1)} MB`); /** * Drag-and-drop upload area. While a file is dragged over, the crop marks lock onto the zone and the icon lifts; * dropped files list in with a stagger and can be removed. Click or press Enter to browse instead. */ function FileDropzone({ onFilesChange, accept, multiple = true, maxSize, hint, className, ...props }: FileDropzoneProps) { const [files, setFiles] = React.useState([]); const [over, setOver] = React.useState(false); const [error, setError] = React.useState(null); const zone = React.useRef(null); const input = React.useRef(null); const list = React.useRef(null); const before = React.useRef(0); const take = (incoming: FileList | null) => { if (!incoming) return; const ok: File[] = []; const rejected: string[] = []; for (const f of Array.from(incoming)) { if (maxSize && f.size > maxSize) rejected.push(`${f.name} is over ${formatBytes(maxSize)}`); else ok.push(f); } setError(rejected[0] ?? null); const next = multiple ? [...files, ...ok] : ok.slice(0, 1); before.current = multiple ? files.length : 0; setFiles(next); onFilesChange?.(next); }; React.useLayoutEffect(() => { const items = list.current ? Array.from(list.current.children).slice(before.current) : []; if (items.length && list.current && motionScale(list.current)) enterChildren(items, { opacity: 0, y: 8 }, { stagger: 0.05 }); before.current = files.length; }, [files.length]); React.useEffect(() => { const el = zone.current; if (!el || !motionScale(el)) return; if (over) marksIn(el); gsap.to(el.querySelector('[data-slot="dropzone-icon"]'), { y: over ? -6 : 0, scale: over ? 1.08 : 1, duration: 0.25, ease: "cue" }); }, [over]); return (

input.current?.click()} onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && (e.preventDefault(), input.current?.click())} onDragEnter={(e) => (e.preventDefault(), setOver(true))} onDragOver={(e) => e.preventDefault()} onDragLeave={(e) => !e.currentTarget.contains(e.relatedTarget as Node) && setOver(false)} onDrop={(e) => { e.preventDefault(); setOver(false); take(e.dataTransfer.files); }} className="relative grid cursor-pointer justify-items-center gap-2 rounded-2xl border border-dashed border-input bg-muted/30 px-6 py-10 text-center outline-none transition-colors duration-200 hover:bg-muted/60 focus-visible:ring-3 focus-visible:ring-ring/50 data-[over]:cue-marks data-[over]:border-ring data-[over]:bg-signal/10" >

{over ? "Drop to upload" : "Drop files here or click to browse"}

{hint ?? (maxSize ? `Up to ${formatBytes(maxSize)} each` : "Any file type")}

take(e.target.files)} />

{error && (

{error}

)} {files.length > 0 && (

{f.name} {formatBytes(f.size)}

)}

); } export { FileDropzone }; export type { FileDropzoneProps }; 50:["$","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","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@cuelark","registryDependencies":["utils","https://ui.cuelark.com/r/theme.json","https://ui.cuelark.com/r/motion.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/registry/cuelark/ui/file-dropzone.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]