@maz-ui/mcp 5.0.1-beta.0 → 5.1.0-beta.1

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

@@ -1,24 +1,28 @@
 ---
-title: MazSkeleton
-description: MazSkeleton is a standalone component to display loading placeholders with animated shimmer effect
+title: "MazSkeleton"
+description: "MazSkeleton is a standalone component to display loading placeholders with animated shimmer effect"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-skeleton"
 ---
 
-# {{ $frontmatter.title }}
+# MazSkeleton
 
-{{ $frontmatter.description }}
+> MazSkeleton is a standalone component to display loading placeholders with animated shimmer effect
 
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+- Package: `maz-ui`
+- Import: `import MazSkeleton from 'maz-ui/components/MazSkeleton'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-skeleton
 
-<!--@include: ./../../.vitepress/mixins/translated-component.md-->
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
 
-## Basic usage
+**Tip:**
 
-The skeleton displays a loading placeholder with a shimmer animation by default.
+This component can be translated globally using the [MazUi](../ecosystem/translations.md) plugin.
 
-<ComponentDemo>
-  <MazSkeleton />
+## Basic usage
 
-<template #code>
+The skeleton displays a loading placeholder with a shimmer animation by default.
 
 ```vue
 <script lang="ts" setup>
@@ -30,31 +34,10 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Shapes
 
 Use the `shape` prop to change the skeleton shape: `rectangle` (default), `circle`, or `square`.
 
-<ComponentDemo>
-  <div class="maz:flex maz:gap-4 maz:items-center">
-    <div class="maz:flex maz:flex-col maz:items-center maz:gap-2">
-      <MazSkeleton shape="rectangle" width="100px" height="1rem" />
-      <span class="maz:text-sm maz:text-muted">rectangle</span>
-    </div>
-    <div class="maz:flex maz:flex-col maz:items-center maz:gap-2">
-      <MazSkeleton shape="circle" size="3rem" />
-      <span class="maz:text-sm maz:text-muted">circle</span>
-    </div>
-    <div class="maz:flex maz:flex-col maz:items-center maz:gap-2">
-      <MazSkeleton shape="square" size="3rem" />
-      <span class="maz:text-sm maz:text-muted">square</span>
-    </div>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazSkeleton from 'maz-ui/components/MazSkeleton'
@@ -67,23 +50,10 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Sizes
 
 Use the `size` prop to set both width and height (for circle and square shapes), or use `width` and `height` props for more control.
 
-<ComponentDemo>
-  <div class="maz:flex maz:gap-4 maz:items-end">
-    <MazSkeleton shape="circle" size="2rem" />
-    <MazSkeleton shape="circle" size="3rem" />
-    <MazSkeleton shape="circle" size="4rem" />
-    <MazSkeleton shape="circle" size="5rem" />
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazSkeleton from 'maz-ui/components/MazSkeleton'
@@ -97,22 +67,10 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Custom dimensions
 
 For rectangles, use `width` and `height` props for precise control.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazSkeleton width="100%" height="0.75rem" />
-    <MazSkeleton width="80%" height="0.75rem" />
-    <MazSkeleton width="60%" height="0.75rem" />
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazSkeleton from 'maz-ui/components/MazSkeleton'
@@ -125,23 +83,10 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Rounded sizes
 
 Control the border radius using the `rounded-size` prop.
 
-<ComponentDemo>
-  <div class="maz:flex maz:gap-4 maz:flex-wrap">
-    <div v-for="size in roundedSizes" :key="size" class="maz:flex maz:flex-col maz:items-center maz:gap-2">
-      <MazSkeleton :rounded-size="size" width="80px" height="2rem" />
-      <span class="maz:text-sm maz:text-muted">{{ size }}</span>
-    </div>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazSkeleton from 'maz-ui/components/MazSkeleton'
@@ -157,27 +102,10 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Disable animation
 
 Use the `animated` prop set to `false` to disable the shimmer animation.
 
-<ComponentDemo>
-  <div class="maz:flex maz:gap-4">
-    <div class="maz:flex maz:flex-col maz:items-center maz:gap-2">
-      <MazSkeleton shape="circle" size="3rem" :animated="true" />
-      <span class="maz:text-sm maz:text-muted">animated</span>
-    </div>
-    <div class="maz:flex maz:flex-col maz:items-center maz:gap-2">
-      <MazSkeleton shape="circle" size="3rem" :animated="false" />
-      <span class="maz:text-sm maz:text-muted">static</span>
-    </div>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazSkeleton from 'maz-ui/components/MazSkeleton'
@@ -189,24 +117,10 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Card skeleton example
 
 Combine multiple skeletons to create loading placeholders for complex layouts.
 
-<ComponentDemo>
-  <div class="maz:flex maz:gap-4 maz:p-4 maz:w-full maz:max-w-sm">
-    <MazSkeleton shape="circle" size="3rem" />
-    <div class="maz:flex maz:flex-col maz:gap-2 maz:flex-1">
-      <MazSkeleton width="60%" height="0.875rem" />
-      <MazSkeleton width="40%" height="0.75rem" />
-    </div>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazSkeleton from 'maz-ui/components/MazSkeleton'
@@ -223,30 +137,10 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Article skeleton example
 
 Create an article loading placeholder with various skeleton elements.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4 maz:w-full maz:max-w-md">
-    <MazSkeleton width="100%" height="200px" rounded-size="lg" />
-    <div class="maz:flex maz:flex-col maz:gap-2">
-      <MazSkeleton width="80%" height="1.5rem" />
-      <MazSkeleton width="100%" height="0.75rem" />
-      <MazSkeleton width="100%" height="0.75rem" />
-      <MazSkeleton width="60%" height="0.75rem" />
-    </div>
-    <div class="maz:flex maz:gap-2 maz:items-center">
-      <MazSkeleton shape="circle" size="2rem" />
-      <MazSkeleton width="100px" height="0.75rem" />
-    </div>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazSkeleton from 'maz-ui/components/MazSkeleton'
@@ -272,26 +166,10 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## List skeleton example
 
 Create a list loading placeholder.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-3 maz:w-full maz:max-w-sm">
-    <div v-for="i in 4" :key="i" class="maz:flex maz:gap-3 maz:items-center maz:p-2 maz:bg-surface-50 maz:dark:bg-surface-800 maz:rounded-md">
-      <MazSkeleton shape="square" size="2.5rem" rounded-size="md" />
-      <div class="maz:flex maz:flex-col maz:gap-1 maz:flex-1">
-        <MazSkeleton width="70%" height="0.75rem" />
-        <MazSkeleton width="50%" height="0.625rem" />
-      </div>
-    </div>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazSkeleton from 'maz-ui/components/MazSkeleton'
@@ -310,9 +188,6 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 </template>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Accessibility
 
 The component includes proper accessibility attributes:
@@ -320,16 +195,6 @@ The component includes proper accessibility attributes:
 - `aria-live="polite"` for screen reader announcements
 - Customizable `aria-label` and `loading-text` props
 
-<ComponentDemo>
-  <MazSkeleton
-    shape="circle"
-    size="3rem"
-    aria-label="Loading user avatar"
-    loading-text="Please wait while loading..."
-  />
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import MazSkeleton from 'maz-ui/components/MazSkeleton'
@@ -345,11 +210,17 @@ import MazSkeleton from 'maz-ui/components/MazSkeleton'
 </template>
 ```
 
-</template>
-</ComponentDemo>
+## MazSkeleton API
 
-<!--@include: ./../../.vitepress/generated-docs/maz-skeleton.doc.md-->
+`import MazSkeleton from 'maz-ui/components/MazSkeleton'`
 
-<script lang="ts" setup>
-const roundedSizes = ['none', 'sm', 'md', 'lg', 'xl', 'full'] as const
-</script>
+### Props
+
+- `shape` (`"square" | "circle" | "rectangle"`, default: `"rectangle"`): Skeleton shape type.
+- `size` (`` `${number}rem` | `${number}px` | `${number}em` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | `${number}%` | `${number}ch` | `${number}cm` | `${number}mm` | `${number}in` | `${number}ex` | `${number}pc` | `${number... ``, default: `"1rem"`): Size with units (ex: '2rem', '40px', '3em').
+- `width` (`` `${number}rem` | `${number}px` | `${number}em` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | `${number}%` | `${number}ch` | `${number}cm` | `${number}mm` | `${number}in` | `${number}ex` | `${number}pc` | `${number... ``): Custom width.
+- `height` (`` `${number}rem` | `${number}px` | `${number}em` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | `${number}%` | `${number}ch` | `${number}cm` | `${number}mm` | `${number}in` | `${number}ex` | `${number}pc` | `${number... ``): Custom height.
+- `animated` (`boolean`, default: `true`): Disable animation.
+- `rounded-size` (`MazRoundedSize`, default: `'md'`): Controls the border radius. Values: `'none'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'full'` (non exhaustive).
+- `aria-label` (`string`, default: `'skeleton.ariaLabel' (translations)`): Accessibility label.
+- `loading-text` (`string`, default: `'skeleton.loadingText' (translations)`): Loading text for accessibility.

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

@@ -1,17 +1,22 @@
 ---
-title: MazSlider
-description: MazSlider is a standalone component that replaces the standard html input range with a beautiful design system. Many options like multiple cursors and values, colors, sizes and logarithmic/exponential values are available
+title: "MazSlider"
+description: "MazSlider is a standalone component that replaces the standard html input range with a beautiful design system. Many options like multiple cursors and values, colors, sizes and logarithmic/exponential values are available"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-slider"
 ---
 
-# {{ $frontmatter.title }}
+# MazSlider
 
-{{ $frontmatter.description }}
+> MazSlider is a standalone component that replaces the standard html input range with a beautiful design system. Many options like multiple cursors and values, colors, sizes and logarithmic/exponential values are available
 
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+- Package: `maz-ui`
+- Import: `import MazSlider from 'maz-ui/components/MazSlider'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-slider
 
-## Basic usage
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
 
-<MazSlider v-model="sliderValue" class="vp-raw" />
+## Basic usage
 
 ```vue
 <script lang="ts" setup>
@@ -29,16 +34,12 @@ const sliderValue = ref(50)
 
 ### Step
 
-<MazSlider v-model="sliderStepValue" :step="10" class="vp-raw" />
-
 ```html
 <MazSlider v-model="value" :step="10" class="vp-raw" />
 ```
 
 ### Multiple sliders & labels
 
-<MazSlider v-model="multipleSilders" :labels="multipleSildersLabels" />
-
 ```vue
 <script lang="ts" setup>
 import MazSlider from 'maz-ui/components/MazSlider'
@@ -54,34 +55,6 @@ const multipleSildersLabels = ['Small', 'Middle', 'Big']
 
 ### Sizes & colors
 
-<MazSlider
-  v-model="multipleSilders"
-  :labels="multipleSildersLabels"
-  color="secondary"
-  size="1.5rem"
-/>
-
-<MazSlider
-  v-model="multipleSilders"
-  :labels="multipleSildersLabels"
-  color="destructive"
-  size="1.2rem"
-/>
-
-<MazSlider
-  v-model="multipleSilders"
-  :labels="multipleSildersLabels"
-  color="success"
-  size="12px"
-/>
-
-<MazSlider
-  v-model="multipleSilders"
-  :labels="multipleSildersLabels"
-  color="info"
-  size="10px"
-/>
-
 ```vue
 <script lang="ts" setup>
 import MazSlider from 'maz-ui/components/MazSlider'
@@ -123,14 +96,6 @@ const multipleSildersLabels = ['Small', 'Middle', 'Big']
 
 ### Logarithmic/exponential
 
-<MazSlider
-  v-model="logSilders"
-  :labels="logSildersLabels"
-  :min="50"
-  :max="50000"
-  logs
-/>
-
 ```vue
 <script lang="ts" setup>
 import MazSlider from 'maz-ui/components/MazSlider'
@@ -156,12 +121,6 @@ const logSildersLabels: ['Micro', 'Small', 'Middle', 'Big']
 >
 > Component don't have animation on cursor
 
-<MazSlider
-  v-model="multipleSilders"
-  :divider="false"
-  :cursor-anim="false"
-/>
-
 ```vue
 <script lang="ts" setup>
 import MazSlider from 'maz-ui/components/MazSlider'
@@ -178,21 +137,29 @@ const multipleSilders = ref([25, 50, 75])
 </template>
 ```
 
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  const sliderValue = ref(50)
-  const sliderStepValue = ref(50)
-  const multipleSilders = ref([25, 50, 75])
-  const multipleSildersLabels = ['Small', 'Middle', 'Big']
-
-  const logSilders = ref([50, 10000, 30000, 45000])
-  const logSildersLabels = ['Micro', 'Small', 'Middle', 'Big']
-</script>
-
 ## Accessibility
 
 Each cursor is a `slider` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-valuetext` when `labels` are set.
 
-**Keyboard**: <kbd>←</kbd> / <kbd>↓</kbd> and <kbd>→</kbd> / <kbd>↑</kbd> move by one `step`, <kbd>Page Down</kbd> / <kbd>Page Up</kbd> by ten steps, <kbd>Home</kbd> / <kbd>End</kbd> to the lowest / highest value allowed for the cursor (a cursor never passes its neighbours).
+**Keyboard**: ← / ↓ and → / ↑ move by one `step`, Page Down / Page Up by ten steps, Home / End to the lowest / highest value allowed for the cursor (a cursor never passes its neighbours).
+
+## MazSlider API
+
+`import MazSlider from 'maz-ui/components/MazSlider'`
+
+### Props
+
+- `model-value` (`number | number[] | null`, required, `v-model`): Array of cursors values.
+- `labels` (`string[]`): array of cursors label.
+- `min` (`number`, default: `0`): min value of sliders.
+- `max` (`number`, default: `100`): max value of sliders.
+- `step` (`number`, default: `1`): step value for slider increments.
+- `size` (`` `${number}rem` | `${number}px` | `${number}em` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | `${number}%` | `${number}ch` | `${number}cm` | `${number}mm` | `${number}in` | `${number}ex` | `${number}pc` | `${number... ``): height size of slider bar.
+- `divider` (`boolean`, default: `true`): remove div in different colors.
+- `log` (`boolean`, default: `false`): become a logarithmic slider (exponential).
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): main slider color.
+- `cursor-anim` (`boolean`, default: `true`): disables cursor animation when active.
+
+### Events
 
-<!--@include: ./../../.vitepress/generated-docs/maz-slider.doc.md-->
+- `@update:model-value` (payload: `any[`)

package/docs/components/maz-spinner.md

@@ -0,0 +1,84 @@
+---
+title: "MazSpinner"
+description: "MazSpinner is an animated loading indicator with the colors and sizes of the theme, to show that a content or an action is loading"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-spinner"
+---
+
+# MazSpinner
+
+> MazSpinner is an animated loading indicator with the colors and sizes of the theme, to show that a content or an action is loading
+
+- Package: `maz-ui`
+- Import: `import MazSpinner from 'maz-ui/components/MazSpinner'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-spinner
+
+## Basic usage
+
+```vue
+<script>
+import MazSpinner from 'maz-ui/components/MazSpinner'
+</script>
+
+<template>
+  <MazSpinner />
+</template>
+```
+
+## Options
+
+### Colors
+
+Choose the color of the spinner
+
+By default the color is `theme`
+
+```vue
+<MazSpinner color="primary" />
+
+<MazSpinner color="secondary" />
+
+<MazSpinner color="destructive" />
+
+<MazSpinner color="warning" />
+
+<MazSpinner color="success" />
+
+<MazSpinner color="info" />
+
+<MazSpinner color="accent" />
+
+<MazSpinner color="contrast" />
+```
+
+### Sizes
+
+Choose the size of the spinner
+
+The default size is `2em`
+
+```vue
+<MazSpinner size="1em" />
+
+<MazSpinner size="2em" />
+
+<MazSpinner size="3em" />
+
+<MazSpinner size="4em" />
+
+<MazSpinner size="5em" />
+
+<MazSpinner size="6em" />
+
+<MazSpinner size="7em" />
+```
+
+## MazSpinner API
+
+`import MazSpinner from 'maz-ui/components/MazSpinner'`
+
+### Props
+
+- `size` (`` `${number}rem` | `${number}px` | `${number}em` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | `${number}%` | `${number}ch` | `${number}cm` | `${number}mm` | `${number}in` | `${number}ex` | `${number}pc` | `${number... ``, default: `"2em"`): The size of the spinner.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"theme"`): The color of the spinner.