{
  "generatedFrom": "popconfirm.contract.json",
  "component": "Popconfirm",
  "slug": "popconfirm",
  "group": "Feedback",
  "tier": "composite-antd",
  "summary": "A lightweight inline confirmation popover anchored to the trigger — confirm/cancel a low-risk action.",
  "install": {
    "package": "@ahaslides-product/design",
    "registry": "https://npm.pkg.github.com",
    "scope": "@ahaslides-product",
    "auth": "Published to GitHub Packages — needs a GitHub token with read:packages. Configure the @ahaslides-product scope in .npmrc before installing.",
    "npmrc": "@ahaslides-product:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages",
    "command": "npm i @ahaslides-product/design",
    "tokenLayer": "import '@ahaslides-product/design/tokens.css';",
    "import": "import '@ahaslides-product/design/popconfirm-theme';",
    "element": null,
    "registers": null
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/popconfirm/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/popconfirm/popconfirm.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/popconfirm.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/popconfirm.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler. Paste into an .html file and it renders with no build step.",
  "frameworks": {
    "react": {
      "package": "antd",
      "major": 6
    },
    "vue": {
      "package": "ant-design-vue",
      "major": 4
    },
    "html": {
      "via": "cdn-react",
      "runnable": "paste-and-run — React + antd loaded from a CDN, no build step"
    }
  },
  "props": [
    {
      "name": "title",
      "type": "string",
      "default": "—",
      "desc": "The confirmation question"
    },
    {
      "name": "description",
      "type": "string",
      "default": "—",
      "desc": "Optional supporting line"
    },
    {
      "name": "okText",
      "type": "string",
      "default": "OK",
      "desc": "Confirm button label"
    },
    {
      "name": "cancelText",
      "type": "string",
      "default": "Cancel",
      "desc": "Cancel button label"
    },
    {
      "name": "onConfirm",
      "type": "() => void",
      "default": "—",
      "desc": "Fires when the confirm button is clicked"
    },
    {
      "name": "placement",
      "type": "'top' | 'bottom' | 'left' | 'right' | …",
      "default": "top",
      "desc": "Where the popover opens relative to the trigger"
    },
    {
      "name": "okType",
      "type": "'primary' | 'danger'",
      "default": "primary",
      "desc": "danger styles the confirm as a red destructive button"
    },
    {
      "name": "icon",
      "type": "ReactNode",
      "default": "warning",
      "desc": "Leading warning glyph in the popover header"
    }
  ],
  "tokens": [
    "colorPrimary",
    "borderRadius",
    "controlHeight",
    "colorBorder",
    "Popover.borderRadiusLG",
    "Button.borderRadius"
  ],
  "spec": [
    {
      "label": "Popover",
      "value": "white · radius 8 · elevated"
    },
    {
      "label": "Confirm",
      "value": "primary Button #6A1EBB · white label"
    },
    {
      "label": "Cancel",
      "value": "default Button · 1px #E3E3E3 border · #1A1A1A label"
    },
    {
      "label": "Title",
      "value": "#1A1A1A, one short question"
    },
    {
      "label": "Anchor",
      "value": "pops from the trigger; not a full modal"
    },
    {
      "label": "Placement",
      "value": "top · bottom · left · right (arrow tracks the trigger)"
    },
    {
      "label": "Danger",
      "value": "okType=\"danger\" → red confirm #F5222D for a heavier delete"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "Popconfirm",
        "when": "a low-risk, reversible action needs a quick inline check (delete a row, discard a draft)"
      },
      {
        "what": "Modal",
        "when": "a destructive or irreversible action needs a deliberate, focused confirmation"
      },
      {
        "what": "no confirm",
        "when": "the action is trivial and easily undone — prefer an undo toast"
      }
    ],
    "note": "Reserve Popconfirm for low-risk, reversible actions — anchor it to the trigger and keep the question to one line. A destructive or irreversible action (delete account, publish) needs a Modal (see the overlays pattern), never a popover.",
    "dsv3": "COVERED — antd v6 Popconfirm themed by the shared popconfirmTheme; matrix: Placement (top · bottom · left · right) × Danger (off → primary confirm #6A1EBB / on → okType=\"danger\" red #F5222D), over a radius-8 white popover with a #E3E3E3-border cancel. Verified via Figma search_design_system on the DS V3 file (MwjvUjVI0HnfwD9EwPXRAy): DS V3 ships no measured Popconfirm cell (nearest is the 'Delete confirmation' Dialog), so this is a deliberate, documented token mapping onto antd's Popconfirm rather than a re-implementation."
  },
  "surfaces": [
    "editor",
    "dashboard",
    "settings"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step, no bundler.\n     Popconfirm is a COMPOSITE (antd, no framework-free element), so its HTML form is a\n     CDN-React page — React + antd load from a CDN (esm.sh) and mount on open. It consumes\n     the SAME shared `popconfirmTheme` the React/Vue wrappers use, so it renders the DS V3\n     look (radius-8 popover, primary confirm, #E3E3E3 cancel border). No JSX — React.createElement. -->\n<div id=\"root\"></div>\n<script type=\"module\">\n  import React from 'https://esm.sh/react@18';\n  import { createRoot } from 'https://esm.sh/react-dom@18/client';\n  import { ConfigProvider, Popconfirm, Button } from 'https://esm.sh/antd@6?deps=react@18,react-dom@18';\n  import { popconfirmTheme } from 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/popconfirm-theme.js';\n\n  const h = React.createElement;\n\n  createRoot(document.getElementById('root')).render(\n    h(ConfigProvider, { theme: popconfirmTheme },\n      h(Popconfirm, {\n        title: 'Delete this slide?',\n        description: 'This cannot be undone.',\n        okText: 'Delete', cancelText: 'Cancel',\n        placement: 'top',        // top | bottom | left | right\n        okType: 'danger',        // 'primary' (purple) default; 'danger' = red confirm\n        onConfirm: () => console.log('confirmed'),\n      }, h(Button, { danger: true }, 'Delete slide'))\n    )\n  );\n</script>\n",
    "react": "import { ConfigProvider, Popconfirm, Button } from 'antd';   // antd v6\nimport { popconfirmTheme } from '@ahaslides-product/design/popconfirm-theme';\n\n<ConfigProvider theme={popconfirmTheme}>\n  <Popconfirm\n    title=\"Delete this slide?\"\n    description=\"This cannot be undone.\"\n    okText=\"Delete\"\n    cancelText=\"Cancel\"\n    placement=\"top\"          // top | bottom | left | right — arrow tracks the trigger\n    okType=\"danger\"          // \"primary\" (purple) by default; \"danger\" = red confirm\n    onConfirm={remove}\n  >\n    <Button danger>Delete slide</Button>\n  </Popconfirm>\n</ConfigProvider>\n// One shared popconfirmTheme → the DS V3 look; primary confirm, #E3E3E3 cancel border.\n// Matrix: placement (top/bottom/left/right) × okType (primary/danger).\n// For a destructive/irreversible action use a Modal instead (overlays pattern).\n",
    "vue": "<script setup>\nimport { ConfigProvider, Popconfirm, Button } from 'ant-design-vue';   // ant-design-vue v4\nimport { popconfirmTheme } from '@ahaslides-product/design/popconfirm-theme';\n\nfunction remove() { /* delete the slide */ }\n</script>\n\n<template>\n  <a-config-provider :theme=\"popconfirmTheme\">\n    <a-popconfirm\n      title=\"Delete this slide?\"\n      description=\"This cannot be undone.\"\n      ok-text=\"Delete\"\n      cancel-text=\"Cancel\"\n      placement=\"top\"\n      ok-type=\"danger\"\n      @confirm=\"remove\"\n    >\n      <a-button danger>Delete slide</a-button>\n    </a-popconfirm>\n  </a-config-provider>\n</template>\n<!-- The SAME popconfirmTheme as React → one DS V3 look across both vendor libraries. -->\n<!-- Matrix: placement (top/bottom/left/right) × ok-type (primary/danger). -->\n",
    "theme": "// @ahaslides-product/design/popconfirm-theme — declared ONCE, consumed by both tiers.\nimport { popconfirmTheme } from '@ahaslides-product/design/popconfirm-theme';\n\nexport const popconfirmTheme = {\n  token: {\n    colorPrimary: '#6A1EBB',\n    borderRadius: 8,\n    borderRadiusLG: 8,\n    controlHeight: 32,\n    colorBorder: '#E3E3E3',\n    colorText: '#1A1A1A',\n    colorTextHeading: '#1A1A1A',\n    colorWarning: '#FF7747',\n    colorBgElevated: '#FFFFFF',\n    fontFamily: 'var(--aha-font-product, \"Plus Jakarta Sans\", sans-serif)',\n  },\n  components: {\n    Popover: { borderRadiusLG: 8, colorBgElevated: '#FFFFFF' },\n    Button: { borderRadius: 8, controlHeight: 32 },\n  },\n};\n"
  }
}