{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "dialog",
  "title": "dialog",
  "description": "dialog",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive",
    "https://intentui.com/r/button"
  ],
  "files": [
    {
      "path": "src/components/ui/dialog.tsx",
      "content": "\"use client\"\n\nimport { XMarkIcon } from \"@heroicons/react/20/solid\"\nimport { Button as PrimitiveButton } from \"react-aria-components/Button\"\nimport {\n  DialogTrigger as DialogTriggerPrimitive,\n  Dialog as PrimitiveDialog,\n  type DialogProps as DialogPrimitiveProps,\n} from \"react-aria-components/Dialog\"\nimport { Heading, type HeadingProps } from \"react-aria-components/Heading\"\nimport { cn } from \"cn\"\nimport { cx } from \"@/lib/primitive\"\nimport { Button, type ButtonProps } from \"./button\"\nimport { Modal, ModalOverlay, type ModalOverlayProps } from \"react-aria-components/Modal\"\n\nexport const DialogTrigger = DialogTriggerPrimitive\n\nconst sizes = {\n  \"2xs\": \"sm:max-w-2xs\",\n  xs: \"sm:max-w-xs\",\n  sm: \"sm:max-w-sm\",\n  md: \"sm:max-w-md\",\n  lg: \"sm:max-w-lg\",\n  xl: \"sm:max-w-xl\",\n  \"2xl\": \"sm:max-w-2xl\",\n  \"3xl\": \"sm:max-w-3xl\",\n  \"4xl\": \"sm:max-w-4xl\",\n  \"5xl\": \"sm:max-w-5xl\",\n  fullscreen: \"\",\n}\n\nexport interface DialogProps\n  extends\n    Omit<ModalOverlayProps, \"children\">,\n    Pick<DialogPrimitiveProps, \"aria-label\" | \"aria-labelledby\" | \"role\" | \"children\"> {\n  size?: keyof typeof sizes\n  closeButton?: boolean\n  overlay?: Pick<ModalOverlayProps, \"className\">\n}\nexport function Dialog({\n  className,\n  isDismissable: isDismissableInternal,\n  children,\n  overlay,\n  size = \"md\",\n  role = \"dialog\",\n  closeButton = true,\n  ...props\n}: DialogProps) {\n  const isDismissable = isDismissableInternal ?? role !== \"alertdialog\"\n  return (\n    <ModalOverlay\n      data-slot=\"dialog-overlay\"\n      isDismissable={isDismissable}\n      className={cx(\n        \"fixed top-0 left-0 z-50 h-(--visual-viewport-height,100dvh) w-(--visual-viewport-width,100vw) overflow-clip sm:absolute sm:h-[max(var(--page-height),100dvh)] sm:w-[max(var(--page-width),100vw)]\",\n        \"bg-background/15 backdrop-blur-[1px] motion-reduce:backdrop-blur-none\",\n        \"entering:fade-in entering:animate-in entering:duration-300 entering:ease-out\",\n        \"exiting:fade-out exiting:animate-out exiting:fill-mode-forwards exiting:ease-in\",\n        overlay?.className\n      )}\n      {...props}\n    >\n      <div\n        className={cn(\n          \"sticky top-0 flex h-(--visual-viewport-height,100dvh) w-(--visual-viewport-width,100vw) flex-col items-center justify-end sm:grid sm:grid-rows-[1fr_auto_3fr] sm:justify-normal sm:justify-items-center\",\n          size === \"fullscreen\" ? \"md:p-3\" : \"md:p-4\"\n        )}\n      >\n        <Modal\n          data-slot=\"dialog-content\"\n          className={cx(\n            \"row-start-2 w-full text-start align-middle\",\n            \"[--visual-viewport-vertical-padding:16px]\",\n            size === \"fullscreen\"\n              ? \"**:data-[slot=dialog-body]:min-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding)-var(--dialog-header-height)-var(--dialog-footer-height))] sm:[--visual-viewport-vertical-padding:16px]\"\n              : \"sm:[--visual-viewport-vertical-padding:32px]\",\n            \"relative overflow-hidden bg-overlay text-overlay-foreground\",\n            \"inset-shadow-xs rounded-t-2xl ring ring-muted-foreground/25 drop-shadow-xl sm:rounded-2xl dark:ring-border\",\n            sizes[size],\n            \"entering:slide-in-from-bottom sm:entering:zoom-in-95 sm:entering:slide-in-from-bottom-0 entering:animate-in entering:duration-300 entering:ease-out\",\n            \"exiting:slide-out-to-bottom sm:exiting:zoom-out-95 sm:exiting:slide-out-to-bottom-0 exiting:animate-out exiting:fill-mode-forwards exiting:ease-in\",\n            className\n          )}\n        >\n          <PrimitiveDialog\n            aria-label={props[\"aria-label\"] ?? undefined}\n            aria-labelledby={props[\"aria-labelledby\"]}\n            data-slot=\"dialog\"\n            role={role}\n            className={cn(\n              \"peer/dialog group/dialog relative flex max-h-[calc(var(--visual-viewport-height)-var(--visual-viewport-vertical-padding))] flex-col overflow-hidden outline-hidden [--gutter:--spacing(6)] sm:[--gutter:--spacing(8)]\",\n              className\n            )}\n          >\n            {(values) => (\n              <>\n                {typeof children === \"function\" ? children(values) : children}\n                {closeButton && <DialogCloseIcon isDismissable={isDismissable} />}\n              </>\n            )}\n          </PrimitiveDialog>\n        </Modal>\n      </div>\n    </ModalOverlay>\n  )\n}\n\nexport interface DialogHeaderProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  title?: string\n  description?: string\n}\n\nexport function DialogHeader({ className, ...props }: DialogHeaderProps) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\n        \"relative space-y-1 p-(--gutter) pb-[calc(var(--gutter)---spacing(3))]\",\n        className\n      )}\n    >\n      {props.title && <DialogTitle>{props.title}</DialogTitle>}\n      {props.description && <DialogDescription>{props.description}</DialogDescription>}\n      {!props.title && typeof props.children === \"string\" ? (\n        <DialogTitle>{props.children}</DialogTitle>\n      ) : (\n        props.children\n      )}\n    </div>\n  )\n}\n\nexport function DialogTitle({ className, ...props }: HeadingProps) {\n  return (\n    <Heading\n      slot=\"title\"\n      className={cn(\n        \"text-balance font-semibold text-foreground text-lg/6 sm:text-base/6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function DialogDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <p\n      data-slot=\"description\"\n      className={cn(\n        \"text-pretty text-base/6 text-muted-foreground group-disabled:opacity-50 sm:text-sm/6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-body\"\n      className={cn(\n        \"isolate flex min-h-0 flex-1 flex-col overflow-auto px-(--gutter) py-1\",\n        \"**:data-[slot=dialog-footer]:px-0 **:data-[slot=dialog-footer]:pt-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface DialogFooterProps extends React.ComponentProps<\"div\"> {}\nexport function DialogFooter({ className, ...props }: DialogFooterProps) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"isolate mt-auto flex flex-col-reverse justify-end gap-3 p-(--gutter) pt-[calc(var(--gutter)---spacing(2))] group-not-has-data-[slot=dialog-body]/dialog:pt-0 group-not-has-data-[slot=dialog-body]/popover:pt-0 sm:flex-row\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function DialogClose({ intent = \"plain\", ref, ...props }: ButtonProps) {\n  return <Button slot=\"close\" ref={ref} intent={intent} {...props} />\n}\n\nexport interface CloseButtonIndicatorProps extends Omit<ButtonProps, \"children\"> {\n  className?: string\n  isDismissable?: boolean | undefined\n}\n\nexport function DialogCloseIcon({ className, ...props }: CloseButtonIndicatorProps) {\n  return props.isDismissable ? (\n    <PrimitiveButton\n      aria-label=\"Close dialog\"\n      slot=\"close\"\n      className={cx(\n        \"close absolute isolate end-1 top-1 z-50 grid size-8 place-content-center rounded-xl hover:bg-secondary focus:bg-secondary focus:outline-hidden focus-visible:ring-1 focus-visible:ring-primary sm:end-2 sm:top-2 sm:size-7 sm:rounded-md\",\n        className\n      )}\n    >\n      <XMarkIcon className=\"size-4\" />\n    </PrimitiveButton>\n  ) : null\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "color-overlay": "var(--overlay)",
      "color-overlay-foreground": "var(--overlay-foreground)"
    },
    "light": {
      "overlay": "oklch(1 0 0)",
      "overlay-foreground": "oklch(0.141 0.005 285.823)"
    },
    "dark": {
      "overlay": "oklch(0.210 0.006 285.885)",
      "overlay-foreground": "oklch(0.985 0 0)"
    }
  },
  "type": "registry:ui"
}