@nuxt/ui 3.0.0-beta.2 → 3.0.0-beta.3

package/dist/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
@@ -49,17 +61,20 @@ export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends Ma
   /**
    * The icon displayed to open the menu.
    * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
    */
   trailingIcon?: string
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   selectedIcon?: string
   /**
    * The icon displayed to delete a tag.
    * Works only when `multiple` is `true`.
    * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
    */
   deleteIcon?: string
   /**
@@ -142,7 +157,7 @@ export interface InputMenuSlots<T, M extends boolean> {
 import { computed, ref, toRef, onMounted, toRaw } from 'vue'
 import { ComboboxRoot, ComboboxArrow, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxViewport, ComboboxEmpty, ComboboxGroup, ComboboxLabel, ComboboxSeparator, ComboboxItem, ComboboxItemIndicator, TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, useForwardPropsEmits, useFilter } from 'reka-ui'
 import { defu } from 'defu'
-import { isEqual } from 'ohash'
+import { isEqual } from 'ohash/utils'
 import { reactivePick, createReusableTemplate } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useButtonGroup } from '../composables/useButtonGroup'
@@ -171,7 +186,7 @@ const { t } = useLocale()
 const appConfig = useAppConfig()
 const { contains } = useFilter({ sensitivity: 'base' })
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur', 'highlightOnHover', 'ignoreFilter'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'highlightOnHover', 'ignoreFilter'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
 const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
 
@@ -340,6 +355,7 @@ defineExpose({
         v-slot="{ modelValue: tags }"
         :model-value="(modelValue as string[])"
         :disabled="disabled"
+        :required="required"
         delimiter=""
         as-child
         @blur="onBlur"
@@ -365,7 +381,6 @@ defineExpose({
             ref="inputRef"
             v-bind="{ ...$attrs, ...ariaAttrs }"
             :placeholder="placeholder"
-            :required="required"
             :class="ui.tagsInput({ class: props.ui?.tagsInput })"
             @keydown.enter.prevent
           />

package/dist/runtime/components/InputNumber.vue

@@ -40,6 +40,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   /**
    * The icon displayed to increment the value.
    * @defaultValue appConfig.ui.icons.plus
+   * @IconifyIcon
    */
   incrementIcon?: string
   /**
@@ -50,6 +51,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   /**
    * The icon displayed to decrement the value.
    * @defaultValue appConfig.ui.icons.minus
+   * @IconifyIcon
    */
   decrementIcon?: string
   autofocus?: boolean

package/dist/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
 }

package/dist/runtime/components/Link.vue

@@ -91,7 +91,7 @@ export interface LinkSlots {
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { isEqual, diff } from 'ohash'
+import { isEqual, diff } from 'ohash/utils'
 import { useForwardProps } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { useRoute } from '#imports'
@@ -124,11 +124,15 @@ const ui = computed(() => tv({
 function isPartiallyEqual(item1: any, item2: any) {
   const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
     if (q.type === 'added') {
-      filtered.push(q.key)
+      filtered.add(q.key)
     }
     return filtered
-  }, [] as string[])
-  return isEqual(item1, item2, { excludeKeys: key => diffedKeys.includes(key) })
+  }, new Set<string>())
+
+  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)))
+  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)))
+
+  return isEqual(item1Filtered, item2Filtered)
 }
 
 function isLinkActive({ route: linkRoute, isActive, isExactActive }: any) {

package/dist/runtime/components/Modal.vue

@@ -44,6 +44,7 @@ export interface ModalProps extends DialogRootProps {
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
    */
   closeIcon?: string
   /**

package/dist/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
   /**
@@ -26,6 +29,9 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
    * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
    */
   badge?: string | number | BadgeProps
+  /**
+   * @IconifyIcon
+   */
   trailingIcon?: string
   /**
    * The type of the item.
@@ -50,16 +56,24 @@ export interface NavigationMenuProps<T> extends Pick<NavigationMenuRootProps, 'm
   /**
    * The icon displayed to open the menu.
    * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
    */
   trailingIcon?: string
   /**
    * The icon displayed when the item is an external link.
    * Set to `false` to hide the external icon.
    * @defaultValue appConfig.ui.icons.external
+   * @IconifyIcon
    */
   externalIcon?: boolean | string
   items?: T
+  /**
+   * @defaultValue 'primary'
+   */
   color?: NavigationMenuVariants['color']
+  /**
+   * @defaultValue 'pill'
+   */
   variant?: NavigationMenuVariants['variant']
   /**
    * The orientation of the menu.
@@ -74,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'>

package/dist/runtime/components/Pagination.vue

@@ -20,31 +20,37 @@ export interface PaginationProps extends Partial<Pick<PaginationRootProps, 'defa
   /**
    * The icon to use for the first page control.
    * @defaultValue appConfig.ui.icons.chevronDoubleLeft
+   * @IconifyIcon
    */
   firstIcon?: string
   /**
    * The icon to use for the previous page control.
    * @defaultValue appConfig.ui.icons.chevronLeft
+   * @IconifyIcon
    */
   prevIcon?: string
   /**
    * The icon to use for the next page control.
    * @defaultValue appConfig.ui.icons.chevronRight
+   * @IconifyIcon
    */
   nextIcon?: string
   /**
    * The icon to use for the last page control.
    * @defaultValue appConfig.ui.icons.chevronDoubleRight
+   * @IconifyIcon
    */
   lastIcon?: string
   /**
    * The icon to use for the ellipsis control.
    * @defaultValue appConfig.ui.icons.ellipsis
+   * @IconifyIcon
    */
   ellipsisIcon?: string
   /**
    * The color of the pagination controls.
    * @defaultValue 'neutral'
+   * @IconifyIcon
    */
   color?: ButtonProps['color']
   /**
@@ -138,19 +144,19 @@ const ui = pagination()
 <template>
   <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })">
-      <PaginationFirst v-if="showControls || !!slots.first" as-child>
+      <PaginationFirst v-if="showControls || !!slots.first" as-child :class="ui.first({ class: props.ui?.first })">
         <slot name="first">
           <UButton :color="color" :variant="variant" :size="size" :icon="firstIcon" :to="to?.(1)" />
         </slot>
       </PaginationFirst>
-      <PaginationPrev v-if="showControls || !!slots.prev" as-child>
+      <PaginationPrev v-if="showControls || !!slots.prev" as-child :class="ui.prev({ class: props.ui?.prev })">
         <slot name="prev">
           <UButton :color="color" :variant="variant" :size="size" :icon="prevIcon" :to="page > 1 ? to?.(page - 1) : undefined" />
         </slot>
       </PaginationPrev>
 
       <template v-for="(item, index) in items">
-        <PaginationListItem v-if="item.type === 'page'" :key="index" as-child :value="item.value">
+        <PaginationListItem v-if="item.type === 'page'" :key="index" as-child :value="item.value" :class="ui.item({ class: props.ui?.item })">
           <slot name="item" v-bind="{ item, index, page, pageCount }">
             <UButton
               :color="page === item.value ? activeColor : color"
@@ -164,21 +170,21 @@ const ui = pagination()
           </slot>
         </PaginationListItem>
 
-        <PaginationEllipsis v-else :key="item.type" :index="index" as-child>
+        <PaginationEllipsis v-else :key="item.type" :index="index" as-child :class="ui.ellipsis({ class: props.ui?.ellipsis })">
           <slot name="ellipsis">
-            <UButton :color="color" :variant="variant" :size="size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" :class="ui.ellipsis({ class: props.ui?.ellipsis })" />
+            <UButton :color="color" :variant="variant" :size="size" :icon="ellipsisIcon || appConfig.ui.icons.ellipsis" />
           </slot>
         </PaginationEllipsis>
       </template>
 
-      <PaginationNext v-if="showControls || !!slots.next" as-child>
+      <PaginationNext v-if="showControls || !!slots.next" as-child :class="ui.next({ class: props.ui?.next })">
         <slot name="next">
-          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon" :to="page < pageCount ? to?.(pageCount) : undefined" />
+          <UButton :color="color" :variant="variant" :size="size" :icon="nextIcon" :to="page < pageCount ? to?.(page + 1) : undefined" />
         </slot>
       </PaginationNext>
-      <PaginationLast v-if="showControls || !!slots.last" as-child>
+      <PaginationLast v-if="showControls || !!slots.last" as-child :class="ui.last({ class: props.ui?.last })">
         <slot name="last">
-          <UButton :color="color" :variant="variant" :size="size" :icon="lastIcon" :to=" to?.(pageCount)" />
+          <UButton :color="color" :variant="variant" :size="size" :icon="lastIcon" :to="to?.(pageCount)" />
         </slot>
       </PaginationLast>
     </PaginationList>

package/dist/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

package/dist/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>

package/dist/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.

package/dist/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,17 +36,28 @@ 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.
    * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
    */
   trailingIcon?: string
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   selectedIcon?: string
   /**

package/dist/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,18 +43,29 @@ 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
   /**
    * The icon displayed to open the menu.
    * @defaultValue appConfig.ui.icons.chevronDown
+   * @IconifyIcon
    */
   trailingIcon?: string
   /**
    * The icon displayed when an item is selected.
    * @defaultValue appConfig.ui.icons.check
+   * @IconifyIcon
    */
   selectedIcon?: string
   /**
@@ -62,6 +76,7 @@ export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends M
   /**
    * Display an arrow alongside the menu.
    * @defaultValue false
+   * @IconifyIcon
    */
   arrow?: boolean | Omit<ComboboxArrowProps, 'as' | 'asChild'>
   /**
@@ -162,7 +177,7 @@ const { t } = useLocale()
 const appConfig = useAppConfig()
 const { contains } = useFilter({ sensitivity: 'base' })
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'multiple', 'resetSearchTermOnBlur', 'highlightOnHover'), emits)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'highlightOnHover'), emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
 const arrowProps = toRef(() => props.arrow as ComboboxArrowProps)
 const searchInputProps = toRef(() => defu(props.searchInput, { placeholder: t('selectMenu.search'), variant: 'none' }) as InputProps)

package/dist/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.

package/dist/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.
@@ -43,6 +47,7 @@ export interface SlideoverProps extends DialogRootProps {
   /**
    * The icon displayed in the close button.
    * @defaultValue appConfig.ui.icons.close
+   * @IconifyIcon
    */
   closeIcon?: string
   /**

package/dist/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.

package/dist/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.

package/dist/runtime/components/Switch.vue

@@ -19,18 +19,31 @@ 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
   /**
    * The icon when the `loading` prop is `true`.
    * @defaultValue appConfig.ui.icons.loading
+   * @IconifyIcon
    */
   loadingIcon?: string
-  /** Display an icon when the switch is checked. */
+  /**
+   * Display an icon when the switch is checked.
+   * @IconifyIcon
+   */
   checkedIcon?: string
-  /** Display an icon when the switch is unchecked. */
+  /**
+   * Display an icon when the switch is unchecked.
+   * @IconifyIcon
+   */
   uncheckedIcon?: string
   label?: string
   description?: string

package/dist/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)
@@ -155,6 +161,7 @@ type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, un
 export type TableSlots<T> = {
   expanded: (props: { row: Row<T> }) => any
   empty: (props?: {}) => any
+  loading: (props?: {}) => any
   caption: (props?: {}) => any
 } & DynamicHeaderSlots<T> & DynamicCellSlots<T>
 
@@ -169,7 +176,7 @@ import { reactiveOmit } from '@vueuse/core'
 import { useLocale } from '../composables/useLocale'
 
 const props = defineProps<TableProps<T>>()
-defineSlots<TableSlots<T>>()
+const slots = defineSlots<TableSlots<T>>()
 
 const { t } = useLocale()
 
@@ -353,7 +360,13 @@ defineExpose({
           </template>
         </template>
 
-        <tr v-else :class="ui.tr({ class: [props.ui?.tr] })">
+        <tr v-else-if="loading && !!slots['loading']">
+          <td :colspan="columns?.length" :class="ui.loading({ class: props.ui?.loading })">
+            <slot name="loading" />
+          </td>
+        </tr>
+
+        <tr v-else>
           <td :colspan="columns?.length" :class="ui.empty({ class: props.ui?.empty })">
             <slot name="empty">
               {{ t('table.noData') }}

package/dist/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.

package/dist/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