@maz-ui/mcp 5.0.1-beta.0 → 5.1.0-beta.1

package/docs/{src/directives → directives}/tooltip.md

@@ -1,38 +1,20 @@
 ---
-title: vTooltip
-description: vTooltip is a Vue directive to display a text when the user hovers an element
+title: "vTooltip"
+description: "vTooltip is a Vue directive to display a text when the user hovers an element"
+package: "maz-ui"
+url: "https://maz-ui.com/directives/tooltip"
 ---
 
-# {{ $frontmatter.title }}
+# vTooltip
 
-{{ $frontmatter.description }}
+> vTooltip is a Vue directive to display a text when the user hovers an element
 
+- Package: `maz-ui`
+- Import: `import { vTooltip } from 'maz-ui/directives/vTooltip'`
+- Web: https://maz-ui.com/directives/tooltip
 
 ## Basic usage
 
-<ComponentDemo>
-  <p class="maz:mb-4">
-    Hover the buttons
-  </p>
-  <div
-    class="maz:flex maz:gap-3 maz:flex-wrap"
-  >
-    <MazBtn v-tooltip="'This is a top tooltip'">
-      Top
-    </MazBtn>
-    <MazBtn v-tooltip.right="'This is a top tooltip'">
-      Right
-    </MazBtn>
-    <MazBtn v-tooltip.left="'This is a top tooltip'">
-      Left
-    </MazBtn>
-    <MazBtn v-tooltip.bottom="'This is a top tooltip'">
-      Bottom
-    </MazBtn>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 import { vTooltip } from 'maz-ui/directives'
@@ -54,49 +36,8 @@ import { vTooltip } from 'maz-ui/directives'
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Colors
 
-<ComponentDemo>
-  <p class="maz:mb-4">
-    Hover the buttons
-  </p>
-  <div
-    class="maz:flex maz:gap-3 maz:flex-wrap"
-  >
-    <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'primary' }">
-      Primary
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'secondary' }" color="secondary">
-      Secondary
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'accent' }" color="accent">
-      Accent
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'success' }" color="success">
-      Success
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'warning' }" color="warning">
-      Warning
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'destructive' }" color="destructive">
-      Destructive
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'info' }" color="info">
-      Info
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'contrast' }" color="contrast">
-      Contrast
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'surface' }" color="surface">
-      Background
-    </MazBtn>
-  </div>
-
-<template #code>
-
 ```html
 <MazBtn v-tooltip="{ text: 'Tooltip text', color: 'primary' }">
   Primary
@@ -135,57 +76,10 @@ import { vTooltip } from 'maz-ui/directives'
 </MazBtn>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Position
 
 You can change the position of the tooltip by passing a `position` option or using the directive modifier (e.g. `v-tooltip.top`).
 
-<ComponentDemo>
-  <div
-    class="maz:flex maz:gap-3 maz:flex-wrap"
-  >
-    <MazBtn v-tooltip.bottom="{ text: 'Tooltip text' }">
-      Bottom
-    </MazBtn>
-    <MazBtn v-tooltip.left="{ text: 'Tooltip text' }">
-      Left
-    </MazBtn>
-    <MazBtn v-tooltip.right="{ text: 'Tooltip text' }">
-      Right
-    </MazBtn>
-    <MazBtn v-tooltip.top="{ text: 'Tooltip text' }">
-      Top
-    </MazBtn>
-    <MazBtn v-tooltip.top-start="{ text: 'Tooltip text' }">
-      Top start
-    </MazBtn>
-    <MazBtn v-tooltip.top-end="{ text: 'Tooltip text' }">
-      Top end
-    </MazBtn>
-    <MazBtn v-tooltip.bottom-start="{ text: 'Tooltip text' }">
-      Bottom start
-    </MazBtn>
-    <MazBtn v-tooltip.bottom-end="{ text: 'Tooltip text' }">
-      Bottom end
-    </MazBtn>
-    <MazBtn v-tooltip.left-start="{ text: 'Tooltip text' }">
-      Left start
-    </MazBtn>
-    <MazBtn v-tooltip.left-end="{ text: 'Tooltip text' }">
-      Left end
-    </MazBtn>
-    <MazBtn v-tooltip.right-start="{ text: 'Tooltip text' }">
-      Right start
-    </MazBtn>
-    <MazBtn v-tooltip.right-end="{ text: 'Tooltip text' }">
-      Right end
-    </MazBtn>
-  </div>
-
-<template #code>
-
 ```html
 <MazBtn v-tooltip.bottom="{ text: 'Tooltip text' }">
   Bottom
@@ -220,54 +114,22 @@ You can change the position of the tooltip by passing a `position` option or usi
 </MazBtn>
 ```
 
-  </template>
-</ComponentDemo>
-
-
 ## HTML content
 
 You can also use HTML content in the tooltip by passing a string to the `html` option.
 
-<ComponentDemo>
-  <div
-    class="maz:flex maz:gap-3 maz:flex-wrap"
-  >
-    <MazBtn v-tooltip="{ html: '<strong>Tooltip</strong> text <br> with <br> line breaks' }">
-      HTML
-    </MazBtn>
-  </div>
-
-<template #code>
-
 ```html
 <MazBtn v-tooltip="{ html: '<strong>Tooltip</strong> text <br> with <br> line breaks' }">
   HTML
 </MazBtn>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Customization
 
 You can customize the tooltip by passing a `panelClass` or `panelStyle` option.
 
-<ComponentDemo>
-  <div
-    class="maz:flex maz:gap-3 maz:flex-wrap"
-  >
-    <MazBtn v-tooltip="{ text: 'Custom panel class', panelClass: 'maz:text-red-500!' }">
-      panelClass
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Custom panel style', panelStyle: 'background-color: red; color: white;' }">
-      panelStyle
-    </MazBtn>
-  </div>
-
-<template #code>
-
 ```html
-<MazBtn v-tooltip="{ text: 'Custom panel class', panelClass: 'maz:text-red-500!' }">
+<MazBtn v-tooltip="{ text: 'Custom panel class', panelClass: 'text-red-500!' }">
   panelClass
 </MazBtn>
 <MazBtn v-tooltip="{ text: 'Custom panel style', panelStyle: 'background-color: red; color: white;' }">
@@ -275,9 +137,6 @@ You can customize the tooltip by passing a `panelClass` or `panelStyle` option.
 </MazBtn>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Trigger
 
 You can change the trigger mode of the tooltip by passing a `trigger` option.
@@ -286,23 +145,6 @@ The default trigger is `hover`.
 
 The `adaptive` trigger will use the `click` trigger on touch devices (mobile and tablet) and the `hover` trigger on non-touch devices (desktop).
 
-<ComponentDemo>
-  <div
-    class="maz:flex maz:gap-3 maz:flex-wrap"
-  >
-    <MazBtn v-tooltip="{ text: 'Tooltip text', trigger: 'click' }">
-      Click
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', trigger: 'hover' }">
-      Hover
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', trigger: 'adaptive' }">
-      Adaptive
-    </MazBtn>
-  </div>
-
-<template #code>
-
 ```html
 <MazBtn v-tooltip="{ text: 'Tooltip text', trigger: 'click' }">
   Click
@@ -317,33 +159,10 @@ The `adaptive` trigger will use the `click` trigger on touch devices (mobile and
 </MazBtn>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Offset
 
 The `offset` (in px) option allows you to adjust the position of the tooltip relative to the original element.
 
-<ComponentDemo>
-  <div
-    class="maz:flex maz:gap-3 maz:flex-wrap"
-  >
-    <MazBtn v-tooltip="{ text: 'Tooltip text', offset: 0 }">
-      0
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', offset: 10 }">
-      10
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', offset: 20 }">
-      20
-    </MazBtn>
-    <MazBtn v-tooltip="{ text: 'Tooltip text', offset: 40 }">
-      40
-    </MazBtn>
-  </div>
-
-<template #code>
-
 ```html
 <MazBtn v-tooltip="{ text: 'Tooltip text', offset: 0 }">
   0
@@ -362,23 +181,8 @@ The `offset` (in px) option allows you to adjust the position of the tooltip rel
 </MazBtn>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Open programmatically
 
-<ComponentDemo>
-  <div class="maz:flex maz:gap-3 maz:flex-wrap">
-    <MazBtn v-tooltip.top="{ text: 'Tooltip text', open: open }">
-      Primary
-    </MazBtn>
-    <MazBtn @click="open = !open" color="secondary">
-      Toggle tooltip
-    </MazBtn>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
   import { vTooltip } from 'maz-ui/directives'
@@ -397,12 +201,9 @@ The `offset` (in px) option allows you to adjust the position of the tooltip rel
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Conditionally disable
 
-Pass `false`, `null` or `undefined` as the binding value to silently disable the tooltip — no popover instance is created, no listeners are attached, and no warning is logged. This is the recommended way to skip the tooltip on the fly without conditionally rendering two different elements:
+Pass `false`, `null` or `undefined` as the binding value to silently disable the tooltip - no popover instance is created, no listeners are attached, and no warning is logged. This is the recommended way to skip the tooltip on the fly without conditionally rendering two different elements:
 
 ```vue
 <script lang="ts" setup>
@@ -444,7 +245,7 @@ app.mount('#app')
 
 ### Nuxt
 
-Please refer to the [Nuxt module documentation](./../ecosystem/nuxt.md) for more information.
+Please refer to the [Nuxt module documentation](../ecosystem/nuxt.md) for more information.
 
 ## Types
 
@@ -495,9 +296,3 @@ type VTooltipBindingValue
   = | string
     | VTooltipOptions
 ```
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import { vTooltip } from 'maz-ui/directives/vTooltip'
-  const open = ref(true)
-</script>

package/docs/{src/directives → directives}/zoom-img.md

@@ -1,11 +1,17 @@
 ---
-title: vZoomImg
-description: vZoomImg is a Vue directive to enlarge an image like a modal on click, if you have several images, you can pass them like a carousel
+title: "vZoomImg"
+description: "vZoomImg is a Vue directive to enlarge an image like a modal on click, if you have several images, you can pass them like a carousel"
+package: "maz-ui"
+url: "https://maz-ui.com/directives/zoom-img"
 ---
 
-# {{ $frontmatter.title }}
+# vZoomImg
 
-{{ $frontmatter.description }}
+> vZoomImg is a Vue directive to enlarge an image like a modal on click, if you have several images, you can pass them like a carousel
+
+- Package: `maz-ui`
+- Import: `import { vZoomImg } from 'maz-ui/directives/vZoomImg'`
+- Web: https://maz-ui.com/directives/zoom-img
 
 > Can be mixed with [vLazyImg](./lazy-img.md) directive
 
@@ -13,18 +19,6 @@ description: vZoomImg is a Vue directive to enlarge an image like a modal on cli
 
 > Click on the photo
 
-<MazCard overflow-hidden>
-  <img
-    src="https://placedog.net/1500/1000"
-    v-zoom-img="{ src: 'https://placedog.net/1500/1000' }"
-  />
-</MazCard>
-<br />
-<br />
-<MazBtn v-zoom-img="{ src: 'https://placedog.net/1000/500' }">
-  Show photo
-</MazBtn>
-
 ```vue
 <script lang="ts" setup>
 import { vZoomImg } from 'maz-ui/directives'
@@ -46,27 +40,6 @@ import { vZoomImg } from 'maz-ui/directives'
 
 ## Options
 
-<br />
-
-<MazCard overflow-hidden>
-  <img
-    src="https://placedog.net/1200/800"
-    v-zoom-img="zoomImgBinding"
-  />
-</MazCard>
-
-<script lang="ts" setup>
-  import { vZoomImg } from 'maz-ui/directives/vZoomImg'
-
-  const zoomImgBinding: vZoomImgBinding = {
-    src: 'https://placedog.net/1200/800',
-    alt: 'alt image',
-    blur: false,
-    scale: false,
-    disabled: false
-  }
-</script>
-
 ```vue
 <script lang="ts" setup>
 import { vZoomImg, type vZoomImgBindingValue } from 'maz-ui/directives'
@@ -107,7 +80,7 @@ app.mount('#app')
 
 ### Nuxt
 
-Please refer to the [Nuxt module documentation](./../ecosystem/nuxt.md) for more information.
+Please refer to the [Nuxt module documentation](../ecosystem/nuxt.md) for more information.
 
 ## Types
 

package/docs/{src/ecosystem → ecosystem}/eslint-config.md

@@ -1,9 +1,17 @@
 ---
-title: '@maz-ui/eslint-config'
-description: ESLint flat-config preset for Vue/Nuxt/JS/TS projects, layered on @antfu/eslint-config with SonarJS, Tailwind v3+v4 and a11y add-ons.
+title: "@maz-ui/eslint-config"
+description: "ESLint flat-config preset for Vue/Nuxt/JS/TS projects, layered on @antfu/eslint-config with SonarJS, Tailwind v3+v4 and a11y add-ons."
+package: "@maz-ui/eslint-config"
+url: "https://maz-ui.com/ecosystem/eslint-config"
 ---
 
-# {{ $frontmatter.title }}
+# @maz-ui/eslint-config
+
+> ESLint flat-config preset for Vue/Nuxt/JS/TS projects, layered on @antfu/eslint-config with SonarJS, Tailwind v3+v4 and a11y add-ons.
+
+- Package: `@maz-ui/eslint-config`
+- Import: `import { defineConfig } from '@maz-ui/eslint-config'`
+- Web: https://maz-ui.com/ecosystem/eslint-config
 
 `@maz-ui/eslint-config` ships an opinionated ESLint **flat config** for the kind of stack maz-ui itself uses: TypeScript, Vue 3 / Nuxt 3, optional Tailwind CSS (v3 or v4), and tests. It is built on top of [`@antfu/eslint-config`](https://github.com/antfu/eslint-config) so you get a battle-tested baseline, then layered with quality rules from [SonarJS](https://github.com/SonarSource/eslint-plugin-sonarjs), Tailwind rules from [`eslint-plugin-better-tailwindcss`](https://github.com/schoero/eslint-plugin-better-tailwindcss), and accessibility rules from [`eslint-plugin-vuejs-accessibility`](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility).
 
@@ -53,7 +61,7 @@ export default defineConfig({
     'vue/custom-event-name-casing': ['error', 'kebab-case'],
   },
 
-  // Log verbosity — see "Logging" below.
+  // Log verbosity - see "Logging" below.
   logLevel: 'default',
 })
 ```
@@ -73,9 +81,9 @@ The preset prints a titled box summarizing what it resolved (typescript, vue, ta
 defineConfig({ logLevel: 'debug' })
 ```
 
-The default is **`'default'` in interactive terminals (TTY) and `'silent'` otherwise** — CI, lint-staged, pipes, and JSON / SARIF formatters all write to stdout, where the box would corrupt machine-readable output. `logLevel` always wins when set explicitly.
+The default is **`'default'` in interactive terminals (TTY) and `'silent'` otherwise** - CI, lint-staged, pipes, and JSON / SARIF formatters all write to stdout, where the box would corrupt machine-readable output. `logLevel` always wins when set explicitly.
 
-You can also append raw flat-config items as additional arguments — they merge after the built-in configs:
+You can also append raw flat-config items as additional arguments - they merge after the built-in configs:
 
 ```ts
 export default defineConfig(
@@ -89,7 +97,7 @@ export default defineConfig(
 
 ## Tailwind support
 
-Powered by [`eslint-plugin-better-tailwindcss`](https://github.com/schoero/eslint-plugin-better-tailwindcss) — supports both **Tailwind v3 and v4**, and ESLint 7→10.
+Powered by [`eslint-plugin-better-tailwindcss`](https://github.com/schoero/eslint-plugin-better-tailwindcss) - supports both **Tailwind v3 and v4**, and ESLint 7→10.
 
 The `tailwindcss` option accepts several shapes:
 
@@ -98,30 +106,31 @@ The `tailwindcss` option accepts several shapes:
 | `false` *(default)* | Disabled. |
 | `true` | Same as `'recommended'` with default settings. |
 | `'recommended'` | Stylistic + correctness rules. |
-| `'stylistic'` | Formatting rules only — class order, line wrapping, no duplicate classes, etc. |
-| `'correctness'` | Validation rules only — `no-unknown-classes`, `no-conflicting-classes`. |
+| `'stylistic'` | Formatting rules only - class order, line wrapping, no duplicate classes, etc. |
+| `'correctness'` | Validation rules only - `no-unknown-classes`, `no-conflicting-classes`. |
 | `MazTailwindcssOptions` | Pick a preset and pass plugin settings (Tailwind config path, prefix entry point, …). |
 
 ```ts
 defineConfig({
   tailwindcss: {
     preset: 'recommended',
-    // Tailwind v4 — path to the CSS that does `@import "tailwindcss" prefix(maz)`.
+    // Tailwind v4 - path to the CSS that does `@import "tailwindcss" prefix(maz)`.
     entryPoint: 'src/main.css',
-    // Tailwind v3 instead — path to your config file.
+    // Tailwind v3 instead - path to your config file.
     // tailwindConfig: 'tailwind.config.ts',
     // Tailwind v4: detect custom @layer components classes (cards, btns, …).
     detectComponentClasses: true,
     // Monorepo: directory used to resolve `tailwindcss` and the config file.
     cwd: 'apps/web',
-    // Custom `maz/tailwind-no-arbitrary-px` rule — see "Custom rules" below.
+    // Custom `maz/tailwind-no-arbitrary-px` rule - see "Custom rules" below.
     noArbitraryPx: true,
   },
 })
 ```
 
-::: warning Plugin needs to know your Tailwind setup
-The plugin's correctness rules (`no-unknown-classes`, `no-conflicting-classes`) auto-resolve your Tailwind installation. Without `entryPoint` (v4) or `tailwindConfig` (v3), the plugin falls back to the **default Tailwind config** and won't know about your prefix, custom utilities, or theme tokens — which produces a flood of false positives in non-vanilla setups.
+**Warning: Plugin needs to know your Tailwind setup**
+
+The plugin's correctness rules (`no-unknown-classes`, `no-conflicting-classes`) auto-resolve your Tailwind installation. Without `entryPoint` (v4) or `tailwindConfig` (v3), the plugin falls back to the **default Tailwind config** and won't know about your prefix, custom utilities, or theme tokens - which produces a flood of false positives in non-vanilla setups.
 
 If you customize Tailwind in any meaningful way (prefix, extend theme, custom utilities), set `entryPoint` or `tailwindConfig` explicitly. If you hit false positives anyway, downgrade to `'stylistic'` (formatting only) or disable individual rules:
 
@@ -133,21 +142,20 @@ defineConfig({
   },
 })
 ```
-:::
 
 The plugin recognizes the most common class-name utilities out of the box (`clsx`, `cn`, `tw-merge`, `cva`, `tv`, …); see the [plugin docs](https://github.com/schoero/eslint-plugin-better-tailwindcss) for the full list and how to register your own.
 
 ## Custom rules
 
-`@maz-ui/eslint-config` ships its own ESLint plugin under the **`maz/*`** namespace. Rules are grouped by category — `maz/tailwind-*` today, with room for `maz/js-*` and others as they get added.
+`@maz-ui/eslint-config` ships its own ESLint plugin under the **`maz/*`** namespace. Rules are grouped by category - `maz/tailwind-*` today, with room for `maz/js-*` and others as they get added.
 
 ### `maz/tailwind-no-arbitrary-px`
 
 Forbids `px` units inside Tailwind arbitrary value classes (`w-[16px]`, `m-[-16px]`, `[gap:24px]`, …) and **autofixes** them to `rem` (or `em`) using your project's root font-size. Whitespace inside brackets (e.g. `[up to 100px]`) is left alone, so plain prose is never rewritten by accident.
 
-::: info Registered only when `tailwindcss` is enabled
-The `maz` plugin and the `maz/tailwind-*` rules are only added to the flat-config when `tailwindcss` is set to anything other than `false`. With `tailwindcss: false` *(default)*, neither the plugin nor the rule appear in the resolved config — keeping the preset zero-cost for non-Tailwind projects. To use the rule without opting into the full Tailwind preset, register `mazPlugin` manually (see [Use the plugin directly](#use-the-plugin-directly)).
-:::
+**Note: Registered only when `tailwindcss` is enabled**
+
+The `maz` plugin and the `maz/tailwind-*` rules are only added to the flat-config when `tailwindcss` is set to anything other than `false`. With `tailwindcss: false` *(default)*, neither the plugin nor the rule appear in the resolved config - keeping the preset zero-cost for non-Tailwind projects. To use the rule without opting into the full Tailwind preset, register `mazPlugin` manually (see Use the plugin directly).
 
 When `tailwindcss` is on, the rule is enabled with defaults. You can tune it two ways:
 
@@ -171,9 +179,9 @@ defineConfig({
   tailwindcss: {
     preset: 'recommended',
     noArbitraryPx: {
-      baseFontSize: 16, // default — divide px by this to get rem
-      unit: 'rem', // default — output unit ('rem' | 'em')
-      severity: 'error', // default — 'off' | 'warn' | 'error'
+      baseFontSize: 16, // default - divide px by this to get rem
+      unit: 'rem', // default - output unit ('rem' | 'em')
+      severity: 'error', // default - 'off' | 'warn' | 'error'
     },
   },
 })
@@ -224,13 +232,13 @@ export default [{
 
 ## What it includes
 
-- **Antfu base** — TypeScript-aware rules, Stylistic formatting, modern import order.
-- **SonarJS** — code quality and complexity heuristics, with a relaxed set for `*.spec.ts` / `*.test.ts`.
-- **Vue rules** (when Vue/Nuxt is detected) — block-tag order, naming conventions, template a11y.
-- **Tailwind plugin** (opt-in) — class ordering, duplicate / deprecated / unknown / conflicting class detection — see [Tailwind support](#tailwind-support).
-- **`maz/*` custom rules** — namespaced ESLint plugin shipped with the preset; see [Custom rules](#custom-rules).
-- **Markdown** — prose linting baseline.
-- **vueAccessibility** (opt-in) — `eslint-plugin-vuejs-accessibility` rules with the AudioWorklet globals fix.
+- **Antfu base** - TypeScript-aware rules, Stylistic formatting, modern import order.
+- **SonarJS** - code quality and complexity heuristics, with a relaxed set for `*.spec.ts` / `*.test.ts`.
+- **Vue rules** (when Vue/Nuxt is detected) - block-tag order, naming conventions, template a11y.
+- **Tailwind plugin** (opt-in) - class ordering, duplicate / deprecated / unknown / conflicting class detection - see Tailwind support.
+- **`maz/*` custom rules** - namespaced ESLint plugin shipped with the preset; see Custom rules.
+- **Markdown** - prose linting baseline.
+- **vueAccessibility** (opt-in) - `eslint-plugin-vuejs-accessibility` rules with the AudioWorklet globals fix.
 
 ## Advanced
 

package/docs/ecosystem/icons/icon-set.md

@@ -0,0 +1,25 @@
+---
+title: "Icon Set"
+description: "Search and copy the 860+ icons of @maz-ui/icons, with the naming convention and the static, lazy and raw imports of each icon"
+package: "@maz-ui/icons"
+url: "https://maz-ui.com/ecosystem/icons/icon-set"
+---
+
+# Icon Set
+
+> Search and copy the 860+ icons of @maz-ui/icons, with the naming convention and the static, lazy and raw imports of each icon
+
+- Package: `@maz-ui/icons`
+- Web: https://maz-ui.com/ecosystem/icons/icon-set
+
+The library includes **860+ icons**
+
+## Icon Naming Convention
+
+All icons follow a consistent naming pattern:
+
+- Static Vue components: `Maz` + PascalCase (e.g., `MazUserCircle`)
+- Lazy Vue components: `LazyMaz` + PascalCase (e.g., `LazyMazUserCircle`)
+- SVG files: kebab-case (e.g., `user-circle.svg`)
+
+## Find your icon

package/docs/{src/ecosystem → ecosystem}/icons/index.md

@@ -1,5 +1,18 @@
+---
+title: "@maz-ui/icons"
+description: "The @maz-ui/icons package provides 860+ SVG icons (interface icons, brand logos, country flags) as tree-shakable Vue components, lazy components or raw SVG strings"
+package: "@maz-ui/icons"
+url: "https://maz-ui.com/ecosystem/icons/"
+---
+
 # @maz-ui/icons
 
+> The @maz-ui/icons package provides 860+ SVG icons (interface icons, brand logos, country flags) as tree-shakable Vue components, lazy components or raw SVG strings
+
+- Package: `@maz-ui/icons`
+- Import: `import { MazCheck } from '@maz-ui/icons/static/MazCheck'` or `import { MazIconsResolver } from '@maz-ui/icons/resolvers'`
+- Web: https://maz-ui.com/ecosystem/icons/
+
 A comprehensive collection of **860 beautiful SVG icons** ready for use in your Vue.js applications. Built with performance and flexibility in mind, these icons are optimized for modern web development.
 
 ## Features
@@ -18,8 +31,6 @@ A comprehensive collection of **860 beautiful SVG icons** ready for use in your
 
 ### Basic Installation
 
-::: code-group
-
 ```bash [npm]
 npm install @maz-ui/icons
 ```
@@ -32,8 +43,6 @@ yarn add @maz-ui/icons
 pnpm add @maz-ui/icons
 ```
 
-:::
-
 ### With Auto-import Support (Recommended)
 
 For the best developer experience with auto-imports:
@@ -56,8 +65,8 @@ npm install @maz-ui/icons vite-svg-loader
 
 Import and use icons as Vue components. Icons are available in two variants:
 
-- **Static** (default) — eagerly loaded, rendered immediately with no async overhead
-- **Lazy** — loaded on demand via `defineAsyncComponent`, ideal for optimizing bundle size
+- **Static** (default) - eagerly loaded, rendered immediately with no async overhead
+- **Lazy** - loaded on demand via `defineAsyncComponent`, ideal for optimizing bundle size
 
 #### Static Icons (default)
 
@@ -97,7 +106,8 @@ import { MazUser } from '@maz-ui/icons/lazy/MazUser'
 </template>
 ```
 
-::: tip Sub-path imports for better tree-shaking
+**Tip: Sub-path imports for better tree-shaking**
+
 You can also import individual icons directly for optimal tree-shaking:
 
 ```ts
@@ -107,15 +117,13 @@ import { MazCheck } from '@maz-ui/icons/static/MazCheck'
 // Lazy Vue component (individual file)
 import { MazCheck } from '@maz-ui/icons/lazy/MazCheck'
 
-// Raw SVG string (individual file) — new in v5
+// Raw SVG string (individual file) - new in v5
 import { MazCheck } from '@maz-ui/icons/raw/MazCheck'
 ```
 
-:::
-
 #### Raw SVG strings (new in v5)
 
-Each icon is also exported as a **raw SVG string** under the `raw/` subpath. Pass it to `<MazIcon :icon="…" />` to inline the SVG without paying the cost of a Vue component or an async chunk — useful for icons rendered hundreds of times on a page (lists, tables) or for one-off `innerHTML` use.
+Each icon is also exported as a **raw SVG string** under the `raw/` subpath. Pass it to `<MazIcon :icon="…" />` to inline the SVG without paying the cost of a Vue component or an async chunk - useful for icons rendered hundreds of times on a page (lists, tables) or for one-off `innerHTML` use.
 
 ```vue
 <script setup lang="ts">
@@ -149,12 +157,10 @@ Never worry about imports again with automatic component resolution.
 
 #### Setup unplugin-vue-components
 
-::: warning Troubleshooting
+**Warning: Troubleshooting**
 
 If your are already using [`MazComponentsResolver`](../../guide/resolvers.md#mazcomponentsresolver), you should place `MazIconsResolver` before `MazComponentsResolver` in the `resolvers` array.
 
-:::
-
 `vite.config.ts`
 
 ```ts
@@ -187,7 +193,7 @@ export default defineConfig({
     <MazUser class="nav-icon" />
     <MazSettings class="nav-icon" />
 
-    <!-- Lazy icons (async loaded) — prefix with "Lazy" -->
+    <!-- Lazy icons (async loaded) - prefix with "Lazy" -->
     <LazyMazLogout class="nav-icon" />
   </div>
 </template>