📝 docs(input): add input component doc

docs/content/2.components/input.md

@@ -0,0 +1,147 @@
+---
+description: The input component is used to get user input
+---
+
+## Usage
+
+The basic usage.
+
+:::ComponentPreview
+---
+privateProps:
+  placeholder: "Type something..."
+---
+:::
+
+### Sizes
+
+::ComponentPreview
+---
+privateProps:
+  placeholder: "Type something..."
+props:
+  size: sm
+---
+::
+
+### Colors
+
+The `color` prop affects the color of the border.
+
+::ComponentPreview
+---
+props:
+  color: primary
+---
+::
+
+### Variants
+
+::ComponentPreview
+---
+privateProps:
+  placeholder: "Search..."
+props:
+  variant: outline
+---
+::
+
+### Type
+
+The `type` prop changes the type of the input. All the aviailable types can be found at [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
+
+::ComponentPreview
+---
+privateProps:
+  placeholder: "Type anything..."
+props:
+  type: text
+---
+::
+
+### Placeholder
+
+The `placeholder` prop sets the placeholder text. It is shown when the input is empty.
+
+::ComponentPreview
+---
+props:
+  placeholder: "Type anything..."
+---
+::
+
+### Padded
+
+Inputs can be with no padding.
+
+::ComponentPreview
+---
+privateProps:
+  placeholder: "Search..."
+  variant: plain
+props:
+  padded: false
+---
+::
+
+### Disabled
+
+Inputs can be disabled.
+
+::ComponentPreview
+---
+privateProps:
+  placeholder: "Search..."
+props:
+  disabled: true
+---
+::
+
+### Model Modifiers
+
+#### .trim
+
+The `.trim` modifier trims the input value.
+
+```vue [page]
+<script lang="ts" setup>
+const modal = ref<string>("");
+</script>
+
+<template>
+  <RayInput v-model.trim="modal" />
+</template>
+```
+
+#### .number
+
+The `.number` modifier converts the input value to a number. Non-numeric values are ignored.
+
+```vue [page]
+<script lang="ts" setup>
+const modal = ref<number>(0);
+</script>
+
+<template>
+  <RayInput v-model.number="modal" />
+</template>
+```
+
+#### .lazy
+
+The `.lazy` modifier syncs the input value with the model only on `change` event.
+
+```vue [page]
+<script lang="ts" setup>
+const modal = ref<string>("");
+</script>
+
+<template>
+  <RayInput v-model.lazy="modal" />
+</template>
+```
+
+## Config
+
+::ComponentDefaults
+::