{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "type": "registry:item",
  "title": "Dialog",
  "description": "A modal dialog component.",
  "files": [
    {
      "path": "registry/brook/ui/dialog/dialog.tsx",
      "content": "\"use client\";\n\nimport { Dialog } from \"@base-ui/react/dialog\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport styles from \"./dialog.module.css\";\n\nfunction DialogRoot({ ...props }: Dialog.Root.Props) {\n  return <Dialog.Root {...props} />;\n}\n\nfunction DialogTrigger({ ...props }: Dialog.Trigger.Props) {\n  return <Dialog.Trigger {...props} />;\n}\n\nconst DialogPortal = Dialog.Portal;\n\nfunction DialogOverlay({ className, ...props }: Dialog.Backdrop.Props) {\n  return <Dialog.Backdrop className={cn(styles.overlay, className)} data-slot=\"dialog-backdrop\" {...props} />;\n}\n\nfunction DialogPopup({ className, ...props }: Dialog.Popup.Props) {\n  return <Dialog.Popup className={cn(styles.content, className)} data-slot=\"dialog-popup\" {...props} />;\n}\n\nfunction DialogTitle({ className, ...props }: Dialog.Title.Props) {\n  return <Dialog.Title className={cn(styles.title, className)} {...props} />;\n}\n\nfunction DialogDescription({ className, ...props }: Dialog.Description.Props) {\n  return <Dialog.Description className={cn(styles.description, className)} data-slot=\"dialog-description\" {...props} />;\n}\n\nfunction DialogClose({ ...props }: Dialog.Close.Props) {\n  return <Dialog.Close {...props} />;\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.header, className)} {...props} />;\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.footer, className)} {...props} />;\n}\n\nexport {\n  DialogRoot as Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPopup,\n  DialogPortal,\n  DialogRoot,\n  DialogTitle,\n  DialogTrigger,\n};\n",
      "type": "registry:file",
      "target": "~/components/ui/dialog/dialog.tsx"
    },
    {
      "path": "registry/brook/ui/dialog/dialog.module.css",
      "content": ".overlay {\n  position: fixed;\n  inset: 0;\n  z-index: var(--dialog-z);\n  background-color: var(--dialog-overlay);\n  transition: opacity 150ms;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n  }\n}\n\n.content {\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  z-index: 101;\n  display: grid;\n  width: 100%;\n  overflow-y: auto;\n  gap: 1rem;\n  border: none;\n  background-color: var(--mix-card-5-bg);\n  padding: 1.5rem;\n  border-radius: var(--radius);\n  box-shadow:\n    0 0 0 1px oklch(from var(--border) l c h / 0.5),\n    var(--shadow-border-stack);\n  transform: translate(-50%, -50%);\n  transition: all 150ms;\n\n  &[data-starting-style],\n  &[data-ending-style] {\n    opacity: 0;\n    transform: translate(-50%, -50%) scale(0.95);\n  }\n\n  @media (max-width: 640px) {\n    width: calc(100vw - 2rem);\n    max-width: none;\n  }\n}\n\n.close {\n  position: absolute;\n  right: 1rem;\n  top: 1rem;\n  border-radius: 0.25rem;\n  opacity: 0.7;\n  background: transparent;\n  border: none;\n  padding: 0.25rem;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.5rem;\n  height: 1.5rem;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--ring);\n    outline-offset: 2px;\n  }\n\n  & svg {\n    width: 1rem;\n    height: 1rem;\n  }\n}\n\n.header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.375rem;\n\n  & h2 {\n    margin: 0;\n  }\n\n  & p {\n    margin: 0;\n  }\n}\n\n.footer {\n  display: flex;\n  flex-direction: column-reverse;\n  gap: 0.5rem;\n\n  & > :last-child {\n    margin-top: 0.5rem;\n  }\n\n  @media (min-width: 640px) {\n    flex-direction: row;\n    justify-content: flex-end;\n\n    & > :last-child {\n      margin-top: 0;\n    }\n  }\n}\n\n.title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: -0.008em;\n  color: var(--foreground);\n  margin: 0;\n}\n\n.description {\n  font-size: 0.875rem;\n  color: var(--muted-foreground);\n  margin: 0;\n  line-height: 1.5;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/dialog/dialog.module.css"
    }
  ]
}