### MazDialogConfirm with Script Setup and UseMazDialogConfirm Hook

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-dialog-confirm.md

Provides a comprehensive example using `<script setup>` and the `useMazDialogConfirm` hook to manage dialogs and their responses. It demonstrates dynamic data assignment and handling asynchronous user input.

```vue
<script setup>
import MazDialogConfirm, { useMazDialogConfirm } from 'maz-ui/components/MazDialogConfirm'
import MazDialog from 'maz-ui/components/MazDialog'

import { ref } from 'vue'

const confirmDialog = ref(false)

const { showDialogAndWaitChoice, data } = useMazDialogConfirm()

data.value = {
  title: 'Delete user',
  message: 'Are you sure you want to delete this user?',
}

const buttons: DialogCustomButton[] = [
  {
    text: 'Cancel',
    type: 'reject',
    color: 'destructive',
    outlined: true,
    response: 'cancel',
    size: 'sm',
  },
  {
    text: 'Delete!',
    type: 'resolve',
    color: 'success',
    response: 'delete',
    size: 'lg',
  },
]

async function askToUser() {
  try {
    const acceptResponse = await showDialogAndWaitChoice('one')
    toast.success(acceptResponse, {
      position: 'top-right'
    })
    const rejectResponse = await showDialogAndWaitChoice('two')
    toast.success(rejectResponse, {
      position: 'top-right'
    })
    confirmDialog.value = true
  }
  catch (rejectResponse) {
    toast.error(rejectResponse, {
      position: 'top-right'
    })
  }
}
</script>

<template>
  <MazBtn @click="askToUser">
    Ask user
  </MazBtn>

  <MazDialogConfirm
    :data="dataPromiseOne"
    identifier="one"
  />

  <MazDialogConfirm identifier="two" :buttons="buttons">
    <template #title>
      Do you really want to delete this user?
    </template>
    <template #default>
      Are you really sure you want to delete this user?
    </template>
  </MazDialogConfirm>

  <MazDialog v-model="confirmDialog">
    <template #title>
      User deleted
    </template>
    <template #default>
      User has been deleted!
    </template>
    <template #footer="{ close }">
      <MazBtn @click="close">
        Ok
      </MazBtn>
    </template>
  </MazDialog>
</template>
```

--------------------------------

### Date Selection Example

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-date-picker.md

Basic setup for date selection.

```vue
const dateSelection = ref()
const inlineDate = ref()
const doubleDate = ref()
```

--------------------------------

### Maz Date Picker Example Shortcut

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-date-picker.md

Provides an example of a custom shortcut for the Maz Date Picker, specifically for 'Next month'. It demonstrates how to calculate and format the start and end dates for the range.

```typescript
import type { MazDatePickerShortcut } from 'maz-ui/components'

const shortcuts: MazDatePickerShortcut[] = [{
  label: 'Next month',
  identifier: 'nextMonth',
  value: {
    start: dayjs().add(1, 'month').set('date', 1).format('YYYY-MM-DD'),
    end: dayjs()
      .add(1, 'month')
      .set('date', dayjs().add(1, 'month').daysInMonth())
      .format('YYYY-MM-DD'),
  },
}]
```

--------------------------------

### Full Maz UI Provider Example

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/maz-ui-provider.md

A comprehensive example showcasing the MazUiProvider with custom theme presets, color modes, translation configurations, and reactive locale changes. This setup is ideal for specific routes or micro-frontends.

```vue
<script setup lang="ts">
import { MazUiProvider } from 'maz-ui/components'
import { mazUi } from '@maz-ui/themes/presets/mazUi'
import { fr } from '@maz-ui/translations'
import { ref } from 'vue'

const locale = ref('fr')
</script>

<template>
  <MazUiProvider
    :theme="{
      preset: mazUi,
      strategy: 'hybrid',
      colorMode: 'auto',
    }"
    :translations="{
      locale,
      fallbackLocale: 'en',
      messages: { fr },
    }"
  >
    <div class="maz-bg-background maz-text-foreground maz-p-4">
      <h1>My Dashboard</h1>
      <MazBtn color="primary">Action</MazBtn>
      <MazInput placeholder="Search..." />
    </div>
  </MazUiProvider>
</template>
```

--------------------------------

### Install @maz-ui/utils

Source: https://github.com/louismazel/maz-ui/blob/master/packages/utils/README.md

Install the utility package using npm.

```bash
npm install @maz-ui/utils
```

--------------------------------

### Quick Start Demo with useFormValidator

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/composables/use-form-validator.md

A basic example of setting up useFormValidator with a schema and handling form submission. It includes basic validation rules for email and password.

```typescript
import { ref, useTemplateRef } from 'vue'
import { useFormValidator } from 'maz-ui/src/composables/useFormValidator'
import { useFormField } from 'maz-ui/src/composables/useFormField'
import { useToast } from 'maz-ui/src/composables/useToast'
import { sleep } from '@maz-ui/utils'
import {
  string,
  nonEmpty,
  pipe,
  number,
  minValue,
  maxValue,
  boolean,
  literal,
  minLength,
  email,
  pipeAsync,
  checkAsync,
} from 'valibot'

const toast = useToast()

// Quick Start Demo
const quickStartSchema = {
  email: pipe(string(), nonEmpty('Email is required'), email('Invalid email')),
  password: pipe(string(), nonEmpty('Password is required'), minLength(8, 'Min 8 characters')),
}

const { 
  model: quickStartModel,
  errorMessages: quickStartErrors,
  fieldsStates: quickStartStates,
  isSubmitting: quickStartSubmitting,
  handleSubmit: handleQuickStart,
} = useFormValidator({ schema: quickStartSchema })

const onSubmitQuickStart = handleQuickStart(async () => {
  await sleep(1000)
  toast.success('Login successful!', { position: 'top' })
})
```

--------------------------------

### Build Script with Detailed Logging

Source: https://github.com/louismazel/maz-ui/blob/master/packages/node/README.md

A comprehensive example of a build script using `createLogger` and `execPromise` to provide detailed, step-by-step logging of the build process, including installation, testing, and compilation.

```typescript
import { createLogger, execPromise } from '@maz-ui/node'

async function buildProject() {
  const logger = createLogger({
    level: 3, // default level
    tag: 'build'
  })

  logger.box('🚀 Starting build process')
  logger.divider()

  try {
    // Install dependencies
    logger.info('Installing dependencies...')
    await execPromise('npm install', {
      packageName: 'setup',
      noStdout: true,
      logger
    })
    logger.ready('Dependencies installed')

    // Run tests
    logger.info('Running tests...')
    await execPromise('npm test', {
      packageName: 'test',
      noStdout: true,
      logger
    })
    logger.ready('Tests passed')

    // Build project
    logger.info('Building project...')
    await execPromise('npm run build', {
      packageName: 'build',
      logger
    })
    logger.ready('Build completed')

    logger.eot()
    logger.success('✅ Build completed successfully!')
  }
  catch (error) {
    logger.fail('❌ Build failed')
    logger.error(error)
    process.exit(1)
  }
}

buildProject()
```

--------------------------------

### Full Plugin Setup with Custom Translations

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/translations.md

This example demonstrates a comprehensive setup for the Maz-UI plugin, including setting the initial locale to French, defining English as the fallback, and preloading the fallback. It also shows how to add custom translations for French and Dutch, including specific overrides for inputPhoneNumber components.

```typescript
import { createApp } from 'vue'
import { MazUi } from 'maz-ui/plugins/maz-ui'
import App from './App.vue'

const app = createApp(App)

app.use(MazUi, {
  translations: {
    locale: 'fr', // Start with French
    fallbackLocale: 'en', // Fallback language
    preloadFallback: true, // Preload fallback language
    messages: {
      // French and English translations are already included!
      // You can add your custom translations
      fr: {
        // Override translations
        inputPhoneNumber: {
          countrySelect: {
            placeholder: 'Code pays',
            error: 'Choisir le pays',
            searchPlaceholder: 'Rechercher le pays'
          },
          phoneInput: {
            example: 'Exemple: {example}'
          }
        }
      },

      // Add an other language
      nl: {
        inputPhoneNumber: {
          countrySelect: {
            placeholder: 'Country code',
            error: 'Choose country',
            searchPlaceholder: 'Search country'
          }
        }
      }
    }
  }
})
```

--------------------------------

### Build Script Example

Source: https://github.com/louismazel/maz-ui/blob/master/packages/node/README.md

An example demonstrating how to use the logger and execPromise to manage a project build process.

```APIDOC
## Build Script Example

### Description
This example illustrates a typical build script using `@maz-ui/node`'s logger and `execPromise` to manage dependencies, run tests, and build the project, providing informative output at each stage.

### Functions
- `buildProject()`: An async function that orchestrates the build process.

### Example
```typescript
import { createLogger, execPromise } from '@maz-ui/node'

async function buildProject() {
  const logger = createLogger({
    level: 3, // default level
    tag: 'build'
  })

  logger.box('🚀 Starting build process')
  logger.divider()

  try {
    // Install dependencies
    logger.info('Installing dependencies...')
    await execPromise('npm install', {
      packageName: 'setup',
      noStdout: true,
      logger
    })
    logger.ready('Dependencies installed')

    // Run tests
    logger.info('Running tests...')
    await execPromise('npm test', {
      packageName: 'test',
      noStdout: true,
      logger
    })
    logger.ready('Tests passed')

    // Build project
    logger.info('Building project...')
    await execPromise('npm run build', {
      packageName: 'build',
      logger
    })
    logger.ready('Build completed')

    logger.eot()
    logger.success('✅ Build completed successfully!')
  }
  catch (error) {
    logger.fail('❌ Build failed')
    logger.error(error)
    process.exit(1)
  }
}

buildProject()
```
```

--------------------------------

### Install Development Dependencies

Source: https://github.com/louismazel/maz-ui/blob/master/CONTRIBUTING.md

Run this command in the project root to install all necessary development dependencies.

```shell
pnpm install
```

--------------------------------

### MazBottomSheet Vue.js Setup

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-bottom-sheet.md

This script setup provides the reactive state and functions required for the MazBottomSheet example. It includes form data, options for selects, and event handlers.

```javascript
import { ref, reactive } from 'vue'

const isProductOpen = ref(false)
const isUserOpen = ref(false)
const quantity = ref(1)

const selectedOptions = reactive({
  size: '',
  color: ''
})

const userForm = reactive({
  name: 'John Doe',
  email: 'john.doe@example.com',
  country: 'US',
  notifications: true,
  darkMode: false
})

const sizes = ['7', '8', '9', '10', '11', '12']
const colors = [
  { name: 'Black', value: '#000000' },
  { name: 'White', value: '#FFFFFF' },
  { name: 'Red', value: '#EF4444' },
  { name: 'Blue', value: '#3B82F6' },
  { name: 'Green', value: '#10B981' },
  { name: 'Purple', value: '#8B5CF6' }
]

const countries = [
  { label: 'United States', value: 'US' },
  { label: 'Canada', value: 'CA' },
  { label: 'United Kingdom', value: 'UK' },
  { label: 'France', value: 'FR' },
  { label: 'Germany', value: 'DE' }
]

function openProductOptions() {
  isProductOpen.value = true
}

function openUserSettings() {
  isUserOpen.value = true
}

function addToCart() {
  if (!selectedOptions.size || !selectedOptions.color) {
    alert('Please select size and color first!')
    return
  }
  alert(`Added ${quantity.value} ${selectedOptions.color} shoes (size ${selectedOptions.size}) to cart!`)
  isProductOpen.value = false
}

function saveSettings() {
  alert('Settings saved successfully!')
  isUserOpen.value = false
}
```

--------------------------------

### Start Tracking

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/composables/use-user-visibility.md

Starts the user visibility tracking. This method should be called after initializing the composable.

```APIDOC
## Start

### Description
Will start the user visibility tracking.

### Usage
```ts
userVisibility.start()
```
```

--------------------------------

### MazPopover Menu Example

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-popover.md

Demonstrates how to use MazPopover to create dropdown menus. Includes examples for a settings menu with dynamic items and a simple action menu.

```vue
<script setup>
const menuItems = [
  { label: 'Profile', icon: 'user', action: 'profile' },
  { label: 'Settings', icon: 'cog-6-tooth', action: 'settings' },
  { label: 'Sign out', icon: 'arrow-right-on-rectangle', action: 'signout' }
]

function handleMenuClick(action) {
  console.log('Menu action:', action)
}
</script>

<template>
  <MazPopover position="bottom-start">
    <template #trigger>
      <MazBtn>
        <MazIcon name="cog-6-tooth" class="maz-me-2" />
        Settings
        <MazIcon name="chevron-down" class="maz-ms-2" />
      </MazBtn>
    </template>
    <div class="maz-py-1 maz-min-w-48">
      <button
        v-for="item in menuItems"
        :key="item.label"
        class="maz-w-full maz-px-4 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-flex maz-items-center maz-gap-2"
        @click="handleMenuClick(item.action)"
      >
        <MazIcon :name="item.icon" class="maz-w-4 maz-h-4" />
        {{ item.label }}
      </button>
    </div>
  </MazPopover>

  <MazPopover position="bottom-end">
    <template #trigger>
      <MazBtn color="transparent" size="sm">
        <MazIcon name="ellipsis-vertical" />
      </MazBtn>
    </template>
    <div class="maz-py-1 maz-min-w-32">
      <button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
        Edit
      </button>
      <button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400">
        Share
      </button>
      <hr class="maz-my-1 maz-border-divider">
      <button class="maz-w-full maz-px-3 maz-py-2 maz-text-start maz-text-sm hover:maz-bg-surface-600 dark:hover:maz-bg-surface-400 maz-text-destructive">
        Delete
      </button>
    </div>
  </MazPopover>
</template>
```

--------------------------------

### Install @maz-ui/node

Source: https://github.com/louismazel/maz-ui/blob/master/packages/node/README.md

Install the package using npm.

```bash
npm install @maz-ui/node
```

--------------------------------

### Start Nuxt Development Server

Source: https://github.com/louismazel/maz-ui/blob/master/apps/nuxt-app/README.md

Run this command to start the Nuxt development server. It will be accessible at http://localhost:3000.

```bash
pnpm dev
```

--------------------------------

### Install Maz-UI Packages

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/vue.md

Install the maz-ui package and its themes using your preferred package manager.

```bash
pnpm add maz-ui @maz-ui/themes
```

```bash
npm install maz-ui @maz-ui/themes
```

```bash
yarn add maz-ui @maz-ui/themes
```

--------------------------------

### Install CLI Package

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/cli.md

Install the @maz-ui/cli package as a development dependency.

```bash
npm install @maz-ui/cli
# or pnpm add @maz-ui/cli
```

--------------------------------

### Install ESLint Configuration

Source: https://github.com/louismazel/maz-ui/blob/master/packages/eslint-config/README.md

Install the ESLint configuration package along with ESLint itself as development dependencies.

```bash
pnpm add -D @maz-ui/eslint-config eslint
```

--------------------------------

### Alternative Import Path for useWait

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/composables/use-wait.md

This example shows an alternative way to import `useWait` and `sleep` from the `maz-ui/src` directory. It demonstrates the same loading state management as the previous example.

```vue
<script lang="ts" setup>
  import { onMounted } from 'vue'
  import { sleep } from 'maz-ui/src/index'
  import { useWait } from 'maz-ui/src/composables/useWait'

  const wait = useWait()

  onMounted(async () => {
    wait.start('MAIN_LOADER')
    await sleep(2000)
    wait.stop('MAIN_LOADER')
  })
</script>
```

--------------------------------

### Install @maz-ui/nuxt Module

Source: https://github.com/louismazel/maz-ui/blob/master/packages/nuxt/README.md

Install the Maz-UI Nuxt module using your preferred package manager.

```bash
npm install @maz-ui/nuxt
# or
pnpm add @maz-ui/nuxt
# or
yarn add @maz-ui/nuxt
```

--------------------------------

### Install Maz UI CLI

Source: https://github.com/louismazel/maz-ui/blob/master/packages/lib/README.md

Install the Maz UI CLI globally to generate custom themes and CSS variables.

```bash
# Install the CLI
npm install -g @maz-ui/cli
```

--------------------------------

### Install Dependencies for Auto-Import

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/resolvers.md

Install the necessary packages for unplugin-vue-components and unplugin-auto-import.

```bash
npm install unplugin-vue-components unplugin-auto-import
```

--------------------------------

### Install @maz-ui/icons with pnpm

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/icons.md

Install the @maz-ui/icons package using pnpm. This is another package manager option.

```bash
pnpm add @maz-ui/icons
```

--------------------------------

### Install Maz UI

Source: https://github.com/louismazel/maz-ui/blob/master/README.md

Install the Maz UI library using npm. This is the first step before integrating it into your Vue or Nuxt project.

```bash
npm install maz-ui
```

--------------------------------

### Install Maz-UI Icons

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/getting-started.md

Install the optimized icon library for Maz-UI. Includes over 860 SVG icons usable as Vue components with tree-shakable imports.

```bash
npm install @maz-ui/icons
```

--------------------------------

### Install @maz-ui/icons with yarn

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/icons.md

Install the @maz-ui/icons package using yarn. This is an alternative to npm for package management.

```bash
yarn add @maz-ui/icons
```

--------------------------------

### Range Selection Examples

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-date-picker.md

Examples for selecting date ranges, including a basic range and a range with shortcuts.

```vue
const dateRange = ref({ start: undefined, end: undefined })
const rangeWithShortcuts = ref({ start: undefined, end: undefined })
```

--------------------------------

### Install @maz-ui/icons with Auto-import Support

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/icons.md

Install @maz-ui/icons along with unplugin-vue-components for auto-import functionality, recommended for a better developer experience.

```bash
npm install @maz-ui/icons unplugin-vue-components
```

--------------------------------

### Install Maz-UI Themes

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/getting-started.md

Install the advanced theming system for Maz-UI. Supports HSL variables, dark mode, and multiple rendering strategies.

```bash
npm install @maz-ui/themes
```

--------------------------------

### Install @maz-ui/icons with vite-svg-loader Integration

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/icons.md

Install @maz-ui/icons and vite-svg-loader to use SVG files directly as Vue components.

```bash
npm install @maz-ui/icons vite-svg-loader
```

--------------------------------

### Install Maz-UI Translations

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/getting-started.md

Install the internationalization library for Maz-UI components. Supports locale management and tree-shakable imports.

```bash
npm install @maz-ui/translations
```

--------------------------------

### Vue Component with useIdleTimeout

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/composables/use-idle-timeout.md

This example demonstrates how to use the `useIdleTimeout` composable within a Vue component. It includes setup for the composable, event handling, and lifecycle hooks for starting and destroying the timeout. It also integrates with `useDialog` to show a confirmation before potentially logging out the user.

```vue
<script lang="ts" setup>
import { MazBtn, MazCard } from 'maz-ui/components'

import { useDialog, useIdleTimeout } from 'maz-ui/composables'

import { onBeforeUnmount, onMounted, ref } from 'vue'

const dialog = useDialog()

const event = ref({})

const timeout = 5000

const idleTimeout = useIdleTimeout({
  callback,
  options: {
    timeout,
    immediate: false,
    once: false,
  },
})

async function callback({ isIdle, eventType, instance }) {
  console.log({ isIdle, eventType })
  event.value = { isIdle, eventType }

  if (isIdle) {
    try {
      instance.destroy()
      await dialog.open({
        title: 'Are you still here?',
        message: `You have been inactive for ${timeout / 1000} secondes, do you want to continue?`,
        cancelText: 'No',
        confirmText: 'Yes',
      }).promise
      instance.start()
    }
    catch (e) {
      // do something like logout the user
    }
  }
}

onMounted(() => {
  // should be executed on client side
  idleTimeout.start()
})

onBeforeUnmount(() => {
  // Destroy the instance when the component is destroyed to avoid memory leaks
  idleTimeout.destroy()
})
</script>

<template>
  <MazBtn color="info" @click="idle.start()">
    Start
  </MazBtn>
  <MazBtn color="warning" @click="idle.pause()">
    Pause
  </MazBtn>
  <MazBtn @click="idle.resume()">
    Resume
  </MazBtn>
  <MazBtn color="secondary" @click="idle.reset()">
    Reset
  </MazBtn>
  <MazBtn color="destructive" @click="idle.destroy()">
    Destroy
  </MazBtn>

  <MazCard block>
    <div style="display: flex;">
      <div style="flex: 1;">
        isIdle: {{ event.isIdle }}
      </div>
      <div v-if="event.eventType" style="flex: 1; padding-left: 10px;">
        eventType: {{ event.eventType }}
      </div>
    </div>
  </MazCard>
</template>
```

--------------------------------

### Maz Select Country Component Examples

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-select-country.md

Vue.js script setup for various examples of the Maz Select Country component, including size, color, and advanced customization options.

```javascript
const sizeExample1 = ref()
const sizeExample2 = ref()
const sizeExample3 = ref()
const colorExample1 = ref()
const colorExample2 = ref()
const colorExample3 = ref()

const preferredExample = ref()
const europeExample = ref()
const excludeExample = ref()
const shortExample = ref()
const languageNarrowExample = ref()
const noFlagsExample = ref()
const frenchExample = ref()
const spanishExample = ref()
const successExample = ref()
const warningExample = ref()
const errorExample = ref()
const disabledExample = ref()
const codeDisplayExample = ref()
const advancedExample = ref()
```

--------------------------------

### Start and Stop Loading State

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/composables/use-wait.md

Use this snippet to manage a loading state with a specific key. It starts the loader, simulates a delay, and then stops the loader. Ensure the wait plugin is installed.

```vue
<script lang="ts" setup>
import { sleep } from '@maz-ui/utils'
import { useWait } from 'maz-ui/composables'
import { onMounted } from 'vue'

const wait = useWait()

onMounted(async () => {
  wait.start('MAIN_LOADER')
  await sleep(2000)
  wait.stop('MAIN_LOADER')
})
</script>

<template>
  <MazFullscreenLoader v-if="wait.isLoading('MAIN_LOADER')">
    Loading
  </MazFullscreenLoader>
  <p v-else>
    Loaded
  </p>
</template>
```

--------------------------------

### CI/CD Integration Example

Source: https://github.com/louismazel/maz-ui/blob/master/packages/node/README.md

Shows how to use the logger and execPromise within a CI/CD pipeline to execute a series of commands.

```APIDOC
## CI/CD Integration

### Description
This example demonstrates setting up a CI/CD pipeline using `@maz-ui/node`'s logger and `execPromise`. It defines a series of steps (lint, test, build, package) and executes them sequentially, logging progress and handling errors.

### Functions
- `ciPipeline()`: An async function that runs the CI pipeline steps.

### Example
```typescript
import { createLogger, execPromise } from '@maz-ui/node'

async function ciPipeline() {
  const logger = createLogger({
    level: 2 // normal level for CI
  })

  const steps = [
    { name: 'Lint', command: 'npm run lint' },
    { name: 'Test', command: 'npm test' },
    { name: 'Build', command: 'npm run build' },
    { name: 'Package', command: 'npm pack' }
  ]

  logger.box('🔄 CI Pipeline Started')
  logger.divider()

  for (const step of steps) {
    logger.info(`Running ${step.name}...`)

    try {
      await execPromise(step.command, {
        packageName: step.name.toLowerCase(),
        noStdout: true,
        logger
      })
      logger.ready(`${step.name} completed`)
    }
    catch (error) {
      logger.fail(`${step.name} failed`)
      logger.error(error)
      process.exit(1)
    }
  }

  logger.eot()
  logger.success('🎉 All pipeline steps completed!')
}

ciPipeline()
```
```

--------------------------------

### Basic useBreakpoints Setup

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/composables/use-breakpoints.md

Define your breakpoints and initialize the composable. Use the destructured properties to check screen size conditions.

```typescript
const breakpoints = {
  'sm': '640px',
  'md': '768px',
  'lg': '1024px',
  'xl': '1280px',
  '2xl': '1536px',
}

const {
  isLargeScreen,
  isMediumScreen,
  isSmallScreen,
} = useBreakpoints({
  breakpoints,
  initialWidth: 0,
  mediumBreakPoint: 'md',
  largeBreakPoint: 'lg',
})
```

--------------------------------

### Run Documentation Development Server

Source: https://github.com/louismazel/maz-ui/blob/master/CONTRIBUTING.md

Start the Vitepress development server for the documentation. This server is available at http://localhost:5173/.

```shell
pnpm -F docs dev
```

--------------------------------

### Vue Usage Example for useDisplayNames

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/composables/use-display-names.md

Demonstrates how to use the useDisplayNames composable within a Vue component to get reactive display names for languages.

```vue
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useDisplayNames } from 'maz-ui/src/composables/useDisplayNames.js'

const selectedLocale = ref('en-US')
const code = ref('fr-FR')

const { getDisplayName, getAllDisplayNames } = useDisplayNames(selectedLocale)

const languageDisplayName = getDisplayName(code, { type: 'language' })

const localeOptions = getAllDisplayNames({ type: 'language' })
</script>
```

--------------------------------

### Nuxt Plugin for AOS Initialization

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/plugins/aos.md

Set up the AOS plugin in your Nuxt.js client-side configuration. This example shows how to pass router and animation options during installation.

```typescript
import { AosOptions, installAos } from 'maz-ui/plugins'

export default ({ vueApp, $router: router }) => {
  const options: AosOptions = {
    router,
    animation: {
      duration: 1000,
      delay: 0,
      once: false,
    },
  }

  vueApp.use(installAos, options)
}
```

--------------------------------

### Internationalization Examples

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-date-picker.md

Shows how to set up the date picker for different languages and locales.

```vue
const frenchDate = ref()
const germanDate = ref()
const japaneseDate = ref()
const arabicDate = ref()
```

--------------------------------

### Complete Translation Setup

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/translations.md

Configure Maz-UI with multiple languages by providing a nested object of translation messages. This example sets up English, French, and Spanish.

```typescript
import {
  createApp
} from 'vue'
import {
  MazUi
} from 'maz-ui/plugins/maz-ui'
import App from './App.vue'

const app = createApp(App)

app.use(MazUi, {
  translations: {
    locale: 'en', // Start with English
    messages: {
      // English (default - you don't need to provide this unless you want to override the default translations)
      en: {
        inputPhoneNumber: {
          countrySelect: {
            placeholder: 'Country code',
            error: 'Choose country',
            searchPlaceholder: 'Search the country'
          },
          phoneInput: {
            placeholder: 'Phone number',
            example: 'Example: {example}'
          }
        }
      },

      // French
      fr: {
        inputPhoneNumber: {
          countrySelect: {
            placeholder: 'Code pays',
            error: 'Choisir un pays',
            searchPlaceholder: 'Rechercher le pays'
          },
          phoneInput: {
            placeholder: 'Numéro de téléphone',
            example: 'Exemple: {example}'
          }
        },
        dropzone: {
          dragAndDrop: 'Déposez vos fichiers',
          selectFile: 'sélectionner un fichier',
          divider: 'ou',
          fileMaxCount: 'Maximum {count} fichiers',
          fileMaxSize: 'Maximum {size} MB',
          fileTypes: 'Types de fichiers autorisés: {types}'
        },
        pagination: {
          navAriaLabel: 'navigation de page',
          screenReader: {
            firstPage: 'Première page, page {page}',
            previousPage: 'Page précédente, page {page}',
            page: 'Page {page}',
            nextPage: 'Page suivante, page {page}',
            lastPage: 'Dernière page, page {page}'
          }
        }
      },

      // Spanish
      es: {
        inputPhoneNumber: {
          countrySelect: {
            placeholder: 'Código de país',
            error: 'Elegir país',
            searchPlaceholder: 'Buscar el país'
          },
          phoneInput: {
            placeholder: 'Número de teléfono',
            example: 'Ejemplo: {example}'
          }
        },
        dropzone: {
          dragAndDrop: 'Suelta tus archivos',
          selectFile: 'seleccionar archivo',
          divider: 'o',
          fileMaxCount: 'Máximo {count} archivos',
          fileMaxSize: 'Máximo {size} MB',
          fileTypes: 'Tipos de archivo permitidos: {types}'
        },
        pagination: {
          navAriaLabel: 'navegación de página',
          screenReader: {
            firstPage: 'Primera página, página {page}',
            previousPage: 'Página anterior, página {page}',
            page: 'Página {page}',
            nextPage: 'Página siguiente, página {page}',
            lastPage: 'Última página, página {page}'
          }
        }
      }
    }
  }
})

app.mount('#app')

```

--------------------------------

### Complete Dashboard Setup with Vite

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/resolvers.md

Configure Vite with Maz UI resolvers for automatic component and module imports. Ensure `unplugin-auto-import` and `unplugin-vue-components` are installed.

```typescript
import vue from '@vitejs/plugin-vue'
import { MazComponentsResolver, MazDirectivesResolver, MazModulesResolver } from 'maz-ui/resolvers'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
// vite.config.ts - Production-ready configuration
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [MazComponentsResolver()],
      dts: 'src/types/components.d.ts',
      directoryAsNamespace: true,
    }),
    AutoImport({
      resolvers: [MazModulesResolver()],
      dts: 'src/types/auto-imports.d.ts',
      imports: ['vue', 'vue-router'],
      eslintrc: {
        enabled: true,
      },
    }),
  ],
})
```

--------------------------------

### Basic Usage with Items

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-btn-group.md

Use the `items` prop to quickly create a button group from an array of button configurations. This example shows basic setup with imported types.

```vue
<template>
  <MazBtnGroup :items="items" />
</template>

<script lang="ts" setup>
import MazBtnGroup from 'maz-ui/components/MazBtnGroup'
import type { MazButtonGroupOption } from 'maz-ui/components/MazBtnGroup'

const items: MazButtonGroupOption[] = [
  { text: 'Day' },
  { text: 'Week', active: true },
  { text: 'Month' },
]
</script>
```

--------------------------------

### Use useTranslations Composable for Translation Management

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/migration-v4.md

The 'useTranslations' composable provides functions to translate strings ('t'), get the current locale, and set a new locale. It must be used within a component where Maz-UI plugin is installed.

```vue
<script setup>
import { useTranslations } from 'maz-ui/composables'

const { t, locale, setLocale } = useTranslations()

// Change language
setLocale('fr')
</script>

<template>
  <p>{{ t('button.cancel') }}</p>
</template>
```

--------------------------------

### Use useTheme Composable for Theme Management

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/migration-v4.md

The 'useTheme' composable provides functions to get the current dark mode state, toggle it, and set a specific theme. It must be used within a component where Maz-UI plugin is installed.

```vue
<script setup>
import { useTheme } from 'maz-ui/composables'

const { isDark, toggleDarkMode, setTheme } = useTheme()

// Change theme
setTheme('ocean')

// Toggle dark mode
toggleDarkMode()
</script>

<template>
  <button @click="toggleDarkMode">
    {{ isDark ? '☀️' : '🌙' }}
  </button>
</template>
```

--------------------------------

### MazDropzone Basic Usage

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-dropzone.md

Demonstrates the basic setup of MazDropzone with file handling and upload event listeners. Use this for standard file upload scenarios.

```vue
<script setup lang="ts">
import { useToast } from 'maz-ui/composables'
import { ref } from 'vue'

const toast = useToast()

const files = ref<File[]>([])
const dropzone = ref<InstanceType<typeof MazDropzone>>()

function onUploadSuccess({ file, response }) {
  console.log('Upload success:', file, response)
  toast.success(`File ${file.name} uploaded successfully`)
}

function onUploadError({ file, code, error }) {
  console.error('Upload failed:', file, code, error)
  toast.error(`File ${file.name} upload failed: ${code} - ${error}`)
}

function onError({ files, event, code }) {
  console.error('Error:', files, event, code)
  toast.error(`${files?.length} files upload failed: ${code} - ${files?.map(file => file.name).join(', ')}`)
}
</script>

<template>
  <MazDropzone
    v-model="files"
    :data-types="['image/*', '.zip', '.strings', '.json', '.stringsdict']"
    :max-file-size="3"
    :max-files="5"
    :max-concurrent-uploads="5"
    url="https://httpbin.org/post"
    :request-options="{
      headers: { 'My-Awesome-Header': 'header value' },
    }"
    @upload-success="onUploadSuccess"
    @upload-error="onUploadError"
    @error="onError"
  />

  <MazBtn :loading="dropzone?.isUploading" @click="dropzone?.uploadFiles()">
    Upload Files
  </MazBtn>
</template>
```

--------------------------------

### Basic Plugin Setup with Translations

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/translations.md

Configure the Maz-UI plugin to use translations, specifying the default locale, fallback locale, and providing initial messages. This example shows how to set up French as the primary locale with English as a fallback, and includes custom overrides for inputPhoneNumber translations.

```typescript
import { fr } from '@maz-ui/translations'

app.use(MazUi, {
  translations: {
    locale: 'fr',
    fallbackLocale: 'en',
    messages: {
      fr,
    }
  }
})
```

--------------------------------

### MazStepper Basic Usage Example

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-stepper.md

Demonstrates the basic implementation of the MazStepper component with three steps: Sign-In, Delivery address, and Checkout. Includes form inputs, navigation buttons, and reactive data binding using Vue refs.

```vue
<template>
  <MazStepper auto-validate-steps>
    <template #title-1>
        Sign-In
    </template>
    <template #subtitle-1>
      You should be signed in to continue
    </template>
    <template #title-info-1>
      Required
    </template>
    <template #content-1="{ nextStep }">
      <form @submit.prevent="nextStep">
        <MazInput v-model="email" label="E-mail" type="email" autocomplete="new-email" name="new-email" />
        <br />
        <MazInput v-model="password" label="password" type="password" autocomplete="new-password" name="new-password" />
        <br />
        <MazBtn type="submit">
          Sign-In
        </MazBtn>
      </form>
    </template>

    <template #title-2>
      Delivery address
    </template>
    <template #subtitle-2>
      Where should we deliver your package?
    </template>
    <template #title-info-2>
      {{ address }}
    </template>
    <template #content-2="{ nextStep, previousStep }">
      <MazInput v-model="address" label="Delivery address" />
      <br />
      <MazBtn @click="previousStep" color="secondary">
        Previous
      </MazBtn>
      <br />
      <br />
      <MazBtn @click="nextStep">
        Validate
      </MazBtn>
    </template>

    <template #title-3>
      Checkout
    </template>
    <template #subtitle-3>
      Provide credit card
    </template>
    <template #content-3="{ nextStep, previousStep }">
      <MazInput label="Credit card number" type="number" />
      <br />
      <MazBtn @click="previousStep" color="secondary">
        Previous
      </MazBtn>
      <br />
      <br />
      <MazBtn @click="nextStep">
        Payment
      </MazBtn>
    </template>
  </MazStepper>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const email = ref()
  const password = ref()
  const address = ref('20 Cooper Square')
</script>
```

--------------------------------

### Global Tooltip Installation (Vue)

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/directives/tooltip.md

Install the v-tooltip directive globally in a Vue application using `vTooltipInstall`. Optional configuration options can be provided during installation.

```typescript
import { vTooltipInstall } from 'maz-ui/directives'
import { createApp } from 'vue'

const app = createApp(App)

// Options are optional
app.use(vTooltipInstall, {
  position: 'top',
  color: 'primary',
})

app.mount('#app')
```

--------------------------------

### Auto-Import Example (After Auto-Import)

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/resolvers.md

Demonstrates the simplified code structure after enabling auto-import, where explicit import statements are no longer needed.

```vue
<script setup lang="ts">
// Nothing to import! Everything is auto-imported
const toast = useToast()
// ... rest of component
</script>

<template>
  <MazBtn>Click me</MazBtn>
  <MazInput v-model="name" />
  <MazCard>
    <p class="text-sm text-muted">
      Hello World!
    </p>
  </MazCard>
</template>
```

--------------------------------

### Create New Component with CLI

Source: https://github.com/louismazel/maz-ui/blob/master/CONTRIBUTING.md

Use this command to generate new component files. The CLI will prompt for the component name, which must start with 'Maz'. Select 'All files' to create documentation, unit test, and component files.

```shell
pnpm -F cli cli create-files -f MazNewComponent
```

--------------------------------

### Date Transformation Example

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-date-picker.md

Example of transforming a date value within the component.

```vue
const transformedDate = ref()
const newDateValue = ref()
```

--------------------------------

### Manual Imports Example (Before Auto-Import)

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/guide/resolvers.md

Illustrates the traditional approach of manually importing components, composables, and directives from maz-ui.

```vue
<script setup lang="ts">
import { formatCurrency, debounce } from 'maz-ui'
import { MazBtn, MazCard, MazInput } from 'maz-ui/components'
import { useTheme, useToast } from 'maz-ui/composables'
import { vTooltip } from 'maz-ui/directives'

const toast = useToast()
// ... rest of component
</script>

<template>
  <MazBtn>Click me</MazBtn>
  <MazInput v-model="name" />
  <MazCard>
    <p class="text-sm text-muted">
      Hello World!
    </p>
  </MazCard>
</template>
```

--------------------------------

### Maz Select Country Basic Setup

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-select-country.md

Basic setup for the Maz Select Country component in a Vue.js application using `<script setup>`. Initializes reactive references for selected country and language.

```javascript
import { ref } from 'vue'

const selectedCountry = ref('FR')
const selectedLanguage = ref('en-US')
```

--------------------------------

### List Skeleton Example

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-skeleton.md

Create a list loading placeholder using a loop to generate multiple list items, each with an icon and text placeholders.

```vue
<script lang="ts" setup>
import MazSkeleton from 'maz-ui/components/MazSkeleton'
</script>

<template>
  <div class="list-skeleton">
    <div v-for="i in 4" :key="i" class="list-item">
      <MazSkeleton shape="square" size="2.5rem" rounded-size="md" />
      <div class="content">
        <MazSkeleton width="70%" height="0.75rem" />
        <MazSkeleton width="50%" height="0.625rem" />
      </div>
    </div>
  </div>
</template>
```

--------------------------------

### Install Wait Plugin in Vue

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/plugins/wait.md

Install the Wait plugin globally in your Vue application.

```typescript
import { WaitPlugin } from 'maz-ui/plugins/wait'
import { createApp } from 'vue'

const app = createApp(App)

app.use(WaitPlugin)
app.mount('#app')
```

--------------------------------

### Using MazDialogConfirm with useMazDialogConfirm

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-dialog-confirm.md

Demonstrates how to use the `useMazDialogConfirm` composable to show confirmation dialogs and handle user responses. It shows how to display success and error toasts based on user interaction.

```vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { useToast } from 'maz-ui/src/composables/useToast'
  import MazDialogConfirm, {
    useMazDialogConfirm, type MazDialogConfirmButton, type MazDialogConfirmData
  } from 'maz-ui/src/components/MazDialogConfirm.vue'

  const { showDialogAndWaitChoice, data } = useMazDialogConfirm()
  const confirmDialog = ref(false)
  const toast = useToast()

  async function askToUser () {
    try {
      const acceptResponse = await showDialogAndWaitChoice('one')
      toast.success(acceptResponse, {
        position: 'top-right'
      })
      const rejectResponse = await showDialogAndWaitChoice('two')
      toast.success(rejectResponse, {
        position: 'top-right'
      })
      confirmDialog.value = true
    } catch (rejectResponse) {
      toast.error(rejectResponse, {
        position: 'top-right'
      })
    }
  }

  data.value = {
    title: 'Delete user',
    message: 'Are you sure you want to delete this user?',
  }

  const buttons: MazDialogConfirmButton[] = [
    {
      text: 'Cancel',
      type: 'reject',
      color: 'destructive',
      outlined: true,
      response: 'cancel',
      size: 'sm',
    },
    {
      text: 'Delete!',
      type: 'accept',
      color: 'success',
      response: 'delete',
      size: 'lg',
    },
  ]
</script>
```

--------------------------------

### Time Selection Examples

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/components/maz-date-picker.md

Demonstrates various time selection configurations, including 24-hour and 12-hour formats, and time intervals.

```vue
const dateTime24 = ref()
const dateTime12 = ref()
const timeOnly24 = ref('14:30')
const timeOnly12 = ref('02:30 pm')
const timeInterval1 = ref()
const timeInterval2 = ref()
const timeInterval3 = ref()
```

--------------------------------

### useSwipe Composable with Specific Import Path

Source: https://github.com/louismazel/maz-ui/blob/master/apps/docs/src/composables/use-swipe.md

This example shows the `useSwipe` composable imported from a specific path within the library. It functions identically to the basic usage example, demonstrating an alternative import method.

```vue
<script lang="ts" setup>
import { useSwipe } from 'maz-ui/src/composables/useSwipe'
import { onMounted, onUnmounted, ref } from 'vue'

const swipeContainer = ref<HTMLDivElement>()

const lastSwipeDirection = ref<string>('None')

const { xDiff, yDiff, start, stop } = useSwipe({
  element: swipeContainer,
  onLeft: () => lastSwipeDirection.value = 'Swiped left',
  onRight: () => lastSwipeDirection.value = 'Swiped right',
  onUp: () => lastSwipeDirection.value = 'Swiped up',
  onDown: () => lastSwipeDirection.value = 'Swiped down',
  threshold: 50,
})

onMounted(() => {
  start()
})

onUnmounted(() => {
  stop()
})
</script>

<style>
.swipe-container {
  border: 1px solid #e2e2e3;
  border-radius: 10px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.2rem;
}
</style>
```

--------------------------------

### Install MCP Inspector Globally

Source: https://github.com/louismazel/maz-ui/blob/master/packages/mcp/README.md

Install the MCP Inspector command-line tool globally using npm.

```bash
npm install -g @modelcontextprotocol/inspector
```