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

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

@@ -1,36 +0,0 @@
----
-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.
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
-
-## Basic usage
-
-<ComponentDemo expanded>
-  <MazAnimatedElement direction="up" :delay="1000" :duration="2000">
-    <MazAvatar src="https://github.com/LouisMazel.png" size="lg" />
-  </MazAnimatedElement>
-
-<template #code>
-
-```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>
-```
-
-  </template>
-</ComponentDemo>
-
-<!--@include: ./../../.vitepress/generated-docs/maz-animated-element.doc.md-->

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

@@ -1,36 +0,0 @@
----
-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).
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<!--@include: ./../../.vitepress/mixins/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.
-:::
-
-<ComponentDemo expanded>
-  <MazAnimatedText tag="h1" text="Hello" last-word="world" :delay="1000" :duration="2000" direction="up" :column-gap="0.5" :row-gap="0.5" />
-
-<template #code>
-
-```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>
-```
-
-  </template>
-</ComponentDemo>
-
-<!--@include: ./../../.vitepress/generated-docs/maz-animated-text.doc.md-->

package/docs/src/components/maz-avatar.md

@@ -1,227 +0,0 @@
----
-title: MazAvatar
-description: MazAvatar is a standalone component that displays an image or an icon with a caption. It can be used to display a user's profile picture, a placeholder image, or an icon.
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
-
-::: tip
-This component uses [vLazyImg](./../directives/lazy-img.md) directive
-:::
-
-## Basic usage
-
-<MazAvatar src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80" />
-
-```vue
-<script lang="ts" setup>
-import MazAvatar from 'maz-ui/components/MazAvatar'
-</script>
-
-<template>
-  <MazAvatar src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80" />
-</template>
-```
-
-## Options
-
-::: tip
-See all the options props [here](#props-event-slots)
-:::
-
-<div class="flex space-between gap-05 items-center flex-wrap">
-  <MazAvatar
-    caption="Louis Mazel"
-    size="1.5rem"
-  />
-  <MazAvatar
-    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
-    size="2rem"
-    href="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
-    target="_blank"
-    rounded-size="none"
-    clickable
-  >
-    <template #icon>
-      <MazIcon icon="/eye.svg" style="color: white;" size="2rem" />
-    </template>
-  </MazAvatar>
-
-<MazAvatar
-src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=200"
-size="2.5rem"
-clickable
-rounded-size="xl"
-button-color="destructive"
-@click="clicked"
-/>
-
-<MazAvatar
-  src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=600"
-  size="3rem"
-  bordered
-  noElevation
-/>
-
-</div>
-
-```vue
-<script lang="ts" setup>
-import MazAvatar from 'maz-ui/components/MazAvatar'
-function clicked() { console.log('clicked') }
-</script>
-
-<template>
-  <MazAvatar
-    caption="Louis Mazel"
-    size="1.5rem"
-  />
-  <MazAvatar
-    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
-    size="2rem"
-    href="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=maz-ui"
-    target="_blank"
-    rounded-size="none"
-    clickable
-  >
-    <template #icon>
-      <MazIcon icon="/eye.svg" />
-    </template>
-  </MazAvatar>
-  <MazAvatar
-    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=200"
-    size="2.5rem"
-    clickable
-    rounded-size="xl"
-    @click="clicked"
-  />
-  <MazAvatar
-    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=600"
-    size="3rem"
-    bordered
-  />
-</template>
-```
-
-## Initials from caption
-
-When no `src` is provided, `MazAvatar` displays initials generated from the `caption`. The `letter-count` prop (default `2`) controls how many letters are displayed:
-
-- **Single word**: the first `letter-count` characters of the word are used.
-- **Multiple words**: the first letter of each of the first `letter-count` words is used.
-
-Initials are always uppercased.
-
-<div class="flex gap-05 items-center flex-wrap">
-  <MazAvatar caption="admin" size="3rem" />
-  <MazAvatar caption="admin" :letter-count="3" size="3rem" />
-  <MazAvatar caption="Louis Mazel" size="3rem" />
-  <MazAvatar caption="Jean Claude Dus" :letter-count="3" size="3rem" />
-</div>
-
-```vue
-<template>
-  <!-- "AD" -->
-  <MazAvatar caption="admin" />
-  <!-- "ADM" -->
-  <MazAvatar caption="admin" :letter-count="3" />
-  <!-- "LM" -->
-  <MazAvatar caption="Louis Mazel" />
-  <!-- "JCD" -->
-  <MazAvatar caption="Jean Claude Dus" :letter-count="3" />
-</template>
-```
-
-## On Error
-
-When no `src` (and no `caption`) is provided, or when the image fails to load, `MazAvatar` displays the default `no-image` placeholder.
-
-<MazAvatar @error="error" src="https://broken-link-image-src.example" />
-
-```html
-<MazAvatar @error="error" src="https://broken-link-image-src.example" />
-```
-
-## Fallback image loaded on error
-
-<MazAvatar
-  class="vp-raw"
-  src="https://broken-link-image-src.com"
-  fallback-src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=100"
-/>
-
-```html
-<MazAvatar
-  src="https://broken-link-image-src.com"
-  fallback-src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=100"
-/>
-```
-
-## Loading
-
-The props `loading` has 3 possible values: `intersecting`, `lazy`, or `eager`.
-
-By default, the value is `intersecting` which means the image will be loaded when it's intersecting with the `IntersectionObserver` browser API. This mode uses the [`MazLazyImg`](./maz-lazy-img.md) component with [`vLazyImg`](./../directives/lazy-img.md) directive to handle the lazy loading.
-
-Native modes:
-
-- `lazy`: The image will be loaded only when it's in the viewport
-- `eager`: The image will be loaded immediately
-
-These modes are native use an `HTMLImageElement` with the `loading` attribute. (see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)). **Useful for SSR (Server Side Rendering) or when you want to load the image immediately.**
-
-<div class="flex gap-05 items-center flex-wrap">
-  <MazAvatar
-    class="vp-raw"
-    loading="intersecting"
-    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123"
-  />
-  <MazAvatar
-    class="vp-raw"
-    loading="lazy"
-    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123"
-  />
-  <MazAvatar
-    class="vp-raw"
-    loading="eager"
-    src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123"
-  />
-</div>
-
-```html
-<MazAvatar
-  loading="intersecting"
-  src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123"
-/>
-<MazAvatar loading="lazy" src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123" />
-<MazAvatar loading="eager" src="https://api.dicebear.com/7.x/big-smile/svg?backgroundColor=1d90ff&scale=80&seed=123" />
-```
-
-## Image height full
-
-By default the image fills the avatar **width** (`width: 100%`). Enable `image-height-full` to make the image fill the **height** instead: it keeps its aspect ratio, fills 100% of the height and overflows/crops horizontally. This is ideal for wide images or SVGs (like flags) that must cover the whole avatar.
-
-<div class="flex gap-05 items-center flex-wrap">
-  <MazAvatar class="vp-raw" size="4rem" src="https://placedog.net/300/200?id=7" />
-  <MazAvatar class="vp-raw" size="4rem" image-height-full src="https://placedog.net/300/200?id=7" />
-</div>
-
-```vue
-<template>
-  <!-- default: width 100% -->
-  <MazAvatar src="https://placedog.net/300/200" />
-  <!-- height 100%, cropped on the sides -->
-  <MazAvatar image-height-full src="https://placedog.net/300/200" />
-</template>
-```
-
-<script lang="ts" setup>
-  const clicked = () => { console.log('clicked') }
-  const error = (el) => { console.error('error', el) }
-</script>
-
-<!--@include: ./../../.vitepress/generated-docs/maz-avatar.doc.md-->

package/docs/src/components/maz-backdrop.md

@@ -1,250 +0,0 @@
----
-title: MazBackdrop
-description: MazBackdrop is a flexible backdrop component that provides a foundation for modals, drawers, bottom sheets and any overlay content. It handles focus management, keyboard navigation, and animations automatically.
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
-
-::: tip
-This component uses `<Teleport to="body">` and is the foundation for [MazDialog](./maz-dialog.md), [MazDrawer](./maz-drawer.md), and [MazBottomSheet](./maz-bottom-sheet.md)
-:::
-
-## Basic usage
-
-MazBackdrop creates a semi-transparent overlay that covers the entire screen. Think of it like a dark blanket that appears behind your content to make it stand out.
-
-<ComponentDemo expanded>
-  <MazBtn @click="basicOpen = true">Open Backdrop</MazBtn>
-
-  <MazBackdrop v-model="basicOpen" justify="center" align="center">
-    <div class="demo-content">
-      <h3>Hello! I'm on top of the backdrop</h3>
-      <p>Click outside or press Escape to close</p>
-      <MazBtn @click="basicOpen = false">Close</MazBtn>
-    </div>
-  </MazBackdrop>
-
-  <template #code>
-
-```vue
-<script setup>
-import MazBackdrop from 'maz-ui/components/MazBackdrop'
-import { ref } from 'vue'
-
-const basicOpen = ref(false)
-</script>
-
-<template>
-  <MazBtn @click="basicOpen = true">
-    Open Backdrop
-  </MazBtn>
-
-  <MazBackdrop v-model="basicOpen" justify="center" align="center">
-    <div class="my-content">
-      <h3>Hello! I'm on top of the backdrop</h3>
-      <p>Click outside or press Escape to close</p>
-      <MazBtn @click="basicOpen = false">Close</MazBtn>
-    </div>
-  </MazBackdrop>
-</template>
-
-<style lang="css" scoped>
-.demo-content {
-  background: var(--maz-surface);
-  padding: 2rem;
-  border-radius: var(--maz-rounded-md);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-  max-width: 400px;
-  text-align: center;
-}
-
-.demo-content h3 {
-  margin-top: 0;
-}
-
-.demo-content p {
-  margin-bottom: 1.5rem;
-  color: var(--maz-muted);
-}
-</style>
-```
-
-  </template>
-</ComponentDemo>
-
-## Persistent backdrop
-
-A persistent backdrop cannot be closed by clicking outside or pressing Escape. Perfect for important confirmations!
-
-<ComponentDemo>
-  <MazBtn @click="persistentOpen = true">Open Persistent Backdrop</MazBtn>
-
-  <MazBackdrop v-model="persistentOpen" persistent align="center" justify="center">
-    <div class="demo-content">
-      <h3>I'm persistent!</h3>
-      <p>You can only close me by clicking the button below</p>
-      <MazBtn @click="persistentOpen = false" color="destructive">
-        Force Close
-      </MazBtn>
-    </div>
-  </MazBackdrop>
-
-  <template #code>
-
-```html
-<MazBackdrop v-model="persistentOpen" persistent align="center" justify="center">
-  <div class="my-content">
-    <h3>I'm persistent!</h3>
-    <p>You can only close me by clicking the button below</p>
-    <MazBtn @click="persistentOpen = false" color="destructive">
-      Force Close
-    </MazBtn>
-  </div>
-</MazBackdrop>
-```
-
-  </template>
-</ComponentDemo>
-
-## Content positioning
-
-You can control where your content appears using `justify` and `align` props. It's like choosing where to place a sticker on your screen!
-
-<ComponentDemo>
-  <div class="maz:flex maz:flex-wrap maz:gap-2">
-    <MazBtn @click="topLeftOpen = true">Top Left</MazBtn>
-    <MazBtn @click="centerOpen = true">Center</MazBtn>
-    <MazBtn @click="bottomRightOpen = true">Bottom Right</MazBtn>
-  </div>
-
-  <!-- Top Left -->
-  <MazBackdrop v-model="topLeftOpen" justify="start" align="start" content-padding>
-    <div class="demo-content">
-      <h3>I'm at the top left!</h3>
-      <MazBtn @click="topLeftOpen = false" size="sm">Close</MazBtn>
-    </div>
-  </MazBackdrop>
-
-  <!-- Center -->
-  <MazBackdrop v-model="centerOpen" justify="center" align="center" content-padding>
-    <div class="demo-content">
-      <h3  3>I'm perfectly centered!</h3>
-      <MazBtn @click="centerOpen = false" size="sm">Close</MazBtn>
-    </div>
-  </MazBackdrop>
-
-  <!-- Bottom Right -->
-  <MazBackdrop v-model="bottomRightOpen" justify="end" align="end" content-padding>
-    <div class="demo-content">
-      <h3>I'm at the bottom right!</h3>
-      <MazBtn @click="bottomRightOpen = false" size="sm">Close</MazBtn>
-    </div>
-  </MazBackdrop>
-
-  <template #code>
-
-```html
-<!-- Top Left -->
-<MazBackdrop v-model="topLeftOpen" justify="start" align="start" content-padding>
-  <div class="my-content">
-    <h3>I'm at the top left!</h3>
-    <MazBtn @click="topLeftOpen = false">Close</MazBtn>
-  </div>
-</MazBackdrop>
-
-<!-- Center -->
-<MazBackdrop v-model="centerOpen" justify="center" align="center" content-padding>
-  <div class="my-content">
-    <h3>I'm perfectly centered!</h3>
-    <MazBtn @click="centerOpen = false">Close</MazBtn>
-  </div>
-</MazBackdrop>
-
-<!-- Bottom Right -->
-<MazBackdrop v-model="bottomRightOpen" justify="end" align="end" content-padding>
-  <div class="my-content">
-    <h3>I'm at the bottom right!</h3>
-    <MazBtn @click="bottomRightOpen = false">Close</MazBtn>
-  </div>
-</MazBackdrop>
-```
-
-  </template>
-</ComponentDemo>
-
-## Custom animations
-
-MazBackdrop comes with built-in animations, but you can customize them with the `transition-name` prop.
-
-<ComponentDemo>
-  <MazBtn @click="animatedOpen = true">Open with Custom Animation</MazBtn>
-
-  <MazBackdrop v-model="animatedOpen" transition-name="modal-anim">
-    <div class="demo-content">
-      <h3>I slide and scale in!</h3>
-      <p>This uses the same animation as MazDialog</p>
-      <MazBtn @click="animatedOpen = false">Close</MazBtn>
-    </div>
-  </MazBackdrop>
-
-  <template #code>
-
-```html
-<MazBackdrop v-model="animatedOpen" transition-name="modal-anim">
-  <div class="my-content">
-    <h3>I slide and scale in!</h3>
-    <p>This uses the same animation as MazDialog</p>
-    <MazBtn @click="animatedOpen = false">Close</MazBtn>
-  </div>
-</MazBackdrop>
-```
-
-  </template>
-</ComponentDemo>
-
-## Accessibility features
-
-MazBackdrop automatically handles:
-- **Focus trap**: Tab navigation stays within your content
-- **Keyboard support**: Escape key to close (unless persistent)
-- **Screen readers**: Proper ARIA attributes for accessibility
-- **Scroll lock**: Prevents background scrolling when open
-
-These features work automatically - you don't need to do anything extra!
-
-<!--@include: ./../../.vitepress/generated-docs/maz-backdrop.doc.md-->
-
-<script setup>
-  import { ref } from 'vue'
-
-  const basicOpen = ref(false)
-  const persistentOpen = ref(false)
-  const topLeftOpen = ref(false)
-  const centerOpen = ref(false)
-  const bottomRightOpen = ref(false)
-  const animatedOpen = ref(false)
-</script>
-
-<style scoped>
-.demo-content {
-  background: var(--maz-surface);
-  padding: 2rem;
-  border-radius: var(--maz-rounded-md);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-  max-width: 400px;
-  text-align: center;
-}
-
-.demo-content h3 {
-  margin-top: 0;
-}
-
-.demo-content p {
-  margin-bottom: 1.5rem;
-  color: var(--maz-muted);
-}
-</style>