@maz-ui/mcp 4.1.2 → 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";
+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/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
 

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">

package/docs/src/demo/ThemeEditorPage.vue

@@ -0,0 +1,396 @@
+<script setup lang="ts">
+import type { ThemePreset } from '@maz-ui/themes'
+import { useTheme } from '@maz-ui/themes/composables/useTheme'
+import { mazUi } from '@maz-ui/themes/presets/mazUi'
+import { useToast } from 'maz-ui/composables'
+import { codeToHtml } from 'shiki'
+import { computed, nextTick, reactive, ref, watch } from 'vue'
+import ColorPicker from './ColorPicker.vue'
+import DemoAuthPage from './DemoAuthPage.vue'
+import DemoDashboardPage from './DemoDashboardPage.vue'
+import DemoProductPage from './DemoProductPage.vue'
+
+const { updateTheme, isDark, toggleDarkMode, presetName } = useTheme()
+const toast = useToast()
+
+const currentTab = ref(1)
+const editingMode = ref<'light' | 'dark'>('light')
+const exportedCode = ref('')
+const highlightedCode = ref('')
+const showExportModal = ref(false)
+const isTransitioning = ref(false)
+
+const themeData = reactive<ThemePreset>({
+  name: mazUi.name,
+  foundation: { ...mazUi.foundation },
+  colors: {
+    light: { ...mazUi.colors.light },
+    dark: { ...mazUi.colors.dark },
+  },
+})
+
+const originalTheme = {
+  name: mazUi.name,
+  foundation: { ...mazUi.foundation },
+  colors: {
+    light: { ...mazUi.colors.light },
+    dark: { ...mazUi.colors.dark },
+  },
+}
+
+const colorCategories = [
+  {
+    name: 'Base Colors',
+    colors: ['background', 'foreground', 'border', 'muted', 'overlay', 'shadow'] as const,
+  },
+  {
+    name: 'Colors',
+    colors: ['primary', 'primary-foreground', 'secondary', 'secondary-foreground', 'accent', 'accent-foreground', 'success', 'success-foreground', 'warning', 'warning-foreground', 'destructive', 'destructive-foreground', 'info', 'info-foreground', 'contrast', 'contrast-foreground'] as const,
+  },
+]
+
+watch([themeData, editingMode], async () => {
+  await nextTick()
+  await updateTheme(themeData)
+}, { deep: true })
+
+function handleThemeModeToggle() {
+  isTransitioning.value = true
+  toggleDarkMode()
+
+  setTimeout(() => {
+    isTransitioning.value = false
+  }, 500)
+}
+
+function resetTheme() {
+  Object.assign(themeData.foundation, originalTheme.foundation)
+  Object.assign(themeData.colors.light, originalTheme.colors.light)
+  Object.assign(themeData.colors.dark, originalTheme.colors.dark)
+}
+
+function copyToClipboard(text: string) {
+  navigator.clipboard.writeText(text).then(() => {
+    showExportModal.value = false
+  })
+
+  toast.success('Theme copied to clipboard', {
+    position: 'top',
+  })
+}
+
+async function exportTheme() {
+  const themeCode = `import type { ThemePreset } from '@maz-ui/themes'
+
+export const customTheme: ThemePreset = ${JSON.stringify(themeData, null, 2)
+// Escape single quotes within string values
+  .replace(/: "([^"]*)"/g, (match, value) => {
+    const escapedValue = value.replace(/'/g, '\\\'')
+    return `: '${escapedValue}'`
+  })
+// Remove quotes from top-level keys and nested object keys
+  .replace(/^(\s*)"(name|foundation|colors)":/gm, '$1$2:')
+  .replace(/^(\s*)"(light|dark)":/gm, '$1$2:')}`
+
+  exportedCode.value = themeCode
+
+  try {
+    const html = await codeToHtml(themeCode, {
+      lang: 'typescript',
+      theme: isDark.value ? 'tokyo-night' : 'github-dark',
+    })
+    highlightedCode.value = html
+  }
+  catch (error) {
+    console.error('Failed to highlight code:', error)
+    highlightedCode.value = ''
+  }
+
+  showExportModal.value = true
+}
+
+const foundationInputs = computed(() => [
+  {
+    key: 'base-font-size',
+    label: 'Base Font Size',
+    type: 'text',
+    placeholder: '14px',
+  },
+  {
+    key: 'font-family',
+    label: 'Font Family',
+    type: 'text',
+    placeholder: 'Manrope, sans-serif',
+  },
+  {
+    key: 'radius',
+    label: 'Border Radius',
+    type: 'text',
+    placeholder: '0.7rem',
+  },
+  {
+    key: 'border-width',
+    label: 'Border Width',
+    type: 'text',
+    placeholder: '0.0625rem',
+  },
+])
+
+const currentColors = computed(() => themeData.colors[editingMode.value])
+
+function formatColorName(colorName: string): string {
+  return colorName
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+</script>
+
+<template>
+  <div class="vp-raw theme-configurator" :class="{ 'no-transitions': isTransitioning }">
+    <div class="maz-grid maz-min-h-[80vh] maz-grid-cols-1 maz-gap-4 lg:maz-grid-cols-12">
+      <!-- Editor Panel -->
+      <div class="maz-space-y-6 lg:maz-col-span-4 lg:maz-border-r lg:maz-pr-4">
+        <h2 class="maz-text-2xl maz-text-foreground">
+          Editor
+        </h2>
+
+        <div class="maz-flex maz-flex-col maz-gap-2 mob-l:maz-flex-row">
+          <MazBtn
+            size="md"
+            block
+            color="secondary"
+            @click="resetTheme"
+          >
+            Reset theme
+          </MazBtn>
+          <MazBtn
+            size="md"
+            block
+            color="primary"
+            @click="exportTheme"
+          >
+            Export theme
+          </MazBtn>
+        </div>
+
+        <MazCard block title="Base preset">
+          <MazRadioButtons
+            :model-value="presetName"
+            size="sm"
+            :options="[
+              {
+                label: 'Maz-UI',
+                value: 'maz-ui',
+              },
+              {
+                label: 'Pristine',
+                value: 'pristine',
+              },
+              {
+                label: 'Ocean',
+                value: 'ocean',
+              }, {
+                label: 'Obsidian',
+                value: 'obsidian',
+              }]"
+            @update:model-value="updateTheme($event)"
+          />
+        </MazCard>
+
+        <!-- Foundation Settings -->
+        <MazCard title="Foundation" block>
+          <div
+            class="maz-flex maz-flex-col maz-gap-3"
+          >
+            <template
+              v-for="input in foundationInputs"
+              :key="input.key"
+            >
+              <MazInput
+                v-model="themeData.foundation[input.key as keyof typeof themeData.foundation]"
+                :label="input.label"
+                :placeholder="input.placeholder"
+                size="sm"
+                block
+                debounce
+              />
+            </template>
+          </div>
+        </MazCard>
+
+        <!-- Colors Settings -->
+        <MazCard block>
+          <template #title>
+            <div class="maz-flex maz-w-full maz-items-center maz-justify-between">
+              <h3 class="maz-text-base">
+                Colors
+              </h3>
+
+              <div class="maz-flex maz-items-center maz-gap-2">
+                <label for="dark-mode-switch" class="maz-cursor-pointer maz-text-sm">
+                  Edit dark colors
+                </label>
+                <MazSwitch
+                  id="dark-mode-switch"
+                  :model-value="editingMode === 'dark'"
+                  @update:model-value="editingMode = $event ? 'dark' : 'light'; handleThemeModeToggle()"
+                />
+              </div>
+            </div>
+          </template>
+
+          <div class="maz-space-y-6">
+            <div
+              v-for="category in colorCategories"
+              :key="category.name"
+              class="maz-space-y-4"
+            >
+              <h4 class="maz-border-border maz-border-b maz-pb-2 maz-text-sm maz-font-semibold maz-text-foreground">
+                {{ category.name }}
+              </h4>
+
+              <div class="maz-grid maz-grid-cols-2 maz-gap-4">
+                <ColorPicker
+                  v-for="colorKey in category.colors"
+                  :key="`${editingMode}-${colorKey}`"
+                  v-model="currentColors[colorKey]"
+                  :label="formatColorName(colorKey)"
+                  class="maz-w-full"
+                />
+              </div>
+            </div>
+          </div>
+        </MazCard>
+      </div>
+
+      <!-- Preview Panel -->
+      <div class="lg:maz-col-span-8">
+        <div class="maz-sticky maz-top-4">
+          <div class="maz-mb-4 maz-flex maz-items-center maz-justify-between">
+            <h2 class="maz-text-2xl maz-text-foreground">
+              Preview
+            </h2>
+          </div>
+
+          <MazTabs v-model="currentTab">
+            <MazTabsBar
+              :items="['Dashboard', 'Product', 'Authentication']"
+              class="maz-mb-4"
+            />
+
+            <MazTabsContent>
+              <MazTabsContentItem :tab="1">
+                <MazCard
+                  bordered
+                  :padding="false"
+                  overflow-hidden
+                  class="maz-max-h-[70vh] maz-w-full maz-overflow-y-auto"
+                >
+                  <DemoDashboardPage :delay="0" />
+                </MazCard>
+              </MazTabsContentItem>
+
+              <MazTabsContentItem :tab="2">
+                <MazCard
+                  bordered
+                  :padding="false"
+                  overflow-hidden
+                  class="maz-max-h-[70vh] maz-w-full maz-overflow-y-auto"
+                >
+                  <DemoProductPage />
+                </MazCard>
+              </MazTabsContentItem>
+
+              <MazTabsContentItem :tab="3">
+                <MazCard
+                  bordered
+                  :padding="false"
+                  overflow-hidden
+                  class="maz-max-h-[70vh] maz-w-full maz-overflow-y-auto"
+                >
+                  <DemoAuthPage />
+                </MazCard>
+              </MazTabsContentItem>
+            </MazTabsContent>
+          </MazTabs>
+        </div>
+      </div>
+    </div>
+
+    <!-- Export Modal -->
+    <MazDialog v-model="showExportModal" scrollable title="Export Theme">
+      <div class="maz-space-y-4">
+        <p class="maz-text-muted">
+          Copy the generated TypeScript code below to use your custom theme:
+        </p>
+
+        <div class="maz-overflow-y-auto maz-rounded-md">
+          <div
+            v-if="highlightedCode"
+            class="shiki-wrapper"
+            v-html="highlightedCode"
+          />
+          <div
+            v-else
+            class="maz-bg-contrast maz-p-4 dark:maz-bg-surface-300"
+          >
+            <pre class="maz-whitespace-pre-wrap maz-font-mono maz-text-xs maz-text-contrast-foreground dark:maz-text-surface-foreground">{{ exportedCode }}</pre>
+          </div>
+        </div>
+      </div>
+
+      <template #footer>
+        <div class="maz-flex maz-gap-2">
+          <MazBtn color="primary" @click="copyToClipboard(exportedCode)">
+            Copy to Clipboard
+          </MazBtn>
+        </div>
+      </template>
+    </MazDialog>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+@media (max-width: 1024px) {
+  .theme-configurator {
+    @apply maz-space-y-8;
+  }
+
+  .theme-configurator .maz-sticky {
+    @apply maz-static;
+  }
+}
+</style>
+
+<style lang="postcss">
+/* Global styles to disable transitions during theme mode switch */
+.no-transitions *,
+.no-transitions *::before,
+.no-transitions *::after {
+  transition-duration: 0ms !important;
+  transition-delay: 0ms !important;
+  animation-duration: 0ms !important;
+  animation-delay: 0ms !important;
+}
+
+/* Shiki code highlighting styles */
+.shiki-wrapper {
+  @apply maz-rounded-md maz-overflow-hidden maz-bg-contrast dark:maz-bg-surface-400;
+}
+
+.shiki-wrapper pre {
+  @apply maz-p-4 maz-m-0 maz-text-xs maz-overflow-x-auto;
+  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace !important;
+}
+
+.shiki-wrapper code {
+  @apply maz-text-xs;
+  font-family: 'Fira Code', 'Consolas', 'Monaco', monospace !important;
+}
+
+/* Override shiki background to match theme */
+.shiki-wrapper .shiki {
+  background-color: transparent !important;
+}
+</style>

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

package/docs/src/index.md

@@ -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>

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 './demo/ThemeEditorPage.vue'
+</script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/mcp",
   "type": "module",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "description": "Maz-UI ModelContextProtocol Client",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -58,8 +58,8 @@
     "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.3",
+    "@maz-ui/utils": "4.1.3",
     "@modelcontextprotocol/sdk": "^1.17.2"
   },
   "devDependencies": {
@@ -80,5 +80,5 @@
   "lint-staged": {
     "*.{js,ts,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
   },
-  "gitHead": "7be37c69c61b31f83699a61039b407ff196facc4"
+  "gitHead": "09f62e1bb3a3faaaa1dc48ea6434f8da80a23d76"
 }