@996-design/996-components 1.0.0

package/es/splitter/style/index.js

@@ -0,0 +1,246 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { resetComponent } from '../../style/index.js';
+import { genNoMotionStyle } from '../../style/motion/index.js';
+import { genStyleHooks } from '../../theme/internal.js';
+import { genCssVar } from '../../theme/util/genStyleUtils.js';
+var centerStyle = {
+  position: 'absolute',
+  top: '50%',
+  left: {
+    _skip_check_: true,
+    value: '50%'
+  },
+  transform: 'translate(-50%, -50%)'
+};
+var genSplitterStyle = function genSplitterStyle(token) {
+  var componentCls = token.componentCls,
+    colorFill = token.colorFill,
+    splitBarDraggableSize = token.splitBarDraggableSize,
+    splitBarSize = token.splitBarSize,
+    splitTriggerSize = token.splitTriggerSize,
+    controlItemBgHover = token.controlItemBgHover,
+    controlItemBgActive = token.controlItemBgActive,
+    controlItemBgActiveHover = token.controlItemBgActiveHover,
+    colorPrimary = token.colorPrimary,
+    antCls = token.antCls,
+    calc = token.calc;
+  var _genCssVar = genCssVar(antCls, 'splitter'),
+    _genCssVar2 = _slicedToArray(_genCssVar, 2),
+    varRef = _genCssVar2[1];
+  var splitBarCls = "".concat(componentCls, "-bar");
+  var splitMaskCls = "".concat(componentCls, "-mask");
+  var splitPanelCls = "".concat(componentCls, "-panel");
+  var halfTriggerSize = calc(splitTriggerSize).div(2).equal();
+  var splitterBarPreviewStyle = {
+    position: 'absolute',
+    background: token.colorPrimary,
+    opacity: 0.2,
+    pointerEvents: 'none',
+    transition: 'none',
+    zIndex: 1,
+    display: 'none'
+  };
+  return _defineProperty({}, componentCls, _objectSpread(_objectSpread({}, resetComponent(token)), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    alignItems: 'stretch'
+  }, "> ".concat(splitBarCls), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    flex: 'none',
+    position: 'relative',
+    userSelect: 'none'
+  }, "".concat(splitBarCls, "-dragger"), _objectSpread(_objectSpread({}, centerStyle), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    zIndex: 1,
+    // Hover background
+    '&::before': _objectSpread({
+      content: '""',
+      background: controlItemBgHover
+    }, centerStyle),
+    // Spinner
+    '&::after': _objectSpread({
+      content: '""',
+      background: colorFill
+    }, centerStyle)
+  }, "&:hover:not(".concat(splitBarCls, "-dragger-active)"), {
+    '&::before': {
+      background: controlItemBgActive
+    }
+  }), '&-active', {
+    zIndex: 2,
+    '&::before': {
+      background: controlItemBgActiveHover
+    }
+  }), "&-active".concat(splitBarCls, "-dragger-customize"), _defineProperty({}, "".concat(splitBarCls, "-dragger-icon"), {
+    color: colorPrimary
+  })), "&-disabled".concat(splitBarCls, "-dragger"), _defineProperty({
+    zIndex: 0,
+    '&, &:hover, &-active': {
+      cursor: 'default',
+      '&::before': {
+        background: controlItemBgHover
+      }
+    },
+    '&::after': {
+      display: 'none'
+    }
+  }, "".concat(splitBarCls, "-dragger-icon"), {
+    display: 'none'
+  })), '&-customize', _defineProperty(_defineProperty({}, "".concat(splitBarCls, "-dragger-icon"), _objectSpread(_objectSpread({}, centerStyle), {}, {
+    display: 'flex',
+    alignItems: 'center',
+    color: colorFill
+  })), '&::after', {
+    display: 'none'
+  })))), "".concat(splitBarCls, "-collapse-bar"), _objectSpread(_objectSpread({}, centerStyle), {}, _defineProperty(_defineProperty(_defineProperty({
+    zIndex: token.zIndexPopupBase,
+    background: controlItemBgHover,
+    fontSize: token.fontSizeSM,
+    borderRadius: token.borderRadiusXS,
+    color: token.colorText,
+    cursor: 'pointer',
+    opacity: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }, "&:hover:not(".concat(splitBarCls, "-collapse-bar-customize)"), {
+    background: controlItemBgActive
+  }), "&:active:not(".concat(splitBarCls, "-collapse-bar-customize)"), {
+    background: controlItemBgActiveHover
+  }), "".concat(splitBarCls, "-collapse-icon"), {
+    display: 'flex',
+    alignItems: 'center'
+  }))), "".concat(splitBarCls, "-collapse-bar-customize"), {
+    background: 'transparent'
+  }), '&:hover, &:active, &:focus-within', _defineProperty({}, "".concat(splitBarCls, "-collapse-bar-hover-only"), {
+    opacity: 1
+  })), "".concat(splitBarCls, "-collapse-bar-hover-only"), {
+    '@media(hover:none)': {
+      opacity: 1
+    }
+  }), "".concat(splitBarCls, "-collapse-bar-always-hidden"), {
+    display: 'none'
+  }), "".concat(splitBarCls, "-collapse-bar-always-visible"), {
+    opacity: 1
+  })), splitMaskCls, {
+    position: 'fixed',
+    zIndex: token.zIndexPopupBase,
+    inset: 0,
+    '&-horizontal': {
+      cursor: 'col-resize'
+    },
+    '&-vertical': {
+      cursor: 'row-resize'
+    }
+  }), '&-horizontal', _defineProperty({
+    flexDirection: 'row'
+  }, "> ".concat(splitBarCls), _defineProperty(_defineProperty(_defineProperty({
+    width: 0
+  }, "".concat(splitBarCls, "-preview"), _objectSpread(_objectSpread({
+    height: '100%',
+    width: splitBarSize
+  }, splitterBarPreviewStyle), {}, _defineProperty({}, "&".concat(splitBarCls, "-preview-active"), {
+    display: 'block',
+    transform: "translate3d(".concat(varRef('bar-preview-offset'), ", 0, 0)")
+  }))), "".concat(splitBarCls, "-dragger"), {
+    cursor: 'col-resize',
+    height: '100%',
+    width: splitTriggerSize,
+    '&::before': {
+      height: '100%',
+      width: splitBarSize
+    },
+    '&::after': {
+      height: splitBarDraggableSize,
+      width: splitBarSize
+    }
+  }), "".concat(splitBarCls, "-collapse-bar"), {
+    width: token.fontSizeSM,
+    height: token.controlHeightSM,
+    '&-start': {
+      left: {
+        _skip_check_: true,
+        value: 'auto'
+      },
+      right: {
+        _skip_check_: true,
+        value: halfTriggerSize
+      },
+      transform: 'translateY(-50%)'
+    },
+    '&-end': {
+      left: {
+        _skip_check_: true,
+        value: halfTriggerSize
+      },
+      right: {
+        _skip_check_: true,
+        value: 'auto'
+      },
+      transform: 'translateY(-50%)'
+    }
+  }))), '&-vertical', _defineProperty({
+    flexDirection: 'column'
+  }, "> ".concat(splitBarCls), _defineProperty(_defineProperty(_defineProperty({
+    height: 0
+  }, "".concat(splitBarCls, "-preview"), _objectSpread(_objectSpread({
+    height: splitBarSize,
+    width: '100%'
+  }, splitterBarPreviewStyle), {}, _defineProperty({}, "&".concat(splitBarCls, "-preview-active"), {
+    display: 'block',
+    transform: "translate3d(0, ".concat(varRef('bar-preview-offset'), ", 0)")
+  }))), "".concat(splitBarCls, "-dragger"), {
+    cursor: 'row-resize',
+    width: '100%',
+    height: splitTriggerSize,
+    '&::before': {
+      width: '100%',
+      height: splitBarSize
+    },
+    '&::after': {
+      width: splitBarDraggableSize,
+      height: splitBarSize
+    }
+  }), "".concat(splitBarCls, "-collapse-bar"), {
+    height: token.fontSizeSM,
+    width: token.controlHeightSM,
+    '&-start': {
+      top: 'auto',
+      bottom: halfTriggerSize,
+      transform: 'translateX(-50%)'
+    },
+    '&-end': {
+      top: halfTriggerSize,
+      bottom: 'auto',
+      transform: 'translateX(-50%)'
+    }
+  }))), splitPanelCls, _defineProperty(_defineProperty({
+    overflow: 'auto',
+    scrollbarWidth: 'thin',
+    boxSizing: 'border-box',
+    '&-hidden': {
+      overflow: 'hidden'
+    }
+  }, "&:has(".concat(componentCls, ":only-child)"), {
+    overflow: 'hidden'
+  }), '&-transition', _objectSpread({
+    transition: "flex-basis ".concat(token.motionDurationSlow, " ").concat(token.motionEaseInOut)
+  }, genNoMotionStyle())))));
+};
+export var prepareComponentToken = function prepareComponentToken(token) {
+  var _token$splitBarDragga;
+  var splitBarSize = token.splitBarSize || 2;
+  var splitTriggerSize = token.splitTriggerSize || 6;
+  // https://github.com/ant-design/ant-design/pull/51223
+  var resizeSpinnerSize = token.resizeSpinnerSize || 20;
+  var splitBarDraggableSize = (_token$splitBarDragga = token.splitBarDraggableSize) !== null && _token$splitBarDragga !== void 0 ? _token$splitBarDragga : resizeSpinnerSize;
+  return {
+    splitBarSize: splitBarSize,
+    splitTriggerSize: splitTriggerSize,
+    splitBarDraggableSize: splitBarDraggableSize,
+    resizeSpinnerSize: resizeSpinnerSize
+  };
+};
+// ============================== Export ==============================
+export default genStyleHooks('Splitter', genSplitterStyle, prepareComponentToken);

package/es/splitter/style.d.ts

@@ -0,0 +1,2 @@
+export * from './style/index';
+export { default } from './style/index';

package/es/splitter/style.js

@@ -0,0 +1,3 @@
+import * as moduleNamespace from './style/index.js';
+export * from './style/index.js';
+export default moduleNamespace.default;

package/es/splitter.d.ts

@@ -0,0 +1,2 @@
+export * from './splitter/index';
+export { default } from './splitter/index';

package/es/splitter.js

@@ -0,0 +1,3 @@
+import * as moduleNamespace from './splitter/index.js';
+export * from './splitter/index.js';
+export default moduleNamespace.default;

package/es/statistic/Countdown.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { StatisticProps } from './Statistic';
+import type { valueType } from './utils';
+export interface CountdownProps extends StatisticProps {
+    format?: string;
+    onFinish?: () => void;
+    onChange?: (value?: valueType) => void;
+}
+declare const _default: React.NamedExoticComponent<CountdownProps>;
+export default _default;

package/es/statistic/Countdown.js

@@ -0,0 +1,16 @@
+"use client";
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import * as React from 'react';
+import { devUseWarning } from '../_util/warning.js';
+import StatisticTimer from './Timer.js';
+var Countdown = function Countdown(props) {
+  if (process.env.NODE_ENV !== 'production') {
+    var warning = devUseWarning('Countdown');
+    warning.deprecated(false, '<Statistic.Countdown />', '<Statistic.Timer type="countdown" />');
+  }
+  return /*#__PURE__*/React.createElement(StatisticTimer, _objectSpread(_objectSpread({}, props), {}, {
+    type: "countdown"
+  }));
+};
+export default /*#__PURE__*/React.memo(Countdown);

package/es/statistic/Number.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { FormatConfig, valueType } from './utils';
+interface NumberProps extends FormatConfig {
+    value: valueType;
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const StatisticNumber: React.FC<NumberProps>;
+export default StatisticNumber;

package/es/statistic/Number.js

@@ -0,0 +1,54 @@
+"use client";
+
+import * as React from 'react';
+import { isFunction, isNumber } from '../_util/is.js';
+var StatisticNumber = function StatisticNumber(props) {
+  var value = props.value,
+    formatter = props.formatter,
+    precision = props.precision,
+    decimalSeparator = props.decimalSeparator,
+    _props$groupSeparator = props.groupSeparator,
+    groupSeparator = _props$groupSeparator === void 0 ? '' : _props$groupSeparator,
+    prefixCls = props.prefixCls,
+    className = props.className,
+    style = props.style;
+  var valueNode;
+  if (isFunction(formatter)) {
+    // Customize formatter
+    valueNode = formatter(value);
+  } else {
+    // Internal formatter
+    var val = String(value);
+    var cells = val.match(/^(-?)(\d*)(\.(\d+))?$/);
+    // Process if illegal number
+    if (!cells || val === '-') {
+      valueNode = val;
+    } else {
+      var negative = cells[1];
+      var int = cells[2] || '0';
+      var decimal = cells[4] || '';
+      int = int.replace(/\B(?=(\d{3})+(?!\d))/g, groupSeparator);
+      if (isNumber(precision)) {
+        decimal = decimal.padEnd(precision, '0').slice(0, precision > 0 ? precision : 0);
+      }
+      if (decimal) {
+        decimal = "".concat(decimalSeparator).concat(decimal);
+      }
+      valueNode = [/*#__PURE__*/React.createElement("span", {
+        key: "int",
+        className: "".concat(prefixCls, "-content-value-int")
+      }, negative, int), decimal && (/*#__PURE__*/React.createElement("span", {
+        key: "decimal",
+        className: "".concat(prefixCls, "-content-value-decimal")
+      }, decimal))];
+    }
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    className: className,
+    style: style
+  }, valueNode);
+};
+if (process.env.NODE_ENV !== 'production') {
+  StatisticNumber.displayName = 'StatisticNumber';
+}
+export default StatisticNumber;

package/es/statistic/Statistic.d.ts

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import type { HTMLAriaDataAttributes } from '../_util/aria-data-attrs';
+import type { GenerateSemantic } from '../_util/hooks/useMergeSemantic/semanticType';
+import type { FormatConfig, valueType } from './utils';
+export type StatisticSemanticType = {
+    classNames?: {
+        root?: string;
+        content?: string;
+        value?: string;
+        title?: string;
+        header?: string;
+        prefix?: string;
+        suffix?: string;
+    };
+    styles?: {
+        root?: React.CSSProperties;
+        content?: React.CSSProperties;
+        value?: React.CSSProperties;
+        title?: React.CSSProperties;
+        header?: React.CSSProperties;
+        prefix?: React.CSSProperties;
+        suffix?: React.CSSProperties;
+    };
+};
+export type StatisticSemanticAllType = GenerateSemantic<StatisticSemanticType, StatisticProps>;
+export interface StatisticRef {
+    nativeElement: HTMLDivElement;
+}
+interface StatisticReactProps extends FormatConfig {
+    prefixCls?: string;
+    className?: string;
+    classNames?: StatisticSemanticAllType['classNamesAndFn'];
+    styles?: StatisticSemanticAllType['stylesAndFn'];
+    rootClassName?: string;
+    style?: React.CSSProperties;
+    value?: valueType;
+    /** @deprecated Please use `styles.content` instead */
+    valueStyle?: React.CSSProperties;
+    valueRender?: (node: React.ReactNode) => React.ReactNode;
+    title?: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    loading?: boolean;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+}
+export type StatisticProps = HTMLAriaDataAttributes & StatisticReactProps;
+declare const Statistic: React.ForwardRefExoticComponent<React.AriaAttributes & {
+    [key: `data-${string}`]: unknown;
+} & Pick<React.HTMLAttributes<HTMLDivElement>, "role"> & StatisticReactProps & React.RefAttributes<StatisticRef>>;
+export default Statistic;

package/es/statistic/Statistic.js

@@ -0,0 +1,137 @@
+"use client";
+
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["prefixCls", "className", "rootClassName", "style", "valueStyle", "value", "title", "valueRender", "prefix", "suffix", "loading", "formatter", "precision", "decimalSeparator", "groupSeparator", "onMouseEnter", "onMouseLeave", "styles", "classNames"];
+import * as React from 'react';
+import { pickAttrs } from '@rc-component/util';
+import { clsx } from 'clsx';
+import { useMergeSemantic, useSemanticRootStyle } from '../_util/hooks/useMergeSemantic/index.js';
+import { isFunction } from '../_util/is.js';
+import { devUseWarning } from '../_util/warning.js';
+import { useComponentConfig } from '../config-provider/context.js';
+import Skeleton from '../skeleton/index.js';
+import StatisticNumber from './Number.js';
+import useStyle from './style/index.js';
+var Statistic = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var customizePrefixCls = props.prefixCls,
+    className = props.className,
+    rootClassName = props.rootClassName,
+    style = props.style,
+    valueStyle = props.valueStyle,
+    _props$value = props.value,
+    value = _props$value === void 0 ? 0 : _props$value,
+    title = props.title,
+    valueRender = props.valueRender,
+    prefix = props.prefix,
+    suffix = props.suffix,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    formatter = props.formatter,
+    precision = props.precision,
+    _props$decimalSeparat = props.decimalSeparator,
+    decimalSeparator = _props$decimalSeparat === void 0 ? '.' : _props$decimalSeparat,
+    _props$groupSeparator = props.groupSeparator,
+    groupSeparator = _props$groupSeparator === void 0 ? ',' : _props$groupSeparator,
+    onMouseEnter = props.onMouseEnter,
+    onMouseLeave = props.onMouseLeave,
+    styles = props.styles,
+    classNames = props.classNames,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useComponentConfig = useComponentConfig('statistic'),
+    getPrefixCls = _useComponentConfig.getPrefixCls,
+    direction = _useComponentConfig.direction,
+    contextClassName = _useComponentConfig.className,
+    contextStyle = _useComponentConfig.style,
+    contextClassNames = _useComponentConfig.classNames,
+    contextStyles = _useComponentConfig.styles;
+  var prefixCls = getPrefixCls('statistic', customizePrefixCls);
+  var _useStyle = useStyle(prefixCls),
+    _useStyle2 = _slicedToArray(_useStyle, 2),
+    hashId = _useStyle2[0],
+    cssVarCls = _useStyle2[1];
+  var mergedProps = _objectSpread(_objectSpread({}, props), {}, {
+    decimalSeparator: decimalSeparator,
+    groupSeparator: groupSeparator,
+    loading: loading,
+    value: value
+  });
+  var contextStyleRoot = useSemanticRootStyle(contextStyle);
+  var styleRoot = useSemanticRootStyle(style);
+  var _useMergeSemantic = useMergeSemantic([contextClassNames, classNames], [contextStyles, contextStyleRoot, styles, styleRoot], {
+      props: mergedProps
+    }),
+    _useMergeSemantic2 = _slicedToArray(_useMergeSemantic, 2),
+    mergedClassNames = _useMergeSemantic2[0],
+    mergedStyles = _useMergeSemantic2[1];
+  // ============================= Warning ==============================
+  if (process.env.NODE_ENV !== 'production') {
+    var warning = devUseWarning('Statistic');
+    [['valueStyle', 'styles.content']].forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        deprecatedName = _ref2[0],
+        newName = _ref2[1];
+      warning.deprecated(!(deprecatedName in props), deprecatedName, newName);
+    });
+  }
+  var rootClassNames = clsx(prefixCls, _defineProperty({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), contextClassName, className, rootClassName, mergedClassNames.root, hashId, cssVarCls);
+  var headerClassNames = clsx("".concat(prefixCls, "-header"), mergedClassNames.header);
+  var titleClassNames = clsx("".concat(prefixCls, "-title"), mergedClassNames.title);
+  var contentClassNames = clsx("".concat(prefixCls, "-content"), mergedClassNames.content);
+  var valueClassNames = clsx("".concat(prefixCls, "-content-value"), mergedClassNames.value);
+  var prefixClassNames = clsx("".concat(prefixCls, "-content-prefix"), mergedClassNames.prefix);
+  var suffixClassNames = clsx("".concat(prefixCls, "-content-suffix"), mergedClassNames.suffix);
+  var valueNode = /*#__PURE__*/React.createElement(StatisticNumber, {
+    decimalSeparator: decimalSeparator,
+    groupSeparator: groupSeparator,
+    prefixCls: prefixCls,
+    formatter: formatter,
+    precision: precision,
+    value: value,
+    className: valueClassNames,
+    style: mergedStyles.value
+  });
+  var internalRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return {
+      nativeElement: internalRef.current
+    };
+  });
+  var restProps = pickAttrs(rest, {
+    aria: true,
+    data: true
+  });
+  return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({}, restProps), {}, {
+    className: rootClassNames,
+    style: mergedStyles.root,
+    ref: internalRef,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }), title && (/*#__PURE__*/React.createElement("div", {
+    className: headerClassNames,
+    style: mergedStyles.header
+  }, /*#__PURE__*/React.createElement("div", {
+    className: titleClassNames,
+    style: mergedStyles.title
+  }, title))), /*#__PURE__*/React.createElement(Skeleton, {
+    paragraph: false,
+    loading: loading,
+    className: "".concat(prefixCls, "-skeleton"),
+    active: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: contentClassNames,
+    style: _objectSpread(_objectSpread({}, valueStyle), mergedStyles.content)
+  }, prefix && (/*#__PURE__*/React.createElement("span", {
+    className: prefixClassNames,
+    style: mergedStyles.prefix
+  }, prefix)), isFunction(valueRender) ? valueRender(valueNode) : valueNode, suffix && (/*#__PURE__*/React.createElement("span", {
+    className: suffixClassNames,
+    style: mergedStyles.suffix
+  }, suffix)))));
+});
+if (process.env.NODE_ENV !== 'production') {
+  Statistic.displayName = 'Statistic';
+}
+export default Statistic;

package/es/statistic/Timer.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { StatisticProps } from './Statistic';
+import type { FormatConfig, valueType } from './utils';
+export type TimerType = 'countdown' | 'countup';
+export interface StatisticTimerProps extends FormatConfig, StatisticProps {
+    type: TimerType;
+    format?: string;
+    /**
+     * Only to be called when the type is `countdown`.
+     */
+    onFinish?: () => void;
+    onChange?: (value?: valueType) => void;
+}
+declare const StatisticTimer: React.FC<StatisticTimerProps>;
+export default StatisticTimer;

package/es/statistic/Timer.js

@@ -0,0 +1,84 @@
+"use client";
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "format", "onChange", "onFinish", "type"];
+import * as React from 'react';
+import { useEvent } from '@rc-component/util';
+import { cloneElement } from '../_util/reactNode.js';
+import Statistic from './Statistic.js';
+import { formatCounter } from './utils.js';
+var UPDATE_INTERVAL = 1000 / 60;
+function getTime(value) {
+  return new Date(value).getTime();
+}
+var StatisticTimer = function StatisticTimer(props) {
+  var value = props.value,
+    _props$format = props.format,
+    format = _props$format === void 0 ? 'HH:mm:ss' : _props$format,
+    onChange = props.onChange,
+    onFinish = props.onFinish,
+    type = props.type,
+    rest = _objectWithoutProperties(props, _excluded);
+  var down = type === 'countdown';
+  // We reuse state here to do same as `forceUpdate`
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    showTime = _React$useState2[0],
+    setShowTime = _React$useState2[1];
+  // ======================== Update ========================
+  var update = useEvent(function () {
+    var now = Date.now();
+    var timestamp = getTime(value);
+    setShowTime({});
+    var timeDiff = !down ? now - timestamp : timestamp - now;
+    onChange === null || onChange === void 0 || onChange(timeDiff);
+    // Only countdown will trigger `onFinish`
+    if (down && timestamp < now) {
+      onFinish === null || onFinish === void 0 || onFinish();
+      return false;
+    }
+    return true;
+  });
+  // Effect trigger
+  React.useEffect(function () {
+    var intervalId;
+    var tick = function tick() {
+      if (!update()) {
+        window.clearInterval(intervalId);
+      }
+    };
+    var startTimer = function startTimer() {
+      intervalId = window.setInterval(tick, UPDATE_INTERVAL);
+    };
+    var stopTimer = function stopTimer() {
+      window.clearInterval(intervalId);
+    };
+    startTimer();
+    return function () {
+      stopTimer();
+    };
+  }, [value, down]);
+  React.useEffect(function () {
+    setShowTime({});
+  }, []);
+  // ======================== Format ========================
+  var formatter = function formatter(formatValue, config) {
+    return showTime ? formatCounter(formatValue, _objectSpread(_objectSpread({}, config), {}, {
+      format: format
+    }), down) : '-';
+  };
+  var valueRender = function valueRender(node) {
+    return cloneElement(node, {
+      title: undefined
+    });
+  };
+  // ======================== Render ========================
+  return /*#__PURE__*/React.createElement(Statistic, _objectSpread(_objectSpread({}, rest), {}, {
+    value: value,
+    valueRender: valueRender,
+    formatter: formatter
+  }));
+};
+export default StatisticTimer;

package/es/statistic/index.d.ts

@@ -0,0 +1,17 @@
+import type { CountdownProps } from './Countdown';
+import Countdown from './Countdown';
+import type { StatisticProps } from './Statistic';
+import Statistic from './Statistic';
+import type { StatisticTimerProps } from './Timer';
+import Timer from './Timer';
+export type { CountdownProps, StatisticProps, StatisticTimerProps };
+type CompoundedComponent = {
+    /**
+     * @deprecated Please use `Statistic.Timer` instead
+     */
+    Countdown: typeof Countdown;
+    Timer: typeof Timer;
+};
+export type CompoundedStatistic = typeof Statistic & CompoundedComponent;
+declare const _default: CompoundedStatistic;
+export default _default;

package/es/statistic/index.js

@@ -0,0 +1,8 @@
+"use client";
+
+import Countdown from './Countdown.js';
+import Statistic from './Statistic.js';
+import Timer from './Timer.js';
+Statistic.Timer = Timer;
+Statistic.Countdown = Countdown;
+export default Statistic;