@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/Calendar/Calendar.js

@@ -59,16 +59,18 @@ __export(Calendar_exports, {
   default: () => Calendar_default
 });
 module.exports = __toCommonJS(Calendar_exports);
-var import_icons = require("@bifrostui/icons");
-var import_utils = require("@bifrostui/utils");
+var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_dayjs = __toESM(require("dayjs"));
 var import_isoWeek = __toESM(require("dayjs/plugin/isoWeek"));
 var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat"));
-var import_react = __toESM(require("react"));
-var import_utils2 = require("./utils");
+var import_icons = require("@bifrostui/icons");
+var import_utils = require("@bifrostui/utils");
+var import_CSSTransition = __toESM(require("../CSSTransition"));
+var import_TransitionGroup = __toESM(require("../TransitionGroup"));
 var import_locales = require("../locales");
-var import_Calendar2 = require("./Calendar.css");
+var import_utils2 = require("./utils");
+var import_index = require("./index.css");
 import_dayjs.default.extend(import_isoWeek.default);
 import_dayjs.default.extend(import_customParseFormat.default);
 const classes = {
@@ -84,16 +86,18 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       className,
       defaultValue,
       value,
-      minDate,
-      maxDate,
-      mode,
-      hideDaysOutsideCurrentMonth,
-      headerBarFormat,
+      minDate = (0, import_dayjs.default)((0, import_dayjs.default)().format("YYYYMMDD")).add(0, "month").toDate(),
+      maxDate = (0, import_dayjs.default)((0, import_dayjs.default)().format("YYYYMMDD")).add(11, "month").toDate(),
+      mode = "single",
+      hideDaysOutsideCurrentMonth = false,
+      headerBarFormat = "YYYY/MM",
       headerBarLeftIcon,
       headerBarRightIcon,
       disabledDate,
-      highlightDate,
+      highlightDate = "today",
       headerVisible = false,
+      enableTransition = false,
+      CSSTransitionProps,
       dateRender,
       weekRender,
       onMonthChange,
@@ -112,6 +116,8 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       "disabledDate",
       "highlightDate",
       "headerVisible",
+      "enableTransition",
+      "CSSTransitionProps",
       "dateRender",
       "weekRender",
       "onMonthChange",
@@ -144,12 +150,10 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       defaultValue: formattedDefaultValue,
       onChange
     });
-    const selectedStartDate = (0, import_react.useMemo)(() => {
-      return calendarValue == null ? void 0 : calendarValue[0];
-    }, [calendarValue]);
-    const selectedEndDate = (0, import_react.useMemo)(() => {
-      return calendarValue == null ? void 0 : calendarValue[1];
+    const [selectedStartDate, selectedEndDate] = (0, import_react.useMemo)(() => {
+      return [calendarValue == null ? void 0 : calendarValue[0], calendarValue == null ? void 0 : calendarValue[1]];
     }, [calendarValue]);
+    const slideDirection = (0, import_react.useRef)("");
     const isMinMonth = (0, import_dayjs.default)(minDate).isSame(renderMonth, "month");
     const isMaxMonth = (0, import_dayjs.default)(maxDate).isSame(renderMonth, "month");
     const headerBarIcon = {
@@ -157,21 +161,34 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
         import_icons.CaretLeftIcon,
         {
           className: `${classes.handler}-btn-icon`,
-          htmlColor: isMinMonth && "#cccccc"
+          htmlColor: isMinMonth && "var(--bui-color-fg-disabled)"
         }
       ),
       right: headerBarRightIcon ? headerBarRightIcon({ isMaxMonth }) : /* @__PURE__ */ import_react.default.createElement(
         import_icons.CaretRightIcon,
         {
           className: `${classes.handler}-btn-icon`,
-          htmlColor: isMaxMonth && "#cccccc"
+          htmlColor: isMaxMonth && "var(--bui-color-fg-disabled)"
         }
       )
     };
+    const prevValueRef = (0, import_react.useRef)(value);
     (0, import_utils.useDidMountEffect)(() => {
-      const initMonth = formattedValue === void 0 ? formattedDefaultValue == null ? void 0 : formattedDefaultValue[0] : formattedValue == null ? void 0 : formattedValue[0];
-      setRenderMonth((0, import_dayjs.default)(initMonth || minDate).toDate());
-    }, [JSON.stringify(value), JSON.stringify(defaultValue)]);
+      if (!(0, import_utils2.isEqualVal)(prevValueRef.current, value)) {
+        const latestDate = formattedValue == null ? void 0 : formattedValue[0];
+        const lastInitialValue = renderMonth;
+        const inSameMonth = isRangeMode && selectedStartDate && selectedEndDate || latestDate && (0, import_dayjs.default)(latestDate).isSame(lastInitialValue, "month");
+        if (!inSameMonth) {
+          const latestBeforeThanLast = (0, import_dayjs.default)(latestDate).isBefore(
+            lastInitialValue,
+            "month"
+          );
+          slideDirection.current = latestBeforeThanLast ? "right" : "left";
+          setRenderMonth((0, import_dayjs.default)(latestDate || minDate).toDate());
+        }
+        prevValueRef.current = value;
+      }
+    }, [JSON.stringify(value)]);
     const getDaysInMonth = (args) => {
       const m = (0, import_dayjs.default)(args).format("YYYY/MM");
       const count = (0, import_dayjs.default)(m).daysInMonth();
@@ -193,7 +210,7 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       }
       [...Array(count)].forEach((_, i) => {
         const day = (0, import_dayjs.default)(`${m}/${i + 1}`).toDate();
-        const defaultDisable = !(0, import_utils2.isRange)(day, minDate, maxDate);
+        const defaultDisable = !(0, import_utils2.isDateInRange)(day, minDate, maxDate);
         const propsDisable = disabledDate ? !!(disabledDate == null ? void 0 : disabledDate(day)) : false;
         list.push({
           day,
@@ -242,7 +259,9 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
             classes.day,
             (ins == null ? void 0 : ins.disabled) && classes.disabled,
             dayClassName
-          )
+          ),
+          "aria-disabled": ins == null ? void 0 : ins.disabled,
+          "aria-current": (0, import_dayjs.default)(ins.day).isSame((0, import_dayjs.default)(), "day") ? "date" : void 0
         },
         ins.day && (0, import_dayjs.default)(ins.day).format("D")
       );
@@ -269,9 +288,11 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       const hasSelectedDate = selectedStartDate && (0, import_utils2.isSame)(ins.day, selectedStartDate);
       triggerChange == null ? void 0 : triggerChange(e, hasSelectedDate ? null : ins.day);
     };
-    const renderDayList = () => getDaysInMonth(renderMonth).map(
-      (ins, index) => {
+    const renderDayList = () => {
+      const days = getDaysInMonth(renderMonth);
+      return days.map((ins, index) => {
         const dayStr = (0, import_dayjs.default)(ins.day).format("YYYYMMDD");
+        const isSelected = selectedStartDate && (0, import_utils2.isSame)(selectedStartDate, ins.day) || selectedEndDate && (0, import_utils2.isSame)(selectedEndDate, ins.day);
         return /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
@@ -279,16 +300,20 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
               [`${classes.root}-highlight-day`]: highlightDate === "weekend" && !ins.disabled && (index % 7 === 0 || index % 7 === 6)
             }),
             key: `${dayStr}-${index}`,
-            onClick: (e) => onClickDay(e, ins)
+            onClick: (e) => onClickDay(e, ins),
+            "aria-selected": isSelected,
+            "aria-disabled": ins.disabled,
+            tabIndex: ins.disabled ? -1 : 0
           },
           dateRender ? dateRender(ins) : defaultDateRender(ins)
         );
-      }
-    );
+      });
+    };
     const onClickPrev = (e) => {
       if (!isMinMonth) {
         const month = (0, import_dayjs.default)(renderMonth).subtract(1, "month").toDate();
         setRenderMonth(month);
+        slideDirection.current = "right";
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "prev",
           month: (0, import_dayjs.default)(month).format(headerBarFormat)
@@ -299,48 +324,108 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       if (!isMaxMonth) {
         const month = (0, import_dayjs.default)(renderMonth).add(1, "month").toDate();
         setRenderMonth(month);
+        slideDirection.current = "left";
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "next",
           month: (0, import_dayjs.default)(month).format(headerBarFormat)
         });
       }
     };
-    let data = {};
-    if (isRangeMode) {
-      data = {
-        "data-start": (0, import_dayjs.default)(selectedStartDate).format("YYYYMMDD"),
-        "data-end": (0, import_dayjs.default)(selectedEndDate).format("YYYYMMDD")
-      };
-    } else {
-      data = {
-        "data-selected": (0, import_dayjs.default)(selectedStartDate).format("YYYYMMDD")
+    const data = isRangeMode ? {
+      "data-start": (0, import_dayjs.default)(selectedStartDate).format("YYYYMMDD"),
+      "data-end": (0, import_dayjs.default)(selectedEndDate).format("YYYYMMDD")
+    } : {
+      "data-selected": (0, import_dayjs.default)(selectedStartDate).format("YYYYMMDD")
+    };
+    const renderMonthDate = () => {
+      const hasSlideDirection = !!slideDirection.current;
+      const monthDateDom = /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_clsx.default)(`${classes.root}-month`, {
+            "enable-transition": enableTransition,
+            visible: enableTransition && !hasSlideDirection
+          }),
+          "aria-label": "date select"
+        },
+        renderDayList()
+      );
+      if (!enableTransition) {
+        return monthDateDom;
+      }
+      const transitionClasses = {
+        exit: hasSlideDirection && "slide-exit",
+        exitActive: hasSlideDirection && `slide-exit-${slideDirection.current}`,
+        enter: hasSlideDirection && `slide-enter-${slideDirection.current}`,
+        enterActive: hasSlideDirection && "slide-active",
+        enterDone: "slide-enter-done"
       };
-    }
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_TransitionGroup.default,
+        {
+          className: (0, import_clsx.default)(`${classes.root}-transition-group`),
+          childFactory: (element) => {
+            return import_react.default.cloneElement(element, {
+              classNames: transitionClasses
+            });
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_CSSTransition.default,
+          __spreadProps(__spreadValues({
+            timeout: 300
+          }, CSSTransitionProps), {
+            in: true,
+            appear: hasSlideDirection,
+            mountOnEnter: true,
+            unmountOnExit: true,
+            key: renderMonth.toString(),
+            classNames: transitionClasses
+          }),
+          monthDateDom
+        )
+      );
+    };
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
-      __spreadValues(__spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({
         ref,
         className: (0, import_clsx.default)(classes.root, className, {
           [`${classes.root}-highlight-weekend`]: highlightDate === "weekend"
         })
       }, others), {
         "data-mode": mode
-      }), data),
-      !headerVisible && /* @__PURE__ */ import_react.default.createElement("div", { className: classes.handler }, /* @__PURE__ */ import_react.default.createElement("div", { onClick: onClickPrev, className: `${classes.handler}-btn` }, headerBarIcon.left), /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.handler}-text` }, (0, import_dayjs.default)(renderMonth).format(headerBarFormat)), /* @__PURE__ */ import_react.default.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, headerBarIcon.right)),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: classes.week }, SUNDAY_WEEK_DATA == null ? void 0 : SUNDAY_WEEK_DATA.map((w) => {
+      }), data), {
+        role: "application",
+        "aria-label": "Calendar"
+      }),
+      !headerVisible && /* @__PURE__ */ import_react.default.createElement("div", { className: classes.handler }, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          role: "button",
+          onClick: onClickPrev,
+          className: `${classes.handler}-btn`,
+          "aria-label": "prev month",
+          tabIndex: 0
+        },
+        headerBarIcon.left
+      ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.handler}-text`, "aria-live": "polite" }, (0, import_dayjs.default)(renderMonth).format(headerBarFormat)), /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          role: "button",
+          onClick: onClickNext,
+          className: `${classes.handler}-btn`,
+          "aria-label": "next month",
+          tabIndex: 0
+        },
+        headerBarIcon.right
+      )),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: classes.week }, SUNDAY_WEEK_DATA == null ? void 0 : SUNDAY_WEEK_DATA.map((w, idx) => {
         return weekRender ? weekRender(w) : /* @__PURE__ */ import_react.default.createElement("div", { key: w, className: `${classes.week}-item` }, w);
       })),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${classes.root}-month`) }, renderDayList())
+      renderMonthDate()
     );
   }
 );
 Calendar.displayName = "BuiCalendar";
-Calendar.defaultProps = {
-  hideDaysOutsideCurrentMonth: false,
-  headerBarFormat: "YYYY/MM",
-  mode: "single",
-  minDate: (0, import_dayjs.default)((0, import_dayjs.default)().format("YYYYMMDD")).add(0, "month").toDate(),
-  maxDate: (0, import_dayjs.default)((0, import_dayjs.default)().format("YYYYMMDD")).add(11, "month").toDate(),
-  highlightDate: "today"
-};
 var Calendar_default = Calendar;

package/dist/Calendar/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,41 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  CalendarDemo: () => CalendarDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Calendar = __toESM(require("../../Calendar"));
+const CalendarDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Calendar.default, null);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CalendarDemo
+});

package/dist/Calendar/index.css

@@ -0,0 +1,167 @@
+:root,
+page,
+xhs-page {
+  --bui-calendar-transition-exit: transform 300ms ease 0ms;
+  --bui-calendar-transition-enter: transform 300ms ease 0ms;
+  --bui-calendar-transition-group-min-height: 228px;
+  --bui-calendar-padding: 6px 12px 7px;
+  --bui-calendar-week-height: 30px;
+  --bui-calendar-handler-height: 28px;
+  --bui-calendar-handler-margin: 0 0 7px 0;
+  --bui-calendar-handler-text-width: 80px;
+  --bui-calendar-handler-btn-width: 46px;
+  --bui-calendar-handler-btn-height: 100%;
+  --bui-calendar-handler-btn-icon-font-size: 28px;
+  --bui-calendar-day-box-height: 30px;
+  --bui-calendar-day-box-margin: 0 0 7px 0;
+  --bui-calendar-day-disabled-color: #9c9ca5;
+  --bui-calendar-middle-color: #000;
+  --bui-calendar-middle-bg-color: #ffeaf1;
+  --bui-calendar-range-both-ends-color: #000;
+  --bui-calendar-range-both-ends-bg-color: #ffc7da;
+}
+.bui-calendar {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bui-color-bg-view);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--bui-calendar-padding);
+  font-family: var(--bui-font-family);
+}
+.bui-calendar-week {
+  height: var(--bui-calendar-week-height);
+  font-size: var(--bui-text-size-2);
+  font-weight: var(--bui-font-weight-medium);
+  color: var(--bui-color-fg-default);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.bui-calendar-week-item {
+  width: 14.28%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bui-calendar-week-item:nth-child(1),
+.bui-calendar-week-item:nth-child(7) {
+  color: var(--bui-color-primary);
+}
+.bui-calendar-handler {
+  height: var(--bui-calendar-handler-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: var(--bui-calendar-handler-margin);
+}
+.bui-calendar-handler-text {
+  width: var(--bui-calendar-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: var(--bui-calendar-handler-btn-width);
+  width: var(--handler-btn-width);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bui-calendar-handler-btn-icon {
+  font-size: var(--bui-calendar-handler-btn-icon-font-size);
+}
+.bui-calendar-transition-group {
+  position: relative;
+  min-height: var(--bui-calendar-transition-group-min-height);
+}
+.bui-calendar-month {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: var(--bui-spacing-sm);
+}
+.bui-calendar-month.enable-transition {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+}
+.bui-calendar-month.visible {
+  visibility: visible;
+}
+.bui-calendar-day-box {
+  width: 14.28%;
+  height: var(--bui-calendar-day-box-height);
+  margin: var(--bui-calendar-day-box-margin);
+}
+.bui-calendar-highlight-day .bui-calendar-day {
+  color: var(--bui-color-primary);
+}
+.bui-calendar-day {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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: var(--bui-calendar-day-disabled-color);
+}
+.bui-calendar-today {
+  color: var(--bui-color-primary);
+}
+.bui-calendar-middle {
+  color: var(--bui-calendar-middle-color);
+  border-radius: 0;
+  background-color: var(--bui-calendar-middle-bg-color);
+}
+.bui-calendar-start {
+  color: var(--bui-calendar-range-both-ends-color);
+  background-color: var(--bui-calendar-range-both-ends-bg-color);
+}
+.bui-calendar-range {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.bui-calendar-end {
+  color: var(--bui-calendar-range-both-ends-color);
+  background-color: var(--bui-calendar-range-both-ends-bg-color);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.bui-calendar .slide-enter-left {
+  transform: translate3d(100%, 0, 0);
+}
+.bui-calendar .slide-enter-right {
+  transform: translate3d(-100%, 0, 0);
+}
+.bui-calendar .slide-enter-done {
+  visibility: visible;
+}
+.bui-calendar .slide-exit {
+  visibility: visible;
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: var(--bui-calendar-transition-exit);
+}
+.bui-calendar .slide-active {
+  visibility: visible;
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: var(--bui-calendar-transition-enter);
+}
+.bui-calendar .slide-exit-left {
+  transform: translate3d(-100%, 0, 0);
+}
+.bui-calendar .slide-exit-right {
+  transform: translate3d(100%, 0, 0);
+}

package/dist/Calendar/utils.js

@@ -28,28 +28,37 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var utils_exports = {};
 __export(utils_exports, {
   formatDate: () => formatDate,
-  generateRangeDate: () => generateRangeDate,
-  geteDateDiff: () => geteDateDiff,
-  isRange: () => isRange,
+  generateDateRange: () => generateDateRange,
+  getDateDiff: () => getDateDiff,
+  isDateInRange: () => isDateInRange,
+  isEqualVal: () => isEqualVal,
   isSame: () => isSame
 });
 module.exports = __toCommonJS(utils_exports);
 var import_esm = __toESM(require("dayjs/esm/index"));
 const isSame = (start, end) => (0, import_esm.default)(start).isSame(end, "day");
-const geteDateDiff = (a, b) => {
-  return (0, import_esm.default)((0, import_esm.default)(a).format("YYYYMMDD")).diff(
-    (0, import_esm.default)((0, import_esm.default)(b).format("YYYYMMDD")),
-    "day"
-  );
-};
-const isRange = (current, start, end) => {
-  let flag = true;
-  if (geteDateDiff(current, start) < 0 || geteDateDiff(current, end) > 0) {
-    flag = false;
+const isEqualVal = (a, b) => {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length)
+      return false;
+    return a.every((item, index) => isSame(item, b[index]));
   }
-  return flag;
+  if (typeof a !== typeof b)
+    return false;
+  return a instanceof Date && b instanceof Date && isSame(a, b);
+};
+const getDateDiff = (a, b) => {
+  const aDate = (0, import_esm.default)((0, import_esm.default)(a).format("YYYYMMDD"));
+  const bDate = (0, import_esm.default)((0, import_esm.default)(b).format("YYYYMMDD"));
+  return aDate.diff(bDate, "day");
 };
-const generateRangeDate = (value) => {
+const isDateInRange = (current, start, end) => {
+  return getDateDiff(current, start) >= 0 && getDateDiff(current, end) <= 0;
+};
+const generateDateRange = (value) => {
+  if (!Array.isArray(value) || value.length === 0) {
+    return { start: null, end: null };
+  }
   const finalIndex = value.length - 1;
   return {
     start: value[0],
@@ -62,16 +71,16 @@ const formatDate = (mode, value, minDate, maxDate) => {
   let defaultStartDate = null;
   let defaultEndDate = null;
   if (mode === "single" && value) {
-    defaultStartDate = isRange(value, minDate, maxDate) ? value : null;
+    defaultStartDate = isDateInRange(value, minDate, maxDate) ? value : null;
   } else if (mode === "range") {
-    const { start, end } = generateRangeDate(value);
+    const { start, end } = generateDateRange(value);
     if (start) {
-      defaultStartDate = isRange(start, minDate, maxDate) ? start : null;
+      defaultStartDate = isDateInRange(start, minDate, maxDate) ? start : null;
     }
     if (end) {
-      defaultEndDate = isRange(end, minDate, maxDate) ? end : null;
+      defaultEndDate = isDateInRange(end, minDate, maxDate) ? end : null;
     }
-    if (start && end && geteDateDiff(start, end) > 0) {
+    if (start && end && getDateDiff(start, end) > 0) {
       defaultStartDate = end;
       defaultEndDate = start;
     }
@@ -81,8 +90,9 @@ const formatDate = (mode, value, minDate, maxDate) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   formatDate,
-  generateRangeDate,
-  geteDateDiff,
-  isRange,
+  generateDateRange,
+  getDateDiff,
+  isDateInRange,
+  isEqualVal,
   isSame
 });

package/dist/Card/Card.css

@@ -1,3 +1,12 @@
+:root,
+page,
+xhs-page {
+  --bui-card-header-padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  --bui-card-footer-padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  --bui-card-header-title-font-size: var(--bui-title-size-4);
+  --bui-card-content-font-size: var(--bui-text-size-2);
+  --bui-card-footer-font-size: var(--bui-text-size-2);
+}
 .bui-card {
   background-color: var(--bui-color-bg-view);
   border-radius: var(--bui-shape-radius-card);

package/dist/Card/CardContent.css

@@ -1,6 +1,5 @@
 .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);
+  font-size: var(--bui-card-content-font-size);
 }

package/dist/Card/CardFooter.css

@@ -1,9 +1,7 @@
 .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-card-footer-padding);
+  font-size: var(--bui-card-footer-font-size);
 }

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);
   display: flex;
   align-items: center;
   flex-direction: row;
   position: relative;
-  padding: var(--bui-spacing-md) var(--bui-spacing-lg);
+  padding: var(--bui-card-header-padding);
   font-size: var(--bui-title-size-4);
-  font-weight: var(--bui-font-weight-medium);
-  color: var(--bui-color-fg-default);
+  font-weight: var(--bui-font-weight-bold);
   font-family: var(--bui-font-family);
+  color: var(--bui-color-fg-default);
 }
 .bui-card-header-title {
   white-space: nowrap;
@@ -17,6 +15,8 @@
   text-overflow: ellipsis;
   max-width: 100%;
   flex-shrink: 0;
+  font-size: var(--bui-card-header-title-font-size);
+  font-family: var(--bui-font-family-accent, inherit);
 }
 .bui-card-header-subtitle {
   font-size: var(--bui-text-size-3);