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

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

@@ -1,45 +1,44 @@
 ---
-title: MazDatePicker
-description: A powerful and flexible date picker component with support for single dates, date ranges, time selection, and extensive customization options
+title: "MazDatePicker"
+description: "A powerful and flexible date picker component with support for single dates, date ranges, time selection, and extensive customization options"
+package: "maz-ui"
+url: "https://maz-ui.com/components/maz-date-picker"
 ---
 
-# {{ $frontmatter.title }}
+# MazDatePicker
 
-{{ $frontmatter.description }}
+> A powerful and flexible date picker component with support for single dates, date ranges, time selection, and extensive customization options
 
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
+- Package: `maz-ui`
+- Import: `import MazDatePicker from 'maz-ui/components/MazDatePicker'`
+- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
+- Web: https://maz-ui.com/components/maz-date-picker
 
-<!--@include: ./../../.vitepress/mixins/translated-component.md-->
+> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)
+
+**Tip:**
+
+This component can be translated globally using the [MazUi](../ecosystem/translations.md) plugin.
 
 ## Table of Contents
 
-- [Basic Usage](#basic-usage)
-- [Date Formats](#date-formats)
-- [Date Selection](#date-selection)
-- [Custom Trigger](#custom-trigger)
-- [Time Selection](#time-selection)
-- [Range Selection](#range-selection)
-- [Internationalization](#internationalization)
-- [Validation & Constraints](#validation--constraints)
-- [Types](#types)
-- [Props](#props)
-- [Events](#events)
-- [Slots](#slots)
+- Basic Usage
+- Date Formats
+- Date Selection
+- Custom Trigger
+- Time Selection
+- Range Selection
+- Internationalization
+- Validation & Constraints
+- Types
+- Props
+- Events
+- Slots
 
 ## Basic Usage
 
 The simplest way to use MazDatePicker:
 
-<ComponentDemo>
-  <MazDatePicker
-    v-model="basicDate"
-    label="Select a date"
-    placeholder="Choose your date"
-    format="YYYY-MM-DD"
-  />
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker
@@ -57,9 +56,6 @@ const date = ref()
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Date Formats
 
 Understanding date formats is crucial for using MazDatePicker effectively. The component uses two different format concepts:
@@ -72,30 +68,6 @@ This controls how dates are stored and transmitted in your `v-model`. Default is
 
 This controls how dates appear in the input field using `Intl.DateTimeFormatOptions`.
 
-<ComponentDemo>
-  <div class="maz:grid maz:grid-cols-1 maz:mob-l:grid-cols-3 maz:gap-4">
-    <MazDatePicker
-      v-model="formatExample1"
-      label="ISO Format (YYYY-MM-DD)"
-      format="YYYY-MM-DD"
-      :input-date-format="{ dateStyle: 'medium' }"
-    />
-    <MazDatePicker
-      v-model="formatExample2"
-      label="US Format (MM/DD/YYYY)"
-      format="MM/DD/YYYY"
-      :input-date-format="{ dateStyle: 'short' }"
-    />
-    <MazDatePicker
-      v-model="formatExample3"
-      label="European Format (DD-MM-YYYY)"
-      format="DD-MM-YYYY"
-      :input-date-format="{ dateStyle: 'medium' }"
-    />
-  </div>
-
-<template #code>
-
 ```vue
 <template>
   <!-- ISO Format (recommended) -->
@@ -132,22 +104,10 @@ const date3 = ref('15-03-2024')        // European format
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ### Custom Display Transformation
 
 Use `inputDateTransformer` to completely customize how dates appear in the input:
 
-<ComponentDemo>
-  <MazDatePicker
-    v-model="transformedDate"
-    label="Custom Display Format"
-    :input-date-transformer="({ value }) => value ? `📅 ${dayjs(value).format('dddd, MMMM Do YYYY')}` : ''"
-  />
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker
@@ -169,25 +129,10 @@ const transformDate = ({ value }) => {
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Date Selection
 
 ### Standard Date Picker
 
-<br />
-
-<ComponentDemo>
-  <MazDatePicker
-    v-model="dateSelection"
-    label="Select Date"
-    color="primary"
-    auto-close
-  />
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker
@@ -205,22 +150,10 @@ const date = ref()
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ### Inline Date Picker
 
 Perfect for dashboards or when you want the calendar always visible:
 
-<ComponentDemo>
-  <MazDatePicker
-    v-model="inlineDate"
-    inline
-    color="secondary"
-  />
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker
@@ -237,23 +170,10 @@ const date = ref()
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ### Double Calendar
 
 Show two months at once for better date selection:
 
-<ComponentDemo>
-  <MazDatePicker
-    v-model="doubleDate"
-    label="Double Calendar"
-    double
-    color="success"
-  />
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker
@@ -271,9 +191,6 @@ const date = ref()
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Custom Trigger
 
 By default MazDatePicker renders a readonly `MazInput` as the field that opens the calendar. Use the `#trigger` slot to replace it with your own element - a button, a custom input, an icon... Clicking the slotted element opens the calendar automatically (no `@click` needed), and the slot exposes the current open state plus functions for programmatic control.
@@ -287,23 +204,12 @@ By default MazDatePicker renders a readonly `MazInput` as the field that opens t
 | `close` | `() => void` | Close the calendar programmatically |
 | `toggle` | `() => void` | Toggle the calendar programmatically |
 
-<ComponentDemo>
-  <MazDatePicker v-model="triggerDate" auto-close hide-header>
-    <template #trigger="{ isOpen }">
-      <MazBtn color="secondary" :class="{ 'maz:ring-2 maz:ring-offset-2 maz:ring-secondary': isOpen }">
-        {{ triggerDate || 'Pick a date' }}
-      </MazBtn>
-    </template>
-  </MazDatePicker>
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker v-model="date" auto-close>
     <!-- Clicking the button opens the picker automatically. -->
     <template #trigger="{ isOpen }">
-      <MazBtn color="secondary" :class="{ 'maz:ring-2 maz:ring-secondary': isOpen }">
+      <MazBtn color="secondary" :class="{ 'ring-2 ring-secondary': isOpen }">
         {{ date || 'Pick a date' }}
       </MazBtn>
     </template>
@@ -317,12 +223,9 @@ const date = ref()
 </script>
 ```
 
-</template>
-</ComponentDemo>
+**Tip:**
 
-::: tip
 The model value is not passed through the slot - use your own `v-model` ref (here `date`) to display the selected value in your custom trigger. The exposed `open` / `close` / `toggle` functions are only needed when you want to drive the picker from your own logic.
-:::
 
 > In `inline` mode the calendar is always visible, so the `trigger` slot is not rendered. To open the picker from an element rendered outside the component, use the `custom-element-selector` prop instead.
 
@@ -330,17 +233,6 @@ The model value is not passed through the slot - use your own `v-model` ref (her
 
 ### Date + Time (24h format)
 
-<ComponentDemo>
-  <MazDatePicker
-    v-model="dateTime24"
-    label="Date & Time (24h)"
-    format="YYYY-MM-DD HH:mm"
-    time
-    color="info"
-  />
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker
@@ -359,22 +251,8 @@ const dateTime = ref()
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ### Date + Time (12h format)
 
-<ComponentDemo>
-  <MazDatePicker
-    v-model="dateTime12"
-    label="Date & Time (12h)"
-    format="YYYY-MM-DD hh:mm a"
-    time
-    color="warning"
-  />
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker
@@ -393,31 +271,8 @@ const dateTime = ref()
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ### Time Only Selection
 
-<ComponentDemo>
-  <div class="maz:grid maz:grid-cols-1 maz:mob-l:grid-cols-2 maz:gap-4">
-    <MazDatePicker
-      v-model="timeOnly24"
-      label="Time Only (24h)"
-      format="HH:mm"
-      only-time
-      color="accent"
-    />
-    <MazDatePicker
-      v-model="timeOnly12"
-      label="Time Only (12h)"
-      format="hh:mm a"
-      only-time
-      color="destructive"
-    />
-  </div>
-
-<template #code>
-
 ```vue
 <template>
   <!-- 24h format -->
@@ -447,38 +302,8 @@ const time12 = ref('02:30 pm')
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ### Custom Minute Intervals
 
-<ComponentDemo>
-  <div class="maz:grid maz:grid-cols-1 maz:mob-l:grid-cols-3 maz:gap-4">
-    <MazDatePicker
-      v-model="timeInterval1"
-      label="5min intervals"
-      format="HH:mm"
-      :minute-interval="5"
-      only-time
-    />
-    <MazDatePicker
-      v-model="timeInterval2"
-      label="15min intervals"
-      format="HH:mm"
-      :minute-interval="15"
-      only-time
-    />
-    <MazDatePicker
-      v-model="timeInterval3"
-      label="30min intervals"
-      format="HH:mm"
-      :minute-interval="30"
-      only-time
-    />
-  </div>
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker
@@ -515,25 +340,10 @@ const time3 = ref()
 </script>
 ```
 
-  </template>
-</ComponentDemo>
-
 ## Range Selection
 
 For selecting date ranges, pass an object with `start` and `end` properties:
 
-<ComponentDemo>
-  <MazDatePicker
-    v-model="dateRange"
-    label="Select Date Range"
-    range
-    double
-    auto-close
-    color="primary"
-  />
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker
@@ -556,25 +366,10 @@ const range = ref({
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ### Range with Shortcuts
 
 Provide predefined shortcuts for common date ranges:
 
-<ComponentDemo>
-  <MazDatePicker
-    v-model="rangeWithShortcuts"
-    label="Range with Shortcuts"
-    range
-    double
-    :shortcuts="customShortcuts"
-    color="secondary"
-  />
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker
@@ -625,9 +420,6 @@ const shortcuts = [
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ### Property `shortcuts`
 
 #### Model
@@ -663,7 +455,7 @@ const shortcuts: MazDatePickerShortcut[] = [{
 }]
 ```
 
-::: details View default shortcuts
+**Details: View default shortcuts**
 
 ```ts
 const shortcuts = [
@@ -734,29 +526,10 @@ const shortcuts = [
 ]
 ```
 
-:::
-
 ## Validation & Constraints
 
 ### Min/Max Dates
 
-<br />
-
-<ComponentDemo>
-  <MazDatePicker
-    v-model="constrainedDate"
-    label="Limited Date Range"
-    :min-date="minMaxDates.min"
-    :max-date="minMaxDates.max"
-    color="info"
-    @update:model-value="console.log($event)"
-  />
-  <p class="maz:text-sm maz:text-muted maz:mt-2">
-    Min: {{ minMaxDates.min }} | Max: {{ minMaxDates.max }}
-  </p>
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker
@@ -778,24 +551,10 @@ const maxDate = dayjs().add(30, 'day').format('YYYY-MM-DD')
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 #### Property `min-max-auto`
 
 Disable min-max auto check to not change the value when it is out of range
 
-<ComponentDemo>
-  <MazDatePicker
-    v-model="constrainedDateMinMaxAuto"
-    label="Not auto date range"
-    :min-date="minMaxDates.min"
-    :max-date="minMaxDates.max"
-    :min-max-auto="false"
-  />
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker
@@ -817,32 +576,8 @@ const maxDate = dayjs().add(30, 'day').format('YYYY-MM-DD')
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ### Disabled Days & Dates
 
-<br />
-
-<ComponentDemo>
-  <div class="maz:grid maz:grid-cols-1 maz:mob-l:grid-cols-2 maz:gap-4">
-    <MazDatePicker
-      v-model="weekendDisabled"
-      label="Weekends Disabled"
-      :min-date="dayjs().subtract(1, 'day').format('YYYY-MM-DD')"
-      :disabled-weekly="[0, 6]"
-      color="warning"
-    />
-    <MazDatePicker
-      v-model="specificDatesDisabled"
-      label="Holidays Disabled"
-      :disabled-dates="holidays"
-      color="destructive"
-    />
-  </div>
-
-<template #code>
-
 ```vue
 <template>
   <!-- Disable weekends -->
@@ -884,35 +619,8 @@ const holidays = [
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ### Disabled Hours
 
-<br />
-
-<ComponentDemo>
-  <div class="maz:grid maz:grid-cols-1 maz:mob-l:grid-cols-2 maz:gap-4">
-    <MazDatePicker
-      v-model="dateTime"
-      format="YYYY-MM-DD hh:mm a"
-      time
-      label="Disabled Hours"
-      :disabled-hours="disabledHours"
-      color="info"
-    />
-    <MazDatePicker
-      v-model="time"
-      format="HH:mm"
-      only-time
-      label="Disabled Hours"
-      :disabled-hours="disabledHours"
-      color="info"
-    />
-  </div>
-
-<template #code>
-
 ```vue
 <template>
   <MazDatePicker
@@ -944,46 +652,10 @@ const disabledHours = [0, 1, 2, 11, 22, 23]
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Internationalization
 
 MazDatePicker supports full internationalization. **By default, it uses the locale from the [MazUiTranslations](../ecosystem/translations.md) plugin**, but you can override it:
 
-<ComponentDemo>
-  <div class="maz:grid maz:grid-cols-1 maz:mob-l:grid-cols-2 maz:gap-4">
-    <MazDatePicker
-      v-model="frenchDate"
-      label="French Locale"
-      locale="fr-FR"
-      :first-day-of-week="1"
-      color="primary"
-    />
-    <MazDatePicker
-      v-model="germanDate"
-      label="German Locale"
-      locale="de-DE"
-      :first-day-of-week="1"
-      color="secondary"
-    />
-    <MazDatePicker
-      v-model="japaneseDate"
-      label="Japanese Locale"
-      locale="ja-JP"
-      color="accent"
-    />
-    <MazDatePicker
-      v-model="arabicDate"
-      label="Arabic Locale"
-      locale="ar-SA"
-      :first-day-of-week="6"
-      color="warning"
-    />
-  </div>
-
-<template #code>
-
 ```vue
 <template>
   <!-- French -->
@@ -1032,9 +704,6 @@ const arabicDate = ref()
 </script>
 ```
 
-</template>
-</ComponentDemo>
-
 ## Types
 
 ```typescript
@@ -1063,98 +732,60 @@ interface MazDatePickerShortcut {
 
 - The input is a `combobox` opening a `dialog` (`aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`).
 - Each month is a `grid` labelled by the month and the year, the days of the week are its column headers and each day has its full date as label (`aria-current="date"` for today, `aria-selected` on the selected days).
-- **Keyboard** in the calendar: only one day is in the tab sequence, the arrows move by day (<kbd>←</kbd> <kbd>→</kbd>) and by week (<kbd>↑</kbd> <kbd>↓</kbd>), <kbd>Home</kbd> / <kbd>End</kbd> go to the start / end of the week, <kbd>Page Up</kbd> / <kbd>Page Down</kbd> to the previous / next month (with <kbd>Shift</kbd>: year). Disabled days are skipped and the calendar follows the focus to the displayed month.
+- **Keyboard** in the calendar: only one day is in the tab sequence, the arrows move by day (← →) and by week (↑ ↓), Home / End go to the start / end of the week, Page Up / Page Down to the previous / next month (with Shift: year). Disabled days are skipped and the calendar follows the focus to the displayed month.
 - The navigation buttons labels come from `@maz-ui/translations` (`aria` namespace).
 
-<!--@include: ./../../.vitepress/mixins/maz-input-props.md-->
-
-<!--@include: ./../../.vitepress/generated-docs/maz-date-picker.doc.md-->
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import dayjs from 'dayjs'
-
-// Basic examples
-const basicDate = ref('2023-03-15')
-const formatExample1 = ref('2024-03-15')
-const formatExample2 = ref('03/15/2024')
-const formatExample3 = ref('15-03-2024')
-const transformedDate = ref()
-const newDateValue = ref()
-const triggerDate = ref()
-// Date selection
-const dateSelection = ref()
-const inlineDate = ref()
-const doubleDate = ref()
-
-// Time selection
-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()
-
-// Range selection
-const dateRange = ref({ start: undefined, end: undefined })
-const rangeWithShortcuts = ref({ start: undefined, end: undefined })
-
-// Internationalization
-const frenchDate = ref()
-const germanDate = ref()
-const japaneseDate = ref()
-const arabicDate = ref()
-
-// Validation
-const constrainedDate = ref()
-const constrainedDateMinMaxAuto = ref(dayjs().subtract(60, 'day').format('YYYY-MM-DD'))
-const minMaxDates = {
-  min: dayjs().format('YYYY-MM-DD'),
-  max: dayjs().add(20, 'day').format('YYYY-MM-DD')
-}
-const weekendDisabled = ref()
-const specificDatesDisabled = ref()
-const holidays = [
-  dayjs().subtract(2, 'day').format('YYYY-MM-DD'),
-  dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
-  dayjs().format('YYYY-MM-DD'),
-  dayjs().add(1, 'day').format('YYYY-MM-DD'),
-  dayjs().add(2, 'day').format('YYYY-MM-DD'),
-  dayjs().add(3, 'day').format('YYYY-MM-DD'),
-  dayjs().add(4, 'day').format('YYYY-MM-DD'),
-]
-
-// Disabled hours
-const dateTime = ref()
-const time = ref()
-const disabledHours = [0, 1, 2, 11, 22, 23]
-
-// Shortcuts
-const customShortcuts = [
-  {
-    label: 'Today',
-    identifier: 'today',
-    value: {
-      start: dayjs().format('YYYY-MM-DD'),
-      end: dayjs().format('YYYY-MM-DD')
-    }
-  },
-  {
-    label: 'Last 7 days',
-    identifier: 'last7days',
-    value: {
-      start: dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
-      end: dayjs().format('YYYY-MM-DD')
-    }
-  },
-  {
-    label: 'This month',
-    identifier: 'thisMonth',
-    value: {
-      start: dayjs().startOf('month').format('YYYY-MM-DD'),
-      end: dayjs().endOf('month').format('YYYY-MM-DD')
-    }
-  }
-]
-</script>
+## MazDatePicker API
+
+`import MazDatePicker from 'maz-ui/components/MazDatePicker'`
+
+### Props
+
+- `id` (`string`): The unique identifier of the component.
+- `input-props` (`MazInputProps<MazInputValue>`): The props to apply to the input component.
+- `model-value` (`MazDatePickerValue`, `v-model`): The value of the date picker component If an object is provided, the picker will be a range picker.
+- `format` (`string`, default: `"YYYY-MM-DD"`): The format pattern for date display and parsing.
+- `open` (`boolean`, default: `false`, `v-model:open`): Controls whether the picker window is open.
+- `label` (`string`): The label text displayed above the input field.
+- `placeholder` (`string`): The placeholder text shown when no value is selected.
+- `input-date-format` (`Intl.DateTimeFormatOptions`, default: `{ dateStyle: "medium", timeStyle: "short" }`): The Intl.DateTimeFormatOptions for styling the input date display.
+- `input-date-transformer` (`((payload: { formattedDate?: string | undefined; value?: MazDatePickerValue; locale: string; }) => string)`): Custom function to transform the formatted date display.
+- `locale` (`string`, default: `""`, `v-model:locale`): The locale string for date formatting and localization.
+- `hide-header` (`boolean`, default: `false`): Controls whether the calendar header is hidden.
+- `disabled` (`boolean`, default: `false`): Controls whether the component is disabled.
+- `first-day-of-week` (`0 | 1 | 2 | 3 | 4 | 5 | 6`, default: `0`): The first day of the week in the calendar. Values: `'0'`, `'1'`, `'2'`, `'3'`, `'4'`, `'5'`, `'6'` (non exhaustive).
+- `auto-close` (`boolean`, default: `false`): Controls whether the picker closes automatically after date selection.
+- `custom-element-selector` (`string`): CSS selector for a custom element that triggers the picker.
+- `double` (`boolean`, default: `false`): Controls whether the picker displays two months side by side.
+- `inline` (`boolean`, default: `false`): Controls whether the picker is displayed inline without input field.
+- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent"`, default: `"primary"`): The color theme of the component.
+- `picker-position` (`MazPopoverPosition`, default: `"auto"`): The position where the picker popover should appear. Values: `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-end'`, `'bottom-end'`, `'left-end'`, `'right-end'`, `'top-start'`, `'bottom-start'`, `'left-start'`, `'right-start'` (non exhaustive).
+- `picker-prefer-position` (`MazPopoverPreferPosition`, default: `"bottom-start"`): The preferred position of the picker popover. Values: `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-end'`, `'bottom-end'`, `'left-end'`, `'right-end'`, `'top-start'`, `'bottom-start'`, `'left-start'`, `'right-start'` (non exhaustive).
+- `picker-fallback-position` (`MazPopoverFallbackPosition`, default: `"top-start"`): The fallback position of the picker popover. Values: `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-end'`, `'bottom-end'`, `'left-end'`, `'right-end'`, `'top-start'`, `'bottom-start'`, `'left-start'`, `'right-start'` (non exhaustive).
+- `time` (`boolean`, default: `false`): Controls whether the picker includes a time selector.
+- `only-time` (`boolean`, default: `false`): Controls whether the picker shows only time selection (no date).
+- `minute-interval` (`number`, default: `5`): The interval in minutes for the time picker minute selection. Values: `'1'`, `'5'`, `'10'`, `'15'`, `'30'` (non exhaustive).
+- `use-browser-locale` (`boolean`, default: `true`): Controls whether to automatically detect and use the browser's locale.
+- `fetch-local` (`boolean`, default: `true`): Controls whether to fetch locale data dynamically.
+- `shortcuts` (`boolean | MazDatePickerShortcut[]`, default: `true`): Array of predefined date range shortcuts or false to disable.
+- `shortcut` (`string`): The identifier of the currently selected shortcut.
+- `min-date` (`string`): The minimum selectable date in ISO format.
+- `max-date` (`string`): The maximum selectable date in ISO format.
+- `min-max-auto` (`boolean`, default: `true`): When minDate or maxDate are provided, if the current date is not between minDate and maxDate, the current date will be set to the minDate or maxDate.
+- `disabled-weekly` (`number[]`, default: `[]`): Array of weekday numbers to disable (0 = Sunday, 6 = Saturday).
+- `disabled-dates` (`string[]`, default: `[]`): Array of specific dates to disable in ISO format.
+- `disabled-hours` (`number[]`, default: `[]`): Array of hour numbers to disable in the time picker (0-23).
+- `block` (`boolean`, default: `false`): Controls whether the input displays in full width.
+- `range` (`boolean`, default: `false`): Controls whether the picker operates in range selection mode.
+- `transition` (`string`, default: `"scale-fade"`): The transition name of the popover.
+
+### Events
+
+- `@update:model-value` (payload: `value: MazDatePickerValue`): Emitted when the picker value changes
+- `@close` (payload: `(void | undefined)?`): Emitted when the picker closes
+- `@update:locale` (payload: `value: string`)
+- `@update:open` (payload: `value: boolean`)
+
+### Slots
+
+- `#trigger`: Replace the default input with your own element Bindings: `isOpen: boolean` (Current open state of the popover), `close: () => void` (Function to close the popover), `open: () => void` (Function to open the popover), `toggle: () => void` (Function to toggle the popover).