{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "title": "Dialog",
  "author": "@fma-ui/ui",
  "description": "A modal window layered over the page, requiring explicit action (or Escape) to dismiss. Pair with react-aria-components' DialogTrigger to wire up the trigger and open state.",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0",
    "react-aria-components@^1.21.1"
  ],
  "registryDependencies": [
    "@fma-ui/button"
  ],
  "files": [
    {
      "path": "src/core/dialog/dialog.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"cn\";\nimport { XIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport {\n  Dialog as DialogPrimitive,\n  type DialogProps as DialogPrimitiveProps,\n  DialogTrigger as DialogTriggerPrimitive,\n  type DialogTriggerProps as DialogTriggerPrimitiveProps,\n  Heading,\n  ModalOverlay as ModalOverlayPrimitive,\n  type ModalOverlayProps as ModalOverlayPrimitiveProps,\n  Modal as ModalPrimitive,\n} from \"react-aria-components\";\nimport { Button } from \"@/core/button/button\";\n\nfunction DialogTrigger({ ...props }: DialogTriggerPrimitiveProps) {\n  return <DialogTriggerPrimitive data-slot=\"dialog-trigger\" {...props} />;\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 DialogOverlay({\n  className,\n  children,\n  ...props\n}: Omit<ModalOverlayPrimitiveProps, \"className\" | \"children\"> & {\n  className?: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <ModalOverlayPrimitive\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 data-entering:animate-in data-entering:fade-in-0 data-exiting:animate-out data-exiting:fade-out-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </ModalOverlayPrimitive>\n  );\n}\n\nfunction Dialog({\n  className,\n  children,\n  showCloseButton = true,\n  isDismissable = true,\n  ...props\n}: Omit<ModalOverlayPrimitiveProps, \"className\" | \"children\"> &\n  Pick<React.ComponentProps<typeof ModalPrimitive>, \"isDismissable\"> & {\n    className?: string;\n    children: React.ReactNode;\n    showCloseButton?: boolean;\n  }) {\n  return (\n    <DialogOverlay isDismissable={isDismissable} {...props}>\n      <ModalPrimitive\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-entering:animate-in data-entering:fade-in-0 data-entering:zoom-in-95 data-exiting:animate-out data-exiting:fade-out-0 data-exiting:zoom-out-95 sm:max-w-sm\",\n          className,\n        )}\n      >\n        <DialogPrimitive\n          data-slot=\"dialog\"\n          className=\"[display:inherit] [gap:inherit] outline-none\"\n        >\n          {children}\n          {showCloseButton && (\n            <DialogClose variant=\"ghost\" className=\"absolute top-2 right-2\" size=\"icon-sm\">\n              <XIcon />\n              <span className=\"sr-only\">Close</span>\n            </DialogClose>\n          )}\n        </DialogPrimitive>\n      </ModalPrimitive>\n    </DialogOverlay>\n  );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"dialog-header\" className={cn(\"flex flex-col gap-2\", className)} {...props} />\n  );\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && <DialogClose variant=\"outline\">Close</DialogClose>}\n    </div>\n  );\n}\n\nfunction DialogTitle({ className, ...props }: Omit<React.ComponentProps<typeof Heading>, \"slot\">) {\n  return (\n    <Heading\n      slot=\"title\"\n      data-slot=\"dialog-title\"\n      className={cn(\"font-heading text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({ className, ...props }: Omit<React.ComponentProps<\"div\">, \"slot\">) {\n  return (\n    <div\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  type DialogPrimitiveProps,\n  DialogTitle,\n  DialogTrigger,\n  type DialogTriggerPrimitiveProps,\n};\n",
      "type": "registry:component",
      "target": "components/fma-ui/dialog.tsx"
    }
  ],
  "meta": {
    "status": "stable",
    "source": "shadcn",
    "tags": [
      "react-aria",
      "modal",
      "overlay"
    ]
  },
  "categories": [
    "overlay"
  ],
  "type": "registry:ui"
}