feat: rewrite to use app config and rework docs (#143)

Co-authored-by: Daniel Roe <daniel@roe.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

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

@@ -0,0 +1,91 @@
+---
+github: true
+---
+
+## Usage
+
+::component-card
+---
+baseProps:
+  name: 'input'
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the Input.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+props:
+  size: 'sm'
+---
+::
+
+### Icon
+
+Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
+
+Use the `leading` and `trailing` props to set the icon position or the `leadingIcon` and `trailingIcon` props to set a different icon for each position.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+props:
+  icon: 'i-heroicons-magnifying-glass-20-solid'
+  appearance: 'white'
+  size: 'sm'
+  trailing: false
+  placeholder: 'Search...'
+excludedProps:
+  - icon
+  - placeholder
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the Input.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+props:
+  placeholder: 'Search...'
+  appearance: 'white'
+  disabled: true
+excludedProps:
+  - placeholder
+---
+::
+
+### Loading
+
+Use the `loading` prop to show a loading icon and disable the Input.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search'
+props:
+  loading: true
+  icon: 'i-heroicons-magnifying-glass-20-solid'
+excludedProps:
+  - icon
+---
+::
+
+### Group
+
+## Props
+
+:component-props
+
+## Preset
+
+:component-preset