@bifrostui/react 1.3.2 → 1.4.0-beta.1

package/es/ThemeProvider/utils/constants.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 响应式屏幕断点
+ */
+export declare const breakpoints: {
+    /**
+     * 超小屏幕 (小于 576px，实际为了处理临界值，断点值为 575.98px)
+     */
+    xs: string;
+    /**
+     * 小屏幕 (≥ 576px)
+     */
+    sm: string;
+    /**
+     * 中等屏幕 (≥ 768px)
+     */
+    md: string;
+    /**
+     * 大屏幕 (≥ 992px)
+     */
+    lg: string;
+    /**
+     * 超大屏幕 (≥ 1200px)
+     */
+    xl: string;
+};
+/**
+ * 根节点选择器，用于挂载全局Tokens
+ */
+export declare const rootSelector: {
+    defaultLight: string[];
+    defaultDark: string[];
+    dmLight: string[];
+    dmDark: string[];
+};
+/**
+ * BUI css变量前缀
+ */
+export declare const BUI_VAR_PREFIX = "bui-var-";

package/es/ThemeProvider/utils/constants.js

@@ -0,0 +1,40 @@
+const breakpoints = {
+  /**
+   * 超小屏幕 (小于 576px，实际为了处理临界值，断点值为 575.98px)
+   */
+  xs: "575.98px",
+  /**
+   * 小屏幕 (≥ 576px)
+   */
+  sm: "576px",
+  /**
+   * 中等屏幕 (≥ 768px)
+   */
+  md: "768px",
+  /**
+   * 大屏幕 (≥ 992px)
+   */
+  lg: "992px",
+  /**
+   * 超大屏幕 (≥ 1200px)
+   */
+  xl: "1200px"
+};
+const rootSelector = {
+  defaultLight: [
+    ":root",
+    "page",
+    "xhs-page",
+    ".bui-default-light",
+    '[data-color-mode="light"][data-theme="default"]'
+  ],
+  defaultDark: [".bui-dark", '[data-color-mode="dark"][data-theme="default"]'],
+  dmLight: [".bui-dm-light", '[data-color-mode="light"][data-theme="dm"]'],
+  dmDark: [".bui-dm-dark", '[data-color-mode="dark"][data-theme="dm"]']
+};
+const BUI_VAR_PREFIX = "bui-var-";
+export {
+  BUI_VAR_PREFIX,
+  breakpoints,
+  rootSelector
+};

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

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

package/es/ThemeProvider/utils/index.js

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

package/es/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/es/ThemeProvider/utils/mountTokens.js

@@ -0,0 +1,88 @@
+import React from "react";
+import { isMini } from "@bifrostui/utils";
+import { breakpoints as defaultBreakpoints, rootSelector } from "./constants";
+const updateTokens = (options) => {
+  const { isRoot, rootString, container, containerId } = options || {};
+  if (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 && React.isValidElement(container)) {
+    containerNode = document.querySelector(`.${containerId}`);
+  }
+  if (containerNode) {
+    containerNode.appendChild(style);
+  }
+};
+const mountResponsiveTokens = (options) => {
+  const { responsive, breakpoints = defaultBreakpoints } = options || {};
+  if (!responsive)
+    return;
+  const modeSelector = 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(rootSelector).forEach((selectorKey) => {
+    const modeSelector = 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 ? 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 (isMini)
+    return;
+  overrideBuiltInThemes(tokenOptions);
+  mountResponsiveTokens(tokenOptions);
+  mountComponentsTokens(tokenOptions);
+};
+export {
+  mountResponsiveTokens,
+  mountTokens,
+  overrideBuiltInThemes
+};

package/es/Toast/FunctionalToast.js

@@ -125,6 +125,24 @@ functionalToast.clear = () => {
     destroyAll();
   });
 };
+const useToast = () => {
+  const holderRef = React.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__ */ React.createElement(ToastView, { key: "toast-holder", ref: holderRef })];
+};
+functionalToast.useToast = useToast;
 const Toast = functionalToast;
 var FunctionalToast_default = Toast;
 export {

package/es/Toast/Toast.css

@@ -1,30 +1,28 @@
 .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);
-  --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);
-  --text-align: center;
+  --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));
+  --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);
   position: fixed;
   left: 50%;
-  z-index: var(--z-index);
+  z-index: var(--bui-z-index-toast);
   width: fit-content;
   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);
+  word-break: break-all;
   white-space: pre-wrap;
   background-color: var(--background-color);
-  text-align: var(--text-align);
+  text-align: center;
   font-family: var(--bui-font-family);
 }
 .bui-toast.bui-toast-allow-click {
@@ -46,10 +44,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/es/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/es/Toast/Toast.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React from "react";
+import React, { useImperativeHandle } from "react";
 import {
   ErrorCircleFilledBoldIcon,
   AccessTimeCircleFilledBoldIcon,
@@ -38,56 +38,60 @@ import {
   SuccessCircleFilledBoldIcon
 } from "@bifrostui/icons";
 import Fade from "../Fade";
+import { useTheme } from "../ThemeProvider";
 import "./Toast.css";
 const prefixCls = "bui-toast";
-const ToastComponent = /* @__PURE__ */ React.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__ */ React.createElement(ErrorCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-      loading: /* @__PURE__ */ React.createElement(AccessTimeCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-      warning: /* @__PURE__ */ React.createElement(AlertCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
-      success: /* @__PURE__ */ React.createElement(SuccessCircleFilledBoldIcon, { htmlColor: "#ffffff" })
-    };
-    const iconDom = iconMap[type] || icon;
-    return /* @__PURE__ */ React.createElement(Fade, __spreadProps(__spreadValues({}, others), { in: open, appear: false, unmountOnExit: true }), /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: clsx(
-          prefixCls,
-          `${prefixCls}-${position}`,
-          {
-            [`${prefixCls}-icon`]: !!iconDom,
-            [`${prefixCls}-allow-click`]: !disableClick
-          },
-          className
-        ),
-        ref,
-        style
-      },
-      iconDom,
-      message
-    ));
-  }
-);
+const ToastComponent = /* @__PURE__ */ React.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 = useTheme(theme);
+  useImperativeHandle(ref, () => {
+    return { theme: themeConfig };
+  }, []);
+  const iconMap = {
+    fail: /* @__PURE__ */ React.createElement(ErrorCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
+    loading: /* @__PURE__ */ React.createElement(AccessTimeCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
+    warning: /* @__PURE__ */ React.createElement(AlertCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
+    success: /* @__PURE__ */ React.createElement(SuccessCircleFilledBoldIcon, { htmlColor: "#ffffff" })
+  };
+  const iconDom = iconMap[type] || icon;
+  return /* @__PURE__ */ React.createElement(Fade, __spreadProps(__spreadValues({}, others), { in: open, appear: false, unmountOnExit: true }), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        prefixCls,
+        `${prefixCls}-${position}`,
+        {
+          [`${prefixCls}-icon`]: !!iconDom,
+          [`${prefixCls}-allow-click`]: !disableClick
+        },
+        className
+      ),
+      style
+    },
+    iconDom,
+    message
+  ));
+});
 ToastComponent.displayName = "BuiToast";
 var Toast_default = ToastComponent;
 export {

package/es/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/es/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/es/Tooltip/Tooltip.d.ts

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