{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "file-upload",
  "title": "File Upload",
  "description": "A hand-drawn dropzone that becomes more expressive when a file is dragged over it.",
  "dependencies": [
    "roughjs"
  ],
  "registryDependencies": [
    "https://www.bydefaulthuman.fun/r/use-rough.json",
    "utils",
    "https://www.bydefaulthuman.fun/r/crumble-theme.json",
    "https://www.bydefaulthuman.fun/r/rough-lib.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/file-upload.tsx",
      "content": "\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type DragEvent,\n} from \"react\";\nimport { useRough } from \"@/hooks/use-rough\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  resolveRoughVars,\n  type CrumbleColorProps,\n  type CrumbleTheme,\n} from \"@/lib/rough\";\n\nexport interface FileUploadProps extends CrumbleColorProps {\n  accept?: string;\n  className?: string;\n  disabled?: boolean;\n  id?: string;\n  label?: string;\n  multiple?: boolean;\n  onChange?: (files: FileList) => void;\n  theme?: CrumbleTheme;\n}\n\nexport function FileUpload({\n  accept,\n  className,\n  disabled = false,\n  fill,\n  id,\n  label,\n  multiple = false,\n  onChange,\n  stroke,\n  strokeMuted,\n  theme: themeProp,\n}: FileUploadProps) {\n  const [dragging, setDragging] = useState(false);\n  const [files, setFiles] = useState<File[]>([]);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const externalSvgRef = useRef<SVGSVGElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const uploadId = id ?? \"file-upload\";\n  const roughStyle = resolveRoughVars({ stroke, strokeMuted, fill });\n  const { drawRect, svgRef, theme } = useRough({\n    stableId: uploadId,\n    svgRef: externalSvgRef,\n    theme: themeProp,\n    variant: \"border\",\n  });\n\n  const draw = useCallback(() => {\n    const svg = svgRef.current;\n    const container = containerRef.current;\n    if (!svg || !container) return;\n\n    svg.replaceChildren();\n    const w = container.offsetWidth;\n    const h = container.offsetHeight;\n    svg.setAttribute(\"width\", String(w));\n    svg.setAttribute(\"height\", String(h));\n    svg.setAttribute(\"viewBox\", `0 0 ${w} ${h}`);\n\n    const roughness = dragging ? 2.5 : theme === \"crayon\" ? 2 : 1;\n    const currentStroke = dragging\n      ? \"var(--cr-stroke)\"\n      : \"var(--cr-stroke-muted)\";\n\n    const rect = drawRect(2, 2, w - 4, h - 4, {\n      fill: \"none\",\n      roughness,\n      stroke: currentStroke,\n      strokeLineDash: [8, 6],\n    });\n    if (rect) svg.appendChild(rect);\n  }, [disabled, dragging, drawRect, svgRef, theme]);\n\n  useEffect(() => {\n    const id = requestAnimationFrame(() => draw());\n    return () => cancelAnimationFrame(id);\n  }, [draw]);\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    const ro = new ResizeObserver(() => draw());\n    ro.observe(container);\n    return () => ro.disconnect();\n  }, [draw]);\n\n  const handleFiles = (fileList: FileList) => {\n    const arr = Array.from(fileList);\n    setFiles(multiple ? arr : arr.slice(0, 1));\n    onChange?.(fileList);\n  };\n\n  const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n    setDragging(false);\n    if (disabled || !e.dataTransfer.files.length) return;\n    handleFiles(e.dataTransfer.files);\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (e.target.files?.length) handleFiles(e.target.files);\n  };\n\n  return (\n    <div className={cn(\"flex flex-col gap-1.5\", className)} style={roughStyle}>\n      {label ? (\n        <span className=\"text-[11px] font-medium uppercase tracking-wider text-muted-foreground\">\n          {label}\n        </span>\n      ) : null}\n      <div\n        ref={containerRef}\n        className={cn(\n          \"relative flex min-h-32 cursor-pointer flex-col items-center justify-center gap-2 rounded-sm p-6\",\n          disabled && \"cursor-not-allowed opacity-40\",\n          dragging && \"bg-muted/30\",\n        )}\n        onClick={() => !disabled && inputRef.current?.click()}\n        onDragOver={(e) => {\n          e.preventDefault();\n          if (!disabled) setDragging(true);\n        }}\n        onDragLeave={() => setDragging(false)}\n        onDrop={handleDrop}\n      >\n        <svg\n          ref={externalSvgRef}\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-0 overflow-visible\"\n        />\n\n        <svg\n          aria-hidden=\"true\"\n          width=\"32\"\n          height=\"32\"\n          viewBox=\"0 0 32 32\"\n          className=\"text-muted-foreground\"\n        >\n          <line\n            x1=\"16\"\n            y1=\"22\"\n            x2=\"16\"\n            y2=\"8\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n          />\n          <polyline\n            points=\"10,14 16,8 22,14\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n          <line\n            x1=\"6\"\n            y1=\"26\"\n            x2=\"26\"\n            y2=\"26\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n\n        <div className=\"relative text-center\">\n          {files.length > 0 ? (\n            <div className=\"flex flex-col gap-0.5\">\n              {files.map((f, i) => (\n                <span key={i} className=\"text-sm font-medium text-foreground\">\n                  {f.name}\n                </span>\n              ))}\n            </div>\n          ) : (\n            <>\n              <p className=\"text-sm text-foreground\">\n                {dragging ? \"Drop to upload\" : \"Click or drag files here\"}\n              </p>\n              {accept ? (\n                <p className=\"mt-0.5 text-xs text-muted-foreground\">{accept}</p>\n              ) : null}\n            </>\n          )}\n        </div>\n\n        <input\n          ref={inputRef}\n          id={uploadId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleChange}\n          className=\"sr-only\"\n        />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/crumble/ui/file-upload.tsx"
    }
  ],
  "type": "registry:ui"
}