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

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

@@ -36,12 +36,12 @@ head:
       style="min-width: 250px;"
     >
       <template #content-title>
-        <h4 class="maz-m-0">
+        <h4 class="maz:m-0">
           Doggo
         </h4>
       </template>
       <template #content-body>
-        <p class="maz-text-muted" style="margin-bottom: 0;">
+        <p class="maz:text-muted" style="margin-bottom: 0;">
           It's a beautifull doggo, no ?
         </p>
       </template>
@@ -69,12 +69,12 @@ import MazCard from 'maz-ui/components/MazCard'
       style="min-width: 250px;"
     >
       <template #title>
-        <h4 class="maz-m-0">
+        <h4 class="maz:m-0">
           Doggo
         </h4>
       </template>
       <template #content-body>
-        <p class="maz-text-muted" style="margin-bottom: 0;">
+        <p class="maz:text-muted" style="margin-bottom: 0;">
           It's a beautifull doggo, no ?
         </p>
       </template>
@@ -95,7 +95,7 @@ This options will display the component without scrollbar only when the componen
 <ComponentDemo>
   <MazCarousel hide-scrollbar>
     <template #title>
-      <h4 class="maz-text-2xl maz-font-bold">Carousel</h4>
+      <h4 class="maz:text-2xl maz:font-bold">Carousel</h4>
     </template>
     <MazCard
       v-for="(item, i) in Array(8)"
@@ -108,12 +108,12 @@ This options will display the component without scrollbar only when the componen
       style="min-width: 250px;"
     >
       <template #content-title>
-        <h4 class="maz-m-0">
+        <h4 class="maz:m-0">
           Doggo
         </h4>
       </template>
       <template #content-body>
-        <p class="maz-text-muted" style="margin-bottom: 0;">
+        <p class="maz:text-muted" style="margin-bottom: 0;">
           It's a beautifull doggo, no ?
         </p>
       </template>
@@ -131,7 +131,7 @@ import MazCard from 'maz-ui/components/MazCard'
 <template>
   <MazCarousel hide-scrollbar>
     <template #title>
-      <h4 class="maz-text-2xl maz-font-bold">Carousel</h4>
+      <h4 class="maz:text-2xl maz:font-bold">Carousel</h4>
     </template>
     <MazCard
       v-for="(item, i) in Array(8)"
@@ -144,12 +144,12 @@ import MazCard from 'maz-ui/components/MazCard'
       style="min-width: 250px;"
     >
       <template #content-title>
-        <h4 class="maz-m-0">
+        <h4 class="maz:m-0">
           Doggo
         </h4>
       </template>
       <template #content-body>
-        <p class="maz-text-muted" style="margin-bottom: 0;">
+        <p class="maz:text-muted" style="margin-bottom: 0;">
           It's a beautifull doggo, no ?
         </p>
       </template>
@@ -178,12 +178,12 @@ This options will display the component without scroll buttons
       style="min-width: 250px;"
     >
       <template #content-title>
-        <h4 class="maz-m-0">
+        <h4 class="maz:m-0">
           Doggo
         </h4>
       </template>
       <template #content-body>
-        <p class="maz-text-muted" style="margin-bottom: 0;">
+        <p class="maz:text-muted" style="margin-bottom: 0;">
           It's a beautifull doggo, no ?
         </p>
       </template>
@@ -211,12 +211,12 @@ import MazCard from 'maz-ui/components/MazCard'
       style="min-width: 250px;"
     >
       <template #content-title>
-        <h4 class="maz-m-0">
+        <h4 class="maz:m-0">
           Doggo
         </h4>
       </template>
       <template #content-body>
-        <p class="maz-text-muted" style="margin-bottom: 0;">
+        <p class="maz:text-muted" style="margin-bottom: 0;">
           It's a beautifull doggo, no ?
         </p>
       </template>

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

@@ -11,10 +11,14 @@ description: MazChart is a standalone component which generates graphics & chart
 
 Follow the [Chart.JS](https://www.chartjs.org/docs/latest/) documentation to create your own chart.
 
-You can also check the documentation and [examples of vue-chartjs](https://vue-chartjs.org/examples/)
-
 You can use all the plugins of Chart.JS. Follow the examples below.
 
+::: tip Performance
+`MazChart` lazy-loads `chart.js` on mount and registers only the controllers, elements and scales needed for the chart `type` you requested. A `<MazChart type="pie">` won't pull `BarController`, `LineElement` or any other unused module. The chart instance is also held outside Vue's reactivity (`shallowRef` + `markRaw`) — this avoids accidental deep proxying of the underlying chart and the freezes that can come with it on large datasets.
+
+When `data` or `options` change after the initial render, `chart.update()` is called with `'none'` by default so updates don't animate. Pass `update-mode="default"` (or any other Chart.js update mode) to opt back into animations.
+:::
+
 ## Bar chart
 
 <MazChart
@@ -318,6 +322,21 @@ const lineChart = {
 
 ## Types
 
-### ChartProps
+`MazChartProps` is generic over the chart type, the data point shape and the label type — it mirrors the same generic signature as `Chart.js` itself:
+
+```ts
+interface MazChartProps<
+  T extends ChartType = ChartType,
+  TData = DefaultDataPoint<T>,
+  TLabel = unknown,
+> {
+  type: T
+  data: ChartData<T, TData, TLabel>
+  options?: ChartOptions<T>
+  plugins?: Plugin[]
+  datasetIdKey?: string
+  updateMode?: UpdateMode
+}
+```
 
-Follow this link to see the type definitions: [vue-chartjs/src/types.ts](https://github.com/apertureless/vue-chartjs/blob/main/src/types.ts#L12)
+For the underlying types, see [chart.js types](https://www.chartjs.org/docs/latest/api/).

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

@@ -32,7 +32,7 @@ const checked = ref(false)
 
 `v-model="{{chosenColors}}"`
 
-<div class="maz-flex maz-flex-col maz-gap-2">
+<div class="maz:flex maz:flex-col maz:gap-2">
   <MazCheckbox
     v-for="color in colors"
     :key="color"
@@ -89,7 +89,7 @@ const colors: Color[] = [
 
 `v-model="{{chosenSizes}}"`
 
-<div class="maz-flex maz-flex-col maz-gap-2">
+<div class="maz:flex maz:flex-col maz:gap-2">
   <MazCheckbox
     v-for="size in sizes"
     :key="size"
@@ -133,7 +133,7 @@ const sizes: MazSize[] = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
 
 ## Disabled
 
-<div class="maz-flex maz-flex-col maz-gap-2">
+<div class="maz:flex maz:flex-col maz:gap-2">
   <MazCheckbox :model-value="false" disabled name="disabled">
     disabled
   </MazCheckbox>

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

@@ -34,11 +34,11 @@ lastUpdated: false
       size: 'sm'
     }"
     :items="languagesOptions"
-    class="maz-max-h-80"
+    class="maz:max-h-80"
   >
     <template #item="{ item }">
-      <div class="maz-flex maz-w-full maz-items-center maz-justify-between maz-gap-2">
-        <span class="maz-capitalize">{{ item.label }}</span>
+      <div class="maz:flex maz:w-full maz:items-center maz:justify-between maz:gap-2">
+        <span class="maz:capitalize">{{ item.label }}</span>
         <MazBadge color="theme" outlined>
           {{ item.value }}
         </MazBadge>
@@ -66,11 +66,11 @@ lastUpdated: false
         size: 'sm'
       }"
       :items="languagesOptions"
-      class="maz-h-80"
+      class="maz:h-80"
     >
       <template #item="{ item }">
-        <div class="maz-flex maz-w-full maz-items-center maz-justify-between maz-gap-2">
-          <span class="maz-capitalize">{{ item.label }}</span>
+        <div class="maz:flex maz:w-full maz:items-center maz:justify-between maz:gap-2">
+          <span class="maz:capitalize">{{ item.label }}</span>
           <MazBadge color="theme" outlined>
             {{ item.value }}
           </MazBadge>
@@ -118,25 +118,25 @@ You can replace the default search function by providing a custom search functio
     :search-function="customEmployeeSearch"
     color="success"
     elevation
-    class="maz-max-h-96"
+    class="maz:max-h-96"
   >
     <template #item="{ item }">
-      <div class="maz-flex maz-w-full maz-items-center maz-gap-4">
-        <div class="maz-flex maz-h-10 maz-w-10 maz-flex-none maz-items-center maz-justify-center maz-rounded-full maz-bg-gradient-to-br maz-from-primary-500 maz-to-secondary-500 maz-text-white maz-font-semibold maz-text-lg">
+      <div class="maz:flex maz:w-full maz:items-center maz:gap-4">
+        <div class="maz:flex maz:h-10 maz:w-10 maz:flex-none maz:items-center maz:justify-center maz:rounded-full maz:bg-linear-to-br maz:from-primary-500 maz:to-secondary-500 maz:text-white maz:font-semibold maz:text-lg">
           {{ item.initials }}
         </div>
-        <div class="maz-flex maz-flex-1 maz-flex-col maz-gap-1">
-          <div class="maz-flex maz-items-center maz-gap-2">
-            <span class="maz-font-semibold maz-text-normal">{{ item.label }}</span>
-            <MazBadge :color="item.departmentColor" size="0.7em">
+        <div class="maz:flex maz:flex-1 maz:flex-col maz:gap-1">
+          <div class="maz:flex maz:items-center maz:gap-2">
+            <span class="maz:font-semibold maz:text-normal">{{ item.label }}</span>
+            <MazBadge :color="item.departmentColor" size="xs">
               {{ item.department }}
             </MazBadge>
           </div>
-          <span class="maz-text-muted maz-text-sm">{{ item.email }}</span>
+          <span class="maz:text-muted maz:text-sm">{{ item.email }}</span>
         </div>
-        <div class="maz-flex maz-flex-none maz-items-center maz-gap-1">
-          <MazIcon name="star" class="maz-text-warning-500" size="1rem" />
-          <span class="maz-text-sm maz-font-medium">{{ item.rating }}</span>
+        <div class="maz:flex maz:flex-none maz:items-center maz:gap-1">
+          <MazIcon icon="/star.svg" class="maz:text-warning-500" size="1rem" />
+          <span class="maz:text-sm maz:font-medium">{{ item.rating }}</span>
         </div>
       </div>
     </template>
@@ -180,7 +180,7 @@ You can replace the default search function by providing a custom search functio
             <span class="text-muted text-sm">{{ item.email }}</span>
           </div>
           <div class="flex flex-none items-center gap-1">
-            <MazIcon name="star" class="text-warning-500" size="1rem" />
+            <MazIcon icon="/star.svg" class="text-warning-500" size="1rem" />
             <span class="text-sm font-medium">{{ item.rating }}</span>
           </div>
         </div>
@@ -301,7 +301,7 @@ You can replace the default search function by providing a custom search functio
 
 <script lang="ts" setup>
   import { ref } from 'vue'
-  import { useDisplayNames } from 'maz-ui/src/composables/useDisplayNames'
+  import { useDisplayNames } from 'maz-ui/composables/useDisplayNames'
 
   // First demo variables
   const query = ref()

package/docs/src/components/maz-circular-progress-bar.md

@@ -34,7 +34,7 @@ import MazCircularProgressBar from 'maz-ui/components/MazCircularProgressBar'
 The size of the component can be changed by passing the `size` prop. The value could be a string in px, em or rem.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-3 maz-flex-wrap maz-items-center">
+  <div class="maz:flex maz:gap-3 maz:flex-wrap maz:items-center">
     <MazCircularProgressBar :percentage="75" suffix="%" size="3em" />
     <MazCircularProgressBar :percentage="75" suffix="%" size="100px" />
     <MazCircularProgressBar :percentage="75" suffix="%" size="10rem" />
@@ -75,7 +75,7 @@ The duration of the animation can be changed by passing the `duration` prop. The
 ## Color
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-3 maz-flex-wrap maz-items-center">
+  <div class="maz:flex maz:gap-3 maz:flex-wrap maz:items-center">
     <MazCircularProgressBar :percentage="75" color="primary" />
     <MazCircularProgressBar :percentage="75" color="secondary" />
     <MazCircularProgressBar :percentage="75" color="info" />
@@ -98,7 +98,7 @@ The duration of the animation can be changed by passing the `duration` prop. The
 The color of the component is automatically according to the percentage. The color will be green if the percentage is egal to 100%, orange if below 100%, and red if below 50%.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-3 maz-flex-wrap maz-items-center">
+  <div class="maz:flex maz:gap-3 maz:flex-wrap maz:items-center">
     <MazCircularProgressBar :percentage="0" auto-color size="9rem" />
     <MazCircularProgressBar :percentage="25" auto-color size="9rem" />
     <MazCircularProgressBar :percentage="50" auto-color size="9rem" />
@@ -127,7 +127,7 @@ Replace the percentage value by a custom slot.
 Obviously, the "counter animation" will not work in this case.
 
 <ComponentDemo>
-  <div class="maz-flex maz-gap-3 maz-flex-wrap maz-items-center">
+  <div class="maz:flex maz:gap-3 maz:flex-wrap maz:items-center">
     <MazCircularProgressBar :percentage="50">
       2/4
     </MazCircularProgressBar>

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

@@ -63,14 +63,14 @@ Add a header with a title using the `title` prop or the `title` slot.
 
 ## With icons
 
-Add icons to the header using `left-icon` and `right-icon` props.
+Add icons to the header using `start-icon` and `end-icon` props.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
-    <MazContainer title="Settings" left-icon="cog-6-tooth">
+  <div class="maz:flex maz:flex-col maz:gap-4">
+    <MazContainer title="Settings" start-icon="/cog-6-tooth.svg">
       Configure your application settings here.
     </MazContainer>
-    <MazContainer title="User Profile" left-icon="user" right-icon="pencil">
+    <MazContainer title="User Profile" start-icon="/user.svg" end-icon="/pencil.svg">
       View and edit your profile information.
     </MazContainer>
   </div>
@@ -79,11 +79,11 @@ Add icons to the header using `left-icon` and `right-icon` props.
 
 ```vue
 <template>
-  <MazContainer title="Settings" left-icon="cog-6-tooth">
+  <MazContainer title="Settings" start-icon="/cog-6-tooth.svg">
     Configure your application settings here.
   </MazContainer>
 
-  <MazContainer title="User Profile" left-icon="user" right-icon="pencil">
+  <MazContainer title="User Profile" start-icon="/user.svg" end-icon="/pencil.svg">
     View and edit your profile information.
   </MazContainer>
 </template>
@@ -92,6 +92,21 @@ Add icons to the header using `left-icon` and `right-icon` props.
   </template>
 </ComponentDemo>
 
+`startIcon` and `endIcon` also accept a full `MazIconProps` object — pass the same shape `<MazIcon>` accepts to override the icon size, add a `<title>` for screen readers, etc.
+
+```vue
+<MazContainer
+  title="Settings"
+  :start-icon="{
+    icon: MazCog6Tooth,
+    size: 'lg',
+    title: 'Open settings',
+  }"
+>
+  Configure your application settings here.
+</MazContainer>
+```
+
 ## Styling options
 
 ### Elevation
@@ -121,7 +136,7 @@ Add shadow to make the container stand out.
 By default, the container has a border. You can disable it.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
+  <div class="maz:flex maz:flex-col maz:gap-4">
     <MazContainer title="With border (default)">
       This container has a border.
     </MazContainer>
@@ -174,7 +189,7 @@ Remove the background color with the `transparent` prop.
 Customize the border radius with the `rounded-size` prop.
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-wrap maz-gap-4">
+  <div class="maz:flex maz:flex-wrap maz:gap-4">
     <MazContainer v-for="size in roundedSizes" :key="size" :rounded-size="size">
       {{ size }}
     </MazContainer>
@@ -245,14 +260,14 @@ Use the `block` prop to make the container take full width.
 
 ## Custom header
 
-Use the `header` slot to fully customize the header, or use `title`, `icon-left`, and `icon-right` slots for more granular control.
+Use the `header` slot to fully customize the header, or use `title`, `icon-start`, and `icon-end` slots for more granular control.
 
 <ComponentDemo>
   <MazContainer>
     <template #header>
-      <div class="maz-flex maz-items-center maz-justify-between maz-w-full maz-px-4 maz-py-3 maz-bg-primary maz-text-primary-foreground">
-        <span class="maz-font-semibold">Custom Header</span>
-        <MazBadge size="0.8rem" color="white" class="maz-text-primary">
+      <div class="maz:flex maz:items-center maz:justify-between maz:w-full maz:px-4 maz:py-3 maz:bg-primary maz:text-primary-foreground">
+        <span class="maz:font-semibold">Custom Header</span>
+        <MazBadge size="sm" color="white" class="maz:text-primary">
           New
         </MazBadge>
       </div>
@@ -266,9 +281,9 @@ Use the `header` slot to fully customize the header, or use `title`, `icon-left`
 <template>
   <MazContainer>
     <template #header>
-      <div class="maz-flex maz-items-center maz-justify-between maz-w-full maz-px-4 maz-py-3 maz-bg-primary maz-text-primary-foreground">
-        <span class="maz-font-semibold">Custom Header</span>
-        <MazBadge size="0.8rem" color="white" class="maz-text-primary">
+      <div class="maz:flex maz:items-center maz:justify-between maz:w-full maz:px-4 maz:py-3 maz:bg-primary maz:text-primary-foreground">
+        <span class="maz:font-semibold">Custom Header</span>
+        <MazBadge size="sm" color="white" class="maz:text-primary">
           New
         </MazBadge>
       </div>
@@ -286,24 +301,24 @@ Use the `header` slot to fully customize the header, or use `title`, `icon-left`
 <ComponentDemo>
   <MazContainer
     title="Dashboard Overview"
-    left-icon="chart-bar"
+    start-icon="chart-bar"
     elevation
     :bordered="false"
     rounded-size="xl"
     block
   >
-    <div class="maz-flex maz-gap-4 maz-flex-wrap">
-      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
-        <p class="maz-text-muted maz-text-sm">Users</p>
-        <p class="maz-text-2xl maz-font-bold">1,234</p>
+    <div class="maz:flex maz:gap-4 maz:flex-wrap">
+      <MazContainer class="maz:flex-1 maz:min-w-[150px]">
+        <p class="maz:text-muted maz:text-sm">Users</p>
+        <p class="maz:text-2xl maz:font-bold">1,234</p>
       </MazContainer>
-      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
-        <p class="maz-text-muted maz-text-sm">Revenue</p>
-        <p class="maz-text-2xl maz-font-bold">$12.5k</p>
+      <MazContainer class="maz:flex-1 maz:min-w-[150px]">
+        <p class="maz:text-muted maz:text-sm">Revenue</p>
+        <p class="maz:text-2xl maz:font-bold">$12.5k</p>
       </MazContainer>
-      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
-        <p class="maz-text-muted maz-text-sm">Orders</p>
-        <p class="maz-text-2xl maz-font-bold">567</p>
+      <MazContainer class="maz:flex-1 maz:min-w-[150px]">
+        <p class="maz:text-muted maz:text-sm">Orders</p>
+        <p class="maz:text-2xl maz:font-bold">567</p>
       </MazContainer>
     </div>
   </MazContainer>
@@ -314,24 +329,24 @@ Use the `header` slot to fully customize the header, or use `title`, `icon-left`
 <template>
   <MazContainer
     title="Dashboard Overview"
-    left-icon="chart-bar"
+    start-icon="chart-bar"
     elevation
     :bordered="false"
     rounded-size="xl"
     block
   >
-    <div class="maz-flex maz-gap-4 maz-flex-wrap">
-      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
-        <p class="maz-text-muted maz-text-sm">Users</p>
-        <p class="maz-text-2xl maz-font-bold">1,234</p>
+    <div class="maz:flex maz:gap-4 maz:flex-wrap">
+      <MazContainer class="maz:flex-1 maz:min-w-[150px]">
+        <p class="maz:text-muted maz:text-sm">Users</p>
+        <p class="maz:text-2xl maz:font-bold">1,234</p>
       </MazContainer>
-      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
-        <p class="maz-text-muted maz-text-sm">Revenue</p>
-        <p class="maz-text-2xl maz-font-bold">$12.5k</p>
+      <MazContainer class="maz:flex-1 maz:min-w-[150px]">
+        <p class="maz:text-muted maz:text-sm">Revenue</p>
+        <p class="maz:text-2xl maz:font-bold">$12.5k</p>
       </MazContainer>
-      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
-        <p class="maz-text-muted maz-text-sm">Orders</p>
-        <p class="maz-text-2xl maz-font-bold">567</p>
+      <MazContainer class="maz:flex-1 maz:min-w-[150px]">
+        <p class="maz:text-muted maz:text-sm">Orders</p>
+        <p class="maz:text-2xl maz:font-bold">567</p>
       </MazContainer>
     </div>
   </MazContainer>

package/docs/src/components/maz-date-picker.md

@@ -72,7 +72,7 @@ This controls how dates are stored and transmitted in your `v-model`. Default is
 This controls how dates appear in the input field using `Intl.DateTimeFormatOptions`.
 
 <ComponentDemo>
-  <div class="maz-grid maz-grid-cols-1 mob-l:maz-grid-cols-3 maz-gap-4">
+  <div class="maz:grid maz:grid-cols-1 maz:mob-l:grid-cols-3 maz:gap-4">
     <MazDatePicker
       v-model="formatExample1"
       label="ISO Format (YYYY-MM-DD)"
@@ -346,7 +346,7 @@ const dateTime = ref()
 ### Time Only Selection
 
 <ComponentDemo>
-  <div class="maz-grid maz-grid-cols-1 mob-l:maz-grid-cols-2 maz-gap-4">
+  <div class="maz:grid maz:grid-cols-1 maz:mob-l:grid-cols-2 maz:gap-4">
     <MazDatePicker
       v-model="timeOnly24"
       label="Time Only (24h)"
@@ -400,7 +400,7 @@ const time12 = ref('02:30 pm')
 ### Custom Minute Intervals
 
 <ComponentDemo>
-  <div class="maz-grid maz-grid-cols-1 mob-l:maz-grid-cols-3 maz-gap-4">
+  <div class="maz:grid maz:grid-cols-1 maz:mob-l:grid-cols-3 maz:gap-4">
     <MazDatePicker
       v-model="timeInterval1"
       label="5min intervals"
@@ -698,7 +698,7 @@ const shortcuts = [
     color="info"
     @update:model-value="console.log($event)"
   />
-  <p class="maz-text-sm maz-text-muted maz-mt-2">
+  <p class="maz:text-sm maz:text-muted maz:mt-2">
     Min: {{ minMaxDates.min }} | Max: {{ minMaxDates.max }}
   </p>
 
@@ -772,7 +772,7 @@ const maxDate = dayjs().add(30, 'day').format('YYYY-MM-DD')
 <br />
 
 <ComponentDemo>
-  <div class="maz-grid maz-grid-cols-1 mob-l:maz-grid-cols-2 maz-gap-4">
+  <div class="maz:grid maz:grid-cols-1 maz:mob-l:grid-cols-2 maz:gap-4">
     <MazDatePicker
       v-model="weekendDisabled"
       label="Weekends Disabled"
@@ -839,7 +839,7 @@ const holidays = [
 <br />
 
 <ComponentDemo>
-  <div class="maz-grid maz-grid-cols-1 mob-l:maz-grid-cols-2 maz-gap-4">
+  <div class="maz:grid maz:grid-cols-1 maz:mob-l:grid-cols-2 maz:gap-4">
     <MazDatePicker
       v-model="dateTime"
       format="YYYY-MM-DD hh:mm a"
@@ -899,7 +899,7 @@ const disabledHours = [0, 1, 2, 11, 22, 23]
 MazDatePicker supports full internationalization. **By default, it uses the locale from the [MazUiTranslations](../guide/translations.md) plugin**, but you can override it:
 
 <ComponentDemo>
-  <div class="maz-grid maz-grid-cols-1 mob-l:maz-grid-cols-2 maz-gap-4">
+  <div class="maz:grid maz:grid-cols-1 maz:mob-l:grid-cols-2 maz:gap-4">
     <MazDatePicker
       v-model="frenchDate"
       label="French Locale"

package/docs/src/components/maz-dialog-confirm.md

@@ -188,10 +188,10 @@ type Size = 'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
 <script setup lang="ts">
   import { ref } from 'vue'
-  import { useToast } from 'maz-ui/src/composables/useToast'
+  import { useToast } from 'maz-ui/composables/useToast'
   import MazDialogConfirm, {
     useMazDialogConfirm, type MazDialogConfirmButton, type MazDialogConfirmData
-  } from 'maz-ui/src/components/MazDialogConfirm.vue'
+  } from 'maz-ui/components/MazDialogConfirm'
 
   const { showDialogAndWaitChoice, data } = useMazDialogConfirm()
   const confirmDialog = ref(false)