@maz-ui/mcp 4.1.2 → 4.1.6-beta.0

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";
+const version = "4.1.3";
 
 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/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/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
 
@@ -690,7 +690,6 @@ You can use async functions in the validation schema.
         minLength(3, 'Name must be at least 3 characters'),
         checkAsync(
           async (name) => {
-            console.log('name', name)
             await sleep(2000)
             return false
           },
@@ -1111,7 +1110,6 @@ interface FormFieldOptions<T> {
         minLength(3, 'Name must be at least 3 characters'),
         checkAsync(
           async (name) => {
-            console.log('name', name)
             await sleep(2000)
             return false
           },

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/directives/click-outside.md

@@ -1,6 +1,6 @@
 ---
 title: vClickOutside
-description: vClickOutside is a Vue 3 directive to trigger a function when the user clicks outside an element
+description: vClickOutside is a Vue directive to trigger a function when the user clicks outside an element
 ---
 
 # {{ $frontmatter.title }}

package/docs/src/directives/lazy-img.md

@@ -1,6 +1,6 @@
 ---
 title: vLazyImg
-description: vLazyImg is a Vue 3 directive to lazy load images with many options. The image will be loaded on user's scroll
+description: vLazyImg is a Vue directive to lazy load images with many options. The image will be loaded on user's scroll
 ---
 
 # {{ $frontmatter.title }}

package/docs/src/directives/tooltip.md

@@ -1,6 +1,6 @@
 ---
 title: vTooltip
-description: vTooltip is a Vue 3 directive to display a text when the user hovers an element
+description: vTooltip is a Vue directive to display a text when the user hovers an element
 ---
 
 # {{ $frontmatter.title }}

package/docs/src/directives/zoom-img.md

@@ -1,6 +1,6 @@
 ---
 title: vZoomImg
-description: vZoomImg is a Vue 3 directive to enlarge an image like a modal on click, if you have several images, you can pass them like a carousel
+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
 ---
 
 # {{ $frontmatter.title }}

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

@@ -4,7 +4,7 @@ description: Build Vue and Nuxt applications faster with Maz-UI v4 - The modern,
 head:
   - - meta
     - name: keywords
-      content: vue ui library, vue components, nuxt ui, maz-ui installation, vue 3 components
+      content: vue ui library, vue components, nuxt ui, maz-ui installation, components, nuxt, vue, themes, translations, icons, mcp, maz-ui
 ---
 
 # {{ $frontmatter.title }}

package/docs/src/guide/icons.md

@@ -73,7 +73,7 @@ import { MazCheck, MazHeart, MazUser } from '@maz-ui/icons'
 
 - ✅ Tree-shaking - Only bundled icons are included
 - ✅ TypeScript support with full IntelliSense
-- ✅ Vue 3 optimized with `defineAsyncComponent`
+- ✅ Vue optimized with `defineAsyncComponent`
 - ✅ Easy to style with CSS classes
 
 ### Method 2: Auto-import with Resolver

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

@@ -70,7 +70,7 @@ v4.0.0 separates functionality into specialized packages for better modularity:
 | **@maz-ui/utils** | JavaScript/TypeScript utilities | New |
 | **@maz-ui/icons** | SVG icons and flags (840+ icons) | New |
 | **@maz-ui/cli** | CLI for theme generation | Renamed |
-| **@maz-ui/nuxt** | Nuxt 3 module | New |
+| **@maz-ui/nuxt** | Nuxt module | New |
 | **@maz-ui/mcp** | MCP server for IA agent | New |
 
 ## Migration Checklist
@@ -903,8 +903,8 @@ app.use(MazUi)
 - **[Official v4 Documentation](https://maz-ui.com)** - Complete documentation
 - **[Theme Guide](/guide/themes)** - Advanced theme system
 - **[Translation Guide](/guide/translations)** - Internationalization
-- **[Vue Installation Guide](/guide/vue)** - Vue 3 setup
-- **[Nuxt Installation Guide](/guide/nuxt)** - Nuxt 3 setup
+- **[Vue Installation Guide](/guide/vue)** - Vue setup
+- **[Nuxt Installation Guide](/guide/nuxt)** - Nuxt setup
 - **[Resolvers Guide](/guide/resolvers)** - Smart auto-imports
 - **[Complete Changelog](https://github.com/LouisMazel/maz-ui/blob/master/CHANGELOG.md)** - All changes
 

package/docs/src/guide/themes.md

@@ -19,6 +19,10 @@ description: Modern and performant theme system for Maz-UI with TypeScript, HSL
 - **Zero FOUC** - Critical CSS injected inline to avoid flashes
 - **Flexible Presets** - Ready-to-use and customizable configurations
 
+## Theme Editor
+
+Create your own theme with the [Theme Editor](./../theme-editor.md).
+
 ## Quick Usage
 
 ### 1. Plugin Configuration with `MazUi` plugin
@@ -779,6 +783,389 @@ The system automatically generates all necessary variables:
 }
 ```
 
+::: details View all generated CSS variables (with maz-ui preset)
+
+```css
+@layer maz-ui-theme {
+  :root {
+    --maz-background: 0 0% 100%;
+    --maz-foreground: 210 8% 14%;
+    --maz-primary: 210 100% 56%;
+    --maz-primary-foreground: 0 0% 100%;
+    --maz-secondary: 272 99% 54%;
+    --maz-secondary-foreground: 0 0% 100%;
+    --maz-accent: 164 76% 46%;
+    --maz-accent-foreground: 0 0% 100%;
+    --maz-destructive: 356.95 95.91% 57.73%;
+    --maz-destructive-foreground: 0 0% 100%;
+    --maz-success: 80 61% 50%;
+    --maz-success-foreground: 210 8% 14%;
+    --maz-warning: 40 97% 59%;
+    --maz-warning-foreground: 210 8% 14%;
+    --maz-info: 188 78% 41%;
+    --maz-info-foreground: 0 0% 100%;
+    --maz-contrast: 235 16% 15%;
+    --maz-contrast-foreground: 255 0% 95%;
+    --maz-muted: 0 0% 54%;
+    --maz-shadow: 240 5.9% 10%;
+    --maz-border: 220 13.04% 90.98%;
+    --maz-radius: 0.7rem;
+    --maz-font-family: Manrope, sans-serif, system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    --maz-base-font-size: 14px;
+    --maz-border-width: 0.0625rem;
+  }
+
+  .dark {
+    --maz-background: 235 16% 15%;
+    --maz-foreground: 0 0% 85%;
+    --maz-primary: 210 100% 56%;
+    --maz-primary-foreground: 0 0% 100%;
+    --maz-secondary: 272 99% 54%;
+    --maz-secondary-foreground: 0 0% 100%;
+    --maz-accent: 164 76% 46%;
+    --maz-accent-foreground: 0 0% 100%;
+    --maz-destructive: 1 100% 71%;
+    --maz-destructive-foreground: 0 0% 100%;
+    --maz-success: 80 61% 50%;
+    --maz-success-foreground: 210 8% 14%;
+    --maz-warning: 40 97% 59%;
+    --maz-warning-foreground: 210 8% 14%;
+    --maz-info: 188 78% 41%;
+    --maz-info-foreground: 0 0% 100%;
+    --maz-contrast: 0 0% 100%;
+    --maz-contrast-foreground: 210 8% 14%;
+    --maz-muted: 255 0% 54%;
+    --maz-shadow: 240 3.7% 15.9%;
+    --maz-border: 238 17% 25%;
+    --maz-radius: 0.7rem;
+    --maz-font-family: Manrope, sans-serif, system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    --maz-base-font-size: 14px;
+    --maz-border-width: 0.0625rem;
+  }
+}
+
+@layer maz-ui-theme {
+
+  :root {
+    --maz-overlay: 0 0% 40%;
+    --maz-primary-50: 210 77.5% 93.5%;
+    --maz-primary-100: 210 80% 86%;
+    --maz-primary-200: 210 85% 78.5%;
+    --maz-primary-300: 210 90% 71%;
+    --maz-primary-400: 210 95% 63.5%;
+    --maz-primary-500: 210 100% 56%;
+    --maz-primary-600: 210 100% 48.5%;
+    --maz-primary-700: 210 100% 41%;
+    --maz-primary-800: 210 100% 33.5%;
+    --maz-primary-900: 210 100% 26%;
+    --maz-primary-950: 210 100% 18.5%;
+    --maz-secondary-50: 272 76.9% 91.5%;
+    --maz-secondary-100: 272 79.4% 84%;
+    --maz-secondary-200: 272 84.3% 76.5%;
+    --maz-secondary-300: 272 89.2% 69%;
+    --maz-secondary-400: 272 94.1% 61.5%;
+    --maz-secondary-500: 272 99% 54%;
+    --maz-secondary-600: 272 100% 46.5%;
+    --maz-secondary-700: 272 100% 39%;
+    --maz-secondary-800: 272 100% 31.5%;
+    --maz-secondary-900: 272 100% 24%;
+    --maz-secondary-950: 272 100% 16.5%;
+    --maz-accent-50: 164 63% 83.5%;
+    --maz-accent-100: 164 64.4% 76%;
+    --maz-accent-200: 164 67.3% 68.5%;
+    --maz-accent-300: 164 70.2% 61%;
+    --maz-accent-400: 164 73.1% 53.5%;
+    --maz-accent-500: 164 76% 46%;
+    --maz-accent-600: 164 78.2% 38.5%;
+    --maz-accent-700: 164 80.3% 31%;
+    --maz-accent-800: 164 82.5% 23.5%;
+    --maz-accent-900: 164 84.7% 16%;
+    --maz-accent-950: 164 85.7% 8.5%;
+    --maz-destructive-50: 357 75.2% 95.2%;
+    --maz-destructive-100: 357 77.5% 87.7%;
+    --maz-destructive-200: 357 82.1% 80.2%;
+    --maz-destructive-300: 357 86.7% 72.7%;
+    --maz-destructive-400: 357 91.3% 65.2%;
+    --maz-destructive-500: 357 95.9% 57.7%;
+    --maz-destructive-600: 357 99.4% 50.2%;
+    --maz-destructive-700: 357 100% 42.7%;
+    --maz-destructive-800: 357 100% 35.2%;
+    --maz-destructive-900: 357 100% 27.7%;
+    --maz-destructive-950: 357 100% 20.2%;
+    --maz-success-50: 80 52.6% 87.5%;
+    --maz-success-100: 80 53.6% 80%;
+    --maz-success-200: 80 55.4% 72.5%;
+    --maz-success-300: 80 57.3% 65%;
+    --maz-success-400: 80 59.1% 57.5%;
+    --maz-success-500: 80 61% 50%;
+    --maz-success-600: 80 62.4% 42.5%;
+    --maz-success-700: 80 63.8% 35%;
+    --maz-success-800: 80 65.2% 27.5%;
+    --maz-success-900: 80 66.6% 20%;
+    --maz-success-950: 80 67.3% 12.5%;
+    --maz-warning-50: 40 75.8% 96.5%;
+    --maz-warning-100: 40 78.2% 89%;
+    --maz-warning-200: 40 82.9% 81.5%;
+    --maz-warning-300: 40 87.6% 74%;
+    --maz-warning-400: 40 92.3% 66.5%;
+    --maz-warning-500: 40 97% 59%;
+    --maz-warning-600: 40 100% 51.5%;
+    --maz-warning-700: 40 100% 44%;
+    --maz-warning-800: 40 100% 36.5%;
+    --maz-warning-900: 40 100% 29%;
+    --maz-warning-950: 40 100% 21.5%;
+    --maz-info-50: 188 64.3% 78.5%;
+    --maz-info-100: 188 65.8% 71%;
+    --maz-info-200: 188 68.9% 63.5%;
+    --maz-info-300: 188 71.9% 56%;
+    --maz-info-400: 188 75% 48.5%;
+    --maz-info-500: 188 78% 41%;
+    --maz-info-600: 188 80.3% 33.5%;
+    --maz-info-700: 188 82.6% 26%;
+    --maz-info-800: 188 84.8% 18.5%;
+    --maz-info-900: 188 87.1% 11%;
+    --maz-info-950: 188 88.3% 3.5%;
+    --maz-contrast-50: 235 15.4% 52.5%;
+    --maz-contrast-100: 235 15.5% 45%;
+    --maz-contrast-200: 235 15.6% 37.5%;
+    --maz-contrast-300: 235 15.7% 30%;
+    --maz-contrast-400: 235 15.9% 22.5%;
+    --maz-contrast-500: 235 16% 15%;
+    --maz-contrast-600: 235 16.1% 7.5%;
+    --maz-contrast-700: 235 16.2% 0%;
+    --maz-contrast-800: 235 16.3% 0%;
+    --maz-contrast-900: 235 16.4% 0%;
+    --maz-contrast-950: 235 16.4% 0%;
+    --maz-background-50: 0 5% 100%;
+    --maz-background-100: 0 5% 100%;
+    --maz-background-200: 0 5% 100%;
+    --maz-background-300: 0 5% 100%;
+    --maz-background-400: 0 5% 100%;
+    --maz-background-500: 0 0% 100%;
+    --maz-background-600: 0 5% 92.5%;
+    --maz-background-700: 0 5% 85%;
+    --maz-background-800: 0 5% 77.5%;
+    --maz-background-900: 0 5% 70%;
+    --maz-background-950: 0 5% 62.5%;
+    --maz-foreground-50: 210 7.9% 51.5%;
+    --maz-foreground-100: 210 7.9% 44%;
+    --maz-foreground-200: 210 7.9% 36.5%;
+    --maz-foreground-300: 210 7.9% 29%;
+    --maz-foreground-400: 210 8% 21.5%;
+    --maz-foreground-500: 210 8% 14%;
+    --maz-foreground-600: 210 8% 6.5%;
+    --maz-foreground-700: 210 8% 0%;
+    --maz-foreground-800: 210 8.1% 0%;
+    --maz-foreground-900: 210 8.1% 0%;
+    --maz-foreground-950: 210 8.1% 0%;
+    --maz-border-50: 220 12.7% 100%;
+    --maz-border-100: 220 12.7% 100%;
+    --maz-border-200: 220 12.8% 100%;
+    --maz-border-300: 220 12.9% 100%;
+    --maz-border-400: 220 13% 98.5%;
+    --maz-border-500: 220 13% 91%;
+    --maz-border-600: 220 13.1% 83.5%;
+    --maz-border-700: 220 13.2% 76%;
+    --maz-border-800: 220 13.2% 68.5%;
+    --maz-border-900: 220 13.3% 61%;
+    --maz-border-950: 220 13.3% 53.5%;
+    --maz-muted-50: 0 5% 91.5%;
+    --maz-muted-100: 0 5% 84%;
+    --maz-muted-200: 0 5% 76.5%;
+    --maz-muted-300: 0 5% 69%;
+    --maz-muted-400: 0 5% 61.5%;
+    --maz-muted-500: 0 0% 54%;
+    --maz-muted-600: 0 5% 46.5%;
+    --maz-muted-700: 0 5% 39%;
+    --maz-muted-800: 0 5% 31.5%;
+    --maz-muted-900: 0 5% 24%;
+    --maz-muted-950: 0 5% 16.5%;
+    --maz-overlay-50: 0 5% 77.5%;
+    --maz-overlay-100: 0 5% 70%;
+    --maz-overlay-200: 0 5% 62.5%;
+    --maz-overlay-300: 0 5% 55%;
+    --maz-overlay-400: 0 5% 47.5%;
+    --maz-overlay-500: 0 0% 40%;
+    --maz-overlay-600: 0 5% 32.5%;
+    --maz-overlay-700: 0 5% 25%;
+    --maz-overlay-800: 0 5% 17.5%;
+    --maz-overlay-900: 0 5% 10%;
+    --maz-overlay-950: 0 5% 2.5%;
+    --maz-shadow-50: 240 5.8% 47.5%;
+    --maz-shadow-100: 240 5.8% 40%;
+    --maz-shadow-200: 240 5.8% 32.5%;
+    --maz-shadow-300: 240 5.9% 25%;
+    --maz-shadow-400: 240 5.9% 17.5%;
+    --maz-shadow-500: 240 5.9% 10%;
+    --maz-shadow-600: 240 5.9% 2.5%;
+    --maz-shadow-700: 240 5.9% 0%;
+    --maz-shadow-800: 240 5.9% 0%;
+    --maz-shadow-900: 240 6% 0%;
+    --maz-shadow-950: 240 6% 0%;
+  }
+
+  .dark {
+    --maz-overlay: 0 0% 15%;
+    --maz-primary-50: 210 77.5% 93.5%;
+    --maz-primary-100: 210 80% 86%;
+    --maz-primary-200: 210 85% 78.5%;
+    --maz-primary-300: 210 90% 71%;
+    --maz-primary-400: 210 95% 63.5%;
+    --maz-primary-500: 210 100% 56%;
+    --maz-primary-600: 210 100% 48.5%;
+    --maz-primary-700: 210 100% 41%;
+    --maz-primary-800: 210 100% 33.5%;
+    --maz-primary-900: 210 100% 26%;
+    --maz-primary-950: 210 100% 18.5%;
+    --maz-secondary-50: 272 76.9% 91.5%;
+    --maz-secondary-100: 272 79.4% 84%;
+    --maz-secondary-200: 272 84.3% 76.5%;
+    --maz-secondary-300: 272 89.2% 69%;
+    --maz-secondary-400: 272 94.1% 61.5%;
+    --maz-secondary-500: 272 99% 54%;
+    --maz-secondary-600: 272 100% 46.5%;
+    --maz-secondary-700: 272 100% 39%;
+    --maz-secondary-800: 272 100% 31.5%;
+    --maz-secondary-900: 272 100% 24%;
+    --maz-secondary-950: 272 100% 16.5%;
+    --maz-accent-50: 164 63% 83.5%;
+    --maz-accent-100: 164 64.4% 76%;
+    --maz-accent-200: 164 67.3% 68.5%;
+    --maz-accent-300: 164 70.2% 61%;
+    --maz-accent-400: 164 73.1% 53.5%;
+    --maz-accent-500: 164 76% 46%;
+    --maz-accent-600: 164 78.2% 38.5%;
+    --maz-accent-700: 164 80.3% 31%;
+    --maz-accent-800: 164 82.5% 23.5%;
+    --maz-accent-900: 164 84.7% 16%;
+    --maz-accent-950: 164 85.7% 8.5%;
+    --maz-destructive-50: 1 77.5% 100%;
+    --maz-destructive-100: 1 80% 100%;
+    --maz-destructive-200: 1 85% 93.5%;
+    --maz-destructive-300: 1 90% 86%;
+    --maz-destructive-400: 1 95% 78.5%;
+    --maz-destructive-500: 1 100% 71%;
+    --maz-destructive-600: 1 100% 63.5%;
+    --maz-destructive-700: 1 100% 56%;
+    --maz-destructive-800: 1 100% 48.5%;
+    --maz-destructive-900: 1 100% 41%;
+    --maz-destructive-950: 1 100% 33.5%;
+    --maz-success-50: 80 52.6% 87.5%;
+    --maz-success-100: 80 53.6% 80%;
+    --maz-success-200: 80 55.4% 72.5%;
+    --maz-success-300: 80 57.3% 65%;
+    --maz-success-400: 80 59.1% 57.5%;
+    --maz-success-500: 80 61% 50%;
+    --maz-success-600: 80 62.4% 42.5%;
+    --maz-success-700: 80 63.8% 35%;
+    --maz-success-800: 80 65.2% 27.5%;
+    --maz-success-900: 80 66.6% 20%;
+    --maz-success-950: 80 67.3% 12.5%;
+    --maz-warning-50: 40 75.8% 96.5%;
+    --maz-warning-100: 40 78.2% 89%;
+    --maz-warning-200: 40 82.9% 81.5%;
+    --maz-warning-300: 40 87.6% 74%;
+    --maz-warning-400: 40 92.3% 66.5%;
+    --maz-warning-500: 40 97% 59%;
+    --maz-warning-600: 40 100% 51.5%;
+    --maz-warning-700: 40 100% 44%;
+    --maz-warning-800: 40 100% 36.5%;
+    --maz-warning-900: 40 100% 29%;
+    --maz-warning-950: 40 100% 21.5%;
+    --maz-info-50: 188 64.3% 78.5%;
+    --maz-info-100: 188 65.8% 71%;
+    --maz-info-200: 188 68.9% 63.5%;
+    --maz-info-300: 188 71.9% 56%;
+    --maz-info-400: 188 75% 48.5%;
+    --maz-info-500: 188 78% 41%;
+    --maz-info-600: 188 80.3% 33.5%;
+    --maz-info-700: 188 82.6% 26%;
+    --maz-info-800: 188 84.8% 18.5%;
+    --maz-info-900: 188 87.1% 11%;
+    --maz-info-950: 188 88.3% 3.5%;
+    --maz-contrast-50: 0 5% 100%;
+    --maz-contrast-100: 0 5% 100%;
+    --maz-contrast-200: 0 5% 100%;
+    --maz-contrast-300: 0 5% 100%;
+    --maz-contrast-400: 0 5% 100%;
+    --maz-contrast-500: 0 0% 100%;
+    --maz-contrast-600: 0 5% 92.5%;
+    --maz-contrast-700: 0 5% 85%;
+    --maz-contrast-800: 0 5% 77.5%;
+    --maz-contrast-900: 0 5% 70%;
+    --maz-contrast-950: 0 5% 62.5%;
+    --maz-background-50: 235 15.4% 52.5%;
+    --maz-background-100: 235 15.5% 45%;
+    --maz-background-200: 235 15.6% 37.5%;
+    --maz-background-300: 235 15.7% 30%;
+    --maz-background-400: 235 15.9% 22.5%;
+    --maz-background-500: 235 16% 15%;
+    --maz-background-600: 235 16.1% 7.5%;
+    --maz-background-700: 235 16.2% 0%;
+    --maz-background-800: 235 16.3% 0%;
+    --maz-background-900: 235 16.4% 0%;
+    --maz-background-950: 235 16.4% 0%;
+    --maz-foreground-50: 0 5% 100%;
+    --maz-foreground-100: 0 5% 100%;
+    --maz-foreground-200: 0 5% 100%;
+    --maz-foreground-300: 0 5% 100%;
+    --maz-foreground-400: 0 5% 92.5%;
+    --maz-foreground-500: 0 0% 85%;
+    --maz-foreground-600: 0 5% 77.5%;
+    --maz-foreground-700: 0 5% 70%;
+    --maz-foreground-800: 0 5% 62.5%;
+    --maz-foreground-900: 0 5% 55%;
+    --maz-foreground-950: 0 5% 47.5%;
+    --maz-border-50: 238 16.3% 62.5%;
+    --maz-border-100: 238 16.4% 55%;
+    --maz-border-200: 238 16.6% 47.5%;
+    --maz-border-300: 238 16.7% 40%;
+    --maz-border-400: 238 16.9% 32.5%;
+    --maz-border-500: 238 17% 25%;
+    --maz-border-600: 238 17.1% 17.5%;
+    --maz-border-700: 238 17.2% 10%;
+    --maz-border-800: 238 17.3% 2.5%;
+    --maz-border-900: 238 17.4% 0%;
+    --maz-border-950: 238 17.5% 0%;
+    --maz-muted-50: 255 5% 91.5%;
+    --maz-muted-100: 255 5% 84%;
+    --maz-muted-200: 255 5% 76.5%;
+    --maz-muted-300: 255 5% 69%;
+    --maz-muted-400: 255 5% 61.5%;
+    --maz-muted-500: 255 0% 54%;
+    --maz-muted-600: 255 5% 46.5%;
+    --maz-muted-700: 255 5% 39%;
+    --maz-muted-800: 255 5% 31.5%;
+    --maz-muted-900: 255 5% 24%;
+    --maz-muted-950: 255 5% 16.5%;
+    --maz-overlay-50: 0 5% 52.5%;
+    --maz-overlay-100: 0 5% 45%;
+    --maz-overlay-200: 0 5% 37.5%;
+    --maz-overlay-300: 0 5% 30%;
+    --maz-overlay-400: 0 5% 22.5%;
+    --maz-overlay-500: 0 0% 15%;
+    --maz-overlay-600: 0 5% 7.5%;
+    --maz-overlay-700: 0 5% 0%;
+    --maz-overlay-800: 0 5% 0%;
+    --maz-overlay-900: 0 5% 0%;
+    --maz-overlay-950: 0 5% 0%;
+    --maz-shadow-50: 240 5% 53.4%;
+    --maz-shadow-100: 240 5% 45.9%;
+    --maz-shadow-200: 240 5% 38.4%;
+    --maz-shadow-300: 240 5% 30.9%;
+    --maz-shadow-400: 240 5% 23.4%;
+    --maz-shadow-500: 240 3.7% 15.9%;
+    --maz-shadow-600: 240 5% 8.4%;
+    --maz-shadow-700: 240 5% 0.9%;
+    --maz-shadow-800: 240 5% 0%;
+    --maz-shadow-900: 240 5% 0%;
+    --maz-shadow-950: 240 5% 0%;
+  }
+}
+```
+
+:::
+
 ## Usage with Nuxt
 
 For Nuxt users, check the [dedicated Nuxt documentation](/guide/nuxt) which covers installation and framework-specific configuration.

package/docs/src/index.md

@@ -80,10 +80,10 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
       <div class="maz-flex maz-justify-between maz-items-start tab-l:maz-items-center maz-gap-4 maz-mb-4 maz-flex-col-reverse tab-l:maz-flex-row">
         <MazTabsBar :items="['Dashboard', 'Product Page', 'Auth Page']" />
         <div class="maz-flex maz-gap-2 maz-items-center maz-flex-row-reverse tab-l:maz-flex-row">
-          <MazBtn fab color="background" :icon="isDark ? MazMoon : MazSun" outlined @click="toggleDarkMode" />
+          <MazBtn size="sm" fab color="background" :icon="isDark ? MazMoon : MazSun" outlined @click="toggleDarkMode" />
           <MazRadioButtons
             :model-value="presetName"
-            size="lg"
+            size="sm"
             :options="[{
               label: 'Pristine',
               value: 'pristine'
@@ -435,7 +435,7 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
       </div>
       <h3 class="maz-text-base maz-font-semibold">useFormValidator</h3>
       <p class="dark:maz-text-gray-300 maz-text-muted maz-text-sm">
-        A Vue 3 composable designed to simplify form validation using Valibot as the validation library. Offers a flexible and typed approach to handle form validation.
+        A Vue composable designed to simplify form validation using Valibot as the validation library. Offers a flexible and typed approach to handle form validation.
       </p>
       <div class="maz-flex-1"></div>
       <MazBtn color="background" outlined size="sm" block href="/composables/use-form-validator">Discover</MazBtn>
@@ -491,7 +491,7 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
       </div>
       <h3 class="maz-text-base maz-font-semibold">useDisplayNames</h3>
       <p class="dark:maz-text-gray-300 maz-text-muted maz-text-sm">
-        A Vue 3 composable that provides functions to work with localized display names based on ISO codes, leveraging the Intl.DisplayNames API.
+        A Vue composable that provides functions to work with localized display names based on ISO codes, leveraging the Intl.DisplayNames API.
       </p>
       <div class="maz-flex-1"></div>
       <MazBtn color="background" outlined size="sm" block href="/composables/use-display-names">Discover</MazBtn>
@@ -514,9 +514,9 @@ description: Build amazing interfaces with Maz-UI - standalone components & tool
 </section>
 
 <script lang="ts" setup>
-  import DemoAuthPage from './demo/DemoAuthPage.vue'
-  import DemoDashboardPage from './demo/DemoDashboardPage.vue'
-  import DemoProductPage from './demo/DemoProductPage.vue'
+  import DemoAuthPage from '../components/DemoAuthPage.vue'
+  import DemoDashboardPage from '../components/DemoDashboardPage.vue'
+  import DemoProductPage from '../components/DemoProductPage.vue'
 
   import { ref, computed } from 'vue'
   import { MazStar, MazPlay, MazGithub, MazSun, MazMoon } from '@maz-ui/icons'

package/docs/src/theme-editor.md

@@ -0,0 +1,21 @@
+---
+title: Theme Editor
+description: Create your own theme for maz-ui and export it to use it in your project
+layout: home
+sidebar: false
+---
+
+<br />
+<br />
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<br />
+
+<ThemeEditorPage />
+
+<script setup lang="ts">
+  import ThemeEditorPage from '../components/ThemeEditorPage.vue'
+</script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/mcp",
   "type": "module",
-  "version": "4.1.2",
+  "version": "4.1.6-beta.0",
   "description": "Maz-UI ModelContextProtocol Client",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -58,13 +58,13 @@
     "test:unit:coverage": "pnpm generate:docs && vitest run --coverage"
   },
   "dependencies": {
-    "@maz-ui/node": "4.1.2",
-    "@maz-ui/utils": "4.1.2",
+    "@maz-ui/node": "4.1.6-beta.0",
+    "@maz-ui/utils": "4.1.6-beta.0",
     "@modelcontextprotocol/sdk": "^1.17.2"
   },
   "devDependencies": {
-    "@maz-ui/eslint-config": "4.1.2",
-    "@modelcontextprotocol/inspector": "^0.16.2",
+    "@maz-ui/eslint-config": "4.1.6-beta.0",
+    "@modelcontextprotocol/inspector": "^0.16.3",
     "@swc/core": "1.13.3",
     "@types/node": "^24.2.1",
     "@vitest/coverage-v8": "^3.2.4",
@@ -72,7 +72,7 @@
     "lint-staged": "^16.1.5",
     "prettier": "^3.5.3",
     "ts-node-maintained": "^10.9.5",
-    "tsx": "^4.20.3",
+    "tsx": "^4.20.4",
     "typescript": "^5.9.2",
     "unbuild": "^3.6.0",
     "vitest": "^3.2.4"
@@ -80,5 +80,5 @@
   "lint-staged": {
     "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
   },
-  "gitHead": "7be37c69c61b31f83699a61039b407ff196facc4"
+  "gitHead": "fb0c234c2025820e2ba9bda458d36dbb3caf4f0a"
 }

package/docs/src/demo/DemoAuthPage.vue

@@ -1,178 +0,0 @@
-<script lang="ts" setup>
-import type { ComponentPublicInstance } from 'vue'
-import { useFormField, useFormValidator, useToast } from 'maz-ui/composables'
-import MazDialog from 'maz-ui/src/components/MazDialog.vue'
-import { boolean, email, nonEmpty, pipe, string } from 'valibot'
-import { ref } from 'vue'
-
-const toast = useToast()
-
-// Form data
-const twoFactorCode = ref('')
-const isLoading = ref(false)
-const hasError = ref(false)
-const errorMessage = ref('')
-const showSuccessDialog = ref(false)
-const step = ref(1)
-
-const { model, errorMessages, handleSubmit } = useFormValidator({
-  schema: {
-    email: pipe(string('Email is required'), nonEmpty('Email is required'), email('Email is invalid')),
-    password: pipe(string('Password is required'), nonEmpty('Password is required')),
-    rememberMe: boolean(),
-  },
-  options: { mode: 'progressive' },
-})
-
-const emailRef = ref<ComponentPublicInstance>()
-const passwordRef = ref<ComponentPublicInstance>()
-
-useFormField('email', { ref: emailRef })
-useFormField('password', { ref: passwordRef })
-
-// Methods
-function forgotPassword() {
-  toast.info('Reset password link sent to your email')
-}
-
-function goToRegister() {
-  toast.info('Registration feature coming soon!')
-}
-
-async function resendCode() {
-  isLoading.value = true
-  await new Promise(resolve => setTimeout(resolve, 1000))
-  isLoading.value = false
-  toast.success('New code sent to your email')
-}
-
-async function verifyCode() {
-  if (twoFactorCode.value.length !== 4) {
-    hasError.value = true
-    errorMessage.value = 'Please enter a valid code'
-    return
-  }
-
-  isLoading.value = true
-  await new Promise(resolve => setTimeout(resolve, 1000))
-  isLoading.value = false
-  showSuccessDialog.value = true
-}
-
-const onSubmit = handleSubmit(() => {
-  step.value = 2
-})
-</script>
-
-<template>
-  <div class="vp-raw maz-flex">
-    <div class="maz-hidden maz-flex-1 maz-flex-col maz-gap-2 maz-bg-contrast maz-p-6 maz-flex-center tab-m:maz-flex">
-      <MazIcon src="/img/logo.svg" size="6rem" style="width: auto;" />
-
-      <p class="maz-text-center maz-text-sm maz-text-contrast-foreground">
-        Standalone components and tools library for Vue & Nuxt
-      </p>
-    </div>
-    <div class="maz-flex maz-flex-1 maz-items-center maz-py-6 maz-pr-0">
-      <MazStepper v-model="step" auto-validate-steps>
-        <template #title-1>
-          Sign In
-        </template>
-        <template #subtitle-1>
-          Welcome back!
-        </template>
-        <template #content-1>
-          <form novalidate class="maz-space-y-4" @submit.prevent="onSubmit">
-            <MazInput
-              ref="emailRef"
-              v-model="model.email"
-              top-label="Email"
-              type="email"
-              required
-              autocomplete="email"
-              :error="!!errorMessages.email"
-              :hint="errorMessages.email"
-              placeholder="john.doe@example.com"
-              left-icon="envelope"
-              block
-            />
-
-            <MazInput
-              ref="passwordRef"
-              v-model="model.password"
-              top-label="Password"
-              type="password"
-              placeholder="********"
-              required
-              autocomplete="off"
-              :error="!!errorMessages.password"
-              :hint="errorMessages.password"
-              left-icon="lock-closed"
-              block
-            />
-
-            <div class="maz-flex maz-items-center maz-justify-between">
-              <MazCheckbox v-model="model.rememberMe" color="contrast">
-                Remember me
-              </MazCheckbox>
-
-              <MazLink color="contrast" href="#" @click.prevent="forgotPassword">
-                Forgot password?
-              </MazLink>
-            </div>
-
-            <MazBtn type="submit" color="contrast" block :loading="isLoading">
-              Sign In
-            </MazBtn>
-
-            <div class="maz-text-center maz-text-muted">
-              Don't have an account?
-              <MazLink color="contrast" href="#" @click.prevent="goToRegister">
-                Register
-              </MazLink>
-            </div>
-          </form>
-        </template>
-
-        <template #title-2>
-          Two Factor Auth
-        </template>
-        <template #subtitle-2>
-          Enter the code sent to your email
-        </template>
-        <template #content-2="{ previousStep }">
-          <div class="maz-space-y-4">
-            <MazInputCode
-              v-model="twoFactorCode"
-              length="6"
-              :error="hasError"
-              :hint="errorMessage"
-            />
-
-            <div class="maz-flex maz-gap-4">
-              <MazBtn color="secondary" block @click="previousStep">
-                Back
-              </MazBtn>
-              <MazBtn color="contrast" block :loading="isLoading" @click="verifyCode">
-                Verify
-              </MazBtn>
-            </div>
-
-            <MazBtn color="contrast" outlined block @click="resendCode">
-              Resend code
-            </MazBtn>
-          </div>
-        </template>
-      </MazStepper>
-    </div>
-
-    <MazDialog v-model="showSuccessDialog" title="Welcome back!">
-      <p>You have successfully signed in.</p>
-      <template #footer="{ close }">
-        <MazBtn color="contrast" @click="close">
-          Continue
-        </MazBtn>
-      </template>
-    </MazDialog>
-  </div>
-</template>

package/docs/src/demo/DemoDashboardPage.vue

@@ -1,298 +0,0 @@
-<script lang="ts" setup>
-import dataLabels from 'chartjs-plugin-datalabels'
-import { ref } from 'vue'
-
-const { delay = 100 } = defineProps<{
-  delay?: number
-}>()
-
-const selectedPeriod = ref('last_7_days')
-const selectedCategories = ref(['sales', 'customers', 'orders'])
-const dateRange = ref({
-  start: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
-  end: new Date().toISOString(),
-})
-const salesTarget = ref(75)
-
-// Chart data
-const salesData = {
-  type: 'line',
-  plugins: [dataLabels],
-  data: {
-    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    datasets: [
-      {
-        label: 'Sales',
-        data: [3100, 4200, 2900, 5600, 4900, 6100, 5900],
-        borderColor: 'rgb(28 209 161)',
-        tension: 0.4,
-        fill: false,
-      },
-      {
-        label: 'Orders',
-        data: [410, 520, 340, 690, 590, 780, 710],
-        borderColor: '#1e90ff',
-        tension: 0.4,
-        fill: false,
-      },
-    ],
-  },
-  options: {
-    plugins: {
-      datalabels: {
-        display: false,
-      },
-    },
-  },
-}
-
-// Table data
-const orders = ref([
-  { id: 1, customer: 'John Doe', product: 'Premium Headphones', amount: 169.99, status: 'completed', date: '2024-03-18' },
-  { id: 2, customer: 'Jane Smith', product: 'Wireless Speaker', amount: 89.99, status: 'pending', date: '2024-03-18' },
-  { id: 3, customer: 'Mike Johnson', product: 'Smart Watch', amount: 299.99, status: 'processing', date: '2024-03-17' },
-  { id: 4, customer: 'Sarah Wilson', product: 'Laptop Stand', amount: 49.99, status: 'completed', date: '2024-03-17' },
-  { id: 5, customer: 'Tom Brown', product: 'USB-C Hub', amount: 79.99, status: 'completed', date: '2024-03-16' },
-])
-
-const tableHeaders = [
-  { label: 'Order ID', key: 'id', sortable: true },
-  { label: 'Customer', key: 'customer', sortable: true },
-  { label: 'Product', key: 'product', sortable: true },
-  { label: 'Amount', key: 'amount', sortable: true },
-  { label: 'Status', key: 'status', sortable: true },
-  { label: 'Date', key: 'date', sortable: true },
-]
-</script>
-
-<template>
-  <div class="vp-raw maz-p-4">
-    <!-- Filters Section -->
-    <div class="maz-mb-4 maz-flex maz-flex-wrap maz-gap-4">
-      <MazSelect
-        v-model="selectedPeriod"
-        :options="[
-          { label: 'Last 7 Days', value: 'last_7_days' },
-          { label: 'Last 30 Days', value: 'last_30_days' },
-          { label: 'Last 90 Days', value: 'last_90_days' },
-          { label: 'Custom Range', value: 'custom' },
-        ]"
-        label="Time Period"
-        class="maz-w-48"
-      />
-
-      <MazSelect
-        v-model="selectedCategories"
-        :options="[
-          { label: 'Sales', value: 'sales' },
-          { label: 'Customers', value: 'customers' },
-          { label: 'Orders', value: 'orders' },
-          { label: 'Products', value: 'products' },
-        ]"
-        label="Categories"
-        multiple
-        class="maz-w-64"
-      />
-
-      <MazDatePicker
-        v-model="dateRange"
-        range
-        label="Date Range"
-        class="maz-w-64"
-        locale="en-US"
-        picker-position="bottom-end"
-        :input-date-style="{
-          dateStyle: 'medium',
-        }"
-        double
-      />
-    </div>
-
-    <!-- Stats Cards -->
-    <div class="maz-mb-4 maz-grid maz-grid-cols-1 maz-gap-4 sm:maz-grid-cols-2 lg:maz-grid-cols-4">
-      <MazCard bordered :elevation="false" block>
-        <div class="maz-flex maz-items-center maz-gap-4">
-          <MazCircularProgressBar
-            :percentage="85"
-            color="success"
-            size="3rem"
-            :delay
-            :once="false"
-          />
-          <div class="maz-truncate">
-            <div class="maz-text-xl maz-font-bold">
-              <MazAnimatedCounter
-                :delay
-                :count="28945"
-                prefix="$"
-                separator=","
-                :once="false"
-              />
-            </div>
-            <div class="maz-truncate maz-text-sm maz-text-muted">
-              Total Revenue
-            </div>
-          </div>
-        </div>
-      </MazCard>
-
-      <MazCard bordered :elevation="false" block>
-        <div class="maz-flex maz-items-center maz-gap-4">
-          <MazCircularProgressBar
-            :percentage="65"
-            color="info"
-            size="3rem"
-            :delay
-            :once="false"
-          />
-          <div class="maz-truncate">
-            <div class="maz-text-xl maz-font-bold">
-              <MazAnimatedCounter
-                :delay
-                :count="384"
-                separator=","
-                :once="false"
-              />
-            </div>
-            <div class="maz-truncate maz-text-sm maz-text-muted">
-              New Orders
-            </div>
-          </div>
-        </div>
-      </MazCard>
-
-      <MazCard bordered :elevation="false" block>
-        <div class="maz-flex maz-items-center maz-gap-4">
-          <MazCircularProgressBar
-            :percentage="92"
-            color="warning"
-            size="3rem"
-            :delay
-            :once="false"
-          />
-          <div class="maz-truncate">
-            <div class="maz-text-xl maz-font-bold">
-              <MazAnimatedCounter
-                :delay
-                :count="1482"
-                separator=","
-                :once="false"
-              />
-            </div>
-            <div class="maz-truncate maz-text-sm maz-text-muted">
-              Active Customers
-            </div>
-          </div>
-        </div>
-      </MazCard>
-
-      <MazCard bordered :elevation="false" block>
-        <div class="maz-flex maz-items-center maz-gap-4">
-          <MazCircularProgressBar
-            :percentage="78"
-            color="destructive"
-            size="3rem"
-            :delay
-            :once="false"
-          />
-          <div class="maz-truncate">
-            <div class="maz-text-xl maz-font-bold">
-              <MazAnimatedCounter
-                :delay
-                :count="94"
-                suffix="%"
-                :once="false"
-              />
-            </div>
-            <div class="maz-truncate maz-text-sm maz-text-muted">
-              Customer Satisfaction
-            </div>
-          </div>
-        </div>
-      </MazCard>
-    </div>
-
-    <!-- Orders Table -->
-    <MazTable
-      :headers="tableHeaders"
-      :rows="orders"
-      search
-      title="Recent Orders"
-      sortable
-      hoverable
-      input-size="sm"
-      pagination
-      selectable
-    >
-      <template #cell-amount="{ value }">
-        <span class="maz-font-semibold">
-          ${{ value }}
-        </span>
-      </template>
-      <template #cell-status="{ value }">
-        <MazBadge
-          :color="value === 'completed' ? 'success' : value === 'processing' ? 'warning' : 'info'"
-        >
-          {{ value }}
-        </MazBadge>
-      </template>
-    </MazTable>
-
-    <!-- Charts Section -->
-    <div class="maz-mt-4 maz-grid maz-grid-cols-1 maz-gap-4 lg:maz-grid-cols-2">
-      <MazCard bordered :elevation="false" block>
-        <template #title>
-          <h3 class="maz-text-lg maz-font-semibold">
-            Sales Overview
-          </h3>
-        </template>
-        <MazChart v-bind="salesData" height="125" />
-      </MazCard>
-
-      <MazCard bordered :elevation="false" block>
-        <template #title>
-          <div class="maz-flex maz-w-full maz-items-center maz-justify-between">
-            <h3 class="maz-text-lg maz-font-semibold">
-              Sales Target
-            </h3>
-            <span class="maz-text-xl maz-font-bold maz-text-success">
-              {{ salesTarget }}%
-            </span>
-          </div>
-        </template>
-        <div class="maz-flex maz-h-full maz-flex-col maz-justify-between maz-gap-4">
-          <div>
-            <MazSlider
-              v-model="salesTarget"
-              :min="0"
-              :max="100"
-              color="success"
-            />
-            <div class="maz-mt-4 maz-text-center maz-text-sm maz-text-muted">
-              Drag the slider to adjust sales target
-            </div>
-          </div>
-
-          <div class="maz-mt-4 maz-flex maz-items-center maz-justify-between">
-            <div>
-              <p class="maz-font-medium">
-                Monthly Target
-              </p>
-              <p class="maz-text-sm maz-text-muted">
-                ${{ (1000 * salesTarget).toLocaleString() }}
-              </p>
-            </div>
-            <div>
-              <p class="maz-font-medium">
-                Achieved
-              </p>
-              <p class="maz-text-sm maz-text-success">
-                $50,000
-              </p>
-            </div>
-          </div>
-        </div>
-      </MazCard>
-    </div>
-  </div>
-</template>

package/docs/src/demo/DemoProductPage.vue

@@ -1,135 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue'
-
-const selectedColor = ref('black')
-const quantity = ref(1)
-const selectedTasks = ref([])
-const price = ref(100)
-</script>
-
-<template>
-  <div class="vp-raw maz-mx-auto maz-max-w-7xl maz-p-4">
-    <div class="maz-grid maz-grid-cols-1 maz-gap-8 md:maz-grid-cols-2">
-      <div>
-        <MazGallery
-          :images="[
-            'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800',
-            'https://images.unsplash.com/photo-1487215078519-e21cc028cb29?w=800',
-            'https://images.unsplash.com/photo-1583394838336-acd977736f90?w=800',
-            'https://images.unsplash.com/photo-1607294846590-fd005d7973e8?w=800',
-          ]"
-          :height="false"
-          :displayed-count="2"
-          class="maz-mb-6 maz-h-64"
-        />
-
-        <div class="maz-mb-6">
-          <h2 class="maz-mb-2 maz-text-xl maz-font-semibold">
-            Description
-          </h2>
-          <p class="maz-text-muted">
-            Experience premium sound quality with our wireless headphones. Featuring advanced noise cancellation,
-            long battery life and premium materials for ultimate comfort.
-          </p>
-        </div>
-
-        <MazCard block :elevation="false" bordered>
-          <template #title>
-            <h3 class="maz-text-lg maz-font-semibold">
-              Technical Specs
-            </h3>
-          </template>
-          <div class="maz-space-y-2">
-            <div class="maz-flex maz-justify-between">
-              <span>Driver Size</span>
-              <span>40mm</span>
-            </div>
-            <div class="maz-flex maz-justify-between">
-              <span>Frequency Response</span>
-              <span>20Hz - 20kHz</span>
-            </div>
-            <div class="maz-flex maz-justify-between">
-              <span>Impedance</span>
-              <span>32 Ohm</span>
-            </div>
-          </div>
-        </MazCard>
-      </div>
-      <div class="maz-space-y-6">
-        <h1 class="maz-text-3xl maz-font-bold">
-          Premium Headphones
-        </h1>
-
-        <div class="maz-text-3xl maz-font-bold">
-          169,99€
-        </div>
-
-        <hr class="maz-my-4 maz-border-t maz-border-divider">
-
-        <div>
-          <h2 class="maz-mb-2 maz-text-xl maz-font-semibold">
-            Color
-          </h2>
-          <MazSelect
-            v-model="selectedColor"
-            :options="[
-              { label: 'Black', value: 'black' },
-              { label: 'White', value: 'white' },
-              { label: 'Rose Gold', value: 'rose-gold' },
-            ]"
-            label="Color"
-            class="maz-flex-1"
-            block
-          />
-        </div>
-
-        <div>
-          <h2 class="maz-mb-2 maz-text-xl maz-font-semibold">
-            Choose options
-          </h2>
-
-          <MazChecklist
-            v-model="selectedTasks"
-            :search="false"
-            :items="[
-              { label: 'Active Noise Cancellation', value: 'anc' },
-              { label: '40h Battery Life', value: 'battery' },
-              { label: 'Premium Audio Drivers', value: 'audio' },
-              { label: 'Bluetooth 5.0', value: 'bluetooth' },
-            ]"
-            readonly
-          />
-        </div>
-
-        <div class="maz-flex maz-flex-col maz-gap-4 lap-s:maz-flex-row">
-          <MazInputPrice
-            v-model="price"
-            label="Price"
-            :min="1"
-            :step="1"
-            :text-center="false"
-            class="maz-flex-1"
-          />
-
-          <MazBtn color="contrast" outlined class="maz-flex-1" right-icon="shopping-cart">
-            Make an offer
-          </MazBtn>
-        </div>
-        <div class="maz-flex maz-flex-col maz-gap-4 lap-s:maz-flex-row">
-          <MazInputNumber
-            v-model="quantity"
-            label="Quantity"
-            :min="1"
-            :step="1"
-            :text-center="false"
-            class="maz-flex-1"
-          />
-
-          <MazBtn color="contrast" class="maz-flex-1" right-icon="shopping-cart">
-            Add to Cart
-          </MazBtn>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>