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

package/dist/Collapse/Collapse.js

@@ -61,12 +61,14 @@ __export(Collapse_exports, {
 module.exports = __toCommonJS(Collapse_exports);
 var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
+var import_clsx = __toESM(require("clsx"));
 var import_Transition = require("../Transition");
 var import_index = require("./index.css");
 const defaultEasing = {
   enter: import_utils.easing.easeOut,
   exit: import_utils.easing.sharp
 };
+const FIT_CONTENT = "fit-content";
 const defaultTimeout = {
   enter: import_utils.duration.enteringScreen,
   exit: import_utils.duration.leavingScreen
@@ -95,7 +97,6 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     "className",
     "children"
   ]);
-  const nodeRef = (0, import_utils.useForkRef)(ref);
   const wrapperRef = (0, import_react.useRef)(null);
   const collapseRef = (0, import_utils.useForkRef)(wrapperRef, ref);
   const transitions = (0, import_utils.createTransitions)();
@@ -103,11 +104,11 @@ const Collapse = /* @__PURE__ */ import_react.default.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;
   };
   (0, import_react.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]
       );
@@ -118,7 +119,6 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   return /* @__PURE__ */ import_react.default.createElement(
     import_Transition.Transition,
     __spreadProps(__spreadValues({}, other), {
-      ref: nodeRef,
       in: inProp,
       timeout,
       delay,
@@ -126,16 +126,29 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     }),
     (state, childProps) => {
       var _a2;
-      const transition = transitions.create(
+      const transition = state === "entering" || state === "exiting" ? transitions.create(
         size,
         (0, import_utils.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
@@ -146,14 +159,15 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
       };
       return import_react.default.createElement(
         "div",
-        {
-          className: `bui-collapse ${className}`,
+        __spreadProps(__spreadValues({
+          className: (0, import_clsx.default)("bui-collapse", className),
           style: __spreadValues(__spreadProps(__spreadValues({}, style), {
             transition,
             WebkitTransition: transition
-          }), wrapperSize()),
+          }), wrapperSize())
+        }, childProps), {
           ref: collapseRef
-        },
+        }),
         import_react.default.cloneElement(children, __spreadValues({
           style: __spreadValues({}, (_a2 = children.props) == null ? void 0 : _a2.style)
         }, childProps))

package/dist/Collapse/Collapse.miniapp.js

@@ -0,0 +1,255 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+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 Collapse_miniapp_exports = {};
+__export(Collapse_miniapp_exports, {
+  default: () => Collapse_miniapp_default
+});
+module.exports = __toCommonJS(Collapse_miniapp_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+var import_taro = __toESM(require("@tarojs/taro"));
+var import_index = require("./index.css");
+const defaultEasing = {
+  enter: import_utils.easing.easeOut,
+  exit: import_utils.easing.sharp
+};
+const defaultTimeout = {
+  enter: import_utils.duration.enteringScreen,
+  exit: import_utils.duration.leavingScreen
+};
+const FIT_CONTENT = "fit-content";
+const Collapse = /* @__PURE__ */ import_react.default.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] = (0, import_react.useState)(inProp || !mountOnEnter);
+  const shouldAnimate = inProp && enter || !inProp && exit;
+  const [animation, setAnimation] = (0, import_react.useState)("none");
+  const shouldAnimateOnFirstMount = inProp && appear;
+  const collapsedSize = typeof collapsedSizeProp === "number" ? `${collapsedSizeProp}px` : collapsedSizeProp;
+  const [actualSize, setActualSize] = (0, import_react.useState)(() => {
+    if (!shouldAnimateOnFirstMount) {
+      return inProp ? FIT_CONTENT : collapsedSize;
+    }
+    return collapsedSize;
+  });
+  const elementRef = (0, import_react.useRef)(null);
+  const handleRef = (0, import_utils.useForkRef)(ref, children == null ? void 0 : children.ref, elementRef);
+  const getAnimation = (canAnimate) => {
+    const transitions = (0, import_utils.createTransitions)();
+    const mode = inProp ? "enter" : "exit";
+    const animationName = `bui-collapse-${mode}-${direction}`;
+    return transitions.create(
+      animationName,
+      (0, import_utils.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;
+      }
+      import_taro.default.nextTick(() => {
+        (0, import_utils.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);
+          }
+        });
+      });
+    });
+  };
+  (0, import_utils.useDidMountEffect)(() => {
+    if (inProp && !isMounted) {
+      setActualSize(collapsedSize);
+      setIsMounted(true);
+      return;
+    }
+    getCollapseWrapperSize(elementRef.current).then((size) => {
+      setActualSize(size);
+      setAnimation(getAnimation(shouldAnimate));
+    });
+  }, [inProp, isMounted]);
+  (0, import_react.useEffect)(() => {
+    if (!shouldAnimateOnFirstMount)
+      return;
+    getCollapseWrapperSize(elementRef.current).then((size) => {
+      setActualSize(size);
+      setAnimation(getAnimation(true));
+    });
+  }, []);
+  (0, import_react.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) {
+      import_taro.default.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 import_react.default.createElement(
+    "div",
+    __spreadProps(__spreadValues({}, others), {
+      className: getClassName(),
+      style: __spreadValues(__spreadValues({
+        animation,
+        animationFillMode: "both"
+      }, cssVariables), style),
+      onAnimationStart: handleAnimationStart,
+      onAnimationEnd: handleAnimationEnd,
+      ref: handleRef
+    }),
+    import_react.default.cloneElement(children, {
+      style: __spreadValues({}, (_b = children.props) == null ? void 0 : _b.style)
+    })
+  );
+});
+Collapse.displayName = "BuiCollapse";
+var Collapse_miniapp_default = Collapse;

package/dist/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/dist/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/dist/Countdown/Countdown.js

@@ -61,6 +61,7 @@ var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
 var import_useCountdown = __toESM(require("./useCountdown"));
 var import_utils2 = require("./utils");
+var import_locales = require("../locales");
 var import_index = require("./index.css");
 const prefixCls = "bui-countdown";
 const Countdown = (0, import_react.forwardRef)((props, ref) => {
@@ -70,25 +71,28 @@ const Countdown = (0, import_react.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 } = (0, import_locales.useLocaleText)("countdown");
   const [startTime, setStartTime] = (0, import_react.useState)(
     () => serverTimestamp != null ? serverTimestamp : Date.now()
   );
@@ -117,9 +121,38 @@ const Countdown = (0, import_react.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 } = (0, import_utils2.formatCountdown)(timeIns.total, format);
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, timeList.map((item, index) => {
+    const accessibleDescription = getAccessibleTimeDescription(timeIns);
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: (0, import_clsx.default)(`${prefixCls}-sr-only`),
+        "aria-live": "polite",
+        "aria-atomic": "true"
+      },
+      accessibleDescription
+    ), timeList.map((item, index) => {
       const { unitText, valStr } = item;
       const valueList = valStr.split("");
       return /* @__PURE__ */ import_react.default.createElement(
@@ -127,29 +160,36 @@ const Countdown = (0, import_react.forwardRef)((props, ref) => {
         {
           key: `slice-${index}`,
           className: (0, import_clsx.default)(`${prefixCls}-slice`),
-          style: timeSliceStyle
+          "aria-hidden": "true"
         },
         /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_clsx.default)(`${prefixCls}-slice-item`) }, valueList.map((val, i) => /* @__PURE__ */ import_react.default.createElement(
           "span",
           {
             key: `slice-value-${i}`,
-            className: (0, import_clsx.default)(`${prefixCls}-slice-value`),
-            style: valueStyle[i]
+            className: (0, import_clsx.default)(`${prefixCls}-slice-value`)
           },
           val
         ))),
-        unitText && /* @__PURE__ */ import_react.default.createElement(
-          "span",
-          {
-            className: (0, import_clsx.default)(`${prefixCls}-slice-unit`),
-            style: unitStyle
-          },
-          unitText
-        )
+        unitText && /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_clsx.default)(`${prefixCls}-slice-unit`) }, unitText)
       );
     }));
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ ref, className: (0, import_clsx.default)(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__ */ import_react.default.createElement(
+    "div",
+    __spreadValues(__spreadValues({
+      ref,
+      className: (0, import_clsx.default)(prefixCls, className)
+    }, ariaProps), others),
+    renderContent ? renderContent(time) : defaultRender(time)
+  );
 });
 Countdown.displayName = "BuiCountdown";
 var Countdown_default = Countdown;

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

@@ -0,0 +1,107 @@
+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, {
+  ariaDescribedbyCountdownDemo: () => ariaDescribedbyCountdownDemo,
+  ariaLabelCountdownDemo: () => ariaLabelCountdownDemo,
+  ariaLabelledbyCountdownDemo: () => ariaLabelledbyCountdownDemo,
+  basicCountdownDemo: () => basicCountdownDemo,
+  customRenderCountdownDemo: () => customRenderCountdownDemo,
+  default: () => A11yDemos_default,
+  endTimestampCountdownDemo: () => endTimestampCountdownDemo,
+  serverTimestampCountdownDemo: () => serverTimestampCountdownDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Countdown = __toESM(require("../../Countdown"));
+const basicCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Countdown.default, { remainingTime: 60 * 1e3 }));
+};
+const ariaLabelCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Countdown.default, { remainingTime: 120 * 1e3, "aria-label": "\u4FC3\u9500\u6D3B\u52A8\u7ED3\u675F\u5012\u8BA1\u65F6" }));
+};
+const ariaLabelledbyCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", { id: "flash-sale-title" }, "\u9650\u65F6\u62A2\u8D2D"), /* @__PURE__ */ import_react.default.createElement(
+    import_Countdown.default,
+    {
+      remainingTime: 180 * 1e3,
+      "aria-labelledby": "flash-sale-title"
+    }
+  ));
+};
+const ariaDescribedbyCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Countdown.default,
+    {
+      remainingTime: 240 * 1e3,
+      "aria-describedby": "countdown-description"
+    }
+  ), /* @__PURE__ */ import_react.default.createElement("p", { id: "countdown-description" }, "\u5012\u8BA1\u65F6\u7ED3\u675F\u540E\uFF0C\u4F18\u60E0\u4EF7\u683C\u5C06\u6062\u590D\u4E3A\u539F\u4EF7"));
+};
+const customRenderCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Countdown.default,
+    {
+      remainingTime: 300 * 1e3,
+      renderContent: ({ hours, minutes, seconds }) => {
+        return /* @__PURE__ */ import_react.default.createElement("span", null, "\u8DDD\u79BB\u5012\u8BA1\u65F6\u7ED3\u675F\u8FD8\u5269", hours, "\u5C0F\u65F6", minutes, "\u5206\u949F", seconds, "\u79D2");
+      }
+    }
+  ));
+};
+const endTimestampCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Countdown.default, { endTimestamp: Date.now() + 360 * 1e3 }));
+};
+const serverTimestampCountdownDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Countdown.default,
+    {
+      serverTimestamp: Date.now() - 10 * 1e3,
+      endTimestamp: Date.now() + 420 * 1e3
+    }
+  ));
+};
+var A11yDemos_default = {
+  basicCountdownDemo,
+  ariaLabelCountdownDemo,
+  ariaLabelledbyCountdownDemo,
+  ariaDescribedbyCountdownDemo,
+  customRenderCountdownDemo,
+  endTimestampCountdownDemo,
+  serverTimestampCountdownDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaDescribedbyCountdownDemo,
+  ariaLabelCountdownDemo,
+  ariaLabelledbyCountdownDemo,
+  basicCountdownDemo,
+  customRenderCountdownDemo,
+  endTimestampCountdownDemo,
+  serverTimestampCountdownDemo
+});

package/dist/Countdown/index.css

@@ -15,6 +15,17 @@ xhs-page {
   font-weight: var(--bui-countdown-font-weight);
   font-family: var(--bui-font-family);
 }
+.bui-countdown-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 .bui-countdown-slice {
   display: flex;
   flex-direction: row;