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

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

@@ -1,20 +1,22 @@
 ---
-title: MazAlert
-description: MazAlert is an accessible component for displaying contextual feedback messages like success, warning, error, or informational notifications with customizable colors, icons, and styling options
+title: "MazAlert"
+description: "MazAlert is an accessible component for displaying contextual feedback messages like success, warning, error, or informational notifications with customizable colors, icons, and styling options"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-alert"
 ---
 
-# {{ $frontmatter.title }}
+# MazAlert
 
-{{ $frontmatter.description }}
+> MazAlert is an accessible component for displaying contextual feedback messages like success, warning, error, or informational notifications with customizable colors, icons, and styling options
 
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+- Package: `maz-ui`
+- Import: `import MazAlert from 'maz-ui/components/MazAlert'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-alert
 
-## Basic usage
-
-<ComponentDemo>
-  <MazAlert title="Information" content="This is an informational alert message." />
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
 
-  <template #code>
+## Basic usage
 
 ```vue
 <template>
@@ -26,9 +28,6 @@ description: MazAlert is an accessible component for displaying contextual feedb
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Variants
 
 MazAlert supports two visual variants: `soft` (default) with transparent background, and `solid` with full color background.
@@ -37,15 +36,6 @@ MazAlert supports two visual variants: `soft` (default) with transparent backgro
 
 The soft variant uses a transparent background with colored text.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazAlert color="info" variant="soft" title="Soft Info" content="This is the default soft variant with transparent background." />
-    <MazAlert color="success" variant="soft" title="Soft Success" content="Subtle and non-intrusive style." />
-    <MazAlert color="destructive" variant="soft" title="Soft Error" content="Easy on the eyes while still noticeable." />
-  </div>
-
-  <template #code>
-
 ```vue
 <template>
   <MazAlert color="info" variant="soft" title="Soft Info" content="..." />
@@ -54,22 +44,10 @@ The soft variant uses a transparent background with colored text.
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ### Solid variant
 
 The solid variant uses the full color as background with contrasting text.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazAlert color="info" variant="solid" title="Solid Info" content="Full color background for high visibility." />
-    <MazAlert color="success" variant="solid" title="Solid Success" content="Great for important notifications." />
-    <MazAlert color="destructive" variant="solid" title="Solid Error" content="Impossible to miss critical alerts." />
-  </div>
-
-  <template #code>
-
 ```vue
 <template>
   <MazAlert color="info" variant="solid" title="Solid Info" content="..." />
@@ -78,18 +56,8 @@ The solid variant uses the full color as background with contrasting text.
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ### All colors with solid variant
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazAlert v-for="color in colors" :key="color" :color="color" variant="solid" :title="capitalize(color)" :content="`Solid ${color} alert.`" />
-  </div>
-
-  <template #code>
-
 ```vue
 <template>
   <MazAlert color="info" variant="solid" title="Info" content="..." />
@@ -100,20 +68,10 @@ The solid variant uses the full color as background with contrasting text.
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Colors
 
 MazAlert supports all theme colors to convey different types of messages.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazAlert v-for="color in colors" :key="color" :color="color" :title="capitalize(color)" :content="`This is a ${color} alert message.`" />
-  </div>
-
-  <template #code>
-
 ```vue
 <template>
   <MazAlert color="info" title="Info" content="This is an info alert." />
@@ -127,34 +85,17 @@ MazAlert supports all theme colors to convey different types of messages.
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## With slots
 
 Use slots for more complex content with custom HTML.
 
-<ComponentDemo>
-  <MazAlert color="destructive">
-    <template #title>
-      3 errors found
-    </template>
-    <ul class="maz:m-0 maz:list-inside maz:list-disc maz:pl-0">
-      <li>firstname - Invalid length: Expected >=5 but received 0</li>
-      <li>lastname - Invalid length: Expected >=2 but received 0</li>
-      <li>age - Invalid type: Expected number but received ""</li>
-    </ul>
-  </MazAlert>
-
-  <template #code>
-
 ```vue
 <template>
   <MazAlert color="destructive">
     <template #title>
       3 errors found
     </template>
-    <ul class="maz:m-0 maz:list-inside maz:list-disc maz:pl-0">
+    <ul class="m-0 list-inside list-disc pl-0">
       <li>firstname - Invalid length: Expected >=5 but received 0</li>
       <li>lastname - Invalid length: Expected >=2 but received 0</li>
       <li>age - Invalid type: Expected number but received ""</li>
@@ -163,21 +104,10 @@ Use slots for more complex content with custom HTML.
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Without border
 
 Remove the border with `:bordered="false"`.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazAlert color="success" title="Without border" content="This alert has no border." :bordered="false" />
-    <MazAlert color="success" title="With border (default)" content="This alert has a border." />
-  </div>
-
-  <template #code>
-
 ```vue
 <template>
   <MazAlert
@@ -195,20 +125,10 @@ Remove the border with `:bordered="false"`.
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Rounded sizes
 
 Customize the border radius with the `rounded-size` prop.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazAlert v-for="size in roundedSizes" :key="size" :rounded-size="size" :title="`Rounded: ${size}`" content="Customize the border radius." />
-  </div>
-
-  <template #code>
-
 ```vue
 <template>
   <MazAlert rounded-size="none" title="Rounded: none" content="..." />
@@ -222,21 +142,10 @@ Customize the border radius with the `rounded-size` prop.
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Hide icon
 
 Hide the default icon with `hide-icon`.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazAlert color="warning" title="With icon (default)" content="The icon is visible." />
-    <MazAlert color="warning" title="Without icon" content="The icon is hidden." hide-icon />
-  </div>
-
-  <template #code>
-
 ```vue
 <template>
   <MazAlert color="warning" title="With icon (default)" content="The icon is visible." />
@@ -244,18 +153,10 @@ Hide the default icon with `hide-icon`.
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Custom icon
 
 Provide a custom icon using the `icon` prop.
 
-<ComponentDemo>
-  <MazAlert color="primary" title="Custom icon" content="This alert uses a custom icon." icon="/bell.svg" />
-
-  <template #code>
-
 ```vue
 <template>
   <MazAlert
@@ -267,22 +168,10 @@ Provide a custom icon using the `icon` prop.
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Title only or content only
 
 You can use either title, content, or both.
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazAlert color="info" title="Title only alert" />
-    <MazAlert color="success" content="Content only alert without a title." />
-    <MazAlert color="warning" title="Both title and content" content="This alert has both." />
-  </div>
-
-  <template #code>
-
 ```vue
 <template>
   <MazAlert color="info" title="Title only alert" />
@@ -291,27 +180,14 @@ You can use either title, content, or both.
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Use cases
 
 ### Form validation errors
 
-<ComponentDemo>
-  <MazAlert color="destructive" title="Please fix the following errors:">
-    <ul class="maz:m-0 maz:list-inside maz:list-disc maz:pl-0">
-      <li>Email address is required</li>
-      <li>Password must be at least 8 characters</li>
-    </ul>
-  </MazAlert>
-
-  <template #code>
-
 ```vue
 <template>
   <MazAlert color="destructive" title="Please fix the following errors:">
-    <ul class="maz:m-0 maz:list-inside maz:list-disc maz:pl-0">
+    <ul class="m-0 list-inside list-disc pl-0">
       <li>Email address is required</li>
       <li>Password must be at least 8 characters</li>
     </ul>
@@ -319,16 +195,8 @@ You can use either title, content, or both.
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ### Success notification
 
-<ComponentDemo>
-  <MazAlert color="success" title="Payment successful!" content="Your order #12345 has been confirmed. You will receive an email confirmation shortly." />
-
-  <template #code>
-
 ```vue
 <template>
   <MazAlert
@@ -339,16 +207,8 @@ You can use either title, content, or both.
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ### Warning message
 
-<ComponentDemo>
-  <MazAlert color="warning" title="Session expiring soon" content="Your session will expire in 5 minutes. Please save your work to avoid losing any changes." />
-
-  <template #code>
-
 ```vue
 <template>
   <MazAlert
@@ -359,16 +219,23 @@ You can use either title, content, or both.
 </template>
 ```
 
-  </template>
-</ComponentDemo>
+## MazAlert API
 
-<script lang="ts" setup>
-  const colors = ['info', 'success', 'warning', 'destructive', 'primary', 'secondary', 'accent', 'contrast']
-  const roundedSizes = ['none', 'sm', 'md', 'lg', 'xl', '2xl', '3xl']
+`import MazAlert from 'maz-ui/components/MazAlert'`
 
-  function capitalize(str: string) {
-    return str.charAt(0).toUpperCase() + str.slice(1)
-  }
-</script>
+### Props
+
+- `title` (`string`): Title of the alert.
+- `content` (`string`): Content of the alert.
+- `icon` (`any`): Icon of the alert - can be a component or icon name string.
+- `hide-icon` (`boolean`, default: `false`): Hide the icon.
+- `color` (`MazAlertColor`, default: `"info"`): Color of the alert. Values: `'success'`, `'warning'`, `'destructive'`, `'info'`, `'primary'`, `'secondary'`, `'accent'`, `'contrast'` (non exhaustive).
+- `icon-size` (`MazIconSize`, default: `"md"`): Size of the icon.
+- `rounded-size` (`MazAlertRoundedSize`, default: `'md'`): Size of the rounded corners. Values: `'none'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'` (non exhaustive).
+- `bordered` (`boolean`, default: `true`): Add border to the component.
+- `variant` (`MazAlertVariant`, default: `"soft"`): Visual variant of the alert. Values: `'soft'`, `'solid'` (non exhaustive).
+
+### Slots
 
-<!--@include: ./../../.vitepress/generated-docs/maz-alert.doc.md-->
+- `#title`: Title slot - overrides title prop
+- `#default`: Default slot for alert content - overrides content prop

package/docs/components/maz-animated-counter.md

@@ -0,0 +1,87 @@
+---
+title: "MazAnimatedCounter"
+description: "MazAnimatedCounter is a standalone component that allows you to animate a number from 0 to a specific value. Fully animated with CSS."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-animated-counter"
+---
+
+# MazAnimatedCounter
+
+> MazAnimatedCounter is a standalone component that allows you to animate a number from 0 to a specific value. Fully animated with CSS.
+
+- Package: `maz-ui`
+- Import: `import MazAnimatedCounter from 'maz-ui/components/MazAnimatedCounter'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-animated-counter
+
+> 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 MazAnimatedCounter from 'maz-ui/components/MazAnimatedCounter'
+
+const count = ref(Math.floor(Math.random() * 99999))
+
+onMounted(() => {
+  setInterval(() => {
+    count.value = Math.floor(Math.random() * 99999)
+  }, 3000)
+})
+</script>
+
+<template>
+  <MazAnimatedCounter :count="4000" />
+</template>
+```
+
+## duration
+
+You can set the duration of the animation with the `duration` prop. The default value is `1000` ms.
+
+```vue
+<MazAnimatedCounter :count="4000" :duration="5000" />
+```
+
+## prefix and suffix
+
+You can add a prefix and a suffix to the number with props or slots.
+
+Be careful, you can't use both at the same time.
+
+```html
+<p class="font-semibold">Prefixed</p>
+
+<MazAnimatedCounter :count="20" prefix="$" />
+
+<MazAnimatedCounter :count="20">
+  <template #prefix>$</template>
+</MazAnimatedCounter>
+
+<p class="font-semibold">Suffixed</p>
+
+<MazAnimatedCounter :count="100" suffix="%" />
+
+<MazAnimatedCounter :count="100">
+  <template #suffix>%</template>
+</MazAnimatedCounter>
+```
+
+## MazAnimatedCounter API
+
+`import MazAnimatedCounter from 'maz-ui/components/MazAnimatedCounter'`
+
+### Props
+
+- `count` (`number`, required): The number to animate.
+- `duration` (`number`, default: `1000`): Duration of the animation in milliseconds.
+- `prefix` (`string`): Suffix to display next to the number.
+- `suffix` (`string`): Suffix to display next to the number.
+- `delay` (`number`, default: `100`): Delay before the animation starts in milliseconds.
+- `once` (`boolean`, default: `true`): Play the animation only once.
+
+### Slots
+
+- `#prefix`
+- `#suffix`

package/docs/components/maz-animated-element.md

@@ -0,0 +1,46 @@
+---
+title: "MazAnimatedElement"
+description: "MazAnimatedElement is a standalone component that animates its content with a sliding blur effect when it enters the viewport. It supports different animation directions (up, down, left, right) and allows customizing the animation delay and duration."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-animated-element"
+---
+
+# MazAnimatedElement
+
+> MazAnimatedElement is a standalone component that animates its content with a sliding blur effect when it enters the viewport. It supports different animation directions (up, down, left, right) and allows customizing the animation delay and duration.
+
+- Package: `maz-ui`
+- Import: `import MazAnimatedElement from 'maz-ui/components/MazAnimatedElement'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-animated-element
+
+> 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 MazAnimatedElement from 'maz-ui/components/MazAnimatedElement'
+</script>
+
+<template>
+  <MazAnimatedElement direction="up" :delay="1000" :duration="2000">
+    <MazAvatar src="https://github.com/LouisMazel.png" size="lg" />
+  </MazAnimatedElement>
+</template>
+```
+
+## MazAnimatedElement API
+
+`import MazAnimatedElement from 'maz-ui/components/MazAnimatedElement'`
+
+### Props
+
+- `direction` (`"up" | "down" | "left" | "right"`, default: `"up"`): The direction of the animation.
+- `delay` (`number`, default: `0`): The delay of the animation.
+- `duration` (`number`, default: `2000`): The duration of the animation.
+- `once` (`boolean`, default: `true`): Play the animation only once.
+
+### Slots
+
+- `#default`

package/docs/components/maz-animated-text.md

@@ -0,0 +1,53 @@
+---
+title: "MazAnimatedText"
+description: "MazAnimatedText is a standalone component that animates text with a sliding blur effect. It can highlight the last word with a gradient background and supports different animation directions (up, down, left, right)."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-animated-text"
+---
+
+# MazAnimatedText
+
+> MazAnimatedText is a standalone component that animates text with a sliding blur effect. It can highlight the last word with a gradient background and supports different animation directions (up, down, left, right).
+
+- Package: `maz-ui`
+- Import: `import MazAnimatedText from 'maz-ui/components/MazAnimatedText'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-animated-text
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+## Basic usage
+
+**Tip:**
+
+This component is SSR friendly. It will display the brut text on the server side with the chosen tag, and the animated text on the client side.
+
+```vue
+<script lang="ts" setup>
+import MazAnimatedText from 'maz-ui/components/MazAnimatedText'
+</script>
+
+<template>
+  <MazAnimatedText tag="h1" text="Hello" last-word="world" :delay="1000" :duration="2000" direction="up" :column-gap="0.5" :row-gap="0.5" />
+</template>
+```
+
+## MazAnimatedText API
+
+`import MazAnimatedText from 'maz-ui/components/MazAnimatedText'`
+
+### Props
+
+- `text` (`string`, required): The text to animate.
+- `last-word` (`string`): The last word(s) to be highlighted.
+- `delay` (`number`, default: `0`): The delay of the animation.
+- `direction` (`"up" | "down" | "left" | "right"`, default: `"up"`): The direction of the animation.
+- `tag` (`string`, default: `"span"`): The tag to use for the text.
+- `word-delay` (`number`, default: `75`): The delay between each word.
+- `column-gap` (`number`, default: `0.5`): The column gap between each word.
+- `row-gap` (`number`, default: `0`): The row gap between each word.
+- `duration` (`number`, default: `2000`): The duration of the animation.
+- `once` (`boolean`, default: `true`): Play the animation only once.
+- `gradient-from` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The gradient from color.
+- `gradient-via` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"info"`): The gradient via color.
+- `gradient-to` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"secondary"`): The gradient to color.