{
  "name": "DomainList",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/DomainList.tsx",
  "chapterTag": "04 Forms & Inputs",
  "chapter": "05-forms-and-inputs.html",
  "sectionId": "domain-list",
  "elName": "DomainList",
  "demoUrl": "https://brand.magicblocks.ai/components/05-forms-and-inputs#domain-list",
  "hasLiveDemo": false,
  "description": "Chip-input for hostnames — used for the Design & Go Live domain whitelist,\nCORS origin lists, and any \"list of hosts with validation\" surface.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "DomainList",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "DomainListProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { DomainList } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "string[]",
      "doc": "Controlled list of hostnames."
    },
    {
      "name": "defaultValue",
      "optional": true,
      "type": "string[]",
      "doc": "Uncontrolled initial hostnames."
    },
    {
      "name": "onValueChange",
      "optional": true,
      "type": "(domains: string[]) => void",
      "doc": "Fires when the list changes."
    },
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Label above the input."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Caption beneath the label."
    },
    {
      "name": "placeholder",
      "optional": true,
      "type": "string",
      "doc": "Input placeholder. Default `\"e.g. example.com\"`."
    },
    {
      "name": "validate",
      "optional": true,
      "type": "(host: string) => boolean",
      "doc": "Validator for an individual hostname. Default: simple `host.tld` rule."
    },
    {
      "name": "uniq",
      "optional": true,
      "type": "boolean",
      "doc": "Reject duplicates (case-insensitive). Default `true`."
    },
    {
      "name": "allLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Allowed-everywhere shorthand label. Default `\"All domains allowed\"`."
    },
    {
      "name": "allAllowed",
      "optional": true,
      "type": "boolean",
      "doc": "When `true`, the input is hidden and the \"all domains allowed\" caption shows."
    },
    {
      "name": "onAllAllowedChange",
      "optional": true,
      "type": "(all: boolean) => void",
      "doc": "Fires when the all-allowed toggle changes."
    },
    {
      "name": "showAllToggle",
      "optional": true,
      "type": "boolean",
      "doc": "Show the \"Allow all\" toggle. Default `true`."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable interaction."
    }
  ],
  "classesUsed": [
    "domain-list",
    "domain-list-all-toggle",
    "domain-list-caption",
    "domain-list-chip",
    "domain-list-chip-label",
    "domain-list-chip-remove",
    "domain-list-chips",
    "domain-list-error",
    "domain-list-head",
    "domain-list-input",
    "domain-list-label"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"domain-list\">\n  <div class=\"domain-list-head\">\n    <label class=\"domain-list-label\">Allowed domains</label>\n    <span class=\"domain-list-caption\">The widget will only render on these hostnames.</span>\n  </div>\n  <div class=\"domain-list-chips\">\n    <span class=\"domain-list-chip\">\n      <span class=\"domain-list-chip-label\">acme.com</span>\n      <button type=\"button\" class=\"domain-list-chip-remove\" aria-label=\"Remove acme.com\">×</button>\n    </span>\n    <span class=\"domain-list-chip\">\n      <span class=\"domain-list-chip-label\">shop.acme.com</span>\n      <button type=\"button\" class=\"domain-list-chip-remove\" aria-label=\"Remove shop.acme.com\">×</button>\n    </span>\n    <input class=\"domain-list-input\" placeholder=\"e.g. example.com\">\n  </div>\n</div>",
    "css": ".domain-list { display: flex; flex-direction: column; gap: var(--s-2); }\n\n.domain-list-all-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font: 400 13px/1.3 var(--f-body);\n  color: var(--fg);\n  cursor: pointer;\n}\n\n.domain-list-caption { font: 400 12px/1.4 var(--f-body); color: var(--fg-soft); }\n\n.domain-list-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 4px 3px 8px;\n  background: var(--bg-warm);\n  border-radius: 999px;\n  font: 400 12.5px/1 var(--f-mono);\n  color: var(--fg);\n}\n\n.domain-list-chip-label { line-height: 1.2; }\n\n.domain-list-chip-remove {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  width: 16px; height: 16px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--fg-faint);\n  cursor: pointer;\n  border-radius: 999px;\n}\n\n.domain-list-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n  align-items: center;\n  padding: 4px 6px;\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  background: var(--bg-paper);\n  min-height: 36px;\n}\n\n.domain-list-error {\n  font: 400 12px/1.3 var(--f-body);\n  color: var(--error-text, #8B2417);\n}\n\n.domain-list-head { display: flex; flex-direction: column; gap: 2px; }\n\n.domain-list-input {\n  flex: 1;\n  min-width: 80px;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  outline: none;\n  padding: 4px 6px;\n  font: 400 13px/1.2 var(--f-body);\n  color: var(--fg);\n}\n\n.domain-list-label { font: 500 13px/1.3 var(--f-body); color: var(--fg); }"
  }
}