{
  "name": "WIDGET_SCHEMES",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ColorSwatchPicker.tsx",
  "chapterTag": "21 Designer Toolkit",
  "chapter": "21-designer-toolkit.html",
  "sectionId": "color-swatch-picker",
  "elName": "ColorSwatchPicker",
  "demoUrl": "https://brand.magicblocks.ai/components/21-designer-toolkit#color-swatch-picker",
  "hasLiveDemo": false,
  "description": "Canonical \"popular scheme\" presets used by the widget designer's\ndefault styling. Consumers can pass their own list — these are\nprovided as a starting point.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "ColorSwatchPicker",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "WIDGET_SCHEMES",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ColorSwatchPickerProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "ColorSwatch",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { WIDGET_SCHEMES } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "swatches",
      "optional": false,
      "type": "ColorSwatch[]",
      "doc": "Available swatches."
    },
    {
      "name": "value",
      "optional": true,
      "type": "string | null",
      "doc": "Controlled selected id."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "string | null",
      "doc": "Uncontrolled initial selected id."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(id: string) => void",
      "doc": "Fires when the selection changes."
    },
    {
      "name": "showLabels",
      "optional": true,
      "type": "boolean",
      "doc": "Show labels beneath swatches. Default `true`."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable the picker."
    }
  ],
  "classesUsed": [
    "color-swatch",
    "color-swatch-disc",
    "color-swatch-label",
    "color-swatch-picker"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"dt-grid\">\n          <div class=\"dt-grid-cell\">\n            <span class=\"dt-grid-label\">WIDGET_SCHEMES &middot; orange selected</span>\n            <div class=\"color-swatch-picker\" role=\"radiogroup\">\n              <button type=\"button\" role=\"radio\" aria-checked=\"false\" class=\"color-swatch\" title=\"Green\">\n                <span class=\"color-swatch-disc\" style=\"background: #1A8754;\" aria-hidden=\"true\"></span>\n                <span class=\"color-swatch-label\">Green</span>\n              </button>\n              <button type=\"button\" role=\"radio\" aria-checked=\"false\" class=\"color-swatch\" title=\"Yellow\">\n                <span class=\"color-swatch-disc\" style=\"background: #F9AD03;\" aria-hidden=\"true\"></span>\n                <span class=\"color-swatch-label\">Yellow</span>\n              </button>\n              <button type=\"button\" role=\"radio\" aria-checked=\"false\" class=\"color-swatch\" title=\"Pink\">\n                <span class=\"color-swatch-disc\" style=\"background: #EC4899;\" aria-hidden=\"true\"></span>\n                <span class=\"color-swatch-label\">Pink</span>\n              </button>\n              <button type=\"button\" role=\"radio\" aria-checked=\"false\" class=\"color-swatch\" title=\"Blue\">\n                <span class=\"color-swatch-disc\" style=\"background: #2563EB;\" aria-hidden=\"true\"></span>\n                <span class=\"color-swatch-label\">Blue</span>\n              </button>\n              <button type=\"button\" role=\"radio\" aria-checked=\"false\" class=\"color-swatch\" title=\"Navy\">\n                <span class=\"color-swatch-disc\" style=\"background: #0F172A;\" aria-hidden=\"true\"></span>\n                <span class=\"color-swatch-label\">Navy</span>\n              </button>\n              <button type=\"button\" role=\"radio\" aria-checked=\"true\" class=\"color-swatch is-on\" title=\"Orange\">\n                <span class=\"color-swatch-disc\" style=\"background: #EA580C;\" aria-hidden=\"true\"></span>\n                <span class=\"color-swatch-label\">Orange</span>\n              </button>\n              <button type=\"button\" role=\"radio\" aria-checked=\"false\" class=\"color-swatch\" title=\"Black\">\n                <span class=\"color-swatch-disc\" style=\"background: #18181B;\" aria-hidden=\"true\"></span>\n                <span class=\"color-swatch-label\">Black</span>\n              </button>\n              <button type=\"button\" role=\"radio\" aria-checked=\"false\" class=\"color-swatch\" title=\"White\">\n                <span class=\"color-swatch-disc\" style=\"background: #FFFFFF;\" aria-hidden=\"true\"></span>\n                <span class=\"color-swatch-label\">White</span>\n              </button>\n            </div>\n          </div>\n          <div class=\"dt-grid-cell\">\n            <span class=\"dt-grid-label\">two-tone &middot; diagonal split</span>\n            <div class=\"color-swatch-picker\" role=\"radiogroup\">\n              <button type=\"button\" role=\"radio\" aria-checked=\"true\" class=\"color-swatch is-on\" title=\"Warm Glow\">\n                <span class=\"color-swatch-disc\" style=\"background: linear-gradient(135deg, #C69C6D 50%, #FFE4C4 50%);\" aria-hidden=\"true\"></span>\n                <span class=\"color-swatch-label\">Warm Glow</span>\n              </button>\n              <button type=\"button\" role=\"radio\" aria-checked=\"false\" class=\"color-swatch\" title=\"Deep Ocean\">\n                <span class=\"color-swatch-disc\" style=\"background: linear-gradient(135deg, #0F172A 50%, #2563EB 50%);\" aria-hidden=\"true\"></span>\n                <span class=\"color-swatch-label\">Deep Ocean</span>\n              </button>\n              <button type=\"button\" role=\"radio\" aria-checked=\"false\" class=\"color-swatch\" title=\"Forest\">\n                <span class=\"color-swatch-disc\" style=\"background: linear-gradient(135deg, #1A8754 50%, #F9AD03 50%);\" aria-hidden=\"true\"></span>\n                <span class=\"color-swatch-label\">Forest</span>\n              </button>\n              <button type=\"button\" role=\"radio\" aria-checked=\"false\" class=\"color-swatch\" title=\"Berry\">\n                <span class=\"color-swatch-disc\" style=\"background: linear-gradient(135deg, #EC4899 50%, #18181B 50%);\" aria-hidden=\"true\"></span>\n                <span class=\"color-swatch-label\">Berry</span>\n              </button>\n            </div>\n          </div>\n        </div>",
    "css": ".color-swatch {\n  appearance: none;\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  background: transparent;\n  border: 0;\n  padding: 4px;\n  cursor: pointer;\n  border-radius: var(--r-sm);\n  transition: background var(--dur-2) var(--ease);\n}\n\n.color-swatch-disc {\n  width: 32px;\n  height: 32px;\n  border-radius: 999px;\n  border: 1.5px solid var(--hair);\n  display: block;\n  position: relative;\n  transition: transform var(--dur-2) var(--ease);\n}\n\n.color-swatch-label {\n  font: 500 11px/1 var(--f-body);\n  color: var(--fg);\n}\n\n.color-swatch-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n}"
  }
}