@byyuurin/ui 0.0.0

package/dist/components/RadioGroup.vue

@@ -0,0 +1,180 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { AcceptableValue, PrimitiveProps, RadioGroupRootProps } from 'reka-ui'
+import type { radioGroup } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type RadioGroupVariants = VariantProps<typeof radioGroup>
+
+export interface RadioOption {
+  label?: string
+  description?: string
+  disabled?: boolean
+  value?: string
+}
+
+export interface RadioGroupProps<T> extends ComponentAttrs<typeof radioGroup>, Pick<RadioGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'> {
+  as?: PrimitiveProps['as']
+  legend?: string
+  /**
+   * When `options` is an array of objects, select the field to use as the value.
+   * @default 'value'
+   */
+  valueKey?: string
+  /**
+   * When `options` is an array of objects, select the field to use as the label.
+   * @default 'label'
+   */
+  labelKey?: string
+  /**
+   * When `options` is an array of objects, select the field to use as the description.
+   * @default 'description'
+   */
+  descriptionKey?: string
+  options?: T[]
+  size?: RadioGroupVariants['size']
+  /**
+   * The orientation the radio buttons are laid out.
+   * @default 'vertical'
+   */
+  orientation?: RadioGroupRootProps['orientation']
+  /** @default true */
+  round?: boolean
+  /** @default true */
+  dot?: boolean
+}
+
+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">
+import { reactivePick } from '@vueuse/core'
+import { Label, RadioGroupIndicator, RadioGroupItem, RadioGroupRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, useId } from 'vue'
+import { useTheme } from '../composables'
+import { get } from '../utils'
+
+const props = withDefaults(defineProps<RadioGroupProps<T>>(), {
+  size: 'md',
+  valueKey: 'value',
+  labelKey: 'label',
+  descriptionKey: 'description',
+  orientation: 'vertical',
+  dot: true,
+  round: true,
+})
+
+const emit = defineEmits<RadioGroupEmits>()
+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)
+})
+
+function normalizeItem(item: any): NormalizeItem<T> {
+  if (['string', 'number', 'boolean'].includes(typeof item)) {
+    return {
+      id: `${id}:${item}`,
+      value: item,
+      label: item,
+      description: '',
+    } as any
+  }
+
+  const value = get(item, props.valueKey as string)
+  const label = get(item, props.labelKey as string)
+  const description = get(item, props.descriptionKey as string)
+
+  return {
+    ...item,
+    value,
+    label,
+    description,
+    id: `${id}:${value}`,
+  }
+}
+
+const normalizedItems = computed(() => {
+  if (!props.options)
+    return []
+
+  return props.options.map(normalizeItem)
+})
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emit('change', event)
+}
+</script>
+
+<template>
+  <RadioGroupRoot
+    :id="id"
+    v-slot="{ modelValue }"
+    v-bind="rootProps"
+    :name="props.name"
+    :disabled="props.disabled"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+    @update:model-value="onUpdate"
+  >
+    <fieldset :class="style.fieldset({ class: props.ui?.fieldset })">
+      <legend v-if="props.legend || slots.legend" :class="style.legend({ class: props.ui?.legend })">
+        <slot name="legend">
+          {{ props.legend }}
+        </slot>
+      </legend>
+      <div v-for="item in normalizedItems" :key="item.value" :class="style.item({ class: props.ui?.item })">
+        <div :class="style.container({ class: props.ui?.container })">
+          <RadioGroupItem
+            :id="item.id"
+            :value="item.value"
+            :disabled="item.disabled"
+            :class="style.base({ class: props.ui?.base })"
+          >
+            <RadioGroupIndicator :class="style.indicator({ class: props.ui?.indicator })" />
+          </RadioGroupItem>
+        </div>
+
+        <div :class="style.wrapper({ class: props.ui?.wrapper })">
+          <Label :for="item.id" :class="style.label({ class: props.ui?.label })">
+            <slot name="label" :item="item" :model-value="modelValue">{{ item.label }}</slot>
+          </Label>
+          <p v-if="item.description || slots.description" :class="style.description({ class: props.ui?.description })">
+            <slot name="description" :item="item" :model-value="modelValue">
+              {{ item.description }}
+            </slot>
+          </p>
+        </div>
+      </div>
+    </fieldset>
+  </RadioGroupRoot>
+</template>

package/dist/components/Select.vue

@@ -0,0 +1,258 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { AcceptableValue, SelectArrowProps, SelectContentProps, SelectRootProps } from 'reka-ui'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { select } from '../theme'
+import type { ComponentAttrs, MaybeArray, MaybeArrayOfArray, MaybeArrayOfArrayItem, SelectModelValue, SelectOptionKey } from '../types'
+
+type SelectVariants = VariantProps<typeof select>
+
+export interface SelectOption {
+  label?: string
+  icon?: string
+  /**
+   * The option type.
+   * @default 'option'
+   */
+  type?: 'label' | 'separator' | 'option'
+  value?: string
+  disabled?: boolean
+}
+
+export type SelectOptionValue = SelectOption | AcceptableValue | boolean
+
+export interface SelectProps<
+  T extends MaybeArrayOfArrayItem<I>,
+  I extends MaybeArrayOfArray<SelectOptionValue> = MaybeArrayOfArray<SelectOptionValue>,
+  V extends SelectOptionKey<T> | undefined = undefined,
+  M extends boolean = false,
+> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, ComponentAttrs<typeof select>, UseComponentIconsProps {
+  id?: string
+  /** The placeholder text when the select is empty. */
+  placeholder?: string
+  variant?: SelectVariants['variant']
+  size?: SelectVariants['size']
+  /**
+   * The icon displayed to open the menu.
+   * @default app.icons.down
+   */
+  suffixIcon?: string
+  /**
+   * The icon displayed when an item is selected.
+   * @default app.icons.check
+   */
+  selectedIcon?: string
+  /**
+   * The content of the menu.
+   * @default { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }
+   */
+  content?: Omit<SelectContentProps, 'as' | 'asChild' | 'forceMount'>
+  /**
+   * Display an arrow alongside the menu.
+   * @default false
+   */
+  arrow?: boolean | Omit<SelectArrowProps, 'as' | 'asChild'>
+  /**
+   * Render the menu in a portal.
+   * @default true
+   */
+  portal?: boolean
+  /**
+   * When `options` is an array of objects, select the field to use as the value.
+   * @default 'value'
+   */
+  valueKey?: V
+  /**
+   * When `options` is an array of objects, select the field to use as the label.
+   * @default "label"
+   */
+  labelKey?: V
+  options?: I
+  /** The value of the Select when initially rendered. Use when you do not need to control the state of the Select. */
+  defaultValue?: SelectModelValue<T, V, M, T extends { value: infer U } ? U : never>
+  /** The controlled value of the Select. Can be bind as `v-model`. */
+  modelValue?: SelectModelValue<T, V, M, T extends { value: infer U } ? U : never>
+  /** Whether multiple options can be selected or not. */
+  multiple?: M & boolean
+  /** Highlight the ring color like a focus state. */
+  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">
+import { reactivePick } from '@vueuse/core'
+import { defu } from 'defu'
+import { SelectArrow, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, SelectViewport, useForwardPropsEmits } from 'reka-ui'
+import { computed, toRef } from 'vue'
+import { useComponentIcons, useTheme } from '../composables'
+import { compare, get } from '../utils'
+
+const props = withDefaults(defineProps<SelectProps<T, I, V, M>>(), {
+  variant: 'outline',
+  size: 'md',
+  valueKey: 'value' as never,
+  labelKey: 'label' as never,
+  portal: true,
+})
+
+const emit = defineEmits<SelectEmits<T, V, M>>()
+const slots = defineSlots<SelectSlots<T, M>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required', 'multiple'), emit)
+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 { isPrefix, isSuffix, prefixIconName, suffixIconName } = useComponentIcons(toRef(() => defu(props, {
+  suffixIcon: theme.value.app.icons.down,
+})))
+
+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,
+    prefix: isPrefix.value,
+    suffix: isSuffix.value,
+  })
+})
+
+function typedItem(item: SelectOption) {
+  return item as unknown as T
+}
+
+function typedValue<V extends MaybeArray<AcceptableValue>>(value?: V) {
+  return value as unknown as M extends true ? AcceptableValue[] : AcceptableValue
+}
+
+function displayValue(value?: MaybeArray<AcceptableValue>): string | undefined {
+  if (props.multiple && Array.isArray(value))
+    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)
+}
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emit('change', event)
+}
+
+function onUpdateOpen(value: boolean) {
+  if (value) {
+    const event = new FocusEvent('focus')
+    emit('focus', event)
+  }
+  else {
+    const event = new FocusEvent('blur')
+    emit('blur', event)
+  }
+}
+</script>
+
+<template>
+  <SelectRoot
+    v-slot="{ modelValue: innerValue, open }"
+    :name="props.name"
+    v-bind="rootProps"
+    :autocomplete="props.autocomplete"
+    :disabled="props.disabled"
+    :default-value="(props.defaultValue as MaybeArray<AcceptableValue> | undefined)"
+    :model-value="(props.modelValue as MaybeArray<AcceptableValue> | undefined)"
+    @update:model-value="onUpdate"
+    @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">
+          <i v-if="isPrefix && prefixIconName" :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"></i>
+        </slot>
+      </span>
+
+      <slot :model-value="typedValue(innerValue)" :open="open">
+        <template v-for="displayedModelValue in [displayValue(innerValue)]" :key="displayedModelValue">
+          <span v-if="displayedModelValue" :class="style.value({ class: props.ui?.value })">
+            {{ displayedModelValue }}
+          </span>
+          <span v-else :class="style.placeholder({ class: props.ui?.placeholder })">
+            {{ placeholder }}&nbsp;
+          </span>
+        </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">
+          <i v-if="suffixIconName" :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"></i>
+        </slot>
+      </span>
+    </SelectTrigger>
+
+    <SelectPortal :disabled="!props.portal">
+      <SelectContent v-bind="contentProps" :class="style.content({ class: props.ui?.content })">
+        <SelectViewport :class="style.viewport({ class: props.ui?.viewport })">
+          <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="style.group({ class: props.ui?.group })">
+            <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+              <SelectLabel v-if="item.type === 'label'" :class="style.label({ class: props.ui?.label })">
+                {{ get(item, props.labelKey as string) }}
+              </SelectLabel>
+              <SelectSeparator v-else-if="item.type === 'separator'" :class="style.separator({ class: props.ui?.separator })" />
+
+              <SelectItem
+                v-else
+                :class="style.item({ class: props.ui?.item })"
+                :disabled="item.disabled"
+                :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">
+                    <i v-if="item.icon" :class="style.itemPrefixIcon({ class: [item.icon, props.ui?.itemPrefixIcon] })"></i>
+                  </slot>
+
+                  <SelectItemText :class="style.itemLabel({ class: props.ui?.itemLabel })">
+                    <slot name="itemLabel" :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>
+
+                    <SelectItemIndicator as-child>
+                      <i :class="style.itemSuffixIcon({ class: [props.selectedIcon || theme.app.icons.check, props.ui?.itemSuffixIcon] })"></i>
+                    </SelectItemIndicator>
+                  </span>
+                </slot>
+              </SelectItem>
+            </template>
+          </SelectGroup>
+        </SelectViewport>
+
+        <SelectArrow v-if="!!props.arrow" v-bind="arrowProps" :class="style.arrow({ class: props.ui?.arrow })" />
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>

package/dist/components/Switch.vue

@@ -0,0 +1,99 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps, SwitchRootProps } from 'reka-ui'
+import type { switch as _switch } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type SwitchVariants = VariantProps<typeof _switch>
+
+export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
+  as?: PrimitiveProps['as']
+  size?: SwitchVariants['size']
+  /** When `true`, the loading icon will be displayed. */
+  loading?: boolean
+  /**
+   * The icon when the `loading` prop is `true`.
+   * @default app.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
+  round?: boolean
+}
+
+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>
+import { reactivePick } from '@vueuse/core'
+import { Label, Primitive, SwitchRoot, SwitchThumb, useForwardProps } from 'reka-ui'
+import { computed, useId } from 'vue'
+import { useTheme } from '../composables'
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+  size: 'md',
+})
+const emit = defineEmits<SwitchEmits>()
+const slots = defineSlots<SwitchSlots>()
+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 })
+})
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emit('change', event)
+}
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <div :class="style.container({ class: props.ui?.container })">
+      <SwitchRoot
+        :id="id"
+        v-bind="rootProps"
+        v-model="modelValue"
+        :name="props.name"
+        :disabled="props.disabled || props.loading"
+        :class="style.base({ class: props.ui?.base })"
+        @update:model-value="onUpdate"
+      >
+        <SwitchThumb :class="style.thumb({ class: props.ui?.thumb })">
+          <i v-if="props.loading" :class="style.icon({ class: [theme.app.icons.loading, props.ui?.icon], checked: true, unchecked: true })"></i>
+          <template v-else>
+            <i v-if="props.checkedIcon" :class="style.icon({ class: [props.checkedIcon, props.ui?.icon], checked: true })"></i>
+            <i v-if="props.uncheckedIcon" :class="style.icon({ class: [props.uncheckedIcon, props.ui?.icon], unchecked: true })"></i>
+          </template>
+        </SwitchThumb>
+      </SwitchRoot>
+    </div>
+    <div v-if="props.label || slots.label || props.description || slots.description" :class="style.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="props.label || slots.label" :for="id" :class="style.label({ class: props.ui?.label })">
+        <slot name="label" :label="props.label">{{ props.label }}</slot>
+      </Label>
+      <p v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
+        </slot>
+      </p>
+    </div>
+  </Primitive>
+</template>

package/dist/components/Tabs.vue

@@ -0,0 +1,117 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps, TabsRootEmits, TabsRootProps } from 'reka-ui'
+import type { tabs } from '../theme'
+import type { ComponentAttrs, DynamicSlots } from '../types'
+
+export interface TabsItem {
+  label?: string
+  icon?: string
+  slot?: string
+  content?: string
+  /** A unique value for the tab item. Defaults to the index. */
+  value?: string | number
+  disabled?: boolean
+}
+
+type TabsVariants = VariantProps<typeof tabs>
+
+export interface TabsProps<T> extends ComponentAttrs<typeof tabs>, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
+  as?: PrimitiveProps['as']
+  items?: T[]
+  variant?: TabsVariants['variant']
+  orientation?: TabsVariants['orientation']
+  size?: TabsVariants['size']
+  /** @default true */
+  full?: boolean
+  /**
+   * The content of the tabs, can be disabled to prevent rendering the content.
+   * @default true
+   */
+  content?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @default 'label'
+   */
+  labelKey?: string
+}
+
+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 lang="ts" setup generic="T extends TabsItem">
+import { reactivePick } from '@vueuse/core'
+import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables'
+import { get } from '../utils'
+
+const props = withDefaults(defineProps<TabsProps<T>>(), {
+  defaultValue: '0',
+  variant: 'solid',
+  orientation: 'horizontal',
+  size: 'md',
+  full: true,
+  content: true,
+  labelKey: 'label',
+})
+
+const emits = defineEmits<TabsEmits>()
+const slots = defineSlots<TabsSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emits)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.tabs)
+  return styler(props)
+})
+</script>
+
+<template>
+  <TabsRoot v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <TabsList :class="style.list({ class: props.ui?.list })">
+      <TabsIndicator :class="style.indicator({ class: props.ui?.indicator })" />
+
+      <TabsTrigger
+        v-for="(item, index) of items"
+        :key="index"
+        :value="item.value || String(index)"
+        :disabled="item.disabled"
+        :class="style.trigger({ class: props.ui?.trigger })"
+      >
+        <slot name="leading" :item="item" :index="index">
+          <i v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })"></i>
+        </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="trailing" :item="item" :index="index"></slot>
+      </TabsTrigger>
+    </TabsList>
+
+    <template v-if="props.content">
+      <TabsContent
+        v-for="(item, index) of items"
+        :key="index"
+        :value="item.value || String(index)"
+        :class="style.content({ class: props.ui?.content })"
+      >
+        <slot :name="item.slot || 'content'" :item="item" :index="index">
+          {{ item.content }}
+        </slot>
+      </TabsContent>
+    </template>
+  </TabsRoot>
+</template>