{
  "name": "WidgetFeedback",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WidgetFeedback.tsx",
  "chapterTag": "25 Chat Widget",
  "chapter": "25-widget.html",
  "sectionId": "feedback",
  "elName": "WidgetFeedback",
  "demoUrl": "https://brand.magicblocks.ai/components/25-widget#feedback",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "WidgetFeedback",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WidgetFeedbackProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WidgetFeedbackValue",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { WidgetFeedback } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "WidgetFeedbackValue",
      "doc": "Current selected vote, or `null` for none."
    },
    {
      "name": "onChange",
      "optional": true,
      "type": "(value: WidgetFeedbackValue) => void",
      "doc": "Fires when the user toggles a vote. Pass `null` if value was the same (toggle off)."
    },
    {
      "name": "upIcon",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the up icon."
    },
    {
      "name": "downIcon",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the down icon."
    },
    {
      "name": "upLabel",
      "optional": true,
      "type": "string",
      "doc": "Aria label for the up button."
    },
    {
      "name": "downLabel",
      "optional": true,
      "type": "string",
      "doc": "Aria label for the down button."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable the controls."
    }
  ],
  "classesUsed": [
    "widget-feedback",
    "widget-feedback-btn"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".widget-feedback {\n  display: inline-flex;\n  gap: 2px;\n  padding: 2px;\n  background: var(--w-feedback-bg, #FFFFFF);\n  border-radius: 999px;\n  border: 1px solid color-mix(in oklab, #000 6%, transparent);\n}\n\n.widget-feedback-btn {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  width: 26px;\n  height: 26px;\n  border-radius: 999px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--w-feedback-icon, #18181B);\n  cursor: pointer;\n  transition: background var(--dur-2) var(--ease),\n              color var(--dur-2) var(--ease);\n}"
  }
}