{
  "name": "ColorField",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ColorField.tsx",
  "chapterTag": "21 Designer Toolkit",
  "chapter": "21-designer-toolkit.html",
  "sectionId": "color-field",
  "elName": "ColorField",
  "demoUrl": "https://brand.magicblocks.ai/components/21-designer-toolkit#color-field",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "ColorField",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ColorFieldProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { ColorField } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "string",
      "doc": "Controlled hex value, e.g. `\"#C69C6D\"`."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "string",
      "doc": "Uncontrolled initial hex value."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(value: string) => void",
      "doc": "Fires with the hex string on every commit."
    },
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Label rendered above the field."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional muted caption beneath the label."
    },
    {
      "name": "meta",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned slot on the label row — typically a `<Tooltip>` info `?`."
    },
    {
      "name": "presets",
      "optional": true,
      "type": "string[]",
      "doc": "Optional named preset shown beneath the hex input."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable the field."
    },
    {
      "name": "allowEmpty",
      "optional": true,
      "type": "boolean",
      "doc": "Allow `transparent` / empty value. Default `false`."
    }
  ],
  "classesUsed": [
    "color-field",
    "color-field-caption",
    "color-field-head",
    "color-field-head-text",
    "color-field-input",
    "color-field-label",
    "color-field-meta",
    "color-field-preset",
    "color-field-presets",
    "color-field-row",
    "color-field-swatch",
    "color-field-swatch-input",
    "color-field-swatch-preview"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"dt-grid\">\n          <div class=\"dt-grid-cell\">\n            <span class=\"dt-grid-label\">default &middot; black</span>\n            <div class=\"color-field\">\n              <div class=\"color-field-head\">\n                <div class=\"color-field-head-text\">\n                  <label class=\"color-field-label\">Background colour</label>\n                  <span class=\"color-field-caption\">Used for the launcher disc.</span>\n                </div>\n              </div>\n              <div class=\"color-field-row\">\n                <label class=\"color-field-swatch\" aria-label=\"Pick a colour\">\n                  <span class=\"color-field-swatch-preview\" style=\"background: #000000;\"></span>\n                </label>\n                <input type=\"text\" class=\"color-field-input\" value=\"#000000\" spellcheck=\"false\">\n              </div>\n            </div>\n          </div>\n          <div class=\"dt-grid-cell\">\n            <span class=\"dt-grid-label\">filled &middot; with presets</span>\n            <div class=\"color-field\">\n              <div class=\"color-field-head\">\n                <div class=\"color-field-head-text\">\n                  <label class=\"color-field-label\">Widget background</label>\n                  <span class=\"color-field-caption\">Launcher + chat header.</span>\n                </div>\n              </div>\n              <div class=\"color-field-row\">\n                <label class=\"color-field-swatch\" aria-label=\"Pick a colour\">\n                  <span class=\"color-field-swatch-preview\" style=\"background: #C69C6D;\"></span>\n                </label>\n                <input type=\"text\" class=\"color-field-input\" value=\"#C69C6D\" spellcheck=\"false\">\n              </div>\n              <div class=\"color-field-presets\" role=\"group\" aria-label=\"Preset colours\">\n                <button type=\"button\" class=\"color-field-preset is-on\" style=\"background: #C69C6D;\" aria-label=\"Use #C69C6D\" title=\"#C69C6D\"></button>\n                <button type=\"button\" class=\"color-field-preset\" style=\"background: #18181B;\" aria-label=\"Use #18181B\" title=\"#18181B\"></button>\n                <button type=\"button\" class=\"color-field-preset\" style=\"background: #FFFFFF;\" aria-label=\"Use #FFFFFF\" title=\"#FFFFFF\"></button>\n                <button type=\"button\" class=\"color-field-preset\" style=\"background: #EC4899;\" aria-label=\"Use #EC4899\" title=\"#EC4899\"></button>\n                <button type=\"button\" class=\"color-field-preset\" style=\"background: #2563EB;\" aria-label=\"Use #2563EB\" title=\"#2563EB\"></button>\n              </div>\n            </div>\n          </div>\n          <div class=\"dt-grid-cell\">\n            <span class=\"dt-grid-label\">paired &middot; icon foreground</span>\n            <div class=\"color-field\">\n              <div class=\"color-field-head\">\n                <div class=\"color-field-head-text\">\n                  <label class=\"color-field-label\">Icon colour</label>\n                  <span class=\"color-field-caption\">Foreground glyph on the launcher.</span>\n                </div>\n              </div>\n              <div class=\"color-field-row\">\n                <label class=\"color-field-swatch\" aria-label=\"Pick a colour\">\n                  <span class=\"color-field-swatch-preview\" style=\"background: #FFFFFF;\"></span>\n                </label>\n                <input type=\"text\" class=\"color-field-input\" value=\"#FFFFFF\" spellcheck=\"false\">\n              </div>\n            </div>\n          </div>\n        </div>",
    "css": ".color-field { display: flex; flex-direction: column; gap: 6px; }\n\n.color-field-caption { font: 400 12px/1.4 var(--f-body); color: var(--fg-soft); }\n\n.color-field-head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--s-2);\n}\n\n.color-field-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }\n\n.color-field-input {\n  height: 32px;\n  padding: 0 var(--s-2);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  background: var(--bg-paper);\n  color: var(--fg);\n  font: 400 12.5px/1 var(--f-mono);\n  font-variant-numeric: tabular-nums;\n  text-transform: uppercase;\n}\n\n.color-field-label { font: 500 13px/1.3 var(--f-body); color: var(--fg); }\n\n.color-field-meta { display: inline-flex; align-items: center; gap: 4px; }\n\n.color-field-preset {\n  appearance: none;\n  width: 18px;\n  height: 18px;\n  border-radius: 999px;\n  border: 1.5px solid var(--hair);\n  cursor: pointer;\n  transition: transform var(--dur-2) var(--ease);\n}\n\n.color-field-presets {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n\n.color-field-row {\n  display: grid;\n  grid-template-columns: 32px 1fr;\n  gap: 6px;\n  align-items: center;\n}\n\n.color-field-swatch {\n  position: relative;\n  width: 32px;\n  height: 32px;\n  border-radius: var(--r-sm);\n  border: 1px solid var(--hair);\n  overflow: hidden;\n  cursor: pointer;\n  display: block;\n}\n\n.color-field-swatch-input {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n}\n\n.color-field-swatch-preview {\n  position: absolute;\n  inset: 0;\n}"
  }
}