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

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

@@ -1,20 +1,22 @@
 ---
-title: MazBtn
-description: 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 included. Support of router-link and nuxt-link
+title: "MazBtn"
+description: "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 included. Support of router-link and nuxt-link"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-btn"
 ---
 
-# {{ $frontmatter.title }}
+# MazBtn
 
-{{ $frontmatter.description }}
+> 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 included. Support of router-link and nuxt-link
 
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+- Package: `maz-ui`
+- Import: `import MazBtn from 'maz-ui/components/MazBtn'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-btn
 
-## Basic usage
-
-<ComponentDemo expanded>
-  <MazBtn>Button</MazBtn>
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
 
-<template #code>
+## Basic usage
 
 ```vue
 <script setup lang="ts">
@@ -26,19 +28,9 @@ import MazBtn from 'maz-ui/components/MazBtn'
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Sizes
 
-Use the attribute `size` with value `{{ sizes.join(', ') }}`
-
-<ComponentDemo>
-  <div class="flex items-start gap-05 items-center flex-wrap">
-    <MazBtn v-for="size in sizes" :size="size">{{ size }}</MazBtn>
-  </div>
-
-<template #code>
+Use the attribute `size` with value ``
 
 ```vue
 <script setup lang="ts">
@@ -52,18 +44,8 @@ const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Colors
 
-<ComponentDemo>
-  <div class="flex items-start gap-05 flex-wrap">
-    <MazBtn v-for="color of colors" :key="color" :color="color">{{ color }}</MazBtn>
-  </div>
-
-<template #code>
-
 ```html
 <MazBtn>primary</MazBtn>
 <MazBtn color="secondary">secondary</MazBtn>
@@ -77,20 +59,10 @@ const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
 <MazBtn color="transparent">transparent</MazBtn>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Outlined
 
 Transform the button into an outlined button with the attribute `outlined`
 
-<ComponentDemo>
-<div class="flex items-start gap-05 flex-wrap">
-  <MazBtn v-for="color of colors" :color="color" outlined>{{ color }}</MazBtn>
-</div>
-
-<template #code>
-
 ```html
 <MazBtn outlined>primary</MazBtn>
 <MazBtn color="secondary" outlined>secondary</MazBtn>
@@ -104,31 +76,10 @@ Transform the button into an outlined button with the attribute `outlined`
 <MazBtn color="transparent" outlined>transparent</MazBtn>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Loading
 
 The loading state is available with the attribute `loading`
 
-<ComponentDemo>
-  <div class="flex items-start gap-05 flex-wrap">
-    <div v-for="color of colors"
-        :key="color" class="maz:flex maz:flex-col maz:flex-center">
-      <MazBtn
-        loading
-        :color="color"
-        start-icon="user"
-        end-icon="user"
-      >
-        {{ color }}
-      </MazBtn>
-      <span class="maz:text-muted maz:text-xs"> {{ color }} </span>
-    </div>
-  </div>
-
-<template #code>
-
 ```vue
 <script lang="ts" setup>
 const colors = [
@@ -157,24 +108,13 @@ const colors = [
 </template>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Pastel
 
 The pastel state is available with the attribute `pastel`
 
-::: info
-Better in light mode
-:::
-
-<ComponentDemo>
+**Note:**
 
-  <div class="flex items-start gap-05 rounded maz:p-3 flex-wrap">
-    <MazBtn v-for="color of colors" :color="color" pastel>{{ color }}</MazBtn>
-  </div>
-
-<template #code>
+Better in light mode
 
 ```html
 <MazBtn pastel>primary</MazBtn>
@@ -189,21 +129,10 @@ Better in light mode
 <MazBtn color="transparent" pastel>transparent</MazBtn>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Rounded Size
 
 Choose the size of the rounded with the attribute `rounded-size` and value `none`, `sm`, `md`, `lg`, `xl`, `full`
 
-<ComponentDemo>
-
-  <div class="flex items-start gap-05 rounded maz:p-3 flex-wrap">
-    <MazBtn v-for="size of ['none', 'sm', 'md', 'lg', 'xl', 'full']" :rounded-size="size">{{ size }}</MazBtn>
-  </div>
-
-<template #code>
-
 ```html
 <MazBtn rounded-size="none">none</MazBtn>
 <MazBtn rounded-size="sm">sm</MazBtn>
@@ -213,27 +142,10 @@ Choose the size of the rounded with the attribute `rounded-size` and value `none
 <MazBtn rounded-size="full">full</MazBtn>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Fab
 
 The button can be a fab button with the attribute `fab`
 
-<ComponentDemo>
-  <div class="maz:flex maz:gap-5 maz:items-center">
-    <MazBtn fab icon="/sun.svg" size="mini" />
-    <MazBtn fab icon="/sun.svg" size="xs" />
-    <MazBtn fab icon="/sun.svg" size="sm" />
-    <MazBtn fab>
-      fab
-    </MazBtn>
-    <MazBtn fab icon="/sun.svg" size="lg" />
-    <MazBtn fab icon="/sun.svg" size="xl" />
-  </div>
-
-<template #code>
-
 ```html
 <MazBtn fab icon="/sun.svg" size="mini" />
 <MazBtn fab icon="/sun.svg" size="xs" />
@@ -243,43 +155,20 @@ The button can be a fab button with the attribute `fab`
 <MazBtn fab icon="/sun.svg" size="xl" />
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Block
 
 Will take `width: 100%;`
 
-<ComponentDemo>
-  <MazBtn block>block</MazBtn>
-
-<template #code>
-
 ```html
 <MazBtn block>block</MazBtn>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Justify
 
 This property is used to align the content of the button.
 
 By default, the justify is `center`
 
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-2">
-    <MazBtn block justify="center" icon="/users.svg" end-icon="/sun.svg" size="md">center</MazBtn>
-    <MazBtn block justify="start" icon="/users.svg" end-icon="/sun.svg" size="md">start</MazBtn>
-    <MazBtn block justify="end" icon="/users.svg" end-icon="/sun.svg" size="md">end</MazBtn>
-    <MazBtn block justify="space-between" icon="/users.svg" end-icon="/sun.svg" size="md">between</MazBtn>
-    <MazBtn block justify="space-around" icon="/users.svg" end-icon="/sun.svg" size="md">around</MazBtn>
-    <MazBtn block justify="space-evenly" icon="/users.svg" end-icon="/sun.svg" size="md">evenly</MazBtn>
-  </div>
-
-<template #code>
-
 ```html
 <MazBtn block justify="center" icon="/users.svg" end-icon="/sun.svg" size="md">center</MazBtn>
 <MazBtn block justify="start" icon="/users.svg" end-icon="/sun.svg" size="md">start</MazBtn>
@@ -289,77 +178,14 @@ By default, the justify is `center`
 <MazBtn block justify="space-evenly" icon="/users.svg" end-icon="/sun.svg" size="md">evenly</MazBtn>
 ```
 
-  </template>
-
-</ComponentDemo>
-
 ## Disabled
 
-<ComponentDemo>
-  <MazBtn disabled>disabled</MazBtn>
-
-<template #code>
-
 ```html
 <MazBtn disabled>disabled</MazBtn>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Icons
 
-<ComponentDemo>
-  <h4 class="maz:mb-2 maz:font-semibold maz:text-lg">
-    Start Icon and End Icon
-  </h4>
-
-  <div class="maz:flex maz:gap-2 maz:rounded-md maz:flex-wrap maz:items-center">
-    <MazBtn :start-icon="MazCheck" size="mini">
-      start-icon
-    </MazBtn>
-    <MazBtn :start-icon="MazCheck" size="xs">
-      start-icon
-    </MazBtn>
-    <MazBtn :start-icon="MazCheck" size="sm">
-      start-icon
-    </MazBtn>
-    <MazBtn :end-icon="MazCheck" size="md">
-      end-icon
-    </MazBtn>
-    <MazBtn :end-icon="MazCheck" size="lg">
-      end-icon
-    </MazBtn>
-    <MazBtn :end-icon="MazCheck" size="xl">
-      end-icon
-    </MazBtn>
-  </div>
-
-  <h4 class="maz:my-2 maz:font-semibold maz:text-lg">
-    Fab
-  </h4>
-
-  <div class="maz:flex maz:gap-2 maz:rounded-md maz:flex-wrap maz:items-center">
-    <MazBtn fab :icon="MazCommandLine" size="mini" />
-    <MazBtn fab :icon="MazCommandLine" size="xs" />
-    <MazBtn fab :icon="MazCommandLine" size="sm" />
-    <MazBtn fab :icon="MazCommandLine" size="md" />
-    <MazBtn fab :icon="MazCommandLine" size="lg" />
-    <MazBtn fab :icon="MazCommandLine" size="xl" />
-  </div>
-
-  <h4 class="maz:my-2 maz:font-semibold maz:text-lg">
-    Icon component
-  </h4>
-
-  <div class="maz:flex maz:gap-2 maz:rounded-md maz:flex-wrap maz:items-center">
-    <MazBtn :start-icon="MazSpinner" size="md" color="warning">
-      icon component
-    </MazBtn>
-  </div>
-
-<template #code>
-
 ```html
 <MazBtn :start-icon="MazCheck" size="mini">
   start-icon
@@ -385,12 +211,9 @@ By default, the justify is `center`
 </MazBtn>
 ```
 
-  </template>
-</ComponentDemo>
-
 ### Use icon path
 
-::: details View code
+**Details: View code**
 
 When you use the properties `end-icon`, `start-icon` or `icon` with the icon path, the component uses `<MazIcon icon="..." />` component.
 
@@ -402,11 +225,9 @@ Check out how [MazIcon](./maz-icon.md) works, see all available icons and downlo
 <MazBtn icon="/command-line.svg" fab size="lg" />
 ```
 
-:::
-
 ### Use your own SVG icons
 
-::: details View code
+**Details: View code**
 
 ```html
 <MazBtn size="sm">
@@ -452,11 +273,9 @@ Check out how [MazIcon](./maz-icon.md) works, see all available icons and downlo
 </MazBtn>
 ```
 
-:::
-
-### Use [@maz-ui/icons](./../ecosystem/icons/.md)
+### Use [@maz-ui/icons](../ecosystem/icons/index.md)
 
-::: details View code
+**Details: View code**
 
 ```vue
 <script lang="ts" setup>
@@ -478,11 +297,9 @@ import { MazCommandLine } from '@maz-ui/icons/raw/MazCommandLine'
 </template>
 ```
 
-:::
-
 ### Use [vite-svg-loader](https://github.com/jpkleemans/vite-svg-loader)
 
-::: details View code
+**Details: View code**
 
 ```vue
 <script lang="ts" setup>
@@ -504,11 +321,9 @@ import MazCommandLine from '@maz-ui/icons/svg/command-line.svg?component'
 </template>
 ```
 
-:::
-
 ### Use your own components
 
-::: details View code
+**Details: View code**
 
 ```vue
 <script lang="ts" setup>
@@ -522,13 +337,11 @@ import { MazBtn, MazSpinner } from 'maz-ui/components'
 </template>
 ```
 
-:::
-
 ### Pass a full `MazIconProps` object
 
 `startIcon`, `endIcon` and `icon` accept either a bare value (Vue component, URL, raw SVG string) **or** a full `MazIconProps` object. The latter is useful when you want to override the auto-derived size, set a `<title>` for screen readers, flip a directional icon for RTL, or attach extra SVG attributes.
 
-::: details View code
+**Details: View code**
 
 ```vue
 <script lang="ts" setup>
@@ -537,7 +350,7 @@ import { MazStar } from '@maz-ui/icons/raw/MazStar'
 </script>
 
 <template>
-  <!-- The button picks an icon size from its own size — `sm` defaults to a small icon. -->
+  <!-- The button picks an icon size from its own size - `sm` defaults to a small icon. -->
   <MazBtn size="sm" :start-icon="MazStar">favorite</MazBtn>
 
   <!-- Pass an object to override per-icon. -->
@@ -555,15 +368,11 @@ import { MazStar } from '@maz-ui/icons/raw/MazStar'
 </template>
 ```
 
-:::
-
 ## [HTMLLinkElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement)
 
-::: info
-When `href` attribute is provided, the component automatically becomes a `<a href="..." />`
-:::
+**Note:**
 
-<MazBtn class="vp-raw" href="https://www.google.com" target="_blank">Is Button Link</MazBtn>
+When `href` attribute is provided, the component automatically becomes a `<a href="..." />`
 
 ```html
 <MazBtn href="https://www.google.com" target="_blank"> Is Button Link </MazBtn>
@@ -571,38 +380,44 @@ When `href` attribute is provided, the component automatically becomes a `<a hre
 
 ## [RouterLink](https://router.vuejs.org/api/#router-link)
 
-::: info
-When `to` attribute is provided, the component automatically becomes a `<RouterLink to="..." />`
-:::
+**Note:**
 
-<MazBtn class="vp-raw" :to="{ path: '/made-with-maz-ui.html' }">Is Router Link</MazBtn>
+When `to` attribute is provided, the component automatically becomes a `<RouterLink to="..." />`
 
 ```html
 <MazBtn :to="{ path: '/made-with-maz-ui.html' }"> Is RouterLink </MazBtn>
 ```
 
-<script setup lang="ts">
-  import { computed } from 'vue'
-  import { MazCheck } from '@maz-ui/icons/raw/MazCheck'
-  import { MazHome } from '@maz-ui/icons/raw/MazHome'
-  import { MazCommandLine } from '@maz-ui/icons/raw/MazCommandLine'
-  import MazSpinner from 'maz-ui/components/MazSpinner'
-
-  const colors = [
-    'primary',
-    'secondary',
-    'accent',
-    'info',
-    'success',
-    'warning',
-    'destructive',
-    'contrast',
-    'surface',
-    'transparent',
-  ]
-
-  const sizes = ['mini', 'xs', 'sm', 'md', 'lg', 'xl']
-
-</script>
-
-<!--@include: ./../../.vitepress/generated-docs/maz-btn.doc.md-->
+## MazBtn API
+
+`import MazBtn from 'maz-ui/components/MazBtn'`
+
+### Props
+
+- `text` (`string`): The text of the button, if not provided, the slot will be used.
+- `size` (`"xs" | "sm" | "md" | "lg" | "xl" | "mini"`): Predifined sizes of the button.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "surface"`, default: `"primary"`): The color of the button.
+- `text-color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "muted"`): The text color of the button.
+- `type` (`"submit" | "reset" | "button"`, default: `"button"`): The type of the button.
+- `rounded-size` (`MazRoundedSize`, default: `'md'`): Size of the rounded. Values: `'none'`, `'sm'`, `'md'`, `'lg'`, `'xl'`, `'full'` (non exhaustive).
+- `outlined` (`boolean`, default: `false`): If true, the button have the "border" style.
+- `pastel` (`boolean`, default: `false`): If true, the button will have a pastel color.
+- `block` (`boolean`, default: `false`): If true, the button will have a full width.
+- `loading` (`boolean`, default: `false`): Enable the button loader.
+- `disabled` (`boolean`, default: `false`): Disable the button.
+- `fab` (`boolean`, default: `false`): If true, the button will have a fab style.
+- `icon` (`any`): The icon to display in the fab variant. Accepts a bare value (Vue component, raw SVG string, URL or `data:` URI) for the common case, or a full `MazIconProps` object for fine-grained control (size, title, svgAttributes, fallback, flipIconForRtl, …).
+- `start-icon` (`any`): The icon to display on the inline-start edge (left in LTR, right in RTL). Accepts a bare value or a full `MazIconProps` object.
+- `end-icon` (`any`): The icon to display on the inline-end edge (right in LTR, left in RTL). Accepts a bare value or a full `MazIconProps` object.
+- `padding` (`boolean`, default: `true`): If true, the button will have no padding.
+- `justify` (`"center" | "end" | "start" | "space-between" | "space-around" | "space-evenly"`, default: `"center"`): Choose how the elements are aligned in the button.
+- `active` (`boolean`, default: `false`): If true, the button will have an active state.
+- `overflow-hidden` (`boolean`, default: `true`): If true, the button will have an overflow-hidden style.
+
+### Slots
+
+- `#start-icon`: The icon to display on the inline-start edge (left in LTR, right in RTL)
+- `#icon`: The icon to display on the fab button
+- `#default`: The content of the button
+- `#end-icon`: The icon to display on the inline-end edge (right in LTR, left in RTL)
+- `#loader`: The loader to display in the button

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

@@ -0,0 +1,84 @@
+---
+title: "MazCardSpotlight"
+description: "MazCardSpotlight is a standalone component"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-card-spotlight"
+---
+
+# MazCardSpotlight
+
+> MazCardSpotlight is a standalone component
+
+- Package: `maz-ui`
+- Import: `import MazCardSpotlight from 'maz-ui/components/MazCardSpotlight'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-card-spotlight
+
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+**This component is better in dark mode**
+
+**Tip:**
+
+If you want to increase the border width, you must just add padding @default: `var(--maz-border-width)` (1px)
+
+## Basic usage
+
+```vue
+<script lang="ts" setup>
+import { useTheme } from '@maz-ui/themes/composables/useTheme'
+import MazCardSpotlight from 'maz-ui/components/MazCardSpotlight'
+
+const { setColorMode } = useTheme()
+</script>
+
+<template>
+  <MazCardSpotlight style="width: 500px; max-width: 100%;">
+    <h3 style="margin-top: 0; Fmargin-bottom: 30px;">
+      Hover this component <br>
+      To see the magic appear
+    </h3>
+    <MazBtn color="contrast" @click="setColorMode('light')">
+      Switch to light theme
+    </MazBtn>
+  </MazCardSpotlight>
+</template>
+```
+
+## Effect with multiple cards and with secondary color
+
+```html
+<div class="grid gap-4 grid-cols-1 mob-l:grid-cols-2 tab-l:grid-cols-3">
+  <MazCardSpotlight v-for="competition of competitions" :key="competition.label" color="secondary">
+    <div class="flex p-4">
+      <MazAvatar
+        v-if="competition.areaEnsignUrl"
+        :src="competition.areaEnsignUrl"
+        style="margin-right: 16px"
+        size="0.8rem"
+      />
+      <div class="truncate flex column">
+        <span class="truncate"> {{ competition.label }} </span>
+        <span class="truncate"> {{ competition.area }} </span>
+      </div>
+    </div>
+  </MazCardSpotlight>
+</div>
+```
+
+## MazCardSpotlight API
+
+`import MazCardSpotlight from 'maz-ui/components/MazCardSpotlight'`
+
+### Props
+
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color of the component.
+- `elevation` (`boolean`, default: `false`): Add elevation to the component.
+- `padding` (`boolean`, default: `true`): Add padding to the content.
+- `content-class` (`ClassValue`): The classes to apply to the content div.
+- `content-style` (`StyleValue`): Style apply to the content div.
+- `inner-opacity` (`number`, default: `0.95`): The opacity of the inner div - should be between 0 and 1 When 0 the spotlight is completely visible When 1 the spotlight is only visible on borders.
+
+### Slots
+
+- `#default`