@bifrostui/react 1.4.4 → 1.4.5-beta.1

package/dist/ActionSheet/ActionSheet.css

@@ -1,7 +1,7 @@
 .bui-action-sheet {
   --extra-line-height: var(--bui-action-sheet-extra-line-height, 23px);
   --extra-padding: var(--bui-action-sheet-extra-padding, var(--bui-spacing-xl));
-  --extra-magin: var(--bui-action-sheet-extra-magin, 0 var(--bui-spacing-xl));
+  --extra-margin: var(--bui-action-sheet-extra-margin, 0 var(--bui-spacing-xl));
   font-family: var(--bui-font-family);
 }
 .bui-action-sheet-content {
@@ -26,5 +26,5 @@
   background: var(--bui-color-bg-view);
   text-align: center;
   border-bottom: 1px solid var(--bui-color-border-default);
-  margin: var(--extra-magin);
+  margin: var(--extra-margin);
 }

package/dist/Button/Button.css

@@ -1,27 +1,16 @@
 .bui-btn {
-  --border-radius: var(--bui-button-border-radius, 100px);
-  --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
-  --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
-  --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
-  --height: var(--bui-button-height, 27px);
-  --icon-start-margin-right: var(--bui-button-icon-start-margin-right, var(--bui-spacing-xs));
-  --icon-start-margin-left: var(--bui-button-icon-start-margin-left, var(--bui-spacing-xs));
-  --default-border: var(--bui-button-default-border, 1px solid transparent);
-  --light-border: var(--bui-button-light-border, 1px solid transparent);
-  --outlined-default-border: var(--bui-button-outlined-default-border, 1px solid var(--bui-color-neutral-4));
-  --disabled-opacity: var(--bui-button-disabled-opacity, 0.5);
-  --small-padding: var(--bui-button-small-padding, 0 11px);
-  --small-height: var(--bui-button-small-height, 24px);
-  --medium-padding: var(--bui-button-medium-padding, 0 14px);
-  --large-padding: var(--bui-button-large-padding, 0 14px);
-  --large-height: var(--bui-button-large-height, 33px);
-  --full-font-size: var(--bui-button-full-font-size, var(--bui-title-size-4));
-  --full-height: var(--bui-button-full-height, 42px);
-  border: var(--default-border);
+  --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;
-  background-color: transparent;
   cursor: pointer;
-  color: var(--text-color);
   box-sizing: border-box;
   position: relative;
   display: inline-flex;
@@ -29,12 +18,17 @@
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  font-size: var(--bui-text-size-3);
-  font-weight: var(--bui-font-weight-medium);
-  border-radius: var(--border-radius);
-  height: var(--height);
+  color: var(--bui-btn-color);
+  background: var(--bui-btn-bg);
+  font-size: var(--bui-btn-font-size);
+  font-weight: var(--bui-btn-font-weight);
+  border: var(--bui-btn-border);
+  border-radius: var(--bui-btn-border-radius);
+  height: var(--bui-btn-height);
+  padding: var(--bui-btn-padding);
   line-height: var(--bui-line-height);
-  font-family: var(--bui-font-family);
+  font-family: var(--bui-btn-font-family);
+  opacity: var(--bui-btn-opacity);
 }
 @keyframes spin {
   from {
@@ -68,57 +62,61 @@
   display: inline-flex;
   align-self: center;
   flex-shrink: 0;
-  margin-right: var(--icon-start-margin-right);
+  margin-right: var(--bui-spacing-xs);
 }
 .bui-btn-icon-end {
   display: inline-flex;
   align-self: center;
   flex-shrink: 0;
-  margin-left: var(--icon-start-margin-left);
+  margin-left: var(--bui-spacing-xs);
 }
 .bui-btn-disabled {
   pointer-events: none;
-  opacity: var(--disabled-opacity);
+  --bui-btn-opacity: 0.5;
 }
 .bui-btn-small {
-  font-size: var(--bui-text-size-4);
-  padding: var(--small-padding);
-  height: var(--small-height);
-}
-.bui-btn-medium {
-  padding: var(--medium-padding);
-  height: var(--height);
+  --bui-btn-height: 24px;
+  --bui-btn-font-size: var(--bui-text-size-4);
+  --bui-btn-padding: 0 11px;
 }
 .bui-btn-large {
-  font-size: var(--bui-text-size-2);
-  padding: var(--large-padding);
-  height: var(--large-height);
+  --bui-btn-height: 33px;
+  --bui-btn-font-size: var(--bui-text-size-2);
 }
 .bui-btn-full {
-  font-size: var(--full-font-size);
+  --bui-btn-height: 42px;
+  --bui-btn-font-size: var(--bui-title-size-4);
   width: 100%;
-  height: var(--full-height);
+}
+.bui-btn-text {
+  --bui-btn-bg: none;
 }
 .bui-btn-text.bui-btn-primary {
-  color: var(--bui-color-primary);
+  --bui-btn-color: var(--bui-color-primary);
 }
 .bui-btn-text.bui-btn-success {
-  color: var(--bui-color-success);
+  --bui-btn-color: var(--bui-color-success);
 }
 .bui-btn-text.bui-btn-info {
-  color: var(--bui-color-info);
+  --bui-btn-color: var(--bui-color-info);
 }
 .bui-btn-text.bui-btn-warning {
-  color: var(--bui-color-warning);
+  --bui-btn-color: var(--bui-color-warning);
 }
 .bui-btn-text.bui-btn-danger {
-  color: var(--bui-color-danger);
+  --bui-btn-color: var(--bui-color-danger);
+}
+.bui-btn-text.bui-btn-light {
+  --bui-btn-color: var(--bui-color-bg-view);
+}
+.bui-btn-text.bui-btn-dark {
+  --bui-btn-color: var(--bui-color-fg-default);
 }
 .bui-btn-text.bui-btn-vip {
-  color: var(--bui-color-vip);
+  --bui-btn-color: var(--bui-color-vip);
 }
 .bui-btn-contained {
-  background-color: var(--bg-color);
+  --bui-btn-bg: var(--bui-color-neutral-5);
 }
 .bui-btn-contained.bui-btn-primary {
   color: var(--bui-color-white);
@@ -160,16 +158,25 @@
       var(--bui-color-danger-start) 0%,
       var(--bui-color-danger-end) 100%);
 }
+.bui-btn-contained.bui-btn-light {
+  --bui-btn-color: var(--bui-color-fg-default);
+  --bui-btn-bg: var(--bui-color-bg-view);
+}
+.bui-btn-contained.bui-btn-dark {
+  --bui-btn-color: var(--bui-color-bg-view);
+  --bui-btn-bg: var(--bui-color-fg-default);
+}
 .bui-btn-contained.bui-btn-vip {
-  color: #582331;
-  background-image:
+  --bui-btn-color: #582331;
+  --bui-btn-bg:
     linear-gradient(
       90deg,
       var(--bui-color-vip-start) 3%,
       var(--bui-color-vip-end) 100%);
 }
 .bui-btn-outlined {
-  border: var(--outlined-default-border);
+  --bui-btn-bg: transparent;
+  --bui-btn-border: 1px solid var(--bui-color-neutral-4);
 }
 .bui-btn-outlined.bui-btn-primary {
   color: var(--bui-color-primary);
@@ -191,47 +198,49 @@
   color: var(--bui-color-danger);
   border-color: var(--bui-color-danger);
 }
+.bui-btn-outlined.bui-btn-light {
+  --bui-btn-color: var(--bui-color-bg-view);
+  --bui-btn-border: solid 1px var(--bui-color-bg-view);
+}
+.bui-btn-outlined.bui-btn-dark {
+  --bui-btn-color: var(--bui-color-fg-default);
+  --bui-btn-border: solid 1px var(--bui-color-fg-default);
+}
 .bui-btn-outlined.bui-btn-vip {
   color: var(--bui-color-vip);
   border-color: var(--bui-color-vip);
 }
-.bui-btn-light {
-  background-image: none;
-  background-color: var(--bui-color-gray-light);
-  border: var(--light-border);
+.bui-btn-subtle {
+  --bui-btn-bg: var(--bui-color-gray-light);
 }
-.bui-btn-light.bui-btn-warning {
-  background-image: none;
-  border: var(--light-border);
+.bui-btn-subtle.bui-btn-warning {
   color: var(--bui-color-warning);
-  background-color: var(--bui-color-warning-light);
+  background: var(--bui-color-warning-light);
 }
-.bui-btn-light.bui-btn-primary {
-  background-image: none;
-  border: var(--light-border);
+.bui-btn-subtle.bui-btn-primary {
   color: var(--bui-color-primary);
-  background-color: var(--bui-color-primary-light);
+  background: var(--bui-color-primary-light);
 }
-.bui-btn-light.bui-btn-info {
-  background-image: none;
-  border: var(--light-border);
+.bui-btn-subtle.bui-btn-info {
   color: var(--bui-color-info);
-  background-color: var(--bui-color-info-light);
+  background: var(--bui-color-info-light);
 }
-.bui-btn-light.bui-btn-success {
-  background-image: none;
-  border: var(--light-border);
+.bui-btn-subtle.bui-btn-success {
   color: var(--bui-color-success);
-  background-color: var(--bui-color-success-light);
+  background: var(--bui-color-success-light);
 }
-.bui-btn-light.bui-btn-danger {
-  background-image: none;
-  border: var(--light-border);
+.bui-btn-subtle.bui-btn-danger {
   color: var(--bui-color-danger);
-  background-color: var(--bui-color-danger-light);
+  background: var(--bui-color-danger-light);
 }
-.bui-btn-light.bui-btn-vip {
-  color: var(--bui-color-vip);
+.bui-btn-subtle.bui-btn-light {
+  --bui-btn-color: var(--bui-color-bg-view);
+}
+.bui-btn-subtle.bui-btn-dark {
+  --bui-btn-color: var(--bui-color-fg-default);
+}
+.bui-btn-subtle.bui-btn-vip {
   position: relative;
-  background-color: rgba(255, 134, 110, 0.3);
+  --bui-btn-color: var(--bui-color-vip);
+  --bui-btn-bg: rgba(255, 134, 110, 0.3);
 }

package/dist/Button/Button.d.ts

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

package/dist/Button/Button.js

@@ -58,7 +58,7 @@ __export(Button_exports, {
 module.exports = __toCommonJS(Button_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Button = require("./Button.css");
+var import_Button2 = require("./Button.css");
 const prefixCls = "bui-btn";
 const ButtonIcon = ({ children, iconPosition }) => {
   return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-icon-${iconPosition}` }, children);
@@ -110,7 +110,6 @@ Button.displayName = "BuiButton";
 Button.defaultProps = {
   size: "medium",
   variant: "outlined",
-  color: "default",
   disabled: false
 };
 var Button_default = Button;

package/dist/Button/Button.types.d.ts

@@ -16,19 +16,20 @@ export type ButtonProps<D extends React.ElementType = 'button', P = {}> = Overri
          * @default 'medium'
          */
         size?: 'small' | 'medium' | 'large' | 'full';
-        /** 按钮颜色
-         * @default 'default'
+        /**
+         * 按钮颜色
+         * @default 'neutral'
          */
-        color?: ThemeColor | 'default' | 'vip';
+        color?: ThemeColor | 'vip';
         /**
          * 按钮类型
          * - text: 文字按钮
-         * - outlined: 描边按钮
-         * - contained: 实心填充按钮
-         * - light: 浅亮填充按钮
+         * - outlined: 线框按钮
+         * - contained: 填充按钮
+         * - subtle: 柔和按钮
          * @default 'outlined'
          */
-        variant?: 'outlined' | 'text' | 'contained' | 'light';
+        variant?: 'outlined' | 'text' | 'contained' | 'subtle';
         /**
          * 在子元素前放在的内容
          */

package/dist/Card/Card.css

@@ -1,8 +1,11 @@
 .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-font-family);
+  font-family: var(--bui-card-font-family);
+  font-size: var(--bui-card-font-size);
 }
 .bui-card-header + .bui-card-content {
   padding-top: 0;

package/dist/Card/CardContent.css

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

package/dist/Card/CardFooter.css

@@ -1,9 +1,6 @@
 .bui-card-footer {
-  --padding: var(--bui-card-footer-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
   color: var(--bui-color-fg-muted);
-  font-size: var(--bui-text-size-1);
   display: flex;
   align-items: center;
-  padding: var(--padding);
-  font-family: var(--bui-font-family);
+  padding: var(--bui-spacing-md) var(--bui-spacing-lg);
 }

package/dist/Card/CardHeader.css

@@ -1,15 +1,13 @@
 .bui-card-header {
-  --padding: var(--bui-card-header-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
-  --end-icon-margin-left: var(--bui-card-header-end-icon-margin-left, 2px);
+  --bui-card-font-size: var(--bui-title-size-4);
   display: flex;
   align-items: center;
   flex-direction: row;
   position: relative;
   padding: var(--bui-spacing-md) var(--bui-spacing-lg);
-  font-size: var(--bui-title-size-4);
-  font-weight: var(--bui-font-weight-medium);
+  font-weight: var(--bui-font-weight-bold);
+  font-family: var(--bui-card-font-family);
   color: var(--bui-color-fg-default);
-  font-family: var(--bui-font-family);
 }
 .bui-card-header-title {
   white-space: nowrap;

package/dist/Modal/Modal.miniapp.d.ts

@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     keepMounted?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, "open" | keyof import("@bifrostui/types").ICommonProps | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/Popover/Popover.css

@@ -1,6 +1,6 @@
 .bui-popover {
   --arrow-size: var(--bui-popover-arrow-size, 8PX);
-  --localtion-position: var(--bui-popover-localtion-position, 8PX);
+  --location-position: var(--bui-popover-location-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);
@@ -16,16 +16,16 @@
   position: absolute;
 }
 .bui-popover .bui-popover-arrow.location-left {
-  left: var(--localtion-position);
+  left: var(--location-position);
 }
 .bui-popover .bui-popover-arrow.location-right {
-  right: var(--localtion-position);
+  right: var(--location-position);
 }
 .bui-popover .bui-popover-arrow.location-top {
-  top: var(--localtion-position);
+  top: var(--location-position);
 }
 .bui-popover .bui-popover-arrow.location-bottom {
-  bottom: var(--localtion-position);
+  bottom: var(--location-position);
 }
 .bui-popover.popover-top .location-center,
 .bui-popover.popover-bottom .location-center {

package/dist/Radio/Radio.css

@@ -1,7 +1,6 @@
 .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;

package/dist/Tabs/Tab.css

@@ -4,31 +4,28 @@
   justify-content: center;
   white-space: nowrap;
   width: min-content;
-  height: var(--tab-height);
+  height: 100%;
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  font-size: var(--font-size);
+  font-size: var(--bui-tabs-font-size);
   line-height: var(--bui-line-height);
-  color: var(--color);
-  padding: var(--tab-padding);
-  font-family: var(--bui-font-family);
+  color: var(--bui-tabs-color);
+  padding: var(--bui-tab-padding);
+  font-family: var(--bui-tabs-font-family);
 }
 .bui-tab-active {
-  font-size: var(--font-size);
   line-height: var(--bui-line-height);
-  font-weight: var(--bui-font-weight-medium);
-  color: var(--active-color);
+  --bui-tabs-color: var(--bui-color-fg-default);
 }
 .bui-tab-center {
   flex: 1 0 0;
   margin: 0 auto;
 }
 .bui-tab-miniapp-active {
-  font-size: var(--font-size);
   line-height: 1.5;
   font-weight: var(--bui-font-weight-medium);
-  color: var(--active-color);
+  --bui-tabs-color: var(--bui-color-fg-default);
   position: relative;
 }
 .bui-tab-miniapp-active-line {
@@ -46,7 +43,7 @@
   opacity: 0.5;
   pointer-events: none;
 }
-.bui-tabline-invisible {
+.bui-indicator-invisible {
   visibility: hidden;
   background-color: transparent;
 }

package/dist/Tabs/Tab.js

@@ -65,8 +65,11 @@ 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 = props, { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
+  const _a = __spreadValues(__spreadValues({}, defaultProps), props), { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
   const tabsContext = import_react.default.useContext(import_TabsContext.default);
   const { value, align, triggerChange } = tabsContext;
   return /* @__PURE__ */ import_react.default.createElement(
@@ -97,14 +100,11 @@ const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       "div",
       {
         className: (0, import_clsx.default)(`${prefixCls}-miniapp-active-line`, {
-          "bui-tabline-invisible": index !== value
+          "bui-indicator-invisible": index !== value
         })
       }
     )
   );
 });
 Tab.displayName = "BuiTab";
-Tab.defaultProps = {
-  disabled: false
-};
 var Tab_default = Tab;

package/dist/Tabs/Tabs.css

@@ -1,39 +1,44 @@
 .bui-tabs {
-  --height: var(--bui-tabs-height, 39px);
-  --color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
-  --active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
-  --line-color: var(--bui-tabs-line-color, var(--bui-color-primary));
-  --line-height: var(--bui-tabs-line-height, 3PX);
-  --line-width: var(--bui-tabs-line-width, 18px);
-  --mask-width: var(--bui-tabs-mask-width, 12px);
-  --mask-height: var(--bui-tabs-mask-height, 100%);
-  --tab-height: var(--bui-tab-height, 100%);
-  --tab-padding: var(--bui-tab-padding, var(--bui-spacing-lg) var(--bui-spacing-lg) 10px);
-  --font-size: var(--bui-tab-font-size, var(--bui-text-size-1));
+  --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-font-family);
+  font-family: var(--bui-tabs-font-family);
 }
 .bui-tabs-tabs {
-  height: var(--height);
+  height: var(--bui-tabs-height);
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
   align-items: center;
   position: relative;
   overflow-x: scroll;
+  font-weight: var(--bui-tabs-font-weight);
   scrollbar-width: none;
 }
 .bui-tabs-tabs::-webkit-scrollbar {
   display: none;
 }
-.bui-tabs-tabline {
+.bui-tabs-indicator {
   position: absolute;
-  width: var(--line-width);
-  bottom: 0;
-  height: var(--line-height);
+  width: var(--bui-tabs-indicator-width);
+  bottom: var(--bui-tabs-indicator-bottom);
+  height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
-  background: var(--line-color);
-  border-radius: var(--bui-shape-radius-label);
+  background: var(--bui-tabs-indicator-bg);
+  border-radius: var(--bui-tabs-indicator-border-radius);
+  box-shadow: var(--bui-tabs-indicator-box-shadow);
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -43,8 +48,8 @@
   top: 0;
   bottom: 0;
   z-index: 1;
-  width: var(--mask-width);
-  height: var(--mask-height);
+  width: var(--bui-tabs-mask-width);
+  height: var(--bui-tabs-mask-height);
   pointer-events: none;
 }
 .bui-tabs-mask-left {
@@ -63,7 +68,7 @@
       var(--bui-color-bg-view),
       rgba(255, 255, 255, 0));
 }
-.bui-tabline-invisible {
+.bui-indicator-invisible {
   visibility: hidden;
   background-color: transparent;
 }