{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog",
  "type": "registry:component",
  "title": "Alert dialog",
  "description": "Requires a decision before work continues. Native dialog with Escape and light dismiss disabled.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/dialog.json",
    "https://vlak.dev/r/button.json",
    "https://vlak.dev/r/vlak-lib.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/alert-dialog.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak } from \"./tokens.stylex\";\nimport { Dialog, type DialogProps } from \"./dialog\";\n\nconst styles = stylex.create({\n  lock: {\n    borderRadius: vlak.radiusSm,\n    boxShadow: \"none\",\n  },\n});\n\nexport interface AlertDialogProps extends Omit<DialogProps, \"dismissable\" | \"lightDismiss\" | \"closeLabel\"> {}\n\n/**\n * A native <dialog> that requires an explicit answer. Escape and\n * light dismiss are off (closedby=\"none\"); the actions close it.\n */\nexport const AlertDialog = React.forwardRef<HTMLDialogElement, AlertDialogProps>(function AlertDialog(\n  { className, extraStyles, ...props },\n  ref,\n) {\n  return (\n    <Dialog\n      ref={ref}\n      role=\"alertdialog\"\n      dismissable={false}\n      className={className ? `rs-alert-dialog ${className}` : \"rs-alert-dialog\"}\n      extraStyles={[styles.lock, ...(extraStyles ?? [])]}\n      {...props}\n    />\n  );\n});\n\nexport {\n  DialogTitle as AlertDialogTitle,\n  DialogBody as AlertDialogBody,\n  DialogActions as AlertDialogActions,\n} from \"./dialog\";\n",
      "type": "registry:component",
      "target": "components/vlak/alert-dialog.tsx"
    },
    {
      "path": "vlak/styles/alert-dialog.css",
      "content": "/* ── alert-dialog: generated from packages/react/src/components/alert-dialog.tsx ── */\n.rs-alert-dialog{border-radius:var(--radius-sm);box-shadow:none}\n",
      "type": "registry:file",
      "target": "styles/vlak/alert-dialog.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "surfaces",
      "classes": [
        "rs-alert-dialog"
      ],
      "snippet": "<dialog class=\"rs-dialog\" role=\"alertdialog\" closedby=\"none\" aria-labelledby=\"delete-title\" aria-describedby=\"delete-body\" open><h2 class=\"rs-dialog-title\" id=\"delete-title\">Delete this workspace?</h2><p class=\"rs-dialog-body\" id=\"delete-body\">All projects go with it.</p><div class=\"rs-dialog-actions\"><button class=\"rs-btn-ghost rs-btn-sm\">Cancel</button><button class=\"rs-btn-primary rs-btn-sm\">Delete</button></div></dialog>",
      "cssOnly": false,
      "registryDependencies": [
        "dialog",
        "button",
        "vlak-lib"
      ],
      "aliases": [
        "Alert dialog",
        "Confirm dialog",
        "Confirmation",
        "Destructive confirm"
      ],
      "example": "import { useState } from \"react\";\nimport { AlertDialog, AlertDialogActions, AlertDialogBody, AlertDialogTitle, Button } from \"@noorddev/vlak-react\";\n\nconst [open, setOpen] = useState(false);\n\n<AlertDialog open={open} onClose={() => setOpen(false)}>\n  <AlertDialogTitle>Delete this workspace?</AlertDialogTitle>\n  <AlertDialogBody>All projects go with it.</AlertDialogBody>\n  <AlertDialogActions>\n    <Button variant=\"ghost\" size=\"sm\" onClick={() => setOpen(false)}>Keep it</Button>\n    <Button size=\"sm\" onClick={remove}>Delete</Button>\n  </AlertDialogActions>\n</AlertDialog>",
      "usage": {
        "use": [
          "Destructive or irreversible actions that need an explicit answer.",
          "Exactly two actions: keep and proceed."
        ],
        "avoid": [
          "Anything the user may dismiss without answering; use Dialog.",
          "Informational messages; use Alert or toast."
        ]
      },
      "keyboard": [
        {
          "keys": "Tab, Shift + Tab",
          "does": "Cycles focus between the actions"
        },
        {
          "keys": "Enter, Space",
          "does": "Activates the focused action"
        },
        {
          "keys": "Escape",
          "does": "Does nothing; the dialog must be answered"
        }
      ],
      "a11y": [
        "A native modal <dialog> with role=\"alertdialog\" and closedby=\"none\": Escape and light dismiss are off.",
        "AlertDialogTitle and AlertDialogBody wire aria-labelledby and aria-describedby like Dialog; focus moves in on open and returns on close."
      ]
    }
  }
}