diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index a8086b7..6749138 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -48,6 +48,10 @@ export default defineConfig({
text: 'BnInput',
link: '/components/bn-input',
},
+ {
+ text: 'BnFileInput',
+ link: '/components/bn-file-input',
+ },
],
},
],
diff --git a/docs/components/bn-file-input.md b/docs/components/bn-file-input.md
new file mode 100644
index 0000000..83d7238
--- /dev/null
+++ b/docs/components/bn-file-input.md
@@ -0,0 +1,326 @@
+
+
+# BnFileInput
+
+BnFileInput is a wrapper for ` ` elements, designed to work with `v-model` to simplify management. It returns a file list if it allows multiple files or a single file if it's not.
+
+## Basic Usage
+
+```html
+
+```
+
+
+
+
+
+## Input Attributes
+The underlying `input` element inherits common attributes from both `input` and `fileinput`, such as `disabled`, `multiple`, and `name`.
+
+```html
+
+
+```
+
+
+
+
+
+
+
+
+It also supports the following props:
+
+- `buttonText`: The text that will appear on the button to open the window for file upload.
+- `placeholder`: The text for the placeholder in the default appearance.
+- `variant`: Can be 'default' or 'avatar'. If it is 'default', it uses a button; if it is 'avatar', it displays a preview image as the input.
+- `avatarShape`: It can take the values 'default' or 'circle' and determines the shape of the preview image.
+
+
+## Vee-Validate
+BnFileInput works with vee-validate out of the box.
+
+```vue
+
+
+
+
+
+```
+
+
+
+
+
+## [TODO] Colors
+
+Due to the way Tailwind compiles classes, to avoid generating CSS for every single color it includes, Banano only has access to the colors you define in its configuration:
+
+```javascript
+// tailwind.config.js
+{
+...
+ require('banano/tailwind')({ colors: ['lime']}),
+}
+```
+
+```html
+
+```
+
+
+
+
+
+
+## Slots
+
+### default
+
+This slot allows you to customize the entire `FileInput` appearance. It includes the following slot props:
+
+- `imagePreviewPath`: A function that takes a file as input and generates a URL to preview it.
+- `disabled`: A boolean indicating whether the input is disabled.
+- `open-file-dialog`: A function that allows you to open the file upload window.
+- `remove-file`: A function that removes the provided file from the value. If the input allows a single file, it sets the value to `undefined`. If it allows multiple files, it removes the selected file from the list.
+- `add-file`: A function that adds a file. If the input allows a single file, it replaces the older file with the new one. If it allows multiple files, it adds the file to the list.
+- `value`: The input value. If it's a single file input, it returns a file object. If it's a multiple file input, it returns a file list.
+
+```html
+
+
+
+
+
+### bottom
+
+Useful for hints or errors. Includes the following slot props:
+- `errorMessage`: `vee-validate` property, if the input is invalid
+- `valid`: `vee-validate` meta property
+- `touched`: `vee-validate` meta property
+
+```html
+
+
+
+
+
+ {{ errorMessage }}
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+ {{ errorMessage }}
+
+
+
+
+
+
+
+
+
+## [TODO] Customization
+
+There are three ways to customize the appearance of the `BnFileInput` component:
+
+
+
+### Theming
+
+You can change the default appearance or even add variants by editing the configuration of the TailwindCSS plugin.
+
+```javascript
+ plugins: [
+ require('@tailwindcss/forms'),
+ require('@headlessui/tailwindcss'),
+ banano.tailwindPlugin({
+ theme: {
+ BnInput: {
+ '.bn-file-input': {
+ '@apply bg-green-600': {},
+ }
+ }
+ }
+ }),
+ ],
+```
+
+
+You can find more information about customizing the library in [Theme Customization](../theme-customization.md).