@maz-ui/mcp 4.0.0-beta.26

package/docs/src/guide/cli.md

@@ -0,0 +1,144 @@
+---
+title: '@maz-ui/cli - theme generator'
+description: CLI of maz-ui to generate CSS variables file to theming maz-ui
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: warning
+
+This module is only for v3.x users, if you are using v4.x, please use the [@maz-ui/themes](./themes.md) package instead.
+
+:::
+
+## Config file
+
+Then, in your root folder of your project, add a file named `maz-ui.config.{ts,js,mjs,cjs}` as bellow ([model](#maz-ui-configuration-file-typescript-interface))
+
+All colors can be in HEX, RGB, RGBA, HSL, HSLA and named formats.
+
+No theme variables are required, you can put only one if you wish
+
+```ts
+import { defineConfig } from '@maz-ui/cli'
+
+export default defineConfig({
+  outputCssFilePath: './css/maz-ui-variables.css',
+  theme: {
+    colors: {
+      primary: 'hsl(210, 100%, 56%)',
+      secondary: 'hsl(164, 76%, 46%)',
+      info: 'hsl(188, 78%, 41%)',
+      success: 'hsl(80, 61%, 50%)',
+      warning: 'hsl(40, 97%, 59%)',
+      danger: 'hsl(1, 100%, 71%)',
+      bgOverlay: 'hsl(0, 0%, 0% / 30%)',
+      lightTheme: {
+        textColor: 'hsl(0, 0%, 85%)',
+        colorMuted: 'hsla(0, 0%, 0%, 0.54)',
+        bgColor: 'hsl(0, 0%, 100%)',
+      },
+      darkTheme: {
+        textColor: 'hsl(210, 8%, 14%)',
+        colorMuted: 'hsla(0, 0%, 100%, 0.54)',
+        bgColor: 'hsl(235, 16%, 15%)',
+      },
+    },
+    borderColor: 'hsl(220deg 13.04% 90.98%)',
+    borderWidth: '0.125rem',
+    borderRadius: '0.5rem',
+    fontFamily: `system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen,
+    ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`,
+  },
+})
+```
+
+## Generate CSS file variables
+
+Two ways to generate the CSS file:
+
+### Run CLI command
+
+```bash
+npx maz-ui generate-css-vars
+# or pnpx maz-ui generate-css-vars
+```
+
+### With package.json script
+
+1. First, install the CLI package:
+
+```bash
+npm install @maz-ui/cli
+# or pnpm add @maz-ui/cli
+```
+
+2. Then, add the script in your `package.json`:
+
+```json
+{
+  "scripts": {
+    "generate-css-vars": "maz-ui generate-css-vars"
+  }
+}
+```
+
+3. Finally, run the script:
+
+```bash
+npm run generate-css-vars
+# or yanr generate-css-vars
+# or pnpm generate-css-vars
+```
+
+Then, the file will be generated, and you must import it in your project.
+
+**Be careful, depending on the chosen colors, some variants may need to be adjusted**
+
+## Maz-UI configuration file Typescript interface
+
+```ts
+interface MazUiConfig {
+  /**
+   * Path and name of generate CSS file
+   * @example './css/maz-ui-variables.css'
+   */
+  outputCssFilePath: string
+  theme: {
+    colors: {
+      primary?: string
+      secondary?: string
+      info?: string
+      danger?: string
+      success?: string
+      warning?: string
+      bgOverlay?: string
+      lightTheme?: {
+        textColor?: string
+        colorMuted?: string
+        bgColor?: string
+      }
+      darkTheme?: {
+        textColor?: string
+        colorMuted?: string
+        bgColor?: string
+      }
+    }
+    /**
+     * Border color applied to components like: inputs, card, etc
+     */
+    borderColor?: string
+    /**
+     * Border width applied to components like: inputs, card, etc
+     */
+    borderWidth?: string
+    /**
+     * Radius applied to rounded components like: buttons, inputs, card, etc.
+     */
+    borderRadius?: string
+    fontFamily?: string
+  }
+}
+```

package/docs/src/guide/getting-started.md

@@ -0,0 +1,284 @@
+---
+title: Getting Started
+description: Build Vue and Nuxt applications faster with Maz-UI v4 - The modern, modular component library
+head:
+  - - meta
+    - name: keywords
+      content: vue ui library, vue components, nuxt ui, maz-ui installation, vue 3 components
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+::: tip ✨ What's New in v4
+
+- 🌱 **Tree-shaking improvements** - Import only what you need
+- 🛠️ **TypeScript-first** - Full type safety out of the box
+- 🎨 **Theming system** - Customizable themes and dark mode support (4 presets available)
+- 🌐 **Internationalization** - Locale management and tree-shakable imports
+- 🎨 **Icon library** - Comprehensive collection of SVG icons designed for performance and flexibility
+- 🧰 **Nuxt module** - Effortless Maz-UI integration with auto-imports
+- 🚀 **Performance optimizations** - Tree-shaking benefits and maximum optimization
+- 🛠️ **Enhanced accessibility** - WCAG 2.1 AA compliant
+- 🆕 **New components** - MazPopover & MazSelectCountry
+
+:::
+
+## Guides
+
+Start by choosing your framework:
+
+<div class="maz-flex maz-gap-4 maz-w-full maz-flex-col tab-m:maz-flex-row vp-raw">
+  <MazCard
+    href="/guide/vue"
+    class="maz-flex-1"
+    :gallery="{
+      images: ['https://positivethinking.tech/wp-content/uploads/2021/01/Logo-Vuejs.png'],
+      height: 200,
+      width: '100%',
+    }"
+  >
+    <template #content-title>
+      <h3>
+        Vue Users Guide
+      </h3>
+    </template>
+    <template #footer>
+      <MazBtn color="contrast" href="/guide/vue">
+        Go to Vue guide
+      </MazBtn>
+    </template>
+  </MazCard>
+  <MazCard
+    href="/guide/nuxt"
+    class="maz-flex-1"
+    content-title="Nuxt Users Guide"
+    :gallery="{
+      images: ['https://seeklogo.com/images/N/nuxt-2023-logo-7D939E3251-seeklogo.com.png'],
+      height: 200,
+      width: '100%',
+    }"
+  >
+    <template #content-title>
+      <h3>
+        Nuxt Users Guide
+      </h3>
+    </template>
+    <template #footer>
+      <MazBtn color="contrast" href="/guide/nuxt">
+        Go to Nuxt guide
+      </MazBtn>
+    </template>
+  </MazCard>
+</div>
+
+## Ecosystem Packages
+
+Extend Maz-UI with our specialized companion packages:
+
+### @maz-ui/themes
+
+**Advanced Theming System**
+
+Modern theme system with HSL variables, dark mode support, and flexible strategies.
+
+```bash
+npm install @maz-ui/themes
+```
+
+**Features:**
+
+- 🎨 HSL CSS custom properties
+- 🌓 Smart dark mode detection
+- ⚡ Multiple rendering strategies
+- 🛡️ Full TypeScript support
+
+[→ View Theme Documentation](./themes.md)
+
+---
+
+### @maz-ui/translations
+
+**Internationalization (i18n)**
+
+Internationalization library for Maz-UI.
+
+```bash
+npm install @maz-ui/translations
+```
+
+**Features:**
+
+- 🌐 Internationalization of Maz-UI components
+- 🔄 Locale management
+- 📦 Tree-shakable imports
+- 🛠️ TypeScript support
+
+[→ View Translations Documentation](./translations.md)
+
+---
+
+### @maz-ui/icons
+
+**Optimized Icon Library**
+
+Comprehensive collection of SVG icons designed for performance and flexibility.
+
+```bash
+npm install @maz-ui/icons
+```
+
+**Features:**
+
+- 300+ icons
+- Usable as Vue components (e.g. `<MazStar />`)
+- Tree-shakable imports
+- Multiple sizes and variants
+- Full TypeScript definitions
+
+[→ Browse Icon Library](./icons.md)
+
+---
+
+### @maz-ui/mcp
+
+**Maz-UI MCP server to connect your IA agents to the documentation**
+
+**Features:**
+
+- Connect your IA agents to the documentation
+
+[→ View MCP Documentation](./mcp.md)
+
+## Performance Optimizations
+
+### Tree-Shaking Benefits
+
+Maz-UI v4 is built with tree-shaking in mind. Import only what you need for optimal bundle sizes:
+
+```typescript
+/**
+ * Utilities
+ */
+
+// ❌ Avoid importing everything
+import * as MazUI from 'maz-ui'
+// ✅ Import specific utilities
+import { formatCurrency, debounce } from 'maz-ui'
+
+/**
+ * Components
+ */
+
+// ✅ Import specific components (good)
+import { MazBtn, MazCard, MazInput } from 'maz-ui/components'
+// ✅✅ Direct component import (most optimized)
+import MazBtn from 'maz-ui/components/MazBtn'
+import MazCard from 'maz-ui/components/MazCard'
+import MazInput from 'maz-ui/components/MazInput'
+
+/**
+ * Composables
+ */
+
+// ✅ Import composable from index file
+import { useBreakpoints, useToast } from 'maz-ui/composables'
+
+// ✅✅ Direct composable import (most optimized)
+import { useToast } from 'maz-ui/composables/useToast'
+import { useBreakpoints } from 'maz-ui/composables/useBreakpoints'
+
+/**
+ * Directives
+ */
+
+// ✅ Import directive from index file
+import { vClickOutside } from 'maz-ui/directives'
+
+// ✅✅ Direct directive import (most optimized)
+import { vClickOutside } from 'maz-ui/directives/vClickOutside'
+
+// ✅✅✅ Even better: auto-import does this automatically
+// Components, composables, and utilities are imported only when used
+
+/**
+ * Plugins
+ */
+
+// ✅ Import plugin from index file
+import { MazUi } from 'maz-ui/plugins'
+// ✅✅ Direct plugin import (most optimized)
+import { MazUi } from 'maz-ui/plugins/maz-ui'
+```
+
+::: tip Maximum Optimization
+**Direct imports** (e.g., `import MazBtn from 'maz-ui/components/MazBtn'`) are the most optimized approach as they bypass index files completely. This ensures the smallest possible bundle size and fastest build times.
+:::
+
+## Next Steps
+
+<div class="next-steps">
+
+### Explore Components
+
+Browse the [component library](./../components/maz-btn.md) with live examples and API documentation.
+
+### Customize Themes
+
+Learn about [theming and customization](./themes.md) to match your brand.
+
+### Internationalization
+
+Learn about [internationalization](./translations.md) to support multiple languages.
+
+### Get Help
+
+Browse [GitHub discussions](https://github.com/LouisMazel/maz-ui/discussions) or open an issue on [GitHub](https://github.com/LouisMazel/maz-ui/issues).
+
+</div>
+
+<style scoped>
+.hero-section {
+  @apply maz-rounded maz-p-8 maz-my-12 maz-from-primary-400 maz-to-secondary-700 maz-bg-gradient-to-br;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  margin: 2rem 0;
+
+  h3 {
+    margin-top: 0;
+  }
+  ul {
+    margin-top: 0;
+  }
+}
+
+.next-steps {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+  margin: 2rem 0;
+
+  h3 {
+    margin-top: 0;
+  }
+  p {
+    margin-top: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .hero-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .hero-btn {
+    width: 200px;
+  }
+}
+</style>

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

@@ -0,0 +1,60 @@
+# Icon Set (300+ icons)
+
+The library includes **300+ carefully**
+
+## Icon Naming Convention
+
+All icons follow a consistent naming pattern:
+
+- Vue components: `Maz` + PascalCase (e.g., `MazUserCircle`)
+- SVG files: kebab-case (e.g., `user-circle.svg`)
+
+## 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="MazIcons.MazMagnifyingGlass" class="flex-1" />
+      <div class="maz-flex maz-flex-col maz-gap-1 maz-items-end">
+        <p class="maz-text-muted">{{ filteredIcons.length }} icons found</p>
+        <p class="maz-text-muted">
+          Click to copy icon to clipboard
+        </p>
+      </div>
+    </div>
+    <div class="maz-grid maz-grid-cols-3 maz-gap-2">
+      <button v-for="icon in filteredIcons" :key="icon.label" class="maz-flex maz-flex-col maz-items-center maz-gap-2 maz-text-center maz-border maz-border-solid maz-border-divider maz-rounded maz-p-4 maz-truncate hover:maz-bg-surface-400" @click="copyIcon(icon.label)">
+        <Component :is="icon.value" class="maz-text-2xl" />
+        <span class="maz-text-xs maz-text-muted maz-truncate">{{ icon.label }}</span>
+      </button>
+    </div>
+  </div>
+</ComponentDemo>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useToast } from 'maz-ui/composables/useToast'
+import { vTooltip } from 'maz-ui/directives/vTooltip'
+
+const MazIcons = await import('@maz-ui/icons')
+const { success} = useToast()
+
+const icons = Object.entries(MazIcons).map(([name, component]) => ({
+  label: name,
+  value: component,
+}))
+
+const search = ref()
+
+const filteredIcons = computed(() => {
+  console.log(search.value)
+  if (!search.value) return icons
+
+  return icons.filter(icon => icon.label.toLowerCase().includes(search.value.toLowerCase())).slice(0, 10)
+})
+
+const copyIcon = (icon) => {
+  navigator.clipboard.writeText(icon)
+  success('Icon copied to clipboard')
+}
+</script>