@maz-ui/mcp 5.0.1-beta.0 → 5.1.0-beta.1

package/docs/{src/components → components}/maz-icon.md

@@ -1,24 +1,31 @@
 ---
-title: MazIcon
-description: A flexible icon component that accepts Vue components, raw SVG strings, URLs and data URIs.
+title: "MazIcon"
+description: "A flexible icon component that accepts Vue components, raw SVG strings, URLs and data URIs."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-icon"
 ---
 
-# {{ $frontmatter.title }}
+# MazIcon
 
-{{ $frontmatter.description }}
+> A flexible icon component that accepts Vue components, raw SVG strings, URLs and data URIs.
 
-::: tip
-Download the bundled [icons pack](#all-bundled-icons) or use [`@maz-ui/icons`](../ecosystem/icons/.md) for the full set.
-:::
+- Package: `maz-ui`
+- Import: `import MazIcon from 'maz-ui/components/MazIcon'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-icon
+
+**Tip:**
+
+Download the bundled icons pack or use [`@maz-ui/icons`](../ecosystem/icons/index.md) for the full set.
 
 ## How it works
 
-Pass an `icon` prop in any of the supported formats — the component detects what it received and renders accordingly:
+Pass an `icon` prop in any of the supported formats - the component detects what it received and renders accordingly:
 
 | Input | Example | Use it for |
 | --- | --- | --- |
 | **Vue component** | `import { MazStar } from '@maz-ui/icons/static/MazStar'` | Always-rendered icons that you also want available as a standalone component (`<MazStar />`). |
-| **Raw SVG string** | `import { MazStar } from '@maz-ui/icons/raw/MazStar'` | Always-rendered icons — the lightest format, no Vue component overhead. |
+| **Raw SVG string** | `import { MazStar } from '@maz-ui/icons/raw/MazStar'` | Always-rendered icons - the lightest format, no Vue component overhead. |
 | **URL or `data:` URI** | `'/icons/star.svg'`, `'data:image/svg+xml,…'` | SVGs hosted in your `public/` folder or external CDN. Fetched and cached on demand. |
 
 ```vue
@@ -38,12 +45,6 @@ import { MazStar } from '@maz-ui/icons/raw/MazStar'
 
 ### Raw SVG (recommended)
 
-<ComponentDemo>
-
-  <MazIcon :icon="icons.MazStar" />
-
-  <template #code>
-
 ```vue
 <script lang="ts" setup>
   import { MazStar } from '@maz-ui/icons/raw/MazStar'
@@ -54,34 +55,16 @@ import { MazStar } from '@maz-ui/icons/raw/MazStar'
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ### URL (fetched at runtime)
 
 Place your SVG file in your `public/` folder, then point `icon` to its path. The component caches the fetched payload and shares it across instances.
 
-<ComponentDemo>
-
-  <MazIcon icon="/academic-cap.svg" />
-
-  <template #code>
-
 ```vue
 <MazIcon icon="/academic-cap.svg" />
 ```
 
-  </template>
-</ComponentDemo>
-
 ### Vue component
 
-<ComponentDemo>
-
-  <MazIcon :icon="icons.MazStar" />
-
-  <template #code>
-
 ```vue
 <script lang="ts" setup>
   import { MazStar } from '@maz-ui/icons/static/MazStar'
@@ -92,9 +75,6 @@ Place your SVG file in your `public/` folder, then point `icon` to its path. The
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Fallback
 
 When the URL fetch fails, an `error` event is emitted and `MazIcon` switches to the `fallback` prop (same shape as `icon`). If neither resolves, the bundled `MazQuestionMarkCircle` is rendered.
@@ -107,13 +87,6 @@ When the URL fetch fails, an `error` event is emitted and `MazIcon` switches to
 
 ### Predefined sizes (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`)
 
-<ComponentDemo>
-  <div class="maz:flex maz:gap-2 maz:flex-wrap maz:items-center">
-    <MazIcon v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']" :key="size" :size="size" :icon="icons.MazStar" />
-  </div>
-
-  <template #code>
-
 ```vue
 <script lang="ts" setup>
   import { MazStar } from '@maz-ui/icons/raw/MazStar'
@@ -124,24 +97,10 @@ When the URL fetch fails, an `error` event is emitted and `MazIcon` switches to
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ### Custom size (any CSS length)
 
 Allowed units: `px`, `em`, `rem`, `%`, `vw`, `vh`, `cm`, `mm`, `in`, `pt`, `pc`, `ex`.
 
-<ComponentDemo>
-  <div class="maz:flex maz:gap-2 maz:flex-wrap maz:items-center">
-    <MazIcon size="0.5em" :icon="icons.MazStar" />
-    <MazIcon size="1em" :icon="icons.MazStar" />
-    <MazIcon size="24px" :icon="icons.MazStar" />
-    <MazIcon size="4rem" :icon="icons.MazStar" />
-    <MazIcon size="8rem" :icon="icons.MazStar" />
-  </div>
-
-  <template #code>
-
 ```vue
 <MazIcon size="0.5em" :icon="MazStar" />
 <MazIcon size="1em" :icon="MazStar" />
@@ -150,12 +109,9 @@ Allowed units: `px`, `em`, `rem`, `%`, `vw`, `vh`, `cm`, `mm`, `in`, `pt`, `pc`,
 <MazIcon size="8rem" :icon="MazStar" />
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Accessibility
 
-By default `MazIcon` is rendered as decorative (`aria-hidden="true"`, no `role`). Provide an `aria-label` (either on `<MazIcon>` or in `svgAttributes`) to expose it to assistive tech — `role="img"` is set automatically and `aria-hidden` is dropped.
+By default `MazIcon` is rendered as decorative (`aria-hidden="true"`, no `role`). Provide an `aria-label` (either on `<MazIcon>` or in `svgAttributes`) to expose it to assistive tech - `role="img"` is set automatically and `aria-hidden` is dropped.
 
 ```vue
 <MazIcon :icon="MazStar" aria-label="Favorite" />
@@ -206,11 +162,11 @@ In Nuxt, set `mazUi.general.defaultMazIconPath` in `nuxt.config` and `@maz-ui/nu
 Most icon-aware components in maz-ui (`MazBtn`, `MazInput`, `MazLink`, `MazContainer`, `MazDropdown`) accept a flexible icon prop on their `startIcon`, `endIcon`, `icon` or `dropdownIcon` slots. You can pass either a bare value (the same shape as `MazIcon`'s `icon` prop) or a full `MazIconProps` object when you need fine-grained control:
 
 ```html
-<!-- bare value — common case -->
+<!-- bare value - common case -->
 <MazBtn :start-icon="MazStar" />
 <MazBtn start-icon="/icons/star.svg" />
 
-<!-- full props object — override size, set a title, flip for RTL, etc. -->
+<!-- full props object - override size, set a title, flip for RTL, etc. -->
 <MazBtn
   :start-icon="{
     icon: MazStar,
@@ -227,28 +183,21 @@ The consuming component still derives sensible defaults (e.g. icon size from the
 
 This pack is the Heroicons set plus a few additions specific to maz-ui.
 
-<MazBtn download href="/icons/_icons.zip" end-icon="/arrow-down-tray.svg">
-  Download pack
-</MazBtn>
+Source: [Heroicons](https://heroicons.com/) - see also the [icon set page](../ecosystem/icons/icon-set.md).
 
-Source: [Heroicons](https://heroicons.com/) — see also the [icon set page](./../ecosystem/icons/icon-set.md).
+## MazIcon API
 
-<div class="flex items-start flex-wrap gap-05">
-  <div v-for="({ component, name }, i) in iconsList" :key="i" class="flex flex-col flex-center maz:p-2 maz:rounded-md maz:border">
-    <MazIcon :icon="component" size="lg" />
-    <span style="font-size: 11px;">
-      {{ name }}
-    </span>
-  </div>
-</div>
+`import MazIcon from 'maz-ui/components/MazIcon'`
 
-<script setup lang="ts">
-  import * as icons from '@maz-ui/icons'
+### Props
 
-  const iconsList = Object.entries(icons).map(([key, value]) => ({
-    name: key,
-    component: value,
-  }))
-</script>
+- `icon` (`any`): The icon to render. Accepts: - A Vue component (e.g. `import { MazStar } from '@maz-ui/icons/static/MazStar'`) - A URL or `data:` URI to a `.svg` file (`'/icons/star.svg'`, `'data:image/svg+xml,…'`) - A raw SVG string (`'<svg viewBox="0 0 24 24">…</svg>'`) The component detects the format and renders accordingly.
+- `fallback` (`any`, default: `MazQuestionMarkCircle`): Fallback icon used when: - `icon` is not provided - `icon` is a URL that fails to load or returns invalid SVG Same shape as `icon`. Defaults to the imported `MazQuestionMarkCircle` if neither `icon` nor `fallback` resolves to anything renderable.
+- `size` (`MazIconSize`): Predefined keyword (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) or any CSS length.
+- `title` (`string`): Sets a `<title>` element inside the SVG for screen-reader accessibility.
+- `svg-attributes` (`Record<string, string | number>`): Extra attributes to merge onto the rendered `<svg>` root.
+- `flip-icon-for-rtl` (`boolean`, default: `false`): Mirror the icon horizontally when the document direction is RTL. Useful for directional icons (chevrons, arrows). Renders unchanged in LTR.
+
+### Events
 
-<!--@include: ./../../.vitepress/generated-docs/maz-icon.doc.md-->
+- `@error` (payload: `error: Error`): Emitted when an SVG fails to fetch or parse - useful for telemetry / fallback UI.

package/docs/components/maz-input-code.md

@@ -0,0 +1,73 @@
+---
+title: "MazInputCode"
+description: "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). The code handles input events, keydown actions, and pasting. Overall, it offers a responsive and visually appealing solution for entering verification codes."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-input-code"
+---
+
+# MazInputCode
+
+> 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). The code handles input events, keydown actions, and pasting. Overall, it offers a responsive and visually appealing solution for entering verification codes.
+
+- Package: `maz-ui`
+- Import: `import MazInputCode from 'maz-ui/components/MazInputCode'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-input-code
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+## Basic usage
+
+`v-model=""`
+
+```vue
+<script lang="ts" setup>
+import MazInputCode from 'maz-ui/components/MazInputCode'
+
+const code = ref()
+</script>
+
+<template>
+  <MazInputCode v-model="code" />
+</template>
+```
+
+## Size
+
+```html
+<MazInputCode v-model="code" size="mini" />
+<MazInputCode v-model="code" size="xs" />
+<MazInputCode v-model="code" size="sm" />
+<MazInputCode v-model="code" size="lg" />
+<MazInputCode v-model="code" size="xl" />
+```
+
+## Disabled
+
+```html
+<MazInputCode v-model="code" disabled />
+```
+
+## MazInputCode API
+
+`import MazInputCode from 'maz-ui/components/MazInputCode'`
+
+### Props
+
+- `model-value` (`T`, `v-model`): The value of the component (v-model).
+- `code-length` (`number`, default: `4`): The length of the code.
+- `type` (`"number" | "text"`, default: `"text"`): The type of the input field.
+- `accept-alpha` (`boolean`, default: `false`): Whether to accept alpha characters.
+- `required` (`boolean`, default: `false`): Whether the input is required.
+- `disabled` (`boolean`, default: `false`): Whether the input is disabled.
+- `error` (`boolean`, default: `false`): Whether there is an error with the input.
+- `success` (`boolean`, default: `false`): Whether the input is successful.
+- `warning` (`boolean`, default: `false`): Whether there is a warning with the input.
+- `size` (`MazInputCodeSize`, default: `"md"`): The size of the component.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the component.
+- `hint` (`string`): The hint text to display below the input.
+
+### Events
+
+- `@update:model-value` (payload: `value?: T | undefined`): Update the model value.
+- `@completed` (payload: `value: void`): Emitted when all inputs are set.

package/docs/components/maz-input-number.md

@@ -0,0 +1,79 @@
+---
+title: "MazInputNumber"
+description: "MazInputNumber is a number input component with increment and decrement buttons for user-friendly input. Customizable size, disabled state, and limit values."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-input-number"
+---
+
+# MazInputNumber
+
+> MazInputNumber is a number input component with increment and decrement buttons for user-friendly input. Customizable size, disabled state, and limit values.
+
+- Package: `maz-ui`
+- Import: `import MazInputNumber from 'maz-ui/components/MazInputNumber'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-input-number
+
+> 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 MazInputNumber from 'maz-ui/components/MazInputNumber'
+import { ref } from 'vue'
+const numberValue = ref(2)
+</script>
+
+<template>
+  <MazInputNumber
+    v-model="numberValue"
+    placeholder="Enter number"
+    :min="5"
+    :step="5"
+    :max="10000"
+    color="secondary"
+    style="min-width: 200px"
+  />
+</template>
+```
+
+## No buttons
+
+You can remove the buttons with the props `hide-buttons`
+
+```html
+<MazInputNumber v-model="numberValue" placeholder="Enter number" hide-buttons />
+```
+
+## MazInputNumber API
+
+`import MazInputNumber from 'maz-ui/components/MazInputNumber'`
+
+### Props
+
+- `id` (`string`): The id of the input.
+- `model-value` (`number`, `v-model`): The value of the component (v-model).
+- `disabled` (`boolean`, default: `false`): Whether the input number is disabled or not.
+- `max` (`number`, default: `Number.POSITIVE_INFINITY`): The maximum value allowed for the input number.
+- `min` (`number`, default: `Number.NEGATIVE_INFINITY`): The minimum value allowed for the input number.
+- `step` (`number`, default: `1`): The step value for incrementing or decrementing the input number.
+- `size` (`"xs" | "sm" | "md" | "lg" | "xl" | "mini"`, default: `'md'`): The size of the input number component.
+- `hide-buttons` (`boolean`, default: `false`): Whether to hide the increment and decrement buttons or not.
+- `text-center` (`boolean`, default: `true`): Whether to center the text inside the input or not.
+- `inputmode` (`"none" | "text" | "search" | "url" | "email" | "tel" | "numeric" | "decimal"`, default: `"numeric"`): The inputmode attribute for the input.
+- `block` (`boolean`): The input will be displayed in full width.
+- `error` (`boolean`, default: `false`): Will display the input in error state.
+- `hint` (`string`): The hint text to display below the input.
+- `success` (`boolean`, default: `false`): Will display the input in success state.
+- `warning` (`boolean`, default: `false`): Will display the input in warning state.
+- `input-props` (`MazInputProps<MazInputValue>`): The props for the input component.
+- `top-label` (`string`): Static label displayed above the input field. Unlike the floating label, this remains fixed.
+
+### Events
+
+- `@update:model-value` (payload: `value?: number | undefined`): Emitted when the input value change
+- `@click` (payload: `value: Event`): Emitted input is clicked
+- `@blur` (payload: `value: Event`): Emitted when the input is blurred
+- `@change` (payload: `value: Event`): Emitted when the value change
+- `@focus` (payload: `value: Event`): Emitted when the input is focused