@bifrostui/react 2.0.0-alpha.2 → 2.0.0-alpha.21

package/es/Tabs/miniapp/Tabs.js

@@ -0,0 +1,229 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import React, { useMemo, useState } from "react";
+import clsx from "clsx";
+import Taro from "@tarojs/taro";
+import { ScrollView } from "@tarojs/components";
+import { useValue, useEventCallback } from "@bifrostui/utils";
+import Tab from "./Tab";
+import TabIndicator from "./TabIndicator";
+import TabMask from "../TabMask";
+import { TabsContextProvider } from "./TabsContext";
+import {
+  tabsRootClass,
+  tabsScrollClass,
+  tabsScrollWrapperClass
+} from "../classes";
+import {
+  batchQueryContainerSize,
+  batchQueryForScroll
+} from "./utils/queryBatch";
+import "../Tabs.css";
+const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    value,
+    defaultValue,
+    tabs = [],
+    onChange,
+    style
+  } = props;
+  const handleOnChange = useEventCallback(
+    (e, data) => {
+      onChange == null ? void 0 : onChange(e, { index: data.value });
+    }
+  );
+  const [currentValue, triggerValueChange] = useValue({
+    value,
+    defaultValue: defaultValue != null ? defaultValue : "",
+    onChange: handleOnChange,
+    config: {
+      name: "Tabs",
+      state: "value"
+    }
+  });
+  const tabsContainerId = useMemo(
+    () => `bui-tabs-${Math.random().toString(36).slice(2, 11)}`,
+    []
+  );
+  const scrollViewId = `${tabsContainerId}-scroll`;
+  const wrapperId = `${tabsContainerId}-wrapper`;
+  const [registeredTabValues, setRegisteredTabValues] = useState([]);
+  const [registrationVersion, setRegistrationVersion] = useState(0);
+  const [scrollLeft, setScrollLeft] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [scrollWidth, setScrollWidth] = useState(0);
+  const lastScrollLeftRef = React.useRef(0);
+  const isFirstScroll = React.useRef(true);
+  const [scrollWithAnimation, setScrollWithAnimation] = React.useState(false);
+  const isScrollable = scrollWidth > containerWidth;
+  if (process.env.NODE_ENV !== "production") {
+    if (tabs.length > 0 && React.Children.count(children) > 0) {
+      console.warn(
+        "BUI Warning: Tabs \u7EC4\u4EF6\u4E0D\u5E94\u8BE5\u540C\u65F6\u4F7F\u7528 tabs \u5C5E\u6027\u548C children\u3002\u8BF7\u53EA\u4F7F\u7528\u5176\u4E2D\u4E00\u79CD\u65B9\u5F0F\u3002\u5F53\u524D\u5C06\u4F18\u5148\u4F7F\u7528 tabs \u5C5E\u6027\uFF0Cchildren \u5C06\u88AB\u5FFD\u7565\u3002"
+      );
+    }
+  }
+  const onRegister = useEventCallback((data) => {
+    if (data.value !== void 0 && data.value !== null) {
+      setRegisteredTabValues((prev) => {
+        if (prev.includes(data.value))
+          return prev;
+        const newValues = [...prev, data.value];
+        return newValues;
+      });
+      setRegistrationVersion((v) => v + 1);
+    }
+  });
+  const onUnregister = useEventCallback((data) => {
+    setRegisteredTabValues((prev) => {
+      const newValues = prev.filter((v) => v !== data.value);
+      return newValues;
+    });
+    setRegistrationVersion((v) => v + 1);
+  });
+  const handleClick = useEventCallback(
+    (e, item) => {
+      const { index, disabled = false } = item;
+      if (disabled || [void 0, null].includes(index))
+        return;
+      if (index !== currentValue) {
+        triggerValueChange(e, index);
+      }
+    }
+  );
+  const handleScroll = useEventCallback(
+    (e) => {
+      const { scrollLeft: newScrollLeft, scrollWidth: newScrollWidth } = e.detail;
+      lastScrollLeftRef.current = newScrollLeft;
+      if (newScrollWidth && newScrollWidth !== scrollWidth) {
+        setScrollWidth(newScrollWidth);
+      }
+    }
+  );
+  React.useEffect(() => {
+    if (!scrollViewId || registeredTabValues.length === 0)
+      return;
+    Taro.nextTick(() => __async(void 0, null, function* () {
+      const { rect, fields } = yield batchQueryContainerSize(scrollViewId);
+      if (rect) {
+        setContainerWidth(rect.width);
+      }
+      if (fields) {
+        setScrollWidth(fields.scrollWidth || 0);
+      }
+    }));
+  }, [scrollViewId, registrationVersion, registeredTabValues.length]);
+  const centerActiveTab = useEventCallback(() => __async(void 0, null, function* () {
+    if (!currentValue || registeredTabValues.length === 0) {
+      return;
+    }
+    const { scrollView, scrollFields, wrapper, currentTab } = yield batchQueryForScroll({
+      scrollViewId,
+      wrapperId,
+      currentTabValue: currentValue
+    });
+    if (!scrollView || !scrollFields || !wrapper || !currentTab || currentTab.width === 0) {
+      return;
+    }
+    const tabLeftRelativeToWrapper = currentTab.left - wrapper.left;
+    const tabWidth = currentTab.width;
+    const containerViewWidth = scrollView.width;
+    const currentScrollWidth = scrollFields.scrollWidth || scrollView.width;
+    const targetScrollLeft = tabLeftRelativeToWrapper - (containerViewWidth - tabWidth) / 2;
+    const maxScrollDistance = currentScrollWidth - containerViewWidth;
+    const finalScrollLeft = Math.max(
+      0,
+      Math.min(targetScrollLeft, maxScrollDistance)
+    );
+    setScrollLeft(finalScrollLeft);
+    lastScrollLeftRef.current = finalScrollLeft;
+    if (isFirstScroll.current) {
+      Taro.nextTick(() => {
+        setScrollWithAnimation(true);
+      });
+      isFirstScroll.current = false;
+    }
+  }));
+  React.useEffect(() => {
+    if (!currentValue || registeredTabValues.length === 0) {
+      return;
+    }
+    Taro.nextTick(() => {
+      centerActiveTab();
+    });
+  }, [currentValue, centerActiveTab]);
+  React.useEffect(() => {
+    if (!currentValue || registeredTabValues.length === 0) {
+      return;
+    }
+    Taro.nextTick(() => {
+      centerActiveTab();
+    });
+  }, [registrationVersion, centerActiveTab]);
+  const contextValue = useMemo(
+    () => ({
+      value: currentValue,
+      triggerChange: handleClick,
+      onRegister,
+      onUnregister,
+      tabsContainerId: wrapperId
+    }),
+    [currentValue, handleClick, onRegister, onUnregister, wrapperId]
+  );
+  const renderedTabs = useMemo(() => {
+    if (tabs.length > 0) {
+      return tabs.map((item) => /* @__PURE__ */ React.createElement(Tab, { key: item.index, index: item == null ? void 0 : item.index, disabled: item == null ? void 0 : item.disabled }, item.title));
+    }
+    return children;
+  }, [tabs, children]);
+  return /* @__PURE__ */ React.createElement("div", { className: clsx(tabsRootClass, className), style, ref }, isScrollable && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TabMask, { position: "left" }), /* @__PURE__ */ React.createElement(TabMask, { position: "right" })), /* @__PURE__ */ React.createElement(
+    ScrollView,
+    {
+      id: scrollViewId,
+      className: tabsScrollClass,
+      scrollX: true,
+      scrollWithAnimation,
+      scrollLeft,
+      onScroll: handleScroll,
+      enhanced: true,
+      showScrollbar: false,
+      enablePassive: true,
+      enableFlex: true
+    },
+    /* @__PURE__ */ React.createElement("div", { id: wrapperId, className: tabsScrollWrapperClass }, /* @__PURE__ */ React.createElement(
+      TabIndicator,
+      {
+        currentValue,
+        registeredTabValues,
+        wrapperId,
+        scrollViewId,
+        registrationVersion
+      }
+    ), /* @__PURE__ */ React.createElement(TabsContextProvider, { value: contextValue }, renderedTabs))
+  ));
+});
+Tabs.displayName = "BuiTabs";
+var Tabs_default = Tabs;
+export {
+  Tabs_default as default
+};

package/es/Tabs/miniapp/TabsContext.d.ts

@@ -0,0 +1,17 @@
+import { TabChangeEvent } from '../Tabs.types';
+export interface TabRegisterData {
+    value: string;
+}
+export interface TabsContextValueType {
+    value?: string;
+    triggerChange?: TabChangeEvent;
+    onRegister?: (data: TabRegisterData) => void;
+    onUnregister?: (data: {
+        value: string;
+    }) => void;
+    /** 容器的唯一ID，用于生成子元素ID */
+    tabsContainerId?: string;
+}
+declare const TabsContext: import("@bifrostui/utils").Context<TabsContextValueType>;
+export declare const TabsContextProvider: import("react").Provider<TabsContextValueType> & import("react").FC<import("react").ProviderProps<TabsContextValueType>>;
+export default TabsContext;

package/es/Tabs/miniapp/TabsContext.js

@@ -0,0 +1,16 @@
+import { createContext } from "@bifrostui/utils";
+const TabsContext = createContext({
+  triggerChange: void 0,
+  onRegister: void 0,
+  onUnregister: void 0,
+  tabsContainerId: void 0
+});
+if (process.env.NODE_ENV !== "production") {
+  TabsContext.displayName = "BuiTabsContext";
+}
+const TabsContextProvider = TabsContext.Provider;
+var TabsContext_default = TabsContext;
+export {
+  TabsContextProvider,
+  TabsContext_default as default
+};

package/es/Tabs/miniapp/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tab } from './Tab';
+export { default, default as Tabs } from './Tabs';

package/es/Tabs/miniapp/index.js

@@ -0,0 +1,7 @@
+import { default as default2 } from "./Tab";
+import { default as default3, default as default4 } from "./Tabs";
+export {
+  default2 as Tab,
+  default4 as Tabs,
+  default3 as default
+};

package/es/Tabs/miniapp/scroll.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 小程序版scroll-view滚动到指定位置
+ * 使用scroll-left属性和scroll-with-animation实现平滑滚动
+ */
+interface ScrollToOptions {
+    scrollViewId: string;
+    scrollLeft: number;
+    duration?: number;
+}
+declare const scrollLeftTo: ({ scrollViewId, scrollLeft, duration, }: ScrollToOptions) => Promise<void>;
+/**
+ * 计算将目标元素滚动到视图中心所需的 scrollLeft 值
+ */
+interface CalcCenterScrollOptions {
+    containerWidth: number;
+    targetLeft: number;
+    targetWidth: number;
+    currentScrollLeft?: number;
+}
+export declare const calcCenterScroll: ({ containerWidth, targetLeft, targetWidth, currentScrollLeft, }: CalcCenterScrollOptions) => number;
+export default scrollLeftTo;

package/es/Tabs/miniapp/scroll.js

@@ -0,0 +1,29 @@
+const scrollLeftTo = ({
+  scrollViewId,
+  scrollLeft,
+  duration = 300
+}) => {
+  return new Promise((resolve) => {
+    if (duration > 0) {
+      setTimeout(resolve, duration);
+    } else {
+      resolve();
+    }
+  });
+};
+const calcCenterScroll = ({
+  containerWidth,
+  targetLeft,
+  targetWidth,
+  currentScrollLeft = 0
+}) => {
+  const targetCenter = targetLeft + targetWidth / 2;
+  const containerCenter = containerWidth / 2;
+  const scrollLeft = targetCenter - containerCenter;
+  return Math.max(0, scrollLeft);
+};
+var scroll_default = scrollLeftTo;
+export {
+  calcCenterScroll,
+  scroll_default as default
+};

package/es/Tabs/miniapp/utils/queryBatch.d.ts

@@ -0,0 +1,68 @@
+import Taro from '@tarojs/taro';
+/**
+ * Fields查询结果（包含scrollWidth）
+ */
+export interface ScrollFieldsResult {
+    scrollWidth?: number;
+    scrollHeight?: number;
+    scrollLeft?: number;
+    scrollTop?: number;
+    [key: string]: any;
+}
+/**
+ * 批量查询结果接口
+ */
+export interface BatchQueryResult {
+    scrollView: Taro.NodesRef.BoundingClientRectCallbackResult | null;
+    scrollInfo: Taro.NodesRef.ScrollOffsetCallbackResult | null;
+    scrollFields: ScrollFieldsResult | null;
+    wrapper: Taro.NodesRef.BoundingClientRectCallbackResult | null;
+    indicator: Taro.NodesRef.BoundingClientRectCallbackResult | null;
+    tabs: (Taro.NodesRef.BoundingClientRectCallbackResult | null)[];
+}
+/**
+ * 批量查询Tab相关元素
+ * 优化：一次性查询所有需要的DOM信息，减少查询次数
+ *
+ * @param scrollViewId - ScrollView的ID
+ * @param wrapperId - Wrapper容器的ID
+ * @param tabValues - 需要查询的Tab值数组
+ * @returns Promise<BatchQueryResult>
+ */
+export declare const batchQueryTabs: (params: {
+    scrollViewId: string;
+    wrapperId: string;
+    tabValues: string[];
+}) => Promise<BatchQueryResult>;
+/**
+ * 简化版批量查询（用于Tabs组件的居中滚动）
+ * 只查询必要的元素：ScrollView、Wrapper、当前Tab
+ *
+ * @param scrollViewId - ScrollView的ID
+ * @param wrapperId - Wrapper容器的ID
+ * @param currentTabValue - 当前Tab的值
+ * @returns Promise
+ */
+export declare const batchQueryForScroll: (params: {
+    scrollViewId: string;
+    wrapperId: string;
+    currentTabValue: string;
+}) => Promise<{
+    scrollView: Taro.NodesRef.BoundingClientRectCallbackResult | null;
+    scrollInfo: Taro.NodesRef.ScrollOffsetCallbackResult | null;
+    scrollFields: ScrollFieldsResult | null;
+    wrapper: Taro.NodesRef.BoundingClientRectCallbackResult | null;
+    currentTab: Taro.NodesRef.BoundingClientRectCallbackResult | null;
+}>;
+/**
+ * 简化版批量查询（用于初始化容器尺寸）
+ * 只查询ScrollView的尺寸和滚动信息
+ *
+ * @param scrollViewId - ScrollView的ID
+ * @returns Promise
+ */
+export declare const batchQueryContainerSize: (scrollViewId: string) => Promise<{
+    rect: Taro.NodesRef.BoundingClientRectCallbackResult | null;
+    scroll: Taro.NodesRef.ScrollOffsetCallbackResult | null;
+    fields: ScrollFieldsResult | null;
+}>;

package/es/Tabs/miniapp/utils/queryBatch.js

@@ -0,0 +1,65 @@
+import Taro from "@tarojs/taro";
+const batchQueryTabs = (params) => {
+  const { scrollViewId, wrapperId, tabValues } = params;
+  return new Promise((resolve) => {
+    const query = Taro.createSelectorQuery();
+    query.select(`#${scrollViewId}`).boundingClientRect();
+    query.select(`#${scrollViewId}`).scrollOffset();
+    query.select(`#${scrollViewId}`).fields({ scrollOffset: true, size: true }, null);
+    query.select(`#${wrapperId}`).boundingClientRect();
+    query.select(`#${wrapperId}-indicator`).boundingClientRect();
+    tabValues.forEach((value) => {
+      query.select(`#${wrapperId}-tab-${value}`).boundingClientRect();
+    });
+    query.exec((res) => {
+      resolve({
+        scrollView: res[0] || null,
+        scrollInfo: res[1] || null,
+        scrollFields: res[2] || null,
+        wrapper: res[3] || null,
+        indicator: res[4] || null,
+        tabs: res.slice(5)
+      });
+    });
+  });
+};
+const batchQueryForScroll = (params) => {
+  const { scrollViewId, wrapperId, currentTabValue } = params;
+  return new Promise((resolve) => {
+    const query = Taro.createSelectorQuery();
+    query.select(`#${scrollViewId}`).boundingClientRect();
+    query.select(`#${scrollViewId}`).scrollOffset();
+    query.select(`#${scrollViewId}`).fields({ scrollOffset: true, size: true }, null);
+    query.select(`#${wrapperId}`).boundingClientRect();
+    query.select(`#${wrapperId}-tab-${currentTabValue}`).boundingClientRect();
+    query.exec((res) => {
+      resolve({
+        scrollView: res[0] || null,
+        scrollInfo: res[1] || null,
+        scrollFields: res[2] || null,
+        wrapper: res[3] || null,
+        currentTab: res[4] || null
+      });
+    });
+  });
+};
+const batchQueryContainerSize = (scrollViewId) => {
+  return new Promise((resolve) => {
+    const query = Taro.createSelectorQuery();
+    query.select(`#${scrollViewId}`).boundingClientRect();
+    query.select(`#${scrollViewId}`).scrollOffset();
+    query.select(`#${scrollViewId}`).fields({ scrollOffset: true, size: true }, null);
+    query.exec((res) => {
+      resolve({
+        rect: res[0] || null,
+        scroll: res[1] || null,
+        fields: res[2] || null
+      });
+    });
+  });
+};
+export {
+  batchQueryContainerSize,
+  batchQueryForScroll,
+  batchQueryTabs
+};

package/es/Tabs/utils/scroll.js

@@ -1,6 +1,6 @@
-const root = window || global;
-let rafId;
+const root = typeof window !== "undefined" ? window : global;
 let prev = Date.now();
+const rafIdMap = /* @__PURE__ */ new WeakMap();
 const rafPolyfill = (fn) => {
   const curr = Date.now();
   const ms = Math.max(0, 16 - (curr - prev));
@@ -17,7 +17,10 @@ const raf = (fn) => {
   return requestAnimationFrame.call(root, fn);
 };
 const scrollLeftTo = (scroller, to, duration) => {
-  cancelRaf(rafId);
+  const existingRafId = rafIdMap.get(scroller);
+  if (existingRafId !== void 0) {
+    cancelRaf(existingRafId);
+  }
   let count = 0;
   const from = scroller.scrollLeft;
   const frames = duration === 0 ? 1 : Math.round(duration / 16);
@@ -25,7 +28,10 @@ const scrollLeftTo = (scroller, to, duration) => {
     scroller.scrollLeft += (to - from) / frames;
     count += 1;
     if (count < frames) {
-      rafId = raf(animate);
+      const newRafId = raf(animate);
+      rafIdMap.set(scroller, newRafId);
+    } else {
+      rafIdMap.delete(scroller);
     }
   }
   animate();

package/es/Tag/Tag.css

@@ -13,7 +13,6 @@ xhs-page {
   position: relative;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   white-space: nowrap;
   height: var(--bui-tag-height);
   line-height: var(--bui-tag-line-height);

package/es/Tag/Tag.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { TagProps } from './Tag.types';
 import './Tag.less';
 declare const Tag: React.ForwardRefExoticComponent<Omit<TagProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/es/Tag/Tag.js

@@ -28,7 +28,7 @@ var __objRest = (source, exclude) => {
 };
 import { convertHexToRGBA } from "@bifrostui/utils";
 import clsx from "clsx";
-import React from "react";
+import * as React from "react";
 import "./Tag.css";
 const colorHandler = (color, opacity = 1) => {
   if (color.includes("rgba")) {
@@ -36,9 +36,9 @@ const colorHandler = (color, opacity = 1) => {
     return `${color.slice(0, lastCommaIndex)}, ${opacity})`;
   }
   if (color.includes("rgb")) {
-    color = color.replace("rgb", "rgba");
-    const len = color.length;
-    return `${color.slice(0, len - 1)}, ${opacity})`;
+    const rgbaColor = color.replace("rgb", "rgba");
+    const len = rgbaColor.length;
+    return `${rgbaColor.slice(0, len - 1)}, ${opacity})`;
   }
   return convertHexToRGBA(color, opacity);
 };

package/es/Tag/Tag.types.d.ts

@@ -1,5 +1,5 @@
 import { OverrideProps, ThemeColor } from '@bifrostui/types';
-import React from 'react';
+import * as React from 'react';
 export type TagProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
     props: P & {
         /**

package/es/Tag/TagGroup.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { TagGroupProps } from './TagGroup.types';
 import './TagGroup.less';
 declare const TagGroup: React.ForwardRefExoticComponent<Omit<TagGroupProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/es/Tag/TagGroup.js

@@ -27,7 +27,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React from "react";
+import * as React from "react";
 import "./TagGroup.css";
 const prefixCls = "bui-tag-group";
 const TagGroup = /* @__PURE__ */ React.forwardRef(

package/es/Tag/TagGroup.types.d.ts

@@ -1,5 +1,5 @@
 import { OverrideProps } from '@bifrostui/types';
-import React from 'react';
+import * as React from 'react';
 export type TagGroupProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
     props: P;
     defaultComponent: D;

package/es/Tag/__tests__/fixtures/A11yDemos.js

@@ -23,7 +23,7 @@ const basicTagDemo = () => {
   return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Tag, { color: "primary" }, "\u4E3B\u8981\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { color: "success" }, "\u6210\u529F\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { color: "warning" }, "\u8B66\u544A\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { color: "danger" }, "\u5371\u9669\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { color: "info" }, "\u4FE1\u606F\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { color: "neutral" }, "\u4E2D\u6027\u6807\u7B7E"));
 };
 const variantTagDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Tag, { variant: "filled", color: "primary" }, "\u586B\u5145\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { variant: "outlined", color: "success" }, "\u8FB9\u6846\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { variant: "subtle", color: "warning" }, "\u8F7B\u91CF\u6807\u7B7E"));
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Tag, { variant: "contained", color: "primary" }, "\u586B\u5145\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { variant: "outlined", color: "success" }, "\u8FB9\u6846\u6807\u7B7E"), /* @__PURE__ */ React.createElement(Tag, { variant: "subtle", color: "warning" }, "\u8F7B\u91CF\u6807\u7B7E"));
 };
 const ClickableTagDemo = () => {
   const [clicked, setClicked] = useState([]);
@@ -69,7 +69,7 @@ const ClickableTagDemo = () => {
   ), clicked.length > 0 && /* @__PURE__ */ React.createElement("p", null, "\u5DF2\u70B9\u51FB\u7684\u6807\u7B7E: ", clicked.join(", ")));
 };
 const customColorTagDemo = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Tag, { htmlColor: "#ff6b6b", variant: "filled" }, "\u81EA\u5B9A\u4E49\u7EA2\u8272"), /* @__PURE__ */ React.createElement(Tag, { htmlColor: "#4ecdc4", variant: "outlined" }, "\u81EA\u5B9A\u4E49\u9752\u8272"), /* @__PURE__ */ React.createElement(Tag, { htmlColor: "#45b7d1", variant: "subtle" }, "\u81EA\u5B9A\u4E49\u84DD\u8272"), /* @__PURE__ */ React.createElement(Tag, { htmlColor: "rgb(255, 193, 7)", variant: "filled" }, "RGB \u9EC4\u8272"));
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Tag, { htmlColor: "#ff6b6b", variant: "contained" }, "\u81EA\u5B9A\u4E49\u7EA2\u8272"), /* @__PURE__ */ React.createElement(Tag, { htmlColor: "#4ecdc4", variant: "outlined" }, "\u81EA\u5B9A\u4E49\u9752\u8272"), /* @__PURE__ */ React.createElement(Tag, { htmlColor: "#45b7d1", variant: "subtle" }, "\u81EA\u5B9A\u4E49\u84DD\u8272"), /* @__PURE__ */ React.createElement(Tag, { htmlColor: "rgb(255, 193, 7)", variant: "contained" }, "RGB \u9EC4\u8272"));
 };
 const ariaLabelTagDemo = () => {
   return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
@@ -115,7 +115,7 @@ const ComplexTagListDemo = () => {
     {
       key: tag.id,
       color: tag.color,
-      variant: tag.active ? "filled" : "outlined",
+      variant: tag.active ? "contained" : "outlined",
       onClick: () => toggleTag(tag.id),
       "aria-label": `${tag.active ? "\u53D6\u6D88\u9009\u62E9" : "\u9009\u62E9"} ${tag.name} \u6280\u672F\u6807\u7B7E`,
       style: {

package/es/Tag/index.css

@@ -13,7 +13,6 @@ xhs-page {
   position: relative;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   white-space: nowrap;
   height: var(--bui-tag-height);
   line-height: var(--bui-tag-line-height);

package/es/TextArea/__tests__/fixtures/A11yDemos.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 /**
  * 自定义 TextArea 组件 Demo 集合
  * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试

package/es/TextArea/__tests__/fixtures/A11yDemos.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import TextArea from "../../TextArea";
 const basicTextAreaDemo = () => {
   return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(TextArea, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" }));

package/es/ThemeProvider/hooks/ThemeContext.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ThemeProps } from '../ThemeProvider.types';
 declare const ThemeContext: React.Context<ThemeProps>;
 export default ThemeContext;

package/es/ThemeProvider/hooks/ThemeContext.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 const ThemeContext = React.createContext(null);
 var ThemeContext_default = ThemeContext;
 export {

package/es/ThemeProvider/hooks/useTheme.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import createTheme from "./createTheme";
 import ThemeContext from "./ThemeContext";
 function useTheme(defaultTheme = createTheme(null)) {

package/es/ThemeProvider/utils/mountTokens.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { isMini } from "@bifrostui/utils";
 import { breakpoints as defaultBreakpoints, rootSelector } from "./constants";
 const updateTokens = (options) => {

package/es/Toast/Toast.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ToastProps } from './Toast.types';
 import './index.less';
 declare const ToastComponent: React.ForwardRefExoticComponent<Omit<Omit<Omit<ToastProps, "onClose">, "container">, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/es/Toast/Toast.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React from "react";
+import * as React from "react";
 import clsx from "clsx";
 import {
   ErrorCircleFilledBoldIcon,