{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "linear-dialog",
  "type": "registry:block",
  "title": "Linear dialog",
  "description": "Linear dialog",
  "files": [
    {
      "path": "components/usages/lineardialogusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport {\r\n\tDialog,\r\n\tDialogClose,\r\n\tDialogContainer,\r\n\tDialogContent,\r\n\tDialogDescription,\r\n\tDialogImage,\r\n\tDialogTitle,\r\n\tDialogTrigger,\r\n} from \"@/registry/open-source/linear-dialog\";\r\nimport { Plus } from \"lucide-react\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<div className=\"flex gap-4\">\r\n\t\t\t\t{[\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 1,\r\n\t\t\t\t\t\turl: \"/itjustworks.jpg\",\r\n\t\t\t\t\t\ttitle: \"Accordion\",\r\n\t\t\t\t\t\tdescription:\r\n\t\t\t\t\t\t\t\"Immerse yourself in our cutting-edge interactive gallery, designed to showcase a diverse array of visual content with unparalleled clarity and style. This feature allows users to effortlessly navigate through high-resolution images, from awe-inspiring landscapes to intimate portraits and abstract art. With smooth transitions, intuitive controls, and responsive design, our gallery adapts to any device, ensuring a seamless browsing experience. Dive deeper into each piece with expandable information panels, offering insights into the artist, technique, and story behind each image. \",\r\n\t\t\t\t\t\ttags: [\r\n\t\t\t\t\t\t\t\"Sunrise\",\r\n\t\t\t\t\t\t\t\"Mountains\",\r\n\t\t\t\t\t\t\t\"Golden\",\r\n\t\t\t\t\t\t\t\"Scenic\",\r\n\t\t\t\t\t\t\t\"Inspiring\",\r\n\t\t\t\t\t\t],\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 2,\r\n\t\t\t\t\t\turl: \"/itjustworks.jpg\",\r\n\t\t\t\t\t\ttitle: \"Globe Section\",\r\n\t\t\t\t\t\tdescription: `Embark on a virtual journey around the world with our state-of-the-art 3D globe feature. This interactive marvel allows users to explore geographical data, global trends, and worldwide connections with unprecedented ease and detail. Spin the globe with a flick of your mouse, zoom into street-level views, or soar high for a continental perspective. Our globe section integrates real-time data feeds, showcasing everything from climate patterns and population densities to economic indicators and cultural hotspots. Customizable layers let you focus on specific data sets, while intuitive tooltips provide in-depth information at every turn. `,\r\n\t\t\t\t\t\ttags: [\"Misty\", \"Path\", \"Mysterious\", \"Serene\", \"Rugged\"],\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 3,\r\n\t\t\t\t\t\turl: \"/itjustworks.jpg\",\r\n\r\n\t\t\t\t\t\ttitle: \"Image Mouse Trail\",\r\n\t\t\t\t\t\tdescription: `Transform your browsing experience with our mesmerizing Image Mouse Trail feature. As you move your cursor across the screen, watch in wonder as a trail of carefully curated images follows in its wake, creating a dynamic and engaging visual spectacle. This innovative feature goes beyond mere aesthetics; it's an interactive showcase of your content, products, or artwork. Each image in the trail can be clickable, leading to detailed views or related content, turning casual mouse movements into opportunities for discovery.`,\r\n\t\t\t\t\t\ttags: [\r\n\t\t\t\t\t\t\t\"Pathway\",\r\n\t\t\t\t\t\t\t\"Adventure\",\r\n\t\t\t\t\t\t\t\"Peaks\",\r\n\t\t\t\t\t\t\t\"Challenging\",\r\n\t\t\t\t\t\t\t\"Breathtaking\",\r\n\t\t\t\t\t\t],\r\n\t\t\t\t\t},\r\n\t\t\t\t].map((item, i) => {\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t<Dialog\r\n\t\t\t\t\t\t\t\ttransition={{\r\n\t\t\t\t\t\t\t\t\ttype: \"spring\",\r\n\t\t\t\t\t\t\t\t\tbounce: 0.05,\r\n\t\t\t\t\t\t\t\t\tduration: 0.5,\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<DialogTrigger\r\n\t\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\t\tborderRadius: \"12px\",\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\tclassName=\"flex w-full flex-col overflow-hidden  border    dark:bg-background bg-background hover:bg-background dark:hover:bg-background\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<DialogImage\r\n\t\t\t\t\t\t\t\t\t\tsrc={\"/itjustworks.jpg\"}\r\n\t\t\t\t\t\t\t\t\t\talt=\"\"\r\n\t\t\t\t\t\t\t\t\t\tclassName=\" h-64 w-full object-cover\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t<div className=\"flex grow flex-row items-end justify-between p-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t<DialogTitle className=\"text-secondary text-xl dark:text-secondary\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t{item.title}\r\n\t\t\t\t\t\t\t\t\t\t\t</DialogTitle>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<button className=\"absolute bottom-2 right-2 p-2 dark:bg-background bg-background hover:bg-background rounded-full dark:hover:bg-background\">\r\n\t\t\t\t\t\t\t\t\t\t\t<Plus className=\"w-6 h-6\" />\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</DialogTrigger>\r\n\t\t\t\t\t\t\t\t<DialogContainer className=\"pt-20\">\r\n\t\t\t\t\t\t\t\t\t<DialogContent\r\n\t\t\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: \"24px\",\r\n\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\tclassName=\" relative flex h-full mx-auto flex-col overflow-y-auto border dark:bg-background bg-background hover:bg-background dark:hover:bg-background lg:w-[900px] w-[80%] \"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<DialogImage\r\n\t\t\t\t\t\t\t\t\t\t\tsrc={\"/itjustworks.jpg\"}\r\n\t\t\t\t\t\t\t\t\t\t\talt=\"\"\r\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-full  object-contain w-[60%] mx-auto\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t<div className=\"p-6\">\r\n\t\t\t\t\t\t\t\t\t\t\t<DialogTitle className=\"text-5xl text-secondary dark:text-secondary\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t{item.title}\r\n\t\t\t\t\t\t\t\t\t\t\t</DialogTitle>\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t<DialogDescription\r\n\t\t\t\t\t\t\t\t\t\t\t\tdisableLayoutAnimation\r\n\t\t\t\t\t\t\t\t\t\t\t\tvariants={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tinitial: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 0.8,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ty: -40,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tanimate: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ty: 0,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\t\t\t\t\texit: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 0.8,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ty: -50,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"mt-2 text-secondary dark:text-secondary\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{item.description}\r\n\t\t\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t\t\t</DialogDescription>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<DialogClose className=\"text-secondary  dark:bg-background bg-background p-4 hover:bg-background rounded-full dark:hover:bg-background\" />\r\n\t\t\t\t\t\t\t\t\t</DialogContent>\r\n\t\t\t\t\t\t\t\t</DialogContainer>\r\n\t\t\t\t\t\t\t</Dialog>\r\n\t\t\t\t\t\t</>\r\n\t\t\t\t\t);\r\n\t\t\t\t})}\r\n\t\t\t</div>{\" \"}\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/lineardialogusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport {\r\n\tDialog,\r\n\tDialogClose,\r\n\tDialogContainer,\r\n\tDialogContent,\r\n\tDialogDescription,\r\n\tDialogImage,\r\n\tDialogTitle,\r\n\tDialogTrigger,\r\n} from \"@/registry/open-source/linear-dialog\";\r\nimport { Plus } from \"lucide-react\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<div className=\"flex gap-4\">\r\n\t\t\t\t{[\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 1,\r\n\t\t\t\t\t\turl: \"/itjustworks.jpg\",\r\n\t\t\t\t\t\ttitle: \"Accordion\",\r\n\t\t\t\t\t\tdescription:\r\n\t\t\t\t\t\t\t\"Immerse yourself in our cutting-edge interactive gallery, designed to showcase a diverse array of visual content with unparalleled clarity and style. This feature allows users to effortlessly navigate through high-resolution images, from awe-inspiring landscapes to intimate portraits and abstract art. With smooth transitions, intuitive controls, and responsive design, our gallery adapts to any device, ensuring a seamless browsing experience. Dive deeper into each piece with expandable information panels, offering insights into the artist, technique, and story behind each image. \",\r\n\t\t\t\t\t\ttags: [\r\n\t\t\t\t\t\t\t\"Sunrise\",\r\n\t\t\t\t\t\t\t\"Mountains\",\r\n\t\t\t\t\t\t\t\"Golden\",\r\n\t\t\t\t\t\t\t\"Scenic\",\r\n\t\t\t\t\t\t\t\"Inspiring\",\r\n\t\t\t\t\t\t],\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 2,\r\n\t\t\t\t\t\turl: \"/itjustworks.jpg\",\r\n\t\t\t\t\t\ttitle: \"Globe Section\",\r\n\t\t\t\t\t\tdescription: `Embark on a virtual journey around the world with our state-of-the-art 3D globe feature. This interactive marvel allows users to explore geographical data, global trends, and worldwide connections with unprecedented ease and detail. Spin the globe with a flick of your mouse, zoom into street-level views, or soar high for a continental perspective. Our globe section integrates real-time data feeds, showcasing everything from climate patterns and population densities to economic indicators and cultural hotspots. Customizable layers let you focus on specific data sets, while intuitive tooltips provide in-depth information at every turn. `,\r\n\t\t\t\t\t\ttags: [\"Misty\", \"Path\", \"Mysterious\", \"Serene\", \"Rugged\"],\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tid: 3,\r\n\t\t\t\t\t\turl: \"/itjustworks.jpg\",\r\n\r\n\t\t\t\t\t\ttitle: \"Image Mouse Trail\",\r\n\t\t\t\t\t\tdescription: `Transform your browsing experience with our mesmerizing Image Mouse Trail feature. As you move your cursor across the screen, watch in wonder as a trail of carefully curated images follows in its wake, creating a dynamic and engaging visual spectacle. This innovative feature goes beyond mere aesthetics; it's an interactive showcase of your content, products, or artwork. Each image in the trail can be clickable, leading to detailed views or related content, turning casual mouse movements into opportunities for discovery.`,\r\n\t\t\t\t\t\ttags: [\r\n\t\t\t\t\t\t\t\"Pathway\",\r\n\t\t\t\t\t\t\t\"Adventure\",\r\n\t\t\t\t\t\t\t\"Peaks\",\r\n\t\t\t\t\t\t\t\"Challenging\",\r\n\t\t\t\t\t\t\t\"Breathtaking\",\r\n\t\t\t\t\t\t],\r\n\t\t\t\t\t},\r\n\t\t\t\t].map((item, i) => {\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t<Dialog\r\n\t\t\t\t\t\t\t\ttransition={{\r\n\t\t\t\t\t\t\t\t\ttype: \"spring\",\r\n\t\t\t\t\t\t\t\t\tbounce: 0.05,\r\n\t\t\t\t\t\t\t\t\tduration: 0.5,\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<DialogTrigger\r\n\t\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\t\tborderRadius: \"12px\",\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\tclassName=\"flex w-full flex-col overflow-hidden  border    dark:bg-background bg-background hover:bg-background dark:hover:bg-background\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<DialogImage\r\n\t\t\t\t\t\t\t\t\t\tsrc={\"/itjustworks.jpg\"}\r\n\t\t\t\t\t\t\t\t\t\talt=\"\"\r\n\t\t\t\t\t\t\t\t\t\tclassName=\" h-64 w-full object-cover\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t<div className=\"flex grow flex-row items-end justify-between p-3\">\r\n\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t<DialogTitle className=\"text-secondary text-xl dark:text-secondary\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t{item.title}\r\n\t\t\t\t\t\t\t\t\t\t\t</DialogTitle>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<button className=\"absolute bottom-2 right-2 p-2 dark:bg-background bg-background hover:bg-background rounded-full dark:hover:bg-background\">\r\n\t\t\t\t\t\t\t\t\t\t\t<Plus className=\"w-6 h-6\" />\r\n\t\t\t\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</DialogTrigger>\r\n\t\t\t\t\t\t\t\t<DialogContainer className=\"pt-20\">\r\n\t\t\t\t\t\t\t\t\t<DialogContent\r\n\t\t\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: \"24px\",\r\n\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\tclassName=\" relative flex h-full mx-auto flex-col overflow-y-auto border dark:bg-background bg-background hover:bg-background dark:hover:bg-background lg:w-[900px] w-[80%] \"\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<DialogImage\r\n\t\t\t\t\t\t\t\t\t\t\tsrc={\"/itjustworks.jpg\"}\r\n\t\t\t\t\t\t\t\t\t\t\talt=\"\"\r\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"h-full  object-contain w-[60%] mx-auto\"\r\n\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t<div className=\"p-6\">\r\n\t\t\t\t\t\t\t\t\t\t\t<DialogTitle className=\"text-5xl text-secondary dark:text-secondary\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t{item.title}\r\n\t\t\t\t\t\t\t\t\t\t\t</DialogTitle>\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t<DialogDescription\r\n\t\t\t\t\t\t\t\t\t\t\t\tdisableLayoutAnimation\r\n\t\t\t\t\t\t\t\t\t\t\t\tvariants={{\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tinitial: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 0.8,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ty: -40,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\t\t\t\t\tanimate: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ty: 0,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\t\t\t\t\texit: {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 0.8,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ty: -50,\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<p className=\"mt-2 text-secondary dark:text-secondary\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{item.description}\r\n\t\t\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t\t\t</DialogDescription>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t\t<DialogClose className=\"text-secondary  dark:bg-background bg-background p-4 hover:bg-background rounded-full dark:hover:bg-background\" />\r\n\t\t\t\t\t\t\t\t\t</DialogContent>\r\n\t\t\t\t\t\t\t\t</DialogContainer>\r\n\t\t\t\t\t\t\t</Dialog>\r\n\t\t\t\t\t\t</>\r\n\t\t\t\t\t);\r\n\t\t\t\t})}\r\n\t\t\t</div>{\" \"}\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/linear-dialog.tsx",
      "content": "\"use client\";\n\nimport React, {\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseId,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n// import useClickOutside from '@/hooks/useClickOutside';\nimport { XIcon } from \"lucide-react\";\nimport {\n\tAnimatePresence,\n\tmotion,\n\tMotionConfig,\n\tTransition,\n\tVariant,\n} from \"motion/react\";\nimport { createPortal } from \"react-dom\";\n\n// Credit:\n// https://www.ui-layouts.com/components/linear-card\n\ninterface DialogContextType {\n\tisOpen: boolean;\n\tsetIsOpen: React.Dispatch<React.SetStateAction<boolean>>;\n\tuniqueId: string;\n\ttriggerRef: React.RefObject<HTMLDivElement>;\n}\n\nconst DialogContext = React.createContext<DialogContextType | null>(null);\n\nfunction useDialog() {\n\tconst context = useContext(DialogContext);\n\tif (!context) {\n\t\tthrow new Error(\"useDialog must be used within a DialogProvider\");\n\t}\n\treturn context;\n}\n\ntype DialogProviderProps = {\n\tchildren: React.ReactNode;\n\ttransition?: Transition;\n};\n\nfunction DialogProvider({ children, transition }: DialogProviderProps) {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst uniqueId = useId();\n\tconst triggerRef = useRef<HTMLDivElement>(null);\n\n\tconst contextValue = useMemo(\n\t\t() => ({ isOpen, setIsOpen, uniqueId, triggerRef }),\n\t\t[isOpen, uniqueId]\n\t);\n\n\treturn (\n\t\t<DialogContext.Provider value={contextValue}>\n\t\t\t<MotionConfig transition={transition}>{children}</MotionConfig>\n\t\t</DialogContext.Provider>\n\t);\n}\n\ntype DialogProps = {\n\tchildren: React.ReactNode;\n\ttransition?: Transition;\n};\n\nfunction Dialog({ children, transition }: DialogProps) {\n\treturn (\n\t\t<DialogProvider>\n\t\t\t<MotionConfig transition={transition}>{children}</MotionConfig>\n\t\t</DialogProvider>\n\t);\n}\n\ntype DialogTriggerProps = {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n\ttriggerRef?: React.RefObject<HTMLDivElement>;\n};\n\nfunction DialogTrigger({\n\tchildren,\n\tclassName,\n\tstyle,\n\ttriggerRef,\n}: DialogTriggerProps) {\n\tconst { setIsOpen, isOpen, uniqueId } = useDialog();\n\n\tconst handleClick = useCallback(() => {\n\t\tsetIsOpen(!isOpen);\n\t}, [isOpen, setIsOpen]);\n\n\tconst handleKeyDown = useCallback(\n\t\t(event: React.KeyboardEvent) => {\n\t\t\tif (event.key === \"Enter\" || event.key === \" \") {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tsetIsOpen(!isOpen);\n\t\t\t}\n\t\t},\n\t\t[isOpen, setIsOpen]\n\t);\n\n\treturn (\n\t\t<motion.div\n\t\t\tref={triggerRef}\n\t\t\tlayoutId={`dialog-${uniqueId}`}\n\t\t\tclassName={cn(\"relative cursor-pointer\", className)}\n\t\t\tonClick={handleClick}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\tstyle={style}\n\t\t\trole=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-expanded={isOpen}\n\t\t\taria-controls={`dialog-content-${uniqueId}`}\n\t\t>\n\t\t\t{children}\n\t\t</motion.div>\n\t);\n}\n\ntype DialogContent = {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n};\n\nfunction DialogContent({ children, className, style }: DialogContent) {\n\tconst { setIsOpen, isOpen, uniqueId, triggerRef } = useDialog();\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\tconst [firstFocusableElement, setFirstFocusableElement] =\n\t\tuseState<HTMLElement | null>(null);\n\tconst [lastFocusableElement, setLastFocusableElement] =\n\t\tuseState<HTMLElement | null>(null);\n\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\t\tif (event.key === \"Escape\") {\n\t\t\t\tsetIsOpen(false);\n\t\t\t}\n\t\t\tif (event.key === \"Tab\") {\n\t\t\t\tif (!firstFocusableElement || !lastFocusableElement) return;\n\n\t\t\t\tif (event.shiftKey) {\n\t\t\t\t\tif (document.activeElement === firstFocusableElement) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tlastFocusableElement.focus();\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (document.activeElement === lastFocusableElement) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tfirstFocusableElement.focus();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tdocument.addEventListener(\"keydown\", handleKeyDown);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t}, [setIsOpen, firstFocusableElement, lastFocusableElement]);\n\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\tdocument.body.classList.add(\"overflow-hidden\");\n\t\t\tconst focusableElements = containerRef.current?.querySelectorAll(\n\t\t\t\t'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n\t\t\t);\n\t\t\tif (focusableElements && focusableElements.length > 0) {\n\t\t\t\tsetFirstFocusableElement(focusableElements[0] as HTMLElement);\n\t\t\t\tsetLastFocusableElement(\n\t\t\t\t\tfocusableElements[focusableElements.length - 1] as HTMLElement\n\t\t\t\t);\n\t\t\t\t(focusableElements[0] as HTMLElement).focus();\n\t\t\t}\n\t\t\t// Scroll to the top when dialog opens\n\t\t\tif (containerRef.current) {\n\t\t\t\tcontainerRef.current.scrollTop = 0;\n\t\t\t}\n\t\t} else {\n\t\t\tdocument.body.classList.remove(\"overflow-hidden\");\n\t\t\ttriggerRef.current?.focus();\n\t\t}\n\t}, [isOpen, triggerRef]);\n\n\treturn (\n\t\t<>\n\t\t\t<motion.div\n\t\t\t\tref={containerRef}\n\t\t\t\tlayoutId={`dialog-${uniqueId}`}\n\t\t\t\tclassName={cn(\"overflow-hidden\", className)}\n\t\t\t\tstyle={style}\n\t\t\t\trole=\"dialog\"\n\t\t\t\taria-modal=\"true\"\n\t\t\t\taria-labelledby={`dialog-title-${uniqueId}`}\n\t\t\t\taria-describedby={`dialog-description-${uniqueId}`}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</motion.div>\n\t\t</>\n\t);\n}\n\ntype DialogContainerProps = {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n};\n\nfunction DialogContainer({ children, className }: DialogContainerProps) {\n\tconst { isOpen, setIsOpen, uniqueId } = useDialog();\n\tconst [mounted, setMounted] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (isOpen) {\n\t\t\twindow.scrollTo(0, 0);\n\t\t}\n\t\tsetMounted(true);\n\t\treturn () => setMounted(false);\n\t}, []);\n\n\tif (!mounted) return null;\n\t// createPortal(\n\treturn (\n\t\t<AnimatePresence initial={false} mode=\"sync\">\n\t\t\t{isOpen && (\n\t\t\t\t<>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tkey={`backdrop-${uniqueId}`}\n\t\t\t\t\t\tclassName=\"fixed inset-0 h-full z-50  w-full bg-background/40 backdrop-blur-xs dark:bg-background/40 \"\n\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\tonClick={() => setIsOpen(false)}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(`fixed  inset-0 z-50 w-fit mx-auto`, className)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AnimatePresence>\n\t);\n\t//   document.body\n\t// )\n}\n\ntype DialogTitleProps = {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n};\n\nfunction DialogTitle({ children, className, style }: DialogTitleProps) {\n\tconst { uniqueId } = useDialog();\n\n\treturn (\n\t\t<motion.div\n\t\t\tlayoutId={`dialog-title-container-${uniqueId}`}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t\tlayout\n\t\t>\n\t\t\t{children}\n\t\t</motion.div>\n\t);\n}\n\ntype DialogSubtitleProps = {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n};\n\nfunction DialogSubtitle({ children, className, style }: DialogSubtitleProps) {\n\tconst { uniqueId } = useDialog();\n\n\treturn (\n\t\t<motion.div\n\t\t\tlayoutId={`dialog-subtitle-container-${uniqueId}`}\n\t\t\tclassName={className}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{children}\n\t\t</motion.div>\n\t);\n}\n\ntype DialogDescriptionProps = {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tdisableLayoutAnimation?: boolean;\n\tvariants?: {\n\t\tinitial: Variant;\n\t\tanimate: Variant;\n\t\texit: Variant;\n\t};\n};\n\nfunction DialogDescription({\n\tchildren,\n\tclassName,\n\tvariants,\n\tdisableLayoutAnimation,\n}: DialogDescriptionProps) {\n\tconst { uniqueId } = useDialog();\n\n\treturn (\n\t\t<motion.div\n\t\t\tkey={`dialog-description-${uniqueId}`}\n\t\t\tlayoutId={\n\t\t\t\tdisableLayoutAnimation\n\t\t\t\t\t? undefined\n\t\t\t\t\t: `dialog-description-content-${uniqueId}`\n\t\t\t}\n\t\t\tvariants={variants}\n\t\t\tclassName={className}\n\t\t\tinitial=\"initial\"\n\t\t\tanimate=\"animate\"\n\t\t\texit=\"exit\"\n\t\t\tid={`dialog-description-${uniqueId}`}\n\t\t>\n\t\t\t{children}\n\t\t</motion.div>\n\t);\n}\n\ntype DialogImageProps = {\n\tsrc: string;\n\talt: string;\n\tclassName?: string;\n\tstyle?: React.CSSProperties;\n};\n\nfunction DialogImage({ src, alt, className, style }: DialogImageProps) {\n\tconst { uniqueId } = useDialog();\n\n\treturn (\n\t\t<motion.img\n\t\t\tsrc={src}\n\t\t\talt={alt}\n\t\t\tclassName={cn(className)}\n\t\t\tlayoutId={`dialog-img-${uniqueId}`}\n\t\t\tstyle={style}\n\t\t/>\n\t);\n}\n\ntype DialogCloseProps = {\n\tchildren?: React.ReactNode;\n\tclassName?: string;\n\tvariants?: {\n\t\tinitial: Variant;\n\t\tanimate: Variant;\n\t\texit: Variant;\n\t};\n};\n\nfunction DialogClose({ children, className, variants }: DialogCloseProps) {\n\tconst { setIsOpen, uniqueId } = useDialog();\n\n\tconst handleClose = useCallback(() => {\n\t\tsetIsOpen(false);\n\t}, [setIsOpen]);\n\n\treturn (\n\t\t<motion.button\n\t\t\tonClick={handleClose}\n\t\t\ttype=\"button\"\n\t\t\taria-label=\"Close dialog\"\n\t\t\tkey={`dialog-close-${uniqueId}`}\n\t\t\tclassName={cn(\"absolute right-6 top-6\", className)}\n\t\t\tinitial=\"initial\"\n\t\t\tanimate=\"animate\"\n\t\t\texit=\"exit\"\n\t\t\tvariants={variants}\n\t\t>\n\t\t\t{children || <XIcon size={24} />}\n\t\t</motion.button>\n\t);\n}\n\nexport {\n\tDialog,\n\tDialogTrigger,\n\tDialogContainer,\n\tDialogContent,\n\tDialogClose,\n\tDialogTitle,\n\tDialogSubtitle,\n\tDialogDescription,\n\tDialogImage,\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}