@byyuurin/ui 0.1.0 → 0.3.0

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

@@ -6,6 +6,7 @@ import type { PrimitiveProps } from 'reka-ui';
 import type { WatchOptions } from 'vue';
 import theme from '#build/ui/table';
 import type { ComponentBaseProps, ComponentUIProps } from '../types';
+import type { TableHTMLAttributes } from '../types/html';
 import type { MaybeNull, StaticSlot } from '../types/utils';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
@@ -42,7 +43,7 @@ export interface TableOptions<T extends TableData = TableData> extends Omit<Core
     renderFallbackValue?: CoreOptions<T>['renderFallbackValue'];
 }
 type ThemeVariants = VariantProps<typeof theme>;
-export interface TableProps<T extends TableData = TableData> extends ComponentBaseProps, TableOptions<T> {
+export interface TableProps<T extends TableData = TableData> extends ComponentBaseProps, TableOptions<T>, /** @vue-ignore */ TableHTMLAttributes {
     /**
      * The element or component this component should render as.
      * @default "div"
@@ -186,8 +187,10 @@ export type TableSlots<T> = {
     '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> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(TableProps<T> & {
         globalFilter?: string;
         columnFilters?: ColumnFiltersState;
         columnOrder?: ColumnOrderState;
@@ -202,20 +205,22 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
         expanded?: ExpandedState;
         pagination?: PaginationState;
     }) & {
-        "onUpdate:globalFilter"?: ((value: string) => any) | undefined;
-        "onUpdate:columnFilters"?: ((value: ColumnFiltersState) => any) | undefined;
-        "onUpdate:columnOrder"?: ((value: ColumnOrderState) => any) | undefined;
-        "onUpdate:columnVisibility"?: ((value: VisibilityState) => any) | undefined;
-        "onUpdate:columnPinning"?: ((value: ColumnPinningState) => any) | undefined;
-        "onUpdate:columnSizing"?: ((value: ColumnSizingState) => any) | undefined;
-        "onUpdate:columnSizingInfo"?: ((value: ColumnSizingInfoState) => any) | undefined;
-        "onUpdate:rowSelection"?: ((value: RowSelectionState) => any) | undefined;
-        "onUpdate:rowPinning"?: ((value: RowPinningState) => any) | undefined;
-        "onUpdate:sorting"?: ((value: SortingState) => any) | undefined;
-        "onUpdate:grouping"?: ((value: GroupingState) => any) | undefined;
-        "onUpdate:expanded"?: ((value: ExpandedState) => any) | undefined;
-        "onUpdate:pagination"?: ((value: PaginationState) => any) | undefined;
-    }> & import("vue").PublicProps;
+        "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;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         readonly $el: any;
         tableRef: import("vue").ShallowRef<MaybeNull<HTMLTableElement>, MaybeNull<HTMLTableElement>>;
@@ -223,12 +228,12 @@ declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Await
     }>) => 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> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Tabs.vue

@@ -43,78 +43,78 @@ defineExpose({
 </script>
 
 <template>
-  <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)"
-        :disabled="item.disabled"
-        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
-        data-part="trigger"
-      >
-        <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="leading-icon"
-          />
-          <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="leading-avatar"
-          />
-        </slot>
-
-        <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" :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="trailing-badge"
-          />
-        </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="ui.content({ class: [props.ui?.content, item.ui?.content] })"
-        data-part="content"
-      >
-        <slot :name="item.slot || 'content'" :item="item" :index="index" :ui="ui">
-          {{ item.content }}
-        </slot>
-      </TabsContent>
-    </template>
-  </TabsRoot>
+  <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)"
+        :disabled="item.disabled"
+        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
+        data-part="trigger"
+      >
+        <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="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" :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="ui.content({ class: [props.ui?.content, item.ui?.content] })"
+        data-part="content"
+      >
+        <slot :name="item.slot || 'content'" :item="item" :index="index" :ui="ui">
+          {{ item.content }}
+        </slot>
+      </TabsContent>
+    </template>
+  </TabsRoot>
 </template>

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

@@ -1,6 +1,6 @@
-import type { ComponentPublicInstance } from 'vue';
 import type { VariantProps } from '@byyuurin/ui-kit';
 import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
+import type { ComponentPublicInstance } from 'vue';
 import theme from '#build/ui/tabs';
 import type { AvatarProps, BadgeProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps } from '../types';
 import type { DynamicSlots, GetItemKeys, StaticSlot } from '../types/utils';
@@ -77,10 +77,14 @@ export type TabsSlots<T extends TabsItem = TabsItem> = {
     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> & {
+declare const _default: typeof __VLS_export;
+export default _default;
+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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TabsProps<T> & {
         "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         triggersRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
     }>) => void;
@@ -90,8 +94,8 @@ declare const __VLS_export: <T extends TabsItem>(__VLS_props: NonNullable<Awaite
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Textarea.vue

@@ -125,51 +125,51 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
-    <span v-if="isLeading || props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
-      <slot name="leading" :ui="ui">
-        <Icon
-          v-if="isLeading && leadingIconName"
-          :name="leadingIconName"
-          :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
-          data-part="leading-icon"
-        />
-        <Avatar
-          v-else-if="props.avatar"
-          :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
-          v-bind="props.avatar"
-          :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
-          data-part="leading-avatar"
-        />
-      </slot>
-    </span>
-
-    <textarea
-      ref="textareaRef"
-      :value="modelValue"
-      :rows="props.rows"
-      :placeholder="props.placeholder"
-      :required="props.required"
-      v-bind="{ id, name, disabled, ...$attrs, ...ariaAttrs }"
-      :class="ui.base({ class: props.ui?.base })"
-      data-part="base"
-      @input="onInput"
-      @blur="onBlur"
-      @change="onChange"
-      @focus="emitFormFocus"
-    ></textarea>
-
-    <slot :ui="ui"></slot>
-
-    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
-      <slot name="trailing" :ui="ui">
-        <Icon
-          v-if="trailingIconName"
-          :name="trailingIconName"
-          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
-          data-part="trailing-icon"
-        />
-      </slot>
-    </span>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <span v-if="isLeading || props.avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+      <slot name="leading" :ui="ui">
+        <Icon
+          v-if="isLeading && leadingIconName"
+          :name="leadingIconName"
+          :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
+          data-part="leadingIcon"
+        />
+        <Avatar
+          v-else-if="props.avatar"
+          :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()"
+          v-bind="props.avatar"
+          :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
+          data-part="leadingAvatar"
+        />
+      </slot>
+    </span>
+
+    <textarea
+      ref="textareaRef"
+      :value="modelValue"
+      :rows="props.rows"
+      :placeholder="props.placeholder"
+      :required="props.required"
+      v-bind="{ id, name, disabled, ...$attrs, ...ariaAttrs }"
+      :class="ui.base({ class: props.ui?.base })"
+      data-part="base"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="emitFormFocus"
+    ></textarea>
+
+    <slot :ui="ui"></slot>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+      <slot name="trailing" :ui="ui">
+        <Icon
+          v-if="trailingIconName"
+          :name="trailingIconName"
+          :class="ui.trailingIcon({ class: props.ui?.trailingIcon })"
+          data-part="trailingIcon"
+        />
+      </slot>
+    </span>
+  </Primitive>
 </template>

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

@@ -3,11 +3,12 @@ import type { PrimitiveProps } from 'reka-ui';
 import theme from '#build/ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
 import type { ComponentBaseProps, ComponentStyler, ComponentUIProps } from '../types';
+import type { TextareaHTMLAttributes } from '../types/html';
 import type { ModelModifiers } from '../types/input';
 import type { MaybeNull, StaticSlot } from '../types/utils';
 type TextareaValue = MaybeNull<string | number>;
 type ThemeVariants = VariantProps<typeof theme>;
-export interface TextareaProps<T extends TextareaValue = TextareaValue> extends ComponentBaseProps, UseComponentIconsProps {
+export interface TextareaProps<T extends TextareaValue = TextareaValue> extends ComponentBaseProps, UseComponentIconsProps, /** @vue-ignore */ Omit<TextareaHTMLAttributes, 'name' | 'placeholder' | 'required' | 'autofocus' | 'disabled' | 'rows'> {
     /**
      * The element or component this component should render as.
      * @default "div"
@@ -35,7 +36,7 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     autoresizeDelay?: number;
     modelValue?: T;
     defaultValue?: T;
-    modelModifiers?: ModelModifiers;
+    modelModifiers?: ModelModifiers<T>;
     ui?: ComponentUIProps<typeof theme>;
 }
 export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
@@ -54,23 +55,27 @@ export interface TextareaSlots {
         ui: ComponentStyler<typeof theme>;
     }>;
 }
-declare const __VLS_export: <T extends TextareaValue>(__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<TextareaProps<T> & {
-        onChange?: ((event: Event) => any) | undefined;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TextareaValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TextareaProps<T> & {
         onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
         "onUpdate:modelValue"?: ((payload: TextareaValue) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: import("vue").ShallowUnwrapRef<{
         textareaRef: import("vue").ShallowRef<MaybeNull<HTMLTextAreaElement>, MaybeNull<HTMLTextAreaElement>>;
     }>) => void;
     attrs: any;
     slots: TextareaSlots;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "blur", event: FocusEvent) => void) & ((evt: "update:modelValue", payload: TextareaValue) => void);
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: TextareaValue) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Timeline.vue

@@ -0,0 +1,102 @@
+<script>
+import theme from "#build/ui/timeline";
+</script>
+
+<script setup>
+import { useVModel } from "@vueuse/core";
+import { Primitive, Separator } from "reka-ui";
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  items: { type: Array, required: true },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  defaultValue: { type: [String, Number], required: false },
+  modelValue: { type: [String, Number], required: false },
+  reverse: { type: Boolean, required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
+});
+const emit = defineEmits(["update:model-value"]);
+const slots = defineSlots();
+const modelValue = useVModel(props, "modelValue", emit);
+const currentStepIndex = computed(() => {
+  const value = modelValue.value ?? props.defaultValue;
+  if (typeof value === "string")
+    return props.items.findIndex((item) => item.value === value) ?? -1;
+  if (props.reverse)
+    return value == null ? -1 : props.items.length - 1 - value;
+  return value ?? -1;
+});
+function getItemState(index) {
+  if (currentStepIndex.value === -1)
+    return void 0;
+  if (index === currentStepIndex.value)
+    return "active";
+  if (props.reverse)
+    return index > currentStepIndex.value ? "completed" : void 0;
+  return index < currentStepIndex.value ? "completed" : void 0;
+}
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.timeline));
+  return styler(props);
+});
+</script>
+
+<template>
+  <Primitive :as="props.as" :data-orientation="props.orientation" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div
+      v-for="(item, index) in props.items"
+      :key="item.value ?? index"
+      :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })"
+      data-part="item"
+      :data-state="getItemState(index)"
+    >
+      <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })" data-part="container">
+        <Avatar
+          :size="props.size"
+          :icon="item.icon"
+          v-bind="typeof item.avatar === 'object' ? item.avatar : {}"
+          :ui="{
+  icon: ui.indicatorIcon({ class: props.ui?.indicatorIcon }),
+  fallback: ui.indicatorFallback({ class: props.ui?.indicatorFallback })
+}"
+          :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })"
+          data-part="indicator"
+        >
+          <slot :name="item.slot ? `${item.slot}-indicator` : 'indicator'" :item="item"></slot>
+        </Avatar>
+
+        <Separator
+          v-if="index < items.length - 1"
+          :orientation="props.orientation"
+          :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator] })"
+          data-part="separator"
+        />
+      </div>
+
+      <div :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })" data-part="wrapper">
+        <div v-if="item.date" :class="ui.date({ class: [props.ui?.date, item.ui?.date] })" data-part="date">
+          <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
+            {{ item.date }}
+          </slot>
+        </div>
+        <div v-if="item.title || !!slots.title" :class="ui.title({ class: [props.ui?.title, item.ui?.title] })" data-part="title">
+          <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
+            {{ item.title }}
+          </slot>
+        </div>
+        <div v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })" data-part="description">
+          <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
+            {{ item.description }}
+          </slot>
+        </div>
+      </div>
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,78 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/timeline';
+import type { AvatarProps, ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { DynamicSlots, StaticSlot } from '../types/utils';
+export interface TimelineItem {
+    date?: string;
+    title?: string;
+    description?: string;
+    icon?: IconProps['name'];
+    avatar?: AvatarProps;
+    value?: string | number;
+    slot?: string;
+    class?: ComponentBaseProps['class'];
+    ui?: Pick<ComponentUIProps<typeof theme>, 'item' | 'container' | 'indicator' | 'separator' | 'wrapper' | 'date' | 'title' | 'description'>;
+    [key: string]: any;
+}
+type ThemeVariants = VariantProps<typeof theme>;
+export interface TimelineProps<T extends TimelineItem = TimelineItem> extends ComponentBaseProps {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    items: T[];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /**
+     * The orientation of the Timeline.
+     * @default "vertical"
+     */
+    orientation?: ThemeVariants['orientation'];
+    defaultValue?: string | number;
+    modelValue?: string | number;
+    reverse?: boolean;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface TimelineEmits {
+    'update:model-value': [value: string | number];
+}
+export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
+    indicator: StaticSlot<{
+        item: T;
+    }>;
+    date: StaticSlot<{
+        item: T;
+    }>;
+    title: StaticSlot<{
+        item: T;
+    }>;
+    description: StaticSlot<{
+        item: T;
+    }>;
+} & DynamicSlots<T, 'indicator' | 'date' | 'title' | 'description', {
+    item: T;
+}, false>;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends TimelineItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TimelineProps<T> & {
+        "onUpdate:model-value"?: ((value: string | number) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: TimelineSlots<T>;
+    emit: (evt: "update:model-value", value: string | number) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};