maz-ui 5.0.1-beta.0 → 5.1.0-beta.0

package/dist/assets/{MazDropzone.DJ8au25t.css → MazDropzone.BW2grpTi.css}

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-909520cb],[data-v-909520cb]:before,[data-v-909520cb]:after{--tw-font-weight:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}[data-v-909520cb]::backdrop{--tw-font-weight:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}.m-dropzone .icon-scale-enter-active[data-v-909520cb],.m-dropzone .icon-scale-leave-active[data-v-909520cb]{transition:transform .3s ease-in-out}.m-dropzone .icon-scale-enter-from[data-v-909520cb]{opacity:0;position:absolute;transform:scale(0)}.m-dropzone .icon-scale-leave-to[data-v-909520cb]{display:none}.m-dropzone .file-scale-enter-active[data-v-909520cb],.m-dropzone .file-scale-leave-active[data-v-909520cb]{transition:all .3s ease-in-out}.m-dropzone .file-scale-enter-from[data-v-909520cb]{opacity:0;transform:scale(.3)}.m-dropzone .file-scale-leave-to[data-v-909520cb]{opacity:0;transform:translateY(-100%)}.m-dropzone .file-scale-move[data-v-909520cb]{transition:transform .3s ease-in-out}.m-dropzone__file-input[data-v-909520cb]{display:none}.m-dropzone__info-text[data-v-909520cb]{margin-top:calc(var(--maz-space) * 4);text-align:center;max-width:100%;font-size:var(--maz-text-sm,.875rem);line-height:var(--tw-leading,var(--maz-text-sm--line-height,calc(1.25 / .875)));color:var(--maz-color-muted,var(--maz-muted));flex-direction:column;display:flex}.m-dropzone__upload-text[data-v-909520cb]{text-align:center}.m-dropzone__upload-icon[data-v-909520cb]{font-size:var(--maz-text-3xl,1.875rem);line-height:var(--tw-leading,var(--maz-text-3xl--line-height,calc(2.25 / 1.875)))}.m-dropzone__file-size[data-v-909520cb],.m-dropzone__file-name[data-v-909520cb]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.m-dropzone__file-info[data-v-909520cb]{gap:calc(var(--maz-space) * .5);text-align:center;font-size:var(--maz-text-sm,.875rem);line-height:var(--tw-leading,var(--maz-text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--maz-font-weight-semibold,600);font-weight:var(--maz-font-weight-semibold,600);flex-direction:column;display:flex}.m-dropzone__description[data-v-909520cb]{z-index:2;gap:var(--maz-space);text-overflow:ellipsis;white-space:nowrap;width:100%;padding:calc(var(--maz-space) * 2);flex-direction:column;display:flex;overflow:hidden}.m-dropzone__file-icon-wrapper[data-v-909520cb]{border-radius:var(--maz-rounded-md);background-color:var(--maz-color-surface,var(--maz-surface));padding:var(--maz-space);color:var(--maz-color-foreground,var(--maz-foreground))}.m-dropzone__error-icon[data-v-909520cb]{font-size:var(--maz-text-4xl,2.25rem);line-height:var(--tw-leading,var(--maz-text-4xl--line-height,calc(2.5 / 2.25)));color:var(--maz-color-destructive,var(--maz-destructive))}.m-dropzone__success-icon[data-v-909520cb]{font-size:var(--maz-text-4xl,2.25rem);line-height:var(--tw-leading,var(--maz-text-4xl--line-height,calc(2.5 / 2.25)));color:var(--maz-color-success,var(--maz-success))}.m-dropzone__spinner[data-v-909520cb]{font-size:var(--maz-text-lg,1.125rem);line-height:var(--tw-leading,var(--maz-text-lg--line-height,calc(1.75 / 1.125)))}.m-dropzone__icon-container[data-v-909520cb]{z-index:2;padding:calc(var(--maz-space) * 2);flex:1;justify-content:center;align-items:center;display:flex}.m-dropzone__overlay[data-v-909520cb]{border-radius:var(--maz-rounded-md);background-color:var(--maz-color-surface,var(--maz-surface));position:absolute;inset:0}@supports (color:color-mix(in lab, red, red)){.m-dropzone__overlay[data-v-909520cb]{background-color:color-mix(in oklab, var(--maz-color-surface,var(--maz-surface)) 40%, transparent)}}.m-dropzone__overlay[data-v-909520cb]{--tw-backdrop-blur:blur(.125rem);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.m-dropzone__thumbnail[data-v-909520cb]{position:absolute;inset:0}.m-dropzone__file-item[data-v-909520cb]{width:calc(var(--maz-space) * 40);height:calc(var(--maz-space) * 40);cursor:auto;border-radius:var(--maz-rounded-md);background-color:var(--maz-color-surface-600,oklch(from var(--maz-surface) clamp(0, calc(l - .05), 1) c h));flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden}.m-dropzone__file-item[data-v-909520cb]:where(.dark,.dark *){background-color:var(--maz-color-surface-400,oklch(from var(--maz-surface) clamp(0, calc(l + .06), 1) c h))}.m-dropzone__file-item[data-v-909520cb]{transition:all .3s ease-in-out}.m-dropzone__files-container[data-v-909520cb]{justify-content:center;align-items:center;gap:calc(var(--maz-space) * 4);flex-wrap:wrap;display:flex;position:relative}.m-dropzone__content[data-v-909520cb]{justify-content:center;align-items:center;gap:var(--maz-space);flex-direction:column;display:flex}.m-dropzone__divider[data-v-909520cb]{font-size:var(--maz-text-sm,.875rem);line-height:var(--tw-leading,var(--maz-text-sm--line-height,calc(1.25 / .875)));color:var(--maz-color-muted,var(--maz-muted))}.m-dropzone--is-over-error[data-v-909520cb]{border-color:var(--maz-color-destructive,var(--maz-destructive));background-color:var(--maz-color-destructive-50,oklch(from var(--maz-destructive) clamp(0, calc(l + .4), 1) calc(c * .1) h))}@media (hover:hover){.m-dropzone--is-over-error[data-v-909520cb]:hover{background-color:var(--maz-color-destructive-50,oklch(from var(--maz-destructive) clamp(0, calc(l + .4), 1) calc(c * .1) h))}}.m-dropzone--is-over-error .maz-dropzone__upload-icon[data-v-909520cb]{color:var(--maz-color-destructive,var(--maz-destructive))}.m-dropzone--is-over-drop-zone[data-v-909520cb]{background-color:var(--maz-color-primary-400,oklch(from var(--maz-primary) clamp(0, calc(l + .06), 1) c h))}@supports (color:color-mix(in lab, red, red)){.m-dropzone--is-over-drop-zone[data-v-909520cb]{background-color:color-mix(in oklab, var(--maz-color-primary-400,oklch(from var(--maz-primary) clamp(0, calc(l + .06), 1) c h)) 20%, transparent)}}@media (hover:hover){.m-dropzone--is-over-drop-zone[data-v-909520cb]:hover{background-color:var(--maz-color-surface-600,oklch(from var(--maz-surface) clamp(0, calc(l - .05), 1) c h))}.m-dropzone--is-over-drop-zone[data-v-909520cb]:where(.dark,.dark *):hover{background-color:var(--maz-color-surface-400,oklch(from var(--maz-surface) clamp(0, calc(l + .06), 1) c h))}}.m-dropzone--is-over-drop-zone[data-v-909520cb]{border-color:var(--active-color)}.m-dropzone--is-over-drop-zone .maz-dropzone__upload-icon[data-v-909520cb]{color:var(--active-color)}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){[data-v-463e483d],[data-v-463e483d]:before,[data-v-463e483d]:after{--tw-font-weight:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}[data-v-463e483d]::backdrop{--tw-font-weight:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}.m-dropzone .icon-scale-enter-active[data-v-463e483d],.m-dropzone .icon-scale-leave-active[data-v-463e483d]{transition:transform .3s ease-in-out}.m-dropzone .icon-scale-enter-from[data-v-463e483d]{opacity:0;position:absolute;transform:scale(0)}.m-dropzone .icon-scale-leave-to[data-v-463e483d]{display:none}.m-dropzone .file-scale-enter-active[data-v-463e483d],.m-dropzone .file-scale-leave-active[data-v-463e483d]{transition:all .3s ease-in-out}.m-dropzone .file-scale-enter-from[data-v-463e483d]{opacity:0;transform:scale(.3)}.m-dropzone .file-scale-leave-to[data-v-463e483d]{opacity:0;transform:translateY(-100%)}.m-dropzone .file-scale-move[data-v-463e483d]{transition:transform .3s ease-in-out}.m-dropzone__file-input[data-v-463e483d]{display:none}.m-dropzone__info-text[data-v-463e483d]{margin-top:calc(var(--maz-space) * 4);text-align:center;max-width:100%;font-size:var(--maz-text-sm,.875rem);line-height:var(--tw-leading,var(--maz-text-sm--line-height,calc(1.25 / .875)));color:var(--maz-color-muted,var(--maz-muted));flex-direction:column;display:flex}.m-dropzone__upload-text[data-v-463e483d]{text-align:center}.m-dropzone__upload-icon[data-v-463e483d]{font-size:var(--maz-text-3xl,1.875rem);line-height:var(--tw-leading,var(--maz-text-3xl--line-height,calc(2.25 / 1.875)))}.m-dropzone__file-size[data-v-463e483d],.m-dropzone__file-name[data-v-463e483d]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.m-dropzone__file-info[data-v-463e483d]{gap:calc(var(--maz-space) * .5);text-align:center;font-size:var(--maz-text-sm,.875rem);line-height:var(--tw-leading,var(--maz-text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--maz-font-weight-semibold,600);font-weight:var(--maz-font-weight-semibold,600);flex-direction:column;display:flex}.m-dropzone__description[data-v-463e483d]{z-index:2;gap:var(--maz-space);text-overflow:ellipsis;white-space:nowrap;width:100%;padding:calc(var(--maz-space) * 2);flex-direction:column;display:flex;overflow:hidden}.m-dropzone__file-icon-wrapper[data-v-463e483d]{border-radius:var(--maz-rounded-md);background-color:var(--maz-color-surface,var(--maz-surface));padding:var(--maz-space);color:var(--maz-color-foreground,var(--maz-foreground))}.m-dropzone__error-icon[data-v-463e483d]{font-size:var(--maz-text-4xl,2.25rem);line-height:var(--tw-leading,var(--maz-text-4xl--line-height,calc(2.5 / 2.25)));color:var(--maz-color-destructive,var(--maz-destructive))}.m-dropzone__success-icon[data-v-463e483d]{font-size:var(--maz-text-4xl,2.25rem);line-height:var(--tw-leading,var(--maz-text-4xl--line-height,calc(2.5 / 2.25)));color:var(--maz-color-success,var(--maz-success))}.m-dropzone__spinner[data-v-463e483d]{font-size:var(--maz-text-lg,1.125rem);line-height:var(--tw-leading,var(--maz-text-lg--line-height,calc(1.75 / 1.125)))}.m-dropzone__icon-container[data-v-463e483d]{z-index:2;padding:calc(var(--maz-space) * 2);flex:1;justify-content:center;align-items:center;display:flex}.m-dropzone__overlay[data-v-463e483d]{border-radius:var(--maz-rounded-md);background-color:var(--maz-color-surface,var(--maz-surface));position:absolute;inset:0}@supports (color:color-mix(in lab, red, red)){.m-dropzone__overlay[data-v-463e483d]{background-color:color-mix(in oklab, var(--maz-color-surface,var(--maz-surface)) 40%, transparent)}}.m-dropzone__overlay[data-v-463e483d]{--tw-backdrop-blur:blur(.125rem);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.m-dropzone__thumbnail[data-v-463e483d]{position:absolute;inset:0}.m-dropzone__file-item[data-v-463e483d]{width:calc(var(--maz-space) * 40);height:calc(var(--maz-space) * 40);cursor:auto;border-radius:var(--maz-rounded-md);background-color:var(--maz-color-surface-600,oklch(from var(--maz-surface) clamp(0, calc(l - .05), 1) c h));flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden}.m-dropzone__file-item[data-v-463e483d]:where(.dark,.dark *){background-color:var(--maz-color-surface-400,oklch(from var(--maz-surface) clamp(0, calc(l + .06), 1) c h))}.m-dropzone__file-item[data-v-463e483d]{transition:all .3s ease-in-out}.m-dropzone__files-container[data-v-463e483d]{justify-content:center;align-items:center;gap:calc(var(--maz-space) * 4);flex-wrap:wrap;display:flex;position:relative}.m-dropzone__content[data-v-463e483d]{justify-content:center;align-items:center;gap:var(--maz-space);flex-direction:column;display:flex}.m-dropzone__divider[data-v-463e483d]{font-size:var(--maz-text-sm,.875rem);line-height:var(--tw-leading,var(--maz-text-sm--line-height,calc(1.25 / .875)));color:var(--maz-color-muted,var(--maz-muted))}.m-dropzone--is-over-error[data-v-463e483d]{border-color:var(--maz-color-destructive,var(--maz-destructive));background-color:var(--maz-color-destructive-50,oklch(from var(--maz-destructive) clamp(0, calc(l + .4), 1) calc(c * .1) h))}@media (hover:hover){.m-dropzone--is-over-error[data-v-463e483d]:hover{background-color:var(--maz-color-destructive-50,oklch(from var(--maz-destructive) clamp(0, calc(l + .4), 1) calc(c * .1) h))}}.m-dropzone--is-over-error .maz-dropzone__upload-icon[data-v-463e483d]{color:var(--maz-color-destructive,var(--maz-destructive))}.m-dropzone--is-over-drop-zone[data-v-463e483d]{background-color:var(--maz-color-primary-400,oklch(from var(--maz-primary) clamp(0, calc(l + .06), 1) c h))}@supports (color:color-mix(in lab, red, red)){.m-dropzone--is-over-drop-zone[data-v-463e483d]{background-color:color-mix(in oklab, var(--maz-color-primary-400,oklch(from var(--maz-primary) clamp(0, calc(l + .06), 1) c h)) 20%, transparent)}}@media (hover:hover){.m-dropzone--is-over-drop-zone[data-v-463e483d]:hover{background-color:var(--maz-color-surface-600,oklch(from var(--maz-surface) clamp(0, calc(l - .05), 1) c h))}.m-dropzone--is-over-drop-zone[data-v-463e483d]:where(.dark,.dark *):hover{background-color:var(--maz-color-surface-400,oklch(from var(--maz-surface) clamp(0, calc(l + .06), 1) c h))}}.m-dropzone--is-over-drop-zone[data-v-463e483d]{border-color:var(--active-color)}.m-dropzone--is-over-drop-zone .maz-dropzone__upload-icon[data-v-463e483d]{color:var(--active-color)}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}

package/dist/chunks/{MazDropzone.POH3pmfi.js → MazDropzone.Dez5j0WP.js}

@@ -38,7 +38,7 @@ import { MazPresentationChartBar } from "@maz-ui/icons/lazy/MazPresentationChart
 import { MazSpeakerWave } from "@maz-ui/icons/lazy/MazSpeakerWave";
 import { MazTrash } from "@maz-ui/icons/lazy/MazTrash";
 import { MazXCircle } from "@maz-ui/icons/lazy/MazXCircle";
-import '../assets/MazDropzone.DJ8au25t.css';//#region src/components/MazDropzone.vue?vue&type=script&setup=true&lang.ts
+import '../assets/MazDropzone.BW2grpTi.css';//#region src/components/MazDropzone.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["for"];
 var _hoisted_2 = { class: "m-dropzone__icon-container" };
 var _hoisted_3 = {
@@ -675,6 +675,6 @@ var MazDropzone_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			}, null, 40, _hoisted_14)
 		], 14, _hoisted_1));
 	}
-}), [["__scopeId", "data-v-909520cb"]]);
+}), [["__scopeId", "data-v-463e483d"]]);
 //#endregion
 export { MazDropzone_default as t };

package/dist/components/MazDropzone.js

@@ -1 +1 @@
-export { t as default } from "../chunks/MazDropzone.POH3pmfi.js";
+export { t as default } from "../chunks/MazDropzone.Dez5j0WP.js";

package/dist/components/MazDropzone.vue.d.ts

@@ -62,12 +62,12 @@ export type MazDropzoneProps = {
      */
     color?: MazColor;
     /**
-     * MazBtn props [MazBtn props](/components/maz:btn#props)
+     * MazBtn props [MazBtn props](/components/maz-btn#props)
      * @default {}
      */
     removeFileBtnProps?: MazBtnProps;
     /**
-     * MazSpinner props [MazSpinner props](/components/maz:spinner#props)
+     * MazSpinner props [MazSpinner props](/components/maz-spinner#props)
      * @default {}
      */
     spinnerProps?: MazSpinnerProps;

package/dist/components/MazInputPrice.vue.d.ts

@@ -22,7 +22,7 @@ export interface MazInputPriceProps {
     success?: boolean;
     /** Will display the input in warning state. */
     warning?: boolean;
-    /** Options for the currency helper - [see](https://maz-ui.com/helpers/currency) */
+    /** Options for the currency helper - [see](https://maz-ui.com/ecosystem/utils/currency) */
     currencyOptions?: Omit<FilterCurrencyOptions, 'currency'>;
 }
 declare const __VLS_export: import('vue').DefineComponent<MazInputPriceProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {

package/dist/components/index.js

@@ -53,7 +53,7 @@ import { t as MazInputCode_default } from "../chunks/MazInputCode.u6HfKh59.js";
 import { t as MazGallery_default } from "../chunks/MazGallery.CKRCfgEa.js";
 import { t as MazFullscreenLoader_default } from "../chunks/MazFullscreenLoader.CJ83xq4d.js";
 import { t as MazExpandAnimation_default } from "../chunks/MazExpandAnimation.Etwl_dOy.js";
-import { t as MazDropzone_default } from "../chunks/MazDropzone.POH3pmfi.js";
+import { t as MazDropzone_default } from "../chunks/MazDropzone.Dez5j0WP.js";
 import { t as MazBackdrop_default } from "../chunks/MazBackdrop.q3njgeNN.js";
 import { t as MazDrawer_default } from "../chunks/MazDrawer.CC8zomfx.js";
 import { t as MazDialog_default } from "../chunks/MazDialog.C12rD3uC.js";

package/docs/README.md

@@ -0,0 +1,207 @@
+# maz-ui 5.0.1-beta.0 documentation for AI agents
+
+> Vue 3 and Nuxt UI library: components, composables, directives and plugins, with an ecosystem of packages for theming (@maz-ui/themes), icons (@maz-ui/icons), helpers (@maz-ui/utils), translations (@maz-ui/translations), Nuxt (@maz-ui/nuxt) and AI agents (@maz-ui/mcp). Styling is powered by Tailwind CSS v4 theme tokens.
+
+These files document the **installed** version of maz-ui. Prefer them over what you remember from training data: APIs change between versions.
+
+- Read [rules.md](rules.md) first: how this project must use maz-ui.
+- `manifest.json` describes every page (symbols, imports, aliases) and holds the full component APIs, the icon names and the Tailwind tokens in JSON.
+
+## Guides
+
+- [AI agents](guide/ai-agents.md): Make Claude Code, Cursor, GitHub Copilot, Codex and the other AI coding agents use maz-ui and its ecosystem instead of re-implementing it - project rules, MCP server, version-ma...
+- [Browser support](guide/browser-support.md): Maz-UI v5 browser compatibility matrix and the native CSS features it depends on.
+- [Getting Started](guide/getting-started.md): Build Vue and Nuxt applications faster with Maz-UI v5 - The modern, modular component library
+- [Global component defaults](guide/global-defaults.md): Set default prop values once for every Maz-UI component through the MazUi plugin or the Nuxt module
+- [MazUiProvider](guide/maz-ui-provider.md): A component-based alternative to the MazUi plugin for initializing theme and translations, ideal for lazy-loaded pages and micro-frontends.
+- [Maz-UI v5.0.0 Migration Guide](guide/migration-v5.md): What changes for you when upgrading from Maz-UI v4 to v5
+- [Auto-Import Resolvers](guide/resolvers.md): Complete guide to Maz-UI auto-import resolvers for effortless component, directive, and composable imports
+- [Tailwind CSS](guide/tailwind.md): Use and extend the maz-ui theme in your own Tailwind CSS v4 setup - theme colors, radius, shadows, spacing, breakpoints, custom utilities, dark mode, and how to add your own tok...
+- [Install maz-ui with Vue](guide/vue.md): Maz-UI is a Vue.js UI library that provides a set of pre-built components, plugins, directives and utilities to help you build modern, responsive, and accessible web applications.
+
+## Components (maz-ui)
+
+- [MazAccordion](components/maz-accordion.md): MazAccordion is a standalone component that allows you to create an accordion with a title and content.
+- [MazAlert](components/maz-alert.md): MazAlert is an accessible component for displaying contextual feedback messages like success, warning, error, or informational notifications with customizable colors, icons, and...
+- [MazAnimatedCounter](components/maz-animated-counter.md): MazAnimatedCounter is a standalone component that allows you to animate a number from 0 to a specific value. Fully animated with CSS.
+- [MazAnimatedElement](components/maz-animated-element.md): MazAnimatedElement is a standalone component that animates its content with a sliding blur effect when it enters the viewport. It supports different animation directions (up, do...
+- [MazAnimatedText](components/maz-animated-text.md): MazAnimatedText is a standalone component that animates text with a sliding blur effect. It can highlight the last word with a gradient background and supports different animati...
+- [MazAvatar](components/maz-avatar.md): MazAvatar is a standalone component that displays an image or an icon with a caption. It can be used to display a user's profile picture, a placeholder image, or an icon.
+- [MazBackdrop](components/maz-backdrop.md): MazBackdrop is a flexible backdrop component that provides a foundation for modals, drawers, bottom sheets and any overlay content. It handles focus management, keyboard navigat...
+- [MazBadge](components/maz-badge.md): MazBadge is a standalone component to show short text in colored container
+- [MazBottomSheet](components/maz-bottom-sheet.md): MazBottomSheet is a standalone component like a simple dialog but anchored at the bottom of the screen. Full-width on mobile and constrained/centered on desktop, with a header (...
+- [MazBtn](components/maz-btn.md): MazBtn is a standalone component that replaces the standard html button with a beautiful design system. Many options like colors, sizes, disabled state, loading state, icons are...
+- [MazBtnGroup](components/maz-btn-group.md): MazBtnGroup is a component to group multiple MazBtn buttons together with seamless styling. Supports props-based or slot-based rendering with customizable orientation, size, and...
+- [MazCard](components/maz-card.md): MazCard is a standalone component to display some texts and images and also add button actions
+- [MazCardSpotlight](components/maz-card-spotlight.md): MazCardSpotlight is a standalone component
+- [MazCarousel](components/maz-carousel.md): MazCarousel is a standalone component to display and manage items in a row
+- [MazChart](components/maz-chart.md): MazChart is a standalone component which generates graphics & charts with chart.js
+- [MazCheckbox](components/maz-checkbox.md): MazCheckbox is a standalone component that replaces the standard html input checkbox. Color options are available.
+- [MazChecklist](components/maz-checklist.md): MazChecklist is a standalone component that allows creating a checklist with integrated search functionality. It provides a flexible and customizable user interface for selectin...
+- [MazCircularProgressBar](components/maz-circular-progress-bar.md): MazCircularProgressBar is a standalone component
+- [MazCodeHighlight](components/maz-code-highlight.md): MazCodeHighlight displays source code with syntax highlighting powered by shiki. It auto-detects dark/light mode, ships with a copy-to-clipboard button, a language badge, and su...
+- [MazContainer](components/maz-container.md): MazContainer is a lightweight component to wrap content with optional header, border, elevation, and rounded corners - a simpler alternative to MazCard
+- [MazDatePicker](components/maz-date-picker.md): A powerful and flexible date picker component with support for single dates, date ranges, time selection, and extensive customization options
+- [MazDialog](components/maz-dialog.md): MazDialog is a standalone dialog component to show important informations to the user or propose specific action. Many options are available. You can hide the header or the foot...
+- [MazDialogConfirm](components/maz-dialog-confirm.md): MazDialogConfirm is a standalone component that dialogs with the user to show important information and propose confirmation. You should wait for this response with await.
+- [MazDrawer](components/maz-drawer.md): MazDrawer is a standalone component to add a collapsible sidebar at the top and bottom bar
+- [MazDropdown](components/maz-dropdown.md): MazDropdown is a standalone dropdown menu component and versatile designed for various use cases.
+- [MazDropzone](components/maz-dropzone.md): MazDropzone is a powerful and flexible file upload component with drag & drop support, progress tracking, and customizable UI. Perfect for handling single or multiple file uploa...
+- [MazExpandAnimation](components/maz-expand-animation.md): MazExpandAnimation is a standalone component that allows you to animate the height of a block element
+- [MazFullscreenLoader](components/maz-fullscreen-loader.md): MazFullscreenLoader is a standalone component
+- [MazGallery](components/maz-gallery.md): MazGallery is a standalone component used to display images in a container and has many options and actions
+- [MazIcon](components/maz-icon.md): A flexible icon component that accepts Vue components, raw SVG strings, URLs and data URIs.
+- [MazInput](components/maz-input.md): MazInput is a standalone component that replaces the standard html input text with a beautiful design system. Many options like colors, sizes, disabled, loading, error, warning,...
+- [MazInputCode](components/maz-input-code.md): This component creates a customizable input code field with features like dynamic code length, alpha character support, and styling based on states (error, success, warning). Th...
+- [MazInputNumber](components/maz-input-number.md): MazInputNumber is a number input component with increment and decrement buttons for user-friendly input. Customizable size, disabled state, and limit values.
+- [MazInputPhoneNumber](components/maz-input-phone-number.md): MazInputPhoneNumber is a powerful and user-friendly component that helps users enter and validate phone numbers from any country with automatic formatting and validation
+- [MazInputPrice](components/maz-input-price.md): MazInputPrice is a standalone component that replaces the standard html input text and formats the text enter according to the currency provided
+- [MazInputTags](components/maz-input-tags.md): MazInputTags is a standalone component like free inputs to help user select many values and return an Array of strings. Color options are also available.
+- [MazLazyImg](components/maz-lazy-img.md): MazLazyImg is a standalone component to display images and svgs with lazy loading
+- [MazLink](components/maz-link.md): MazLink is a standalone component to create links and buttons.
+- [MazLoadingBar](components/maz-loading-bar.md): MazLoadingBar is a standalone component
+- [MazMarkdownEditor](components/maz-markdown-editor.md): MazMarkdownEditor is a GitHub-style markdown editor with Write/Preview/Split tabs, a configurable formatting toolbar, optional line numbers, and a sanitized preview. It shares t...
+- [MazPagination](components/maz-pagination.md): MazPagination is a standalone component
+- [MazPopover](components/maz-popover.md): MazPopover is a versatile Vue component for displaying content in overlays that bypass overflow constraints of parent elements
+- [MazPullToRefresh](components/maz-pull-to-refresh.md): MazPullToRefresh adds a native-feeling pull to refresh gesture to your app or to any scroll container, with a progress ring, haptic feedback and translated, accessible feedback.
+- [MazRadio](components/maz-radio.md): MazRadio is a standalone component
+- [MazRadioButtons](components/maz-radio-buttons.md): MazRadioButtons is a standalone component to select a value in a list. Made with native HTMLInputElement type radio
+- [MazReadMore](components/maz-read-more.md): MazReadMore is a standalone component to truncate long text with a "Read more" / "Read less" toggle functionality
+- [MazReadingProgressBar](components/maz-reading-progress-bar.md): MazReadingProgressBar is a standalone component to display a reading progress bar
+- [MazSelect - with "multiple" options](components/maz-select.md): MazSelect is a standalone component that replaces the standard html input select with a beautiful design system. There are many options like multiple values, search text field,...
+- [MazSelectCountry](components/maz-select-country.md): MazSelectCountry is a versatile Vue component for selecting countries or languages with built-in internationalization support and customizable display options
+- [MazSidebar](components/maz-sidebar.md): MazSidebar is a composable sidebar system for dashboard, admin, and SaaS applications. It provides a fully accessible, collapsible navigation with multiple display modes.
+- [MazSidebarContent](components/maz-sidebar-content.md): MazSidebarContent component.
+- [MazSidebarFooter](components/maz-sidebar-footer.md): MazSidebarFooter component.
+- [MazSidebarGroup](components/maz-sidebar-group.md): MazSidebarGroup is a building block of MazSidebar.
+- [MazSidebarHeader](components/maz-sidebar-header.md): MazSidebarHeader component.
+- [MazSidebarMenu](components/maz-sidebar-menu.md): MazSidebarMenu component.
+- [MazSidebarMenuButton](components/maz-sidebar-menu-button.md): MazSidebarMenuButton is a building block of MazSidebar.
+- [MazSidebarMenuItem](components/maz-sidebar-menu-item.md): MazSidebarMenuItem component.
+- [MazSidebarMenuSub](components/maz-sidebar-menu-sub.md): MazSidebarMenuSub is a building block of MazSidebar.
+- [MazSidebarSeparator](components/maz-sidebar-separator.md): MazSidebarSeparator component.
+- [MazSidebarTrigger](components/maz-sidebar-trigger.md): MazSidebarTrigger component.
+- [MazSkeleton](components/maz-skeleton.md): MazSkeleton is a standalone component to display loading placeholders with animated shimmer effect
+- [MazSlider](components/maz-slider.md): MazSlider is a standalone component that replaces the standard html input range with a beautiful design system. Many options like multiple cursors and values, colors, sizes and...
+- [MazSpinner](components/maz-spinner.md): MazSpinner is a standalone component that replaces the standard html input checkbox. Color options are available.
+- [MazStepper](components/maz-stepper.md): MazStepper is a standalone UI component customizable, reactive for intuitive step-by-step navigation. Ideal for guiding users through forms, workflows, or checkout processes.
+- [MazSwitch](components/maz-switch.md): MazSwitch is a standalone component that replaces the standard html input checkbox. Color options are available.
+- [MazTable](components/maz-table.md): MazTable is designed to be a reusable data table with advanced features. Pagination, Search, Column Sorting, Row Selection, UI options, Loading and Slots.
+- [MazTableCell](components/maz-table-cell.md): MazTableCell is a building block of MazTable.
+- [MazTableRow](components/maz-table-row.md): MazTableRow is a building block of MazTable.
+- [MazTableTitle](components/maz-table-title.md): MazTableTitle is a building block of MazTable.
+- [MazTableVirtualizer](components/maz-table-virtualizer.md): MazTableVirtualizer component.
+- [MazTabs](components/maz-tabs.md): MazTabs is a standalone component to display content in tabs with animations
+- [MazTabsBar](components/maz-tabs-bar.md): MazTabsBar is a building block of MazTabs.
+- [MazTabsContent](components/maz-tabs-content.md): MazTabsContent is a building block of MazTabs.
+- [MazTabsContentItem](components/maz-tabs-content-item.md): MazTabsContentItem is a building block of MazTabs.
+- [MazTextarea](components/maz-textarea.md): MazTextarea is a standalone component that replaces the standard html textarea input with a beautiful design system. Many options like colors, disabled, error, warning, success...
+- [MazTicker](components/maz-ticker.md): MazTicker is a scrolling ticker component that continuously animates content in a loop with configurable speed, direction, pause controls, and gradient overlays
+- [MazTimeline](components/maz-timeline.md): MazTimeline is a step/progress timeline component for Vue 3 with support for horizontal, vertical, and responsive layouts, customizable colors, sizes, step states, and scoped slots
+- [MazUiProvider](components/maz-ui-provider.md): MazUiProvider component.
+- [MazWindowMockup](components/maz-window-mockup.md): MazWindowMockup renders a macOS-style window frame in three variants - browser, terminal, and editor - to showcase content, demos, or code examples in your documentation or UI.
+
+## Composables (maz-ui)
+
+- [useAos](composables/use-aos.md): Vue composable for handling aos plugin in your components
+- [useWindowSize](composables/use-breakpoints.md): This composable extends the functionality of the useWindowSize composable to manage responsive breakpoints
+- [useDialog](composables/use-dialog.md): Vue composable for handling dialog plugin in your components
+- [useDisplayNames](composables/use-display-names.md): useDisplayNames is a Vue composable specialized in displaying localized country names (regions) and language names. It supports various code formats including ISO 639-1 (languag...
+- [useDrag](composables/use-drag.md): useDrag is a Vue composable that tracks a pointer drag gesture (touch, mouse and pen) in real time, exposing the live offset, distance and direction.
+- [useFormValidator](composables/use-form-validator.md): Vue composables for form validation with any Standard Schema library (Valibot, Zod, ArkType...) - useFormValidator and useFormField provide a flexible and typed approach to hand...
+- [useIdleTimeout](composables/use-idle-timeout.md): 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.
+- [usePullToRefresh](composables/use-pull-to-refresh.md): usePullToRefresh is a headless Vue composable for the pull to refresh gesture on the window or any scroll container.
+- [useReadingTime](composables/use-reading-time.md): This composable allows you to calculate the reading time of a text
+- [useStringMatching](composables/use-string-matching.md): Efficient composable for string matching tasks, utilizing Levenshtein distance calculation. Simplify comparison operations with minimal setup. Enhance text similarity checks eff...
+- [useSwipe](composables/use-swipe.md): useSwipe is a Vue composable that simplifies the management of "swipe" interactions on HTML elements.
+- [useTimer](composables/use-timer.md): The useTimer composable manages timeouts. It allows you to start, pause, resume, and stop a timer with reactive updates on the remaining time. Ideal for handling asynchronous op...
+- [useToast](composables/use-toast.md): Vue composable for handling toast plugin in your components
+- [user-visibility](composables/use-user-visibility.md): Plugin to see and manage the user page visibility
+- [useWait](composables/use-wait.md): Vue composable for handling wait plugins
+- [useWindowSize](composables/use-window-size.md): This composable provides a simple utility to track the width and height of the browser window with reactivity
+
+## Directives (maz-ui)
+
+- [vClickOutside](directives/click-outside.md): vClickOutside is a Vue directive to trigger a function when the user clicks outside an element
+- [v-fullscreen-img](directives/fullscreen-img.md): Displays images fullscreen on click
+- [vLazyImg](directives/lazy-img.md): vLazyImg is a Vue directive to lazy load images with many options. Images are loaded when they enter the viewport, using a shared IntersectionObserver for optimal performance.
+- [vTooltip](directives/tooltip.md): vTooltip is a Vue directive to display a text when the user hovers an element
+- [vZoomImg](directives/zoom-img.md): 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
+
+## Plugins (maz-ui)
+
+- [aos (animation on scroll)](plugins/aos.md): Plugin to animate elements on your page as you scroll.
+- [dialog](plugins/dialog.md): Displays messages to your users in flexible and promised dialogs
+- [Toast](plugins/toast.md): A powerful toast notification system for Vue.js that displays user-friendly messages with customizable positioning, styling, and behavior options
+- [wait](plugins/wait.md): A comprehensive loading state management plugin for Vue.js that provides easy-to-use utilities for handling async operations, loading indicators, and user feedback during data p...
+
+## Ecosystem packages
+
+- [@maz-ui/eslint-config](ecosystem/eslint-config.md): ESLint flat-config preset for Vue/Nuxt/JS/TS projects, layered on @antfu/eslint-config with SonarJS, Tailwind v3+v4 and a11y add-ons.
+- [Icons](ecosystem/icons/index.md): 
+- [IconSet](ecosystem/icons/icon-set.md): 
+- [MCP server](ecosystem/mcp.md): The maz-ui MCP server gives AI coding agents the version-matched knowledge of maz-ui and its ecosystem - search by need, exact component APIs, icons, Tailwind theme tokens, setu...
+- [@maz-ui/node](ecosystem/node/index.md): Lightweight Node.js utilities - promise-based shell execution, an opinionated consola-backed logger, and a banner printer for CLIs.
+- [Install maz-ui with Nuxt](ecosystem/nuxt.md): The ultimate Nuxt module for Maz-UI - zero-config setup with auto-imports, theming, internationalization and powerful features out of the box
+- [@maz-ui/stylelint-config](ecosystem/stylelint-config.md): Stylelint preset for Vue/Nuxt/JS/TS projects, with first-class Tailwind CSS v4 support, RTL-friendly logical properties, and SCSS opt-in.
+- [Theming](ecosystem/themes.md): Modern and performant theme system for Maz-UI built on native CSS features (light-dark(), color-scheme, color-mix(in oklch)) for v5.
+- [Translations (i18n)](ecosystem/translations.md): Internationalization for Maz-UI components.
+- [@maz-ui/utils](ecosystem/utils/index.md): Lightweight, tree-shakeable utility functions and TypeScript helpers for Vue, Nuxt and any JavaScript/TypeScript project.
+
+## Helpers (@maz-ui/utils)
+
+- [camelCase](ecosystem/utils/camel-case.md): Convert a kebab-case string to camelCase by stripping dashes and uppercasing the following letter.
+- [capitalize](ecosystem/utils/capitalize.md): The module capitalize is a function that adds a capital letter to a string
+- [checkAvailability](ecosystem/utils/check-availability.md): Poll a getter until a value is available (or matches an expected value), then run a callback - with timeout and configurable retry interval.
+- [cookie](ecosystem/utils/cookie.md): Read, write and delete browser cookies with full attribute support - `path`, `domain`, `maxAge`, `expires`, `secure`, `sameSite`, `partitioned`.
+- [country-code-to-unicode-flag](ecosystem/utils/country-code-to-unicode-flag.md): Convert country code in unicode flag
+- [formatCurrency](ecosystem/utils/currency.md): The module formatCurrency is a function that formats numbers to currency with the native api [Intl.NumberFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/G...
+- [formatDate](ecosystem/utils/date.md): The module formatDate is a function that formats dates with the native api [Intl.DateTimeFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/In...
+- [debounce](ecosystem/utils/debounce.md): Wrap a function so it only runs after a quiet period - every new call resets the timer.
+- [debounceCallback](ecosystem/utils/debounce-callback.md): Module-scoped one-shot debounce - schedule a callback that gets reset on each new call.
+- [debounceId](ecosystem/utils/debounce-id.md): Debounce an async function with isolated state per identifier - only the last call resolves, others are cancelled.
+- [fetchLocaleIp](ecosystem/utils/fetch-locale-ip.md): Resolve the visitor's ISO country code from their IP address using the free `ipwho.is` service.
+- [formatJson](ecosystem/utils/format-json.md): Tiny wrapper around `JSON.stringify` with sensible default indentation.
+- [formatPhoneNumber](ecosystem/utils/format-phone-number.md): Format an arbitrary phone-number string into its international representation using `libphonenumber-js`.
+- [getBrowserLocale](ecosystem/utils/get-browser-locale.md): Read the user's browser language tag (e.g. `'fr-FR'`, `'en-US'`) - returns `undefined` on the server.
+- [getCountryFlagUrl](ecosystem/utils/get-country-flag-url.md): Get country flag from flagcdn.com with a simple function call
+- [getErrorMessage](ecosystem/utils/get-error-message.md): Extract a human-readable message from anything thrown - `Error`, `string`, `{ message }` objects, or arbitrary values.
+- [IdleTimeout](ecosystem/utils/idle-timeout.md): Detect user inactivity (mouse, keyboard, touch, scroll) and run a callback when the user becomes idle.
+- [isClient](ecosystem/utils/is-client.md): Check whether the code is running in a browser environment (has a `document`).
+- [isEqual](ecosystem/utils/is-equal.md): Deep structural equality check for primitives, arrays, plain objects and Dates.
+- [isIos](ecosystem/utils/is-ios.md): Check whether the page runs on iOS or iPadOS, including iPads that report a desktop Mac user agent.
+- [isServer](ecosystem/utils/is-server.md): Check whether the code is running on the server (no `window` or `document`).
+- [isStandaloneMode](ecosystem/utils/is-standalone-mode.md): Check whether the app is running as an installed Progressive Web App (PWA) rather than inside a browser tab.
+- [kebabCase](ecosystem/utils/kebab-case.md): Convert any common string casing to kebab-case - handles camelCase, PascalCase, snake_case, spaces and consecutive capitals.
+- [normalizeString](ecosystem/utils/normalize-string.md): Powerful string normalizer - strip accents, normalize whitespace, remove special characters, change case, and apply Unicode normalization forms.
+- [formatNumber](ecosystem/utils/number.md): The module formatNumber is a function that formats numbers with the native api [Intl.NumberFormat](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/...
+- [pascalCase](ecosystem/utils/pascal-case.md): Convert any common string casing - kebab, snake, space-separated, camelCase or UPPERCASE - to PascalCase.
+- [preventIosInputZoom](ecosystem/utils/prevent-ios-input-zoom.md): Stop iOS from zooming the page when a form field gets the focus, without changing the design of the fields.
+- [ScriptLoader](ecosystem/utils/script-loader.md): Class to inject and cache a <script> tag in document head, with an awaitable load promise - ideal for third-party SDKs.
+- [sleep](ecosystem/utils/sleep.md): Pause execution for a given number of milliseconds. Returns a promise that resolves after the delay.
+- [snakeCase](ecosystem/utils/snake-case.md): Convert any common string casing to snake_case - handles camelCase, PascalCase, kebab-case, spaces and consecutive capitals.
+- [Swipe](ecosystem/utils/swipe-handler.md): Detect directional touch swipes on an element with configurable threshold and optional mouse-wheel guards.
+- [TextareaAutogrow](ecosystem/utils/textarea-autogrow.md): Automatically resize a `<textarea>` element to fit its content as the user types or the window resizes.
+- [throttle](ecosystem/utils/throttle.md): Wrap a function so it runs immediately, then at most once every N milliseconds - perfect for scroll, mousemove and resize handlers.
+- [throttleId](ecosystem/utils/throttle-id.md): Throttle an async function with isolated state per identifier - runs immediately, then at most once per interval.
+- [truthyFilter](ecosystem/utils/truthy-filter.md): Type guard that filters out falsy values (`false`, `''`, `0`, `null`, `undefined`) while narrowing the TypeScript type.
+- [DeepKeyOf](ecosystem/utils/types/deep-key-of.md): Recursively build a union of dot-separated key paths for any nested object type.
+- [DeepPartial](ecosystem/utils/types/deep-partial.md): Recursive variant of TypeScript's `Partial<T>` - every property at every depth becomes optional.
+- [DeepRequired](ecosystem/utils/types/deep-required.md): Recursive variant of TypeScript's `Required<T>` - strips `?` from every property at every depth.
+- [FlattenObjectKeys](ecosystem/utils/types/flatten-object-keys.md): Build a union of dot-separated leaf paths for a nested object, with an optional prefix.
+- [GenericInstanceType](ecosystem/utils/types/generic-instance-type.md): Extract the public instance type from a generic Vue component - solves the limitation where `InstanceType<typeof Component>` returns `any` for generic SFCs.
+- [InferMaybeRef](ecosystem/utils/types/infer-maybe-ref.md): Unwrap a Vue `Ref<U>` to its inner `U` - leaves non-ref types unchanged.
+- [upperFirst](ecosystem/utils/upper-first.md): Uppercase the first character of a string and leave the rest unchanged.
+- [UserVisibility](ecosystem/utils/user-visibility.md): Track whether the user is currently looking at the tab using the Page Visibility API, with an optional grace timeout before declaring them away.
+
+## Node utilities (@maz-ui/node)
+
+- [execPromise](ecosystem/node/exec-promise.md): Promise-based wrapper around `child_process.exec` with structured stdout/stderr/error logging, package-scoped prefixes, and per-call log silencing.
+- [logger / createLogger](ecosystem/node/logger.md): Opinionated [consola](https://github.com/unjs/consola)-backed logger with semantic levels, status helpers (`success`, `ready`, `fail`), and formatting helpers (`box`, `divider`,...
+- [printBanner](ecosystem/node/print-banner.md): Print an ASCII-art banner via figlet with optional version, dividers and clearing - handy for CLI entry points.
+- [setupAgents](ecosystem/node/setup-agents.md): Configure the AI coding agents of a project for maz-ui - version-matched rules for Claude Code and AGENTS.md, and the maz-ui MCP server in the agent configs - without touching t...
+
+## References
+
+- [Icons reference](reference/icons.md): The 861 icon names of @maz-ui/icons (interface icons, logos, country flags) and how to import them.
+- [Tailwind CSS theme reference](reference/tailwind-tokens.md): Every Tailwind class, variant and CSS variable of the maz-ui theme: colors, radius, shadows, spacing, breakpoints, typography, z-index, custom utilities.

package/docs/agents/agents-md.md

@@ -0,0 +1,52 @@
+## maz-ui
+
+> maz-ui 5.0.1-beta.0 is installed: these rules and the docs in `node_modules/maz-ui/docs` match this version.
+
+This project is built with **maz-ui** and its ecosystem (`@maz-ui/themes`, `@maz-ui/icons`, `@maz-ui/utils`, `@maz-ui/translations`, `@maz-ui/nuxt`). Reuse what it provides instead of re-implementing it: most UI elements, helpers, icons and styles you need already exist.
+
+### Look it up before you write it
+
+Before creating a component, composable, helper, icon or style, check what maz-ui offers:
+
+- **MCP server `maz-ui`** (when available): `search_docs` (describe the need: "confirm before delete", "phone input"), `get_component_api` (exact props, events, slots), `find_icons`, `get_theme_tokens` (Tailwind classes), `get_doc`, `review_code`.
+- **Version-matched docs** in `node_modules/maz-ui/docs/` (start with `README.md`; in a monorepo, resolve `maz-ui` from the app package). Read the relevant page before using an API.
+
+Never guess an API: only use props, events, slots and imports that are documented.
+
+### Components
+
+- Use `Maz*` components instead of native elements or hand-made widgets: `MazBtn` (not `<button>`), `MazInput`, `MazSelect`, `MazCheckbox`, `MazSwitch`, `MazTextarea`, `MazDialog`, `MazDialogConfirm`, `MazDrawer`, `MazBottomSheet`, `MazPopover`, `MazDropdown`, `MazTabs`, `MazTable`, `MazCard`, `MazAvatar`, `MazBadge`, `MazAlert`, `MazSkeleton`, `MazSpinner`, `MazDatePicker`, `MazInputPhoneNumber`, `MazDropzone`, `MazStepper`, `MazSidebar`, `MazPagination`...
+- Prop values are typed: colors are `primary | secondary | accent | info | success | warning | destructive | contrast | transparent` (plus `surface` on some components), sizes `mini | xs | sm | md | lg | xl`.
+- Feedback and overlays: `useToast()` for notifications, `useDialog()` or `MazDialogConfirm` for confirmations, `useWait()` for loading states.
+- Forms: `useFormValidator` / `useFormField` with your Standard Schema library (Zod, Valibot, ArkType).
+
+### Icons
+
+Use `@maz-ui/icons` (860+ icons: `MazTrash`, `MazXMark`, `MazMagnifyingGlass`, `MazFlagFR`, `MazLogoVue`...). Never inline SVG or add another icon library. Pass icon components to icon props: `<MazBtn :start-icon="MazTrash">`.
+
+### Helpers and composables
+
+Use `@maz-ui/utils` and maz-ui composables instead of lodash, VueUse or hand-written code: `debounce`, `throttle`, `sleep`, `isEqual`, `capitalize`, `formatCurrency`, `formatDate`, `formatNumber`, `formatPhoneNumber`, `getCookie`/`setCookie`, `useBreakpoints`, `useWindowSize`, `useTimer`, `useIdleTimeout`, `useSwipe`, `vClickOutside`, `vTooltip`, `vLazyImg`...
+
+### Styling with Tailwind
+
+The maz-ui theme is exposed to Tailwind (`@import 'maz-ui/tailwindcss/theme.css'`). Only use its tokens:
+
+- Colors: `primary`, `secondary`, `accent`, `info`, `success`, `warning`, `destructive`, `contrast` (each with `-foreground` and `-50` to `-950`), `surface`, `foreground`, `muted`, `divider`, `overlay`, plus `bg-container` and `bg-input`. Example: `bg-surface text-foreground border-divider`, `bg-primary text-primary-foreground`, `text-muted`.
+- Never use the default Tailwind palette (`bg-blue-500`, `text-gray-600`, `bg-white`, `text-black`) nor hard-coded colors (`#fff`, `rgb()`, `bg-[#...]`). Theme colors already adapt to dark mode: do not add `dark:` color overrides.
+- Radius `rounded-*`, shadows `shadow-sm` to `shadow-xl` and `shadow-elevation`, spacing scale (`p-4`, `gap-2`), breakpoints `mob-*`, `tab-*`, `lap-*` (plus `sm` to `2xl`), utilities `flex-center`, `padded-container`.
+- **No `maz:` prefix** in this project: it is internal to the maz-ui library and its documentation.
+- In custom CSS, use the variables: `var(--maz-primary)`, `var(--maz-rounded-md)`, `calc(var(--maz-space) * 4)`.
+
+### Theme
+
+Brand colors, fonts, radius and spacing come from a `@maz-ui/themes` preset (`definePreset`), not from overrides scattered in CSS. Use `useTheme()` for dark mode and presets (`toggleDarkMode`, `setColorMode`, `updateTheme`), never toggle the `dark` class or store the mode yourself.
+
+### Imports
+
+- Deep imports: `maz-ui/components/MazBtn`, `maz-ui/composables/useToast`, `maz-ui/directives/vTooltip`, `@maz-ui/utils/helpers/debounce`, `@maz-ui/icons/static/MazTrash`. The `maz-ui` root entry only exports types. Never import from `maz-ui/src` or `maz-ui/dist`.
+- With `@maz-ui/nuxt`, components and composables are auto-imported: do not import them.
+
+### Before you finish
+
+Run `review_code` (MCP) on the files you changed, or `npx @maz-ui/mcp review <files>`, and fix every finding.

package/docs/agents/claude-rule.md

@@ -0,0 +1,52 @@
+# maz-ui
+
+> maz-ui 5.0.1-beta.0 is installed: these rules and the docs in `node_modules/maz-ui/docs` match this version.
+
+This project is built with **maz-ui** and its ecosystem (`@maz-ui/themes`, `@maz-ui/icons`, `@maz-ui/utils`, `@maz-ui/translations`, `@maz-ui/nuxt`). Reuse what it provides instead of re-implementing it: most UI elements, helpers, icons and styles you need already exist.
+
+### Look it up before you write it
+
+Before creating a component, composable, helper, icon or style, check what maz-ui offers:
+
+- **MCP server `maz-ui`** (when available): `search_docs` (describe the need: "confirm before delete", "phone input"), `get_component_api` (exact props, events, slots), `find_icons`, `get_theme_tokens` (Tailwind classes), `get_doc`, `review_code`.
+- **Version-matched docs** in `node_modules/maz-ui/docs/` (start with `README.md`; in a monorepo, resolve `maz-ui` from the app package). Read the relevant page before using an API.
+
+Never guess an API: only use props, events, slots and imports that are documented.
+
+### Components
+
+- Use `Maz*` components instead of native elements or hand-made widgets: `MazBtn` (not `<button>`), `MazInput`, `MazSelect`, `MazCheckbox`, `MazSwitch`, `MazTextarea`, `MazDialog`, `MazDialogConfirm`, `MazDrawer`, `MazBottomSheet`, `MazPopover`, `MazDropdown`, `MazTabs`, `MazTable`, `MazCard`, `MazAvatar`, `MazBadge`, `MazAlert`, `MazSkeleton`, `MazSpinner`, `MazDatePicker`, `MazInputPhoneNumber`, `MazDropzone`, `MazStepper`, `MazSidebar`, `MazPagination`...
+- Prop values are typed: colors are `primary | secondary | accent | info | success | warning | destructive | contrast | transparent` (plus `surface` on some components), sizes `mini | xs | sm | md | lg | xl`.
+- Feedback and overlays: `useToast()` for notifications, `useDialog()` or `MazDialogConfirm` for confirmations, `useWait()` for loading states.
+- Forms: `useFormValidator` / `useFormField` with your Standard Schema library (Zod, Valibot, ArkType).
+
+### Icons
+
+Use `@maz-ui/icons` (860+ icons: `MazTrash`, `MazXMark`, `MazMagnifyingGlass`, `MazFlagFR`, `MazLogoVue`...). Never inline SVG or add another icon library. Pass icon components to icon props: `<MazBtn :start-icon="MazTrash">`.
+
+### Helpers and composables
+
+Use `@maz-ui/utils` and maz-ui composables instead of lodash, VueUse or hand-written code: `debounce`, `throttle`, `sleep`, `isEqual`, `capitalize`, `formatCurrency`, `formatDate`, `formatNumber`, `formatPhoneNumber`, `getCookie`/`setCookie`, `useBreakpoints`, `useWindowSize`, `useTimer`, `useIdleTimeout`, `useSwipe`, `vClickOutside`, `vTooltip`, `vLazyImg`...
+
+### Styling with Tailwind
+
+The maz-ui theme is exposed to Tailwind (`@import 'maz-ui/tailwindcss/theme.css'`). Only use its tokens:
+
+- Colors: `primary`, `secondary`, `accent`, `info`, `success`, `warning`, `destructive`, `contrast` (each with `-foreground` and `-50` to `-950`), `surface`, `foreground`, `muted`, `divider`, `overlay`, plus `bg-container` and `bg-input`. Example: `bg-surface text-foreground border-divider`, `bg-primary text-primary-foreground`, `text-muted`.
+- Never use the default Tailwind palette (`bg-blue-500`, `text-gray-600`, `bg-white`, `text-black`) nor hard-coded colors (`#fff`, `rgb()`, `bg-[#...]`). Theme colors already adapt to dark mode: do not add `dark:` color overrides.
+- Radius `rounded-*`, shadows `shadow-sm` to `shadow-xl` and `shadow-elevation`, spacing scale (`p-4`, `gap-2`), breakpoints `mob-*`, `tab-*`, `lap-*` (plus `sm` to `2xl`), utilities `flex-center`, `padded-container`.
+- **No `maz:` prefix** in this project: it is internal to the maz-ui library and its documentation.
+- In custom CSS, use the variables: `var(--maz-primary)`, `var(--maz-rounded-md)`, `calc(var(--maz-space) * 4)`.
+
+### Theme
+
+Brand colors, fonts, radius and spacing come from a `@maz-ui/themes` preset (`definePreset`), not from overrides scattered in CSS. Use `useTheme()` for dark mode and presets (`toggleDarkMode`, `setColorMode`, `updateTheme`), never toggle the `dark` class or store the mode yourself.
+
+### Imports
+
+- Deep imports: `maz-ui/components/MazBtn`, `maz-ui/composables/useToast`, `maz-ui/directives/vTooltip`, `@maz-ui/utils/helpers/debounce`, `@maz-ui/icons/static/MazTrash`. The `maz-ui` root entry only exports types. Never import from `maz-ui/src` or `maz-ui/dist`.
+- With `@maz-ui/nuxt`, components and composables are auto-imported: do not import them.
+
+### Before you finish
+
+Run `review_code` (MCP) on the files you changed, or `npx @maz-ui/mcp review <files>`, and fix every finding.

package/docs/components/maz-accordion.md

@@ -0,0 +1,76 @@
+---
+title: "MazAccordion"
+description: "MazAccordion is a standalone component that allows you to create an accordion with a title and content."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-accordion"
+---
+
+# MazAccordion
+
+> MazAccordion is a standalone component that allows you to create an accordion with a title and content.
+
+- Package: `maz-ui`
+- Import: `import MazAccordion from 'maz-ui/components/MazAccordion'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-accordion
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+import MazAccordion from 'maz-ui/components/MazAccordion'
+</script>
+
+<template>
+  <MazAccordion>
+    <template #title-1>
+      Title 1
+    </template>
+    <template #content-1>
+      Content 1
+    </template>
+
+    <template #title-2>
+      Title 2
+    </template>
+    <template #content-2>
+      Content 2
+    </template>
+
+    <template #title-3>
+      Title 3
+    </template>
+    <template #content-3>
+      Content 3
+    </template>
+
+    <template #title-4>
+      Title 4
+    </template>
+    <template #content-4>
+      Content 4
+    </template>
+    <MazAccordion />
+  </mazaccordion>
+</template>
+```
+
+## MazAccordion API
+
+`import MazAccordion from 'maz-ui/components/MazAccordion'`
+
+### Props
+
+- `id` (`string`)
+- `model-value` (`number`, default: `0`, `v-model`)
+- `content-class` (`ClassValue`)
+
+### Events
+
+- `@update:model-value` (payload: `any[`)
+
+### Slots
+
+- `#content` Bindings: `isOpen: boolean`.