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

package/es/Calendar/utils.js

@@ -1,19 +1,27 @@
 import dayjs from "dayjs/esm/index";
 const isSame = (start, end) => dayjs(start).isSame(end, "day");
-const geteDateDiff = (a, b) => {
-  return dayjs(dayjs(a).format("YYYYMMDD")).diff(
-    dayjs(dayjs(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 = dayjs(dayjs(a).format("YYYYMMDD"));
+  const bDate = dayjs(dayjs(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],
@@ -26,16 +34,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;
     }
@@ -44,8 +52,9 @@ const formatDate = (mode, value, minDate, maxDate) => {
 };
 export {
   formatDate,
-  generateRangeDate,
-  geteDateDiff,
-  isRange,
+  generateDateRange,
+  getDateDiff,
+  isDateInRange,
+  isEqualVal,
   isSame
 };

package/es/Checkbox/Checkbox.js

@@ -41,7 +41,7 @@ const Checkbox = forwardRef((props, ref) => {
   const _a = props, {
     className,
     defaultChecked = false,
-    checked,
+    checked = false,
     inputProps,
     inputRef,
     name,
@@ -67,6 +67,7 @@ const Checkbox = forwardRef((props, ref) => {
     "onChange",
     "children"
   ]);
+  const ariaProps = __spreadValues({}, disabled && { "aria-disabled": disabled });
   const groupContext = useContext(CheckboxContext);
   let validDefaultChecked = defaultChecked;
   let validChecked = checked;
@@ -83,7 +84,7 @@ const Checkbox = forwardRef((props, ref) => {
   }
   const checkboxCheckIcon = checkedIcon || /* @__PURE__ */ React.createElement(SuccessCircleFilledIcon, { color: "primary" });
   const checkboxUncheckIcon = icon || /* @__PURE__ */ React.createElement(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;
@@ -114,14 +115,14 @@ const Checkbox = forwardRef((props, ref) => {
     }, others),
     /* @__PURE__ */ React.createElement(
       "input",
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadValues({
         ref: inputRef,
         type: "checkbox",
         value,
         name,
         checked: checkboxChecked,
         disabled: checkboxDisabled
-      }, inputProps), {
+      }, ariaProps), inputProps), {
         onChange: handleChange,
         className: clsx(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
       })

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

@@ -0,0 +1,22 @@
+import React from "react";
+import Checkbox from "../../Checkbox";
+const basicCheckboxDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement(Checkbox, { checked: true }), "Checkbox"));
+};
+const disabledCheckboxDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("label", null, /* @__PURE__ */ React.createElement(Checkbox, { disabled: true }), "Checkbox"));
+};
+const ariaLabelCheckboxDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Checkbox, { inputProps: { "aria-label": "\u590D\u9009\u6846" } }, "Checkbox"));
+};
+var A11yDemos_default = {
+  basicCheckboxDemo,
+  disabledCheckboxDemo,
+  ariaLabelCheckboxDemo
+};
+export {
+  ariaLabelCheckboxDemo,
+  basicCheckboxDemo,
+  A11yDemos_default as default,
+  disabledCheckboxDemo
+};

package/es/Collapse/Collapse.js

@@ -37,12 +37,14 @@ import {
   getTransitionProps,
   createTransitions
 } from "@bifrostui/utils";
+import clsx from "clsx";
 import { Transition } from "../Transition";
 import "./index.css";
 const defaultEasing = {
   enter: easing.easeOut,
   exit: easing.sharp
 };
+const FIT_CONTENT = "fit-content";
 const defaultTimeout = {
   enter: duration.enteringScreen,
   exit: duration.leavingScreen
@@ -71,7 +73,6 @@ const Collapse = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "className",
     "children"
   ]);
-  const nodeRef = useForkRef(ref);
   const wrapperRef = useRef(null);
   const collapseRef = useForkRef(wrapperRef, ref);
   const transitions = createTransitions();
@@ -79,11 +80,11 @@ const Collapse = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const collapsedSize = typeof collapsedSizeProp === "number" ? `${collapsedSizeProp}px` : collapsedSizeProp;
   const size = isHorizontal ? "width" : "height";
   const getCollapseWrapperSize = (reactNode) => {
-    return reactNode ? `${reactNode[isHorizontal ? "clientWidth" : "clientHeight"]}px` : "fit-content";
+    return reactNode ? `${reactNode[isHorizontal ? "clientWidth" : "clientHeight"]}px` : FIT_CONTENT;
   };
   useEffect(() => {
     var _a2, _b, _c, _d;
-    if (appear === false && inProp === true && ((_b = (_a2 = wrapperRef.current) == null ? void 0 : _a2.style) == null ? void 0 : _b[size]) === "fit-content") {
+    if (appear === false && inProp === true && ((_b = (_a2 = wrapperRef.current) == null ? void 0 : _a2.style) == null ? void 0 : _b[size]) === FIT_CONTENT) {
       wrapperRef.current.style[size] = getCollapseWrapperSize(
         (_d = (_c = wrapperRef.current) == null ? void 0 : _c.children) == null ? void 0 : _d[0]
       );
@@ -94,7 +95,6 @@ const Collapse = /* @__PURE__ */ React.forwardRef((props, ref) => {
   return /* @__PURE__ */ React.createElement(
     Transition,
     __spreadProps(__spreadValues({}, other), {
-      ref: nodeRef,
       in: inProp,
       timeout,
       delay,
@@ -102,16 +102,29 @@ const Collapse = /* @__PURE__ */ React.forwardRef((props, ref) => {
     }),
     (state, childProps) => {
       var _a2;
-      const transition = transitions.create(
+      const transition = state === "entering" || state === "exiting" ? transitions.create(
         size,
         getTransitionProps(
           { timeout, style, easing: easingProp, delay },
-          { mode: state }
+          {
+            mode: state
+          }
         )
-      );
+      ) : "none";
       const wrapperSize = () => {
         var _a3, _b;
-        const collapseWrapperSize = state === "entering" || state === "entered" ? getCollapseWrapperSize((_b = (_a3 = wrapperRef.current) == null ? void 0 : _a3.children) == null ? void 0 : _b[0]) : collapsedSize;
+        let collapseWrapperSize = collapsedSize;
+        if (inProp && state === "entered") {
+          collapseWrapperSize = "auto";
+        } else if (state === "entering" || state === "entered") {
+          collapseWrapperSize = getCollapseWrapperSize(
+            (_b = (_a3 = wrapperRef.current) == null ? void 0 : _a3.children) == null ? void 0 : _b[0]
+          );
+        }
+        if (wrapperRef.current && state === "exiting") {
+          const _ = wrapperRef.current.offsetHeight;
+          console.log(_);
+        }
         return isHorizontal ? {
           width: collapseWrapperSize,
           WebKitWidth: collapseWrapperSize
@@ -122,14 +135,15 @@ const Collapse = /* @__PURE__ */ React.forwardRef((props, ref) => {
       };
       return React.createElement(
         "div",
-        {
-          className: `bui-collapse ${className}`,
+        __spreadProps(__spreadValues({
+          className: clsx("bui-collapse", className),
           style: __spreadValues(__spreadProps(__spreadValues({}, style), {
             transition,
             WebkitTransition: transition
-          }), wrapperSize()),
+          }), wrapperSize())
+        }, childProps), {
           ref: collapseRef
-        },
+        }),
         React.cloneElement(children, __spreadValues({
           style: __spreadValues({}, (_a2 = children.props) == null ? void 0 : _a2.style)
         }, childProps))

package/es/Collapse/Collapse.miniapp.js

@@ -0,0 +1,236 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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, { useEffect, useRef, useState } from "react";
+import {
+  useForkRef,
+  duration,
+  easing,
+  getTransitionProps,
+  createTransitions,
+  getBoundingClientRect,
+  useDidMountEffect
+} from "@bifrostui/utils";
+import Taro from "@tarojs/taro";
+import "./index.css";
+const defaultEasing = {
+  enter: easing.easeOut,
+  exit: easing.sharp
+};
+const defaultTimeout = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen
+};
+const FIT_CONTENT = "fit-content";
+const Collapse = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  var _b;
+  const _a = props, {
+    children,
+    in: inProp,
+    style,
+    className,
+    appear = false,
+    enter = true,
+    exit = true,
+    delay = 0,
+    easing: easingProp = defaultEasing,
+    timeout = defaultTimeout,
+    direction = "vertical",
+    collapsedSize: collapsedSizeProp = 0,
+    mountOnEnter: mountOnEnter,
+    unmountOnExit,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited
+  } = _a, others = __objRest(_a, [
+    "children",
+    "in",
+    "style",
+    "className",
+    "appear",
+    "enter",
+    "exit",
+    "delay",
+    "easing",
+    "timeout",
+    "direction",
+    "collapsedSize",
+    // Lifecycle hooks
+    "mountOnEnter",
+    "unmountOnExit",
+    "onEnter",
+    "onEntering",
+    "onEntered",
+    "onExit",
+    "onExiting",
+    "onExited"
+  ]);
+  const [isMounted, setIsMounted] = useState(inProp || !mountOnEnter);
+  const shouldAnimate = inProp && enter || !inProp && exit;
+  const [animation, setAnimation] = useState("none");
+  const shouldAnimateOnFirstMount = inProp && appear;
+  const collapsedSize = typeof collapsedSizeProp === "number" ? `${collapsedSizeProp}px` : collapsedSizeProp;
+  const [actualSize, setActualSize] = useState(() => {
+    if (!shouldAnimateOnFirstMount) {
+      return inProp ? FIT_CONTENT : collapsedSize;
+    }
+    return collapsedSize;
+  });
+  const elementRef = useRef(null);
+  const handleRef = useForkRef(ref, children == null ? void 0 : children.ref, elementRef);
+  const getAnimation = (canAnimate) => {
+    const transitions = createTransitions();
+    const mode = inProp ? "enter" : "exit";
+    const animationName = `bui-collapse-${mode}-${direction}`;
+    return transitions.create(
+      animationName,
+      getTransitionProps(
+        {
+          timeout: canAnimate ? timeout : 0,
+          delay: canAnimate ? delay : 0,
+          style,
+          easing: easingProp
+        },
+        { mode: inProp ? "enter" : "exit" }
+      )
+    );
+  };
+  const getCollapseWrapperSize = (reactNode) => {
+    return new Promise((resolve) => {
+      var _a2;
+      const reactNodeChild = (_a2 = reactNode == null ? void 0 : reactNode.children) == null ? void 0 : _a2[0];
+      if (!reactNodeChild) {
+        resolve(FIT_CONTENT);
+        return;
+      }
+      Taro.nextTick(() => {
+        getBoundingClientRect(reactNodeChild).then((res) => {
+          if (!res) {
+            resolve(FIT_CONTENT);
+          } else {
+            const isHorizontal = direction === "horizontal";
+            const newSize = isHorizontal ? `${res == null ? void 0 : res.width}px` : `${res == null ? void 0 : res.height}px`;
+            resolve(newSize);
+          }
+        });
+      });
+    });
+  };
+  useDidMountEffect(() => {
+    if (inProp && !isMounted) {
+      setActualSize(collapsedSize);
+      setIsMounted(true);
+      return;
+    }
+    getCollapseWrapperSize(elementRef.current).then((size) => {
+      setActualSize(size);
+      setAnimation(getAnimation(shouldAnimate));
+    });
+  }, [inProp, isMounted]);
+  useEffect(() => {
+    if (!shouldAnimateOnFirstMount)
+      return;
+    getCollapseWrapperSize(elementRef.current).then((size) => {
+      setActualSize(size);
+      setAnimation(getAnimation(true));
+    });
+  }, []);
+  useEffect(() => {
+    const shouldTriggerCallback = isMounted && shouldAnimate;
+    if (!shouldTriggerCallback)
+      return;
+    if (inProp) {
+      onEnter == null ? void 0 : onEnter(elementRef.current);
+    } else {
+      onExit == null ? void 0 : onExit(elementRef.current);
+    }
+  }, [inProp, isMounted]);
+  const handleAnimationStart = () => {
+    if (!shouldAnimate)
+      return;
+    if (inProp) {
+      onEntering == null ? void 0 : onEntering(elementRef.current);
+    } else {
+      onExiting == null ? void 0 : onExiting(elementRef.current);
+    }
+  };
+  const handleAnimationEnd = () => {
+    if (inProp) {
+      Taro.nextTick(() => {
+        setActualSize("auto");
+      });
+      onEntered == null ? void 0 : onEntered(elementRef.current);
+    } else {
+      onExited == null ? void 0 : onExited(elementRef.current);
+      if (unmountOnExit) {
+        setIsMounted(false);
+      }
+    }
+  };
+  if (!children || !isMounted)
+    return null;
+  const cssVariables = {
+    "--collapse-size": actualSize,
+    "--collapse-collapsed-size": collapsedSize
+  };
+  const getClassName = () => {
+    const classes = ["bui-collapse"];
+    if (className) {
+      classes.push(className);
+    }
+    classes.push(`bui-collapse-${direction}`);
+    return classes.join(" ");
+  };
+  return React.createElement(
+    "div",
+    __spreadProps(__spreadValues({}, others), {
+      className: getClassName(),
+      style: __spreadValues(__spreadValues({
+        animation,
+        animationFillMode: "both"
+      }, cssVariables), style),
+      onAnimationStart: handleAnimationStart,
+      onAnimationEnd: handleAnimationEnd,
+      ref: handleRef
+    }),
+    React.cloneElement(children, {
+      style: __spreadValues({}, (_b = children.props) == null ? void 0 : _b.style)
+    })
+  );
+});
+Collapse.displayName = "BuiCollapse";
+var Collapse_miniapp_default = Collapse;
+export {
+  Collapse_miniapp_default as default
+};

package/es/Collapse/index.css

@@ -1,6 +1,45 @@
 .bui-collapse {
   overflow: hidden;
-  white-space: nowrap;
   height: fit-content;
   width: fit-content;
+  --collapse-size: auto;
+  --collapse-collapsed-size: 0px;
+}
+.bui-collapse.bui-collapse-vertical {
+  height: var(--collapse-size);
+}
+.bui-collapse.bui-collapse-horizontal {
+  width: var(--collapse-size);
+}
+@keyframes bui-collapse-enter-vertical {
+  from {
+    height: var(--collapse-collapsed-size);
+  }
+  to {
+    height: var(--collapse-size);
+  }
+}
+@keyframes bui-collapse-exit-vertical {
+  from {
+    height: var(--collapse-size);
+  }
+  to {
+    height: var(--collapse-collapsed-size);
+  }
+}
+@keyframes bui-collapse-enter-horizontal {
+  from {
+    width: var(--collapse-collapsed-size);
+  }
+  to {
+    width: var(--collapse-size);
+  }
+}
+@keyframes bui-collapse-exit-horizontal {
+  from {
+    width: var(--collapse-size);
+  }
+  to {
+    width: var(--collapse-collapsed-size);
+  }
 }

package/es/CollapsePanel/index.css

@@ -19,7 +19,7 @@ xhs-page {
 }
 .bui-collapse-panel-item-header-label {
   padding: var(--bui-collapse-panel-header-padding);
-  font-size: var(--bui-title-size-2);
+  font-size: var(--bui-title-size-3);
 }
 .bui-collapse-panel-item-header-icon-arrow {
   transform: rotate(0deg);

package/es/Countdown/Countdown.js

@@ -31,6 +31,7 @@ import React, { forwardRef, useEffect, useState } from "react";
 import { useDidMountEffect } from "@bifrostui/utils";
 import useCountdown from "./useCountdown";
 import { formatCountdown } from "./utils";
+import { useLocaleText } from "../locales";
 import "./index.css";
 const prefixCls = "bui-countdown";
 const Countdown = forwardRef((props, ref) => {
@@ -40,25 +41,28 @@ const Countdown = forwardRef((props, ref) => {
     endTimestamp,
     remainingTime = 0,
     format = "HH:mm:ss",
-    unitStyle = {},
-    valueStyle = [{}, {}],
-    timeSliceStyle = {},
     renderContent,
     onChange,
-    onFinish
+    onFinish,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    role = "timer"
   } = _a, others = __objRest(_a, [
     "className",
     "serverTimestamp",
     "endTimestamp",
     "remainingTime",
     "format",
-    "unitStyle",
-    "valueStyle",
-    "timeSliceStyle",
     "renderContent",
     "onChange",
-    "onFinish"
+    "onFinish",
+    "aria-label",
+    "aria-labelledby",
+    "aria-describedby",
+    "role"
   ]);
+  const { remain, remainTime, willEnd, hasEnd, timer } = useLocaleText("countdown");
   const [startTime, setStartTime] = useState(
     () => serverTimestamp != null ? serverTimestamp : Date.now()
   );
@@ -87,9 +91,38 @@ const Countdown = forwardRef((props, ref) => {
       setEndTime(endTimestamp);
     }
   }, [serverTimestamp, endTimestamp]);
+  const getAccessibleTimeDescription = (timeIns) => {
+    const { years, months, days, hours, minutes, seconds, total } = timeIns;
+    if (total <= 0) {
+      return hasEnd;
+    }
+    const parts = [];
+    if (parseInt(years, 10) > 0)
+      parts.push(`${parseInt(years, 10)}${remain.year}`);
+    if (parseInt(months, 10) > 0)
+      parts.push(`${parseInt(months, 10)}${remain.month}`);
+    if (parseInt(days, 10) > 0)
+      parts.push(`${parseInt(days, 10)}${remain.day}`);
+    if (parseInt(hours, 10) > 0)
+      parts.push(`${parseInt(hours, 10)}${remain.hour}`);
+    if (parseInt(minutes, 10) > 0)
+      parts.push(`${parseInt(minutes, 10)}${remain.minute}`);
+    if (parseInt(seconds, 10) > 0)
+      parts.push(`${parseInt(seconds, 10)}${remain.second}`);
+    return parts.length > 0 ? `${remainTime}\uFF1A${parts.join("")}` : willEnd;
+  };
   const defaultRender = (timeIns) => {
     const { timeList } = formatCountdown(timeIns.total, format);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, timeList.map((item, index) => {
+    const accessibleDescription = getAccessibleTimeDescription(timeIns);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: clsx(`${prefixCls}-sr-only`),
+        "aria-live": "polite",
+        "aria-atomic": "true"
+      },
+      accessibleDescription
+    ), timeList.map((item, index) => {
       const { unitText, valStr } = item;
       const valueList = valStr.split("");
       return /* @__PURE__ */ React.createElement(
@@ -97,29 +130,36 @@ const Countdown = forwardRef((props, ref) => {
         {
           key: `slice-${index}`,
           className: clsx(`${prefixCls}-slice`),
-          style: timeSliceStyle
+          "aria-hidden": "true"
         },
         /* @__PURE__ */ React.createElement("span", { className: clsx(`${prefixCls}-slice-item`) }, valueList.map((val, i) => /* @__PURE__ */ React.createElement(
           "span",
           {
             key: `slice-value-${i}`,
-            className: clsx(`${prefixCls}-slice-value`),
-            style: valueStyle[i]
+            className: clsx(`${prefixCls}-slice-value`)
           },
           val
         ))),
-        unitText && /* @__PURE__ */ React.createElement(
-          "span",
-          {
-            className: clsx(`${prefixCls}-slice-unit`),
-            style: unitStyle
-          },
-          unitText
-        )
+        unitText && /* @__PURE__ */ React.createElement("span", { className: clsx(`${prefixCls}-slice-unit`) }, unitText)
       );
     }));
   };
-  return /* @__PURE__ */ React.createElement("div", __spreadValues({ ref, className: clsx(prefixCls, className) }, others), renderContent ? renderContent(time) : defaultRender(time));
+  const ariaProps = {
+    role,
+    "aria-label": ariaLabel || `${timer}\uFF0C${getAccessibleTimeDescription(time)}`,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-live": "polite",
+    "aria-atomic": true
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    __spreadValues(__spreadValues({
+      ref,
+      className: clsx(prefixCls, className)
+    }, ariaProps), others),
+    renderContent ? renderContent(time) : defaultRender(time)
+  );
 });
 Countdown.displayName = "BuiCountdown";
 var Countdown_default = Countdown;