{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expandable-dialog",
  "title": "Expandable Dialog",
  "description": "Responsive dialog that can expand and shrink",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "@lumi-ui/button",
    "@lumi-ui/dialog",
    "@lumi-ui/scroll-area"
  ],
  "files": [
    {
      "path": "registry/components/expandable-dialog.tsx",
      "content": "\"use client\";\n\nimport { Maximize2Icon, Minimize2Icon, X } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport * as React from \"react\";\nimport { Button } from \"@/registry/ui/button\";\nimport {\n  Dialog,\n  DialogBackdrop,\n  DialogClose,\n  DialogHeader,\n  DialogPopup,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n  DialogViewport,\n} from \"@/registry/ui/dialog\";\nimport { ScrollArea } from \"@/registry/ui/scroll-area\";\n\nexport function ExpandableDialog() {\n  const [open, setOpen] = React.useState(false);\n  const [isExpanded, setIsExpanded] = React.useState(false);\n\n  return (\n    <Dialog onOpenChange={setOpen} open={open}>\n      <DialogTrigger render={<Button variant=\"glow\">Open Dialog</Button>} />\n      <AnimatePresence>\n        {open && (\n          <DialogPortal keepMounted>\n            <DialogBackdrop />\n            <DialogViewport className=\"fixed inset-0 flex items-center justify-center p-4 sm:p-6\">\n              <DialogPopup\n                render={\n                  <motion.div\n                    animate={{\n                      height: isExpanded ? \"75vh\" : \"50vh\",\n                      maxWidth: isExpanded ? \"56rem\" : \"40rem\",\n                      opacity: 1,\n                      scale: 1,\n                    }}\n                    className=\"relative flex flex-col overflow-hidden rounded-md border bg-background shadow-lg\"\n                    exit={{ opacity: 0, scale: 0.95 }}\n                    initial={{\n                      height: \"50vh\",\n                      maxWidth: \"40rem\",\n                      opacity: 0,\n                      scale: 0.95,\n                    }}\n                    layout\n                    style={{\n                      maxHeight: \"90dvh\",\n                      width: \"95vw\",\n                    }}\n                    transition={{\n                      bounce: 0,\n                      damping: 30,\n                      duration: 0.3,\n                      stiffness: 300,\n                      type: \"spring\",\n                    }}\n                  >\n                    <DialogHeader className=\"flex flex-row items-center justify-between border-b p-2 sm:p-4\">\n                      <DialogTitle>Expandable Dialog</DialogTitle>\n                      <div className=\"flex items-center gap-2\">\n                        <Button\n                          onClick={() => setIsExpanded(!isExpanded)}\n                          size=\"icon-sm\"\n                          title={isExpanded ? \"Collapse\" : \"Expand\"}\n                          variant=\"ghost\"\n                        >\n                          {isExpanded ? (\n                            <Minimize2Icon className=\"size-4\" />\n                          ) : (\n                            <Maximize2Icon className=\"size-4\" />\n                          )}\n                          <span className=\"sr-only\">Toggle expand</span>\n                        </Button>\n                        <DialogClose\n                          render={\n                            <Button size=\"icon-sm\" variant=\"ghost\">\n                              <X className=\"size-4\" />\n                              <span className=\"sr-only\">Close dialog</span>\n                            </Button>\n                          }\n                          title=\"Close\"\n                        />\n                      </div>\n                    </DialogHeader>\n                    <ScrollArea className=\"pr-1 min-h-0\" gradientScrollFade>\n                      <div className=\"space-y-4 p-2 sm:p-4\">\n                        {Array.from({ length: 30 }).map((_, i) => (\n                          <div\n                            className=\"flex items-center gap-4 rounded-md border border-border/50 h-26 bg-card p-3\"\n                            key={i}\n                          >\n                            <div className=\"h-10 w-10 shrink-0 rounded-full bg-muted\" />\n                            <div className=\"space-y-4\">\n                              <div className=\"h-6 w-24 sm:w-48 bg-muted rounded-md\" />\n                              <div className=\"h-6 w-32 sm:w-72 bg-muted rounded-md\" />\n                            </div>\n                          </div>\n                        ))}\n                      </div>\n                    </ScrollArea>\n                  </motion.div>\n                }\n              />\n            </DialogViewport>\n          </DialogPortal>\n        )}\n      </AnimatePresence>\n    </Dialog>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "iframeHeight": 1000
  },
  "categories": [
    "layout-navigation"
  ],
  "type": "registry:component"
}