chore(components): improve JSDoc

src/runtime/components/Accordion.vue

@@ -20,7 +20,12 @@ export interface AccordionItem extends Partial<Pick<AccordionItemProps, 'disable
 
 export interface AccordionProps<T> extends Omit<AccordionRootProps, 'asChild' | 'dir' | 'orientation'> {
   items?: T[]
+  /**
+   * The icon displayed on the right side of the trigger.
+   * @defaultValue `appConfig.ui.icons.chevronDown`
+   */
   trailingIcon?: string
+  /** The content of the accordion. */
   content?: Omit<AccordionContentProps, 'asChild'>
   class?: any
   ui?: Partial<typeof accordion.slots>

src/runtime/components/Alert.vue

@@ -20,6 +20,11 @@ export interface AlertProps extends Omit<PrimitiveProps, 'asChild'> {
   avatar?: AvatarProps
   color?: AlertVariants['color']
   variant?: AlertVariants['variant']
+  /**
+   * Display a list of actions:
+   * - under the title and description if multiline
+   * - next to the close button if not multiline
+   */
   actions?: ButtonProps[]
   /**
    * Display a close button to dismiss the alert.

src/runtime/components/AvatarGroup.vue

@@ -13,6 +13,9 @@ type AvatarGroupVariants = VariantProps<typeof avatarGroup>
 
 export interface AvatarGroupProps extends Omit<PrimitiveProps, 'asChild'> {
   size?: AvatarGroupVariants['size']
+  /**
+   * The maximum number of avatars to display.
+   */
   max?: number | string
   class?: any
   ui?: Partial<typeof avatarGroup.slots>

src/runtime/components/Breadcrumb.vue

@@ -20,6 +20,10 @@ export interface BreadcrumbItem extends Omit<LinkProps, 'custom'> {
 
 export interface BreadcrumbProps<T> extends Omit<PrimitiveProps, 'asChild'> {
   items?: T[]
+  /**
+   * The icon to use as a separator.
+   * @defaultValue `appConfig.ui.icons.chevronRight`
+   */
   separatorIcon?: string
   class?: any
   ui?: Partial<typeof breadcrumb.slots>

src/runtime/components/Button.vue

@@ -17,7 +17,9 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'cu
   color?: ButtonVariants['color']
   variant?: ButtonVariants['variant']
   size?: ButtonVariants['size']
+  /** Render the button with equal padding on all sides. */
   square?: boolean
+  /** Render the button full width. */
   block?: boolean
   class?: any
   ui?: Partial<typeof button.slots>

src/runtime/components/ButtonGroup.vue

@@ -14,6 +14,10 @@ type ButtonGroupVariants = VariantProps<typeof buttonGroup>
 
 export interface ButtonGroupProps extends Omit<PrimitiveProps, 'asChild'> {
   size?: ButtonProps['size']
+  /**
+   * The orientation the buttons are laid out.
+   * @defaultValue `'horizontal'`
+   */
   orientation?: ButtonGroupVariants['orientation']
   class?: any
 }

src/runtime/components/Checkbox.vue

@@ -28,6 +28,7 @@ export interface CheckboxProps extends Omit<CheckboxRootProps, 'asChild' | 'chec
    * @defaultValue `appConfig.ui.icons.minus`
    */
   indeterminateIcon?: string
+  /** The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state. */
   defaultValue?: boolean
   class?: any
   ui?: Partial<typeof checkbox.slots>

src/runtime/components/ContextMenu.vue

@@ -31,7 +31,12 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'custom'>, Pic
 
 export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'>, Pick<ContextMenuTriggerProps, 'disabled'> {
   items?: T[] | T[][]
+  /** The content of the menu. */
   content?: Omit<ContextMenuContentProps, 'asChild' | 'forceMount'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue `true`
+   */
   portal?: boolean
   class?: any
   ui?: Partial<typeof contextMenu.slots>

src/runtime/components/Drawer.vue

@@ -13,8 +13,13 @@ const drawer = tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })
 export interface DrawerProps extends Omit<DrawerRootProps, 'asChild'> {
   title?: string
   description?: string
+  /** The content of the drawer. */
   content?: Omit<DialogContentProps, 'asChild' | 'forceMount'>
   overlay?: boolean
+  /**
+   * Render the drawer in a portal.
+   * @defaultValue `true`
+   */
   portal?: boolean
   class?: any
   ui?: Partial<typeof drawer.slots>

src/runtime/components/DropdownMenu.vue

@@ -31,8 +31,20 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'custom'>, Pi
 
 export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'>, Pick<DropdownMenuTriggerProps, 'disabled'> {
   items?: T[] | T[][]
+  /**
+   * The content of the menu.
+   * @defaultValue `{ side: 'bottom', sideOffset: 8 }`
+   */
   content?: Omit<DropdownMenuContentProps, 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue `false`
+   */
   arrow?: boolean | Omit<DropdownMenuArrowProps, 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue `true`
+   */
   portal?: boolean
   class?: any
   ui?: Partial<typeof dropdownMenu.slots>

src/runtime/components/InputMenu.vue

@@ -54,8 +54,20 @@ export interface InputMenuProps<T> extends Omit<ComboboxRootProps<T>, 'asChild'
    * @defaultValue `appConfig.ui.icons.close`
    */
   deleteIcon?: string
+  /**
+   * The content of the menu.
+   * @defaultValue `{ side: 'bottom', sideOffset: 8, position: 'popper' }`
+   */
   content?: Omit<ComboboxContentProps, 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue `false`
+   */
   arrow?: boolean | Omit<ComboboxArrowProps, 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue `true`
+   */
   portal?: boolean
   /**
    * Whether to filter items or not, can be an array of fields to filter.
@@ -193,9 +205,9 @@ onMounted(() => {
         v-slot="{ modelValue: tags }: { modelValue: AcceptableValue[] }"
         :model-value="(modelValue as string[])"
         :disabled="disabled"
-        @blur="emitFormBlur()"
         delimiter=""
         as-child
+        @blur="emitFormBlur()"
       >
         <TagsInputItem v-for="(item, index) in tags" :key="index" :value="(item as string)" :class="ui.tagsItem()">
           <TagsInputItemText :class="ui.tagsItemText()">

src/runtime/components/Modal.vue

@@ -13,10 +13,15 @@ const modal = tv({ extend: tv(theme), ...(appConfig.ui?.modal || {}) })
 export interface ModalProps extends DialogRootProps {
   title?: string
   description?: string
+  /** The content of the modal. */
   content?: Omit<DialogContentProps, 'asChild' | 'forceMount'>
   overlay?: boolean
   transition?: boolean
   fullscreen?: boolean
+  /**
+   * Render the modal in a portal.
+   * @defaultValue `true`
+   */
   portal?: boolean
   /**
    * Display a close button to dismiss the modal.

src/runtime/components/NavigationMenu.vue

@@ -31,7 +31,7 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'custom'>, Pick<Navi
 
 type NavigationMenuVariants = VariantProps<typeof navigationMenu>
 
-export interface NavigationMenuProps<T> extends Omit<NavigationMenuRootProps, 'asChild' | 'dir'> {
+export interface NavigationMenuProps<T> extends Omit<NavigationMenuRootProps, 'asChild' | 'dir' | 'orientation'> {
   /**
    * The icon displayed to open the menu.
    * @defaultValue `appConfig.ui.icons.chevronDown`
@@ -41,11 +41,19 @@ export interface NavigationMenuProps<T> extends Omit<NavigationMenuRootProps, 'a
   color?: NavigationMenuVariants['color']
   variant?: NavigationMenuVariants['variant']
   /**
-   * Display a line next to the active item.
+   * The orientation of the menu.
+   * @defaultValue `'horizontal'`
    */
+  orientation?: NavigationMenuRootProps['orientation']
+  /** Display a line next to the active item. */
   highlight?: boolean
   highlightColor?: NavigationMenuVariants['highlightColor']
+  /** The content of the menu. */
   content?: Omit<NavigationMenuContentProps, 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue `false`
+   */
   arrow?: boolean
   class?: any
   ui?: Partial<typeof navigationMenu.slots>

src/runtime/components/Pagination.vue

@@ -12,19 +12,63 @@ const appConfig = _appConfig as AppConfig & { ui: { pagination: Partial<typeof t
 const pagination = tv({ extend: tv(theme), ...(appConfig.ui?.pagination || {}) })
 
 export interface PaginationProps extends Omit<PaginationRootProps, 'asChild'> {
+  /**
+   * The icon to use for the first page control.
+   * @defaultValue `appConfig.ui.icons.chevronDoubleLeft`
+   */
   firstIcon?: string
+  /**
+   * The icon to use for the previous page control.
+   * @defaultValue `appConfig.ui.icons.chevronLeft`
+   */
   prevIcon?: string
+  /**
+   * The icon to use for the next page control.
+   * @defaultValue `appConfig.ui.icons.chevronRight`
+   */
   nextIcon?: string
+  /**
+   * The icon to use for the last page control.
+   * @defaultValue `appConfig.ui.icons.chevronDoubleRight`
+   */
   lastIcon?: string
+  /**
+   * The icon to use for the ellipsis control.
+   * @defaultValue `appConfig.ui.icons.ellipsis`
+   */
   ellipsisIcon?: string
+  /**
+   * The color of the pagination controls.
+   * @defaultValue `'white'`
+   */
   color?: ButtonProps['color']
+  /**
+   * The variant of the pagination controls.
+   * @defaultValue `'solid'`
+   */
   variant?: ButtonProps['variant']
+  /**
+   * The color of the active pagination control.
+   * @defaultValue `'black'`
+   */
   activeColor?: ButtonProps['color']
+  /**
+   * The variant of the active pagination control.
+   * @defaultValue `'solid'`
+   */
   activeVariant?: ButtonProps['variant']
+  /**
+   * Whether to show the first, previous, next, and last controls.
+   * @defaultValue `true`
+   */
   showControls?: boolean
   size?: ButtonProps['size']
-  class?: any
+  /**
+   * A function to render page controls as links.
+   * @param page The page number to navigate to.
+   */
   to?: (page: number) => RouteLocationRaw
+  class?: any
   ui?: Partial<typeof pagination.slots>
 }
 

src/runtime/components/Popover.vue

@@ -15,8 +15,20 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
    * @defaultValue `"click"`
    */
   mode?: 'click' | 'hover'
+  /**
+   * The content of the popover.
+   * @defaultValue `{ side: 'bottom', sideOffset: 8 }`
+   */
   content?: Omit<PopoverContentProps, 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the popover.
+   * @defaultValue `false`
+   */
   arrow?: boolean | Omit<PopoverArrowProps, 'asChild'>
+  /**
+   * Render the popover in a portal.
+   * @defaultValue `true`
+   */
   portal?: boolean
   class?: any
   ui?: Partial<typeof popover.slots>

src/runtime/components/Progress.vue

@@ -17,6 +17,10 @@ export interface ProgressProps extends Omit<ProgressRootProps, 'asChild' | 'max'
   inverted?: boolean
   size?: ProgressVariants['size']
   color?: ProgressVariants['color']
+  /**
+   * The orientation of the progress bar.
+   * @defaultValue `'horizontal'`
+   */
   orientation?: ProgressVariants['orientation']
   animation?: ProgressVariants['animation']
   class?: any

src/runtime/components/RadioGroup.vue

@@ -17,12 +17,17 @@ export interface RadioGroupItem extends Pick<RadioGroupItemProps, 'disabled' | '
   description?: string
 }
 
-export interface RadioGroupProps<T> extends Omit<RadioGroupRootProps, 'asChild' | 'dir'> {
+export interface RadioGroupProps<T> extends Omit<RadioGroupRootProps, 'asChild' | 'dir' | 'orientation'> {
   legend?: string
   items?: T[]
-  class?: any
   size?: RadioGroupVariants['size']
   color?: RadioGroupVariants['color']
+  /**
+   * The orientation the radio buttons are laid out.
+   * @defaultValue `'vertical'`
+   */
+  orientation?: RadioGroupRootProps['orientation']
+  class?: any
   ui?: Partial<typeof radioGroup.slots>
 }
 
@@ -43,7 +48,9 @@ import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator, Label, useForwardP
 import { reactivePick } from '@vueuse/core'
 import { useId, useFormField } from '#imports'
 
-const props = withDefaults(defineProps<RadioGroupProps<T>>(), { orientation: 'vertical' })
+const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
+  orientation: 'vertical'
+})
 const emits = defineEmits<RadioGroupEmits>()
 const slots = defineSlots<RadioGroupSlots<T>>()
 

src/runtime/components/Select.vue

@@ -43,8 +43,20 @@ export interface SelectProps<T> extends Omit<SelectRootProps, 'asChild' | 'dir'>
    * @defaultValue `appConfig.ui.icons.check`
    */
   selectedIcon?: string
+  /**
+   * The content of the menu.
+   * @defaultValue `{ side: 'bottom', sideOffset: 8, position: 'popper' }`
+   */
   content?: Omit<SelectContentProps, 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue `false`
+   */
   arrow?: boolean | Omit<SelectArrowProps, 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue `true`
+   */
   portal?: boolean
   items?: T[] | T[][]
   class?: any

src/runtime/components/SelectMenu.vue

@@ -46,8 +46,20 @@ export interface SelectMenuProps<T> extends Omit<ComboboxRootProps<T>, 'asChild'
    * @defaultValue `appConfig.ui.icons.check`
    */
   selectedIcon?: string
+  /**
+   * The content of the menu.
+   * @defaultValue `{ side: 'bottom', sideOffset: 8, position: 'popper' }`
+   */
   content?: Omit<ComboboxContentProps, 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue `false`
+   */
   arrow?: boolean | Omit<ComboboxArrowProps, 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue `true`
+   */
   portal?: boolean
   /**
    * Whether to filter items or not, can be an array of fields to filter.

src/runtime/components/Separator.vue

@@ -12,13 +12,21 @@ const separator = tv({ extend: tv(theme), ...(appConfig.ui?.separator || {}) })
 
 type SeparatorVariants = VariantProps<typeof separator>
 
-export interface SeparatorProps extends Omit<_SeparatorProps, 'asChild'> {
+export interface SeparatorProps extends Omit<_SeparatorProps, 'asChild' | 'orientation'> {
+  /** Display a label in the middle. */
   label?: string
+  /** Display an icon in the middle. */
   icon?: string
+  /** Display an avatar in the middle. */
   avatar?: AvatarProps
   color?: SeparatorVariants['color']
   size?: SeparatorVariants['size']
   type?: SeparatorVariants['type']
+  /**
+   * The orientation of the separator.
+   * @defaultValue `'horizontal'`
+   */
+  orientation?: _SeparatorProps['orientation']
   class?: any
   ui?: Partial<typeof separator.slots>
 }

src/runtime/components/Slideover.vue

@@ -15,10 +15,23 @@ type SlideoverVariants = VariantProps<typeof slideover>
 export interface SlideoverProps extends DialogRootProps {
   title?: string
   description?: string
+  /** The content of the slideover. */
   content?: Omit<DialogContentProps, 'asChild' | 'forceMount'>
+  /**
+   * Display an overlay behind the slideover.
+   * @defaultValue `true`
+   */
   overlay?: boolean
+  /**
+   * Open & close the slideover with a transition.
+   * @defaultValue `true`
+   */
   transition?: boolean
   side?: SlideoverVariants['side']
+  /**
+   * Render the slideover in a portal.
+   * @defaultValue `true`
+   */
   portal?: boolean
   /**
    * Display a close button to dismiss the slideover.

src/runtime/components/Slider.vue

@@ -11,9 +11,15 @@ const slider = tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) })
 
 type SliderVariants = VariantProps<typeof slider>
 
-export interface SliderProps extends Omit<SliderRootProps, 'asChild' | 'modelValue' | 'defaultValue' | 'dir'> {
+export interface SliderProps extends Omit<SliderRootProps, 'asChild' | 'modelValue' | 'defaultValue' | 'dir' | 'orientation'> {
   size?: SliderVariants['size']
   color?: SliderVariants['color']
+  /**
+   * The orientation of the slider.
+   * @defaultValue `'horizontal'`
+   */
+  orientation?: SliderRootProps['orientation']
+  /** The value of the slider when initially rendered. Use when you do not need to control the state of the slider. */
   defaultValue?: number | number[]
   class?: any
   ui?: Partial<typeof slider.slots>

src/runtime/components/Switch.vue

@@ -27,6 +27,7 @@ export interface SwitchProps extends Omit<SwitchRootProps, 'asChild' | 'checked'
   uncheckedIcon?: string
   label?: string
   description?: string
+  /** The state of the switch when it is initially rendered. Use when you do not need to control its state. */
   defaultValue?: boolean
   class?: any
   ui?: Partial<typeof switchTv.slots>

src/runtime/components/Tabs.vue

@@ -21,11 +21,20 @@ export interface TabsItem extends Partial<Pick<TabsTriggerProps, 'disabled' | 'v
 
 type TabsVariants = VariantProps<typeof tabs>
 
-export interface TabsProps<T> extends Omit<TabsRootProps, 'asChild'> {
+export interface TabsProps<T> extends Omit<TabsRootProps, 'asChild' | 'orientation'> {
   items?: T[]
   color?: TabsVariants['color']
   variant?: TabsVariants['variant']
   size?: TabsVariants['size']
+  /**
+   * The orientation of the tabs.
+   * @defaultValue `'horizontal'`
+   */
+  orientation?: TabsRootProps['orientation']
+  /**
+   * The content of the tabs, can be disabled to prevent rendering the content.
+   * @defaultValue `true`
+   */
   content?: boolean | Omit<TabsContentProps, 'asChild' | 'value'>
   class?: any
   ui?: Partial<typeof tabs.slots>

src/runtime/components/Toast.vue

@@ -19,6 +19,11 @@ export interface ToastProps extends Omit<ToastRootProps, 'asChild' | 'forceMount
   icon?: string
   avatar?: AvatarProps
   color?: ToastVariants['color']
+  /**
+   * Display a list of actions:
+   * - under the title and description if multiline
+   * - next to the close button if not multiline
+   */
   actions?: ButtonProps[]
   /**
    * Display a close button to dismiss the toast.

src/runtime/components/Toaster.vue

@@ -14,6 +14,10 @@ type ToasterVariants = VariantProps<typeof toaster>
 
 export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'> {
   position?: ToasterVariants['position']
+  /**
+   * Expand the toasts to show multiple toasts at once.
+   * @defaultValue `true`
+   */
   expand?: boolean
   class?: any
   ui?: Partial<typeof toaster.slots>

src/runtime/components/Tooltip.vue

@@ -11,10 +11,24 @@ const appConfig = _appConfig as AppConfig & { ui: { tooltip: Partial<typeof them
 const tooltip = tv({ extend: tv(theme), ...(appConfig.ui?.tooltip || {}) })
 
 export interface TooltipProps extends TooltipRootProps {
+  /** The text content of the tooltip. */
   text?: string
+  /** The keyboard keys to display in the tooltip. */
   kbds?: KbdProps['value'][] | KbdProps[]
+  /**
+   * The content of the tooltip.
+   * @defaultValue `{ side: 'bottom', sideOffset: 8 }`
+   */
   content?: Omit<TooltipContentProps, 'asChild'>
+  /**
+   * Display an arrow alongside the tooltip.
+   * @defaultValue `false`
+   */
   arrow?: boolean | Omit<TooltipArrowProps, 'asChild'>
+  /**
+   * Render the tooltip in a portal.
+   * @defaultValue `true`
+   */
   portal?: boolean
   class?: any
   ui?: Partial<typeof tooltip.slots>