{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "floating-panel-demo",
  "type": "registry:component",
  "registryDependencies": [
    "floating-panel"
  ],
  "files": [
    {
      "path": "registry/default/example/floating-panel-demo.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport { Image as ImageIcon, Paintbrush, Plus, X } from \"lucide-react\"\nimport { AnimatePresence, motion } from \"motion/react\"\n\nimport {\n  FloatingPanelBody,\n  FloatingPanelButton,\n  FloatingPanelCloseButton,\n  FloatingPanelContent,\n  FloatingPanelFooter,\n  FloatingPanelForm,\n  FloatingPanelHeader,\n  FloatingPanelLabel,\n  FloatingPanelRoot,\n  FloatingPanelSubmitButton,\n  FloatingPanelTextarea,\n  FloatingPanelTrigger,\n} from \"../ui/floating-panel\"\n\nfunction FloatingPanelInput() {\n  const handleSubmit = (note: string) => {\n    console.log(\"Submitted note:\", note)\n  }\n\n  return (\n    <FloatingPanelRoot>\n      <FloatingPanelTrigger\n        title=\"Add Note\"\n        className=\"bg-primary text-primary-foreground hover:bg-primary/90 flex items-center space-x-2 rounded-md px-4 py-2 transition-colors\"\n      >\n        <span>Add Note</span>\n      </FloatingPanelTrigger>\n      <FloatingPanelContent className=\"w-80\">\n        <FloatingPanelForm onSubmit={handleSubmit}>\n          <FloatingPanelBody>\n            <FloatingPanelLabel htmlFor=\"note-input\">Note</FloatingPanelLabel>\n            <FloatingPanelTextarea id=\"note-input\" className=\"min-h-[100px]\" />\n          </FloatingPanelBody>\n          <FloatingPanelFooter>\n            <FloatingPanelCloseButton />\n            <FloatingPanelSubmitButton />\n          </FloatingPanelFooter>\n        </FloatingPanelForm>\n      </FloatingPanelContent>\n    </FloatingPanelRoot>\n  )\n}\n\nconst ColorPickerFloatingPanel = () => {\n  const colors = [\n    \"#FF5733\",\n    \"#33FF57\",\n    \"#3357FF\",\n    \"#FF33F1\",\n    \"#33FFF1\",\n    \"#F1FF33\",\n  ]\n\n  return (\n    <FloatingPanelRoot>\n      <FloatingPanelTrigger\n        title=\"Choose Color\"\n        className=\"bg-secondary text-secondary-foreground hover:bg-secondary/90 flex items-center space-x-2 rounded-md px-4 py-2 transition-colors\"\n      >\n        <span>Choose Color</span>\n      </FloatingPanelTrigger>\n      <FloatingPanelContent className=\"w-64\">\n        <FloatingPanelBody>\n          <div className=\"grid grid-cols-3 gap-2\">\n            <AnimatePresence>\n              {colors.map((color) => (\n                <motion.button\n                  key={color}\n                  className=\"focus:ring-primary h-12 w-12 rounded-full focus:ring-2 focus:ring-offset-2 focus:outline-none\"\n                  style={{ backgroundColor: color }}\n                  onClick={() => console.log(`Selected color: ${color}`)}\n                  whileHover={{ scale: 1.1 }}\n                  whileTap={{ scale: 0.9 }}\n                  initial={{ opacity: 0, scale: 0.8 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.8 }}\n                  transition={{ duration: 0.2 }}\n                />\n              ))}\n            </AnimatePresence>\n          </div>\n        </FloatingPanelBody>\n        <FloatingPanelFooter>\n          <FloatingPanelCloseButton />\n        </FloatingPanelFooter>\n      </FloatingPanelContent>\n    </FloatingPanelRoot>\n  )\n}\n\nconst QuickActionsFloatingPanel = () => {\n  const actions = [\n    {\n      icon: <Plus className=\"h-4 w-4\" />,\n      label: \"New File\",\n      action: () => console.log(\"New File\"),\n    },\n    {\n      icon: <ImageIcon className=\"h-4 w-4\" />,\n      label: \"Upload Image\",\n      action: () => console.log(\"Upload Image\"),\n    },\n    {\n      icon: <Paintbrush className=\"h-4 w-4\" />,\n      label: \"Edit Colors\",\n      action: () => console.log(\"Edit Colors\"),\n    },\n  ]\n\n  return (\n    <FloatingPanelRoot>\n      <FloatingPanelTrigger\n        title=\"Quick Actions\"\n        className=\"bg-accent text-accent-foreground hover:bg-accent/90 flex items-center space-x-2 rounded-md px-4 py-2 transition-colors\"\n      >\n        <span>Quick Actions</span>\n      </FloatingPanelTrigger>\n      <FloatingPanelContent className=\"w-56\">\n        <FloatingPanelBody>\n          <AnimatePresence>\n            {actions.map((action, index) => (\n              <motion.div\n                key={index}\n                initial={{ opacity: 0, y: -10 }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: 10 }}\n                transition={{ delay: index * 0.1 }}\n              >\n                <FloatingPanelButton\n                  onClick={action.action}\n                  className=\"hover:bg-muted flex w-full items-center space-x-2 rounded-md px-2 py-1 transition-colors\"\n                >\n                  {action.icon}\n                  <span>{action.label}</span>\n                </FloatingPanelButton>\n              </motion.div>\n            ))}\n          </AnimatePresence>\n        </FloatingPanelBody>\n        <FloatingPanelFooter>\n          <FloatingPanelCloseButton />\n        </FloatingPanelFooter>\n      </FloatingPanelContent>\n    </FloatingPanelRoot>\n  )\n}\n\nconst ImagePreviewFloatingPanel = () => {\n  return (\n    <FloatingPanelRoot>\n      <FloatingPanelTrigger\n        title=\"Preview Image\"\n        className=\"bg-muted text-muted-foreground hover:bg-muted/90 flex items-center space-x-2 rounded-md px-4 py-2 transition-colors\"\n      >\n        <span>Preview Image</span>\n      </FloatingPanelTrigger>\n      <FloatingPanelContent className=\"w-80\">\n        <FloatingPanelBody>\n          <motion.img\n            src=\"/placeholder.svg?height=200&width=300\"\n            alt=\"Preview\"\n            className=\"h-auto w-full rounded-md\"\n            initial={{ opacity: 0, scale: 0.9 }}\n            animate={{ opacity: 1, scale: 1 }}\n            transition={{ duration: 0.3 }}\n          />\n          <motion.p\n            className=\"text-muted-foreground mt-2 text-sm\"\n            initial={{ opacity: 0, y: 10 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ delay: 0.2, duration: 0.3 }}\n          >\n            Image preview description goes here.\n          </motion.p>\n        </FloatingPanelBody>\n        <FloatingPanelFooter>\n          <FloatingPanelCloseButton />\n          <FloatingPanelButton\n            onClick={() => console.log(\"Download clicked\")}\n            className=\"bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-3 py-1 transition-colors\"\n          >\n            Download\n          </FloatingPanelButton>\n        </FloatingPanelFooter>\n      </FloatingPanelContent>\n    </FloatingPanelRoot>\n  )\n}\n\nexport default function FloatingPanelExamples() {\n  return (\n    <div className=\"space-y-8 p-8\">\n      <h1 className=\"mb-4 text-3xl font-bold\">FloatingPanel Examples</h1>\n      <div className=\"flex flex-col flex-wrap gap-4 md:flex-row\">\n        <FloatingPanelInput />\n        <ColorPickerFloatingPanel />\n        <QuickActionsFloatingPanel />\n        <ImagePreviewFloatingPanel />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}