@bifrostui/react 1.4.8-beta.0 → 2.0.0-alpha.0

package/es/Badge/{Badge.css → index.css}

@@ -1,14 +1,18 @@
+:root,
+page,
+xhs-page {
+  --bui-badge-position: 14%;
+  --bui-badge-min-width: 15px;
+  --bui-badge-height: 15px;
+  --bui-badge-line-height: 15px;
+  --bui-badge-padding: 0 3px;
+  --bui-badge-border-radius: 8px;
+  --bui-badge-outlined-padding: 0 2px;
+  --bui-badge-dot-size: 9px;
+  --bui-badge-bubble-padding: 0 5px;
+  --bui-badge-bubble-border-radius: 6px 6px 6px 0;
+}
 .bui-badge {
-  --badge-position: var(--bui-badge-position, 14%);
-  --min-width: var(--bui-badge-min-width, 15px);
-  --height: var(--bui-badge-height, 15px);
-  --line-height: var(--bui-badge-line-height, 15px);
-  --padding: var(--bui-badge-padding, 0 3px);
-  --border-radius: var(--bui-badge-border-radius, 8px);
-  --outlined-padding: var(--bui-badge-outlined-padding, 0 2px);
-  --dot-size: var(--bui-badge-dot-size, 9px);
-  --bubble-padding: var(--bui-badge-bubble-padding, 0 5px);
-  --bubble-border-radius: var(--bui-badge-bubble-border-radius, 6px 6px 6px 0);
   display: inline-block;
   font-family: var(--bui-font-family);
 }
@@ -18,18 +22,18 @@
 .bui-badge-position .bui-badge-contained,
 .bui-badge-position .bui-badge-outlined {
   position: absolute;
-  top: var(--badge-position);
-  right: var(--badge-position);
+  top: var(--bui-badge-position);
+  right: var(--bui-badge-position);
   transform: scale(1) translate(50%, -50%);
 }
 .bui-badge-position .bui-badge-dot {
-  top: var(--badge-position);
-  right: var(--badge-position);
+  top: var(--bui-badge-position);
+  right: var(--bui-badge-position);
   transform: scale(1) translate(50%, -50%);
 }
 .bui-badge-position .bui-badge-bubble {
-  top: var(--badge-position);
-  right: var(--badge-position);
+  top: var(--bui-badge-position);
+  right: var(--bui-badge-position);
   transform: scale(1) translate(50%, -50%);
 }
 .bui-badge-contained,
@@ -38,18 +42,18 @@
   box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  min-width: var(--min-width);
-  height: var(--height);
-  line-height: var(--line-height);
-  padding: var(--padding);
+  min-width: var(--bui-badge-min-width);
+  height: var(--bui-badge-height);
+  line-height: var(--bui-badge-line-height);
+  padding: var(--bui-badge-padding);
   font-size: var(--bui-text-size-4);
-  border-radius: var(--border-radius);
+  border-radius: var(--bui-badge-border-radius);
   color: var(--bui-color-bg-view);
   white-space: nowrap;
   z-index: 1;
 }
 .bui-badge-outlined {
-  padding: var(--outlined-padding);
+  padding: var(--bui-badge-outlined-padding);
 }
 .bui-badge-primary {
   background-color: var(--bui-color-primary);
@@ -66,16 +70,23 @@
 .bui-badge-danger {
   background-color: var(--bui-color-danger);
 }
+.bui-badge-light {
+  color: var(--bui-color-fg-default);
+  background-color: var(--bui-color-bg-view);
+}
+.bui-badge-dark {
+  background-color: var(--bui-color-fg-default);
+}
 .bui-badge-dot {
-  width: var(--dot-size);
+  width: var(--bui-badge-dot-size);
   min-width: 0;
-  height: var(--dot-size);
+  height: var(--bui-badge-dot-size);
   padding: 0;
   border-radius: 100%;
 }
 .bui-badge-bubble {
-  border-radius: var(--bubble-border-radius);
-  padding: var(--bubble-padding);
+  border-radius: var(--bui-badge-bubble-border-radius);
+  padding: var(--bui-badge-bubble-padding);
 }
 .bui-badge-outlined {
   background: var(--bui-color-bg-view);
@@ -100,6 +111,15 @@
   border: 1px solid var(--bui-color-danger);
   color: var(--bui-color-danger);
 }
+.bui-badge-outlined.bui-badge-light {
+  background: var(--bui-color-bg-default);
+  border: 1px solid var(--bui-color-bg-view);
+  color: var(--bui-color-bg-view);
+}
+.bui-badge-outlined.bui-badge-dark {
+  border: 1px solid var(--bui-color-fg-default);
+  color: var(--bui-color-fg-default);
+}
 .bui-badge-outlined.bui-badge-bubble {
-  border-radius: var(--bubble-border-radius);
+  border-radius: var(--bui-badge-bubble-border-radius);
 }

package/es/Breadcrumb/Breadcrumb.d.ts

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

package/es/Breadcrumb/Breadcrumb.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
 import React from "react";
 import clsx from "clsx";
 import BreadcrumbItem from "./BreadcrumbItem";
-import "./Breadcrumb.css";
+import "./index.css";
 const prefixCls = "bui-breadcrumb";
 const Breadcrumb = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {

package/es/Breadcrumb/index.css

@@ -0,0 +1,38 @@
+:root,
+page,
+xhs-page {
+  --bui-breadcrumb-margin: 0;
+  --bui-breadcrumb-padding: 0;
+  --bui-breadcrumb-color: rgba(0, 0, 0, 0.45);
+  --bui-breadcrumb-item-separator-margin: 0 8px;
+  --bui-breadcrumb-last-item-color: rgba(0, 0, 0, 0.88);
+}
+.bui-breadcrumb {
+  margin: var(--bui-breadcrumb-margin);
+  padding: var(--bui-breadcrumb-padding);
+  color: var(--bui-breadcrumb-color);
+  list-style: none;
+  font-size: var(--bui-text-size-1);
+  line-height: var(--bui-line-height);
+}
+.bui-breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: var(--bui-breadcrumb-margin);
+  padding: var(--bui-breadcrumb-padding);
+  list-style: none;
+}
+.bui-breadcrumb-list a {
+  color: var(--bui-breadcrumb-color);
+  text-decoration: none;
+  cursor: pointer;
+}
+.bui-breadcrumb-list li:last-child {
+  color: var(--bui-breadcrumb-last-item-color);
+}
+.bui-breadcrumb-item {
+  cursor: pointer;
+}
+.bui-breadcrumb-item-separator {
+  margin: var(--bui-breadcrumb-item-separator-margin);
+}

package/es/Button/Button.d.ts

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

package/es/Button/Button.js

@@ -28,7 +28,7 @@ var __objRest = (source, exclude) => {
 };
 import clsx from "clsx";
 import React from "react";
-import "./Button.css";
+import "./index.css";
 const prefixCls = "bui-btn";
 const ButtonIcon = ({ children, iconPosition }) => {
   return /* @__PURE__ */ React.createElement("span", { className: `${prefixCls}-icon-${iconPosition}` }, children);
@@ -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",
@@ -68,7 +68,8 @@ const Button = /* @__PURE__ */ React.forwardRef(
           },
           className
         ),
-        ref
+        ref,
+        disabled
       }, others),
       startIcon && /* @__PURE__ */ React.createElement(ButtonIcon, { iconPosition: "start" }, startIcon),
       children,
@@ -77,12 +78,6 @@ const Button = /* @__PURE__ */ React.forwardRef(
   }
 );
 Button.displayName = "BuiButton";
-Button.defaultProps = {
-  size: "medium",
-  variant: "outlined",
-  color: "default",
-  disabled: false
-};
 var Button_default = Button;
 export {
   Button_default as default

package/es/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/Button/Button.css → es/Button/index.css}

@@ -1,27 +1,31 @@
+:root,
+page,
+xhs-page {
+  --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-small-border-radius: 120px;
+  --bui-btn-large-border-radius: 120px;
+  --bui-btn-full-border-radius: 120px;
+  --bui-btn-color: var(--bui-color-fg-muted);
+  --bui-btn-background: var(--bui-color-bg-view);
+  --bui-btn-border: 0;
+  --bui-btn-height: 27px;
+  --bui-btn-small-height: 24px;
+  --bui-btn-large-height: 33px;
+  --bui-btn-full-height: 42px;
+  --bui-btn-subtle-border: 0;
+  --bui-btn-outlined-border: 1px solid var(--bui-color-neutral-4);
+  --bui-btn-disabled-opacity: 0.5;
+  --bui-btn-small-padding: 0 11px;
+  --bui-btn-padding: 0 14px;
+  --bui-btn-large-padding: 0 14px;
+  --bui-btn-full-font-size: var(--bui-title-size-4);
+  --bui-btn-full-font-family: var(--bui-font-family);
+}
 .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);
   outline: 0;
-  background-color: transparent;
   cursor: pointer;
-  color: var(--text-color);
   box-sizing: border-box;
   position: relative;
   display: inline-flex;
@@ -29,10 +33,14 @@
   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-background);
+  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);
 }
@@ -68,36 +76,39 @@
   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);
+  opacity: var(--bui-btn-disabled-opacity);
 }
 .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);
+  padding: var(--bui-btn-small-padding);
+  height: var(--bui-btn-small-height);
+  border-radius: var(--bui-btn-small-border-radius);
 }
 .bui-btn-large {
   font-size: var(--bui-text-size-2);
-  padding: var(--large-padding);
-  height: var(--large-height);
+  padding: var(--bui-btn-large-padding);
+  height: var(--bui-btn-large-height);
+  border-radius: var(--bui-btn-large-border-radius);
 }
 .bui-btn-full {
-  font-size: var(--full-font-size);
+  font-family: var(--bui-btn-full-font-family);
+  font-size: var(--bui-btn-full-font-size);
   width: 100%;
-  height: var(--full-height);
+  height: var(--bui-btn-full-height);
+  border-radius: var(--bui-btn-full-border-radius);
+}
+.bui-btn-text {
+  background: none;
 }
 .bui-btn-text.bui-btn-primary {
   color: var(--bui-color-primary);
@@ -114,11 +125,17 @@
 .bui-btn-text.bui-btn-danger {
   color: var(--bui-color-danger);
 }
+.bui-btn-text.bui-btn-light {
+  color: var(--bui-color-bg-view);
+}
+.bui-btn-text.bui-btn-dark {
+  color: var(--bui-color-fg-default);
+}
 .bui-btn-text.bui-btn-vip {
   color: var(--bui-color-vip);
 }
 .bui-btn-contained {
-  background-color: var(--bg-color);
+  background: var(--bui-color-neutral-5);
 }
 .bui-btn-contained.bui-btn-primary {
   color: var(--bui-color-white);
@@ -160,6 +177,14 @@
       var(--bui-color-danger-start) 0%,
       var(--bui-color-danger-end) 100%);
 }
+.bui-btn-contained.bui-btn-light {
+  color: var(--bui-color-fg-default);
+  background: var(--bui-color-bg-view);
+}
+.bui-btn-contained.bui-btn-dark {
+  color: var(--bui-color-bg-view);
+  background: var(--bui-color-fg-default);
+}
 .bui-btn-contained.bui-btn-vip {
   color: #582331;
   background-image:
@@ -169,7 +194,8 @@
       var(--bui-color-vip-end) 100%);
 }
 .bui-btn-outlined {
-  border: var(--outlined-default-border);
+  background: none;
+  border: var(--bui-btn-outlined-border);
 }
 .bui-btn-outlined.bui-btn-primary {
   color: var(--bui-color-primary);
@@ -191,46 +217,50 @@
   color: var(--bui-color-danger);
   border-color: var(--bui-color-danger);
 }
+.bui-btn-outlined.bui-btn-light {
+  color: var(--bui-color-bg-view);
+  border: 1px solid var(--bui-color-bg-view);
+}
+.bui-btn-outlined.bui-btn-dark {
+  color: var(--bui-color-fg-default);
+  border: 1px solid 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 {
+.bui-btn-subtle {
   background-image: none;
   background-color: var(--bui-color-gray-light);
-  border: var(--light-border);
+  border: var(--bui-btn-subtle-border);
 }
-.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-subtle.bui-btn-light {
+  color: var(--bui-color-bg-view);
+}
+.bui-btn-subtle.bui-btn-dark {
+  color: var(--bui-color-fg-default);
 }
-.bui-btn-light.bui-btn-vip {
+.bui-btn-subtle.bui-btn-vip {
   color: var(--bui-color-vip);
   position: relative;
   background-color: rgba(255, 134, 110, 0.3);

package/es/Calendar/Calendar.d.ts

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

package/es/Calendar/Calendar.js

@@ -34,13 +34,11 @@ import { useDidMountEffect, useValue } from "@bifrostui/utils";
 import clsx from "clsx";
 import dayjs from "dayjs";
 import isoWeek from "dayjs/plugin/isoWeek";
-import customParseFormat from "dayjs/plugin/customParseFormat";
 import React, { useMemo, useState } from "react";
 import { formatDate, isRange, isSame } from "./utils";
 import { useLocaleText } from "../locales";
-import "./Calendar.css";
+import "./index.css";
 dayjs.extend(isoWeek);
-dayjs.extend(customParseFormat);
 const classes = {
   root: "bui-calendar",
   handler: "bui-calendar-handler",
@@ -54,16 +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,
-      headerVisible = false,
+      highlightDate = "today",
       dateRender,
       weekRender,
       onMonthChange,
@@ -81,7 +78,6 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       "headerBarRightIcon",
       "disabledDate",
       "highlightDate",
-      "headerVisible",
       "dateRender",
       "weekRender",
       "onMonthChange",
@@ -127,14 +123,14 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
         CaretLeftIcon,
         {
           className: `${classes.handler}-btn-icon`,
-          htmlColor: isMinMonth && "#cccccc"
+          htmlColor: isMinMonth && "var(--bui-color-fg-disabled)"
         }
       ),
       right: headerBarRightIcon ? headerBarRightIcon({ isMaxMonth }) : /* @__PURE__ */ React.createElement(
         CaretRightIcon,
         {
           className: `${classes.handler}-btn-icon`,
-          htmlColor: isMaxMonth && "#cccccc"
+          htmlColor: isMaxMonth && "var(--bui-color-fg-disabled)"
         }
       )
     };
@@ -296,7 +292,7 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       }, others), {
         "data-mode": mode
       }), data),
-      !headerVisible && /* @__PURE__ */ React.createElement("div", { className: classes.handler }, /* @__PURE__ */ React.createElement("div", { onClick: onClickPrev, className: `${classes.handler}-btn` }, headerBarIcon.left), /* @__PURE__ */ React.createElement("div", { className: `${classes.handler}-text` }, dayjs(renderMonth).format(headerBarFormat)), /* @__PURE__ */ React.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, headerBarIcon.right)),
+      /* @__PURE__ */ React.createElement("div", { className: classes.handler }, /* @__PURE__ */ React.createElement("div", { onClick: onClickPrev, className: `${classes.handler}-btn` }, headerBarIcon.left), /* @__PURE__ */ React.createElement("div", { className: `${classes.handler}-text` }, dayjs(renderMonth).format(headerBarFormat)), /* @__PURE__ */ React.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, headerBarIcon.right)),
       /* @__PURE__ */ React.createElement("div", { className: classes.week }, SUNDAY_WEEK_DATA == null ? void 0 : SUNDAY_WEEK_DATA.map((w) => {
         return weekRender ? weekRender(w) : /* @__PURE__ */ React.createElement("div", { key: w, className: `${classes.week}-item` }, w);
       })),
@@ -305,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/Calendar/Calendar.types.d.ts

@@ -74,11 +74,6 @@ export type CalendarProps<D extends React.ElementType = 'div', P = {}> = Overrid
          * weekend 可选的周末高亮显示
          */
         highlightDate?: 'today' | 'weekend';
-        /**
-         * 是否隐藏头部
-         * default: false
-         */
-        headerVisible?: boolean;
         /**
          * 自定义日期单元格的内容
          */