{
  "name": "PasteAndRecheckArea",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/PasteAndRecheckArea.tsx",
  "chapterTag": "17 AI Surfaces",
  "chapter": "17-app-ai.html",
  "sectionId": "paste-recheck",
  "elName": "PasteAndRecheckArea — success state",
  "demoUrl": "https://brand.magicblocks.ai/components/17-app-ai#paste-recheck",
  "hasLiveDemo": false,
  "description": "Paste-revised-text + re-run-audit composition. The kit primitive for the\n\"user pastes a revised body of text and clicks Re-check to re-run a\nvalidation / audit / score against just that doc\" engagement loop —\n10DLC Wingman's privacy-policy revision surface is the first consumer.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "PasteAndRecheckArea",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "PasteAndRecheckAreaProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "PasteRecheckResult",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "PasteRecheckStatus",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { PasteAndRecheckArea } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "label",
      "optional": false,
      "type": "ReactNode",
      "doc": "Heading above the textarea (e.g. `\"Updated your privacy policy?\"`)."
    },
    {
      "name": "placeholder",
      "optional": true,
      "type": "string",
      "doc": "Placeholder shown inside the textarea."
    },
    {
      "name": "onRecheck",
      "optional": false,
      "type": "(text: string) => void | Promise<void>",
      "doc": "Re-check action — receives the textarea contents. Awaited; the inner Button's disabled / loading state is wired to the returned promise."
    },
    {
      "name": "result",
      "optional": true,
      "type": "PasteRecheckResult",
      "doc": "External `result` state — set by the consumer based on the async call. When `status: \"in_progress\"`, the Button is disabled."
    },
    {
      "name": "buttonLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the action button label (default: `\"Re-check\"`)."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "string",
      "doc": "Initial textarea contents (uncontrolled)."
    },
    {
      "name": "rows",
      "optional": true,
      "type": "number",
      "doc": "Number of textarea rows (default: 6)."
    }
  ],
  "classesUsed": [
    "paste-recheck",
    "paste-recheck-area",
    "paste-recheck-delta",
    "paste-recheck-foot",
    "paste-recheck-label",
    "paste-recheck-status"
  ],
  "examples": {
    "react": "<PasteAndRecheckArea\n  label=\"Updated your privacy policy?\"\n  placeholder=\"Paste the new text here…\"\n  onRecheck={async (text) => { … }}\n  result={{ status: 'success', delta: '+8 points' }}\n/>",
    "html": "<div class=\"paste-recheck-demo\">\n  <div class=\"paste-recheck\">\n    <p class=\"paste-recheck-label\">Updated your privacy policy?</p>\n    <textarea class=\"input paste-recheck-area\" rows=\"6\" placeholder=\"Paste the new text here…\">We will not sell, rent, or share your personal information. For SMS programs, we will not share opt-in data with third parties or affiliates for marketing or promotional purposes.</textarea>\n    <div class=\"paste-recheck-foot\">\n      <button class=\"btn btn-primary btn-sm\">Re-check</button>\n      <span class=\"paste-recheck-status\" data-tone=\"success\">Updated.<span class=\"paste-recheck-delta\">+8 points</span></span>\n    </div>\n  </div>\n</div>",
    "css": ".paste-recheck {\n  display: flex;\n  flex-direction: column;\n  gap: var(--s-3);\n  padding: var(--s-5);\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n}\n\n.paste-recheck-area { width: 100%; }\n\n.paste-recheck-delta {\n  display: inline-block;\n  font: 600 13px/1 var(--f-mono);\n  padding: 4px 10px;\n  border-radius: var(--r-pill);\n  background: var(--success-soft);\n  color: var(--success-text);\n  margin-left: var(--s-2);\n}\n\n.paste-recheck-foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--s-3);\n  flex-wrap: wrap;\n}\n\n.paste-recheck-label {\n  font: 500 14px/1.3 var(--f-body);\n  color: var(--fg);\n  margin: 0;\n}\n\n.paste-recheck-status {\n  font: 500 13px/1 var(--f-body);\n  color: var(--fg-soft);\n}"
  }
}