{
  "name": "GoalStep",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/GoalStep.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "actions",
  "elName": "Action wizard &mdash; <em style=\"font-family:var(--f-serif); font-weight:400;\">Step 3 of 3 (Goal)</em>",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#actions",
  "hasLiveDemo": false,
  "description": "The agent-builder wizard's **Step 3 — Goal**: pick the goal this director\nworks toward (`<Select>` from the workspace goals), and — once a goal is\nchosen — its numeric `$` target (`<Input type=\"number\">`). Mirrors v1's\n`DirectorGoal`. Controlled via a {@link GoalConfig} + `onChange`.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "GoalStep",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "GoalStepProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { GoalStep } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "GoalConfig",
      "doc": "Controlled goal value."
    },
    {
      "name": "onChange",
      "optional": false,
      "type": "(next: GoalConfig) => void",
      "doc": "Fires with the next goal config."
    },
    {
      "name": "goals",
      "optional": true,
      "type": "SelectOption[]",
      "doc": "Selectable goals (from the workspace)."
    }
  ],
  "classesUsed": [
    "action-config-stack",
    "field-help",
    "field-label",
    "field-row"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"action-config-stack\" style=\"max-width: 480px; margin: 0 auto;\">\n  <div class=\"field-row\">\n    <label class=\"field-label\">Select a goal</label>\n    <p class=\"field-help\">The goal this director works toward.</p>\n    <select class=\"ab-form-input\" aria-label=\"Select a goal\">\n      <option>No specific goal</option>\n      <option selected>Booking confirmed</option>\n      <option>Demo scheduled</option>\n    </select>\n  </div>\n  <div class=\"field-row\">\n    <label class=\"field-label\">Goal value</label>\n    <div class=\"input-group\">\n      <span class=\"input-affix\" aria-hidden=\"true\">$</span>\n      <input class=\"input\" type=\"number\" min=\"0\" value=\"5000\" placeholder=\"e.g. 5000\" aria-label=\"Goal value\">\n    </div>\n  </div>\n</div>",
    "css": ".action-config-stack { display: flex; flex-direction: column; gap: var(--s-4); }\n\n.field-help { font: 400 11.5px/1.4 var(--f-body); color: var(--fg-faint); margin: 0; }\n\n.field-label { font: 600 12.5px/1.3 var(--f-body); color: var(--fg); }\n\n.field-row { display: flex; flex-direction: column; gap: 6px; }"
  }
}