docs: migrate to @nuxthq/ui-kit (#405)

Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/content/3.forms/1.input.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display an input field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Input.vue
 ---
 
 ## Usage
@@ -218,7 +221,7 @@ const q = ref('')
 ```
 ::
 
-::alert{icon="i-heroicons-exclamation-triangle-20-solid"}
+::callout{icon="i-heroicons-exclamation-triangle-20-solid"}
 As leading and trailing icons are wrapped around a `pointer-events-none` class, if you inject a clickable element in the slot, you need to remove this class to make it clickable by adding `:ui="{ icon: { trailing: { pointer: '' } } }"` to the Input.
 ::
 

docs/content/3.forms/2.textarea.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a textarea field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Textarea.vue
 ---
 
 ## Usage

docs/content/3.forms/3.select.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a select field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Select.vue
 ---
 
 ## Usage

docs/content/3.forms/4.select-menu.md

@@ -1,9 +1,12 @@
 ---
-github: true
 description: Display a select menu with advanced features.
-headlessui:
-  label: 'Listbox'
-  to: 'https://headlessui.com/vue/listbox'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/SelectMenu.vue
+  - label: 'Listbox'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/listbox'
 ---
 
 ## Usage
@@ -122,7 +125,7 @@ excludedProps:
 ---
 ::
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
 Learn how to customize icons from the [Select](/forms/select#icon) component.
 ::
 

docs/content/3.forms/5.checkbox.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a checkbox field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Checkbox.vue
 ---
 
 ## Usage

docs/content/3.forms/6.radio.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a radio field.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Radio.vue
 ---
 
 ## Usage

docs/content/3.forms/7.toggle.md

@@ -1,9 +1,12 @@
 ---
-github: true
 description: Display a toggle field.
-headlessui:
-  label: 'Switch'
-  to: 'https://headlessui.com/vue/switch'
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Toggle.vue
+  - label: 'Switch'
+    icon: i-simple-icons-headlessui
+    to: 'https://headlessui.com/vue/switch'
 ---
 
 ## Usage

docs/content/3.forms/8.range.md

@@ -1,6 +1,9 @@
 ---
-github: true
 description: Display a range field
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Range.vue
 navigation:
   badge: New
 ---

docs/content/3.forms/9.form-group.md

@@ -1,7 +1,9 @@
 ---
-github: 
-  suffix: .ts
 description: Display a label and additional informations around a form element.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/FormGroup.ts
 ---
 
 
@@ -128,7 +130,7 @@ code: >-
 
 You can also use the `error` prop as a boolean to mark the form element as invalid.
 
-::alert{icon="i-heroicons-light-bulb"}
+::callout{icon="i-heroicons-light-bulb"}
   The `error` prop will automatically set the `color` prop of the form element to `red`.
 ::