@maz-ui/mcp 5.0.0 → 5.1.0-beta.0

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

@@ -1,29 +1,20 @@
 ---
-title: MazTabs
-description: MazTabs is a standalone component to display content in tabs with animations
+title: "MazTabs"
+description: "MazTabs is a standalone component to display content in tabs with animations"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-tabs"
 ---
 
-# {{ $frontmatter.title }}
+# MazTabs
 
-{{ $frontmatter.description }}
+> MazTabs is a standalone component to display content in tabs with animations
 
-## Basic usage
+- Package: `maz-ui`
+- Import: `import MazTabs from 'maz-ui/components/MazTabs'` or `import MazTabsBar from 'maz-ui/components/MazTabsBar'` or `import MazTabsContent from 'maz-ui/components/MazTabsContent'` or `import MazTabsContentItem from 'maz-ui/components/MazTabsContentItem'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-tabs
 
-<MazTabs>
-  <MazTabsBar :items="tabs" />
-
-  <MazTabsContent>
-    <MazTabsContentItem :tab="1" class="maz:py-4">
-      Tab 1
-    </MazTabsContentItem>
-    <MazTabsContentItem :tab="2" class="maz:py-4">
-      Tab 2
-    </MazTabsContentItem>
-    <MazTabsContentItem :tab="3" class="maz:py-4">
-      Tab 3
-    </MazTabsContentItem>
-  </MazTabsContent>
-</MazTabs>
+## Basic usage
 
 ```vue
 <script lang="ts" setup>
@@ -41,13 +32,13 @@ const tabs: MazTabsBarItem[] = [
     <MazTabsBar :items="tabs" />
 
     <MazTabsContent>
-      <MazTabsContentItem :tab="1" class="maz:py-4">
+      <MazTabsContentItem :tab="1" class="py-4">
         Tab 1
       </MazTabsContentItem>
-      <MazTabsContentItem :tab="2" class="maz:py-4">
+      <MazTabsContentItem :tab="2" class="py-4">
         Tab 2
       </MazTabsContentItem>
-      <MazTabsContentItem :tab="3" class="maz:py-4">
+      <MazTabsContentItem :tab="3" class="py-4">
         Tab 3
       </MazTabsContentItem>
     </MazTabsContent>
@@ -57,29 +48,7 @@ const tabs: MazTabsBarItem[] = [
 
 ## With model-value
 
-<MazTabs v-model="currentTab">
-  <MazTabsBar :items="tabs" />
-
-  <MazTabsContent>
-    <MazTabsContentItem :tab="1" class="maz:py-4">
-      Tab 1
-    </MazTabsContentItem>
-    <MazTabsContentItem :tab="2" class="maz:py-4">
-      Tab 2
-    </MazTabsContentItem>
-    <MazTabsContentItem :tab="3" class="maz:py-4">
-      Tab 3
-    </MazTabsContentItem>
-  </MazTabsContent>
-</MazTabs>
-
-<br />
-
-<MazBtn @click="currentTab = currentTab === 1 ? 2 : 1">
-Set model-value to {{currentTab === 1 ? 2 : 1}}
-</MazBtn>
-
-::: details View code
+**Details: View code**
 
 ```vue
 <script lang="ts" setup>
@@ -95,13 +64,13 @@ const tabs: MazTabsBarItem[] = ['First Tab', 'Second Tab', 'Third Tab']
     <MazTabsBar :items="tabs" />
 
     <MazTabsContent>
-      <MazTabsContentItem :tab="1" class="maz:py-4">
+      <MazTabsContentItem :tab="1" class="py-4">
         Tab 1
       </MazTabsContentItem>
-      <MazTabsContentItem :tab="2" class="maz:py-4">
+      <MazTabsContentItem :tab="2" class="py-4">
         Tab 2
       </MazTabsContentItem>
-      <MazTabsContentItem :tab="3" class="maz:py-4">
+      <MazTabsContentItem :tab="3" class="py-4">
         Tab 3
       </MazTabsContentItem>
     </MazTabsContent>
@@ -115,8 +84,6 @@ const tabs: MazTabsBarItem[] = ['First Tab', 'Second Tab', 'Third Tab']
 </template>
 ```
 
-:::
-
 ## Persistent tab
 
 To keep the tab current when the page reloads, you can use the `persistent` props on the component `<MazTabsBar />`.
@@ -125,39 +92,8 @@ The component will save the current table index in the URL of the page via a que
 
 You can choose the name of this query parameter with the props `query-param` `@default 'tab'`
 
-<MazTabs>
-  <MazTabsBar :items="tabs2" persistent />
-
-  <MazTabsContent>
-    <MazTabsContentItem :tab="1" class="maz:py-4">
-      Tab 1
-    </MazTabsContentItem>
-    <MazTabsContentItem :tab="2" class="maz:py-4">
-      Tab 2
-    </MazTabsContentItem>
-    <MazTabsContentItem :tab="3" class="maz:py-4">
-      Tab 3
-    </MazTabsContentItem>
-  </MazTabsContent>
-</MazTabs>
-
 ## Custom tabs with slot
 
-<MazTabs>
-  <MazTabsBar :items="tabs2">
-    <template #item="{ item, index, active }">
-      {{ item.label }}
-      <MazBadge
-        size="mini"
-        rounded-size="full"
-        :color="active ? 'primary' : 'transparent'"
-      >
-        {{ index}}
-      </MazBadge>
-    </template>
-  </MazTabsBar>
-</MazTabs>
-
 ```html
 <MazTabs>
   <MazTabsBar :items="tabs">
@@ -170,37 +106,11 @@ You can choose the name of this query parameter with the props `query-param` `@d
 </MazTabs>
 ```
 
-<script lang="ts" setup>
-  import { ref } from 'vue'
-
-  const currentTab = ref(2)
-
-  const tabs: MazTabsBarItem[] = [
-    { label: 'First Tab', disabled: false },
-    { label: 'Second Tab', disabled: false, badge: { color: 'destructive', content: 1, roundedSize: 'full' } },
-    { label: 'Third Tab', disabled: true },
-  ]
-
-  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>
+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).
 
 ```vue
 <template>
@@ -221,10 +131,6 @@ Each item can also override the `size` and `rounded-size` (and accepts every oth
 
 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" />
@@ -235,22 +141,16 @@ The active tab is highlighted by the indicator. Use the `color` prop (`MazColor`
 
 `MazTabsBar` can be used on its own, without `MazTabs`, as an independent switcher with its own `v-model`.
 
-::: tip Nested inside a `MazTabs`
+**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'
@@ -324,22 +224,85 @@ type MazTabsBarItem<Value extends string | number = string | number>
 The tabs follow the [WAI-ARIA tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/):
 
 - `MazTabsBar` is a `tablist` (pass an `aria-label` to name it), each item is a `tab` with `aria-selected`, linked to its `MazTabsContentItem` (`tabpanel`) through `aria-controls` / `aria-labelledby`.
-- **Keyboard**: only the selected tab is in the tab sequence, <kbd>←</kbd> / <kbd>→</kbd> select the previous / next tab (reversed in RTL), <kbd>Home</kbd> / <kbd>End</kbd> the first / last one. Disabled tabs are skipped.
+- **Keyboard**: only the selected tab is in the tab sequence, ← / → select the previous / next tab (reversed in RTL), Home / End the first / last one. Disabled tabs are skipped.
 
 ## Props & Events emitted
 
 ## MazTabs
 
-<!--@include: ./../../.vitepress/generated-docs/maz-tabs.doc.md-->
+## MazTabs API
+
+`import MazTabs from 'maz-ui/components/MazTabs'`
+
+### Props
+
+- `model-value` (`number`, `v-model`): The the selected tab number.
+- `size` (`"xs" | "sm" | "md" | "lg" | "xl" | "mini"`): Size of the tabs, forwarded to MazTabsBar (and each tab button).
+- `rounded-size` (`MazRoundedSize`): Size of the rounded, forwarded to MazTabsBar. Values: `'none'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'full'` (non exhaustive).
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`): Color of the active tab indicator, forwarded to MazTabsBar.
+
+### Events
+
+- `@update:model-value` (payload: `value: number`): Emitted when the selected tab change
+
+### Slots
+
+- `#default`
 
 ## MazTabsBar
 
-<!--@include: ./../../.vitepress/generated-docs/maz-tabs-bar.doc.md-->
+## MazTabsBar API
+
+`import MazTabsBar from 'maz-ui/components/MazTabsBar'`
+
+### Props
+
+- `items` (`readonly Item[]`, required): The items to display in the tabs bar.
+- `model-value` (`MazTabsBarItemValue<Item>`, `v-model`): Selected tab (standalone usage, without MazTabs). Holds the item `value` when provided, otherwise the 1-based index. Pass items `as const` (or with literal `value`) to infer a union type.
+- `size` (`"xs" | "sm" | "md" | "lg" | "xl" | "mini"`, default: `'md'`): Size of the tabs (forwarded to each MazBtn).
+- `rounded-size` (`MazRoundedSize`, default: `'md'`): Size of the rounded applied to the bar, the indicator and each tab. Values: `'none'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'full'` (non exhaustive).
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`): Color of the active tab indicator. When omitted, the default neutral indicator is used.
+- `standalone` (`boolean`, default: `false`): Force the standalone mode: the tabs bar ignores any surrounding `MazTabs` (selection, size, rounded-size and color are no longer inherited) and is driven only by its own `v-model`. Useful for a nested switcher inside a page already wrapped by `MazTabs`.
+- `persistent` (`boolean`, default: `false`): Will add a query param to the url to keep the selected tab on page refresh.
+- `query-param` (`string`, default: `"tab"`): The name of the query param to add to the url.
+- `block` (`boolean`, default: `false`): Will make the tabs bar full width.
+- `elevation` (`boolean`, default: `false`): Will remove the elevation.
+- `auto-scroll` (`boolean`, default: `true`): Will add a scroll on the tabs bar to show selected element.
+- `bordered` (`boolean`, default: `true`): Will add a border to the tabs bar.
+
+### Events
+
+- `@update:model-value` (payload: `value: MazTabsBarItemValue<Item>`): Emitted when the selected tab changes (standalone usage).
+
+### Slots
+
+- `#item`: Content of item to display in the tabs bar Bindings: `item: { label: Item & string; value: string | number | undefined; disabled: boolean; size: "xs" | "sm" | "md" | "lg" | "xl" | "mini" | undefined; roundedSize: MazRoundedSize | undefined; color: NonNullable<"primary" | "secondary" | "accent" | ...` (all data of the item), `active: boolean` (`true` if the tab is active), `index: number` (index of the item).
+- `#badge-content`: Content in the badge Bindings: `content: string | number | boolean` (content of the badge provided in item).
 
 ## MazTabsContent
 
-<!--@include: ./../../.vitepress/generated-docs/maz-tabs-content.doc.md-->
+## MazTabsContent API
+
+`import MazTabsContent from 'maz-ui/components/MazTabsContent'`
+
+### Props
+
+No props.
+
+### Slots
+
+- `#default`
 
 ## MazTabsContentItem
 
-<!--@include: ./../../.vitepress/generated-docs/maz-tabs-content-item.doc.md-->
+## MazTabsContentItem API
+
+`import MazTabsContentItem from 'maz-ui/components/MazTabsContentItem'`
+
+### Props
+
+- `tab` (`number`, required)
+
+### Slots
+
+- `#default`

package/docs/components/maz-textarea.md

@@ -0,0 +1,255 @@
+---
+title: "MazTextarea"
+description: "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 and error messages are available."
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-textarea"
+---
+
+# MazTextarea
+
+> 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 and error messages are available.
+
+- Package: `maz-ui`
+- Import: `import MazTextarea from 'maz-ui/components/MazTextarea'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-textarea
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+**Note:**
+
+This component uses the native CSS `field-sizing: content` property for autogrow - the textarea expands automatically as the user types, with zero JavaScript overhead.
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+import MazTextarea from 'maz-ui/components/MazTextarea'
+import { ref } from 'vue'
+
+const value = ref()
+</script>
+
+<template>
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    label="Enter your comment"
+  />
+</template>
+```
+
+## With top-label
+
+You can use the `top-label` attribute to display a top label above the textarea.
+
+```html
+<MazTextarea
+  v-model="value"
+  top-label="Your message"
+  placeholder="Type your message..."
+/>
+```
+
+## With assistive text
+
+You can use the `assistive-text` attribute to display a assistive text below the textarea.
+
+```html
+<MazTextarea
+  v-model="value"
+  top-label="Your message"
+  placeholder="Type your message..."
+  assistive-text="This is an assistive text"
+/>
+```
+
+## With label and append slots
+
+You can use the `label` and `append` slots to customize the label and the append element.
+
+```vue
+<script lang="ts" setup>
+import { useToast } from 'maz-ui/composables'
+import { ref } from 'vue'
+
+const value = ref<string>()
+
+const toast = useToast()
+
+function sendMessage() {
+  toast.success('Message sent', {
+    position: 'top-right',
+  })
+  value.value = ''
+}
+</script>
+
+<template>
+  <MazTextarea
+    v-model="value"
+    name="comment"
+  >
+    <template #label>
+      <MazIcon icon="/envelope.svg" class="text-xl" />
+      <span class="ms-2">
+        The custom label
+      </span>
+    </template>
+    <template #append>
+      <MazBtn icon="paper-airplane" size="sm" @click="sendMessage" />
+    </template>
+  </MazTextarea>
+</template>
+```
+
+## With hint and state
+
+You can use the `hint` attribute to display a hint message. This will replace the label.
+
+```vue
+<template>
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    label="This is a label"
+    hint="This is a hint message"
+  />
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    label="This is a label"
+    hint="This is a hint message"
+    error
+  />
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    label="This is a label"
+    hint="This is a hint message"
+    success
+  />
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    label="This is a label"
+    hint="This is a hint message"
+    warning
+  />
+  <hr class="my-4">
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    top-label="This is a label"
+    hint="This is a hint message"
+  />
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    top-label="This is a label"
+    hint="This is a hint message"
+    error
+  />
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    top-label="This is a label"
+    hint="This is a hint message"
+    success
+  />
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    top-label="This is a label"
+    hint="This is a hint message"
+    warning
+  />
+</template>
+```
+
+## Disable autogrow
+
+By default, the textarea automatically expands as the user types. You can disable this behavior with the `autogrow` prop set to `false` - the textarea will then have a fixed height with a manual resize handle.
+
+```html
+<MazTextarea v-model="value" name="comment" label="Fixed height textarea" :autogrow="false" />
+```
+
+## 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.
+
+```vue
+<template>
+  <MazTextarea
+    v-model="value"
+    name="comment"
+    :min-rows="1"
+    rounded-size="xl"
+    placeholder="Send your message"
+  />
+</template>
+```
+
+## 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.
+
+```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>
+```
+
+## Disabled
+
+```html
+<MazTextarea v-model="value" name="comment" label="This is a label" disabled />
+```
+
+## MazTextarea API
+
+`import MazTextarea from 'maz-ui/components/MazTextarea'`
+
+### Props
+
+- `model-value` (`T`, `v-model`): The value of the textarea.
+- `id` (`string`): The id of the textarea.
+- `name` (`string`, default: `"MazTextarea"`): The name of the textarea.
+- `label` (`string`): The label of the textarea.
+- `placeholder` (`string`): The placeholder of the textarea.
+- `required` (`boolean`, default: `false`): If the textarea is required.
+- `disabled` (`boolean`, default: `false`): If the textarea is disabled.
+- `readonly` (`boolean`, default: `false`): If the textarea is readonly.
+- `error` (`boolean`, default: `false`): If the textarea has an error.
+- `success` (`boolean`, default: `false`): If the textarea has a success.
+- `warning` (`boolean`, default: `false`): If the textarea has a warning.
+- `hint` (`string`): The hint of the textarea.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the textarea.
+- `rounded-size` (`MazRoundedSize`, default: `'md'`): Size radius of the component's border.
+- `size` (`"xs" | "sm" | "md" | "lg" | "xl" | "mini"`, default: `'md'`): Controls the padding (height) and text size of the textarea, mirroring MazInput sizes. Combined with `minRows`, e.g. `size="md" :min-rows="1"` matches a regular input height.
+- `padding` (`boolean`, default: `true`): If the textarea has a padding.
+- `transparent` (`boolean`, default: `false`): If the textarea has a transparent background.
+- `border` (`boolean`, default: `true`): If the textarea has no border.
+- `autogrow` (`boolean`, default: `true`): If the textarea should autogrow based on its content.
+- `min-rows` (`number`, default: `3`): Minimum number of rows displayed by the textarea (initial/minimum height). With autogrow enabled, the textarea still grows beyond this with its content.
+- `append-justify` (`"center" | "end" | "start" | "space-between" | "space-around" | "space-evenly"`, default: `"end"`): The alignment of the append slot.
+- `top-label` (`string`): Static label displayed above the textarea. Unlike the floating label, this remains fixed.
+- `assistive-text` (`string`): Helper text displayed below the input to provide additional context or validation feedback.
+
+### Events
+
+- `@update:model-value` (payload: `T | undefined`): Emitted when the value of the textarea change
+- `@input` (payload: `T | undefined`): Emitted when the value of the textarea change
+- `@focus` (payload: `FocusEvent`): Emitted when the textarea is focused
+- `@blur` (payload: `FocusEvent`): Emitted when the textarea is blurred
+- `@change` (payload: `Event`): Emitted when the textarea value change
+
+### Slots
+
+- `#label`
+- `#append`