@bridge-ui/vue 0.0.8 → 0.0.10

package/docs/components/BridgeUIProvider.md

@@ -1,6 +1,6 @@
 # BridgeUIProvider
 
-Root provider for theme, locale, direction, breakpoints, icon/i18n adapters, and component registry defaults.
+Root provider for theme, locale, direction, breakpoints, icon/i18n/date adapters, and component registry defaults.
 
 ## Import
 
@@ -60,6 +60,23 @@ app.use(
 );
 ```
 
+### Date adapter
+
+Provide `global.dates` to replace the native `Date` adapter used by calendars and pickers. Without one, Bridge uses `createNativeDateAdapter`. Ready samples in `packages/vue/docs/examples/` (Day.js, date-fns, Luxon, Moment).
+
+```ts
+import { createBridgeUI } from "@bridge-ui/vue";
+import { createDayjsDateAdapter } from "@examples/date-dayjs";
+
+const dates = createDayjsDateAdapter();
+
+app.use(
+  createBridgeUI({
+    global: { dates },
+  }),
+);
+```
+
 ### Form density defaults
 
 Set `global.formDefaults` to apply shared `size` / `rounded` to form controls (TextField, Select, Checkbox, Slider, OtpField, …). Does not affect Button, Progress, Modal, etc.
@@ -137,10 +154,10 @@ setGlobal({ mobileBreakpoint: "md" });
 
 ## Props
 
-| Prop         | Type                       | Default | Description                                                                                        |
-| ------------ | -------------------------- | ------- | -------------------------------------------------------------------------------------------------- |
-| `components` | `BridgeUIComponentsConfig` | —       | Per-component defaults                                                                             |
-| `global`     | `Partial<BridgeUIGlobal>`  | —       | `theme`, `locale`, `direction`, `mobileBreakpoint`, `breakpoints`, `icons`, `i18n`, `formDefaults` |
+| Prop         | Type                       | Default | Description                                                                                                 |
+| ------------ | -------------------------- | ------- | ----------------------------------------------------------------------------------------------------------- |
+| `components` | `BridgeUIComponentsConfig` | —       | Per-component defaults                                                                                      |
+| `global`     | `Partial<BridgeUIGlobal>`  | —       | `theme`, `locale`, `direction`, `mobileBreakpoint`, `breakpoints`, `icons`, `i18n`, `dates`, `formDefaults` |
 
 App content is passed via the **default slot** (see Usage above).
 

package/docs/components/Calendar.md

@@ -0,0 +1,96 @@
+# Calendar
+
+Standalone calendar with date, month, and year panels. Supports single, multiple, and range selection.
+
+## Import
+
+```ts
+import { Calendar } from "@bridge-ui/vue/Components/Calendar";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Calendar />
+
+<Calendar v-model="date" />
+
+<Calendar range v-model="range" :min-date="min" :max-date="max" />
+
+<Calendar multiple v-model="dates" />
+```
+
+### Bounds and disabled dates
+
+```vue
+<Calendar
+  :min-date="new Date(2024, 0, 1)"
+  :max-date="new Date(2026, 11, 31)"
+  :disable-dates="[new Date(2026, 7, 15)]"
+/>
+```
+
+### customProps
+
+```vue
+<Calendar
+  :custom-props="{
+    root: { 'data-testid': 'calendar' },
+    todayButton: { type: 'button' },
+  }"
+/>
+```
+
+## Props
+
+| Prop              | Type                  | Default     | Description                                               |
+| ----------------- | --------------------- | ----------- | --------------------------------------------------------- |
+| `classes`         | `CalendarClasses`     | —           | Classes for calendar regions.                             |
+| `color`           | `CalendarColor`       | `"primary"` | Accent color for tiles.                                   |
+| `customProps`     | `CalendarCustomProps` | —           | Extra props for internal parts.                           |
+| `defaultValue`    | `DatePickerModel`     | `null`      | Uncontrolled initial value.                               |
+| `defaultView`     | `CalendarView`        | `"date"`    | Uncontrolled initial panel view.                          |
+| `disabled`        | `boolean`             | `false`     | Disables the calendar.                                    |
+| `disableDates`    | `Date[]`              | —           | Dates that cannot be selected.                            |
+| `disableMonths`   | `number[]`            | —           | Month indexes (`0`–`11`) that cannot be selected.         |
+| `disableYears`    | `number[]`            | —           | Years that cannot be selected.                            |
+| `hideMonths`      | `boolean`             | `false`     | Hides the month selector and month panel.                 |
+| `hideOutsideDays` | `boolean`             | `false`     | Hides days that fall outside the displayed month.         |
+| `hideWeekdays`    | `boolean`             | `false`     | Hides weekday labels on the date panel.                   |
+| `hideYears`       | `boolean`             | `false`     | Hides the year selector and year panel.                   |
+| `maxDate`         | `Date`                | —           | Latest selectable date.                                   |
+| `minDate`         | `Date`                | —           | Earliest selectable date.                                 |
+| `multiple`        | `boolean`             | `false`     | Allows selecting multiple dates.                          |
+| `previewDate`     | `Date \| null`        | —           | Controlled range-preview hover date.                      |
+| `range`           | `boolean`             | `false`     | Selects a start/end date range.                           |
+| `readOnly`        | `boolean`             | `false`     | Prevents selection.                                       |
+| `rounded`         | `CalendarRounded`     | `"md"`      | Border radius of tiles and chrome.                        |
+| `slots`           | `CalendarDateSlots`   | —           | Named slots forwarded to `CalendarDate` (`day`).          |
+| `startOfWeek`     | `StartOfWeek`         | `0`         | First day of the week (`0` = Sunday).                     |
+| `timeZone`        | `string`              | —           | IANA time zone.                                           |
+| `tokens`          | `CalendarTokens`      | —           | Token overrides.                                          |
+| `value`           | `DatePickerModel`     | —           | Controlled selection model.                               |
+| `view`            | `CalendarView`        | —           | Controlled panel view. Pair with `view-change`.           |
+| `viewDate`        | `Date`                | —           | Controlled displayed month. Pair with `view-date-change`. |
+
+### v-model
+
+| Prop / Event        | Type                               | Default | Description                           |
+| ------------------- | ---------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `DatePickerModel`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: DatePickerModel) => void` | —       | Emitted when `v-model` should update. |
+
+## Events
+
+| Event                      | Payload                    | Description                                        |
+| -------------------------- | -------------------------- | -------------------------------------------------- |
+| `v-on:change`              | `(value: DatePickerModel)` | Emitted when the selection model changes.          |
+| `v-on:preview-date-change` | `(date: Date \| null)`     | Emitted when the range preview hover date changes. |
+| `v-on:view-change`         | `(view: CalendarView)`     | Emitted when the active panel view changes.        |
+| `v-on:view-date-change`    | `(date: Date)`             | Emitted when the displayed month changes.          |
+
+## Related components
+
+CalendarDate, CalendarMonth, CalendarYear, CalendarRange, DatePicker, DateField

package/docs/components/CalendarDate.md

@@ -0,0 +1,71 @@
+# CalendarDate
+
+Date-grid panel (weekdays + day tiles). Building block used by `Calendar` and `CalendarRange`.
+
+## Import
+
+```ts
+import { CalendarDate } from "@bridge-ui/vue/Components/CalendarDate";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<CalendarDate v-model="date" />
+
+<CalendarDate
+  range
+  v-model="range"
+  :view-date="month"
+  @view-date-change="month = $event"
+/>
+```
+
+## Props
+
+| Prop              | Type                      | Default     | Description                                       |
+| ----------------- | ------------------------- | ----------- | ------------------------------------------------- |
+| `classes`         | `CalendarDateClasses`     | —           | Classes for calendar regions.                     |
+| `color`           | `CalendarColor`           | `"primary"` | Accent color for day tiles.                       |
+| `customProps`     | `CalendarDateCustomProps` | —           | Extra props for internal parts.                   |
+| `defaultValue`    | `DatePickerModel`         | `null`      | Uncontrolled initial value.                       |
+| `disabled`        | `boolean`                 | `false`     | Disables the entire calendar.                     |
+| `disableDates`    | `Date[]`                  | —           | Dates that cannot be selected.                    |
+| `disableMonths`   | `number[]`                | —           | Month indexes that cannot be selected.            |
+| `disableYears`    | `number[]`                | —           | Years that cannot be selected.                    |
+| `hideOutsideDays` | `boolean`                 | `false`     | Hides days that fall outside the displayed month. |
+| `hideWeekdays`    | `boolean`                 | `false`     | Hides the weekday header row.                     |
+| `maxDate`         | `Date`                    | —           | Latest selectable date.                           |
+| `minDate`         | `Date`                    | —           | Earliest selectable date.                         |
+| `multiple`        | `boolean`                 | `false`     | Allows selecting multiple dates.                  |
+| `previewDate`     | `Date \| null`            | —           | Hovered date used for incomplete-range preview.   |
+| `range`           | `boolean`                 | `false`     | Selects a start/end range.                        |
+| `readOnly`        | `boolean`                 | `false`     | Prevents selection.                               |
+| `rounded`         | `CalendarRounded`         | `"md"`      | Border radius of day tiles.                       |
+| `slots`           | `{ day?: … }`             | —           | Named slots (`day`).                              |
+| `startOfWeek`     | `StartOfWeek`             | `0`         | First day of the week.                            |
+| `timeZone`        | `string`                  | —           | IANA time zone.                                   |
+| `tokens`          | `CalendarDateTokens`      | —           | Token overrides.                                  |
+| `value`           | `DatePickerModel`         | —           | Controlled selection model.                       |
+| `viewDate`        | `Date`                    | —           | Month currently displayed in the grid.            |
+
+### v-model
+
+| Prop / Event        | Type                               | Default | Description                           |
+| ------------------- | ---------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `DatePickerModel`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: DatePickerModel) => void` | —       | Emitted when `v-model` should update. |
+
+## Events
+
+| Event                      | Payload                    | Description                                        |
+| -------------------------- | -------------------------- | -------------------------------------------------- |
+| `v-on:change`              | `(value: DatePickerModel)` | Emitted when the selection model changes.          |
+| `v-on:preview-date-change` | `(date: Date \| null)`     | Emitted when the range-preview hover date changes. |
+| `v-on:view-date-change`    | `(date: Date)`             | Emitted when the displayed month should change.    |
+
+## Related components
+
+Calendar, CalendarMonth, CalendarYear, CalendarRange

package/docs/components/CalendarMonth.md

@@ -0,0 +1,52 @@
+# CalendarMonth
+
+Month-grid panel (`0`–`11`). Building block used by `Calendar` and `CalendarRange`.
+
+## Import
+
+```ts
+import { CalendarMonth } from "@bridge-ui/vue/Components/CalendarMonth";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<CalendarMonth :year="2026" v-model="month" />
+```
+
+## Props
+
+| Prop            | Type                       | Default      | Description                                          |
+| --------------- | -------------------------- | ------------ | ---------------------------------------------------- |
+| `classes`       | `CalendarMonthClasses`     | —            | Classes for calendar regions.                        |
+| `color`         | `CalendarColor`            | `"primary"`  | Accent color for month tiles.                        |
+| `customProps`   | `CalendarMonthCustomProps` | —            | Extra props for internal parts.                      |
+| `disabled`      | `boolean`                  | `false`      | Disables the entire month grid.                      |
+| `disableMonths` | `number[]`                 | —            | Month indexes that cannot be selected.               |
+| `maxDate`       | `Date`                     | —            | Latest selectable date (bounds months for `year`).   |
+| `minDate`       | `Date`                     | —            | Earliest selectable date (bounds months for `year`). |
+| `readOnly`      | `boolean`                  | `false`      | Prevents selection.                                  |
+| `rounded`       | `CalendarRounded`          | `"md"`       | Border radius of month tiles.                        |
+| `timeZone`      | `string`                   | —            | IANA time zone.                                      |
+| `tokens`        | `CalendarMonthTokens`      | —            | Token overrides.                                     |
+| `value`         | `number`                   | —            | Selected month (`0`–`11`).                           |
+| `year`          | `number`                   | current year | Year context for min/max month disabling.            |
+
+### v-model
+
+| Prop / Event        | Type                      | Default | Description                           |
+| ------------------- | ------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `number`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: number) => void` | —       | Emitted when `v-model` should update. |
+
+## Events
+
+| Event         | Payload           | Description                                  |
+| ------------- | ----------------- | -------------------------------------------- |
+| `v-on:change` | `(month: number)` | Emitted when a month is selected (`0`–`11`). |
+
+## Related components
+
+Calendar, CalendarDate, CalendarYear

package/docs/components/CalendarRange.md

@@ -0,0 +1,83 @@
+# CalendarRange
+
+Dual-month calendar for selecting a date range. Shared year/month selectors with
+two date panels (`orientation="horizontal"` side-by-side, or `"vertical"` stacked).
+
+## Import
+
+```ts
+import { CalendarRange } from "@bridge-ui/vue/Components/CalendarRange";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<CalendarRange />
+
+<CalendarRange v-model="range" />
+
+<CalendarRange orientation="vertical" />
+
+<CalendarRange v-model="range" :min-date="min" :max-date="max" />
+```
+
+### customProps
+
+```vue
+<CalendarRange
+  :custom-props="{
+    panels: { class: 'gap-4' },
+    root: { 'data-testid': 'calendar-range' },
+  }"
+/>
+```
+
+## Props
+
+| Prop              | Type                         | Default        | Description                                                 |
+| ----------------- | ---------------------------- | -------------- | ----------------------------------------------------------- |
+| `classes`         | `CalendarRangeClasses`       | —              | Classes for calendar range regions.                         |
+| `color`           | `CalendarColor`              | `"primary"`    | Accent color for tiles.                                     |
+| `customProps`     | `CalendarRangeCustomProps`   | —              | Extra props for internal parts.                             |
+| `defaultValue`    | `DateRangeValue \| null`     | `null`         | Uncontrolled initial value.                                 |
+| `disabled`        | `boolean`                    | `false`        | Disables the calendar range.                                |
+| `disableDates`    | `Date[]`                     | —              | Dates that cannot be selected.                              |
+| `disableMonths`   | `number[]`                   | —              | Month indexes that cannot be selected.                      |
+| `disableYears`    | `number[]`                   | —              | Years that cannot be selected.                              |
+| `hideMonths`      | `boolean`                    | `false`        | Hides the shared month selector and month panel.            |
+| `hideOutsideDays` | `boolean`                    | `false`        | Hides days outside the displayed month on both date panels. |
+| `hideWeekdays`    | `boolean`                    | `false`        | Hides weekday labels on both date panels.                   |
+| `hideYears`       | `boolean`                    | `false`        | Hides the shared year selector and year panel.              |
+| `maxDate`         | `Date`                       | —              | Latest selectable date.                                     |
+| `minDate`         | `Date`                       | —              | Earliest selectable date.                                   |
+| `orientation`     | `"horizontal" \| "vertical"` | `"horizontal"` | Dual calendar layout: side-by-side or stacked.              |
+| `previewDate`     | `Date \| null`               | —              | Controlled range-preview hover date.                        |
+| `readOnly`        | `boolean`                    | `false`        | Prevents selection.                                         |
+| `rounded`         | `CalendarRounded`            | `"md"`         | Border radius of tiles and chrome.                          |
+| `slots`           | `CalendarRangeSlots`         | —              | Named slots (`day`, optional `startAside` / `endAside`).    |
+| `startOfWeek`     | `StartOfWeek`                | `0`            | First day of the week.                                      |
+| `timeZone`        | `string`                     | —              | IANA time zone.                                             |
+| `tokens`          | `CalendarRangeTokens`        | —              | Token overrides.                                            |
+| `value`           | `DateRangeValue \| null`     | —              | Controlled range value (`[start, end]`).                    |
+| `viewDate`        | `Date`                       | —              | Controlled start (left) displayed month.                    |
+
+### v-model
+
+| Prop / Event        | Type                                      | Default | Description                           |
+| ------------------- | ----------------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `DateRangeValue \| null`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: DateRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
+
+## Events
+
+| Event                      | Payload                           | Description                                        |
+| -------------------------- | --------------------------------- | -------------------------------------------------- |
+| `v-on:change`              | `(value: DateRangeValue \| null)` | Emitted when the range changes.                    |
+| `v-on:preview-date-change` | `(date: Date \| null)`            | Emitted when the range preview hover date changes. |
+| `v-on:view-date-change`    | `(date: Date)`                    | Emitted when the start displayed month changes.    |
+
+## Related components
+
+Calendar, CalendarDate, DateRangePicker, DateRangeField

package/docs/components/CalendarYear.md

@@ -0,0 +1,53 @@
+# CalendarYear
+
+Year-grid panel with paging. Building block used by `Calendar` and `CalendarRange`.
+
+## Import
+
+```ts
+import { CalendarYear } from "@bridge-ui/vue/Components/CalendarYear";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<CalendarYear v-model="year" :page-size="15" />
+```
+
+## Props
+
+| Prop           | Type                      | Default     | Description                      |
+| -------------- | ------------------------- | ----------- | -------------------------------- |
+| `classes`      | `CalendarYearClasses`     | —           | Classes for calendar regions.    |
+| `color`        | `CalendarColor`           | `"primary"` | Accent color for year tiles.     |
+| `customProps`  | `CalendarYearCustomProps` | —           | Extra props for internal parts.  |
+| `disabled`     | `boolean`                 | `false`     | Disables the entire year grid.   |
+| `disableYears` | `number[]`                | —           | Years that cannot be selected.   |
+| `maxDate`      | `Date`                    | —           | Latest selectable date.          |
+| `minDate`      | `Date`                    | —           | Earliest selectable date.        |
+| `pageSize`     | `number`                  | `15`        | How many years to show per page. |
+| `readOnly`     | `boolean`                 | `false`     | Prevents selection.              |
+| `rounded`      | `CalendarRounded`         | `"md"`      | Border radius of year tiles.     |
+| `startYear`    | `number`                  | —           | First year of the visible page.  |
+| `timeZone`     | `string`                  | —           | IANA time zone.                  |
+| `tokens`       | `CalendarYearTokens`      | —           | Token overrides.                 |
+| `value`        | `number`                  | —           | Selected year.                   |
+
+### v-model
+
+| Prop / Event        | Type                      | Default | Description                           |
+| ------------------- | ------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `number`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: number) => void` | —       | Emitted when `v-model` should update. |
+
+## Events
+
+| Event         | Payload          | Description                      |
+| ------------- | ---------------- | -------------------------------- |
+| `v-on:change` | `(year: number)` | Emitted when a year is selected. |
+
+## Related components
+
+Calendar, CalendarDate, CalendarMonth

package/docs/components/DateField.md

@@ -0,0 +1,103 @@
+# DateField
+
+Form field that opens a `DatePicker` in an overlay (`auto` by default: `menu` on desktop, bottom `drawer` on mobile). Extends FormField props.
+
+## Import
+
+```ts
+import { DateField } from "@bridge-ui/vue/Components/DateField";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<DateField label="Start date" />
+
+<DateField
+  label="Birthday"
+  v-model="date"
+  description="Stored as a local calendar date."
+/>
+
+<DateField error label="Date" error-message="Pick a valid date." />
+```
+
+### Range
+
+```vue
+<DateField range label="Trip" v-model="range" />
+```
+
+### Overlay
+
+```vue
+<DateField label="Date" overlay="auto" />
+
+<DateField label="Date" overlay="drawer" />
+
+<DateField
+  label="Date"
+  overlay="modal"
+  :custom-props="{
+    modal: { size: 'sm', transition: 'none' },
+  }"
+/>
+```
+
+Default `overlay` is `auto`: `menu` on desktop and bottom `drawer` on mobile.
+When unset, `showFooter` defaults to `true` on mobile (`false` on desktop).
+
+## Props
+
+### DateField-specific
+
+| Prop              | Type                   | Default                               | Description                                                                           |
+| ----------------- | ---------------------- | ------------------------------------- | ------------------------------------------------------------------------------------- |
+| `classes`         | `DateFieldClasses`     | —                                     | Classes for field / input regions.                                                    |
+| `clearable`       | `boolean`              | `true`                                | Whether the value can be cleared.                                                     |
+| `customProps`     | `DateFieldCustomProps` | —                                     | Extra props for internal parts (`input`, `menu`, `modal`, `drawer`, `datePicker`, …). |
+| `defaultValue`    | `DatePickerModel`      | `null`                                | Uncontrolled initial value.                                                           |
+| `defaultView`     | `CalendarView`         | `"date"`                              | Initial calendar panel view.                                                          |
+| `disableDates`    | `Date[]`               | —                                     | Dates that cannot be selected.                                                        |
+| `disableMonths`   | `number[]`             | —                                     | Month indexes that cannot be selected.                                                |
+| `disableYears`    | `number[]`             | —                                     | Years that cannot be selected.                                                        |
+| `hideMonths`      | `boolean`              | `false`                               | Hides month navigation / panel.                                                       |
+| `hideOutsideDays` | `boolean`              | `false`                               | Hides days that fall outside the displayed month.                                     |
+| `hideWeekdays`    | `boolean`              | `false`                               | Hides weekday labels.                                                                 |
+| `hideYears`       | `boolean`              | `false`                               | Hides year navigation / panel.                                                        |
+| `maxDate`         | `Date`                 | —                                     | Latest selectable date.                                                               |
+| `minDate`         | `Date`                 | —                                     | Earliest selectable date.                                                             |
+| `multiple`        | `boolean`              | `false`                               | Allows selecting multiple dates.                                                      |
+| `overlay`         | `FieldOverlayMode`     | `"auto"`                              | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                                  |
+| `range`           | `boolean`              | `false`                               | Selects a date range.                                                                 |
+| `showFooter`      | `boolean`              | `false` (`true` on mobile when unset) | Shows Cancel / Apply on the nested picker.                                            |
+| `slots`           | `DateFieldSlots`       | —                                     | Named slots (`FormField` slots + calendar `day`).                                     |
+| `startOfWeek`     | `StartOfWeek`          | `0`                                   | First day of the week.                                                                |
+| `timeZone`        | `string`               | —                                     | IANA time zone.                                                                       |
+| `value`           | `DatePickerModel`      | —                                     | Controlled value.                                                                     |
+
+### v-model
+
+| Prop / Event        | Type                               | Default | Description                           |
+| ------------------- | ---------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `DatePickerModel`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: DatePickerModel) => void` | —       | Emitted when `v-model` should update. |
+
+### Inherited from FormField
+
+See [FormField](./FormField.md).
+
+## Events
+
+| Event         | Payload                    | Description                               |
+| ------------- | -------------------------- | ----------------------------------------- |
+| `v-on:change` | `(value: DatePickerModel)` | Emitted when the selection model changes. |
+| `v-on:clear`  | `()`                       | Emitted when the value is cleared.        |
+| `v-on:close`  | `()`                       | Emitted when the menu closes.             |
+| `v-on:open`   | `()`                       | Emitted when the menu opens.              |
+
+## Related components
+
+DatePicker, FormField, DateRangeField

package/docs/components/DatePicker.md

@@ -0,0 +1,80 @@
+# DatePicker
+
+Inline calendar picker for a single date, multiple dates, or a range. Optional Cancel / Apply footer.
+
+## Import
+
+```ts
+import { DatePicker } from "@bridge-ui/vue/Components/DatePicker";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<DatePicker />
+
+<DatePicker v-model="date" />
+
+<DatePicker range show-footer v-model="range" @cancel="() => {}" />
+```
+
+### customProps
+
+```vue
+<DatePicker
+  :custom-props="{
+    root: { 'data-testid': 'date-picker' },
+    applyButton: { type: 'button' },
+  }"
+/>
+```
+
+## Props
+
+| Prop              | Type                    | Default     | Description                                           |
+| ----------------- | ----------------------- | ----------- | ----------------------------------------------------- |
+| `classes`         | `DatePickerClasses`     | —           | Classes for picker regions.                           |
+| `color`           | `CalendarColor`         | `"primary"` | Accent color.                                         |
+| `customProps`     | `DatePickerCustomProps` | —           | Extra props for internal parts.                       |
+| `defaultValue`    | `DatePickerModel`       | `null`      | Uncontrolled initial value.                           |
+| `defaultView`     | `CalendarView`          | `"date"`    | Initial calendar panel view.                          |
+| `disabled`        | `boolean`               | `false`     | Disables the picker.                                  |
+| `disableDates`    | `Date[]`                | —           | Dates that cannot be selected.                        |
+| `disableMonths`   | `number[]`              | —           | Month indexes that cannot be selected.                |
+| `disableYears`    | `number[]`              | —           | Years that cannot be selected.                        |
+| `hideMonths`      | `boolean`               | `false`     | Hides month navigation / panel.                       |
+| `hideOutsideDays` | `boolean`               | `false`     | Hides days that fall outside the displayed month.     |
+| `hideWeekdays`    | `boolean`               | `false`     | Hides weekday labels.                                 |
+| `hideYears`       | `boolean`               | `false`     | Hides year navigation / panel.                        |
+| `maxDate`         | `Date`                  | —           | Latest selectable date.                               |
+| `minDate`         | `Date`                  | —           | Earliest selectable date.                             |
+| `multiple`        | `boolean`               | `false`     | Allows selecting multiple dates.                      |
+| `range`           | `boolean`               | `false`     | Selects a date range.                                 |
+| `readOnly`        | `boolean`               | `false`     | Prevents selection.                                   |
+| `rounded`         | `CalendarRounded`       | `"md"`      | Border radius of calendar tiles and chrome.           |
+| `showFooter`      | `boolean`               | `false`     | Shows Cancel / Apply. Selection is draft until Apply. |
+| `slots`           | `CalendarDateSlots`     | —           | Named slots forwarded to `Calendar` (`day`).          |
+| `startOfWeek`     | `StartOfWeek`           | `0`         | First day of the week.                                |
+| `timeZone`        | `string`                | —           | IANA time zone.                                       |
+| `tokens`          | `DatePickerTokens`      | —           | Token overrides.                                      |
+| `value`           | `DatePickerModel`       | —           | Controlled value.                                     |
+
+### v-model
+
+| Prop / Event        | Type                               | Default | Description                           |
+| ------------------- | ---------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `DatePickerModel`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: DatePickerModel) => void` | —       | Emitted when `v-model` should update. |
+
+## Events
+
+| Event         | Payload                    | Description                                                             |
+| ------------- | -------------------------- | ----------------------------------------------------------------------- |
+| `v-on:cancel` | `()`                       | Emitted when Cancel is pressed.                                         |
+| `v-on:change` | `(value: DatePickerModel)` | Emitted when Apply is pressed (`showFooter`) or when the value commits. |
+
+## Related components
+
+Calendar, DateField, DateRangePicker