@bifrostui/react 1.5.0 → 2.0.0-alpha.0

package/es/Fade/Fade.js

@@ -46,64 +46,60 @@ const defaultTimeout = {
   enter: duration.enteringScreen,
   exit: duration.leavingScreen
 };
-const Fade = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  const _a = props, {
-    appear,
-    children,
-    in: inProp,
-    easing: easingProp,
-    style,
-    timeout,
-    delay
-  } = _a, others = __objRest(_a, [
-    "appear",
-    "children",
-    "in",
-    "easing",
-    "style",
-    "timeout",
-    "delay"
-  ]);
-  const transitions = createTransitions();
-  const nodeRef = useForkRef(ref, children == null ? void 0 : children.ref);
-  return /* @__PURE__ */ React.createElement(
-    Transition,
-    __spreadProps(__spreadValues({
-      appear,
+const Fade = /* @__PURE__ */ React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      appear = true,
+      children,
       in: inProp,
-      timeout,
-      delay
-    }, others), {
-      ref: nodeRef
-    }),
-    (state, childProps) => {
-      const transition = transitions.create(
-        "opacity",
-        getTransitionProps(
-          { timeout, style, easing: easingProp, delay },
-          {
-            mode: state
-          }
-        )
-      );
-      return React.cloneElement(children, __spreadValues({
-        style: __spreadValues(__spreadValues({
-          visibility: state === "exited" ? "hidden" : "visible",
-          transition,
-          WebkitTransition: transition,
-          opacity: state === "entering" || state === "entered" ? "1" : "0"
-        }, style), children.props.style)
-      }, childProps));
-    }
-  );
-});
+      easing: easingProp = defaultEasing,
+      style,
+      timeout = defaultTimeout,
+      delay = 0
+    } = _b, others = __objRest(_b, [
+      "appear",
+      "children",
+      "in",
+      "easing",
+      "style",
+      "timeout",
+      "delay"
+    ]);
+    const transitions = createTransitions();
+    const nodeRef = useForkRef(ref, children == null ? void 0 : children.ref);
+    return /* @__PURE__ */ React.createElement(
+      Transition,
+      __spreadProps(__spreadValues({
+        appear,
+        in: inProp,
+        timeout,
+        delay
+      }, others), {
+        ref: nodeRef
+      }),
+      (state, childProps) => {
+        const transition = transitions.create(
+          "opacity",
+          getTransitionProps(
+            { timeout, style, easing: easingProp, delay },
+            {
+              mode: state
+            }
+          )
+        );
+        return React.cloneElement(children, __spreadValues({
+          style: __spreadValues(__spreadValues({
+            visibility: state === "exited" ? "hidden" : "visible",
+            transition,
+            WebkitTransition: transition,
+            opacity: state === "entering" || state === "entered" ? "1" : "0"
+          }, style), children.props.style)
+        }, childProps));
+      }
+    );
+  }
+);
 Fade.displayName = "BuiFade";
-Fade.defaultProps = {
-  easing: defaultEasing,
-  timeout: defaultTimeout,
-  appear: true,
-  delay: 0
-};
 var Fade_default = Fade;
 export {
   Fade_default as default

package/es/IconButton/IconButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { IconButtonProps } from './IconButton.types';
-import './IconButton.less';
+import './index.less';
 declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps<"button", {}>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/es/IconButton/IconButton.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
 import { isMini } from "@bifrostui/utils";
 import clsx from "clsx";
 import React from "react";
-import "./IconButton.css";
+import "./index.css";
 const prefixCls = "bui-icon-btn";
 const IconButton = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
@@ -37,11 +37,11 @@ const IconButton = /* @__PURE__ */ React.forwardRef(
     const _a = props, {
       className,
       children,
-      color,
-      disabled,
-      size,
-      variant,
-      shape
+      color = "neutral",
+      disabled = false,
+      size = "medium",
+      variant = "default",
+      shape = "circular"
     } = _a, others = __objRest(_a, [
       "className",
       "children",
@@ -72,19 +72,12 @@ const IconButton = /* @__PURE__ */ React.forwardRef(
       isMini && React.isValidElement(children) ? React.cloneElement(children, __spreadValues(__spreadValues({}, !isContainedVariant && {
         color: ((_b = children.props) == null ? void 0 : _b.color) || color
       }), isContainedVariant && {
-        htmlColor: ((_c = children.props) == null ? void 0 : _c.htmlColor) || "#fff"
+        htmlColor: ((_c = children.props) == null ? void 0 : _c.htmlColor) || "var(--bui-color-white)"
       })) : children
     );
   }
 );
 IconButton.displayName = "BuiIconButton";
-IconButton.defaultProps = {
-  size: "medium",
-  variant: "default",
-  shape: "circular",
-  color: "default",
-  disabled: false
-};
 var IconButton_default = IconButton;
 export {
   IconButton_default as default

package/es/IconButton/IconButton.types.d.ts

@@ -10,16 +10,17 @@ export type IconButtonProps<D extends React.ElementType = 'button', P = {}> = Ov
          */
         size?: 'small' | 'medium' | 'large';
         /** 按钮颜色
-         * @default 'default'
+         * @default 'neutral'
          */
-        color?: ThemeColor | 'default';
+        color?: ThemeColor;
         /**
          * - default: 图标按钮
          * - contained: 实心填充按钮
          * - outlined: 描边按钮
+         * - subtle: 柔和按钮
          * @default 'default'
          */
-        variant?: 'default' | 'contained' | 'outlined';
+        variant?: 'default' | 'contained' | 'outlined' | 'subtle';
         /**
          * - circular: 圆形
          * - square: 正方形

package/{dist/IconButton/IconButton.css → es/IconButton/index.css}

@@ -1,10 +1,20 @@
+:root,
+page,
+xhs-page {
+  --bui-icon-btn-contained-bg-color: var(--bui-color-neutral-5);
+  --bui-icon-btn-color: var(--bui-color-fg-muted);
+  --bui-icon-btn-small-font-size: var(--bui-text-size-4);
+  --bui-icon-btn-font-size: 17px;
+  --bui-icon-btn-small-padding: var(--bui-spacing-xs);
+  --bui-icon-btn-padding: 5px;
+  --bui-icon-btn-large-padding: var(--bui-spacing-sm);
+  --bui-icon-btn-large-font-size: 23px;
+  --bui-icon-btn-disabled-opacity: 0.5;
+  --bui-icon-btn-outlined-border: 1px solid;
+  --bui-icon-btn-subtle-border: 1px solid transparent;
+  --bui-icon-btn-border: 1px solid transparent;
+}
 .bui-icon-btn {
-  --bg-color: var(--bui-icon-btn-bg-color, var(--bui-color-neutral-5));
-  --color: var(--bui-icon-btn-color, var(--bui-color-fg-muted));
-  --icon-size: var(--bui-icon-btn-font-size, 17px);
-  --user-area: var(--bui-icon-btn-padding, 5px);
-  --large-font-size: var(--bui-icon-btn-large-font-size, 23px);
-  --disabled-opacity: var(--bui-icon-btn-disabled-opacity, 0.5);
   position: relative;
   display: inline-flex;
   height: auto;
@@ -12,12 +22,12 @@
   align-items: center;
   justify-content: center;
   background-color: transparent;
-  border: 1px solid transparent;
-  color: var(--color);
+  border: var(--bui-icon-btn-border);
+  color: var(--bui-icon-btn-color);
   cursor: pointer;
   font-family: var(--bui-font-family);
-  font-size: var(--icon-size);
-  padding: var(--user-area);
+  font-size: var(--bui-icon-btn-font-size);
+  padding: var(--bui-icon-btn-padding);
 }
 .bui-icon-btn::before {
   position: absolute;
@@ -40,28 +50,16 @@
   border: 0;
 }
 .bui-icon-btn-small {
-  font-size: var(--bui-text-size-4);
-  padding: var(--bui-spacing-xs);
-}
-.bui-icon-btn-small.bui-icon-btn-outlined,
-.bui-icon-btn-small.bui-icon-btn-contained {
-  padding: var(--bui-spacing-xs);
-}
-.bui-icon-btn-medium.bui-icon-btn-outlined,
-.bui-icon-btn-medium.bui-icon-btn-contained {
-  padding: var(--user-area);
+  font-size: var(--bui-icon-btn-small-font-size);
+  padding: var(--bui-icon-btn-small-padding);
 }
 .bui-icon-btn-large {
-  font-size: var(--large-font-size);
-  padding: var(--bui-spacing-sm);
-}
-.bui-icon-btn-large.bui-icon-btn-outlined,
-.bui-icon-btn-large.bui-icon-btn-contained {
-  padding: var(--bui-spacing-sm);
+  font-size: var(--bui-icon-btn-large-font-size);
+  padding: var(--bui-icon-btn-large-padding);
 }
 .bui-icon-btn-disabled {
   pointer-events: none;
-  opacity: var(--disabled-opacity);
+  opacity: var(--bui-icon-btn-disabled-opacity);
 }
 .bui-icon-btn-circular {
   border-radius: 100%;
@@ -84,8 +82,14 @@
 .bui-icon-btn-default.bui-icon-btn-warning {
   color: var(--bui-color-warning);
 }
+.bui-icon-btn-default.bui-icon-btn-light {
+  color: var(--bui-color-bg-view);
+}
+.bui-icon-btn-default.bui-icon-btn-dark {
+  color: var(--bui-color-fg-default);
+}
 .bui-icon-btn-outlined {
-  border: solid 1px;
+  border: var(--bui-icon-btn-outlined-border);
 }
 .bui-icon-btn-outlined.bui-icon-btn-primary {
   color: var(--bui-color-primary);
@@ -107,8 +111,16 @@
   color: var(--bui-color-danger);
   border-color: var(--bui-color-danger);
 }
+.bui-icon-btn-outlined.bui-icon-btn-light {
+  color: var(--bui-color-bg-view);
+  border-color: var(--bui-color-bg-view);
+}
+.bui-icon-btn-outlined.bui-icon-btn-dark {
+  color: var(--bui-color-fg-default);
+  border-color: var(--bui-color-fg-default);
+}
 .bui-icon-btn-contained {
-  background-color: var(--bg-color);
+  background-color: var(--bui-icon-btn-contained-bg-color);
 }
 .bui-icon-btn-contained.bui-icon-btn-primary {
   color: var(--bui-color-white);
@@ -150,3 +162,41 @@
       var(--bui-color-danger-start) 0%,
       var(--bui-color-danger-end) 100%);
 }
+.bui-icon-btn-contained.bui-icon-btn-light {
+  color: var(--bui-color-fg-default);
+  background: var(--bui-color-bg-view);
+}
+.bui-icon-btn-contained.bui-icon-btn-dark {
+  color: var(--bui-color-bg-view);
+  background: var(--bui-color-fg-default);
+}
+.bui-icon-btn-subtle {
+  background-color: var(--bui-color-gray-light);
+  border: var(--bui-icon-btn-subtle-border);
+}
+.bui-icon-btn-subtle.bui-icon-btn-warning {
+  color: var(--bui-color-warning);
+  background: var(--bui-color-warning-light);
+}
+.bui-icon-btn-subtle.bui-icon-btn-primary {
+  color: var(--bui-color-primary);
+  background: var(--bui-color-primary-light);
+}
+.bui-icon-btn-subtle.bui-icon-btn-info {
+  color: var(--bui-color-info);
+  background: var(--bui-color-info-light);
+}
+.bui-icon-btn-subtle.bui-icon-btn-success {
+  color: var(--bui-color-success);
+  background: var(--bui-color-success-light);
+}
+.bui-icon-btn-subtle.bui-icon-btn-danger {
+  color: var(--bui-color-danger);
+  background: var(--bui-color-danger-light);
+}
+.bui-icon-btn-subtle.bui-icon-btn-light {
+  color: var(--bui-color-bg-view);
+}
+.bui-icon-btn-subtle.bui-icon-btn-dark {
+  color: var(--bui-color-fg-default);
+}

package/es/Image/Image.js

@@ -34,127 +34,120 @@ import clsx from "clsx";
 import React, { useLayoutEffect, useState } from "react";
 import "./index.css";
 const prefixCls = "bui-image";
-const Image = /* @__PURE__ */ React.forwardRef((props, ref) => {
-  const [loaded, setLoaded] = useState(false);
-  const [failed, setFailed] = useState(false);
-  const _a = props, {
-    fit,
-    src,
-    lazy,
-    style,
-    webp,
-    alt,
-    showMenu,
-    width,
-    height,
-    fallback,
-    className,
-    placeholder,
-    onClick,
-    onLoad,
-    onError,
-    imgProps
-  } = _a, others = __objRest(_a, [
-    "fit",
-    "src",
-    "lazy",
-    "style",
-    "webp",
-    "alt",
-    "showMenu",
-    "width",
-    "height",
-    "fallback",
-    "className",
-    "placeholder",
-    "onClick",
-    "onLoad",
-    "onError",
-    "imgProps"
-  ]);
-  const modeEnum = {
-    none: "center",
-    // 被替换的内容将保持其原有的尺寸居中裁切展示
-    contain: "aspectFit",
-    // 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配
-    cover: "aspectFill",
-    // 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
-    fill: "scaleToFill",
-    // 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框
-    "scale-down": "aspectFit",
-    // 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
-    widthFix: "widthFix",
-    // 【微信小程序】缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。
-    heightFix: "heightFix"
-    // 【微信小程序】缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。
-  };
-  useLayoutEffect(() => {
-    setLoaded(false);
-    setFailed(false);
-  }, [src]);
-  function defaultIconWrap(icon) {
-    return /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-default-icon-wrap` }, icon);
-  }
-  const defaultIcon = defaultIconWrap(
-    /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-default-icon-item` })
-  );
-  const defaultPlaceholder = placeholder === false ? [] : placeholder !== true && defaultIconWrap(placeholder) || defaultIcon;
-  const defaultFallback = fallback && defaultIconWrap(fallback) || defaultPlaceholder;
-  const miniAttr = {
-    webp,
-    lazyLoad: lazy,
-    "lazy-load": lazy,
-    mode: fit && modeEnum[fit],
-    showMenuByLongpress: showMenu
-  };
-  const imgEle = /* @__PURE__ */ React.createElement(
-    "img",
-    __spreadValues(__spreadProps(__spreadValues({
-      src,
-      loading: lazy ? "lazy" : "eager",
-      onLoad: (e) => {
-        setLoaded(true);
-        onLoad == null ? void 0 : onLoad(e);
-      },
-      onError: (e) => {
-        setFailed(true);
-        onError == null ? void 0 : onError(e);
-      },
-      alt
-    }, imgProps), {
-      style: __spreadValues({ objectFit: fit }, (imgProps == null ? void 0 : imgProps.style) || {}),
-      className: clsx(
-        `${prefixCls}-img`,
-        // 无占位且不onFail时直接展示img本体
-        (loaded || placeholder === false && !failed) && `${prefixCls}-loaded`,
-        imgProps == null ? void 0 : imgProps.className
-      )
-    }), isMini ? miniAttr : {})
-  );
-  function renderImgEle() {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, failed && defaultFallback || !loaded && defaultPlaceholder || null, imgEle);
-  }
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    __spreadValues({
-      ref,
+const Image = /* @__PURE__ */ React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      fit = "fill",
+      src = "",
+      lazy = false,
+      style,
+      webp,
+      alt,
+      showMenu,
+      width,
+      height,
+      fallback = null,
+      className,
+      placeholder = false,
       onClick,
-      style: __spreadValues({ width, height }, style),
-      className: clsx(prefixCls, className)
-    }, others),
-    renderImgEle()
-  );
-});
+      onLoad,
+      onError,
+      imgProps
+    } = _b, others = __objRest(_b, [
+      "fit",
+      "src",
+      "lazy",
+      "style",
+      "webp",
+      "alt",
+      "showMenu",
+      "width",
+      "height",
+      "fallback",
+      "className",
+      "placeholder",
+      "onClick",
+      "onLoad",
+      "onError",
+      "imgProps"
+    ]);
+    const [loaded, setLoaded] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const modeEnum = {
+      none: "center",
+      // 被替换的内容将保持其原有的尺寸居中裁切展示
+      contain: "aspectFit",
+      // 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配
+      cover: "aspectFill",
+      // 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
+      fill: "scaleToFill",
+      // 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不匹配，那么该对象将被拉伸以适应内容框
+      "scale-down": "aspectFit",
+      // 内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
+      widthFix: "widthFix",
+      // 【微信小程序】缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。
+      heightFix: "heightFix"
+      // 【微信小程序】缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。
+    };
+    useLayoutEffect(() => {
+      setLoaded(false);
+      setFailed(false);
+    }, [src]);
+    function defaultIconWrap(icon) {
+      return /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-default-icon-wrap` }, icon);
+    }
+    const defaultIcon = defaultIconWrap(
+      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-default-icon-item` })
+    );
+    const defaultPlaceholder = placeholder === false ? [] : placeholder !== true && defaultIconWrap(placeholder) || defaultIcon;
+    const defaultFallback = fallback && defaultIconWrap(fallback) || defaultPlaceholder;
+    const miniAttr = {
+      webp,
+      lazyLoad: lazy,
+      "lazy-load": lazy,
+      mode: fit && modeEnum[fit],
+      showMenuByLongpress: showMenu
+    };
+    const imgEle = /* @__PURE__ */ React.createElement(
+      "img",
+      __spreadValues(__spreadProps(__spreadValues({
+        src,
+        loading: lazy ? "lazy" : "eager",
+        onLoad: (e) => {
+          setLoaded(true);
+          onLoad == null ? void 0 : onLoad(e);
+        },
+        onError: (e) => {
+          setFailed(true);
+          onError == null ? void 0 : onError(e);
+        },
+        alt
+      }, imgProps), {
+        style: __spreadValues({ objectFit: fit }, (imgProps == null ? void 0 : imgProps.style) || {}),
+        className: clsx(
+          `${prefixCls}-img`,
+          // 无占位且不onFail时直接展示img本体
+          (loaded || placeholder === false && !failed) && `${prefixCls}-loaded`,
+          imgProps == null ? void 0 : imgProps.className
+        )
+      }), isMini ? miniAttr : {})
+    );
+    function renderImgEle() {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, failed && defaultFallback || !loaded && defaultPlaceholder || null, imgEle);
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      __spreadValues({
+        ref,
+        onClick,
+        style: __spreadValues({ width, height }, style),
+        className: clsx(prefixCls, className)
+      }, others),
+      renderImgEle()
+    );
+  }
+);
 Image.displayName = "BuiImage";
-Image.defaultProps = {
-  src: "",
-  lazy: false,
-  fallback: null,
-  placeholder: false,
-  width: void 0,
-  height: void 0,
-  fit: "fill"
-};
 var Image_default = Image;
 export {
   Image_default as default

package/es/Image/index.css

@@ -1,5 +1,9 @@
+:root,
+page,
+xhs-page {
+  --bui-image-default-background-color: rgba(127, 127, 127, 0.2);
+}
 .bui-image {
-  --default-background-color: var(--bui-image-default-background-color, rgba(127, 127, 127, 0.2));
   width: auto;
   height: auto;
   display: inline-block;
@@ -32,5 +36,5 @@
 .bui-image-default-icon-item {
   width: 100%;
   height: 100%;
-  background-color: var(--default-background-color);
+  background-color: var(--bui-image-default-background-color);
 }

package/es/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { InputProps } from './index';
-import './Input.less';
+import './index.less';
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Input;

package/es/Input/Input.js

@@ -33,22 +33,22 @@ import { ErrorCircleFilledIcon } from "@bifrostui/icons";
 import { isMini, useValue } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { forwardRef, useState } from "react";
-import "./Input.css";
+import "./index.css";
 const prefixCls = "bui-input";
 const Input = forwardRef((props, ref) => {
   const _a = props, {
     className,
-    defaultValue,
+    defaultValue = "",
     value,
     inputProps,
     inputRef,
     name,
-    type,
-    clearable,
+    type = "text",
+    clearable = false,
     startIcon,
     endIcon,
     placeholder,
-    disabled,
+    disabled = false,
     onClear,
     onChange,
     onFocus,
@@ -141,17 +141,11 @@ const Input = forwardRef((props, ref) => {
         className: clsx(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
       })
     ),
-    clearable && !!inputValue && hasFocus && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-clear`, onClick: handleClear }, /* @__PURE__ */ React.createElement(ErrorCircleFilledIcon, { htmlColor: "#959aa5" })),
+    clearable && !!inputValue && hasFocus && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-clear`, onClick: handleClear }, /* @__PURE__ */ React.createElement(ErrorCircleFilledIcon, { htmlColor: "var(--bui-color-fg-subtle)" })),
     endIcon && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-icon ${prefixCls}-icon-end` }, endIcon)
   );
 });
 Input.displayName = "BuiInput";
-Input.defaultProps = {
-  defaultValue: "",
-  type: "text",
-  clearable: false,
-  disabled: false
-};
 var Input_default = Input;
 export {
   Input_default as default