@bifrostui/react 1.3.2 → 1.4.0-beta.0

package/dist/ThemeProvider/ThemeProvider.types.js

@@ -0,0 +1,27 @@
+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 ThemeProvider_types_exports = {};
+__export(ThemeProvider_types_exports, {
+  BaseLang: () => import_base.BaseLang
+});
+module.exports = __toCommonJS(ThemeProvider_types_exports);
+var import_base = require("../locales/base");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BaseLang
+});

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

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

package/dist/ThemeProvider/hooks/ThemeContext.js

@@ -0,0 +1,35 @@
+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 ThemeContext_exports = {};
+__export(ThemeContext_exports, {
+  default: () => ThemeContext_default
+});
+module.exports = __toCommonJS(ThemeContext_exports);
+var import_react = __toESM(require("react"));
+const ThemeContext = import_react.default.createContext(null);
+var ThemeContext_default = ThemeContext;

package/dist/ThemeProvider/hooks/createTheme.d.ts

@@ -0,0 +1,2 @@
+import { ThemeProps } from '../ThemeProvider.types';
+export default function createTheme(options: ThemeProps): ThemeProps;

package/dist/ThemeProvider/hooks/createTheme.js

@@ -0,0 +1,55 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 createTheme_exports = {};
+__export(createTheme_exports, {
+  default: () => createTheme
+});
+module.exports = __toCommonJS(createTheme_exports);
+function createTheme(options) {
+  const _a = options || {}, { locale } = _a, others = __objRest(_a, ["locale"]);
+  const buiTheme = __spreadValues({
+    locale
+  }, others);
+  return buiTheme;
+}

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

@@ -0,0 +1,4 @@
+import createTheme from './createTheme';
+import ThemeContext from './ThemeContext';
+import useTheme from './useTheme';
+export { createTheme, ThemeContext, useTheme };

package/dist/ThemeProvider/hooks/index.js

@@ -0,0 +1,43 @@
+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 hooks_exports = {};
+__export(hooks_exports, {
+  ThemeContext: () => import_ThemeContext.default,
+  createTheme: () => import_createTheme.default,
+  useTheme: () => import_useTheme.default
+});
+module.exports = __toCommonJS(hooks_exports);
+var import_createTheme = __toESM(require("./createTheme"));
+var import_ThemeContext = __toESM(require("./ThemeContext"));
+var import_useTheme = __toESM(require("./useTheme"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeContext,
+  createTheme,
+  useTheme
+});

package/dist/ThemeProvider/hooks/useTheme.d.ts

@@ -0,0 +1 @@
+export default function useTheme(defaultTheme?: import("../ThemeProvider.types").ThemeProps): import("../ThemeProvider.types").ThemeProps;

package/dist/ThemeProvider/hooks/useTheme.js

@@ -0,0 +1,39 @@
+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 useTheme_exports = {};
+__export(useTheme_exports, {
+  default: () => useTheme
+});
+module.exports = __toCommonJS(useTheme_exports);
+var import_react = __toESM(require("react"));
+var import_createTheme = __toESM(require("./createTheme"));
+var import_ThemeContext = __toESM(require("./ThemeContext"));
+function useTheme(defaultTheme = (0, import_createTheme.default)(null)) {
+  const contextTheme = import_react.default.useContext(import_ThemeContext.default);
+  return !contextTheme || Object.keys(contextTheme).length === 0 ? defaultTheme : contextTheme;
+}

package/dist/ThemeProvider/index.d.ts

@@ -0,0 +1,4 @@
+export { default, default as ThemeProvider } from './ThemeProvider';
+export * from './hooks';
+export * from './utils';
+export * from './ThemeProvider.types';

package/dist/ThemeProvider/index.js

@@ -0,0 +1,45 @@
+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 ThemeProvider_exports = {};
+__export(ThemeProvider_exports, {
+  ThemeProvider: () => import_ThemeProvider.default,
+  default: () => import_ThemeProvider.default
+});
+module.exports = __toCommonJS(ThemeProvider_exports);
+var import_ThemeProvider = __toESM(require("./ThemeProvider"));
+__reExport(ThemeProvider_exports, require("./hooks"), module.exports);
+__reExport(ThemeProvider_exports, require("./utils"), module.exports);
+__reExport(ThemeProvider_exports, require("./ThemeProvider.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeProvider,
+  ...require("./hooks"),
+  ...require("./utils"),
+  ...require("./ThemeProvider.types")
+});

package/dist/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/dist/ThemeProvider/utils/constants.js

@@ -0,0 +1,65 @@
+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 constants_exports = {};
+__export(constants_exports, {
+  BUI_VAR_PREFIX: () => BUI_VAR_PREFIX,
+  breakpoints: () => breakpoints,
+  rootSelector: () => rootSelector
+});
+module.exports = __toCommonJS(constants_exports);
+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-";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BUI_VAR_PREFIX,
+  breakpoints,
+  rootSelector
+});

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,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/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;