@youcan/celeste 0.10.1 → 0.10.3

package/ai/component-registry.md

@@ -0,0 +1,3200 @@
+# Celeste Component Registry
+
+> Generated from source for `@youcan/celeste@0.10.3`. Do not edit.
+> Regenerate with `pnpm --filter @youcan/celeste codegen:registry`.
+
+Every component below is imported from `@youcan/celeste`:
+
+```ts
+import { Badge, Button } from '@youcan/celeste';
+```
+
+**146 components** in 39 groups.
+
+This file describes what each component _accepts_. For which component to
+reach for when several look similar, see the `celeste-ui` skill.
+
+---
+
+## alert
+
+### Alert
+
+**Props**
+
+- `class`: `ClassValue`
+- `dismissable`: `boolean` — default `false`
+- `size`: `xs` | `sm` | `lg` — default `"xs"`
+- `state`: `information` | `success` | `warning` | `error` | `feature` — default `"information"`
+- `variant`: `fill` | `light` | `lighter` | `stroke` — default `"fill"`
+
+**Events**
+
+- `dismiss`: `any[]`
+
+**Slots**
+
+- `default`
+- `title`
+- `description`
+- `primary`
+- `secondary`
+
+**Example:** `src/components/alert/stories/alert.stories.ts`
+
+---
+
+## badge
+
+### Badge
+
+**Props**
+
+- `class`: `ClassValue`
+- `disabled`: `boolean`
+- `icon`: `string`
+- `label`: `string`
+- `size`: `sm` | `md` — default `"md"`
+- `state`: `information` | `success` | `warning` | `error` | `feature` | `faded` | `away` | `verified` | `highlighted` | `stable`
+- `type`: `basic` | `dot` | `leading-icon` | `trailing-icon` — default `"basic"`
+- `variant`: `fill` | `light` | `lighter` | `stroke` — default `"fill"`
+
+**Composes with:** `StatusBadge`
+
+**Example:** `src/components/badge/stories/badge.stories.ts`
+
+### StatusBadge
+
+**Props**
+
+- `label`: `string` **(required)**
+- `class`: `ClassValue`
+- `dotted`: `boolean`
+- `state`: `success` | `warning` | `error` | `faded` — default `"faded"`
+- `variant`: `light` | `stroke` — default `"light"`
+
+**Composes with:** `Badge`
+
+**Example:** `src/components/badge/stories/status-badge.stories.ts`
+
+---
+
+## button
+
+### Button
+
+**Props**
+
+- `as`: `AsTag | Component` — default `"button"` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `intent`: `error` | `primary` | `neutral` — default `"primary"`
+- `size`: `xs` | `sm` | `md` | `xxs` — default `"md"`
+- `variant`: `fill` | `lighter` | `stroke` | `ghost` — default `"fill"`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `CompactButton`, `FancyButton`, `LinkButton`, `SocialButton`
+
+**Example:** `src/components/button/stories/button.stories.ts`
+
+### CompactButton
+
+**Props**
+
+- `icon`: `string` **(required)**
+- `as`: `AsTag | Component` — default `"button"` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `rounded`: `boolean`
+- `size`: `lg` | `md` — default `"lg"`
+- `variant`: `stroke` | `ghost` | `white` — default `"stroke"`
+
+**Composes with:** `Button`, `FancyButton`, `LinkButton`, `SocialButton`
+
+**Example:** `src/components/button/stories/compact-button.stories.ts`
+
+### FancyButton
+
+**Props**
+
+- `as`: `AsTag | Component` — default `"button"` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `intent`: `error` | `basic` | `primary` | `neutral` — default `"primary"`
+- `size`: `xs` | `sm` | `md` — default `"md"`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Button`, `CompactButton`, `LinkButton`, `SocialButton`
+
+**Example:** `src/components/button/stories/fancy-button.stories.ts`
+
+### LinkButton
+
+**Props**
+
+- `as`: `AsTag | Component` — default `"a"` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean`
+- `intent`: `error` | `primary` | `black` | `gray` — default `"primary"`
+- `size`: `sm` | `md` — default `"md"`
+- `underline`: `boolean`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Button`, `CompactButton`, `FancyButton`, `SocialButton`
+
+**Example:** `src/components/button/stories/link-button.stories.ts`
+
+### SocialButton
+
+**Props**
+
+- `brand`: `apple` | `twitter` | `google` | `facebook` | `linkedin` | `github` **(required)**
+- `class`: `string`
+- `label`: `string`
+- `variant`: `fill` | `stroke` — default `"stroke"`
+
+**Composes with:** `Button`, `CompactButton`, `FancyButton`, `LinkButton`
+
+**Example:** `src/components/button/stories/social-button.stories.ts`
+
+---
+
+## calendar
+
+### Calendar
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `calendarLabel`: `string` — The accessible label for the calendar
+- `class`: `ClassValue`
+- `defaultPlaceholder`: `DateValue` — The default placeholder date
+- `defaultValue`: `DateValue` — The default value for the calendar
+- `dir`: `Direction` — The reading direction of the calendar when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `disabled`: `boolean` — Whether the calendar is disabled
+- `disableDaysOutsideCurrentView`: `boolean` — Whether or not to disable days outside the current view.
+- `fixedWeeks`: `boolean` — default `true` — Whether or not to always display 6 weeks in the calendar
+- `initialFocus`: `boolean` — If true, the calendar will focus the selected day, today, or the first day of the month depending on what is visible when the calendar is mounted
+- `isDateDisabled`: `Matcher` — A function that returns whether or not a date is disabled
+- `isDateUnavailable`: `Matcher` — A function that returns whether or not a date is unavailable
+- `locale`: `string` — The locale to use for formatting dates
+- `markedDates`: `DateValue[]`
+- `maxValue`: `DateValue` — The maximum date that can be selected
+- `minValue`: `DateValue` — The minimum date that can be selected
+- `modelValue`: `DateValue | DateValue[] | null` — The controlled selected date value of the calendar. Can be bound as `v-model`.
+- `multiple`: `boolean` — Whether multiple dates can be selected
+- `nextPage`: `((placeholder: DateValue) => DateValue)` — A function that returns the next page of the calendar. It receives the current placeholder as an argument inside the component.
+- `numberOfMonths`: `number` — The number of months to display at once
+- `pagedNavigation`: `boolean` — This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month
+- `placeholder`: `DateValue` — The placeholder date, which is used to determine what month to display when no date is selected
+- `preventDeselect`: `boolean` — Whether or not to prevent the user from deselecting a date without selecting another date first
+- `prevPage`: `((placeholder: DateValue) => DateValue)` — A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component.
+- `readonly`: `boolean` — Whether the calendar is readonly
+- `weekdayFormat`: `WeekDayFormat` — default `"short"` — The format to use for the weekday strings provided via the weekdays slot prop
+- `weekStartsOn`: `WeekStartsOn` — default `1` — The day of the week to start the calendar on
+
+**Events**
+
+- `update:modelValue`: `[date: DateValue | undefined]`
+- `update:placeholder`: `[date: DateValue]`
+
+**Example:** `src/components/calendar/stories/calendar.stories.ts`
+
+---
+
+## chart
+
+### BarChart
+
+**Props**
+
+- `category`: `string` **(required)**
+- `data`: `BarDatum[]` **(required)**
+- `series`: `BarSeries[]` **(required)**
+- `ariaLabel`: `string`
+- `class`: `unknown`
+- `dense`: `boolean`
+- `description`: `string`
+- `format`: `ChartFormat` — default `formatNumber`
+- `layout`: `stacked` | `grouped` — default `"stacked"`
+- `legend`: `inline` | `chip` | `table` | `none`
+- `radius`: `number` — default `5`
+- `size`: `default` | `compact`
+- `state`: `error` | `ready` | `loading` | `empty`
+- `tableVisible`: `boolean`
+- `tickFormat`: `ChartFormat` — default `formatCompact`
+- `ticks`: `number` — default `4`
+- `title`: `string`
+- `total`: `boolean` — default `true`
+- `totalLabel`: `string` — default `"Total"`
+
+**Composes with:** `ChartCard`, `ChartLegend`, `ChartPlot`
+
+**Example:** `src/components/chart/stories/bar-chart.stories.ts`
+
+### ChartCard
+
+**Props**
+
+- `title`: `string` **(required)**
+- `caption`: `string`
+- `class`: `ClassValue`
+- `delta`: `{ value: string; direction: "up" | "down"; }`
+- `value`: `string`
+
+**Slots**
+
+- `toolbar`
+- `default`
+
+**Composes with:** `BarChart`, `ChartLegend`, `ChartPlot`
+
+**Example:** none — this component has no story.
+
+### ChartLegend
+
+**Props**
+
+- `items`: `ChartLegendItem[]` **(required)**
+- `class`: `ClassValue`
+- `modelValue`: `string[]` — default `[]`
+- `toggle`: `boolean` — default `true`
+- `variant`: `inline` | `chip` | `table` — default `"inline"`
+
+**Events**
+
+- `update:modelValue`: `[value: string[]]`
+
+**Composes with:** `BarChart`, `ChartCard`, `ChartPlot`
+
+**Example:** none — this component has no story.
+
+### ChartPlot
+
+**Props**
+
+- `ariaLabel`: `string` **(required)**
+- `class`: `ClassValue`
+- `description`: `string`
+- `size`: `default` | `compact` | `spark` — default `"default"`
+- `state`: `error` | `ready` | `loading` | `empty` — default `"ready"`
+- `table`: `ChartTable`
+- `tableVisible`: `boolean`
+- `title`: `string`
+
+**Slots**
+
+- `default`
+- `action`
+- `footer`
+
+**Composes with:** `BarChart`, `ChartCard`, `ChartLegend`
+
+**Example:** none — this component has no story.
+
+---
+
+## checkbox
+
+### Checkbox
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `defaultValue`: `boolean | "indeterminate"` — The value of the checkbox when it is initially rendered. Use when you do not need to control its value.
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the checkbox
+- `falseValue`: `boolean` — The value used when the checkbox is unchecked. Defaults to `false`.
+- `id`: `string` — Id of the element
+- `modelValue`: `boolean | "indeterminate" | null` — The controlled value of the checkbox. Can be binded with v-model.
+- `name`: `string` — The name of the field. Submitted with its owning form as part of a name/value pair.
+- `required`: `boolean` — When `true`, indicates that the user must set the value before the owning form can be submitted.
+- `trueValue`: `boolean` — The value used when the checkbox is checked. Defaults to `true`.
+- `value`: `AcceptableValue` — The value given as data when submitted with a `name`.
+
+**Events**
+
+- `update:modelValue`: `[value: boolean | "indeterminate"]`
+
+**Composes with:** `CheckboxCard`, `CheckboxLabel`
+
+**Example:** `src/components/checkbox/stories/checkbox.stories.ts`
+
+### CheckboxCard
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean`
+- `for`: `string` — The id of the element the label is associated with.
+- `required`: `boolean`
+
+**Slots**
+
+- `image` — scope `{ class: string; }`
+- `icon`
+- `label`
+- `sublabel`
+- `badge` — scope `{ disabled: boolean; }`
+- `description`
+- `default`
+
+**Composes with:** `Checkbox`, `CheckboxLabel`
+
+**Example:** `src/components/checkbox/stories/checkbox-card.stories.ts`
+
+### CheckboxLabel
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean`
+- `for`: `string` — The id of the element the label is associated with.
+- `required`: `boolean`
+
+**Slots**
+
+- `default`
+- `label`
+- `sublabel`
+- `badge`
+- `description`
+- `linkButton`
+
+**Composes with:** `Checkbox`, `CheckboxCard`
+
+**Example:** none — this component has no story.
+
+---
+
+## collapsible
+
+### Collapsible
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `unknown`
+- `defaultOpen`: `boolean` — The open state of the collapsible when it is initially rendered. <br> Use when you do not need to control its open state.
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the collapsible.
+- `open`: `boolean` — The controlled open state of the collapsible. Can be binded with `v-model`.
+- `unmountOnHide`: `boolean` — When `true`, the element will be unmounted on closed state.
+
+**Events**
+
+- `update:open`: `[value: boolean]`
+
+**Slots**
+
+- `default` — scope `{ open: boolean; }`
+
+**Composes with:** `CollapsibleContent`, `CollapsibleTrigger`
+
+**Example:** `src/components/collapsible/stories/collapsible.stories.ts`
+
+### CollapsibleContent
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `forceMount`: `boolean` — Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Collapsible`, `CollapsibleTrigger`
+
+**Example:** none — this component has no story.
+
+### CollapsibleTrigger
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `unknown`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Collapsible`, `CollapsibleContent`
+
+**Example:** none — this component has no story.
+
+---
+
+## color-picker
+
+### AlphaSlider
+
+**Props**
+
+- `modelValue`: `tinycolor.Instance` **(required)**
+- `class`: `unknown`
+
+**Events**
+
+- `update:modelValue`: `[value: string]`
+
+**Composes with:** `ColorArea`, `ColorPicker`, `ColorSwatch`, `HueSlider`
+
+**Example:** none — this component has no story.
+
+### ColorArea
+
+**Props**
+
+- `hue`: `number` **(required)**
+- `modelValue`: `tinycolor.Instance` **(required)**
+- `class`: `unknown`
+
+**Composes with:** `AlphaSlider`, `ColorPicker`, `ColorSwatch`, `HueSlider`
+
+**Example:** none — this component has no story.
+
+### ColorPicker
+
+**Props**
+
+- `class`: `ClassValue`
+- `colorSwatchLabel`: `string` — default `"Recommended Colors"`
+- `defaultFormat`: `ColorFormat`
+- `formats`: `ColorFormat[]` — default `["hex", "rgb", "hsl", "hsb"]`
+- `label`: `string` — default `"Pick Color"`
+- `modelValue`: `tinycolor.ColorInput` — default `"hsl(240, 100%, 50%)"`
+
+**Events**
+
+- `update:modelValue`: `[value: string]`
+
+**Slots**
+
+- `swatches`
+
+**Composes with:** `AlphaSlider`, `ColorArea`, `ColorSwatch`, `HueSlider`
+
+**Example:** `src/components/color-picker/stories/color-picker.stories.ts`
+
+### ColorSwatch
+
+**Props**
+
+- `label`: `string` **(required)**
+- `modelValue`: `tinycolor.Instance` **(required)**
+- `class`: `unknown`
+- `defaultColor`: `string`
+- `swatch`: `string[]` — default `DEFAULT_SWATCH`
+
+**Events**
+
+- `update:modelValue`: `[value: string]`
+
+**Composes with:** `AlphaSlider`, `ColorArea`, `ColorPicker`, `HueSlider`
+
+**Example:** none — this component has no story.
+
+### HueSlider
+
+**Props**
+
+- `class`: `unknown`
+- `modelValue`: `number` — default `0`
+
+**Events**
+
+- `update:modelValue`: `[value: number]`
+
+**Composes with:** `AlphaSlider`, `ColorArea`, `ColorPicker`, `ColorSwatch`
+
+**Example:** none — this component has no story.
+
+---
+
+## combobox
+
+### Combobox
+
+**Props**
+
+- `options`: `ComboboxItemPropsType[]` **(required)**
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `badgeProps`: `BadgeProps`
+- `by`: `string | ((a: AcceptableValue, b: AcceptableValue) => boolean)` — Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.
+- `class`: `string`
+- `defaultOpen`: `boolean` — The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state.
+- `defaultValue`: `AcceptableValue | AcceptableValue[]` — The value of the listbox when initially rendered. Use when you do not need to control the state of the Listbox
+- `dir`: `Direction` — The reading direction of the listbox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with listbox
+- `emptyLabel`: `string`
+- `highlightOnHover`: `boolean` — When `true`, hover over item will trigger highlight
+- `ignoreFilter`: `boolean` — When `true`, disable the default filters
+- `labelBy`: `string`
+- `modelValue`: `AcceptableValue | AcceptableValue[]` — The controlled value of the listbox. Can be binded with `v-model`.
+- `multiple`: `boolean` — Whether multiple options can be selected or not.
+- `name`: `string` — The name of the field. Submitted with its owning form as part of a name/value pair.
+- `open`: `boolean` — The controlled open state of the Combobox. Can be binded with `v-model:open`.
+- `openOnClick`: `boolean` — Whether to open the combobox when the input is clicked
+- `openOnFocus`: `boolean` — Whether to open the combobox when the input is focused
+- `placeholder`: `string` — default `"Select"`
+- `required`: `boolean` — When `true`, indicates that the user must set the value before the owning form can be submitted.
+- `resetModelValueOnClear`: `boolean` — When `true` the `modelValue` will be reset to `null` (or `[]` if `multiple`)
+- `resetSearchTermOnBlur`: `boolean` — Whether to reset the searchTerm when the Combobox input blurred
+- `resetSearchTermOnSelect`: `boolean` — Whether to reset the searchTerm when the Combobox value is selected
+- `searchable`: `boolean`
+- `searchPlaceholder`: `string`
+- `size`: `xs` | `sm` | `md` — default `"md"`
+- `type`: `compact` | `inline` | `normal` | `compact-input`
+- `valueBy`: `string`
+
+**Events**
+
+- `update:modelValue`: `[value: AcceptableValue]`
+- `update:open`: `[value: boolean]`
+- `highlight`: `[payload: { ref: HTMLElement; value: AcceptableValue; } | undefined]`
+
+**Slots**
+
+- `image` — scope `{ selected: ComboboxItemPropsType; }`
+- `prefix` — scope `{ class: string; }`
+
+**Composes with:** `ComboboxAnchor`, `ComboboxEmpty`, `ComboboxGroup`, `ComboboxInput`, `ComboboxItem`, `ComboboxList`, `ComboboxRoot`, `ComboboxSeparator`, `ComboboxTrigger`
+
+**Example:** `src/components/combobox/stories/combobox.stories.ts`
+
+### ComboboxAnchor
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `reference`: `ReferenceElement` — The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Combobox`, `ComboboxEmpty`, `ComboboxGroup`, `ComboboxInput`, `ComboboxItem`, `ComboboxList`, `ComboboxRoot`, `ComboboxSeparator`, `ComboboxTrigger`
+
+**Example:** none — this component has no story.
+
+### ComboboxEmpty
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Combobox`, `ComboboxAnchor`, `ComboboxGroup`, `ComboboxInput`, `ComboboxItem`, `ComboboxList`, `ComboboxRoot`, `ComboboxSeparator`, `ComboboxTrigger`
+
+**Example:** none — this component has no story.
+
+### ComboboxGroup
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `heading`: `string`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Combobox`, `ComboboxAnchor`, `ComboboxEmpty`, `ComboboxInput`, `ComboboxItem`, `ComboboxList`, `ComboboxRoot`, `ComboboxSeparator`, `ComboboxTrigger`
+
+**Example:** none — this component has no story.
+
+### ComboboxInput
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `autoFocus`: `boolean` — Focus on element when mounted.
+- `class`: `ClassValue`
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with item
+- `displayValue`: `((val: any) => string)` — The display value of input for selected item. Does not work with `multiple`.
+- `modelValue`: `string` — The controlled value of the filter. Can be binded with v-model.
+- `placeholder`: `string`
+- `searchable`: `boolean`
+- `textInputProps`: `Partial<TextInputProps>`
+
+**Events**
+
+- `update:modelValue`: `[value: string | undefined]`
+
+**Composes with:** `Combobox`, `ComboboxAnchor`, `ComboboxEmpty`, `ComboboxGroup`, `ComboboxItem`, `ComboboxList`, `ComboboxRoot`, `ComboboxSeparator`, `ComboboxTrigger`
+
+**Example:** none — this component has no story.
+
+### ComboboxItem
+
+**Props**
+
+- `label`: `string` **(required)**
+- `value`: `string | number | boolean | Record<string, any>` **(required)**
+- `checkbox`: `boolean`
+- `class`: `ClassValue`
+- `description`: `string`
+- `disabled`: `boolean`
+- `focused`: `boolean`
+- `icon`: `string`
+- `image`: `string`
+- `selected`: `boolean | "indeterminate"`
+- `size`: `sm` | `lg` — default `"sm"`
+- `sublabel`: `string`
+
+**Events**
+
+- `select`: `[event: SelectEvent$3<AcceptableValue>]`
+
+**Slots**
+
+- `prefix`
+- `suffix`
+
+**Composes with:** `Combobox`, `ComboboxAnchor`, `ComboboxEmpty`, `ComboboxGroup`, `ComboboxInput`, `ComboboxList`, `ComboboxRoot`, `ComboboxSeparator`, `ComboboxTrigger`
+
+**Example:** none — this component has no story.
+
+### ComboboxList
+
+**Props**
+
+- `align`: `start` | `center` | `end` — default `"start"` — The preferred alignment against the trigger. May change when collisions occur.
+- `alignFlip`: `boolean` — Flip alignment when colliding with boundary. May only occur when `prioritizePosition` is true.
+- `alignOffset`: `number` — An offset in pixels from the `start` or `end` alignment options.
+- `arrowPadding`: `number` — The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `avoidCollisions`: `boolean` — When `true`, overrides the side and align preferences to prevent collisions with boundary edges.
+- `bodyLock`: `boolean` — The document.body will be lock, and scrolling will be disabled.
+- `class`: `ClassValue`
+- `collisionBoundary`: `Element | (Element | null)[] | null` — The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.
+- `collisionPadding`: `number | Partial<Record<"top" | "right" | "bottom" | "left", number>>` — The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
+- `dir`: `Direction` — The reading direction of the popper content when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `disableOutsidePointerEvents`: `boolean` — When `true`, hover/focus/click interactions will be disabled on elements outside the `DismissableLayer`. Users will need to click twice on outside elements to interact with them: once to close the `DismissableLayer`, and again to trigger the element.
+- `disableUpdateOnLayoutShift`: `boolean` — Whether to disable the update position for the content when the layout shifted.
+- `forceMount`: `boolean` — Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
+- `hideShiftedArrow`: `boolean` — When `true`, hides the arrow when it cannot be centered to the reference element.
+- `hideWhenDetached`: `boolean` — Whether to hide the content when the trigger becomes fully occluded.
+- `hideWhenEmpty`: `boolean` — When `true`, hides the content when there are no items matching the filter.
+- `memoDependencies`: `unknown[]` — Reactive dependencies that should invalidate the memoized content subtree.
+- `position`: `inline` | `popper` — default `"popper"` — The positioning mode to use, <br> `inline` is the default and you can control the position using CSS. <br> `popper` positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.
+- `positionStrategy`: `fixed` | `absolute` — The type of CSS position property to use.
+- `prioritizePosition`: `boolean` — Force content to be position within the viewport. Might overlap the reference element, which may not be desired.
+- `reference`: `ReferenceElement` — The custom element or virtual element that will be set as the reference to position the floating element. If provided, it will replace the default anchor element.
+- `side`: `top` | `right` | `bottom` | `left` — The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
+- `sideFlip`: `boolean` — Flip to the opposite side when colliding with boundary.
+- `sideOffset`: `number` — default `4` — The distance in pixels from the trigger.
+- `sticky`: `partial` | `always` — The sticky behavior on the align axis. `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.
+- `updatePositionStrategy`: `always` | `optimized` — Strategy to update the position of the floating element on every animation frame.
+
+**Events**
+
+- `escapeKeyDown`: `[event: KeyboardEvent]`
+- `pointerDownOutside`: `[event: PointerDownOutsideEvent]`
+- `focusOutside`: `[event: FocusOutsideEvent]`
+- `interactOutside`: `[event: PointerDownOutsideEvent | FocusOutsideEvent]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Combobox`, `ComboboxAnchor`, `ComboboxEmpty`, `ComboboxGroup`, `ComboboxInput`, `ComboboxItem`, `ComboboxRoot`, `ComboboxSeparator`, `ComboboxTrigger`
+
+**Example:** none — this component has no story.
+
+### ComboboxRoot
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `by`: `string | ((a: AcceptableValue, b: AcceptableValue) => boolean)` — Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.
+- `class`: `unknown`
+- `defaultOpen`: `boolean` — The open state of the combobox when it is initially rendered. <br> Use when you do not need to control its open state.
+- `defaultValue`: `AcceptableValue | AcceptableValue[]` — The value of the listbox when initially rendered. Use when you do not need to control the state of the Listbox
+- `dir`: `Direction` — The reading direction of the listbox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with listbox
+- `highlightOnHover`: `boolean` — When `true`, hover over item will trigger highlight
+- `ignoreFilter`: `boolean` — When `true`, disable the default filters
+- `modelValue`: `AcceptableValue | AcceptableValue[]` — The controlled value of the listbox. Can be binded with `v-model`.
+- `multiple`: `boolean` — Whether multiple options can be selected or not.
+- `name`: `string` — The name of the field. Submitted with its owning form as part of a name/value pair.
+- `open`: `boolean` — The controlled open state of the Combobox. Can be binded with `v-model:open`.
+- `openOnClick`: `boolean` — Whether to open the combobox when the input is clicked
+- `openOnFocus`: `boolean` — Whether to open the combobox when the input is focused
+- `required`: `boolean` — When `true`, indicates that the user must set the value before the owning form can be submitted.
+- `resetModelValueOnClear`: `boolean` — When `true` the `modelValue` will be reset to `null` (or `[]` if `multiple`)
+- `resetSearchTermOnBlur`: `boolean` — Whether to reset the searchTerm when the Combobox input blurred
+- `resetSearchTermOnSelect`: `boolean` — Whether to reset the searchTerm when the Combobox value is selected
+
+**Events**
+
+- `update:modelValue`: `[value: AcceptableValue]`
+- `update:open`: `[value: boolean]`
+- `highlight`: `[payload: { ref: HTMLElement; value: AcceptableValue; } | undefined]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Combobox`, `ComboboxAnchor`, `ComboboxEmpty`, `ComboboxGroup`, `ComboboxInput`, `ComboboxItem`, `ComboboxList`, `ComboboxSeparator`, `ComboboxTrigger`
+
+**Example:** none — this component has no story.
+
+### ComboboxSeparator
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Combobox`, `ComboboxAnchor`, `ComboboxEmpty`, `ComboboxGroup`, `ComboboxInput`, `ComboboxItem`, `ComboboxList`, `ComboboxRoot`, `ComboboxTrigger`
+
+**Example:** none — this component has no story.
+
+### ComboboxTrigger
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with item
+- `error`: `boolean`
+- `filled`: `boolean`
+- `size`: `xs` | `sm` | `md`
+- `type`: `compact` | `inline` | `normal` | `compact-input` — default `"normal"`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Combobox`, `ComboboxAnchor`, `ComboboxEmpty`, `ComboboxGroup`, `ComboboxInput`, `ComboboxItem`, `ComboboxList`, `ComboboxRoot`, `ComboboxSeparator`
+
+**Example:** none — this component has no story.
+
+---
+
+## content-divider
+
+### ContentDivider
+
+**Props**
+
+- `class`: `ClassValue`
+- `text`: `string`
+- `type`: `line` | `text` | `text-line` | `solid-text` — default `"line"`
+
+**Example:** `src/components/content-divider/stories/content-divider.stories.ts`
+
+---
+
+## counter-input
+
+### CounterInput
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `defaultValue`: `number` — default `0`
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the Number Field.
+- `disableWheelChange`: `boolean` — When `true`, prevents the value from changing on wheel scroll.
+- `focusOnChange`: `boolean` — When `true`, the input will be focused when the value changes.
+- `formatOptions`: `Intl.NumberFormatOptions` — Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.
+- `hasError`: `boolean` — default `false`
+- `id`: `string` — Id of the element
+- `invertWheelChange`: `boolean` — When `true`, inverts the direction of the wheel change.
+- `locale`: `string` — The locale to use for formatting and currencies
+- `max`: `number` — The largest value allowed for the input.
+- `min`: `number` — The smallest value allowed for the input.
+- `modelValue`: `number | null`
+- `name`: `string` — The name of the field. Submitted with its owning form as part of a name/value pair.
+- `readonly`: `boolean` — When `true`, the Number Field is read-only.
+- `required`: `boolean` — When `true`, indicates that the user must set the value before the owning form can be submitted.
+- `size`: `xs` | `sm` | `md` — default `"md"`
+- `step`: `number` — The amount that the input value changes with each increment or decrement "tick".
+- `stepSnapping`: `boolean` — When `false`, prevents the value from snapping to the nearest increment of the step value
+
+**Events**
+
+- `update:modelValue`: `[val: number]`
+
+**Example:** `src/components/counter-input/stories/counter-input.stories.ts`
+
+---
+
+## date-picker
+
+### DatePicker
+
+**Props**
+
+- `applyLabel`: `string` — default `"Apply"`
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `calendarLabel`: `string` — The accessible label for the calendar
+- `cancelLabel`: `string` — default `"Cancel"`
+- `class`: `ClassValue`
+- `defaultPlaceholder`: `DateValue` — The default placeholder date
+- `defaultValue`: `DateValue` — The default value for the calendar
+- `dir`: `Direction` — The reading direction of the calendar when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `disabled`: `boolean` — Whether the calendar is disabled
+- `disableDaysOutsideCurrentView`: `boolean` — Whether or not to disable days outside the current view.
+- `fixedWeeks`: `boolean` — Whether or not to always display 6 weeks in the calendar
+- `footer`: `boolean` — default `true`
+- `initialFocus`: `boolean` — If true, the calendar will focus the selected day, today, or the first day of the month depending on what is visible when the calendar is mounted
+- `isDateDisabled`: `Matcher` — A function that returns whether or not a date is disabled
+- `isDateUnavailable`: `Matcher` — A function that returns whether or not a date is unavailable
+- `locale`: `string` — The locale to use for formatting dates
+- `markedDates`: `DateValue[]`
+- `maxValue`: `DateValue` — The maximum date that can be selected
+- `minValue`: `DateValue` — The minimum date that can be selected
+- `modelValue`: `DateValue`
+- `multiple`: `boolean` — Whether multiple dates can be selected
+- `nextPage`: `((placeholder: DateValue) => DateValue)` — A function that returns the next page of the calendar. It receives the current placeholder as an argument inside the component.
+- `numberOfMonths`: `number` — The number of months to display at once
+- `pagedNavigation`: `boolean` — This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month
+- `placeholder`: `DateValue` — The placeholder date, which is used to determine what month to display when no date is selected
+- `preventDeselect`: `boolean` — Whether or not to prevent the user from deselecting a date without selecting another date first
+- `prevPage`: `((placeholder: DateValue) => DateValue)` — A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component.
+- `readonly`: `boolean` — Whether the calendar is readonly
+- `weekdayFormat`: `WeekDayFormat` — The format to use for the weekday strings provided via the weekdays slot prop
+- `weekStartsOn`: `WeekStartsOn` — The day of the week to start the calendar on
+
+**Events**
+
+- `update:modelValue`: `[value: DateValue | undefined]`
+- `apply`: `[value: DateValue | undefined]`
+- `cancel`: `[]`
+
+**Example:** `src/components/date-picker/stories/date-picker.stories.ts`
+
+---
+
+## digit-input
+
+### DigitInput
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `defaultValue`: `PinInputValue<Type>` — The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state.
+- `dir`: `Direction` — The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the pin input
+- `hasError`: `boolean` — default `false`
+- `id`: `string` — Id of the element
+- `mask`: `boolean` — When `true`, pin inputs will be treated as password.
+- `modelValue`: `PinInputValue<Type> | null` — default `[] as any` — The controlled checked state of the pin input. Can be binded as `v-model`.
+- `name`: `string` — The name of the field. Submitted with its owning form as part of a name/value pair.
+- `otp`: `boolean` — When `true`, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field.
+- `placeholder`: `string` — The placeholder character to use for empty pin-inputs.
+- `required`: `boolean` — When `true`, indicates that the user must set the value before the owning form can be submitted.
+- `type`: `Type` — Input type for the inputs.
+
+**Events**
+
+- `update:modelValue`: `[value: PinInputValue<Type>]`
+- `complete`: `[value: PinInputValue<Type>]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `DigitInputGroup`, `DigitInputSlot`
+
+**Example:** `src/components/digit-input/stories/digit-input.stories.ts`
+
+### DigitInputGroup
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `DigitInput`, `DigitInputSlot`
+
+**Example:** none — this component has no story.
+
+### DigitInputSlot
+
+**Props**
+
+- `index`: `number` **(required)** — Position of the value this input binds to.
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the pin input
+
+**Composes with:** `DigitInput`, `DigitInputGroup`
+
+**Example:** none — this component has no story.
+
+---
+
+## dropdown-menu
+
+### DropdownMenu
+
+**Props**
+
+- `class`: `ClassValue`
+- `defaultOpen`: `boolean` — The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
+- `dir`: `Direction$4` — The reading direction of the combobox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `modal`: `boolean` — The modality of the dropdown menu. When set to `true`, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
+- `open`: `boolean` — The controlled open state of the menu. Can be used as `v-model:open`.
+
+**Events**
+
+- `update:open`: `[payload: boolean]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger`
+
+**Example:** `src/components/dropdown-menu/stories/dropdown-menu.stories.ts`
+
+### DropdownMenuContent
+
+**Props**
+
+- `align`: `start` | `center` | `end` — The preferred alignment against the trigger. May change when collisions occur.
+- `alignFlip`: `boolean` — Flip alignment when colliding with boundary. May only occur when `prioritizePosition` is true.
+- `alignOffset`: `number` — An offset in pixels from the `start` or `end` alignment options.
+- `arrowPadding`: `number` — The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `avoidCollisions`: `boolean` — When `true`, overrides the side and align preferences to prevent collisions with boundary edges.
+- `class`: `ClassValue`
+- `collisionBoundary`: `Element | (Element | null)[] | null` — The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.
+- `collisionPadding`: `number | Partial<Record<"top" | "right" | "bottom" | "left", number>>` — The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
+- `disableUpdateOnLayoutShift`: `boolean` — Whether to disable the update position for the content when the layout shifted.
+- `forceMount`: `boolean` — Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
+- `hideShiftedArrow`: `boolean` — When `true`, hides the arrow when it cannot be centered to the reference element.
+- `hideWhenDetached`: `boolean` — Whether to hide the content when the trigger becomes fully occluded.
+- `loop`: `boolean` — When `true`, keyboard navigation will loop from last item to first, and vice versa.
+- `memoDependencies`: `unknown[]` — Reactive dependencies that should invalidate the memoized content subtree.
+- `positionStrategy`: `fixed` | `absolute` — The type of CSS position property to use.
+- `prioritizePosition`: `boolean` — Force content to be position within the viewport. Might overlap the reference element, which may not be desired.
+- `reference`: `ReferenceElement` — The custom element or virtual element that will be set as the reference to position the floating element. If provided, it will replace the default anchor element.
+- `side`: `top` | `right` | `bottom` | `left` — The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
+- `sideFlip`: `boolean` — Flip to the opposite side when colliding with boundary.
+- `sideOffset`: `number` — default `4` — The distance in pixels from the trigger.
+- `sticky`: `partial` | `always` — The sticky behavior on the align axis. `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.
+- `updatePositionStrategy`: `always` | `optimized` — Strategy to update the position of the floating element on every animation frame.
+
+**Events**
+
+- `escapeKeyDown`: `[event: KeyboardEvent]`
+- `pointerDownOutside`: `[event: PointerDownOutsideEvent]`
+- `focusOutside`: `[event: FocusOutsideEvent]`
+- `interactOutside`: `[event: PointerDownOutsideEvent | FocusOutsideEvent]`
+- `closeAutoFocus`: `[event: Event]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `DropdownMenu`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger`
+
+**Example:** none — this component has no story.
+
+### DropdownMenuGroup
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `unknown`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger`
+
+**Example:** none — this component has no story.
+
+### DropdownMenuItem
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the item.
+- `textValue`: `string` — Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the item. <br> Use this when the content is complex, or you have non-textual content inside.
+
+**Slots**
+
+- `prefix`
+- `default`
+- `suffix`
+
+**Composes with:** `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger`
+
+**Example:** none — this component has no story.
+
+### DropdownMenuLabel
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuSeparator`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger`
+
+**Example:** none — this component has no story.
+
+### DropdownMenuSeparator
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Composes with:** `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger`
+
+**Example:** none — this component has no story.
+
+### DropdownMenuSub
+
+**Props**
+
+- `class`: `unknown`
+- `defaultOpen`: `boolean` — The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.
+- `open`: `boolean` — The controlled open state of the menu. Can be used as `v-model:open`.
+
+**Events**
+
+- `update:open`: `[payload: boolean]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger`
+
+**Example:** none — this component has no story.
+
+### DropdownMenuSubContent
+
+**Props**
+
+- `alignFlip`: `boolean` — Flip alignment when colliding with boundary. May only occur when `prioritizePosition` is true.
+- `alignOffset`: `number` — An offset in pixels from the `start` or `end` alignment options.
+- `arrowPadding`: `number` — The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `avoidCollisions`: `boolean` — When `true`, overrides the side and align preferences to prevent collisions with boundary edges.
+- `class`: `ClassValue`
+- `collisionBoundary`: `Element | (Element | null)[] | null` — The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.
+- `collisionPadding`: `number | Partial<Record<"top" | "right" | "bottom" | "left", number>>` — The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
+- `disableUpdateOnLayoutShift`: `boolean` — Whether to disable the update position for the content when the layout shifted.
+- `forceMount`: `boolean` — Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
+- `hideShiftedArrow`: `boolean` — When `true`, hides the arrow when it cannot be centered to the reference element.
+- `hideWhenDetached`: `boolean` — Whether to hide the content when the trigger becomes fully occluded.
+- `loop`: `boolean` — When `true`, keyboard navigation will loop from last item to first, and vice versa.
+- `memoDependencies`: `unknown[]` — Reactive dependencies that should invalidate the memoized content subtree.
+- `positionStrategy`: `fixed` | `absolute` — The type of CSS position property to use.
+- `prioritizePosition`: `boolean` — Force content to be position within the viewport. Might overlap the reference element, which may not be desired.
+- `reference`: `ReferenceElement` — The custom element or virtual element that will be set as the reference to position the floating element. If provided, it will replace the default anchor element.
+- `sideFlip`: `boolean` — Flip to the opposite side when colliding with boundary.
+- `sideOffset`: `number` — The distance in pixels from the trigger.
+- `sticky`: `partial` | `always` — The sticky behavior on the align axis. `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.
+- `updatePositionStrategy`: `always` | `optimized` — Strategy to update the position of the floating element on every animation frame.
+
+**Events**
+
+- `escapeKeyDown`: `[event: KeyboardEvent]`
+- `pointerDownOutside`: `[event: PointerDownOutsideEvent]`
+- `focusOutside`: `[event: FocusOutsideEvent]`
+- `interactOutside`: `[event: PointerDownOutsideEvent | FocusOutsideEvent]`
+- `entryFocus`: `[event: Event]`
+- `openAutoFocus`: `[event: Event]`
+- `closeAutoFocus`: `[event: Event]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuTrigger`
+
+**Example:** none — this component has no story.
+
+### DropdownMenuSubTrigger
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the item.
+- `textValue`: `string` — Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the item. <br> Use this when the content is complex, or you have non-textual content inside.
+
+**Slots**
+
+- `prefix`
+- `default`
+
+**Composes with:** `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuTrigger`
+
+**Example:** none — this component has no story.
+
+### DropdownMenuTrigger
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `unknown`
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with item
+
+**Slots**
+
+- `default`
+
+**Composes with:** `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuGroup`, `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuSub`, `DropdownMenuSubContent`, `DropdownMenuSubTrigger`
+
+**Example:** none — this component has no story.
+
+---
+
+## file-upload
+
+### FileUploadArea
+
+**Props**
+
+- `accept`: `string`
+- `class`: `ClassValue`
+- `description`: `string` — default `"JPEG, PNG, PDF, and MP4 formats, up to 50 MB."`
+- `icon`: `string` — default `"i-celeste-upload-cloud-2-line"`
+- `label`: `string` — default `"Choose a file or drag & drop it here."`
+- `labelOnDrop`: `string` — default `"Drop file to upload"`
+- `maxFiles`: `number` — default `5`
+- `maxSize`: `number` — default `2000`
+- `modelValue`: `File[]` — default `[]`
+- `multiple`: `boolean` — default `false`
+- `onTriggerClick`: `(() => void)`
+- `triggerLabel`: `string` — default `"Browse Files"`
+
+**Events**
+
+- `error`: `[error: FileError]`
+- `update:modelValue`: `[value: File[]]`
+
+**Example:** `src/components/file-upload/stories/file-upload-area.stories.ts`
+
+---
+
+## hint-text
+
+### HintText
+
+**Props**
+
+- `class`: `ClassValue`
+- `icon`: `string`
+- `state`: `default` | `error` | `disabled` — default `"default"`
+- `text`: `string`
+
+**Example:** `src/components/hint-text/stories/hint-text.stories.ts`
+
+---
+
+## label
+
+### Label
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean`
+- `for`: `string` — The id of the element the label is associated with.
+- `information`: `string`
+- `required`: `boolean`
+- `sublabel`: `string`
+
+**Slots**
+
+- `default`
+- `button`
+
+**Example:** `src/components/label/stories/label.stories.ts`
+
+---
+
+## modal
+
+### Modal
+
+**Props**
+
+- `class`: `unknown`
+- `defaultOpen`: `boolean` — The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
+- `modal`: `boolean` — The modality of the dialog When set to `true`, <br> interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
+- `open`: `boolean` — The controlled open state of the dialog. Can be binded as `v-model:open`.
+- `unmountOnHide`: `boolean` — When set to `false`, the dialog content will not be unmounted when closed, but instead hidden with CSS. <br> Useful for SEO or when you want to improve performance by not remounting the component on every open.
+
+**Events**
+
+- `update:open`: `[value: boolean]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `ModalBody`, `ModalClose`, `ModalContent`, `ModalFooter`, `ModalHeader`, `ModalTrigger`
+
+**Example:** `src/components/modal/stories/modal.stories.ts`
+
+### ModalBody
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Modal`, `ModalClose`, `ModalContent`, `ModalFooter`, `ModalHeader`, `ModalTrigger`
+
+**Example:** none — this component has no story.
+
+### ModalClose
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `unknown`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Modal`, `ModalBody`, `ModalContent`, `ModalFooter`, `ModalHeader`, `ModalTrigger`
+
+**Example:** none — this component has no story.
+
+### ModalContent
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disableOutsidePointerEvents`: `boolean` — When `true`, hover/focus/click interactions will be disabled on elements outside the `DismissableLayer`. Users will need to click twice on outside elements to interact with them: once to close the `DismissableLayer`, and again to trigger the element.
+- `forceMount`: `boolean` — Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
+
+**Events**
+
+- `escapeKeyDown`: `[event: KeyboardEvent]`
+- `pointerDownOutside`: `[event: PointerDownOutsideEvent]`
+- `focusOutside`: `[event: FocusOutsideEvent]`
+- `interactOutside`: `[event: PointerDownOutsideEvent | FocusOutsideEvent]`
+- `openAutoFocus`: `[event: Event]`
+- `closeAutoFocus`: `[event: Event]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Modal`, `ModalBody`, `ModalClose`, `ModalFooter`, `ModalHeader`, `ModalTrigger`
+
+**Example:** none — this component has no story.
+
+### ModalFooter
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Modal`, `ModalBody`, `ModalClose`, `ModalContent`, `ModalHeader`, `ModalTrigger`
+
+**Example:** none — this component has no story.
+
+### ModalHeader
+
+**Props**
+
+- `title`: `string` **(required)**
+- `alignment`: `horizontal` | `vertical` — default `"horizontal"`
+- `class`: `ClassValue`
+- `description`: `string`
+- `dismissible`: `boolean` — default `true`
+- `icon`: `string`
+- `type`: `information` | `default` | `success` | `warning` | `error` — default `"default"`
+
+**Composes with:** `Modal`, `ModalBody`, `ModalClose`, `ModalContent`, `ModalFooter`, `ModalTrigger`
+
+**Example:** none — this component has no story.
+
+### ModalTrigger
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `unknown`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Modal`, `ModalBody`, `ModalClose`, `ModalContent`, `ModalFooter`, `ModalHeader`
+
+**Example:** none — this component has no story.
+
+---
+
+## pagination
+
+### Pagination
+
+**Props**
+
+- `itemsPerPage`: `number` **(required)** — Number of items per page
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `defaultPage`: `number` — The value of the page that should be active when initially rendered. Use when you do not need to control the value state.
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with item
+- `page`: `number` — The controlled value of the current page. Can be binded as `v-model:page`.
+- `showEdges`: `boolean` — When `true`, always show first page, last page, and ellipsis
+- `siblingCount`: `number` — Number of sibling should be shown around the current page
+- `total`: `number` — Number of items in your list
+- `variant`: `basic` | `rounded` | `group` — default `"basic"`
+
+**Events**
+
+- `update:page`: `[value: number]`
+
+**Slots**
+
+- `leading` — scope `{ page: number; pageCount: number; }`
+- `default` — scope `{ page: number; pageCount: number; }`
+- `trailing` — scope `{ page: number; pageCount: number; }`
+
+**Composes with:** `PaginationContent`, `PaginationEllipsis`, `PaginationFirst`, `PaginationItem`, `PaginationLast`, `PaginationNext`, `PaginationPrevious`
+
+**Example:** `src/components/pagination/stories/pagination.stories.ts`
+
+### PaginationContent
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default` — scope `{ items: ({ type: "ellipsis"; } | { type: "page"; value: number; })[]; }`
+
+**Composes with:** `Pagination`, `PaginationEllipsis`, `PaginationFirst`, `PaginationItem`, `PaginationLast`, `PaginationNext`, `PaginationPrevious`
+
+**Example:** none — this component has no story.
+
+### PaginationEllipsis
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Pagination`, `PaginationContent`, `PaginationFirst`, `PaginationItem`, `PaginationLast`, `PaginationNext`, `PaginationPrevious`
+
+**Example:** none — this component has no story.
+
+### PaginationFirst
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Pagination`, `PaginationContent`, `PaginationEllipsis`, `PaginationItem`, `PaginationLast`, `PaginationNext`, `PaginationPrevious`
+
+**Example:** none — this component has no story.
+
+### PaginationItem
+
+**Props**
+
+- `value`: `number` **(required)** — Value for the page
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean`
+- `isActive`: `boolean`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Pagination`, `PaginationContent`, `PaginationEllipsis`, `PaginationFirst`, `PaginationLast`, `PaginationNext`, `PaginationPrevious`
+
+**Example:** none — this component has no story.
+
+### PaginationLast
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Pagination`, `PaginationContent`, `PaginationEllipsis`, `PaginationFirst`, `PaginationItem`, `PaginationNext`, `PaginationPrevious`
+
+**Example:** none — this component has no story.
+
+### PaginationNext
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Pagination`, `PaginationContent`, `PaginationEllipsis`, `PaginationFirst`, `PaginationItem`, `PaginationLast`, `PaginationPrevious`
+
+**Example:** none — this component has no story.
+
+### PaginationPrevious
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Pagination`, `PaginationContent`, `PaginationEllipsis`, `PaginationFirst`, `PaginationItem`, `PaginationLast`, `PaginationNext`
+
+**Example:** none — this component has no story.
+
+---
+
+## popover
+
+### Popover
+
+**Props**
+
+- `class`: `unknown`
+- `defaultOpen`: `boolean` — The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
+- `modal`: `boolean` — The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.
+- `open`: `boolean` — The controlled open state of the popover.
+
+**Events**
+
+- `update:open`: `[value: boolean]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `PopoverContent`, `PopoverTrigger`
+
+**Example:** `src/components/popover/stories/popover.stories.ts`
+
+### PopoverContent
+
+**Props**
+
+- `align`: `start` | `center` | `end`
+- `alignOffset`: `number`
+- `class`: `ClassValue`
+- `description`: `string`
+- `dismissible`: `boolean` — default `true`
+- `icon`: `string`
+- `iconSize`: `sm` | `lg` | `md` | `xl` | `xxl` — default `"lg"`
+- `showTail`: `boolean` — default `true`
+- `side`: `top` | `right` | `bottom` | `left` — default `"bottom"`
+- `sideOffset`: `number`
+- `title`: `string`
+
+**Events**
+
+- `escapeKeyDown`: `[event: KeyboardEvent]`
+- `pointerDownOutside`: `[event: PointerDownOutsideEvent]`
+- `focusOutside`: `[event: FocusOutsideEvent]`
+- `interactOutside`: `[event: PointerDownOutsideEvent | FocusOutsideEvent]`
+- `openAutoFocus`: `[event: Event]`
+- `closeAutoFocus`: `[event: Event]`
+
+**Slots**
+
+- `default`
+- `footer`
+
+**Composes with:** `Popover`, `PopoverTrigger`
+
+**Example:** none — this component has no story.
+
+### PopoverTrigger
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `unknown`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Popover`, `PopoverContent`
+
+**Example:** none — this component has no story.
+
+---
+
+## progress
+
+### ProgressBar
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `color`: `primary` | `blue` | `red` | `orange` | `green` — default `"primary"`
+- `getValueLabel`: `((value: number | null | undefined, max: number) => string | undefined)` — A function to get the accessible label text in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.
+- `getValueText`: `((value: number | null | undefined, max: number) => string | undefined)` — A function to get the accessible value text representing the current value in a human-readable format.
+- `layout`: `default` | `inline` | `bare` | `no-description` — default `"bare"`
+- `max`: `number` — default `100` — The maximum progress value.
+- `modelValue`: `number | null` — default `0` — The progress value. Can be bind as `v-model`.
+- `title`: `string`
+
+**Slots**
+
+- `label`
+- `description`
+
+**Composes with:** `ProgressCircle`
+
+**Example:** `src/components/progress/stories/progress-bar.stories.ts`
+
+### ProgressCircle
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `getValueLabel`: `((value: number | null | undefined, max: number) => string | undefined)` — A function to get the accessible label text in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.
+- `getValueText`: `((value: number | null | undefined, max: number) => string | undefined)` — A function to get the accessible value text representing the current value in a human-readable format.
+- `max`: `number` — default `100` — The maximum progress value.
+- `modelValue`: `number | null` — default `0` — The progress value. Can be bind as `v-model`.
+- `size`: `80 | 72 | 64 | 56 | 48` — default `80`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `ProgressBar`
+
+**Example:** none — this component has no story.
+
+---
+
+## radio-group
+
+### RadioGroup
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `defaultValue`: `AcceptableValue` — The value of the radio item that should be checked when initially rendered. Use when you do not need to control the state of the radio items.
+- `dir`: `Direction` — The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with radio items.
+- `loop`: `boolean` — When `true`, keyboard navigation will loop from last item to first, and vice versa.
+- `modelValue`: `AcceptableValue` — The controlled value of the radio item to check. Can be binded as `v-model`.
+- `name`: `string` — The name of the field. Submitted with its owning form as part of a name/value pair.
+- `orientation`: `DataOrientation` — The orientation of the component.
+- `required`: `boolean` — When `true`, indicates that the user must set the value before the owning form can be submitted.
+
+**Events**
+
+- `update:modelValue`: `[payload: AcceptableValue]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `RadioGroupCard`, `RadioGroupItem`, `RadioGroupLabel`
+
+**Example:** `src/components/radio-group/stories/radio-group.stories.ts`
+
+### RadioGroupCard
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean`
+- `for`: `string` — The id of the element the label is associated with.
+- `required`: `boolean`
+
+**Slots**
+
+- `image` — scope `{ class: string; }`
+- `icon`
+- `label`
+- `sublabel`
+- `badge` — scope `{ disabled: boolean; }`
+- `description`
+- `default`
+
+**Composes with:** `RadioGroup`, `RadioGroupItem`, `RadioGroupLabel`
+
+**Example:** `src/components/radio-group/stories/radio-group-card.stories.ts`
+
+### RadioGroupItem
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the radio item.
+- `id`: `string`
+- `name`: `string` — The name of the field. Submitted with its owning form as part of a name/value pair.
+- `required`: `boolean` — When `true`, indicates that the user must set the value before the owning form can be submitted.
+- `value`: `AcceptableValue` — The value given as data when submitted with a `name`.
+
+**Composes with:** `RadioGroup`, `RadioGroupCard`, `RadioGroupLabel`
+
+**Example:** none — this component has no story.
+
+### RadioGroupLabel
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean`
+- `for`: `string` — The id of the element the label is associated with.
+- `required`: `boolean`
+
+**Slots**
+
+- `default`
+- `label`
+- `sublabel`
+- `badge`
+- `description`
+- `linkButton`
+
+**Composes with:** `RadioGroup`, `RadioGroupCard`, `RadioGroupItem`
+
+**Example:** none — this component has no story.
+
+---
+
+## range-calendar
+
+### RangeCalendar
+
+**Props**
+
+- `allowNonContiguousRanges`: `boolean` — When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `calendarLabel`: `string` — The accessible label for the calendar
+- `class`: `ClassValue`
+- `defaultPlaceholder`: `DateValue` — The default placeholder date
+- `defaultValue`: `DateRange` — The default value for the calendar
+- `dir`: `Direction` — The reading direction of the calendar when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `disabled`: `boolean` — Whether or not the calendar is disabled
+- `disableDaysOutsideCurrentView`: `boolean` — Whether or not to disable days outside the current view.
+- `fixedDate`: `start` | `end` — Which part of the range should be fixed
+- `fixedWeeks`: `boolean` — default `true` — Whether or not to always display 6 weeks in the calendar
+- `initialFocus`: `boolean` — If true, the calendar will focus the selected day, today, or the first day of the month depending on what is visible when the calendar is mounted
+- `isDateDisabled`: `Matcher` — A function that returns whether or not a date is disabled
+- `isDateHighlightable`: `Matcher` — A function that returns whether or not a date is hightable
+- `isDateUnavailable`: `Matcher` — A function that returns whether or not a date is unavailable
+- `locale`: `string` — The locale to use for formatting dates
+- `markedDates`: `DateValue[]`
+- `maximumDays`: `number` — The maximum number of days that can be selected in a range
+- `maxValue`: `DateValue` — The maximum date that can be selected
+- `minValue`: `DateValue` — The minimum date that can be selected
+- `modelValue`: `DateRange | null` — The controlled selected date range of the calendar. Can be bound as `v-model`.
+- `nextPage`: `((placeholder: DateValue) => DateValue)` — A function that returns the next page of the calendar. It receives the current placeholder as an argument inside the component.
+- `numberOfMonths`: `number` — default `2` — The number of months to display at once
+- `pagedNavigation`: `boolean` — This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month
+- `placeholder`: `DateValue` — The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view
+- `preventDeselect`: `boolean` — Whether or not to prevent the user from deselecting a date without selecting another date first
+- `prevPage`: `((placeholder: DateValue) => DateValue)` — A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component.
+- `readonly`: `boolean` — Whether or not the calendar is readonly
+- `weekdayFormat`: `WeekDayFormat` — default `"short"` — The format to use for the weekday strings provided via the weekdays slot prop
+- `weekStartsOn`: `WeekStartsOn` — default `1` — The day of the week to start the calendar on
+
+**Events**
+
+- `update:modelValue`: `[date: DateRange]`
+- `update:placeholder`: `[date: DateValue]`
+- `update:validModelValue`: `[date: DateRange]`
+- `update:startValue`: `[date: DateValue | undefined]`
+
+**Example:** `src/components/range-calendar/stories/range-calendar.stories.ts`
+
+---
+
+## range-picker
+
+### RangePicker
+
+**Props**
+
+- `allowNonContiguousRanges`: `boolean` — When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.
+- `applyLabel`: `string` — default `"Apply"`
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `calendarLabel`: `string` — The accessible label for the calendar
+- `cancelLabel`: `string` — default `"Cancel"`
+- `class`: `ClassValue`
+- `defaultPlaceholder`: `DateValue` — The default placeholder date
+- `defaultValue`: `DateRange` — The default value for the calendar
+- `dir`: `Direction` — The reading direction of the calendar when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `disabled`: `boolean` — Whether or not the calendar is disabled
+- `disableDaysOutsideCurrentView`: `boolean` — Whether or not to disable days outside the current view.
+- `fixedDate`: `start` | `end` — Which part of the range should be fixed
+- `fixedWeeks`: `boolean` — Whether or not to always display 6 weeks in the calendar
+- `footer`: `boolean` — default `true`
+- `initialFocus`: `boolean` — If true, the calendar will focus the selected day, today, or the first day of the month depending on what is visible when the calendar is mounted
+- `isDateDisabled`: `Matcher` — A function that returns whether or not a date is disabled
+- `isDateHighlightable`: `Matcher` — A function that returns whether or not a date is hightable
+- `isDateUnavailable`: `Matcher` — A function that returns whether or not a date is unavailable
+- `locale`: `string` — The locale to use for formatting dates
+- `markedDates`: `DateValue[]`
+- `maximumDays`: `number` — The maximum number of days that can be selected in a range
+- `maxValue`: `DateValue` — The maximum date that can be selected
+- `minValue`: `DateValue` — The minimum date that can be selected
+- `modelValue`: `DateRange` — default `{ start: undefined, end: undefined }`
+- `nextPage`: `((placeholder: DateValue) => DateValue)` — A function that returns the next page of the calendar. It receives the current placeholder as an argument inside the component.
+- `numberOfMonths`: `number` — The number of months to display at once
+- `pagedNavigation`: `boolean` — This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month
+- `placeholder`: `DateValue` — The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view
+- `placeholderLabel`: `string` — default `"Select a range"`
+- `presets`: `RangePickerPreset[]`
+- `preventDeselect`: `boolean` — Whether or not to prevent the user from deselecting a date without selecting another date first
+- `prevPage`: `((placeholder: DateValue) => DateValue)` — A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component.
+- `rangeLabel`: `string` — default `"Range:"`
+- `readonly`: `boolean` — Whether or not the calendar is readonly
+- `showPresets`: `boolean` — default `true`
+- `weekdayFormat`: `WeekDayFormat` — The format to use for the weekday strings provided via the weekdays slot prop
+- `weekStartsOn`: `WeekStartsOn` — The day of the week to start the calendar on
+
+**Events**
+
+- `update:modelValue`: `[value: DateRange]`
+- `apply`: `[value: DateRange]`
+- `cancel`: `[]`
+
+**Example:** `src/components/range-picker/stories/range-picker.stories.ts`
+
+---
+
+## rich-editor
+
+### RichEditor
+
+**Props**
+
+- `class`: `unknown`
+- `customToolbar`: `string[]` — default `[]`
+- `maxLimit`: `number` — default `null`
+- `modelValue`: `string` — default `''`
+- `placeholder`: `string` — default `''`
+- `showExtraSettings`: `boolean` — default `true`
+
+**Events**
+
+- `update:modelValue`: `any[]`
+
+**Example:** `src/components/rich-editor/stories/rich-editor.stories.ts`
+
+---
+
+## scroll-area
+
+### ScrollArea
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `dir`: `Direction$2` — The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `scrollHideDelay`: `number` — If type is set to either `scroll` or `hover`, this prop determines the length of time, in milliseconds, <br> before the scrollbars are hidden after the user stops interacting with scrollbars.
+- `type`: `ScrollType` — Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars. `auto` - means that scrollbars are visible when content is overflowing on the corresponding orientation. <br> `always` - means that scrollbars are always visible regardless of whether the content is overflowing.<br> `scroll` - means that scrollbars are visible when the user is scrolling along its corresponding orientation.<br> `hover` - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area.<br> `glimpse` - a hybrid approach that briefly shows scrollbars when the user enters the scroll area, then hides them until further interaction.
+
+**Slots**
+
+- `default`
+
+**Example:** `src/components/scroll-area/stories/scroll-area.stories.ts`
+
+---
+
+## segmented-control
+
+### SegmentedControl
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `defaultValue`: `AcceptableValue | AcceptableValue[]` — The default active value of the item(s). Use when you do not need to control the state of the item(s).
+- `dir`: `Direction` — The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the toggle group and all its items.
+- `loop`: `boolean` — When `loop` and `rovingFocus` is `true`, keyboard navigation will loop from last item to first, and vice versa.
+- `modelValue`: `AcceptableValue | AcceptableValue[]` — The controlled value of the active item(s). Use this when you need to control the state of the items. Can be binded with `v-model`
+- `name`: `string` — The name of the field. Submitted with its owning form as part of a name/value pair.
+- `orientation`: `DataOrientation` — The orientation of the component, which determines how focus moves: `horizontal` for left/right arrows and `vertical` for up/down arrows.
+- `required`: `boolean` — When `true`, indicates that the user must set the value before the owning form can be submitted.
+- `rovingFocus`: `boolean` — When `false`, navigating through the items using arrow keys will be disabled.
+
+**Events**
+
+- `update:modelValue`: `[payload: AcceptableValue | AcceptableValue[]]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `SegmentedControlItem`
+
+**Example:** `src/components/segmented-control/stories/segmented-control.stories.ts`
+
+### SegmentedControlItem
+
+**Props**
+
+- `value`: `AcceptableValue` **(required)** — A string value for the toggle group item. All items within a toggle group should use a unique value.
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the toggle.
+
+**Slots**
+
+- `default`
+
+**Composes with:** `SegmentedControl`
+
+**Example:** none — this component has no story.
+
+---
+
+## select
+
+### Select
+
+**Props**
+
+- `autocomplete`: `string` — Native html input `autocomplete` attribute.
+- `by`: `string | ((a: AcceptableValue, b: AcceptableValue) => boolean)` — Use this to compare objects by a particular field, or pass your own comparison function for complete control over how objects are compared.
+- `class`: `ClassValue`
+- `defaultOpen`: `boolean` — The open state of the select when it is initially rendered. Use when you do not need to control its open state.
+- `defaultValue`: `AcceptableValue | AcceptableValue[]` — The value of the select when initially rendered. Use when you do not need to control the state of the Select
+- `dir`: `Direction` — The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with Select
+- `modelValue`: `AcceptableValue | AcceptableValue[]` — The controlled value of the Select. Can be bind as `v-model`.
+- `multiple`: `boolean` — Whether multiple options can be selected or not.
+- `name`: `string` — The name of the field. Submitted with its owning form as part of a name/value pair.
+- `nullableValue`: `string` — The value of the hidden native select option when the model value is nullish.
+- `open`: `boolean` — The controlled open state of the Select. Can be bind as `v-model:open`.
+- `required`: `boolean` — When `true`, indicates that the user must set the value before the owning form can be submitted.
+
+**Events**
+
+- `update:modelValue`: `[value: AcceptableValue]`
+- `update:open`: `[value: boolean]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `SelectContent`, `SelectGroup`, `SelectIcon`, `SelectItem`, `SelectLabel`, `SelectSeparator`, `SelectTrigger`, `SelectValue`
+
+**Example:** `src/components/select/stories/select.stories.ts`
+
+### SelectContent
+
+**Props**
+
+- `align`: `start` | `center` | `end` — The preferred alignment against the trigger. May change when collisions occur.
+- `alignFlip`: `boolean` — Flip alignment when colliding with boundary. May only occur when `prioritizePosition` is true.
+- `alignOffset`: `number` — An offset in pixels from the `start` or `end` alignment options.
+- `arrowPadding`: `number` — The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `avoidCollisions`: `boolean` — When `true`, overrides the side and align preferences to prevent collisions with boundary edges.
+- `bodyLock`: `boolean` — The document.body will be lock, and scrolling will be disabled.
+- `class`: `ClassValue`
+- `collisionBoundary`: `Element | (Element | null)[] | null` — The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.
+- `collisionPadding`: `number | Partial<Record<"top" | "right" | "bottom" | "left", number>>` — The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
+- `dir`: `Direction` — The reading direction of the popper content when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `disableOutsidePointerEvents`: `boolean` — When `true`, hover/focus/click interactions will be disabled on elements outside the `DismissableLayer`. Users will need to click twice on outside elements to interact with them: once to close the `DismissableLayer`, and again to trigger the element.
+- `disableUpdateOnLayoutShift`: `boolean` — Whether to disable the update position for the content when the layout shifted.
+- `forceMount`: `boolean` — Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
+- `hideShiftedArrow`: `boolean` — When `true`, hides the arrow when it cannot be centered to the reference element.
+- `hideWhenDetached`: `boolean` — Whether to hide the content when the trigger becomes fully occluded.
+- `memoDependencies`: `unknown[]` — Reactive dependencies that should invalidate the memoized content subtree.
+- `position`: `popper` | `item-aligned` — The positioning mode to use `item-aligned (default)` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br> `popper` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.
+- `positionStrategy`: `fixed` | `absolute` — The type of CSS position property to use.
+- `prioritizePosition`: `boolean` — Force content to be position within the viewport. Might overlap the reference element, which may not be desired.
+- `reference`: `ReferenceElement` — The custom element or virtual element that will be set as the reference to position the floating element. If provided, it will replace the default anchor element.
+- `side`: `top` | `right` | `bottom` | `left` — The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
+- `sideFlip`: `boolean` — Flip to the opposite side when colliding with boundary.
+- `sideOffset`: `number` — The distance in pixels from the trigger.
+- `sticky`: `partial` | `always` — The sticky behavior on the align axis. `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.
+- `updatePositionStrategy`: `always` | `optimized` — Strategy to update the position of the floating element on every animation frame.
+- `width`: `full` | `fit` — default `"full"`
+
+**Events**
+
+- `escapeKeyDown`: `[event: KeyboardEvent]`
+- `pointerDownOutside`: `[event: PointerDownOutsideEvent]`
+- `closeAutoFocus`: `[event: Event]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Select`, `SelectGroup`, `SelectIcon`, `SelectItem`, `SelectLabel`, `SelectSeparator`, `SelectTrigger`, `SelectValue`
+
+**Example:** none — this component has no story.
+
+### SelectGroup
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `unknown`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Select`, `SelectContent`, `SelectIcon`, `SelectItem`, `SelectLabel`, `SelectSeparator`, `SelectTrigger`, `SelectValue`
+
+**Example:** none — this component has no story.
+
+### SelectIcon
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Select`, `SelectContent`, `SelectGroup`, `SelectItem`, `SelectLabel`, `SelectSeparator`, `SelectTrigger`, `SelectValue`
+
+**Example:** none — this component has no story.
+
+### SelectItem
+
+**Props**
+
+- `value`: `AcceptableValue` **(required)** — The value given as data when submitted with a `name`.
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the item.
+- `textValue`: `string` — Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the `SelectItemText` part. Use this when the content is complex, or you have non-textual content inside.
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Select`, `SelectContent`, `SelectGroup`, `SelectIcon`, `SelectLabel`, `SelectSeparator`, `SelectTrigger`, `SelectValue`
+
+**Example:** none — this component has no story.
+
+### SelectLabel
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `for`: `string`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Select`, `SelectContent`, `SelectGroup`, `SelectIcon`, `SelectItem`, `SelectSeparator`, `SelectTrigger`, `SelectValue`
+
+**Example:** none — this component has no story.
+
+### SelectSeparator
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Composes with:** `Select`, `SelectContent`, `SelectGroup`, `SelectIcon`, `SelectItem`, `SelectLabel`, `SelectTrigger`, `SelectValue`
+
+**Example:** none — this component has no story.
+
+### SelectTrigger
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean`
+- `hasError`: `boolean`
+- `reference`: `ReferenceElement` — The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
+- `size`: `xs` | `sm` | `md` — default `"md"`
+- `variant`: `default` | `compact` | `inline` — default `"default"`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Select`, `SelectContent`, `SelectGroup`, `SelectIcon`, `SelectItem`, `SelectLabel`, `SelectSeparator`, `SelectValue`
+
+**Example:** none — this component has no story.
+
+### SelectValue
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `placeholder`: `string` — The content that will be rendered inside the `SelectValue` when no `value` or `defaultValue` is set.
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Select`, `SelectContent`, `SelectGroup`, `SelectIcon`, `SelectItem`, `SelectLabel`, `SelectSeparator`, `SelectTrigger`
+
+**Example:** none — this component has no story.
+
+---
+
+## sheet
+
+### Sheet
+
+**Props**
+
+- `class`: `unknown`
+- `defaultOpen`: `boolean` — The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
+- `modal`: `boolean` — The modality of the dialog When set to `true`, <br> interaction with outside elements will be disabled and only dialog content will be visible to screen readers.
+- `open`: `boolean` — The controlled open state of the dialog. Can be binded as `v-model:open`.
+- `unmountOnHide`: `boolean` — When set to `false`, the dialog content will not be unmounted when closed, but instead hidden with CSS. <br> Useful for SEO or when you want to improve performance by not remounting the component on every open.
+
+**Events**
+
+- `update:open`: `[value: boolean]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `SheetClose`, `SheetContent`, `SheetDescription`, `SheetFooter`, `SheetHeader`, `SheetTitle`, `SheetTrigger`
+
+**Example:** `src/components/sheet/stories/sheet.stories.ts`
+
+### SheetClose
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sheet`, `SheetContent`, `SheetDescription`, `SheetFooter`, `SheetHeader`, `SheetTitle`, `SheetTrigger`
+
+**Example:** none — this component has no story.
+
+### SheetContent
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disableOutsidePointerEvents`: `boolean` — When `true`, hover/focus/click interactions will be disabled on elements outside the `DismissableLayer`. Users will need to click twice on outside elements to interact with them: once to close the `DismissableLayer`, and again to trigger the element.
+- `forceMount`: `boolean` — Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
+- `side`: `top` | `right` | `bottom` | `left` — default `"right"`
+
+**Events**
+
+- `escapeKeyDown`: `[event: KeyboardEvent]`
+- `pointerDownOutside`: `[event: PointerDownOutsideEvent]`
+- `focusOutside`: `[event: FocusOutsideEvent]`
+- `interactOutside`: `[event: PointerDownOutsideEvent | FocusOutsideEvent]`
+- `openAutoFocus`: `[event: Event]`
+- `closeAutoFocus`: `[event: Event]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sheet`, `SheetClose`, `SheetDescription`, `SheetFooter`, `SheetHeader`, `SheetTitle`, `SheetTrigger`
+
+**Example:** none — this component has no story.
+
+### SheetDescription
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sheet`, `SheetClose`, `SheetContent`, `SheetFooter`, `SheetHeader`, `SheetTitle`, `SheetTrigger`
+
+**Example:** none — this component has no story.
+
+### SheetFooter
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sheet`, `SheetClose`, `SheetContent`, `SheetDescription`, `SheetHeader`, `SheetTitle`, `SheetTrigger`
+
+**Example:** none — this component has no story.
+
+### SheetHeader
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sheet`, `SheetClose`, `SheetContent`, `SheetDescription`, `SheetFooter`, `SheetTitle`, `SheetTrigger`
+
+**Example:** none — this component has no story.
+
+### SheetTitle
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sheet`, `SheetClose`, `SheetContent`, `SheetDescription`, `SheetFooter`, `SheetHeader`, `SheetTrigger`
+
+**Example:** none — this component has no story.
+
+### SheetTrigger
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `unknown`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sheet`, `SheetClose`, `SheetContent`, `SheetDescription`, `SheetFooter`, `SheetHeader`, `SheetTitle`
+
+**Example:** none — this component has no story.
+
+---
+
+## sidebar
+
+### Sidebar
+
+**Props**
+
+- `class`: `ClassValue`
+- `collapsible`: `icon` | `none` | `offcanvas` — default `"offcanvas"`
+- `variant`: `sidebar` | `floating` | `inset` — default `"sidebar"`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** `src/components/sidebar/stories/sidebar.stories.ts`
+
+### SidebarContent
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarElement
+
+**Props**
+
+- `as`: `AsTag | Component` — default `"div"` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarFooter
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarGroup
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarGroupContent
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarGroupLabel
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarHeader
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarMenu
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarMenuAction
+
+**Props**
+
+- `as`: `AsTag | Component` — default `"button"` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `showOnHover`: `boolean`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarMenuBadge
+
+**Props**
+
+- `class`: `ClassValue`
+- `label`: `string`
+- `size`: `sm` | `md` — default `"sm"`
+- `state`: `information` | `success` | `warning` | `error` | `feature` | `faded` | `away` | `verified` | `highlighted` | `stable` — default `"faded"`
+- `variant`: `fill` | `light` | `lighter` | `stroke` — default `"lighter"`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarMenuButton
+
+**Props**
+
+- `as`: `AsTag | Component` — default `"button"` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `isActive`: `boolean` — default `false`
+- `variant`: `default` | `outline` — default `"default"`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarMenuItem
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarMenuSub
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarMenuSubButton
+
+**Props**
+
+- `as`: `AsTag | Component` — default `"a"` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `isActive`: `boolean` — default `false`
+- `size`: `sm` | `md` — default `"md"`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarMenuSubItem
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarProvider`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarProvider
+
+**Props**
+
+- `class`: `ClassValue`
+- `defaultOpen`: `boolean` — default `!defaultDocument?.cookie.includes(`${SIDEBAR_COOKIE_NAME}=false`)`
+- `open`: `boolean` — default `undefined`
+
+**Events**
+
+- `update:open`: `[open: boolean]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarSeparator`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarSeparator
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarTrigger`
+
+**Example:** none — this component has no story.
+
+### SidebarTrigger
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Composes with:** `Sidebar`, `SidebarContent`, `SidebarElement`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarSeparator`
+
+**Example:** none — this component has no story.
+
+---
+
+## slider
+
+### Slider
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `defaultValue`: `number[]` — The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
+- `dir`: `Direction` — The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the slider.
+- `inverted`: `boolean` — Whether the slider is visually inverted.
+- `max`: `number` — The maximum value for the range.
+- `min`: `number` — The minimum value for the range.
+- `minStepsBetweenThumbs`: `number` — The minimum permitted steps between multiple thumbs.
+- `modelValue`: `number[] | null` — The controlled value of the slider. Can be bind as `v-model`.
+- `name`: `string` — The name of the field. Submitted with its owning form as part of a name/value pair.
+- `required`: `boolean` — When `true`, indicates that the user must set the value before the owning form can be submitted.
+- `step`: `number` — The stepping interval.
+- `thumbAlignment`: `ThumbAlignment` — The alignment of the slider thumb. - `contain`: thumbs will be contained within the bounds of the track. - `overflow`: thumbs will not be bound by the track. No extra offset will be added.
+
+**Events**
+
+- `update:modelValue`: `[payload: number[] | undefined]`
+- `valueCommit`: `[payload: number[]]`
+
+**Example:** `src/components/slider/stories/slider.stories.ts`
+
+---
+
+## sonner
+
+### Sonner
+
+**Props**
+
+- `class`: `string`
+- `closeButton`: `boolean`
+- `closeButtonPosition`: `CloseButtonPosition`
+- `containerAriaLabel`: `string`
+- `dir`: `ltr` | `rtl` | `auto`
+- `duration`: `number`
+- `expand`: `boolean`
+- `gap`: `number`
+- `hotkey`: `string[]`
+- `icons`: `ToastIcons`
+- `id`: `string`
+- `invert`: `boolean`
+- `mobileOffset`: `Offset`
+- `offset`: `Offset`
+- `position`: `Position`
+- `richColors`: `boolean`
+- `swipeDirections`: `SwipeDirection[]`
+- `theme`: `Theme`
+- `toastOptions`: `ToastOptions`
+- `visibleToasts`: `number`
+
+**Composes with:** `SonnerAlert`
+
+**Example:** `src/components/sonner/stories/sonner.stories.ts`
+
+### SonnerAlert
+
+**Props**
+
+- `title`: `string` **(required)**
+- `class`: `ClassValue`
+- `description`: `string`
+- `dismissable`: `boolean` — default `true`
+- `onDismiss`: `(() => void)`
+- `size`: `xs` | `sm` | `lg` — default `"lg"`
+- `state`: `information` | `success` | `warning` | `error` | `feature` — default `"success"`
+- `variant`: `fill` | `light` | `lighter` | `stroke` — default `"stroke"`
+
+**Composes with:** `Sonner`
+
+**Example:** none — this component has no story.
+
+---
+
+## switch
+
+### Switch
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `defaultValue`: `boolean` — The state of the switch when it is initially rendered. Use when you do not need to control its state.
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the switch.
+- `falseValue`: `boolean` — The value used when the switch is off. Defaults to `false`.
+- `id`: `string`
+- `modelValue`: `boolean | null` — The controlled state of the switch. Can be bind as `v-model`.
+- `name`: `string` — The name of the field. Submitted with its owning form as part of a name/value pair.
+- `required`: `boolean` — When `true`, indicates that the user must set the value before the owning form can be submitted.
+- `trueValue`: `boolean` — The value used when the switch is on. Defaults to `true`.
+- `value`: `string` — The value given as data when submitted with a `name`.
+
+**Events**
+
+- `update:modelValue`: `[payload: boolean]`
+
+**Example:** `src/components/switch/stories/switch.stories.ts`
+
+---
+
+## tab-menu
+
+### TabMenu
+
+**Props**
+
+- `activationMode`: `automatic` | `manual` — Whether a tab is activated automatically (on focus) or manually (on click).
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `unknown`
+- `defaultValue`: `StringOrNumber` — The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs
+- `dir`: `Direction` — The reading direction of the combobox when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+- `modelValue`: `StringOrNumber` — The controlled value of the tab to activate. Can be bind as `v-model`.
+- `orientation`: `DataOrientation` — The orientation the tabs are laid out. Mainly so arrow navigation is done accordingly (left & right vs. up & down)
+- `unmountOnHide`: `boolean` — When `true`, the element will be unmounted on closed state.
+
+**Events**
+
+- `update:modelValue`: `[payload: StringOrNumber]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `TabMenuContent`, `TabMenuItem`, `TabMenuList`
+
+**Example:** `src/components/tab-menu/stories/tab-menu.stories.ts`
+
+### TabMenuContent
+
+**Props**
+
+- `value`: `StringOrNumber` **(required)** — A unique value that associates the content with a trigger.
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `forceMount`: `boolean` — Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
+
+**Slots**
+
+- `default`
+
+**Composes with:** `TabMenu`, `TabMenuItem`, `TabMenuList`
+
+**Example:** none — this component has no story.
+
+### TabMenuItem
+
+**Props**
+
+- `value`: `StringOrNumber` **(required)** — A unique value that associates the trigger with a content.
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean` — When `true`, prevents the user from interacting with the tab.
+
+**Slots**
+
+- `prefix`
+- `default`
+- `postfix`
+
+**Composes with:** `TabMenu`, `TabMenuContent`, `TabMenuList`
+
+**Example:** none — this component has no story.
+
+### TabMenuList
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `loop`: `boolean` — When `true`, keyboard navigation will loop from last tab to first, and vice versa.
+
+**Slots**
+
+- `default`
+
+**Composes with:** `TabMenu`, `TabMenuContent`, `TabMenuItem`
+
+**Example:** none — this component has no story.
+
+---
+
+## table
+
+### Table
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `TableBody`, `TableCaption`, `TableCell`, `TableEmpty`, `TableFooter`, `TableHead`, `TableHeader`, `TableRow`
+
+**Example:** `src/components/table/stories/table.stories.ts`
+
+### TableBody
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Table`, `TableCaption`, `TableCell`, `TableEmpty`, `TableFooter`, `TableHead`, `TableHeader`, `TableRow`
+
+**Example:** none — this component has no story.
+
+### TableCaption
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Table`, `TableBody`, `TableCell`, `TableEmpty`, `TableFooter`, `TableHead`, `TableHeader`, `TableRow`
+
+**Example:** none — this component has no story.
+
+### TableCell
+
+**Props**
+
+- `class`: `ClassValue`
+- `end`: `boolean` — default `false`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Table`, `TableBody`, `TableCaption`, `TableEmpty`, `TableFooter`, `TableHead`, `TableHeader`, `TableRow`
+
+**Example:** none — this component has no story.
+
+### TableEmpty
+
+**Props**
+
+- `class`: `ClassValue`
+- `colspan`: `number` — default `1`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableFooter`, `TableHead`, `TableHeader`, `TableRow`
+
+**Example:** none — this component has no story.
+
+### TableFooter
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableEmpty`, `TableHead`, `TableHeader`, `TableRow`
+
+**Example:** none — this component has no story.
+
+### TableHead
+
+**Props**
+
+- `class`: `ClassValue`
+- `end`: `boolean` — default `false`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableEmpty`, `TableFooter`, `TableHeader`, `TableRow`
+
+**Example:** none — this component has no story.
+
+### TableHeader
+
+**Props**
+
+- `class`: `ClassValue`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableEmpty`, `TableFooter`, `TableHead`, `TableRow`
+
+**Example:** none — this component has no story.
+
+### TableRow
+
+**Props**
+
+- `class`: `ClassValue`
+- `hoverable`: `boolean` — default `true`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Table`, `TableBody`, `TableCaption`, `TableCell`, `TableEmpty`, `TableFooter`, `TableHead`, `TableHeader`
+
+**Example:** none — this component has no story.
+
+---
+
+## tag
+
+### Tag
+
+**Props**
+
+- `as`: `AsTag | Component` — default `"div"` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `disabled`: `boolean`
+- `dismissable`: `boolean` — default `false`
+- `variant`: `stroke` | `gray` — default `"stroke"`
+
+**Events**
+
+- `dismiss`: `[]`
+
+**Slots**
+
+- `default`
+
+**Example:** `src/components/tag/stories/tag.stories.ts`
+
+---
+
+## text-input
+
+### TextInput
+
+**Props**
+
+- `autocomplete`: `string`
+- `class`: `ClassValue`
+- `hasError`: `boolean` — default `false`
+- `modelValue`: `string | number`
+- `size`: `xs` | `sm` | `md` — default `"md"`
+- `type`: `search` | `text` | `email` | `password` | `tel` | `url` | `date` — default `"text"`
+
+**Events**
+
+- `update:modelValue`: `[value: string | number | undefined]`
+
+**Slots**
+
+- `leadingIcon`
+- `leadingNode`
+- `leadingInlineNode`
+- `trailingIcon`
+- `trailingNode`
+- `trailingInlineNode`
+
+**Composes with:** `TextInputAffix`, `TextInputButton`
+
+**Example:** `src/components/text-input/stories/text-input.stories.ts`
+
+### TextInputAffix
+
+**Props**
+
+- `asKbd`: `boolean`
+- `class`: `ClassValue`
+- `inline`: `boolean`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `TextInput`, `TextInputButton`
+
+**Example:** none — this component has no story.
+
+### TextInputButton
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `ClassValue`
+- `inline`: `boolean` — default `false`
+- `intent`: `error` | `primary` | `neutral`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `TextInput`, `TextInputAffix`
+
+**Example:** none — this component has no story.
+
+---
+
+## textarea
+
+### Textarea
+
+**Props**
+
+- `class`: `ClassValue`
+- `disabled`: `boolean` — default `false`
+- `maxLength`: `Numberish`
+- `modelValue`: `string`
+- `placeholder`: `string` — default `"Placeholder"`
+- `showCount`: `boolean` — default `true`
+
+**Events**
+
+- `update:modelValue`: `[value: string | undefined]`
+
+**Example:** `src/components/textarea/stories/textarea.stories.ts`
+
+---
+
+## tooltip
+
+### Tooltip
+
+**Props**
+
+- `align`: `start` | `center` | `end` — The preferred alignment against the trigger. May change when collisions occur.
+- `alignOffset`: `number` — An offset in pixels from the `start` or `end` alignment options.
+- `ariaLabel`: `string` — By default, screenreaders will announce the content inside the component. If this is not descriptive enough, or you have content that cannot be announced, use aria-label as a more descriptive label.
+- `arrowPadding`: `number` — The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `avoidCollisions`: `boolean` — When `true`, overrides the side and align preferences to prevent collisions with boundary edges.
+- `class`: `ClassValue`
+- `collisionBoundary`: `Element | (Element | null)[] | null` — The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.
+- `collisionPadding`: `number | Partial<Record<"top" | "right" | "bottom" | "left", number>>` — The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
+- `defaultOpen`: `boolean` — The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
+- `delayDuration`: `number` — default `0` — Override the duration given to the `Provider` to customise the open delay for a specific tooltip.
+- `description`: `string`
+- `disableClosingTrigger`: `boolean` — When `true`, clicking on trigger will not close the content.
+- `disabled`: `boolean` — When `true`, disable tooltip
+- `disableHoverableContent`: `boolean` — Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider.
+- `dismissible`: `boolean`
+- `forceMount`: `boolean` — Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
+- `hideWhenDetached`: `boolean` — Whether to hide the content when the trigger becomes fully occluded.
+- `icon`: `string`
+- `ignoreNonKeyboardFocus`: `boolean` — Prevent the tooltip from opening if the focus did not come from the keyboard by matching against the `:focus-visible` selector. This is useful if you want to avoid opening it when switching browser tabs or closing a dialog.
+- `open`: `boolean` — The controlled open state of the tooltip.
+- `positionStrategy`: `fixed` | `absolute` — The type of CSS position property to use.
+- `side`: `top` | `right` | `bottom` | `left` — The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
+- `sideOffset`: `number` — default `12` — The distance in pixels from the trigger.
+- `size`: `xs` | `sm` | `md` — default `"sm"`
+- `sticky`: `partial` | `always` — The sticky behavior on the align axis. `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.
+- `title`: `string`
+- `updatePositionStrategy`: `always` | `optimized` — Strategy to update the position of the floating element on every animation frame.
+- `variant`: `light` | `dark` — default `"light"`
+
+**Events**
+
+- `update:open`: `[value: boolean]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `TooltipContent`, `TooltipProvider`, `TooltipRoot`, `TooltipTrigger`
+
+**Example:** `src/components/tooltip/stories/tooltip.stories.ts`
+
+### TooltipContent
+
+**Props**
+
+- `align`: `start` | `center` | `end` — The preferred alignment against the trigger. May change when collisions occur.
+- `alignOffset`: `number` — An offset in pixels from the `start` or `end` alignment options.
+- `ariaLabel`: `string` — By default, screenreaders will announce the content inside the component. If this is not descriptive enough, or you have content that cannot be announced, use aria-label as a more descriptive label.
+- `arrowPadding`: `number` — The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners.
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `avoidCollisions`: `boolean` — When `true`, overrides the side and align preferences to prevent collisions with boundary edges.
+- `class`: `ClassValue`
+- `collisionBoundary`: `Element | (Element | null)[] | null` — The element used as the collision boundary. By default this is the viewport, though you can provide additional element(s) to be included in this check.
+- `collisionPadding`: `number | Partial<Record<"top" | "right" | "bottom" | "left", number>>` — The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
+- `description`: `string`
+- `dismissible`: `boolean`
+- `forceMount`: `boolean` — Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.
+- `hideWhenDetached`: `boolean` — Whether to hide the content when the trigger becomes fully occluded.
+- `icon`: `string`
+- `onDismiss`: `(() => void)`
+- `positionStrategy`: `fixed` | `absolute` — The type of CSS position property to use.
+- `side`: `top` | `right` | `bottom` | `left` — The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
+- `sideOffset`: `number` — default `12` — The distance in pixels from the trigger.
+- `size`: `xs` | `sm` | `md` — default `"sm"`
+- `sticky`: `partial` | `always` — The sticky behavior on the align axis. `partial` will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless.
+- `title`: `string`
+- `updatePositionStrategy`: `always` | `optimized` — Strategy to update the position of the floating element on every animation frame.
+- `variant`: `light` | `dark` — default `"light"`
+
+**Events**
+
+- `escapeKeyDown`: `[event: KeyboardEvent]`
+- `pointerDownOutside`: `[event: Event]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Tooltip`, `TooltipProvider`, `TooltipRoot`, `TooltipTrigger`
+
+**Example:** none — this component has no story.
+
+### TooltipProvider
+
+**Props**
+
+- `class`: `unknown`
+- `content`: `TooltipContentProps` — Default settings that will be used by all tooltip components.
+- `delayDuration`: `number` — default `0` — The duration from when the pointer enters the trigger until the tooltip gets opened.
+- `disableClosingTrigger`: `boolean` — When `true`, clicking on trigger will not close the content.
+- `disabled`: `boolean` — When `true`, disable tooltip
+- `disableHoverableContent`: `boolean` — When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.
+- `ignoreNonKeyboardFocus`: `boolean` — Prevent the tooltip from opening if the focus did not come from the keyboard by matching against the `:focus-visible` selector. This is useful if you want to avoid opening it when switching browser tabs or closing a dialog.
+- `skipDelayDuration`: `number` — How much time a user has to enter another trigger without incurring a delay again.
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Tooltip`, `TooltipContent`, `TooltipRoot`, `TooltipTrigger`
+
+**Example:** none — this component has no story.
+
+### TooltipRoot
+
+**Props**
+
+- `class`: `unknown`
+- `defaultOpen`: `boolean` — The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state.
+- `delayDuration`: `number` — Override the duration given to the `Provider` to customise the open delay for a specific tooltip.
+- `disableClosingTrigger`: `boolean` — When `true`, clicking on trigger will not close the content.
+- `disabled`: `boolean` — When `true`, disable tooltip
+- `disableHoverableContent`: `boolean` — Prevents Tooltip.Content from remaining open when hovering. Disabling this has accessibility consequences. Inherits from Tooltip.Provider.
+- `ignoreNonKeyboardFocus`: `boolean` — Prevent the tooltip from opening if the focus did not come from the keyboard by matching against the `:focus-visible` selector. This is useful if you want to avoid opening it when switching browser tabs or closing a dialog.
+- `open`: `boolean` — The controlled open state of the tooltip.
+
+**Events**
+
+- `update:open`: `[value: boolean]`
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Tooltip`, `TooltipContent`, `TooltipProvider`, `TooltipTrigger`
+
+**Example:** none — this component has no story.
+
+### TooltipTrigger
+
+**Props**
+
+- `as`: `AsTag | Component` — Element or component to render as.
+- `asChild`: `boolean` — Render the child element instead of this component's own, merging props onto it.
+- `class`: `unknown`
+- `reference`: `ReferenceElement` — The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
+
+**Slots**
+
+- `default`
+
+**Composes with:** `Tooltip`, `TooltipContent`, `TooltipProvider`, `TooltipRoot`
+
+**Example:** none — this component has no story.