@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.1

package/dist/Calendar/Calendar.js

@@ -59,16 +59,20 @@ __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_react = __toESM(require("react"));
-var import_utils2 = require("./utils");
+var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat"));
+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_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 = {
   root: "bui-calendar",
   handler: "bui-calendar-handler",
@@ -91,6 +95,9 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       headerBarRightIcon,
       disabledDate,
       highlightDate = "today",
+      headerVisible = false,
+      enableTransition = false,
+      CSSTransitionProps,
       dateRender,
       weekRender,
       onMonthChange,
@@ -108,6 +115,9 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       "headerBarRightIcon",
       "disabledDate",
       "highlightDate",
+      "headerVisible",
+      "enableTransition",
+      "CSSTransitionProps",
       "dateRender",
       "weekRender",
       "onMonthChange",
@@ -140,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 = {
@@ -164,10 +172,23 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
         }
       )
     };
+    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();
@@ -189,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,
@@ -238,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")
       );
@@ -265,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",
           {
@@ -275,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)
@@ -295,38 +324,106 @@ 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),
-      /* @__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()
     );
   }
 );

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

@@ -1,21 +1,24 @@
 :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-bottom: 7px;
+  --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-bottom: 7px;
+  --bui-calendar-day-box-margin: 0 0 7px 0;
   --bui-calendar-day-disabled-color: #9c9ca5;
   --bui-calendar-middle-color: #000;
-  --bui-calendar-middle-background-color: #ffeaf1;
+  --bui-calendar-middle-bg-color: #ffeaf1;
   --bui-calendar-range-both-ends-color: #000;
-  --bui-calendar-range-both-ends-background-color: #ffc7da;
+  --bui-calendar-range-both-ends-bg-color: #ffc7da;
 }
 .bui-calendar {
   overflow: hidden;
@@ -52,7 +55,7 @@ xhs-page {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: var(--bui-calendar-handler-margin-bottom);
+  margin-bottom: var(--bui-calendar-handler-margin);
 }
 .bui-calendar-handler-text {
   width: var(--bui-calendar-handler-text-width);
@@ -72,15 +75,28 @@ xhs-page {
 .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-bottom: var(--bui-calendar-day-box-margin-bottom);
+  margin: var(--bui-calendar-day-box-margin);
 }
 .bui-calendar-highlight-day .bui-calendar-day {
   color: var(--bui-color-primary);
@@ -106,11 +122,11 @@ xhs-page {
 .bui-calendar-middle {
   color: var(--bui-calendar-middle-color);
   border-radius: 0;
-  background-color: var(--bui-calendar-middle-background-color);
+  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-background-color);
+  background-color: var(--bui-calendar-range-both-ends-bg-color);
 }
 .bui-calendar-range {
   border-top-right-radius: 0;
@@ -118,7 +134,34 @@ xhs-page {
 }
 .bui-calendar-end {
   color: var(--bui-calendar-range-both-ends-color);
-  background-color: var(--bui-calendar-range-both-ends-background-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/Checkbox/Checkbox.js

@@ -71,7 +71,7 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
     className,
     defaultChecked = false,
-    checked,
+    checked = false,
     inputProps,
     inputRef,
     name,
@@ -97,6 +97,7 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
     "onChange",
     "children"
   ]);
+  const ariaProps = __spreadValues({}, disabled && { "aria-disabled": disabled });
   const groupContext = (0, import_react.useContext)(import_CheckboxContext.default);
   let validDefaultChecked = defaultChecked;
   let validChecked = checked;
@@ -113,7 +114,7 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
   }
   const checkboxCheckIcon = checkedIcon || /* @__PURE__ */ import_react.default.createElement(import_icons.SuccessCircleFilledIcon, { color: "primary" });
   const checkboxUncheckIcon = icon || /* @__PURE__ */ import_react.default.createElement(import_icons.CircleOutlinedIcon, { color: "neutral" });
-  const checkboxDisabled = disabled !== void 0 ? disabled : groupContext == null ? void 0 : groupContext.disabled;
+  const checkboxDisabled = disabled !== void 0 ? disabled : (groupContext == null ? void 0 : groupContext.disabled) || false;
   const handleChange = (e) => {
     var _a2, _b2, _c2;
     const isChecked = !checkboxChecked;
@@ -144,14 +145,14 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
     }, others),
     /* @__PURE__ */ import_react.default.createElement(
       "input",
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadValues({
         ref: inputRef,
         type: "checkbox",
         value,
         name,
         checked: checkboxChecked,
         disabled: checkboxDisabled
-      }, inputProps), {
+      }, ariaProps), inputProps), {
         onChange: handleChange,
         className: (0, import_clsx.default)(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
       })

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

@@ -0,0 +1,57 @@
+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, {
+  ariaLabelCheckboxDemo: () => ariaLabelCheckboxDemo,
+  basicCheckboxDemo: () => basicCheckboxDemo,
+  default: () => A11yDemos_default,
+  disabledCheckboxDemo: () => disabledCheckboxDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Checkbox = __toESM(require("../../Checkbox"));
+const basicCheckboxDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, { checked: true }), "Checkbox"));
+};
+const disabledCheckboxDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, { disabled: true }), "Checkbox"));
+};
+const ariaLabelCheckboxDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, { inputProps: { "aria-label": "\u590D\u9009\u6846" } }, "Checkbox"));
+};
+var A11yDemos_default = {
+  basicCheckboxDemo,
+  disabledCheckboxDemo,
+  ariaLabelCheckboxDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaLabelCheckboxDemo,
+  basicCheckboxDemo,
+  disabledCheckboxDemo
+});