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

package/docs/src/guide/vue.md

@@ -43,7 +43,7 @@ import { MazUi } from 'maz-ui/plugins/maz-ui'
 import { mazUi } from '@maz-ui/themes'
 import { en } from '@maz-ui/translations/locales'
 
-import 'maz-ui/styles'
+import 'maz-ui/style.css'
 
 app.use(MazUi, {
   theme: {
@@ -74,7 +74,7 @@ import { fr } from '@maz-ui/translations/locales'
 // or import fr from '@maz-ui/translations/locales/fr'
 
 // Import Maz-UI styles before your own CSS
-import 'maz-ui/styles'
+import 'maz-ui/style.css'
 import './style.css'
 
 app.use(MazUi, {
@@ -84,15 +84,18 @@ app.use(MazUi, {
    * @see https://maz-ui.com/guide/themes
    */
   theme: {
-    preset: mazUi, // 'ocean' | 'pristine' | 'obsidian'
+    preset: mazUi, // 'ocean' | 'pristine' | 'obsidian' | 'nova'
     overrides: {
       foundation: {
-        'radius': '0.7rem',
+        'space': '0.25rem',
         'border-width': '0.0625rem',
       },
+      scales: {
+        rounded: { md: '0.7rem' },
+      },
       colors: {
         light: {
-          primary: '220 100% 50%',
+          primary: 'oklch(0.65 0.19 254)',
         }
       }
     }

package/docs/src/helpers/capitalize.md

@@ -10,7 +10,7 @@ description: The module capitalize is a function that adds a capital letter to a
 <MazInput v-model="stringValue" />
 
 <div
-  style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+  style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
   class="flex flex-center rounded gap-05"
 >
   formatted value: <strong>{{ stringFormatted }}</strong>
@@ -18,7 +18,7 @@ description: The module capitalize is a function that adds a capital letter to a
 
 ```vue
 <script lang="ts" setup>
-import { capitalize } from 'maz-ui'
+import { capitalize } from '@maz-ui/utils'
 import { computed, ref } from 'vue'
 
 const stringValue = ref('string value')
@@ -32,7 +32,7 @@ const stringFormatted = computed(() =>
   <MazInput v-model="stringValue" />
 
   <div
-    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+    style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
   >
     {{ stringFormatted }}
   </div>
@@ -40,7 +40,7 @@ const stringFormatted = computed(() =>
 ```
 
 <script lang="ts" setup>
-  import { capitalize } from 'maz-ui'
+  import { capitalize } from '@maz-ui/utils'
   import { ref, computed } from 'vue'
 
   const stringValue = ref('string value')

package/docs/src/helpers/country-code-to-unicode-flag.md

@@ -27,7 +27,7 @@ description: Convert country code in unicode flag
 </template>
 
 <script lang="ts" setup >
-  import { countryCodeToUnicodeFlag } from 'maz-ui'
+  import { countryCodeToUnicodeFlag } from '@maz-ui/utils'
 
   const unicodeFlag = countryCodeToUnicodeFlag('FR')
 </script>
@@ -35,18 +35,18 @@ description: Convert country code in unicode flag
 
 ## Example
 
-<div class="maz-gap-2 maz-flex maz-flex-wrap maz-items-center">
-  <span class="maz-text-xs">{{ flag }}</span>
-  <span class="maz-text-sm">{{ flag }}</span>
-  <span class="maz-text-base">{{ flag }}</span>
-  <span class="maz-text-lg">{{ flag }}</span>
-  <span class="maz-text-xl">{{ flag }}</span>
-  <span class="maz-text-2xl">{{ flag }}</span>
-  <span class="maz-text-3xl">{{ flag }}</span>
-  <span class="maz-text-4xl">{{ flag }}</span>
-  <span class="maz-text-5xl">{{ flag }}</span>
-  <span class="maz-text-6xl">{{ flag }}</span>
-  <span class="maz-text-7xl">{{ flag }}</span>
+<div class="maz:gap-2 maz:flex maz:flex-wrap maz:items-center">
+  <span class="maz:text-xs">{{ flag }}</span>
+  <span class="maz:text-sm">{{ flag }}</span>
+  <span class="maz:text-base">{{ flag }}</span>
+  <span class="maz:text-lg">{{ flag }}</span>
+  <span class="maz:text-xl">{{ flag }}</span>
+  <span class="maz:text-2xl">{{ flag }}</span>
+  <span class="maz:text-3xl">{{ flag }}</span>
+  <span class="maz:text-4xl">{{ flag }}</span>
+  <span class="maz:text-5xl">{{ flag }}</span>
+  <span class="maz:text-6xl">{{ flag }}</span>
+  <span class="maz:text-7xl">{{ flag }}</span>
 </div>
 
 <MazSelect
@@ -59,20 +59,20 @@ description: Convert country code in unicode flag
 >
   <template #default="{ option, isSelected }">
     <div
-      class="maz-flex maz-items-center maz-gap-3"
+      class="maz:flex maz:items-center maz:gap-3"
     >
-      <span class="maz-text-lg">
+      <span class="maz:text-lg">
         {{ option.unicodeFlag }}
       </span>
       <MazBadge
         pastel
         size="0.7rem"
-        class="maz-w-9"
-        :class="{ 'maz-text-muted': !isSelected }"
+        class="maz:w-9"
+        :class="{ 'maz:text-muted': !isSelected }"
       >
         {{ option.value }}
       </MazBadge>
-      <span :class="{ 'maz-font-semibold': isSelected }">
+      <span :class="{ 'maz:font-semibold': isSelected }">
         {{ option.label }}
       </span>
     </div>
@@ -81,7 +81,7 @@ description: Convert country code in unicode flag
 
 <script lang="ts" setup>
   import { computed, ref, onMounted } from 'vue'
-  import { countryCodeToUnicodeFlag } from 'maz-ui'
+  import { countryCodeToUnicodeFlag } from '@maz-ui/utils'
   import { getCountries } from 'libphonenumber-js'
 
   const unicodeFlag = countryCodeToUnicodeFlag('FR')
@@ -125,18 +125,18 @@ description: Convert country code in unicode flag
 ```vue
 
 <template>
-  <div class="maz-gap-2 maz-flex maz-flex-wrap maz-items-center">
-    <span class="maz-text-xs">{{ flag }}</span>
-    <span class="maz-text-sm">{{ flag }}</span>
-    <span class="maz-text-base">{{ flag }}</span>
-    <span class="maz-text-lg">{{ flag }}</span>
-    <span class="maz-text-xl">{{ flag }}</span>
-    <span class="maz-text-2xl">{{ flag }}</span>
-    <span class="maz-text-3xl">{{ flag }}</span>
-    <span class="maz-text-4xl">{{ flag }}</span>
-    <span class="maz-text-5xl">{{ flag }}</span>
-    <span class="maz-text-6xl">{{ flag }}</span>
-    <span class="maz-text-7xl">{{ flag }}</span>
+  <div class="maz:gap-2 maz:flex maz:flex-wrap maz:items-center">
+    <span class="maz:text-xs">{{ flag }}</span>
+    <span class="maz:text-sm">{{ flag }}</span>
+    <span class="maz:text-base">{{ flag }}</span>
+    <span class="maz:text-lg">{{ flag }}</span>
+    <span class="maz:text-xl">{{ flag }}</span>
+    <span class="maz:text-2xl">{{ flag }}</span>
+    <span class="maz:text-3xl">{{ flag }}</span>
+    <span class="maz:text-4xl">{{ flag }}</span>
+    <span class="maz:text-5xl">{{ flag }}</span>
+    <span class="maz:text-6xl">{{ flag }}</span>
+    <span class="maz:text-7xl">{{ flag }}</span>
   </div>
 
   <MazSelect
@@ -149,20 +149,20 @@ description: Convert country code in unicode flag
   >
     <template #default="{ option, isSelected }">
       <div
-        class="maz-flex maz-items-center maz-gap-3"
+        class="maz:flex maz:items-center maz:gap-3"
       >
-        <span class="maz-text-lg">
+        <span class="maz:text-lg">
           {{ option.unicodeFlag }}
         </span>
         <MazBadge
           pastel
           size="0.7rem"
-          class="maz-w-9"
-          :class="{ 'maz-text-muted': !isSelected }"
+          class="maz:w-9"
+          :class="{ 'maz:text-muted': !isSelected }"
         >
           {{ option.value }}
         </MazBadge>
-        <span :class="{ 'maz-font-semibold': isSelected }">
+        <span :class="{ 'maz:font-semibold': isSelected }">
           {{ option.label }}
         </span>
       </div>
@@ -172,7 +172,7 @@ description: Convert country code in unicode flag
 
 <script lang="ts" setup>
   import { computed, ref, onMounted } from 'vue'
-  import { countryCodeToUnicodeFlag } from 'maz-ui'
+  import { countryCodeToUnicodeFlag } from '@maz-ui/utils'
   import { getCountries } from 'libphonenumber-js'
 
   const countryCode = ref('FR')

package/docs/src/helpers/currency.md

@@ -16,7 +16,7 @@ Enter only numbers
 <MazInput v-model="numberValue" type="number" />
 
 <div
-  style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+  style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
   class="flex flex-center rounded gap-05"
 >
   formatted value: <strong>{{ priceFormatted }}</strong>
@@ -24,7 +24,7 @@ Enter only numbers
 
 ```vue
 <script lang="ts" setup>
-import { formatCurrency } from 'maz-ui'
+import { formatCurrency } from '@maz-ui/utils'
 import { computed, ref } from 'vue'
 
 const numberValue = ref(69)
@@ -38,7 +38,7 @@ const priceFormatted = computed(() =>
   <MazInput v-model="numberValue" type="number" />
 
   <div
-    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+    style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
   >
     {{ priceFormatted }}
   </div>
@@ -46,7 +46,7 @@ const priceFormatted = computed(() =>
 ```
 
 <script lang="ts" setup>
-  import { formatCurrency } from 'maz-ui'
+  import { formatCurrency } from '@maz-ui/utils'
   import { ref, computed } from 'vue'
 
   const numberValue = ref(69)

package/docs/src/helpers/date.md

@@ -12,7 +12,7 @@ description: The module formatDate is a function that formats dates with the nat
 <MazInput v-model="dateValue" type="date" />
 
 <div
-  style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+  style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
   class="flex flex-center rounded gap-05"
 >
   formatted value: <strong>{{ dateFormatted }}</strong>
@@ -20,7 +20,7 @@ description: The module formatDate is a function that formats dates with the nat
 
 ```vue
 <script lang="ts" setup>
-import { formatDate } from 'maz-ui'
+import { formatDate } from '@maz-ui/utils'
 import { computed, ref } from 'vue'
 
 const dateValue = ref('2022-02-01')
@@ -34,7 +34,7 @@ const dateFormatted = computed(() =>
   <MazInput v-model="dateValue" type="date" />
 
   <div
-    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+    style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
   >
     {{ dateFormatted }}
   </div>
@@ -56,7 +56,7 @@ const DEFAULT_OPTIONS: Intl.DateTimeFormatOptions = {
 ```
 
 <script lang="ts" setup>
-  import { formatDate } from 'maz-ui'
+  import { formatDate } from '@maz-ui/utils'
   import { ref, computed } from 'vue'
 
   const dateValue = ref('2022-02-01')

package/docs/src/helpers/get-country-flag-url.md

@@ -17,18 +17,18 @@ description: Get country flag from flagcdn.com with a simple function call
 >
   <template #default="{ option, isSelected }">
     <div
-      class="maz-flex maz-items-center maz-gap-3"
+      class="maz:flex maz:items-center maz:gap-3"
     >
-      <img :src="option.flagSrc" class="maz-text-lg" :alt="`Flag of ${option.label}`" />
+      <img :src="option.flagSrc" class="maz:text-lg" :alt="`Flag of ${option.label}`" />
       <MazBadge
         pastel
         size="0.7rem"
-        class="maz-w-9"
-        :class="{ 'maz-text-muted': !isSelected }"
+        class="maz:w-9"
+        :class="{ 'maz:text-muted': !isSelected }"
       >
         {{ option.value }}
       </MazBadge>
-      <span :class="{ 'maz-font-semibold': isSelected }">
+      <span :class="{ 'maz:font-semibold': isSelected }">
         {{ option.label }}
       </span>
     </div>
@@ -45,7 +45,7 @@ description: Get country flag from flagcdn.com with a simple function call
 </template>
 
 <script lang="ts" setup >
-  import { getCountryFlagUrl } from 'maz-ui'
+  import { getCountryFlagUrl } from '@maz-ui/utils'
 
   const flagSrc = getCountryFlagUrl('FR')
 </script>
@@ -53,7 +53,7 @@ description: Get country flag from flagcdn.com with a simple function call
 
 ## Sizing
 
-<div class="maz-gap-2 maz-flex maz-flex-wrap maz-items-center">
+<div class="maz:gap-2 maz:flex maz:flex-wrap maz:items-center">
   <img
     v-for="{ src, size, countryCode } in sizedFlags"
     :key="src"
@@ -76,7 +76,7 @@ description: Get country flag from flagcdn.com with a simple function call
 
 <script lang="ts" setup>
   import { computed } from 'vue'
-  import { getCountryFlagUrl } from 'maz-ui'
+  import { getCountryFlagUrl } from '@maz-ui/utils'
 
   const countryCode = ref('FR')
 
@@ -103,7 +103,7 @@ description: Get country flag from flagcdn.com with a simple function call
 
 <script lang="ts" setup>
   import { computed, ref, onMounted } from 'vue'
-  import { getCountryFlagUrl } from 'maz-ui'
+  import { getCountryFlagUrl } from '@maz-ui/utils'
   import { getCountries } from 'libphonenumber-js'
 
   const countryCode = ref('FR')

package/docs/src/helpers/number.md

@@ -12,15 +12,15 @@ description: The module formatNumber is a function that formats numbers with the
 <MazInput v-model="numberValue" type="number" />
 
 <div
-  style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
-  class="maz-flex maz-flex-center maz-rounded maz-gap-0.5"
+  style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
+  class="maz:flex maz:flex-center maz:rounded-md maz:gap-0.5"
 >
   formatted value: <strong>{{ numberFormatted }}</strong>
 </div>
 
 ```vue
 <script lang="ts" setup>
-import { formatNumber } from 'maz-ui'
+import { formatNumber } from '@maz-ui/utils'
 import { computed, ref } from 'vue'
 
 const numberValue = ref(69)
@@ -34,7 +34,7 @@ const numberFormatted = computed(() =>
   <MazInput v-model="numberValue" type="number" />
 
   <div
-    style="padding: 16px; margin-top: 16px; background-color: hsl(var(--maz-background-300));"
+    style="padding: 16px; margin-top: 16px; background-color: var(--maz-surface-300);"
   >
     {{ numberFormatted }}
   </div>
@@ -54,7 +54,7 @@ const DEFAULT_OPTIONS: Intl.NumberFormatOptions = {
 ```
 
 <script lang="ts" setup>
-  import { formatNumber } from 'maz-ui'
+  import { formatNumber } from '@maz-ui/utils'
   import { ref, computed } from 'vue'
 
   const numberValue = ref(69)