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

package/docs/src/guide/icon-set.md

@@ -13,21 +13,21 @@ All icons follow a consistent naming pattern:
 ## Find your icon
 
 <ComponentDemo>
-  <div class="maz-flex maz-flex-col maz-gap-4">
-    <div class="maz-flex maz-gap-2 maz-items-start">
-      <MazInput v-model="search" label="Search icon" @update:model-value="search = $event.trim()" :left-icon="SearchIcon" class="flex-1" :assistive-text="`${filteredIcons.length} icons found`" />
+  <div class="maz:flex maz:flex-col maz:gap-4">
+    <div class="maz:flex maz:gap-2 maz:items-start">
+      <MazInput v-model="search" label="Search icon" @update:model-value="search = $event.trim()" :start-icon="SearchIcon" class="flex-1" :assistive-text="`${filteredIcons.length} icons found`" />
     </div>
     <MazTabs v-model="currentTab">
       <MazTabsBar :items="tabs" />
     </MazTabs>
-    <div class="maz-grid maz-grid-cols-3 maz-gap-2">
-      <div v-for="icon in filteredIcons" :key="icon.name" class="maz-flex maz-flex-col maz-items-center maz-gap-3 maz-text-center maz-border maz-border-solid maz-border-divider maz-rounded maz-p-4 maz-truncate">
-        <component :is="icon.component" class="maz-size-8" />
-        <span class="maz-text-xs maz-text-muted maz-truncate">{{ icon.name }}</span>
-        <div class="maz-flex maz-flex-row maz-gap-2 maz-w-full">
-          <MazBtn v-tooltip="{ text: 'Copy Name', panelClass: 'maz-text-xs' }" class="maz-flex-1" size="xs" color="background" outlined @click="copyIcon(icon.name)" :icon="ClipboardDocumentIcon" />
-          <MazBtn v-tooltip="{ text: 'Copy Static Import', panelClass: 'maz-text-xs' }" class="maz-flex-1" size="xs" color="background" outlined @click="copyStaticImport(icon.name)" :icon="ClipboardDocumentListIcon" />
-          <MazBtn v-tooltip="{ text: 'Copy Lazy Import', panelClass: 'maz-text-xs' }" class="maz-flex-1" size="xs" color="background" outlined @click="copyLazyImport(icon.name)" :icon="ClipboardDocumentListIcon" />
+    <div class="maz:grid maz:grid-cols-3 maz:gap-2">
+      <div v-for="icon in filteredIcons" :key="icon.name" class="maz:flex maz:flex-col maz:items-center maz:gap-3 maz:text-center maz:border maz:border-solid maz:border-divider maz:rounded-md maz:p-4 maz:truncate">
+        <component :is="icon.component" class="maz:size-8" />
+        <span class="maz:text-xs maz:text-muted maz:truncate">{{ icon.name }}</span>
+        <div class="maz:flex maz:flex-row maz:gap-2 maz:w-full">
+          <MazBtn v-tooltip="{ text: 'Copy Name', panelClass: 'maz:text-xs' }" class="maz:flex-1" size="xs" color="surface" outlined @click="copyIcon(icon.name)" :icon="ClipboardDocumentIcon" />
+          <MazBtn v-tooltip="{ text: 'Copy Static Import', panelClass: 'maz:text-xs' }" class="maz:flex-1" size="xs" color="surface" outlined @click="copyStaticImport(icon.name)" :icon="ClipboardDocumentListIcon" />
+          <MazBtn v-tooltip="{ text: 'Copy Lazy Import', panelClass: 'maz:text-xs' }" class="maz:flex-1" size="xs" color="surface" outlined @click="copyLazyImport(icon.name)" :icon="ClipboardDocumentListIcon" />
         </div>
       </div>
     </div>

package/docs/src/guide/icons.md

@@ -5,8 +5,8 @@ A comprehensive collection of **860 beautiful SVG icons** ready for use in your
 ## Features
 
 - **860+ icons** - All icons are available [in the icon set page](./icon-set.md)
-- **Static & Lazy components** - Static (eagerly loaded) by default, lazy (async) when you need to optimize bundle size
-- **Multiple usage patterns** - Direct SVG files, Vue components, or auto-import
+- **Three component variants** - `static` (eager Vue component, default), `lazy` (async Vue component), and `raw` ✨ **(new in v5)** raw SVG strings for inlining without a Vue component or async chunk
+- **Multiple usage patterns** - Vue components, raw SVG strings, direct SVG files, or auto-import
 - **TypeScript support** - Full type definitions included
 - **Tree-shakeable** - Import only the icons you need
 - **Customizable** - Easy to style with CSS
@@ -101,15 +101,41 @@ import { MazUser } from '@maz-ui/icons/lazy/MazUser'
 You can also import individual icons directly for optimal tree-shaking:
 
 ```ts
-// Static icon (individual file)
-import { MazCheck } from '@maz-ui/icons/MazCheck'
+// Static Vue component (individual file)
+import { MazCheck } from '@maz-ui/icons/static/MazCheck'
 
-// Lazy icon (individual file)
+// Lazy Vue component (individual file)
 import { MazCheck } from '@maz-ui/icons/lazy/MazCheck'
+
+// 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.
+
+```vue
+<script setup lang="ts">
+import MazIcon from 'maz-ui/components/MazIcon'
+import { MazStar } from '@maz-ui/icons/raw/MazStar'
+</script>
+
+<template>
+  <MazIcon :icon="MazStar" />
+</template>
+```
+
+**When to use which variant:**
+
+| Variant | Bundle cost | Use case |
+| --- | --- | --- |
+| `static` | Vue component, eager | Default. Few icons per page, simplest path. |
+| `lazy` | Vue component, async chunk | Many icons but most off-screen at first paint. |
+| `raw` | Inline SVG string | Same icon repeated many times in a list/table; or you want zero component overhead. |
+
 **Benefits:**
 
 - ✅ Tree-shaking - Only bundled icons are included
@@ -167,6 +193,7 @@ export default defineConfig({
 </template>
 
 <style scoped>
+@reference "../../.vitepress/theme/main.css";
 .nav-icon {
   @apply w-6 h-6 text-gray-600 hover:text-blue-500 transition-colors cursor-pointer;
 }

package/docs/src/guide/maz-ui-provider.md

@@ -26,12 +26,12 @@ The standard approach to initialize Maz-UI is the [`MazUi` plugin](./vue.md#inst
 import { MazUi } from 'maz-ui/plugins/maz-ui'
 import { mazUi } from '@maz-ui/themes/presets/mazUi'
 import { fr } from '@maz-ui/translations'
-import 'maz-ui/styles'
+import 'maz-ui/style.css'
 
 app.use(MazUi, {
   theme: {
     preset: mazUi,
-    strategy: 'hybrid',
+    strategy: 'runtime',
   },
   translations: {
     locale: 'fr',
@@ -74,7 +74,7 @@ import { fr } from '@maz-ui/translations'
 
 <template>
   <MazUiProvider
-    :theme="{ preset: mazUi, strategy: 'hybrid' }"
+    :theme="{ preset: mazUi, strategy: 'runtime' }"
     :translations="{ locale: 'fr', messages: { fr } }"
   >
     <!-- All Maz-UI components inside this subtree work as expected -->
@@ -99,7 +99,7 @@ The entire Maz-UI setup is now code-split into the Dashboard chunk.
 interface ThemeOptions {
   preset: ThemePreset              // Required - Theme preset (mazUi, ocean, pristine, obsidian, or custom)
   overrides?: ThemePresetOverrides // Partial overrides for colors, foundation, etc.
-  strategy?: 'runtime' | 'buildtime' | 'hybrid' // CSS generation strategy (default: 'hybrid')
+  strategy?: 'runtime' | 'buildtime' // CSS generation strategy (default: 'runtime')
   darkModeStrategy?: 'class' | 'media'           // Dark mode handling (default: 'class')
   colorMode?: 'light' | 'dark' | 'auto'          // Initial color mode (default: 'auto')
   mode?: 'light' | 'dark' | 'both'               // Supported color modes (default: 'both')
@@ -208,7 +208,7 @@ const locale = ref('fr')
   <MazUiProvider
     :theme="{
       preset: mazUi,
-      strategy: 'hybrid',
+      strategy: 'runtime',
       colorMode: 'auto',
     }"
     :translations="{
@@ -217,7 +217,7 @@ const locale = ref('fr')
       messages: { fr },
     }"
   >
-    <div class="maz-bg-background maz-text-foreground maz-p-4">
+    <div class="maz:bg-surface maz:text-foreground maz:p-4">
       <h1>My Dashboard</h1>
       <MazBtn color="primary">Action</MazBtn>
       <MazInput placeholder="Search..." />

package/docs/src/guide/migration-v4.md

@@ -105,7 +105,7 @@ npm uninstall dropzone
 ```typescript
 // main.ts
 import { createApp } from 'vue'
-import 'maz-ui/css/main.css'
+import 'maz-ui/style.css'
 import App from './App.vue'
 
 createApp(App).mount('#app')
@@ -121,7 +121,7 @@ import { mazUi } from '@maz-ui/themes/presets'
 import { fr } from '@maz-ui/translations'
 
 // Import styles before your CSS
-import 'maz-ui/styles'
+import 'maz-ui/style.css'
 import './style.css'
 
 import App from './App.vue'
@@ -173,7 +173,7 @@ export default defineNuxtConfig({
     // New configuration API
     theme: {
       preset: 'maz-ui',
-      strategy: 'hybrid',
+      strategy: 'runtime',
       darkModeStrategy: 'class',
     },
     translations: {