@maz-ui/mcp 5.0.0-beta.3 → 5.0.0-beta.31

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

@@ -454,7 +454,7 @@ Check out how [MazIcon](./maz-icon.md) works, see all available icons and downlo
 
 :::
 
-### Use [@maz-ui/icons](./../guide/icons.md)
+### Use [@maz-ui/icons](./../ecosystem/icons/.md)
 
 ::: details View code
 

package/docs/src/components/maz-code-highlight.md

@@ -0,0 +1,233 @@
+---
+title: MazCodeHighlight
+description: MazCodeHighlight displays source code with syntax highlighting powered by shiki. It auto-detects dark/light mode, ships with a copy-to-clipboard button, a language badge, and supports lazy loading.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+
+## Installation requirement
+
+Install [`shiki`](https://shiki.style) in your project to enable highlighting:
+
+::: code-group
+
+```bash [pnpm]
+pnpm add shiki
+```
+
+```bash [npm]
+npm install shiki
+```
+
+```bash [yarn]
+yarn add shiki
+```
+
+:::
+
+If `shiki` is not installed, the component falls back to a plain `<pre><code>` block.
+
+## Basic usage
+
+<ComponentDemo>
+  <MazCodeHighlight code="const greeting = 'Hello, maz-ui!'" language="ts" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight code="const greeting = 'Hello, maz-ui!'" language="ts" />
+</template>
+
+<script lang="ts" setup>
+  import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+## With slot
+
+The default slot text is used as source code when the `code` prop is not provided. This is useful for plain text blocks.
+
+<ComponentDemo>
+  <MazCodeHighlight language="bash">npm install maz-ui</MazCodeHighlight>
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight language="bash">npm install maz-ui</MazCodeHighlight>
+</template>
+
+<script lang="ts" setup>
+  import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+## Languages
+
+Pass any valid [shiki language identifier](https://shiki.style/languages) to the `language` prop. The chosen language is also displayed as a small badge in the top-right corner (the badge fades out on hover when the copy button appears).
+
+<ComponentDemo>
+  <MazCodeHighlight language="vue" :code="vueExample" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight language="vue" :code="vueExample" />
+</template>
+
+<script lang="ts" setup>
+  import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
+
+  const vueExample = `<script lang="ts" setup>
+  import { ref } from 'vue'
+  const count = ref(0)
+<\/script>
+
+<template>
+  <button @click="count++">Count: {{ count }}</button>
+</template>`
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+## Custom theme
+
+Override the auto-detected theme with any [shiki built-in theme](https://shiki.style/themes).
+
+<ComponentDemo>
+  <MazCodeHighlight code="console.log('dracula theme')" language="js" theme="dracula" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight code="console.log('dracula theme')" language="js" theme="dracula" />
+</template>
+
+<script lang="ts" setup>
+  import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+## Copy to clipboard
+
+A copy button is displayed in the top-right corner on hover (or when focused via keyboard). Clicking it writes the resolved code to the clipboard and shows a check icon for ~1.5s.
+
+### Disable the copy button
+
+Set `:copyable="false"` to hide the button entirely.
+
+<ComponentDemo>
+  <MazCodeHighlight code="const noCopyButton = true" language="ts" :copyable="false" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight code="const noCopyButton = true" language="ts" :copyable="false" />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+### Copy a different value than the displayed code
+
+Use `copyValue` when the displayed source differs from what should be copied — for example to strip a leading `$` prompt when rendering a shell command. This is the mechanism `MazWindowMockup` uses internally to keep the terminal prompt out of the clipboard.
+
+<ComponentDemo>
+  <MazCodeHighlight code="$ pnpm add maz-ui" copy-value="pnpm add maz-ui" language="bash" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight
+    code="$ pnpm add maz-ui"
+    copy-value="pnpm add maz-ui"
+    language="bash"
+  />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Disable rounded corners
+
+Set `:rounded="false"` to render the highlighted block with squared corners — useful when embedding inside another container that already has its own border-radius (e.g. inside `MazWindowMockup`).
+
+<ComponentDemo>
+  <MazCodeHighlight code="// squared corners" language="ts" :rounded="false" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight code="// squared corners" language="ts" :rounded="false" />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Custom translations
+
+The copy button's aria-label and tooltip come from the `@maz-ui/translations` package (`codeHighlight.copyToClipboard` / `codeHighlight.copiedToClipboard`). You can override either key per-instance with the `translations` prop without touching the global locale:
+
+<ComponentDemo>
+  <MazCodeHighlight
+    code="const hello = 'world'"
+    language="ts"
+    :translations="{ copyToClipboard: 'Copier le code', copiedToClipboard: 'Copié !' }"
+  />
+
+  <template #code>
+
+```vue
+<template>
+  <MazCodeHighlight
+    code="const hello = 'world'"
+    language="ts"
+    :translations="{
+      copyToClipboard: 'Copier le code',
+      copiedToClipboard: 'Copié !',
+    }"
+  />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+For app-wide translations, set up the [maz-ui translations plugin](/translations) and the component will pick up your locale automatically.
+
+<script lang="ts" setup>
+  const vueExample = `<script lang="ts" setup>
+  import { ref } from 'vue'
+  const count = ref(0)
+<\/script>
+
+<template>
+  <button @click="count++">Count: {{ count }}</button>
+</template>`
+</script>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-code-highlight.doc.md-->

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

@@ -301,7 +301,7 @@ Use the `header` slot to fully customize the header, or use `title`, `icon-start
 <ComponentDemo>
   <MazContainer
     title="Dashboard Overview"
-    start-icon="chart-bar"
+    start-icon="/chart-bar.svg"
     elevation
     :bordered="false"
     rounded-size="xl"
@@ -329,7 +329,7 @@ Use the `header` slot to fully customize the header, or use `title`, `icon-start
 <template>
   <MazContainer
     title="Dashboard Overview"
-    start-icon="chart-bar"
+    start-icon="/chart-bar.svg"
     elevation
     :bordered="false"
     rounded-size="xl"

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

@@ -896,7 +896,7 @@ const disabledHours = [0, 1, 2, 11, 22, 23]
 
 ## Internationalization
 
-MazDatePicker supports full internationalization. **By default, it uses the locale from the [MazUiTranslations](../guide/translations.md) plugin**, but you can override it:
+MazDatePicker supports full internationalization. **By default, it uses the locale from the [MazUiTranslations](../ecosystem/translations.md) plugin**, but you can override it:
 
 <ComponentDemo>
   <div class="maz:grid maz:grid-cols-1 maz:mob-l:grid-cols-2 maz:gap-4">

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

@@ -103,10 +103,56 @@ For long content, you can enable scrolling in content part (Header and footer sl
   </template>
 </ComponentDemo>
 
+## Width
+
+On tablet and up, the dialog is sized by two CSS variables coming from the active theme preset (`components.dialog`):
+
+- `--maz-dialog-max-width` (default `38rem`)
+- `--maz-dialog-min-width` (default `32rem`)
+
+You can set these defaults globally per preset — see [the theme `components.dialog` documentation](./../ecosystem/themes.md#dialog-sizing). To change the width of a single dialog, pass the `max-width` / `min-width` props — they always override the preset:
+
+<ComponentDemo>
+  <MazBtn @click="widthOpened = true">Open Wide Dialog</MazBtn>
+
+  <MazDialog v-model="widthOpened" title="Custom width" max-width="50rem" min-width="40rem">
+    <p>
+      This dialog overrides the preset width through props.
+    </p>
+    <template #footer="{ close }">
+      <MazBtn @click="close">
+        Confirm
+      </MazBtn>
+    </template>
+  </MazDialog>
+
+<template #code>
+
+```vue
+<template>
+  <MazDialog
+    v-model="isOpen"
+    title="Custom width"
+    max-width="50rem"
+    min-width="40rem"
+  >
+    <p>This dialog overrides the preset width through props.</p>
+  </MazDialog>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+::: tip
+The default widths are expressed in `rem`, so they scale with the preset's `base-font-size`. Presets with a larger base size (e.g. `ocean` at `16px`) ship rem values adjusted to keep the rendered pixel width consistent across presets.
+:::
+
 <!--@include: ./../../.vitepress/generated-docs/maz-dialog.doc.md-->
 
 <script setup>
   import { ref } from 'vue'
   const isOpen = ref(false)
   const scollableOpened = ref(false)
+  const widthOpened = ref(false)
 </script>

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

@@ -16,10 +16,12 @@ description: MazDropdown is a standalone dropdown menu component and versatile d
 <ComponentDemo>
   <MazDropdown
     :items="[
+      { label: 'Louis Mazel', textColor: 'muted' },
       { label: 'Action', onClick: () => toast.success('CLICKED') },
       { label: 'Link (href)', href: 'https://www.google.com', target: '_blank', color: 'secondary' },
       { label: 'Router Link', to: { name: 'index' }, color: 'destructive' },
     ]"
+    items-size="sm"
   >
     Dropdown Menu
   </MazDropdown>
@@ -82,6 +84,7 @@ This provides the best user experience across all devices without requiring manu
 ## Open dropdown only on click
 
 <MazDropdown
+  :model-value="true"
   :items="[
     { label: 'Action', onClick: () => toast.success('CLICKED') },
     { label: 'Link (href)', href: 'https://www.google.com', target: '_blank' },
@@ -220,8 +223,9 @@ You can provide an icon to replace the default chevron icon and disable the anim
   fab
   pastel
   :chevron="false"
-  icon="/bars-3.svg"
+  :icon="MazBars3"
   size="xl"
+  items-size="sm"
   :items="[
     { label: 'Action', onClick: () => toast.success('CLICKED') },
     { label: 'Link (href)', href: 'https://www.google.com', target: '_blank' },
@@ -230,23 +234,34 @@ You can provide an icon to replace the default chevron icon and disable the anim
   :close-on-click="false"
 />
 
-```html{2-7}
-<MazDropdown
-  color="primary"
-  fab
-  pastel
-  :chevron="false"
-  icon="/bars-3.svg"
-  size="xl"
-  :items="[
-    { label: 'Action', onClick: () => toast.success('CLICKED') },
-    { label: 'Link (href)', href: 'https://www.google.com', target: '_blank' },
-    { label: 'Router Link', to: { name: 'index' } },
-  ]"
-  :close-on-click="false"
-/>
+::: details View code
+
+```vue{7-13}
+<script lang="ts" setup>
+  import { MazBars3 } from '@maz-ui/icons/raw/MazBars3'
+</script>
+
+<template>
+  <MazDropdown
+    color="primary"
+    fab
+    pastel
+    :chevron="false"
+    :icon="MazBars3"
+    items-size="sm"
+    size="xl"
+    :items="[
+      { label: 'Action', onClick: () => toast.success('CLICKED') },
+      { label: 'Link (href)', href: 'https://www.google.com', target: '_blank' },
+      { label: 'Router Link', to: { name: 'index' } },
+    ]"
+    :close-on-click="false"
+  />
+</template>
 ```
 
+:::
+
 ## Custom slots
 
 ### Custom dropdown panel
@@ -654,6 +669,7 @@ type MazDropdownMenuItem = {
   import { ref, onMounted } from 'vue'
   import { useToast } from 'maz-ui/composables/useToast'
   import { MazChevronUpDown } from '@maz-ui/icons/raw/MazChevronUpDown'
+  import { MazBars3 } from '@maz-ui/icons/raw/MazBars3'
 
   const toast = useToast()
 

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

@@ -8,7 +8,7 @@ description: A flexible icon component that accepts Vue components, raw SVG stri
 {{ $frontmatter.description }}
 
 ::: tip
-Download the bundled [icons pack](#all-bundled-icons) or use [`@maz-ui/icons`](../guide/icons.md) for the full set.
+Download the bundled [icons pack](#all-bundled-icons) or use [`@maz-ui/icons`](../ecosystem/icons/.md) for the full set.
 :::
 
 ## How it works
@@ -220,7 +220,7 @@ This pack is the Heroicons set plus a few additions specific to maz-ui.
   Download pack
 </MazBtn>
 
-Source: [Heroicons](https://heroicons.com/) — see also the [icon set page](./../guide/icon-set.md).
+Source: [Heroicons](https://heroicons.com/) — see also the [icon set page](./../ecosystem/icons/icon-set.md).
 
 <div class="flex items-start flex-wrap gap-05">
   <div v-for="({ component, name }, i) in iconsList" :key="i" class="flex flex-col flex-center maz:p-2 maz:rounded-md maz:border">