@nuxt/ui 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/runtime/components/Progress.vue

@@ -1,9 +1,47 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/progress";
-const appConfig = _appConfig;
-const progress = tv({ extend: tv(theme), ...appConfig.ui?.progress || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { ProgressRootProps, ProgressRootEmits } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/progress'
+
+const appConfig = _appConfig as AppConfig & { ui: { progress: Partial<typeof theme> } }
+
+const progress = tv({ extend: tv(theme), ...(appConfig.ui?.progress || {}) })
+
+type ProgressVariants = VariantProps<typeof progress>
+
+export interface ProgressProps extends Pick<ProgressRootProps, 'getValueLabel' | 'modelValue'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  /** The maximum progress value. */
+  max?: number | Array<any>
+  /** Display the current progress value. */
+  status?: boolean
+  /** Whether the progress is visually inverted. */
+  inverted?: boolean
+  size?: ProgressVariants['size']
+  color?: ProgressVariants['color']
+  /**
+   * The orientation of the progress bar.
+   * @defaultValue 'horizontal'
+   */
+  orientation?: ProgressVariants['orientation']
+  animation?: ProgressVariants['animation']
+  class?: any
+  ui?: Partial<typeof progress.slots>
+}
+
+export interface ProgressEmits extends ProgressRootEmits {}
+
+export type ProgressSlots = {
+  status(props: { percent?: number }): any
+} & {
+  [key: string]: (props: { step: number }) => any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/RadioGroup.vue

@@ -1,9 +1,57 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/radio-group";
-const appConfig = _appConfig;
-const radioGroup = tv({ extend: tv(theme), ...appConfig.ui?.radioGroup || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { RadioGroupRootProps, RadioGroupRootEmits, RadioGroupItemProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/radio-group'
+import type { AcceptableValue } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { radioGroup: Partial<typeof theme> } }
+
+const radioGroup = tv({ extend: tv(theme), ...(appConfig.ui?.radioGroup || {}) })
+
+type RadioGroupVariants = VariantProps<typeof radioGroup>
+
+export interface RadioGroupItem extends Pick<RadioGroupItemProps, 'disabled' | 'value'> {
+  label?: string
+  description?: string
+}
+
+export interface RadioGroupProps<T> extends Pick<RadioGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  legend?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the value.
+   * @defaultValue 'value'
+   */
+  valueKey?: string
+  items?: T[]
+  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>
+}
+
+export type RadioGroupEmits = RadioGroupRootEmits & {
+  change: [payload: Event]
+}
+
+type SlotProps<T> = (props: { item: T, modelValue?: string }) => any
+
+export interface RadioGroupSlots<T> {
+  legend(props?: {}): any
+  label: SlotProps<T>
+  description: SlotProps<T>
+}
 </script>
 
 <script setup lang="ts" generic="T extends RadioGroupItem | AcceptableValue">
@@ -21,7 +69,7 @@ const slots = defineSlots<RadioGroupSlots<T>>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
 
-const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props)
+const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props, { bind: false })
 const id = _id.value ?? useId()
 
 const ui = computed(() => radioGroup({

package/dist/runtime/components/Select.vue

@@ -1,9 +1,91 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/select";
-const appConfig = _appConfig;
-const select = tv({ extend: tv(theme), ...appConfig.ui?.select || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SelectRootProps, SelectRootEmits, SelectContentProps, SelectArrowProps, SelectItemProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/select'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps, ChipProps, InputProps } from '../types'
+import type { AcceptableValue, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { select: Partial<typeof theme> } }
+
+const select = tv({ extend: tv(theme), ...(appConfig.ui?.select || {}) })
+
+export interface SelectItem extends Pick<SelectItemProps, 'disabled' | 'value'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  chip?: ChipProps
+  /**
+   * The item type.
+   * @defaultValue 'item'
+   */
+  type?: 'label' | 'separator' | 'item'
+}
+
+type SelectVariants = VariantProps<typeof select>
+
+export interface SelectProps<T> extends Omit<SelectRootProps, 'dir'>, UseComponentIconsProps {
+  id?: string
+  /** The placeholder text when the select is empty. */
+  placeholder?: string
+  color?: SelectVariants['color']
+  variant?: SelectVariants['variant']
+  size?: SelectVariants['size']
+  /**
+   * The icon displayed to open the menu.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   */
+  trailingIcon?: string
+  /**
+   * The icon displayed when an item is selected.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  selectedIcon?: string
+  /**
+   * The content of the menu.
+   * @defaultValue { side: 'bottom', sideOffset: 8, position: 'popper' }
+   */
+  content?: Omit<SelectContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<SelectArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @defaultValue true
+   */
+  portal?: boolean
+  /**
+   * When `items` is an array of objects, select the field to use as the value.
+   * @defaultValue 'value'
+   */
+  valueKey?: string
+  items?: T[] | T[][]
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  class?: any
+  ui?: PartialString<typeof select.slots>
+}
+
+export type SelectEmits = SelectRootEmits & {
+  change: [payload: Event]
+  blur: [payload: FocusEvent]
+  focus: [payload: FocusEvent]
+}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export interface SelectSlots<T> {
+  'leading'(props: { modelValue: string, open: boolean, ui: any }): any
+  'trailing'(props: { modelValue: string, open: boolean, ui: any }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+}
 </script>
 
 <script setup lang="ts" generic="T extends SelectItem | AcceptableValue">

package/dist/runtime/components/SelectMenu.vue

@@ -1,9 +1,107 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/select-menu";
-const appConfig = _appConfig;
-const selectMenu = tv({ extend: tv(theme), ...appConfig.ui?.selectMenu || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { ComboboxRootProps, ComboboxRootEmits, ComboboxContentProps, ComboboxItemProps, ComboboxArrowProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/select-menu'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps, ChipProps, InputProps } from '../types'
+import type { AcceptableValue, ArrayOrWrapped, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { selectMenu: Partial<typeof theme> } }
+
+const selectMenu = tv({ extend: tv(theme), ...(appConfig.ui?.selectMenu || {}) })
+
+export interface SelectMenuItem extends Pick<ComboboxItemProps, 'disabled'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  chip?: ChipProps
+  /**
+   * The item type.
+   * @defaultValue 'item'
+   */
+  type?: 'label' | 'separator' | 'item'
+}
+
+type SelectMenuVariants = VariantProps<typeof selectMenu>
+
+export interface SelectMenuProps<T> extends Pick<ComboboxRootProps<T>, 'modelValue' | 'defaultValue' | 'selectedValue' | 'open' | 'defaultOpen' | 'searchTerm' | 'multiple' | 'disabled' | 'name' | 'resetSearchTermOnBlur'>, UseComponentIconsProps {
+  id?: string
+  /** The placeholder text when the select is empty. */
+  placeholder?: string
+  /**
+   * Wether to display the search input or not.
+   * @defaultValue true
+   */
+  search?: boolean
+  /** The placeholder text when the search input is empty. */
+  searchPlaceholder?: string
+  color?: SelectMenuVariants['color']
+  variant?: SelectMenuVariants['variant']
+  size?: SelectMenuVariants['size']
+  required?: boolean
+  /**
+   * The icon displayed to open the menu.
+   * @defaultValue appConfig.ui.icons.chevronDown
+   */
+  trailingIcon?: string
+  /**
+   * The icon displayed when an item is selected.
+   * @defaultValue appConfig.ui.icons.check
+   */
+  selectedIcon?: string
+  /**
+   * The content of the menu.
+   * @defaultValue { side: 'bottom', sideOffset: 8, position: 'popper' }
+   */
+  content?: Omit<ComboboxContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @defaultValue false
+   */
+  arrow?: boolean | Omit<ComboboxArrowProps, 'as' | '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.
+   * When `false`, items will not be filtered which is useful for custom filtering (useAsyncData, useFetch, etc.).
+   * @defaultValue ['label']
+   */
+  filter?: boolean | string[]
+  /**
+   * When `items` is an array of objects, select the field to use as the value instead of the object itself.
+   * @defaultValue undefined
+   */
+  valueKey?: keyof T
+  items?: T[] | T[][]
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  class?: any
+  ui?: PartialString<typeof selectMenu.slots>
+}
+
+export type SelectMenuEmits<T> = ComboboxRootEmits<T> & {
+  change: [payload: Event]
+  blur: [payload: FocusEvent]
+  focus: [payload: FocusEvent]
+}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type SelectMenuSlots<T> = {
+  'leading'(props: { modelValue: T, open: boolean, ui: any }): any
+  'default'(props: { modelValue: T, open: boolean }): any
+  'trailing'(props: { modelValue: T, open: boolean, ui: any }): any
+  'empty'(props: { searchTerm?: string }): any
+  'item': SlotProps<T>
+  'item-leading': SlotProps<T>
+  'item-label': SlotProps<T>
+  'item-trailing': SlotProps<T>
+}
 </script>
 
 <script setup lang="ts" generic="T extends SelectMenuItem | AcceptableValue">

package/dist/runtime/components/Separator.vue

@@ -1,9 +1,44 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/separator";
-const appConfig = _appConfig;
-const separator = tv({ extend: tv(theme), ...appConfig.ui?.separator || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SeparatorProps as _SeparatorProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/separator'
+import type { AvatarProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { separator: Partial<typeof theme> } }
+
+const separator = tv({ extend: tv(theme), ...(appConfig.ui?.separator || {}) })
+
+type SeparatorVariants = VariantProps<typeof separator>
+
+export interface SeparatorProps extends Pick<_SeparatorProps, 'decorative'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  /** 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>
+}
+
+export interface SeparatorSlots {
+  default(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Skeleton.vue

@@ -1,9 +1,21 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/skeleton";
-const appConfig = _appConfig;
-const skeleton = tv({ extend: tv(theme), ...appConfig.ui?.skeleton || {} });
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/skeleton'
+
+const appConfig = _appConfig as AppConfig & { ui: { skeleton: Partial<typeof theme> } }
+
+const skeleton = tv({ extend: tv(theme), ...(appConfig.ui?.skeleton || {}) })
+
+export interface SkeletonProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  class?: any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Slideover.vue

@@ -1,9 +1,70 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/slideover";
-const appConfig = _appConfig;
-const slideover = tv({ extend: tv(theme), ...appConfig.ui?.slideover || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { DialogRootProps, DialogRootEmits, DialogContentProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/slideover'
+import type { ButtonProps } from '../types'
+
+const appConfig = _appConfig as AppConfig & { ui: { slideover: Partial<typeof theme> } }
+
+const slideover = tv({ extend: tv(theme), ...(appConfig.ui?.slideover || {}) })
+
+type SlideoverVariants = VariantProps<typeof slideover>
+
+export interface SlideoverProps extends DialogRootProps {
+  title?: string
+  description?: string
+  /** The content of the slideover. */
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Render an overlay behind the slideover.
+   * @defaultValue true
+   */
+  overlay?: boolean
+  /**
+   * Animate the slideover when opening or closing.
+   * @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.
+   * `{ size: 'md', color: 'gray', variant: 'ghost' }`{lang="ts-type"}
+   * @defaultValue true
+   */
+  close?: ButtonProps | boolean
+  /**
+   * The icon displayed in the close button.
+   * @defaultValue appConfig.ui.icons.close
+   */
+  closeIcon?: string
+  /**
+   * When `true`, the slideover will not close when clicking outside.
+   * @defaultValue false
+   */
+  preventClose?: boolean
+  class?: any
+  ui?: Partial<typeof slideover.slots>
+}
+
+export interface SlideoverEmits extends DialogRootEmits {}
+
+export interface SlideoverSlots {
+  default(props: { open: boolean }): any
+  content(props?: {}): any
+  header(props?: {}): any
+  title(props?: {}): any
+  description(props?: {}): any
+  close(props: { ui: any }): any
+  body(props?: {}): any
+  footer(props?: {}): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Slider.vue

@@ -1,9 +1,39 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/slider";
-const appConfig = _appConfig;
-const slider = tv({ extend: tv(theme), ...appConfig.ui?.slider || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SliderRootProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/slider'
+
+const appConfig = _appConfig as AppConfig & { ui: { slider: Partial<typeof theme> } }
+
+const slider = tv({ extend: tv(theme), ...(appConfig.ui?.slider || {}) })
+
+type SliderVariants = VariantProps<typeof slider>
+
+export interface SliderProps extends Pick<SliderRootProps, 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  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>
+}
+
+export interface SliderEmits {
+  (e: 'update:modelValue', payload: number | number[]): void
+  (e: 'change', payload: Event): void
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Switch.vue

@@ -1,9 +1,53 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/switch";
-const appConfig = _appConfig;
-const switchTv = tv({ extend: tv(theme), ...appConfig.ui?.switch || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { SwitchRootProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/switch'
+import type { PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { switch: Partial<typeof theme> } }
+
+const switchTv = tv({ extend: tv(theme), ...(appConfig.ui?.switch || {}) })
+
+type SwitchVariants = VariantProps<typeof switchTv>
+
+export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue `div`
+   */
+  as?: any
+  color?: SwitchVariants['color']
+  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
+   */
+  loadingIcon?: string
+  /** Display an icon when the switch is checked. */
+  checkedIcon?: string
+  /** Display an icon when the switch is unchecked. */
+  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?: PartialString<typeof switchTv.slots>
+}
+
+export interface SwitchEmits {
+  (e: 'update:modelValue', payload: boolean): void
+  (e: 'change', payload: Event): void
+}
+
+export interface SwitchSlots {
+  label(props: { label?: string }): any
+  description(props: { description?: string }): any
+}
 </script>
 
 <script setup lang="ts">

package/dist/runtime/components/Tabs.vue

@@ -1,9 +1,62 @@
-<script>
-import { tv } from "tailwind-variants";
-import _appConfig from "#build/app.config";
-import theme from "#build/ui/tabs";
-const appConfig = _appConfig;
-const tabs = tv({ extend: tv(theme), ...appConfig.ui?.tabs || {} });
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { TabsRootProps, TabsRootEmits, TabsContentProps, TabsTriggerProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/tabs'
+import type { AvatarProps } from '../types'
+import type { DynamicSlots, PartialString } from '../types/utils'
+
+const appConfig = _appConfig as AppConfig & { ui: { tabs: Partial<typeof theme> } }
+
+const tabs = tv({ extend: tv(theme), ...(appConfig.ui?.tabs || {}) })
+
+export interface TabsItem extends Pick<TabsTriggerProps, 'disabled'> {
+  label?: string
+  icon?: string
+  avatar?: AvatarProps
+  slot?: string
+  content?: string
+  /** A unique value for the tab item. Defaults to the index. */
+  value?: string | number
+}
+
+type TabsVariants = VariantProps<typeof tabs>
+
+export interface TabsProps<T> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  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, 'as' | 'asChild' | 'value'>
+  class?: any
+  ui?: PartialString<typeof tabs.slots>
+}
+
+export interface TabsEmits extends TabsRootEmits<string | number> {}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type TabsSlots<T extends { slot?: string }> = {
+  leading: SlotProps<T>
+  default: SlotProps<T>
+  trailing: SlotProps<T>
+  content: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
 </script>
 
 <script setup lang="ts" generic="T extends TabsItem">