@bifrostui/react 1.3.0 → 1.3.1-beta.0

package/dist/ThemeProvider/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './mountTokens';

package/dist/ThemeProvider/utils/index.js

@@ -0,0 +1,23 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+module.exports = __toCommonJS(utils_exports);
+__reExport(utils_exports, require("./constants"), module.exports);
+__reExport(utils_exports, require("./mountTokens"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./constants"),
+  ...require("./mountTokens")
+});

package/dist/ThemeProvider/utils/mountTokens.d.ts

@@ -0,0 +1,26 @@
+import { ThemeProps, MountResponsiveTokenOptions, BuiltInThemesTokenOptions } from '../ThemeProvider.types';
+/**
+ * 挂载响应式自定义Tokens
+ * 响应式相关的Tokens挂载在全局根节点上，暗黑模式或大麦高亮主题下可自定义额外Toekns复写响应式Tokens
+ */
+export declare const mountResponsiveTokens: (options: MountResponsiveTokenOptions) => void;
+/**
+ * 复写内置主题Tokens，复写的自定义token应为对应主题css变量的子集
+ * BUI内置主题包括以下4种：
+ * 1. 默认高亮模式（defaultLightToken 复写 default-light.less）
+ * 2. 默认暗黑模式（defaultDarkToken 复写 default-dark.less）
+ * 3. 大麦高亮模式（dmLightToken 复写 dm-light.less）
+ * 4. 大麦暗黑模式（dmDarkToken 复写 dm-dark.less）
+ */
+export declare const overrideBuiltInThemes: (tokenOptions: BuiltInThemesTokenOptions) => void;
+/**
+ * 挂载Design Tokens
+ * Tokens的优先级：
+ * 1. 通常情况：组件的Tokens > 响应式Tokens > BUI内置Tokens（挂载顺序控制）
+ * 2. 暗黑模式：组件的Tokens > BUI内置的两种暗黑模式Tokens > 响应式Tokens (选择器权重控制)
+ *
+ * - 挂载顺序决定BUI内置Tokens（暗黑模式除外）和响应式Tokens的优先级
+ * - 选择器权重决定暗黑模式的Tokens和响应式Tokens的优先级
+ * - 命名规则决定组件的Tokens（如：--bui-button-xxx）
+ */
+export declare const mountTokens: (tokenOptions?: ThemeProps) => void;

package/dist/ThemeProvider/utils/mountTokens.js

@@ -0,0 +1,123 @@
+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 mountTokens_exports = {};
+__export(mountTokens_exports, {
+  mountResponsiveTokens: () => mountResponsiveTokens,
+  mountTokens: () => mountTokens,
+  overrideBuiltInThemes: () => overrideBuiltInThemes
+});
+module.exports = __toCommonJS(mountTokens_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+var import_constants = require("./constants");
+const updateTokens = (options) => {
+  const { isRoot, rootString, container, containerId } = options || {};
+  if (import_utils.isMini)
+    return;
+  const style = document.createElement("style");
+  style.type = "text/css";
+  style.appendChild(document.createTextNode(rootString));
+  let containerNode;
+  if (isRoot) {
+    containerNode = document.head;
+  } else if (containerId && container && import_react.default.isValidElement(container)) {
+    containerNode = document.querySelector(`.${containerId}`);
+  }
+  if (containerNode) {
+    containerNode.appendChild(style);
+  }
+};
+const mountResponsiveTokens = (options) => {
+  const { responsive, breakpoints = import_constants.breakpoints } = options || {};
+  if (!responsive)
+    return;
+  const modeSelector = import_constants.rootSelector.defaultLight;
+  let rootString = `${modeSelector.join(",")} { `;
+  Object.entries(responsive).forEach((config) => {
+    const [size, tokenConfig] = config || [];
+    if (!size || !tokenConfig)
+      return;
+    const cssVariablesString = Object.entries(tokenConfig || {}).reduce(
+      (acc, [key, value]) => {
+        return `${acc} ${key}: ${value};`;
+      },
+      ""
+    );
+    const mediaQuery = size === "xs" ? "max-width" : "min-width";
+    rootString += `@media (${mediaQuery}: ${breakpoints[size]}) { ${cssVariablesString} }`;
+  });
+  rootString = `${rootString} }`;
+  updateTokens({ isRoot: true, rootString });
+};
+const overrideBuiltInThemes = (tokenOptions) => {
+  if (!tokenOptions)
+    return;
+  Object.keys(import_constants.rootSelector).forEach((selectorKey) => {
+    const modeSelector = import_constants.rootSelector[selectorKey];
+    const token = tokenOptions[`${selectorKey}Token`];
+    if (token) {
+      let rootString = `${modeSelector.join(",")} { `;
+      const cssVariablesString = Object.entries(token).reduce(
+        (acc, [key, value]) => {
+          return `${acc} ${key}: ${value};`;
+        },
+        ""
+      );
+      rootString = `${rootString} ${cssVariablesString} }`;
+      updateTokens({ isRoot: true, rootString });
+    }
+  });
+};
+const mountComponentsTokens = (options) => {
+  const { isRoot = false, token, container, containerId } = options || {};
+  if (!token)
+    return;
+  const modeSelector = isRoot ? import_constants.rootSelector.defaultLight : [`.${containerId}`];
+  let rootString = `${modeSelector.join(",")} { `;
+  const cssVariablesString = Object.entries(token).reduce(
+    (acc, [key, value]) => {
+      return `${acc} ${key}: ${value};`;
+    },
+    ""
+  );
+  rootString = `${rootString} ${cssVariablesString} }`;
+  updateTokens({ isRoot, rootString, container, containerId });
+};
+const mountTokens = (tokenOptions) => {
+  if (import_utils.isMini)
+    return;
+  overrideBuiltInThemes(tokenOptions);
+  mountResponsiveTokens(tokenOptions);
+  mountComponentsTokens(tokenOptions);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  mountResponsiveTokens,
+  mountTokens,
+  overrideBuiltInThemes
+});

package/dist/Toast/FunctionalToast.js

@@ -155,5 +155,23 @@ functionalToast.clear = () => {
     destroyAll();
   });
 };
+const useToast = () => {
+  const holderRef = import_react.default.useRef(null);
+  ["warning", "loading", "success", "fail"].forEach((methodName) => {
+    functionalToast[methodName] = (options) => functionalToast(__spreadProps(__spreadValues({
+      type: methodName
+    }, formatProps(options)), {
+      theme: holderRef.current.theme
+    }));
+  });
+  functionalToast.clear = () => {
+    setTimeout(() => {
+      destroyAll();
+    });
+  };
+  const wrapAPI = functionalToast;
+  return [wrapAPI, /* @__PURE__ */ import_react.default.createElement(import_Toast.default, { key: "toast-holder", ref: holderRef })];
+};
+functionalToast.useToast = useToast;
 const Toast = functionalToast;
 var FunctionalToast_default = Toast;

package/dist/Toast/Toast.css

@@ -1,15 +1,16 @@
 .bui-toast {
-  --min-width: 86px;
-  --max-width: 80%;
-  --font-size: var(--bui-text-size-1);
-  --color: var(--bui-color-white);
-  --padding: var(--bui-spacing-xl);
+  --min-width: var(--bui-toast-min-width, 86px);
+  --max-width: var(--bui-toast-max-width, 80%);
+  --flex-direction: var(--bui-toast-flex-direction, column);
+  --padding: var(--bui-toast-padding, var(--bui-spacing-xl));
   --word-break: break-all;
   --z-index: var(--bui-z-index-toast);
-  --position-top: 15%;
-  --position-bottom: 85%;
-  --background-color: rgba(0, 0, 0, 0.8);
-  --border-radius: var(--bui-shape-radius-default);
+  --position-top: var(--bui-toast-position-top, 15%);
+  --position-bottom: var(--bui-toast-position-bottom, 85%);
+  --background-color: var(--bui-toast-bg-color, rgba(0, 0, 0, 0.8));
+  --border-radius: var(--bui-toast-border-radius, --bui-shape-radius-default);
+  --icon-margin: var(--bui-toast-icon-margin-bottom, 8px);
+  --icon-font-size: var(--bui-toast-icon-font-size, 30px);
   --text-align: center;
   position: fixed;
   left: 50%;
@@ -18,8 +19,8 @@
   min-width: var(--min-width);
   max-width: var(--max-width);
   padding: var(--padding);
-  font-size: var(--font-size);
-  color: var(--color);
+  font-size: var(--bui-text-size-1);
+  color: var(--bui-color-white);
   border-radius: var(--border-radius);
   word-break: var(--word-break);
   white-space: pre-wrap;
@@ -46,10 +47,10 @@
 }
 .bui-toast-icon {
   display: flex;
-  flex-direction: column;
+  flex-direction: var(--flex-direction);
   align-items: center;
 }
 .bui-toast-icon .bui-svg-icon {
-  margin-bottom: 8px;
-  font-size: 30px;
+  margin: 0 0 var(--icon-margin);
+  font-size: var(--icon-font-size);
 }

package/dist/Toast/Toast.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ToastProps } from './Toast.types';
+import { ToastProps, ToastRef } from './Toast.types';
 import './Toast.less';
-declare const ToastComponent: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+declare const ToastComponent: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<ToastRef>>;
 export default ToastComponent;

package/dist/Toast/Toast.js

@@ -63,55 +63,59 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_icons = require("@bifrostui/icons");
 var import_Fade = __toESM(require("../Fade"));
+var import_ThemeProvider = require("../ThemeProvider");
 var import_Toast2 = require("./Toast.css");
 const prefixCls = "bui-toast";
-const ToastComponent = /* @__PURE__ */ import_react.default.forwardRef(
-  (props, ref) => {
-    const _a = props, {
-      className,
-      style,
-      open,
-      type,
-      icon,
-      message,
-      position = "center",
-      disableClick = false
-    } = _a, others = __objRest(_a, [
-      "className",
-      "style",
-      "open",
-      "type",
-      "icon",
-      "message",
-      "position",
-      "disableClick"
-    ]);
-    const iconMap = {
-      fail: /* @__PURE__ */ import_react.default.createElement(import_icons.ErrorCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-      loading: /* @__PURE__ */ import_react.default.createElement(import_icons.AccessTimeCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-      warning: /* @__PURE__ */ import_react.default.createElement(import_icons.AlertCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-      success: /* @__PURE__ */ import_react.default.createElement(import_icons.SuccessCircleFilledBoldIcon, { htmlColor: "#ffffff" })
-    };
-    const iconDom = iconMap[type] || icon;
-    return /* @__PURE__ */ import_react.default.createElement(import_Fade.default, __spreadProps(__spreadValues({}, others), { in: open, appear: false, unmountOnExit: true }), /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_clsx.default)(
-          prefixCls,
-          `${prefixCls}-${position}`,
-          {
-            [`${prefixCls}-icon`]: !!iconDom,
-            [`${prefixCls}-allow-click`]: !disableClick
-          },
-          className
-        ),
-        ref,
-        style
-      },
-      iconDom,
-      message
-    ));
-  }
-);
+const ToastComponent = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
+  const _a = props, {
+    className,
+    style,
+    open,
+    type,
+    icon,
+    message,
+    position = "center",
+    disableClick = false,
+    theme
+  } = _a, others = __objRest(_a, [
+    "className",
+    "style",
+    "open",
+    "type",
+    "icon",
+    "message",
+    "position",
+    "disableClick",
+    "theme"
+  ]);
+  const themeConfig = (0, import_ThemeProvider.useTheme)(theme);
+  (0, import_react.useImperativeHandle)(ref, () => {
+    return { theme: themeConfig };
+  }, []);
+  const iconMap = {
+    fail: /* @__PURE__ */ import_react.default.createElement(import_icons.ErrorCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
+    loading: /* @__PURE__ */ import_react.default.createElement(import_icons.AccessTimeCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
+    warning: /* @__PURE__ */ import_react.default.createElement(import_icons.AlertCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
+    success: /* @__PURE__ */ import_react.default.createElement(import_icons.SuccessCircleFilledBoldIcon, { htmlColor: "#ffffff" })
+  };
+  const iconDom = iconMap[type] || icon;
+  return /* @__PURE__ */ import_react.default.createElement(import_Fade.default, __spreadProps(__spreadValues({}, others), { in: open, appear: false, unmountOnExit: true }), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_clsx.default)(
+        prefixCls,
+        `${prefixCls}-${position}`,
+        {
+          [`${prefixCls}-icon`]: !!iconDom,
+          [`${prefixCls}-allow-click`]: !disableClick
+        },
+        className
+      ),
+      style
+    },
+    iconDom,
+    message
+  ));
+});
 ToastComponent.displayName = "BuiToast";
 var Toast_default = ToastComponent;

package/dist/Toast/Toast.types.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 import { FadeProps } from '../Fade/Fade.types';
+import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
+export type ToastRef = {
+    theme?: ThemeProps;
+};
 /**
  * 提示类型
  */
@@ -36,6 +40,10 @@ export interface ToastProps extends FadeProps {
      * 自定义图标
      */
     icon?: React.ReactNode;
+    /**
+     * theme 主题定制
+     */
+    theme?: ThemeProps;
     /**
      * 展示Toast时，页面内容是否可以点击
      * @default false
@@ -62,7 +70,7 @@ export type ToastReturnType = {
 /**
  * Toast Instance
  */
-export interface ToastInstance {
+export interface ToastFunction {
     (options: ToastOptions): ToastReturnType;
     /**
      * 警告提示
@@ -85,3 +93,9 @@ export interface ToastInstance {
      */
     clear: () => void;
 }
+export interface ToastInstance extends ToastFunction {
+    /**
+     * 获取toast静态方法 & contextHolder
+     */
+    useToast: () => [ToastFunction, React.JSX.Element];
+}

package/dist/Tooltip/Tooltip.css

@@ -0,0 +1,91 @@
+.bui-tooltip {
+  --arrow-size: var(--bui-tooltip-arrow-size, 8px);
+  --localtion-position: var(--bui-tooltip-localtion-position, 8px);
+  --max-width: var(--bui-tooltip-max-width, 350px);
+  --content-min-width: var(--bui-tooltip-content-min-width, 30px);
+  --content-min-height: var(--bui-tooltip-content-min-height, 32px);
+  --content-padding: var(--bui-tooltip-content-padding, 6px 8px);
+  max-width: var(--max-width);
+  font-size: var(--bui-text-size-1);
+  position: absolute;
+  visibility: hidden;
+  z-index: var(--bui-z-index-tooltip);
+}
+.bui-tooltip .bui-tooltip-arrow {
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.bui-tooltip .bui-tooltip-arrow.location-left {
+  left: var(--localtion-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-right {
+  right: var(--localtion-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-top {
+  top: var(--localtion-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-bottom {
+  bottom: var(--localtion-position);
+}
+.bui-tooltip.tooltip-top .location-center,
+.bui-tooltip.tooltip-bottom .location-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bui-tooltip.tooltip-left .location-center,
+.bui-tooltip.tooltip-right .location-center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.bui-tooltip.tooltip-top {
+  padding-bottom: var(--arrow-size);
+}
+.bui-tooltip.tooltip-top .bui-tooltip-arrow {
+  border-left: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid transparent;
+  border-top: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  bottom: 0;
+}
+.bui-tooltip.tooltip-bottom {
+  padding-top: var(--arrow-size);
+}
+.bui-tooltip.tooltip-bottom .bui-tooltip-arrow {
+  border-left: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  top: 0;
+}
+.bui-tooltip.tooltip-left {
+  padding-right: var(--arrow-size);
+}
+.bui-tooltip.tooltip-left .bui-tooltip-arrow {
+  border-top: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid transparent;
+  border-left: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  right: 0;
+}
+.bui-tooltip.tooltip-right {
+  padding-left: var(--arrow-size);
+}
+.bui-tooltip.tooltip-right .bui-tooltip-arrow {
+  border-top: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  left: 0;
+}
+.bui-tooltip .bui-tooltip-content {
+  min-width: var(--content-min-width);
+  min-height: var(--content-min-height);
+  padding: var(--content-padding);
+  color: var(--bui-color-white);
+  text-align: left;
+  text-decoration: none;
+  word-wrap: break-word;
+  background-color: var(--bui-color-bg-alpha-dark-7);
+  border-radius: var(--bui-shape-radius-poster);
+  box-shadow:
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}

package/dist/Tooltip/Tooltip.d.ts

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