@bridge-ui/vue 0.0.7 → 0.0.9

package/docs/components/Snackbar.md

@@ -0,0 +1,99 @@
+# Snackbar
+
+Toast notification portaled to the viewport. Sets `role="status"` and `aria-live="polite"` by default.
+
+## Import
+
+```ts
+import { Snackbar } from "@bridge-ui/vue/Components/Snackbar";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Button v-on:click="open = true">Show snackbar</Button>
+
+<Snackbar
+  title="Saved"
+  v-model="open"
+  description="Your changes were saved successfully."
+/>
+```
+
+### Duration and progressbar
+
+```vue
+<Snackbar progressbar v-model="open" :duration="3000" title="Auto dismiss" />
+```
+
+### Slots
+
+```vue
+<Snackbar v-model="open">
+  <template #icon>
+    <Icon size="md" :icon="Info" />
+  </template>
+
+  <template #actions>
+    <Button size="sm" variant="flat" v-on:click="open = false">
+      Undo
+    </Button>
+  </template>
+
+  Custom children below the description.
+</Snackbar>
+```
+
+### customProps
+
+```vue
+<Snackbar
+  v-model="open"
+  title="customProps"
+  :custom-props="{
+    root: { id: 'snackbar-root' },
+    title: { id: 'snackbar-title' },
+  }"
+/>
+```
+
+## Props
+
+| Prop           | Type                      | Default         | Description                                                                    |
+| -------------- | ------------------------- | --------------- | ------------------------------------------------------------------------------ |
+| `classes`      | `SnackbarClasses`         | —               | The classes to apply to the snackbar.                                          |
+| `closeButton`  | `boolean`                 | `true`          | Whether to show the close button.                                              |
+| `color`        | `SnackbarColor`           | "primary"       | Tint color for the default icon.                                               |
+| `customProps`  | `SnackbarCustomProps`     | —               | Extra props for internal parts (`icon`, `title`, `description`, etc.).         |
+| `description`  | `string`                  | —               | Body text below the title.                                                     |
+| `duration`     | `number \| false`         | 5000            | Auto-dismiss delay in ms. `false` disables the timer.                          |
+| `icon`         | `LucideIcon \| null`      | —               | The icon to display. Use `null` to hide the icon.                              |
+| `img`          | `string`                  | —               | Avatar image URL (shown instead of icon when set).                             |
+| `onShowChange` | `(show: boolean) => void` | —               | Called when `v-model` visibility should change (controlled state).             |
+| `padding`      | `SnackbarPadding`         | "medium"        | Padding for the content area.                                                  |
+| `position`     | `SnackbarPosition`        | "bottom-center" | Viewport anchor when portaled (standalone). Ignored when `teleportTo={false}`. |
+| `progressbar`  | `boolean`                 | `true`          | Whether to show the countdown progress bar when `duration` is set.             |
+| `rounded`      | `SnackbarRounded`         | "lg"            | The roundedness of the snackbar panel.                                         |
+| `stackId`      | `string`                  | —               | Pre-assigned stack id (BridgeSnackbarHost).                                    |
+| `teleportTo`   | `string \| false`         | "body"          | Portal target. `false` renders inline without layer stack.                     |
+| `title`        | `string`                  | —               | Headline text.                                                                 |
+| `transition`   | `SnackbarTransition`      | "slide"         | Enter/leave animation preset.                                                  |
+
+### v-model
+
+| Prop / Event        | Type                       | Default | Description                                                                  |
+| ------------------- | -------------------------- | ------- | ---------------------------------------------------------------------------- |
+| `modelValue`        | `boolean`                  | `false` | Whether the snackbar is visible. Bound with `v-model`.                       |
+| `update:modelValue` | `(value: boolean) => void` | —       | Emitted when `v-model` should update. Listen with `v-on:update:model-value`. |
+
+## Events
+
+| Event        | Payload | Description                                  |
+| ------------ | ------- | -------------------------------------------- |
+| `v-on:close` | —       | Emitted when the snackbar requests to close. |
+
+## Related components
+
+useSnackbarAction, Alert, Button

package/docs/components/Spinner.md

@@ -0,0 +1,61 @@
+# Spinner
+
+Circular progress indicator for determinate and indeterminate loading states.
+
+## Import
+
+```ts
+import { Spinner } from "@bridge-ui/vue/Components/Spinner";
+```
+
+## Examples
+
+### Indeterminate
+
+```vue
+<Spinner aria-label="Loading…" />
+```
+
+### Determinate
+
+```vue
+<Spinner :value="40" variant="determinate" aria-label="Export data" />
+```
+
+### With track
+
+```vue
+<Spinner enable-track aria-label="Loading…" />
+```
+
+### Disable shrink
+
+```vue
+<Spinner disable-shrink aria-label="Loading…" />
+```
+
+### Color and size
+
+```vue
+<Spinner size="lg" color="success" aria-label="Saving…" />
+```
+
+## Props
+
+| Prop            | Type                 | Default           | Description                                       |
+| --------------- | -------------------- | ----------------- | ------------------------------------------------- |
+| `classes`       | `SpinnerClasses`     | —                 | Classes for `root`, `svg`, `circle`, and `track`. |
+| `color`         | `SpinnerColor`       | `"primary"`       | Semantic color of the circle (and track).         |
+| `customProps`   | `SpinnerCustomProps` | —                 | Extra props for internal parts.                   |
+| `disableShrink` | `boolean`            | `false`           | Disables indeterminate circle shrink animation.   |
+| `enableTrack`   | `boolean`            | `false`           | Shows a subtle track circle behind the progress.  |
+| `size`          | `SpinnerSize`        | `"md"`            | Width/height of the spinner.                      |
+| `thickness`     | `number`             | `3.6`             | Stroke thickness of the circle.                   |
+| `value`         | `number`             | —                 | Progress 0–100 (`determinate` variant).           |
+| `variant`       | `SpinnerVariant`     | `"indeterminate"` | Visual mode of the indicator.                     |
+
+Pass `aria-label` or `aria-labelledby` for an accessible name.
+
+## Related components
+
+Progress, Skeleton

package/docs/components/Switch.md

@@ -0,0 +1,72 @@
+# Switch
+
+Toggle switch. Extends FormControl props.
+
+## Import
+
+```ts
+import { Switch } from "@bridge-ui/vue/Components/Switch";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Switch end-label="Dark mode" description="Use dark theme across the app." />
+
+<Switch v-model="enabled" end-label="Enable notifications" />
+```
+
+### Required and error
+
+```vue
+<Switch required end-label="Required field" />
+
+<Switch
+  error
+  end-label="Invalid option"
+  error-message="You must enable this setting."
+/>
+```
+
+### customProps
+
+```vue
+<Switch
+  end-label="Airplane mode"
+  :custom-props="{
+    input: { name: 'airplane' },
+    control: { 'data-testid': 'airplane-switch' },
+  }"
+/>
+```
+
+## Props
+
+### Switch-specific
+
+| Prop          | Type                | Default   | Description                                                                                |
+| ------------- | ------------------- | --------- | ------------------------------------------------------------------------------------------ |
+| `checked`     | `boolean`           | —         | Whether the switch is on.                                                                  |
+| `classes`     | `SwitchClasses`     | —         | Classes for the form control chrome and the switch control.                                |
+| `color`       | `SwitchColor`       | "primary" | The color to apply to the switch.                                                          |
+| `customProps` | `SwitchCustomProps` | —         | Extra props for internal parts.                                                            |
+| `rounded`     | `SwitchRounded`     | "full"    | The roundedness of the switch track.                                                       |
+| `size`        | `SwitchSize`        | "md"      | Size of the control and of form control labels (`2xs` … `2xl`, same scale as `FormField`). |
+| `slots`       | `SwitchSlots`       | —         | 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
+
+Checkbox, FormControl

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/TimeField.md

@@ -0,0 +1,81 @@
+# TimeField
+
+Form field that opens a `TimePicker` in an overlay (`auto` by default: `menu` on desktop, bottom `drawer` on mobile). Extends FormField props. Uses the semantic `clock` icon by default.
+
+## Import
+
+```ts
+import { TimeField } from "@bridge-ui/vue/Components/TimeField";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<TimeField label="Start time" />
+
+<TimeField ampm label="Meeting" :interval="5" v-model="time" />
+
+<TimeField error label="Time" error-message="Pick a valid time." />
+```
+
+Supports the same `overlay` prop as DateField (`menu` | `modal` | `drawer` | `auto`).
+
+### customProps
+
+```vue
+<TimeField
+  label="Time"
+  :custom-props="{
+    input: { name: 'time' },
+    timePicker: { root: { 'data-testid': 'time-picker' } },
+  }"
+/>
+```
+
+## Props
+
+### TimeField-specific
+
+| Prop           | Type                   | Default                               | Description                                          |
+| -------------- | ---------------------- | ------------------------------------- | ---------------------------------------------------- |
+| `ampm`         | `boolean`              | `false`                               | Uses a 12-hour clock with an AM/PM column.           |
+| `classes`      | `TimeFieldClasses`     | —                                     | Classes for field / input regions.                   |
+| `clearable`    | `boolean`              | `true`                                | Whether the value can be cleared.                    |
+| `customProps`  | `TimeFieldCustomProps` | —                                     | Extra props for internal parts.                      |
+| `defaultValue` | `Date \| 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`        | `TimeFieldSlots`       | —                                     | Named slots (`FormField` slots).                     |
+| `timeZone`     | `string`               | —                                     | IANA time zone.                                      |
+| `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. |
+
+### Inherited from FormField
+
+See [FormField](./FormField.md).
+
+## Events
+
+| Event         | Payload                 | Description                        |
+| ------------- | ----------------------- | ---------------------------------- |
+| `v-on:change` | `(value: Date \| null)` | Emitted when the time 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
+
+TimePicker, FormField, DateTimeField