@maz-ui/mcp 4.4.0 → 4.6.1

package/docs/src/components/maz-card-spotlight.md

@@ -7,7 +7,7 @@ description: MazCardSpotlight is a standalone component
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 **This component is better in dark mode**
 

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

@@ -7,7 +7,7 @@ description: MazCard is a standalone component to display some texts and images
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ## Basic usage
 

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

@@ -17,9 +17,9 @@ head:
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
-<!--@include: ./../.vitepress/mixins/translated-component.md-->
+<!--@include: ./../../.vitepress/mixins/translated-component.md-->
 
 ## Basic usage
 

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

@@ -7,7 +7,7 @@ description: MazCheckbox is a standalone component that replaces the standard ht
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ## Basic usage
 

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

@@ -8,9 +8,9 @@ lastUpdated: false
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
-<!--@include: ./../.vitepress/mixins/translated-component.md-->
+<!--@include: ./../../.vitepress/mixins/translated-component.md-->
 
 ## Basic usage
 

package/docs/src/components/maz-circular-progress-bar.md

@@ -7,7 +7,7 @@ description: MazCircularProgressBar is a standalone component
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ## Basic usage
 

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

@@ -0,0 +1,348 @@
+---
+title: MazContainer
+description: MazContainer is a lightweight component to wrap content with optional header, border, elevation, and rounded corners - a simpler alternative to MazCard
+---
+
+# {{ $frontmatter.title }}
+
+{{ $frontmatter.description }}
+
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+
+::: tip
+MazContainer is designed to be a lighter alternative to [MazCard](/components/maz-card.html). Use it when you need a simple container with basic styling options without the extra features like galleries, collapsible content, or actions.
+:::
+
+## Basic usage
+
+<ComponentDemo>
+  <MazContainer>
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
+  </MazContainer>
+
+  <template #code>
+
+```vue
+<template>
+  <MazContainer>
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
+  </MazContainer>
+</template>
+
+<script lang="ts" setup>
+  import MazContainer from 'maz-ui/components/MazContainer'
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+## With title
+
+Add a header with a title using the `title` prop or the `title` slot.
+
+<ComponentDemo>
+  <MazContainer title="Section Title">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
+  </MazContainer>
+
+  <template #code>
+
+```vue
+<template>
+  <MazContainer title="Section Title">
+    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
+  </MazContainer>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## With icons
+
+Add icons to the header using `left-icon` and `right-icon` props.
+
+<ComponentDemo>
+  <div class="maz-flex maz-flex-col maz-gap-4">
+    <MazContainer title="Settings" left-icon="cog-6-tooth">
+      Configure your application settings here.
+    </MazContainer>
+    <MazContainer title="User Profile" left-icon="user" right-icon="pencil">
+      View and edit your profile information.
+    </MazContainer>
+  </div>
+
+  <template #code>
+
+```vue
+<template>
+  <MazContainer title="Settings" left-icon="cog-6-tooth">
+    Configure your application settings here.
+  </MazContainer>
+
+  <MazContainer title="User Profile" left-icon="user" right-icon="pencil">
+    View and edit your profile information.
+  </MazContainer>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Styling options
+
+### Elevation
+
+Add shadow to make the container stand out.
+
+<ComponentDemo>
+  <MazContainer elevation :bordered="false">
+    Container with elevation effect and no border.
+  </MazContainer>
+
+  <template #code>
+
+```vue
+<template>
+  <MazContainer elevation :bordered="false">
+    Container with elevation effect and no border.
+  </MazContainer>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+### Bordered
+
+By default, the container has a border. You can disable it.
+
+<ComponentDemo>
+  <div class="maz-flex maz-flex-col maz-gap-4">
+    <MazContainer title="With border (default)">
+      This container has a border.
+    </MazContainer>
+    <MazContainer title="Without border" :bordered="false">
+      This container has no border.
+    </MazContainer>
+  </div>
+
+  <template #code>
+
+```vue
+<template>
+  <MazContainer title="With border (default)">
+    This container has a border.
+  </MazContainer>
+
+  <MazContainer title="Without border" :bordered="false">
+    This container has no border.
+  </MazContainer>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+### Transparent
+
+Remove the background color with the `transparent` prop.
+
+<ComponentDemo>
+  <MazContainer title="Transparent container" transparent>
+    This container has a transparent background.
+  </MazContainer>
+
+  <template #code>
+
+```vue
+<template>
+  <MazContainer title="Transparent container" transparent>
+    This container has a transparent background.
+  </MazContainer>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+### Rounded sizes
+
+Customize the border radius with the `rounded-size` prop.
+
+<ComponentDemo>
+  <div class="maz-flex maz-flex-wrap maz-gap-4">
+    <MazContainer v-for="size in roundedSizes" :key="size" :rounded-size="size">
+      {{ size }}
+    </MazContainer>
+  </div>
+
+  <template #code>
+
+```vue
+<template>
+  <MazContainer v-for="size in roundedSizes" :key="size" :rounded-size="size">
+    {{ size }}
+  </MazContainer>
+</template>
+
+<script lang="ts" setup>
+  import MazContainer from 'maz-ui/components/MazContainer'
+
+  const roundedSizes = ['none', 'sm', 'md', 'lg', 'xl', 'full']
+</script>
+```
+
+  </template>
+</ComponentDemo>
+
+### No padding
+
+Remove internal padding with `:padding="false"`.
+
+<ComponentDemo>
+  <MazContainer title="No padding" :padding="false">
+    Content without container padding - useful for custom layouts.
+  </MazContainer>
+
+  <template #code>
+
+```vue
+<template>
+  <MazContainer title="No padding" :padding="false">
+    Content without container padding - useful for custom layouts.
+  </MazContainer>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Full width
+
+Use the `block` prop to make the container take full width.
+
+<ComponentDemo>
+  <MazContainer title="Full width container" block>
+    This container spans the full width of its parent.
+  </MazContainer>
+
+  <template #code>
+
+```vue
+<template>
+  <MazContainer title="Full width container" block>
+    This container spans the full width of its parent.
+  </MazContainer>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Custom header
+
+Use the `header` slot to fully customize the header, or use `title`, `icon-left`, and `icon-right` slots for more granular control.
+
+<ComponentDemo>
+  <MazContainer>
+    <template #header>
+      <div class="maz-flex maz-items-center maz-justify-between maz-w-full maz-px-4 maz-py-3 maz-bg-primary maz-text-primary-foreground">
+        <span class="maz-font-semibold">Custom Header</span>
+        <MazBadge size="0.8rem" color="white" class="maz-text-primary">
+          New
+        </MazBadge>
+      </div>
+    </template>
+    Content with a fully customized header.
+  </MazContainer>
+
+  <template #code>
+
+```vue
+<template>
+  <MazContainer>
+    <template #header>
+      <div class="maz-flex maz-items-center maz-justify-between maz-w-full maz-px-4 maz-py-3 maz-bg-primary maz-text-primary-foreground">
+        <span class="maz-font-semibold">Custom Header</span>
+        <MazBadge size="0.8rem" color="white" class="maz-text-primary">
+          New
+        </MazBadge>
+      </div>
+    </template>
+    Content with a fully customized header.
+  </MazContainer>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+## Combining options
+
+<ComponentDemo>
+  <MazContainer
+    title="Dashboard Overview"
+    left-icon="chart-bar"
+    elevation
+    :bordered="false"
+    rounded-size="xl"
+    block
+  >
+    <div class="maz-flex maz-gap-4 maz-flex-wrap">
+      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
+        <p class="maz-text-muted maz-text-sm">Users</p>
+        <p class="maz-text-2xl maz-font-bold">1,234</p>
+      </MazContainer>
+      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
+        <p class="maz-text-muted maz-text-sm">Revenue</p>
+        <p class="maz-text-2xl maz-font-bold">$12.5k</p>
+      </MazContainer>
+      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
+        <p class="maz-text-muted maz-text-sm">Orders</p>
+        <p class="maz-text-2xl maz-font-bold">567</p>
+      </MazContainer>
+    </div>
+  </MazContainer>
+
+  <template #code>
+
+```vue
+<template>
+  <MazContainer
+    title="Dashboard Overview"
+    left-icon="chart-bar"
+    elevation
+    :bordered="false"
+    rounded-size="xl"
+    block
+  >
+    <div class="maz-flex maz-gap-4 maz-flex-wrap">
+      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
+        <p class="maz-text-muted maz-text-sm">Users</p>
+        <p class="maz-text-2xl maz-font-bold">1,234</p>
+      </MazContainer>
+      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
+        <p class="maz-text-muted maz-text-sm">Revenue</p>
+        <p class="maz-text-2xl maz-font-bold">$12.5k</p>
+      </MazContainer>
+      <MazContainer class="maz-flex-1 maz-min-w-[150px]">
+        <p class="maz-text-muted maz-text-sm">Orders</p>
+        <p class="maz-text-2xl maz-font-bold">567</p>
+      </MazContainer>
+    </div>
+  </MazContainer>
+</template>
+```
+
+  </template>
+</ComponentDemo>
+
+<script lang="ts" setup>
+  const roundedSizes = ['none', 'sm', 'md', 'lg', 'xl', 'full']
+</script>
+
+<!--@include: ./../../.vitepress/generated-docs/maz-container.doc.md-->

package/docs/src/components/maz-date-picker.md

@@ -7,9 +7,9 @@ description: A powerful and flexible date picker component with support for sing
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
-<!--@include: ./../.vitepress/mixins/translated-component.md-->
+<!--@include: ./../../.vitepress/mixins/translated-component.md-->
 
 ## Table of Contents
 
@@ -1006,7 +1006,7 @@ interface MazDatePickerShortcut {
 }
 ```
 
-<!--@include: ./../.vitepress/mixins/maz-input-props.md-->
+<!--@include: ./../../.vitepress/mixins/maz-input-props.md-->
 
 <!--@include: ./../../.vitepress/generated-docs/maz-date-picker.doc.md-->
 

package/docs/src/components/maz-dialog-confirm.md

@@ -8,7 +8,7 @@ description: MazDialogConfirm is a standalone component that dialogs with the us
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ::: info
 This component uses [MazDialog](./maz-dialog.md), so it inherits all its props

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

@@ -7,7 +7,7 @@ description: MazDialog is a standalone dialog component to show important inform
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ::: tip
 This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md), so you can implement this component anywhere and it inherits all its props

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

@@ -7,7 +7,7 @@ description: MazDrawer is a standalone component to add a collapsible sidebar at
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ::: tip
 This component uses `<Teleport to="body">` with [MazBackdrop](./maz-backdrop.md), so you can implement this component anywhere and it inherits all its props

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

@@ -7,9 +7,9 @@ description: MazDropdown is a standalone dropdown menu component and versatile d
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
-<!--@include: ./../.vitepress/mixins/translated-component.md-->
+<!--@include: ./../../.vitepress/mixins/translated-component.md-->
 
 ## Basic usage
 

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

@@ -7,9 +7,9 @@ description: MazDropzone is a powerful and flexible file upload component with d
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
-<!--@include: ./../.vitepress/mixins/translated-component.md-->
+<!--@include: ./../../.vitepress/mixins/translated-component.md-->
 
 ## Key Features
 
@@ -102,7 +102,7 @@ function handleError({ code, files }) {
 
 ```vue
 <script setup lang="ts">
-import { useToast } from 'maz-ui'
+import { useToast } from 'maz-ui/composables'
 import { ref } from 'vue'
 
 const toast = useToast()
@@ -284,7 +284,7 @@ Multiple upload is allowed:
 
 <script setup lang="ts">
   import { ref } from 'vue'
-  import { useToast } from 'maz-ui'
+  import { useToast } from 'maz-ui/composables'
 
   const files = ref<File[]>([])
 

package/docs/src/components/maz-expand-animation.md

@@ -7,7 +7,7 @@ description: MazExpandAnimation is a standalone component that allows you to ani
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ## Basic usage
 

package/docs/src/components/maz-fullscreen-loader.md

@@ -7,7 +7,7 @@ description: MazFullscreenLoader is a standalone component
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ## Basic usage
 

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

@@ -7,7 +7,7 @@ description: MazGallery is a standalone component used to display images in a co
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ## Basic usage
 

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

@@ -7,7 +7,7 @@ description: This component creates a customizable input code field with feature
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ## Basic usage
 

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

@@ -7,7 +7,7 @@ description: MazInputNumber is a number input component with increment and decre
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ## Basic usage
 
@@ -72,7 +72,7 @@ You can remove the buttons with the props `hide-buttons`
   </template>
 </ComponentDemo>
 
-<!--@include: ./../.vitepress/mixins/maz-input-props.md-->
+<!--@include: ./../../.vitepress/mixins/maz-input-props.md-->
 <!--@include: ./../../.vitepress/generated-docs/maz-input-number.doc.md-->
 
 <script lang="ts" setup>

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

@@ -7,9 +7,9 @@ description: MazInputPhoneNumber is a powerful and user-friendly component that
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
-<!--@include: ./../.vitepress/mixins/translated-component.md-->
+<!--@include: ./../../.vitepress/mixins/translated-component.md-->
 
 ::: tip ✨ What makes this component special?
 - **Smart country detection** - Automatically detects country from browser locale or IP
@@ -878,7 +878,7 @@ interface MazInputPhoneNumberData {
 }
 ```
 
-<!--@include: ./../.vitepress/mixins/maz-input-props.md-->
+<!--@include: ./../../.vitepress/mixins/maz-input-props.md-->
 <!--@include: ./../../.vitepress/generated-docs/maz-input-phone-number.doc.md-->
 
 <script setup lang="ts">

package/docs/src/components/maz-input-price.md

@@ -7,7 +7,7 @@ description: MazInputPrice is a standalone component that replaces the standard
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ## Basic usage
 
@@ -54,5 +54,5 @@ const formattedPrice = ref()
 </template>
 ```
 
-<!--@include: ./../.vitepress/mixins/maz-input-props.md-->
+<!--@include: ./../../.vitepress/mixins/maz-input-props.md-->
 <!--@include: ./../../.vitepress/generated-docs/maz-input-price.doc.md-->

package/docs/src/components/maz-input-tags.md

@@ -7,7 +7,7 @@ description: MazInputTags is a standalone component like free inputs to help use
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ## Basic usage
 
@@ -110,5 +110,5 @@ const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
 </template>
 ```
 
-<!--@include: ./../.vitepress/mixins/maz-input-props.md-->
+<!--@include: ./../../.vitepress/mixins/maz-input-props.md-->
 <!--@include: ./../../.vitepress/generated-docs/maz-input-tags.doc.md-->

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

@@ -7,7 +7,7 @@ description: MazInput is a standalone component that replaces the standard html
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ## Basic usage
 

package/docs/src/components/maz-lazy-img.md

@@ -7,7 +7,7 @@ description: MazLazyImg is a standalone component to display images and svgs wit
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 <MazLazyImg src="https://placedog.net/1000/1000" block />
 

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

@@ -7,7 +7,7 @@ description: MazLink is a standalone component to create links and buttons.
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ## Basic usage
 

package/docs/src/components/maz-loading-bar.md

@@ -7,7 +7,7 @@ description: MazLoadingBar is a standalone component
 
 {{ $frontmatter.description }}
 
-<!--@include: ./../.vitepress/mixins/getting-started.md-->
+<!--@include: ./../../.vitepress/mixins/getting-started.md-->
 
 ## Basic usage