feat(Input): handle type file

Resolves #563

docs/content/2.components/input.md

@@ -71,12 +71,20 @@ props:
 
 Use the `type` prop to change the input type, the default `type` is set to `text`, you can check all the available types at [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types).
 
-We have improved the implementation of certain types such as [Checkbox](/components/checkbox), [Radio](/components/radio-group), etc.
+Some types have been implemented in their own components, such as [Checkbox](/components/checkbox), [Radio](/components/radio-group), etc. and others have been styled like `file` for example.
 
 ::component-card
 ---
 props:
-  type: 'password'
+  type: 'file'
+  size: sm
+options:
+  - name: type
+    restriction: included
+    values:
+      - file
+      - password
+      - number
 ---
 ::
 

src/runtime/components/forms/Input.vue

@@ -236,6 +236,7 @@ export default defineComponent({
         ui.value.form,
         rounded.value,
         ui.value.placeholder,
+        props.type === 'file' && [ui.value.file.base, ui.value.file.padding[size.value]],
         ui.value.size[size.value],
         props.padded ? ui.value.padding[size.value] : 'p-0',
         variant?.replaceAll('{color}', color.value),

src/runtime/ui.config/forms/input.ts

@@ -4,6 +4,17 @@ export default {
   form: 'form-input',
   rounded: 'rounded-md',
   placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
+  file: {
+    base: 'file:cursor-pointer file:rounded-l-md file:absolute file:left-0 file:inset-y-0 file:font-medium file:m-0 file:border-0 file:ring-1 file:ring-gray-300 dark:file:ring-gray-700 file:text-gray-900 dark:file:text-white file:bg-gray-50 hover:file:bg-gray-100 dark:file:bg-gray-800 dark:hover:file:bg-gray-700/50',
+    padding: {
+      '2xs': 'ps-[85px]',
+      xs: 'ps-[87px]',
+      sm: 'ps-[96px]',
+      md: 'ps-[98px]',
+      lg: 'ps-[100px]',
+      xl: 'ps-[109px]'
+    }
+  },
   size: {
     '2xs': 'text-xs',
     xs: 'text-xs',