@bridge-ui/vue 0.0.7 → 0.0.9

package/docs/components/Card.md

@@ -0,0 +1,287 @@
+# Card
+
+Surface container with optional title, action, and footer.
+
+## Import
+
+```ts
+import { Card } from "@bridge-ui/vue/Components/Card";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Card title="Card title">
+  Card body content goes here.
+</Card>
+
+<Card variant="outlined" title="Outlined card">
+  Outlined surface with a visible border.
+</Card>
+
+<Card title="Confirm changes">
+  Review your changes before saving.
+
+  <template #footer>
+    <div class="flex justify-end gap-2">
+      <Button size="sm" variant="flat">Cancel</Button>
+
+      <Button size="sm">Save</Button>
+    </div>
+  </template>
+</Card>
+```
+
+### Borderless
+
+```vue
+<div class="grid gap-4 sm:grid-cols-2">
+  <Card title="With dividers (default)">
+    Default card with header and footer dividers.
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <Button size="sm" variant="flat">Cancel</Button>
+
+        <Button size="sm">Save</Button>
+      </div>
+    </template>
+  </Card>
+
+  <Card borderless title="Borderless">
+    Header and footer borders are removed.
+
+    <template #footer>
+      <Button size="sm" variant="flat">Cancel</Button>
+
+        <Button size="sm">Save</Button>
+    </template>
+  </Card>
+</div>
+```
+
+### Title
+
+```vue
+<Card title="Via title prop">
+  Content rendered via the title prop.
+</Card>
+
+<Card>
+  <template #title>
+    <span class="text-primary-600">Custom title slot</span>
+  </template>
+
+  Content with a custom title slot.
+</Card>
+```
+
+### Action slot
+
+```vue
+<Card title="Card with actions">
+  <template #action>
+    <Button
+      size="sm"
+      variant="flat"
+      density="mini"
+      aria-label="More options"
+    >
+      <MoreHorizontal class="size-4" />
+    </Button>
+  </template>
+
+  Use the action slot for header controls.
+</Card>
+```
+
+### Footer slot
+
+```vue
+<Card title="Confirm changes">
+  Are you sure you want to proceed?
+
+  <template #footer>
+    <Button size="sm" variant="flat">Cancel</Button>
+
+      <Button size="sm" color="primary">Confirm</Button>
+  </template>
+</Card>
+```
+
+### Custom header slot
+
+```vue
+<Card>
+  <template #header>
+    <div
+      class="border-secondary-200 bg-primary-50 dark:border-secondary-600 dark:bg-primary-950/30 flex items-center gap-3 border-b px-4 py-3"
+    >
+      <div
+        class="bg-primary-500 flex size-10 items-center justify-center rounded-full text-sm font-semibold text-white"
+      >
+        JD
+      </div>
+      <div>
+        <p class="font-medium">Jane Doe</p>
+        <p class="text-secondary-500 text-sm">Custom header area</p>
+      </div>
+    </div>
+  </template>
+
+  Replaces the default title row entirely.
+</Card>
+```
+
+### Full composition
+
+```vue
+<Card shadow="lg" rounded="2xl" title="Project settings">
+  <template #action>
+    <Button size="sm" variant="outline">Edit</Button>
+  </template>
+
+  Title, action, body, and footer together with elevated styling.
+
+  <template #footer>
+    <Button size="sm" color="error" variant="flat">Delete</Button>
+
+      <Button size="sm" color="primary">Save changes</Button>
+  </template>
+</Card>
+```
+
+### Partial layouts
+
+```vue
+<Card title="Title only (no body children)" />
+
+<Card>Card with body content only.</Card>
+
+<Card>
+  <template #footer>
+    <p class="text-secondary-500 text-sm">Footer only</p>
+  </template>
+</Card>
+```
+
+### Classes
+
+```vue
+<Card
+  title="Styled parts"
+  :classes="{
+    footer: 'bg-secondary-50',
+    body: 'text-secondary-600',
+    root: 'ring-2 ring-primary-200',
+    title: 'text-xl font-bold tracking-tight',
+    header: 'bg-primary-50 dark:bg-primary-950/20',
+  }"
+>
+  Body text with custom classes applied.
+
+  <template #footer>
+    <span class="text-sm">Custom footer classes</span>
+  </template>
+</Card>
+```
+
+### customProps
+
+```vue
+<Card
+  title="Forwarded part attributes"
+  :custom-props="{
+    title: { id: 'card-demo-title' },
+    root: { 'data-testid': 'card-root' },
+    header: { 'aria-label': 'Card header' },
+    footer: { 'data-testid': 'card-footer' },
+    body: { role: 'region', 'aria-labelledby': 'card-demo-title' },
+  }"
+>
+  Card body with forwarded attributes on each part.
+
+  <template #footer>
+    <span>Inspect DOM for data attributes on each part.</span>
+  </template>
+</Card>
+```
+
+### Root HTML attributes
+
+```vue
+<Card
+  id="demo-card"
+  role="article"
+  class="max-w-md"
+  title="Root attrs"
+  aria-label="Demo card"
+>
+  class and other root HTML props are merged onto the root element.
+</Card>
+```
+
+### Combined
+
+```vue
+<Card
+  borderless
+  shadow="xl"
+  rounded="2xl"
+  padding="large"
+  variant="tonal"
+  title="Tonal card"
+  :classes="{ body: 'leading-relaxed' }"
+>
+  Large padding, 2xl rounded, xl shadow (elevated only — here variant is
+  tonal so shadow is ignored), borderless, and custom body classes.
+
+  <template #action>
+    <Button size="sm" variant="flat">Options</Button>
+  </template>
+
+  <template #footer>
+    <Button full size="sm">Continue</Button>
+  </template>
+</Card>
+```
+
+### customProps
+
+```vue
+<Card
+  title="Forwarded part attributes"
+  :custom-props="{
+    title: { id: 'card-demo-title' },
+    root: { 'data-testid': 'card-root' },
+    header: { 'aria-label': 'Card header' },
+    footer: { 'data-testid': 'card-footer' },
+    body: { role: 'region', 'aria-labelledby': 'card-demo-title' },
+  }"
+>
+  Card body with forwarded attributes on each part.
+
+  <template #footer>
+    <span>Inspect DOM for data attributes on each part.</span>
+  </template>
+</Card>
+```
+
+## Props
+
+| Prop          | Type              | Default    | Description                                                                                                                       |
+| ------------- | ----------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `borderless`  | `boolean`         | `false`    | Removes header and footer borders.                                                                                                |
+| `classes`     | `CardClasses`     | —          | The classes to apply to the card.                                                                                                 |
+| `customProps` | `CardCustomProps` | —          | Extra props for internal parts (`header`, `title`, `body`, `footer`, etc.). Root HTML attributes stay on the component top level. |
+| `padding`     | `CardPadding`     | "medium"   | Padding for header, body, and footer (horizontal alignment is shared).                                                            |
+| `rounded`     | `CardRounded`     | "sm"       | The roundedness of the card.                                                                                                      |
+| `shadow`      | `CardShadow`      | "sm"       | Shadow size. Only applied when `variant` is `elevated`.                                                                           |
+| `title`       | `string`          | —          | The title to apply to the card.                                                                                                   |
+| `variant`     | `CardVariant`     | "elevated" | Visual style of the card.                                                                                                         |
+
+## Related components
+
+Modal, List

package/docs/components/Checkbox.md

@@ -0,0 +1,87 @@
+# Checkbox
+
+Checkbox input with labels and form chrome. Extends FormControl props.
+
+## Import
+
+```ts
+import { Checkbox } from "@bridge-ui/vue/Components/Checkbox";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Checkbox
+  end-label="Accept terms"
+  description="Receive updates about your account."
+/>
+
+<Checkbox v-model="terms" end-label="Remember me" />
+
+<Checkbox indeterminate end-label="Select all" />
+```
+
+### Required and error
+
+```vue
+<Checkbox required end-label="Required field" />
+
+<Checkbox
+  error
+  end-label="Invalid option"
+  error-message="You must accept to continue."
+/>
+```
+
+### States
+
+```vue
+<Checkbox disabled :model-value="true" end-label="Disabled" />
+
+<Checkbox readonly :model-value="true" end-label="Read-only" />
+```
+
+### customProps
+
+```vue
+<Checkbox
+  end-label="Accept terms"
+  :custom-props="{
+    icon: { 'aria-hidden': true },
+    input: { name: 'terms', value: 'yes' },
+    control: { 'data-testid': 'terms-control' },
+  }"
+/>
+```
+
+## Props
+
+### Checkbox-specific
+
+| Prop            | Type                  | Default   | Description                                                                                |
+| --------------- | --------------------- | --------- | ------------------------------------------------------------------------------------------ |
+| `checked`       | `boolean`             | —         | Whether the checkbox is checked.                                                           |
+| `classes`       | `CheckboxClasses`     | —         | Classes for the form control chrome and the checkbox control.                              |
+| `color`         | `CheckboxColor`       | "primary" | The color to apply to the checkbox.                                                        |
+| `customProps`   | `CheckboxCustomProps` | —         | Extra props for internal parts.                                                            |
+| `indeterminate` | `boolean`             | `false`   | Whether the checkbox is in an indeterminate state.                                         |
+| `rounded`       | `CheckboxRounded`     | "sm"      | The roundedness of the checkbox control.                                                   |
+| `size`          | `CheckboxSize`        | "md"      | Size of the control and of form control labels (`2xs` … `2xl`, same scale as `FormField`). |
+| `slots`         | `CheckboxSlots`       | —         | Chrome slots and the control slot.                                                         |
+
+### v-model
+
+| Prop / Event        | Type                       | Default | Description                                                                  |
+| ------------------- | -------------------------- | ------- | ---------------------------------------------------------------------------- |
+| `modelValue`        | `boolean`                  | —       | Bound with `v-model`.                                                        |
+| `update:modelValue` | `(value: boolean) => void` | —       | Emitted when `v-model` should update. Listen with `v-on:update:model-value`. |
+
+### Inherited from FormControl
+
+See [FormControl](./FormControl.md).
+
+## Related components
+
+FormControl, Radio, Switch

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

package/docs/components/DateRangeField.md

@@ -0,0 +1,88 @@
+# DateRangeField
+
+Form field that opens a `DateRangePicker` in an overlay (`auto` by default: `menu` on desktop, bottom `drawer` on mobile). Extends FormField props.
+
+## Import
+
+```ts
+import { DateRangeField } from "@bridge-ui/vue/Components/DateRangeField";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<DateRangeField label="Stay" />
+
+<DateRangeField label="Trip" v-model="range" />
+
+<DateRangeField error label="Dates" error-message="Select a valid range." />
+```
+
+Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `auto`).
+On mobile, `drawer` / `modal` overlays use vertical dual-calendar layout when
+`orientation` is unset.
+
+### customProps
+
+```vue
+<DateRangeField
+  label="Stay"
+  :custom-props="{
+    input: { name: 'stay' },
+    dateRangePicker: { root: { 'data-testid': 'range-picker' } },
+  }"
+/>
+```
+
+## Props
+
+### DateRangeField-specific
+
+| Prop              | Type                         | Default                               | Description                                                                       |
+| ----------------- | ---------------------------- | ------------------------------------- | --------------------------------------------------------------------------------- |
+| `classes`         | `DateRangeFieldClasses`      | —                                     | Classes for field / input regions.                                                |
+| `clearable`       | `boolean`                    | `true`                                | Whether the value can be cleared.                                                 |
+| `customProps`     | `DateRangeFieldCustomProps`  | —                                     | Extra props for internal parts.                                                   |
+| `defaultValue`    | `DateRangeValue \| null`     | `null`                                | Uncontrolled initial value.                                                       |
+| `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.                                                         |
+| `orientation`     | `"horizontal" \| "vertical"` | `"horizontal"`                        | Dual calendar layout. Mobile `drawer` / `modal` default to `vertical` when unset. |
+| `overlay`         | `FieldOverlayMode`           | `"auto"`                              | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                              |
+| `showFooter`      | `boolean`                    | `false` (`true` on mobile when unset) | Shows Cancel / Apply on the nested picker.                                        |
+| `slots`           | `DateRangeFieldSlots`        | —                                     | Named slots (`FormField` slots + calendar `day`).                                 |
+| `startOfWeek`     | `StartOfWeek`                | `0`                                   | First day of the week.                                                            |
+| `timeZone`        | `string`                     | —                                     | IANA time zone.                                                                   |
+| `value`           | `DateRangeValue \| null`     | —                                     | Controlled value.                                                                 |
+
+### 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. |
+
+### Inherited from FormField
+
+See [FormField](./FormField.md).
+
+## Events
+
+| Event         | Payload                           | Description                        |
+| ------------- | --------------------------------- | ---------------------------------- |
+| `v-on:change` | `(value: DateRangeValue \| null)` | Emitted when the range 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
+
+DateRangePicker, FormField, DateField