@byyuurin/ui 0.0.11 → 0.2.0

package/dist/runtime/components/Table.vue.d.ts

@@ -1,27 +1,48 @@
-import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, HeaderContext, PaginationOptions, PaginationState, Row, RowData, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, VisibilityOptions, VisibilityState } from '@tanstack/vue-table';
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core';
+import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, HeaderContext, PaginationOptions, PaginationState, Row, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, VisibilityOptions, VisibilityState } from '@tanstack/vue-table';
+import type { VirtualizerOptions } from '@tanstack/vue-virtual';
 import type { PrimitiveProps } from 'reka-ui';
-import type { table } from '../theme/index.js';
-import type { ComponentAttrs } from '../types/index.js';
-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> = {
-    expanded?: (props: {
-        row: Row<T>;
-    }) => any;
-    empty?: any;
-    loading?: any;
-    caption?: any;
-} & DynamicHeaderSlots<T> & DynamicCellSlots<T>;
+import type { WatchOptions } from 'vue';
+import theme from '#build/ui/table';
+import type { ComponentBaseProps, ComponentUIProps } from '../types';
+import type { MaybeNull, StaticSlot } from '../types/utils';
+declare module '@tanstack/table-core' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        class?: {
+            th?: string | ((cell: Header<TData, TValue>) => string);
+            td?: string | ((cell: Cell<TData, TValue>) => string);
+        };
+        style?: {
+            th?: string | Record<string, string> | ((cell: Header<TData, TValue>) => string | Record<string, string>);
+            td?: string | Record<string, string> | ((cell: Cell<TData, TValue>) => string | Record<string, string>);
+        };
+        colspan?: {
+            td?: string | ((cell: Cell<TData, TValue>) => string);
+        };
+        rowspan?: {
+            td?: string | ((cell: Cell<TData, TValue>) => string);
+        };
+    }
+    interface TableMeta<TData> {
+        class?: {
+            tr?: string | ((row: Row<TData>) => string);
+        };
+        style?: {
+            tr?: string | Record<string, string> | ((row: Row<TData>) => string | Record<string, string>);
+        };
+    }
+}
+export type TableRow<T> = Row<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'> {
+export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>;
+export interface TableOptions<T extends TableData = 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> {
+type ThemeVariants = VariantProps<typeof theme>;
+export interface TableProps<T extends TableData = TableData> extends ComponentBaseProps, TableOptions<T> {
     /**
      * The element or component this component should render as.
      * @default "div"
@@ -30,95 +51,143 @@ export interface TableProps<T extends TableData> extends ComponentAttrs<typeof t
     data?: T[];
     columns?: TableColumn<T>[];
     caption?: string;
+    meta?: TableMeta<T>;
+    /**
+     * Enable virtualization for large datasets.
+     *
+     * Note: when enabled, the divider between rows and sticky properties are not supported.
+     * @default false
+     */
+    virtualize?: boolean | (Partial<Omit<VirtualizerOptions<Element, Element>, 'getScrollElement' | 'count' | 'estimateSize' | 'overscan'>> & {
+        /**
+         * Number of items rendered outside the visible area
+         * @default 12
+         */
+        overscan?: number;
+        /**
+         * Estimated size (in px) of each item
+         * @default 65
+         */
+        estimateSize?: number;
+    });
     /**
      * The text to display when the table is empty.
      * @default t('table.noData')
      */
     empty?: string;
     /**
-     * Whether the table should have a sticky header.
+     * Whether the table should have a sticky header or footer. True for both, 'header' for header only, 'footer' for footer only.
+     *
+     * Note: this prop is not supported when `virtualize` is true.
      * @default false
      */
-    sticky?: boolean;
+    sticky?: boolean | 'header' | 'footer';
     /** Whether the table should be in loading state. */
     loading?: boolean;
+    /** @default "primary" */
+    loadingColor?: ThemeVariants['loadingColor'];
+    /** @default "carousel" */
+    loadingAnimation?: ThemeVariants['loadingAnimation'];
+    globalFilter?: string;
+    columnFilters?: ColumnFiltersState;
+    columnOrder?: ColumnOrderState;
+    columnVisibility?: VisibilityState;
+    columnPinning?: ColumnPinningState;
+    columnSizing?: ColumnSizingState;
+    columnSizingInfo?: ColumnSizingInfoState;
+    rowSelection?: RowSelectionState;
+    rowPinning?: RowPinningState;
+    sorting?: SortingState;
+    grouping?: GroupingState;
+    expanded?: ExpandedState;
+    pagination?: PaginationState;
+    /**
+     * Use the `watchOptions` prop to customize reactivity (for ex: disable deep watching for changes in your data or limiting the max traversal depth). This can improve performance by reducing unnecessary re-renders, but it should be used with caution as it may lead to unexpected behavior if not managed properly.
+     * @see [API](https://vuejs.org/api/options-state.html#watch)
+     * @see [Guide](https://vuejs.org/guide/essentials/watchers.html)
+     * @default { deep: true }
+     */
+    watchOptions?: WatchOptions;
     /**
-     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
-     * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
      */
     globalFilterOptions?: Omit<GlobalFilterOptions<T>, 'onGlobalFilterChange'>;
     /**
-     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering#table-options)
-     * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/column-filtering#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
      */
     columnFiltersOptions?: Omit<ColumnFiltersOptions<T>, 'getFilteredRowModel' | 'onColumnFiltersChange'>;
     /**
-     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-pinning#table-options)
-     * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/column-pinning#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
      */
     columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>;
     /**
-     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#table-options)
-     * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/column-sizing#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
      */
     columnSizingOptions?: Omit<ColumnSizingOptions, 'onColumnSizingChange' | 'onColumnSizingInfoChange'>;
     /**
-     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
-     * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
      */
     visibilityOptions?: Omit<VisibilityOptions, 'onColumnVisibilityChange'>;
     /**
-     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#table-options)
-     * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/sorting#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
      */
     sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>;
     /**
-     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/grouping#table-options)
-     * @link [Guide](https://tanstack.com/table/v8/docs/guide/grouping)
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/grouping#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/grouping)
      */
     groupingOptions?: Omit<GroupingOptions, 'onGroupingChange'>;
     /**
-     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
-     * @link [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
      */
     expandedOptions?: Omit<ExpandedOptions<T>, 'getExpandedRowModel' | 'onExpandedChange'>;
     /**
-     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#table-options)
-     * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/row-selection#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
      */
     rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>;
     /**
-     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-pinning#table-options)
-     * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-pinning)
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/row-pinning#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/row-pinning)
      */
     rowPinningOptions?: Omit<RowPinningOptions<T>, 'onRowPinningChange'>;
     /**
-     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#table-options)
-     * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination)
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/pagination#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/pagination)
      */
     paginationOptions?: Omit<PaginationOptions, 'onPaginationChange'>;
     /**
-     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-faceting#table-options)
-     * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
+     * @see [API](https://tanstack.com/table/v8/docs/api/features/column-faceting#table-options)
+     * @see [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
      */
     facetedOptions?: FacetedOptions<T>;
+    onSelect?: (e: Event, row: TableRow<T>) => void;
+    onHover?: (e: Event, row: MaybeNull<TableRow<T>>) => void;
+    onContextmenu?: ((e: Event, row: TableRow<T>) => void) | Array<((e: Event, row: TableRow<T>) => void)>;
+    ui?: ComponentUIProps<typeof theme>;
 }
-declare const _default: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:globalFilter"?: ((value: string) => any) | undefined;
-        readonly "onUpdate:columnFilters"?: ((value: ColumnFiltersState) => any) | undefined;
-        readonly "onUpdate:columnOrder"?: ((value: ColumnOrderState) => any) | undefined;
-        readonly "onUpdate:columnVisibility"?: ((value: VisibilityState) => any) | undefined;
-        readonly "onUpdate:columnPinning"?: ((value: ColumnPinningState) => any) | undefined;
-        readonly "onUpdate:columnSizing"?: ((value: ColumnSizingState) => any) | undefined;
-        readonly "onUpdate:columnSizingInfo"?: ((value: ColumnSizingInfoState) => any) | undefined;
-        readonly "onUpdate:rowSelection"?: ((value: RowSelectionState) => any) | undefined;
-        readonly "onUpdate:rowPinning"?: ((value: RowPinningState) => any) | undefined;
-        readonly "onUpdate:sorting"?: ((value: SortingState) => any) | undefined;
-        readonly "onUpdate:grouping"?: ((value: GroupingState) => any) | undefined;
-        readonly "onUpdate:expanded"?: ((value: ExpandedState) => any) | undefined;
-        readonly "onUpdate:pagination"?: ((value: PaginationState) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:globalFilter" | "onUpdate:columnFilters" | "onUpdate:columnOrder" | "onUpdate:columnVisibility" | "onUpdate:columnPinning" | "onUpdate:columnSizing" | "onUpdate:columnSizingInfo" | "onUpdate:rowSelection" | "onUpdate:rowPinning" | "onUpdate:sorting" | "onUpdate:grouping" | "onUpdate:expanded" | "onUpdate:pagination"> & (TableProps<T> & {
+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 DynamicFooterSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-footer`, (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> = {
+    'expanded': StaticSlot<{
+        row: Row<T>;
+    }>;
+    'empty': StaticSlot;
+    'loading': StaticSlot;
+    'caption': StaticSlot;
+    'body-top': StaticSlot;
+    'body-bottom': StaticSlot;
+} & DynamicHeaderSlots<T> & DynamicFooterSlots<T> & DynamicCellSlots<T>;
+declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<(TableProps<T> & {
         globalFilter?: string;
         columnFilters?: ColumnFiltersState;
         columnOrder?: ColumnOrderState;
@@ -132,17 +201,34 @@ declare const _default: <T extends TableData>(__VLS_props: NonNullable<Awaited<t
         grouping?: GroupingState;
         expanded?: ExpandedState;
         pagination?: PaginationState;
-    }) & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{
-        tableApi: import("@tanstack/vue-table").Table<T>;
-    }>): void;
+    }) & {
+        "onUpdate:globalFilter"?: ((value: string | undefined) => any) | undefined;
+        "onUpdate:columnFilters"?: ((value: ColumnFiltersState | undefined) => any) | undefined;
+        "onUpdate:columnOrder"?: ((value: ColumnOrderState | undefined) => any) | undefined;
+        "onUpdate:columnVisibility"?: ((value: VisibilityState | undefined) => any) | undefined;
+        "onUpdate:columnPinning"?: ((value: ColumnPinningState | undefined) => any) | undefined;
+        "onUpdate:columnSizing"?: ((value: ColumnSizingState | undefined) => any) | undefined;
+        "onUpdate:columnSizingInfo"?: ((value: ColumnSizingInfoState | undefined) => any) | undefined;
+        "onUpdate:rowSelection"?: ((value: RowSelectionState | undefined) => any) | undefined;
+        "onUpdate:rowPinning"?: ((value: RowPinningState | undefined) => any) | undefined;
+        "onUpdate:sorting"?: ((value: SortingState | undefined) => any) | undefined;
+        "onUpdate:grouping"?: ((value: GroupingState | undefined) => any) | undefined;
+        "onUpdate:expanded"?: ((value: ExpandedState | undefined) => any) | undefined;
+        "onUpdate:pagination"?: ((value: PaginationState | undefined) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: any;
+        tableRef: import("vue").ShallowRef<MaybeNull<HTMLTableElement>, MaybeNull<HTMLTableElement>>;
+        tableApi: import("@tanstack/table-core").Table<T>;
+    }>) => void;
     attrs: any;
     slots: TableSlots<T>;
-    emit: ((evt: "update:globalFilter", value: string) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState) => void) & ((evt: "update:columnOrder", value: ColumnOrderState) => void) & ((evt: "update:columnVisibility", value: VisibilityState) => void) & ((evt: "update:columnPinning", value: ColumnPinningState) => void) & ((evt: "update:columnSizing", value: ColumnSizingState) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState) => void) & ((evt: "update:rowSelection", value: RowSelectionState) => void) & ((evt: "update:rowPinning", value: RowPinningState) => void) & ((evt: "update:sorting", value: SortingState) => void) & ((evt: "update:grouping", value: GroupingState) => void) & ((evt: "update:expanded", value: ExpandedState) => void) & ((evt: "update:pagination", value: PaginationState) => void);
+    emit: ((evt: "update:globalFilter", value: string | undefined) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((evt: "update:columnOrder", value: ColumnOrderState | undefined) => void) & ((evt: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((evt: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((evt: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((evt: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((evt: "update:rowPinning", value: RowPinningState | undefined) => void) & ((evt: "update:sorting", value: SortingState | undefined) => void) & ((evt: "update:grouping", value: GroupingState | undefined) => void) & ((evt: "update:expanded", value: ExpandedState | undefined) => void) & ((evt: "update:pagination", value: PaginationState | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Tabs.vue

@@ -1,70 +1,117 @@
 <script>
-
+import theme from "#build/ui/tabs";
 </script>
 
 <script setup>
 import { reactivePick } from "@vueuse/core";
 import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, useForwardPropsEmits } from "reka-ui";
-import { computed } from "vue";
-import { useTheme } from "../composables/useTheme";
+import { computed, ref } from "vue";
+import { useAppConfig } from "#imports";
 import { get } from "../utils";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+import Badge from "./Badge.vue";
+import Icon from "./Icon.vue";
 const props = defineProps({
   as: { type: null, required: false },
   items: { type: Array, required: false },
-  variant: { type: null, required: false, default: "solid" },
+  variant: { type: null, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
+  color: { type: null, required: false },
   size: { type: null, required: false },
-  evenly: { type: Boolean, required: false, default: true },
   content: { type: Boolean, required: false, default: true },
-  labelKey: { type: String, required: false, default: "label" },
-  class: { type: null, required: false },
+  labelKey: { type: null, required: false, default: "label" },
   ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
   defaultValue: { type: [String, Number], required: false, default: "0" },
   modelValue: { type: [String, Number], required: false },
   activationMode: { type: String, required: false },
-  unmountOnHide: { type: Boolean, required: false }
+  unmountOnHide: { type: Boolean, required: false, default: true }
 });
 const emit = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "activationMode", "unmountOnHide"), emit);
-const { generateStyle } = useTheme();
-const style = computed(() => generateStyle("tabs", props));
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "unmountOnHide"), emit);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.tabs));
+  return styler(props);
+});
+const triggersRef = ref([]);
+defineExpose({
+  triggersRef
+});
 </script>
 
 <template>
-  <TabsRoot v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
-    <TabsList :class="style.list({ class: props.ui?.list })" data-part="list">
-      <TabsIndicator :class="style.indicator({ class: props.ui?.indicator })" data-part="indicator" />
+  <TabsRoot
+    v-bind="rootProps"
+    :model-value="props.modelValue"
+    :default-value="props.defaultValue"
+    :orientation="props.orientation"
+    :activation-mode="props.activationMode"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+  >
+    <TabsList :class="ui.list({ class: props.ui?.list })" data-part="list">
+      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator" />
+
+      <slot name="list-leading">
+      </slot>
 
       <TabsTrigger
         v-for="(item, index) of items"
+        :ref="(el) => triggersRef[index] = el"
         :key="index"
-        :value="item.value || String(index)"
+        :value="item.value ?? String(index)"
         :disabled="item.disabled"
-        :class="style.trigger({ class: props.ui?.trigger })"
+        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
         data-part="trigger"
       >
-        <slot name="leading" :item="item" :index="index">
-          <span v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })" data-part="leading-icon"></span>
+        <slot name="leading" :item="item" :index="index" :ui="ui">
+          <Icon
+            v-if="item.icon"
+            :name="item.icon"
+            :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })"
+            data-part="leadingIcon"
+          />
+          <Avatar
+            v-else-if="item.avatar"
+            :size="item.ui?.leadingAvatarSize || props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
+            v-bind="item.avatar"
+            :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })"
+            data-part="leadingAvatar"
+          />
         </slot>
 
-        <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })" data-part="label">
+        <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })" data-part="label">
           <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
         </span>
 
-        <slot name="trailing" :item="item" :index="index"></slot>
+        <slot name="trailing" :item="item" :index="index" :ui="ui">
+          <Badge
+            v-if="item.badge !== void 0"
+            color="neutral"
+            variant="outline"
+            :size="item.ui?.trailingBadgeSize || props.ui?.trailingBadgeSize || ui.trailingBadgeSize()"
+            v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
+            :class="ui.trailingBadge({ class: [props.ui?.trailingBadge, item.ui?.trailingBadge] })"
+            data-part="trailingBadge"
+          />
+        </slot>
       </TabsTrigger>
+
+      <slot name="list-trailing"></slot>
     </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 })"
+        :value="item.value ?? String(index)"
+        :class="ui.content({ class: [props.ui?.content, item.ui?.content] })"
         data-part="content"
       >
-        <slot :name="item.slot || 'content'" :item="item" :index="index">
+        <slot :name="item.slot || 'content'" :item="item" :index="index" :ui="ui">
           {{ item.content }}
         </slot>
       </TabsContent>

package/dist/runtime/components/Tabs.vue.d.ts

@@ -1,42 +1,42 @@
+import type { ComponentPublicInstance } from 'vue';
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
-import type { tabs } from '../theme/index.js';
-import type { ComponentAttrs, DynamicSlots } from '../types/index.js';
-export interface TabsEmits extends TabsRootEmits<string | number> {
-}
+import theme from '#build/ui/tabs';
+import type { AvatarProps, BadgeProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
+import type { DynamicSlots, GetItemKeys, StaticSlot } from '../types/utils';
 export interface TabsItem {
     label?: string;
-    icon?: string;
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
+    /** Display a badge on the item. */
+    badge?: string | number | BadgeProps;
     slot?: string;
     content?: string;
     /** A unique value for the tab item. Defaults to the index. */
     value?: string | number;
     disabled?: boolean;
+    ui?: Pick<ComponentUIProps<typeof theme>, 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'label' | 'trailingBadge' | 'trailingBadgeSize' | 'content'>;
     [key: string]: any;
 }
-type SlotProps<T extends TabsItem> = (props: {
-    item: T;
-    index: number;
-}) => any;
-export type TabsSlots<T extends TabsItem = TabsItem> = {
-    leading?: SlotProps<T>;
-    default?: SlotProps<T>;
-    trailing?: SlotProps<T>;
-    content?: SlotProps<T>;
-} & DynamicSlots<T, undefined, SlotProps<T>>;
-type TabsVariants = VariantProps<typeof tabs>;
-export interface TabsProps<T extends TabsItem = TabsItem> extends ComponentAttrs<typeof tabs>, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
+type ThemeVariants = VariantProps<typeof theme>;
+export interface TabsProps<T extends TabsItem = TabsItem> extends ComponentBaseProps, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
     /**
      * The element or component this component should render as.
      * @default "div"
      */
     as?: TabsRootProps<string | number>['as'];
     items?: T[];
-    variant?: TabsVariants['variant'];
-    orientation?: TabsVariants['orientation'];
-    size?: TabsVariants['size'];
-    /** @default true */
-    evenly?: boolean;
+    /** @default "pill" */
+    variant?: ThemeVariants['variant'];
+    /**
+     * The orientation of the tabs.
+     * @default "horizontal"
+     */
+    orientation?: ThemeVariants['orientation'];
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
     /**
      * The content of the tabs, can be disabled to prevent rendering the content.
      * @default true
@@ -46,20 +46,52 @@ export interface TabsProps<T extends TabsItem = TabsItem> extends ComponentAttrs
      * The key used to get the label from the item.
      * @default "label"
      */
-    labelKey?: string;
+    labelKey?: GetItemKeys<T>;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface TabsEmits extends TabsRootEmits<string | number> {
 }
-declare const _default: <T extends TabsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & TabsProps<T> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+export type TabsSlots<T extends TabsItem = TabsItem> = {
+    'leading': StaticSlot<{
+        item: T;
+        index: number;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'default': StaticSlot<{
+        item: T;
+        index: number;
+    }>;
+    'trailing': StaticSlot<{
+        item: T;
+        index: number;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'content': StaticSlot<{
+        item: T;
+        index: number;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'list-leading': StaticSlot;
+    'list-trailing': StaticSlot;
+} & DynamicSlots<T, undefined, {
+    index: number;
+    ui: ComponentStyler<typeof theme>;
+}>;
+declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<TabsProps<T> & {
+        "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        triggersRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
+    }>) => void;
     attrs: any;
     slots: TabsSlots<T>;
     emit: (evt: "update:modelValue", payload: string | number) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};