@bridge-ui/vue 0.0.7 → 0.0.8

package/docs/components/Tabs.md

@@ -0,0 +1,207 @@
+# Tabs
+
+Organize related content into tabbed views. Use with `TabList`, `Tab`, and `TabPanel`. Selected accent uses the semantic `color` palette; inactive tabs use `dark-*`.
+
+## Import
+
+```ts
+import { Tabs } from "@bridge-ui/vue/Components/Tabs";
+import { Tab } from "@bridge-ui/vue/Components/Tab";
+import { TabItem } from "@bridge-ui/vue/Components/TabItem";
+import { TabList } from "@bridge-ui/vue/Components/TabList";
+import { TabPanel } from "@bridge-ui/vue/Components/TabPanel";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Tabs v-model="pkg">
+  <TabList aria-label="Package manager">
+    <Tab value="bun">bun</Tab>
+    <Tab value="npm">npm</Tab>
+    <Tab value="pnpm">pnpm</Tab>
+  </TabList>
+  <TabPanel value="bun">bun install</TabPanel>
+  <TabPanel value="npm">npm install</TabPanel>
+  <TabPanel value="pnpm">pnpm install</TabPanel>
+</Tabs>
+```
+
+### TabItem shortcut
+
+```vue
+<Tabs v-model="pkg">
+  <TabItem label="bun" value="bun">bun install</TabItem>
+  <TabItem label="npm" value="npm">npm install</TabItem>
+</Tabs>
+```
+
+### With icons
+
+```vue
+<Tabs v-model="section">
+  <TabList aria-label="Settings">
+    <Tab :start-icon="User" value="account">My Account</Tab>
+    <Tab :start-icon="Building2" value="company">Company</Tab>
+    <Tab :start-icon="Users" value="team">Team Members</Tab>
+  </TabList>
+  <TabPanel value="account">Account</TabPanel>
+  <TabPanel value="company">Company</TabPanel>
+  <TabPanel value="team">Team</TabPanel>
+</Tabs>
+```
+
+### TabItem with icons and slots
+
+```vue
+<Tabs v-model="section">
+  <TabItem :start-icon="Inbox" label="Inbox" value="inbox">Inbox</TabItem>
+  <TabItem label="Alerts" value="alerts" :end-icon="ChevronDown">
+    <template #start>
+      <Avatar size="sm" fallback="A" />
+    </template>
+    Alerts
+  </TabItem>
+</Tabs>
+```
+
+### Custom start / end on Tab
+
+```vue
+<Tabs v-model="tab">
+  <TabList>
+    <Tab value="one">
+      <template #start>
+        <Avatar size="sm" fallback="1" />
+      </template>
+      One
+      <template #end>
+        <Badge>3</Badge>
+      </template>
+    </Tab>
+    <Tab value="two" :end-icon="ChevronRight">Two</Tab>
+  </TabList>
+  <TabPanel value="one">First</TabPanel>
+  <TabPanel value="two">Second</TabPanel>
+</Tabs>
+```
+
+### Variants
+
+`line` (default), `plain`, `pill`, `solid`, `enclosed`.
+
+```vue
+<Tabs v-model="tab" variant="line" color="primary">
+  <TabList>
+    <Tab value="one">One</Tab>
+    <Tab value="two">Two</Tab>
+  </TabList>
+  <TabPanel value="one">First</TabPanel>
+  <TabPanel value="two">Second</TabPanel>
+</Tabs>
+
+<Tabs color="dark" v-model="tab" variant="pill">
+  <TabList>
+    <Tab value="one">One</Tab>
+    <Tab value="two">Two</Tab>
+  </TabList>
+  <TabPanel value="one">First</TabPanel>
+  <TabPanel value="two">Second</TabPanel>
+</Tabs>
+
+<Tabs v-model="tab" variant="enclosed">
+  <TabList>
+    <Tab value="one">One</Tab>
+    <Tab value="two">Two</Tab>
+  </TabList>
+  <TabPanel value="one">First</TabPanel>
+  <TabPanel value="two">Second</TabPanel>
+</Tabs>
+```
+
+### Vertical
+
+```vue
+<Tabs v-model="section" orientation="vertical">
+  <TabList aria-label="Account">
+    <Tab value="account">Account</Tab>
+    <Tab value="settings">Settings</Tab>
+  </TabList>
+  <TabPanel value="account">Account content</TabPanel>
+  <TabPanel value="settings">Settings content</TabPanel>
+</Tabs>
+```
+
+### Manual activation
+
+```vue
+<Tabs v-model="letter" activation="manual">
+  <TabList>
+    <Tab value="a">A</Tab>
+    <Tab value="b">B</Tab>
+  </TabList>
+  <TabPanel value="a">Panel A</TabPanel>
+  <TabPanel value="b">Panel B</TabPanel>
+</Tabs>
+```
+
+## Props (`Tabs`)
+
+| Prop          | Type              | Default        |
+| ------------- | ----------------- | -------------- |
+| `activation`  | `TabsActivation`  | `"automatic"`  |
+| `color`       | `TabsColor`       | `"primary"`    |
+| `keepMounted` | `boolean`         | `true`         |
+| `orientation` | `TabsOrientation` | `"horizontal"` |
+| `size`        | `TabsSize`        | `"md"`         |
+| `variant`     | `TabsVariant`     | `"line"`       |
+
+### v-model
+
+| Prop / Event        | Type                      | Default              | Description                                                                  |
+| ------------------- | ------------------------- | -------------------- | ---------------------------------------------------------------------------- |
+| `modelValue`        | `string`                  | first registered tab | The selected tab value. Bound with `v-model`.                                |
+| `update:modelValue` | `(value: string) => void` | —                    | Emitted when `v-model` should update. Listen with `v-on:update:model-value`. |
+
+## Events
+
+| Event         | Payload           | Description                                |
+| ------------- | ----------------- | ------------------------------------------ |
+| `v-on:change` | `(value: string)` | Emitted whenever the selected tab changes. |
+
+## Props (`Tab`)
+
+| Prop        | Type         | Default  |
+| ----------- | ------------ | -------- |
+| `value`     | `string`     | required |
+| `startIcon` | `LucideIcon` | —        |
+| `endIcon`   | `LucideIcon` | —        |
+| `disabled`  | `boolean`    | `false`  |
+
+Slots: `#default` (label), `#start`, `#end`. `#start` / `#end` are used when the matching Lucide icon prop is omitted.
+
+## Props (`TabList`)
+
+HTML attributes on the `role="tablist"` container (`aria-label`, `class`, etc.).
+
+## Props (`TabPanel`)
+
+| Prop          | Type      | Default              |
+| ------------- | --------- | -------------------- |
+| `value`       | `string`  | required             |
+| `keepMounted` | `boolean` | inherits from `Tabs` |
+
+## Props (`TabItem`)
+
+| Prop          | Type         | Default              |
+| ------------- | ------------ | -------------------- |
+| `value`       | `string`     | required             |
+| `label`       | `string`     | or `#label` slot     |
+| `startIcon`   | `LucideIcon` | —                    |
+| `endIcon`     | `LucideIcon` | —                    |
+| `disabled`    | `boolean`    | `false`              |
+| `keepMounted` | `boolean`    | inherits from `Tabs` |
+
+Slots: `#default` (panel), `#label`, `#start`, `#end`.

package/docs/components/TextField.md

@@ -0,0 +1,72 @@
+# TextField
+
+Single-line text input with FormField chrome, icons, and adornments.
+
+## Import
+
+```ts
+import { TextField } from "@bridge-ui/vue/Components/TextField";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<TextField label="Email" placeholder="you@example.com" />
+
+<TextField
+  v-model="name"
+  label="Display name"
+  description="This is how your name will appear."
+/>
+
+<TextField error label="Email" error-message="Enter a valid email address." />
+```
+
+### Icons and adornments
+
+```vue
+<TextField label="Search" :start-icon="Search" placeholder="Search..." />
+
+<TextField label="Website" start="https://" placeholder="example" />
+
+<TextField end="EUR" label="Amount" placeholder="0.00" />
+```
+
+### Input types
+
+```vue
+<TextField type="email" label="Email" placeholder="you@example.com" />
+
+<TextField type="tel" label="Phone" placeholder="+351 900 000 000" />
+```
+
+### customProps
+
+```vue
+<TextField
+  label="Username"
+  placeholder="johndoe"
+  :custom-props="{
+    input: { autocomplete: 'username', name: 'username' },
+  }"
+/>
+```
+
+## Props
+
+### 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. Listen with `v-on:update:model-value`. |
+
+### Inherited from FormField
+
+See [FormField](./FormField.md).
+
+## Related components
+
+FormField, PasswordField, NumberField, Textarea, Select

package/docs/components/Textarea.md

@@ -0,0 +1,80 @@
+# Textarea
+
+Multiline text input. Extends FormField props.
+
+## Import
+
+```ts
+import { Textarea } from "@bridge-ui/vue/Components/Textarea";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Textarea :rows="3" label="Notes" placeholder="Add details..." />
+
+<Textarea
+  :rows="4"
+  label="Bio"
+  v-model="bio"
+  description="Tell us about yourself."
+/>
+
+<Textarea
+  error
+  :rows="3"
+  label="Message"
+  error-message="Please enter at least 10 characters."
+/>
+```
+
+### Autosize
+
+```vue
+<Textarea
+  autosize
+  :rows="2"
+  label="Growing textarea"
+  placeholder="Add more lines to see autosize..."
+/>
+```
+
+### customProps
+
+```vue
+<Textarea
+  :rows="3"
+  label="Feedback"
+  placeholder="maxlength 200"
+  :custom-props="{
+    input: { maxlength: 200, name: 'demo-textarea' },
+  }"
+/>
+```
+
+## Props
+
+### Textarea-specific
+
+| Prop        | Type             | Default | Description                                                                                                                                                           |
+| ----------- | ---------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `autosize`  | `boolean`        | —       | Whether the textarea automatically resizes with its content. Defaults to `true` when `likeInput` is set; otherwise `false`.                                           |
+| `likeInput` | `boolean`        | `false` | Use compact TextField-like sizing instead of the default multiline textarea profile. Enables `autosize` and `rows={1}` by default; both can be overridden explicitly. |
+| `resize`    | `TextareaResize` | "none"  | Native resize handle (`resize` CSS). Ignored when `autosize` is `true`.                                                                                               |
+
+### 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. Listen with `v-on:update:model-value`. |
+
+### Inherited from FormField
+
+See [FormField](./FormField.md).
+
+## Related components
+
+TextField, FormField

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