{
  "name": "key-value-validation-demo",
  "type": "registry:example",
  "registryDependencies": [
    "key-value"
  ],
  "files": [
    {
      "path": "examples/key-value-validation-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport {\n  KeyValue,\n  KeyValueAdd,\n  KeyValueError,\n  KeyValueItem,\n  KeyValueKeyInput,\n  KeyValueList,\n  KeyValueRemove,\n  KeyValueValueInput,\n} from \"@/registry/bases/radix/ui/key-value\";\n\nexport default function KeyValueValidationDemo() {\n  return (\n    <KeyValue\n      defaultValue={[\n        { id: \"1\", key: \"API_KEY\", value: \"sk-1234567890\" },\n        { id: \"2\", key: \"invalid key\", value: \"\" },\n        { id: \"3\", key: \"DATABASE_URL\", value: \"short\" },\n      ]}\n      keyPlaceholder=\"KEY\"\n      valuePlaceholder=\"value\"\n      onKeyValidate={(key) => {\n        if (!key) return \"Key is required\";\n        if (!/^[A-Z_][A-Z0-9_]*$/.test(key)) {\n          return \"Must be uppercase with underscores\";\n        }\n        return undefined;\n      }}\n      onValueValidate={(value, key) => {\n        if (key.includes(\"KEY\") && value.length < 10) {\n          return \"API keys must be at least 10 characters\";\n        }\n        return undefined;\n      }}\n      allowDuplicateKeys={false}\n    >\n      <KeyValueList>\n        <KeyValueItem className=\"flex-col items-start\">\n          <div className=\"flex w-full gap-2\">\n            <div className=\"flex flex-1 flex-col gap-1\">\n              <KeyValueKeyInput className=\"font-mono\" />\n              <KeyValueError field=\"key\" />\n            </div>\n            <div className=\"flex flex-1 flex-col gap-1\">\n              <KeyValueValueInput className=\"font-mono\" />\n              <KeyValueError field=\"value\" />\n            </div>\n            <KeyValueRemove />\n          </div>\n        </KeyValueItem>\n      </KeyValueList>\n      <KeyValueAdd />\n    </KeyValue>\n  );\n}\n",
      "target": ""
    }
  ]
}