{
  "name": "DurationField",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/DurationField.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "duration-field",
  "elName": "DurationField",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#duration-field",
  "hasLiveDemo": false,
  "description": "Composite count + unit duration input — the kit's standard \"wait for…\"\neditor. Used in the `No message received from user for…` condition and\nfuture delay / debounce surfaces.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "DurationField",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "DurationFieldProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "DurationFieldValue",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "DurationUnit",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { DurationField } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "DurationFieldValue",
      "doc": "Controlled value."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "DurationFieldValue",
      "doc": "Uncontrolled initial value."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(value: DurationFieldValue) => void",
      "doc": "Fires when either field changes."
    },
    {
      "name": "label",
      "optional": true,
      "type": "string",
      "doc": "Optional visible label."
    },
    {
      "name": "units",
      "optional": true,
      "type": "DurationUnit[]",
      "doc": "Override the unit menu. Default `[\"minutes\",\"hours\",\"days\",\"months\"]`."
    },
    {
      "name": "min",
      "optional": true,
      "type": "number",
      "doc": "Min count. Default `0`."
    },
    {
      "name": "max",
      "optional": true,
      "type": "number",
      "doc": "Max count. Default `999`."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable interaction."
    }
  ],
  "classesUsed": [
    "duration-field",
    "duration-field-count",
    "duration-field-label",
    "duration-field-row",
    "duration-field-unit"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"duration-field\">\n  <label class=\"duration-field-label\" for=\"dur-demo\">If no message received for</label>\n  <div class=\"duration-field-row\">\n    <input id=\"dur-demo\" type=\"number\" class=\"duration-field-count\" inputmode=\"numeric\" min=\"0\" max=\"999\" value=\"10\">\n    <select class=\"duration-field-unit\" aria-label=\"Unit\">\n      <option value=\"minutes\">Minutes</option>\n      <option value=\"hours\">Hours</option>\n      <option value=\"days\">Days</option>\n      <option value=\"months\">Months</option>\n    </select>\n  </div>\n</div>",
    "css": ".duration-field { display: flex; flex-direction: column; gap: 6px; }\n\n.duration-field-count {\n  height: 36px;\n  padding: 0 var(--s-3);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 400 14px/1 var(--f-body);\n}\n.duration-field-count { text-align: right; font-variant-numeric: tabular-nums; }\n\n.duration-field-label { font: 500 13px/1.3 var(--f-body); color: var(--fg); }\n\n.duration-field-row {\n  display: grid;\n  grid-template-columns: 96px 1fr;\n  gap: var(--s-2);\n}\n\n.duration-field-unit {\n  height: 36px;\n  padding: 0 var(--s-3);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 400 14px/1 var(--f-body);\n}"
  }
}