@bridge-ui/vue 0.1.0 → 0.1.1

package/docs/components/ColorField.md

@@ -0,0 +1,93 @@
+# ColorField
+
+Form field that opens a `ColorPicker` in an overlay (`auto` by default: `menu` on desktop, bottom `drawer` on mobile). Extends FormField props. Shows a start swatch for the selected color. Uses the semantic `palette` icon by default.
+
+## Import
+
+```ts
+import { ColorField } from "@bridge-ui/vue/Components/ColorField";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<ColorField label="Brand color" />
+
+<ColorField label="Brand" v-model="color" />
+
+<ColorField error label="Color" error-message="Pick a valid color." />
+```
+
+Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `auto`).
+The input is read-only by default (picker only). Set `editable` to unlock typing; typed text is parsed on blur or Enter:
+
+```vue
+<ColorField editable label="Color" />
+```
+
+### Output format
+
+```vue
+<ColorField label="Hex" format="hex" v-model="color" />
+
+<ColorField label="RGBA" format="rgba" v-model="color" />
+```
+
+### customProps
+
+```vue
+<ColorField
+  label="Color"
+  :custom-props="{
+    input: { name: 'color' },
+    colorPicker: { root: { 'data-testid': 'color-picker' } },
+  }"
+/>
+```
+
+## Props
+
+### ColorField-specific
+
+| Prop           | Type                    | Default                                      | Description                                                                        |
+| -------------- | ----------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `alpha`        | `boolean`               | —                                            | Shows the alpha slider. Unset: `true` for `hexa` / `rgba` / `hsla`.                |
+| `classes`      | `ColorFieldClasses`     | —                                            | Classes for field / input regions.                                                 |
+| `clearable`    | `boolean`               | `true`                                       | Whether the value can be cleared.                                                  |
+| `customProps`  | `ColorFieldCustomProps` | —                                            | Extra props for internal parts.                                                    |
+| `defaultValue` | `string \| null`        | `null`                                       | Uncontrolled initial value.                                                        |
+| `editable`     | `boolean`               | `false`                                      | Unlocks the input. Typed text is parsed on blur or Enter.                          |
+| `fill`         | `boolean`               | —                                            | Fills the overlay width. Unset: `true` for `drawer`, `false` for `menu` / `modal`. |
+| `format`       | `ColorFormat`           | `"hex"`                                      | Serialized output: `hex`, `hexa`, `rgb`, `rgba`, `hsl`, `hsla`.                    |
+| `overlay`      | `FieldOverlayMode`      | `"auto"`                                     | Overlay shell: `menu`, `modal`, `drawer`, or `auto`.                               |
+| `showFooter`   | `boolean`               | `false` (`true` for modal/drawer when unset) | Shows Cancel / Apply on the nested picker.                                         |
+| `showSwatch`   | `boolean`               | `true`                                       | Shows the selected color at the start of the field.                                |
+| `swatches`     | `string[]`              | —                                            | Preset colors forwarded to the nested picker.                                      |
+
+### v-model
+
+| Prop / Event        | Type                              | Default | Description                           |
+| ------------------- | --------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `string \| null`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: string \| null) => void` | —       | Emitted when `v-model` should update. |
+
+### Inherited from FormField
+
+See [FormField](./FormField.md).
+
+## Events
+
+| Event         | Payload                   | Description                                    |
+| ------------- | ------------------------- | ---------------------------------------------- |
+| `v-on:apply`  | `()`                      | Emitted when Apply is pressed (`showFooter`).  |
+| `v-on:cancel` | `()`                      | Emitted when Cancel is pressed (`showFooter`). |
+| `v-on:change` | `(value: string \| null)` | Emitted when the color 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
+
+ColorPicker, FormField, FieldOverlay, Menu, Modal, Drawer

package/docs/components/ColorPicker.md

@@ -0,0 +1,78 @@
+# ColorPicker
+
+Inline color picker with a saturation/brightness area, hue slider, optional alpha, and preset swatches. Optional Cancel / Apply footer.
+
+## Import
+
+```ts
+import { ColorPicker } from "@bridge-ui/vue/Components/ColorPicker";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<ColorPicker />
+
+<ColorPicker :value="color" v-on:change="color = $event" />
+
+<ColorPicker
+  alpha
+  show-footer
+  format="rgba"
+  :value="color"
+  v-on:change="color = $event"
+/>
+```
+
+### Preset swatches
+
+```vue
+<ColorPicker
+  :value="color"
+  v-on:change="color = $event"
+  :swatches="['#0f766e', '#2563eb', '#dc2626', '#000000']"
+/>
+```
+
+### Output format
+
+```vue
+<ColorPicker format="hex" :value="color" v-on:change="color = $event" />
+
+<ColorPicker format="rgb" :value="color" v-on:change="color = $event" />
+
+<ColorPicker format="rgba" :value="color" v-on:change="color = $event" />
+```
+
+## Props
+
+| Prop           | Type                     | Default | Description                                                         |
+| -------------- | ------------------------ | ------- | ------------------------------------------------------------------- |
+| `alpha`        | `boolean`                | —       | Shows the alpha slider. Unset: `true` for `hexa` / `rgba` / `hsla`. |
+| `classes`      | `ColorPickerClasses`     | —       | Classes for picker regions.                                         |
+| `customProps`  | `ColorPickerCustomProps` | —       | Extra props for internal parts.                                     |
+| `defaultValue` | `string \| null`         | `null`  | Uncontrolled initial value.                                         |
+| `disabled`     | `boolean`                | `false` | Disables the picker.                                                |
+| `fill`         | `boolean`                | `false` | Fills the container width.                                          |
+| `format`       | `ColorFormat`            | `"hex"` | Serialized output: `hex`, `hexa`, `rgb`, `rgba`, `hsl`, `hsla`.     |
+| `readOnly`     | `boolean`                | `false` | Prevents selection.                                                 |
+| `rounded`      | `ColorPickerRounded`     | `"md"`  | Border radius of the picker shell and swatches.                     |
+| `showFooter`   | `boolean`                | `false` | Shows Cancel / Apply. Selection is draft until Apply.               |
+| `swatches`     | `string[]`               | —       | Preset colors shown below the sliders.                              |
+| `value`        | `string \| null`         | —       | Controlled value.                                                   |
+
+Picker tokens live on `components.ColorPicker` (`rounded`, `size`).
+
+## Events
+
+| Event         | Payload                   | Description                                                             |
+| ------------- | ------------------------- | ----------------------------------------------------------------------- |
+| `v-on:apply`  | `()`                      | Emitted when Apply is pressed (`showFooter`).                           |
+| `v-on:cancel` | `()`                      | Emitted when Cancel is pressed.                                         |
+| `v-on:change` | `(value: string \| null)` | Emitted when Apply is pressed (`showFooter`) or when the value commits. |
+
+## Related components
+
+ColorField, FormField, FieldOverlay

package/docs/components/DatePicker.md

@@ -73,7 +73,6 @@ Call `apply()` to commit and close the overlay, or `cancel()` to discard and clo
 | `slots`           | `DatePickerSlots`       | —           | Named slots (`day` on the calendar, `footer` for Cancel / Apply). |
 | `startOfWeek`     | `StartOfWeek`           | `0`         | First day of the week.                                            |
 | `timeZone`        | `string`                | —           | IANA time zone.                                                   |
-| `tokens`          | `DatePickerTokens`      | —           | Token overrides.                                                  |
 | `value`           | `DatePickerModel`       | —           | Controlled value.                                                 |
 
 ### v-model
@@ -83,6 +82,8 @@ Call `apply()` to commit and close the overlay, or `cancel()` to discard and clo
 | `modelValue`        | `DatePickerModel`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: DatePickerModel) => void` | —       | Emitted when `v-model` should update. |
 
+Calendar tokens live on `components.Calendar` (`color`, `day`, `rounded`).
+
 ## Events
 
 | Event         | Payload                    | Description                                                             |

package/docs/components/DateRangePicker.md

@@ -50,7 +50,6 @@ import { DateRangePicker } from "@bridge-ui/vue/Components/DateRangePicker";
 | `slots`           | `DateRangePickerSlots`       | —              | Named slots (`day` on the calendars, `footer` for Cancel / Apply). |
 | `startOfWeek`     | `StartOfWeek`                | `0`            | First day of the week.                                             |
 | `timeZone`        | `string`                     | —              | IANA time zone.                                                    |
-| `tokens`          | `DateRangePickerTokens`      | —              | Token overrides.                                                   |
 | `value`           | `DateRangeValue \| null`     | —              | Controlled value (`[start, end]`).                                 |
 
 ### v-model
@@ -60,6 +59,8 @@ import { DateRangePicker } from "@bridge-ui/vue/Components/DateRangePicker";
 | `modelValue`        | `DateRangeValue \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: DateRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Calendar tokens live on `components.Calendar` (`color`, `day`, `rounded`).
+
 ## Events
 
 | Event         | Payload                           | Description                                                             |

package/docs/components/DateTimePicker.md

@@ -54,7 +54,6 @@ import { DateTimePicker } from "@bridge-ui/vue/Components/DateTimePicker";
 | `slots`           | `DateTimePickerSlots`       | —           | Named slots (`day` on the calendar, `footer` for Cancel / Apply). |
 | `startOfWeek`     | `StartOfWeek`               | `0`         | First day of the week.                                            |
 | `timeZone`        | `string`                    | —           | IANA time zone.                                                   |
-| `tokens`          | `DateTimePickerTokens`      | —           | Token overrides.                                                  |
 | `value`           | `Date \| null`              | —           | Controlled date-time value.                                       |
 
 ### v-model
@@ -64,6 +63,8 @@ import { DateTimePicker } from "@bridge-ui/vue/Components/DateTimePicker";
 | `modelValue`        | `Date \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: Date \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Calendar tokens live on `components.Calendar`. Time panel tokens live on `components.TimePanel`.
+
 ## Events
 
 | Event         | Payload                 | Description                                                             |

package/docs/components/DateTimeRangePicker.md

@@ -54,7 +54,6 @@ import { DateTimeRangePicker } from "@bridge-ui/vue/Components/DateTimeRangePick
 | `slots`           | `DateTimeRangePickerSlots`       | —              | Named slots (`day` on the calendars, `footer` for Cancel / Apply). |
 | `startOfWeek`     | `StartOfWeek`                    | `0`            | First day of the week.                                             |
 | `timeZone`        | `string`                         | —              | IANA time zone.                                                    |
-| `tokens`          | `DateTimeRangePickerTokens`      | —              | Token overrides.                                                   |
 | `value`           | `DateRangeValue \| null`         | —              | Controlled value (`[start, end]` date-times).                      |
 
 ### v-model
@@ -64,6 +63,8 @@ import { DateTimeRangePicker } from "@bridge-ui/vue/Components/DateTimeRangePick
 | `modelValue`        | `DateRangeValue \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: DateRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Calendar tokens live on `components.Calendar`. Time panel tokens live on `components.TimePanel`.
+
 ## Events
 
 | Event         | Payload                           | Description                                                             |

package/docs/components/FieldOverlay.md

@@ -100,4 +100,4 @@ overlay. Use the picker slot callbacks in custom footers so Apply still commits.
 
 ## Related components
 
-Menu, Modal, Drawer, Select, Autocomplete, DateField, TimeField, DateTimeField, DateRangeField, TimeRangeField, DateTimeRangeField, Listbox
+Menu, Modal, Drawer, Select, Autocomplete, DateField, TimeField, DateTimeField, DateRangeField, TimeRangeField, DateTimeRangeField, ColorField, Listbox

package/docs/components/Select.md

@@ -170,7 +170,7 @@ When unset, `showFooter` defaults to `true` for `modal` / `drawer` overlays (`fa
 
 ### Inherited from FormField
 
-See [FormField](./FormField.md) (building-block chrome). Field tokens live on `components.Select` (`size`, `color`, `rounded`, `variant`, …). Dropdown option tokens are nested under `components.Select.tokens.listbox`.
+See [FormField](./FormField.md) (building-block chrome). Field tokens live on `components.Select` (`size`, `color`, `rounded`, `variant`, …). Dropdown option tokens live on `components.Listbox`.
 
 ## Slots
 

package/docs/components/Stepper.md

@@ -0,0 +1,60 @@
+# Stepper
+
+Multi-step flow indicator for checkout, onboarding, and wizards. Shows progress through ordered steps; optional click-to-navigate when steps are completed or `linear` is off. Compose with `Step`.
+
+Wizard footer actions (`Next` / `Back`) stay in the app — `Stepper` is the indicator (plus optional vertical step bodies). A labeled progress bar is `Progress`, not `Stepper`.
+
+## Import
+
+```ts
+import { Stepper } from "@bridge-ui/vue/Components/Stepper";
+import { Step } from "@bridge-ui/vue/Components/Step";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Stepper v-model="active">
+  <Step label="Account" />
+  <Step label="Profile" />
+  <Step label="Confirm" />
+</Stepper>
+```
+
+### Vertical
+
+```vue
+<Stepper v-model="active" orientation="vertical">
+  <Step label="Cart" description="Review items">
+    Cart details…
+  </Step>
+  <Step label="Shipping" description="Address">
+    Shipping form…
+  </Step>
+  <Step label="Pay" description="Payment">
+    Payment form…
+  </Step>
+</Stepper>
+```
+
+### Non-linear
+
+```vue
+<Stepper :linear="false" v-model="active">
+  <Step label="Account" />
+  <Step label="Profile" />
+  <Step label="Confirm" />
+</Stepper>
+```
+
+### Error and disabled
+
+```vue
+<Stepper v-model="active">
+  <Step label="Account" />
+  <Step error label="Profile" />
+  <Step disabled label="Confirm" />
+</Stepper>
+```

package/docs/components/TimePanel.md

@@ -37,7 +37,6 @@ import { TimePanel } from "@bridge-ui/vue/Components/TimePanel";
 | `rounded`      | `CalendarRounded`      | `"md"`      | Border radius of time tiles.                    |
 | `showSeconds`  | `boolean`              | `false`     | Shows seconds in the panel and formatted value. |
 | `timeZone`     | `string`               | —           | IANA time zone.                                 |
-| `tokens`       | `TimePanelTokens`      | —           | Token overrides.                                |
 | `value`        | `Date \| null`         | —           | Selected time (`Date` wall clock).              |
 
 ### v-model
@@ -47,6 +46,8 @@ import { TimePanel } from "@bridge-ui/vue/Components/TimePanel";
 | `modelValue`        | `Date \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: Date \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Time panel tokens live on `components.TimePanel` (`color`, `rounded`).
+
 ## Events
 
 | Event         | Payload                 | Description                    |

package/docs/components/TimePicker.md

@@ -42,7 +42,6 @@ import { TimePicker } from "@bridge-ui/vue/Components/TimePicker";
 | `showSeconds`  | `boolean`               | `false`     | Shows seconds in the panel and formatted value.       |
 | `slots`        | `TimePickerSlots`       | —           | Named slots (`footer` for Cancel / Apply).            |
 | `timeZone`     | `string`                | —           | IANA time zone.                                       |
-| `tokens`       | `TimePickerTokens`      | —           | Token overrides.                                      |
 | `value`        | `Date \| null`          | —           | Controlled value.                                     |
 
 ### v-model
@@ -52,6 +51,8 @@ import { TimePicker } from "@bridge-ui/vue/Components/TimePicker";
 | `modelValue`        | `Date \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: Date \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Time panel tokens live on `components.TimePanel` (`color`, `rounded`).
+
 ## Events
 
 | Event         | Payload                 | Description                                                             |

package/docs/components/TimeRangePicker.md

@@ -45,7 +45,6 @@ import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
 | `slots`        | `TimeRangePickerSlots`       | —              | Named slots (`footer` for Cancel / Apply).            |
 | `startTitle`   | `string`                     | `"Start time"` | Label above the start time panel.                     |
 | `timeZone`     | `string`                     | —              | IANA time zone.                                       |
-| `tokens`       | `TimeRangePickerTokens`      | —              | Token overrides.                                      |
 | `value`        | `TimeRangeValue \| null`     | —              | Controlled value (`[start, end]`).                    |
 
 ### v-model
@@ -55,6 +54,8 @@ import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
 | `modelValue`        | `TimeRangeValue \| null`                  | —       | Bound with `v-model`.                 |
 | `update:modelValue` | `(value: TimeRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
 
+Time panel tokens live on `components.TimePanel` (`color`, `rounded`).
+
 ## Events
 
 | Event         | Payload                           | Description                                                             |

package/docs/examples/icon-fontawesome.ts

@@ -24,6 +24,7 @@ import {
   faClock,
   faEye,
   faEyeSlash,
+  faPalette,
   faSpinner,
   faTriangleExclamation,
   faUpDown,
@@ -92,6 +93,7 @@ const icons = {
   loader: faSpinner,
   info: faCircleInfo,
   eyeOff: faEyeSlash,
+  palette: faPalette,
   error: faCircleXmark,
   success: faCircleCheck,
   chevronUp: faChevronUp,

package/docs/examples/icon-heroicons.ts

@@ -22,6 +22,7 @@ import {
   EyeIcon,
   EyeSlashIcon,
   InformationCircleIcon,
+  SwatchIcon,
   UserIcon,
   XCircleIcon,
   XMarkIcon,
@@ -39,6 +40,7 @@ const icons = {
   check: CheckIcon,
   clock: ClockIcon,
   error: XCircleIcon,
+  palette: SwatchIcon,
   eyeOff: EyeSlashIcon,
   loader: ArrowPathIcon,
   success: CheckCircleIcon,

package/docs/examples/icon-lucide.ts

@@ -22,6 +22,7 @@ import {
   EyeOff,
   Info,
   Loader2,
+  Palette,
   TriangleAlert,
   User,
   X,
@@ -42,6 +43,7 @@ const icons = {
   error: CircleX,
   eyeOff: EyeOff,
   loader: Loader2,
+  palette: Palette,
   alert: CircleAlert,
   calendar: Calendar,
   success: CircleCheck,

package/docs/examples/icon-phosphor.ts

@@ -19,6 +19,7 @@ import {
   PhEye,
   PhEyeSlash,
   PhInfo,
+  PhPalette,
   PhSpinnerGap,
   PhUser,
   PhWarning,
@@ -41,6 +42,7 @@ const icons = {
   clock: PhClock,
   error: PhXCircle,
   eyeOff: PhEyeSlash,
+  palette: PhPalette,
   warning: PhWarning,
   loader: PhSpinnerGap,
   chevronUp: PhCaretUp,

package/docs/examples/icon-tabler.ts

@@ -22,6 +22,7 @@ import {
   IconEyeOff,
   IconInfoCircle,
   IconLoader2,
+  IconPalette,
   IconSelector,
   IconUser,
   IconX,
@@ -42,6 +43,7 @@ const icons = {
   eyeOff: IconEyeOff,
   loader: IconLoader2,
   info: IconInfoCircle,
+  palette: IconPalette,
   alert: IconAlertCircle,
   success: IconCircleCheck,
   chevronUp: IconChevronUp,

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "license": "MIT",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "author": "BridgeUI",
   "sideEffects": false,
   "name": "@bridge-ui/vue",
@@ -83,7 +83,7 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@bridge-ui/core": "^0.1.0",
+    "@bridge-ui/core": "^0.1.1",
     "clsx": "^2.1.1",
     "es-toolkit": "^1.50.0",
     "tailwind-merge": "^3.6.0"