{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "dependencies": [
    "react-aria-components",
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "@seamless/utils",
    "@seamless/button"
  ],
  "files": [
    {
      "path": "src/components/ui/dialog.tsx",
      "content": "import type * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { XIcon } from \"lucide-react\"\nimport {\n  Heading,\n  ModalOverlay as ModalOverlayPrimitive,\n  Modal as ModalPrimitive,\n  Dialog as DialogPrimitive,\n  DialogTrigger as DialogTriggerPrimitive,\n  type ModalOverlayProps as ModalOverlayPrimitiveProps,\n  type DialogTriggerProps as DialogTriggerPrimitiveProps,\n} from \"react-aria-components\"\n\nimport { cn, type Composed } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nfunction DialogTrigger({ ...props }: DialogTriggerPrimitiveProps) {\n  return <DialogTriggerPrimitive data-slot=\"dialog-trigger\" {...props} />\n}\n\nconst dialogVariants = cva(\n  \"relative flex max-h-full w-full flex-col rounded-[14px] border border-border bg-popover bg-clip-padding text-sm text-popover-foreground shadow-float transition duration-300 ease-brand data-entering:translate-y-4 data-entering:opacity-0 data-exiting:translate-y-4 data-exiting:opacity-0\",\n  {\n    variants: {\n      size: {\n        sm: \"sm:max-w-sm\",\n        md: \"sm:max-w-md\",\n        lg: \"sm:max-w-lg\",\n        xl: \"sm:max-w-2xl\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\ntype DialogProps = Composed<ModalOverlayPrimitiveProps> &\n  VariantProps<typeof dialogVariants> & {\n    children: React.ReactNode\n    showCloseButton?: boolean\n  }\n\n/**\n * NOTE: the layered sibling of Sheet — same backdrop, same curve, same elevation, centred instead of\n * anchored. A Sheet is for a surface you work IN; a Dialog is for one decision you make and dismiss.\n *\n * CONSTRAINT: one at a time. Two stacked modals leave no way back to the first, and the POC's world\n * allows exactly one layer above the page.\n */\nfunction Dialog({\n  className,\n  children,\n  size = \"md\",\n  showCloseButton = true,\n  ...props\n}: DialogProps) {\n  return (\n    <ModalOverlayPrimitive\n      data-slot=\"dialog-overlay\"\n      isDismissable\n      className=\"fixed inset-0 z-50 flex items-center justify-center overflow-y-auto p-6 bg-foreground/50 transition-opacity duration-150 data-entering:opacity-0 data-exiting:opacity-0 supports-backdrop-filter:backdrop-blur-[3px]\"\n      {...props}\n    >\n      <ModalPrimitive\n        data-slot=\"dialog-content\"\n        data-size={size}\n        className={cn(dialogVariants({ size }), className)}\n      >\n        <DialogPrimitive\n          data-slot=\"dialog\"\n          className=\"[display:inherit] max-h-[inherit] [flex-direction:inherit] outline-none\"\n        >\n          {children}\n          {showCloseButton && (\n            <DialogClose variant=\"ghost\" size=\"icon-sm\" className=\"absolute top-3 right-3\">\n              <XIcon />\n              <span className=\"sr-only\">Close</span>\n            </DialogClose>\n          )}\n        </DialogPrimitive>\n      </ModalPrimitive>\n    </ModalOverlayPrimitive>\n  )\n}\n\nfunction DialogClose({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      slot=\"close\"\n      data-slot=\"dialog-close\"\n      variant={variant}\n      size={size}\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-none flex-col gap-1 px-5 pt-4 pb-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof Heading>, \"slot\">) {\n  return (\n    <Heading\n      slot=\"title\"\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"font-heading text-[15px] font-[650] tracking-[-0.01em] text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"dialog-description\"\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\n/** CONSTRAINT: the body owns the scroll — the header and footer stay put while a long form moves. */\nfunction DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-body\"\n      className={cn(\"min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-1\", className)}\n      {...props}\n    />\n  )\n}\n\n/** NOTE: the decision sits at the end of the reading order and at the end of the box. */\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-none items-center justify-end gap-2 border-t border-border-soft px-5 py-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n  dialogVariants,\n  type DialogProps,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}