{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "title": "Dialog",
  "description": "A popup that opens on top of the entire page.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "@lumi-ui/button"
  ],
  "files": [
    {
      "path": "registry/ui/dialog.tsx",
      "content": "\"use client\";\n\nimport { Dialog as BaseDialog } from \"@base-ui/react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { XIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Button } from \"@/registry/ui/button\";\n\nfunction Dialog<Payload>({ ...props }: BaseDialog.Root.Props<Payload>) {\n  return <BaseDialog.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger<Payload>({\n  ...props\n}: BaseDialog.Trigger.Props<Payload>) {\n  return <BaseDialog.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogPortal({ ...props }: BaseDialog.Portal.Props) {\n  return <BaseDialog.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogViewport({ className, ...props }: BaseDialog.Viewport.Props) {\n  return (\n    <BaseDialog.Viewport\n      className={cn(\"fixed inset-0 outline-none\", className)}\n      data-slot=\"dialog-viewport\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogBackdrop({ className, ...props }: BaseDialog.Backdrop.Props) {\n  return (\n    <BaseDialog.Backdrop\n      className={cn(\n        \"fixed inset-0 min-h-dvh bg-black/20 backdrop-blur-xs animate-fade\",\n        \"supports-[-webkit-touch-callout:none]:absolute\",\n        className,\n      )}\n      data-slot=\"dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogPopup({\n  className,\n  children,\n  ...props\n}: BaseDialog.Popup.Props) {\n  return (\n    <BaseDialog.Popup\n      className={cn(\"bg-background\", className)}\n      data-slot=\"dialog-popup\"\n      {...props}\n    >\n      {children}\n    </BaseDialog.Popup>\n  );\n}\n\nfunction DialogClose({ ...props }: BaseDialog.Close.Props) {\n  return <BaseDialog.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogTitle({ className, ...props }: BaseDialog.Title.Props) {\n  return (\n    <BaseDialog.Title\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: BaseDialog.Description.Props) {\n  return (\n    <BaseDialog.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      data-slot=\"dialog-header\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      data-slot=\"dialog-footer\"\n      {...props}\n    />\n  );\n}\n\nconst viewportVariants = cva(\"fixed inset-0\", {\n  defaultVariants: {\n    layout: \"center\",\n  },\n  variants: {\n    layout: {\n      center: \"grid place-items-center p-4\",\n      \"element-outside\": cn(\n        \"flex flex-col items-center justify-center\",\n        // padding between viewport and content\n        \"px-4 py-12 sm:py-16\",\n      ),\n      responsive: \"flex items-end sm:items-center justify-center sm:p-4\",\n      scrollable: cn(\n        \"flex items-center justify-center overflow-hidden\",\n        // padding between viewport and content\n        \"py-6 [@media(min-height:600px)]:pb-12 [@media(min-height:600px)]:pt-8\",\n      ),\n      stacked: \"contents\",\n      top: cn(\n        \"grid grid-rows-[1fr_auto_3fr] justify-items-center\",\n        // padding between viewport and content\n        \"p-4\",\n      ),\n    },\n  },\n});\n\nconst popupVariants = cva(\n  \"bg-background rounded-md p-4 sm:p-6 shadow-md dark:shadow-xs overlay-outline\",\n  {\n    defaultVariants: {\n      layout: \"center\",\n    },\n    variants: {\n      layout: {\n        center:\n          \"relative grid w-full gap-4 shadow-lg max-w-lg rounded-lg animate-fade-zoom\",\n        \"element-outside\":\n          \"flex h-full w-full justify-center pointer-events-none p-0 bg-transparent outline-0 animate-fade\",\n        responsive: cn(\n          \"relative grid gap-4 shadow-lg w-full rounded-t-[1.25rem] rounded-b-none border-t\",\n          \"px-6 pb-8 pt-6 sm:max-w-lg sm:rounded-lg sm:px-6 sm:pb-6 sm:pt-6 animate-fade\",\n        ),\n        scrollable: cn(\n          \"relative overflow-hidden min-h-0 h-full max-h-full max-w-full\",\n          \"[&>[data-slot=scroll-area-root]]:min-h-0\",\n          \"flex flex-col gap-6 w-[min(40rem,calc(100vw-2rem))] rounded-md animate-fade-zoom\",\n        ),\n        stacked: cn(\n          \"fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2\",\n          \"grid gap-4 w-full max-w-[calc(100vw-2rem)] sm:max-w-lg rounded animate-fade\",\n          \"top-[calc(50%+0.75rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))]\",\n          \"data-nested-dialog-open:after:absolute data-nested-dialog-open:after:inset-0 data-nested-dialog-open:after:rounded-[inherit] data-nested-dialog-open:after:bg-black/5\",\n        ),\n        top: \"relative grid w-full gap-4 shadow-xl max-w-lg rounded-md animate-fade-down\",\n      },\n    },\n  },\n);\n\ntype DialogContentProps = BaseDialog.Popup.Props &\n  VariantProps<typeof popupVariants> & {\n    showCloseButton?: boolean;\n  };\n\nfunction DialogContent({\n  children,\n  className,\n  showCloseButton = false,\n  layout = \"responsive\",\n  ...props\n}: DialogContentProps) {\n  return (\n    <DialogPortal>\n      <DialogBackdrop />\n      <BaseDialog.Viewport className={viewportVariants({ layout })}>\n        <BaseDialog.Popup\n          className={cn(popupVariants({ layout }), className)}\n          data-slot=\"dialog-content\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DialogClose\n              render={\n                <Button\n                  className={cn(\n                    \"absolute right-2 top-2\",\n                    layout === \"responsive\" && \"max-sm:top-5 max-sm:right-5\",\n                  )}\n                  size=\"icon-sm\"\n                  variant=\"outline\"\n                >\n                  <XIcon className=\"size-4\" />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              }\n            />\n          )}\n        </BaseDialog.Popup>\n      </BaseDialog.Viewport>\n    </DialogPortal>\n  );\n}\n\nconst DialogElementOutsideContent = ({\n  className,\n  children,\n  ...props\n}: Omit<DialogContentProps, \"layout\" | \"showCloseButton\">) => {\n  return (\n    <DialogContent layout=\"element-outside\" {...props}>\n      <div\n        className={cn(\n          \"pointer-events-auto h-full w-full flex flex-col\",\n          \"shadow-md rounded bg-background\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </DialogContent>\n  );\n};\n\nconst createDialogHandle = BaseDialog.createHandle;\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogPortal,\n  DialogBackdrop,\n  DialogViewport,\n  DialogPopup,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n  DialogClose,\n  createDialogHandle,\n  popupVariants,\n  viewportVariants,\n  // Composite component\n  DialogContent,\n  DialogElementOutsideContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}