@bifrostui/react 1.3.2 → 1.4.0-beta.1

package/es/Breadcrumb/Breadcrumb.css

@@ -0,0 +1,34 @@
+.bui-breadcrumb {
+  --margin: var(--bui-breadcrumb-margin, 0);
+  --padding: var(--bui-breadcrumb-padding, 0);
+  --color: var(--bui-breadcrumb-color, rgba(0, 0, 0, 0.45));
+  --item-separator-margin: var(--bui-breadcrumb-item-separator-margin, 0 8px);
+  --list-li-color: var(--bui-breadcrumb-list-li-color, rgba(0, 0, 0, 0.88));
+  margin: var(--margin);
+  padding: var(--padding);
+  color: var(--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(--margin);
+  padding: var(--padding);
+  list-style: none;
+}
+.bui-breadcrumb-list a {
+  color: var(--color);
+  text-decoration: none;
+  cursor: pointer;
+}
+.bui-breadcrumb-list li:last-child {
+  color: var(--list-li-color);
+}
+.bui-breadcrumb-item {
+  cursor: pointer;
+}
+.bui-breadcrumb-item-separator {
+  margin: var(--item-separator-margin);
+}

package/es/Breadcrumb/Breadcrumb.d.ts

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

package/es/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,101 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React from "react";
+import clsx from "clsx";
+import BreadcrumbItem from "./BreadcrumbItem";
+import "./Breadcrumb.css";
+const prefixCls = "bui-breadcrumb";
+const Breadcrumb = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, {
+      className,
+      style,
+      items,
+      separator = "/",
+      children
+    } = _a, others = __objRest(_a, [
+      "className",
+      "style",
+      "items",
+      "separator",
+      "children"
+    ]);
+    const renderList = () => {
+      if (items && items.length > 0) {
+        return items.map((item, index) => {
+          const _a2 = item, { title } = _a2, otherItemProps = __objRest(_a2, ["title"]);
+          const isLast = index === items.length - 1;
+          return /* @__PURE__ */ React.createElement(
+            BreadcrumbItem,
+            __spreadValues({
+              key: index,
+              separator: isLast ? "" : separator
+            }, otherItemProps),
+            title
+          );
+        });
+      }
+      if (children) {
+        const childrenLength = React.Children.count(children);
+        const enhancedChildren = React.Children.map(
+          children,
+          (child, index) => {
+            if (React.isValidElement(child)) {
+              const itemSeparator = child.props.separator || separator;
+              const newProps = {
+                separator: index === childrenLength - 1 ? "" : itemSeparator
+              };
+              return React.cloneElement(child, newProps);
+            }
+            return child;
+          }
+        );
+        return enhancedChildren;
+      }
+      return null;
+    };
+    if (items == null && children == null) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(
+      "nav",
+      __spreadValues({
+        className: clsx(prefixCls, className),
+        style,
+        ref
+      }, others),
+      /* @__PURE__ */ React.createElement("ol", { className: `${prefixCls}-list` }, renderList())
+    );
+  }
+);
+Breadcrumb.displayName = "BuiBreadcrumb";
+var Breadcrumb_default = Breadcrumb;
+export {
+  Breadcrumb_default as default
+};

package/es/Breadcrumb/Breadcrumb.types.d.ts

@@ -0,0 +1,49 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+export type BreadcrumbItemProps<D extends React.ElementType = 'li', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 分隔符自定义
+         */
+        separator?: React.ReactNode;
+        /**
+         * body 区域内容
+         */
+        children?: React.ReactNode;
+        /**
+         * 点击事件
+         */
+        onClick?: (e: React.SyntheticEvent) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export type BreadcrumbProps<D extends React.ElementType = 'nav', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 路由栈信息
+         */
+        items?: Array<{
+            /**
+             * 名称
+             */
+            title?: string;
+            /**
+             * 分隔符自定义
+             */
+            separator?: React.ReactNode;
+            /**
+             * 点击事件
+             */
+            onClick?: (e: React.SyntheticEvent) => void;
+        }>;
+        /**
+         * 分隔符自定义
+         */
+        separator?: React.ReactNode;
+        /**
+         * body 区域内容，使用 CollapseItem 进行渲染
+         */
+        children?: React.ReactNode;
+    };
+    defaultComponent: D;
+}, D>;

package/es/Breadcrumb/Breadcrumb.types.js

@@ -0,0 +1 @@
+export {};

package/es/Breadcrumb/BreadcrumbItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BreadcrumbItemProps } from './Breadcrumb.types';
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<BreadcrumbItemProps<"li", {}>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export default BreadcrumbItem;

package/es/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,51 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React from "react";
+import clsx from "clsx";
+const prefixCls = "bui-breadcrumb-item";
+const BreadcrumbItem = /* @__PURE__ */ React.forwardRef(
+  (props, ref) => {
+    const _a = props, { className, style, separator, children, onClick } = _a, others = __objRest(_a, ["className", "style", "separator", "children", "onClick"]);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "li",
+      __spreadValues({
+        className: clsx(`${prefixCls}`, className),
+        style,
+        ref,
+        onClick
+      }, others),
+      children
+    ), separator && /* @__PURE__ */ React.createElement("li", { className: `${prefixCls}-separator` }, separator));
+  }
+);
+BreadcrumbItem.displayName = "BuiBreadcrumbItem";
+var BreadcrumbItem_default = BreadcrumbItem;
+export {
+  BreadcrumbItem_default as default
+};

package/es/Breadcrumb/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Breadcrumb';
+export { default as Breadcrumb } from './Breadcrumb';
+export { default as BreadcrumbItem } from './BreadcrumbItem';
+export * from './Breadcrumb.types';

package/es/Breadcrumb/index.js

@@ -0,0 +1,9 @@
+import { default as default2 } from "./Breadcrumb";
+import { default as default3 } from "./Breadcrumb";
+import { default as default4 } from "./BreadcrumbItem";
+export * from "./Breadcrumb.types";
+export {
+  default3 as Breadcrumb,
+  default4 as BreadcrumbItem,
+  default2 as default
+};

package/es/Button/Button.css

@@ -1,14 +1,26 @@
 .bui-btn {
+  --border-radius: var(--bui-button-border-radius, 100px);
   --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
-  --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
   --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
-  --border-radius: var(--bui-button-border-radius, 100px);
-  --font-weight: var(--bui-button-font-weight, var(--bui-font-weight-medium));
-  border: 1px solid transparent;
+  --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);
+  color: var(--bui-color-fg-muted);
   box-sizing: border-box;
   position: relative;
   display: inline-flex;
@@ -17,9 +29,9 @@
   justify-content: center;
   white-space: nowrap;
   font-size: var(--bui-text-size-3);
-  font-weight: var(--font-weight);
+  font-weight: var(--bui-font-weight-medium);
   border-radius: var(--border-radius);
-  height: 27px;
+  height: var(--height);
   line-height: var(--bui-line-height);
   font-family: var(--bui-font-family);
 }
@@ -55,36 +67,36 @@
   display: inline-flex;
   align-self: center;
   flex-shrink: 0;
-  margin-right: var(--bui-spacing-xs);
+  margin-right: var(--icon-start-margin-right);
 }
 .bui-btn-icon-end {
   display: inline-flex;
   align-self: center;
   flex-shrink: 0;
-  margin-left: var(--bui-spacing-xs);
+  margin-left: var(--icon-start-margin-left);
 }
 .bui-btn-disabled {
   pointer-events: none;
-  opacity: 0.5;
+  opacity: var(--disabled-opacity);
 }
 .bui-btn-small {
   font-size: var(--bui-text-size-4);
-  padding: 0 11px;
-  height: 24px;
+  padding: var(--small-padding);
+  height: var(--small-height);
 }
 .bui-btn-medium {
-  padding: 0 14px;
-  height: 27px;
+  padding: var(--medium-padding);
+  height: var(--height);
 }
 .bui-btn-large {
   font-size: var(--bui-text-size-2);
-  padding: 0 14px;
-  height: 33px;
+  padding: var(--large-padding);
+  height: var(--large-height);
 }
 .bui-btn-full {
-  font-size: var(--bui-title-size-4);
+  font-size: var(--full-font-size);
   width: 100%;
-  height: 42px;
+  height: var(--full-height);
 }
 .bui-btn-text.bui-btn-primary {
   color: var(--bui-color-primary);
@@ -156,7 +168,7 @@
       var(--bui-color-vip-end) 100%);
 }
 .bui-btn-outlined {
-  border: solid 1px var(--border-color);
+  border: var(--outlined-default-border);
 }
 .bui-btn-outlined.bui-btn-primary {
   color: var(--bui-color-primary);
@@ -185,35 +197,35 @@
 .bui-btn-light {
   background-image: none;
   background-color: var(--bui-color-gray-light);
-  border: 1px solid transparent;
+  border: var(--light-border);
 }
 .bui-btn-light.bui-btn-warning {
   background-image: none;
-  border: 1px solid transparent;
+  border: var(--light-border);
   color: var(--bui-color-warning);
   background-color: var(--bui-color-warning-light);
 }
 .bui-btn-light.bui-btn-primary {
   background-image: none;
-  border: 1px solid transparent;
+  border: var(--light-border);
   color: var(--bui-color-primary);
   background-color: var(--bui-color-primary-light);
 }
 .bui-btn-light.bui-btn-info {
   background-image: none;
-  border: 1px solid transparent;
+  border: var(--light-border);
   color: var(--bui-color-info);
   background-color: var(--bui-color-info-light);
 }
 .bui-btn-light.bui-btn-success {
   background-image: none;
-  border: 1px solid transparent;
+  border: var(--light-border);
   color: var(--bui-color-success);
   background-color: var(--bui-color-success-light);
 }
 .bui-btn-light.bui-btn-danger {
   background-image: none;
-  border: 1px solid transparent;
+  border: var(--light-border);
   color: var(--bui-color-danger);
   background-color: var(--bui-color-danger-light);
 }

package/es/Calendar/Calendar.css

@@ -1,4 +1,19 @@
 .bui-calendar {
+  --padding: var(--bui-calendar-padding, 6px 12px 7px);
+  --week-height: var(--bui-calendar-week-height, 30px);
+  --handler-height: var(--bui-calendar-handler-height, 28px);
+  --handler-margin-bottom: var(--bui-calendar-handler-margin-bottom, 7px);
+  --handler-text-width: var(--bui-calendar-handler-text-width, 80px);
+  --handler-btn-width: var(--bui-calendar-handler-btn-width, 46px);
+  --handler-btn-height: var(--bui-calendar-handler-btn-height, 100%);
+  --handler-btn-icon-font-size: var(--bui-calendar-handler-btn-icon-font-size, 28px);
+  --day-box-height: var(--bui-calendar-day-box-height, 30px);
+  --day-box-margin-bottom: var(--bui-calendar-day-box-margin-bottom, 7px);
+  --day-disabled-color: var(--bui-calendar-day-disabled-color, #9c9ca5);
+  --middle-color: var(--bui-calendar-middle-color, #000);
+  --middle-background-color: var(--bui-calendar-middle-background-color, #ffeaf1);
+  --range-both-ends-color: var(--bui-calendar-range-both-ends-color, #000);
+  --range-both-ends-background-color: var(--bui-calendar-range-both-ends-background-color, #ffc7da);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -6,11 +21,11 @@
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  padding: 6px 12px 7px;
+  padding: var(--padding);
   font-family: var(--bui-font-family);
 }
 .bui-calendar-week {
-  height: 30px;
+  height: var(--week-height);
   font-size: var(--bui-text-size-2);
   font-weight: var(--bui-font-weight-medium);
   color: var(--bui-color-fg-default);
@@ -29,29 +44,29 @@
   color: var(--bui-color-primary);
 }
 .bui-calendar-handler {
-  height: 28px;
+  height: var(--handler-height);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 7px;
+  margin-bottom: var(--handler-margin-bottom);
 }
 .bui-calendar-handler-text {
-  width: 80px;
+  width: var(--handler-text-width);
   font-size: var(--bui-title-size-3);
   font-weight: var(--bui-font-weight-medium);
   text-align: center;
 }
 .bui-calendar-handler-btn {
   font-size: 16px;
-  height: 100%;
-  width: 46px;
+  height: var(--handler-btn-height);
+  width: var(--handler-btn-width);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .bui-calendar-handler-btn-icon {
-  font-size: 28px;
+  font-size: var(--handler-btn-icon-font-size);
 }
 .bui-calendar-month {
   display: flex;
@@ -60,8 +75,8 @@
 }
 .bui-calendar-day-box {
   width: 14.28%;
-  height: 30px;
-  margin-bottom: 7px;
+  height: var(--day-box-height);
+  margin-bottom: var(--day-box-margin-bottom);
 }
 .bui-calendar-highlight-day .bui-calendar-day {
   color: var(--bui-color-primary);
@@ -72,34 +87,34 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 6px;
+  border-radius: var(--bui-shape-radius-default);
   font-size: var(--bui-title-size-4);
   font-weight: var(--bui-font-weight-medium);
   color: var(--bui-color-fg-default);
   cursor: pointer;
 }
 .bui-calendar-day.bui-calendar-disabled {
-  color: #9c9ca5;
+  color: var(--day-disabled-color);
 }
 .bui-calendar-today {
   color: var(--bui-color-primary);
 }
 .bui-calendar-middle {
-  color: #000;
+  color: var(--middle-color);
   border-radius: 0;
-  background-color: #ffeaf1;
+  background-color: var(--middle-background-color);
 }
 .bui-calendar-start {
-  color: #000;
-  background-color: #ffc7da;
+  color: var(--range-both-ends-color);
+  background-color: var(--range-both-ends-background-color);
 }
 .bui-calendar-range {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 .bui-calendar-end {
-  color: #000;
-  background-color: #ffc7da;
+  color: var(--range-both-ends-color);
+  background-color: var(--range-both-ends-background-color);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

package/es/Calendar/Calendar.d.ts

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

package/es/Calendar/Calendar.js

@@ -40,11 +40,11 @@ import React, {
   useMemo,
   useState
 } from "react";
-import "./Calendar.css";
 import { formatDate, isRange, isSame } from "./utils";
+import { useLocaleText } from "../locales";
+import "./Calendar.css";
 const Picker = lazy(() => import("../Picker"));
 dayjs.extend(isoWeek);
-const SUNDAY_WEEK_DATA = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
 const classes = {
   root: "bui-calendar",
   handler: "bui-calendar-handler",
@@ -62,6 +62,9 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       maxDate,
       mode,
       hideDaysOutsideCurrentMonth,
+      headerBarFormat,
+      headerBarLeftIcon,
+      headerBarRightIcon,
       disabledDate,
       enableSelectYear,
       highlightDate,
@@ -78,6 +81,9 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       "maxDate",
       "mode",
       "hideDaysOutsideCurrentMonth",
+      "headerBarFormat",
+      "headerBarLeftIcon",
+      "headerBarRightIcon",
       "disabledDate",
       "enableSelectYear",
       "highlightDate",
@@ -87,6 +93,16 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       "onYearChange",
       "onChange"
     ]);
+    const { Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday } = useLocaleText("calendar");
+    const SUNDAY_WEEK_DATA = [
+      Sunday,
+      Monday,
+      Tuesday,
+      Wednesday,
+      Thursday,
+      Friday,
+      Saturday
+    ];
     const isRangeMode = mode === "range";
     const formattedValue = formatDate(mode, value, minDate, maxDate);
     const formattedDefaultValue = formatDate(
@@ -113,6 +129,22 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
     }, [calendarValue]);
     const isMinMonth = dayjs(minDate).isSame(renderMonth, "month");
     const isMaxMonth = dayjs(maxDate).isSame(renderMonth, "month");
+    const headerBarIcon = {
+      left: headerBarLeftIcon ? headerBarLeftIcon({ isMinMonth }) : /* @__PURE__ */ React.createElement(
+        CaretLeftIcon,
+        {
+          className: `${classes.handler}-btn-icon`,
+          htmlColor: isMinMonth && "#cccccc"
+        }
+      ),
+      right: headerBarRightIcon ? headerBarRightIcon({ isMaxMonth }) : /* @__PURE__ */ React.createElement(
+        CaretRightIcon,
+        {
+          className: `${classes.handler}-btn-icon`,
+          htmlColor: isMaxMonth && "#cccccc"
+        }
+      )
+    };
     useDidMountEffect(() => {
       const initMonth = formattedValue === void 0 ? formattedDefaultValue == null ? void 0 : formattedDefaultValue[0] : formattedValue == null ? void 0 : formattedValue[0];
       setRenderMonth(dayjs(initMonth || minDate).toDate());
@@ -249,7 +281,7 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
         setRenderMonth(month);
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "prev",
-          month: dayjs(month).format("YYYY/MM")
+          month: dayjs(month).format(headerBarFormat)
         });
       }
     };
@@ -259,7 +291,7 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
         setRenderMonth(month);
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "next",
-          month: dayjs(month).format("YYYY/MM")
+          month: dayjs(month).format(headerBarFormat)
         });
       }
     };
@@ -301,19 +333,7 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
       }, others), {
         "data-mode": mode
       }), data),
-      /* @__PURE__ */ React.createElement("div", { className: classes.handler }, /* @__PURE__ */ React.createElement("div", { onClick: onClickPrev, className: `${classes.handler}-btn` }, /* @__PURE__ */ React.createElement(
-        CaretLeftIcon,
-        {
-          className: `${classes.handler}-btn-icon`,
-          htmlColor: isMinMonth && "#cccccc"
-        }
-      )), /* @__PURE__ */ React.createElement("div", { className: `${classes.handler}-text`, onClick: onClickDate }, dayjs(renderMonth).format("YYYY/MM")), /* @__PURE__ */ React.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, /* @__PURE__ */ React.createElement(
-        CaretRightIcon,
-        {
-          className: `${classes.handler}-btn-icon`,
-          htmlColor: isMaxMonth && "#cccccc"
-        }
-      ))),
+      /* @__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`, onClick: onClickDate }, 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);
       })),
@@ -333,6 +353,7 @@ const Calendar = /* @__PURE__ */ React.forwardRef(
 Calendar.displayName = "BuiCalendar";
 Calendar.defaultProps = {
   hideDaysOutsideCurrentMonth: false,
+  headerBarFormat: "YYYY/MM",
   enableSelectYear: false,
   mode: "single",
   minDate: dayjs(dayjs().format("YYYYMMDD")).add(0, "month").toDate(),