docs(color-field): update docs for ColorField

Author: lepture

docs/content/components/color-field.md

@@ -1,7 +1,27 @@
 ---
 title: Color Field
-description:
+description: Captures a color using native functionality.
 status: alpha
+source: https://github.com/typlog/ui/tree/main/src/components/inputs/ColorField.vue
 ---
 
 <Example name="color-field/Overview.vue" variant="full" />
+
+
+## API Reference
+
+<PropsTable name="ColorField" />
+
+## Examples
+
+### Size
+
+<Example name="color-field/Size.vue" />
+
+### Radius
+
+<Example name="color-field/Radius.vue" />
+
+### Variant
+
+<Example name="color-field/Variant.vue" />

docs/content/components/pagination.md

@@ -0,0 +1,5 @@
+---
+title: Pagination
+status: alpha
+source: https://github.com/typlog/ui/tree/main/src/components/pagination
+---

docs/content/components/text-area.md

@@ -1,6 +1,6 @@
 ---
 title: TextArea
-description: Captures user input with an optional slot for buttons and icons.
+description: Captures multi-line user input.
 status: stable
 source: https://github.com/typlog/ui/tree/main/src/components/inputs/TextArea.vue
 radix: https://www.radix-ui.com/themes/docs/components/text-area

docs/examples/color-field/Overview.vue

@@ -4,6 +4,6 @@ import { ColorField } from '#components'
 
 <template>
   <div class="flex">
-    <ColorField default-value="#3e63dd" />
+    <ColorField default-value="#3e63dd" radius="full" />
   </div>
 </template>

docs/examples/color-field/Radius.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ColorField } from '#components'
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <ColorField default-value="#3e63dd" radius="none" />
+    <ColorField default-value="#3e63dd" radius="small" />
+    <ColorField default-value="#3e63dd" radius="medium" />
+    <ColorField default-value="#3e63dd" radius="large" />
+    <ColorField default-value="#3e63dd" radius="full" />
+  </div>
+</template>

docs/examples/color-field/Size.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ColorField } from '#components'
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <ColorField default-value="#3e63dd" size="1" />
+    <ColorField default-value="#3e63dd" size="2" />
+    <ColorField default-value="#3e63dd" size="3" />
+  </div>
+</template>

docs/examples/color-field/Variant.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ColorField } from '#components'
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <ColorField default-value="#3e63dd" variant="solid" radius="full" />
+    <ColorField default-value="#3e63dd" variant="ring" radius="full" />
+  </div>
+</template>