@maz-ui/mcp 5.0.0 → 5.1.0-beta.0

package/docs/components/maz-link.md

@@ -0,0 +1,146 @@
+---
+title: "MazLink"
+description: "MazLink is a standalone component to create links and buttons."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-link"
+---
+
+# MazLink
+
+> MazLink is a standalone component to create links and buttons.
+
+- Package: `maz-ui`
+- Import: `import MazLink from 'maz-ui/components/MazLink'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-link
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+import MazLink from 'maz-ui/components/MazLink'
+</script>
+
+<template>
+  <MazLink href="https://maz-ui.com" target="_blank">
+    View product detail
+  </MazLink>
+</template>
+```
+
+## Color
+
+```html
+<MazLink color="primary"> View product detail (primary) </MazLink>
+<MazLink color="secondary"> View product detail (secondary) </MazLink>
+<MazLink color="info"> View product detail (info) </MazLink>
+<MazLink color="success"> View product detail (success) </MazLink>
+<MazLink color="warning"> View product detail (warning) </MazLink>
+<MazLink color="destructive"> View product detail (destructive) </MazLink>
+<MazLink color="accent"> View product detail (accent) </MazLink>
+<MazLink color="contrast"> View product detail (contrast) </MazLink>
+<MazLink color="surface"> View product detail (surface) </MazLink>
+<MazLink color="muted"> View product detail (muted) </MazLink>
+```
+
+## RouterLink
+
+When you use the `to` prop, the component will be a `router-link` and will use the `router` to navigate.
+
+```html
+<MazLink :to="{ path: '/' }"> View product detail </MazLink>
+```
+
+## Icons
+
+You can add an icon on the left and right to the link text with the `start-icon` and `end-icon` props.
+
+For more information about the icons, please check the [MazBtn](./maz-btn.md#icons) page.
+
+```vue
+<script lang="ts" setup>
+import { MazCheck } from '@maz-ui/icons/raw/MazCheck'
+import { MazHome } from '@maz-ui/icons/raw/MazHome'
+</script>
+
+<template>
+  <MazLink start-icon="/home.svg" :end-icon="MazHome">
+    View product detail
+  </MazLink>
+
+  <MazLink start-icon="/home.svg" :end-icon="MazHome">
+    View product detail
+  </MazLink>
+</template>
+```
+
+`startIcon` and `endIcon` also accept a full `MazIconProps` object - pass the same shape `<MazIcon>` accepts to override the icon size, add a `<title>` for screen readers, etc.
+
+```vue
+<MazLink
+  href="/external"
+  :end-icon="{
+    icon: MazArrowRight,
+    size: 'lg',
+    title: 'Go to external page',
+    flipIconForRtl: true,
+  }"
+>
+  Read more
+</MazLink>
+```
+
+## External icon (true by default)
+
+When you use the `autoExternal` prop, the component will have an external icon if the link has the target `_blank`.
+
+```html
+<MazLink href="https://loicmazuel.com" target="_blank" auto-external> View product detail </MazLink>
+```
+
+## As button
+
+If no `to` or `href` is provided, the component will be a `button` by default. You can force the component to be a `button`, `a`, `router-link` or `nuxt-link` with the `as` prop.
+
+```vue
+<script lang="ts" setup>
+  import MazLink from 'maz-ui/components/MazLink'
+</script>
+
+<template>
+  <MazLink as="button"> View product detail </MazLink>
+  <MazLink as="button" disabled> View product detail </MazLink>
+</template>
+```
+
+## MazLink API
+
+`import MazLink from 'maz-ui/components/MazLink'`
+
+### Props
+
+- `as` (`string`, default: `depends on the provided props`): The component to use for the link - if not provided, it will be `router-link` or `nuxt-link` if `to` is provided, will be `a` if `href` is provided, otherwise it will be `button`, you can force the component to be used with `as` prop. Values: `'router-link'`, `'nuxt-link'`, `'button'` (non exhaustive).
+- `id` (`string`): The id of the link.
+- `title` (`string`): The title of the link.
+- `href` (`string`): The href of the link.
+- `to` (`string | et | X`): The route location (router-link) of the link.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "surface" | "muted" | "inherit"`, default: `"primary"`): The color of the link.
+- `target` (`string`, default: `"_self"`): The target of the link. Values: `'_blank'`, `'_self'`, `'_parent'`, `'_top'` (non exhaustive).
+- `download` (`string`): The download of the link.
+- `rel` (`string`): The rel of the link.
+- `aria-label` (`string`): The aria-label of the link.
+- `underline` (`boolean`, default: `false`): Add an underline to the link.
+- `underline-hover` (`boolean`, default: `true`): Add an underline only on hover.
+- `auto-external` (`boolean`, default: `true`): Add an external icon to the link if target is '_blank'.
+- `start-icon` (`any`): Icon displayed on the inline-start edge (left in LTR, right in RTL). Accepts a bare value (Vue component, raw SVG string, URL or `data:` URI) or a full `MazIconProps` object for fine-grained control.
+- `end-icon` (`any`): Icon displayed on the inline-end edge (right in LTR, left in RTL). Accepts a bare value or a full `MazIconProps` object.
+- `disabled` (`boolean`, default: `false`): The disabled state of the link if the component is a button.
+
+### Slots
+
+- `#start-icon`: The icon to display on the inline-start edge of the text (left in LTR, right in RTL)
+- `#default`: Text of the link
+- `#end-icon`: The icon to display on the inline-end edge of the text (right in LTR, left in RTL)
+- `#external-icon`: Replace the default external icon

package/docs/components/maz-loading-bar.md

@@ -0,0 +1,38 @@
+---
+title: "MazLoadingBar"
+description: "MazLoadingBar is a standalone component"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-loading-bar"
+---
+
+# MazLoadingBar
+
+> MazLoadingBar is a standalone component
+
+- Package: `maz-ui`
+- Import: `import MazLoadingBar from 'maz-ui/components/MazLoadingBar'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-loading-bar
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+import MazLoadingBar from 'maz-ui/components/MazLoadingBar'
+</script>
+
+<template>
+  <MazLoadingBar color="secondary" />
+</template>
+```
+
+## MazLoadingBar API
+
+`import MazLoadingBar from 'maz-ui/components/MazLoadingBar'`
+
+### Props
+
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the component.
+- `height` (`string`): The height of the component.

package/docs/{src/components → components}/maz-markdown-editor.md

@@ -1,20 +1,25 @@
 ---
-title: MazMarkdownEditor
-description: MazMarkdownEditor is a GitHub-style markdown editor with Write/Preview/Split tabs, a configurable formatting toolbar, optional line numbers, and a sanitized preview. It shares the same states, labels and theming as MazTextarea, is SSR-friendly, and supports custom renderers.
+title: "MazMarkdownEditor"
+description: "MazMarkdownEditor is a GitHub-style markdown editor with Write/Preview/Split tabs, a configurable formatting toolbar, optional line numbers, and a sanitized preview. It shares the same states, labels and theming as MazTextarea, is SSR-friendly, and supports custom renderers."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-markdown-editor"
 ---
 
-# {{ $frontmatter.title }}
+# MazMarkdownEditor
 
-{{ $frontmatter.description }}
+> MazMarkdownEditor is a GitHub-style markdown editor with Write/Preview/Split tabs, a configurable formatting toolbar, optional line numbers, and a sanitized preview. It shares the same states, labels and theming as MazTextarea, is SSR-friendly, and supports custom renderers.
 
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+- Package: `maz-ui`
+- Import: `import MazMarkdownEditor from 'maz-ui/components/MazMarkdownEditor'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-markdown-editor
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
 
 ## Installation requirement
 
 The preview relies on [`marked`](https://marked.js.org) for parsing and [`dompurify`](https://github.com/cure53/DOMPurify) for sanitization. Both are loaded lazily (only when the preview is rendered), so install them in your project:
 
-::: code-group
-
 ```bash [pnpm]
 pnpm add marked dompurify
 ```
@@ -27,19 +32,12 @@ npm install marked dompurify
 yarn add marked dompurify
 ```
 
-:::
-
-If they are not installed, the preview falls back to a safe, escaped plain-text block. You can also provide your own renderer with the [`renderFunction`](#custom-renderer) prop to avoid these dependencies entirely.
+If they are not installed, the preview falls back to a safe, escaped plain-text block. You can also provide your own renderer with the `renderFunction` prop to avoid these dependencies entirely.
 
 ## Basic usage
 
 The component exposes a `v-model` bound to the raw markdown string and two tabs: **Write** (textarea) and **Preview** (rendered, sanitized HTML).
 
-<ComponentDemo>
-  <MazMarkdownEditor v-model="basic" placeholder="markdown goes here" />
-
-  <template #code>
-
 ```vue
 <template>
   <MazMarkdownEditor v-model="content" />
@@ -53,18 +51,10 @@ The component exposes a `v-model` bound to the raw markdown string and two tabs:
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Toolbar
 
 The formatting toolbar is opt-in. Set `toolbar` to `true` to display the full toolbar. Buttons act on the current textarea selection and preserve the native undo/redo history (`Cmd/Ctrl + Z`).
 
-<ComponentDemo>
-  <MazMarkdownEditor v-model="withToolbar" toolbar />
-
-  <template #code>
-
 ```vue
 <template>
   <MazMarkdownEditor v-model="content" toolbar />
@@ -78,9 +68,6 @@ The formatting toolbar is opt-in. Set `toolbar` to `true` to display the full to
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ### Available actions
 
 The full toolbar exposes the following action keys:
@@ -105,11 +92,6 @@ The full toolbar exposes the following action keys:
 
 Pass an **ordered array of action keys** to display only a subset (and control their order):
 
-<ComponentDemo>
-  <MazMarkdownEditor v-model="withToolbarConfig" :toolbar="['heading', 'bold', 'italic', 'link', 'codeBlock']" />
-
-  <template #code>
-
 ```vue
 <template>
   <MazMarkdownEditor
@@ -119,9 +101,6 @@ Pass an **ordered array of action keys** to display only a subset (and control t
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Keyboard shortcuts
 
 Classic markdown shortcuts are enabled by default and work whenever the textarea is focused. They preserve the native undo/redo history. The toolbar buttons also display their shortcut in the tooltip. Use `mod` for `Cmd` on macOS and `Ctrl` elsewhere.
@@ -148,36 +127,25 @@ Disable them with `:shortcuts="false"`:
 </template>
 ```
 
-::: tip
+**Tip:**
+
 Image and table insertions have no default shortcut (to avoid clashing with browser shortcuts). Use the toolbar buttons or the `toolbar` slot helpers for those.
-:::
 
 ## List continuation
 
-Pressing <kbd>Enter</kbd> inside a list automatically inserts the next marker, just like a desktop markdown editor:
+Pressing Enter inside a list automatically inserts the next marker, just like a desktop markdown editor:
 
 - Bulleted lists (`-`, `*`, `+`) repeat the marker.
 - Numbered lists increment the index (`1.` → `2.`).
 - Task lists insert a fresh unchecked box (`- [ ] `).
 - Indentation is preserved.
 
-Pressing <kbd>Enter</kbd> again on an empty item removes the marker and exits the list. This works out of the box, no configuration required.
+Pressing Enter again on an empty item removes the marker and exits the list. This works out of the box, no configuration required.
 
 ## Label & assistive text
 
 Like `MazTextarea`, the editor supports a static `top-label` (or `label`), the `required` asterisk and an `assistive-text` displayed below the editor.
 
-<ComponentDemo>
-  <MazMarkdownEditor
-    v-model="withLabel"
-    top-label="Description"
-    placeholder="Markdown goes here"
-    assistive-text="Markdown is supported"
-    required
-  />
-
-  <template #code>
-
 ```vue
 <template>
   <MazMarkdownEditor
@@ -189,22 +157,10 @@ Like `MazTextarea`, the editor supports a static `top-label` (or `label`), the `
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## States
 
 Use `error`, `success`, `warning`, `disabled` and `readonly` to reflect validation states, consistent with the other form components.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazMarkdownEditor v-model="stateError" error assistive-text="This field has an error" />
-    <MazMarkdownEditor v-model="stateSuccess" success assistive-text="Looks good!" />
-    <MazMarkdownEditor v-model="stateDisabled" disabled />
-  </div>
-
-  <template #code>
-
 ```vue
 <template>
   <MazMarkdownEditor v-model="content" error assistive-text="This field has an error" />
@@ -213,18 +169,10 @@ Use `error`, `success`, `warning`, `disabled` and `readonly` to reflect validati
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Split mode
 
 A third tab displays the editor and the preview side by side. Switch to it from the toolbar tabs, or control it with `v-model:mode` (`'write' | 'preview' | 'split'`). On small screens the two panes stack vertically.
 
-<ComponentDemo>
-  <MazMarkdownEditor v-model="splitContent" mode="split" />
-
-  <template #code>
-
 ```vue
 <template>
   <MazMarkdownEditor v-model="content" mode="split" />
@@ -238,36 +186,20 @@ A third tab displays the editor and the preview side by side. Switch to it from
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Line numbers
 
 Enable the `line-numbers` prop to display a gutter on the left of the editor. Numbers reflect logical lines and stay in sync with the textarea scroll.
 
-<ComponentDemo>
-  <MazMarkdownEditor v-model="lineNumbersContent" line-numbers />
-
-  <template #code>
-
 ```vue
 <template>
   <MazMarkdownEditor v-model="content" line-numbers />
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
-## Custom renderer {#custom-renderer}
+## Custom renderer
 
 Provide a `render-function` to use your own markdown engine (e.g. `markdown-it`, a Nuxt Content renderer, or a server-side pipeline). It receives the raw markdown and returns an HTML string (sync or async). The result is still sanitized when `sanitize` is enabled.
 
-<ComponentDemo>
-  <MazMarkdownEditor v-model="customRender" :render-function="upperCaseRenderer" />
-
-  <template #code>
-
 ```vue
 <template>
   <MazMarkdownEditor v-model="content" :render-function="renderer" />
@@ -285,9 +217,6 @@ Provide a `render-function` to use your own markdown engine (e.g. `markdown-it`,
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Sanitization
 
 By default, the rendered HTML is sanitized with DOMPurify to prevent XSS. Disabling it (`:sanitize="false"`) renders the raw output of the renderer; only do this when the markdown source is fully trusted.
@@ -322,15 +251,6 @@ The active tab is available through `v-model:mode` (`'write' | 'preview' | 'spli
 
 The tab labels, the empty-preview text and the toolbar button labels come from the `@maz-ui/translations` package (`markdownEditor.*`). You can override any key per-instance with the `translations` prop without touching the global locale:
 
-<ComponentDemo>
-  <MazMarkdownEditor
-    v-model="translated"
-    toolbar
-    :translations="{ write: 'Édition', preview: 'Aperçu', emptyPreview: 'Rien à afficher' }"
-  />
-
-  <template #code>
-
 ```vue
 <template>
   <MazMarkdownEditor
@@ -341,33 +261,60 @@ The tab labels, the empty-preview text and the toolbar button labels come from t
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
-For app-wide translations, set up the [maz-ui translations plugin](/translations) and the component will pick up your locale automatically.
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-
-  const basic = ref('# Hello maz-ui\n\nThis is **markdown** with a [link](https://maz-ui.com).')
-  const withToolbar = ref('Select some text and click **Bold**.')
-  const withToolbarConfig = ref('Only a few buttons here.')
-  const splitContent = ref('# Split view\n\nType on the left, see the **preview** on the right.')
-  const lineNumbersContent = ref('Line one\nLine two\nLine three')
-  const withLabel = ref('')
-  const stateError = ref('Invalid content')
-  const stateSuccess = ref('Valid content')
-  const stateDisabled = ref('Disabled editor')
-  const customRender = ref('Rendered by a custom function')
-  const translated = ref('Localized **markdown** editor.')
-
-  function upperCaseRenderer(markdown: string) {
-    return `<p>${markdown.toUpperCase()}</p>`
-  }
-</script>
+For app-wide translations, set up the [maz-ui translations plugin](../ecosystem/translations.md) and the component will pick up your locale automatically.
 
 ## Accessibility
 
-The write / preview / split switcher follows the [WAI-ARIA tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/): it is a `tablist` named by the `name` prop, the editor and the preview are its `tabpanel`s. Only the selected mode is in the tab sequence, <kbd>←</kbd> / <kbd>→</kbd> (reversed in RTL), <kbd>Home</kbd> and <kbd>End</kbd> switch the mode.
-
-<!--@include: ./../../.vitepress/generated-docs/maz-markdown-editor.doc.md-->
+The write / preview / split switcher follows the [WAI-ARIA tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/): it is a `tablist` named by the `name` prop, the editor and the preview are its `tabpanel`s. Only the selected mode is in the tab sequence, ← / → (reversed in RTL), Home and End switch the mode.
+
+## MazMarkdownEditor API
+
+`import MazMarkdownEditor from 'maz-ui/components/MazMarkdownEditor'`
+
+### Props
+
+- `model-value` (`string`, `v-model`): The markdown value of the editor.
+- `id` (`string`): The id of the textarea.
+- `name` (`string`, default: `"MazMarkdownEditor"`): The name of the textarea.
+- `label` (`string`): Static label displayed above the editor.
+- `placeholder` (`string`): The placeholder of the textarea.
+- `required` (`boolean`, default: `false`): If the editor is required.
+- `disabled` (`boolean`, default: `false`): If the editor is disabled.
+- `readonly` (`boolean`, default: `false`): If the editor is readonly.
+- `error` (`boolean`, default: `false`): If the editor has an error.
+- `success` (`boolean`, default: `false`): If the editor has a success.
+- `warning` (`boolean`, default: `false`): If the editor has a warning.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the editor.
+- `rounded-size` (`MazRoundedSize`, default: `'md'`): Size radius of the component's border.
+- `top-label` (`string`): Static label displayed above the editor. Unlike a floating label, this remains fixed.
+- `assistive-text` (`string`): Helper text displayed below the editor to provide additional context or validation feedback.
+- `toolbar` (`boolean | MazMarkdownEditorToolbarAction[]`, default: `false`): Show the formatting toolbar. Pass `true` for the full toolbar, or an ordered array of action keys to display only a subset (and control their order).
+- `line-numbers` (`boolean`, default: `false`): Display line numbers in a gutter on the left of the editor.
+- `shortcuts` (`boolean`, default: `true`): Enable keyboard shortcuts for the toolbar actions (e.g. Cmd/Ctrl+B for bold).
+- `sanitize` (`boolean`, default: `true`): Sanitize the rendered preview HTML with DOMPurify.
+- `render-function` (`((markdown: string) => string | Promise<string>)`): Custom markdown renderer. Receives the raw markdown and returns an HTML string (sync or async). Falls back to `marked` when omitted. The result is still sanitized when `sanitize` is enabled.
+- `marked-options` (`Record<string, unknown>`): Options forwarded to `marked` when using the default renderer.
+- `rows` (`number`, default: `6`): Minimum number of visible rows of the editor textarea.
+- `translations` (`{ write?: string | undefined; preview?: string | undefined; split?: string | undefined; emptyPreview?: string | undefined; toolbar?: { heading?: string | undefined; bold?: string | undefined; italic?: string | undefined; strikethrough?: ...`): Custom translations for the component. Override any key independently.
+- `mode` (`MazMarkdownEditorMode`, default: `"write"`, `v-model:mode`)
+
+### Events
+
+- `@update:model-value` (payload: `value?: string | undefined`): Emitted when the markdown value changes
+- `@blur` (payload: `value: FocusEvent`): Emitted when the textarea is blurred
+- `@change` (payload: `value: Event`): Emitted when the textarea value changes
+- `@focus` (payload: `value: FocusEvent`): Emitted when the textarea is focused
+- `@input` (payload: `value?: string | undefined`): Emitted when the markdown value changes
+- `@update:mode` (payload: `value: MazMarkdownEditorMode`)
+
+### Slots
+
+- `#label`: Replace the static label above the editor
+- `#toolbar`: Replace the toolbar content (only rendered when the toolbar is enabled and not in preview mode) Bindings: `mode: MazMarkdownEditorMode` (The current editor mode), `wrapSelection: (before: string, after?: string) => void` (Wrap the current selection with the given markers), `prefixLines: (prefix: string) => void` (Prefix every selected line with the given string), `applyHeading: (level: number) => void` (Apply a heading of the given level to the selected lines), `insertLink: () => void` (Insert a markdown link at the selection), `insertImage: () => void` (Insert a markdown image at the selection), `insertCodeBlock: () => void` (Insert a fenced code block at the selection), `insertTable: () => void` (Insert a markdown table at the selection).
+- `#empty-preview`: Content displayed in the preview pane when there is nothing to render
+
+### Exposed (template ref)
+
+- `textarea`: The underlying textarea element
+- `renderPreview`: Programmatically re-render the markdown preview
+- `focus`: Focus the editor textarea

package/docs/components/maz-pagination.md

@@ -0,0 +1,82 @@
+---
+title: "MazPagination"
+description: "MazPagination is a standalone component"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-pagination"
+---
+
+# MazPagination
+
+> MazPagination is a standalone component
+
+- Package: `maz-ui`
+- Import: `import MazPagination from 'maz-ui/components/MazPagination'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-pagination
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+**Tip:**
+
+This component can be translated globally using the [MazUi](../ecosystem/translations.md) plugin.
+
+## Basic usage
+
+`v-model=""`
+
+```vue
+<script lang="ts" setup>
+import { MazPagination, type MazPaginationProps } from 'maz-ui/components'
+
+import { ref } from 'vue'
+
+const currentPage = ref(1)
+
+const props: MazPaginationProps = {
+  totalPages: 10,
+  activeColor: 'contrast',
+}
+</script>
+
+<template>
+  <MazPagination v-bind="props" v-model="currentPage" size="md" />
+</template>
+```
+
+## Sizes
+
+```html
+<MazPagination v-bind="props" v-model="currentPage" size="xs" />
+<MazPagination v-bind="props" v-model="currentPage" size="sm" />
+<MazPagination v-bind="props" v-model="currentPage" size="md" />
+<MazPagination v-bind="props" v-model="currentPage" size="lg" />
+<MazPagination v-bind="props" v-model="currentPage" size="xl" />
+```
+
+## Colors
+
+## MazPagination API
+
+`import MazPagination from 'maz-ui/components/MazPagination'`
+
+### Props
+
+- `model-value` (`number`, default: `1`, `v-model`): The current page number.
+- `button-props` (`Partial<MazBtnProps>`): Props apply to the MazBtn components.
+- `active-color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "surface"`, default: `"surface"`): Color of the active button.
+- `size` (`"xs" | "sm" | "md" | "lg" | "xl" | "mini"`, default: `'md'`): Size of the buttons.
+- `total-pages` (`number`, required, default: `10`): Total number of pages.
+- `page-range` (`number`, default: `1`): Number of buttons to display before and after the current page.
+- `loading` (`boolean`, default: `false`): Enable loading state of current button.
+
+### Events
+
+- `@update:model-value` (payload: `value: number`)
+
+### Slots
+
+- `#first-page-sr`: Accessible text for screen reader of the previous page button Bindings: `page: number` (first page number).
+- `#previous-page-sr`: Accessible text for screen reader of the first page button Bindings: `page: number` (previous page number).
+- `#page-sr`: Accessible text for screen reader of the current page button Bindings: `page: number` (current page number).
+- `#next-page-sr`: Accessible text for screen reader of the next page button Bindings: `page: number` (next page number).
+- `#last-page-sr`: Accessible text for screen reader of the last page button Bindings: `page: number` (last page number).