@bifrostui/react 2.0.0-alpha.31 → 2.0.0-alpha.33

package/es/CitySelector/CitySelector.js

@@ -17,6 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
 import React, { useEffect, useState } from "react";
 import CitySelectorCore from "./CitySelectorCore";
 const CitySelector = /* @__PURE__ */ React.forwardRef(
@@ -40,7 +41,7 @@ const CitySelector = /* @__PURE__ */ React.forwardRef(
       const domHeight = (_a = document.querySelector(".bui-city-selector-scroll-view-container")) == null ? void 0 : _a.getBoundingClientRect().height;
       setHeight(`${domHeight / screenHeight * 100}vh`);
     }, [cities]);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       CitySelectorCore,
       __spreadProps(__spreadValues({}, props), {
         ref,

package/es/CitySelector/CitySelector.miniapp.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CitySelectorProps } from './CitySelector.types';
-declare const CitySelector: React.ForwardRefExoticComponent<Omit<CitySelectorProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CitySelector: React.ForwardRefExoticComponent<Omit<CitySelectorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default CitySelector;

package/es/CitySelector/CitySelector.miniapp.js

@@ -17,6 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from "react";
 import Taro from "@tarojs/taro";
 import CitySelectorCore from "./CitySelectorCore";
@@ -80,7 +81,7 @@ const CitySelector = /* @__PURE__ */ React.forwardRef(
         pxToCode(clientY, scrollToCode, codeGroup);
       });
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       CitySelectorCore,
       __spreadProps(__spreadValues({}, props), {
         ref,

package/es/CitySelector/CitySelectorCore.js

@@ -1,4 +1,6 @@
 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;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -26,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef } from "react";
 import clsx from "clsx";
 import { throttle, useForkRef, useTouchEmulator } from "@bifrostui/utils";
@@ -146,70 +150,88 @@ const CitySelector = /* @__PURE__ */ React.forwardRef(
     };
     const renderTitle = (title, titleCode) => {
       const parseTitle = (titleCode || title).toUpperCase();
-      return /* @__PURE__ */ React.createElement("div", { className: "select-city-title", id: disableIndex ? "" : parseTitle }, title == null ? void 0 : title.toUpperCase());
+      return /* @__PURE__ */ jsx("div", { className: "select-city-title", id: disableIndex ? "" : parseTitle, children: title == null ? void 0 : title.toUpperCase() });
     };
     const renderCity = (citys, title, titleCode) => {
-      return /* @__PURE__ */ React.createElement("div", null, renderTitle(title, titleCode), /* @__PURE__ */ React.createElement("div", { className: "select-city-buttons" }, citys.map((city, index) => {
-        return /* @__PURE__ */ React.createElement(Selector, { key: index, city, onSelect: selectHandler });
-      })));
+      return /* @__PURE__ */ jsxs("div", { children: [
+        renderTitle(title, titleCode),
+        /* @__PURE__ */ jsx("div", { className: "select-city-buttons", children: citys.map((city, index) => {
+          return /* @__PURE__ */ jsx(Selector, { city, onSelect: selectHandler }, index);
+        }) })
+      ] });
     };
-    return /* @__PURE__ */ React.createElement("div", __spreadValues({ className: clsx(prefixCls, className), ref: nodeRef }, others), pageTitle ? /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title` }, pageTitle, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-btn-close`, onClick: closeHandler }, "\u2715")) : null, /* @__PURE__ */ React.createElement(
-      ScrollView,
-      {
-        scrollIntoView: targetId,
-        scrollY: true,
-        className: clsx(`${prefixCls}-scroll-view-container tph`, {
-          "container-has-title": pageTitle
-        }),
-        onScroll: scrollHandler
-      },
-      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-all-city` }, selectedCity ? renderCity(
-        [selectedCity],
-        selectedCityGroupName,
-        CURRENT_TYPE.code
-      ) : null, currentCity ? renderCity([currentCity], currentCityGroupName, GPS_TYPE.code) : null, (hotCities == null ? void 0 : hotCities.length) > 0 ? renderCity(hotCities, hotCitiesGroupName, HOT_CITY_TYPE.code) : null, (cities == null ? void 0 : cities.length) > 0 ? /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-list-container` }, cities.map((item, cityGroupIndex) => {
-        if (!(item == null ? void 0 : item.groupName))
-          return null;
-        return /* @__PURE__ */ React.createElement("div", { key: cityGroupIndex }, renderTitle(item.groupName, item.groupName), /* @__PURE__ */ React.createElement("ul", { className: `${prefixCls}-list` }, item.cities.map((city, cityIndex) => {
-          return /* @__PURE__ */ React.createElement(
-            "li",
-            {
-              className: `${prefixCls}-list-item`,
-              key: cityIndex,
-              onClick: (e) => {
-                selectHandler(e, city);
-              }
-            },
-            city.name
-          );
-        })));
-      })) : null)
-    ), (codeGroup == null ? void 0 : codeGroup.length) > 0 && height ? /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: clsx(`${prefixCls}-index-container`, {
-          "left-in": codeShow,
-          "city-index-has-title": pageTitle
-        })
-      },
-      /* @__PURE__ */ React.createElement("ul", { onTouchMove: touchCbk, className: `${prefixCls}-index-list` }, codeGroup.map((item, chartIndex) => {
-        return /* @__PURE__ */ React.createElement(
-          "li",
-          {
-            className: `${prefixCls}-index-item`,
-            key: chartIndex,
-            "data-code": item.code || item,
-            onClick: () => {
-              codeClickHandler(item.code || item);
-            },
-            style: {
-              maxHeight: `calc((${height} - ${DEVIATION_HEIGHT}) / ${codeGroup.length})`
-            }
-          },
-          item.title || item
-        );
-      }))
-    ) : null);
+    return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ className: clsx(prefixCls, className), ref: nodeRef }, others), { children: [
+      pageTitle ? /* @__PURE__ */ jsxs("div", { className: `${prefixCls}-title`, children: [
+        pageTitle,
+        /* @__PURE__ */ jsx("div", { className: `${prefixCls}-btn-close`, onClick: closeHandler, children: "\u2715" })
+      ] }) : null,
+      /* @__PURE__ */ jsx(
+        ScrollView,
+        {
+          scrollIntoView: targetId,
+          scrollY: true,
+          className: clsx(`${prefixCls}-scroll-view-container tph`, {
+            "container-has-title": pageTitle
+          }),
+          onScroll: scrollHandler,
+          children: /* @__PURE__ */ jsxs("div", { className: `${prefixCls}-all-city`, children: [
+            selectedCity ? renderCity(
+              [selectedCity],
+              selectedCityGroupName,
+              CURRENT_TYPE.code
+            ) : null,
+            currentCity ? renderCity([currentCity], currentCityGroupName, GPS_TYPE.code) : null,
+            (hotCities == null ? void 0 : hotCities.length) > 0 ? renderCity(hotCities, hotCitiesGroupName, HOT_CITY_TYPE.code) : null,
+            (cities == null ? void 0 : cities.length) > 0 ? /* @__PURE__ */ jsx("div", { className: `${prefixCls}-list-container`, children: cities.map((item, cityGroupIndex) => {
+              if (!(item == null ? void 0 : item.groupName))
+                return null;
+              return /* @__PURE__ */ jsxs("div", { children: [
+                renderTitle(item.groupName, item.groupName),
+                /* @__PURE__ */ jsx("ul", { className: `${prefixCls}-list`, children: item.cities.map((city, cityIndex) => {
+                  return /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      className: `${prefixCls}-list-item`,
+                      onClick: (e) => {
+                        selectHandler(e, city);
+                      },
+                      children: city.name
+                    },
+                    cityIndex
+                  );
+                }) })
+              ] }, cityGroupIndex);
+            }) }) : null
+          ] })
+        }
+      ),
+      (codeGroup == null ? void 0 : codeGroup.length) > 0 && height ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(`${prefixCls}-index-container`, {
+            "left-in": codeShow,
+            "city-index-has-title": pageTitle
+          }),
+          children: /* @__PURE__ */ jsx("ul", { onTouchMove: touchCbk, className: `${prefixCls}-index-list`, children: codeGroup.map((item, chartIndex) => {
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: `${prefixCls}-index-item`,
+                "data-code": item.code || item,
+                onClick: () => {
+                  codeClickHandler(item.code || item);
+                },
+                style: {
+                  maxHeight: `calc((${height} - ${DEVIATION_HEIGHT}) / ${codeGroup.length})`
+                },
+                children: item.title || item
+              },
+              chartIndex
+            );
+          }) })
+        }
+      ) : null
+    ] }));
   }
 );
 CitySelector.displayName = "BuiCitySelector";

package/es/CitySelector/Selector/index.d.ts

@@ -5,5 +5,5 @@ type propsType = {
     city: cityType;
     onSelect: (e: React.SyntheticEvent, city: cityType) => void;
 };
-declare const Selector: (props: propsType) => React.JSX.Element;
+declare const Selector: (props: propsType) => import("react/jsx-runtime").JSX.Element;
 export default Selector;

package/es/CitySelector/Selector/index.js

@@ -1,16 +1,16 @@
-import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import "./index.css";
 const Selector = (props) => {
   const { city, onSelect } = props;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       className: "bui-city-selector-item",
       onClick: (e) => {
         onSelect == null ? void 0 : onSelect(e, city);
-      }
-    },
-    city.name
+      },
+      children: city.name
+    }
   );
 };
 var Selector_default = Selector;

package/es/Collapse/Collapse.js

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { jsx } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
 import {
   useForkRef,
@@ -92,63 +93,63 @@ const Collapse = /* @__PURE__ */ React.forwardRef((props, ref) => {
   }, [appear, inProp]);
   if (!children)
     return null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Transition,
     __spreadProps(__spreadValues({}, other), {
       in: inProp,
       timeout,
       delay,
-      appear
-    }),
-    (state, childProps) => {
-      var _a2;
-      const transition = state === "entering" || state === "exiting" ? transitions.create(
-        size,
-        getTransitionProps(
-          { timeout, style, easing: easingProp, delay },
-          {
-            mode: state
+      appear,
+      children: (state, childProps) => {
+        var _a2;
+        const transition = state === "entering" || state === "exiting" ? transitions.create(
+          size,
+          getTransitionProps(
+            { timeout, style, easing: easingProp, delay },
+            {
+              mode: state
+            }
+          )
+        ) : "none";
+        const wrapperSize = () => {
+          var _a3, _b;
+          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]
+            );
           }
-        )
-      ) : "none";
-      const wrapperSize = () => {
-        var _a3, _b;
-        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
-        } : {
-          height: collapseWrapperSize,
-          WebKitHeight: collapseWrapperSize
+          if (wrapperRef.current && state === "exiting") {
+            const _ = wrapperRef.current.offsetHeight;
+            console.log(_);
+          }
+          return isHorizontal ? {
+            width: collapseWrapperSize,
+            WebKitWidth: collapseWrapperSize
+          } : {
+            height: collapseWrapperSize,
+            WebKitHeight: collapseWrapperSize
+          };
         };
-      };
-      return React.createElement(
-        "div",
-        __spreadProps(__spreadValues({
-          className: clsx("bui-collapse", className),
-          style: __spreadValues(__spreadProps(__spreadValues({}, style), {
-            transition,
-            WebkitTransition: transition
-          }), wrapperSize())
-        }, childProps), {
-          ref: collapseRef
-        }),
-        React.cloneElement(children, __spreadValues({
-          style: __spreadValues({}, (_a2 = children.props) == null ? void 0 : _a2.style)
-        }, childProps))
-      );
-    }
+        return React.createElement(
+          "div",
+          __spreadProps(__spreadValues({
+            className: clsx("bui-collapse", className),
+            style: __spreadValues(__spreadProps(__spreadValues({}, style), {
+              transition,
+              WebkitTransition: transition
+            }), wrapperSize())
+          }, childProps), {
+            ref: collapseRef
+          }),
+          React.cloneElement(children, __spreadValues({
+            style: __spreadValues({}, (_a2 = children.props) == null ? void 0 : _a2.style)
+          }, childProps))
+        );
+      }
+    })
   );
 });
 Collapse.displayName = "BuiCollapse";

package/es/CollapsePanel/CollapsePanel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { CollapsePanelProps } from './CollapsePanel.types';
 import './index.less';
-declare const CollapsePanel: React.ForwardRefExoticComponent<Omit<CollapsePanelProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CollapsePanel: React.ForwardRefExoticComponent<Omit<CollapsePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default CollapsePanel;

package/es/CollapsePanel/CollapsePanel.js

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import clsx from "clsx";
 import { ArrowDownwardLargeIcon } from "@bifrostui/icons";
@@ -80,21 +81,21 @@ const CollapsePanel = /* @__PURE__ */ React.forwardRef(
       if (arrowIcon) {
         return arrowIcon;
       }
-      return /* @__PURE__ */ React.createElement(ArrowDownwardLargeIcon, null);
+      return /* @__PURE__ */ jsx(ArrowDownwardLargeIcon, {});
     };
     const renderList = () => {
       if (Array.isArray(items)) {
         return items.map((item) => {
           const _a2 = item, { key } = _a2, otherProps = __objRest(_a2, ["key"]);
-          return /* @__PURE__ */ React.createElement(
+          return /* @__PURE__ */ jsx(
             CollapseItem,
             __spreadProps(__spreadValues({
-              key,
               icon: getArrowIcon(),
               active: openKeys.includes(item.key)
             }, otherProps), {
               onClick: (e) => handleClick(e, item)
-            })
+            }),
+            key
           );
         });
       }
@@ -114,14 +115,15 @@ const CollapsePanel = /* @__PURE__ */ React.forwardRef(
     if (items == null && children == null) {
       return null;
     }
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
-      __spreadValues({
+      __spreadProps(__spreadValues({
         className: clsx(prefixCls, className),
         style,
         ref
-      }, others),
-      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-list` }, renderList())
+      }, others), {
+        children: /* @__PURE__ */ jsx("div", { className: `${prefixCls}-list`, children: renderList() })
+      })
     );
   }
 );

package/es/CollapsePanel/CollapsePanelItem.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { CollapsePanelItemProps } from './CollapsePanel.types';
-declare const CollapsePanelItem: React.ForwardRefExoticComponent<Omit<CollapsePanelItemProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CollapsePanelItem: React.ForwardRefExoticComponent<Omit<CollapsePanelItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default CollapsePanelItem;

package/es/CollapsePanel/CollapsePanelItem.js

@@ -1,4 +1,6 @@
 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;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -26,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import clsx from "clsx";
 import { Collapse } from "../Collapse";
@@ -53,27 +57,33 @@ const CollapsePanelItem = /* @__PURE__ */ React.forwardRef(
     const getIcon = () => {
       return typeof icon === "function" ? icon(active) : icon;
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "div",
-      __spreadValues({
+      __spreadProps(__spreadValues({
         className: clsx(prefixCls, active && `${prefixCls}-active`, className),
         style,
         ref
-      }, others),
-      /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header`, onClick }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-header-label` }, label), /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: clsx(
-            `${prefixCls}-header-icon`,
-            `${prefixCls}-header-icon-arrow`,
-            {
-              [`${prefixCls}-header-icon-arrow-active`]: !isControlledIcon && active
-            }
-          )
-        },
-        getIcon()
-      )),
-      /* @__PURE__ */ React.createElement(Collapse, { in: active, direction: "vertical", timeout: 300 }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-content` }, children))
+      }, others), {
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: `${prefixCls}-header`, onClick, children: [
+            /* @__PURE__ */ jsx("div", { className: `${prefixCls}-header-label`, children: label }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  `${prefixCls}-header-icon`,
+                  `${prefixCls}-header-icon-arrow`,
+                  {
+                    [`${prefixCls}-header-icon-arrow-active`]: !isControlledIcon && active
+                  }
+                ),
+                children: getIcon()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Collapse, { in: active, direction: "vertical", timeout: 300, children: /* @__PURE__ */ jsx("div", { className: `${prefixCls}-content`, children }) })
+        ]
+      })
     );
   }
 );

package/es/Countdown/Countdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CountdownProps } from './Countdown.types';
 import './index.less';
-declare const Countdown: React.ForwardRefExoticComponent<Omit<CountdownProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Countdown: React.ForwardRefExoticComponent<Omit<CountdownProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Countdown;

package/es/Countdown/Countdown.js

@@ -1,4 +1,6 @@
 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;
@@ -14,6 +16,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -26,8 +29,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import React, { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { useDidMountEffect } from "@bifrostui/utils";
 import useCountdown from "./useCountdown";
 import { formatCountdown } from "./utils";
@@ -114,35 +118,40 @@ const Countdown = forwardRef((props, ref) => {
   const defaultRender = (timeIns) => {
     const { timeList } = formatCountdown(timeIns.total, format);
     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(
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
         "span",
         {
-          key: `slice-${index}`,
-          className: clsx(`${prefixCls}-slice`),
-          "aria-hidden": "true"
-        },
-        /* @__PURE__ */ React.createElement("span", { className: clsx(`${prefixCls}-slice-item`) }, valueList.map((val, i) => /* @__PURE__ */ React.createElement(
+          className: clsx(`${prefixCls}-sr-only`),
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          children: accessibleDescription
+        }
+      ),
+      timeList.map((item, index) => {
+        const { unitText, valStr } = item;
+        const valueList = valStr.split("");
+        return /* @__PURE__ */ jsxs(
           "span",
           {
-            key: `slice-value-${i}`,
-            className: clsx(`${prefixCls}-slice-value`)
+            className: clsx(`${prefixCls}-slice`),
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: clsx(`${prefixCls}-slice-item`), children: valueList.map((val, i) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: clsx(`${prefixCls}-slice-value`),
+                  children: val
+                },
+                `slice-value-${i}`
+              )) }),
+              unitText && /* @__PURE__ */ jsx("span", { className: clsx(`${prefixCls}-slice-unit`), children: unitText })
+            ]
           },
-          val
-        ))),
-        unitText && /* @__PURE__ */ React.createElement("span", { className: clsx(`${prefixCls}-slice-unit`) }, unitText)
-      );
-    }));
+          `slice-${index}`
+        );
+      })
+    ] });
   };
   const ariaProps = {
     role,
@@ -152,13 +161,14 @@ const Countdown = forwardRef((props, ref) => {
     "aria-live": "polite",
     "aria-atomic": true
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
-    __spreadValues(__spreadValues({
+    __spreadProps(__spreadValues(__spreadValues({
       ref,
       className: clsx(prefixCls, className)
-    }, ariaProps), others),
-    renderContent ? renderContent(time) : defaultRender(time)
+    }, ariaProps), others), {
+      children: renderContent ? renderContent(time) : defaultRender(time)
+    })
   );
 });
 Countdown.displayName = "BuiCountdown";