@maz-ui/mcp 4.9.3 → 5.0.0-beta.1

package/docs/src/composables/use-form-validator.md

@@ -26,7 +26,7 @@ description: Vue composables for form validation with Valibot - useFormValidator
 Here's the simplest form you can create with `useFormValidator`:
 
 <ComponentDemo>
-  <form class="maz-flex maz-flex-col maz-gap-4" @submit="onSubmitQuickStart">
+  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitQuickStart">
     <MazInput
       v-model="quickStartModel.email"
       label="Email"
@@ -138,8 +138,8 @@ Each field in `fieldsStates` contains:
 | `validating` | `boolean` | Async validation is in progress |
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
-    <form class="maz-flex maz-flex-col maz-gap-4" @submit="onSubmitState">
+  <div class="maz:flex maz:flex-col maz:gap-4">
+    <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitState">
       <MazInput
         v-model="stateModel.name"
         label="Name (min 3 characters)"
@@ -157,11 +157,11 @@ Each field in `fieldsStates` contains:
       />
       <MazBtn type="submit">Submit</MazBtn>
     </form>
-    <div class="maz-rounded">
-      <p class="maz-font-semibold maz-mb-2">Form State:</p>
-      <pre class="maz-text-xs maz-bg-surface-600/70 dark:maz-bg-surface-600/60 maz-p-2 maz-rounded">{{ JSON.stringify({ isValid: stateValid, isDirty: stateDirty, isSubmitted: stateSubmitted, isSubmitting: stateSubmitting }, null, 2) }}</pre>
-      <p class="maz-font-semibold maz-mb-2 maz-mt-4">Fields States:</p>
-      <pre class="maz-text-xs maz-bg-surface-600/70 dark:maz-bg-surface-600/60 maz-p-2 maz-rounded">{{ JSON.stringify(stateFields, null, 2) }}</pre>
+    <div class="maz:rounded-md">
+      <p class="maz:font-semibold maz:mb-2">Form State:</p>
+      <pre class="maz:text-xs maz:bg-surface-600/70 maz:dark:bg-surface-600/60 maz:p-2 maz:rounded-md">{{ JSON.stringify({ isValid: stateValid, isDirty: stateDirty, isSubmitted: stateSubmitted, isSubmitting: stateSubmitting }, null, 2) }}</pre>
+      <p class="maz:font-semibold maz:mb-2 maz:mt-4">Fields States:</p>
+      <pre class="maz:text-xs maz:bg-surface-600/70 maz:dark:bg-surface-600/60 maz:p-2 maz:rounded-md">{{ JSON.stringify(stateFields, null, 2) }}</pre>
     </div>
   </div>
 
@@ -229,10 +229,10 @@ For `eager`, `blur`, and `progressive` modes, you must use `useFormField` with t
 The default mode. Validates when field values change. Errors only appear if the field is not empty.
 
 <ComponentDemo>
-  <div class="maz-mb-4">
-    <p class="maz-text-sm maz-text-muted">Type in the field and clear it - notice the error appears only when there's content.</p>
+  <div class="maz:mb-4">
+    <p class="maz:text-sm maz:text-muted">Type in the field and clear it - notice the error appears only when there's content.</p>
   </div>
-  <form class="maz-flex maz-flex-col maz-gap-4" @submit="onSubmitLazy">
+  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitLazy">
     <MazInput
       v-model="lazyModel.name"
       label="Name (min 3 characters)"
@@ -287,10 +287,10 @@ const onSubmit = handleSubmit((data) => {
 Validates all fields immediately when the form is created and on every change. Errors are always displayed.
 
 <ComponentDemo>
-  <div class="maz-mb-4">
-    <p class="maz-text-sm maz-text-muted">Notice all fields show errors immediately, even before any interaction.</p>
+  <div class="maz:mb-4">
+    <p class="maz:text-sm maz:text-muted">Notice all fields show errors immediately, even before any interaction.</p>
   </div>
-  <form class="maz-flex maz-flex-col maz-gap-4" @submit="onSubmitAggressive">
+  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitAggressive">
     <MazInput
       v-model="aggressiveModel.name"
       label="Name (min 3 characters)"
@@ -342,10 +342,10 @@ Requires `useFormField` with `ref` option or `validationEvents`.
 :::
 
 <ComponentDemo>
-  <div class="maz-mb-4">
-    <p class="maz-text-sm maz-text-muted">Type something, then click outside the field (blur) to see validation. After that, errors update as you type.</p>
+  <div class="maz:mb-4">
+    <p class="maz:text-sm maz:text-muted">Type something, then click outside the field (blur) to see validation. After that, errors update as you type.</p>
   </div>
-  <form class="maz-flex maz-flex-col maz-gap-4" @submit="onSubmitEager">
+  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitEager">
     <MazInput
       ref="eagerNameRef"
       v-model="eagerName"
@@ -446,10 +446,10 @@ Requires `useFormField` with `ref` option or `validationEvents`.
 Validates only when the field loses focus. Errors are only shown after blur.
 
 <ComponentDemo>
-  <div class="maz-mb-4">
-    <p class="maz-text-sm maz-text-muted">Type in the field, then click outside. Errors only appear after blur, and don't update while typing.</p>
+  <div class="maz:mb-4">
+    <p class="maz:text-sm maz:text-muted">Type in the field, then click outside. Errors only appear after blur, and don't update while typing.</p>
   </div>
-  <form class="maz-flex maz-flex-col maz-gap-4" @submit="onSubmitBlur">
+  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitBlur">
     <MazInput
       ref="blurNameRef"
       v-model="blurName"
@@ -517,10 +517,10 @@ Requires `useFormField` with `ref` option or `validationEvents`.
 The most user-friendly mode. Validates silently in the background. Shows errors only on blur if the field is invalid. Once valid, it stays valid until it becomes invalid again.
 
 <ComponentDemo>
-  <div class="maz-mb-4">
-    <p class="maz-text-sm maz-text-muted">Start typing - the field becomes valid (green) as soon as validation passes. Errors only show after blur.</p>
+  <div class="maz:mb-4">
+    <p class="maz:text-sm maz:text-muted">Start typing - the field becomes valid (green) as soon as validation passes. Errors only show after blur.</p>
   </div>
-  <form class="maz-flex maz-flex-col maz-gap-4" @submit="onSubmitProgressive">
+  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitProgressive">
     <MazInput
       ref="progressiveNameRef"
       v-model="progressiveName"
@@ -709,10 +709,10 @@ const { value: email } = useFormField<string>('email', {
 Use Valibot's `pipeAsync` and `checkAsync` for async validations like checking username availability:
 
 <ComponentDemo>
-  <div class="maz-mb-4">
-    <p class="maz-text-sm maz-text-muted">Try typing "taken" - the async validator will reject it after a 2-second delay.</p>
+  <div class="maz:mb-4">
+    <p class="maz:text-sm maz:text-muted">Try typing "taken" - the async validator will reject it after a 2-second delay.</p>
   </div>
-  <form class="maz-flex maz-gap-4" @submit="onSubmitAsync">
+  <form class="maz:flex maz:gap-4" @submit="onSubmitAsync">
     <MazInput
       ref="asyncUsernameRef"
       v-model="asyncUsername"
@@ -721,7 +721,7 @@ Use Valibot's `pipeAsync` and `checkAsync` for async validations like checking u
       :error="asyncUsernameHasError"
       :success="asyncUsernameValid"
       :loading="asyncUsernameValidating"
-      class="maz-flex-1"
+      class="maz:flex-1"
     />
     <MazBtn type="submit" :loading="asyncSubmitting">Submit</MazBtn>
   </form>
@@ -789,10 +789,10 @@ For expensive validations (like API calls), use throttling or debouncing to limi
 | `throttledFields` | Runs at most once per interval | 1000ms | Rate-limited APIs |
 
 <ComponentDemo>
-  <div class="maz-mb-4">
-    <p class="maz-text-sm maz-text-muted">Name has 500ms debounce, Age has 1000ms throttle. Watch the console to see validation timing.</p>
+  <div class="maz:mb-4">
+    <p class="maz:text-sm maz:text-muted">Name has 500ms debounce, Age has 1000ms throttle. Watch the console to see validation timing.</p>
   </div>
-  <form class="maz-flex maz-flex-col maz-gap-4" @submit="onSubmitDebounced">
+  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitDebounced">
     <MazInput
       v-model="debouncedModel.name"
       label="Name (debounced 500ms)"
@@ -842,7 +842,7 @@ const { model, errorMessages, fieldsStates, isSubmitting, handleSubmit } = useFo
 Use `resetForm()` to reset the form to its initial state, or set `resetOnSuccess` to automatically reset after successful submission.
 
 <ComponentDemo>
-  <form class="maz-flex maz-flex-col maz-gap-4" @submit="onSubmitReset">
+  <form class="maz:flex maz:flex-col maz:gap-4" @submit="onSubmitReset">
     <MazInput
       v-model="resetModel.name"
       label="Name"
@@ -858,7 +858,7 @@ Use `resetForm()` to reset the form to its initial state, or set `resetOnSuccess
       :error="resetStates.age.error"
       :success="resetStates.age.valid"
     />
-    <div class="maz-flex maz-gap-2">
+    <div class="maz:flex maz:gap-2">
       <MazBtn type="submit" :loading="resetSubmitting">Submit</MazBtn>
       <MazBtn type="button" color="destructive" @click="resetFormFn">Reset</MazBtn>
     </div>
@@ -1196,9 +1196,9 @@ const { value } = useFormField<string>('email', {
 
 <script lang="ts" setup>
 import { ref, useTemplateRef } from 'vue'
-import { useFormValidator } from 'maz-ui/src/composables/useFormValidator'
-import { useFormField } from 'maz-ui/src/composables/useFormField'
-import { useToast } from 'maz-ui/src/composables/useToast'
+import { useFormValidator } from 'maz-ui/composables/useFormValidator'
+import { useFormField } from 'maz-ui/composables/useFormField'
+import { useToast } from 'maz-ui/composables/useToast'
 import { sleep } from '@maz-ui/utils'
 import {
   string,

package/docs/src/composables/use-idle-timeout.md

@@ -44,7 +44,7 @@ A plugin to know the amount of time a user has spent on your website
   <br />
   <br />
 
-  <p class="maz-text-warning">Wait 5 seconds without any actions to see the dialog popup</p>
+  <p class="maz:text-warning">Wait 5 seconds without any actions to see the dialog popup</p>
 
 <template #code>
 
@@ -139,8 +139,8 @@ onBeforeUnmount(() => {
 <script lang="ts" setup>
   import { onMounted, ref, onBeforeUnmount } from 'vue'
 
-  import { useIdleTimeout } from 'maz-ui/src/composables/useIdleTimeout'
-  import { useDialog } from 'maz-ui/src/composables/useDialog'
+  import { useIdleTimeout } from 'maz-ui/composables/useIdleTimeout'
+  import { useDialog } from 'maz-ui/composables/useDialog'
 
   const dialog = useDialog()
 

package/docs/src/composables/use-reading-time.md

@@ -35,8 +35,8 @@ This method is not SSR friendly (only on client side, with Nuxt use this composa
 
 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">
+<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>
@@ -75,8 +75,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="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>
@@ -105,7 +105,7 @@ Time to read this page: <strong>{{ durationSelector }} minutes</strong>
 
 <script lang="ts" setup>
   import { ref, onMounted } from 'vue'
-  import { useReadingTime } from 'maz-ui/src/composables/useReadingTime'
+  import { useReadingTime } from 'maz-ui/composables/useReadingTime'
 
   const velocity = ref()
 

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

@@ -10,15 +10,15 @@ description: Efficient composable for string matching tasks, utilizing Levenshte
 ## Usage
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-4 maz-items-start maz-flex-wrap maz-mb-4">
+  <div class="maz:flex maz:gap-4 maz:items-start maz:flex-wrap maz:mb-4">
     <MazInput v-model="string1" label="Enter first string" />
     <MazInput v-model="string2" label="Enter second string" />
   </div>
 
-  <p class="!maz-mb-1">
+  <p class="maz:mb-1!">
     <b>isMatching:</b> {{ isMatching }}
   </p>
-  <p class="!maz-my-0">
+  <p class="maz:my-0!">
     <b>score:</b> {{ score }}
   </p>
 
@@ -54,7 +54,7 @@ const { score, isMatching } = useStringMatching(string1, string2)
 
 <script lang="ts" setup>
   import { ref } from 'vue'
-  import { useStringMatching } from 'maz-ui/src/composables/useStringMatching'
+  import { useStringMatching } from 'maz-ui/composables/useStringMatching'
 
   const string1 = ref<string>('maz-ui')
   const string2 = ref<string>('méz-ui')

package/docs/src/composables/use-swipe.md

@@ -26,7 +26,7 @@ You can use this information to implement specific interactions in your applicat
 <div ref="swipeContainer" class="swipe-container">
   <p>
     Swipe in any direction<br>
-    <span class="maz-text-xs maz-text-muted">
+    <span class="maz:text-xs maz:text-muted">
       (You should use a real device or a mobile simulator to test the swipe functionality)
     </span>
     <br><br>
@@ -73,7 +73,7 @@ onUnmounted(() => {
   <div ref="swipeContainer" class="swipe-container">
     <p>
       Swipe in any direction<br>
-      <span class="maz-text-sm maz-text-muted">
+      <span class="maz:text-sm maz:text-muted">
         (You should use a real device or a mobile simulator to test the swipe functionality)
       </span>
       <br><br>
@@ -97,7 +97,7 @@ onUnmounted(() => {
 ```
 
 <script lang="ts" setup>
-import { useSwipe } from 'maz-ui/src/composables/useSwipe'
+import { useSwipe } from 'maz-ui/composables/useSwipe'
 import { onMounted, onUnmounted, ref } from 'vue'
 
 const swipeContainer = ref<HTMLDivElement>()

package/docs/src/composables/use-timer.md

@@ -25,7 +25,7 @@ This composable can be used in Vue components to handle timeouts in a flexible a
 
 **Remaning time**: {{ remainingTime }}ms
 
-<div class="maz-flex maz-items-center maz-gap-2">
+<div class="maz:flex maz:items-center maz:gap-2">
   <MazBtn @click="start">
     Start
   </MazBtn>
@@ -41,8 +41,8 @@ This composable can be used in Vue components to handle timeouts in a flexible a
 </div>
 
 <script lang="ts" setup>
-  import { useTimer } from 'maz-ui/src/composables/useTimer'
-  import { useToast } from 'maz-ui/src/composables/useToast'
+  import { useTimer } from 'maz-ui/composables/useTimer'
+  import { useToast } from 'maz-ui/composables/useToast'
 
   const toast = useToast()
 

package/docs/src/composables/use-toast.md

@@ -44,7 +44,7 @@ toast.error('error message')
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { useToast } from 'maz-ui/src/composables/useToast'
+  import { useToast } from 'maz-ui/composables/useToast'
 
   const toast = useToast()
 

package/docs/src/composables/use-user-visibility.md

@@ -91,7 +91,7 @@ onBeforeUnmount(() => {
 <script lang="ts" setup>
   import { onMounted, ref, onBeforeUnmount } from 'vue'
 
-  import { useUserVisibility } from 'maz-ui/src/composables/useUserVisibility'
+  import { useUserVisibility } from 'maz-ui/composables/useUserVisibility'
 
   const events = ref([])
 

package/docs/src/composables/use-wait.md

@@ -49,8 +49,8 @@ onMounted(async () => {
 
 <script lang="ts" setup>
   import { onMounted } from 'vue'
-  import { sleep } from 'maz-ui/src/index'
-  import { useWait } from 'maz-ui/src/composables/useWait'
+  import { sleep } from '@maz-ui/utils'
+  import { useWait } from 'maz-ui/composables/useWait'
 
   const wait = useWait()
 

package/docs/src/directives/click-outside.md

@@ -11,8 +11,8 @@ description: vClickOutside is a Vue directive to trigger a function when the use
 
 <ComponentDemo>
   <div
-    style="padding: 50px; background-color: hsl(var(--maz-background-300));"
-    class="maz-flex maz-flex-center maz-rounded"
+    style="padding: 50px; background-color: var(--maz-surface-300);"
+    class="maz:flex maz:flex-center maz:rounded-md"
   >
     <MazCard v-click-outside="clikedOutside">
       Click outside me
@@ -21,8 +21,8 @@ description: vClickOutside is a Vue directive to trigger a function when the use
 
   <div
     v-if="hasClikedOutside"
-    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-success)); color: black;"
-    class="maz-flex maz-flex-center maz-rounded"
+    style="padding: 16px; margin-top: 16px; background-color: var(--maz-success); color: black;"
+    class="maz:flex maz:flex-center maz:rounded-md"
   >
     You clicked outside
   </div>
@@ -44,7 +44,7 @@ function clikedOutside() {
 
 <template>
   <div
-    style="padding: 50px; background-color: hsl(var(--maz-background-300));"
+    style="padding: 50px; background-color: var(--maz-surface-300);"
     class="flex flex-center rounded"
   >
     <MazCard v-click-outside="clikedOutside">
@@ -54,7 +54,7 @@ function clikedOutside() {
 
   <div
     v-if="hasClikedOutside"
-    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-success)); color: black;"
+    style="padding: 16px; margin-top: 16px; background-color: var(--maz-success); color: black;"
     class="flex flex-center rounded"
   >
     You clicked outside
@@ -71,13 +71,13 @@ The directive can accept an options object to customize its behavior:
 
 <ComponentDemo>
   <div
-    style="padding: 50px; background-color: hsl(var(--maz-background-300));"
-    class="maz-flex maz-flex-center maz-rounded"
+    style="padding: 50px; background-color: var(--maz-surface-300);"
+    class="maz:flex maz:flex-center maz:rounded-md"
   >
     <MazCard v-click-outside="{ callback: clickedOutsideWithIgnore, ignore: ['.ignore-me'] }">
-      <div class="maz-p-4">
+      <div class="maz:p-4">
         <p>Click outside me (but not on the button below)</p>
-        <MazBtn class="ignore-me maz-mt-2" color="secondary">
+        <MazBtn class="ignore-me maz:mt-2" color="secondary">
           This button is ignored
         </MazBtn>
       </div>
@@ -86,8 +86,8 @@ The directive can accept an options object to customize its behavior:
 
   <div
     v-if="hasClickedOutsideWithIgnore"
-    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-warning)); color: black;"
-    class="maz-flex maz-flex-center maz-rounded"
+    style="padding: 16px; margin-top: 16px; background-color: var(--maz-warning); color: black;"
+    class="maz:flex maz:flex-center maz:rounded-md"
   >
     You clicked outside (button clicks are ignored)
   </div>
@@ -128,8 +128,8 @@ The directive can be configured to trigger only once:
 
 <ComponentDemo>
   <div
-    style="padding: 50px; background-color: hsl(var(--maz-background-300));"
-    class="maz-flex maz-flex-center maz-rounded"
+    style="padding: 50px; background-color: var(--maz-surface-300);"
+    class="maz:flex maz:flex-center maz:rounded-md"
   >
     <MazCard v-click-outside="{ callback: clickedOnce, once: true }">
       Click outside me (works only once)
@@ -138,8 +138,8 @@ The directive can be configured to trigger only once:
 
   <div
     v-if="hasClickedOnce"
-    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-info)); color: white;"
-    class="maz-flex maz-flex-center maz-rounded"
+    style="padding: 16px; margin-top: 16px; background-color: var(--maz-info); color: white;"
+    class="maz:flex maz:flex-center maz:rounded-md"
   >
     This will only show once!
   </div>
@@ -253,7 +253,7 @@ Please refer to the [Nuxt module documentation](./../guide/nuxt.md) for more inf
 
 <script lang="ts" setup>
   import { ref } from 'vue'
-  import { vClickOutside } from 'maz-ui/src/directives/vClickOutside'
+  import { vClickOutside } from 'maz-ui/directives/vClickOutside'
 
   const hasClikedOutside = ref(false)
   const hasClickedOutsideWithIgnore = ref(false)

package/docs/src/directives/lazy-img.md

@@ -10,7 +10,7 @@ description: vLazyImg is a Vue directive to lazy load images with many options.
 ## Basic usage
 
 <img
-  style="background-color: hsl(var(--maz-background-300)); width: 80%;"
+  style="background-color: var(--maz-surface-300); width: 80%;"
   class="flex flex-center rounded"
   v-lazy-img="'https://placedog.net/1500/1000'"
 />
@@ -23,7 +23,7 @@ import { vLazyImg } from 'maz-ui/directives'
 <template>
   <img
     v-lazy-img="'https://placedog.net/1500/1000'"
-    style="background-color: hsl(var(--maz-background-300)); width: 80%;"
+    style="background-color: var(--maz-surface-300); width: 80%;"
     class="flex flex-center rounded"
   >
 </template>
@@ -54,7 +54,7 @@ import { vLazyImg } from 'maz-ui/directives'
 > Open the developer console to show logs
 
 <img
-  style="background-color: hsl(var(--maz-background-300)); width: 80%;"
+  style="background-color: var(--maz-surface-300); width: 80%;"
   class="flex flex-center rounded"
   v-lazy-img="lazyBinding"
 />
@@ -83,7 +83,7 @@ const lazyBinding: vLazyImgBindingValue = {
 <template>
   <img
     v-lazy-img="lazyBinding"
-    style="background-color: hsl(var(--maz-background-300)); width: 80%;"
+    style="background-color: var(--maz-surface-300); width: 80%;"
     class="flex flex-center rounded"
   >
 </template>
@@ -163,7 +163,7 @@ export type vLazyImgBindingValue = string | vLazyImgBindingOptions
 ```
 
 <script lang="ts" setup>
-  import { vLazyImg, type vLazyImgBindingValue } from 'maz-ui/src/directives/vLazyImg'
+  import { vLazyImg, type vLazyImgBindingValue } from 'maz-ui/directives/vLazyImg'
   import { ref } from 'vue'
 
   const lazyBinding: vLazyImgBindingValue = {

package/docs/src/directives/tooltip.md

@@ -11,11 +11,11 @@ description: vTooltip is a Vue directive to display a text when the user hovers
 ## Basic usage
 
 <ComponentDemo>
-  <p class="maz-mb-4">
+  <p class="maz:mb-4">
     Hover the buttons
   </p>
   <div
-    class="maz-flex maz-gap-3 maz-flex-wrap"
+    class="maz:flex maz:gap-3 maz:flex-wrap"
   >
     <MazBtn v-tooltip="'This is a top tooltip'">
       Top
@@ -60,11 +60,11 @@ import { vTooltip } from 'maz-ui/directives'
 ## Colors
 
 <ComponentDemo>
-  <p class="maz-mb-4">
+  <p class="maz:mb-4">
     Hover the buttons
   </p>
   <div
-    class="maz-flex maz-gap-3 maz-flex-wrap"
+    class="maz:flex maz:gap-3 maz:flex-wrap"
   >
     <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'primary' }">
       Primary
@@ -90,7 +90,7 @@ import { vTooltip } from 'maz-ui/directives'
     <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'contrast' }" color="contrast">
       Contrast
     </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'background' }" color="background">
+    <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'surface' }" color="surface">
       Background
     </MazBtn>
   </div>
@@ -130,7 +130,7 @@ import { vTooltip } from 'maz-ui/directives'
   Contrast
 </MazBtn>
 
-<MazBtn v-tooltip="{ text: 'Tooltip text', color: 'default' }" color="background">
+<MazBtn v-tooltip="{ text: 'Tooltip text', color: 'default' }" color="surface">
   Background
 </MazBtn>
 ```
@@ -144,7 +144,7 @@ You can change the position of the tooltip by passing a `position` option or usi
 
 <ComponentDemo>
   <div
-    class="maz-flex maz-gap-3 maz-flex-wrap"
+    class="maz:flex maz:gap-3 maz:flex-wrap"
   >
     <MazBtn v-tooltip.bottom="{ text: 'Tooltip text' }">
       Bottom
@@ -230,7 +230,7 @@ You can also use HTML content in the tooltip by passing a string to the `html` o
 
 <ComponentDemo>
   <div
-    class="maz-flex maz-gap-3 maz-flex-wrap"
+    class="maz:flex maz:gap-3 maz:flex-wrap"
   >
     <MazBtn v-tooltip="{ html: '<strong>Tooltip</strong> text <br> with <br> line breaks' }">
       HTML
@@ -254,9 +254,9 @@ You can customize the tooltip by passing a `panelClass` or `panelStyle` option.
 
 <ComponentDemo>
   <div
-    class="maz-flex maz-gap-3 maz-flex-wrap"
+    class="maz:flex maz:gap-3 maz:flex-wrap"
   >
-    <MazBtn v-tooltip="{ text: 'Custom panel class', panelClass: '!maz-text-red-500' }">
+    <MazBtn v-tooltip="{ text: 'Custom panel class', panelClass: 'maz:text-red-500!' }">
       panelClass
     </MazBtn>
     <MazBtn v-tooltip="{ text: 'Custom panel style', panelStyle: 'background-color: red; color: white;' }">
@@ -267,7 +267,7 @@ You can customize the tooltip by passing a `panelClass` or `panelStyle` option.
 <template #code>
 
 ```html
-<MazBtn v-tooltip="{ text: 'Custom panel class', panelClass: '!maz-text-red-500' }">
+<MazBtn v-tooltip="{ text: 'Custom panel class', panelClass: 'maz:text-red-500!' }">
   panelClass
 </MazBtn>
 <MazBtn v-tooltip="{ text: 'Custom panel style', panelStyle: 'background-color: red; color: white;' }">
@@ -288,7 +288,7 @@ The `adaptive` trigger will use the `click` trigger on touch devices (mobile and
 
 <ComponentDemo>
   <div
-    class="maz-flex maz-gap-3 maz-flex-wrap"
+    class="maz:flex maz:gap-3 maz:flex-wrap"
   >
     <MazBtn v-tooltip="{ text: 'Tooltip text', trigger: 'click' }">
       Click
@@ -326,7 +326,7 @@ The `offset` (in px) option allows you to adjust the position of the tooltip rel
 
 <ComponentDemo>
   <div
-    class="maz-flex maz-gap-3 maz-flex-wrap"
+    class="maz:flex maz:gap-3 maz:flex-wrap"
   >
     <MazBtn v-tooltip="{ text: 'Tooltip text', offset: 0 }">
       0
@@ -368,7 +368,7 @@ The `offset` (in px) option allows you to adjust the position of the tooltip rel
 ## Open programmatically
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-3 maz-flex-wrap">
+  <div class="maz:flex maz:gap-3 maz:flex-wrap">
     <MazBtn v-tooltip.top="{ text: 'Tooltip text', open: open }">
       Primary
     </MazBtn>
@@ -475,6 +475,6 @@ type VTooltipBindingValue
 
 <script lang="ts" setup>
   import { ref } from 'vue'
-  import { vTooltip } from 'maz-ui/src/directives/vTooltip'
+  import { vTooltip } from 'maz-ui/directives/vTooltip'
   const open = ref(true)
 </script>

package/docs/src/directives/zoom-img.md

@@ -56,7 +56,7 @@ import { vZoomImg } from 'maz-ui/directives'
 </MazCard>
 
 <script lang="ts" setup>
-  import { vZoomImg } from 'maz-ui/src/directives/vZoomImg'
+  import { vZoomImg } from 'maz-ui/directives/vZoomImg'
 
   const zoomImgBinding: vZoomImgBinding = {
     src: 'https://placedog.net/1200/800',