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

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/CitySelector/CitySelector.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OverrideProps } from '@bifrostui/types';
 export type cityType = {
     /** 城市名 */

package/es/Collapse/Collapse.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CollapseProps } from './Collapse.types';
 import './index.less';
-declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<unknown>>;
+declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLElement>>;
 export default Collapse;

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.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Collapse Animation Component
+ * @description A component that implements collapse in/out animation effects for elements using CSS animations
+ * @component Collapse
+ */
+import React from 'react';
+import { CollapseProps } from './Collapse.types';
+import './index.less';
+declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLElement>>;
+export default Collapse;

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;

package/es/Countdown/Countdown.types.d.ts

@@ -1,5 +1,5 @@
 import { OverrideProps } from '@bifrostui/types';
-import React, { CSSProperties } from 'react';
+import React from 'react';
 /**
  * 当前时间
  */
@@ -57,18 +57,6 @@ export type CountdownProps<D extends React.ElementType = 'div', P = {}> = Overri
          * @default HH:mm:ss
          */
         format?: string;
-        /**
-         * 时间单位的样式
-         */
-        unitStyle?: CSSProperties;
-        /**
-         * 倒计时位数的样式，用于定制第一、第二位数字的样式
-         */
-        valueStyle?: CSSProperties[];
-        /**
-         * 各时间区块的样式，用于定制各个时间块的样式，若第一、第二位数字的样式相同，则可替代valueStyle
-         */
-        timeSliceStyle?: CSSProperties;
         /**
          * 倒计时完成时触发
          */
@@ -83,13 +71,30 @@ export type CountdownProps<D extends React.ElementType = 'div', P = {}> = Overri
          * 自定义render内容
          */
         renderContent?: (data: CurrentTime) => React.ReactNode;
+        /**
+         * 无障碍标签，为屏幕阅读器提供组件描述
+         */
+        'aria-label'?: string;
+        /**
+         * 引用其他元素ID作为标签
+         */
+        'aria-labelledby'?: string;
+        /**
+         * 引用其他元素ID作为描述
+         */
+        'aria-describedby'?: string;
+        /**
+         * 组件的语义角色
+         * @default 'timer'
+         */
+        role?: string;
     };
     defaultComponent: D;
 }, D>;
 /**
  * 倒计时格式化后分割项
  */
-interface CountdownItem {
+export interface CountdownItem {
     /**
      * 倒计时切片字符串
      */
@@ -120,4 +125,3 @@ export type FormatedCountdown = {
      */
     timeList: CountdownItem[];
 };
-export {};

package/es/Countdown/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * 自定义 Countdown 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 customDemoComponent.tsx（固定约定）
+ */
+export declare const basicCountdownDemo: () => React.JSX.Element;
+export declare const ariaLabelCountdownDemo: () => React.JSX.Element;
+export declare const ariaLabelledbyCountdownDemo: () => React.JSX.Element;
+export declare const ariaDescribedbyCountdownDemo: () => React.JSX.Element;
+export declare const customRenderCountdownDemo: () => React.JSX.Element;
+export declare const endTimestampCountdownDemo: () => React.JSX.Element;
+export declare const serverTimestampCountdownDemo: () => React.JSX.Element;
+declare const _default: {
+    basicCountdownDemo: () => React.JSX.Element;
+    ariaLabelCountdownDemo: () => React.JSX.Element;
+    ariaLabelledbyCountdownDemo: () => React.JSX.Element;
+    ariaDescribedbyCountdownDemo: () => React.JSX.Element;
+    customRenderCountdownDemo: () => React.JSX.Element;
+    endTimestampCountdownDemo: () => React.JSX.Element;
+    serverTimestampCountdownDemo: () => React.JSX.Element;
+};
+export default _default;