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

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

@@ -0,0 +1,109 @@
+---
+title: "MazCircularProgressBar"
+description: "MazCircularProgressBar is a standalone component"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-circular-progress-bar"
+---
+
+# MazCircularProgressBar
+
+> MazCircularProgressBar is a standalone component
+
+- Package: `maz-ui`
+- Import: `import MazCircularProgressBar from 'maz-ui/components/MazCircularProgressBar'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-circular-progress-bar
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+import MazCircularProgressBar from 'maz-ui/components/MazCircularProgressBar'
+</script>
+
+<template>
+  <MazCircularProgressBar :percentage="75" suffix="%" />
+</template>
+```
+
+## Size
+
+The size of the component can be changed by passing the `size` prop. The value could be a string in px, em or rem.
+
+```vue
+<MazCircularProgressBar :percentage="75" suffix="%" size="3em" />
+
+<MazCircularProgressBar :percentage="75" suffix="%" size="100px" />
+
+<MazCircularProgressBar :percentage="75" suffix="%" size="10rem" />
+
+<MazCircularProgressBar :percentage="75" suffix="%" size="15rem" />
+```
+
+## Duration
+
+The duration of the animation can be changed by passing the `duration` prop. The value could be a number in milliseconds.
+
+```vue
+<MazCircularProgressBar :percentage="75" :duration="5000" />
+```
+
+## Color
+
+```vue
+<MazCircularProgressBar :percentage="75" :duration="5000" />
+```
+
+## Auto-color
+
+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%.
+
+```vue
+<MazCircularProgressBar :percentage="0" auto-color size="9rem" />
+
+<MazCircularProgressBar :percentage="25" auto-color size="9rem" />
+
+<MazCircularProgressBar :percentage="50" auto-color size="9rem" />
+
+<MazCircularProgressBar :percentage="100" auto-color size="9rem" />
+```
+
+## Slot
+
+Replace the percentage value by a custom slot.
+
+Obviously, the "counter animation" will not work in this case.
+
+```vue
+<MazCircularProgressBar :percentage="75" :duration="5000" />
+```
+
+## MazCircularProgressBar API
+
+`import MazCircularProgressBar from 'maz-ui/components/MazCircularProgressBar'`
+
+### Props
+
+- `percentage` (`number`, required): The percentage value of the progress bar.
+- `size` (`` `${number}rem` | `${number}px` | `${number}em` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | `${number}%` | `${number}ch` | `${number}cm` | `${number}mm` | `${number}in` | `${number}ex` | `${number}pc` | `${number... ``, default: `"10em"`): The size of the progress bar.
+- `duration` (`number`, default: `1000`): Duration of the animation in milliseconds.
+- `delay` (`number`, default: `100`): Delay before the animation starts in milliseconds.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`): The color of the progress bar.
+- `auto-color` (`boolean`, default: `false`): Auto color based on the count (destructive, warning, success).
+- `prefix` (`string`): Suffix to display next to the number.
+- `suffix` (`string`): Suffix to display next to the number.
+- `stroke-linecap` (`"square" | "butt" | "round" | "inherit"`, default: `"round"`): The stroke-linecap style.
+- `stroke-width` (`Numberish`, default: `6`): The stroke width.
+- `stroke` (`string`): The stroke color Use this prop to override the gradient color You can use a color name or a color code.
+- `success-percentage` (`number`, default: `100`): The percentage value of the success level - The progress circle will be filled with the success color when the percentage is greater than or equal to this value.
+- `warning-percentage` (`number`, default: `75`): The percentage value of the warning level - The progress circle will be filled with the warning color when the percentage is greater than or equal to this value.
+- `danger-percentage` (`number`, default: `50`): The percentage value of the danger level - The progress circle will be filled with the danger color when the percentage is greater than or equal to this value.
+- `once` (`boolean`, default: `true`): Play the animation only once.
+
+### Slots
+
+- `#default`: Default slot - Replace the percaentage value
+- `#prefix`: Prefix slot - Add a prefix next to the number (e.g: "$")
+- `#suffix`: Suffix slot - Add a suffix next to the number (e.g: "%")

package/docs/{src/components → components}/maz-code-highlight.md

@@ -1,20 +1,25 @@
 ---
-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.
+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."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-code-highlight"
 ---
 
-# {{ $frontmatter.title }}
+# MazCodeHighlight
 
-{{ $frontmatter.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.
 
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+- Package: `maz-ui`
+- Import: `import MazCodeHighlight from 'maz-ui/components/MazCodeHighlight'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-code-highlight
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
 
 ## Installation requirement
 
 Install [`shiki`](https://shiki.style) in your project to enable highlighting:
 
-::: code-group
-
 ```bash [pnpm]
 pnpm add shiki
 ```
@@ -27,17 +32,10 @@ npm install shiki
 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" />
@@ -48,18 +46,10 @@ If `shiki` is not installed, the component falls back to a plain `<pre><code>` b
 </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>
@@ -70,18 +60,10 @@ The default slot text is used as source code when the `code` prop is not provide
 </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" />
@@ -101,18 +83,10 @@ Pass any valid [shiki language identifier](https://shiki.style/languages) to the
 </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" />
@@ -123,9 +97,6 @@ Override the auto-detected theme with any [shiki built-in theme](https://shiki.s
 </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.
@@ -134,28 +105,15 @@ A copy button is displayed in the top-right corner on hover (or when focused via
 
 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>
+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.
 
 ```vue
 <template>
@@ -167,17 +125,9 @@ Use `copyValue` when the displayed source differs from what should be copied —
 </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>
+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`).
 
 ```vue
 <template>
@@ -185,22 +135,10 @@ Set `:rounded="false"` to render the highlighted block with squared corners —
 </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
@@ -214,20 +152,4 @@ The copy button's aria-label and tooltip come from the `@maz-ui/translations` pa
 </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-->
+For app-wide translations, set up the [maz-ui translations plugin](../ecosystem/translations.md) and the component will pick up your locale automatically.

package/docs/components/maz-container.md

@@ -0,0 +1,241 @@
+---
+title: "MazContainer"
+description: "MazContainer is a lightweight component to wrap content with optional header, border, elevation, and rounded corners - a simpler alternative to MazCard"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-container"
+---
+
+# MazContainer
+
+> MazContainer is a lightweight component to wrap content with optional header, border, elevation, and rounded corners - a simpler alternative to MazCard
+
+- Package: `maz-ui`
+- Import: `import MazContainer from 'maz-ui/components/MazContainer'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-container
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+**Tip:**
+
+MazContainer is designed to be a lighter alternative to [MazCard](./maz-card.md). Use it when you need a simple container with basic styling options without the extra features like galleries, collapsible content, or actions.
+
+## Basic usage
+
+```vue
+<template>
+  <MazContainer>
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
+  </MazContainer>
+</template>
+
+<script lang="ts" setup>
+  import MazContainer from 'maz-ui/components/MazContainer'
+</script>
+```
+
+## With title
+
+Add a header with a title using the `title` prop or the `title` slot.
+
+```vue
+<template>
+  <MazContainer title="Section Title">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
+  </MazContainer>
+</template>
+```
+
+## With icons
+
+Add icons to the header using `start-icon` and `end-icon` props.
+
+```vue
+<template>
+  <MazContainer title="Settings" start-icon="/cog-6-tooth.svg">
+    Configure your application settings here.
+  </MazContainer>
+
+  <MazContainer title="User Profile" start-icon="/user.svg" end-icon="/pencil.svg">
+    View and edit your profile information.
+  </MazContainer>
+</template>
+```
+
+`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
+
+Add shadow to make the container stand out.
+
+```vue
+<template>
+  <MazContainer elevation :bordered="false">
+    Container with elevation effect and no border.
+  </MazContainer>
+</template>
+```
+
+### Bordered
+
+By default, the container has a border. You can disable it.
+
+```vue
+<template>
+  <MazContainer title="With border (default)">
+    This container has a border.
+  </MazContainer>
+
+  <MazContainer title="Without border" :bordered="false">
+    This container has no border.
+  </MazContainer>
+</template>
+```
+
+### Transparent
+
+Remove the background color with the `transparent` prop.
+
+```vue
+<template>
+  <MazContainer title="Transparent container" transparent>
+    This container has a transparent background.
+  </MazContainer>
+</template>
+```
+
+### Rounded sizes
+
+Customize the border radius with the `rounded-size` prop.
+
+```vue
+<template>
+  <MazContainer v-for="size in roundedSizes" :key="size" :rounded-size="size">
+    {{ size }}
+  </MazContainer>
+</template>
+
+<script lang="ts" setup>
+  import MazContainer from 'maz-ui/components/MazContainer'
+
+  const roundedSizes = ['none', 'sm', 'md', 'lg', 'xl', 'full']
+</script>
+```
+
+### No padding
+
+Remove internal padding with `:padding="false"`.
+
+```vue
+<template>
+  <MazContainer title="No padding" :padding="false">
+    Content without container padding - useful for custom layouts.
+  </MazContainer>
+</template>
+```
+
+## Full width
+
+Use the `block` prop to make the container take full width.
+
+```vue
+<template>
+  <MazContainer title="Full width container" block>
+    This container spans the full width of its parent.
+  </MazContainer>
+</template>
+```
+
+## Custom header
+
+Use the `header` slot to fully customize the header, or use `title`, `icon-start`, and `icon-end` slots for more granular control.
+
+```vue
+<template>
+  <MazContainer>
+    <template #header>
+      <div class="flex items-center justify-between w-full px-4 py-3 bg-primary text-primary-foreground">
+        <span class="font-semibold">Custom Header</span>
+        <MazBadge size="sm" color="white" class="text-primary">
+          New
+        </MazBadge>
+      </div>
+    </template>
+    Content with a fully customized header.
+  </MazContainer>
+</template>
+```
+
+## Combining options
+
+```vue
+<template>
+  <MazContainer
+    title="Dashboard Overview"
+    start-icon="/chart-bar.svg"
+    elevation
+    :bordered="false"
+    rounded-size="xl"
+    block
+  >
+    <div class="flex gap-4 flex-wrap">
+      <MazContainer class="flex-1 min-w-[150px]">
+        <p class="text-muted text-sm">Users</p>
+        <p class="text-2xl font-bold">1,234</p>
+      </MazContainer>
+      <MazContainer class="flex-1 min-w-[150px]">
+        <p class="text-muted text-sm">Revenue</p>
+        <p class="text-2xl font-bold">$12.5k</p>
+      </MazContainer>
+      <MazContainer class="flex-1 min-w-[150px]">
+        <p class="text-muted text-sm">Orders</p>
+        <p class="text-2xl font-bold">567</p>
+      </MazContainer>
+    </div>
+  </MazContainer>
+</template>
+```
+
+## MazContainer API
+
+`import MazContainer from 'maz-ui/components/MazContainer'`
+
+### Props
+
+- `title` (`string`): Title of the card in header.
+- `elevation` (`boolean`, default: `false`): Add elevation to the component.
+- `padding` (`boolean`, default: `true`): Add padding to the content.
+- `bordered` (`boolean`, default: `true`): Add border to the component.
+- `rounded-size` (`MazRoundedSize`, default: `'md'`): Size of the rounded. Values: `'none'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'full'` (non exhaustive).
+- `transparent` (`boolean`, default: `false`): Remove background color.
+- `overflow-hidden` (`boolean`, default: `true`): Hide overflow.
+- `start-icon` (`any`): Icon displayed on the inline-start edge of the header (left in LTR, right in RTL). Accepts a bare value (Vue component, raw SVG string, URL or `data:` URI) or a full `MazIconProps` object.
+- `end-icon` (`any`): Icon displayed on the inline-end edge of the header (right in LTR, left in RTL). Accepts a bare value or a full `MazIconProps` object.
+- `icon-size` (`MazIconSize`, default: `"md"`): Size of the icon.
+- `block` (`boolean`, default: `false`): Display the container in full width.
+- `content-class` (`string`): Additional class to add to the content wrapper.
+
+### Slots
+
+- `#header`: Replace the header
+- `#icon-start`: inline-start edge of the header (left in LTR, right in RTL)
+- `#title`: title
+- `#icon-end`: inline-end edge of the header (right in LTR, left in RTL)
+- `#default`: content of the container