{
  "name": "WidgetComposer",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WidgetComposer.tsx",
  "chapterTag": "25 Chat Widget",
  "chapter": "25-widget.html",
  "sectionId": "composer",
  "elName": "WidgetComposer",
  "demoUrl": "https://brand.magicblocks.ai/components/25-widget#composer",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "WidgetComposer",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WidgetComposerProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { WidgetComposer } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "string",
      "doc": "Controlled value."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "string",
      "doc": "Uncontrolled initial value."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(value: string) => void",
      "doc": "Fires on every keystroke."
    },
    {
      "name": "onSubmit",
      "optional": true,
      "type": "(value: string) => void",
      "doc": "Fires on submit (Enter or Send click)."
    },
    {
      "name": "placeholder",
      "optional": true,
      "type": "string",
      "doc": "Placeholder override. Falls back to theme `labels.chatPlaceholder`."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable the entire composer."
    },
    {
      "name": "sending",
      "optional": true,
      "type": "boolean",
      "doc": "Pending state — disables Send + swaps to spinner."
    },
    {
      "name": "attachments",
      "optional": true,
      "type": "ReactNode",
      "doc": "Left-side attachments slot — emoji / file / voice triggers."
    },
    {
      "name": "sendLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override Send label from theme."
    },
    {
      "name": "sendIcon",
      "optional": true,
      "type": "ReactNode | null",
      "doc": "Override Send icon from theme."
    },
    {
      "name": "hideSendIcon",
      "optional": true,
      "type": "boolean",
      "doc": "Hide the icon entirely on the Send button."
    },
    {
      "name": "hideSendLabel",
      "optional": true,
      "type": "boolean",
      "doc": "Hide the label entirely on the Send button (icon-only)."
    },
    {
      "name": "submitOnEnter",
      "optional": true,
      "type": "boolean",
      "doc": "Submit on Enter (Shift+Enter inserts newline). Default `true`."
    },
    {
      "name": "maxRows",
      "optional": true,
      "type": "number",
      "doc": "Max textarea rows before scrolling. Default `3`."
    }
  ],
  "classesUsed": [
    "widget-composer",
    "widget-composer-attachments",
    "widget-composer-input",
    "widget-composer-row",
    "widget-composer-send",
    "widget-composer-send-icon",
    "widget-composer-send-label",
    "widget-composer-spinner"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".widget-composer { display: flex; flex-direction: column; gap: 4px; }\n\n.widget-composer-attachments {\n  display: inline-flex;\n  align-items: center;\n  gap: 2px;\n}\n\n.widget-composer-input {\n  flex: 1;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  outline: none;\n  resize: none;\n  box-sizing: border-box;\n  padding: 8px 0;\n  font: 400 var(--w-composer-font-size, 16px) / 1.4 var(--w-font-family, var(--f-body));\n  color: var(--w-composer-text, var(--ink));\n  /* Auto-grow up to three lines, then scroll. `field-sizing: content`\n     drives the grow where supported (Chromium 123+); the min/max-height\n     pair bounds it — one line floor, ~three-line ceiling (3 × 1.4em text\n     + 16px vertical padding). Browsers without `field-sizing` fall back\n     to a fixed single-line box that still scrolls past the cap. */\n  field-sizing: content;\n  min-height: 40px;\n  max-height: 84px;\n  overflow-y: auto;\n}\n\n.widget-composer-row {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n  padding: 4px 4px 4px 10px;\n  background: var(--w-composer-bg, #FFFFFF);\n  border: 1px solid var(--w-composer-border, var(--hair));\n  border-radius: 12px;\n  transition: border-color var(--dur-2) var(--ease),\n              box-shadow var(--dur-2) var(--ease);\n}\n\n.widget-composer-send {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 36px;\n  padding: 0 14px;\n  border: 1px solid var(--w-send-border, transparent);\n  border-radius: var(--w-send-radius, 8px);\n  background: var(--w-send-bg, #18181B);\n  color: var(--w-send-text, #FFFFFF);\n  font: 600 13px/1 var(--w-font-family, var(--f-body));\n  cursor: pointer;\n  transition: filter var(--dur-2) var(--ease);\n  flex-shrink: 0;\n}\n\n.widget-composer-send-icon { display: inline-flex; }\n\n.widget-composer-send-label { line-height: 1; }\n\n.widget-composer-spinner {\n  width: 14px;\n  height: 14px;\n  border-radius: 999px;\n  border: 1.5px solid currentColor;\n  border-right-color: transparent;\n  animation: widget-composer-spin 0.7s linear infinite;\n}"
  }
}