@maz-ui/mcp 5.0.0-beta.4 → 5.0.0-beta.40

package/docs/src/components/maz-table.md

@@ -19,6 +19,7 @@ description: MazTable is designed to be a reusable data table with advanced feat
 4. Row Selection (prop `select-value="key"`): There is a dedicated column for selection with a checkbox for each row. Users can individually or collectively select/deselect rows.
 5. Customizable Page Size: Users can choose the number of items to display per page using a dropdown list.
 6. Loading Indicator (prop `loading`): A loading indicator (MazLoadingBar) is displayed when data is being loaded.
+7. Animated rows (props `animated-rows` + `row-key`): rows slide to their new position when the order changes (FLIP animation). Respects `prefers-reduced-motion`.
 
 ## Available models
 
@@ -369,6 +370,67 @@ v-model:page-size="{{pageSize ?? 'undefined'}}"
 
 </ComponentDemo>
 
+## Animated rows
+
+Enable `animated-rows` to make rows slide to their new position when the order changes (FLIP animation) - perfect for live leaderboards or sortable lists. Provide a stable `row-key` (a field uniquely identifying each row) so every row keeps its identity across reorders. The animation is automatically disabled when the user prefers reduced motion.
+
+<ComponentDemo>
+  <MazBtn class="vp-raw" size="sm" @click="shuffleRows">Shuffle</MazBtn>
+  <br />
+  <br />
+  <MazTable
+    class="vp-raw"
+    size="sm"
+    animated-rows
+    row-key="id"
+    :headers="[
+      { label: '#', key: 'id', align: 'center', width: '3rem' },
+      { label: 'Name', key: 'name' },
+      { label: 'Score', key: 'score', align: 'center' },
+    ]"
+    :rows="players"
+  />
+
+  <template #code>
+
+  ```vue
+  <template>
+    <MazBtn @click="shuffleRows">
+      Shuffle
+    </MazBtn>
+    <MazTable
+      animated-rows
+      row-key="id"
+      :headers="[
+        { label: '#', key: 'id', align: 'center', width: '3rem' },
+        { label: 'Name', key: 'name' },
+        { label: 'Score', key: 'score', align: 'center' },
+      ]"
+      :rows="players"
+    />
+  </template>
+
+  <script lang="ts" setup>
+    import { MazTable } from 'maz-ui/components'
+    import { ref } from 'vue'
+
+    const players = ref([
+      { id: 1, name: 'John', score: 12 },
+      { id: 2, name: 'Jane', score: 24 },
+      { id: 3, name: 'Alice', score: 8 },
+      { id: 4, name: 'Bob', score: 31 },
+    ])
+
+    function shuffleRows() {
+      players.value = [...players.value].sort(() => Math.random() - 0.5)
+    }
+  </script>
+  ```
+
+  </template>
+
+</ComponentDemo>
+
 ## Loading
 
 Enable the loading state with the prop `loading`
@@ -516,6 +578,17 @@ Available sizes: `'mini' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'`
   const searchQuery = ref<string>()
   const pageSize = ref<number>(10)
   const page = ref<number>(1)
+
+  const players = ref([
+    { id: 1, name: 'John', score: 12 },
+    { id: 2, name: 'Jane', score: 24 },
+    { id: 3, name: 'Alice', score: 8 },
+    { id: 4, name: 'Bob', score: 31 },
+  ])
+
+  function shuffleRows() {
+    players.value = [...players.value].sort(() => Math.random() - 0.5)
+  }
 </script>
 
 ## Types
@@ -545,6 +618,7 @@ export interface MazTableHeadersEnriched {
   srOnly?: boolean
   width?: string
   maxWidth?: string
+  minWidth?: string
   classes?: ThHTMLAttributes['class']
   scope?: ThHTMLAttributes['scope']
   align?: ThHTMLAttributes['align']

package/docs/src/components/maz-tabs.md

@@ -182,17 +182,124 @@ You can choose the name of this query parameter with the props `query-param` `@d
   ]
 
   const tabs2: MazTabsBarItem[] = ['First Tab', 'Second Tab', 'Third Tab', 'Fourth Tab', 'Fifth Tab', 'Sixth Tab', 'Seventh Tab', 'Eighth Tab', 'Ninth Tab', 'Tenth Tab']
+
+  const standaloneModel = ref('weekly')
+
+  const standaloneItems = [
+    { label: 'Daily', value: 'daily' },
+    { label: 'Weekly', value: 'weekly' },
+    { label: 'Monthly', value: 'monthly' },
+  ]
 </script>
 
+## Size and rounded size
+
+Each tab is rendered with a [`MazBtn`](./maz-btn.md), so you can control its `size` (`MazSize`) and `rounded-size` (`MazRoundedSize`, applied to the bar, the indicator and each tab).
+
+These props can be set on `MazTabsBar` directly, or on `MazTabs` which forwards them to its `MazTabsBar`. They are also globalizable through the [global defaults](./../guide/global-defaults.md) (`MazTabsBar` or `global` entry).
+
+<MazTabs size="sm" rounded-size="lg">
+  <MazTabsBar :items="tabs2" />
+</MazTabs>
+
+```vue
+<template>
+  <!-- size & rounded-size forwarded from MazTabs to MazTabsBar -->
+  <MazTabs size="sm" rounded-size="lg">
+    <MazTabsBar :items="tabs" />
+    <!-- ... -->
+  </MazTabs>
+
+  <!-- or directly on MazTabsBar -->
+  <MazTabsBar :items="tabs" size="lg" rounded-size="full" />
+</template>
+```
+
+Each item can also override the `size` and `rounded-size` (and accepts every other [`MazBtn`](./maz-btn.md) prop, except `active`, `block`, `type`, `loading` and `fab`).
+
+## Active color
+
+The active tab is highlighted by the indicator. Use the `color` prop (`MazColor`) on `MazTabsBar` (or on `MazTabs`, which forwards it) to color it. When omitted, the default neutral indicator is used.
+
+<MazTabs>
+  <MazTabsBar :items="tabs2" color="primary" />
+</MazTabs>
+
+```vue
+<template>
+  <MazTabsBar :items="tabs" color="primary" />
+</template>
+```
+
+## Standalone usage
+
+`MazTabsBar` can be used on its own, without `MazTabs`, as an independent switcher with its own `v-model`.
+
+::: tip Nested inside a `MazTabs`
+If your page is already wrapped by a `MazTabs`, a nested `MazTabsBar` would otherwise be linked to that parent (clicking a tab would change the page). Add the `standalone` prop to make it fully independent (it then ignores the parent's selection, size, rounded-size and color):
+
+```vue
+<MazTabsBar v-model="selected" :items="items" standalone />
+```
+:::
+
+The model returns the `1`-based index of the selected tab, unless the items provide a `value` (`string | number`), in which case that value is returned. The model type is inferred from the items passed: declare the items `as const` (or with literal `value`s) to get a strict union type for the model and the `@update:model-value` event.
+
+<MazTabsBar v-model="standaloneModel" :items="standaloneItems" color="secondary" rounded-size="full" />
+
+<br />
+
+<p>Selected value: <strong>{{ standaloneModel }}</strong></p>
+
+```vue
+<script lang="ts" setup>
+import { MazTabsBar, type MazTabsBarItem } from 'maz-ui/components'
+import { ref } from 'vue'
+
+const selected = ref('weekly')
+
+const items = [
+  { label: 'Daily', value: 'daily' },
+  { label: 'Weekly', value: 'weekly' },
+  { label: 'Monthly', value: 'monthly' },
+] as const satisfies readonly MazTabsBarItem[]
+</script>
+
+<template>
+  <MazTabsBar v-model="selected" :items="items" color="secondary" rounded-size="full" />
+  <!-- selected & @update:model-value === 'daily' | 'weekly' | 'monthly' -->
+</template>
+```
+
+When no `value` is set on the items, the model is a number (the `1`-based index):
+
+```vue
+<script lang="ts" setup>
+const selected = ref(1)
+const items = ['First', 'Second', 'Third']
+</script>
+
+<template>
+  <MazTabsBar v-model="selected" :items="items" />
+  <!-- selected === 1 | 2 | 3 -->
+</template>
+```
+
 ## Types
 
 ```ts
-type MazTabsBarItem
-  = | {
+type MazTabsBarItem<Value extends string | number = string | number>
+  // Inherits all MazBtn props except 'active' | 'block' | 'type' | 'loading' | 'fab'
+  = | (Omit<MazBtnProps, 'active' | 'block' | 'type' | 'loading' | 'fab'> & {
     /**
      * Label of the tab
      */
     label: string
+    /**
+     * Value returned by the model when the tab is selected (standalone usage).
+     * When omitted, the model returns the 1-based index of the tab.
+     */
+    value?: Value
     /**
      * Will disable the tab
      * @default false
@@ -208,7 +315,7 @@ type MazTabsBarItem
        */
       content: string | number | boolean
     }
-  }
+  })
   | string
 ```
 

package/docs/src/components/maz-textarea.md

@@ -303,6 +303,64 @@ By default, the textarea automatically expands as the user types. You can disabl
   </template>
 </ComponentDemo>
 
+## Minimum rows (compact / input-like)
+
+Use the `min-rows` prop to control the initial (minimum) height of the textarea. It defaults to `3` lines. Set it to `1` to make the textarea start at the height of a regular input while keeping the autogrow behavior: it grows line by line as the user types.
+
+<ComponentDemo>
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    :min-rows="1"
+    rounded-size="xl"
+    placeholder="Send your message"
+  />
+
+<template #code>
+
+```vue
+<template>
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    :min-rows="1"
+    rounded-size="xl"
+    placeholder="Send your message"
+  />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Sizes
+
+The `size` prop controls the padding (height) and text size of the textarea, mirroring the `MazInput` sizes (`mini`, `xs`, `sm`, `md`, `lg`, `xl`). Combined with `:min-rows="1"`, a given size matches the height of a `MazInput` of the same size, while keeping the autogrow behavior.
+
+<ComponentDemo>
+  <div class="maz:flex maz:flex-col maz:gap-4">
+    <MazTextarea v-model="value" name="comment" size="xs" :min-rows="1" placeholder="Size xs" />
+    <MazTextarea v-model="value" name="comment" size="sm" :min-rows="1" placeholder="Size sm" />
+    <MazTextarea v-model="value" name="comment" size="md" :min-rows="1" placeholder="Size md" />
+    <MazTextarea v-model="value" name="comment" size="lg" :min-rows="1" placeholder="Size lg" />
+    <MazTextarea v-model="value" name="comment" size="xl" :min-rows="1" placeholder="Size xl" />
+  </div>
+
+<template #code>
+
+```vue
+<template>
+  <MazTextarea v-model="value" name="comment" size="xs" :min-rows="1" placeholder="Size xs" />
+  <MazTextarea v-model="value" name="comment" size="sm" :min-rows="1" placeholder="Size sm" />
+  <MazTextarea v-model="value" name="comment" size="md" :min-rows="1" placeholder="Size md" />
+  <MazTextarea v-model="value" name="comment" size="lg" :min-rows="1" placeholder="Size lg" />
+  <MazTextarea v-model="value" name="comment" size="xl" :min-rows="1" placeholder="Size xl" />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
 ## Disabled
 
 <ComponentDemo>

package/docs/src/components/maz-timeline.md

@@ -9,6 +9,21 @@ description: MazTimeline is a step/progress timeline component for Vue 3 with su
 
 <!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
+---
+
+Control the current step:
+
+<MazRadioButtons
+  :model-value="currentStep"
+  size="sm"
+  :options="[
+    { label: 'None', value: -1 },
+    ...steps.map((step, index) => ({ label: index, value: index })),
+    { label: 'All Completed', value: 99 },
+  ]"
+  @update:model-value="currentStep = $event"
+/>
+
 ## Basic usage
 
 <ComponentDemo>
@@ -292,6 +307,40 @@ Customize the indicator border radius with the `rounded-size` prop.
   </template>
 </ComponentDemo>
 
+## Custom Icons
+
+<ComponentDemo>
+  <MazTimeline :model-value="0" :steps="iconsSteps" direction="horizontal" size="lg" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazTimeline
+    v-model="currentStep"
+    :steps="steps"
+    size="lg"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { MazCommandLine } from '@maz-ui/icons/MazCommandLine'
+  import { MazClipboardDocumentList } from '@maz-ui/icons/MazClipboardDocumentList'
+  import { MazClipboardDocumentCheck } from '@maz-ui/icons/MazClipboardDocumentCheck'
+  import { MazComputerDesktop } from '@maz-ui/icons/MazComputerDesktop'
+
+  const iconsSteps = [
+    { title: 'PO', subtitle: 'Writing PRD', icon: MazClipboardDocumentList },
+    { title: 'Dev', subtitle: 'Building Code', icon: MazCommandLine },
+    { title: 'Tech Lead', subtitle: 'Review Code', icon: MazComputerDesktop },
+    { title: 'QA', subtitle: 'Testing', icon: MazClipboardDocumentCheck },
+  ]
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
 ## Custom slots
 
 MazTimeline provides scoped slots for full customization.
@@ -378,6 +427,10 @@ MazTimeline provides scoped slots for full customization.
 
 <script lang="ts" setup>
   import { ref } from 'vue'
+  import { MazComputerDesktop } from '@maz-ui/icons/MazComputerDesktop'
+  import { MazCommandLine } from '@maz-ui/icons/MazCommandLine'
+  import { MazClipboardDocumentList } from '@maz-ui/icons/MazClipboardDocumentList'
+  import { MazClipboardDocumentCheck } from '@maz-ui/icons/MazClipboardDocumentCheck'
 
   const currentStep = ref(1)
   const clickableStep = ref(0)
@@ -410,6 +463,13 @@ MazTimeline provides scoped slots for full customization.
     { title: 'Complete', subtitle: 'All done!' },
   ]
 
+  const iconsSteps = [
+    { title: 'PO', subtitle: 'Writing PRD', icon: MazClipboardDocumentList },
+    { title: 'Dev', subtitle: 'Building Code', icon: MazCommandLine },
+    { title: 'Tech Lead', subtitle: 'Review Code', icon: MazComputerDesktop },
+    { title: 'QA', subtitle: 'Testing', icon: MazClipboardDocumentCheck },
+  ]
+
   const colors = ['primary', 'secondary', 'info', 'success', 'warning', 'destructive']
   const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
   const roundedSizes = ['full', 'lg', 'md', 'sm', 'none']

package/docs/src/components/maz-window-mockup.md

@@ -0,0 +1,249 @@
+---
+title: MazWindowMockup
+description: 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.
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+
+::: info Optional: shiki for code variants
+When you pass the `code` prop, `MazWindowMockup` mounts `MazCodeHighlight` internally for syntax highlighting. This requires the [`shiki`](https://shiki.style) optional peer dependency to be installed. See the [MazCodeHighlight installation note](/components/maz-code-highlight#installation-requirement).
+:::
+
+## Browser variant
+
+The default variant. Displays an address bar with the `url` prop and a copy-URL button on the right side of the bar.
+
+<ComponentDemo>
+  <MazWindowMockup url="https://maz-ui.com" min-height="100px">
+    <div style="padding: 1rem; text-align: center;">Browser content goes here</div>
+  </MazWindowMockup>
+
+  <template #code>
+
+```vue
+<template>
+  <MazWindowMockup url="https://maz-ui.com" min-height="100px">
+    <div>Browser content goes here</div>
+  </MazWindowMockup>
+</template>
+
+<script lang="ts" setup>
+  import MazWindowMockup from 'maz-ui/components/MazWindowMockup'
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+### Hide the URL copy button
+
+Set `:hide-url-copy="true"` to remove the copy-URL button from the title bar.
+
+<ComponentDemo>
+  <MazWindowMockup url="https://maz-ui.com" min-height="80px" :hide-url-copy="true" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazWindowMockup url="https://maz-ui.com" min-height="80px" :hide-url-copy="true" />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+### With screenshot
+
+Use this variant to display a screenshot of a website.
+
+<ComponentDemo>
+  <MazWindowMockup url="https://maz-ui.com" min-height="100px">
+    <img :src="screenshot" alt="Maz UI Demo Dashboard" width="100%">
+  </MazWindowMockup>
+
+  <template #code>
+
+```vue
+<template>
+  <MazWindowMockup url="https://maz-ui.com" min-height="100px">
+    <img src="/img/screenshots/maz-ui-home-desktop.webp" alt="Maz UI Demo Dashboard" width="100%">
+  </MazWindowMockup>
+</template>
+
+<script lang="ts" setup>
+  import MazWindowMockup from 'maz-ui/components/MazWindowMockup'
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+## Terminal variant
+
+Displays a centered title and a `$` prompt prefix in front of the code (when `code` is provided). The prompt prefix is **not** copied to the clipboard — the copy button only writes the raw `code` value.
+
+<ComponentDemo>
+  <MazWindowMockup variant="terminal" title="zsh" code="pnpm add maz-ui" language="bash" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazWindowMockup variant="terminal" title="zsh" code="pnpm add maz-ui" language="bash" />
+</template>
+
+<script lang="ts" setup>
+  import MazWindowMockup from 'maz-ui/components/MazWindowMockup'
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+### Custom prompt
+
+Replace the default `$` with any character via the `prompt` prop.
+
+<ComponentDemo>
+  <MazWindowMockup variant="terminal" code="git status" language="bash" prompt="❯" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazWindowMockup variant="terminal" code="git status" language="bash" prompt="❯" />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+### Without prompt
+
+Hide the default prompt by setting `hide-prompt` to `true`.
+
+<ComponentDemo>
+  <MazWindowMockup variant="terminal" code="git status" language="bash" :hide-prompt="true" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazWindowMockup variant="terminal" code="git status" language="bash" :hide-prompt="true" />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Editor variant
+
+Shows a filename tab anchored to the bottom of the title bar — matching the look of real editors like VSCode.
+
+<ComponentDemo>
+  <MazWindowMockup variant="editor" filename="App.vue" :code="vueCode" language="vue" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazWindowMockup variant="editor" filename="App.vue" :code="vueCode" language="vue" />
+</template>
+
+<script lang="ts" setup>
+  import MazWindowMockup from 'maz-ui/components/MazWindowMockup'
+
+  const vueCode = `<template>
+  <MazBtn>Click me</MazBtn>
+</template>`
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+## With code and language props
+
+Pass `code` and `language` to display highlighted source code via `MazCodeHighlight`. The inner highlighter automatically renders with squared corners so it sits flush against the window's border.
+
+<ComponentDemo>
+  <MazWindowMockup code="import MazBtn from 'maz-ui/components/MazBtn'" language="ts" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazWindowMockup code="import MazBtn from 'maz-ui/components/MazBtn'" language="ts" />
+</template>
+
+<script lang="ts" setup>
+  import MazWindowMockup from 'maz-ui/components/MazWindowMockup'
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+## Empty-state placeholder
+
+When neither `code` nor a slot content is provided, the content area renders an empty placeholder. Pass the optional `label` prop to display a centered text inside it.
+
+<ComponentDemo>
+  <MazWindowMockup url="https://maz-ui.com" min-height="160px" label="Preview" />
+
+  <template #code>
+
+```vue
+<template>
+  <MazWindowMockup url="https://maz-ui.com" min-height="160px" label="Preview" />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Custom translations
+
+The URL copy button's aria-label and tooltip come from the `@maz-ui/translations` package (`windowMockup.copyUrlToClipboard` / `windowMockup.urlCopiedToClipboard`). Override per-instance with the `translations` prop:
+
+<ComponentDemo>
+  <MazWindowMockup
+    url="https://maz-ui.com"
+    min-height="80px"
+    :translations="{ copyUrlToClipboard: 'Copier l\'URL', urlCopiedToClipboard: 'URL copiée !' }"
+  />
+
+  <template #code>
+
+```vue
+<template>
+  <MazWindowMockup
+    url="https://maz-ui.com"
+    min-height="80px"
+    :translations="{
+      copyUrlToClipboard: 'Copier l\'URL',
+      urlCopiedToClipboard: 'URL copiée !',
+    }"
+  />
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+For app-wide translations, set up the [maz-ui translations plugin](/translations) and the component will pick up your locale automatically.
+
+<script lang="ts" setup>
+  import screenshot from './../assets/interface-screenshot.png'
+
+  const vueCode = `<template>
+  <MazBtn>Click me</MazBtn>
+</template>`
+</script>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-window-mockup.doc.md-->