@yqg/slimfit 0.0.1 → 0.0.2

package/lib/esm/switch/switch.js

@@ -0,0 +1,63 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "loading", "checked", "defaultChecked", "checkedChildren", "unCheckedChildren", "size"];
+import { Switch as AntdSwitch } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import { withFormMode } from "../form-mode";
+import { withDisabledClass } from "../hooks";
+import { IconLoadingConic } from "../icon";
+import "./style.less";
+
+// 使用 withDisabledClass HOC 包装
+import { jsx as _jsx } from "react/jsx-runtime";
+var SwitchWithDisabled = withDisabledClass(AntdSwitch);
+
+// 使用 HOC 包装
+var SwitchComponent = withFormMode(SwitchWithDisabled, 'switch');
+var Switch = function Switch(_ref) {
+  var className = _ref.className,
+    loading = _ref.loading,
+    checked = _ref.checked,
+    defaultChecked = _ref.defaultChecked,
+    checkedChildren = _ref.checkedChildren,
+    unCheckedChildren = _ref.unCheckedChildren,
+    size = _ref.size,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // 处理 onChange 事件
+  var handleChange = function handleChange(newChecked, event) {
+    var _props$onChange;
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, newChecked, event);
+  };
+
+  // 根据尺寸确定 loading 图标大小
+  var loadingIconSize = size === 'small' ? '8px' : '12px';
+
+  // Loading 图标
+  var loadingIcon = /*#__PURE__*/_jsx(IconLoadingConic, {
+    spin: true,
+    style: {
+      fontSize: loadingIconSize,
+      color: 'var(--color-neutral-500)'
+    }
+  });
+
+  // 根据 loading 状态和开关状态决定显示的内容
+  var finalCheckedChildren = loading ? loadingIcon : checkedChildren;
+  var finalUnCheckedChildren = loading ? loadingIcon : unCheckedChildren;
+  return /*#__PURE__*/_jsx(SwitchComponent, _objectSpread(_objectSpread({}, props), {}, {
+    size: size,
+    checked: checked,
+    defaultChecked: defaultChecked,
+    onChange: handleChange,
+    loading: false // 不传递给 Ant Design
+    ,
+    disabled: loading || props.disabled // loading 时禁用
+    ,
+    checkedChildren: finalCheckedChildren,
+    unCheckedChildren: finalUnCheckedChildren,
+    className: classNames('slimfit-switch', className)
+  }));
+};
+export default Switch;
+export { Switch };

package/lib/esm/table/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Table } from './table';
+export type { TableProps } from './table';

package/lib/esm/table/index.js

@@ -0,0 +1 @@
+export { default as Table } from "./table";

package/lib/esm/table/style.css

@@ -0,0 +1,67 @@
+.slimfit-table-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  /* ant-table-cell 样式集合 */
+  .ant-table-cell {
+    /* 当包含两个子元素时调整垂直内边距 */
+    &:has(> :nth-child(2):last-child) {
+      padding-block: 12px;
+    }
+
+    /* 当包含拖拽手柄时调整内边距和宽度 */
+    &:has(.slimfit-table-drag-handle) {
+      box-sizing: border-box;
+      padding-inline: 8px;
+      width: 36px;
+    }
+
+    /* 带有 append 内容时，展开图标增加左内边距 */
+    &.ant-table-cell-with-append span.anticon {
+      padding-right: 8px;
+    }
+  }
+
+  /* 展开行图标单元格后的单元格左内边距 */
+  .ant-table-row-expand-icon-cell + .ant-table-cell {
+    padding-left: 8px;
+  }
+
+  /* 展开行图标单元格样式 */
+  .ant-table-row-expand-icon-cell {
+    padding-inline: 0 !important;
+    text-align: end;
+  }
+
+  /* 展开图标列宽度 */
+  .ant-table-expand-icon-col {
+    width: 36px;
+  }
+}
+
+.slimfit-table-pagination {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.slimfit-table-row-dragging {
+  position: relative;
+  z-index: 9999;
+  /* 使用 neutral-950 (#141535) 的不同透明度创建阴影效果 */
+  filter: drop-shadow(
+      0 16px 32px color-mix(in srgb, var(--color-neutral-950) 6%, transparent)
+    )
+    drop-shadow(
+      0 4px 14px color-mix(in srgb, var(--color-neutral-950) 10%, transparent)
+    );
+}
+
+.slimfit-table-drag-handle {
+  color: var(--color-neutral-500); /* N07: #7E7E99 */
+  cursor: grab;
+  touch-action: none;
+}
+
+.slimfit-table-drag-handle:active {
+  cursor: grabbing;
+}

package/lib/esm/table/table.d.ts

@@ -0,0 +1,8 @@
+import type { TableProps as AntTableProps } from 'antd';
+import { type PaginationProps } from '../';
+import './style.css';
+export interface TableProps<T> extends Omit<AntTableProps<T>, 'pagination'> {
+    pagination?: false | PaginationProps;
+}
+declare function Table<T extends object = any>({ pagination, dataSource, onChange, ...restProps }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Table;

package/lib/esm/table/table.js

@@ -0,0 +1,165 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["pagination", "dataSource", "onChange"];
+import { Table as AntTable } from 'antd';
+import { useEffect, useMemo, useState } from 'react';
+import { Pagination } from "../";
+import { IconDropdown, IconExpandRight } from "../icon";
+import "./style.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Table(_ref) {
+  var pagination = _ref.pagination,
+    dataSource = _ref.dataSource,
+    onChange = _ref.onChange,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  // 分页状态管理
+  var _useState = useState(pagination && _typeof(pagination) === 'object' ? pagination.current || 1 : 1),
+    _useState2 = _slicedToArray(_useState, 2),
+    current = _useState2[0],
+    setCurrent = _useState2[1];
+  var _useState3 = useState(pagination && _typeof(pagination) === 'object' ? pagination.pageSize || 10 : 10),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pageSize = _useState4[0],
+    setPageSize = _useState4[1];
+
+  // 同步外部 pagination 配置
+  useEffect(function () {
+    if (pagination && _typeof(pagination) === 'object') {
+      if (pagination.current !== undefined) {
+        setCurrent(pagination.current);
+      }
+      if (pagination.pageSize !== undefined) {
+        setPageSize(pagination.pageSize);
+      }
+    }
+  }, [pagination]);
+
+  // 计算当前页数据
+  var paginatedData = useMemo(function () {
+    if (pagination === false || !dataSource) {
+      return dataSource;
+    }
+    var start = (current - 1) * pageSize;
+    var end = start + pageSize;
+    return dataSource.slice(start, end);
+  }, [dataSource, current, pageSize, pagination]);
+
+  // 处理分页变化
+  var handlePaginationChange = function handlePaginationChange(page, size) {
+    setCurrent(page);
+    setPageSize(size);
+
+    // 调用外部 onChange
+    if (pagination && _typeof(pagination) === 'object') {
+      var _pagination$onChange;
+      (_pagination$onChange = pagination.onChange) === null || _pagination$onChange === void 0 || _pagination$onChange.call(pagination, page, size);
+    }
+
+    // 调用 Table 的 onChange（保持兼容性）
+    if (onChange) {
+      onChange({
+        current: page,
+        pageSize: size
+      }, {}, {}, {
+        currentDataSource: [],
+        action: 'paginate'
+      });
+    }
+  };
+
+  // 处理 pageSize 变化
+  var handlePageSizeChange = function handlePageSizeChange(size) {
+    if (pagination && _typeof(pagination) === 'object') {
+      var _pagination$onPageSiz;
+      (_pagination$onPageSiz = pagination.onPageSizeChange) === null || _pagination$onPageSiz === void 0 || _pagination$onPageSiz.call(pagination, size);
+    }
+  };
+
+  // 构建分页配置
+  var paginationConfig = useMemo(function () {
+    if (pagination === false) {
+      return undefined;
+    }
+    var total = pagination && _typeof(pagination) === 'object' && pagination.total !== undefined ? pagination.total : (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) || 0;
+    return _objectSpread({
+      current: current,
+      pageSize: pageSize,
+      total: total,
+      disabled: pagination && _typeof(pagination) === 'object' ? pagination.disabled : false,
+      onChange: handlePaginationChange,
+      onPageSizeChange: handlePageSizeChange
+    }, _typeof(pagination) === 'object' ? pagination : {});
+  }, [pagination, current, pageSize, dataSource]);
+
+  // 处理 expandable 配置，添加默认 expandIcon
+  var expandableConfig = useMemo(function () {
+    if (!restProps.expandable) {
+      return undefined;
+    }
+
+    // 如果用户已经提供了 expandIcon，直接使用
+    if (restProps.expandable.expandIcon) {
+      return restProps.expandable;
+    }
+
+    // 判断是否使用 expandedRowRender（嵌套子表格或可展开行）
+    var hasExpandedRowRender = !!restProps.expandable.expandedRowRender;
+
+    // 否则使用默认的 expandIcon
+    return _objectSpread(_objectSpread({}, restProps.expandable), {}, {
+      expandIcon: function expandIcon(_ref2) {
+        var expanded = _ref2.expanded,
+          onExpand = _ref2.onExpand,
+          record = _ref2.record,
+          expandable = _ref2.expandable;
+        // 只在有子节点或使用 expandedRowRender 时显示图标
+        var hasChildren = (record === null || record === void 0 ? void 0 : record.children) && Array.isArray(record.children) && record.children.length > 0;
+
+        // 如果既没有 children 也没有 expandedRowRender，不显示图标
+        if (!hasChildren && !hasExpandedRowRender) {
+          return null;
+        }
+
+        // 如果使用 expandedRowRender 但当前行不可展开，不显示图标
+        if (hasExpandedRowRender && expandable === false) {
+          return null;
+        }
+        if (expanded) {
+          return /*#__PURE__*/_jsx(IconDropdown, {
+            onClick: function onClick(e) {
+              return onExpand(record, e);
+            },
+            style: {
+              cursor: 'pointer'
+            }
+          });
+        }
+        return /*#__PURE__*/_jsx(IconExpandRight, {
+          onClick: function onClick(e) {
+            return onExpand(record, e);
+          },
+          style: {
+            cursor: 'pointer'
+          }
+        });
+      }
+    });
+  }, [restProps.expandable]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "slimfit-table-wrapper",
+    children: [/*#__PURE__*/_jsx(AntTable, _objectSpread(_objectSpread(_objectSpread({}, restProps), expandableConfig !== undefined && {
+      expandable: expandableConfig
+    }), {}, {
+      dataSource: paginatedData,
+      pagination: false,
+      onChange: onChange
+    })), pagination !== false && paginationConfig && /*#__PURE__*/_jsx("div", {
+      className: "slimfit-table-pagination",
+      children: /*#__PURE__*/_jsx(Pagination, _objectSpread({}, paginationConfig))
+    })]
+  });
+}
+export default Table;

package/lib/esm/tabs/easing-function.d.ts

@@ -0,0 +1,10 @@
+type AnimateProps = {
+    start: number;
+    end: number;
+    duration: number;
+    easing: (t: number) => number;
+    callback: (value: number, prevValue: number) => void;
+};
+export declare const animate: ({ start, end, duration, easing, callback, }: AnimateProps) => void;
+export declare const easeInQuad: (t: number) => number;
+export {};

package/lib/esm/tabs/easing-function.js

@@ -0,0 +1,25 @@
+/** @description 缓动函数动画 */
+
+export var animate = function animate(_ref) {
+  var start = _ref.start,
+    end = _ref.end,
+    duration = _ref.duration,
+    easing = _ref.easing,
+    callback = _ref.callback;
+  var startTime = performance.now();
+  var prevValue = start;
+  var tick = function tick(now) {
+    var t = now - startTime;
+    if (t > duration) t = duration;
+    var value = start + (end - start) * easing(t / duration);
+    callback(value, prevValue);
+    prevValue = value;
+    if (t < duration) {
+      requestAnimationFrame(tick);
+    }
+  };
+  requestAnimationFrame(tick);
+};
+export var easeInQuad = function easeInQuad(t) {
+  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+};

package/lib/esm/tabs/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-editable-line';
+export * from './use-scroll-indicator';

package/lib/esm/tabs/hooks/index.js

@@ -0,0 +1,2 @@
+export * from "./use-editable-line";
+export * from "./use-scroll-indicator";

package/lib/esm/tabs/hooks/use-editable-line.d.ts

@@ -0,0 +1,8 @@
+import type { TabsProps } from '../typings';
+type Options = Pick<TabsProps, 'items' | 'type' | 'removeIcon' | 'addIcon' | 'hideAdd' | 'onEdit' | 'size'>;
+export declare const useEditableLine: ({ items, type, removeIcon, addIcon, hideAdd, onEdit, size, }: Options) => {
+    items: TabsProps['items'];
+    type: Options['type'];
+    EditableLineAdd: () => React.ReactNode;
+};
+export {};

package/lib/esm/tabs/hooks/use-editable-line.js

@@ -0,0 +1,79 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["label"];
+import { useCallback, useMemo } from 'react';
+import { Button } from "../../button";
+import { IconClose, IconPlus } from "../../icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var useEditableLine = function useEditableLine(_ref) {
+  var items = _ref.items,
+    type = _ref.type,
+    removeIcon = _ref.removeIcon,
+    addIcon = _ref.addIcon,
+    hideAdd = _ref.hideAdd,
+    onEdit = _ref.onEdit,
+    size = _ref.size;
+  if (type !== 'editable-line') return {
+    items: items,
+    type: type,
+    EditableLineAdd: function EditableLineAdd() {
+      return null;
+    }
+  };
+  var renderRemoveIcon = useCallback(function (item) {
+    var closeVisible = item.closable !== false && item.closeIcon !== null && item.closeIcon !== false && !item.disabled;
+    if (!closeVisible) return null;
+    var handleRemove = function handleRemove(event) {
+      event.stopPropagation();
+      onEdit === null || onEdit === void 0 || onEdit(item.key, 'remove');
+    };
+    return /*#__PURE__*/_jsx("span", {
+      onClick: handleRemove,
+      className: "slimfit-tabs-editable-line-remove-icon",
+      children: removeIcon || /*#__PURE__*/_jsx(IconClose, {
+        style: {
+          fontSize: size === 'small' || !size ? 14 : 16
+        }
+      })
+    });
+  }, [onEdit, removeIcon]);
+  var antdItems = useMemo(function () {
+    return items === null || items === void 0 ? void 0 : items.map(function (item) {
+      var label = item.label,
+        rest = _objectWithoutProperties(item, _excluded);
+      return _objectSpread(_objectSpread({}, rest), {}, {
+        label: /*#__PURE__*/_jsxs("span", {
+          className: "slimfit-tabs-editable-line-label-wrapper",
+          children: [/*#__PURE__*/_jsx("span", {
+            children: label
+          }), renderRemoveIcon(item)]
+        })
+      });
+    });
+  }, [items, renderRemoveIcon]);
+  var EditableLineAdd = function EditableLineAdd() {
+    if (hideAdd) return null;
+    var handleAdd = function handleAdd(event) {
+      onEdit === null || onEdit === void 0 || onEdit(event, 'add');
+    };
+    return /*#__PURE__*/_jsx("span", {
+      onClick: handleAdd,
+      className: "slimfit-tabs-editable-line-add-icon",
+      children: addIcon || /*#__PURE__*/_jsx(Button, {
+        icon: /*#__PURE__*/_jsx(IconPlus, {
+          style: {
+            fontSize: 16
+          }
+        }),
+        type: "text",
+        size: "small"
+      })
+    });
+  };
+  return {
+    items: antdItems,
+    type: 'line',
+    EditableLineAdd: EditableLineAdd
+  };
+};

package/lib/esm/tabs/hooks/use-scroll-indicator.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { AntdTabsProps, TabsProps } from '../typings';
+type Options = Pick<TabsProps, 'items' | 'scrollIndicator'> & {
+    vertical?: boolean;
+    design?: boolean;
+};
+type UseScrollIndicatorReturn = {
+    scrollIndicatorRenderTabBar: AntdTabsProps['renderTabBar'];
+    ScrollIndicatorPrev: () => React.ReactNode;
+    ScrollIndicatorNext: () => React.ReactNode;
+    scrollIndicatorTabBarScrollListener: () => void;
+    scrollIndicatorClassName: string;
+};
+export declare const useScrollIndicator: ({ items, scrollIndicator, vertical, design, }: Options) => UseScrollIndicatorReturn;
+export {};

package/lib/esm/tabs/hooks/use-scroll-indicator.js

@@ -0,0 +1,209 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from "../../button";
+import { IconCaretDown, IconCaretLeft, IconCaretRight, IconCaretUp } from "../../icon";
+import { animate, easeInQuad } from "../easing-function";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Indicator = function Indicator(props) {
+  var vertical = props.vertical,
+    direction = props.direction,
+    boundary = props.boundary,
+    onScroll = props.onScroll;
+  var icon = null;
+  var disabled = direction === 'top' && boundary === 'top' || direction === 'bottom' && boundary === 'bottom';
+  if (vertical) {
+    icon = direction === 'top' ? /*#__PURE__*/_jsx(IconCaretUp, {
+      style: {
+        fontSize: 16
+      }
+    }) : /*#__PURE__*/_jsx(IconCaretDown, {
+      style: {
+        fontSize: 16
+      }
+    });
+  } else {
+    icon = direction === 'top' ? /*#__PURE__*/_jsx(IconCaretLeft, {
+      style: {
+        fontSize: 16
+      }
+    }) : /*#__PURE__*/_jsx(IconCaretRight, {
+      style: {
+        fontSize: 16
+      }
+    });
+  }
+  var handleClick = function handleClick() {
+    if (disabled) return;
+    onScroll();
+  };
+  return /*#__PURE__*/_jsx("span", {
+    className: "slimfit-tabs-tab-bar-scroll-indicator",
+    onClick: handleClick,
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    children: /*#__PURE__*/_jsx(Button, {
+      disabled: disabled,
+      icon: icon,
+      type: "text",
+      size: "small"
+    })
+  });
+};
+export var useScrollIndicator = function useScrollIndicator(_ref) {
+  var items = _ref.items,
+    scrollIndicator = _ref.scrollIndicator,
+    vertical = _ref.vertical,
+    design = _ref.design;
+  if (scrollIndicator === false || !design) return {
+    scrollIndicatorRenderTabBar: function (props, DefaultTabBar) {
+      return /*#__PURE__*/_jsx(DefaultTabBar, _objectSpread({}, props));
+    },
+    ScrollIndicatorPrev: function ScrollIndicatorPrev() {
+      return null;
+    },
+    ScrollIndicatorNext: function ScrollIndicatorNext() {
+      return null;
+    },
+    scrollIndicatorTabBarScrollListener: function scrollIndicatorTabBarScrollListener() {},
+    scrollIndicatorClassName: ''
+  };
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    scrollBarExist = _useState2[0],
+    setScrollBarExist = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    boundary = _useState4[0],
+    setBoundary = _useState4[1];
+  var mutaionObserverEnabled = ('MutationObserver' in window);
+  var tabBarRef = useRef(null);
+  var tabBarWrapperRef = useRef(null);
+  var tabBarContainerRef = useRef(null);
+  var scrollIndicatorRenderTabBar = function scrollIndicatorRenderTabBar(props, DefaultTabBar) {
+    return /*#__PURE__*/_jsx(DefaultTabBar, _objectSpread({
+      ref: tabBarRef
+    }, props));
+  };
+  var getTabBarDom = function getTabBarDom() {
+    var tabBar = tabBarRef.current;
+    if (!tabBar) return;
+    var wrapper = tabBar.querySelector('.ant-tabs-nav-list');
+    if (!wrapper) return;
+    tabBarWrapperRef.current = wrapper.parentElement;
+    tabBarContainerRef.current = wrapper;
+  };
+  var boundaryListener = function boundaryListener() {
+    if (!mutaionObserverEnabled || !tabBarWrapperRef.current) return function () {};
+    var observer = new MutationObserver(function (mutationsList) {
+      var _iterator = _createForOfIteratorHelper(mutationsList),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var mutation = _step.value;
+          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+            setBoundary(getBoundary());
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
+    observer.observe(tabBarWrapperRef.current, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+    return function () {
+      return observer.disconnect();
+    };
+  };
+
+  // 滚动逻辑是在 rc-tabs 内部维护的，所以这里通过 rc-tabs 触底、触顶时的添加的类名判断是否滚动到边界
+  var getBoundary = function getBoundary() {
+    if (!tabBarWrapperRef.current) return '';
+    var className = tabBarWrapperRef.current.className;
+    if (vertical) {
+      if (!className.includes('ant-tabs-nav-wrap-ping-bottom')) return 'bottom';
+      if (!className.includes('ant-tabs-nav-wrap-ping-top')) return 'top';
+      return '';
+    }
+    if (!className.includes('ant-tabs-nav-wrap-ping-right')) return 'bottom';
+    if (!className.includes('ant-tabs-nav-wrap-ping-left')) return 'top';
+    return '';
+  };
+  var updateBoundary = function updateBoundary() {
+    if (!scrollBarExist) return;
+
+    // 滚动事件的触发在 rc-tabs 设置状态前，所以这里要延迟一下才能获得最新的类名
+    setTimeout(function () {
+      return setBoundary(getBoundary());
+    }, 200);
+  };
+  useEffect(function () {
+    getTabBarDom();
+    var clearBoundaryListener = boundaryListener();
+    if (!tabBarWrapperRef.current || !tabBarContainerRef.current) return clearBoundaryListener;
+    var scrollBarExist = vertical ? tabBarWrapperRef.current.clientHeight < tabBarContainerRef.current.clientHeight : tabBarWrapperRef.current.clientWidth < tabBarContainerRef.current.clientWidth;
+    setScrollBarExist(scrollBarExist);
+    if (!mutaionObserverEnabled) {
+      updateBoundary();
+    }
+    return clearBoundaryListener;
+  }, [items, vertical]);
+  var scrollIndicatorTabBarScrollListener = function scrollIndicatorTabBarScrollListener() {
+    if (!mutaionObserverEnabled) {
+      updateBoundary();
+    }
+  };
+  var scrollTo = function scrollTo(offset) {
+    if (!tabBarWrapperRef.current) return;
+    var gap = vertical ? tabBarWrapperRef.current.clientHeight : tabBarWrapperRef.current.clientWidth;
+    animate({
+      start: 0,
+      end: gap * offset,
+      duration: 500,
+      easing: easeInQuad,
+      callback: function callback(value, prevValue) {
+        if (!tabBarWrapperRef.current) return;
+        var delta = {
+          deltaY: vertical ? value - prevValue : 0,
+          deltaX: vertical ? 0 : value - prevValue
+        };
+        tabBarWrapperRef.current.dispatchEvent(new WheelEvent('wheel', delta));
+      }
+    });
+  };
+  var ScrollIndicatorPrev = function ScrollIndicatorPrev() {
+    return scrollBarExist && /*#__PURE__*/_jsx(Indicator, {
+      boundary: boundary,
+      direction: "top",
+      vertical: vertical,
+      onScroll: function onScroll() {
+        return scrollTo(-1);
+      }
+    });
+  };
+  var ScrollIndicatorNext = function ScrollIndicatorNext() {
+    return scrollBarExist && /*#__PURE__*/_jsx(Indicator, {
+      boundary: boundary,
+      direction: "bottom",
+      vertical: vertical,
+      onScroll: function onScroll() {
+        return scrollTo(1);
+      }
+    });
+  };
+  return {
+    scrollIndicatorRenderTabBar: scrollIndicatorRenderTabBar,
+    ScrollIndicatorPrev: ScrollIndicatorPrev,
+    ScrollIndicatorNext: ScrollIndicatorNext,
+    scrollIndicatorTabBarScrollListener: scrollIndicatorTabBarScrollListener,
+    scrollIndicatorClassName: 'slimfit-tabs-with-scroll-indicator'
+  };
+};

package/lib/esm/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tabs } from './tabs';
+export type { TabsProps } from './typings';

package/lib/esm/tabs/index.js

@@ -0,0 +1 @@
+export { default as Tabs } from "./tabs";