@byyuurin/ui 0.0.7 → 0.0.9

package/dist/runtime/components/RadioGroup.vue

@@ -4,6 +4,31 @@ import type { AcceptableValue, PrimitiveProps, RadioGroupRootProps } from 'reka-
 import type { radioGroup } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface RadioGroupEmits {
+  (event: 'update:modelValue', payload: string): void
+  (event: 'change', payload: Event): void
+}
+
+type SlotProps<T> = (props: { item: NormalizeItem<T>, modelValue?: AcceptableValue }) => any
+
+export interface RadioGroupSlots<T> {
+  legend?: (props?: {}) => any
+  label?: SlotProps<T>
+  description?: SlotProps<T>
+}
+
+type NormalizeItem<T> = { id: string } & (
+  T extends RadioOption
+    ? T
+    : {
+        id: string
+        label: string
+        value: any
+        description: string
+        disabled: boolean
+      }
+    )
+
 type RadioGroupVariants = VariantProps<typeof radioGroup>
 
 export interface RadioOption {
@@ -14,56 +39,35 @@ export interface RadioOption {
 }
 
 export interface RadioGroupProps<T> extends ComponentAttrs<typeof radioGroup>, Pick<RadioGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
   as?: PrimitiveProps['as']
   legend?: string
   /**
    * When `options` is an array of objects, select the field to use as the value.
-   * @default 'value'
+   * @default "value"
    */
   valueKey?: string
   /**
    * When `options` is an array of objects, select the field to use as the label.
-   * @default 'label'
+   * @default "label"
    */
   labelKey?: string
   /**
    * When `options` is an array of objects, select the field to use as the description.
-   * @default 'description'
+   * @default "description"
    */
   descriptionKey?: string
   options?: T[]
   size?: RadioGroupVariants['size']
   /**
    * The orientation the radio buttons are laid out.
-   * @default 'vertical'
+   * @default "vertical"
    */
   orientation?: RadioGroupRootProps['orientation']
 }
-
-export interface RadioGroupEmits {
-  (event: 'update:modelValue', payload: string): void
-  (event: 'change', payload: Event): void
-}
-
-type SlotProps<T> = (props: { item: NormalizeItem<T>, modelValue?: AcceptableValue }) => any
-
-export interface RadioGroupSlots<T> {
-  legend?: (props?: {}) => any
-  label?: SlotProps<T>
-  description?: SlotProps<T>
-}
-
-type NormalizeItem<T> = { id: string } & (
-  T extends RadioOption
-    ? T
-    : {
-        id: string
-        label: string
-        value: any
-        description: string
-        disabled: false
-      }
-    )
 </script>
 
 <script lang="ts" setup generic="T extends RadioOption | AcceptableValue">
@@ -86,11 +90,8 @@ const slots = defineSlots<RadioGroupSlots<T>>()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emit)
 const id = useId()
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.radioGroup)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('radioGroup', props))
 
 function normalizeItem(item: any): NormalizeItem<T> {
   if (['string', 'number', 'boolean'].includes(typeof item)) {
@@ -99,6 +100,7 @@ function normalizeItem(item: any): NormalizeItem<T> {
       value: item,
       label: item,
       description: '',
+      disabled: props.disabled,
     } as any
   }
 
@@ -112,6 +114,7 @@ function normalizeItem(item: any): NormalizeItem<T> {
     label,
     description,
     id: `${id}:${value}`,
+    disabled: props.disabled || item.disabled,
   }
 }
 
@@ -145,7 +148,7 @@ function onUpdate(value: any) {
           {{ props.legend }}
         </slot>
       </legend>
-      <div v-for="item in normalizedItems" :key="item.value" :class="style.item({ class: props.ui?.item })">
+      <div v-for="item in normalizedItems" :key="item.value" :class="style.item({ class: props.ui?.item, disabled: item.disabled })">
         <div :class="style.container({ class: props.ui?.container })">
           <RadioGroupItem
             :id="item.id"

package/dist/runtime/components/ScrollArea.vue

@@ -17,12 +17,8 @@ const props = withDefaults(defineProps<ScrollAreaProps>(), {})
 const rootRef = ref<InstanceType<typeof ScrollAreaRoot>>()
 const rootProps = reactivePick(props, 'type', 'dir', 'scrollHideDelay')
 
-const { theme, createStyler } = useTheme()
-
-const style = computed(() => {
-  const styler = createStyler(theme.value.scrollArea)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('scrollArea', props))
 
 defineExpose({
   scrollTop,

package/dist/runtime/components/Select.vue

@@ -5,6 +5,26 @@ import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { select } from '../theme'
 import type { ComponentAttrs, MaybeArray, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectOptionKey } from '../types'
 
+export interface SelectEmits<T, V, M extends boolean> {
+  (event: 'update:open', value: boolean): void
+  (event: 'update:modelValue', payload: SelectModelValue<T, V, M, T extends { value: infer U } ? U : never>): void
+  (event: 'change', payload: Event): void
+  (event: 'blur', payload: FocusEvent): void
+  (event: 'focus', payload: FocusEvent): void
+}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export interface SelectSlots<T, M extends boolean> {
+  'leading'?: (props: { modelValue?: M extends true ? AcceptableValue[] : AcceptableValue, open: boolean, ui: ComponentAttrs<typeof select>['ui'] }) => any
+  'default'?: (props: { modelValue?: M extends true ? AcceptableValue[] : AcceptableValue, open: boolean }) => any
+  'trailing'?: (props: { modelValue?: M extends true ? AcceptableValue[] : AcceptableValue, open: boolean, ui: ComponentAttrs<typeof select>['ui'] }) => any
+  'item'?: SlotProps<T>
+  'item-leading'?: SlotProps<T>
+  'item-label'?: SlotProps<T>
+  'item-trailing'?: SlotProps<T>
+}
+
 type SelectVariants = VariantProps<typeof select>
 
 export interface SelectOption {
@@ -12,7 +32,7 @@ export interface SelectOption {
   icon?: string
   /**
    * The option type.
-   * @default 'option'
+   * @default "option"
    */
   type?: 'label' | 'separator' | 'option'
   value?: string
@@ -34,9 +54,9 @@ export interface SelectProps<
   size?: SelectVariants['size']
   /**
    * The icon displayed to open the menu.
-   * @default app.icons.down
+   * @default app.icons.chevronDown
    */
-  suffixIcon?: string
+  trailingIcon?: string
   /**
    * The icon displayed when an item is selected.
    * @default app.icons.check
@@ -59,7 +79,7 @@ export interface SelectProps<
   portal?: boolean
   /**
    * When `options` is an array of objects, select the field to use as the value.
-   * @default 'value'
+   * @default "value"
    */
   valueKey?: V
   /**
@@ -78,26 +98,6 @@ export interface SelectProps<
   highlight?: boolean
   underline?: boolean
 }
-
-export interface SelectEmits<T, V, M extends boolean> {
-  (event: 'update:open', value: boolean): void
-  (event: 'update:modelValue', payload: SelectModelValue<T, V, M, T extends { value: infer U } ? U : never>): void
-  (event: 'change', payload: Event): void
-  (event: 'blur', payload: FocusEvent): void
-  (event: 'focus', payload: FocusEvent): void
-}
-
-type SlotProps<T> = (props: { item: T, index: number }) => any
-
-export interface SelectSlots<T, M extends boolean> {
-  prefix?: (props: { modelValue?: M extends true ? AcceptableValue[] : AcceptableValue, open: boolean, ui: ComponentAttrs<typeof select>['ui'] }) => any
-  default?: (props: { modelValue?: M extends true ? AcceptableValue[] : AcceptableValue, open: boolean }) => any
-  suffix?: (props: { modelValue?: M extends true ? AcceptableValue[] : AcceptableValue, open: boolean, ui: ComponentAttrs<typeof select>['ui'] }) => any
-  item?: SlotProps<T>
-  itemPrefix?: SlotProps<T>
-  itemLabel?: SlotProps<T>
-  itemSuffix?: SlotProps<T>
-}
 </script>
 
 <script lang="ts" setup generic="T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectOption | AcceptableValue | boolean> = MaybeArrayOfArray<SelectOption | AcceptableValue | boolean>, V extends SelectOptionKey<T> | undefined = undefined, M extends boolean = false">
@@ -124,27 +124,24 @@ const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen'
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as SelectContentProps)
 const arrowProps = toRef(() => props.arrow as SelectArrowProps)
 
-const { theme, createStyler } = useTheme()
+const { theme, generateStyle } = useTheme()
 
 const { size, orientation } = useButtonGroup(props)
-const { isPrefix, isSuffix, prefixIconName, suffixIconName } = useComponentIcons(toRef(() => defu(props, {
-  suffixIcon: theme.value.app.icons.down,
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, {
+  trailingIcon: theme.value.app.icons.chevronDown,
 })))
 
+const style = computed(() => generateStyle('select', {
+  ...props,
+  size: size.value,
+  groupOrientation: orientation.value,
+  leading: isLeading.value,
+  trailing: isTrailing.value,
+}))
+
 const groups = computed(() => props.options?.length ? (Array.isArray(props.options[0]) ? props.options : [props.options]) as SelectOption[][] : [])
 const items = computed(() => groups.value.flat() as T[])
 
-const style = computed(() => {
-  const styler = createStyler(theme.value.select)
-  return styler({
-    ...props,
-    size: size.value,
-    groupOrientation: orientation.value,
-    prefix: isPrefix.value,
-    suffix: isSuffix.value,
-  })
-})
-
 function typedItem(item: SelectOption) {
   return item as unknown as T
 }
@@ -162,7 +159,7 @@ function displayValue(value?: MaybeArray<AcceptableValue>): string | undefined {
     return value.map((v) => displayValue(v)).filter(Boolean).join(', ')
 
   const item = items.value.find((item) => compare(typeof item === 'object' ? get(item as Record<string, any>, props.valueKey as string) : item, value))
-  return item && (typeof item === 'object' ? get(item, props.labelKey as string) : item)
+  return (item != null) && (typeof item === 'object' ? get(item, props.labelKey as string) : item.toString())
 }
 
 function onUpdate(value: any) {
@@ -196,9 +193,9 @@ function onUpdateOpen(value: boolean) {
     @update:open="onUpdateOpen"
   >
     <SelectTrigger :id="props.id" :class="style.base({ class: [props.class, props.ui?.base] })">
-      <span v-if="isPrefix || slots.prefix" :class="style.prefix({ class: props.ui?.prefix })">
-        <slot name="prefix" :model-value="typedValue(innerValue)" :open="open" :ui="props.ui">
-          <span v-if="isPrefix && prefixIconName" :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"></span>
+      <span v-if="isLeading || slots.leading" :class="style.leading({ class: props.ui?.leading })">
+        <slot name="leading" :model-value="typedValue(innerValue)" :open="open" :ui="props.ui">
+          <span v-if="isLeading && leadingIconName" :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"></span>
         </slot>
       </span>
 
@@ -213,9 +210,9 @@ function onUpdateOpen(value: boolean) {
         </template>
       </slot>
 
-      <span v-if="isSuffix || !!slots.suffix" :class="style.suffix({ class: props.ui?.suffix })">
-        <slot name="suffix" :model-value="typedValue(innerValue)" :open="open" :ui="props.ui">
-          <span v-if="suffixIconName" :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"></span>
+      <span v-if="isTrailing || !!slots.trailing" :class="style.trailing({ class: props.ui?.trailing })">
+        <slot name="trailing" :model-value="typedValue(innerValue)" :open="open" :ui="props.ui">
+          <span v-if="trailingIconName" :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"></span>
         </slot>
       </span>
     </SelectTrigger>
@@ -237,21 +234,21 @@ function onUpdateOpen(value: boolean) {
                 :value="typeof item === 'object' ? get(item, props.valueKey as string) : item"
               >
                 <slot name="item" :item="typedItem(item)" :index="index">
-                  <slot name="itemPrefix" :item="typedItem(item)" :index="index">
-                    <span v-if="item.icon" :class="style.itemPrefixIcon({ class: [item.icon, props.ui?.itemPrefixIcon] })"></span>
+                  <slot name="item-leading" :item="typedItem(item)" :index="index">
+                    <span v-if="item.icon" :class="style.itemLeadingIcon({ class: [item.icon, props.ui?.itemLeadingIcon] })"></span>
                   </slot>
 
                   <SelectItemText :class="style.itemLabel({ class: props.ui?.itemLabel })">
-                    <slot name="itemLabel" :item="typedItem(item)" :index="index">
+                    <slot name="item-label" :item="typedItem(item)" :index="index">
                       {{ typeof item === 'object' ? get(item, props.labelKey as string) : item }}
                     </slot>
                   </SelectItemText>
 
-                  <span :class="style.itemSuffix({ class: props.ui?.itemSuffix })">
-                    <slot name="itemSuffix" :item="typedItem(item)" :index="index"></slot>
+                  <span :class="style.itemTrailing({ class: props.ui?.itemTrailing })">
+                    <slot name="item-trailing" :item="typedItem(item)" :index="index"></slot>
 
                     <SelectItemIndicator as-child>
-                      <span :class="style.itemSuffixIcon({ class: [props.selectedIcon || theme.app.icons.check, props.ui?.itemSuffixIcon] })"></span>
+                      <span :class="style.itemTrailingIcon({ class: [props.selectedIcon || theme.app.icons.check, props.ui?.itemTrailingIcon] })"></span>
                     </SelectItemIndicator>
                   </span>
                 </slot>

package/dist/runtime/components/Separator.vue

@@ -37,12 +37,8 @@ const slots = defineSlots<SeparatorSlots>()
 
 const rootProps = useForwardProps(reactivePick(props, 'as', 'decorative', 'orientation'))
 
-const { theme, createStyler } = useTheme()
-
-const style = computed(() => {
-  const styler = createStyler(theme.value.separator)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('separator', props))
 </script>
 
 <template>

package/dist/runtime/components/Skeleton.vue

@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { skeleton } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface SkeletonProps extends Omit<ComponentAttrs<typeof skeleton>, 'ui'> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables/useTheme'
+
+const props = withDefaults(defineProps<SkeletonProps>(), {})
+
+const { generateStyle } = useTheme()
+const styler = computed(() => generateStyle('skeleton', props))
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="styler">
+    <slot></slot>
+  </Primitive>
+</template>

package/dist/runtime/components/Slider.vue

@@ -4,6 +4,11 @@ import type { SliderRootProps } from 'reka-ui'
 import type { slider } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface SliderEmits {
+  (event: 'update:modelValue', payload: number | number[]): void
+  (event: 'change', payload: Event): void
+}
+
 type SliderVariants = VariantProps<typeof slider>
 
 export interface SliderProps extends ComponentAttrs<typeof slider>, Pick<SliderRootProps, 'as' | 'name' | 'disabled' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs'> {
@@ -11,17 +16,12 @@ export interface SliderProps extends ComponentAttrs<typeof slider>, Pick<SliderR
   size?: SliderVariants['size']
   /**
    * The orientation of the slider.
-   * @default 'horizontal'
+   * @default "horizontal"
    */
   orientation?: SliderVariants['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[]
 }
-
-export interface SliderEmits {
-  (event: 'update:modelValue', payload: number | number[]): void
-  (event: 'change', payload: Event): void
-}
 </script>
 
 <script setup lang="ts">
@@ -63,11 +63,8 @@ const sliderValue = computed({
 
 const thumbsCount = computed(() => sliderValue.value?.length ?? 1)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.slider)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('slider', props))
 
 function onChange(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'

package/dist/runtime/components/Switch.vue

@@ -1,13 +1,21 @@
 <script lang="ts">
 import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps, SwitchRootProps } from 'reka-ui'
+import type { SwitchRootProps } from 'reka-ui'
 import type { switch as _switch } from '../theme'
 import type { ComponentAttrs } from '../types'
 
+export interface SwitchEmits {
+  (event: 'change', payload: Event): void
+}
+
+export interface SwitchSlots {
+  label?: (props: { label?: string }) => any
+  description?: (props: { description?: string }) => any
+}
+
 type SwitchVariants = VariantProps<typeof _switch>
 
-export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
-  as?: PrimitiveProps['as']
+export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<SwitchRootProps, 'as' | 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
   size?: SwitchVariants['size']
   /** When `true`, the loading icon will be displayed. */
   loading?: boolean
@@ -23,15 +31,6 @@ export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<Switch
   label?: string
   description?: string
 }
-
-export interface SwitchEmits {
-  (event: 'change', payload: Event): void
-}
-
-export interface SwitchSlots {
-  label?: (props: { label?: string }) => any
-  description?: (props: { description?: string }) => any
-}
 </script>
 
 <script lang="ts" setup>
@@ -48,11 +47,12 @@ const modelValue = defineModel<boolean>({ default: undefined })
 const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
 const id = useId()
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.switch)
-  return styler({ ...props, checked: false, unchecked: false })
-})
+const { theme, generateStyle } = useTheme()
+const style = computed(() => generateStyle('switch', {
+  ...props,
+  checked: false,
+  unchecked: false,
+}))
 
 function onUpdate(value: any) {
   // @ts-expect-error - 'target' does not exist in type 'EventInit'

package/dist/runtime/components/Table.vue

@@ -5,16 +5,8 @@ import type { Ref } from 'vue'
 import type { table } from '../theme'
 import type { ComponentAttrs } from '../types'
 
-export type TableData = RowData
-export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D> & { title?: string }
-
-export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
-  state?: CoreOptions<T>['state']
-  onStateChange?: CoreOptions<T>['onStateChange']
-  renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
-}
-
 type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>
+
 type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>
 
 export type TableSlots<T> = {
@@ -23,7 +15,21 @@ export type TableSlots<T> = {
   caption: (props?: {}) => any
 } & DynamicHeaderSlots<T> & DynamicCellSlots<T>
 
-export interface TableProps<T extends TableData> extends ComponentAttrs<typeof table>, Pick<PrimitiveProps, 'as'>, TableOptions<T> {
+export type TableData = RowData
+export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D> & { title?: string }
+
+export interface TableOptions<T extends TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
+  state?: CoreOptions<T>['state']
+  onStateChange?: CoreOptions<T>['onStateChange']
+  renderFallbackValue?: CoreOptions<T>['renderFallbackValue']
+}
+
+export interface TableProps<T extends TableData> extends ComponentAttrs<typeof table>, TableOptions<T> {
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: PrimitiveProps['as']
   data?: T[]
   columns?: TableColumn<T>[]
   caption?: string
@@ -101,6 +107,7 @@ import { reactiveOmit } from '@vueuse/core'
 import { Primitive } from 'reka-ui'
 import { upperFirst } from 'scule'
 import { computed } from 'vue'
+import { useLocale } from '../composables/useLocale'
 import { useTheme } from '../composables/useTheme'
 
 const props = defineProps<TableProps<T>>()
@@ -221,11 +228,9 @@ function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref) {
   ref.value = typeof updaterOrValue === 'function' ? updaterOrValue(ref.value) : updaterOrValue
 }
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.table)
-  return styler(props)
-})
+const { t } = useLocale()
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('table', props))
 
 defineExpose({
   tableApi,
@@ -282,7 +287,7 @@ defineExpose({
         <tr v-else :class="style.tr({ class: props.ui?.tr })">
           <td :colspan="columns.length" :class="style.empty({ class: props.ui?.empty })">
             <slot name="empty">
-              Empty
+              {{ t('table.noData') }}
             </slot>
           </td>
         </tr>

package/dist/runtime/components/Tabs.vue

@@ -1,8 +1,19 @@
 <script lang="ts">
 import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps, TabsRootEmits, TabsRootProps } from 'reka-ui'
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
 import type { tabs } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ComponentAttrs, DynamicSlots } from '../types'
+
+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>>
 
 export interface TabsItem {
   label?: string
@@ -14,21 +25,14 @@ export interface TabsItem {
   disabled?: boolean
 }
 
-export interface TabsEmits extends TabsRootEmits<string | number> {}
-
-type SlotProps<T> = (props: { item: T, index: number }) => any
-
-export type TabsSlots<T extends { slot?: string }> = {
-  prefix?: SlotProps<T>
-  default?: SlotProps<T>
-  suffix?: SlotProps<T>
-  content?: SlotProps<T>
-} & Record<string, SlotProps<T>>
-
 type TabsVariants = VariantProps<typeof tabs>
 
 export interface TabsProps<T> extends ComponentAttrs<typeof tabs>, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
-  as?: PrimitiveProps['as']
+  /**
+   * The element or component this component should render as.
+   * @default "div"
+   */
+  as?: TabsRootProps<string | number>['as']
   items?: T[]
   variant?: TabsVariants['variant']
   orientation?: TabsVariants['orientation']
@@ -42,7 +46,7 @@ export interface TabsProps<T> extends ComponentAttrs<typeof tabs>, Pick<TabsRoot
   content?: boolean
   /**
    * The key used to get the label from the item.
-   * @default 'label'
+   * @default "label"
    */
   labelKey?: string
 }
@@ -69,11 +73,8 @@ const slots = defineSlots<TabsSlots<T>>()
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emit)
 
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.tabs)
-  return styler(props)
-})
+const { generateStyle } = useTheme()
+const style = computed(() => generateStyle('tabs', props))
 </script>
 
 <template>
@@ -88,15 +89,15 @@ const style = computed(() => {
         :disabled="item.disabled"
         :class="style.trigger({ class: props.ui?.trigger })"
       >
-        <slot name="prefix" :item="item" :index="index">
-          <span v-if="item.icon" :class="style.prefixIcon({ class: [item.icon, props.ui?.prefixIcon] })"></span>
+        <slot name="leading" :item="item" :index="index">
+          <span v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })"></span>
         </slot>
 
         <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })">
           <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
         </span>
 
-        <slot name="suffix" :item="item" :index="index"></slot>
+        <slot name="trailing" :item="item" :index="index"></slot>
       </TabsTrigger>
     </TabsList>