@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/Tabs/Tabs.js

@@ -56,23 +56,21 @@ __export(Tabs_exports, {
   default: () => Tabs_default
 });
 module.exports = __toCommonJS(Tabs_exports);
-var import_utils = require("@bifrostui/utils");
-var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var import_utils = require("@bifrostui/utils");
+var import_scroll = __toESM(require("./utils/scroll"));
 var import_Tab = __toESM(require("./Tab"));
 var import_TabsContext = require("./TabsContext");
-var import_scroll = __toESM(require("./utils/scroll"));
 var import_Tabs2 = require("./Tabs.css");
 const prefixCls = "bui-tabs";
 const duration = 300;
 const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = props, { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
-  const [active, setActive] = (0, import_react.useState)("");
+  const _a = props, { children, className, value, tabs = [], onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "onChange"]);
   const tabsRef = (0, import_react.useRef)(null);
   const activeLineRef = (0, import_react.useRef)(null);
-  const [lineData, setLineData] = (0, import_react.useState)({
+  const [indicatorData, setIndicatorData] = (0, import_react.useState)({
     x: 0,
-    transitionInUse: false,
     hasActiveTab: false
   });
   const [maskData, setMaskData] = (0, import_react.useState)({
@@ -80,37 +78,35 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     rightMaskOpacity: 0
   });
   const getActiveTabElement = () => {
-    const container = tabsRef.current;
-    if (!container)
-      return void 0;
-    const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === active);
-    let activeTab;
+    const tabsEl = tabsRef.current;
+    if (!tabsEl)
+      return;
+    const activeIndex = tabs.findIndex((item) => item.index === value);
     if (tabs.length) {
-      activeTab = activeIndex > -1 ? container.childNodes[activeIndex + 1] : void 0;
-    } else {
-      activeTab = [...container.childNodes].find((child) => {
-        if (import_utils.isMini) {
-          return [...child.classList.tokenList].includes(
-            "bui-tab-miniapp-active"
-          );
-        }
-        return [...child.classList].includes("bui-tab-active");
-      });
+      return activeIndex > -1 ? tabsEl.childNodes[activeIndex + 1] : void 0;
     }
-    return activeTab;
+    return [...tabsEl.childNodes].find((child) => {
+      var _a2, _b;
+      if (import_utils.isMini) {
+        return [...(_b = (_a2 = child == null ? void 0 : child.classList) == null ? void 0 : _a2.tokenList) != null ? _b : []].includes(
+          "bui-tab-miniapp-active"
+        );
+      }
+      return [...child.classList].includes("bui-tab-active");
+    });
   };
   const scrollIntoView = () => {
-    const tabsContainer = tabsRef.current;
+    const tabsEl = tabsRef.current;
     const activeTab = getActiveTabElement();
-    if (!tabsContainer || !activeTab) {
+    if (!tabsEl || !activeTab) {
       return;
     }
-    const to = activeTab.offsetLeft - (tabsContainer.offsetWidth - activeTab.offsetWidth) / 2;
-    (0, import_scroll.default)(tabsContainer, to, duration);
+    const to = activeTab.offsetLeft - (tabsEl.offsetWidth - activeTab.offsetWidth) / 2;
+    (0, import_scroll.default)(tabsEl, to, duration);
   };
-  const animate = ({ transitionInUse }) => {
-    const container = tabsRef.current;
-    if (!container)
+  const animate = (0, import_utils.useEventCallback)(() => {
+    const tabsEl = tabsRef.current;
+    if (!tabsEl)
       return;
     const activeLine = activeLineRef.current;
     if (!activeLine)
@@ -125,14 +121,13 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     if (activeTab) {
       activeTabLeft = activeTab.offsetLeft;
       activeTabWidth = activeTab.offsetWidth;
-      containerWidth = container.offsetWidth;
-      containerScrollWidth = container.scrollWidth;
+      containerWidth = tabsEl.offsetWidth;
+      containerScrollWidth = tabsEl.scrollWidth;
       activeLineWidth = activeLine.offsetWidth;
       x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
     }
-    setLineData({
+    setIndicatorData({
       x,
-      transitionInUse,
       hasActiveTab: !!activeTab
     });
     const maxScrollDistance = containerScrollWidth - containerWidth;
@@ -141,36 +136,17 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     if (!import_utils.isMini) {
       scrollIntoView();
     }
-  };
-  (0, import_react.useEffect)(() => {
-    setActive(value);
-  }, [value]);
-  (0, import_react.useLayoutEffect)(() => {
-    animate({ transitionInUse: false });
-  }, []);
-  (0, import_react.useEffect)(() => {
-    const handleResize = (0, import_utils.debounce)(() => {
-      animate({ transitionInUse: true });
-      updateMask();
-    }, 100);
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [active]);
-  (0, import_utils.useDidMountEffect)(() => {
-    animate({ transitionInUse: true });
-  }, [active, tabs, children]);
+  });
   const updateMask = (0, import_react.useMemo)(
     () => (0, import_utils.throttle)(
       () => {
-        const container = tabsRef.current;
-        if (!container)
+        const tabsEl = tabsRef.current;
+        if (!tabsEl)
           return;
-        const scrollLeft = container == null ? void 0 : container.scrollLeft;
+        const scrollLeft = tabsEl == null ? void 0 : tabsEl.scrollLeft;
         const showLeftMask = scrollLeft > 0;
         const rightRange = Math.abs(
-          container.scrollWidth - (scrollLeft + container.offsetWidth)
+          tabsEl.scrollWidth - (scrollLeft + tabsEl.offsetWidth)
         );
         const showRightMask = rightRange > 1;
         setMaskData({
@@ -186,33 +162,36 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     ),
     []
   );
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react.useEffect)(() => {
+    animate();
+  }, [value, tabs.length, import_react.default.Children.toArray(children).length]);
+  (0, import_react.useEffect)(() => {
     updateMask();
+    const handleResize = (0, import_utils.debounce)(() => {
+      animate();
+      updateMask();
+    }, 100);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
   }, []);
   const handleClick = (e, item) => {
     const { index, disabled = false } = item;
-    if (disabled)
-      return;
-    if (index === void 0 || index === null) {
+    if (disabled || [void 0, null].includes(index))
       return;
-    }
-    if (active !== value) {
-      setActive(index);
-    }
     if (index !== value) {
       onChange == null ? void 0 : onChange(e, { index });
     }
   };
-  const providerValue = (0, import_react.useMemo)(() => {
-    return { value, align, triggerChange: handleClick };
-  }, [value, align, children, handleClick]);
   return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ ref, className: (0, import_clsx.default)(prefixCls, className) }, others), /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
       className: (0, import_clsx.default)(`${prefixCls}-mask`, `${prefixCls}-mask-left`),
       style: {
         opacity: maskData.leftMaskOpacity
-      }
+      },
+      "aria-hidden": "true"
     }
   ), /* @__PURE__ */ import_react.default.createElement(
     "div",
@@ -220,35 +199,48 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       className: (0, import_clsx.default)(`${prefixCls}-mask`, `${prefixCls}-mask-right`),
       style: {
         opacity: maskData.rightMaskOpacity
-      }
+      },
+      "aria-hidden": "true"
     }
-  ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-tabs`, ref: tabsRef, onScroll: updateMask }, /* @__PURE__ */ import_react.default.createElement(
+  ), /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
-      ref: activeLineRef,
-      className: (0, import_clsx.default)(`${prefixCls}-tabline`, {
-        "bui-tabline-invisible": import_utils.isMini || !lineData.hasActiveTab
-      }),
-      style: {
-        transition: lineData.transitionInUse ? `transform ${duration / 1e3}s ease` : void 0,
-        transform: `translate3d(${lineData.x}px, 0px, 0px)`
-      }
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(import_TabsContext.TabsContextProvider, { value: providerValue }, !!tabs.length && tabs.map((item) => {
-    return /* @__PURE__ */ import_react.default.createElement(
-      import_Tab.default,
+      className: `${prefixCls}-tabs`,
+      ref: tabsRef,
+      onScroll: updateMask,
+      role: "tablist",
+      "aria-orientation": "horizontal"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
       {
-        key: item.index,
-        index: item == null ? void 0 : item.index,
-        disabled: item == null ? void 0 : item.disabled
-      },
-      item.title
-    );
-  }), children)));
+        ref: activeLineRef,
+        className: (0, import_clsx.default)(`${prefixCls}-indicator`, {
+          "bui-indicator-invisible": import_utils.isMini || !indicatorData.hasActiveTab
+        }),
+        style: {
+          transition: "transform 0.3s ease-in-out",
+          transform: `translate(${indicatorData.x}px, 0px)`
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ import_react.default.createElement(import_TabsContext.TabsContextProvider, { value: { value, triggerChange: handleClick } }, !!tabs.length && tabs.map((item) => {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_Tab.default,
+        {
+          key: item.index,
+          index: item == null ? void 0 : item.index,
+          disabled: item == null ? void 0 : item.disabled,
+          role: "tab",
+          "aria-selected": value === item.index,
+          "aria-disabled": item == null ? void 0 : item.disabled,
+          tabIndex: (item == null ? void 0 : item.disabled) ? -1 : 0
+        },
+        item.title
+      );
+    }), children)
+  ));
 });
 Tabs.displayName = "BuiTabs";
-Tabs.defaultProps = {
-  align: "center",
-  tabs: []
-};
 var Tabs_default = Tabs;

package/dist/Tabs/TabsContext.js

@@ -32,7 +32,9 @@ __export(TabsContext_exports, {
 });
 module.exports = __toCommonJS(TabsContext_exports);
 var import_react = __toESM(require("react"));
-const TabsContext = import_react.default.createContext(void 0);
+const TabsContext = import_react.default.createContext(
+  void 0
+);
 if (process.env.NODE_ENV !== "production") {
   TabsContext.displayName = "BuiTabsContext";
 }

package/dist/Tabs/index.css

@@ -0,0 +1,135 @@
+:root,
+page,
+xhs-page {
+  --bui-tabs-height: 39px;
+  --bui-tabs-font-weight: var(--bui-font-weight-medium);
+  --bui-tabs-indicator-bg: var(--bui-color-primary);
+  --bui-tabs-indicator-height: 3PX;
+  --bui-tabs-indicator-width: 24px;
+  --bui-tabs-indicator-border-radius: 3px 3px 0 0;
+  --bui-tabs-indicator-bottom: 0;
+  --bui-tabs-indicator-box-shadow: none;
+  --bui-tabs-mask-width: 12px;
+  --bui-tabs-mask-height: 100%;
+  --bui-tab-font-size: var(--bui-text-size-1);
+  --bui-tab-color: var(--bui-color-fg-subtle);
+  --bui-tab-height: 100%;
+  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
+  --bui-tab-active-color: var(--bui-color-fg-default);
+  --bui-tab-active-font-family: var(--bui-font-family-accent, inherit);
+}
+.bui-tabs {
+  position: relative;
+  font-family: var(--bui-font-family);
+  font-weight: var(--bui-tabs-font-weight);
+}
+.bui-tabs-tabs {
+  height: var(--bui-tabs-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-indicator {
+  position: absolute;
+  width: var(--bui-tabs-indicator-width);
+  bottom: var(--bui-tabs-indicator-bottom);
+  height: var(--bui-tabs-indicator-height);
+  color: var(--bui-color-primary);
+  background: var(--bui-tabs-indicator-bg);
+  border-radius: var(--bui-tabs-indicator-border-radius);
+  box-shadow: var(--bui-tabs-indicator-box-shadow);
+}
+.bui-tabs-content {
+  padding: var(--bui-spacing-lg);
+}
+.bui-tabs-mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: var(--bui-tabs-mask-width);
+  height: var(--bui-tabs-mask-height);
+  pointer-events: none;
+}
+.bui-tabs-mask-left {
+  left: 0;
+  background:
+    linear-gradient(
+      to right,
+      var(--bui-color-bg-view),
+      rgba(255, 255, 255, 0));
+}
+.bui-tabs-mask-right {
+  right: 0;
+  background:
+    linear-gradient(
+      to left,
+      var(--bui-color-bg-view),
+      rgba(255, 255, 255, 0));
+}
+.bui-indicator-invisible {
+  visibility: hidden;
+  background-color: transparent;
+}
+.bui-tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  width: min-content;
+  height: var(--bui-tab-height);
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+  font-size: var(--bui-tab-font-size);
+  line-height: var(--bui-line-height);
+  color: var(--bui-tab-color);
+  padding: var(--bui-tab-padding);
+  font-family: var(--bui-font-family);
+}
+.bui-tab-active {
+  color: var(--bui-tab-active-color);
+  font-weight: var(--bui-font-weight-bold);
+  font-family: var(--bui-tab-active-font-family);
+}
+.bui-tab-miniapp-active {
+  color: var(--bui-tab-active-color);
+  line-height: 1.5;
+  font-weight: var(--bui-font-weight-bold);
+  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(--bui-color-primary);
+}
+.bui-tab-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.bui-indicator-invisible {
+  visibility: hidden;
+  background-color: transparent;
+}
+.bui-tabpanel {
+  font-family: var(--bui-font-family);
+}
+.bui-tabpanel-active {
+  display: block;
+}
+.bui-tabpanel-inactive {
+  display: none;
+}

package/dist/Tag/Tag.css

@@ -1,30 +1,34 @@
+:root,
+page,
+xhs-page {
+  --bui-tag-color: var(--bui-color-gray);
+  --bui-tag-border-color: var(--bui-color-border-gray);
+  --bui-tag-bg-color: var(--bui-color-gray);
+  --bui-tag-height: 15px;
+  --bui-tag-line-height: 15px;
+  --bui-tag-padding: 0 var(--bui-spacing-xs);
+  --bui-tag-color-vip: rgba(255, 134, 110, 0.3);
+}
 .bui-tag {
-  --tag-color: var(--bui-tag-color, var(--bui-color-gray));
-  --tag-border-color: var(--bui-tag-border-color, var(--bui-color-border-gray));
-  --tag-bg-color: var(--bui-tag-bg-color, var(--bui-color-gray));
-  --tag-height: var(--bui-tag-height, 15px);
-  --tag-line-height: var(--bui-tag-line-height, 15px);
-  --tag-padding: var(--bui-tag-padding, 0 var(--bui-spacing-xs));
-  --tag-bg-color-vip: var(--bui-tag-color-vip, rgba(255, 134, 110, 0.3));
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  height: var(--tag-height);
-  line-height: var(--tag-line-height);
-  padding: var(--tag-padding);
+  height: var(--bui-tag-height);
+  line-height: var(--bui-tag-line-height);
+  padding: var(--bui-tag-padding);
   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);
+  color: var(--bui-color-white);
   font-family: var(--bui-font-family);
 }
 .bui-tag-outlined {
-  color: var(--tag-color);
-  border: 1px solid var(--tag-border-color);
+  color: var(--bui-tag-color);
+  border: 1px solid var(--bui-tag-border-color);
 }
 .bui-tag-outlined.bui-tag-primary {
   color: var(--bui-color-primary);
@@ -46,12 +50,20 @@
   color: var(--bui-color-danger);
   border: 1px solid var(--bui-color-border-danger);
 }
+.bui-tag-outlined.bui-tag-light {
+  color: var(--bui-color-bg-view);
+  border: 1px solid var(--bui-color-bg-view);
+}
+.bui-tag-outlined.bui-tag-dark {
+  color: var(--bui-color-fg-default);
+  border: 1px solid var(--bui-color-fg-default);
+}
 .bui-tag-outlined.bui-tag-vip {
-  color: var(--bui-color-red);
+  color: var(--bui-color-primary);
   border: 1px solid var(--bui-color-border-primary);
 }
 .bui-tag-contained {
-  background-color: var(--tag-bg-color);
+  background-color: var(--bui-tag-bg-color);
 }
 .bui-tag-contained.bui-tag-primary {
   background-color: var(--bui-color-primary);
@@ -68,34 +80,48 @@
 .bui-tag-contained.bui-tag-danger {
   background-color: var(--bui-color-danger);
 }
+.bui-tag-contained.bui-tag-light {
+  color: var(--bui-color-fg-default);
+  background-color: var(--bui-color-bg-view);
+}
+.bui-tag-contained.bui-tag-dark {
+  color: var(--bui-color-bg-view);
+  background-color: var(--bui-color-fg-default);
+}
 .bui-tag-contained.bui-tag-vip {
   background-color: var(--bui-color-vip);
 }
-.bui-tag-light {
+.bui-tag-subtle {
   background-color: var(--bui-color-gray-light);
   color: var(--bui-color-gray);
 }
-.bui-tag-light.bui-tag-primary {
+.bui-tag-subtle.bui-tag-primary {
   background-color: var(--bui-color-primary-light);
   color: var(--bui-color-primary);
 }
-.bui-tag-light.bui-tag-info {
+.bui-tag-subtle.bui-tag-info {
   background-color: var(--bui-color-info-light);
   color: var(--bui-color-info);
 }
-.bui-tag-light.bui-tag-warning {
+.bui-tag-subtle.bui-tag-warning {
   background-color: var(--bui-color-warning-light);
   color: var(--bui-color-warning);
 }
-.bui-tag-light.bui-tag-success {
+.bui-tag-subtle.bui-tag-success {
   background-color: var(--bui-color-success-light);
   color: var(--bui-color-success);
 }
-.bui-tag-light.bui-tag-danger {
+.bui-tag-subtle.bui-tag-danger {
   background-color: var(--bui-color-danger-light);
   color: var(--bui-color-danger);
 }
-.bui-tag-light.bui-tag-vip {
-  background-color: var(--tag-bg-color-vip);
+.bui-tag-subtle.bui-tag-light {
+  color: var(--bui-color-bg-view);
+}
+.bui-tag-subtle.bui-tag-dark {
+  color: var(--bui-color-fg-default);
+}
+.bui-tag-subtle.bui-tag-vip {
+  background-color: var(--bui-tag-color-vip);
   color: var(--bui-color-vip);
 }

package/dist/Tag/Tag.js

@@ -77,9 +77,9 @@ const Tag = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     className,
     style,
-    color,
+    color = "neutral",
     htmlColor,
-    variant,
+    variant = "outlined",
     onClick,
     children
   } = _a, others = __objRest(_a, [
@@ -98,7 +98,7 @@ const Tag = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
         color: htmlColor,
         borderColor: colorHandler(htmlColor, 0.4)
       };
-    } else if (variant === "light") {
+    } else if (variant === "subtle") {
       customStyles = {
         color: htmlColor,
         backgroundColor: colorHandler(htmlColor, 0.3)
@@ -128,8 +128,4 @@ const Tag = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   );
 });
 Tag.displayName = "BuiTag";
-Tag.defaultProps = {
-  variant: "outlined",
-  color: "default"
-};
 var Tag_default = Tag;

package/dist/Tag/TagGroup.css

@@ -1,12 +1,16 @@
+:root,
+page,
+xhs-page {
+  --bui-tag-group-divider-height: 13%;
+  --bui-tag-color: var(--bui-color-gray);
+  --bui-tag-border-color: var(--bui-color-border-gray);
+  --bui-tag-bg-color: var(--bui-color-gray);
+  --bui-tag-height: 15px;
+  --bui-tag-line-height: 15px;
+  --bui-tag-padding: 0 var(--bui-spacing-xs);
+  --bui-tag-color-vip: rgba(255, 134, 110, 0.3);
+}
 .bui-tag-group {
-  --height: var(--bui-tag-group-divider-height, 13%);
-  --tag-color: var(--bui-tag-color, var(--bui-color-gray));
-  --tag-border-color: var(--bui-tag-border-color, var(--bui-color-border-gray));
-  --tag-bg-color: var(--bui-tag-bg-color, var(--bui-color-gray));
-  --tag-height: var(--bui-tag-height, 15px);
-  --tag-line-height: var(--bui-tag-line-height, 15px);
-  --tag-padding: var(--bui-tag-padding, 0 var(--bui-spacing-xs));
-  --tag-bg-color-vip: var(--bui-tag-color-vip, rgba(255, 134, 110, 0.3));
   display: inline-flex;
   font-family: var(--bui-font-family);
 }
@@ -32,9 +36,9 @@
   position: absolute;
   right: -1px;
   width: 1px;
-  height: var(--height);
-  color: #fff;
-  background-color: #fff;
+  height: var(--bui-tag-group-divider-height);
+  color: var(--bui-color-white);
+  background-color: var(--bui-color-white);
   border-right-style: solid;
 }
 .bui-tag-group .bui-tag:not(:last-child) {

package/dist/Tag/TagGroup.js

@@ -60,17 +60,19 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_TagGroup2 = require("./TagGroup.css");
 const prefixCls = "bui-tag-group";
-const Tag = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = props, { className, onClick, children } = _a, others = __objRest(_a, ["className", "onClick", "children"]);
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    __spreadValues({
-      ref,
-      onClick,
-      className: (0, import_clsx.default)(prefixCls, className)
-    }, others),
-    children
-  );
-});
-Tag.displayName = "BuiTagGroup";
-var TagGroup_default = Tag;
+const TagGroup = /* @__PURE__ */ import_react.default.forwardRef(
+  (props, ref) => {
+    const _a = props, { className, onClick, children } = _a, others = __objRest(_a, ["className", "onClick", "children"]);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      __spreadValues({
+        ref,
+        onClick,
+        className: (0, import_clsx.default)(prefixCls, className)
+      }, others),
+      children
+    );
+  }
+);
+TagGroup.displayName = "BuiTagGroup";
+var TagGroup_default = TagGroup;