{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog",
  "title": "Alert Dialog",
  "description": "Confirmation dialogs for destructive or irreversible actions.",
  "dependencies": [
    "radix-ui"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/button.json",
    "https://ui.cuelark.com/r/motion.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/alert-dialog.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\";\n\nimport { enterOnce, useMergedRef } from \"@/lib/motion\";\nimport { buttonVariants } from \"@/registry/cuelark/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nfunction AlertDialog(props: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger(props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />;\n}\n\n/** Drops in a touch heavier than a dialog, with one firm settle: it is asking you to stop and decide. */\nfunction enter(node: HTMLElement | null) {\n  enterOnce(node, (s) => ({ opacity: 0, y: -10 * s, scale: 1 + 0.03 * s }), { duration: 0.45, ease: \"cue-snap\" });\n}\n\nfunction AlertDialogContent({ className, tone = \"default\", ref, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & { tone?: \"default\" | \"destructive\" }) {\n  const mergedRef = useMergedRef(enter, ref);\n  return (\n    <AlertDialogPrimitive.Portal>\n      <AlertDialogPrimitive.Overlay\n        data-slot=\"alert-dialog-overlay\"\n        className=\"fixed inset-0 z-50 bg-black/25 backdrop-blur-[2px] dark:bg-black/55 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\"\n      />\n      <AlertDialogPrimitive.Content\n        ref={mergedRef}\n        data-slot=\"alert-dialog-content\"\n        data-tone={tone}\n        className={cn(\n          \"fixed inset-0 z-50 m-auto grid h-fit w-[calc(100%-2rem)] max-w-md gap-4 overflow-hidden rounded-2xl bg-popover ring-1 ring-foreground/10 p-6 text-popover-foreground shadow-overlay outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.98]\",\n          \"data-[tone=destructive]:before:absolute data-[tone=destructive]:before:inset-x-0 data-[tone=destructive]:before:top-0 data-[tone=destructive]:before:h-0.5 data-[tone=destructive]:before:bg-destructive\",\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPrimitive.Portal>\n  );\n}\n\nfunction AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"alert-dialog-header\" className={cn(\"flex flex-col gap-1.5 text-left\", className)} {...props} />;\n}\n\nfunction AlertDialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"alert-dialog-footer\" className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)} {...props} />;\n}\n\nfunction AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return <AlertDialogPrimitive.Title data-slot=\"alert-dialog-title\" className={cn(\"text-lg font-semibold tracking-tight\", className)} {...props} />;\n}\n\nfunction AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return <AlertDialogPrimitive.Description data-slot=\"alert-dialog-description\" className={cn(\"text-sm text-muted-foreground\", className)} {...props} />;\n}\n\nfunction AlertDialogAction({ className, variant = \"primary\", ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action> & { variant?: \"primary\" | \"destructive\" }) {\n  return <AlertDialogPrimitive.Action data-slot=\"alert-dialog-action\" className={cn(buttonVariants({ variant }), className)} {...props} />;\n}\n\nfunction AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return <AlertDialogPrimitive.Cancel data-slot=\"alert-dialog-cancel\" className={cn(buttonVariants({ variant: \"secondary\" }), className)} {...props} />;\n}\n\nexport { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/alert-dialog",
  "categories": [
    "overlays"
  ],
  "type": "registry:ui"
}