@maz-ui/mcp 4.0.0-beta.26

package/docs/generated-docs/maz-dropdown.doc.md

@@ -0,0 +1,42 @@
+## Props
+
+| Name                          | Description                                                                                                                                                                                                                                                                  | Type                         | Required | Default                                                        | Possible values                                                                                                              |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| **model-value**               | `v-model` <br/>Controls whether the dropdown menu is open                                                                                                                                                                                                                    | `boolean`                    | No       | `false`                                                        | -                                                                                                                            |
+| **style**                     | Inline styles to apply to the component root element                                                                                                                                                                                                                         | `HTMLAttributes['style']`    | No       | `undefined`                                                    | -                                                                                                                            |
+| **class**                     | CSS classes to apply to the component root element                                                                                                                                                                                                                           | `HTMLAttributes['class']`    | No       | `undefined`                                                    | -                                                                                                                            |
+| **items**                     | Menu items to display in the dropdown Each item can be either a link (with href/to properties) or an action (with onClick function)<br/>**Example:** `[   { label: 'Profile', href: '/profile' },   { label: 'Settings', onClick: () => console.log('Settings clicked') } ]` | `MazDropdownMenuItem[]`      | No       | `[]`                                                           | -                                                                                                                            |
+| **id**                        | Unique identifier for the dropdown component                                                                                                                                                                                                                                 | `string`                     | No       | `undefined`                                                    | -                                                                                                                            |
+| **trigger**                   | Determines how the dropdown should be triggered                                                                                                                                                                                                                              | `MazPopoverProps['trigger']` | No       | `adaptive`                                                     | `click, hover, manual, adaptive`                                                                                             |
+| **color**                     | Color theme for the dropdown button                                                                                                                                                                                                                                          | `MazColor`                   | No       | `transparent`                                                  | `primary, secondary, info, success, warning, destructive, transparent, contrast, accent`                                     |
+| **position**                  | Position of the menu relative to trigger                                                                                                                                                                                                                                     | `Native type`                | No       | `auto`                                                         | `auto, top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end` |
+| **prefer-position**           | Preferred position of the menu relative to trigger when auto position is used                                                                                                                                                                                                | `Native type`                | No       | `bottom-start`                                                 | `auto, top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end` |
+| **close-on-click**            | Controls whether the dropdown menu closes when a menu item is clicked                                                                                                                                                                                                        | `boolean`                    | No       | `true`                                                         | -                                                                                                                            |
+| **disabled**                  | Disables the dropdown functionality                                                                                                                                                                                                                                          | `boolean`                    | No       | `false`                                                        | -                                                                                                                            |
+| **chevron**                   | Controls whether to show the chevron icon in the trigger button                                                                                                                                                                                                              | `boolean`                    | No       | `true`                                                         | -                                                                                                                            |
+| **screen-reader-description** | Accessible description for screen readers describing the dropdown functionality If not provided, the default translation of MazTranslations plugin will be used                                                                                                              | `string`                     | No       | `MazTranslationsSchema['dropdown']['screenReaderDescription']` | -                                                                                                                            |
+| **menu-panel-class**          | Additional CSS classes to apply to the dropdown menu panel Useful for customizing the dropdown appearance (background, border, etc.)                                                                                                                                         | `HTMLAttributes['class']`    | No       | `undefined`                                                    | -                                                                                                                            |
+| **menu-panel-style**          | Inline styles to apply to the dropdown menu panel Useful for custom styling. You may use `!important` to override default styles                                                                                                                                             | `HTMLAttributes['style']`    | No       | `undefined`                                                    | -                                                                                                                            |
+| **block**                     | Makes the dropdown button expand to full width of its container                                                                                                                                                                                                              | `boolean`                    | No       | `false`                                                        | -                                                                                                                            |
+| **dropdown-icon**             | Icon to use instead of the default chevron for the dropdown indicator Can be either an icon name string or a Vue component<br/>**Example:** `'arrow-down'`                                                                                                                   | `string \| IconComponent`    | No       | `undefined`                                                    | -                                                                                                                            |
+| **dropdown-icon-animation**   | Controls whether the dropdown icon rotates when the dropdown is opened                                                                                                                                                                                                       | `boolean`                    | No       | `true`                                                         | -                                                                                                                            |
+| **size**                      | Size of the dropdown button                                                                                                                                                                                                                                                  | `MazSize`                    | No       | `md`                                                           | `mini, xs, sm, md, lg, xl`                                                                                                   |
+
+## Events
+
+| Event name         | Properties                                                                     | Description                                  |
+| ------------------ | ------------------------------------------------------------------------------ | -------------------------------------------- |
+| menuitem-clicked   | **event** `Event` - The native click event from the menu item interaction      | Emitted when a menu item is clicked          |
+| update:model-value | **value** `boolean` - The new open state (true when opened, false when closed) | Emitted when the dropdown open state changes |
+
+## Slots
+
+| Name                      | Description                                                 | Bindings                                                                                                                                                                                                                                                                                                                                                                                     |
+| ------------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| screen-reader-description | description for screen readers (hidden from visual display) |                                                                                                                                                                                                                                                                                                                                                                                              |
+| trigger                   | trigger element for the dropdown                            | **is-open** `boolean` - Current state of the dropdown (true when open, false when closed)<br/>**toggle** `() =&gt; void` - Function to toggle the dropdown<br/>**close** `() =&gt; void` - Function to close the dropdown<br/>**open** `() =&gt; void` - Function to open the dropdown                                                                                                       |
+| default                   | Text content of the trigger element                         |                                                                                                                                                                                                                                                                                                                                                                                              |
+| dropdown-icon             | Dropdown indicator icon                                     | **is-open** `boolean` - Current state of the dropdown (true when open, false when closed)<br/><br/><br/>                                                                                                                                                                                                                                                                                     |
+| dropdown                  | Dropdown menu panel content                                 | **items** `MazDropdownMenuItem[]` - Array of menu items passed via the items prop<br/>**open** `() =&gt; void` - Function to open the dropdown<br/>**close** `() =&gt; void` - Function to close the dropdown<br/>**is-open** `boolean` - Current state of the dropdown (true when open, false when closed)<br/>**toggle** `() =&gt; void` - Function to toggle the dropdown                 |
+| menuitem                  | Menu item component                                         | **item** `MenuItem` - Individual menu item object with properties like label, href, onClick, etc.<br/>**open** `() =&gt; void` - Function to open the dropdown<br/>**close** `() =&gt; void` - Function to close the dropdown<br/>**is-open** `boolean` - Current state of the dropdown (true when open, false when closed)<br/>**toggle** `() =&gt; void` - Function to toggle the dropdown |
+| menuitem-label            | Label content for menu item                                 | **item** `MenuItem` - Individual menu item object containing label and other properties<br/>**open** `() =&gt; void` - Function to open the dropdown<br/>**close** `() =&gt; void` - Function to close the dropdown<br/>**is-open** `boolean` - Current state of the dropdown (true when open, false when closed)<br/>**toggle** `() =&gt; void` - Function to toggle the dropdown           |

package/docs/generated-docs/maz-dropzone.doc.md

@@ -0,0 +1,82 @@
+## Props
+
+| Name                              | Description                                                                                                                                                                                                                                                                                                    | Type                                                                                                                          | Required | Default                                                                                                                                                                                                                |
+| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **id**                            | The id of the dropzone                                                                                                                                                                                                                                                                                         | `string`                                                                                                                      | No       | `undefined`                                                                                                                                                                                                            |
+| **multiple**                      | Allow multiple files to be uploaded.                                                                                                                                                                                                                                                                           | `boolean`                                                                                                                     | No       | `false`                                                                                                                                                                                                                |
+| **data-types**                    | Allowed data types/MIME types for files (e.g. ['application/json'])                                                                                                                                                                                                                                            | `string[]`                                                                                                                    | No       | `['*\/*']`                                                                                                                                                                                                             |
+| **prevent-default-for-unhandled** | Prevent default behavior for unhandled drag & drop events.                                                                                                                                                                                                                                                     | `boolean`                                                                                                                     | No       | `true`                                                                                                                                                                                                                 |
+| **max-file-size**                 | Maximum file size in MB.                                                                                                                                                                                                                                                                                       | `number`                                                                                                                      | No       | `undefined`                                                                                                                                                                                                            |
+| **max-files**                     | Maximum number of files allowed.                                                                                                                                                                                                                                                                               | `number`                                                                                                                      | No       | `undefined`                                                                                                                                                                                                            |
+| **disabled**                      | Disable the dropzone                                                                                                                                                                                                                                                                                           | `boolean`                                                                                                                     | No       | `undefined`                                                                                                                                                                                                            |
+| **preview**                       | Show file preview                                                                                                                                                                                                                                                                                              | `boolean`                                                                                                                     | No       | `undefined`                                                                                                                                                                                                            |
+| **min-file-size**                 | Minimum file size in MB                                                                                                                                                                                                                                                                                        | `number`                                                                                                                      | No       | `undefined`                                                                                                                                                                                                            |
+| **allow-duplicates**              | Allow duplicates                                                                                                                                                                                                                                                                                               | `boolean`                                                                                                                     | No       | `false`                                                                                                                                                                                                                |
+| **translations**                  | **Translations** <br/> <br/>Custom translations for the component<br/>                                                                                                                                                                                                                                         | `{ dragAndDrop?: string fileMaxCount?: string fileMaxSize?: string fileTypes?: string selectFile?: string divider?: string }` | No       | `{   dragAndDrop: 'Drag and drop your files',   fileMaxCount: 'Maximum {count} files',   fileMaxSize: 'Maximum {size} MB',   fileTypes: 'Allowed file types: {types}',   selectFile: 'Select file',   divider: 'or' }` |
+| **color**                         | Main color of the component                                                                                                                                                                                                                                                                                    | `MazColor`                                                                                                                    | No       | `primary`                                                                                                                                                                                                              |
+| **select-file-btn-props**         | MazBtn props [MazBtn props](/components/maz-btn#props)                                                                                                                                                                                                                                                         | `MazBtnProps`                                                                                                                 | No       | `{}`                                                                                                                                                                                                                   |
+| **remove-file-btn-props**         | MazBtn props [MazBtn props](/components/maz-btn#props)                                                                                                                                                                                                                                                         | `MazBtnProps`                                                                                                                 | No       | `{}`                                                                                                                                                                                                                   |
+| **spinner-props**                 | MazSpinner props [MazSpinner props](/components/maz-spinner#props)                                                                                                                                                                                                                                             | `MazSpinnerProps`                                                                                                             | No       | `{}`                                                                                                                                                                                                                   |
+| **auto-upload**                   | **Auto upload files** <br/> <br/>If set to `multiple`, all files will be uploaded at once in a single request. If set to `single`, files will be uploaded one by one in separate requests. If set to `false`, no upload will be done automatically.<br/>                                                       | `"multiple" \| "single" \| false`                                                                                             | No       | `false`                                                                                                                                                                                                                |
+| **url**                           | **Upload URL** <br/> <br/>If set, files will be uploaded to the given URL.<br/>                                                                                                                                                                                                                                | `string`                                                                                                                      | No       | `undefined`                                                                                                                                                                                                            |
+| **request-options**               | **Request options** <br/> <br/>Request options to be used for the upload (using fetch) [Request options](https://developer.mozilla.org/en-US/docs/Web/API/fetch#options)<br/><br/>**Example:** `{ mode: 'no-cors', headers: { 'Content-Type': 'multipart/form-data', 'Authorization': 'Bearer 1234567890' } }` | `RequestInit`                                                                                                                 | No       | `undefined`                                                                                                                                                                                                            |
+| **transform-body**                | Transform the body of the request                                                                                                                                                                                                                                                                              | `TSFunctionType`                                                                                                              | No       | `undefined`                                                                                                                                                                                                            |
+
+## Events
+
+| Event name              | Properties                                                                                                                     | Description                                                     |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- |
+| drop                    | **values** `{ files: File[] \| null, event: DragEvent }` - The dropped files and the drag event                                | Event emitted when files are dropped in the dropzone            |
+| enter                   | **values** `{ files: File[] \| null, event: DragEvent }` - The dragged files and the drag event                                | Event emitted when dragged files enter the dropzone             |
+| leave                   | **values** `{ files: File[] \| null, event: DragEvent }` - The dragged files and the drag event                                | Event emitted when dragged files leave the dropzone             |
+| over                    | **values** `{ files: File[] \| null, event: DragEvent }` - The dragged files and the drag event                                | Event emitted when dragged files are over the dropzone          |
+| add                     | **value** `File` - The added file                                                                                              | Event emitted when a file is added to the dropzone              |
+| remove                  | **value** `File` - The removed file                                                                                            | Event emitted when a file is removed from the dropzone          |
+| error                   | **values** `{ files: File[] \| null, event: DragEvent \| null, code: MazDropzoneErrorCode }` - The files, event and error code | Event emitted when an error occurs                              |
+| upload-error            | **values** `{ file: File, code: MazDropzoneErrorCode, error: unknown }` - The file, error code and error details               | Event emitted when an error occurs during file upload           |
+| upload-error-multiple   | **values** `{ files: File[], code: MazDropzoneErrorCode, error: unknown }` - The files, error code and error details           | Event emitted when an error occurs during multiple files upload |
+| upload-success          | **values** `{ file: File, response?: Response }` - The uploaded file and the response                                          | Event emitted when a file is successfully uploaded              |
+| upload-success-multiple | **values** `{ files: File[], response?: Response }` - The uploaded files and the response                                      | Event emitted when multiple files are successfully uploaded     |
+
+## Slots
+
+| Name          | Description                         | Bindings                                                     |
+| ------------- | ----------------------------------- | ------------------------------------------------------------ |
+| files-area    | Slot to customize the files area    | **files-data** `MazDropzoneFileData[]` - The files data      |
+| file-item     | Slot to customize the file item     | **file** `MazDropzoneFileData` - The drop file data          |
+| no-files-area | Slot to customize the no files area | **select-file** `Function` - The function to select the file |
+| upload-icon   | Slot to customize the upload icon   |                                                              |
+
+## Expose
+
+### uploadFiles
+
+> Upload files <br/>`@description` With this method, the files are uploaded one by one (a request for each file)<br/>`@usage` `mazDropzoneInstance.value?.uploadFiles()`
+
+### uploadFilesMultiple
+
+> Upload multiple files <br/>`@description` With this method, the files are uploaded all at once in a single request<br/>`@usage` `mazDropzoneInstance.value?.uploadFilesMultiple()`
+
+### getFormData
+
+> Get form data <br/>`@description` Get the form data of one file<br/>`@usage` `const formData = mazDropzoneInstance.value?.getFormData(file)`
+
+### getFormDataMultiple
+
+> Get form data multiple <br/>`@description` Get the form data of all files<br/>`@usage` `const formData = mazDropzoneInstance.value?.getFormDataMultiple()`
+
+### reset
+
+> Reset the files <br/>`@description` Remove all files from the dropzone<br/>`@usage` `mazDropzoneInstance.value?.reset()`
+
+### isUploading
+
+> Check if the files are uploading <br/>`@description` Check if the files are uploading<br/>`@usage` `const isUploading = mazDropzoneInstance.value?.isUploading`
+
+### addFile
+
+> Add a file to the dropzone <br/>`@description` Add a file manually to the dropzone<br/>`@usage` `mazDropzoneInstance.value?.addFile(file)`
+
+### removeFile
+
+> Remove a file from the dropzone <br/>`@description` Remove a file manually from the dropzone<br/>`@usage` `mazDropzoneInstance.value?.removeFile(file)`

package/docs/generated-docs/maz-expand-animation.doc.md

@@ -0,0 +1,12 @@
+## Props
+
+| Name                | Description                               | Type     | Required | Default         |
+| ------------------- | ----------------------------------------- | -------- | -------- | --------------- |
+| **duration**        | Duration of the animation in milliseconds | `string` | No       | `'300ms'`       |
+| **timing-function** | Timing function of the animation          | `string` | No       | `'ease-in-out'` |
+
+## Slots
+
+| Name    | Description                    | Bindings |
+| ------- | ------------------------------ | -------- |
+| default | Default Slot - Display content |          |

package/docs/generated-docs/maz-fullscreen-loader.doc.md

@@ -0,0 +1,13 @@
+## Props
+
+| Name                  | Description                         | Type       | Required |
+| --------------------- | ----------------------------------- | ---------- | -------- |
+| **color**             | The color of the spinner            | `MazColor` | No       |
+| **size**              | The size of the spinner             | `string`   | No       |
+| **teleport-selector** | The selector to teleport the loader | `string`   | No       |
+
+## Slots
+
+| Name    | Description | Bindings |
+| ------- | ----------- | -------- |
+| default |             |          |

package/docs/generated-docs/maz-gallery.doc.md

@@ -0,0 +1,17 @@
+## Props
+
+| Name                 | Description                                                                                                                                                                                                                                           | Type                        | Required | Default                          |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | -------- | -------------------------------- |
+| **images**           | Array of string or object: `['https://via.placeholder.com/500', 'https://via.placeholder.com/600']` or `[{ slug: 'https://via.placeholder.com/500', alt: 'image descripton' }, { slug: 'https://via.placeholder.com/600', alt: 'image descripton' }]` | `MazGalleryImage[]`         | No       | `undefined`                      |
+| **displayed-count**  | Images count shown (max: 5)                                                                                                                                                                                                                           | `number`                    | No       | `5`                              |
+| **remaining**        | Remove transparent layer with the remain count (ex: +2)                                                                                                                                                                                               | `boolean`                   | No       | `true`                           |
+| **height**           | Height of gallery - set to `false` to remove default height                                                                                                                                                                                           | `number \| string \| false` | No       | `150`                            |
+| **width**            | Width of gallery - set to `false` to remove default width                                                                                                                                                                                             | `number \| string \| false` | No       | `100%`                           |
+| **radius**           | Disable the border radius of the gallery                                                                                                                                                                                                              | `boolean`                   | No       | `false`                          |
+| **zoom**             | Disable full size display when clicking on image                                                                                                                                                                                                      | `boolean`                   | No       | `false`                          |
+| **has-empty-layer**  | Layer with photography icon when no images is provided                                                                                                                                                                                                | `boolean`                   | No       | `true`                           |
+| **lazy**             | Lazy load image - if false, images are directly loaded                                                                                                                                                                                                | `boolean`                   | No       | `true`                           |
+| **blur**             | Disable blur effect on image hover                                                                                                                                                                                                                    | `boolean`                   | No       | `true`                           |
+| **scale**            | Disable scale animation effect on image hover                                                                                                                                                                                                         | `boolean`                   | No       | `true`                           |
+| **separator-color**  | Choose color of borders between images - Should be a CSS color or CSS variable - Ex: `#000` or `hsl(var(--maz-background-300))`                                                                                                                       | `string`                    | No       | `transparent`                    |
+| **background-color** | Choose background color of the gallery - Should be a CSS color or CSS variable - Ex: `#000` or `hsl(var(--maz-background-300))`                                                                                                                       | `string`                    | No       | `hsl(var(--maz-background-300))` |

package/docs/generated-docs/maz-icon.doc.md

@@ -0,0 +1,18 @@
+## Props
+
+| Name                 | Description                                                                | Type             | Required |
+| -------------------- | -------------------------------------------------------------------------- | ---------------- | -------- |
+| **src**              | The source path of the SVG file - e.g: `/icons/home.svg`                   | `string`         | No       |
+| **path**             | The path of the folder where the SVG files are stored - e.g: `/icons`      | `string`         | No       |
+| **name**             | The name of the SVG file - e.g: `home`                                     | `string`         | No       |
+| **size**             | The size of the SVG file - e.g: `1em`                                      | `string`         | No       |
+| **title**            | The title of the SVG file - e.g: `Home`                                    | `string`         | No       |
+| **transform-source** | The function to transform the source of the SVG file - e.g: `(svg) => svg` | `TSFunctionType` | No       |
+
+## Events
+
+| Event name | Properties                                                 | Description                         |
+| ---------- | ---------------------------------------------------------- | ----------------------------------- |
+| loaded     | **svg** `SVGElement \| undefined` - the svg element loaded | emitted when SVG file is loaded     |
+| unloaded   |                                                            | emitted when SVG file is not loaded |
+| error      | **error** `Error` - the error                              | emitted when SVG file is not loaded |

package/docs/generated-docs/maz-input-code.doc.md

@@ -0,0 +1,25 @@
+## Props
+
+| Name             | Description                                | Type                 | Required | Default     |
+| ---------------- | ------------------------------------------ | -------------------- | -------- | ----------- |
+| **style**        | The style of the component.                | `Native type`        | No       | `undefined` |
+| **class**        | The class of the component.                | `Native type`        | No       | `undefined` |
+| **model-value**  | The value of the component (v-model).      | `T`                  | No       | `undefined` |
+| **code-length**  | The length of the code.                    | `number`             | No       | `4`         |
+| **type**         | The type of the input field.               | `"text" \| "number"` | No       | `'text'`    |
+| **accept-alpha** | Whether to accept alpha characters.        | `boolean`            | No       | `false`     |
+| **required**     | Whether the input is required.             | `boolean`            | No       | `false`     |
+| **disabled**     | Whether the input is disabled.             | `boolean`            | No       | `false`     |
+| **error**        | Whether there is an error with the input.  | `boolean`            | No       | `false`     |
+| **success**      | Whether the input is successful.           | `boolean`            | No       | `false`     |
+| **warning**      | Whether there is a warning with the input. | `boolean`            | No       | `false`     |
+| **size**         | The size of the component.                 | `MazInputCodeSize`   | No       | `'md'`      |
+| **color**        | The color of the component.                | `MazColor`           | No       | `'primary'` |
+| **hint**         | The hint text to display below the input.  | `string`             | No       | `undefined` |
+
+## Events
+
+| Event name         | Properties                                      | Description                      |
+| ------------------ | ----------------------------------------------- | -------------------------------- |
+| update:model-value | **value** `mixed` - The new value of the model. | Update the model value.          |
+| completed          |                                                 | Emitted when all inputs are set. |

package/docs/generated-docs/maz-input-number.doc.md

@@ -0,0 +1,31 @@
+## Props
+
+| Name             | Description                                                       | Type                          | Required | Default                    |
+| ---------------- | ----------------------------------------------------------------- | ----------------------------- | -------- | -------------------------- |
+| **style**        | The inline style object for the component.                        | `HTMLAttributes['style']`     | No       | `undefined`                |
+| **class**        | The CSS class name for the component.                             | `HTMLAttributes['class']`     | No       | `undefined`                |
+| **model-value**  | `v-model` <br/>The value of the component (v-model).              | `number`                      | No       | `undefined`                |
+| **disabled**     | Whether the input number is disabled or not.                      | `boolean`                     | No       | `false`                    |
+| **max**          | The maximum value allowed for the input number.                   | `number`                      | No       | `Number.POSITIVE_INFINITY` |
+| **min**          | The minimum value allowed for the input number.                   | `number`                      | No       | `Number.NEGATIVE_INFINITY` |
+| **step**         | The step value for incrementing or decrementing the input number. | `number`                      | No       | `1`                        |
+| **size**         | The size of the input number component.                           | `MazSize`                     | No       | `'md'`                     |
+| **hide-buttons** | Whether to hide the increment and decrement buttons or not.       | `boolean`                     | No       | `false`                    |
+| **text-center**  | Whether to center the text inside the input or not.               | `boolean`                     | No       | `true`                     |
+| **inputmode**    | The inputmode attribute for the input.                            | `HTMLAttributes['inputmode']` | No       | `'numeric'`                |
+| **block**        | The input will be displayed in full width                         | `boolean`                     | No       | `undefined`                |
+| **error**        | Will display the input in error state.                            | `boolean`                     | No       | `false`                    |
+| **hint**         | The hint text to display below the input.                         | `string`                      | No       | `undefined`                |
+| **success**      | Will display the input in success state.                          | `boolean`                     | No       | `false`                    |
+| **warning**      | Will display the input in warning state.                          | `boolean`                     | No       | `false`                    |
+| **input-props**  | The props for the input component.                                | `MazInputProps`               | No       | `undefined`                |
+
+## Events
+
+| Event name         | Properties                                           | Description                         |
+| ------------------ | ---------------------------------------------------- | ----------------------------------- |
+| focus              | **value** `Event` - event object                     | Emitted when the input is focused   |
+| change             | **value** `Event` - event object                     | Emitted when the value change       |
+| blur               | **value** `Event` - event object                     | Emitted when the input is blurred   |
+| click              | **value** `Event` - event object                     | Emitted input is clicked            |
+| update:model-value | **value** `number \| undefined` - value of the input | Emitted when the input value change |

package/docs/generated-docs/maz-input-phone-number.doc.md

@@ -0,0 +1,56 @@
+## Props
+
+| Name                          | Description                                                                                                                       | Type                                                       | Required | Default                                                                                                                                                                                                                           | Possible values                                                             |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| **style**                     | Style attribut of the component root element                                                                                      | `HTMLAttributes['style']`                                  | No       | `undefined`                                                                                                                                                                                                                       | -                                                                           |
+| **class**                     | Class attribut of the component root element                                                                                      | `HTMLAttributes['class']`                                  | No       | `undefined`                                                                                                                                                                                                                       | -                                                                           |
+| **model-value**               | `v-model` <br/>The current value of the input field in international format (e.g. +33612345678)<br/>**Example:** `"+33612345678"` | `string \| undefined \| null`                              | No       | `undefined`                                                                                                                                                                                                                       | -                                                                           |
+| **country-code**              | `v-model:country-code` <br/>The selected country code (e.g. "FR")<br/>**Example:** `"FR"`                                         | `CountryCode \| undefined \| null`                         | No       | `undefined`                                                                                                                                                                                                                       | -                                                                           |
+| **id**                        | Unique identifier for the component<br/>**Example:** `"phone-input-1"`                                                            | `string`                                                   | No       | `undefined`                                                                                                                                                                                                                       | -                                                                           |
+| **placeholder**               | Text displayed when the input is empty<br/>**Example:** `"Enter your phone number"`                                               | `string`                                                   | No       | `undefined`                                                                                                                                                                                                                       | -                                                                           |
+| **label**                     | Label displayed above the input<br/>**Example:** `"Phone Number"`                                                                 | `string`                                                   | No       | `undefined`                                                                                                                                                                                                                       | -                                                                           |
+| **preferred-countries**       | List of country codes to place first in the select list<br/>**Example:** `["FR", "BE", "GE"]`                                     | `CountryCode[]`                                            | No       | `undefined`                                                                                                                                                                                                                       | -                                                                           |
+| **ignored-countries**         | List of country codes to be removed from the select list<br/>**Example:** `["FR", "BE", "GE"]`                                    | `CountryCode[]`                                            | No       | `undefined`                                                                                                                                                                                                                       | -                                                                           |
+| **only-countries**            | List of country codes to only have the countries selected in the select list<br/>**Example:** `["FR", "BE", "GE"]`                | `CountryCode[]`                                            | No       | `undefined`                                                                                                                                                                                                                       | -                                                                           |
+| **translations**              | Locale strings of the component The default values are the translations of the MazTranslations plugin                             | `Partial<MazTranslationsNestedSchema['inputPhoneNumber']>` | No       | `{   countrySelect: {     error: 'Choose country',     placeholder: 'Country code',     searchPlaceholder: 'Search the country',   },   phoneInput: {     placeholder: 'Phone number',     example: 'Example: {example}',   }, }` | -                                                                           |
+| **list-position**             | Position where the list of countries will be opened                                                                               | `MazPopoverProps['position']`                              | No       | `'bottom-start'`                                                                                                                                                                                                                  | `top left, top right, bottom left, bottom right`                            |
+| **color**                     | Component color applied                                                                                                           | `MazColor`                                                 | No       | `'primary'`                                                                                                                                                                                                                       | `primary, secondary, accent, info, success, warning, destructive, contrast` |
+| **size**                      | Component size applied                                                                                                            | `MazSize`                                                  | No       | `'md'`                                                                                                                                                                                                                            | `xs, sm, md, lg, xl, mini`                                                  |
+| **hide-flags**                | Remove flags in country list                                                                                                      | `boolean`                                                  | No       | `false`                                                                                                                                                                                                                           | -                                                                           |
+| **disabled**                  | Disable input                                                                                                                     | `boolean`                                                  | No       | `false`                                                                                                                                                                                                                           | -                                                                           |
+| **example**                   | Show the phone number example                                                                                                     | `boolean`                                                  | No       | `true`                                                                                                                                                                                                                            | -                                                                           |
+| **search**                    | Disable search input in country list                                                                                              | `boolean`                                                  | No       | `true`                                                                                                                                                                                                                            | -                                                                           |
+| **search-threshold**          | Threshold of the search input in country list where 1 is a perfect match and 0 is a match with any character                      | `number`                                                   | No       | `0.75`                                                                                                                                                                                                                            | -                                                                           |
+| **use-browser-locale**        | If true, the browser locale will be used                                                                                          | `boolean`                                                  | No       | `true`                                                                                                                                                                                                                            | -                                                                           |
+| **fetch-country**             | The component will make a request (https://ipwho.is) to get the location of the user and use it to set the default country code   | `boolean`                                                  | No       | `false`                                                                                                                                                                                                                           | -                                                                           |
+| **hide-country-select**       | Hide the country selector                                                                                                         | `boolean`                                                  | No       | `false`                                                                                                                                                                                                                           | -                                                                           |
+| **show-code-in-list**         | Show country calling code in the country list                                                                                     | `boolean`                                                  | No       | `false`                                                                                                                                                                                                                           | -                                                                           |
+| **custom-countries-list**     | Replace country names                                                                                                             | `Record<CountryCode, string>`                              | No       | `undefined`                                                                                                                                                                                                                       | -                                                                           |
+| **auto-format**               | Disabled auto-format when phone is valid                                                                                          | `boolean`                                                  | No       | `true`                                                                                                                                                                                                                            | -                                                                           |
+| **country-locale**            | Locale of country list<br/>**Example:** `"fr-FR"`                                                                                 | `string`                                                   | No       | `undefined`                                                                                                                                                                                                                       | -                                                                           |
+| **validation-error**          | Disable validation error UI                                                                                                       | `boolean`                                                  | No       | `true`                                                                                                                                                                                                                            | -                                                                           |
+| **validation-success**        | Disable validation success UI                                                                                                     | `boolean`                                                  | No       | `true`                                                                                                                                                                                                                            | -                                                                           |
+| **success**                   | Add success UI                                                                                                                    | `boolean`                                                  | No       | `false`                                                                                                                                                                                                                           | -                                                                           |
+| **error**                     | Add error UI                                                                                                                      | `boolean`                                                  | No       | `false`                                                                                                                                                                                                                           | -                                                                           |
+| **display-country-name**      | Will replace the calling code by the country name in the country selector                                                         | `boolean`                                                  | No       | `false`                                                                                                                                                                                                                           | -                                                                           |
+| **block**                     | The input will be displayed in full width                                                                                         | `boolean`                                                  | No       | `false`                                                                                                                                                                                                                           | -                                                                           |
+| **orientation**               | Orientation of the inputs in the component                                                                                        | `'row' \| 'col' \| 'responsive'`                           | No       | `'responsive'`                                                                                                                                                                                                                    | `row, col, responsive`                                                      |
+| **country-select-attributes** | Meta attributes of the country input                                                                                              | `Record<string, unknown>`                                  | No       | `() => ({   name: 'country',   autocomplete: 'off',   style: {     width: '14rem',   }, })`                                                                                                                                       | -                                                                           |
+| **phone-input-attributes**    | Meta attributes of the phone number input                                                                                         | `Record<string, unknown>`                                  | No       | `() => ({   name: 'phone',   autocomplete: 'tel',   inputmode: 'tel', })`                                                                                                                                                         | -                                                                           |
+
+## Events
+
+| Event name          | Properties                                               | Description                                  |
+| ------------------- | -------------------------------------------------------- | -------------------------------------------- |
+| update:model-value  | **phoneNumber** `string` - phoneNumber formatted         | Emitted when country or phone number changes |
+| country-code        | **countryCode** `CountryCode` - Country code             | Emitted when selected country changes        |
+| update:country-code | **countryCode** `CountryCode` - Country code             | Emitted when country changes                 |
+| data                | **results** `Results` - metadata of current phone number | Emitted when country or phone number changes |
+
+## Slots
+
+| Name              | Description                                                | Bindings                                                                                                                                                                                                     |
+| ----------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| no-results        | Replace the "no results" icon in the country selector list |                                                                                                                                                                                                              |
+| selector-flag     | Country selector flag                                      | **country-code** `String` - current selected country code Ex: `"FR"`                                                                                                                                         |
+| country-list-flag | Country list flag                                          | **country-code** `String` - country code of option Ex: `"FR"`<br/>**option** `{ iso2: string; dialCode: string; name: string; }` - country data<br/>**is-selected** `Boolean` - `true` if option is selected |

package/docs/generated-docs/maz-input-price.doc.md

@@ -0,0 +1,26 @@
+## Props
+
+| Name                 | Description                                                                | Type      | Required | Default                    |
+| -------------------- | -------------------------------------------------------------------------- | --------- | -------- | -------------------------- |
+| **model-value**      | `v-model` <br/>                                                            | `number`  | No       | `undefined`                |
+| **currency**         | The currency to use                                                        | `string`  | No       | `'EUR'`                    |
+| **locale**           | The locale to use                                                          | `string`  | No       | `'fr-FR'`                  |
+| **min**              | The minimum value that the input can accept                                | `number`  | No       | `Number.NEGATIVE_INFINITY` |
+| **max**              | The maximum value that the input can accept                                | `number`  | No       | `Number.POSITIVE_INFINITY` |
+| **no-icon**          | The input will be displayed without icon                                   | `boolean` | No       | `false`                    |
+| **block**            | The input will be displayed in full width                                  | `boolean` | No       | `undefined`                |
+| **error**            | Will display the input in error state.                                     | `boolean` | No       | `undefined`                |
+| **hint**             | The hint text to display below the input.                                  | `string`  | No       | `undefined`                |
+| **success**          | Will display the input in success state.                                   | `boolean` | No       | `undefined`                |
+| **warning**          | Will display the input in warning state.                                   | `boolean` | No       | `undefined`                |
+| **currency-options** | Options for the currency helper - [see](https://maz-ui.com/utils/currency) | `Omit`    | No       | `undefined`                |
+
+## Events
+
+| Event name         | Properties | Description |
+| ------------------ | ---------- | ----------- |
+| update:model-value |            |
+| input              |            |
+| formatted          |            |
+| blur               |            |
+| focus              |            |

package/docs/generated-docs/maz-input-tags.doc.md

@@ -0,0 +1,24 @@
+## Props
+
+| Name                 | Description                                  | Type                    | Required | Default     |
+| -------------------- | -------------------------------------------- | ----------------------- | -------- | ----------- |
+| **style**            | Style attribut of the component root element | `Native type`           | No       | `undefined` |
+| **class**            | Class attribut of the component root element | `Native type`           | No       | `undefined` |
+| **model-value**      | `v-model` <br/>                              | `TSParenthesizedType[]` | No       | `undefined` |
+| **placeholder**      | The placeholder of the input                 | `string`                | No       | `undefined` |
+| **label**            | The label of the input                       | `string`                | No       | `undefined` |
+| **disabled**         | Disable the input                            | `boolean`               | No       | `false`     |
+| **error**            | Display the input with error style           | `boolean`               | No       | `false`     |
+| **success**          | Display the input with success style         | `boolean`               | No       | `false`     |
+| **warning**          | Display the input with warning style         | `boolean`               | No       | `false`     |
+| **size**             | The size of the input                        | `MazSize`               | No       | `'md'`      |
+| **color**            | The color of the input                       | `MazColor`              | No       | `'primary'` |
+| **block**            | The input will be displayed in full width    | `boolean`               | No       | `undefined` |
+| **add-tags-on-blur** | Add tags on blur                             | `boolean`               | No       | `true`      |
+| **hint**             | The hint text to display below the input.    | `string`                | No       | `undefined` |
+
+## Events
+
+| Event name         | Properties | Description |
+| ------------------ | ---------- | ----------- |
+| update:model-value |            |

package/docs/generated-docs/maz-input.doc.md

@@ -0,0 +1,54 @@
+## Props
+
+| Name               | Description                                                                                                                                                                    | Type                                               | Required | Default     | Possible values                                                                            |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------- | -------- | ----------- | ------------------------------------------------------------------------------------------ |
+| **style**          | Inline styles to apply to the component root element                                                                                                                           | `HTMLAttributes['style']`                          | No       | `undefined` | -                                                                                          |
+| **class**          | CSS classes to apply to the component root element                                                                                                                             | `HTMLAttributes['class']`                          | No       | `undefined` | -                                                                                          |
+| **model-value**    | `v-model` <br/>The current value of the input field. This prop is used for two-way data binding with v-model<br/>**Example:** `<MazInput v-model="inputValue" />`              | `T`                                                | No       | `undefined` | -                                                                                          |
+| **placeholder**    | Text displayed when the input is empty to guide the user<br/>**Example:** `"Enter your email address"`                                                                         | `string`                                           | No       | `undefined` | -                                                                                          |
+| **label**          | Floating label that appears inside the input and moves up when focused or filled. Provides better UX than traditional placeholders<br/>**Example:** `"Email Address"`          | `string`                                           | No       | `undefined` | -                                                                                          |
+| **top-label**      | Static label displayed above the input field. Unlike the floating label, this remains fixed<br/>**Example:** `"User Information"`                                              | `string`                                           | No       | `undefined` | -                                                                                          |
+| **assistive-text** | Helper text displayed below the input to provide additional context or validation feedback<br/>**Example:** `"Must contain at least 8 characters"`                             | `string`                                           | No       | `undefined` | -                                                                                          |
+| **color**          | Theme color that affects the border and focus states of the input<br/>**Example:** `"primary"`                                                                                 | `MazColor`                                         | No       | `'primary'` | `primary, secondary, accent, info, success, warning, destructive, contrast`                |
+| **type**           | HTML input type attribute that determines the input behavior and validation<br/>**Example:** `"email"`                                                                         | `InputHTMLAttributes['type']`                      | No       | `'text'`    | `text, password, email, number, tel, url, search, date, time, datetime-local, month, week` |
+| **required**       | Makes the input field mandatory for form submission<br/>**Example:** `true`                                                                                                    | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **disabled**       | Disables the input field, preventing user interaction and form submission<br/>**Example:** `false`                                                                             | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **readonly**       | Makes the input field read-only, allowing selection but preventing modification<br/>**Example:** `false`                                                                       | `boolean`                                          | No       | `undefined` | -                                                                                          |
+| **id**             | Unique identifier for the input element, used for form labels and accessibility<br/>**Example:** `"user-email"`                                                                | `string`                                           | No       | `undefined` | -                                                                                          |
+| **error**          | Applies error styling (red border and text) to indicate validation failure<br/>**Example:** `true`                                                                             | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **success**        | Applies success styling (green border and text) to indicate successful validation<br/>**Example:** `true`                                                                      | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **warning**        | Applies warning styling (orange border and text) to indicate potential issues<br/>**Example:** `true`                                                                          | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **hint**           | Alternative text that replaces the label when provided. Useful for contextual hints<br/>**Example:** `"Optional field"`                                                        | `string`                                           | No       | `undefined` | -                                                                                          |
+| **input-classes**  | Additional CSS classes to apply specifically to the input wrapper element<br/>**Example:** `"custom-input-wrapper"`                                                            | `string`                                           | No       | `undefined` | -                                                                                          |
+| **border**         | Controls whether the input has a visible border. Set to false for borderless inputs<br/>**Example:** `true`                                                                    | `boolean`                                          | No       | `true`      | -                                                                                          |
+| **inputmode**      | HTML inputmode attribute that provides hints for virtual keyboards on mobile devices<br/>**Example:** `"numeric"`                                                              | `InputHTMLAttributes['inputmode']`                 | No       | `'text'`    | `text, numeric, decimal, tel, search, email, url`                                          |
+| **size**           | Controls the height and text size of the input component<br/>**Example:** `"md"`                                                                                               | `MazSize`                                          | No       | `'md'`      | `xs, sm, md, lg, xl, mini`                                                                 |
+| **debounce**       | Enables input debouncing to limit the frequency of value updates. When true, uses 500ms delay. When a number, uses that value as delay in milliseconds<br/>**Example:** `true` | `boolean \| number`                                | No       | `false`     | -                                                                                          |
+| **auto-focus**     | Automatically focuses the input when the component mounts<br/>**Example:** `false`                                                                                             | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **border-active**  | When true, shows the colored border immediately instead of only on focus<br/>**Example:** `false`                                                                              | `boolean`                                          | No       | `false`     | -                                                                                          |
+| **left-icon**      | Icon displayed on the left side of the input. Can be an icon name string or icon component<br/>**Example:** `"user"`                                                           | `string \| IconComponent`                          | No       | `undefined` | -                                                                                          |
+| **right-icon**     | Icon displayed on the right side of the input. Can be an icon name string or icon component<br/>**Example:** `"search"`                                                        | `string \| IconComponent`                          | No       | `undefined` | -                                                                                          |
+| **rounded-size**   | Controls the border radius of the input component<br/>**Example:** `"lg"`                                                                                                      | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | No       | `'lg'`      | `none, sm, md, lg, xl, full`                                                               |
+| **block**          | Makes the input expand to the full width of its container<br/>**Example:** `false`                                                                                             | `boolean`                                          | No       | `undefined` | -                                                                                          |
+| **name**           | The name of the input field. Used for form submission and validation<br/>**Example:** `"email"`                                                                                | `string`                                           | No       | `undefined` | -                                                                                          |
+| **autocomplete**   | The autocomplete attribute for the input field. Used for form submission and validation<br/>**Example:** `"email"`                                                             | `string`                                           | No       | `undefined` | -                                                                                          |
+| **loading**        | Loading state for the input field. Used to show a loading spinner                                                                                                              | `boolean`                                          | No       | `false`     | -                                                                                          |
+
+## Events
+
+| Event name         | Properties                                                                        | Description                                                                                                                           |
+| ------------------ | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| click              | **event** `Event` - The native click event object                                 | Triggered when the user clicks on the input field                                                                                     |
+| update:model-value | **value** `T` - The new input value (string, number, boolean, null, or undefined) | Triggered when the input value changes, used for v-model two-way binding.<br/>This event is debounced if the debounce prop is enabled |
+| focus              | **event** `Event` - The native focus event object                                 | Triggered when the input field gains focus (user clicks or tabs into the field)                                                       |
+| blur               | **event** `Event` - The native blur event object                                  | Triggered when the input field loses focus (user clicks outside or tabs away)                                                         |
+| change             | **event** `Event` - The native change event object                                | Triggered when the input value changes and the field loses focus.<br/>Different from input event which fires on every keystroke       |
+| input              | **event** `Event` - The native input event object                                 | Triggered on every keystroke or input interaction (real-time input changes).<br/>This is the raw input event, not debounced           |
+
+## Slots
+
+| Name       | Description                                           | Bindings |
+| ---------- | ----------------------------------------------------- | -------- |
+| left-icon  | Custom content for the left side of the input field.  |          |
+| right-icon | Custom content for the right side of the input field. |          |
+| loader     | Loader slot.                                          |          |

package/docs/generated-docs/maz-lazy-img.doc.md

@@ -0,0 +1,31 @@
+## Props
+
+| Name                  | Description                                          | Type                      | Required | Default     |
+| --------------------- | ---------------------------------------------------- | ------------------------- | -------- | ----------- |
+| **style**             | The style of the component                           | `Native type`             | No       | `undefined` |
+| **class**             | The class of the component                           | `Native type`             | No       | `undefined` |
+| **src**               | The source of the image                              | `string \| Image \| null` | No       | `undefined` |
+| **alt**               | The alt of the image                                 | `string`                  | No       | `undefined` |
+| **hide-loader**       | Remove the loader                                    | `boolean`                 | No       | `undefined` |
+| **observer-once**     | Remove the observer once the image is loaded         | `boolean`                 | No       | `true`      |
+| **load-once**         | Remove the observer once the image is loaded         | `boolean`                 | No       | `undefined` |
+| **image-height-full** | Make the image height full                           | `boolean`                 | No       | `undefined` |
+| **observer-options**  | The options of the observer                          | `Native type`             | No       | `undefined` |
+| **fallback-src**      | The fallback src to replace the src on loading error | `string`                  | No       | `undefined` |
+| **img-class**         | The classes of the image element                     | `Native type`             | No       | `undefined` |
+| **block**             | The image will be displayed in full width            | `boolean`                 | No       | `undefined` |
+
+## Events
+
+| Event name   | Properties | Description                            |
+| ------------ | ---------- | -------------------------------------- |
+| intersecting |            | Emitted when the image is intersecting |
+| loading      |            | Emitted when the image is loading      |
+| loaded       |            | Emitted when the image is loaded       |
+| error        |            | Emitted when the image is in error     |
+
+## Slots
+
+| Name    | Description | Bindings |
+| ------- | ----------- | -------- |
+| default |             |          |