@bridge-ui/vue 0.0.7 → 0.0.9

package/docs/components/Button.md

@@ -0,0 +1,93 @@
+# Button
+
+Primary action control. Renders as `button`, `a`, or `span` via the `as` prop.
+
+## Import
+
+```ts
+import { Button } from "@bridge-ui/vue/Components/Button";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Button color="primary">Click me</Button>
+
+<Button variant="outline" :start-icon="Plus">
+  With icon
+</Button>
+
+<Button as="a" href="https://example.com">
+  External link
+</Button>
+```
+
+### Density
+
+```vue
+<Button density="mini" :icon="Settings" aria-label="Settings" />
+```
+
+### States
+
+```vue
+<Button loading>Loading</Button>
+<Button disabled>Disabled</Button>
+```
+
+### Slots
+
+```vue
+<Button>
+  <template #start>
+    <span class="text-xs opacity-80">◀</span>
+  </template>
+
+  With slots
+
+  <template #end>
+    <span class="text-xs opacity-80">▶</span>
+  </template>
+</Button>
+```
+
+### customProps
+
+```vue
+<Button
+  :icon="Plus"
+  :custom-props="{
+    startIcon: { 'aria-hidden': true },
+    root: { id: 'add-btn', type: 'button' },
+  }"
+>
+  Add item
+</Button>
+```
+
+## Props
+
+| Prop          | Type                        | Default   | Description                                                                                                                         |
+| ------------- | --------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `as`          | `"a" \| "span" \| "button"` | "button"  | The element to render as.                                                                                                           |
+| `classes`     | `ButtonClasses`             | —         | The classes to apply to the button.                                                                                                 |
+| `color`       | `ButtonColor`               | "primary" | The color to apply to the button.                                                                                                   |
+| `customProps` | `ButtonCustomProps`         | —         | Extra props for internal parts (`startIcon`, `endIcon`, slot wrappers, etc.). Root HTML attributes stay on the component top level. |
+| `density`     | `ButtonDensity`             | "default" | The density of the button.                                                                                                          |
+| `disabled`    | `boolean`                   | `false`   | Whether the button is disabled.                                                                                                     |
+| `endIcon`     | `LucideIcon`                | —         | Icon at the **inline end** (physical right in `ltr`, physical left in `rtl`).                                                       |
+| `full`        | `boolean`                   | `false`   | Whether the button is full width.                                                                                                   |
+| `href`        | `string`                    | —         | The href to apply to the button.                                                                                                    |
+| `icon`        | `LucideIcon`                | —         | Icon for mini density (replaces label and start/end icons).                                                                         |
+| `loading`     | `boolean`                   | `false`   | Whether the button is loading.                                                                                                      |
+| `rounded`     | `ButtonRounded`             | "md"      | The roundedness of the button.                                                                                                      |
+| `size`        | `ButtonSize`                | "md"      | The size of the button.                                                                                                             |
+| `startIcon`   | `LucideIcon`                | —         | Icon at the **inline start** (physical left in `ltr`, physical right in `rtl`).                                                     |
+| `text`        | `string`                    | —         | Label text when the default slot is not used.                                                                                       |
+| `variant`     | `ButtonVariant`             | "solid"   | The variant of the button.                                                                                                          |
+
+## Related components
+
+Link, Icon

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