@kine-design/core 0.0.1-beta.1 → 0.0.1-beta.2

package/compositions/virtualList/enums.ts

@@ -0,0 +1,52 @@
+/**
+ * @description 虚拟列表 action 枚举
+ * @author 阿怪
+ * @date 2026/2/25 13:30
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+/** 元素可见性变化的动作类型 */
+export enum ACTION {
+  /** 从顶部进入可视区域（开始露出） */
+  ENTER_TOP_START,
+  /** 从顶部完全进入可视区域 */
+  ENTER_TOP_END,
+  /** 从底部进入可视区域（开始露出） */
+  ENTER_BOTTOM_START,
+  /** 从底部完全进入可视区域 */
+  ENTER_BOTTOM_END,
+  /** 从顶部开始离开可视区域 */
+  LEAVE_TOP_START,
+  /** 从顶部完全离开可视区域 */
+  LEAVE_TOP_END,
+  /** 从底部开始离开可视区域 */
+  LEAVE_BOTTOM_START,
+  /** 从底部完全离开可视区域 */
+  LEAVE_BOTTOM_END,
+  /** 未知状态 */
+  UNKNOWN,
+}
+
+/** 元素相对于容器的位置类型 */
+export enum POSITION_TYPE {
+  /** 完全在可视区域上方 */
+  TOP,
+  /** 部分在可视区域上方（上半部分露出） */
+  TOP_VISIBLE,
+  /** 完全在可视区域内 */
+  VISIBLE,
+  /** 部分在可视区域下方（下半部分露出） */
+  BOTTOM_VISIBLE,
+  /** 完全在可视区域下方 */
+  BOTTOM,
+}
+
+/** 元素信息记录 */
+export type EntryInfo = {
+  ratio: number;
+  position: POSITION_TYPE;
+  realIndex: number;
+  translateY: number;
+};

package/compositions/virtualList/useContainerObserver.ts

@@ -0,0 +1,82 @@
+/**
+ * @description 容器 IntersectionObserver 管理
+ * @author 阿怪
+ * @date 2026/2/25 13:30
+ * @version v2.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 管理 IntersectionObserver 的创建、observe/unobserve，配合 ResizeObserver 处理容器尺寸变化
+ */
+import { Ref } from 'vue';
+import { useResizeObserver } from '../common/useResizeObserver';
+
+export default function useContainerObserver(options: {
+  containerRef: Ref<HTMLElement | null>;
+  threshold?: number | number[];
+  getTarget: () => ArrayLike<Element>;
+  callback: (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => void;
+}) {
+  let ob: IntersectionObserver | undefined;
+  const observeList: Element[] = [];
+
+  // 队列：在 observer 创建前缓存操作
+  const eventQueue: Array<{ target: ArrayLike<Element> | Element; type: 'observe' | 'unobserve' }> = [];
+
+  const processTarget = (target: ArrayLike<Element> | Element, type: 'observe' | 'unobserve') => {
+    if (!ob) {
+      eventQueue.push({ target, type });
+      return;
+    }
+    if ('length' in target) {
+      for (let i = 0; i < target.length; i++) {
+        if (target[i]) {
+          ob[type](target[i]);
+        }
+      }
+    } else {
+      ob[type](target);
+    }
+  };
+
+  const clearQueue = () => {
+    while (eventQueue.length) {
+      const { target, type } = eventQueue.shift()!;
+      processTarget(target, type);
+    }
+  };
+
+  const reObserve = (target: ArrayLike<Element>) => {
+    // 先 unobserve 所有已观察的
+    processTarget(observeList, 'unobserve');
+    observeList.length = 0;
+    // 再 observe 新的
+    for (let i = 0; i < target.length; i++) {
+      observeList.push(target[i]);
+    }
+    processTarget(target, 'observe');
+  };
+
+  const initOb = () => {
+    if (ob) {
+      ob.disconnect();
+    }
+    ob = new IntersectionObserver(options.callback, {
+      root: options.containerRef.value,
+      threshold: options.threshold ?? [0, 1],
+    });
+    clearQueue();
+  };
+
+  useResizeObserver(options.containerRef, () => {
+    if (options.containerRef.value) {
+      if (!ob) {
+        initOb();
+      }
+      const target = options.getTarget();
+      reObserve(target);
+    }
+  });
+
+  return { reObserve };
+}

package/compositions/virtualList/useEntries.ts

@@ -0,0 +1,248 @@
+/**
+ * @description 虚拟列表 IntersectionObserver 回调处理
+ * @author 阿怪
+ * @date 2026/2/25 13:30
+ * @version v2.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 基于 IntersectionObserver 方案，通过观察子元素可见性变化判断滚动方向和位置
+ */
+import { Ref } from 'vue';
+import { ACTION, POSITION_TYPE, EntryInfo } from './enums';
+
+/** 位置变化 → 动作映射表 */
+const ACTION_POSITION_MAP: Record<POSITION_TYPE, Partial<Record<POSITION_TYPE, ACTION>>> = {
+  [POSITION_TYPE.TOP]: {
+    [POSITION_TYPE.TOP_VISIBLE]: ACTION.LEAVE_TOP_START,
+    [POSITION_TYPE.VISIBLE]: ACTION.LEAVE_TOP_END,
+    [POSITION_TYPE.BOTTOM_VISIBLE]: ACTION.ENTER_BOTTOM_START,
+    [POSITION_TYPE.BOTTOM]: ACTION.ENTER_BOTTOM_END,
+  },
+  [POSITION_TYPE.TOP_VISIBLE]: {
+    [POSITION_TYPE.TOP]: ACTION.ENTER_TOP_END,
+    [POSITION_TYPE.VISIBLE]: ACTION.LEAVE_TOP_END,
+    [POSITION_TYPE.BOTTOM_VISIBLE]: ACTION.ENTER_BOTTOM_START,
+    [POSITION_TYPE.BOTTOM]: ACTION.ENTER_BOTTOM_END,
+  },
+  [POSITION_TYPE.VISIBLE]: {
+    [POSITION_TYPE.TOP]: ACTION.ENTER_TOP_END,
+    [POSITION_TYPE.TOP_VISIBLE]: ACTION.ENTER_TOP_START,
+    [POSITION_TYPE.BOTTOM_VISIBLE]: ACTION.ENTER_BOTTOM_START,
+    [POSITION_TYPE.BOTTOM]: ACTION.ENTER_BOTTOM_END,
+  },
+  [POSITION_TYPE.BOTTOM_VISIBLE]: {
+    [POSITION_TYPE.TOP]: ACTION.ENTER_TOP_END,
+    [POSITION_TYPE.TOP_VISIBLE]: ACTION.ENTER_TOP_START,
+    [POSITION_TYPE.VISIBLE]: ACTION.LEAVE_BOTTOM_END,
+    [POSITION_TYPE.BOTTOM]: ACTION.ENTER_BOTTOM_END,
+  },
+  [POSITION_TYPE.BOTTOM]: {
+    [POSITION_TYPE.TOP]: ACTION.ENTER_TOP_END,
+    [POSITION_TYPE.TOP_VISIBLE]: ACTION.ENTER_TOP_START,
+    [POSITION_TYPE.VISIBLE]: ACTION.LEAVE_BOTTOM_END,
+    [POSITION_TYPE.BOTTOM_VISIBLE]: ACTION.LEAVE_BOTTOM_START,
+  },
+};
+
+/** 根据 entry 计算元素相对于容器的位置 */
+const getPosition = (entry: IntersectionObserverEntry): POSITION_TYPE => {
+  const { top, bottom } = entry.rootBounds!;
+  const { top: entryTop, bottom: entryBottom } = entry.boundingClientRect;
+  const ratio = entry.intersectionRatio;
+
+  if (entryTop >= top) {
+    if (entryBottom <= bottom) {
+      return POSITION_TYPE.VISIBLE;
+    }
+    return ratio > 0 ? POSITION_TYPE.BOTTOM_VISIBLE : POSITION_TYPE.BOTTOM;
+  }
+
+  return ratio > 0 ? POSITION_TYPE.TOP_VISIBLE : POSITION_TYPE.TOP;
+};
+
+/** 根据前后位置变化得出动作 */
+const getAction = (entry: IntersectionObserverEntry, prevInfo: EntryInfo): ACTION => {
+  const prevPosition = prevInfo.position;
+  const currentPosition = getPosition(entry);
+
+  let action: ACTION;
+
+  if (prevPosition === currentPosition) {
+    const ratioSub = entry.intersectionRatio - prevInfo.ratio;
+    if (prevPosition === POSITION_TYPE.TOP_VISIBLE) {
+      action = ratioSub > 0 ? ACTION.ENTER_TOP_START : ACTION.LEAVE_TOP_END;
+    } else if (prevPosition === POSITION_TYPE.BOTTOM_VISIBLE) {
+      action = ratioSub > 0 ? ACTION.ENTER_BOTTOM_START : ACTION.LEAVE_BOTTOM_END;
+    } else {
+      action = ACTION.UNKNOWN;
+    }
+  } else {
+    action = ACTION_POSITION_MAP[prevPosition]?.[currentPosition] ?? ACTION.UNKNOWN;
+  }
+
+  prevInfo.position = currentPosition;
+  return action;
+};
+
+
+export interface UseEntriesOptions {
+  /** 获取列表子元素 */
+  getChildren: () => ArrayLike<Element>;
+  /** 获取当前可见数量 */
+  getVisibleCount: () => number;
+  /** 从指定位置重新渲染列表 */
+  getList: (from: number) => void;
+  /** 获取当前渲染边界信息 */
+  getInfo: () => {
+    renderFrom: number;
+    realFrom: number;
+    realEnd: number;
+    renderEnd: number;
+  };
+  /** 设置可见数量 */
+  setVisibleCount: (count: number) => void;
+  /** 获取总数 */
+  getTotal: () => number;
+  /** 触底回调 */
+  reachBottom: () => void;
+  /** translateY 样式 ref */
+  styleRef: Ref<{ transform: string }>;
+}
+
+export default function useEntries(options: UseEntriesOptions) {
+  const entriesInfoWeakMap: WeakMap<Element, EntryInfo> = new WeakMap();
+  const transformYList: number[] = [0];
+
+  /** 首次全部元素进入时的初始化 */
+  const onInit = (entries: IntersectionObserverEntry[]) => {
+    const info = options.getInfo();
+    const { renderFrom, realFrom, realEnd } = info;
+
+    // 检查可视范围内的元素是否都可见，用于计算 visibleCount
+    const realFromEntry = entries[realFrom - renderFrom];
+    const realEndEntry = entries[realEnd - renderFrom - 1];
+    if (realFromEntry?.isIntersecting && realEndEntry?.isIntersecting) {
+      const totalHeight = entries.reduce((sum, e) => sum + e.boundingClientRect.height, 0);
+      const avgHeight = totalHeight / entries.length;
+      const rootHeight = entries[0].rootBounds!.height;
+      options.setVisibleCount(Math.ceil(rootHeight / avgHeight));
+      options.getList(info.realFrom);
+    }
+
+    const visibleCount = options.getVisibleCount();
+    entries.forEach((e, i) => {
+      const realIndex = i + renderFrom;
+      if (realIndex < visibleCount) {
+        transformYList[realIndex] = 0;
+      } else {
+        const prevH = transformYList[realIndex - 1];
+        if (prevH != null) {
+          transformYList[realIndex] = prevH + e.boundingClientRect.height;
+        }
+      }
+
+      entriesInfoWeakMap.set(e.target, {
+        ratio: e.intersectionRatio,
+        position: getPosition(e),
+        realIndex,
+        translateY: transformYList[realIndex] ?? 0,
+      });
+    });
+  };
+
+  /** 处理元素可见性变化 */
+  const entriesHandler = (entries: IntersectionObserverEntry[]) => {
+    const maxIndex = options.getTotal() - 1;
+    let touchBottom = false;
+
+    const actionList = entries.map(e => {
+      const prevInfo = entriesInfoWeakMap.get(e.target);
+      if (!prevInfo) {
+        return { action: ACTION.UNKNOWN, target: e.target };
+      }
+      const action = getAction(e, prevInfo);
+      prevInfo.ratio = e.intersectionRatio;
+
+      if (prevInfo.realIndex === maxIndex && e.isIntersecting) {
+        touchBottom = true;
+      }
+
+      return { action, target: e.target };
+    });
+
+    if (touchBottom) {
+      options.reachBottom();
+    }
+
+    // 按 action 分组
+    const actionMap = new Map<ACTION, Element[]>();
+    actionList.forEach(({ action, target }) => {
+      const list = actionMap.get(action);
+      if (list) {
+        list.push(target);
+      } else {
+        actionMap.set(action, [target]);
+      }
+    });
+
+    // 上拉：元素从顶部完全离开 → 列表向下滚动
+    const leaveTopTargets = actionMap.get(ACTION.LEAVE_TOP_END);
+    if (leaveTopTargets) {
+      const target = leaveTopTargets[0];
+      const info = entriesInfoWeakMap.get(target);
+      if (info) {
+        options.getList(info.realIndex);
+        const ty = transformYList[info.realIndex - 1] ?? 0;
+        options.styleRef.value = { transform: `translateY(${ty}px)` };
+      }
+      return;
+    }
+
+    // 下拉：元素从顶部进入 → 列表向上滚动
+    const enterTopTargets = actionMap.get(ACTION.ENTER_TOP_END);
+    if (enterTopTargets) {
+      const target = enterTopTargets[enterTopTargets.length - 1];
+      const info = entriesInfoWeakMap.get(target);
+      if (info) {
+        options.getList(info.realIndex);
+        const ty = transformYList[info.realIndex - 1] ?? 0;
+        options.styleRef.value = { transform: `translateY(${ty}px)` };
+      }
+      return;
+    }
+
+    // 快速滚动到底部的边界修正
+    const enterBottomTargets = actionMap.get(ACTION.ENTER_BOTTOM_END);
+    if (enterBottomTargets) {
+      requestAnimationFrame(() => {
+        const firstEntry = entries[0];
+        const firstInfo = entriesInfoWeakMap.get(firstEntry.target);
+        if (firstInfo?.position === POSITION_TYPE.TOP) {
+          // 所有元素都已经滚过去了，重置到顶部
+          const children = options.getChildren();
+          if (children.length > 0) {
+            const firstChild = children[0];
+            const rect = firstChild.getBoundingClientRect();
+            const rootBottom = firstEntry.rootBounds?.bottom ?? 0;
+            if (rect.bottom > rootBottom) {
+              options.getList(0);
+              options.styleRef.value = { transform: 'translateY(0px)' };
+            }
+          }
+        }
+      });
+    }
+  };
+
+  /** IntersectionObserver 回调 */
+  const cb = (entries: IntersectionObserverEntry[], _observer: IntersectionObserver) => {
+    if (entries.length === options.getChildren().length) {
+      onInit(entries);
+      return;
+    }
+    entriesHandler(entries);
+  };
+
+  return { cb };
+}

package/compositions/virtualList/useHeightCache.ts

@@ -0,0 +1,83 @@
+/**
+ * @description 虚拟列表高度缓存
+ * @author 阿怪
+ * @date 2026/2/25 14:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 管理每个列表项的高度缓存，支持预估高度和实际高度
+ * 提供基于 scrollTop 的二分查找定位
+ */
+
+export interface HeightCache {
+  /** 更新指定索引的实际高度 */
+  update: (index: number, height: number) => void;
+  /** 获取指定索引的高度（实际或预估） */
+  getHeight: (index: number) => number;
+  /** 获取 [0, index) 的累计高度（即第 index 项的顶部偏移） */
+  getOffset: (index: number) => number;
+  /** 获取所有项的总高度 */
+  getTotalHeight: () => number;
+  /** 根据 scrollTop 二分查找对应的起始索引 */
+  findIndex: (scrollTop: number) => number;
+  /** 重置缓存（列表数据变化时） */
+  reset: (total: number) => void;
+}
+
+export function createHeightCache(total: number, estimatedHeight: number): HeightCache {
+  // 存储实际测量的高度，null 表示未测量
+  const heights: (number | null)[] = Array.from({ length: total }, () => null);
+
+  const getHeight = (index: number): number => {
+    return heights[index] ?? estimatedHeight;
+  };
+
+  const update = (index: number, height: number) => {
+    if (index >= 0 && index < heights.length) {
+      heights[index] = height;
+    }
+  };
+
+  const getOffset = (index: number): number => {
+    let offset = 0;
+    const end = Math.min(index, heights.length);
+    for (let i = 0; i < end; i++) {
+      offset += getHeight(i);
+    }
+    return offset;
+  };
+
+  const getTotalHeight = (): number => {
+    return getOffset(heights.length);
+  };
+
+  /** 二分查找：scrollTop 对应的第一个可见项索引 */
+  const findIndex = (scrollTop: number): number => {
+    let low = 0;
+    let high = heights.length - 1;
+
+    while (low <= high) {
+      const mid = (low + high) >>> 1;
+      const offset = getOffset(mid);
+      const offsetEnd = offset + getHeight(mid);
+
+      if (offsetEnd <= scrollTop) {
+        low = mid + 1;
+      } else if (offset > scrollTop) {
+        high = mid - 1;
+      } else {
+        return mid;
+      }
+    }
+
+    return Math.min(low, heights.length - 1);
+  };
+
+  const reset = (newTotal: number) => {
+    heights.length = newTotal;
+    heights.fill(null);
+  };
+
+  return { update, getHeight, getOffset, getTotalHeight, findIndex, reset };
+}

package/compositions/virtualList/useSentinelObserver.ts

@@ -0,0 +1,81 @@
+/**
+ * @description sentinel 哨兵元素 IntersectionObserver
+ * @author 阿怪
+ * @date 2026/2/25 14:00
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ *
+ * 只观察两个哨兵元素（顶部和底部），替代对每个列表项的 observe
+ * 哨兵进入可视区触发回调，配合 scrollTop 定位
+ */
+import { Ref, watch, onBeforeUnmount } from 'vue';
+
+export interface SentinelObserverOptions {
+  containerRef: Ref<HTMLElement | null>;
+  topSentinelRef: Ref<HTMLElement | null>;
+  bottomSentinelRef: Ref<HTMLElement | null>;
+  /** 需要更新可视列表时调用 */
+  onUpdate: () => void;
+  /** 底部哨兵完全进入可视区（触底） */
+  onReachBottom?: () => void;
+}
+
+export function useSentinelObserver(options: SentinelObserverOptions) {
+  let ob: IntersectionObserver | undefined;
+
+  const cleanup = () => {
+    if (ob) {
+      ob.disconnect();
+      ob = undefined;
+    }
+  };
+
+  const initObserver = () => {
+    const container = options.containerRef.value;
+    if (!container) return;
+
+    cleanup();
+
+    ob = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+
+          if (entry.target === options.bottomSentinelRef.value) {
+            options.onUpdate();
+            options.onReachBottom?.();
+          } else if (entry.target === options.topSentinelRef.value) {
+            options.onUpdate();
+          }
+        }
+      },
+      {
+        root: container,
+        threshold: 0,
+      },
+    );
+
+    if (options.topSentinelRef.value) {
+      ob.observe(options.topSentinelRef.value);
+    }
+    if (options.bottomSentinelRef.value) {
+      ob.observe(options.bottomSentinelRef.value);
+    }
+  };
+
+  /** 重新观察哨兵（列表更新后哨兵 DOM 可能重建） */
+  const reobserve = () => {
+    initObserver();
+  };
+
+  watch(options.containerRef, () => {
+    if (options.containerRef.value) {
+      initObserver();
+    }
+  });
+
+  onBeforeUnmount(cleanup);
+
+  return { reobserve, cleanup };
+}

package/dist/components/base/affix/useAffix.d.ts

@@ -1,7 +1,8 @@
 import { AffixProps } from './props';
 export default function useAffix(props: Required<AffixProps>, emit: (event: string, ...args: unknown[]) => void): {
-    wrapRef: any;
-    affixed: any;
-    affixStyle: any;
-    placeholderHeight: any;
+    wrapperRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    wrapRef: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    affixed: import('vue').Ref<boolean, boolean>;
+    affixStyle: import('vue').Ref<Record<string, string>, Record<string, string>>;
+    placeholderHeight: import('vue').Ref<number, number>;
 };

package/dist/components/base/anchor/useAnchor.d.ts

@@ -1,6 +1,6 @@
 import { AnchorProps } from './props';
 export default function useAnchor(props: Required<AnchorProps>, emit: (event: string, ...args: unknown[]) => void): {
-    currentLink: any;
+    currentLink: import('vue').Ref<string, string>;
     registerLink: (href: string) => void;
     unregisterLink: (href: string) => void;
     handleClick: (href: string) => void;

package/dist/components/base/autoComplete/useAutoComplete.d.ts

@@ -1,9 +1,17 @@
 import { AutoCompleteProps, AutoCompleteOption } from './props';
 export declare function useAutoComplete(props: AutoCompleteProps, ctx: any): {
-    inputValue: any;
-    isOpen: any;
-    loading: any;
-    suggestions: any;
+    inputValue: import('vue').Ref<string, string>;
+    isOpen: import('vue').Ref<boolean, boolean>;
+    loading: import('vue').Ref<boolean, boolean>;
+    suggestions: import('vue').Ref<{
+        [x: string]: unknown;
+        value: string;
+        label?: string | undefined;
+    }[], AutoCompleteOption[] | {
+        [x: string]: unknown;
+        value: string;
+        label?: string | undefined;
+    }[]>;
     onInput: (e: Event) => void;
     onFocus: (e: FocusEvent) => void;
     onBlur: (e: FocusEvent) => void;

package/dist/components/base/backTop/useBackTop.d.ts

@@ -1,5 +1,5 @@
 import { BackTopProps } from './props';
 export default function useBackTop(props: Required<BackTopProps>): {
-    visible: any;
+    visible: import('vue').Ref<boolean, boolean>;
     scrollToTop: () => void;
 };

package/dist/components/base/button/index.d.ts

@@ -1,8 +1,17 @@
 export declare const ButtonCore: {
     props: import('../../types/props').MCOPO<import('./props').ButtonProps>;
-    useButton: (props: import('./props').ButtonProps, ctx: SetupContext<E, S>) => {
+    useButton: (props: import('./props').ButtonProps, ctx: {
+        attrs: import('vue').Attrs;
+        slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        emit: (event: string, ...args: any[]) => void;
+        expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed) => void;
+    }) => {
         domType: string;
-        slot: any;
+        slot: string | import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+            [key: string]: any;
+        }>[] | undefined;
         domProps: {
             class: (string | {
                 'm-button-disabled': boolean | undefined;

package/dist/components/base/button/useButton.d.ts

@@ -1,7 +1,16 @@
 import { ButtonProps } from './props';
-export declare const useButton: (props: ButtonProps, ctx: SetupContext<E, S>) => {
+export declare const useButton: (props: ButtonProps, ctx: {
+    attrs: import('vue').Attrs;
+    slots: Readonly<{
+        [name: string]: import('vue').Slot<any> | undefined;
+    }>;
+    emit: (event: string, ...args: any[]) => void;
+    expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed) => void;
+}) => {
     domType: string;
-    slot: any;
+    slot: string | import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+        [key: string]: any;
+    }>[] | undefined;
     domProps: {
         class: (string | {
             'm-button-disabled': boolean | undefined;

package/dist/components/base/carousel/useCarousel.d.ts

@@ -1,10 +1,13 @@
 import { CarouselProps } from './props';
-export declare function useCarousel(props: Required<CarouselProps>, emit: (event: 'change', index: number) => void, count: () => number): {
-    activeIndex: any;
+export declare function useCarousel(props: Required<CarouselProps>, emit: (event: string, ...args: any[]) => void, count: () => number): {
+    activeIndex: import('vue').Ref<number, number>;
+    trackIndex: import('vue').Ref<number, number>;
+    disableTransition: import('vue').Ref<boolean, boolean>;
     prev: () => void;
     next: () => void;
     setActive: (index: number) => void;
     startAutoplay: () => void;
     stopAutoplay: () => void;
-    arrowsClass: any;
+    arrowsClass: import('vue').ComputedRef<"k-carousel-arrows-hover" | "k-carousel-arrows-hidden" | "k-carousel-arrows-always">;
+    onTrackTransitionEnd: () => void;
 };