[react] feat: Added docs for components/KeyVal

sites/dev/docs/reference/packages/react/components/keyval/_examples.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { KeyVal } from '@freesewing/react/components/KeyVal'
+
+const colors = ['primary', 'secondary', 'accent', 'neutral', 'success', 'warning', 'error', 'info']
+
+export const KeyValExample = () => (
+  <>
+    <b>Default</b>
+    <br />
+    <KeyVal k="key" val="value" />
+    <br />
+    <b>Colors</b>
+    <div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-1">
+      {colors.map(c => <KeyVal key={c} k="color" val={c} color={c}/>)}
+    </div>
+    <b>Small</b>
+    <div className="tw:flex tw:flex-row tw:flex-wrap tw:gap-1">
+      {colors.map(c => <KeyVal key={c} k="color" val={c} color={c} small/>)}
+    </div>
+  </>
+)

sites/dev/docs/reference/packages/react/components/keyval/readme.mdx

@@ -1,7 +1,21 @@
 ---
 title: KeyVal
 ---
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.keyval.mjs'
+import { KeyValExample } from './_examples.js'
+
+
+<DocusaurusDoc>
+
+The __KeyVal component family provides the following components:
+
+- [KeyVal](#keyval)
+
+## KeyVal
+<ComponentDocs docs={jsdoc.jsdocKeyVal} example={KeyValExample} />
+
+</DocusaurusDoc>
+
 
-:::note
-This page is yet to be created
-:::