{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog",
  "title": "Alert Dialog",
  "description": "An accessible confirmation dialog with safe initial focus and explicit action and cancel controls.",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "registry/rivetui/components/alert-dialog/alert-dialog.tsx",
      "content": "\"use client\";\n\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction AlertDialog<Payload>(props: AlertDialogPrimitive.Root.Props<Payload>) {\n  return <AlertDialogPrimitive.Root {...props} />;\n}\n\nfunction AlertDialogTrigger<Payload>(props: AlertDialogPrimitive.Trigger.Props<Payload>) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\nfunction AlertDialogCancel(props: AlertDialogPrimitive.Close.Props) {\n  return <AlertDialogPrimitive.Close data-slot=\"alert-dialog-cancel\" {...props} />;\n}\n\nfunction AlertDialogAction(props: AlertDialogPrimitive.Close.Props) {\n  return <AlertDialogPrimitive.Close data-slot=\"alert-dialog-action\" {...props} />;\n}\n\ntype AlertDialogContentProps = AlertDialogPrimitive.Popup.Props;\n\nconst AlertDialogContent = React.forwardRef<HTMLDivElement, AlertDialogContentProps>(\n  function AlertDialogContent({ className, children, initialFocus, ...props }, forwardedRef) {\n    const contentRef = React.useRef<HTMLDivElement>(null);\n\n    const setContentRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        contentRef.current = node;\n\n        if (typeof forwardedRef === \"function\") {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n      },\n      [forwardedRef],\n    );\n\n    const focusSafeAction = React.useCallback(\n      () =>\n        contentRef.current?.querySelector<HTMLElement>('[data-slot=\"alert-dialog-cancel\"]') ?? true,\n      [],\n    );\n\n    return (\n      <AlertDialogPrimitive.Portal>\n        <AlertDialogPrimitive.Backdrop\n          data-slot=\"alert-dialog-backdrop\"\n          className=\"fixed inset-0 z-50 min-h-dvh bg-black/55 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute motion-reduce:transition-none dark:bg-black/70\"\n        />\n        <AlertDialogPrimitive.Viewport\n          data-slot=\"alert-dialog-viewport\"\n          className=\"fixed inset-0 z-50 flex min-h-dvh items-start justify-center overflow-y-auto p-4 data-ending-style:pointer-events-none sm:p-8\"\n        >\n          <AlertDialogPrimitive.Popup\n            ref={setContentRef}\n            data-slot=\"alert-dialog-content\"\n            initialFocus={initialFocus ?? focusSafeAction}\n            className={cn(\n              \"relative my-auto flex w-full max-w-md flex-col border border-border bg-background text-foreground outline-none transition-opacity duration-100 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none\",\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </AlertDialogPrimitive.Popup>\n        </AlertDialogPrimitive.Viewport>\n      </AlertDialogPrimitive.Portal>\n    );\n  },\n);\n\nfunction AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\"grid gap-2 border-b border-border p-5 text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.Title.Props) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.Description.Props) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"text-sm leading-relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"alert-dialog-body\" className={cn(\"p-5\", className)} {...props} />;\n}\n\nfunction AlertDialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col gap-2 border-t border-border p-5 sm:flex-row sm:flex-wrap sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type { AlertDialogContentProps };\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogBody,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}