@brumaombra/ui-vintage 0.7.13 → 0.8.1

package/COMPONENTS.md

@@ -0,0 +1,3643 @@
+# UI Vintage component catalog
+
+> Generated by `npm run docs:components` from the source of `@brumaombra/ui-vintage`. Do not edit by hand.
+
+This file lists every public entry point of the package with its components, props, events, slots, and helpers. It ships inside the npm package, so it always matches the installed version: `node_modules/@brumaombra/ui-vintage/COMPONENTS.md`.
+
+## Ground rules
+
+- Register the Nuxt module once in `nuxt.config`: `modules: ['@brumaombra/ui-vintage']`. It injects the stylesheet, installs `@nuxt/image`, and merges the library translations into vue-i18n.
+- Import from explicit subpaths only (for example `@brumaombra/ui-vintage/button`). There is no root barrel, and `src/` paths are internal.
+- Style with the semantic Tailwind tokens: `bg-background`, `bg-card`, `bg-surface`, `bg-accent`, `bg-primary`, `hover:bg-primary-hover`, `text-foreground`, `text-muted-foreground`, `border-border`, `border-border-strong`, `text-destructive`, `text-success`, `text-warning`, `text-info`. They switch automatically in dark mode, so do not add `dark:` color overrides.
+- Reuse the motion utilities from the stylesheet instead of custom animations: `ease-spring`, `ease-bounce`, `ease-out-expo`, `ease-snappy`, `uv-floating-motion`, `uv-modal-motion`, `uv-overlay-motion`, `uv-collapsible-motion`, `uv-field`, `animate-uv-pop`, `animate-uv-fade-up`, `animate-uv-shake`, `animate-uv-shimmer`, `animate-uv-float`, `animate-uv-ping-soft`, and elevation via `shadow-elevated-sm|md|lg|xl` and `shadow-glow`. Tailwind v4 animates `scale`, `rotate`, and `translate` as separate properties, so name them (not `transform`) in custom transitions.
+- Icons are Hugeicons definitions passed as values: `import { Rocket01Icon } from '@hugeicons/core-free-icons'` then `:icon="Rocket01Icon"`, or render one with `<HugeiconsIcon :icon="Rocket01Icon" />` from `@hugeicons/vue`.
+- Every component accepts `class`, merged with `tailwind-merge`, so utility overrides win over the defaults.
+
+## Contents
+
+- **Actions:** [button](#brumaombraui-vintagebutton), [dropdown-menu](#brumaombraui-vintagedropdown-menu), [kbd](#brumaombraui-vintagekbd), [load-more-button](#brumaombraui-vintageload-more-button), [text-link](#brumaombraui-vintagetext-link), [toggle-group](#brumaombraui-vintagetoggle-group)
+- **Forms:** [calendar](#brumaombraui-vintagecalendar), [checkbox](#brumaombraui-vintagecheckbox), [combobox](#brumaombraui-vintagecombobox), [date-picker](#brumaombraui-vintagedate-picker), [date-time-picker](#brumaombraui-vintagedate-time-picker), [field](#brumaombraui-vintagefield), [file-dropzone](#brumaombraui-vintagefile-dropzone), [input](#brumaombraui-vintageinput), [label](#brumaombraui-vintagelabel), [native-select](#brumaombraui-vintagenative-select), [number-field](#brumaombraui-vintagenumber-field), [pin-input](#brumaombraui-vintagepin-input), [radio-group](#brumaombraui-vintageradio-group), [select](#brumaombraui-vintageselect), [slider](#brumaombraui-vintageslider), [slider-form-component](#brumaombraui-vintageslider-form-component), [switch](#brumaombraui-vintageswitch), [switch-form-component](#brumaombraui-vintageswitch-form-component), [tags-input](#brumaombraui-vintagetags-input), [textarea](#brumaombraui-vintagetextarea), [time-picker](#brumaombraui-vintagetime-picker)
+- **Data display:** [animated-number](#brumaombraui-vintageanimated-number), [avatar](#brumaombraui-vintageavatar), [badge](#brumaombraui-vintagebadge), [card](#brumaombraui-vintagecard), [card-grid](#brumaombraui-vintagecard-grid), [chip](#brumaombraui-vintagechip), [data-list](#brumaombraui-vintagedata-list), [data-table](#brumaombraui-vintagedata-table), [info-card](#brumaombraui-vintageinfo-card), [progress](#brumaombraui-vintageprogress), [progress-component](#brumaombraui-vintageprogress-component), [scroll-area](#brumaombraui-vintagescroll-area), [separator](#brumaombraui-vintageseparator), [single-value-card](#brumaombraui-vintagesingle-value-card), [skeleton](#brumaombraui-vintageskeleton), [table](#brumaombraui-vintagetable)
+- **Navigation:** [accordion](#brumaombraui-vintageaccordion), [breadcrumb](#brumaombraui-vintagebreadcrumb), [collapsible](#brumaombraui-vintagecollapsible), [pagination](#brumaombraui-vintagepagination), [sidebar](#brumaombraui-vintagesidebar), [stepper](#brumaombraui-vintagestepper), [tabs](#brumaombraui-vintagetabs)
+- **Overlays:** [alert-dialog](#brumaombraui-vintagealert-dialog), [command](#brumaombraui-vintagecommand), [dialog](#brumaombraui-vintagedialog), [hover-card](#brumaombraui-vintagehover-card), [popover](#brumaombraui-vintagepopover), [sheet](#brumaombraui-vintagesheet), [tooltip](#brumaombraui-vintagetooltip)
+- **Feedback:** [alert](#brumaombraui-vintagealert), [busy](#brumaombraui-vintagebusy), [busy-indicator](#brumaombraui-vintagebusy-indicator), [confirm-dialog](#brumaombraui-vintageconfirm-dialog), [cookie-consent](#brumaombraui-vintagecookie-consent), [empty-state-card](#brumaombraui-vintageempty-state-card), [loading-state-card](#brumaombraui-vintageloading-state-card), [message-dialog](#brumaombraui-vintagemessage-dialog), [message-toast](#brumaombraui-vintagemessage-toast), [spinner](#brumaombraui-vintagespinner)
+- **Layouts and app shell:** [background-grid](#brumaombraui-vintagebackground-grid), [dashboard-shell](#brumaombraui-vintagedashboard-shell), [error-page](#brumaombraui-vintageerror-page), [landing](#brumaombraui-vintagelanding), [landing-content](#brumaombraui-vintagelanding-content), [landing-footer](#brumaombraui-vintagelanding-footer), [landing-navbar](#brumaombraui-vintagelanding-navbar), [landing-shell](#brumaombraui-vintagelanding-shell), [language-flag](#brumaombraui-vintagelanguage-flag), [language-selector](#brumaombraui-vintagelanguage-selector), [page-header](#brumaombraui-vintagepage-header), [theme-selector](#brumaombraui-vintagetheme-selector)
+- **Content and blog:** [blog](#brumaombraui-vintageblog), [content](#brumaombraui-vintagecontent)
+- **Utilities and types:** [common-types](#brumaombraui-vintagecommon-types), [utils](#brumaombraui-vintageutils)
+
+## Actions
+
+Buttons, segmented controls, menus, and keyboard hints.
+
+### `@brumaombra/ui-vintage/button`
+
+Button with solid, outline, ghost, link, and tone variants. Spring press feedback, a sheen on primary buttons, and a `loading` state that keeps the width stable. Use `as-child` to render a link.
+
+```ts
+import { Button, buttonVariants } from '@brumaombra/ui-vintage/button';
+import type { ButtonVariants } from '@brumaombra/ui-vintage/button';
+```
+
+```vue
+<Button variant="secondary" size="sm" :loading="saving" @click="save">
+    <HugeiconsIcon :icon="SaveIcon" />
+    Save changes
+</Button>
+
+<Button as-child>
+    <NuxtLink to="/pricing">Pricing</NuxtLink>
+</Button>
+```
+
+#### `Button`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `variant` | `ButtonVariants['variant']` |  |
+| `size` | `ButtonVariants['size']` |  |
+| `loading` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `PrimitiveProps`.
+- **Slots:** `default`.
+
+#### Functions, constants, and types
+
+```ts
+type ButtonVariants = { variant?: | 'primary' | 'secondary' | 'ghost' | 'link' | 'gray' | 'green' | 'red' | 'blue' | 'yellow' | null | undefined; size?: | 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg' | null | undefined }
+const buttonVariants: (props?: ButtonVariants & ClassProp) => string
+```
+
+---
+
+### `@brumaombra/ui-vintage/dropdown-menu`
+
+Menu of actions with items, checkbox and radio items, labels, shortcuts, destructive items, and submenus.
+
+```ts
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '@brumaombra/ui-vintage/dropdown-menu';
+```
+
+```vue
+<DropdownMenu>
+    <DropdownMenuTrigger as-child>
+        <Button variant="secondary">Account</Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+        <DropdownMenuLabel>My account</DropdownMenuLabel>
+        <DropdownMenuItem @select="openProfile">Profile <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut></DropdownMenuItem>
+        <DropdownMenuCheckboxItem v-model="showStatusBar">Status bar</DropdownMenuCheckboxItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive" @select="logout">Log out</DropdownMenuItem>
+    </DropdownMenuContent>
+</DropdownMenu>
+```
+
+#### `DropdownMenu`
+
+- **Also accepts** all props of Reka `DropdownMenuRootProps`.
+- **Emits:** all events of Reka `DropdownMenuRootEmits`.
+- **Slots:** `default`.
+
+#### `DropdownMenuCheckboxItem`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `DropdownMenuCheckboxItemProps`.
+- **Emits:** all events of Reka `DropdownMenuCheckboxItemEmits`.
+- **Slots:** `indicator-icon`, `default`.
+
+#### `DropdownMenuContent`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `DropdownMenuContentProps`.
+- **Emits:** all events of Reka `DropdownMenuContentEmits`.
+- **Slots:** `default`.
+
+#### `DropdownMenuGroup`
+
+- **Also accepts** all props of Reka `DropdownMenuGroupProps`.
+- **Slots:** `default`.
+
+#### `DropdownMenuItem`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `inset` | `boolean` |  |
+| `variant` | `'default' \| 'destructive'` | `'default'` |
+
+- **Also accepts** all props of Reka `DropdownMenuItemProps`.
+- **Emits:** all events of Reka `DropdownMenuItemEmits`.
+- **Slots:** `default`.
+
+#### `DropdownMenuLabel`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `inset` | `boolean` |  |
+
+- **Also accepts** all props of Reka `DropdownMenuLabelProps`.
+- **Slots:** `default`.
+
+#### `DropdownMenuPortal`
+
+- **Also accepts** all props of Reka `DropdownMenuPortalProps`.
+- **Slots:** `default`.
+
+#### `DropdownMenuRadioGroup`
+
+- **Also accepts** all props of Reka `DropdownMenuRadioGroupProps`.
+- **Emits:** all events of Reka `DropdownMenuRadioGroupEmits`.
+- **Slots:** `default`.
+
+#### `DropdownMenuRadioItem`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `DropdownMenuRadioItemProps`.
+- **Emits:** all events of Reka `DropdownMenuRadioItemEmits`.
+- **Slots:** `indicator-icon`, `default`.
+
+#### `DropdownMenuSeparator`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `DropdownMenuSeparatorProps`.
+
+#### `DropdownMenuShortcut`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `DropdownMenuSub`
+
+- **Also accepts** all props of Reka `DropdownMenuSubProps`.
+- **Emits:** all events of Reka `DropdownMenuSubEmits`.
+- **Slots:** `default`.
+
+#### `DropdownMenuSubContent`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `DropdownMenuSubContentProps`.
+- **Emits:** all events of Reka `DropdownMenuSubContentEmits`.
+- **Slots:** `default`.
+
+#### `DropdownMenuSubTrigger`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `inset` | `boolean` |  |
+
+- **Also accepts** all props of Reka `DropdownMenuSubTriggerProps`.
+- **Slots:** `default`.
+
+#### `DropdownMenuTrigger`
+
+- **Also accepts** all props of Reka `DropdownMenuTriggerProps`.
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/kbd`
+
+Keycaps for keyboard shortcuts. In `KbdGroup`, `mod` renders ⌘ on macOS and Ctrl elsewhere.
+
+```ts
+import { Kbd, KbdGroup } from '@brumaombra/ui-vintage/kbd';
+```
+
+```vue
+<KbdGroup :keys="['mod', 'k']" />
+<Kbd>Esc</Kbd>
+```
+
+#### `Kbd`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `pressed` | `boolean` |  |
+
+- **Slots:** `default`.
+
+#### `KbdGroup`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `keys` | `string[]` |  |
+| `pressed` | `boolean` |  |
+
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/load-more-button`
+
+Full-width "load more" button with a built-in busy state and localized labels.
+
+```ts
+import { LoadMoreButton } from '@brumaombra/ui-vintage/load-more-button';
+```
+
+#### `LoadMoreButton`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `busy` | `boolean` | `false` |
+| `text` | `string` | `''` |
+| `loadingText` | `string` | `''` |
+
+- **Emits:** `load-more`.
+
+---
+
+### `@brumaombra/ui-vintage/text-link`
+
+Inline text link that renders an anchor or a router link component (pass `NuxtLink` as `link-component`).
+
+```ts
+import { TextLink } from '@brumaombra/ui-vintage/text-link';
+```
+
+#### `TextLink`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `to` *(required)* | `string` |  |
+| `text` *(required)* | `string` |  |
+| `linkComponent` | `Component \| string` | `'a'` |
+
+- **Emits:** `click` (event: MouseEvent).
+
+---
+
+### `@brumaombra/ui-vintage/toggle-group`
+
+Segmented control (`type="single"`, with a sliding indicator) or multi-select toggle group, plus a standalone `Toggle`.
+
+```ts
+import { Toggle, ToggleGroup, ToggleGroupItem, toggleVariants, toggleGroupItemVariants, toggleGroupContextKey } from '@brumaombra/ui-vintage/toggle-group';
+import type { ToggleVariants, ToggleGroupSize } from '@brumaombra/ui-vintage/toggle-group';
+```
+
+```vue
+<ToggleGroup v-model="view" type="single" highlight>
+    <ToggleGroupItem value="grid">Grid</ToggleGroupItem>
+    <ToggleGroupItem value="list">List</ToggleGroupItem>
+</ToggleGroup>
+```
+
+#### `Toggle`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `variant` | `ToggleVariants['variant']` | `'default'` |
+| `size` | `ToggleVariants['size']` | `'default'` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `ToggleProps`.
+- **Emits:** all events of Reka `ToggleEmits`.
+- **Slots:** `default`.
+
+#### `ToggleGroup`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `size` | `ToggleGroupSize` | `'default'` |
+| `highlight` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `ToggleGroupRootProps`.
+- **Emits:** all events of Reka `ToggleGroupRootEmits`.
+- **Slots:** `default`.
+
+#### `ToggleGroupItem`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `size` | `ToggleGroupSize` |  |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `ToggleGroupItemProps`.
+- **Slots:** `default`.
+
+#### Functions, constants, and types
+
+```ts
+type ToggleVariants = { variant?: 'default' | 'outline' | null | undefined; size?: 'default' | 'sm' | 'lg' | null | undefined }
+type ToggleGroupSize = 'default' | 'sm' | 'lg'
+const toggleVariants: (props?: ToggleVariants & ClassProp) => string
+const toggleGroupItemVariants: (props?: { size?: ToggleGroupSize | null } & ClassProp) => string
+const toggleGroupContextKey: InjectionKey<{ size: Ref<ToggleGroupSize>; indicator: Ref<boolean> }>
+```
+
+## Forms
+
+Inputs, pickers, and form layout. Text-like controls share the `uv-field` focus glow and shake on `aria-invalid`.
+
+### `@brumaombra/ui-vintage/calendar`
+
+Month calendar (Reka) working with `@internationalized/date` values. Usually used through `DatePicker`.
+
+```ts
+import { Calendar, CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '@brumaombra/ui-vintage/calendar';
+import type { LayoutTypes } from '@brumaombra/ui-vintage/calendar';
+```
+
+#### `Calendar`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `layout` | `LayoutTypes` | `undefined` |
+| `yearRange` | `DateValue[]` |  |
+
+- **Also accepts** all props of Reka `CalendarRootProps`.
+- **Emits:** all events of Reka `CalendarRootEmits`.
+- **Slots:** `calendar-prev-icon`, `calendar-next-icon`, `calendar-heading`.
+
+#### `CalendarCell`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CalendarCellProps`.
+- **Slots:** `default`.
+
+#### `CalendarCellTrigger`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CalendarCellTriggerProps`.
+- **Slots:** `default`.
+
+#### `CalendarGrid`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CalendarGridProps`.
+- **Slots:** `default`.
+
+#### `CalendarGridBody`
+
+- **Also accepts** all props of Reka `CalendarGridBodyProps`.
+- **Slots:** `default`.
+
+#### `CalendarGridHead`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CalendarGridHeadProps`.
+- **Slots:** `default`.
+
+#### `CalendarGridRow`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CalendarGridRowProps`.
+- **Slots:** `default`.
+
+#### `CalendarHeadCell`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CalendarHeadCellProps`.
+- **Slots:** `default`.
+
+#### `CalendarHeader`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CalendarHeaderProps`.
+- **Slots:** `default`.
+
+#### `CalendarHeading`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CalendarHeadingProps`.
+- **Slots:** `default`.
+
+#### `CalendarNextButton`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CalendarNextProps`.
+- **Slots:** `default`.
+
+#### `CalendarPrevButton`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CalendarPrevProps`.
+- **Slots:** `default`.
+
+#### Functions, constants, and types
+
+```ts
+type LayoutTypes = | 'month-and-year' | 'month-only' | 'year-only' | undefined
+```
+
+---
+
+### `@brumaombra/ui-vintage/checkbox`
+
+Checkbox with a self-drawing check mark. `v-model` accepts `true`, `false`, or `'indeterminate'`.
+
+```ts
+import { Checkbox } from '@brumaombra/ui-vintage/checkbox';
+```
+
+```vue
+<Checkbox id="terms" v-model="accepted" />
+<Label for="terms">I accept the terms</Label>
+```
+
+#### `Checkbox`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CheckboxRootProps`.
+- **Emits:** all events of Reka `CheckboxRootEmits`.
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/combobox`
+
+Searchable select. Use `ComboboxSelect` for the common case (single or `multiple`, rich options); the other parts compose custom comboboxes.
+
+```ts
+import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSelect, ComboboxSeparator, ComboboxTrigger } from '@brumaombra/ui-vintage/combobox';
+import type { ComboboxSelectModelValue, ComboboxSelectOption, ComboboxSelectValue } from '@brumaombra/ui-vintage/combobox';
+```
+
+```vue
+<ComboboxSelect v-model="framework" :options="[{ value: 'nuxt', label: 'Nuxt', description: 'The Vue framework' }]" placeholder="Search frameworks" />
+<ComboboxSelect v-model="stack" :options="options" multiple placeholder="Pick your stack" />
+```
+
+#### `Combobox`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `ComboboxRootProps`.
+- **Emits:** all events of Reka `ComboboxRootEmits`.
+- **Slots:** `default`.
+
+#### `ComboboxAnchor`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `size` | `'sm' \| 'default'` | `'default'` |
+
+- **Also accepts** all props of Reka `ComboboxAnchorProps`.
+- **Slots:** `default`.
+
+#### `ComboboxEmpty`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `ComboboxEmptyProps`.
+- **Slots:** `default`.
+
+#### `ComboboxGroup`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `heading` | `string` |  |
+
+- **Also accepts** all props of Reka `ComboboxGroupProps`.
+- **Slots:** `heading`, `default`.
+
+#### `ComboboxInput`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `ComboboxInputProps`.
+- **Emits:** all events of Reka `ComboboxInputEmits`.
+
+#### `ComboboxItem`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `ComboboxItemProps`.
+- **Emits:** all events of Reka `ComboboxItemEmits`.
+- **Slots:** `default`, `indicator-icon`.
+
+#### `ComboboxList`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `viewportClass` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `ComboboxContentProps`.
+- **Emits:** all events of Reka `ComboboxContentEmits`.
+- **Slots:** `default`.
+
+#### `ComboboxSelect`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `modelValue` | `ComboboxSelectModelValue` | `undefined` |
+| `options` *(required)* | `ComboboxSelectOption[]` |  |
+| `placeholder` | `string` |  |
+| `searchPlaceholder` | `string` |  |
+| `emptyText` | `string` |  |
+| `multiple` | `boolean` | `false` |
+| `disabled` | `boolean` | `false` |
+| `size` | `'sm' \| 'default'` | `'default'` |
+| `class` | `HTMLAttributes['class']` |  |
+| `contentClass` | `HTMLAttributes['class']` |  |
+
+- **Emits:** `update:modelValue` (value: ComboboxSelectModelValue).
+
+#### `ComboboxSeparator`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `ComboboxSeparatorProps`.
+
+#### `ComboboxTrigger`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `ComboboxTriggerProps`.
+- **Slots:** `default`.
+
+#### Functions, constants, and types
+
+```ts
+type ComboboxSelectModelValue = ComboboxSelectValue | ComboboxSelectValue[] | null | undefined
+interface ComboboxSelectOption {
+    value: ComboboxSelectValue;
+    label: string;
+    description?: string;
+    icon?: HugeiconsIconDefinition;
+    disabled?: boolean;
+}
+type ComboboxSelectValue = string | number
+```
+
+---
+
+### `@brumaombra/ui-vintage/date-picker`
+
+Date picker button with a calendar popover. `v-model` is a `DateValue` from `@internationalized/date`; labels follow the vue-i18n locale.
+
+```ts
+import { DatePicker } from '@brumaombra/ui-vintage/date-picker';
+```
+
+#### `DatePicker`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `defaultValue` | `DateValue` |  |
+| `modelValue` | `DateValue` |  |
+| `minValue` | `DateValue` |  |
+| `maxValue` | `DateValue` |  |
+| `placeholder` | `string` |  |
+| `disabled` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
+| `contentClass` | `HTMLAttributes['class']` |  |
+
+- **Emits:** `update:modelValue` (payload: DateValue \| undefined).
+
+---
+
+### `@brumaombra/ui-vintage/date-time-picker`
+
+Date and time picker pair. `v-model` is a JavaScript `Date` or `null`.
+
+```ts
+import { DateTimePicker } from '@brumaombra/ui-vintage/date-time-picker';
+```
+
+#### `DateTimePicker`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `defaultValue` | `Date \| null` | `null` |
+| `modelValue` | `Date \| null` |  |
+| `minDate` | `Date \| null` | `null` |
+| `maxDate` | `Date \| null` | `null` |
+| `step` | `string \| number` | `60` |
+| `disabled` | `boolean` | `false` |
+| `datePlaceholder` | `string` |  |
+| `class` | `HTMLAttributes['class']` |  |
+| `datePickerClass` | `HTMLAttributes['class']` |  |
+| `timePickerClass` | `HTMLAttributes['class']` |  |
+| `datePickerContentClass` | `HTMLAttributes['class']` |  |
+
+- **Emits:** `update:modelValue` (payload: Date \| null).
+
+---
+
+### `@brumaombra/ui-vintage/field`
+
+Form layout primitives: label, description, error list, groups, and fieldsets. `FieldError` accepts strings or `{ message }` objects and hides itself when empty.
+
+```ts
+import { fieldVariants, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from '@brumaombra/ui-vintage/field';
+import type { FieldVariants } from '@brumaombra/ui-vintage/field';
+```
+
+```vue
+<Field>
+    <FieldLabel for="email">Email</FieldLabel>
+    <FieldContent>
+        <Input id="email" v-model="email" :aria-invalid="!!emailError || undefined" />
+        <FieldError :errors="[emailError]" />
+        <FieldDescription>We will send the invite here.</FieldDescription>
+    </FieldContent>
+</Field>
+```
+
+#### `Field`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `orientation` | `FieldVariants['orientation']` |  |
+
+- **Slots:** `default`.
+
+#### `FieldContent`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `FieldDescription`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `FieldError`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `errors` | `Array<string \| { message: string \| undefined } \| undefined>` |  |
+
+- **Slots:** `default`.
+
+#### `FieldGroup`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `FieldLabel`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `FieldLegend`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `variant` | `'legend' \| 'label'` |  |
+
+- **Slots:** `default`.
+
+#### `FieldSeparator`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `FieldSet`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `FieldTitle`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### Functions, constants, and types
+
+```ts
+type FieldVariants = { orientation?: 'vertical' | 'horizontal' | 'responsive' | null | undefined }
+const fieldVariants: (props?: FieldVariants & ClassProp) => string
+```
+
+---
+
+### `@brumaombra/ui-vintage/file-dropzone`
+
+Drag-and-drop file picker with type, size, and count limits, a rejection event, and an animated file list. `v-model` is a `File[]`.
+
+```ts
+import { FileDropzone, formatFileSize, isFileAccepted } from '@brumaombra/ui-vintage/file-dropzone';
+import type { FileRejectionReason, FileRejection } from '@brumaombra/ui-vintage/file-dropzone';
+```
+
+```vue
+<FileDropzone v-model="files" accept="image/*,.pdf" :max-size="5 * 1024 * 1024" :max-files="4" @reject="onReject" />
+```
+
+#### `FileDropzone`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `accept` | `string` |  |
+| `multiple` | `boolean` | `true` |
+| `maxSize` | `number` |  |
+| `maxFiles` | `number` |  |
+| `disabled` | `boolean` | `false` |
+| `title` | `string` |  |
+| `description` | `string` |  |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Emits:** `reject` (rejections: FileRejection[]).
+
+#### Functions, constants, and types
+
+```ts
+type FileRejectionReason = 'type' | 'size' | 'count'
+type FileRejection = { file: File; reason: FileRejectionReason }
+function formatFileSize(bytes: number): string
+function isFileAccepted(file: File, accept: string | undefined): boolean
+```
+
+---
+
+### `@brumaombra/ui-vintage/input`
+
+Text input with `v-model`. Set `aria-invalid` to show the error state.
+
+```ts
+import { Input } from '@brumaombra/ui-vintage/input';
+```
+
+#### `Input`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `defaultValue` | `string \| number` |  |
+| `modelValue` | `string \| number` |  |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Emits:** `update:modelValue` (payload: string \| number).
+
+---
+
+### `@brumaombra/ui-vintage/label`
+
+Accessible form label (Reka `Label`).
+
+```ts
+import { Label } from '@brumaombra/ui-vintage/label';
+```
+
+#### `Label`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `LabelProps`.
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/native-select`
+
+Native `<select>` with the library styling, for simple or mobile-first forms.
+
+```ts
+import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from '@brumaombra/ui-vintage/native-select';
+```
+
+#### `NativeSelect`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `modelValue` | `AcceptableValue \| AcceptableValue[]` |  |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Emits:** `update:modelValue` (AcceptableValue).
+- **Slots:** `default`.
+
+#### `NativeSelectOptGroup`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `NativeSelectOption`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/number-field`
+
+Numeric input with increment and decrement buttons, bounds, and `Intl` formatting (`format-options`).
+
+```ts
+import { NumberField } from '@brumaombra/ui-vintage/number-field';
+```
+
+```vue
+<NumberField v-model="seats" :min="1" :max="50" />
+<NumberField v-model="price" :step="0.1" :format-options="{ style: 'currency', currency: 'EUR' }" />
+```
+
+#### `NumberField`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `placeholder` | `string` |  |
+| `decrementLabel` | `string` |  |
+| `incrementLabel` | `string` |  |
+| `class` | `HTMLAttributes['class']` |  |
+| `inputClass` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `NumberFieldRootProps`.
+- **Emits:** all events of Reka `NumberFieldRootEmits`.
+- **Slots:** `decrement-icon`, `increment-icon`, `default`.
+
+---
+
+### `@brumaombra/ui-vintage/pin-input`
+
+One-time code input. Pass `length` to render the cells automatically; `v-model` is an array of characters.
+
+```ts
+import { PinInput, PinInputInput } from '@brumaombra/ui-vintage/pin-input';
+```
+
+```vue
+<PinInput v-model="code" :length="6" otp type="number" :separator-after="2" :invalid="codeInvalid" @complete="verify" />
+```
+
+#### `PinInput`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `length` | `number` |  |
+| `invalid` | `boolean` |  |
+| `separatorAfter` | `number` |  |
+| `class` | `HTMLAttributes['class']` |  |
+| `inputClass` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `PinInputRootProps`.
+- **Emits:** all events of Reka `PinInputRootEmits`.
+- **Slots:** `default`.
+
+#### `PinInputInput`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `PinInputInputProps`.
+
+---
+
+### `@brumaombra/ui-vintage/radio-group`
+
+Radio group with plain items or selectable `RadioGroupCard` rows (icon, label, description).
+
+```ts
+import { RadioGroup, RadioGroupItem, RadioGroupCard } from '@brumaombra/ui-vintage/radio-group';
+```
+
+```vue
+<RadioGroup v-model="plan">
+    <RadioGroupCard value="pro" label="Pro" description="Unlimited projects" :icon="Rocket01Icon" />
+    <RadioGroupCard value="team" label="Team" description="SSO and audit logs" />
+</RadioGroup>
+```
+
+#### `RadioGroup`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `RadioGroupRootProps`.
+- **Emits:** all events of Reka `RadioGroupRootEmits`.
+- **Slots:** `default`.
+
+#### `RadioGroupItem`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `RadioGroupItemProps`.
+- **Emits:** all events of Reka `RadioGroupItemEmits`.
+- **Slots:** `default`.
+
+#### `RadioGroupCard`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `value` *(required)* | `AcceptableValue` |  |
+| `label` *(required)* | `string` |  |
+| `description` | `string` |  |
+| `icon` | `HugeiconsIconDefinition` |  |
+| `disabled` | `boolean` |  |
+| `id` | `string` |  |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Slots:** `label`, `description`.
+
+---
+
+### `@brumaombra/ui-vintage/select`
+
+Styled Reka select. `SelectValueContent` and `SelectItemContent` render an icon, label, and description.
+
+```ts
+import { Select, SelectContent, SelectGroup, SelectItem, SelectItemContent, SelectItemText, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectValueContent } from '@brumaombra/ui-vintage/select';
+```
+
+```vue
+<Select v-model="region">
+    <SelectTrigger class="w-full">
+        <SelectValueContent placeholder="Choose a region" :label="selectedRegion?.label" />
+    </SelectTrigger>
+    <SelectContent>
+        <SelectItem v-for="option in regions" :key="option.value" :value="option.value" :text-value="option.label">
+            <SelectItemContent :icon="option.icon" :label="option.label" :description="option.description" />
+        </SelectItem>
+    </SelectContent>
+</Select>
+```
+
+#### `Select`
+
+- **Also accepts** all props of Reka `SelectRootProps`.
+- **Emits:** all events of Reka `SelectRootEmits`.
+- **Slots:** `default`.
+
+#### `SelectContent`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `SelectContentProps`.
+- **Emits:** all events of Reka `SelectContentEmits`.
+- **Slots:** `default`.
+
+#### `SelectGroup`
+
+- **Also accepts** all props of Reka `SelectGroupProps`.
+- **Slots:** `default`.
+
+#### `SelectItem`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `SelectItemProps`.
+- **Slots:** `indicator-icon`, `default`.
+
+#### `SelectItemContent`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `icon` | `HugeiconsIconDefinition \| null` |  |
+| `label` | `string \| number \| null` |  |
+| `description` | `string \| number \| null` |  |
+| `iconClass` | `HTMLAttributes['class']` |  |
+| `textClass` | `HTMLAttributes['class']` |  |
+| `descriptionClass` | `HTMLAttributes['class']` |  |
+
+#### `SelectItemText`
+
+- **Also accepts** all props of Reka `SelectItemTextProps`.
+- **Slots:** `default`.
+
+#### `SelectLabel`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `SelectLabelProps`.
+- **Slots:** `default`.
+
+#### `SelectScrollDownButton`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `SelectScrollDownButtonProps`.
+- **Slots:** `default`.
+
+#### `SelectScrollUpButton`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `SelectScrollUpButtonProps`.
+- **Slots:** `default`.
+
+#### `SelectSeparator`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `SelectSeparatorProps`.
+
+#### `SelectTrigger`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `size` | `'sm' \| 'default'` | `'default'` |
+
+- **Also accepts** all props of Reka `SelectTriggerProps`.
+- **Slots:** `default`.
+
+#### `SelectValue`
+
+- **Also accepts** all props of Reka `SelectValueProps`.
+- **Slots:** `default`.
+
+#### `SelectValueContent`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `icon` | `HugeiconsIconDefinition \| null` |  |
+| `label` | `string \| number \| null` |  |
+| `description` | `string \| number \| null` |  |
+| `iconClass` | `HTMLAttributes['class']` |  |
+| `textClass` | `HTMLAttributes['class']` |  |
+| `descriptionClass` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `SelectValueProps`.
+
+---
+
+### `@brumaombra/ui-vintage/slider`
+
+Range slider. `v-model` is an array, one value per thumb (`[50]` or `[20, 80]`).
+
+```ts
+import { Slider } from '@brumaombra/ui-vintage/slider';
+```
+
+#### `Slider`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `SliderRootProps`.
+- **Emits:** all events of Reka `SliderRootEmits`.
+
+---
+
+### `@brumaombra/ui-vintage/slider-form-component`
+
+Card with a label, description, value badge, and single-value slider (`v-model` is a number).
+
+```ts
+import { SliderFormComponent } from '@brumaombra/ui-vintage/slider-form-component';
+```
+
+#### `SliderFormComponent`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `id` | `string` | `undefined` |
+| `label` *(required)* | `string` |  |
+| `description` | `string` | `''` |
+| `modelValue` *(required)* | `number` |  |
+| `min` | `number` | `0` |
+| `max` | `number` | `100` |
+| `step` | `number` | `1` |
+| `valueText` | `string` | `''` |
+
+- **Emits:** `update:modelValue` (value: number).
+
+---
+
+### `@brumaombra/ui-vintage/switch`
+
+On/off switch with `v-model` (boolean).
+
+```ts
+import { Switch } from '@brumaombra/ui-vintage/switch';
+```
+
+#### `Switch`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `SwitchRootProps`.
+- **Emits:** all events of Reka `SwitchRootEmits`.
+- **Slots:** `thumb`.
+
+---
+
+### `@brumaombra/ui-vintage/switch-form-component`
+
+Card row with a label, description, and switch, for settings pages.
+
+```ts
+import { SwitchFormComponent } from '@brumaombra/ui-vintage/switch-form-component';
+```
+
+#### `SwitchFormComponent`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `id` *(required)* | `string` |  |
+| `label` *(required)* | `string` |  |
+| `description` *(required)* | `string` |  |
+| `modelValue` *(required)* | `boolean` |  |
+
+- **Emits:** `update:modelValue` (value: boolean).
+
+---
+
+### `@brumaombra/ui-vintage/tags-input`
+
+Free-text tags input. Without a default slot it renders the tags from `v-model` and an input automatically.
+
+```ts
+import { TagsInput, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput } from '@brumaombra/ui-vintage/tags-input';
+```
+
+```vue
+<TagsInput v-model="skills" placeholder="Add a skill..." />
+```
+
+#### `TagsInput`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `placeholder` | `string` |  |
+| `class` | `HTMLAttributes['class']` |  |
+| `inputClass` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `TagsInputRootProps`.
+- **Emits:** all events of Reka `TagsInputRootEmits`.
+- **Slots:** `default`.
+
+#### `TagsInputItem`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `TagsInputItemProps`.
+- **Slots:** `default`.
+
+#### `TagsInputItemText`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `TagsInputItemTextProps`.
+- **Slots:** `default`.
+
+#### `TagsInputItemDelete`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `TagsInputItemDeleteProps`.
+- **Slots:** `default`.
+
+#### `TagsInputInput`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `TagsInputInputProps`.
+
+---
+
+### `@brumaombra/ui-vintage/textarea`
+
+Auto-growing textarea with `v-model` (uses `field-sizing: content`).
+
+```ts
+import { Textarea } from '@brumaombra/ui-vintage/textarea';
+```
+
+#### `Textarea`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `defaultValue` | `string \| number` |  |
+| `modelValue` | `string \| number` |  |
+
+- **Emits:** `update:modelValue` (payload: string \| number).
+
+---
+
+### `@brumaombra/ui-vintage/time-picker`
+
+Time input with `v-model` as an `HH:mm` (or `HH:mm:ss`) string.
+
+```ts
+import { TimePicker } from '@brumaombra/ui-vintage/time-picker';
+```
+
+#### `TimePicker`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `defaultValue` | `string` | `''` |
+| `modelValue` | `string` |  |
+| `step` | `string \| number` | `1` |
+| `min` | `string` |  |
+| `max` | `string` |  |
+| `disabled` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
+| `inputClass` | `HTMLAttributes['class']` |  |
+
+- **Emits:** `update:modelValue` (payload: string).
+
+## Data display
+
+Surfaces, tables, stats, and status indicators.
+
+### `@brumaombra/ui-vintage/animated-number`
+
+Number that counts up on mount and tweens to new values, formatted with `Intl.NumberFormat`.
+
+```ts
+import { AnimatedNumber } from '@brumaombra/ui-vintage/animated-number';
+```
+
+#### `AnimatedNumber`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `value` *(required)* | `number` |  |
+| `duration` | `number` | `900` |
+| `locale` | `string` | `undefined` |
+| `formatOptions` | `Intl.NumberFormatOptions` | `undefined` |
+| `prefix` | `string` | `''` |
+| `suffix` | `string` | `''` |
+| `animateOnMount` | `boolean` | `true` |
+| `class` | `HTMLAttributes['class']` |  |
+
+---
+
+### `@brumaombra/ui-vintage/avatar`
+
+Avatar with image, generated initials (`AvatarFallback name`), sizes, shapes, and status dots. `AvatarGroup` stacks avatars with a `+N` overflow.
+
+```ts
+import { Avatar, AvatarFallback, AvatarGroup, AvatarImage, avatarSizeClasses, avatarTextClasses, avatarShapeClasses, avatarContextKey, getInitials } from '@brumaombra/ui-vintage/avatar';
+import type { AvatarSize, AvatarShape, AvatarStatus } from '@brumaombra/ui-vintage/avatar';
+```
+
+```vue
+<AvatarGroup :max="3">
+    <Avatar v-for="user in users" :key="user.id" status="online">
+        <AvatarImage :src="user.avatar" :alt="user.name" />
+        <AvatarFallback :name="user.name" />
+    </Avatar>
+</AvatarGroup>
+```
+
+#### `Avatar`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `size` | `AvatarSize` | `'md'` |
+| `shape` | `AvatarShape` | `'circle'` |
+| `status` | `AvatarStatus` |  |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `AvatarRootProps`.
+- **Slots:** `default`.
+
+#### `AvatarFallback`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `name` | `string` |  |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `AvatarFallbackProps`.
+- **Slots:** `default`.
+
+#### `AvatarGroup`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `max` | `number` |  |
+| `size` | `AvatarSize` | `'md'` |
+| `shape` | `AvatarShape` | `'circle'` |
+| `class` | `HTMLAttributes['class']` |  |
+
+#### `AvatarImage`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `AvatarImageProps`.
+- **Emits:** all events of Reka `AvatarImageEmits`.
+
+#### Functions, constants, and types
+
+```ts
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+type AvatarShape = 'circle' | 'square'
+type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'
+const avatarSizeClasses: Record<AvatarSize, string>
+const avatarTextClasses: Record<AvatarSize, string>
+const avatarShapeClasses: Record<AvatarShape, string>
+const avatarContextKey: InjectionKey<{ size: Ref<AvatarSize>; shape: Ref<AvatarShape> }>
+function getInitials(name: string | null | undefined): string
+```
+
+---
+
+### `@brumaombra/ui-vintage/badge`
+
+Small status label in five tones, with an optional icon, `dot`, or pulsing `pulse` indicator.
+
+```ts
+import { Badge } from '@brumaombra/ui-vintage/badge';
+```
+
+```vue
+<Badge text="Operational" color="green" pulse />
+```
+
+#### `Badge`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `text` *(required)* | `string` |  |
+| `icon` | `HugeiconsIconDefinition \| null` | `null` |
+| `color` | `ToneColor` | `'gray'` |
+| `dot` | `boolean` | `false` |
+| `pulse` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
+
+---
+
+### `@brumaombra/ui-vintage/card`
+
+Surface container with header, title, description, content, footer, and action slots. `interactive` adds a hover lift and pointer spotlight; `color` switches to a tone surface.
+
+```ts
+import { Card, CardAction, CardContent, CardText, CardDescription, CardFooter, CardHeader, CardTitle } from '@brumaombra/ui-vintage/card';
+```
+
+```vue
+<Card interactive>
+    <CardHeader>
+        <CardTitle>Deployments</CardTitle>
+        <CardDescription>Ship previews for every branch.</CardDescription>
+    </CardHeader>
+    <CardContent>...</CardContent>
+</Card>
+```
+
+#### `Card`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `color` | `CardColor` |  |
+| `interactive` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Slots:** `default`.
+
+#### `CardAction`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `CardContent`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `CardText`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `CardDescription`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `CardFooter`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `CardHeader`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `CardTitle`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `level` | `HeadingLevel` | `3` |
+
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/card-grid`
+
+Responsive grid of cards with built-in loading, empty, and load-more states. Render each item in the `card` slot.
+
+```ts
+import { CardGrid } from '@brumaombra/ui-vintage/card-grid';
+```
+
+#### `CardGrid`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `items` | `T[]` | `[]` |
+| `busy` | `boolean` | `false` |
+| `loadMoreBusy` | `boolean` | `false` |
+| `hasMore` | `boolean` | `false` |
+| `emptyMessage` *(required)* | `string` |  |
+| `emptyIcon` | `HugeiconsIconDefinition` | `PackageIcon` |
+
+- **Emits:** `load-more`.
+- **Slots:** `card`.
+
+---
+
+### `@brumaombra/ui-vintage/chip`
+
+Removable tag that emits `remove`.
+
+```ts
+import { Chip } from '@brumaombra/ui-vintage/chip';
+```
+
+#### `Chip`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `text` *(required)* | `string` |  |
+| `color` | `ToneColor` | `'gray'` |
+| `removeLabel` | `string` |  |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Emits:** `remove`.
+
+---
+
+### `@brumaombra/ui-vintage/data-list`
+
+Key-value rows for detail panels.
+
+```ts
+import { DataList, DataListItem, DataListLabel, DataListText, DataListValue } from '@brumaombra/ui-vintage/data-list';
+```
+
+#### `DataList`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `DataListItem`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `DataListLabel`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `DataListText`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `DataListValue`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/data-table`
+
+Typed data table with client-side sorting (animated rows), row selection, skeleton loading, empty state, and `cell-<key>` / `header-<key>` slots. Set `manual-sort` to sort on the server.
+
+```ts
+import { DataTable } from '@brumaombra/ui-vintage/data-table';
+import type { DataTableSortDirection, DataTableSort, DataTableColumn } from '@brumaombra/ui-vintage/data-table';
+```
+
+```vue
+<DataTable v-model:selected="selected" v-model:sort="sort" :columns="columns" :rows="customers" selectable :loading="loading">
+    <template #cell-status="{ row }">
+        <Badge :text="row.status" color="green" dot />
+    </template>
+</DataTable>
+```
+
+#### `DataTable`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `columns` *(required)* | `DataTableColumn<T>[]` |  |
+| `rows` *(required)* | `T[]` |  |
+| `rowKey` | `keyof T \| ((row: T) => PropertyKey)` | `'id'` |
+| `selectable` | `boolean` | `false` |
+| `selected` | `PropertyKey[]` | `[]` |
+| `sort` | `DataTableSort \| null` | `null` |
+| `manualSort` | `boolean` | `false` |
+| `loading` | `boolean` | `false` |
+| `loadingRows` | `number` | `5` |
+| `emptyText` | `string` | `''` |
+| `rowClickable` | `boolean` | `false` |
+| `stickyHeader` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Emits:** `update:selected` (value: PropertyKey[]), `update:sort` (value: DataTableSort \| null), `row-click` (row: T, event: MouseEvent).
+- **Slots:** `cell-${string}`, `header-${string}`, `empty`.
+
+#### Functions, constants, and types
+
+```ts
+type DataTableSortDirection = 'asc' | 'desc'
+interface DataTableSort {
+    key: string;
+    direction: DataTableSortDirection;
+}
+interface DataTableColumn<T> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+    class?: string;
+    headerClass?: string;
+    format?: (value: unknown, row: T) => string;
+    sortValue?: (row: T) => string | number | null | undefined;
+}
+```
+
+---
+
+### `@brumaombra/ui-vintage/info-card`
+
+Horizontal card with an icon, title, description, and a `right` slot for actions or badges.
+
+```ts
+import { InfoCard } from '@brumaombra/ui-vintage/info-card';
+```
+
+#### `InfoCard`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `icon` *(required)* | `HugeiconsIconDefinition` |  |
+| `title` | `string` | `''` |
+| `description` | `string \| number` | `''` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Slots:** `right`.
+
+---
+
+### `@brumaombra/ui-vintage/progress`
+
+Progress bar (`v-model` 0 to `max`) with an `indeterminate` mode.
+
+```ts
+import { Progress } from '@brumaombra/ui-vintage/progress';
+```
+
+#### `Progress`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `indeterminate` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `ProgressRootProps`.
+
+---
+
+### `@brumaombra/ui-vintage/progress-component`
+
+Progress bar with a title, a value/max readout, and optional bottom labels.
+
+```ts
+import { ProgressComponent } from '@brumaombra/ui-vintage/progress-component';
+```
+
+#### `ProgressComponent`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `title` *(required)* | `string` |  |
+| `bottomLeftLabel` | `string` | `''` |
+| `bottomRightLabel` | `string` | `''` |
+| `value` *(required)* | `number` |  |
+| `max` *(required)* | `number` |  |
+
+---
+
+### `@brumaombra/ui-vintage/scroll-area`
+
+Scroll container with custom scrollbars.
+
+```ts
+import { ScrollArea, ScrollBar } from '@brumaombra/ui-vintage/scroll-area';
+```
+
+#### `ScrollArea`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `ScrollAreaRootProps`.
+- **Slots:** `default`.
+
+#### `ScrollBar`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `ScrollAreaScrollbarProps`.
+
+---
+
+### `@brumaombra/ui-vintage/separator`
+
+Horizontal or vertical divider.
+
+```ts
+import { Separator } from '@brumaombra/ui-vintage/separator';
+```
+
+#### `Separator`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `SeparatorProps`.
+
+---
+
+### `@brumaombra/ui-vintage/single-value-card`
+
+KPI card. Numeric values count up and tween on change; optional trend badge and description.
+
+```ts
+import { SingleValueCard } from '@brumaombra/ui-vintage/single-value-card';
+```
+
+```vue
+<SingleValueCard label="Revenue" :value="48290" :icon="Money03Icon" :trend="12.4" trend-label="vs last month"
+    :format-options="{ style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }" />
+```
+
+#### `SingleValueCard`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `value` *(required)* | `string \| number` |  |
+| `label` *(required)* | `string` |  |
+| `icon` *(required)* | `HugeiconsIconDefinition` |  |
+| `valueColor` | `'default' \| 'green' \| 'red' \| 'gray'` | `'default'` |
+| `trend` | `number \| null` | `null` |
+| `trendLabel` | `string` | `''` |
+| `description` | `string` | `''` |
+| `animate` | `boolean` | `true` |
+| `formatOptions` | `Intl.NumberFormatOptions` | `undefined` |
+| `class` | `HTMLAttributes['class']` |  |
+
+---
+
+### `@brumaombra/ui-vintage/skeleton`
+
+Shimmering loading placeholder. Size and shape it with classes.
+
+```ts
+import { Skeleton } from '@brumaombra/ui-vintage/skeleton';
+```
+
+#### `Skeleton`
+
+- **Props:** `class`.
+
+---
+
+### `@brumaombra/ui-vintage/table`
+
+Low-level table parts (header, body, row, cell, caption, footer, empty row) for fully custom tables.
+
+```ts
+import { Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, TableHead, TableHeader, TableRow } from '@brumaombra/ui-vintage/table';
+```
+
+#### `Table`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `TableBody`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `TableCaption`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `TableCell`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `TableEmpty`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `colspan` | `number` | `1` |
+
+- **Slots:** `default`.
+
+#### `TableFooter`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `TableHead`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `TableHeader`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `TableRow`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+## Navigation
+
+Tabs, steps, pagination, disclosures, and sidebars.
+
+### `@brumaombra/ui-vintage/accordion`
+
+Single expandable card with a title and optional icon. Uncontrolled (`initially-expanded`) or controlled (`v-model:open`).
+
+```ts
+import { Accordion } from '@brumaombra/ui-vintage/accordion';
+```
+
+```vue
+<Accordion title="What is UI Vintage?" :icon="InformationCircleIcon" initially-expanded>
+    <p>A source-published Nuxt component library.</p>
+</Accordion>
+```
+
+#### `Accordion`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `title` *(required)* | `string` |  |
+| `initiallyExpanded` | `boolean` | `false` |
+| `open` | `boolean` | `undefined` |
+| `icon` | `HugeiconsIconDefinition \| null` |  |
+| `iconClass` | `HTMLAttributes['class']` |  |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Emits:** `update:open` (value: boolean).
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/breadcrumb`
+
+Breadcrumb trail parts: list, item, link, current page, separator, and ellipsis.
+
+```ts
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@brumaombra/ui-vintage/breadcrumb';
+```
+
+#### `Breadcrumb`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `BreadcrumbEllipsis`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `BreadcrumbItem`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `BreadcrumbLink`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `PrimitiveProps`.
+- **Slots:** `default`.
+
+#### `BreadcrumbList`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `BreadcrumbPage`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `BreadcrumbSeparator`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/collapsible`
+
+Show or hide content with an animated height (`v-model:open`).
+
+```ts
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@brumaombra/ui-vintage/collapsible';
+```
+
+#### `Collapsible`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CollapsibleRootProps`.
+- **Emits:** all events of Reka `CollapsibleRootEmits`.
+- **Slots:** `default`.
+
+#### `CollapsibleContent`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CollapsibleContentProps`.
+- **Emits:** all events of Reka `CollapsibleContentEmits`.
+- **Slots:** `default`.
+
+#### `CollapsibleTrigger`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `CollapsibleTriggerProps`.
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/pagination`
+
+Pagination controls. `SimplePagination` covers the common case; the parts compose custom layouts.
+
+```ts
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, SimplePagination } from '@brumaombra/ui-vintage/pagination';
+```
+
+```vue
+<SimplePagination v-model:page="page" :total="240" :items-per-page="20" />
+```
+
+#### `Pagination`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `PaginationRootProps`.
+- **Emits:** all events of Reka `PaginationRootEmits`.
+- **Slots:** `default`.
+
+#### `PaginationContent`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `PaginationListProps`.
+- **Slots:** `default`.
+
+#### `PaginationEllipsis`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `PaginationEllipsisProps`.
+- **Slots:** `default`.
+
+#### `PaginationFirst`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `size` | `ButtonVariants['size']` | `'icon-sm'` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `PaginationFirstProps`.
+- **Slots:** `default`.
+
+#### `PaginationItem`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `size` | `ButtonVariants['size']` | `'icon-sm'` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `PaginationListItemProps`.
+- **Slots:** `default`.
+
+#### `PaginationLast`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `size` | `ButtonVariants['size']` | `'icon-sm'` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `PaginationLastProps`.
+- **Slots:** `default`.
+
+#### `PaginationNext`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `size` | `ButtonVariants['size']` | `'icon-sm'` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `PaginationNextProps`.
+- **Slots:** `default`.
+
+#### `PaginationPrevious`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `size` | `ButtonVariants['size']` | `'icon-sm'` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `PaginationPrevProps`.
+- **Slots:** `default`.
+
+#### `SimplePagination`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `total` *(required)* | `number` |  |
+| `itemsPerPage` | `number` | `10` |
+| `siblingCount` | `number` | `1` |
+| `showEdges` | `boolean` | `true` |
+| `disabled` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
+
+---
+
+### `@brumaombra/ui-vintage/sidebar`
+
+Low-level sidebar system (provider, collapsible desktop sidebar, mobile sheet, menus, `useSidebar`). Prefer `dashboard-shell`, which composes it.
+
+```ts
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, sidebarMenuButtonVariants } from '@brumaombra/ui-vintage/sidebar';
+import type { SidebarProps, SidebarMenuButtonVariants } from '@brumaombra/ui-vintage/sidebar';
+```
+
+#### `Sidebar`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `side` | `'left' \| 'right'` | `'left'` |
+| `variant` | `'sidebar' \| 'floating' \| 'inset'` | `'sidebar'` |
+| `collapsible` | `'offcanvas' \| 'icon' \| 'none'` | `'offcanvas'` |
+| `compact` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Slots:** `default`.
+
+#### `SidebarContent`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarFooter`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarGroup`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarGroupAction`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `PrimitiveProps`.
+- **Slots:** `default`.
+
+#### `SidebarGroupContent`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarGroupLabel`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `PrimitiveProps`.
+- **Slots:** `default`.
+
+#### `SidebarHeader`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarInput`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarInset`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarMenu`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarMenuAction`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `showOnHover` | `boolean` |  |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `PrimitiveProps`.
+- **Slots:** `default`.
+
+#### `SidebarMenuBadge`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarMenuButton`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `variant` | `SidebarMenuButtonVariants['variant']` | `'default'` |
+| `size` | `SidebarMenuButtonVariants['size']` | `'default'` |
+| `isActive` | `boolean` |  |
+| `class` | `HTMLAttributes['class']` |  |
+| `tooltip` | `string \| Component` |  |
+
+- **Also accepts** all props of Reka `PrimitiveProps`.
+- **Slots:** `default`.
+
+#### `SidebarMenuItem`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarMenuSkeleton`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `showIcon` | `boolean` |  |
+| `class` | `HTMLAttributes['class']` |  |
+
+#### `SidebarMenuSub`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarMenuSubButton`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `size` | `'sm' \| 'md'` | `'md'` |
+| `isActive` | `boolean` |  |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `PrimitiveProps`.
+- **Slots:** `default`.
+
+#### `SidebarMenuSubItem`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarProvider`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `defaultOpen` | `boolean` | `!defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`)` |
+| `open` | `boolean` | `undefined` |
+| `compact` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
+
+- **Emits:** `update:open` (open: boolean).
+- **Slots:** `default`.
+
+#### `SidebarRail`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarSeparator`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SidebarTrigger`
+
+- **Props:** `class`.
+
+#### Functions, constants, and types
+
+```ts
+value useSidebar
+interface SidebarProps {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+    compact?: boolean;
+    class?: HTMLAttributes['class'];
+}
+type SidebarMenuButtonVariants = { variant?: 'default' | 'outline' | null | undefined; size?: 'default' | 'sm' | 'lg' | null | undefined }
+const sidebarMenuButtonVariants: ( props?: SidebarMenuButtonVariants & ClassProp ) => string
+```
+
+---
+
+### `@brumaombra/ui-vintage/stepper`
+
+Step indicator for wizards. `SimpleStepper` renders a whole stepper from a `steps` array; the other parts compose custom layouts.
+
+```ts
+import { SimpleStepper, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@brumaombra/ui-vintage/stepper';
+import type { StepperStep } from '@brumaombra/ui-vintage/stepper';
+```
+
+```vue
+<SimpleStepper v-model="step" :steps="[{ title: 'Account' }, { title: 'Billing', description: 'Pick a plan' }, { title: 'Launch' }]" />
+```
+
+#### `SimpleStepper`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `steps` *(required)* | `StepperStep[]` |  |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| `linear` | `boolean` | `true` |
+| `class` | `HTMLAttributes['class']` |  |
+
+#### `Stepper`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `StepperRootProps`.
+- **Emits:** all events of Reka `StepperRootEmits`.
+- **Slots:** `default`.
+
+#### `StepperDescription`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `StepperDescriptionProps`.
+- **Slots:** `default`.
+
+#### `StepperIndicator`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `StepperIndicatorProps`.
+- **Slots:** `default`.
+
+#### `StepperItem`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `StepperItemProps`.
+- **Slots:** `default`.
+
+#### `StepperSeparator`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `StepperSeparatorProps`.
+
+#### `StepperTitle`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `StepperTitleProps`.
+- **Slots:** `default`.
+
+#### `StepperTrigger`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `StepperTriggerProps`.
+- **Slots:** `default`.
+
+#### Functions, constants, and types
+
+```ts
+type StepperStep = { title: string; description?: string; icon?: HugeiconsIconDefinition }
+```
+
+---
+
+### `@brumaombra/ui-vintage/tabs`
+
+Tabs with a sliding active indicator (horizontal or vertical) and animated panels.
+
+```ts
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@brumaombra/ui-vintage/tabs';
+```
+
+```vue
+<Tabs default-value="overview">
+    <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+    </TabsList>
+    <TabsContent value="overview">...</TabsContent>
+    <TabsContent value="settings">...</TabsContent>
+</Tabs>
+```
+
+#### `Tabs`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `TabsRootProps`.
+- **Emits:** all events of Reka `TabsRootEmits`.
+- **Slots:** `default`.
+
+#### `TabsContent`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `TabsContentProps`.
+- **Slots:** `default`.
+
+#### `TabsList`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `indicatorClass` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `TabsListProps`.
+- **Slots:** `default`.
+
+#### `TabsTrigger`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `TabsTriggerProps`.
+- **Slots:** `default`.
+
+## Overlays
+
+Modals, sheets, and floating surfaces built on Reka UI.
+
+### `@brumaombra/ui-vintage/alert-dialog`
+
+Modal that requires an explicit choice. For simple confirmations prefer `showConfirmDialog` from `confirm-dialog`.
+
+```ts
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@brumaombra/ui-vintage/alert-dialog';
+```
+
+#### `AlertDialog`
+
+- **Also accepts** all props of Reka `AlertDialogProps`.
+- **Emits:** all events of Reka `AlertDialogEmits`.
+- **Slots:** `default`.
+
+#### `AlertDialogAction`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `AlertDialogActionProps`.
+- **Slots:** `default`.
+
+#### `AlertDialogCancel`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `AlertDialogCancelProps`.
+- **Slots:** `default`.
+
+#### `AlertDialogContent`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `AlertDialogContentProps`.
+- **Emits:** all events of Reka `AlertDialogContentEmits`.
+- **Slots:** `default`.
+
+#### `AlertDialogDescription`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `AlertDialogDescriptionProps`.
+- **Slots:** `default`.
+
+#### `AlertDialogFooter`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `AlertDialogHeader`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `AlertDialogTitle`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `AlertDialogTitleProps`.
+- **Slots:** `default`.
+
+#### `AlertDialogTrigger`
+
+- **Also accepts** all props of Reka `AlertDialogTriggerProps`.
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/command`
+
+Command palette list with filtering. A string `value` on `CommandItem` adds search keywords. Use `CommandDialog` for a modal palette.
+
+```ts
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, [useCommand, provideCommandContext], [useCommandGroup, provideCommandGroupContext] } from '@brumaombra/ui-vintage/command';
+```
+
+```vue
+<CommandDialog v-model:open="open">
+    <CommandInput placeholder="Search..." />
+    <CommandList>
+        <CommandEmpty>No results.</CommandEmpty>
+        <CommandGroup heading="Pages">
+            <CommandItem value="settings preferences" @select="go('/settings')">Settings</CommandItem>
+        </CommandGroup>
+    </CommandList>
+</CommandDialog>
+```
+
+#### `Command`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `ListboxRootProps`.
+- **Emits:** all events of Reka `ListboxRootEmits`.
+- **Slots:** `default`.
+
+#### `CommandDialog`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `title` | `string` |  |
+| `description` | `string` |  |
+| `contentClass` | `HTMLAttributes['class']` |  |
+
+- **Also accepts** all props of Reka `DialogRootProps`.
+- **Emits:** all events of Reka `DialogRootEmits`.
+- **Slots:** `default`.
+
+#### `CommandEmpty`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `PrimitiveProps`.
+- **Slots:** `default`.
+
+#### `CommandGroup`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `heading` | `string` |  |
+
+- **Also accepts** all props of Reka `ListboxGroupProps`.
+- **Slots:** `default`.
+
+#### `CommandInput`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `ListboxFilterProps`.
+
+#### `CommandItem`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `ListboxItemProps`.
+- **Emits:** all events of Reka `ListboxItemEmits`.
+- **Slots:** `default`.
+
+#### `CommandList`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `ListboxContentProps`.
+- **Slots:** `default`.
+
+#### `CommandSeparator`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `SeparatorProps`.
+- **Slots:** `default`.
+
+#### `CommandShortcut`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### Functions, constants, and types
+
+```ts
+value [useCommand, provideCommandContext]
+value [useCommandGroup, provideCommandGroupContext]
+```
+
+---
+
+### `@brumaombra/ui-vintage/dialog`
+
+Modal dialog. `DialogContent` accepts `show-close-button`; use `DialogScrollContent` for long content.
+
+```ts
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogScrollContent, DialogTitle, DialogTrigger } from '@brumaombra/ui-vintage/dialog';
+```
+
+```vue
+<Dialog>
+    <DialogTrigger as-child>
+        <Button>Edit profile</Button>
+    </DialogTrigger>
+    <DialogContent show-close-button>
+        <DialogHeader>
+            <DialogTitle>Edit profile</DialogTitle>
+            <DialogDescription>Make changes to your profile.</DialogDescription>
+        </DialogHeader>
+        ...
+        <DialogFooter>
+            <DialogClose as-child><Button variant="secondary">Cancel</Button></DialogClose>
+        </DialogFooter>
+    </DialogContent>
+</Dialog>
+```
+
+#### `Dialog`
+
+- **Also accepts** all props of Reka `DialogRootProps`.
+- **Emits:** all events of Reka `DialogRootEmits`.
+- **Slots:** `default`.
+
+#### `DialogClose`
+
+- **Also accepts** all props of Reka `DialogCloseProps`.
+- **Slots:** `default`.
+
+#### `DialogContent`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `showCloseButton` | `boolean` | `false` |
+
+- **Also accepts** all props of Reka `DialogContentProps`.
+- **Emits:** all events of Reka `DialogContentEmits`.
+- **Slots:** `default`.
+
+#### `DialogDescription`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `DialogDescriptionProps`.
+- **Slots:** `default`.
+
+#### `DialogFooter`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `DialogHeader`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `DialogOverlay`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `DialogOverlayProps`.
+- **Slots:** `default`.
+
+#### `DialogScrollContent`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `showCloseButton` | `boolean` | `false` |
+
+- **Also accepts** all props of Reka `DialogContentProps`.
+- **Emits:** all events of Reka `DialogContentEmits`.
+- **Slots:** `default`.
+
+#### `DialogTitle`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `DialogTitleProps`.
+- **Slots:** `default`.
+
+#### `DialogTrigger`
+
+- **Also accepts** all props of Reka `DialogTriggerProps`.
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/hover-card`
+
+Rich preview shown on hover (for example a user profile behind a link).
+
+```ts
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@brumaombra/ui-vintage/hover-card';
+```
+
+#### `HoverCard`
+
+- **Also accepts** all props of Reka `HoverCardRootProps`.
+- **Emits:** all events of Reka `HoverCardRootEmits`.
+- **Slots:** `default`.
+
+#### `HoverCardContent`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `HoverCardContentProps`.
+- **Slots:** `default`.
+
+#### `HoverCardTrigger`
+
+- **Also accepts** all props of Reka `HoverCardTriggerProps`.
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/popover`
+
+Floating panel anchored to a trigger.
+
+```ts
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '@brumaombra/ui-vintage/popover';
+```
+
+#### `Popover`
+
+- **Also accepts** all props of Reka `PopoverRootProps`.
+- **Emits:** all events of Reka `PopoverRootEmits`.
+- **Slots:** `default`.
+
+#### `PopoverAnchor`
+
+- **Also accepts** all props of Reka `PopoverAnchorProps`.
+- **Slots:** `default`.
+
+#### `PopoverContent`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `PopoverContentProps`.
+- **Emits:** all events of Reka `PopoverContentEmits`.
+- **Slots:** `default`.
+
+#### `PopoverTrigger`
+
+- **Also accepts** all props of Reka `PopoverTriggerProps`.
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/sheet`
+
+Side panel that slides in from `top`, `right`, `bottom`, or `left`.
+
+```ts
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@brumaombra/ui-vintage/sheet';
+```
+
+```vue
+<Sheet>
+    <SheetTrigger as-child><Button variant="secondary">Settings</Button></SheetTrigger>
+    <SheetContent side="right">
+        <SheetHeader>
+            <SheetTitle>Settings</SheetTitle>
+            <SheetDescription>Workspace preferences.</SheetDescription>
+        </SheetHeader>
+    </SheetContent>
+</Sheet>
+```
+
+#### `Sheet`
+
+- **Also accepts** all props of Reka `DialogRootProps`.
+- **Emits:** all events of Reka `DialogRootEmits`.
+- **Slots:** `default`.
+
+#### `SheetClose`
+
+- **Also accepts** all props of Reka `DialogCloseProps`.
+- **Slots:** `default`.
+
+#### `SheetContent`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` |
+
+- **Also accepts** all props of Reka `DialogContentProps`.
+- **Emits:** all events of Reka `DialogContentEmits`.
+- **Slots:** `default`.
+
+#### `SheetDescription`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `DialogDescriptionProps`.
+- **Slots:** `default`.
+
+#### `SheetFooter`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SheetHeader`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `SheetTitle`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `DialogTitleProps`.
+- **Slots:** `default`.
+
+#### `SheetTrigger`
+
+- **Also accepts** all props of Reka `DialogTriggerProps`.
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/tooltip`
+
+Hover and focus hint. Wrap the app (or layout) in `TooltipProvider` once; `DashboardShell` already provides one.
+
+```ts
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@brumaombra/ui-vintage/tooltip';
+```
+
+```vue
+<Tooltip>
+    <TooltipTrigger as-child><Button variant="ghost" size="icon">?</Button></TooltipTrigger>
+    <TooltipContent side="right">Helpful hint</TooltipContent>
+</Tooltip>
+```
+
+#### `Tooltip`
+
+- **Also accepts** all props of Reka `TooltipRootProps`.
+- **Emits:** all events of Reka `TooltipRootEmits`.
+- **Slots:** `default`.
+
+#### `TooltipContent`
+
+- **Props:** `class`.
+- **Also accepts** all props of Reka `TooltipContentProps`.
+- **Emits:** all events of Reka `TooltipContentEmits`.
+- **Slots:** `default`.
+
+#### `TooltipProvider`
+
+- **Also accepts** all props of Reka `TooltipProviderProps`.
+- **Slots:** `default`.
+
+#### `TooltipTrigger`
+
+- **Also accepts** all props of Reka `TooltipTriggerProps`.
+- **Slots:** `default`.
+
+## Feedback
+
+Toasts, promise-based dialogs, the busy overlay, alerts, and empty or loading states. The runtime flows mount themselves lazily, so no component needs to be placed in the app.
+
+### `@brumaombra/ui-vintage/alert`
+
+Inline callout in five tones. Put an icon first, then `AlertTitle` and `AlertDescription`.
+
+```ts
+import { Alert, AlertDescription, AlertTitle, alertClasses } from '@brumaombra/ui-vintage/alert';
+import type { AlertColors } from '@brumaombra/ui-vintage/alert';
+```
+
+```vue
+<Alert color="yellow">
+    <HugeiconsIcon :icon="Alert02Icon" />
+    <AlertTitle>Approaching limit</AlertTitle>
+    <AlertDescription>You have used 92% of your build minutes.</AlertDescription>
+</Alert>
+```
+
+#### `Alert`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `class` | `HTMLAttributes['class']` |  |
+| `color` | `AlertColors['color']` |  |
+
+- **Slots:** `default`.
+
+#### `AlertDescription`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `AlertTitle`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### Functions, constants, and types
+
+```ts
+type AlertColors = { color?: ToneColor | null | undefined }
+const alertClasses: (props?: ClassProp) => string
+```
+
+---
+
+### `@brumaombra/ui-vintage/busy`
+
+Busy overlay component for local use (`show` prop). For a global overlay use `busy-indicator`.
+
+```ts
+import { Busy } from '@brumaombra/ui-vintage/busy';
+```
+
+#### `Busy`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `show` | `boolean` | `false` |
+| `label` | `string` |  |
+| `class` | `HTMLAttributes['class']` |  |
+| `overlayClass` | `HTMLAttributes['class']` |  |
+
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/busy-indicator`
+
+Global busy overlay controlled with `setBusy(show, options)`.
+
+```ts
+import { BusyIndicator, busyIndicatorState, setBusy } from '@brumaombra/ui-vintage/busy-indicator';
+import type { SetBusyOptions } from '@brumaombra/ui-vintage/busy-indicator';
+```
+
+```ts
+setBusy(true, { label: 'Generating report...' });
+await generateReport();
+setBusy(false);
+```
+
+#### `BusyIndicator`
+
+- **Props:** none.
+
+#### Functions, constants, and types
+
+```ts
+const busyIndicatorState: BusyIndicatorState
+function setBusy(show: boolean, options: SetBusyOptions = {})
+interface SetBusyOptions {
+    label?: string;
+    class?: HTMLAttributes['class'];
+    overlayClass?: HTMLAttributes['class'];
+}
+```
+
+---
+
+### `@brumaombra/ui-vintage/confirm-dialog`
+
+Promise-based confirmation dialog. Resolves to `true` or `false`; an async `onConfirm` shows a spinner on the confirm button until it settles.
+
+```ts
+import { ConfirmDialog, cancelActiveConfirmDialog, closeConfirmDialog, confirmActiveDialog, confirmDialogState, showConfirmDialog } from '@brumaombra/ui-vintage/confirm-dialog';
+import type { DialogButtonVariant, ShowConfirmDialogOptions } from '@brumaombra/ui-vintage/confirm-dialog';
+```
+
+```ts
+const confirmed = await showConfirmDialog({
+    title: 'Delete project?',
+    message: 'This action cannot be undone.',
+    confirmText: 'Delete',
+    confirmButtonType: 'red',
+    onConfirm: () => api.deleteProject(id)
+});
+```
+
+#### `ConfirmDialog`
+
+- **Props:** none.
+
+#### Functions, constants, and types
+
+```ts
+async function cancelActiveConfirmDialog()
+function closeConfirmDialog()
+async function confirmActiveDialog()
+const confirmDialogState: ConfirmDialogState
+function showConfirmDialog(options: ShowConfirmDialogOptions)
+type DialogButtonVariant = NonNullable<ButtonVariants['variant']>
+interface ShowConfirmDialogOptions {
+    title?: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    confirmButtonType?: DialogButtonVariant;
+    cancelButtonType?: DialogButtonVariant;
+    icon?: HugeiconsIconDefinition | null;
+    confirmButtonIcon?: HugeiconsIconDefinition | null;
+    cancelButtonIcon?: HugeiconsIconDefinition | null;
+    onConfirm?: (() => void | Promise<void>) | null;
+    onCancel?: (() => void | Promise<void>) | null;
+}
+```
+
+---
+
+### `@brumaombra/ui-vintage/cookie-consent`
+
+Cookie consent banner fixed to the bottom of the page, shown in the browser until the visitor accepts or declines. The choice is saved in `localStorage` under `storage-key`; `useCookieConsent(storageKey)` shares it, so optional scripts (analytics, ads) can wait for `consent.value === "granted"` and a settings page can call `reset()` to ask again. Texts have translated defaults, `policy-to` adds a link to the cookie policy.
+
+```ts
+import { CookieConsent, useCookieConsent } from '@brumaombra/ui-vintage/cookie-consent';
+import type { CookieConsentValue } from '@brumaombra/ui-vintage/cookie-consent';
+```
+
+```vue
+<CookieConsent storage-key="analyticsConsent" policy-to="/cookie-policy" @accept="loadAnalytics" />
+
+<script setup>
+const { consent, reset } = useCookieConsent('analyticsConsent');
+watch(consent, value => value === 'granted' && loadAnalytics(), { immediate: true });
+</script>
+```
+
+#### `CookieConsent`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `storageKey` | `string` | `'cookieConsent'` |
+| `message` | `string` | `undefined` |
+| `policyTo` | `string` | `undefined` |
+| `policyLabel` | `string` | `undefined` |
+| `acceptLabel` | `string` | `undefined` |
+| `declineLabel` | `string` | `undefined` |
+| `class` | `HTMLAttributes['class']` | `undefined` |
+
+- **Emits:** `accept`, `decline`.
+
+#### Functions, constants, and types
+
+```ts
+function useCookieConsent(storageKey = 'cookieConsent')
+type CookieConsentValue = 'granted' | 'denied' | null
+```
+
+---
+
+### `@brumaombra/ui-vintage/empty-state-card`
+
+Empty state with an icon, title, description, and an `action` slot. Falls back to localized default copy.
+
+```ts
+import { EmptyStateCard } from '@brumaombra/ui-vintage/empty-state-card';
+```
+
+#### `EmptyStateCard`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `icon` | `HugeiconsIconDefinition` | `PackageIcon` |
+| `title` | `string` | `''` |
+| `description` | `string` | `''` |
+| `titleKey` | `string` | `''` |
+| `descriptionKey` | `string` | `''` |
+| `level` | `HeadingLevel` | `3` |
+
+- **Slots:** `action`.
+
+---
+
+### `@brumaombra/ui-vintage/loading-state-card`
+
+Loading state card with a spinning icon and localized default copy.
+
+```ts
+import { LoadingStateCard } from '@brumaombra/ui-vintage/loading-state-card';
+```
+
+#### `LoadingStateCard`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `icon` | `HugeiconsIconDefinition` | `Loading03Icon` |
+| `title` | `string` | `''` |
+| `description` | `string` | `''` |
+| `level` | `HeadingLevel` | `3` |
+
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/message-dialog`
+
+Promise-based message dialog for success, info, warning, and error messages.
+
+```ts
+import { MessageDialog, closeMessageDialog, messageDialogState, resolveActiveMessageDialog, showMessageDialog } from '@brumaombra/ui-vintage/message-dialog';
+import type { DialogMessageType, ShowMessageDialogOptions } from '@brumaombra/ui-vintage/message-dialog';
+```
+
+```ts
+await showMessageDialog({ type: 'success', message: 'Your account is verified.' });
+```
+
+#### `MessageDialog`
+
+- **Props:** none.
+
+#### Functions, constants, and types
+
+```ts
+function closeMessageDialog()
+const messageDialogState: MessageDialogState
+function resolveActiveMessageDialog()
+function showMessageDialog(options: ShowMessageDialogOptions)
+type DialogMessageType = 'error' | 'success' | 'info' | 'warning'
+interface ShowMessageDialogOptions {
+    type?: DialogMessageType;
+    title?: string;
+    message: string;
+    closeText?: string;
+    icon?: HugeiconsIconDefinition | null;
+    closeButtonIcon?: HugeiconsIconDefinition | null;
+}
+```
+
+---
+
+### `@brumaombra/ui-vintage/message-toast`
+
+Stacked toasts (hover to expand and pause, swipe to dismiss) with titles and actions. `showMessageToast` returns an id for `closeMessageToast(id)`; `duration: 0` keeps a toast open.
+
+```ts
+import { closeMessageToast, messageToastState, pauseMessageToasts, resumeMessageToasts, showMessageToast } from '@brumaombra/ui-vintage/message-toast';
+import type { MessageToastAction, MessageToastItem, MessageToastType, ShowMessageToastOptions } from '@brumaombra/ui-vintage/message-toast';
+```
+
+```ts
+showMessageToast({ title: 'Saved', message: 'Your changes are live.', type: 'success' });
+
+const id = showMessageToast({ message: 'Publishing...', type: 'info', duration: 0, dismissible: false });
+closeMessageToast(id);
+```
+
+#### Functions, constants, and types
+
+```ts
+function closeMessageToast(id?: number)
+const messageToastState: MessageToastState
+function pauseMessageToasts()
+function resumeMessageToasts()
+function showMessageToast(options: ShowMessageToastOptions)
+interface MessageToastAction {
+    label: string;
+    onClick: () => void | Promise<void>;
+}
+interface MessageToastItem {
+    id: number;
+    message: string;
+    type: MessageToastType;
+    title: string;
+    icon: HugeiconsIconDefinition | null;
+    action: MessageToastAction | null;
+    dismissible: boolean;
+    duration: number;
+}
+type MessageToastType = 'success' | 'info' | 'warning' | 'error'
+interface ShowMessageToastOptions {
+    message: string;
+    type?: MessageToastType;
+    duration?: number;
+    title?: string;
+    icon?: HugeiconsIconDefinition | null;
+    action?: MessageToastAction | null;
+    dismissible?: boolean;
+}
+```
+
+---
+
+### `@brumaombra/ui-vintage/spinner`
+
+Loading spinner in five sizes; inherits the text color.
+
+```ts
+import { Spinner } from '@brumaombra/ui-vintage/spinner';
+```
+
+#### `Spinner`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` |
+| `label` | `string` | `''` |
+| `class` | `HTMLAttributes['class']` |  |
+
+## Layouts and app shell
+
+Application shells, page headers, error pages, and theme or language controls.
+
+### `@brumaombra/ui-vintage/background-grid`
+
+Decorative grid background for app shells.
+
+```ts
+import { BackgroundGrid } from '@brumaombra/ui-vintage/background-grid';
+```
+
+#### `BackgroundGrid`
+
+- **Props:** `class`.
+
+---
+
+### `@brumaombra/ui-vintage/dashboard-shell`
+
+Complete dashboard layout: collapsible sidebar built from `sidebar-sections`, mobile sheet, sticky topbar, and grid background. Pass `NuxtLink` as `sidebar-link-component` for client-side navigation.
+
+```ts
+import { DashboardShell } from '@brumaombra/ui-vintage/dashboard-shell';
+```
+
+```vue
+<DashboardShell title="Projects" :sidebar-sections="sections" :sidebar-link-component="NuxtLink">
+    <template #topbar-trailing>
+        <ThemeSelector />
+    </template>
+    <slot />
+</DashboardShell>
+```
+
+#### `DashboardShell`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `appName` | `string` | `''` |
+| `appLogo` | `string` | `''` |
+| `appLinkTo` | `string` | `'/'` |
+| `title` | `string` | `''` |
+| `description` | `string` | `''` |
+| `collapsible` | `'offcanvas' \| 'icon' \| 'none'` | `'offcanvas'` |
+| `compact` | `boolean` | `false` |
+| `sidebarSections` | `Array<{ id: string; label?: string; items: Array<{ id: string; label: string; description?: string; icon?: HugeiconsIconDefinition \| null; href?: string; to?: unknown; active?: boolean; newTab?: boolean }> }>` | `[]` |
+| `sidebarLinkComponent` | `Component \| string` | `'a'` |
+| `showBackground` | `boolean` | `true` |
+| `insetClass` | `HTMLAttributes['class']` |  |
+| `topbarClass` | `HTMLAttributes['class']` |  |
+| `contentContainerClass` | `HTMLAttributes['class']` |  |
+
+- **Slots:** `sidebar-header`, `sidebar-footer`, `topbar-leading`, `topbar-trailing`, `default`, `footer`.
+
+---
+
+### `@brumaombra/ui-vintage/error-page`
+
+Branded 404/500 page for `error.vue`, with `toolbar` and `brand` slots and an `action` event.
+
+```ts
+import { ErrorPage } from '@brumaombra/ui-vintage/error-page';
+```
+
+#### `ErrorPage`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `statusCode` | `number \| string` | `500` |
+| `label` | `string` |  |
+| `title` | `string` | `undefined` |
+| `message` | `string` | `undefined` |
+| `actionLabel` | `string` |  |
+| `showBackground` | `boolean` | `true` |
+| `showDefaultAction` | `boolean` | `true` |
+| `class` | `HTMLAttributes['class']` | `undefined` |
+| `cardClass` | `HTMLAttributes['class']` | `undefined` |
+| `contentClass` | `HTMLAttributes['class']` | `undefined` |
+| `footerClass` | `HTMLAttributes['class']` | `undefined` |
+
+- **Emits:** `action`.
+- **Slots:** `toolbar`, `brand`, `actions`.
+
+---
+
+### `@brumaombra/ui-vintage/landing`
+
+All landing layout parts in one entry point (shell, navbar, content, footer).
+
+```ts
+import { LandingContent, LandingShell, LandingNavbar, LandingFooter } from '@brumaombra/ui-vintage/landing';
+import type { LandingFooterLink, LandingFooterSection } from '@brumaombra/ui-vintage/landing';
+```
+
+#### `LandingContent`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+#### `LandingShell`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `showBackground` | `boolean` | `true` |
+| `rootClass` | `HTMLAttributes['class']` |  |
+| `navbarClass` | `HTMLAttributes['class']` |  |
+| `mainClass` | `HTMLAttributes['class']` |  |
+| `footerClass` | `HTMLAttributes['class']` |  |
+
+- **Slots:** `navbar`, `content`, `default`, `footer`.
+
+#### `LandingNavbar`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `appName` | `string` | `''` |
+| `appLogo` | `string` | `''` |
+| `appLinkTo` | `string` | `'/'` |
+| `logoClass` | `HTMLAttributes['class']` |  |
+| `class` | `HTMLAttributes['class']` |  |
+| `containerClass` | `HTMLAttributes['class']` |  |
+| `leftClass` | `HTMLAttributes['class']` |  |
+| `rightClass` | `HTMLAttributes['class']` |  |
+| `showProgress` | `boolean` | `false` |
+
+- **Slots:** `left`, `right`.
+
+#### `LandingFooter`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `appName` *(required)* | `string` |  |
+| `appLogo` | `string` |  |
+| `appLinkTo` | `string` | `'/'` |
+| `logoClass` | `HTMLAttributes['class']` |  |
+| `appDescription` | `string` | `''` |
+| `sections` | `LandingFooterSection[]` | `[]` |
+| `linkComponent` | `Component \| string` | `'a'` |
+| `authorName` | `string` | `''` |
+| `authorLink` | `string` | `''` |
+| `year` | `number` | `new Date().getFullYear()` |
+| `showBottomBar` | `boolean` | `true` |
+| `level` | `HeadingLevel` | `3` |
+| `class` | `HTMLAttributes['class']` |  |
+| `containerClass` | `HTMLAttributes['class']` |  |
+| `brandClass` | `HTMLAttributes['class']` |  |
+| `sectionsClass` | `HTMLAttributes['class']` |  |
+| `bottomBarClass` | `HTMLAttributes['class']` |  |
+
+#### Functions, constants, and types
+
+```ts
+interface LandingFooterLink {
+    id: string;
+    label: string;
+    href?: string;
+    to?: unknown;
+    newTab?: boolean;
+}
+interface LandingFooterSection {
+    id: string;
+    title: string;
+    links: LandingFooterLink[];
+}
+```
+
+---
+
+### `@brumaombra/ui-vintage/landing-content`
+
+Centered content column for landing and blog pages.
+
+```ts
+import { LandingContent } from '@brumaombra/ui-vintage/landing-content';
+```
+
+#### `LandingContent`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/landing-footer`
+
+Landing footer with link sections, app description, and author credit.
+
+```ts
+import { LandingFooter } from '@brumaombra/ui-vintage/landing-footer';
+import type { LandingFooterLink, LandingFooterSection } from '@brumaombra/ui-vintage/landing-footer';
+```
+
+#### `LandingFooter`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `appName` *(required)* | `string` |  |
+| `appLogo` | `string` |  |
+| `appLinkTo` | `string` | `'/'` |
+| `logoClass` | `HTMLAttributes['class']` |  |
+| `appDescription` | `string` | `''` |
+| `sections` | `LandingFooterSection[]` | `[]` |
+| `linkComponent` | `Component \| string` | `'a'` |
+| `authorName` | `string` | `''` |
+| `authorLink` | `string` | `''` |
+| `year` | `number` | `new Date().getFullYear()` |
+| `showBottomBar` | `boolean` | `true` |
+| `level` | `HeadingLevel` | `3` |
+| `class` | `HTMLAttributes['class']` |  |
+| `containerClass` | `HTMLAttributes['class']` |  |
+| `brandClass` | `HTMLAttributes['class']` |  |
+| `sectionsClass` | `HTMLAttributes['class']` |  |
+| `bottomBarClass` | `HTMLAttributes['class']` |  |
+
+#### Functions, constants, and types
+
+```ts
+interface LandingFooterLink {
+    id: string;
+    label: string;
+    href?: string;
+    to?: unknown;
+    newTab?: boolean;
+}
+interface LandingFooterSection {
+    id: string;
+    title: string;
+    links: LandingFooterLink[];
+}
+```
+
+---
+
+### `@brumaombra/ui-vintage/landing-navbar`
+
+Landing navbar with app name or logo, an optional reading progress bar, and a `right` slot.
+
+```ts
+import { LandingNavbar } from '@brumaombra/ui-vintage/landing-navbar';
+```
+
+#### `LandingNavbar`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `appName` | `string` | `''` |
+| `appLogo` | `string` | `''` |
+| `appLinkTo` | `string` | `'/'` |
+| `logoClass` | `HTMLAttributes['class']` |  |
+| `class` | `HTMLAttributes['class']` |  |
+| `containerClass` | `HTMLAttributes['class']` |  |
+| `leftClass` | `HTMLAttributes['class']` |  |
+| `rightClass` | `HTMLAttributes['class']` |  |
+| `showProgress` | `boolean` | `false` |
+
+- **Slots:** `left`, `right`.
+
+---
+
+### `@brumaombra/ui-vintage/landing-shell`
+
+Landing page frame with `navbar`, `content`, and `footer` slots.
+
+```ts
+import { LandingShell } from '@brumaombra/ui-vintage/landing-shell';
+```
+
+#### `LandingShell`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `showBackground` | `boolean` | `true` |
+| `rootClass` | `HTMLAttributes['class']` |  |
+| `navbarClass` | `HTMLAttributes['class']` |  |
+| `mainClass` | `HTMLAttributes['class']` |  |
+| `footerClass` | `HTMLAttributes['class']` |  |
+
+- **Slots:** `navbar`, `content`, `default`, `footer`.
+
+---
+
+### `@brumaombra/ui-vintage/language-flag`
+
+Flag icons for the supported locales.
+
+```ts
+import { LanguageFlag, EnglishFlag, FrenchFlag, GermanFlag, ItalianFlag, ChineseFlag, JapaneseFlag, RussianFlag, SpanishFlag } from '@brumaombra/ui-vintage/language-flag';
+import type { SupportedLanguageCode } from '@brumaombra/ui-vintage/language-flag';
+```
+
+#### `LanguageFlag`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `code` | `SupportedLanguageCode` | `'en'` |
+
+#### `EnglishFlag`
+
+- **Props:** none.
+
+#### `FrenchFlag`
+
+- **Props:** none.
+
+#### `GermanFlag`
+
+- **Props:** none.
+
+#### `ItalianFlag`
+
+- **Props:** none.
+
+#### `ChineseFlag`
+
+- **Props:** none.
+
+#### `JapaneseFlag`
+
+- **Props:** none.
+
+#### `RussianFlag`
+
+- **Props:** none.
+
+#### `SpanishFlag`
+
+- **Props:** none.
+
+#### Functions, constants, and types
+
+```ts
+type SupportedLanguageCode = keyof typeof supportedFlagLoaders
+```
+
+---
+
+### `@brumaombra/ui-vintage/language-selector`
+
+Language menu with flags. Pass the locale codes; handle `select` to call `setLocale`.
+
+```ts
+import { LanguageSelector } from '@brumaombra/ui-vintage/language-selector';
+import type { LanguageSelectorCode } from '@brumaombra/ui-vintage/language-selector';
+```
+
+#### `LanguageSelector`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `modelValue` | `string` | `''` |
+| `languages` | `LanguageSelectorCode[]` | `['en', 'it']` |
+
+- **Emits:** `update:modelValue` (value: string), `select` (value: string).
+
+#### Functions, constants, and types
+
+```ts
+type LanguageSelectorCode = string
+```
+
+---
+
+### `@brumaombra/ui-vintage/page-header`
+
+Page title row with an optional actions slot, in three sizes.
+
+```ts
+import { PageHeader } from '@brumaombra/ui-vintage/page-header';
+```
+
+#### `PageHeader`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `title` *(required)* | `string` |  |
+| `headingLevel` | `number` | `1` |
+| `size` | `'small' \| 'medium' \| 'large'` | `'large'` |
+
+- **Slots:** `default`.
+
+---
+
+### `@brumaombra/ui-vintage/theme-selector`
+
+Light, dark, and auto theme menu with a circular reveal (View Transitions API). `applyThemeWithTransition` switches themes from your own controls.
+
+```ts
+import { ThemeSelector, applyTheme, applyThemeWithTransition, getStoredTheme, isDarkTheme } from '@brumaombra/ui-vintage/theme-selector';
+import type { ThemeMode, ThemeTransitionOrigin } from '@brumaombra/ui-vintage/theme-selector';
+```
+
+```vue
+<ThemeSelector />
+```
+
+#### `ThemeSelector`
+
+- **Props:** none.
+
+#### Functions, constants, and types
+
+```ts
+function applyTheme(theme: ThemeMode)
+async function applyThemeWithTransition(theme: ThemeMode, origin?: ThemeTransitionOrigin | Element | null)
+function getStoredTheme(): ThemeMode
+function isDarkTheme(theme: ThemeMode)
+type ThemeMode = 'light' | 'dark' | 'auto'
+interface ThemeTransitionOrigin {
+    x: number;
+    y: number;
+}
+```
+
+## Content and blog
+
+Components for Nuxt Content pages and a complete blog.
+
+### `@brumaombra/ui-vintage/blog`
+
+Blog building blocks: header carousel, post cards and lists, categories, tags, table of contents, reading progress, FAQ, share sidebar, and the content renderer.
+
+```ts
+import { AllPostsSection, BlogContentRenderer, BlogFAQSection, BlogInfoSection, BlogHeaderSection, BlogSectionTitle, BlogTagsSection, CategoriesList, CategoriesSection, CategoryCard, HeaderCarousel, PostCard, PostsList, SocialShareSidebar, TableOfContents } from '@brumaombra/ui-vintage/blog';
+```
+
+#### `AllPostsSection`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `posts` | `Array<{ path: string; title: string; description?: string; image?: string; categoryText?: string; categoryPath?: string }>` | `[]` |
+| `currentPage` | `number` | `1` |
+| `postsPerPage` | `number` | `9` |
+| `totalPosts` | `number` | `0` |
+| `hasMorePosts` | `boolean` | `false` |
+| `isLoading` | `boolean` | `false` |
+
+- **Emits:** `load-more`.
+
+#### `BlogContentRenderer`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `value` *(required)* | `Record<string, unknown>` |  |
+
+#### `BlogFAQSection`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `faqs` | `Array<{ question: string; answer: string }>` | `[]` |
+
+#### `BlogInfoSection`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `author` *(required)* | `string` |  |
+| `authorUrl` *(required)* | `string` |  |
+| `authorImageUrl` *(required)* | `string` |  |
+| `datePublished` *(required)* | `string` |  |
+| `dateModified` | `string \| null` | `null` |
+
+#### `BlogHeaderSection`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `badges` | `Array<{ color: ToneColor; text: string }>` | `[]` |
+| `title` *(required)* | `string` |  |
+| `description` *(required)* | `string` |  |
+
+#### `BlogSectionTitle`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `title` *(required)* | `string` |  |
+
+#### `BlogTagsSection`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `tags` | `Array<{ name: string; slug: string; count: number }>` | `[]` |
+
+#### `CategoriesList`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `categories` | `Array<{ path: string; slug?: string; name: string; image?: string; count: number }>` | `[]` |
+
+#### `CategoriesSection`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `categories` | `Array<{ path: string; slug?: string; name: string; image?: string; count: number }>` | `[]` |
+
+#### `CategoryCard`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `name` *(required)* | `string` |  |
+| `image` | `string` | `''` |
+| `count` *(required)* | `number` |  |
+
+#### `HeaderCarousel`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `featuredPosts` | `Array<{ path: string; title: string; description?: string; image?: string; categoryText?: string; categoryPath?: string }>` | `[]` |
+
+#### `PostCard`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `image` | `string` | `''` |
+| `category` | `string` | `''` |
+| `title` | `string` | `''` |
+| `description` | `string` | `''` |
+
+#### `PostsList`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `posts` | `Array<{ path: string; title: string; description?: string; image?: string; categoryText?: string; categoryPath?: string }>` | `[]` |
+
+#### `SocialShareSidebar`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `title` *(required)* | `string` |  |
+| `url` *(required)* | `string` |  |
+
+#### `TableOfContents`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `content` *(required)* | `{ body?: { toc?: { links?: BlogTocLink[] } }; toc?: { links?: BlogTocLink[] } }` |  |
+
+---
+
+### `@brumaombra/ui-vintage/content`
+
+Prose components for Nuxt Content (MDC): code blocks highlighted with shiki, terminals, lists, tables, flows, and dividers.
+
+```ts
+import { Terminal, CodeBlock, ProsePre, BlogList, BlogTable, Flow, ProseHr } from '@brumaombra/ui-vintage/content';
+```
+
+#### `Terminal`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `commands` | `string[]` | `[]` |
+| `title` | `string` | `''` |
+| `prompt` | `string` | `'$'` |
+| `copyable` | `boolean` | `true` |
+
+#### `CodeBlock`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `code` | `string` | `''` |
+| `language` | `CodeLanguage` | `'text'` |
+| `title` | `string` | `''` |
+| `copyable` | `boolean` | `true` |
+
+#### `ProsePre`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `code` | `string` | `''` |
+| `language` | `string` | `''` |
+
+- **Slots:** `default`.
+
+#### `BlogList`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `items` | `string[]` | `[]` |
+| `variant` | `'circle' \| 'checkmark' \| 'numbered' \| 'cross'` | `'checkmark'` |
+
+#### `BlogTable`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `headers` | `string[]` | `[]` |
+| `rows` | `string[][]` | `[]` |
+| `highlightCol` | `number` | `-1` |
+
+#### `Flow`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `title` | `string` | `''` |
+| `description` | `string` | `''` |
+| `items` | `FlowItem[]` | `[]` |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` |
+
+#### `ProseHr`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `icon` | `HugeiconsIconDefinition` | `ChartLineData02Icon` |
+
+## Utilities and types
+
+Helpers shared by the components.
+
+### `@brumaombra/ui-vintage/common-types`
+
+Shared types used in component props.
+
+```ts
+import type { HugeiconsIconDefinition, HeadingLevel } from '@brumaombra/ui-vintage/common-types';
+```
+
+#### Functions, constants, and types
+
+```ts
+type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[]
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
+```
+
+---
+
+### `@brumaombra/ui-vintage/utils`
+
+Class merging (`cn`) and formatting helpers.
+
+```ts
+import { cn, formatDateLongItalyTimezone } from '@brumaombra/ui-vintage/utils';
+```
+
+#### Functions, constants, and types
+
+```ts
+function cn(...inputs: ClassValue[])
+function formatDateLongItalyTimezone(date: string | number | Date | null | undefined, locale: string)
+```