{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog",
  "type": "registry:item",
  "title": "Alert Dialog",
  "description": "A modal dialog that interrupts the user with important content.",
  "files": [
    {
      "path": "registry/brook/ui/alert-dialog/alert-dialog.tsx",
      "content": "\"use client\";\n\nimport { AlertDialog } from \"@base-ui/react/alert-dialog\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport styles from \"./alert-dialog.module.css\";\n\nfunction AlertDialogRoot({ ...props }: AlertDialog.Root.Props) {\n  return <AlertDialog.Root {...props} />;\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialog.Trigger.Props) {\n  return <AlertDialog.Trigger data-slot=\"alert-dialog-trigger\" nativeButton {...props} />;\n}\n\nconst AlertDialogPortal = AlertDialog.Portal;\n\nfunction AlertDialogBackdrop({ className, ...props }: AlertDialog.Backdrop.Props) {\n  return (\n    <AlertDialog.Backdrop className={cn(styles.overlay, className)} data-slot=\"alert-dialog-backdrop\" {...props} />\n  );\n}\n\nfunction AlertDialogPopup({ className, children, ...props }: AlertDialog.Popup.Props) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialog.Popup className={cn(styles.content, className)} data-slot=\"alert-dialog-popup\" {...props}>\n        {children}\n      </AlertDialog.Popup>\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogContent({ className, children, ...props }: AlertDialog.Popup.Props) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogBackdrop />\n      <AlertDialog.Popup className={cn(styles.content, className)} data-slot=\"alert-dialog-popup\" {...props}>\n        {children}\n      </AlertDialog.Popup>\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogTitle({ className, ...props }: AlertDialog.Title.Props) {\n  return <AlertDialog.Title className={cn(styles.title, className)} data-slot=\"alert-dialog-title\" {...props} />;\n}\n\nfunction AlertDialogDescription({ className, ...props }: AlertDialog.Description.Props) {\n  return (\n    <AlertDialog.Description\n      className={cn(styles.description, className)}\n      data-slot=\"alert-dialog-description\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogClose({ ...props }: AlertDialog.Close.Props) {\n  return <AlertDialog.Close data-slot=\"alert-dialog-close\" nativeButton {...props} />;\n}\n\nconst AlertDialogOverlay = AlertDialogBackdrop;\n\nfunction AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.header, className)} data-slot=\"alert-dialog-header\" {...props} />;\n}\n\nfunction AlertDialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(styles.footer, className)} data-slot=\"alert-dialog-footer\" {...props} />;\n}\n\nexport {\n  AlertDialogRoot as AlertDialog,\n  AlertDialogClose,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPopup,\n  AlertDialogPortal,\n  AlertDialogRoot,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n",
      "type": "registry:file",
      "target": "~/components/ui/alert-dialog/alert-dialog.tsx"
    },
    {
      "path": "registry/brook/ui/alert-dialog/alert-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  max-width: 32rem;\n  max-height: 85vh;\n  overflow-y: auto;\n  gap: 1rem;\n  border: none;\n  box-shadow:\n    0 0 0 1px oklch(from var(--border) l c h / 0.5),\n    var(--shadow-border-stack);\n  padding: 1.5rem;\n  border-radius: var(--radius);\n  background-color: var(--mix-card-5-bg);\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    left: 1rem;\n    right: 1rem;\n    top: 50%;\n    transform: translateY(-50%);\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      opacity: 0;\n      transform: translateY(-50%) scale(0.95);\n    }\n  }\n}\n\n.header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  text-align: left;\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  @media (min-width: 640px) {\n    flex-direction: row;\n    justify-content: flex-end;\n  }\n}\n\n.title {\n  font-size: 1.125rem;\n  font-weight: 600;\n  line-height: 1;\n  letter-spacing: -0.025em;\n  color: var(--foreground);\n  margin: 0;\n}\n\n.description {\n  font-size: 0.875rem;\n  color: var(--secondary-foreground);\n  margin: 0;\n  line-height: 1.5;\n}\n\n.close {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  padding: 0.5rem 1rem;\n  border-radius: var(--radius);\n  font-size: 0.875rem;\n  font-weight: 500;\n  transition: all 150ms ease-out;\n\n  &:hover {\n    background-color: var(--muted);\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--ring);\n    outline-offset: 2px;\n  }\n}\n",
      "type": "registry:file",
      "target": "~/components/ui/alert-dialog/alert-dialog.module.css"
    }
  ]
}