{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "file-trigger-avatar-example",
  "title": "File Trigger Avatar",
  "description": "file-trigger-avatar-example",
  "dependencies": [
    "@react-types/shared",
    "react-aria-components",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/avatar",
    "https://intentui.com/r/drop-zone",
    "https://intentui.com/r/file-trigger"
  ],
  "files": [
    {
      "path": "src/components/examples/buttons/file-trigger/file-trigger-avatar-example.tsx",
      "content": "'use client'\n\nimport type { DropEvent } from '@react-types/shared'\nimport { useEffect, useState } from 'react'\nimport { isFileDropItem } from 'react-aria-components/useDragAndDrop'\nimport { twJoin } from 'cn'\nimport { Avatar } from '@/components/ui/avatar'\nimport { DropZone } from '@/components/ui/drop-zone'\nimport { FileTrigger } from '@/components/ui/file-trigger'\n\nexport default function FileTriggerAvatarDemo() {\n  const [droppedImage, setDroppedImage] = useState<string | undefined>(undefined)\n\n  useEffect(() => {\n    return () => {\n      if (droppedImage) {\n        URL.revokeObjectURL(droppedImage)\n      }\n    }\n  }, [droppedImage])\n\n  const onDropHandler = async (e: DropEvent) => {\n    const item = e.items\n      .filter(isFileDropItem)\n      .find((item) => item.type === 'image/jpeg' || item.type === 'image/png')\n    if (item) {\n      const file = await item.getFile()\n      setDroppedImage(URL.createObjectURL(file))\n    }\n  }\n\n  async function onSelectHandler(files: FileList | null) {\n    if (files) {\n      const file = files.item(0)\n\n      if (file) {\n        setDroppedImage(URL.createObjectURL(file))\n      }\n    }\n  }\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      <DropZone\n        getDropOperation={() => 'copy'}\n        onDrop={onDropHandler}\n        className={twJoin(\n          'size-10 overflow-hidden rounded-full p-0 **:data-[slot=avatar]:bg-transparent **:data-[slot=avatar]:outline-hidden'\n        )}\n      >\n        {droppedImage ? (\n          <Avatar src={droppedImage} size=\"lg\" />\n        ) : (\n          <Avatar initials=\"IA\" size=\"lg\" />\n        )}\n        <input type=\"hidden\" name=\"image\" value={droppedImage} />\n      </DropZone>\n      <FileTrigger\n        size=\"sm\"\n        acceptedFileTypes={['image/png', 'image/jpeg']}\n        onSelect={onSelectHandler}\n      >\n        Upload avatar\n      </FileTrigger>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/file-trigger-avatar-example/page.tsx"
    }
  ],
  "type": "registry:page"
}