@maz-ui/mcp 4.1.3 → 4.1.7-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.2";
+const version = "4.1.6";
 
 const _dirname = dirname(fileURLToPath(import.meta.url));
 class DocumentationService {

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

@@ -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/guide/themes.md

@@ -783,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'
@@ -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

@@ -17,5 +17,5 @@ sidebar: false
 <ThemeEditorPage />
 
 <script setup lang="ts">
-  import ThemeEditorPage from './demo/ThemeEditorPage.vue'
+  import ThemeEditorPage from '../components/ThemeEditorPage.vue'
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/mcp",
   "type": "module",
-  "version": "4.1.3",
+  "version": "4.1.7-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.3",
-    "@maz-ui/utils": "4.1.3",
+    "@maz-ui/node": "4.1.7-beta.0",
+    "@maz-ui/utils": "4.1.7-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.7-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": "09f62e1bb3a3faaaa1dc48ea6434f8da80a23d76"
+  "gitHead": "96035148527e2e795db6a7ea06f42e45995335b2"
 }

package/docs/src/demo/ColorPicker.vue

@@ -1,167 +0,0 @@
-<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>