@bifrostui/react 1.3.1-beta.1 → 1.3.3

package/es/ThemeProvider/ThemeProvider.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ThemeProviderProps } from './ThemeProvider.types';
-declare const ThemeProvider: React.ForwardRefExoticComponent<Omit<ThemeProviderProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export default ThemeProvider;

package/es/ThemeProvider/ThemeProvider.js

@@ -1,62 +0,0 @@
-import React, { useMemo, useEffect } from "react";
-import { useUniqueId } from "@bifrostui/utils";
-import { ThemeContext } from "./hooks";
-import { BUI_VAR_PREFIX } from "./utils/constants";
-import { mountTokens } from "./utils/mountTokens";
-const ThemeProvider = /* @__PURE__ */ React.forwardRef(
-  (props, ref) => {
-    var _a;
-    const {
-      isRoot,
-      locale,
-      responsive,
-      defaultLightToken,
-      defaultDarkToken,
-      dmLightToken,
-      dmDarkToken,
-      token,
-      children
-    } = props;
-    let containerId = useUniqueId();
-    containerId = `${BUI_VAR_PREFIX}${containerId}`;
-    const theme = useMemo(() => {
-      return { locale };
-    }, [locale]);
-    let childrenNode = children;
-    if (!isRoot && React.isValidElement(children)) {
-      childrenNode = React.cloneElement(children, {
-        className: `${containerId} ${((_a = children == null ? void 0 : children.props) == null ? void 0 : _a.className) || ""}`.trim()
-      });
-    }
-    useEffect(() => {
-      if (responsive || defaultLightToken || defaultDarkToken || dmLightToken || dmDarkToken || token) {
-        mountTokens({
-          isRoot,
-          containerId,
-          container: children,
-          responsive,
-          defaultLightToken,
-          defaultDarkToken,
-          dmLightToken,
-          dmDarkToken,
-          token
-        });
-      }
-    }, [
-      isRoot,
-      containerId,
-      responsive,
-      defaultLightToken,
-      defaultDarkToken,
-      dmLightToken,
-      dmDarkToken,
-      token
-    ]);
-    return /* @__PURE__ */ React.createElement(ThemeContext.Provider, { value: theme }, childrenNode);
-  }
-);
-ThemeProvider.displayName = "BuiThemeProvider";
-var ThemeProvider_default = ThemeProvider;
-export {
-  ThemeProvider_default as default
-};

package/es/ThemeProvider/ThemeProvider.types.d.ts

@@ -1,127 +0,0 @@
-import { ReactNode } from 'react';
-import { OverrideProps } from '@bifrostui/types';
-import { BaseLang } from '../locales/base';
-export type ThemeProviderProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
-    props: P & ThemeProps;
-    defaultComponent: D;
-}, D>;
-export interface Breakpoints {
-    /**
-     * 超小屏幕 (小于 576px，实际为了处理临界值，断点值为 575.98px)
-     * @default '575.98px'
-     */
-    xs?: string;
-    /**
-     * 小屏幕
-     * @default '576px'
-     */
-    sm?: string;
-    /**
-     * 中等屏幕
-     * @default '768px'
-     */
-    md?: string;
-    /**
-     * 大屏幕
-     * @default '992px'
-     */
-    lg?: string;
-    /**
-     * 超大屏幕
-     * @default '1200px'
-     */
-    xl?: string;
-}
-/**
- * 响应式屏幕断点配置
- */
-interface ResponsiveTokenOptions {
-    /**
-     * 超小屏幕 (小于 576px，实际为了处理临界值，断点值为 575.98px)
-     */
-    xs?: Record<string, string>;
-    /**
-     * 小屏幕 (≥ 576px)
-     */
-    sm?: Record<string, string>;
-    /**
-     * 中等屏幕 (≥ 768px)
-     */
-    md?: Record<string, string>;
-    /**
-     * 大屏幕 (≥ 992px)
-     */
-    lg?: Record<string, string>;
-    /**
-     * 超大屏幕 (≥ 1200px)
-     */
-    xl?: Record<string, string>;
-}
-interface ThemeProps {
-    /**
-     * 当前ThemeProvider是否为最顶层
-     * 若当前应用会出现嵌套的ThemeProvider，则需要将最外层的ThemeProvider isRoot属性设置为true
-     * TODO 不通过属性判断
-     * @default false
-     */
-    isRoot?: boolean;
-    /**
-     * 挂载的容器
-     * @default root
-     */
-    container?: ReactNode;
-    /**
-     * 挂载容器的id
-     */
-    containerId?: string;
-    /**
-     * 语言
-     */
-    locale?: BaseLang;
-    /**
-     * 响应式屏幕断点配置
-     */
-    responsive?: ResponsiveTokenOptions;
-    /**
-     * 默认高亮主题Token
-     */
-    defaultLightToken?: Record<string, string>;
-    /**
-     * 默认暗黑主题Token
-     */
-    defaultDarkToken?: Record<string, string>;
-    /**
-     * 大麦高亮主题Token
-     */
-    dmLightToken?: Record<string, string>;
-    /**
-     * 大麦暗黑主题Token
-     */
-    dmDarkToken?: Record<string, string>;
-    /**
-     * 组件全局Token
-     */
-    token?: Record<string, string>;
-}
-/**
- * 复写内置主题Tokens
- */
-type BuiltInThemesTokenOptions = Pick<ThemeProps, 'defaultLightToken' | 'defaultDarkToken' | 'dmLightToken' | 'dmDarkToken'>;
-/**
- * 挂载组件自定义Tokens参数
- */
-export type MountComponentsTokenOptions = Pick<ThemeProps, 'isRoot' | 'container' | 'containerId' | 'token'>;
-/**
- * 挂载响应式Tokens参数
- */
-type componentsTokenOptions = Pick<ThemeProps, 'token'>;
-export type MountResponsiveTokenOptions = Pick<ThemeProps, 'responsive'> & {
-    breakpoints?: Breakpoints;
-};
-/**
- * 更新Tokens
- */
-export type UpdateTokensOptions = Pick<ThemeProps, 'isRoot' | 'containerId' | 'container'> & {
-    rootString: string;
-};
-export { BaseLang, ResponsiveTokenOptions, ThemeProps, BuiltInThemesTokenOptions, componentsTokenOptions, };

package/es/ThemeProvider/ThemeProvider.types.js

@@ -1 +0,0 @@
-export {};

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

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

package/es/ThemeProvider/hooks/ThemeContext.js

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

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

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

package/es/ThemeProvider/hooks/createTheme.js

@@ -1,38 +0,0 @@
-var __defProp = Object.defineProperty;
-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;
-};
-function createTheme(options) {
-  const _a = options || {}, { locale } = _a, others = __objRest(_a, ["locale"]);
-  const buiTheme = __spreadValues({
-    locale
-  }, others);
-  return buiTheme;
-}
-export {
-  createTheme as default
-};

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

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

package/es/ThemeProvider/hooks/index.js

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

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

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

package/es/ThemeProvider/hooks/useTheme.js

@@ -1,10 +0,0 @@
-import React from "react";
-import createTheme from "./createTheme";
-import ThemeContext from "./ThemeContext";
-function useTheme(defaultTheme = createTheme(null)) {
-  const contextTheme = React.useContext(ThemeContext);
-  return !contextTheme || Object.keys(contextTheme).length === 0 ? defaultTheme : contextTheme;
-}
-export {
-  useTheme as default
-};

package/es/ThemeProvider/index.d.ts

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

package/es/ThemeProvider/index.js

@@ -1,8 +0,0 @@
-import { default as default2, default as default3 } from "./ThemeProvider";
-export * from "./hooks";
-export * from "./utils";
-export * from "./ThemeProvider.types";
-export {
-  default3 as ThemeProvider,
-  default2 as default
-};

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

@@ -1,38 +0,0 @@
-/**
- * 响应式屏幕断点
- */
-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

@@ -1,40 +0,0 @@
-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

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

package/es/ThemeProvider/utils/index.js

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

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

@@ -1,26 +0,0 @@
-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

@@ -1,88 +0,0 @@
-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/Tooltip/Tooltip.css

@@ -1,91 +0,0 @@
-.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

@@ -1,5 +0,0 @@
-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;