@bifrostui/react 0.0.5

package/dist/Tabs/TabPanel.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+require("./TabPanel.css");
+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 }; }
+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); }
+const prefixCls = 'bui-tabpanel';
+const TabPanel = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    className,
+    children,
+    value,
+    index,
+    keepMounted,
+    ...others
+  } = props;
+  const keepActiveDom = keepMounted ? children : null;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    className: (0, _clsx.default)(prefixCls, className, {
+      [`${prefixCls}-active`]: value === index,
+      [`${prefixCls}-inactive`]: value !== index
+    })
+  }, others), value === index ? children : keepActiveDom);
+});
+TabPanel.displayName = 'BuiTabPanel';
+TabPanel.defaultProps = {
+  keepMounted: false
+};
+var _default = exports.default = TabPanel;

package/dist/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/dist/Tabs/TabPanel.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/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/dist/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;

package/dist/Tabs/Tabs.js

@@ -0,0 +1,193 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _utils = require("@bifrostui/utils");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+var _Tab = _interopRequireDefault(require("./Tab"));
+require("./Tabs.css");
+var _TabsContext = require("./TabsContext");
+var _bound = _interopRequireDefault(require("./utils/bound"));
+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 }; }
+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); }
+const prefixCls = 'bui-tabs';
+const Tabs = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    value,
+    tabs,
+    align,
+    onChange,
+    ...others
+  } = props;
+  const [active, setActive] = (0, _react.useState)('');
+  const tabsRef = (0, _react.useRef)(null);
+  const activeLineRef = (0, _react.useRef)(null);
+  const [lineData, setLineData] = (0, _react.useState)({
+    x: 0,
+    transitionInUse: false
+  });
+  const [maskData, setMaskData] = (0, _react.useState)({
+    leftMaskOpacity: 0,
+    rightMaskOpacity: 0
+  });
+  const animate = ({
+    transitionInUse
+  }) => {
+    const container = tabsRef.current;
+    if (!container) return;
+    const activeIndex = !!tabs.length && tabs.findIndex(item => item.index === (active || tabs[0]?.index));
+    const activeLine = activeLineRef.current;
+    if (!activeLine) return;
+    let activeTab;
+    if (tabs.length) {
+      activeTab = container.childNodes[activeIndex + 1];
+    } else {
+      activeTab = [...container.childNodes].find(child => {
+        if (_utils.isMini) {
+          return [...child.classList.tokenList].includes('bui-tab-miniapp-active');
+        }
+        return [...child.classList].includes('bui-tab-active');
+      });
+    }
+    if (!activeTab) return;
+    const activeTabLeft = activeTab.offsetLeft;
+    const activeTabWidth = activeTab.offsetWidth;
+    const containerWidth = container.offsetWidth;
+    const containerScrollWidth = container.scrollWidth;
+    const activeLineWidth = activeLine.offsetWidth;
+    const x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
+    setLineData({
+      x,
+      transitionInUse
+    });
+    const maxScrollDistance = containerScrollWidth - containerWidth;
+    if (maxScrollDistance <= 0) return;
+    const nextScrollLeft = (0, _bound.default)(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, containerScrollWidth - containerWidth);
+    if (tabsRef.current) {
+      tabsRef.current.scrollLeft = nextScrollLeft;
+    }
+  };
+  (0, _react.useEffect)(() => {
+    const defaultIndex = safeValue();
+    setActive(defaultIndex);
+  }, [value]);
+  (0, _react.useLayoutEffect)(() => {
+    animate({
+      transitionInUse: false
+    });
+  }, []);
+  (0, _react.useEffect)(() => {
+    const handleResize = (0, _utils.debounce)(() => {
+      animate({
+        transitionInUse: true
+      });
+    }, 100);
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [active]);
+  (0, _utils.useDidMountEffect)(() => {
+    animate({
+      transitionInUse: true
+    });
+  }, [active, tabs]);
+  const safeValue = () => {
+    let defaultIndex = value;
+    if (!!tabs.length && !tabs.some(item => item.index === value)) {
+      defaultIndex = tabs[0]?.index;
+    }
+    return defaultIndex;
+  };
+  const updateMask = (0, _react.useMemo)(() => (0, _utils.throttle)(() => {
+    const container = tabsRef.current;
+    if (!container) return;
+    const scrollLeft = container?.scrollLeft;
+    const showLeftMask = scrollLeft > 0;
+    const showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
+    setMaskData({
+      leftMaskOpacity: showLeftMask ? 1 : 0,
+      rightMaskOpacity: showRightMask ? 1 : 0
+    });
+  }, 100, {
+    trailing: true,
+    leading: true
+  }), []);
+  (0, _react.useLayoutEffect)(() => {
+    updateMask();
+  }, []);
+  const handleClick = (e, item) => {
+    const {
+      index,
+      disabled = false
+    } = item;
+    if (disabled) return;
+    if (index === undefined || index === null) {
+      return;
+    }
+    if (active !== value) {
+      setActive(index);
+    }
+    if (index !== value) {
+      onChange?.(e, {
+        index
+      });
+    }
+  };
+  const providerValue = (0, _react.useMemo)(() => {
+    const v = safeValue();
+    return {
+      value: v,
+      align,
+      triggerChange: handleClick
+    };
+  }, [value, align, handleClick]);
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    className: (0, _clsx.default)(prefixCls, className)
+  }, others), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(`${prefixCls}-mask`, `${prefixCls}-mask-left`),
+    style: {
+      opacity: maskData.leftMaskOpacity
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(`${prefixCls}-mask`, `${prefixCls}-mask-right`),
+    style: {
+      opacity: maskData.rightMaskOpacity
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-tabs`,
+    ref: tabsRef,
+    onScroll: updateMask
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: activeLineRef,
+    className: (0, _clsx.default)(`${prefixCls}-tabline`, {
+      'bui-tabline-invisible': _utils.isMini
+    }),
+    style: {
+      transition: lineData.transitionInUse ? 'transform 0.25s ease-in-out' : '',
+      transform: `translate3d(${lineData.x}px, 0px, 0px)`
+    }
+  }), /*#__PURE__*/_react.default.createElement(_TabsContext.TabsContextProvider, {
+    value: providerValue
+  }, !!tabs.length && tabs.map(item => {
+    return /*#__PURE__*/_react.default.createElement(_Tab.default, {
+      key: item.index,
+      index: item?.index,
+      disabled: item?.disabled
+    }, item.title);
+  }), children)));
+});
+Tabs.displayName = 'BuiTabs';
+Tabs.defaultProps = {
+  align: 'center',
+  tabs: []
+};
+var _default = exports.default = Tabs;

package/dist/Tabs/Tabs.types.d.ts

@@ -0,0 +1,45 @@
+import { OverrideProps } from '@bifrostui/types';
+import React, { SyntheticEvent } from 'react';
+export interface TabHeaderItem {
+    title: React.ReactNode;
+    index: string;
+    /**
+     * 是否禁止点击
+     */
+    disabled?: boolean;
+}
+export interface ITabsChangeData {
+    /** 切换后的tab索引 */
+    index: string;
+}
+export type TabChangeEvent = (e?: SyntheticEvent, data?: ITabsChangeData) => void;
+export interface ITabItem {
+    /** 面板标题 */
+    title: React.ReactNode;
+    /** 面板的索引值 */
+    index: string;
+    /** 面板是否禁用 */
+    disabled?: boolean;
+}
+export type ITabAlign = 'start' | 'center';
+export type TabsProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 当前选中面板的索引值，与tabs.index对应
+         */
+        value?: string;
+        /**
+         * 切换面板的数据
+         */
+        tabs?: ITabItem[];
+        /**
+         * 对齐方式，默认为center
+         */
+        align?: ITabAlign;
+        /**
+         * 切换面板的回调
+         */
+        onChange?: TabChangeEvent;
+    };
+    defaultComponent: D;
+}, D>;

package/dist/Tabs/Tabs.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/Tabs/TabsContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TabChangeEvent, TabsProps } from './Tabs.types';
+declare const TabsContext: React.Context<Omit<TabsProps, "onChange"> & {
+    triggerChange: TabChangeEvent;
+}>;
+export declare const TabsContextProvider: React.Provider<Omit<TabsProps, "onChange"> & {
+    triggerChange: TabChangeEvent;
+}>;
+export default TabsContext;

package/dist/Tabs/TabsContext.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TabsContextProvider = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TabsContext = /*#__PURE__*/_react.default.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  TabsContext.displayName = 'BuiTabsContext';
+}
+const TabsContextProvider = exports.TabsContextProvider = TabsContext.Provider;
+var _default = exports.default = TabsContext;

package/dist/Tabs/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Tab } from './Tab';
+export * from './Tab.types';
+export { default as TabPanel } from './TabPanel';
+export * from './TabPanel.types';
+export { default, default as Tabs } from './Tabs';
+export * from './Tabs.types';

package/dist/Tabs/index.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Tab: true,
+  TabPanel: true,
+  Tabs: true
+};
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function () {
+    return _Tab.default;
+  }
+});
+Object.defineProperty(exports, "TabPanel", {
+  enumerable: true,
+  get: function () {
+    return _TabPanel.default;
+  }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function () {
+    return _Tabs.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Tabs.default;
+  }
+});
+var _Tab = _interopRequireDefault(require("./Tab"));
+var _Tab2 = require("./Tab.types");
+Object.keys(_Tab2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Tab2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tab2[key];
+    }
+  });
+});
+var _TabPanel = _interopRequireDefault(require("./TabPanel"));
+var _TabPanel2 = require("./TabPanel.types");
+Object.keys(_TabPanel2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TabPanel2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TabPanel2[key];
+    }
+  });
+});
+var _Tabs = _interopRequireDefault(require("./Tabs"));
+var _Tabs2 = require("./Tabs.types");
+Object.keys(_Tabs2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Tabs2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tabs2[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/Tabs/utils/bound.d.ts

@@ -0,0 +1 @@
+export default function bound(position: number, min: number | undefined, max: number | undefined): number;

package/dist/Tabs/utils/bound.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = bound;
+function bound(position, min, max) {
+  let ret = position;
+  if (min !== undefined) {
+    ret = Math.max(position, min);
+  }
+  if (max !== undefined) {
+    ret = Math.min(ret, max);
+  }
+  return ret;
+}

package/dist/Tag/Tag.css

@@ -0,0 +1,97 @@
+.bui-tag {
+  --color: var(--bui-tag-color, var(--bui-color-gray));
+  --border-color: var(--bui-tag-border-color, var(--bui-color-border-gray));
+  --bg-color: var(--bui-tag-bg-color, var(--bui-color-gray));
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  height: 15px;
+  line-height: 15px;
+  padding: 0 var(--bui-spacing-xs);
+  font-size: var(--bui-text-size-5);
+  font-weight: var(--bui-font-weight-normal);
+  border-radius: var(--bui-shape-radius-label);
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  color: var(--bui-color-bg-view);
+  font-family: var(--bui-font-family);
+}
+.bui-tag-outlined {
+  color: var(--color);
+  border: 1px solid var(--border-color);
+}
+.bui-tag-outlined.bui-tag-primary {
+  color: var(--bui-color-primary);
+  border: 1px solid var(--bui-color-border-primary);
+}
+.bui-tag-outlined.bui-tag-info {
+  color: var(--bui-color-info);
+  border: 1px solid var(--bui-color-border-info);
+}
+.bui-tag-outlined.bui-tag-warning {
+  color: var(--bui-color-warning);
+  border: 1px solid var(--bui-color-border-warning);
+}
+.bui-tag-outlined.bui-tag-success {
+  color: var(--bui-color-success);
+  border: 1px solid var(--bui-color-border-success);
+}
+.bui-tag-outlined.bui-tag-danger {
+  color: var(--bui-color-danger);
+  border: 1px solid var(--bui-color-border-danger);
+}
+.bui-tag-outlined.bui-tag-vip {
+  color: var(--bui-color-vip);
+  border: 1px solid rgba(255, 134, 110, 0.4);
+}
+.bui-tag-contained {
+  background-color: var(--bg-color);
+}
+.bui-tag-contained.bui-tag-primary {
+  background-color: var(--bui-color-primary);
+}
+.bui-tag-contained.bui-tag-info {
+  background-color: var(--bui-color-info);
+}
+.bui-tag-contained.bui-tag-warning {
+  background-color: var(--bui-color-warning);
+}
+.bui-tag-contained.bui-tag-success {
+  background-color: var(--bui-color-success);
+}
+.bui-tag-contained.bui-tag-danger {
+  background-color: var(--bui-color-danger);
+}
+.bui-tag-contained.bui-tag-vip {
+  background-color: var(--bui-color-vip);
+}
+.bui-tag-light {
+  background-color: var(--bui-color-gray-light);
+  color: var(--bui-color-gray);
+}
+.bui-tag-light.bui-tag-primary {
+  background-color: var(--bui-color-primary-light);
+  color: var(--bui-color-primary);
+}
+.bui-tag-light.bui-tag-info {
+  background-color: var(--bui-color-info-light);
+  color: var(--bui-color-info);
+}
+.bui-tag-light.bui-tag-warning {
+  background-color: var(--bui-color-warning-light);
+  color: var(--bui-color-warning);
+}
+.bui-tag-light.bui-tag-success {
+  background-color: var(--bui-color-success-light);
+  color: var(--bui-color-success);
+}
+.bui-tag-light.bui-tag-danger {
+  background-color: var(--bui-color-danger-light);
+  color: var(--bui-color-danger);
+}
+.bui-tag-light.bui-tag-vip {
+  background-color: rgba(255, 134, 110, 0.3);
+  color: var(--bui-color-vip);
+}

package/dist/Tag/Tag.d.ts

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

package/dist/Tag/Tag.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _utils = require("@bifrostui/utils");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireDefault(require("react"));
+require("./Tag.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+// 只支持 rgba rgb hex
+// 处理rgb格式的颜色
+const colorHandler = (color, opacity = 1) => {
+  // rgba
+  if (color.includes('rgba')) {
+    const lastCommaIndex = color.lastIndexOf(',');
+    return `${color.slice(0, lastCommaIndex)}, ${opacity})`;
+  }
+
+  // rgb
+  if (color.includes('rgb')) {
+    color = color.replace('rgb', 'rgba');
+    const len = color.length;
+    return `${color.slice(0, len - 1)}, ${opacity})`;
+  }
+
+  // hex
+  return (0, _utils.convertHexToRGBA)(color, opacity);
+};
+const prefixCls = 'bui-tag';
+const Tag = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    className,
+    style,
+    color,
+    htmlColor,
+    variant,
+    onClick,
+    children,
+    ...others
+  } = props;
+  let customStyles;
+  if (htmlColor) {
+    if (variant === 'outlined') {
+      customStyles = {
+        color: htmlColor,
+        borderColor: colorHandler(htmlColor, 0.4)
+      };
+    } else if (variant === 'light') {
+      customStyles = {
+        color: htmlColor,
+        backgroundColor: colorHandler(htmlColor, 0.3)
+      };
+    } else {
+      customStyles = {
+        backgroundColor: htmlColor
+      };
+    }
+  }
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _clsx.default)(prefixCls, {
+      [`${prefixCls}-${variant}`]: variant,
+      [`${prefixCls}-${color}`]: color
+    }, className),
+    ref: ref,
+    style: {
+      ...style,
+      ...customStyles
+    },
+    onClick: onClick
+  }, others), children);
+});
+Tag.displayName = 'BuiTag';
+Tag.defaultProps = {
+  variant: 'outlined',
+  color: 'default'
+};
+var _default = exports.default = Tag;