{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "modal",
  "title": "Modal",
  "description": "A dialog overlay for focused interactions like confirmations, forms, and detail views.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "packages/ui/src/modal.tsx",
      "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X as XIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"./button\";\nimport { cn } from \"./utils\";\n\n// =============================================================================\n// Modal (Root)\n// =============================================================================\nfunction Modal({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"modal\" {...props} />;\n}\n\n// =============================================================================\n// ModalTrigger\n// =============================================================================\nexport interface ModalTriggerProps extends DialogPrimitive.Trigger.Props {}\n\nfunction ModalTrigger({ className, ...props }: ModalTriggerProps) {\n  return (\n    <DialogPrimitive.Trigger\n      className={className}\n      data-slot=\"modal-trigger\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// ModalPortal\n// =============================================================================\nexport interface ModalPortalProps extends DialogPrimitive.Portal.Props {}\n\nfunction ModalPortal({ ...props }: ModalPortalProps) {\n  return <DialogPrimitive.Portal data-slot=\"modal-portal\" {...props} />;\n}\n\n// =============================================================================\n// ModalClose\n// =============================================================================\nexport interface ModalCloseProps extends DialogPrimitive.Close.Props {}\n\nfunction ModalClose({ className, ...props }: ModalCloseProps) {\n  return (\n    <DialogPrimitive.Close\n      className={className}\n      data-slot=\"modal-close\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// ModalOverlay\n// =============================================================================\nexport interface ModalOverlayProps extends DialogPrimitive.Backdrop.Props {}\n\nfunction ModalOverlay({ className, ...props }: ModalOverlayProps) {\n  return (\n    <DialogPrimitive.Backdrop\n      className={cn(\"fixed inset-0 z-[var(--z-modal)] bg-black/50\", className)}\n      data-slot=\"modal-overlay\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// ModalContent Variants\n// =============================================================================\nconst modalContentVariants = cva(\n  \"fixed top-[50%] left-[50%] z-[var(--z-modal)] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg bg-background p-6 shadow-lg outline-none\",\n  {\n    variants: {\n      size: {\n        sm: \"sm:max-w-sm\",\n        default: \"sm:max-w-lg\",\n        lg: \"sm:max-w-2xl\",\n        xl: \"sm:max-w-4xl\",\n        full: \"sm:max-w-[calc(100vw-2rem)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n);\n\ntype ModalContentVariantsProps = VariantProps<typeof modalContentVariants>;\n\n// =============================================================================\n// ModalContent\n// =============================================================================\nexport interface ModalContentProps\n  extends DialogPrimitive.Popup.Props,\n    ModalContentVariantsProps {\n  /**\n   * Where scrolling happens when content exceeds the viewport.\n   * - `\"outside\"` — the entire viewport scrolls, modal grows to fit (default)\n   * - `\"inside\"` — content scrolls within the modal\n   * @default \"outside\"\n   */\n  scrollBehavior?: \"inside\" | \"outside\";\n  /**\n   * Whether to show the close button in the top-right corner.\n   * @default true\n   */\n  showCloseButton?: boolean;\n}\n\nfunction ModalContent({\n  className,\n  children,\n  size = \"default\",\n  showCloseButton = true,\n  scrollBehavior = \"outside\",\n  ...props\n}: ModalContentProps) {\n  // When scrolling outside, focus the popup container itself on open\n  // instead of the first tabbable element. Without this, Base UI focuses\n  // the first button (often at the bottom of long content), and the browser\n  // auto-scrolls the overflow wrapper to reveal it — jumping to the bottom.\n  const popupRef = React.useRef<HTMLDivElement>(null);\n\n  const closeButton = showCloseButton && (\n    <DialogPrimitive.Close\n      className=\"absolute top-4 right-4\"\n      data-slot=\"modal-close\"\n      render={<Button size=\"icon-xs\" variant=\"ghost\" />}\n    >\n      <XIcon />\n      <span className=\"sr-only\">Close</span>\n    </DialogPrimitive.Close>\n  );\n\n  const popup = (\n    <DialogPrimitive.Popup\n      className={cn(\n        modalContentVariants({ size }),\n        scrollBehavior === \"outside\" &&\n          \"relative top-auto left-auto translate-x-0 translate-y-0\",\n        className\n      )}\n      data-slot=\"modal-content\"\n      ref={popupRef}\n      {...(scrollBehavior === \"outside\" && { initialFocus: popupRef })}\n      {...props}\n    >\n      {children}\n      {closeButton}\n    </DialogPrimitive.Popup>\n  );\n\n  if (scrollBehavior === \"outside\") {\n    return (\n      <ModalPortal>\n        <ModalOverlay />\n        <div\n          className=\"fixed inset-0 z-[var(--z-modal)] overflow-y-auto\"\n          data-slot=\"modal-scroll-wrapper\"\n        >\n          <div className=\"flex min-h-full items-center justify-center p-4\">\n            {popup}\n          </div>\n        </div>\n      </ModalPortal>\n    );\n  }\n\n  return (\n    <ModalPortal>\n      <ModalOverlay />\n      {popup}\n    </ModalPortal>\n  );\n}\n\n// =============================================================================\n// ModalHeader\n// =============================================================================\nexport interface ModalHeaderProps extends React.ComponentProps<\"div\"> {}\n\nfunction ModalHeader({ className, ...props }: ModalHeaderProps) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      data-slot=\"modal-header\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// ModalFooter\n// =============================================================================\nexport interface ModalFooterProps extends React.ComponentProps<\"div\"> {\n  /**\n   * Whether to show a \"Close\" outline button at the end of the footer.\n   * @default false\n   */\n  showCloseButton?: boolean;\n}\n\nfunction ModalFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: ModalFooterProps) {\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=\"modal-footer\"\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  );\n}\n\n// =============================================================================\n// ModalTitle\n// =============================================================================\nexport interface ModalTitleProps extends DialogPrimitive.Title.Props {}\n\nfunction ModalTitle({ className, ...props }: ModalTitleProps) {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\"font-semibold text-lg leading-none\", className)}\n      data-slot=\"modal-title\"\n      {...props}\n    />\n  );\n}\n\n// =============================================================================\n// ModalDescription\n// =============================================================================\nexport interface ModalDescriptionProps\n  extends DialogPrimitive.Description.Props {}\n\nfunction ModalDescription({ className, ...props }: ModalDescriptionProps) {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"modal-description\"\n      {...props}\n    />\n  );\n}\n\nexport type { ModalContentVariantsProps };\n// =============================================================================\n// Exports\n// =============================================================================\nexport {\n  Modal,\n  ModalClose,\n  ModalContent,\n  ModalDescription,\n  ModalFooter,\n  ModalHeader,\n  ModalOverlay,\n  ModalPortal,\n  ModalTitle,\n  ModalTrigger,\n  modalContentVariants,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}