@ebscn/ui 0.0.11 → 1.0.0-beta.0

package/cjs/components/switch/switch.js

@@ -0,0 +1,213 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _2 = require("../..");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _nativeProps = require("../../utils/native-props");
+var _usePropsValue = require("../../utils/use-props-value");
+var _validate = require("../../utils/validate");
+var _withDefaultProps = require("../../utils/with-default-props");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
+  var _ = {
+      label: 0,
+      sent: function () {
+        if (t[0] & 1) throw t[1];
+        return t[1];
+      },
+      trys: [],
+      ops: []
+    },
+    f,
+    y,
+    t,
+    g;
+  return g = {
+    next: verb(0),
+    "throw": verb(1),
+    "return": verb(2)
+  }, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+    while (g && (g = 0, op[0] && (_ = 0)), _) try {
+      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+      if (y = 0, t) op = [op[0] & 2, t.value];
+      switch (op[0]) {
+        case 0:
+        case 1:
+          t = op;
+          break;
+        case 4:
+          _.label++;
+          return {
+            value: op[1],
+            done: false
+          };
+        case 5:
+          _.label++;
+          y = op[1];
+          op = [0];
+          continue;
+        case 7:
+          op = _.ops.pop();
+          _.trys.pop();
+          continue;
+        default:
+          if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+            _ = 0;
+            continue;
+          }
+          if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+            _.label = op[1];
+            break;
+          }
+          if (op[0] === 6 && _.label < t[1]) {
+            _.label = t[1];
+            t = op;
+            break;
+          }
+          if (t && _.label < t[2]) {
+            _.label = t[2];
+            _.ops.push(op);
+            break;
+          }
+          if (t[2]) _.ops.pop();
+          _.trys.pop();
+          continue;
+      }
+      op = body.call(thisArg, _);
+    } catch (e) {
+      op = [6, e];
+      y = 0;
+    } finally {
+      f = t = 0;
+    }
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+};
+var classPrefix = "ebscn-switch";
+var defaultProps = {
+  defaultChecked: false,
+  size: 'normal'
+};
+var Switch = function (p) {
+  var _a;
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var disabled = props.disabled || props.loading || false;
+  var _b = (0, _react.useState)(false),
+    changing = _b[0],
+    setChanging = _b[1];
+  var _c = (0, _usePropsValue.usePropsValue)({
+      value: props.checked,
+      defaultValue: props.defaultChecked,
+      onChange: props.onChange
+    }),
+    checked = _c[0],
+    setChecked = _c[1];
+  function onClick() {
+    return __awaiter(this, void 0, void 0, function () {
+      var nextChecked, e_1, result, e_2;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (disabled || props.loading || changing) {
+              return [2 /*return*/];
+            }
+            nextChecked = !checked;
+            if (!props.beforeChange) return [3 /*break*/, 4];
+            setChanging(true);
+            _a.label = 1;
+          case 1:
+            _a.trys.push([1, 3,, 4]);
+            return [4 /*yield*/, props.beforeChange(nextChecked)];
+          case 2:
+            _a.sent();
+            setChanging(false);
+            return [3 /*break*/, 4];
+          case 3:
+            e_1 = _a.sent();
+            setChanging(false);
+            throw e_1;
+          case 4:
+            result = setChecked(nextChecked);
+            if (!(0, _validate.isPromise)(result)) return [3 /*break*/, 8];
+            setChanging(true);
+            _a.label = 5;
+          case 5:
+            _a.trys.push([5, 7,, 8]);
+            return [4 /*yield*/, result];
+          case 6:
+            _a.sent();
+            setChanging(false);
+            return [3 /*break*/, 8];
+          case 7:
+            e_2 = _a.sent();
+            setChanging(false);
+            throw e_2;
+          case 8:
+            return [2 /*return*/];
+        }
+      });
+    });
+  }
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    onClick: onClick,
+    className: (0, _classnames.default)(classPrefix, (_a = {}, _a["".concat(classPrefix, "-checked")] = checked, _a["".concat(classPrefix, "-disabled")] = disabled || changing, _a["".concat(classPrefix, "-small")] = props.size === 'small', _a)),
+    role: "switch",
+    "aria-checked": checked,
+    "aria-disabled": disabled
+  }, _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-checkbox")
+  }, _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-handle")
+  }, (props.loading || changing) && _react.default.createElement(_2.SpinIcon, {
+    className: "".concat(classPrefix, "-spin-icon")
+  })), _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-inner")
+  }, checked ? props.checkedText : props.uncheckedText))));
+};
+var _default = exports.default = Switch;

package/cjs/components/tabs/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './tabs.less';
+export type { TabsProps, TabProps } from './tabs';
+declare const _default: import("react").FC<import("./tabs").TabsProps> & {
+    Tab: import("react").FC<import("./tabs").TabProps>;
+};
+export default _default;

package/cjs/components/tabs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./tabs.css");
+var _tabs2 = require("./tabs");
+var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
+var _default = exports.default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_tabs2.Tabs, {
+  Tab: _tabs2.Tab
+});

package/cjs/components/tabs/tabs.css

@@ -0,0 +1,76 @@
+.ebscn-tabs {
+  --title-font-size: var(--ebscn-font-size-9);
+  --content-padding: 12px;
+  --active-line-height: 2px;
+  --active-line-border-radius: var(--active-line-height);
+  --active-line-color: var(--ebscn-color-primary);
+  --active-title-color: var(--ebscn-color-primary);
+  position: relative;
+  min-width: 0;
+}
+.ebscn-tabs-header {
+  position: relative;
+  border-bottom: solid 1px var(--ebscn-color-border);
+}
+.ebscn-tabs-tab-list {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+.ebscn-tabs-tab-list::-webkit-scrollbar {
+  display: none;
+}
+.ebscn-tabs-tab-wrapper {
+  padding: 0 12px;
+}
+.ebscn-tabs-tab-wrapper-stretch {
+  flex: auto;
+}
+.ebscn-tabs-tab {
+  white-space: nowrap;
+  padding: 8px 0 10px;
+  width: -webkit-min-content;
+  width: min-content;
+  margin: 0 auto;
+  font-size: var(--title-font-size);
+  position: relative;
+  cursor: pointer;
+}
+.ebscn-tabs-tab-active {
+  color: var(--active-title-color);
+}
+.ebscn-tabs-tab-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.ebscn-tabs-tab-line {
+  position: absolute;
+  bottom: 0;
+  height: var(--active-line-height);
+  background: var(--active-line-color);
+  border-radius: var(--active-line-border-radius);
+}
+.ebscn-tabs-content {
+  padding: var(--content-padding);
+}
+.ebscn-tabs-header-mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 30px;
+  height: 100%;
+  pointer-events: none;
+}
+.ebscn-tabs-header-mask-left {
+  left: 0;
+  background: linear-gradient(to right, var(--ebscn-color-background), rgba(255, 255, 255, 0));
+}
+.ebscn-tabs-header-mask-right {
+  right: 0;
+  background: linear-gradient(to left, var(--ebscn-color-background), rgba(255, 255, 255, 0));
+}

package/cjs/components/tabs/tabs.d.ts

@@ -0,0 +1,27 @@
+import type { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export type TabProps = {
+    title: ReactNode;
+    disabled?: boolean;
+    forceRender?: boolean;
+    destroyOnClose?: boolean;
+    children?: ReactNode;
+} & NativeProps;
+export declare const Tab: FC<TabProps>;
+export type TabsProps = {
+    activeKey?: string | null;
+    activeMode?: 'underline' | 'amplify';
+    defaultActiveKey?: string | null;
+    activeLineMode?: 'auto' | 'full' | 'fixed';
+    stretch?: boolean;
+    onChange?: (key: string) => void;
+    children?: ReactNode;
+    direction?: 'ltr' | 'rtl';
+    /**
+     * @experimental Support disabled auto scroll when Tabs header content change.
+     * This API name or function may change in the future.
+     * Please lock the version if you want to use it.
+     */
+    autoScroll?: boolean;
+} & NativeProps<'--fixed-active-line-width' | '--active-line-height' | '--active-line-border-radius' | '--title-font-size' | '--content-padding' | '--active-title-color' | '--active-line-color'>;
+export declare const Tabs: FC<TabsProps>;

package/cjs/components/tabs/tabs.js

@@ -0,0 +1,294 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tabs = exports.Tab = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _web = require("@react-spring/web");
+var _nativeProps = require("../../utils/native-props");
+var _usePropsValue = require("../../utils/use-props-value");
+var _bound = require("../../utils/bound");
+var _ahooks = require("ahooks");
+var _useMutationEffect = require("../../utils/use-mutation-effect");
+var _useResizeEffect = require("../../utils/use-resize-effect");
+var _withDefaultProps = require("../../utils/with-default-props");
+var _useIsomorphicUpdateLayoutEffect = require("../../utils/use-isomorphic-update-layout-effect");
+var _shouldRender = require("../../utils/should-render");
+var _traverseReactNode = require("../../utils/traverse-react-node");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var classPrefix = "ebscn-tabs";
+var Tab = function () {
+  return null;
+};
+exports.Tab = Tab;
+var defaultProps = {
+  activeMode: 'underline',
+  activeLineMode: 'auto',
+  stretch: true,
+  direction: 'ltr'
+};
+var Tabs = function (p) {
+  var _a;
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var tabListContainerRef = (0, _react.useRef)(null);
+  var activeLineRef = (0, _react.useRef)(null);
+  var keyToIndexRecord = {};
+  var firstActiveKey = null;
+  var panes = [];
+  var isRTL = props.direction === 'rtl';
+  (0, _traverseReactNode.traverseReactNode)(props.children, function (child, index) {
+    if (!(0, _react.isValidElement)(child)) return;
+    var key = child.key;
+    if (typeof key !== 'string') return;
+    if (index === 0) {
+      firstActiveKey = key;
+    }
+    var length = panes.push(child);
+    keyToIndexRecord[key] = length - 1;
+  });
+  var _b = (0, _usePropsValue.usePropsValue)({
+      value: props.activeKey,
+      defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
+      onChange: function (v) {
+        var _a;
+        if (v === null) return;
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
+      }
+    }),
+    activeKey = _b[0],
+    setActiveKey = _b[1];
+  var _c = (0, _web.useSpring)(function () {
+      return {
+        x: 0,
+        width: 0,
+        config: {
+          tension: 300,
+          clamp: true
+        }
+      };
+    }),
+    _d = _c[0],
+    x = _d.x,
+    width = _d.width,
+    inkApi = _c[1];
+  var _e = (0, _web.useSpring)(function () {
+      return {
+        scrollLeft: 0,
+        config: {
+          tension: 300,
+          clamp: true
+        }
+      };
+    }),
+    scrollLeft = _e[0].scrollLeft,
+    scrollApi = _e[1];
+  var _f = (0, _web.useSpring)(function () {
+      return {
+        leftMaskOpacity: 0,
+        rightMaskOpacity: 0,
+        config: {
+          clamp: true
+        }
+      };
+    }),
+    _g = _f[0],
+    leftMaskOpacity = _g.leftMaskOpacity,
+    rightMaskOpacity = _g.rightMaskOpacity,
+    maskApi = _f[1];
+  function animate(immediate, fromMutation) {
+    if (immediate === void 0) {
+      immediate = false;
+    }
+    if (fromMutation === void 0) {
+      fromMutation = false;
+    }
+    var container = tabListContainerRef.current;
+    if (!container) return;
+    var activeIndex = keyToIndexRecord[activeKey];
+    if (activeIndex === undefined) {
+      inkApi.start({
+        x: 0,
+        width: 0,
+        immediate: true
+      });
+      return;
+    }
+    var activeLine = activeLineRef.current;
+    if (!activeLine) return;
+    var activeTabWrapper = container.children.item(activeIndex + 1);
+    var activeTab = activeTabWrapper.children.item(0);
+    var activeTabLeft = activeTab.offsetLeft;
+    var activeTabWidth = activeTab.offsetWidth;
+    var activeTabWrapperLeft = activeTabWrapper.offsetLeft;
+    var activeTabWrapperWidth = activeTabWrapper.offsetWidth;
+    var containerWidth = container.offsetWidth;
+    var containerScrollWidth = container.scrollWidth;
+    var containerScrollLeft = container.scrollLeft;
+    var activeLineWidth = activeLine.offsetWidth;
+    var x = 0;
+    var width = 0;
+    if (props.activeLineMode === 'auto') {
+      x = activeTabLeft;
+      width = activeTabWidth;
+    } else if (props.activeLineMode === 'full') {
+      x = activeTabWrapperLeft;
+      width = activeTabWrapperWidth;
+    } else {
+      x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+    }
+    if (isRTL) {
+      /**
+       * In RTL mode, x equals the container width minus the x-coordinate of the current tab minus the width of the current tab.
+       * https://github.com/Fog3211/reproduce-codesandbox/blob/f0a3396a114cc00e88a51a67d3be60a746519b30/assets/images/antd_mobile_tabs_rtl_x.jpg?raw=true
+       */
+      var w = ['auto', 'full'].includes(props.activeLineMode) ? width : activeLineWidth;
+      x = -(containerWidth - x - w);
+    }
+    inkApi.start({
+      x: x,
+      width: width,
+      immediate: immediate
+    });
+    var maxScrollDistance = containerScrollWidth - containerWidth;
+    if (maxScrollDistance <= 0) return;
+    var nextScrollLeft = 0;
+    if (isRTL) {
+      /**
+       * 位移距离等于：activeTab的中心坐标距离容器中心坐标的距离，然后RTL取负数
+       * containerWidth / 2 - (activeTabLeft + (activeTabWidth - activeLineWidth) / 2) - activeLineWidth / 2,
+       */
+      nextScrollLeft = -(0, _bound.bound)(containerWidth / 2 - activeTabLeft + activeTabWidth / 2 - activeLineWidth, 0, maxScrollDistance);
+    } else {
+      nextScrollLeft = (0, _bound.bound)(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, maxScrollDistance);
+    }
+    if (!fromMutation || props.autoScroll !== false) {
+      scrollApi.start({
+        scrollLeft: nextScrollLeft,
+        from: {
+          scrollLeft: containerScrollLeft
+        },
+        immediate: immediate
+      });
+    }
+  }
+  (0, _ahooks.useIsomorphicLayoutEffect)(function () {
+    animate(!x.isAnimating);
+  }, []);
+  (0, _useIsomorphicUpdateLayoutEffect.useIsomorphicUpdateLayoutEffect)(function () {
+    animate();
+  }, [activeKey]);
+  (0, _useResizeEffect.useResizeEffect)(function () {
+    animate(!x.isAnimating);
+  }, tabListContainerRef);
+  (0, _useMutationEffect.useMutationEffect)(function () {
+    animate(!x.isAnimating, true);
+  }, tabListContainerRef, {
+    subtree: true,
+    childList: true,
+    characterData: true
+  });
+  var updateMask = (0, _ahooks.useThrottleFn)(function (immediate) {
+    if (immediate === void 0) {
+      immediate = false;
+    }
+    var container = tabListContainerRef.current;
+    if (!container) return;
+    var scrollLeft = container.scrollLeft;
+    var showLeftMask = false;
+    var showRightMask = false;
+    if (isRTL) {
+      /**
+       * RTL模式下，只要滑动过，scrollLeft就再也回不到0（chrome是0.5）
+       * 所以要加round才能终止触发条件
+       * round(443.5) + 375 < 819
+       */
+      showLeftMask = Math.round(-scrollLeft) + container.offsetWidth < container.scrollWidth;
+      showRightMask = scrollLeft < 0;
+    } else {
+      showLeftMask = scrollLeft > 0;
+      showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
+    }
+    maskApi.start({
+      leftMaskOpacity: showLeftMask ? 1 : 0,
+      rightMaskOpacity: showRightMask ? 1 : 0,
+      immediate: immediate
+    });
+  }, {
+    wait: 100,
+    trailing: true,
+    leading: true
+  }).run;
+  (0, _ahooks.useIsomorphicLayoutEffect)(function () {
+    updateMask(true);
+  }, []);
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: classPrefix,
+    style: {
+      direction: props.direction
+    }
+  }, _react.default.createElement("div", {
+    className: "".concat(classPrefix, "-header")
+  }, _react.default.createElement(_web.animated.div, {
+    className: (0, _classnames.default)("".concat(classPrefix, "-header-mask"), "".concat(classPrefix, "-header-mask-left")),
+    style: {
+      opacity: leftMaskOpacity
+    }
+  }), _react.default.createElement(_web.animated.div, {
+    className: (0, _classnames.default)("".concat(classPrefix, "-header-mask"), "".concat(classPrefix, "-header-mask-right")),
+    style: {
+      opacity: rightMaskOpacity
+    }
+  }), _react.default.createElement(_web.animated.div, {
+    className: "".concat(classPrefix, "-tab-list"),
+    ref: tabListContainerRef,
+    scrollLeft: scrollLeft,
+    onScroll: updateMask,
+    role: 'tablist'
+  }, _react.default.createElement(_web.animated.div, {
+    ref: activeLineRef,
+    className: "".concat(classPrefix, "-tab-line"),
+    style: {
+      width: props.activeLineMode === 'fixed' ? 'var(--fixed-active-line-width, 30px)' : width,
+      x: x
+    }
+  }), panes.map(function (pane) {
+    var _a, _b;
+    return (0, _nativeProps.withNativeProps)(pane.props, _react.default.createElement("div", {
+      key: pane.key,
+      className: (0, _classnames.default)("".concat(classPrefix, "-tab-wrapper"), (_a = {}, _a["".concat(classPrefix, "-tab-wrapper-stretch")] = props.stretch, _a))
+    }, _react.default.createElement("div", {
+      onClick: function () {
+        var key = pane.key;
+        if (pane.props.disabled) return;
+        if (key === undefined || key === null) {
+          return;
+        }
+        setActiveKey(key.toString());
+      },
+      className: (0, _classnames.default)("".concat(classPrefix, "-tab"), (_b = {}, _b["".concat(classPrefix, "-tab-active")] = pane.key === activeKey, _b["".concat(classPrefix, "-tab-disabled")] = pane.props.disabled, _b)),
+      role: 'tab',
+      "aria-selected": pane.key === activeKey
+    }, pane.props.title)));
+  }))), panes.map(function (pane) {
+    if (pane.props.children === undefined) {
+      return null;
+    }
+    var active = pane.key === activeKey;
+    return _react.default.createElement(_shouldRender.ShouldRender, {
+      key: pane.key,
+      active: active,
+      forceRender: pane.props.forceRender,
+      destroyOnClose: pane.props.destroyOnClose
+    }, _react.default.createElement("div", {
+      className: "".concat(classPrefix, "-content"),
+      style: {
+        display: active ? 'block' : 'none'
+      }
+    }, pane.props.children));
+  })));
+};
+exports.Tabs = Tabs;

package/cjs/components/tabs/tabs.patch.css

@@ -0,0 +1,23 @@
+.ebscn-tabs-header {
+  border-bottom: solid 1px #eeeeee;
+}
+.ebscn-tabs-tab {
+  font-size: 17px;
+}
+.ebscn-tabs-tab-active {
+  color: #1677ff;
+}
+.ebscn-tabs-tab-line {
+  height: 2px;
+  background: #1677ff;
+  border-radius: 2px;
+}
+.ebscn-tabs-content {
+  padding: 12px;
+}
+.ebscn-tabs-header-mask-left {
+  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+}
+.ebscn-tabs-header-mask-right {
+  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+}

package/cjs/components/tip/index.d.ts

@@ -0,0 +1,4 @@
+import { Tip } from './tip';
+import './tip.less';
+export type { TipProps } from './tip';
+export default Tip;

package/cjs/components/tip/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _tip = require("./tip");
+require("./tip.css");
+var _default = exports.default = _tip.Tip;

package/cjs/components/tip/tip.css

@@ -0,0 +1,22 @@
+.ebscn-tip {
+  --font-size: var(--ebscn-font-size-6);
+  --border-radius: 6px;
+  --padding: 12px 10px;
+  color: var(--tip-color);
+  position: relative;
+  padding: var(--padding);
+  font-size: var(--font-size);
+}
+.ebscn-tip::before {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--tip-color);
+  opacity: 0.1;
+  box-sizing: content-box;
+  border-radius: var(--border-radius);
+  transform: translate(calc(var(--border-width) * -1), calc(var(--border-width) * -1));
+}