{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "file-upload",
  "title": "File Upload",
  "description": "A shadcn-style file upload component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react", "class-variance-authority"],
  "registryDependencies": ["button"],
  "files": [
    {
      "path": "src/components/ui/file-upload.tsx",
      "content": "\"use client\";\n\nimport {\n  FileUpload as FileUploadPrimitive,\n  useFileUpload,\n} from \"@ark-ui/react/file-upload\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport { buttonVariants } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport { useFileUpload };\n\nexport type FileUploadItemPreviewImageProps =\n  FileUploadPrimitive.ItemPreviewImageProps;\n\nexport const FileUpload = ({\n  className,\n  children,\n  ...props\n}: FileUploadPrimitive.RootProps) => (\n  <FileUploadPrimitive.Root\n    className={cn(\"flex w-full flex-col gap-2 text-foreground\", className)}\n    data-slot=\"file-upload\"\n    {...props}\n  >\n    {children}\n    <FileUploadPrimitive.HiddenInput />\n  </FileUploadPrimitive.Root>\n);\n\nexport const FileUploadLabel = ({\n  className,\n  ...props\n}: FileUploadPrimitive.LabelProps) => (\n  <FileUploadPrimitive.Label\n    className={cn(\n      \"font-medium text-foreground text-sm leading-none data-disabled:opacity-64\",\n      className,\n    )}\n    data-slot=\"file-upload-label\"\n    {...props}\n  />\n);\n\nexport const FileUploadDropzone = ({\n  className,\n  ...props\n}: FileUploadPrimitive.DropzoneProps) => (\n  <FileUploadPrimitive.Dropzone\n    className={cn(\n      \"flex min-h-32 cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-input bg-muted/20 px-4 py-6 text-center transition-colors\",\n      \"hover:bg-muted/40 data-dragging:border-primary data-dragging:bg-primary/5 data-dragging:border-solid\",\n      \"data-invalid:border-destructive data-disabled:cursor-not-allowed data-disabled:opacity-64\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      className,\n    )}\n    data-slot=\"file-upload-dropzone\"\n    {...props}\n  />\n);\n\nexport const FileUploadTrigger = ({\n  ...props\n}: FileUploadPrimitive.TriggerProps) => (\n  <FileUploadPrimitive.Trigger data-slot=\"file-upload-trigger\" {...props} />\n);\n\nexport const FileUploadClearTrigger = ({\n  ...props\n}: FileUploadPrimitive.ClearTriggerProps) => (\n  <FileUploadPrimitive.ClearTrigger {...props} />\n);\n\nexport const FileUploadItemGroup = ({\n  className,\n  ...props\n}: FileUploadPrimitive.ItemGroupProps) => (\n  <FileUploadPrimitive.ItemGroup\n    className={cn(\"m-0 flex list-none flex-col gap-2 p-0\", className)}\n    data-slot=\"file-upload-item-group\"\n    {...props}\n  />\n);\n\nexport const FileUploadItem = ({\n  className,\n  ...props\n}: FileUploadPrimitive.ItemProps) => (\n  <FileUploadPrimitive.Item\n    className={cn(\n      \"flex items-center gap-3 rounded-lg border border-border bg-card p-2 shadow-xs/5\",\n      className,\n    )}\n    data-slot=\"file-upload-item\"\n    {...props}\n  />\n);\n\nexport const FileUploadItemName = ({\n  className,\n  ...props\n}: FileUploadPrimitive.ItemNameProps) => (\n  <FileUploadPrimitive.ItemName\n    className={cn(\n      \"min-w-0 flex-1 truncate font-medium text-foreground text-sm\",\n      className,\n    )}\n    data-slot=\"file-upload-item-name\"\n    {...props}\n  />\n);\n\nexport const FileUploadItemSizeText = ({\n  className,\n  ...props\n}: FileUploadPrimitive.ItemSizeTextProps) => (\n  <FileUploadPrimitive.ItemSizeText\n    className={cn(\"shrink-0 text-muted-foreground text-xs\", className)}\n    data-slot=\"file-upload-item-size-text\"\n    {...props}\n  />\n);\n\nexport const FileUploadItemDeleteTrigger = ({\n  className,\n  variant = \"ghost\",\n  size = \"icon-xs\",\n  ...props\n}: FileUploadPrimitive.ItemDeleteTriggerProps &\n  VariantProps<typeof buttonVariants>) => (\n  <FileUploadPrimitive.ItemDeleteTrigger\n    className={cn(buttonVariants({ variant, size }), className)}\n    data-slot=\"file-upload-item-delete-trigger\"\n    {...props}\n  />\n);\n\nexport const FileUploadItemPreview = ({\n  className,\n  ...props\n}: FileUploadPrimitive.ItemPreviewProps) => (\n  <FileUploadPrimitive.ItemPreview\n    className={cn(\n      \"flex size-10 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-5 rounded\",\n      className,\n    )}\n    data-slot=\"file-upload-item-preview\"\n    {...props}\n  />\n);\n\nexport const FileUploadItemPreviewImage = ({\n  className,\n  ...props\n}: FileUploadPrimitive.ItemPreviewImageProps) => (\n  <FileUploadPrimitive.ItemPreviewImage\n    className={cn(\n      \"size-10 shrink-0 border border-border bg-muted object-cover rounded-[inherit]\",\n      className,\n    )}\n    data-slot=\"file-upload-item-preview-image\"\n    {...props}\n  />\n);\n\nexport const FileUploadContext = FileUploadPrimitive.Context;\n\nexport const FileUploadRootProvider = ({\n  className,\n  children,\n  ...props\n}: FileUploadPrimitive.RootProviderProps) => (\n  <FileUploadPrimitive.RootProvider\n    className={cn(\"flex w-full flex-col gap-2\", className)}\n    data-slot=\"file-upload-root-provider\"\n    {...props}\n  >\n    {children}\n    <FileUploadPrimitive.HiddenInput />\n  </FileUploadPrimitive.RootProvider>\n);\n",
      "type": "registry:ui",
      "target": "src/components/ui/file-upload.tsx"
    }
  ],
  "type": "registry:ui"
}