@bifrostui/react 2.0.0-alpha.3 → 2.0.0-alpha.30

package/dist/Tabs/TabsContext.d.ts

@@ -1,8 +1,17 @@
 import React from 'react';
-import { TabChangeEvent, TabsProps } from './Tabs.types';
-type TabsContextValueType = Omit<TabsProps, 'onChange'> & {
-    triggerChange: TabChangeEvent;
-};
-declare const TabsContext: React.Context<TabsContextValueType>;
-export declare const TabsContextProvider: React.Provider<TabsContextValueType>;
+import { TabChangeEvent } from './Tabs.types';
+export interface TabRegisterData {
+    value: string;
+    ref: React.RefObject<HTMLElement>;
+}
+export interface TabsContextValueType {
+    value?: string;
+    triggerChange?: TabChangeEvent;
+    onRegister?: (data: TabRegisterData) => void;
+    onUnregister?: (data: {
+        value: string;
+    }) => void;
+}
+declare const TabsContext: import("@bifrostui/utils").Context<TabsContextValueType>;
+export declare const TabsContextProvider: React.Provider<TabsContextValueType> & React.FC<React.ProviderProps<TabsContextValueType>>;
 export default TabsContext;

package/dist/Tabs/TabsContext.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TabsContext_exports = {};
 __export(TabsContext_exports, {
@@ -31,10 +21,12 @@ __export(TabsContext_exports, {
   default: () => TabsContext_default
 });
 module.exports = __toCommonJS(TabsContext_exports);
-var import_react = __toESM(require("react"));
-const TabsContext = import_react.default.createContext(
-  void 0
-);
+var import_utils = require("@bifrostui/utils");
+const TabsContext = (0, import_utils.createContext)({
+  triggerChange: void 0,
+  onRegister: void 0,
+  onUnregister: void 0
+});
 if (process.env.NODE_ENV !== "production") {
   TabsContext.displayName = "BuiTabsContext";
 }

package/dist/Tabs/classes.d.ts

@@ -0,0 +1,13 @@
+export declare const tabsRootClass = "bui-tabs";
+export declare const tabRootClass = "bui-tab";
+export declare const tabPanelRootClass = "bui-tabpanel";
+export declare const tabsScrollClass: string;
+export declare const tabsScrollWrapperClass: string;
+export declare const tabActiveClass: string;
+export declare const tabDisabledClass: string;
+export declare const tabIndicatorClass: string;
+export declare const tabMaskClass: string;
+export declare const tabMaskLeftClass: string;
+export declare const tabMaskRightClass: string;
+export declare const tabPanelActiveClass: string;
+export declare const tabPanelInactiveClass: string;

package/dist/Tabs/classes.js

@@ -0,0 +1,63 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var classes_exports = {};
+__export(classes_exports, {
+  tabActiveClass: () => tabActiveClass,
+  tabDisabledClass: () => tabDisabledClass,
+  tabIndicatorClass: () => tabIndicatorClass,
+  tabMaskClass: () => tabMaskClass,
+  tabMaskLeftClass: () => tabMaskLeftClass,
+  tabMaskRightClass: () => tabMaskRightClass,
+  tabPanelActiveClass: () => tabPanelActiveClass,
+  tabPanelInactiveClass: () => tabPanelInactiveClass,
+  tabPanelRootClass: () => tabPanelRootClass,
+  tabRootClass: () => tabRootClass,
+  tabsRootClass: () => tabsRootClass,
+  tabsScrollClass: () => tabsScrollClass,
+  tabsScrollWrapperClass: () => tabsScrollWrapperClass
+});
+module.exports = __toCommonJS(classes_exports);
+const tabsRootClass = "bui-tabs";
+const tabRootClass = "bui-tab";
+const tabPanelRootClass = "bui-tabpanel";
+const tabsScrollClass = `${tabsRootClass}-tabs`;
+const tabsScrollWrapperClass = `${tabsRootClass}-scroll-wrapper`;
+const tabActiveClass = `${tabRootClass}-active`;
+const tabDisabledClass = `${tabRootClass}-disabled`;
+const tabIndicatorClass = `${tabsRootClass}-indicator`;
+const tabMaskClass = `${tabsRootClass}-mask`;
+const tabMaskLeftClass = `${tabMaskClass}-left`;
+const tabMaskRightClass = `${tabMaskClass}-right`;
+const tabPanelActiveClass = `${tabPanelRootClass}-active`;
+const tabPanelInactiveClass = `${tabPanelRootClass}-inactive`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  tabActiveClass,
+  tabDisabledClass,
+  tabIndicatorClass,
+  tabMaskClass,
+  tabMaskLeftClass,
+  tabMaskRightClass,
+  tabPanelActiveClass,
+  tabPanelInactiveClass,
+  tabPanelRootClass,
+  tabRootClass,
+  tabsRootClass,
+  tabsScrollClass,
+  tabsScrollWrapperClass
+});

package/dist/Tabs/index.css

@@ -2,6 +2,7 @@
 page,
 xhs-page {
   --bui-tabs-height: 39px;
+  --bui-tabs-padding: 0;
   --bui-tabs-font-weight: var(--bui-font-weight-medium);
   --bui-tabs-indicator-bg: var(--bui-color-primary);
   --bui-tabs-indicator-height: 3PX;
@@ -16,10 +17,10 @@ xhs-page {
   --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;
+  padding: var(--bui-tabs-padding);
   font-family: var(--bui-font-family);
   font-weight: var(--bui-tabs-font-weight);
 }
@@ -29,6 +30,7 @@ xhs-page {
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: center;
+  white-space: nowrap;
   position: relative;
   overflow-x: scroll;
   scrollbar-width: none;
@@ -36,15 +38,28 @@ xhs-page {
 .bui-tabs-tabs::-webkit-scrollbar {
   display: none;
 }
+.bui-tabs-scroll-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  min-width: 100%;
+}
 .bui-tabs-indicator {
   position: absolute;
+  top: unset;
+  bottom: var(--bui-tabs-indicator-bottom, 0);
   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);
+  pointer-events: none;
+  transition: left 0.3s ease-in-out;
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -74,12 +89,8 @@ xhs-page {
       var(--bui-color-bg-view),
       rgba(255, 255, 255, 0));
 }
-.bui-indicator-invisible {
-  visibility: hidden;
-  background-color: transparent;
-}
 .bui-tab {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
@@ -97,33 +108,11 @@ xhs-page {
 .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);
 }

package/dist/Tabs/index.d.ts

@@ -1,6 +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';
+export * from './Tab.types';
+export * from './TabPanel.types';

package/dist/Tabs/index.js

@@ -35,17 +35,17 @@ __export(Tabs_exports, {
 });
 module.exports = __toCommonJS(Tabs_exports);
 var import_Tab = __toESM(require("./Tab"));
-__reExport(Tabs_exports, require("./Tab.types"), module.exports);
 var import_TabPanel = __toESM(require("./TabPanel"));
-__reExport(Tabs_exports, require("./TabPanel.types"), module.exports);
 var import_Tabs = __toESM(require("./Tabs"));
 __reExport(Tabs_exports, require("./Tabs.types"), module.exports);
+__reExport(Tabs_exports, require("./Tab.types"), module.exports);
+__reExport(Tabs_exports, require("./TabPanel.types"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Tab,
   TabPanel,
   Tabs,
+  ...require("./Tabs.types"),
   ...require("./Tab.types"),
-  ...require("./TabPanel.types"),
-  ...require("./Tabs.types")
+  ...require("./TabPanel.types")
 });

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

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

package/dist/Tabs/index.miniapp.js

@@ -0,0 +1,50 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_miniapp_exports = {};
+__export(index_miniapp_exports, {
+  Tab: () => import_miniapp.Tab,
+  TabPanel: () => import_TabPanel.default,
+  Tabs: () => import_miniapp.Tabs,
+  default: () => import_miniapp.default
+});
+module.exports = __toCommonJS(index_miniapp_exports);
+var import_miniapp = __toESM(require("./miniapp"));
+var import_TabPanel = __toESM(require("./TabPanel"));
+__reExport(index_miniapp_exports, require("./Tabs.types"), module.exports);
+__reExport(index_miniapp_exports, require("./Tab.types"), module.exports);
+__reExport(index_miniapp_exports, require("./TabPanel.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tab,
+  TabPanel,
+  Tabs,
+  ...require("./Tabs.types"),
+  ...require("./Tab.types"),
+  ...require("./TabPanel.types")
+});

package/dist/Tabs/miniapp/Tab.d.ts

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

package/dist/Tabs/miniapp/Tab.js

@@ -0,0 +1,106 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Tab_exports = {};
+__export(Tab_exports, {
+  default: () => Tab_default
+});
+module.exports = __toCommonJS(Tab_exports);
+var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var import_utils = require("@bifrostui/utils");
+var import_TabsContext = __toESM(require("./TabsContext"));
+var import_classes = require("../classes");
+var import_Tab2 = require("../Tab.css");
+const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
+  const {
+    className,
+    children,
+    index,
+    disabled = false,
+    onClick,
+    style
+  } = props;
+  const innerRef = (0, import_react.useRef)(null);
+  const handleRef = (0, import_utils.useForkRef)(ref, innerRef);
+  const isActive = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.value === index
+  );
+  const triggerChange = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.triggerChange
+  );
+  const onRegister = (0, import_utils.useContextSelector)(import_TabsContext.default, (ctx) => ctx.onRegister);
+  const onUnregister = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.onUnregister
+  );
+  const tabsContainerId = (0, import_utils.useContextSelector)(
+    import_TabsContext.default,
+    (ctx) => ctx.tabsContainerId
+  );
+  (0, import_react.useEffect)(() => {
+    if (index !== void 0 && index !== null) {
+      onRegister == null ? void 0 : onRegister({ value: index });
+    }
+    return () => {
+      if (index !== void 0 && index !== null) {
+        onUnregister == null ? void 0 : onUnregister({ value: index });
+      }
+    };
+  }, [onRegister, onUnregister, index]);
+  const rootCls = (0, import_clsx.default)(
+    import_classes.tabRootClass,
+    {
+      [import_classes.tabActiveClass]: isActive,
+      [import_classes.tabDisabledClass]: disabled
+    },
+    className
+  );
+  const tabId = tabsContainerId ? `${tabsContainerId}-tab-${index}` : void 0;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      id: tabId,
+      ref: handleRef,
+      className: rootCls,
+      style,
+      onClick: (e) => {
+        if (disabled)
+          return;
+        triggerChange == null ? void 0 : triggerChange(e, { index });
+        onClick == null ? void 0 : onClick(e, { index });
+      }
+    },
+    children
+  );
+});
+Tab.displayName = "BuiTab";
+var Tab_default = /* @__PURE__ */ import_react.default.memo(Tab, (prevProps, nextProps) => {
+  return prevProps.index === nextProps.index && prevProps.disabled === nextProps.disabled && prevProps.className === nextProps.className && prevProps.children === nextProps.children;
+});

package/dist/Tabs/miniapp/TabIndicator.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface TabIndicatorProps {
+    /** 当前选中的 tab 值 */
+    currentValue: string;
+    /** 已注册的 tabs 值数组（用于生成ID） */
+    registeredTabValues: string[];
+    /** wrapper 容器的 ID（Tab的父容器） */
+    wrapperId: string;
+    /** ScrollView 的 ID */
+    scrollViewId: string;
+    /** 注册版本号，每次 tab 注册/取消注册时递增 */
+    registrationVersion: number;
+}
+declare const TabIndicator: React.FC<TabIndicatorProps>;
+export default TabIndicator;