{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-dialog",
  "title": "Animated Dialog",
  "description": "A dialog wrapper with subtle Motion transitions for confirmation and form flows.",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "dialog"
  ],
  "files": [
    {
      "path": "registry/corr/components/animated-dialog.tsx",
      "content": "\"use client\"\n\nimport type { ReactNode } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { cn } from \"@/lib/utils\"\n\nexport type AnimatedDialogAnimation =\n  | \"zoom\"\n  | \"slide-from-left\"\n  | \"slide-from-right\"\n  | \"slide-from-top\"\n  | \"slide-from-bottom\"\n\nconst animationClassName: Record<AnimatedDialogAnimation, string> = {\n  zoom:\n    \"transition-none! data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:duration-300 data-closed:duration-150\",\n  \"slide-from-left\":\n    \"transition-none! data-open:animate-in data-open:fade-in-0 data-open:zoom-in-100 data-open:slide-in-from-left-8 data-closed:animate-out data-closed:fade-out-0 data-closed:slide-out-to-left-6 data-open:duration-300 data-closed:duration-150\",\n  \"slide-from-right\":\n    \"transition-none! data-open:animate-in data-open:fade-in-0 data-open:zoom-in-100 data-open:slide-in-from-right-8 data-closed:animate-out data-closed:fade-out-0 data-closed:slide-out-to-right-6 data-open:duration-300 data-closed:duration-150\",\n  \"slide-from-top\":\n    \"transition-none! data-open:animate-in data-open:fade-in-0 data-open:zoom-in-100 data-open:slide-in-from-top-8 data-closed:animate-out data-closed:fade-out-0 data-closed:slide-out-to-top-6 data-open:duration-300 data-closed:duration-150\",\n  \"slide-from-bottom\":\n    \"transition-none! data-open:animate-in data-open:fade-in-0 data-open:zoom-in-100 data-open:slide-in-from-bottom-8 data-closed:animate-out data-closed:fade-out-0 data-closed:slide-out-to-bottom-6 data-open:duration-300 data-closed:duration-150\",\n}\n\nexport function AnimatedDialog({\n  trigger,\n  title,\n  description,\n  children,\n  actionLabel = \"Continue\",\n  cancelLabel = \"Cancel\",\n  animation = \"zoom\",\n  className,\n  onAction,\n}: {\n  trigger: ReactNode\n  title: string\n  description?: string\n  children?: ReactNode\n  actionLabel?: string\n  cancelLabel?: string\n  animation?: AnimatedDialogAnimation\n  className?: string\n  onAction?: () => void\n}) {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>{trigger}</DialogTrigger>\n      <DialogContent\n        className={cn(\n          \"sm:max-w-[425px]\",\n          animationClassName[animation],\n          className\n        )}\n      >\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          {description ? (\n            <DialogDescription>{description}</DialogDescription>\n          ) : null}\n        </DialogHeader>\n        {children ? <div className=\"text-sm\">{children}</div> : null}\n        <DialogFooter>\n          <DialogClose asChild>\n            <Button variant=\"outline\">{cancelLabel}</Button>\n          </DialogClose>\n          <DialogClose asChild>\n            <Button onClick={onAction}>{actionLabel}</Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}