@bifrostui/react 1.5.0 → 2.0.0-alpha.0

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

@@ -1,10 +1,14 @@
+:root,
+page,
+xhs-page {
+  --bui-popover-arrow-size: 8PX;
+  --bui-popover-location-position: 8PX;
+  --bui-popover-max-width: 350px;
+  --bui-popover-content-min-width: 30px;
+  --bui-popover-content-padding: 6px 8px;
+}
 .bui-popover {
-  --arrow-size: var(--bui-popover-arrow-size, 8PX);
-  --localtion-position: var(--bui-popover-localtion-position, 8PX);
-  --max-width: var(--bui-popover-max-width, 350px);
-  --content-min-width: var(--bui-popover-content-min-width, 30px);
-  --content-padding: var(--bui-popover-content-padding, 6px 8px);
-  max-width: var(--max-width);
+  max-width: var(--bui-popover-max-width);
   font-size: var(--bui-text-size-1);
   position: absolute;
   visibility: hidden;
@@ -16,16 +20,16 @@
   position: absolute;
 }
 .bui-popover .bui-popover-arrow.location-left {
-  left: var(--localtion-position);
+  left: var(--bui-popover-location-position);
 }
 .bui-popover .bui-popover-arrow.location-right {
-  right: var(--localtion-position);
+  right: var(--bui-popover-location-position);
 }
 .bui-popover .bui-popover-arrow.location-top {
-  top: var(--localtion-position);
+  top: var(--bui-popover-location-position);
 }
 .bui-popover .bui-popover-arrow.location-bottom {
-  bottom: var(--localtion-position);
+  bottom: var(--bui-popover-location-position);
 }
 .bui-popover.popover-top .location-center,
 .bui-popover.popover-bottom .location-center {
@@ -38,48 +42,48 @@
   transform: translateY(-50%);
 }
 .bui-popover.popover-top {
-  padding-bottom: var(--arrow-size);
+  padding-bottom: var(--bui-popover-arrow-size);
 }
 .bui-popover.popover-top .bui-popover-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-view);
+  border-left: var(--bui-popover-arrow-size) solid transparent;
+  border-right: var(--bui-popover-arrow-size) solid transparent;
+  border-top: var(--bui-popover-arrow-size) solid var(--bui-color-bg-view);
   bottom: 0;
 }
 .bui-popover.popover-bottom {
-  padding-top: var(--arrow-size);
+  padding-top: var(--bui-popover-arrow-size);
 }
 .bui-popover.popover-bottom .bui-popover-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-view);
+  border-left: var(--bui-popover-arrow-size) solid transparent;
+  border-right: var(--bui-popover-arrow-size) solid transparent;
+  border-bottom: var(--bui-popover-arrow-size) solid var(--bui-color-bg-view);
   top: 0;
 }
 .bui-popover.popover-left {
-  padding-right: var(--arrow-size);
+  padding-right: var(--bui-popover-arrow-size);
 }
 .bui-popover.popover-left .bui-popover-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-view);
+  border-top: var(--bui-popover-arrow-size) solid transparent;
+  border-bottom: var(--bui-popover-arrow-size) solid transparent;
+  border-left: var(--bui-popover-arrow-size) solid var(--bui-color-bg-view);
   right: 0;
 }
 .bui-popover.popover-right {
-  padding-left: var(--arrow-size);
+  padding-left: var(--bui-popover-arrow-size);
 }
 .bui-popover.popover-right .bui-popover-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-view);
+  border-top: var(--bui-popover-arrow-size) solid transparent;
+  border-bottom: var(--bui-popover-arrow-size) solid transparent;
+  border-right: var(--bui-popover-arrow-size) solid var(--bui-color-bg-view);
   left: 0;
 }
 .bui-popover .bui-popover-title {
   font-weight: var(--bui-font-weight-bold);
 }
 .bui-popover .bui-popover-content {
-  min-width: var(--content-min-width);
+  min-width: var(--bui-popover-content-min-width);
   color: var(--bui-color-fg-muted);
-  padding: var(--content-padding);
+  padding: var(--bui-popover-content-padding);
   text-align: left;
   text-decoration: none;
   word-wrap: break-word;

package/dist/Portal/Portal.miniapp.js

@@ -53,9 +53,7 @@ var import_react = __toESM(require("react"));
 var import_PortalCore = __toESM(require("./PortalCore"));
 const Portal = (0, import_react.forwardRef)((props, ref) => {
   const { disablePortal } = props;
-  const [rootWrapperElement, setRootWrapperElement] = (0, import_react.useState)();
-  (0, import_react.useEffect)(() => {
-    let root;
+  const rootWrapperElement = (0, import_react.useMemo)(() => {
     if (!disablePortal) {
       const currentPages = import_taro.default.getCurrentPages() || [];
       const currentPage = currentPages[currentPages.length - 1];
@@ -67,12 +65,11 @@ const Portal = (0, import_react.forwardRef)((props, ref) => {
         const view = document.createElement("view");
         view.id = portalId;
         rootElement == null ? void 0 : rootElement.appendChild(view);
-        root = view;
-      } else {
-        root = portalWrapperElement;
+        return view;
       }
+      return portalWrapperElement;
     }
-    setRootWrapperElement(root);
+    return void 0;
   }, []);
   return /* @__PURE__ */ import_react.default.createElement(import_PortalCore.default, __spreadProps(__spreadValues({}, props), { ref, rootElement: rootWrapperElement }));
 });

package/dist/Progress/Progress.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ProgressGradient, ProgressProps } from './Progress.types';
-import './Progress.less';
+import './index.less';
 export declare const handleGradient: (strokeColor: ProgressGradient) => {
     backgroundImage: string;
 };

package/dist/Progress/Progress.js

@@ -59,7 +59,7 @@ __export(Progress_exports, {
 module.exports = __toCommonJS(Progress_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Progress2 = require("./Progress.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-progress";
 function validProgress(progress) {
   if (!progress || progress < 0) {

package/dist/Progress/index.css

@@ -0,0 +1,28 @@
+:root,
+page,
+xhs-page {
+  --bui-progress-fill-color: var(--bui-color-primary);
+  --bui-progress-trail-color: rgba(156, 156, 165, 0.2);
+  --bui-progress-stroke-width: 8px;
+  --bui-progress-width: 100%;
+  --bui-progress-border-radius: 100px;
+}
+.bui-progress {
+  width: var(--bui-progress-width);
+  font-family: var(--bui-font-family);
+}
+.bui-progress-inner {
+  position: relative;
+  display: inline-block;
+  width: var(--bui-progress-width);
+  overflow: hidden;
+  vertical-align: middle;
+  background-color: var(--bui-progress-trail-color);
+  border-radius: var(--bui-progress-border-radius);
+}
+.bui-progress-bg {
+  position: relative;
+  border-radius: var(--bui-progress-border-radius);
+  background-color: var(--bui-progress-fill-color);
+  height: var(--bui-progress-stroke-width);
+}

package/dist/Radio/Radio.d.ts

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

package/dist/Radio/Radio.js

@@ -64,12 +64,12 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_RadioButtonIcon = __toESM(require("./RadioButtonIcon"));
 var import_RadioContext = __toESM(require("./RadioContext"));
-var import_Radio2 = require("./Radio.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-radio";
 const Radio = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
     className,
-    defaultChecked,
+    defaultChecked = false,
     checked,
     inputProps,
     inputRef,
@@ -78,7 +78,7 @@ const Radio = (0, import_react.forwardRef)((props, ref) => {
     disabled,
     icon,
     checkedIcon,
-    labelPlacement,
+    labelPlacement = "right",
     onChange,
     children
   } = _a, others = __objRest(_a, [
@@ -177,8 +177,4 @@ const Radio = (0, import_react.forwardRef)((props, ref) => {
   );
 });
 Radio.displayName = "BuiRadio";
-Radio.defaultProps = {
-  defaultChecked: false,
-  labelPlacement: "right"
-};
 var Radio_default = Radio;

package/dist/Radio/RadioButtonIcon.js

@@ -35,7 +35,12 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 const prefixCls = "bui-radio-btn-icon";
 function RadioButtonIcon(props) {
-  const { checked, size = "medium", color, htmlColor = "#959aa5" } = props;
+  const {
+    checked,
+    size = "medium",
+    color,
+    htmlColor = "var(--bui-color-fg-subtle)"
+  } = props;
   return /* @__PURE__ */ import_react.default.createElement(
     "span",
     {

package/dist/Radio/RadioGroup.d.ts

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

package/dist/Radio/RadioGroup.js

@@ -59,8 +59,8 @@ module.exports = __toCommonJS(RadioGroup_exports);
 var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Radio = require("./Radio.css");
 var import_RadioContext = require("./RadioContext");
+var import_index = require("./index.css");
 const prefixCls = "bui-radio-group";
 const RadioGroup = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
@@ -100,7 +100,4 @@ const RadioGroup = (0, import_react.forwardRef)((props, ref) => {
   );
 });
 RadioGroup.displayName = "BuiRadioGroup";
-RadioGroup.defaultProps = {
-  disabled: false
-};
 var RadioGroup_default = RadioGroup;

package/dist/Radio/{Radio.css → index.css}

@@ -1,8 +1,11 @@
+:root,
+page,
+xhs-page {
+  --bui-radio-label-color: var(--bui-color-fg-default);
+  --bui-radio-label-font-size: var(--bui-text-size-1);
+  --bui-radio-icon-padding: 5px;
+}
 .bui-radio {
-  --label-color: var(--bui-radio-label-color, var(--bui-color-fg-default));
-  --label-font-size: var(--bui-radio-label-font-size, var(--bui-text-size-1));
-  --icon-font-size: var(--bui-radio-icon-font-size, var(--bui-title-size-2));
-  --icon-padding: var(--bui-radio-icon-padding, 5px);
   display: inline-flex;
   align-items: center;
   position: relative;
@@ -36,12 +39,12 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  padding: var(--icon-padding);
+  padding: var(--bui-radio-icon-padding);
   box-sizing: border-box;
 }
 .bui-radio-label {
-  font-size: var(--label-font-size);
-  color: var(--label-color);
+  font-size: var(--bui-radio-label-font-size);
+  color: var(--bui-radio-label-color);
 }
 .bui-radio-btn-icon {
   position: relative;

package/dist/Rating/Rating.d.ts

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

package/dist/Rating/Rating.js

@@ -60,7 +60,7 @@ var import_icons = require("@bifrostui/icons");
 var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Rating2 = require("./Rating.css");
+var import_index = require("./index.css");
 const classes = {
   root: "bui-rating",
   item: "bui-rating-item",
@@ -69,18 +69,18 @@ const classes = {
 const Rating = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
     className,
-    size,
+    size = "medium",
     defaultValue,
-    allowHalf,
-    icon,
-    checkedIcon,
-    count,
-    readOnly,
-    disabled,
+    allowHalf = false,
+    icon = /* @__PURE__ */ import_react.default.createElement(import_icons.StarFilledIcon, { color: "disabled" }),
+    checkedIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.StarFilledIcon, { color: "warning" }),
+    count = 5,
+    readOnly = false,
+    disabled = false,
     value,
     onChange,
     name,
-    disableClear
+    disableClear = false
   } = _a, others = __objRest(_a, [
     "className",
     "size",
@@ -164,14 +164,4 @@ const Rating = (0, import_react.forwardRef)((props, ref) => {
   );
 });
 Rating.displayName = "BuiRating";
-Rating.defaultProps = {
-  size: "medium",
-  count: 5,
-  icon: /* @__PURE__ */ import_react.default.createElement(import_icons.StarFilledIcon, { htmlColor: "#ced1d6" }),
-  checkedIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.StarFilledIcon, { color: "warning" }),
-  readOnly: false,
-  disabled: false,
-  allowHalf: false,
-  disableClear: false
-};
 var Rating_default = Rating;

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

@@ -1,3 +1,15 @@
+:root,
+page,
+xhs-page {
+  --bui-rating-xsmall-font-size: var(--bui-text-size-5);
+  --bui-rating-xsmall-margin-right: 0;
+  --bui-rating-small-margin-right: 0.5px;
+  --bui-rating-small-font-size: var(--bui-text-size-1);
+  --bui-rating-margin-right: 1px;
+  --bui-rating-font-size: var(--bui-title-size-3);
+  --bui-rating-large-margin-right: 2px;
+  --bui-rating-large-font-size: 22px;
+}
 .bui-rating {
   --small-margin-right: var(--bui-rating-small-margin-right, 0.5px);
   --medium-margin-right: var(--bui-rating-medium-margin-right, 1px);
@@ -19,19 +31,20 @@
   margin-right: 0;
 }
 .bui-rating-container-xsmall {
-  font-size: var(--bui-text-size-5);
+  font-size: var(--bui-rating-xsmall-font-size);
+  margin-right: var(--bui-rating-xsmall-margin-right);
 }
 .bui-rating-container-small {
-  font-size: var(--bui-text-size-1);
-  margin-right: var(--small-margin-right);
+  font-size: var(--bui-rating-small-font-size);
+  margin-right: var(--bui-rating-small-margin-right);
 }
 .bui-rating-container-medium {
-  font-size: var(--bui-title-size-3);
-  margin-right: var(--medium-margin-right);
+  font-size: var(--bui-rating-font-size);
+  margin-right: var(--bui-rating-margin-right);
 }
 .bui-rating-container-large {
-  font-size: var(--large-font-size);
-  margin-right: var(--large-margin-right);
+  font-size: var(--bui-rating-large-font-size);
+  margin-right: var(--bui-rating-large-margin-right);
 }
 .bui-rating-item {
   display: flex;

package/dist/ScrollView/ScrollView.d.ts

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

package/dist/ScrollView/ScrollView.js

@@ -33,15 +33,13 @@ module.exports = __toCommonJS(ScrollView_exports);
 var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_ScrollView = require("./ScrollView.css");
-function easeOutScroll(from, to, callback, dur) {
-  if (dur <= 0) {
-    dur = 500;
-  }
+var import_index = require("./index.css");
+function easeOutScroll(from, to, callback) {
   if (from === to || typeof from !== "number") {
     return;
   }
   const change = to - from;
+  const dur = 500;
   const sTime = +/* @__PURE__ */ new Date();
   function linear(t, b, c, d) {
     return c * t / d + b;
@@ -76,8 +74,7 @@ const ScrollView = (0, import_react.forwardRef)(
       scrollIntoView,
       onTouchMove: propsOnTouchMove,
       scrollIntoViewAlignment,
-      children,
-      scrollAnimationDuration = 500
+      children
     } = props;
     const container = (0, import_react.useRef)(null);
     const handleRef = (0, import_utils.useForkRef)(ref, container);
@@ -87,15 +84,10 @@ const ScrollView = (0, import_react.forwardRef)(
       if (top === void 0)
         return;
       if (isAnimation) {
-        easeOutScroll(
-          container.current.scrollTop,
-          top,
-          (pos) => {
-            if (container.current)
-              container.current.scrollTop = pos;
-          },
-          scrollAnimationDuration
-        );
+        easeOutScroll(container.current.scrollTop, top, (pos) => {
+          if (container.current)
+            container.current.scrollTop = pos;
+        });
       } else if (container.current)
         container.current.scrollTop = top;
     }, []);
@@ -103,15 +95,10 @@ const ScrollView = (0, import_react.forwardRef)(
       if (left === void 0)
         return;
       if (isAnimation) {
-        easeOutScroll(
-          container.current.scrollLeft,
-          left,
-          (pos) => {
-            if (container.current)
-              container.current.scrollLeft = pos;
-          },
-          scrollAnimationDuration
-        );
+        easeOutScroll(container.current.scrollLeft, left, (pos) => {
+          if (container.current)
+            container.current.scrollLeft = pos;
+        });
       } else if (container.current)
         container.current.scrollLeft = left;
     }, []);

package/dist/ScrollView/ScrollView.types.d.ts

@@ -138,6 +138,7 @@ export type ScrollViewProps<D extends React.ElementType = 'div', P = {}> = Overr
          */
         fastDeceleration?: boolean;
         /** 当 scroll-with-animation设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。
+         * 仅小程序可用
          */
         scrollAnimationDuration?: number;
         /** 纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。

package/dist/Select/Select.d.ts

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