@bridge-ui/vue 0.0.7 → 0.0.9

package/docs/components/TimePanel.md

@@ -0,0 +1,56 @@
+# TimePanel
+
+Scrollable hour / minute (/ AM·PM) columns for selecting a wall-clock time. Building block for time pickers.
+
+## Import
+
+```ts
+import { TimePanel } from "@bridge-ui/vue/Components/TimePanel";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<TimePanel v-model="time" />
+
+<TimePanel ampm :interval="5" v-model="time" />
+```
+
+## Props
+
+| Prop           | Type                   | Default     | Description                                     |
+| -------------- | ---------------------- | ----------- | ----------------------------------------------- |
+| `ampm`         | `boolean`              | `false`     | Uses a 12-hour clock with an AM/PM column.      |
+| `classes`      | `TimePanelClasses`     | —           | Classes for panel regions.                      |
+| `color`        | `CalendarColor`        | `"primary"` | Accent color for time tiles.                    |
+| `customProps`  | `TimePanelCustomProps` | —           | Extra props for internal parts.                 |
+| `disabled`     | `boolean`              | `false`     | Disables the entire panel.                      |
+| `disableTimes` | `Date[]`               | —           | Times that cannot be selected.                  |
+| `interval`     | `number`               | `1`         | Minute step between options.                    |
+| `maxTime`      | `Date`                 | —           | Latest selectable time.                         |
+| `minTime`      | `Date`                 | —           | Earliest selectable time.                       |
+| `readOnly`     | `boolean`              | `false`     | Prevents selection.                             |
+| `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
+
+| Prop / Event        | Type                            | Default | Description                           |
+| ------------------- | ------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `Date \| null`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: Date \| null) => void` | —       | Emitted when `v-model` should update. |
+
+## Events
+
+| Event         | Payload                 | Description                    |
+| ------------- | ----------------------- | ------------------------------ |
+| `v-on:change` | `(value: Date \| null)` | Emitted when the time changes. |
+
+## Related components
+
+TimePicker, TimeField, DateTimePicker

package/docs/components/TimePicker.md

@@ -0,0 +1,61 @@
+# TimePicker
+
+Inline time picker built on `TimePanel`. Value is a `Date` carrying wall-clock hours/minutes.
+
+## Import
+
+```ts
+import { TimePicker } from "@bridge-ui/vue/Components/TimePicker";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<TimePicker />
+
+<TimePicker v-model="time" />
+
+<TimePicker ampm :interval="15" show-footer v-model="time" />
+```
+
+## Props
+
+| Prop           | Type                    | Default     | Description                                           |
+| -------------- | ----------------------- | ----------- | ----------------------------------------------------- |
+| `ampm`         | `boolean`               | `false`     | Uses a 12-hour clock with an AM/PM column.            |
+| `classes`      | `TimePickerClasses`     | —           | Classes for picker regions.                           |
+| `color`        | `CalendarColor`         | `"primary"` | Accent color.                                         |
+| `customProps`  | `TimePickerCustomProps` | —           | Extra props for internal parts.                       |
+| `defaultValue` | `Date \| null`          | `null`      | Uncontrolled initial value.                           |
+| `disabled`     | `boolean`               | `false`     | Disables the picker.                                  |
+| `disableTimes` | `Date[]`                | —           | Times that cannot be selected.                        |
+| `interval`     | `number`                | `1`         | Minute step between options.                          |
+| `maxTime`      | `Date`                  | —           | Latest selectable time.                               |
+| `minTime`      | `Date`                  | —           | Earliest selectable time.                             |
+| `readOnly`     | `boolean`               | `false`     | Prevents selection.                                   |
+| `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.       |
+| `timeZone`     | `string`                | —           | IANA time zone.                                       |
+| `tokens`       | `TimePickerTokens`      | —           | Token overrides.                                      |
+| `value`        | `Date \| null`          | —           | Controlled value.                                     |
+
+### v-model
+
+| Prop / Event        | Type                            | Default | Description                           |
+| ------------------- | ------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `Date \| null`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: Date \| null) => void` | —       | Emitted when `v-model` should update. |
+
+## Events
+
+| Event         | Payload                 | Description                                                             |
+| ------------- | ----------------------- | ----------------------------------------------------------------------- |
+| `v-on:cancel` | `()`                    | Emitted when Cancel is pressed.                                         |
+| `v-on:change` | `(value: Date \| null)` | Emitted when Apply is pressed (`showFooter`) or when the value commits. |
+
+## Related components
+
+TimePanel, TimeField, DateTimePicker

package/docs/components/TimeRangeField.md

@@ -0,0 +1,79 @@
+# TimeRangeField
+
+Form field that opens a `TimeRangePicker` in an overlay (`auto` by default: `menu` on desktop, bottom `drawer` on mobile). Extends FormField props.
+
+## Import
+
+```ts
+import { TimeRangeField } from "@bridge-ui/vue/Components/TimeRangeField";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<TimeRangeField label="Hours" />
+
+<TimeRangeField ampm label="Shift" v-model="range" />
+```
+
+Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `auto`).
+
+### customProps
+
+```vue
+<TimeRangeField
+  label="Hours"
+  :custom-props="{
+    input: { name: 'hours' },
+    timeRangePicker: { root: { 'data-testid': 'tr-picker' } },
+  }"
+/>
+```
+
+## Props
+
+### 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.                                    |
+
+### v-model
+
+| Prop / Event        | Type                                      | Default | Description                           |
+| ------------------- | ----------------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `TimeRangeValue \| null`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: TimeRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
+
+### Inherited from FormField
+
+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.       |
+
+## Related components
+
+TimeRangePicker, FormField, TimeField

package/docs/components/TimeRangePicker.md

@@ -0,0 +1,64 @@
+# TimeRangePicker
+
+Inline dual `TimePanel` picker for a time range (`[start, end]`).
+
+## Import
+
+```ts
+import { TimeRangePicker } from "@bridge-ui/vue/Components/TimeRangePicker";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<TimeRangePicker />
+
+<TimeRangePicker v-model="range" />
+
+<TimeRangePicker ampm :interval="15" v-model="range" />
+```
+
+## Props
+
+| Prop           | Type                         | Default        | Description                                           |
+| -------------- | ---------------------------- | -------------- | ----------------------------------------------------- |
+| `ampm`         | `boolean`                    | `false`        | Uses a 12-hour clock with an AM/PM column.            |
+| `classes`      | `TimeRangePickerClasses`     | —              | Classes for picker regions.                           |
+| `color`        | `CalendarColor`              | `"primary"`    | Accent color.                                         |
+| `customProps`  | `TimeRangePickerCustomProps` | —              | Extra props for internal parts.                       |
+| `defaultValue` | `TimeRangeValue \| null`     | `null`         | Uncontrolled initial value.                           |
+| `disabled`     | `boolean`                    | `false`        | Disables the picker.                                  |
+| `disableTimes` | `Date[]`                     | —              | Times that cannot be selected.                        |
+| `endTitle`     | `string`                     | `"End time"`   | Label above the end time panel.                       |
+| `interval`     | `number`                     | `1`            | Minute step between options.                          |
+| `maxTime`      | `Date`                       | —              | Latest selectable time.                               |
+| `minTime`      | `Date`                       | —              | Earliest selectable time.                             |
+| `orientation`  | `"horizontal" \| "vertical"` | `"horizontal"` | Layout of start / end time panels.                    |
+| `readOnly`     | `boolean`                    | `false`        | Prevents selection.                                   |
+| `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.       |
+| `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
+
+| Prop / Event        | Type                                      | Default | Description                           |
+| ------------------- | ----------------------------------------- | ------- | ------------------------------------- |
+| `modelValue`        | `TimeRangeValue \| null`                  | —       | Bound with `v-model`.                 |
+| `update:modelValue` | `(value: TimeRangeValue \| null) => void` | —       | Emitted when `v-model` should update. |
+
+## Events
+
+| Event         | Payload                           | Description                                                             |
+| ------------- | --------------------------------- | ----------------------------------------------------------------------- |
+| `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. |
+
+## Related components
+
+TimePanel, TimeRangeField, TimePicker

package/docs/components/Tooltip.md

@@ -0,0 +1,125 @@
+# Tooltip
+
+Anchored hint that appears on hover or focus. Put the opener in the `trigger` slot (or pass `anchorEl`). Use `content` for plain text, or the default slot for custom panel body (default slot wins when both are set). Visibility uses `v-model` (omit for uncontrolled hover/focus when using `trigger`).
+
+## Import
+
+```ts
+import { Tooltip } from "@bridge-ui/vue/Components/Tooltip";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Tooltip content="Save changes">
+  <template #trigger>
+    <Button>Save</Button>
+  </template>
+</Tooltip>
+```
+
+### Placement
+
+```vue
+<Tooltip content="Top end" placement="top-end">
+  <template #trigger>
+    <Button>Hover me</Button>
+  </template>
+</Tooltip>
+```
+
+### Without arrow
+
+```vue
+<Tooltip :arrow="false" content="No arrow">
+  <template #trigger>
+    <Button>Save</Button>
+  </template>
+</Tooltip>
+```
+
+### Controlled
+
+```vue
+<Tooltip v-model="open" content="Controlled">
+  <template #trigger>
+    <Button>Save</Button>
+  </template>
+</Tooltip>
+```
+
+### anchorEl
+
+```vue
+<button ref="anchorRef">External anchor</button>
+
+<Tooltip v-model="open" content="From anchor" :anchor-el="anchorRef">
+</Tooltip>
+```
+
+### Custom default slot
+
+```vue
+<Tooltip>
+  <template #trigger>
+    <Button>Save</Button>
+  </template>
+  <span class="font-bold">Custom body</span>
+</Tooltip>
+```
+
+### Color and size
+
+```vue
+<Tooltip size="lg" color="primary" content="Primary tip">
+  <template #trigger>
+    <Button>Save</Button>
+  </template>
+</Tooltip>
+```
+
+## Props
+
+| Prop          | Type                  | Default   | Description                                                                                          |
+| ------------- | --------------------- | --------- | ---------------------------------------------------------------------------------------------------- |
+| `anchorEl`    | `HTMLElement \| null` | —         | Element that anchors the tooltip panel. When set, it is used for positioning instead of the trigger. |
+| `arrow`       | `boolean`             | `true`    | Whether the tooltip shows an arrow pointing at the trigger.                                          |
+| `classes`     | `TooltipClasses`      | —         | Classes for `root`, `trigger`, `content`, and `arrow`.                                               |
+| `closeDelay`  | `number`              | `0`       | Delay in ms before closing after pointer leave / blur.                                               |
+| `color`       | `TooltipColor`        | `"dark"`  | Semantic color of the tooltip panel.                                                                 |
+| `content`     | `string`              | —         | Plain text for the tooltip panel. Prefer the default slot for custom markup.                         |
+| `customProps` | `TooltipCustomProps`  | —         | Extra props for internal parts.                                                                      |
+| `disabled`    | `boolean`             | `false`   | When true, the tooltip does not open on hover or focus.                                              |
+| `offset`      | `number`              | `8`       | Gap between the trigger and the tooltip panel (px).                                                  |
+| `openDelay`   | `number`              | `200`     | Delay in ms before opening after pointer enter / focus.                                              |
+| `placement`   | `PositionPlacement`   | `"top"`   | Preferred placement of the tooltip relative to the anchor.                                           |
+| `rounded`     | `TooltipRounded`      | `"md"`    | The roundedness of the tooltip panel.                                                                |
+| `size`        | `TooltipSize`         | `"md"`    | Padding and typography of the tooltip panel.                                                         |
+| `strategy`    | `PositionStrategy`    | `"fixed"` | CSS position strategy for the floating panel.                                                        |
+| `teleportTo`  | `string \| false`     | `"body"`  | Where to portal the tooltip panel. Pass `false` to render in place.                                  |
+
+### Binding
+
+| Prop           | Type                      | Default | Description                                                                        |
+| -------------- | ------------------------- | ------- | ---------------------------------------------------------------------------------- |
+| `v-model`      | `boolean`                 | `false` | Whether the tooltip is visible. Omit for uncontrolled hover/focus with `#trigger`. |
+| `onShowChange` | `(show: boolean) => void` | —       | Called when visibility should change (without relying on `v-model`).               |
+
+## Events
+
+| Event         | Payload   | Description                            |
+| ------------- | --------- | -------------------------------------- |
+| `show-change` | `boolean` | Emitted when visibility should change. |
+
+## Slots
+
+| Slot      | Description                                                        |
+| --------- | ------------------------------------------------------------------ |
+| `default` | Custom panel body. Wins over the `content` prop when both are set. |
+| `trigger` | The trigger element that opens the tooltip.                        |
+
+## Related components
+
+Menu, Spinner

package/docs/components/useBreakpoint.md

@@ -0,0 +1,100 @@
+# useBreakpoint
+
+Reactive viewport breakpoints aligned with Tailwind `--breakpoint-*` tokens.
+
+## Import
+
+```ts
+import { useBreakpoint } from "@bridge-ui/vue";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<script setup>
+import { useBreakpoint } from "@bridge-ui/vue";
+
+const breakpoint = useBreakpoint();
+</script>
+
+<template>
+  <p v-if="breakpoint.mobile">Mobile layout</p>
+  <p v-else-if="breakpoint.greaterOrEqual('lg')">Large layout</p>
+</template>
+```
+
+### Responsive Modal
+
+```vue
+<script setup>
+import { useBreakpoint } from "@bridge-ui/vue";
+
+const breakpoint = useBreakpoint();
+</script>
+
+<template>
+  <Modal
+    v-model="open"
+    :align="breakpoint.mobile ? 'bottom-center' : 'middle-center'"
+  >
+    …
+  </Modal>
+</template>
+```
+
+### Global defaults
+
+```ts
+app.use(
+  createBridgeUI({
+    global: {
+      mobileBreakpoint: "md",
+      breakpoints: { "3xl": "120rem" },
+    },
+  }),
+);
+```
+
+Composable options override the provider when passed:
+
+```ts
+useBreakpoint({
+  mobileBreakpoint: "lg",
+  breakpoints: { sm: "30rem" },
+});
+```
+
+## API
+
+| Member                 | Type                                    | Description                                     |
+| ---------------------- | --------------------------------------- | ----------------------------------------------- |
+| `name`                 | `string`                                | Active band (`xs` or a breakpoint key)          |
+| `width`                | `number`                                | Viewport width (px)                             |
+| `height`               | `number`                                | Viewport height (px)                            |
+| `mobile`               | `boolean`                               | `width < mobileBreakpoint`                      |
+| `thresholds`           | `Record<string, number>`                | Resolved min-widths (px)                        |
+| `lessThan(name)`       | `(name: string) => boolean`             | `width <` threshold                             |
+| `lessOrEqual(name)`    | `(name: string) => boolean`             | `width <=` threshold                            |
+| `greaterThan(name)`    | `(name: string) => boolean`             | `width >` threshold                             |
+| `greaterOrEqual(name)` | `(name: string) => boolean`             | `width >=` threshold (Tailwind `sm:` semantics) |
+| `between(min, max)`    | `(min: string, max: string) => boolean` | `>= min` and `< max`                            |
+
+Returns a **reactive object** — read properties on the object (do not destructure helpers) so updates stay reactive in script.
+
+On the server (and before mount), `width`/`height` are `0` and `mobile` is `true`.
+
+### Options
+
+| Option             | Type                     | Default         | Description                                  |
+| ------------------ | ------------------------ | --------------- | -------------------------------------------- |
+| `mobileBreakpoint` | `string`                 | global / `"sm"` | Threshold for `mobile`                       |
+| `breakpoints`      | `Record<string, string>` | global / `{}`   | Extra or overridden CSS lengths (`40rem`, …) |
+
+Breakpoints are read from `--breakpoint-*` (export via `@theme static` in Bridge themes). Custom names work when the CSS variable exists or is passed in `breakpoints`.
+
+## Related
+
+- [Modal](./Modal.md)
+- [BridgeUIProvider](./BridgeUIProvider.md)

package/docs/components/useDialogAction.md

@@ -0,0 +1,97 @@
+# useDialogAction
+
+Imperative API to open preset confirmation dialogs. Requires `BridgeUIHosts` and `BridgeDialogHost`.
+
+## Import
+
+```ts
+import { useDialogAction } from "@bridge-ui/vue/Actions";
+```
+
+## Prerequisites
+
+Mount `BridgeUIHosts` with the matching host (`BridgeDialogHost`, `BridgeModalHost`, or `BridgeSnackbarHost`) inside `BridgeUIProvider`.
+
+## Examples
+
+### Usage
+
+```ts
+const dialog = useDialogAction();
+
+const id = dialog.open({
+  title: "Delete item?",
+  description: "This action cannot be undone.",
+  actions: {
+    reject: { label: "Cancel" },
+    accept: { label: "Delete", color: "error" },
+  },
+});
+```
+
+### open
+
+```vue
+<Button v-on:click="openBasic">Open basic</Button>
+
+<Button variant="outline" v-on:click="openDestructive">
+  Open destructive
+</Button>
+```
+
+### close / closeTop
+
+```vue
+<Button
+  variant="outline"
+  :disabled="!lastId"
+  v-on:click="lastId && dialog.close(lastId)"
+>
+  close(lastId)
+</Button>
+
+<Button variant="outline" v-on:click="dialog.closeTop()">
+  closeTop()
+</Button>
+```
+
+### update
+
+```vue
+<Button v-on:click="openUpdateDemo">Open update demo</Button>
+
+<Button
+  variant="outline"
+  :disabled="!updateDemoId"
+  v-on:click="
+    dialog.update(updateDemoId, {
+      props: { title: 'Updated title' },
+    })
+  "
+>
+  update props
+</Button>
+```
+
+### Nested stack
+
+```vue
+<Button v-on:click="openNested">Open nested example</Button>
+```
+
+## API
+
+| Method              | Description                   |
+| ------------------- | ----------------------------- |
+| `open(options)`     | Push a dialog onto the stack  |
+| `close(id)`         | Close a specific dialog       |
+| `closeTop()`        | Close the topmost dialog      |
+| `isOpen(id)`        | Whether an id is open         |
+| `update(id, patch)` | Update props or modal options |
+| `stackSize`         | Current stack depth           |
+
+**open() options:** `title`, `description`, `color`, `modal` (`size`, `transition`, `persistent`, `align`), `actions.accept`, `actions.reject`, `onClose`, `onClosed`
+
+## Related components
+
+Modal, useModalAction, BridgeUIProvider

package/docs/components/useDrawerAction.md

@@ -0,0 +1,75 @@
+# useDrawerAction
+
+Imperative API to mount custom components inside `Drawer`. Requires `BridgeDrawerHost`.
+
+## Import
+
+```ts
+import { useDrawerAction } from "@bridge-ui/vue/Actions";
+```
+
+## Prerequisites
+
+Mount `BridgeUIHosts` with the matching host (`BridgeDialogHost`, `BridgeDrawerHost`, `BridgeModalHost`, or `BridgeSnackbarHost`) inside `BridgeUIProvider`.
+
+## Examples
+
+### Usage
+
+```ts
+const drawer = useDrawerAction();
+
+const id = drawer.open({
+  component: SettingsForm,
+  drawer: { size: "lg", placement: "right" },
+});
+```
+
+### open
+
+```vue
+<Button v-on:click="openBasic">Open basic</Button>
+
+<Button variant="outline" v-on:click="openWithOptions">
+  Open with drawer options
+</Button>
+```
+
+### close / closeTop
+
+```vue
+<Button
+  variant="outline"
+  :disabled="!lastId"
+  v-on:click="lastId && drawer.close(lastId)"
+>
+  close(lastId)
+</Button>
+
+<Button variant="outline" v-on:click="drawer.closeTop()">
+  closeTop()
+</Button>
+```
+
+### Nested stack
+
+```vue
+<Button v-on:click="openNested">Open nested example</Button>
+```
+
+## API
+
+| Method              | Description                    |
+| ------------------- | ------------------------------ |
+| `open(options)`     | Push a drawer onto the stack   |
+| `close(id)`         | Close a specific drawer        |
+| `closeTop()`        | Close the topmost drawer       |
+| `isOpen(id)`        | Whether an id is open          |
+| `update(id, patch)` | Update props or drawer options |
+| `stackSize`         | Current stack depth            |
+
+**open() options:** `component`, `props`, `drawer` (`size`, `placement`, `transition`, `persistent`), `onClose`, `onClosed`
+
+## Related components
+
+Drawer, useModalAction, BridgeUIProvider