@maz-ui/mcp 4.9.1 → 5.0.0-beta.0

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

@@ -13,13 +13,13 @@ description: MazTabs is a standalone component to display content in tabs with a
   <MazTabsBar :items="tabs" />
 
   <MazTabsContent>
-    <MazTabsContentItem :tab="1" class="maz-py-4">
+    <MazTabsContentItem :tab="1" class="maz:py-4">
       Tab 1
     </MazTabsContentItem>
-    <MazTabsContentItem :tab="2" class="maz-py-4">
+    <MazTabsContentItem :tab="2" class="maz:py-4">
       Tab 2
     </MazTabsContentItem>
-    <MazTabsContentItem :tab="3" class="maz-py-4">
+    <MazTabsContentItem :tab="3" class="maz:py-4">
       Tab 3
     </MazTabsContentItem>
   </MazTabsContent>
@@ -41,13 +41,13 @@ const tabs: MazTabsBarItem[] = [
     <MazTabsBar :items="tabs" />
 
     <MazTabsContent>
-      <MazTabsContentItem :tab="1" class="maz-py-4">
+      <MazTabsContentItem :tab="1" class="maz:py-4">
         Tab 1
       </MazTabsContentItem>
-      <MazTabsContentItem :tab="2" class="maz-py-4">
+      <MazTabsContentItem :tab="2" class="maz:py-4">
         Tab 2
       </MazTabsContentItem>
-      <MazTabsContentItem :tab="3" class="maz-py-4">
+      <MazTabsContentItem :tab="3" class="maz:py-4">
         Tab 3
       </MazTabsContentItem>
     </MazTabsContent>
@@ -61,13 +61,13 @@ const tabs: MazTabsBarItem[] = [
   <MazTabsBar :items="tabs" />
 
   <MazTabsContent>
-    <MazTabsContentItem :tab="1" class="maz-py-4">
+    <MazTabsContentItem :tab="1" class="maz:py-4">
       Tab 1
     </MazTabsContentItem>
-    <MazTabsContentItem :tab="2" class="maz-py-4">
+    <MazTabsContentItem :tab="2" class="maz:py-4">
       Tab 2
     </MazTabsContentItem>
-    <MazTabsContentItem :tab="3" class="maz-py-4">
+    <MazTabsContentItem :tab="3" class="maz:py-4">
       Tab 3
     </MazTabsContentItem>
   </MazTabsContent>
@@ -95,13 +95,13 @@ const tabs: MazTabsBarItem[] = ['First Tab', 'Second Tab', 'Third Tab']
     <MazTabsBar :items="tabs" />
 
     <MazTabsContent>
-      <MazTabsContentItem :tab="1" class="maz-py-4">
+      <MazTabsContentItem :tab="1" class="maz:py-4">
         Tab 1
       </MazTabsContentItem>
-      <MazTabsContentItem :tab="2" class="maz-py-4">
+      <MazTabsContentItem :tab="2" class="maz:py-4">
         Tab 2
       </MazTabsContentItem>
-      <MazTabsContentItem :tab="3" class="maz-py-4">
+      <MazTabsContentItem :tab="3" class="maz:py-4">
         Tab 3
       </MazTabsContentItem>
     </MazTabsContent>
@@ -129,13 +129,13 @@ You can choose the name of this query parameter with the props `query-param` `@d
   <MazTabsBar :items="tabs2" persistent />
 
   <MazTabsContent>
-    <MazTabsContentItem :tab="1" class="maz-py-4">
+    <MazTabsContentItem :tab="1" class="maz:py-4">
       Tab 1
     </MazTabsContentItem>
-    <MazTabsContentItem :tab="2" class="maz-py-4">
+    <MazTabsContentItem :tab="2" class="maz:py-4">
       Tab 2
     </MazTabsContentItem>
-    <MazTabsContentItem :tab="3" class="maz-py-4">
+    <MazTabsContentItem :tab="3" class="maz:py-4">
       Tab 3
     </MazTabsContentItem>
   </MazTabsContent>
@@ -148,7 +148,7 @@ You can choose the name of this query parameter with the props `query-param` `@d
     <template #item="{ item, index, active }">
       {{ item.label }}
       <MazBadge
-        size="0.6rem"
+        size="mini"
         rounded-size="full"
         :color="active ? 'primary' : 'transparent'"
       >
@@ -164,7 +164,7 @@ You can choose the name of this query parameter with the props `query-param` `@d
     <template #item="{ item, index, active }">
       {{ item.label }}
 
-      <MazBadge size="0.6rem" rounded-size="full" :color="active ? 'primary' : 'transparent'"> {{ index }} </MazBadge>
+      <MazBadge size="mini" rounded-size="full" :color="active ? 'primary' : 'transparent'"> {{ index }} </MazBadge>
     </template>
   </MazTabsBar>
 </MazTabs>

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

@@ -78,8 +78,8 @@ You can use the `label` and `append` slots to customize the label and the append
     name="comment"
   >
     <template #label>
-      <MazIcon name="envelope" class="maz-text-xl" />
-      <span class="maz-ms-2">
+      <MazIcon icon="/envelope.svg" class="maz:text-xl" />
+      <span class="maz:ms-2">
         The custom label
       </span>
     </template>
@@ -113,8 +113,8 @@ function sendMessage() {
     name="comment"
   >
     <template #label>
-      <MazIcon name="envelope" class="maz-text-xl" />
-      <span class="maz-ms-2">
+      <MazIcon icon="/envelope.svg" class="maz:text-xl" />
+      <span class="maz:ms-2">
         The custom label
       </span>
     </template>
@@ -133,7 +133,7 @@ function sendMessage() {
 You can use the `hint` attribute to display a hint message. This will replace the label.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazTextarea
       v-model="value"
       name="comment"
@@ -161,7 +161,7 @@ You can use the `hint` attribute to display a hint message. This will replace th
       hint="This is a hint message"
       warning
     />
-    <hr class="maz-my-4">
+    <hr class="maz:my-4">
     <MazTextarea
       v-model="value"
       name="comment"
@@ -222,7 +222,7 @@ You can use the `hint` attribute to display a hint message. This will replace th
     hint="This is a hint message"
     warning
   />
-  <hr class="maz-my-4">
+  <hr class="maz:my-4">
   <MazTextarea
     v-model="value"
     name="comment"
@@ -300,7 +300,7 @@ By default, the textarea automatically expands as the user types. You can disabl
 
 <script lang="ts" setup>
   import { ref } from 'vue'
-  import { useToast } from 'maz-ui/src/composables/useToast'
+  import { useToast } from 'maz-ui/composables/useToast'
 
   const mainValue = ref()
   const value = ref()

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

@@ -46,25 +46,25 @@ description: MazTicker is a scrolling ticker component that continuously animate
 A vertical ticker with images, similar to a screenshot showcase. Uses `orientation="vertical"` with `pause-on-hover` for user-friendly browsing.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-4 maz-overflow-hidden" style="height: 300px">
+  <div class="maz:flex maz:gap-4 maz:overflow-hidden" style="height: 300px">
     <MazTicker orientation="vertical" :overlay="false" :duration="30" pause-on-hover>
       <img
         v-for="i in 4" :key="i" :src="`https://picsum.photos/seed/maz-ticker-${i}/400/225`"
-        :alt="`Screenshot ${i}`" class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
+        :alt="`Screenshot ${i}`" class="maz:rounded-lg maz:border maz:border-gray-200 maz:object-cover maz:dark:border-gray-700"
         style="width: 400px; height: 225px"
       />
     </MazTicker>
     <MazTicker orientation="vertical" :overlay="false" :duration="30" reverse pause-on-hover>
       <img
         v-for="i in 4" :key="i" :src="`https://picsum.photos/seed/maz-ticker-${i + 4}/400/225`"
-        :alt="`Screenshot ${i + 4}`" class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
+        :alt="`Screenshot ${i + 4}`" class="maz:rounded-lg maz:border maz:border-gray-200 maz:object-cover maz:dark:border-gray-700"
         style="width: 400px; height: 225px"
       />
     </MazTicker>
-    <MazTicker class="maz-hidden md:maz-flex" orientation="vertical" :overlay="false" :duration="30" pause-on-hover>
+    <MazTicker class="maz:hidden maz:md:flex" orientation="vertical" :overlay="false" :duration="30" pause-on-hover>
       <img
         v-for="i in 4" :key="i" :src="`https://picsum.photos/seed/maz-ticker-${i + 8}/400/225`"
-        :alt="`Screenshot ${i + 8}`" class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
+        :alt="`Screenshot ${i + 8}`" class="maz:rounded-lg maz:border maz:border-gray-200 maz:object-cover maz:dark:border-gray-700"
         style="width: 400px; height: 225px"
       />
     </MazTicker>
@@ -74,7 +74,7 @@ A vertical ticker with images, similar to a screenshot showcase. Uses `orientati
 
 ```vue
 <template>
-  <div class="maz-flex maz-gap-4 maz-overflow-hidden" style="height: 300px">
+  <div class="maz:flex maz:gap-4 maz:overflow-hidden" style="height: 300px">
     <MazTicker
       orientation="vertical"
       :overlay="false"
@@ -86,7 +86,7 @@ A vertical ticker with images, similar to a screenshot showcase. Uses `orientati
         :key="i"
         :src="`https://picsum.photos/seed/maz-ticker-${i}/400/225`"
         :alt="`Screenshot ${i}`"
-        class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
+        class="maz:rounded-lg maz:border maz:border-gray-200 maz:object-cover maz:dark:border-gray-700"
         style="width: 400px; height: 225px"
       />
     </MazTicker>
@@ -102,12 +102,12 @@ A vertical ticker with images, similar to a screenshot showcase. Uses `orientati
         :key="i"
         :src="`https://picsum.photos/seed/maz-ticker-${i + 4}/400/225`"
         :alt="`Screenshot ${i + 4}`"
-        class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
+        class="maz:rounded-lg maz:border maz:border-gray-200 maz:object-cover maz:dark:border-gray-700"
         style="width: 400px; height: 225px"
       />
     </MazTicker>
     <MazTicker
-      class="maz-hidden md:maz-flex"
+      class="maz:hidden maz:md:flex"
       orientation="vertical"
       :overlay="false"
       :duration="30"
@@ -118,7 +118,7 @@ A vertical ticker with images, similar to a screenshot showcase. Uses `orientati
         :key="i"
         :src="`https://picsum.photos/seed/maz-ticker-${i + 8}/400/225`"
         :alt="`Screenshot ${i + 8}`"
-        class="maz-rounded-lg maz-border maz-border-gray-200 maz-object-cover dark:maz-border-gray-700"
+        class="maz:rounded-lg maz:border maz:border-gray-200 maz:object-cover maz:dark:border-gray-700"
         style="width: 400px; height: 225px"
       />
     </MazTicker>
@@ -138,8 +138,8 @@ A vertical ticker with images, similar to a screenshot showcase. Uses `orientati
 Create an eye-catching 3D perspective effect with tilted vertical tickers, inspired by the Nuxt UI Marquee screenshots demo.
 
 <ComponentDemo>
-  <div class="maz-overflow-hidden maz-rounded-lg maz-bg-gray-100 dark:maz-bg-gray-800" style="height: 400px; perspective: 1500px">
-    <div class="maz-flex maz-gap-4" style="height: 900px; margin-top: -300px; margin-left: -150px; transform: rotateX(55deg) rotateZ(30deg); transform-origin: center center">
+  <div class="maz:overflow-hidden maz:rounded-lg maz:bg-gray-100 maz:dark:bg-gray-800" style="height: 400px; perspective: 1500px">
+    <div class="maz:flex maz:gap-4" style="height: 900px; margin-top: -300px; margin-left: -150px; transform: rotateX(55deg) rotateZ(30deg); transform-origin: center center">
       <MazTicker reverse orientation="vertical" :overlay="false" :duration="40" style="width: 300px; flex-shrink: 0">
         <img
           v-for="i in 4"
@@ -149,7 +149,7 @@ Create an eye-catching 3D perspective effect with tilted vertical tickers, inspi
           width="460"
           height="258"
           loading="lazy"
-          class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
+          class="maz:rounded-lg maz:border maz:border-gray-200 maz:bg-white maz:object-cover maz:dark:border-gray-700"
           style="width: 300px; height: 168px"
         />
       </MazTicker>
@@ -162,7 +162,7 @@ Create an eye-catching 3D perspective effect with tilted vertical tickers, inspi
           width="460"
           height="258"
           loading="lazy"
-          class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
+          class="maz:rounded-lg maz:border maz:border-gray-200 maz:bg-white maz:object-cover maz:dark:border-gray-700"
           style="width: 300px; height: 168px"
         />
       </MazTicker>
@@ -175,7 +175,7 @@ Create an eye-catching 3D perspective effect with tilted vertical tickers, inspi
           width="460"
           height="258"
           loading="lazy"
-          class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
+          class="maz:rounded-lg maz:border maz:border-gray-200 maz:bg-white maz:object-cover maz:dark:border-gray-700"
           style="width: 300px; height: 168px"
         />
       </MazTicker>
@@ -187,11 +187,11 @@ Create an eye-catching 3D perspective effect with tilted vertical tickers, inspi
 ```vue
 <template>
   <div
-    class="maz-overflow-hidden maz-rounded-lg maz-bg-gray-100 dark:maz-bg-gray-800"
+    class="maz:overflow-hidden maz:rounded-lg maz:bg-gray-100 maz:dark:bg-gray-800"
     style="height: 400px; perspective: 1500px"
   >
     <div
-      class="maz-flex maz-gap-4"
+      class="maz:flex maz:gap-4"
       style="height: 900px; margin-top: -300px; margin-left: -150px; transform: rotateX(55deg) rotateZ(30deg); transform-origin: center center"
     >
       <MazTicker
@@ -209,7 +209,7 @@ Create an eye-catching 3D perspective effect with tilted vertical tickers, inspi
           width="460"
           height="258"
           loading="lazy"
-          class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
+          class="maz:rounded-lg maz:border maz:border-gray-200 maz:bg-white maz:object-cover maz:dark:border-gray-700"
           style="width: 300px; height: 168px"
         />
       </MazTicker>
@@ -227,7 +227,7 @@ Create an eye-catching 3D perspective effect with tilted vertical tickers, inspi
           width="460"
           height="258"
           loading="lazy"
-          class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
+          class="maz:rounded-lg maz:border maz:border-gray-200 maz:bg-white maz:object-cover maz:dark:border-gray-700"
           style="width: 300px; height: 168px"
         />
       </MazTicker>
@@ -246,7 +246,7 @@ Create an eye-catching 3D perspective effect with tilted vertical tickers, inspi
           width="460"
           height="258"
           loading="lazy"
-          class="maz-rounded-lg maz-border maz-border-gray-200 maz-bg-white maz-object-cover dark:maz-border-gray-700"
+          class="maz:rounded-lg maz:border maz:border-gray-200 maz:bg-white maz:object-cover maz:dark:border-gray-700"
           style="width: 300px; height: 168px"
         />
       </MazTicker>
@@ -297,9 +297,9 @@ Otherwise, the ticker will scroll vertically.
 <ComponentDemo>
   <div style="height: 100px">
     <MazTicker orientation="vertical">
-      <div class="maz-py-2">Item 1</div>
-      <div class="maz-py-2">Item 2</div>
-      <div class="maz-py-2">Item 3</div>
+      <div class="maz:py-2">Item 1</div>
+      <div class="maz:py-2">Item 2</div>
+      <div class="maz:py-2">Item 3</div>
     </MazTicker>
   </div>
 
@@ -309,9 +309,9 @@ Otherwise, the ticker will scroll vertically.
 <template>
   <div style="height: 100px">
     <MazTicker orientation="vertical">
-      <div class="maz-py-2">Item 1</div>
-      <div class="maz-py-2">Item 2</div>
-      <div class="maz-py-2">Item 3</div>
+      <div class="maz:py-2">Item 1</div>
+      <div class="maz:py-2">Item 2</div>
+      <div class="maz:py-2">Item 3</div>
     </MazTicker>
   </div>
 </template>
@@ -323,7 +323,7 @@ Otherwise, the ticker will scroll vertically.
 ## Reverse direction
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazTicker>
       <span>Normal direction</span>
     </MazTicker>
@@ -353,7 +353,7 @@ Otherwise, the ticker will scroll vertically.
 Control the animation speed with the `duration` prop (in seconds). Lower values = faster.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazTicker :duration="5" :repeat="20">
       <span>Fast (5s)</span>
     </MazTicker>
@@ -389,7 +389,7 @@ Control the animation speed with the `duration` prop (in seconds). Lower values
 The `repeat` prop controls how many times the content is duplicated to create a seamless loop. The default value is `4`. Increase it when your content is short to avoid visible gaps during the animation.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazTicker :repeat="2">
       <span>Repeat 2</span>
     </MazTicker>
@@ -417,7 +417,7 @@ The `repeat` prop controls how many times the content is duplicated to create a
 ## Custom gap
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazTicker gap="0.5rem" :repeat="20">
       <span>Small gap</span>
     </MazTicker>
@@ -471,7 +471,7 @@ You can disable the overlay by setting the `overlay` prop to `false`.
 You can change the size of the overlay by setting the `overlay-size` prop to a CSS value.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazTicker overlay-size="10%" :repeat="10">
       <span>Small overlay (10%)</span>
     </MazTicker>
@@ -551,7 +551,7 @@ When a child element is focused, the animation will pause.
 You can control the animation programmatically with the `paused` prop.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazBtn size="sm" @click="isPaused = !isPaused">
       {{ isPaused ? 'Resume' : 'Pause' }}
     </MazBtn>
@@ -628,11 +628,11 @@ Replace the default before and after slots with custom content.
 <ComponentDemo>
   <MazTicker>
     <template #before>
-      <div class="maz-flex maz-items-center maz-px-4 maz-font-semibold">Latest:</div>
+      <div class="maz:flex maz:items-center maz:px-4 maz:font-semibold">Latest:</div>
     </template>
     <span>Breaking news item</span>
     <template #after>
-      <div class="maz-flex maz-items-center maz-px-4 maz-font-semibold">End</div>
+      <div class="maz:flex maz:items-center maz:px-4 maz:font-semibold">End</div>
     </template>
   </MazTicker>
 
@@ -642,11 +642,11 @@ Replace the default before and after slots with custom content.
 <template>
   <MazTicker>
     <template #before>
-      <div class="maz-flex maz-items-center maz-px-4 maz-font-semibold">Latest:</div>
+      <div class="maz:flex maz:items-center maz:px-4 maz:font-semibold">Latest:</div>
     </template>
     <span>Breaking news item</span>
     <template #after>
-      <div class="maz-flex maz-items-center maz-px-4 maz-font-semibold">End</div>
+      <div class="maz:flex maz:items-center maz:px-4 maz:font-semibold">End</div>
     </template>
   </MazTicker>
 </template>
@@ -658,7 +658,7 @@ Replace the default before and after slots with custom content.
 ## Timing function
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazTicker animation-timing-function="linear" :repeat="10">
       <span>Linear (default)</span>
     </MazTicker>

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

@@ -100,7 +100,7 @@ The default direction is `'auto'`, which switches from horizontal to vertical ba
 Use the `color` prop to change the theme color.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-6">
+  <div class="maz:flex maz:flex-col maz:gap-6">
     <MazTimeline v-for="color in colors" :key="color" :model-value="1" :steps="colorSteps" :color="color" direction="horizontal" />
   </div>
 
@@ -125,7 +125,7 @@ Use the `color` prop to change the theme color.
 Use the `size` prop to change the indicator size.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-6">
+  <div class="maz:flex maz:flex-col maz:gap-6">
     <MazTimeline v-for="size in sizes" :key="size" :model-value="1" :steps="colorSteps" :size="size" direction="horizontal" />
   </div>
 
@@ -273,7 +273,7 @@ By default, completed steps show a checkmark. Disable this with `:auto-validate-
 Customize the indicator border radius with the `rounded-size` prop.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-6">
+  <div class="maz:flex maz:flex-col maz:gap-6">
     <MazTimeline v-for="rounded in roundedSizes" :key="rounded" :model-value="1" :steps="colorSteps" :rounded-size="rounded" direction="horizontal" />
   </div>
 
@@ -325,9 +325,9 @@ MazTimeline provides scoped slots for full customization.
 <ComponentDemo>
   <MazTimeline v-model="currentStep" :steps="steps" direction="horizontal">
     <template #content="{ step, index, state }">
-      <div class="maz-text-center">
+      <div class="maz:text-center">
         <strong>{{ step.title }}</strong>
-        <p class="maz-text-muted maz-text-sm maz-m-0">Step {{ index + 1 }} - {{ state }}</p>
+        <p class="maz:text-muted maz:text-sm maz:m-0">Step {{ index + 1 }} - {{ state }}</p>
       </div>
     </template>
   </MazTimeline>
@@ -338,9 +338,9 @@ MazTimeline provides scoped slots for full customization.
 <template>
   <MazTimeline v-model="currentStep" :steps="steps">
     <template #content="{ step, index, state }">
-      <div class="maz-text-center">
+      <div class="maz:text-center">
         <strong>{{ step.title }}</strong>
-        <p class="maz-text-muted maz-text-sm maz-m-0">
+        <p class="maz:text-muted maz:text-sm maz:m-0">
           Step {{ index + 1 }} - {{ state }}
         </p>
       </div>
@@ -357,7 +357,7 @@ MazTimeline provides scoped slots for full customization.
 <ComponentDemo>
   <MazTimeline v-model="currentStep" :steps="steps" direction="horizontal">
     <template #connector="{ index, state }">
-      <div class="maz-text-center maz-text-xs maz-text-muted">---</div>
+      <div class="maz:text-center maz:text-xs maz:text-muted">---</div>
     </template>
   </MazTimeline>
 
@@ -367,7 +367,7 @@ MazTimeline provides scoped slots for full customization.
 <template>
   <MazTimeline v-model="currentStep" :steps="steps">
     <template #connector="{ index, state }">
-      <div class="maz-text-center maz-text-xs maz-text-muted">---</div>
+      <div class="maz:text-center maz:text-xs maz:text-muted">---</div>
     </template>
   </MazTimeline>
 </template>

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

@@ -64,7 +64,7 @@ function openDialog() {
 </ComponentDemo>
 
 <script lang="ts" setup>
-  import { useDialog, useToast } from 'maz-ui/src/composables/index'
+  import { useDialog, useToast } from 'maz-ui/composables'
 
   const dialog = useDialog()
   const toast = useToast()

package/docs/src/composables/use-display-names.md

@@ -31,7 +31,7 @@ Depending on your environment (client or node server) and the browser you are us
 To see `useDisplayNames` in action, you can try out the following demo. This demo showcases how to use the composable to fetch and display localized language names dynamically based on user input.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4 maz-items-start">
+  <div class="maz:flex maz:flex-col maz:gap-4 maz:items-start">
     <MazSelect
       v-model="selectedLocale"
       label="Select a locale"
@@ -164,7 +164,7 @@ function getAllDisplayNames(options: {
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
-import { useDisplayNames } from 'maz-ui/src/composables/useDisplayNames.js'
+import { useDisplayNames } from 'maz-ui/composables/useDisplayNames'
 
 const selectedLocale = ref('en-US')
 const code = ref('fr-FR')