{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-primitives-headless-dialog",
  "title": "Headless Dialog Demo",
  "description": "Demo showing an animated headless dialog.",
  "registryDependencies": [
    "@animate-ui/primitives-headless-dialog"
  ],
  "files": [
    {
      "path": "registry/demo/primitives/headless/dialog/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport {\n  Dialog,\n  DialogBackdrop,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPanel,\n  DialogTitle,\n  type DialogFlipDirection,\n} from '@/components/animate-ui/primitives/headless/dialog';\nimport { X } from 'lucide-react';\n\ntype RadixDialogDemoProps = {\n  from: DialogFlipDirection;\n};\n\nexport const RadixDialogDemo = ({ from }: RadixDialogDemoProps) => {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return (\n    <div>\n      <button\n        className=\"bg-primary text-primary-foreground px-4 py-2 text-sm\"\n        onClick={() => setIsOpen(true)}\n      >\n        Open Dialog\n      </button>\n\n      <Dialog open={isOpen} onClose={() => setIsOpen(false)}>\n        <DialogBackdrop className=\"fixed inset-0 z-50 bg-black/80\" />\n        <DialogPanel\n          from={from}\n          className=\"sm:max-w-md fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 border bg-background p-6\"\n        >\n          <DialogHeader>\n            <DialogTitle className=\"text-lg\">Terms of Service</DialogTitle>\n            <DialogDescription className=\"text-sm\">\n              Please read the following terms of service carefully.\n            </DialogDescription>\n          </DialogHeader>\n\n          <p className=\"py-4 text-sm text-muted-foreground\">\n            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,\n            quos. Lorem ipsum dolor sit amet consectetur adipisicing elit.\n            Quisquam, quos.\n          </p>\n\n          <DialogFooter>\n            <button className=\"bg-primary text-primary-foreground px-4 py-2 text-sm\">\n              Accept\n            </button>\n          </DialogFooter>\n\n          <DialogClose className=\"absolute top-4 right-4\">\n            <X className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </DialogClose>\n        </DialogPanel>\n      </Dialog>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/primitives/headless/dialog.tsx"
    }
  ],
  "meta": {
    "demoProps": {
      "DialogPanel": {
        "from": {
          "value": "top",
          "options": {
            "top": "top",
            "bottom": "bottom",
            "left": "left",
            "right": "right"
          }
        }
      }
    }
  },
  "type": "registry:ui"
}