@bifrostui/react 0.0.5

package/es/TabBar/TabBar.js

@@ -0,0 +1,42 @@
+var _excluded = ["current", "activeColor", "color", "children", "className", "onChange"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from 'react';
+import clsx from 'clsx';
+import TabBarContext from "./TabBarContext";
+import "./TabBar.css";
+var prefixCls = 'bui-tab-bar';
+var TabBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _ref = props || {},
+    current = _ref.current,
+    activeColor = _ref.activeColor,
+    color = _ref.color,
+    children = _ref.children,
+    className = _ref.className,
+    onChange = _ref.onChange,
+    others = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(TabBarContext.Provider, {
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    value: {
+      currentIndex: current,
+      activeColor: activeColor,
+      color: color,
+      onChange: onChange
+    }
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: clsx("".concat(prefixCls), className)
+  }, others), React.Children.toArray(children).map(function (item, index) {
+    return /*#__PURE__*/React.cloneElement(item, {
+      index: index
+    });
+  })));
+});
+TabBar.displayName = 'BuiTabBar';
+TabBar.defaultProps = {
+  activeColor: 'primary',
+  color: 'default',
+  current: 0
+};
+export default TabBar;

package/es/TabBar/TabBarContext.d.ts

@@ -0,0 +1,27 @@
+import { ThemeColor } from '@bifrostui/types';
+import { Context, SyntheticEvent } from 'react';
+export interface TabBarState {
+    /**
+     * 当前选中的标签索引值
+     * @default 0
+     */
+    currentIndex?: number;
+    /**
+     * 选中文案颜色
+     * @default 'primary'
+     */
+    activeColor?: ThemeColor | 'default' | 'vip';
+    /**
+     * 默认文案颜色
+     * @default 'default'
+     */
+    color?: ThemeColor | 'default' | 'vip';
+    /**
+     * 变化时回调函数
+     */
+    onChange?: (e: SyntheticEvent, data: {
+        value: number;
+    }) => void;
+}
+declare const TabBarContext: Context<TabBarState>;
+export default TabBarContext;

package/es/TabBar/TabBarContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+var TabBarContext = /*#__PURE__*/createContext({});
+export default TabBarContext;

package/es/TabBar/TabBarItem.css

@@ -0,0 +1,38 @@
+.bui-tab-bar-item {
+  --bui-tab-bar-color: var(--bui-tab-bar-default-color, var(--bui-color-fg-default));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  flex: 1;
+  color: var(--bui-tab-bar-color);
+  font-family: var(--bui-font-family);
+}
+.bui-tab-bar-item-primary {
+  color: var(--bui-color-primary);
+}
+.bui-tab-bar-item-success {
+  color: var(--bui-color-success);
+}
+.bui-tab-bar-item-info {
+  color: var(--bui-color-info);
+}
+.bui-tab-bar-item-warning {
+  color: var(--bui-color-warning);
+}
+.bui-tab-bar-item-danger {
+  color: var(--bui-color-danger);
+}
+.bui-tab-bar-item-vip {
+  color: var(--bui-color-vip);
+}
+.bui-tab-bar-item .bui-badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.bui-tab-bar-item .bui-badge-position .bui-badge-contained,
+.bui-tab-bar-item .bui-badge-position .bui-badge-outlined {
+  top: 0;
+}

package/es/TabBar/TabBarItem.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TabBarItemProps } from './index.types';
+import './TabBarItem.less';
+declare const TabBarItem: React.ForwardRefExoticComponent<Omit<TabBarItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default TabBarItem;

package/es/TabBar/TabBarItem.js

@@ -0,0 +1,54 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["title", "icon", "activeIcon", "index", "BadgeProps", "className", "children", "onClick"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useContext } from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Badge } from "./..";
+import clsx from 'clsx';
+import "./TabBarItem.css";
+import TabBarContext from "./TabBarContext";
+var prefixCls = 'bui-tab-bar-item';
+var TabBarItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _Object$values;
+  var _useContext = useContext(TabBarContext),
+    currentIndex = _useContext.currentIndex,
+    activeColor = _useContext.activeColor,
+    color = _useContext.color,
+    onChange = _useContext.onChange;
+  var _ref = props || {},
+    title = _ref.title,
+    icon = _ref.icon,
+    activeIcon = _ref.activeIcon,
+    index = _ref.index,
+    BadgeProps = _ref.BadgeProps,
+    className = _ref.className,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var handleClick = function handleClick(e) {
+    if (onClick) {
+      onClick(e);
+    }
+    if (onChange) {
+      onChange(e, {
+        value: index
+      });
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: clsx(prefixCls, className, _defineProperty({}, "".concat(prefixCls, "-active"), currentIndex === index)),
+    ref: ref,
+    onClick: handleClick
+  }, others), children || ((_Object$values = Object.values(BadgeProps || {})) === null || _Object$values === void 0 ? void 0 : _Object$values.length) > 0 ? /*#__PURE__*/React.createElement(Badge, BadgeProps, currentIndex === index && activeIcon ? activeIcon : icon, /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-title"), _defineProperty({}, "".concat(prefixCls, "-").concat(currentIndex === index ? activeColor : color), currentIndex === index ? activeColor : color))
+  }, title)) : /*#__PURE__*/React.createElement(React.Fragment, null, currentIndex === index && activeIcon ? activeIcon : icon, /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-title"), _defineProperty({}, "".concat(prefixCls, "-").concat(currentIndex === index ? activeColor : color), currentIndex === index ? activeColor : color))
+  }, title)));
+});
+TabBarItem.displayName = 'BuiTabBarItem';
+export default TabBarItem;

package/es/TabBar/index.d.ts

@@ -0,0 +1,4 @@
+import TabBarItem from './TabBarItem';
+export { default as TabBar } from './TabBar';
+export * from './index.types';
+export { TabBarItem };

package/es/TabBar/index.js

@@ -0,0 +1,4 @@
+import TabBarItem from "./TabBarItem";
+export { default as TabBar } from "./TabBar";
+export * from "./index.types";
+export { TabBarItem };

package/es/TabBar/index.types.d.ts

@@ -0,0 +1,54 @@
+import React, { ReactNode } from 'react';
+import { OverrideProps, ThemeColor } from '@bifrostui/types';
+import { BadgeProps } from '../Badge';
+export type TabBarProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 当前选中的标签索引值
+         * @default 0
+         */
+        current?: number;
+        /**
+         * 默认文案颜色
+         * @default 'default'
+         */
+        color?: ThemeColor | 'default' | 'vip';
+        /**
+         * 选中文案颜色
+         * @default 'primary'
+         */
+        activeColor?: ThemeColor | 'default' | 'vip';
+        /**
+         * 变化时回调函数
+         */
+        onChange?: (e: React.SyntheticEvent, data: {
+            value: number;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export type TabBarItemProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 标题
+         */
+        title?: ReactNode;
+        /**
+         * 图标
+         */
+        icon?: ReactNode;
+        /**
+         * 选中图标
+         */
+        activeIcon?: ReactNode;
+        /**
+         * 徽章
+         */
+        BadgeProps?: BadgeProps;
+        /**
+         * TabBar index （不对外暴露）
+         */
+        index?: number;
+    };
+    defaultComponent: D;
+}, D>;

package/es/TabBar/index.types.js

@@ -0,0 +1 @@
+export {};

package/es/Tabs/Tab.css

@@ -0,0 +1,52 @@
+.bui-tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  width: min-content;
+  height: 100%;
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+  font-size: var(--font-size);
+  line-height: var(--bui-line-height);
+  color: var(--color);
+  padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
+  font-family: var(--bui-font-family);
+}
+.bui-tab-center {
+  flex: 1 0 auto;
+  margin: 0 auto;
+}
+.bui-tab-active {
+  font-size: var(--font-size);
+  line-height: var(--bui-line-height);
+  font-weight: var(--bui-font-weight-medium);
+  color: var(--active-color);
+}
+.bui-tab-miniapp-active {
+  font-size: var(--font-size);
+  line-height: 1.5;
+  font-weight: var(--bui-font-weight-medium);
+  color: var(--active-color);
+  position: relative;
+}
+.bui-tab-miniapp-active-line {
+  position: absolute;
+  bottom: 0;
+  left: -12px;
+  right: -12px;
+  margin: 0 auto !important;
+  width: 18px;
+  height: 2px;
+  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background-color: var(--line-color);
+}
+.bui-tab-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.bui-tabline-invisible {
+  visibility: hidden;
+  background-color: transparent;
+}

package/es/Tabs/Tab.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TabProps } from './Tab.types';
+import './Tab.less';
+declare const Tab: React.ForwardRefExoticComponent<Omit<TabProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Tab;

package/es/Tabs/Tab.js

@@ -0,0 +1,50 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "children", "index", "disabled", "onClick"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { isMini } from '@bifrostui/utils';
+import clsx from 'clsx';
+import React from 'react';
+import TabsContext from "./TabsContext";
+import "./Tab.css";
+var prefixCls = 'bui-tab';
+var Tab = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    children = props.children,
+    index = props.index,
+    disabled = props.disabled,
+    _onClick = props.onClick,
+    others = _objectWithoutProperties(props, _excluded);
+  var tabsContext = React.useContext(TabsContext);
+  var value = tabsContext.value,
+    align = tabsContext.align,
+    triggerChange = tabsContext.triggerChange;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: clsx(prefixCls, "".concat(prefixCls, "-").concat(align), _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-active"), !isMini && index === value), "".concat(prefixCls, "-miniapp-active"), isMini && index === value), "".concat(prefixCls, "-disabled"), disabled), className)
+  }, others, {
+    onClick: function onClick(e) {
+      if (disabled) return;
+      e.preventDefault();
+      triggerChange(e, {
+        index: index
+      });
+      _onClick === null || _onClick === void 0 || _onClick(e, {
+        index: index
+      });
+    }
+  }), children, isMini && /*#__PURE__*/React.createElement("div", {
+    className: clsx("".concat(prefixCls, "-miniapp-active-line"), {
+      'bui-tabline-invisible': index !== value
+    })
+  }));
+});
+Tab.displayName = 'BuiTab';
+Tab.defaultProps = {
+  disabled: false
+};
+export default Tab;

package/es/Tabs/Tab.types.d.ts

@@ -0,0 +1,12 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+import { ITabItem, TabChangeEvent } from './Tabs.types';
+export type TabProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & Partial<Omit<ITabItem, 'title'>> & {
+        /**
+         * 点击Tab的回调
+         */
+        onClick?: TabChangeEvent;
+    };
+    defaultComponent: D;
+}, D>;

package/es/Tabs/Tab.types.js

@@ -0,0 +1 @@
+export {};

package/es/Tabs/TabPanel.css

@@ -0,0 +1,9 @@
+.bui-tabpanel {
+  font-family: var(--bui-font-family);
+}
+.bui-tabpanel-active {
+  display: block;
+}
+.bui-tabpanel-inactive {
+  display: none;
+}

package/es/Tabs/TabPanel.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './TabPanel.less';
+import { TabPanelProps } from './TabPanel.types';
+declare const TabPanel: React.ForwardRefExoticComponent<Omit<TabPanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default TabPanel;

package/es/Tabs/TabPanel.js

@@ -0,0 +1,30 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "children", "value", "index", "keepMounted"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+import "./TabPanel.css";
+var prefixCls = 'bui-tabpanel';
+var TabPanel = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+    children = props.children,
+    value = props.value,
+    index = props.index,
+    keepMounted = props.keepMounted,
+    others = _objectWithoutProperties(props, _excluded);
+  var keepActiveDom = keepMounted ? children : null;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: clsx(prefixCls, className, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-active"), value === index), "".concat(prefixCls, "-inactive"), value !== index))
+  }, others), value === index ? children : keepActiveDom);
+});
+TabPanel.displayName = 'BuiTabPanel';
+TabPanel.defaultProps = {
+  keepMounted: false
+};
+export default TabPanel;

package/es/Tabs/TabPanel.types.d.ts

@@ -0,0 +1,19 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+export type TabPanelProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * value	当前选中面板的value
+         */
+        value?: string;
+        /**
+         * 对应tabs切换面板的数据中的index
+         */
+        index?: string;
+        /**
+         * 当TabPanel被隐藏时是否渲染 DOM 结构，默认false
+         */
+        keepMounted?: boolean;
+    };
+    defaultComponent: D;
+}, D>;

package/es/Tabs/TabPanel.types.js

@@ -0,0 +1 @@
+export {};

package/es/Tabs/Tabs.css

@@ -0,0 +1,56 @@
+.bui-tabs {
+  --height: 39px;
+  --font-size: var(--bui-text-size-1);
+  --color: var(--bui-color-fg-subtle);
+  --active-color: var(--bui-color-fg-default);
+  --line-color: var(--bui-color-primary);
+  position: relative;
+  font-family: var(--bui-font-family);
+}
+.bui-tabs-tabs {
+  height: var(--height);
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+.bui-tabs-tabs::-webkit-scrollbar {
+  display: none;
+}
+.bui-tabs-tabline {
+  position: absolute;
+  width: 18px;
+  bottom: 0;
+  /* prettier-ignore */
+  height: 3PX;
+  color: var(--bui-color-primary);
+  background: var(--line-color);
+  border-radius: var(--bui-shape-radius-label);
+}
+.bui-tabs-content {
+  padding: var(--bui-spacing-lg);
+}
+.bui-tabs-mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 12px;
+  height: 100%;
+  pointer-events: none;
+}
+.bui-tabs-mask-left {
+  left: 0;
+  background: linear-gradient(to right, var(--bui-color-white), rgba(255, 255, 255, 0));
+}
+.bui-tabs-mask-right {
+  right: 0;
+  background: linear-gradient(to left, var(--bui-color-white), rgba(255, 255, 255, 0));
+}
+.bui-tabline-invisible {
+  visibility: hidden;
+  background-color: transparent;
+}

package/es/Tabs/Tabs.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './Tabs.less';
+import { TabsProps } from './Tabs.types';
+declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Tabs;