@bridge-ui/vue 0.0.10 → 0.1.0

package/docs/components/TimeRangeField.md

@@ -20,6 +20,12 @@ import { TimeRangeField } from "@bridge-ui/vue/Components/TimeRangeField";
 
 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. The field does not parse or commit typed text — handle that in your own component if needed:
+
+```vue
+<TimeRangeField editable label="Hours" />
+```
+
 ### customProps
 
 ```vue
@@ -36,23 +42,25 @@ Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `au
 
 ### TimeRangeField-specific
 
-| Prop           | Type                        | Default                               | Description                                          |
-| -------------- | --------------------------- | ------------------------------------- | ---------------------------------------------------- |
-| `ampm`         | `boolean`                   | `false`                               | Uses a 12-hour clock with an AM/PM column.           |
-| `classes`      | `TimeRangeFieldClasses`     | —                                     | Classes for field / input regions.                   |
-| `clearable`    | `boolean`                   | `true`                                | Whether the value can be cleared.                    |
-| `customProps`  | `TimeRangeFieldCustomProps` | —                                     | Extra props for internal parts.                      |
-| `defaultValue` | `TimeRangeValue \| null`    | `null`                                | Uncontrolled initial value.                          |
-| `disableTimes` | `Date[]`                    | —                                     | Times that cannot be selected.                       |
-| `interval`     | `number`                    | `1`                                   | Minute step between options.                         |
-| `maxTime`      | `Date`                      | —                                     | Latest selectable time.                              |
-| `minTime`      | `Date`                      | —                                     | Earliest selectable time.                            |
-| `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.           |
-| `showSeconds`  | `boolean`                   | `false`                               | Shows seconds in the panel and formatted value.      |
-| `slots`        | `TimeRangeFieldSlots`       | —                                     | Named slots (`FormField` slots).                     |
-| `timeZone`     | `string`                    | —                                     | IANA time zone.                                      |
-| `value`        | `TimeRangeValue \| null`    | —                                     | Controlled value.                                    |
+| Prop           | Type                        | Default                                      | Description                                                                        |
+| -------------- | --------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `ampm`         | `boolean`                   | `false`                                      | Uses a 12-hour clock with an AM/PM column.                                         |
+| `classes`      | `TimeRangeFieldClasses`     | —                                            | Classes for field / input regions.                                                 |
+| `clearable`    | `boolean`                   | `true`                                       | Whether the value can be cleared.                                                  |
+| `customProps`  | `TimeRangeFieldCustomProps` | —                                            | Extra props for internal parts.                                                    |
+| `defaultValue` | `TimeRangeValue \| null`    | `null`                                       | Uncontrolled initial value.                                                        |
+| `disableTimes` | `Date[]`                    | —                                            | Times that cannot be selected.                                                     |
+| `editable`     | `boolean`                   | `false`                                      | Unlocks the input. Does not parse or commit typed text.                            |
+| `fill`         | `boolean`                   | —                                            | Fills the overlay width. Unset: `true` for `drawer`, `false` for `menu` / `modal`. |
+| `interval`     | `number`                    | `1`                                          | Minute step between options.                                                       |
+| `maxTime`      | `Date`                      | —                                            | Latest selectable time.                                                            |
+| `minTime`      | `Date`                      | —                                            | Earliest selectable time.                                                          |
+| `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.                                         |
+| `showSeconds`  | `boolean`                   | `false`                                      | Shows seconds in the panel and formatted value.                                    |
+| `slots`        | `TimeRangeFieldSlots`       | —                                            | Named slots (`FormField` slots + footer).                                          |
+| `timeZone`     | `string`                    | —                                            | IANA time zone.                                                                    |
+| `value`        | `TimeRangeValue \| null`    | —                                            | Controlled value.                                                                  |
 
 ### v-model
 
@@ -67,12 +75,14 @@ See [FormField](./FormField.md).
 
 ## Events
 
-| Event         | Payload                           | Description                        |
-| ------------- | --------------------------------- | ---------------------------------- |
-| `v-on:change` | `(value: TimeRangeValue \| 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.       |
+| 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: TimeRangeValue \| 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
 

package/docs/components/TimeRangePicker.md

@@ -32,6 +32,8 @@ import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
 | `disabled`     | `boolean`                    | `false`        | Disables the picker.                                  |
 | `disableTimes` | `Date[]`                     | —              | Times that cannot be selected.                        |
 | `endTitle`     | `string`                     | `"End time"`   | Label above the end time panel.                       |
+| `error`        | `boolean`                    | `false`        | Applies the error color palette to tiles.             |
+| `fill`         | `boolean`                    | `false`        | Fills the container width.                            |
 | `interval`     | `number`                     | `1`            | Minute step between options.                          |
 | `maxTime`      | `Date`                       | —              | Latest selectable time.                               |
 | `minTime`      | `Date`                       | —              | Earliest selectable time.                             |
@@ -40,6 +42,7 @@ import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
 | `rounded`      | `CalendarRounded`            | `"md"`         | Border radius of time tiles and chrome.               |
 | `showFooter`   | `boolean`                    | `false`        | Shows Cancel / Apply. Selection is draft until Apply. |
 | `showSeconds`  | `boolean`                    | `false`        | Shows seconds in the panel and formatted value.       |
+| `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.                                      |
@@ -56,6 +59,7 @@ import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
 
 | Event         | Payload                           | Description                                                             |
 | ------------- | --------------------------------- | ----------------------------------------------------------------------- |
+| `v-on:apply`  | `()`                              | Emitted when Apply is pressed (`showFooter`).                           |
 | `v-on:cancel` | `()`                              | Emitted when Cancel is pressed.                                         |
 | `v-on:change` | `(value: TimeRangeValue \| null)` | Emitted when Apply is pressed (`showFooter`) or when the value commits. |
 

package/docs/components/ToggleGroup.md

@@ -0,0 +1,86 @@
+# ToggleGroup
+
+Segmented control for one or more labeled options in a shared track. Single selection by default; set `multiple` for multi-select. Use `Switch` for on/off. Compose with `ToggleItem`.
+
+## Import
+
+```ts
+import { ToggleGroup } from "@bridge-ui/vue/Components/ToggleGroup";
+import { ToggleItem } from "@bridge-ui/vue/Components/ToggleItem";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { ToggleGroup } from "@bridge-ui/vue/Components/ToggleGroup";
+import { ToggleItem } from "@bridge-ui/vue/Components/ToggleItem";
+
+const lib = ref("vue");
+</script>
+
+<template>
+  <ToggleGroup v-model="lib" color="success" aria-label="Library">
+    <ToggleItem value="react">React</ToggleItem>
+    <ToggleItem value="vue">Vue</ToggleItem>
+  </ToggleGroup>
+</template>
+```
+
+### Multiple
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { ToggleGroup } from "@bridge-ui/vue/Components/ToggleGroup";
+import { ToggleItem } from "@bridge-ui/vue/Components/ToggleItem";
+
+const libs = ref(["vue"]);
+</script>
+
+<template>
+  <ToggleGroup multiple v-model="libs" aria-label="Libraries">
+    <ToggleItem value="react">React</ToggleItem>
+    <ToggleItem value="vue">Vue</ToggleItem>
+  </ToggleGroup>
+</template>
+```
+
+### With icons
+
+```vue
+<ToggleGroup v-model="view" aria-label="View">
+  <ToggleItem value="list" aria-label="List" :start-icon="List" />
+  <ToggleItem value="grid" aria-label="Grid" :start-icon="LayoutGrid" />
+</ToggleGroup>
+```
+
+### Variants
+
+`solid` uses a soft semantic fill on the selected segment. `outline` keeps a quieter ring accent.
+
+```vue
+<ToggleGroup v-model="lib" variant="solid" aria-label="Solid" />
+<ToggleGroup v-model="lib" variant="outline" aria-label="Outline" />
+```
+
+### Size
+
+```vue
+<ToggleGroup size="sm" v-model="lib" aria-label="Small">
+  <ToggleItem value="react">React</ToggleItem>
+  <ToggleItem value="vue">Vue</ToggleItem>
+</ToggleGroup>
+```
+
+### Full width
+
+```vue
+<ToggleGroup full v-model="lib" aria-label="Library">
+  <ToggleItem value="react">React</ToggleItem>
+  <ToggleItem value="vue">Vue</ToggleItem>
+</ToggleGroup>
+```

package/docs/examples/date-date-fns.ts

@@ -45,7 +45,7 @@ import type {
   DateAdapter,
   DateAdapterContext,
   DateAdapterTimeOptions,
-} from "@bridge-ui/core";
+} from "@bridge-ui/core/Adapters";
 
 /**
  * Options for {@link createDateFnsDateAdapter}.

package/docs/examples/date-dayjs.ts

@@ -18,7 +18,7 @@ import type {
   DateAdapter,
   DateAdapterContext,
   DateAdapterTimeOptions,
-} from "@bridge-ui/core";
+} from "@bridge-ui/core/Adapters";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);

package/docs/examples/date-luxon.ts

@@ -15,7 +15,7 @@ import type {
   DateAdapter,
   DateAdapterContext,
   DateAdapterTimeOptions,
-} from "@bridge-ui/core";
+} from "@bridge-ui/core/Adapters";
 
 /**
  * Options for {@link createLuxonDateAdapter}.

package/docs/examples/date-moment.ts

@@ -15,7 +15,7 @@ import type {
   DateAdapter,
   DateAdapterContext,
   DateAdapterTimeOptions,
-} from "@bridge-ui/core";
+} from "@bridge-ui/core/Adapters";
 
 /**
  * Options for {@link createMomentDateAdapter}.

package/docs/examples/i18n-dictionary.ts

@@ -13,7 +13,7 @@
 import { get } from "es-toolkit/compat";
 
 // ** Core Imports
-import type { I18nAdapter } from "@bridge-ui/core";
+import type { I18nAdapter } from "@bridge-ui/core/Adapters";
 
 // prettier-ignore
 const MESSAGES: Record<string, Record<string, string>> = {

package/docs/examples/i18n-vue-i18n.ts

@@ -12,7 +12,7 @@
 import type { Composer } from "vue-i18n";
 
 // ** Core Imports
-import type { I18nAdapter } from "@bridge-ui/core";
+import type { I18nAdapter } from "@bridge-ui/core/Adapters";
 
 /**
  * Builds a vue-i18n-backed {@link I18nAdapter} for Bridge chrome strings.

package/docs/examples/icon-fontawesome.ts

@@ -35,9 +35,9 @@ import { get, isArray, isObject, isString } from "es-toolkit/compat";
 import { defineComponent, h, type Component } from "vue";
 
 // ** Core Imports
-import type { IconAdapter, SemanticIconName } from "@bridge-ui/core";
+import type { IconAdapter, SemanticIconName } from "@bridge-ui/core/Adapters";
 
-declare module "@bridge-ui/core" {
+declare module "@bridge-ui/core/Adapters" {
   interface IconSourceValueOverrides {
     fontAwesome: IconDefinition;
   }

package/docs/examples/icon-heroicons.ts

@@ -29,7 +29,7 @@ import {
 import { get } from "es-toolkit/compat";
 
 // ** Core Imports
-import type { IconAdapter, SemanticIconName } from "@bridge-ui/core";
+import type { IconAdapter, SemanticIconName } from "@bridge-ui/core/Adapters";
 
 const icons = {
   eye: EyeIcon,

package/docs/examples/icon-lucide.ts

@@ -29,7 +29,7 @@ import {
 import { get } from "es-toolkit/compat";
 
 // ** Core Imports
-import type { IconAdapter, SemanticIconName } from "@bridge-ui/core";
+import type { IconAdapter, SemanticIconName } from "@bridge-ui/core/Adapters";
 
 const icons = {
   eye: Eye,

package/docs/examples/icon-phosphor.ts

@@ -29,7 +29,7 @@ import {
 import { get } from "es-toolkit/compat";
 
 // ** Core Imports
-import type { IconAdapter, SemanticIconName } from "@bridge-ui/core";
+import type { IconAdapter, SemanticIconName } from "@bridge-ui/core/Adapters";
 
 const icons = {
   eye: PhEye,

package/docs/examples/icon-tabler.ts

@@ -29,7 +29,7 @@ import {
 import { get } from "es-toolkit/compat";
 
 // ** Core Imports
-import type { IconAdapter, SemanticIconName } from "@bridge-ui/core";
+import type { IconAdapter, SemanticIconName } from "@bridge-ui/core/Adapters";
 
 const icons = {
   eye: IconEye,

package/package.json

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