{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "danger-zone",
  "title": "Danger zone",
  "description": "The red-framed last section of a settings page, one row per action that cannot easily be undone.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/manniche/danger-zone/danger-zone.tsx",
      "content": "import { TriangleAlert } from 'lucide-react'\nimport { useId, type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\n\nexport type DangerZoneAction = {\n  id: string\n  title: string\n  /** What happens and whether it can be undone. */\n  description: ReactNode\n  /** The button, usually a ConfirmDialog trigger or HoldToConfirm. */\n  action: ReactNode\n}\n\nexport type DangerZoneProps = {\n  title?: string\n  actions: DangerZoneAction[]\n  className?: string\n}\n\n/**\n * The last section of a settings page: a red frame with a heading, one row per action that cannot\n * easily be undone. Keeping them together and at the bottom means nobody meets them by accident.\n */\nexport function DangerZone({ title = 'Danger zone', actions, className }: DangerZoneProps) {\n  const headingId = useId()\n  return (\n    <section aria-labelledby={headingId} className={cn('grid gap-3', className)}>\n      <h2 id={headingId} className=\"flex items-center gap-2 text-base font-semibold text-destructive\">\n        <TriangleAlert className=\"size-4\" aria-hidden />\n        {title}\n      </h2>\n      <ul className=\"divide-y divide-destructive/20 overflow-hidden rounded-2xl border border-destructive/40 bg-card\">\n        {actions.map((a) => (\n          <li key={a.id} className=\"flex flex-wrap items-center justify-between gap-x-6 gap-y-3 p-4\">\n            <div className=\"grid min-w-0 flex-1 basis-60 gap-0.5\">\n              <h3 className=\"text-sm font-medium\">{a.title}</h3>\n              <p className=\"text-sm text-pretty text-muted-foreground\">{a.description}</p>\n            </div>\n            <div className=\"shrink-0\">{a.action}</div>\n          </li>\n        ))}\n      </ul>\n    </section>\n  )\n}\n\n/** The outlined red button that fits a danger-zone row. Turns solid red only on hover. */\nexport const dangerButton =\n  'inline-flex min-h-11 items-center rounded-xl border border-destructive/40 bg-card px-4 text-sm font-medium text-destructive transition-[background-color,color,transform] duration-150 ease-out-quint hover:bg-destructive hover:text-white active:scale-[0.97]'\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "controls"
  ],
  "type": "registry:component"
}