{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog",
  "title": "Alert Dialog",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Focus-managed confirmation for consequential actions, with a clear cancel path, optional media, and a token-based destructive action.",
  "dependencies": [
    "radix-ui"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/alert-dialog.tsx",
      "content": "// Ballmac UI: Alert Dialog. https://ui.ballmac.com/components/alert-dialog\n\"use client\";\n\nimport * as React from \"react\";\nimport { AlertDialog as Primitive } from \"radix-ui\";\nimport { cn } from \"@/lib/utils\";\n\ntype AlertDialogProps = React.ComponentProps<typeof Primitive.Root>;\nfunction AlertDialog(props: AlertDialogProps) {\n  return <Primitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\ntype AlertDialogTriggerProps = React.ComponentProps<typeof Primitive.Trigger>;\nfunction AlertDialogTrigger({ className, ...props }: AlertDialogTriggerProps) {\n  return (\n    <Primitive.Trigger\n      data-slot=\"alert-dialog-trigger\"\n      className={className}\n      {...props}\n    />\n  );\n}\n\ntype AlertDialogContentProps = React.ComponentProps<\n  typeof Primitive.Content\n> & {\n  /** Width of the confirmation panel. */\n  size?: \"default\" | \"sm\";\n};\nfunction AlertDialogContent({\n  className,\n  children,\n  size = \"default\",\n  ...props\n}: AlertDialogContentProps) {\n  return (\n    <Primitive.Portal>\n      <Primitive.Overlay\n        data-slot=\"alert-dialog-overlay\"\n        className=\"fixed inset-0 z-50 bg-black/55 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 motion-reduce:animate-none\"\n      />\n      <Primitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 overflow-y-auto rounded-xl border bg-card p-5 text-card-foreground shadow-[0_24px_48px_-12px_rgb(0_0_0/0.25)] outline-none sm:p-6\",\n          \"data-[size=default]:max-w-md data-[size=sm]:max-w-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 motion-reduce:animate-none\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </Primitive.Content>\n    </Primitive.Portal>\n  );\n}\n\ntype AlertDialogHeaderProps = React.ComponentProps<\"div\">;\nfunction AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  );\n}\ntype AlertDialogMediaProps = React.ComponentProps<\"div\">;\nfunction AlertDialogMedia({ className, ...props }: AlertDialogMediaProps) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-11 items-center justify-center rounded-xl bg-destructive/10 text-destructive [&_svg]:size-5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\ntype AlertDialogTitleProps = React.ComponentProps<typeof Primitive.Title>;\nfunction AlertDialogTitle({ className, ...props }: AlertDialogTitleProps) {\n  return (\n    <Primitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\"text-lg font-semibold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\ntype AlertDialogDescriptionProps = React.ComponentProps<\n  typeof Primitive.Description\n>;\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: AlertDialogDescriptionProps) {\n  return (\n    <Primitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"text-sm leading-relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\ntype AlertDialogFooterProps = React.ComponentProps<\"div\">;\nfunction AlertDialogFooter({ className, ...props }: AlertDialogFooterProps) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\ntype AlertDialogCancelProps = React.ComponentProps<typeof Primitive.Cancel>;\nfunction AlertDialogCancel({ className, ...props }: AlertDialogCancelProps) {\n  return (\n    <Primitive.Cancel\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(\n        \"inline-flex h-9 items-center justify-center rounded-md border bg-background px-4 text-sm font-medium outline-none transition-colors duration-150 hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\ntype AlertDialogActionProps = React.ComponentProps<typeof Primitive.Action> & {\n  /** Highlight a destructive commitment with the semantic destructive token. */\n  destructive?: boolean;\n};\nfunction AlertDialogAction({\n  className,\n  destructive = false,\n  ...props\n}: AlertDialogActionProps) {\n  return (\n    <Primitive.Action\n      data-slot=\"alert-dialog-action\"\n      data-destructive={destructive}\n      className={cn(\n        \"inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground outline-none transition-colors duration-150 hover:bg-primary/90 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:opacity-50 data-[destructive=true]:bg-destructive data-[destructive=true]:text-white data-[destructive=true]:hover:bg-destructive/90 dark:data-[destructive=true]:bg-destructive/60 dark:data-[destructive=true]:hover:bg-destructive/50 motion-reduce:transition-none\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialog,\n  AlertDialogTrigger,\n  AlertDialogContent,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogCancel,\n  AlertDialogAction,\n  type AlertDialogProps,\n  type AlertDialogTriggerProps,\n  type AlertDialogContentProps,\n  type AlertDialogHeaderProps,\n  type AlertDialogMediaProps,\n  type AlertDialogTitleProps,\n  type AlertDialogDescriptionProps,\n  type AlertDialogFooterProps,\n  type AlertDialogCancelProps,\n  type AlertDialogActionProps,\n};\n",
      "type": "registry:ui",
      "target": "@components/ballmac/alert-dialog.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "confirmation",
      "modal",
      "destructive",
      "radix"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "Ask for explicit confirmation before a consequential action; cancel remains the safe keyboard path.",
      "whenToUse": [
        "Delete or revoke something permanent",
        "Confirm an action with a material consequence"
      ],
      "whenNotToUse": [
        "Show information without requiring a choice; use dialog",
        "Confirm a low-risk routine action"
      ],
      "composesWith": [
        "button"
      ],
      "a11y": [
        {
          "keys": "Tab / Shift+Tab",
          "action": "Moves within the modal choices"
        },
        {
          "keys": "Enter / Space",
          "action": "Activates the focused choice"
        },
        {
          "keys": "Escape",
          "action": "Cancels when the dialog permits dismissal"
        }
      ],
      "customization": [
        "size: default | sm",
        "destructive action state",
        "controlled open state"
      ]
    },
    "examples": [
      "alert-dialog-demo",
      "alert-dialog-states"
    ],
    "url": "https://ui.ballmac.com/components/alert-dialog"
  },
  "categories": [
    "feedback"
  ],
  "type": "registry:ui"
}