{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-components-headless-dialog",
  "title": "Dialog Demo",
  "description": "Demo showing a dialog.",
  "registryDependencies": [
    "@animate-ui/components-headless-dialog"
  ],
  "files": [
    {
      "path": "registry/demo/components/headless/dialog/index.tsx",
      "content": "import * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport {\n  Dialog,\n  DialogPanel,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n  type DialogPanelProps,\n} from '@/components/animate-ui/components/headless/dialog';\nimport { Label } from '@/components/ui/label';\nimport { Input } from '@/components/ui/input';\n\ninterface HeadlessDialogDemoProps {\n  from: DialogPanelProps['from'];\n  showCloseButton: boolean;\n}\n\nexport const HeadlessDialogDemo = ({\n  from,\n  showCloseButton,\n}: HeadlessDialogDemoProps) => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <div>\n      <Button variant=\"outline\" onClick={() => setIsOpen(true)}>\n        Open Dialog\n      </Button>\n\n      <Dialog open={isOpen} onClose={() => setIsOpen(false)}>\n        <DialogPanel\n          from={from}\n          showCloseButton={showCloseButton}\n          className=\"sm:max-w-[425px]\"\n        >\n          <form className=\"flex flex-col gap-4\">\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done.\n              </DialogDescription>\n            </DialogHeader>\n            <div className=\"grid gap-4\">\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"name-1\">Name</Label>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </div>\n              <div className=\"grid gap-3\">\n                <Label htmlFor=\"username-1\">Username</Label>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </div>\n            </div>\n            <DialogFooter>\n              <Button variant=\"outline\" onClick={() => setIsOpen(false)}>\n                Cancel\n              </Button>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </form>\n        </DialogPanel>\n      </Dialog>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/components/headless/dialog.tsx"
    }
  ],
  "meta": {
    "demoProps": {
      "DialogPanel": {
        "from": {
          "value": "top",
          "options": {
            "top": "top",
            "bottom": "bottom",
            "left": "left",
            "right": "right"
          }
        },
        "showCloseButton": {
          "value": true
        }
      }
    }
  },
  "type": "registry:ui"
}