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

package/docs/{src/composables → composables}/use-idle-timeout.md

@@ -1,52 +1,24 @@
 ---
-title: useIdleTimeout
-description: A Vue composable that provides an easy way to track user inactivity on your website and execute a callback function when the user becomes idle.
+title: "useIdleTimeout"
+description: "A Vue composable that provides an easy way to track user inactivity on your website and execute a callback function when the user becomes idle."
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-idle-timeout"
 ---
 
-# {{ $frontmatter.title }}
+# useIdleTimeout
 
-{{ $frontmatter.description }}
+> A Vue composable that provides an easy way to track user inactivity on your website and execute a callback function when the user becomes idle.
 
-::: info
-A plugin to know the amount of time a user has spent on your website
-:::
-
-## Demo
-
-<ComponentDemo>
-  <div class="flex items-start gap-05 items-center flex-wrap">
-    <MazBtn @click="idleTimeout.start()" color="info">
-      Start
-    </MazBtn>
-    <MazBtn @click="idleTimeout.pause()" color="warning">
-      Pause
-    </MazBtn>
-    <MazBtn @click="idleTimeout.resume()">
-      Resume
-    </MazBtn>
-    <MazBtn @click="idleTimeout.reset()" color="secondary">
-      Reset
-    </MazBtn>
-    <MazBtn @click="idleTimeout.destroy()" color="destructive">
-      Destroy
-    </MazBtn>
-  </div>
-
-  <br />
-
-  <MazCard block>
-    <div style="display: flex;">
-      <div style="flex: 1;">isIdle: {{event.isIdle ?? false}}</div>
-      <div v-if="event.eventType" style="flex: 1; padding-left: 10px;">eventType: {{event.eventType ?? '-' }}</div>
-    </div>
-  </MazCard>
+- Package: `maz-ui`
+- Import: `import { useIdleTimeout } from 'maz-ui/composables/useIdleTimeout'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/composables/use-idle-timeout
 
-  <br />
-  <br />
+**Note:**
 
-  <p class="maz:text-warning">Wait 5 seconds without any actions to see the dialog popup</p>
+A plugin to know the amount of time a user has spent on your website
 
-<template #code>
+## Demo
 
 ```vue
 <script lang="ts" setup>
@@ -133,62 +105,6 @@ onBeforeUnmount(() => {
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
-<script lang="ts" setup>
-  import { onMounted, ref, onBeforeUnmount } from 'vue'
-
-  import { useIdleTimeout } from 'maz-ui/composables/useIdleTimeout'
-  import { useDialog } from 'maz-ui/composables/useDialog'
-
-  const dialog = useDialog()
-
-  const event = ref({})
-
-  const timeout = 5000
-
-  const idleTimeout = useIdleTimeout({
-    callback,
-    options: {
-      timeout,
-      immediate: false,
-      once: false,
-    },
-  })
-
-  async function callback({ isIdle, eventType, instance }) {
-    console.log({ isIdle, eventType })
-    event.value = { isIdle, eventType }
-
-    if (isIdle) {
-      try {
-        instance.destroy()
-        await dialog.open({
-          title: 'Are you still here?',
-          message: `You have been inactive for ${timeout / 1000} secondes, do you want to continue?`,
-          data: {
-            cancelText: 'No',
-            confirmText: 'Yes',
-          }
-        }).promise
-        instance.start()
-      } catch (e) {
-        instance.destroy()
-      }
-    }
-  }
-
-  onMounted(() => {
-    // should be executed on client
-    idleTimeout.start()
-  })
-
-  onBeforeUnmount(() => {
-    idleTimeout.destroy()
-  })
-</script>
-
 ## Callback
 
 ```ts

package/docs/{src/composables → composables}/use-pull-to-refresh.md

@@ -1,15 +1,22 @@
 ---
-title: usePullToRefresh
-description: usePullToRefresh is a headless Vue composable for the pull to refresh gesture on the window or any scroll container.
+title: "usePullToRefresh"
+description: "usePullToRefresh is a headless Vue composable for the pull to refresh gesture on the window or any scroll container."
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-pull-to-refresh"
 ---
 
-# {{ $frontmatter.title }}
+# usePullToRefresh
 
-{{ $frontmatter.description }}
+> usePullToRefresh is a headless Vue composable for the pull to refresh gesture on the window or any scroll container.
+
+- Package: `maz-ui`
+- Import: `import { usePullToRefresh } from 'maz-ui/composables/usePullToRefresh'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/composables/use-pull-to-refresh
 
 ## Introduction
 
-`usePullToRefresh` tracks the pull to refresh gesture and gives you its state (distance, progress, ready, refreshing) to build your own indicator. It powers [MazPullToRefresh](./../components/maz-pull-to-refresh.md): use the component for a ready-made indicator, the composable when you need full control over the rendering.
+`usePullToRefresh` tracks the pull to refresh gesture and gives you its state (distance, progress, ready, refreshing) to build your own indicator. It powers [MazPullToRefresh](../components/maz-pull-to-refresh.md): use the component for a ready-made indicator, the composable when you need full control over the rendering.
 
 The pull only starts when the target is scrolled to the top, follows a rubber band beyond the threshold, ignores horizontal and multi-touch gestures, and prevents the native bounce while pulling.
 
@@ -29,8 +36,8 @@ const { distance, progress, isReady, isRefreshing } = usePullToRefresh({
 </script>
 
 <template>
-  <div ref="scroller" class="maz:h-screen maz:overflow-y-auto">
-    <div class="maz:flex maz:items-end maz:justify-center maz:overflow-hidden" :style="{ height: `${distance}px` }">
+  <div ref="scroller" class="h-screen overflow-y-auto">
+    <div class="flex items-end justify-center overflow-hidden" :style="{ height: `${distance}px` }">
       <span v-if="isRefreshing">Refreshing…</span>
       <span v-else-if="isReady">Release to refresh</span>
       <span v-else :style="{ opacity: progress }">Pull to refresh</span>

package/docs/{src/composables → composables}/use-reading-time.md

@@ -1,15 +1,22 @@
 ---
-title: useReadingTime
-description: This composable allows you to calculate the reading time of a text
+title: "useReadingTime"
+description: "This composable allows you to calculate the reading time of a text"
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-reading-time"
 ---
 
-# {{ $frontmatter.title }}
+# useReadingTime
 
-{{ $frontmatter.description }}
+> This composable allows you to calculate the reading time of a text
+
+- Package: `maz-ui`
+- Import: `import { useReadingTime } from 'maz-ui/composables/useReadingTime'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/composables/use-reading-time
 
 ## Basic usage
 
-Time to read this page: <strong>{{ duration }} minutes</strong>
+Time to read this page:  minutes
 
 ```vue
 <script lang="ts" setup>
@@ -29,25 +36,11 @@ const { duration } = useReadingTime({
 
 ## With content selector
 
-::: warning
+**Warning:**
+
 This method is not SSR friendly (only on client side, with Nuxt use this composable in `onMounted(() => { ... })`) and not recommended because it is less performant than the previous one
-:::
-
-Time to read this page: <strong>{{ durationSelector }} minutes</strong>
-
-<MazCard collapsible class="maz:w-full" title="Content to read">
-  <div id="content-to-read" class="maz:px-4">
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus quam id leo in. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Et tortor consequat id porta nibh venenatis cras sed. Praesent tristique magna sit amet. Iaculis at erat pellentesque adipiscing commodo elit at. Interdum velit euismod in pellentesque massa placerat duis. Eget nunc scelerisque viverra mauris in aliquam. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Volutpat blandit aliquam etiam erat velit scelerisque. Eget nullam non nisi est sit amet. Turpis egestas sed tempus urna et pharetra. Nisl rhoncus mattis rhoncus urna neque viverra justo. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Non odio euismod lacinia at. Magna eget est lorem ipsum.
-    </p>
-    <p>
-      Et ultrices neque ornare aenean euismod elementum nisi. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Lobortis feugiat vivamus at augue eget arcu. Ut diam quam nulla porttitor massa id neque. Turpis in eu mi bibendum neque egestas. Vivamus at augue eget arcu dictum varius duis at. Nunc sed blandit libero volutpat. Convallis a cras semper auctor neque vitae tempus. Odio facilisis mauris sit amet massa vitae tortor condimentum. Condimentum id venenatis a condimentum. Tincidunt praesent semper feugiat nibh sed pulvinar. Dolor magna eget est lorem ipsum dolor. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Sapien pellentesque habitant morbi tristique senectus et netus. Tortor vitae purus faucibus ornare suspendisse sed nisi. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Enim neque volutpat ac tincidunt vitae.
-    </p>
-    <p>
-      Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Ut etiam sit amet nisl purus in mollis nunc sed. Sed velit dignissim sodales ut eu sem integer. Odio tempor orci dapibus ultrices in iaculis nunc. Id semper risus in hendrerit gravida. Aliquam faucibus purus in massa tempor nec. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Quisque id diam vel quam elementum pulvinar etiam non quam. Et egestas quis ipsum suspendisse ultrices gravida dictum. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. In hac habitasse platea dictumst quisque. Amet nisl purus in mollis nunc sed id semper. Sollicitudin tempor id eu nisl nunc mi. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. In iaculis nunc sed augue lacus viverra vitae.
-    </p>
-  </div>
-</MazCard>
+
+Time to read this page:  minutes
 
 ```vue
 <script lang="ts" setup>
@@ -75,8 +68,8 @@ onMounted(() => {
     Time to read this page: <strong>{{ duration }} minutes</strong>
   </div>
 
-  <MazCard collapsible class="maz:w-full" title="Content to read">
-    <div id="content-to-read" class="maz:px-4">
+  <MazCard collapsible class="w-full" title="Content to read">
+    <div id="content-to-read" class="px-4">
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus quam id leo in. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Et tortor consequat id porta nibh venenatis cras sed. Praesent tristique magna sit amet. Iaculis at erat pellentesque adipiscing commodo elit at. Interdum velit euismod in pellentesque massa placerat duis. Eget nunc scelerisque viverra mauris in aliquam. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Volutpat blandit aliquam etiam erat velit scelerisque. Eget nullam non nisi est sit amet. Turpis egestas sed tempus urna et pharetra. Nisl rhoncus mattis rhoncus urna neque viverra justo. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Non odio euismod lacinia at. Magna eget est lorem ipsum.
       </p>
@@ -95,38 +88,9 @@ onMounted(() => {
 
 > The velocity is the number of words per minute. By default it is 150 words per minute.
 
-**Velocity**: {{ velocity ?? 150 }} words per minute
-
-<MazInputNumber v-model="velocity" placeholder="Velocity" />
-
-Time to read this page: <strong>{{ durationSelector }} minutes</strong>
-
-{{wordCount}}
-
-<script lang="ts" setup>
-  import { ref, onMounted } from 'vue'
-  import { useReadingTime } from 'maz-ui/composables/useReadingTime'
-
-  const velocity = ref()
-
-  const { duration } = useReadingTime({
-    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus quam id leo in. Placerat vestibulum lectus mauris ultrices eros in cursus turpis. Et tortor consequat id porta nibh venenatis cras sed. Praesent tristique magna sit amet. Iaculis at erat pellentesque adipiscing commodo elit at. Interdum velit euismod in pellentesque massa placerat duis. Eget nunc scelerisque viverra mauris in aliquam. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Egestas integer eget aliquet nibh praesent tristique magna sit amet. Volutpat blandit aliquam etiam erat velit scelerisque. Eget nullam non nisi est sit amet. Turpis egestas sed tempus urna et pharetra. Nisl rhoncus mattis rhoncus urna neque viverra justo. Rutrum tellus pellentesque eu tincidunt tortor aliquam. Non odio euismod lacinia at. Magna eget est lorem ipsum. Et ultrices neque ornare aenean euismod elementum nisi. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis. Lobortis feugiat vivamus at augue eget arcu. Ut diam quam nulla porttitor massa id neque. Turpis in eu mi bibendum neque egestas. Vivamus at augue eget arcu dictum varius duis at. Nunc sed blandit libero volutpat. Convallis a cras semper auctor neque vitae tempus. Odio facilisis mauris sit amet massa vitae tortor condimentum. Condimentum id venenatis a condimentum. Tincidunt praesent semper feugiat nibh sed pulvinar. Dolor magna eget est lorem ipsum dolor. Ultricies mi eget mauris pharetra et ultrices neque ornare aenean. Sapien pellentesque habitant morbi tristique senectus et netus. Tortor vitae purus faucibus ornare suspendisse sed nisi. Est lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Enim neque volutpat ac tincidunt vitae. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Ut etiam sit amet nisl purus in mollis nunc sed. Sed velit dignissim sodales ut eu sem integer. Odio tempor orci dapibus ultrices in iaculis nunc. Id semper risus in hendrerit gravida. Aliquam faucibus purus in massa tempor nec. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Quisque id diam vel quam elementum pulvinar etiam non quam. Et egestas quis ipsum suspendisse ultrices gravida dictum. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. In hac habitasse platea dictumst quisque. Amet nisl purus in mollis nunc sed id semper. Sollicitudin tempor id eu nisl nunc mi. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. In iaculis nunc sed augue lacus viverra vitae.',
-    velocity,
-  })
-
-  const contentSelector = ref()
+**Velocity**:  words per minute
 
-  const { duration: durationSelector, wordCount } = useReadingTime({
-    contentSelector,
-    velocity,
-  })
-
-  onMounted(() => {
-    setTimeout(() => {
-      contentSelector.value = '#content-to-read'
-    }, 500)
-  })
-</script>
+Time to read this page:  minutes
 
 ## Types
 

package/docs/composables/use-string-matching.md

@@ -0,0 +1,41 @@
+---
+title: "useStringMatching"
+description: "Efficient composable for string matching tasks, utilizing Levenshtein distance calculation. Simplify comparison operations with minimal setup. Enhance text similarity checks effortlessly."
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-string-matching"
+---
+
+# useStringMatching
+
+> Efficient composable for string matching tasks, utilizing Levenshtein distance calculation. Simplify comparison operations with minimal setup. Enhance text similarity checks effortlessly.
+
+- Package: `maz-ui`
+- Import: `import { useStringMatching } from 'maz-ui/composables/useStringMatching'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/composables/use-string-matching
+
+## Usage
+
+```vue
+<script lang="ts" setup>
+import { useStringMatching } from 'maz-ui/composables'
+import { ref } from 'vue'
+
+const string1 = ref<string>('maz-ui')
+const string2 = ref<string>('màéz-uiok')
+
+const { score, isMatching } = useStringMatching(string1, string2)
+</script>
+
+<template>
+  <MazInput v-model="string1" label="Enter first string" />
+  <MazInput v-model="string2" label="Enter second string" />
+
+  <p>
+    <b>isMatching:</b> {{ isMatching }}
+  </p>
+  <p>
+    <b>score:</b> {{ score }}
+  </p>
+</template>
+```

package/docs/{src/composables → composables}/use-swipe.md

@@ -1,11 +1,18 @@
 ---
-title: useSwipe
-description: useSwipe is a Vue composable that simplifies the management of "swipe" interactions on HTML elements.
+title: "useSwipe"
+description: "useSwipe is a Vue composable that simplifies the management of \"swipe\" interactions on HTML elements."
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-swipe"
 ---
 
-# {{ $frontmatter.title }}
+# useSwipe
 
-{{ $frontmatter.description }}
+> useSwipe is a Vue composable that simplifies the management of "swipe" interactions on HTML elements.
+
+- Package: `maz-ui`
+- Import: `import { useSwipe } from 'maz-ui/composables/useSwipe'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/composables/use-swipe
 
 ## Introduction
 
@@ -14,9 +21,9 @@ You can use this information to implement specific interactions in your applicat
 
 It is built on top of [Pointer Events](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events), so it works with **touch, mouse and pen** out of the box.
 
-::: tip
+**Tip:**
+
 For a real-time drag gesture (follow the pointer, snap back, drag-to-dismiss…) rather than discrete directional detection, use [useDrag](./use-drag.md).
-:::
 
 ## Key Features
 
@@ -31,17 +38,6 @@ For a real-time drag gesture (follow the pointer, snap back, drag-to-dismiss…)
 
 ## Basic Usage
 
-<div ref="swipeContainer" class="swipe-container">
-  <p>
-    Swipe in any direction<br>
-    <span class="maz:text-xs maz:text-muted">
-      (works with touch, mouse and pen)
-    </span>
-    <br><br>
-    Last swipe direction: {{lastSwipeDirection || 'None'}}
-  </p>
-</div>
-
 Here's an example of using the useSwipe composable:
 
 ```vue
@@ -81,7 +77,7 @@ onUnmounted(() => {
   <div ref="swipeContainer" class="swipe-container">
     <p>
       Swipe in any direction<br>
-      <span class="maz:text-sm maz:text-muted">
+      <span class="text-sm text-muted">
         (works with touch, mouse and pen)
       </span>
       <br><br>
@@ -104,55 +100,6 @@ onUnmounted(() => {
 </style>
 ```
 
-<script lang="ts" setup>
-import { useSwipe } from 'maz-ui/composables/useSwipe'
-import { onMounted, onUnmounted, ref } from 'vue'
-
-const swipeContainer = ref<HTMLDivElement>()
-
-const lastSwipeDirection = ref<string>('None')
-
-const { xDiff, yDiff, start, stop } = useSwipe({
-  element: swipeContainer,
-  onLeft: () => lastSwipeDirection.value = 'Swiped left',
-  onRight: () => lastSwipeDirection.value = 'Swiped right',
-  onUp: () => lastSwipeDirection.value = 'Swiped up',
-  onDown: () => lastSwipeDirection.value = 'Swiped down',
-  threshold: 50,
-})
-
-onMounted(() => {
-  start()
-})
-
-onUnmounted(() => {
-  stop()
-})
-</script>
-
-<style>
-.swipe-container {
-  border: 1px solid #e2e2e3;
-  border-radius: 10px;
-  height: 200px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  font-size: 1.2rem;
-}
-</style>
-
-In this example, the `useSwipe` composable is used to detect swiping movements on an HTML element with the `container` class. When a swipe is detected, the horizontal (`xDiff`) and vertical (`yDiff`) coordinates of the movement are displayed.
-
-Additionally, callbacks are defined for each swipe direction (`onLeft`, `onRight`, `onUp`, `onDown`), which will be called when the corresponding swipe is detected.
-
-The swipe detection threshold is also customized to 50 pixels.
-
-## Options
-
-`useSwipe` accepts an options object with the following properties:
-
 ```ts
 interface UseSwipeOptions {
   /**
@@ -202,10 +149,6 @@ interface UseSwipeOptions {
 }
 ```
 
-## Composable Return
-
-`useSwipe` returns an object with the following properties:
-
 ```ts
 interface UseSwipeReturn {
   /** A function to start listening for swipe events. */
@@ -226,13 +169,3 @@ interface UseSwipeReturn {
   yEnd: Ref<number | undefined>
 }
 ```
-
-## Notes
-
-- Make sure to call the `start()` function to start listening for swipe events.
-- You can call the `stop()` function to stop listening for swipe events.
-- If you use the composable in a Vue component, make sure to call it in the `setup()` and clean up the event listeners in the `onUnmounted()`.
-- The composable automatically handles the addition and removal of event listeners based on the provided options.
-- You can customize the swipe detection threshold by modifying the `threshold` option.
-- If you want to prevent the default behavior of pointer move or mousewheel events, you can set the `preventDefaultOnMove` and `preventDefaultOnMouseWheel` options, respectively.
-- Use the `pointerTypes` option to restrict the gesture to specific input types (e.g. `['touch']` for touch-only).

package/docs/{src/composables → composables}/use-timer.md

@@ -1,11 +1,18 @@
 ---
-title: useTimer
-description: The useTimer composable manages timeouts. It allows you to start, pause, resume, and stop a timer with reactive updates on the remaining time. Ideal for handling asynchronous operations or user interactions with a specified timeout.
+title: "useTimer"
+description: "The useTimer composable manages timeouts. It allows you to start, pause, resume, and stop a timer with reactive updates on the remaining time. Ideal for handling asynchronous operations or user interactions with a specified timeout."
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-timer"
 ---
 
-# {{ $frontmatter.title }}
+# useTimer
 
-{{ $frontmatter.description }}
+> The useTimer composable manages timeouts. It allows you to start, pause, resume, and stop a timer with reactive updates on the remaining time. Ideal for handling asynchronous operations or user interactions with a specified timeout.
+
+- Package: `maz-ui`
+- Import: `import { useTimer } from 'maz-ui/composables/useTimer'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/composables/use-timer
 
 ---
 
@@ -23,40 +30,7 @@ This composable can be used in Vue components to handle timeouts in a flexible a
 
 ## Usage
 
-**Remaning time**: {{ remainingTime }}ms
-
-<div class="maz:flex maz:items-center maz:gap-2">
-  <MazBtn @click="start">
-    Start
-  </MazBtn>
-  <MazBtn color="destructive" @click="stop">
-    Stop
-  </MazBtn>
-  <MazBtn color="warning" @click="pause">
-    Pause
-  </MazBtn>
-  <MazBtn color="secondary" @click="resume">
-    Resume
-  </MazBtn>
-</div>
-
-<script lang="ts" setup>
-  import { useTimer } from 'maz-ui/composables/useTimer'
-  import { useToast } from 'maz-ui/composables/useToast'
-
-  const toast = useToast()
-
-  const { start, stop, pause, resume, remainingTime } = useTimer({
-    timeout: 4000,
-    callback: () => toast.info('Timeout end', {
-      button: {
-        onClick: start,
-        text: 're-start',
-        closeToast: true,
-      },
-    })
-  })
-</script>
+**Remaning time**: ms
 
 ```vue
 <script lang="ts" setup>

package/docs/composables/use-toast.md

@@ -0,0 +1,50 @@
+---
+title: "useToast"
+description: "Vue composable for handling toast plugin in your components"
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-toast"
+---
+
+# useToast
+
+> Vue composable for handling toast plugin in your components
+
+- Package: `maz-ui`
+- Import: `import { useToast } from 'maz-ui/composables/useToast'`
+- Nuxt: auto-imported by `@maz-ui/nuxt` when `mazUi.plugins.toast` is enabled
+- Web: https://maz-ui.com/composables/use-toast
+
+**Warning:**
+
+You must install [toast plugin](../plugins/toast.md#install) before use it
+
+**Tip:**
+
+More info about [toast plugin](../plugins/toast.md) in its documentation
+
+## Usage
+
+```vue
+<script lang="ts" setup>
+import { useToast } from 'maz-ui/composables'
+
+const toast = useToast()
+
+toast.info('info message', {
+  button: {
+    onClick: () => toast.success('clicked'),
+    text: 'Click me',
+    closeToast: true
+  }
+})
+toast.success('success message', {
+  button: {
+    href: '/composables/use-toast',
+    text: 'Follow me',
+    closeToast: true,
+  }
+})
+toast.warning('warning message')
+toast.error('error message')
+</script>
+```

package/docs/{src/composables → composables}/use-user-visibility.md

@@ -1,40 +1,28 @@
 ---
-title: user-visibility
-description: Plugin to see and manage the user page visibility
+title: "user-visibility"
+description: "Plugin to see and manage the user page visibility"
+package: "maz-ui"
+url: "https://maz-ui.com/composables/use-user-visibility"
 ---
 
-# {{ $frontmatter.title }}
+# user-visibility
 
-{{ $frontmatter.description }}
+> Plugin to see and manage the user page visibility
 
-::: tip
-Useful to know if the user is displaying your website
-:::
-
-## Demo
+- Package: `maz-ui`
+- Import: `import { useUserVisibility } from 'maz-ui/composables/useUserVisibility'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/composables/use-user-visibility
 
-<MazCard overflow-hidden style="width: 100%; margin-bottom: 1rem;">
-  <h3 style="margin-top: 0; margin-bottom: 1rem;">Logs</h3>
+**Tip:**
 
-  <div v-for="({isVisible}, i) in events" :key="i">
-    isVisible: {{isVisible}}
-  </div>
-</MazCard>
-
-<div class="flex items-start gap-05 items-center flex-wrap">
-  <MazBtn @click="userVisibility.start()" color="info">
-    Start
-  </MazBtn>
+Useful to know if the user is displaying your website
 
-<MazBtn @click="userVisibility.destroy()" color="destructive">
-Destroy
-</MazBtn>
+## Demo
 
-</div>
+**Tip:**
 
-::: tip
 Switch tabs for a second to see events
-:::
 
 ## How to use it?
 
@@ -88,36 +76,6 @@ onBeforeUnmount(() => {
 </template>
 ```
 
-<script lang="ts" setup>
-  import { onMounted, ref, onBeforeUnmount } from 'vue'
-
-  import { useUserVisibility } from 'maz-ui/composables/useUserVisibility'
-
-  const events = ref([])
-
-  const callback = ({ isVisible }) => {
-    console.log('isVisible', isVisible)
-    events.value.push({ isVisible: isVisible })
-  }
-
-  const options = {
-    immediate: true,
-    once: false,
-    timeout: 1000,
-    ssr: true,
-  }
-
-  const userVisibility = useUserVisibility({ callback, options })
-
-  onMounted(() => {
-    userVisibility.start()
-  })
-
-  onBeforeUnmount(() => {
-    userVisibility.destroy()
-  })
-</script>
-
 ## Callback
 
 ```ts