@maz-ui/mcp 4.1.1 → 4.1.3

package/dist/mcp.mjs

@@ -7,7 +7,7 @@ import { existsSync, readFileSync, readdirSync } from 'node:fs';
 import { resolve, dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-const version = "4.1.1-beta.0";
+const version = "4.1.2";
 
 const _dirname = dirname(fileURLToPath(import.meta.url));
 class DocumentationService {
@@ -404,7 +404,7 @@ class MazUiMcpServer {
           },
           {
             name: "list_composables",
-            description: "List all Vue 3 composables (useToast, useDialog, etc.)",
+            description: "List all Vue or Nuxt composables (useToast, useDialog, etc.)",
             inputSchema: {
               type: "object",
               properties: {}

package/docs/generated-docs/maz-radio-buttons.doc.md

@@ -16,6 +16,7 @@
 | **success**     | Whether the input is successful.              | `boolean`                  | No       | `undefined`         | -               |
 | **warning**     | Whether there is a warning with the input.    | `boolean`                  | No       | `undefined`         | -               |
 | **hint**        | The hint text to display below the input.     | `string`                   | No       | `undefined`         | -               |
+| **size**        | The size of the radio buttons                 | `MazSize`                  | No       | `'md'`              | -               |
 
 ## Events
 

package/docs/src/blog/v4.md

@@ -0,0 +1,276 @@
+---
+title: Maz-UI v4.0.0 - The Complete Rebuild
+description: Discover the complete rebuild of Maz-UI - now with modular architecture, advanced tree-shaking, comprehensive theming system, and performance optimizations that will transform your Vue & Nuxt development experience.
+date: 2024-12-15
+author: Louis Mazel
+layout: doc
+head:
+  - - meta
+    - name: keywords
+      content: vue ui library, vue components, nuxt ui, maz-ui v4, tree-shaking, theming, typescript, performance
+---
+
+<img src="./../public/img/post-layer.png" alt="Maz-UI v4.0.0" class="maz-rounded maz-w-full maz-mb-12" />
+
+# Maz-UI v4.0.0 - The Complete Rebuild
+
+After months of development, I'm announcing **Maz-UI v4.0.0** — a complete architectural rebuild focused on performance, modularity, and developer experience.
+
+## Why I Built v4.0.0
+
+Modern applications require better performance, smaller bundle sizes, and improved developer tooling. Maz-UI v3 served its purpose, but I wanted to address these requirements with a ground-up rebuild.
+
+**The goals were:** Better tree-shaking, modular architecture, and enhanced TypeScript support.
+
+## What's New
+
+### Modular Architecture
+
+Maz-UI v4 uses a monorepo structure where every component, composable, directive, and utility can be imported independently. This gives you better control over your bundle size.
+
+### Bundle Size Improvements
+
+Optimal tree-shaking implementation results in **60-90% bundle size reductions** compared to v3. You can now import exactly what you need.
+
+```typescript
+// Before v4: Large bundle with unused code
+import * as MazUI from 'maz-ui'
+
+// v4: Surgical imports for minimal bundles
+import MazBtn from 'maz-ui/components/MazBtn'
+import { useToast } from 'maz-ui/composables'
+import { formatCurrency } from 'maz-ui/utils'
+```
+
+### Theme System
+
+#### Four Theme Presets
+
+Choose from four pre-built themes:
+
+- **Maz-UI**: Vibrant and modern with signature Maz-UI aesthetics
+- **Pristine**: Minimalist elegance
+- **Ocean**: Fresh aquatic theme with deep blues and coral accents
+- **Obsidian**: Sophisticated dark theme focused on readability
+
+#### HSL CSS Variables & Smart Dark Mode
+
+The theming system uses HSL variables for flexibility, with automatic color scale generation (50-950) and dark mode support.
+
+```typescript
+import { MazUi } from 'maz-ui/plugins/maz-ui'
+import { ocean } from '@maz-ui/themes/presets'
+
+app.use(MazUi, {
+  theme: {
+    preset: ocean,
+    strategy: 'hybrid', // Optimal performance
+    darkModeStrategy: 'class'
+  }
+})
+```
+
+### Internationalization
+
+#### Multi-language Support
+
+Support for 9 languages: English, French, German, Spanish, Italian, Portuguese, Japanese, and Chinese, with custom language integration.
+
+```typescript
+import { MazUi } from 'maz-ui/plugins/maz-ui'
+import { fr, en } from '@maz-ui/translations'
+
+app.use(MazUi, {
+  translations: {
+    locale: 'fr',
+    fallbackLocale: 'en',
+    messages: { fr, en }
+  }
+})
+```
+
+### Specialized Ecosystem Packages
+
+- **@maz-ui/icons** - 840+ Icons
+SVG icon library with Vue components, direct SVG files, and auto-import support.
+
+- **@maz-ui/nuxt** - Nuxt Integration
+Nuxt module with auto-imports and SSR support.
+
+- **@maz-ui/themes** - Theming System
+Pre-built theme collections and design tokens.
+
+- **@maz-ui/translations** - Internationalization
+Lightweight i18n system for Maz-UI components.
+
+- **@maz-ui/mcp** - MCP Server
+Model Context Protocol server that connects AI agents to Maz-UI documentation.
+
+### New & Enhanced Components
+
+- **MazPopover** - Overlay Component
+Popover with positioning, trigger modes, and accessibility features.
+
+- **MazSelectCountry** - Country Selector
+Country/language selector with i18n support and flag display.
+
+- **MazLink** - Link Component
+Replaces `MazBtn variant="link"` with auto-external detection and icons.
+
+- **MazExpandAnimation** - CSS Grid Animations
+Replaces `MazTransitionExpand` with v-model control and timing functions.
+
+- **MazDropzone** - File Upload
+Rewritten without external dependencies, featuring auto-upload and event handling.
+
+## Performance Improvements
+
+| Metric | v3.x | v4.0.0 | Improvement |
+|--------|------|--------|-------------|
+| **Bundle Size** | ~500KB | ~50-200KB | **60-90%** reduction |
+| **Tree-shaking** | Limited | Optimal | Perfect granular imports |
+| **TypeScript** | Good | Excellent | Strict types with auto-completion |
+| **Build Speed** | Standard | Enhanced | Faster compilation |
+
+## Developer Experience
+
+### TypeScript-First Architecture
+
+All components, composables, and utilities include TypeScript definitions with IDE auto-completion. Types are prefixed with `Maz` for consistency.
+
+### Auto-Import Resolvers
+
+Integration with `unplugin-vue-components` and `unplugin-auto-import` for auto-imports.
+
+### Composable-Based Architecture
+
+Several utilities are now Vue composables:
+
+```typescript
+// Before: Utility function
+import { idleTimeout } from 'maz-ui'
+
+// v4: Vue composable with reactive state
+import { useIdleTimeout } from 'maz-ui/composables'
+const { isIdle } = useIdleTimeout({ timeout: 5000 })
+```
+
+### Enhanced Development Tools
+
+- Nuxt DevTools integration
+- Interactive documentation with live examples
+- Comprehensive migration guides
+- MCP server for AI-assisted development
+
+## Key Features
+
+### Modular
+
+Import individual components without the entire library. Tree-shaking ensures minimal bundle size.
+
+### SSR Compatible
+
+Compatible with Nuxt and server-side rendering.
+
+### TypeScript Support
+
+Built with TypeScript with auto-completion and type safety.
+
+### Theming System
+
+HSL-based theming with CSS custom properties and multiple rendering strategies.
+
+### Dark Mode
+
+Components support light and dark themes with system preference detection.
+
+### Complete Ecosystem
+
+Components, plugins, directives, composables, and utilities.
+
+## Getting Started
+
+### For Vue Projects
+
+```bash
+npm install maz-ui@4.0.0
+```
+
+```typescript
+// main.ts
+import { createApp } from 'vue'
+import { MazUi } from 'maz-ui/plugins/maz-ui'
+import { mazUi } from '@maz-ui/themes/presets'
+import { fr } from '@maz-ui/translations'
+import 'maz-ui/styles'
+
+const app = createApp(App)
+
+app.use(MazUi, {
+  theme: { preset: mazUi },
+  translations: {
+    locale: 'fr',
+    fallbackLocale: 'en',
+    messages: { fr }
+  }
+})
+
+app.mount('#app')
+```
+
+### For Nuxt Projects
+
+```bash
+npm install @maz-ui/nuxt
+```
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@maz-ui/nuxt'],
+})
+```
+
+## Migration Resources
+
+To help with migration from v3 to v4:
+
+- **[Complete Migration Guide](../guide/migration-v4.md)** - Step-by-step migration instructions
+- **[MCP Integration](../guide/mcp.md)** - Connect AI agents for migration assistance
+- **[Interactive Examples](../index.md)** - Live demonstrations of new features
+- **[Community Support](https://github.com/LouisMazel/maz-ui/discussions)** - Get help from the community
+
+## Summary
+
+Maz-UI v4.0.0 is a complete rebuild focusing on performance, modularity, and developer experience. The new architecture provides better tree-shaking, smaller bundles, and improved TypeScript support.
+
+Whether you're building a small project or large application, v4 offers the components and tools you need with better performance characteristics.
+
+## Essential Links
+
+- **[Get Started](/guide/getting-started)** - Installation and setup
+- **[View Components](/components/maz-btn)** - Explore 50+ components
+- **[Migration Guide](/guide/migration-v4)** - Upgrade from v3.x
+- **[GitHub Repository](https://github.com/LouisMazel/maz-ui)** - Source code & issues
+- **[Changelog](https://github.com/LouisMazel/maz-ui/blob/master/CHANGELOG.md)** - Detailed release notes
+- **[v3 Documentation](https://v3.maz-ui.com)** - Legacy version support
+
+## Get Started
+
+**Ready to try Maz-UI v4.0.0?**
+
+<div class="maz-flex maz-gap-4 maz-mt-8 maz-flex-wrap">
+  <MazBtn href="https://maz-ui.com/guide/getting-started" size="lg">
+    Get Started Now
+  </MazBtn>
+  <MazBtn href="https://maz-ui.com/guide/migration-v4" color="background" outlined size="lg">
+    Migration Guide
+  </MazBtn>
+  <MazBtn href="https://github.com/LouisMazel/maz-ui" color="background" outlined size="lg" target="blank">
+    View on GitHub
+  </MazBtn>
+</div>
+
+---
+
+*Feel free to share your feedback and contribute to the project on GitHub.*

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

@@ -1,6 +1,6 @@
 ---
 title: MazPopover
-description: MazPopover is a versatile Vue 3 component for displaying content in overlays that bypass overflow constraints of parent elements
+description: MazPopover is a versatile Vue component for displaying content in overlays that bypass overflow constraints of parent elements
 ---
 
 # {{ $frontmatter.title }}

package/docs/src/components/maz-select-country.md

@@ -1,6 +1,6 @@
 ---
 title: MazSelectCountry
-description: MazSelectCountry is a versatile Vue 3 component for selecting countries or languages with built-in internationalization support and customizable display options
+description: MazSelectCountry is a versatile Vue component for selecting countries or languages with built-in internationalization support and customizable display options
 ---
 
 # {{ $frontmatter.title }}

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

@@ -29,10 +29,10 @@ const sliderValue = ref(50)
 
 ### Step
 
-<MazSlider v-model="sliderValue" :step="10" class="vp-raw" />
+<MazSlider v-model="sliderStepValue" :step="10" class="vp-raw" />
 
 ```html
-<MazSlider v-model="sliderValue" :step="10" class="vp-raw" />
+<MazSlider v-model="value" :step="10" class="vp-raw" />
 ```
 
 ### Multiple sliders & labels
@@ -181,6 +181,7 @@ const multipleSilders = ref([25, 50, 75])
 <script lang="ts" setup>
   import { ref } from 'vue'
   const sliderValue = ref(50)
+  const sliderStepValue = ref(50)
   const multipleSilders = ref([25, 50, 75])
   const multipleSildersLabels = ['Small', 'Middle', 'Big']
 

package/docs/src/composables/use-display-names.md

@@ -1,6 +1,6 @@
 ---
 title: useDisplayNames
-description: useDisplayNames is a Vue 3 composable specialized in displaying localized country names (regions) and language names. It supports various code formats including ISO 639-1 (language codes), ISO 3166-1 (country codes), and BCP 47 (language tags), using the Intl.DisplayNames API for internationalization.
+description: useDisplayNames is a Vue composable specialized in displaying localized country names (regions) and language names. It supports various code formats including ISO 639-1 (language codes), ISO 3166-1 (country codes), and BCP 47 (language tags), using the Intl.DisplayNames API for internationalization.
 ---
 
 # {{ $frontmatter.title }}
@@ -20,7 +20,7 @@ Depending on your environment (client or node server) and the browser you are us
 ## Key Features
 
 - Displays localized country names (regions) and language names
-- Supports multiple code formats: ISO 639-1 (language codes), ISO 3166-1 (country codes), and BCP 47 (language tags)  
+- Supports multiple code formats: ISO 639-1 (language codes), ISO 3166-1 (country codes), and BCP 47 (language tags)
 - Works with any locale supported by the browser's Intl.DisplayNames API
 - Provides functions to get individual names or bulk retrieve all available names
 - Handles errors gracefully with fallback values
@@ -154,7 +154,7 @@ function getAllDisplayNames(options: {
 
 ## Notes
 
-- The `useDisplayNames` composable is designed to be used with Vue 3.
+- The `useDisplayNames` composable is designed to be used with Vue.
 - The composable functions return `ComputedRef` values, which are reactive and will update automatically when their dependencies change.
 - Handle errors gracefully by providing fallback values when the display name cannot be fetched.
 - The `Intl.DisplayNames` API is used internally to fetch and format the display names based on the provided locale and code.

package/docs/src/composables/use-form-validator.md

@@ -1,11 +1,11 @@
 ---
 title: useFormValidator
-description: useFormValidator and useFormField are two Vue 3 composables designed to simplify form validation using Valibot as the validation library. These composables offer a flexible and typed approach to handle form validation in your Vue 3 applications.
+description: useFormValidator and useFormField are two Vue composables designed to simplify form validation using Valibot as the validation library. These composables offer a flexible and typed approach to handle form validation in your Vue applications.
 ---
 
 # {{ $frontmatter.title }}
 
-`useFormValidator` and `useFormField` are two Vue 3 composables designed to simplify form validation using [Valibot](https://valibot.dev/guides/introduction/) as the validation library. These composables offer a flexible and typed approach to handle form validation in your Vue 3 applications.
+`useFormValidator` and `useFormField` are two Vue composables designed to simplify form validation using [Valibot](https://valibot.dev/guides/introduction/) as the validation library. These composables offer a flexible and typed approach to handle form validation in your Vue applications.
 
 ## Introduction
 

package/docs/src/composables/use-idle-timeout.md

@@ -1,6 +1,6 @@
 ---
 title: useIdleTimeout
-description: A Vue 3 composable that provides an easy way to track user inactivity on your website and execute a callback function when the user becomes idle.
+description: A Vue composable that provides an easy way to track user inactivity on your website and execute a callback function when the user becomes idle.
 ---
 
 # {{ $frontmatter.title }}

package/docs/src/composables/use-swipe.md

@@ -1,6 +1,6 @@
 ---
 title: useSwipe
-description: useSwipe is a Vue 3 composable that simplifies the management of "swipe" interactions on HTML elements.
+description: useSwipe is a Vue composable that simplifies the management of "swipe" interactions on HTML elements.
 ---
 
 # {{ $frontmatter.title }}

package/docs/src/composables/use-timer.md

@@ -19,7 +19,7 @@ The composable provides the following functionality:
 
 The composable also includes cleanup logic using onBeforeUnmount to ensure that the timer is stopped when the component is unmounted.
 
-This composable can be used in Vue 3 components to handle timeouts in a flexible and reactive manner.
+This composable can be used in Vue components to handle timeouts in a flexible and reactive manner.
 
 ## Usage
 

package/docs/src/demo/ColorPicker.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+/* eslint-disable style/max-statements-per-line */
+
+import type { HSL } from '@maz-ui/themes'
+import { computed, ref, watch } from 'vue'
+
+interface Props {
+  modelValue: HSL
+  label?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: HSL]
+}>()
+
+const colorInput = ref<HTMLInputElement>()
+
+function hslToHex(hsl: HSL): string {
+  const match = hsl.match(/(\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%/)
+  if (!match)
+    return '#000000'
+
+  const h = Number.parseFloat(match[1]) / 360
+  const s = Number.parseFloat(match[2]) / 100
+  const l = Number.parseFloat(match[3]) / 100
+
+  const hue2rgb = (p: number, q: number, t: number) => {
+    if (t < 0)
+      t += 1
+    if (t > 1)
+      t -= 1
+    if (t < 1 / 6)
+      return p + (q - p) * 6 * t
+    if (t < 1 / 2)
+      return q
+    if (t < 2 / 3)
+      return p + (q - p) * (2 / 3 - t) * 6
+    return p
+  }
+
+  let r: number
+  let g: number
+  let b: number
+
+  if (s === 0) {
+    r = g = b = l
+  }
+  else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+    r = hue2rgb(p, q, h + 1 / 3)
+    g = hue2rgb(p, q, h)
+    b = hue2rgb(p, q, h - 1 / 3)
+  }
+
+  const toHex = (c: number) => {
+    const hex = Math.round(c * 255).toString(16)
+    return hex.length === 1 ? `0${hex}` : hex
+  }
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+function hexToHsl(hex: string): HSL {
+  const r = Number.parseInt(hex.slice(1, 3), 16) / 255
+  const g = Number.parseInt(hex.slice(3, 5), 16) / 255
+  const b = Number.parseInt(hex.slice(5, 7), 16) / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h: number
+  let s: number
+  const l = (max + min) / 2
+
+  if (max === min) {
+    h = s = 0
+  }
+  else {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break
+      case g: h = (b - r) / d + 2; break
+      case b: h = (r - g) / d + 4; break
+      default: h = 0
+    }
+    h /= 6
+  }
+
+  const hue = Math.round(h * 360)
+  const saturation = Math.round(s * 100)
+  const lightness = Math.round(l * 100)
+
+  return `${hue} ${saturation}% ${lightness}%` as HSL
+}
+
+const hexValue = computed(() => hslToHex(props.modelValue))
+
+function handleColorChange(event: Event) {
+  const target = event.target as HTMLInputElement
+  const hslValue = hexToHsl(target.value)
+  emit('update:modelValue', hslValue)
+}
+
+watch(() => props.modelValue, () => {
+  if (colorInput.value) {
+    colorInput.value.value = hexValue.value
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div class="color-picker">
+    <label v-if="label" for="input-color">
+      {{ label }}
+    </label>
+
+    <input
+      id="input-color"
+      ref="colorInput"
+      type="color"
+      :value="hexValue"
+      :disabled="disabled"
+      @change="handleColorChange"
+    >
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.color-picker {
+  @apply maz-inline-flex maz-flex-col maz-gap-1;
+
+  label {
+    @apply maz-text-sm maz-font-medium maz-text-foreground maz-truncate;
+  }
+
+  input[type='color'] {
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    cursor: pointer;
+
+    @apply maz-h-10 maz-w-full maz-cursor-pointer maz-overflow-hidden maz-rounded maz-border maz-border-solid maz-border-divider disabled:maz-cursor-not-allowed disabled:maz-opacity-50;
+
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+      @apply maz-rounded;
+    }
+
+    &::-webkit-color-swatch {
+      border: none;
+      @apply maz-rounded;
+    }
+
+    &::-moz-color-swatch {
+      border: none;
+      @apply maz-rounded;
+    }
+  }
+}
+</style>

package/docs/src/demo/DemoDashboardPage.vue

@@ -2,7 +2,7 @@
 import dataLabels from 'chartjs-plugin-datalabels'
 import { ref } from 'vue'
 
-const { delay = 100 } = defineProps<{
+const { delay = 0 } = defineProps<{
   delay?: number
 }>()
 
@@ -117,7 +117,6 @@ const tableHeaders = [
             color="success"
             size="3rem"
             :delay
-            :once="false"
           />
           <div class="maz-truncate">
             <div class="maz-text-xl maz-font-bold">
@@ -126,7 +125,6 @@ const tableHeaders = [
                 :count="28945"
                 prefix="$"
                 separator=","
-                :once="false"
               />
             </div>
             <div class="maz-truncate maz-text-sm maz-text-muted">
@@ -143,7 +141,6 @@ const tableHeaders = [
             color="info"
             size="3rem"
             :delay
-            :once="false"
           />
           <div class="maz-truncate">
             <div class="maz-text-xl maz-font-bold">
@@ -151,7 +148,6 @@ const tableHeaders = [
                 :delay
                 :count="384"
                 separator=","
-                :once="false"
               />
             </div>
             <div class="maz-truncate maz-text-sm maz-text-muted">
@@ -168,7 +164,6 @@ const tableHeaders = [
             color="warning"
             size="3rem"
             :delay
-            :once="false"
           />
           <div class="maz-truncate">
             <div class="maz-text-xl maz-font-bold">
@@ -176,7 +171,6 @@ const tableHeaders = [
                 :delay
                 :count="1482"
                 separator=","
-                :once="false"
               />
             </div>
             <div class="maz-truncate maz-text-sm maz-text-muted">
@@ -193,7 +187,6 @@ const tableHeaders = [
             color="destructive"
             size="3rem"
             :delay
-            :once="false"
           />
           <div class="maz-truncate">
             <div class="maz-text-xl maz-font-bold">
@@ -201,7 +194,6 @@ const tableHeaders = [
                 :delay
                 :count="94"
                 suffix="%"
-                :once="false"
               />
             </div>
             <div class="maz-truncate maz-text-sm maz-text-muted">
@@ -223,6 +215,7 @@ const tableHeaders = [
       input-size="sm"
       pagination
       selectable
+      scrollable
     >
       <template #cell-amount="{ value }">
         <span class="maz-font-semibold">