@bifrostui/react 1.4.5-beta.2 → 1.4.5-beta.3

package/dist/Switch/Switch.js

@@ -64,83 +64,80 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_Switch2 = require("./Switch.css");
 const prefixCls = "bui-switch";
-const Switch = (0, import_react.forwardRef)((props, ref) => {
-  const _a = props, {
-    className,
-    checked,
-    defaultChecked,
-    inputProps,
-    inputRef,
-    name,
-    checkedChildren,
-    unCheckedChildren,
-    disabled,
-    size,
-    color,
-    onChange
-  } = _a, others = __objRest(_a, [
-    "className",
-    "checked",
-    "defaultChecked",
-    "inputProps",
-    "inputRef",
-    "name",
-    "checkedChildren",
-    "unCheckedChildren",
-    "disabled",
-    "size",
-    "color",
-    "onChange"
-  ]);
-  const [switchChecked, triggerChange] = (0, import_utils.useValue)({
-    value: checked,
-    defaultValue: !!defaultChecked
-  });
-  const changeAction = (e, isChecked) => {
-    triggerChange(e, isChecked);
-    onChange == null ? void 0 : onChange(e, { checked: isChecked });
-  };
-  const handleChange = (e) => {
-    var _a2;
-    const isChecked = !switchChecked;
-    changeAction(e, isChecked);
-    (_a2 = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a2.call(inputProps, e);
-  };
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    __spreadValues({
-      ref,
-      className: (0, import_clsx.default)(
-        `${prefixCls}`,
-        `${prefixCls}-${size}`,
-        `${prefixCls}-${color}`,
-        {
-          [`${prefixCls}-checked`]: switchChecked,
-          [`${prefixCls}-disabled`]: disabled
-        },
-        className
-      )
-    }, others),
-    /* @__PURE__ */ import_react.default.createElement(
-      "input",
-      __spreadProps(__spreadValues({
-        ref: inputRef,
-        type: "checkbox",
-        name,
-        checked: switchChecked,
-        disabled
-      }, inputProps), {
-        onChange: handleChange,
-        className: (0, import_clsx.default)(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
-      })
-    ),
-    (checkedChildren || unCheckedChildren) && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-inner` }, switchChecked ? checkedChildren : unCheckedChildren)
-  );
-});
+const Switch = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      checked,
+      defaultChecked,
+      inputProps,
+      inputRef,
+      name,
+      checkedChildren,
+      unCheckedChildren,
+      disabled = false,
+      size = "medium",
+      color = "primary",
+      onChange
+    } = _b, others = __objRest(_b, [
+      "className",
+      "checked",
+      "defaultChecked",
+      "inputProps",
+      "inputRef",
+      "name",
+      "checkedChildren",
+      "unCheckedChildren",
+      "disabled",
+      "size",
+      "color",
+      "onChange"
+    ]);
+    const [switchChecked, triggerChange] = (0, import_utils.useValue)({
+      value: checked,
+      defaultValue: !!defaultChecked
+    });
+    const changeAction = (e, isChecked) => {
+      triggerChange(e, isChecked);
+      onChange == null ? void 0 : onChange(e, { checked: isChecked });
+    };
+    const handleChange = (e) => {
+      var _a2;
+      const isChecked = !switchChecked;
+      changeAction(e, isChecked);
+      (_a2 = inputProps == null ? void 0 : inputProps.onChange) == null ? void 0 : _a2.call(inputProps, e);
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      __spreadValues({
+        ref,
+        className: (0, import_clsx.default)(
+          `${prefixCls}`,
+          `${prefixCls}-${size}`,
+          `${prefixCls}-${color}`,
+          {
+            [`${prefixCls}-checked`]: switchChecked,
+            [`${prefixCls}-disabled`]: disabled
+          },
+          className
+        )
+      }, others),
+      /* @__PURE__ */ import_react.default.createElement(
+        "input",
+        __spreadProps(__spreadValues({
+          ref: inputRef,
+          type: "checkbox",
+          name,
+          checked: switchChecked,
+          disabled
+        }, inputProps), {
+          onChange: handleChange,
+          className: (0, import_clsx.default)(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
+        })
+      ),
+      (checkedChildren || unCheckedChildren) && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-inner` }, switchChecked ? checkedChildren : unCheckedChildren)
+    );
+  }
+);
 Switch.displayName = "BuiSwitch";
-Switch.defaultProps = {
-  disabled: false,
-  size: "medium",
-  color: "primary"
-};
 var Switch_default = Switch;

package/dist/TabBar/TabBar.js

@@ -63,9 +63,9 @@ var import_TabBar = require("./TabBar.css");
 const prefixCls = "bui-tab-bar";
 const TabBar = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props || {}, {
-    current,
-    activeColor,
-    color,
+    current = 0,
+    activeColor = "primary",
+    color = "default",
     children,
     className,
     onChange
@@ -97,9 +97,4 @@ const TabBar = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   );
 });
 TabBar.displayName = "BuiTabBar";
-TabBar.defaultProps = {
-  activeColor: "primary",
-  color: "default",
-  current: 0
-};
 var TabBar_default = TabBar;

package/dist/Tabs/Tab.css

@@ -15,13 +15,14 @@
   font-family: var(--bui-tabs-font-family);
 }
 .bui-tab-active {
-  line-height: var(--bui-line-height);
+  --bui-tabs-font-family: var(--bui-font-family-accent, inherit);
   --bui-tabs-color: var(--bui-color-fg-default);
+  font-weight: 600;
 }
 .bui-tab-miniapp-active {
+  --bui-tabs-color: var(--bui-color-fg-default);
   line-height: 1.5;
   font-weight: var(--bui-font-weight-medium);
-  --bui-tabs-color: var(--bui-color-fg-default);
   position: relative;
 }
 .bui-tab-miniapp-active-line {

package/dist/Tabs/Tab.js

@@ -65,11 +65,20 @@ var import_react = __toESM(require("react"));
 var import_TabsContext = __toESM(require("./TabsContext"));
 var import_Tab2 = require("./Tab.css");
 const prefixCls = "bui-tab";
-const defaultProps = {
-  disabled: false
-};
 const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = __spreadValues(__spreadValues({}, defaultProps), props), { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
+  const _a = props, {
+    className,
+    children,
+    index,
+    disabled = false,
+    onClick
+  } = _a, others = __objRest(_a, [
+    "className",
+    "children",
+    "index",
+    "disabled",
+    "onClick"
+  ]);
   const tabsContext = import_react.default.useContext(import_TabsContext.default);
   const { value, triggerChange } = tabsContext;
   return /* @__PURE__ */ import_react.default.createElement(

package/dist/Tabs/Tabs.css

@@ -1,20 +1,7 @@
 .bui-tabs {
-  --bui-tabs-font-family: var(--bui-font-family);
-  --bui-tabs-font-size: var(--bui-text-size-1);
-  --bui-tabs-height: 39px;
-  --bui-tabs-color: var(--bui-color-fg-subtle);
-  --bui-tabs-font-weight: var(--bui-font-weight-medium);
-  --bui-tabs-indicator-bg: var(--bui-color-primary);
-  --bui-tabs-indicator-height: 3px;
-  --bui-tabs-indicator-width: 18px;
-  --bui-tabs-indicator-border-radius: 3px;
-  --bui-tabs-indicator-bottom: 0;
-  --bui-tabs-indicator-box-shadow: none;
-  --bui-tabs-mask-width: 12px;
-  --bui-tabs-mask-height: 100%;
-  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
   position: relative;
   font-family: var(--bui-tabs-font-family);
+  font-weight: var(--bui-tabs-font-weight);
 }
 .bui-tabs-tabs {
   height: var(--bui-tabs-height);
@@ -24,7 +11,6 @@
   align-items: center;
   position: relative;
   overflow-x: scroll;
-  font-weight: var(--bui-tabs-font-weight);
   scrollbar-width: none;
 }
 .bui-tabs-tabs::-webkit-scrollbar {
@@ -48,8 +34,8 @@
   top: 0;
   bottom: 0;
   z-index: 1;
-  width: var(--bui-tabs-mask-width);
-  height: var(--bui-tabs-mask-height);
+  width: 12px;
+  height: 100%;
   pointer-events: none;
 }
 .bui-tabs-mask-left {

package/dist/Tabs/Tabs.js

@@ -64,28 +64,23 @@ var import_TabsContext = require("./TabsContext");
 var import_bound = __toESM(require("./utils/bound"));
 var import_Tabs2 = require("./Tabs.css");
 const prefixCls = "bui-tabs";
-const defaultProps = {
-  tabs: []
-};
 const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
-  const _a = __spreadValues(__spreadValues({}, defaultProps), props), { children, className, value, tabs, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "onChange"]);
-  const [active, setActive] = (0, import_react.useState)("");
+  const _a = props, { children, className, value, tabs = [], onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "onChange"]);
   const tabsRef = (0, import_react.useRef)(null);
   const activeLineRef = (0, import_react.useRef)(null);
-  const [lineData, setLineData] = (0, import_react.useState)({
+  const [indicatorData, setIndicatorData] = (0, import_react.useState)({
     x: 0,
-    transitionInUse: false,
     hasActiveTab: false
   });
   const [maskData, setMaskData] = (0, import_react.useState)({
     leftMaskOpacity: 0,
     rightMaskOpacity: 0
   });
-  const animate = ({ transitionInUse }) => {
+  const animate = (0, import_utils.useEventCallback)(() => {
     const container = tabsRef.current;
     if (!container)
       return;
-    const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === active);
+    const activeIndex = !!tabs.length && tabs.findIndex((item) => item.index === value);
     const activeLine = activeLineRef.current;
     if (!activeLine)
       return;
@@ -116,9 +111,8 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       activeLineWidth = activeLine.offsetWidth;
       x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
     }
-    setLineData({
+    setIndicatorData({
       x,
-      transitionInUse,
       hasActiveTab: !!activeTab
     });
     const maxScrollDistance = containerScrollWidth - containerWidth;
@@ -132,7 +126,7 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     if (tabsRef.current) {
       tabsRef.current.scrollLeft = nextScrollLeft;
     }
-  };
+  });
   const updateMask = (0, import_react.useMemo)(
     () => (0, import_utils.throttle)(
       () => {
@@ -156,25 +150,19 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     []
   );
   (0, import_react.useEffect)(() => {
-    setActive(value);
+    animate();
   }, [value]);
-  (0, import_react.useLayoutEffect)(() => {
-    animate({ transitionInUse: false });
-  }, []);
   (0, import_react.useEffect)(() => {
     const handleResize = (0, import_utils.debounce)(() => {
-      animate({ transitionInUse: true });
+      animate();
       updateMask();
     }, 100);
     window.addEventListener("resize", handleResize);
     return () => {
       window.removeEventListener("resize", handleResize);
     };
-  }, [active]);
-  (0, import_utils.useDidMountEffect)(() => {
-    animate({ transitionInUse: true });
-  }, [active, tabs, children]);
-  (0, import_react.useLayoutEffect)(() => {
+  }, []);
+  (0, import_react.useEffect)(() => {
     updateMask();
   }, []);
   const handleClick = (e, item) => {
@@ -184,9 +172,6 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     if (index === void 0 || index === null) {
       return;
     }
-    if (active !== value) {
-      setActive(index);
-    }
     if (index !== value) {
       onChange == null ? void 0 : onChange(e, { index });
     }
@@ -215,11 +200,11 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     {
       ref: activeLineRef,
       className: (0, import_clsx.default)(`${prefixCls}-indicator`, {
-        "bui-indicator-invisible": import_utils.isMini || !lineData.hasActiveTab
+        "bui-indicator-invisible": import_utils.isMini || !indicatorData.hasActiveTab
       }),
       style: {
-        transition: lineData.transitionInUse ? "transform 0.3s ease-in-out" : void 0,
-        transform: `translate3d(${lineData.x}px, 0px, 0px)`
+        transition: "transform 0.3s ease-in-out",
+        transform: `translate3d(${indicatorData.x}px, 0px, 0px)`
       }
     }
   ), /* @__PURE__ */ import_react.default.createElement(import_TabsContext.TabsContextProvider, { value: providerValue }, !!tabs.length && tabs.map((item) => {

package/dist/Tag/Tag.js

@@ -77,9 +77,9 @@ const Tag = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     className,
     style,
-    color,
+    color = "default",
     htmlColor,
-    variant,
+    variant = "outlined",
     onClick,
     children
   } = _a, others = __objRest(_a, [
@@ -128,8 +128,4 @@ const Tag = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   );
 });
 Tag.displayName = "BuiTag";
-Tag.defaultProps = {
-  variant: "outlined",
-  color: "default"
-};
 var Tag_default = Tag;

package/dist/TextArea/TextArea.js

@@ -70,17 +70,17 @@ const TextArea = /* @__PURE__ */ import_react.default.forwardRef(
     const _a = props, {
       className,
       value,
-      defaultValue,
+      defaultValue = "",
       textareaProps,
       textareaRef,
       name,
       placeholder,
       disabled,
-      rows,
+      rows = DEFAULT_ROWS,
       maxLength,
-      autoSize,
-      autoFocus,
-      showCount,
+      autoSize = false,
+      autoFocus = false,
+      showCount = false,
       onChange
     } = _a, others = __objRest(_a, [
       "className",
@@ -205,11 +205,4 @@ const TextArea = /* @__PURE__ */ import_react.default.forwardRef(
   }
 );
 TextArea.displayName = "BuiTextArea";
-TextArea.defaultProps = {
-  defaultValue: "",
-  rows: DEFAULT_ROWS,
-  autoSize: false,
-  autoFocus: false,
-  showCount: false
-};
 var TextArea_default = TextArea;

package/dist/Transition/TransitionCore.js

@@ -89,8 +89,8 @@ const TransitionCore = (0, import_react.forwardRef)(
       children,
       mountOnEnter,
       unmountOnExit,
-      enter,
-      exit,
+      enter = true,
+      exit = true,
       timeout: _timeout,
       delay: _delay,
       onEnter,
@@ -99,7 +99,7 @@ const TransitionCore = (0, import_react.forwardRef)(
       onExit,
       onExiting,
       onExited,
-      nextTick
+      nextTick = setTimeout
     } = _a, childProps = __objRest(_a, [
       "appear",
       "in",
@@ -254,9 +254,4 @@ const TransitionCore = (0, import_react.forwardRef)(
   }
 );
 TransitionCore.displayName = "BuiTransitionCore";
-TransitionCore.defaultProps = {
-  enter: true,
-  exit: true,
-  nextTick: setTimeout
-};
 var TransitionCore_default = TransitionCore;

package/es/ActionSheet/ActionSheetItem.js

@@ -36,9 +36,9 @@ const ActionSheetItem = /* @__PURE__ */ React.forwardRef(
     const _a = props, {
       className,
       children,
-      disabled,
-      bold,
-      color,
+      disabled = false,
+      bold = false,
+      color = "default",
       description,
       onClick,
       index
@@ -81,11 +81,6 @@ const ActionSheetItem = /* @__PURE__ */ React.forwardRef(
   }
 );
 ActionSheetItem.displayName = "BuiActionSheetItem";
-ActionSheetItem.defaultProps = {
-  color: "default",
-  disabled: false,
-  bold: false
-};
 var ActionSheetItem_default = ActionSheetItem;
 export {
   ActionSheetItem_default as default

package/es/Avatar/Avatar.js

@@ -43,10 +43,10 @@ const Avatar = /* @__PURE__ */ React.forwardRef((props, ref) => {
     children,
     src,
     lazy,
-    variant,
-    size,
+    variant = "rounded",
+    size = "medium",
     alt,
-    fit,
+    fit = "cover",
     placeholder,
     ImageProps
   } = _a, others = __objRest(_a, [
@@ -96,11 +96,6 @@ const Avatar = /* @__PURE__ */ React.forwardRef((props, ref) => {
   );
 });
 Avatar.displayName = "BuiAvatar";
-Avatar.defaultProps = {
-  variant: "rounded",
-  size: "medium",
-  fit: "cover"
-};
 var Avatar_default = Avatar;
 export {
   Avatar_default as default

package/es/Avatar/AvatarGroup.js

@@ -41,8 +41,8 @@ const AvatarGroup = /* @__PURE__ */ React.forwardRef(
       maxCount,
       variant,
       spacing,
-      size,
-      orientation,
+      size = "medium",
+      orientation = "right",
       children,
       onClick
     } = _a, others = __objRest(_a, [
@@ -90,10 +90,6 @@ const AvatarGroup = /* @__PURE__ */ React.forwardRef(
   }
 );
 AvatarGroup.displayName = "BuiAvatarGroup";
-AvatarGroup.defaultProps = {
-  size: "medium",
-  orientation: "right"
-};
 var AvatarGroup_default = AvatarGroup;
 export {
   AvatarGroup_default as default

package/es/Badge/Badge.js

@@ -36,10 +36,10 @@ const Badge = /* @__PURE__ */ React.forwardRef((props, ref) => {
     onClick,
     children,
     content,
-    color,
+    color = "primary",
     maxCount,
-    variant,
-    type
+    variant = "contained",
+    type = "standard"
   } = _a, others = __objRest(_a, [
     "className",
     "onClick",
@@ -75,11 +75,6 @@ const Badge = /* @__PURE__ */ React.forwardRef((props, ref) => {
   );
 });
 Badge.displayName = "BuiBadge";
-Badge.defaultProps = {
-  color: "primary",
-  variant: "contained",
-  type: "standard"
-};
 var Badge_default = Badge;
 export {
   Badge_default as default

package/es/Button/Button.css

@@ -1,14 +1,4 @@
 .bui-btn {
-  --bui-btn-font-size: var(--bui-text-size-3);
-  --bui-btn-font-weight: var(--bui-font-weight-medium);
-  --bui-btn-border-radius: 120px;
-  --bui-btn-height: 27px;
-  --bui-btn-color: var(--bui-color-fg-muted);
-  --bui-btn-bg: var(--bui-color-bg-view);
-  --bui-btn-opacity: 1;
-  --bui-btn-padding: 0 14px;
-  --bui-btn-border: 0;
-  --bui-btn-font-family: var(--bui-font-family);
   outline: 0;
   cursor: pointer;
   box-sizing: border-box;

package/es/Button/Button.js

@@ -40,10 +40,10 @@ const Button = /* @__PURE__ */ React.forwardRef(
       children,
       startIcon,
       endIcon,
-      size,
-      variant,
+      size = "medium",
+      variant = "outlined",
       color,
-      disabled
+      disabled = false
     } = _a, others = __objRest(_a, [
       "className",
       "children",
@@ -77,11 +77,6 @@ const Button = /* @__PURE__ */ React.forwardRef(
   }
 );
 Button.displayName = "BuiButton";
-Button.defaultProps = {
-  size: "medium",
-  variant: "outlined",
-  disabled: false
-};
 var Button_default = Button;
 export {
   Button_default as default

package/es/Calendar/Calendar.js

@@ -52,15 +52,15 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       className,
       defaultValue,
       value,
-      minDate,
-      maxDate,
-      mode,
-      hideDaysOutsideCurrentMonth,
-      headerBarFormat,
+      minDate = dayjs(dayjs().format("YYYYMMDD")).add(0, "month").toDate(),
+      maxDate = dayjs(dayjs().format("YYYYMMDD")).add(11, "month").toDate(),
+      mode = "single",
+      hideDaysOutsideCurrentMonth = false,
+      headerBarFormat = "YYYY/MM",
       headerBarLeftIcon,
       headerBarRightIcon,
       disabledDate,
-      highlightDate,
+      highlightDate = "today",
       dateRender,
       weekRender,
       onMonthChange,
@@ -301,14 +301,6 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
   }
 );
 Calendar.displayName = "BuiCalendar";
-Calendar.defaultProps = {
-  hideDaysOutsideCurrentMonth: false,
-  headerBarFormat: "YYYY/MM",
-  mode: "single",
-  minDate: dayjs(dayjs().format("YYYYMMDD")).add(0, "month").toDate(),
-  maxDate: dayjs(dayjs().format("YYYYMMDD")).add(11, "month").toDate(),
-  highlightDate: "today"
-};
 var Calendar_default = Calendar;
 export {
   Calendar_default as default

package/es/Card/Card.css

@@ -1,11 +1,8 @@
 .bui-card {
-  --bui-card-font-family: var(--bui-font-family);
-  --bui-card-font-size: var(--bui-text-size-1);
   background-color: var(--bui-color-bg-view);
   border-radius: var(--bui-shape-radius-card);
   overflow: hidden;
   font-family: var(--bui-card-font-family);
-  font-size: var(--bui-card-font-size);
 }
 .bui-card-header + .bui-card-content {
   padding-top: 0;

package/es/Card/CardContent.css

@@ -1,4 +1,5 @@
 .bui-card-content {
   padding: var(--bui-spacing-lg);
   color: var(--bui-color-fg-muted);
+  font-size: var(--bui-card-font-size);
 }

package/es/Card/CardFooter.css

@@ -3,4 +3,5 @@
   display: flex;
   align-items: center;
   padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  font-size: var(--bui-card-font-size);
 }