{
  "name": "WidgetTypingIndicator",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WidgetTypingIndicator.tsx",
  "chapterTag": "25 Chat Widget",
  "chapter": "25-widget.html",
  "sectionId": "typing-indicator",
  "elName": "WidgetTypingIndicator",
  "demoUrl": "https://brand.magicblocks.ai/components/25-widget#typing-indicator",
  "hasLiveDemo": false,
  "description": "",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "WidgetTypingIndicator",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WidgetTypingIndicatorProps",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { WidgetTypingIndicator } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "widget-typing",
    "widget-typing-dot"
  ],
  "examples": {
    "react": null,
    "html": "<div dir=\"ltr\" class=\"widget-theme-scope\"><div class=\"widget-typing\" role=\"status\" aria-label=\"Typing\"><span class=\"widget-typing-dot\"></span><span class=\"widget-typing-dot\"></span><span class=\"widget-typing-dot\"></span></div></div>",
    "css": ".widget-typing { display: inline-flex; align-items: center; gap: 5px; padding: 14px 17px; background: var(--w-agent-bg); border-radius: var(--w-r-bubble) var(--w-r-bubble) var(--w-r-bubble) 5px; animation: widget-in 260ms var(--ease) both; }\n\n.widget-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--w-agent-fg); animation: widget-dot 1.25s var(--ease) infinite; }"
  }
}