{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"modal-01","type":"registry:component","title":"Delete Confirmation Modal","description":"A focused confirmation modal for destructive delete actions with proper warning UI, accessible design, and clear action buttons. Features warning icon, descriptive text, and cancel/confirm options with proper error handling and user feedback.","dependencies":["lucide-react"],"registryDependencies":["button","card","dialog"],"files":[{"path":"src/registry/blocks/application/feedback/modals/modal-01.tsx","content":"\"use client\";\n\nimport { AlertTriangle, Trash2 } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Button } from \"@/registry/ui/button\";\nimport { Card, CardContent } from \"@/registry/ui/card\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/ui/dialog\";\n\nexport interface Modal01Props {\n  className?: string;\n}\n\nconst content: {\n  header: {\n    title: string;\n    subtitle: string;\n  };\n  confirmation: {\n    triggerLabel: string;\n    triggerVariant: \"destructive\" | \"outline\" | \"secondary\";\n    title: string;\n    description: string;\n    confirmLabel: string;\n    iconBgColor: string;\n    iconColor: string;\n  };\n} = {\n  header: {\n    title: \"Delete Confirmation Modal\",\n    subtitle:\n      \"Confirmation dialog for destructive actions with proper warning UI\",\n  },\n  confirmation: {\n    triggerLabel: \"Delete Item\",\n    triggerVariant: \"destructive\",\n    title: \"Delete Item\",\n    description:\n      \"Are you sure you want to delete this item? This action cannot be undone and will permanently remove all associated data.\",\n    confirmLabel: \"Delete\",\n    iconBgColor: \"bg-red-100 dark:bg-red-900/20\",\n    iconColor: \"text-red-600 dark:text-red-400\",\n  },\n};\n\nexport function Modal01({ className }: Modal01Props) {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleConfirm = () => {\n    console.log(\"Confirmation action performed: delete\");\n    setIsOpen(false);\n  };\n\n  const handleCancel = () => {\n    console.log(\"Confirmation action cancelled\");\n    setIsOpen(false);\n  };\n\n  return (\n    <Card\n      className={cn(\"w-full max-w-4xl mx-auto\", className)}\n      data-testid=\"confirmation-modal-container\"\n    >\n      <CardContent className=\"p-6\">\n        <div className=\"space-y-4\">\n          <div>\n            <h3 className=\"text-lg font-semibold\">{content.header.title}</h3>\n            <p className=\"text-sm text-muted-foreground\">\n              {content.header.subtitle}\n            </p>\n          </div>\n\n          <div data-testid=\"confirmation-trigger-container\">\n            <Dialog open={isOpen} onOpenChange={setIsOpen}>\n              <DialogTrigger asChild>\n                <Button\n                  variant={content.confirmation.triggerVariant}\n                  size=\"sm\"\n                  data-testid=\"confirmation-trigger\"\n                >\n                  <Trash2 className=\"h-4 w-4 mr-2\" />\n                  {content.confirmation.triggerLabel}\n                </Button>\n              </DialogTrigger>\n              <DialogContent\n                className=\"sm:max-w-[425px]\"\n                data-testid=\"confirmation-dialog\"\n              >\n                <DialogHeader>\n                  <div className=\"flex items-start gap-4\">\n                    <div\n                      className={cn(\n                        \"flex shrink-0 h-10 w-10 items-center justify-center rounded-full\",\n                        content.confirmation.iconBgColor,\n                      )}\n                      data-testid=\"confirmation-icon\"\n                    >\n                      <AlertTriangle\n                        className={cn(\n                          \"h-5 w-5\",\n                          content.confirmation.iconColor,\n                        )}\n                      />\n                    </div>\n                    <div className=\"flex flex-col gap-2\">\n                      <DialogTitle data-testid=\"confirmation-title\">\n                        {content.confirmation.title}\n                      </DialogTitle>\n                      <DialogDescription data-testid=\"confirmation-description\">\n                        {content.confirmation.description}\n                      </DialogDescription>\n                    </div>\n                  </div>\n                </DialogHeader>\n                <DialogFooter className=\"gap-2 mt-4\">\n                  <Button\n                    variant=\"outline\"\n                    onClick={handleCancel}\n                    data-testid=\"confirmation-cancel\"\n                  >\n                    Cancel\n                  </Button>\n                  <Button\n                    variant={content.confirmation.triggerVariant}\n                    onClick={handleConfirm}\n                    data-testid=\"confirmation-confirm\"\n                  >\n                    {content.confirmation.confirmLabel}\n                  </Button>\n                </DialogFooter>\n              </DialogContent>\n            </Dialog>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}