chore(components): improve tsdoc

src/runtime/components/Alert.vue

@@ -25,8 +25,18 @@ export interface AlertProps {
    */
   icon?: string
   avatar?: AvatarProps
+  /**
+   * @defaultValue 'primary'
+   */
   color?: AlertVariants['color']
+  /**
+   * @defaultValue 'solid'
+   */
   variant?: AlertVariants['variant']
+  /**
+   * The orientation between the content and the actions.
+   * @defaultValue 'vertical'
+   */
   orientation?: AlertVariants['orientation']
   /**
    * Display a list of actions:

src/runtime/components/Avatar.vue

@@ -24,6 +24,9 @@ export interface AvatarProps {
    */
   icon?: string
   text?: string
+  /**
+   * @defaultValue 'md'
+   */
   size?: AvatarVariants['size']
   class?: any
   ui?: Partial<typeof avatar.slots>

src/runtime/components/AvatarGroup.vue

@@ -17,6 +17,9 @@ export interface AvatarGroupProps {
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'md'
+   */
   size?: AvatarGroupVariants['size']
   /**
    * The maximum number of avatars to display.

src/runtime/components/Badge.vue

@@ -20,8 +20,17 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
    */
   as?: any
   label?: string | number
+  /**
+   * @defaultValue 'primary'
+   */
   color?: BadgeVariants['color']
+  /**
+   * @defaultValue 'solid'
+   */
   variant?: BadgeVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: BadgeVariants['size']
   class?: any
   ui?: Partial<typeof badge.slots>

src/runtime/components/Breadcrumb.vue

@@ -12,6 +12,9 @@ const breadcrumb = tv({ extend: tv(theme), ...(appConfigBreadcrumb.ui?.breadcrum
 
 export interface BreadcrumbItem extends Omit<LinkProps, 'raw' | 'custom'> {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
   slot?: string

src/runtime/components/Button.vue

@@ -17,8 +17,17 @@ type ButtonVariants = VariantProps<typeof button>
 
 export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'raw' | 'custom'> {
   label?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: ButtonVariants['color']
+  /**
+   * @defaultValue 'solid'
+   */
   variant?: ButtonVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: ButtonVariants['size']
   /** Render the button with equal padding on all sides. */
   square?: boolean

src/runtime/components/ButtonGroup.vue

@@ -17,6 +17,9 @@ export interface ButtonGroupProps {
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'md'
+   */
   size?: ButtonGroupVariants['size']
   /**
    * The orientation the buttons are laid out.

src/runtime/components/Calendar.vue

@@ -50,7 +50,13 @@ export interface CalendarProps<R extends boolean, M extends boolean> extends Omi
    * @IconifyIcon
    */
   prevMonthIcon?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: CalendarVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: CalendarVariants['size']
   /** Whether or not a range of dates can be selected */
   range?: R & boolean

src/runtime/components/Card.vue

@@ -17,6 +17,9 @@ export interface CardProps {
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'outline'
+   */
   variant?: CardVariants['variant']
   class?: any
   ui?: Partial<typeof card.slots>

src/runtime/components/Carousel.vue

@@ -59,6 +59,10 @@ export interface CarouselProps<T> extends Omit<EmblaOptionsType, 'axis' | 'conta
    * @defaultValue false
    */
   dots?: boolean
+  /**
+   * The orientation of the carousel.
+   * @defaultValue 'horizontal'
+   */
   orientation?: CarouselVariants['orientation']
   items?: T[]
   /**

src/runtime/components/Checkbox.vue

@@ -20,11 +20,18 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
   as?: any
   label?: string
   description?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: CheckboxVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: CheckboxVariants['size']
   /**
    * The icon displayed when checked.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   icon?: string
   /**

src/runtime/components/Chip.vue

@@ -19,8 +19,18 @@ export interface ChipProps {
   as?: any
   /** Display some text inside the chip. */
   text?: string | number
+  /**
+   * @defaultValue 'primary'
+   */
   color?: ChipVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: ChipVariants['size']
+  /**
+   * The position of the chip.
+   * @defaultValue 'top-right'
+   */
   position?: ChipVariants['position']
   /** When `true`, keep the chip inside the component for rounded elements. */
   inset?: boolean

src/runtime/components/ColorPicker.vue

@@ -63,6 +63,9 @@ export type ColorPickerProps = {
    * @defaultValue 'hex'
    */
   format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab'
+  /**
+   * @defaultValue 'md'
+   */
   size?: ColorPickerVariants['size']
   class?: any
   ui?: Partial<typeof colorPicker.slots>

src/runtime/components/CommandPalette.vue

@@ -18,6 +18,9 @@ export interface CommandPaletteItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
   prefix?: string
   label?: string
   suffix?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
   chip?: ChipProps
@@ -58,6 +61,7 @@ export interface CommandPaletteProps<G, T> extends Pick<ListboxRootProps, 'multi
   /**
    * The icon displayed in the input.
    * @defaultValue appConfig.ui.icons.search
+   * @IconifyIcon
    */
   icon?: string
   /**

src/runtime/components/ContextMenu.vue

@@ -16,6 +16,9 @@ type ContextMenuVariants = VariantProps<typeof contextMenu>
 
 export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   color?: ContextMenuVariants['color']
   avatar?: AvatarProps
@@ -38,6 +41,9 @@ export interface ContextMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custo
 }
 
 export interface ContextMenuProps<T> extends Omit<ContextMenuRootProps, 'dir'> {
+  /**
+   * @defaultValue 'md'
+   */
   size?: ContextMenuVariants['size']
   items?: T[] | T[][]
   /**

src/runtime/components/DropdownMenu.vue

@@ -16,6 +16,9 @@ type DropdownMenuVariants = VariantProps<typeof dropdownMenu>
 
 export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'> {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   color?: DropdownMenuVariants['color']
   avatar?: AvatarProps
@@ -38,6 +41,9 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
 }
 
 export interface DropdownMenuProps<T> extends Omit<DropdownMenuRootProps, 'dir'> {
+  /**
+   * @defaultValue 'md'
+   */
   size?: DropdownMenuVariants['size']
   items?: T[] | T[][]
   /**

src/runtime/components/FormField.vue

@@ -26,6 +26,9 @@ export interface FormFieldProps {
   help?: string
   error?: string | boolean
   hint?: string
+  /**
+   * @defaultValue 'md'
+   */
   size?: FormFieldVariants['size']
   required?: boolean
   eagerValidation?: boolean

src/runtime/components/Input.vue

@@ -26,8 +26,17 @@ export interface InputProps extends UseComponentIconsProps {
   type?: InputHTMLAttributes['type']
   /** The placeholder text when the input is empty. */
   placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: InputVariants['color']
+  /**
+   * @defaultValue 'outline'
+   */
   variant?: InputVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: InputVariants['size']
   required?: boolean
   autocomplete?: InputHTMLAttributes['autocomplete']

src/runtime/components/InputMenu.vue

@@ -16,6 +16,9 @@ const inputMenu = tv({ extend: tv(theme), ...(appConfigInputMenu.ui?.inputMenu |
 
 export interface InputMenuItem {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
   chip?: ChipProps
@@ -40,8 +43,17 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
   type?: InputHTMLAttributes['type']
   /** The placeholder text when the input is empty. */
   placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: InputMenuVariants['color']
+  /**
+   * @defaultValue 'outline'
+   */
   variant?: InputMenuVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: InputMenuVariants['size']
   required?: boolean
   autofocus?: boolean

src/runtime/components/Kbd.vue

@@ -19,7 +19,13 @@ export interface KbdProps {
    */
   as?: any
   value?: KbdKey | string
+  /**
+   * @defaultValue 'outline'
+   */
   variant?: KbdVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: KbdVariants['size']
   class?: any
 }

src/runtime/components/NavigationMenu.vue

@@ -19,6 +19,9 @@ export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'child
 
 export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'custom'>, Pick<CollapsibleRootProps, 'defaultOpen' | 'open'> {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
   /**
@@ -64,7 +67,13 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'm
    */
   externalIcon?: boolean | string
   items?: T
+  /**
+   * @defaultValue 'primary'
+   */
   color?: NavigationMenuVariants['color']
+  /**
+   * @defaultValue 'pill'
+   */
   variant?: NavigationMenuVariants['variant']
   /**
    * The orientation of the menu.
@@ -79,6 +88,9 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'm
   collapsed?: boolean
   /** Display a line next to the active item. */
   highlight?: boolean
+  /**
+   * @defaultValue 'primary'
+   */
   highlightColor?: NavigationMenuVariants['highlightColor']
   /** The content of the menu. */
   content?: Omit<NavigationMenuContentProps, 'as' | 'asChild' | 'forceMount'>

src/runtime/components/Pagination.vue

@@ -44,6 +44,7 @@ export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defa
   /**
    * The icon to use for the ellipsis control.
    * @defaultValue appConfig.ui.icons.ellipsis
+   * @IconifyIcon
    */
   ellipsisIcon?: string
   /**

src/runtime/components/PinInput.vue

@@ -19,9 +19,22 @@ export interface PinInputProps extends Pick<PinInputRootProps, 'defaultValue' |
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'primary'
+   */
   color?: PinInputVariants['color']
+  /**
+   * @defaultValue 'outline'
+   */
   variant?: PinInputVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: PinInputVariants['size']
+  /**
+   * The number of input fields.
+   * @defaultValue 5
+   */
   length?: number | string
   highlight?: boolean
   class?: any

src/runtime/components/Progress.vue

@@ -25,13 +25,23 @@ export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' |
   status?: boolean
   /** Whether the progress is visually inverted. */
   inverted?: boolean
+  /**
+   * @defaultValue 'md'
+   */
   size?: ProgressVariants['size']
+  /**
+   * @defaultValue 'primary'
+   */
   color?: ProgressVariants['color']
   /**
    * The orientation of the progress bar.
    * @defaultValue 'horizontal'
    */
   orientation?: ProgressVariants['orientation']
+  /**
+   * The animation of the progress bar.
+   * @defaultValue 'carousel'
+   */
   animation?: ProgressVariants['animation']
   class?: any
   ui?: Partial<typeof progress.slots>

src/runtime/components/RadioGroup.vue

@@ -42,7 +42,13 @@ export interface RadioGroupProps<T> extends Pick<RadioGroupRootProps, 'defaultVa
    */
   descriptionKey?: string
   items?: T[]
+  /**
+   * @defaultValue 'md'
+   */
   size?: RadioGroupVariants['size']
+  /**
+   * @defaultValue 'primary'
+   */
   color?: RadioGroupVariants['color']
   /**
    * The orientation the radio buttons are laid out.

src/runtime/components/Select.vue

@@ -15,6 +15,9 @@ const select = tv({ extend: tv(theme), ...(appConfigSelect.ui?.select || {}) })
 
 export interface SelectItem {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
   chip?: ChipProps
@@ -33,8 +36,17 @@ export interface SelectProps<T extends MaybeArrayOfArrayItem<I>, I extends Maybe
   id?: string
   /** The placeholder text when the select is empty. */
   placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: SelectVariants['color']
+  /**
+   * @defaultValue 'outline'
+   */
   variant?: SelectVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: SelectVariants['size']
   /**
    * The icon displayed to open the menu.

src/runtime/components/SelectMenu.vue

@@ -15,6 +15,9 @@ const selectMenu = tv({ extend: tv(theme), ...(appConfigSelectMenu.ui?.selectMen
 
 export interface SelectMenuItem {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
   chip?: ChipProps
@@ -40,8 +43,17 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
    * @defaultValue true
    */
   searchInput?: boolean | InputProps
+  /**
+   * @defaultValue 'primary'
+   */
   color?: SelectMenuVariants['color']
+  /**
+   * @defaultValue 'outline'
+   */
   variant?: SelectMenuVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: SelectMenuVariants['size']
   required?: boolean
   /**

src/runtime/components/Separator.vue

@@ -21,12 +21,24 @@ export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
   as?: any
   /** Display a label in the middle. */
   label?: string
-  /** Display an icon in the middle. */
+  /**
+   * Display an icon in the middle.
+   * @IconifyIcon
+   */
   icon?: string
   /** Display an avatar in the middle. */
   avatar?: AvatarProps
+  /**
+   * @defaultValue 'neutral'
+   */
   color?: SeparatorVariants['color']
+  /**
+   * @defaultValue 'xs'
+   */
   size?: SeparatorVariants['size']
+  /**
+   * @defaultValue 'solid'
+   */
   type?: SeparatorVariants['type']
   /**
    * The orientation of the separator.

src/runtime/components/Slideover.vue

@@ -28,6 +28,10 @@ export interface SlideoverProps extends DialogRootProps {
    * @defaultValue true
    */
   transition?: boolean
+  /**
+   * The side of the slideover.
+   * @defaultValue 'right'
+   */
   side?: SlideoverVariants['side']
   /**
    * Render the slideover in a portal.

src/runtime/components/Slider.vue

@@ -18,7 +18,13 @@ export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' |
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'md'
+   */
   size?: SliderVariants['size']
+  /**
+   * @defaultValue 'primary'
+   */
   color?: SliderVariants['color']
   /**
    * The orientation of the slider.

src/runtime/components/Stepper.vue

@@ -18,6 +18,9 @@ export interface StepperItem {
   value?: string | number
   title?: string
   description?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   content?: string
   disabled?: boolean
@@ -30,8 +33,18 @@ export interface StepperProps<T extends StepperItem> extends Pick<StepperRootPro
    */
   as?: any
   items: T[]
+  /**
+   * @defaultValue 'md'
+   */
   size?: StepperVariants['size']
+  /**
+   * @defaultValue 'primary'
+   */
   color?: StepperVariants['color']
+  /**
+   * The orientation of the stepper.
+   * @defaultValue 'horizontal'
+   */
   orientation?: StepperVariants['orientation']
   /**
    * The value of the step that should be active when initially rendered. Use when you do not need to control the state of the steps.

src/runtime/components/Switch.vue

@@ -19,7 +19,13 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'primary'
+   */
   color?: SwitchVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: SwitchVariants['size']
   /** When `true`, the loading icon will be displayed. */
   loading?: boolean

src/runtime/components/Table.vue

@@ -82,7 +82,13 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
   sticky?: boolean
   /** Whether the table should be in loading state. */
   loading?: boolean
+  /**
+   * @defaultValue 'primary'
+   */
   loadingColor?: TableVariants['loadingColor']
+  /**
+   * @defaultValue 'carousel'
+   */
   loadingAnimation?: TableVariants['loadingAnimation']
   /**
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)

src/runtime/components/Tabs.vue

@@ -14,6 +14,9 @@ const tabs = tv({ extend: tv(theme), ...(appConfigTabs.ui?.tabs || {}) })
 
 export interface TabsItem {
   label?: string
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
   slot?: string
@@ -32,8 +35,17 @@ export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defa
    */
   as?: any
   items?: T[]
+  /**
+   * @defaultValue 'primary'
+   */
   color?: TabsVariants['color']
+  /**
+   * @defaultValue 'pill'
+   */
   variant?: TabsVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: TabsVariants['size']
   /**
    * The orientation of the tabs.

src/runtime/components/Textarea.vue

@@ -22,8 +22,17 @@ export interface TextareaProps {
   name?: string
   /** The placeholder text when the textarea is empty. */
   placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
   color?: TextareaVariants['color']
+  /**
+   * @defaultValue 'outline'
+   */
   variant?: TextareaVariants['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: TextareaVariants['size']
   required?: boolean
   autofocus?: boolean

src/runtime/components/Toast.vue

@@ -22,9 +22,19 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
   as?: any
   title?: StringOrVNode
   description?: StringOrVNode
+  /**
+   * @IconifyIcon
+   */
   icon?: string
   avatar?: AvatarProps
+  /**
+   * @defaultValue 'primary'
+   */
   color?: ToastVariants['color']
+  /**
+   * The orientation between the content and the actions.
+   * @defaultValue 'vertical'
+   */
   orientation?: ToastVariants['orientation']
   /**
    * Display a list of actions:

src/runtime/components/Toaster.vue

@@ -13,6 +13,10 @@ const toaster = tv({ extend: tv(theme), ...(appConfigToaster.ui?.toaster || {})
 type ToasterVariants = VariantProps<typeof toaster>
 
 export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'> {
+  /**
+   * The position on the screen to display the toasts.
+   * @defaultValue 'bottom-right'
+   */
   position?: ToasterVariants['position']
   /**
    * Expand the toasts to show multiple toasts at once.

src/runtime/components/Tree.vue

@@ -38,7 +38,13 @@ export interface TreeProps<T extends TreeItem, M extends boolean = false, K exte
    * @defaultValue 'ul'
    */
   as?: any
+  /**
+   * @defaultValue 'primary'
+   */
   color?: TreeVariants['color']
+  /**
+   * @defaultValue 'md'
+   */
   size?: TreeVariants['size']
   /**
    * The key used to get the value from the item.