@ucloud-fe/react-components 1.5.17 → 1.5.18

package/lib/components/ThemeProvider/theme.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "defaultDesignTokens", {
+  enumerable: true,
+  get: function get() {
+    return _designTokens.default;
+  }
+});
+exports.defaultTheme = exports.default = exports.generateTheme = exports.extend = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _omit2 = _interopRequireDefault(require("lodash/omit"));
+
+var _keys2 = _interopRequireDefault(require("lodash/keys"));
+
+var _mapValues2 = _interopRequireDefault(require("lodash/mapValues"));
+
+var _pick2 = _interopRequireDefault(require("lodash/pick"));
+
+var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
+
+var _each2 = _interopRequireDefault(require("lodash/each"));
+
+var _designTokens = _interopRequireDefault(require("./designTokens"));
+
+var _this = void 0;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var defaultSizeTheme = {
+  // default font-size
+  fontSize: '12px',
+  // font-size of title
+  titleFontSize: '14px',
+  // height of size (px)
+  Height: {
+    sm: '24px',
+    md: '28px',
+    lg: '32px'
+  },
+  // padding of size (px)
+  Padding: {
+    sm: '8px',
+    md: '8px',
+    lg: '12px'
+  }
+};
+var componentThemeGeneratorMap = {};
+
+var extend = function extend(source, target) {
+  var _this2 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+  var cloneSource = JSON.parse(JSON.stringify(source));
+
+  var _extend2 = function _extend(source, target) {
+    var _this3 = this;
+
+    (0, _newArrowCheck2.default)(this, _this2);
+    (0, _each2.default)(target, function (v, k) {
+      (0, _newArrowCheck2.default)(this, _this3);
+
+      if ((0, _isObject2.default)(v) && (0, _isObject2.default)(source[k])) {
+        source[k] = _extend2(source[k], v);
+      } else {
+        source[k] = v;
+      }
+    }.bind(this));
+    return source;
+  }.bind(this);
+
+  return _extend2(cloneSource, target);
+}.bind(void 0);
+
+exports.extend = extend;
+
+var generateTheme = function generateTheme() {
+  var _this4 = this;
+
+  var originTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var originDesignTokens = originTheme.designTokens;
+  var sizeTheme = (0, _pick2.default)(originTheme, ['fontSize', 'titleFontSize', 'Height', 'Padding']);
+
+  var theme = _objectSpread(_objectSpread(_objectSpread({}, defaultSizeTheme), sizeTheme), {}, {
+    designTokens: _objectSpread(_objectSpread({}, _designTokens.default), originDesignTokens)
+  });
+
+  theme.HeightNumber = (0, _mapValues2.default)(theme.Height, function (v) {
+    (0, _newArrowCheck2.default)(this, _this4);
+    return +v.replace('px', '');
+  }.bind(this));
+  var componentNames = (0, _keys2.default)(componentThemeGeneratorMap);
+  theme = extend(theme, (0, _omit2.default)(originTheme, componentNames));
+  var componentTheme = (0, _mapValues2.default)(componentThemeGeneratorMap, function (componentThemeGenerator) {
+    (0, _newArrowCheck2.default)(this, _this4);
+    return componentThemeGenerator(theme);
+  }.bind(this));
+  return extend(_objectSpread(_objectSpread({}, theme), componentTheme), (0, _pick2.default)(originTheme, componentNames));
+};
+
+exports.generateTheme = generateTheme;
+var defaultTheme = generateTheme();
+exports.defaultTheme = defaultTheme;
+var _default = defaultTheme;
+exports.default = _default;

package/lib/components/ThemeProvider/useDesignTokens.d.ts

@@ -0,0 +1,2 @@
+declare const useDesignTokens: () => any;
+export default useDesignTokens;

package/lib/components/ThemeProvider/useDesignTokens.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _emotionTheming = require("emotion-theming");
+
+var _style = require("../../style");
+
+var _this = void 0;
+
+var useDesignTokens = function useDesignTokens() {
+  (0, _newArrowCheck2.default)(this, _this);
+  var theme = (0, _emotionTheming.useTheme)();
+  if (!Object.keys(theme).length) return _style.defaultTheme.designTokens;
+  return theme.designTokens;
+}.bind(void 0);
+
+var _default = useDesignTokens;
+exports.default = _default;

package/lib/components/TimePicker/Time.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Override } from '../../type';
+declare type TimeProps = Override<React.HTMLAttributes<HTMLDivElement>, {
+    value?: Date | undefined;
+    defaultValue?: Date | undefined;
+    onChange?: ((d: Date) => void) | undefined;
+    mode?: ('s' | 'm' | 'HH' | 'H' | 'mm' | 'ss')[] | undefined;
+    prefixCls?: string | undefined;
+}>;
+declare const _default: React.MemoExoticComponent<(props: TimeProps) => JSX.Element>;
+export default _default;

package/lib/components/TimePicker/Time.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _style = require("./style");
+
+var _util = require("./util");
+
+var _this = void 0;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Time = function Time(props) {
+  (0, _newArrowCheck2.default)(this, _this);
+  return /*#__PURE__*/_react.default.createElement(_style.STime, (0, _extends2.default)({
+    scrollTo: _util.scrollTo
+  }, props, {
+    prefixCls: _style.timePrefixCls
+  }));
+}.bind(void 0);
+
+var _default = /*#__PURE__*/(0, _react.memo)(Time);
+
+exports.default = _default;

package/lib/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Moment } from 'moment';
+import { TDate } from '@ucloud-fe/calendar';
+import { Size } from '../../style';
+import LOCALE from './locale/zh_CN';
+interface TimeProps {
+    /** 当前值，受控 */
+    value?: TDate | null;
+    /** 默认值，非受控 */
+    defaultValue?: TDate | null;
+    /** 修改回调 */
+    onChange?: (value: Moment | null) => void;
+    /** 自定义 Popover 的 props */
+    popoverProps?: any;
+    /** 是否可为空 */
+    nullable?: boolean;
+    /** 自定义展示格式 */
+    format?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 尺寸 */
+    size?: Size;
+    /** @ignore */
+    locale?: typeof LOCALE;
+}
+declare const _default: React.MemoExoticComponent<({ value: _value, defaultValue, onChange: _onChange, format: _format, nullable, size, disabled, popoverProps, locale }: TimeProps) => JSX.Element>;
+export default _default;

package/lib/components/TimePicker/TimePicker.js

@@ -0,0 +1,282 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _Input = _interopRequireDefault(require("../../components/Input"));
+
+var _Popover = _interopRequireDefault(require("../../components/Popover"));
+
+var _Box = _interopRequireDefault(require("../../components/Box"));
+
+var _Button = _interopRequireDefault(require("../../components/Button"));
+
+var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
+
+var _useLocale = _interopRequireDefault(require("../../components/LocaleProvider/useLocale"));
+
+var _globalAnimation = require("../../style/globalAnimation");
+
+var _useUncontrolled3 = _interopRequireDefault(require("../../hooks/useUncontrolled"));
+
+var _usePopoverConfig = _interopRequireDefault(require("../../hooks/usePopoverConfig"));
+
+var _style = require("./style");
+
+var _Time = _interopRequireDefault(require("./Time"));
+
+var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));
+
+var _this = void 0;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var FooterWithoutMemo = function FooterWithoutMemo(_ref) {
+  var _this2 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+  var onConfirm = _ref.onConfirm,
+      disabled = _ref.disabled,
+      _locale = _ref.locale;
+  var locale = (0, _useLocale.default)(_zh_CN.default, 'DatePicker', _locale);
+  var handleConfirm = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    onConfirm();
+  }.bind(this), [onConfirm]);
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    className: _style.footerCls,
+    container: true,
+    justifyContent: "space-between",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    styleType: "primary",
+    size: "sm",
+    onClick: handleConfirm,
+    disabled: disabled
+  }, locale.confirm));
+}.bind(void 0);
+
+var Footer = /*#__PURE__*/(0, _react.memo)(FooterWithoutMemo);
+
+var inputToTime = function inputToTime(v, format) {
+  (0, _newArrowCheck2.default)(this, _this);
+  if (v == '') return null;
+  v = v.replace(/：/g, ':').trim();
+  return (0, _moment.default)(v, format.trim(), true);
+}.bind(void 0);
+
+var timeToInput = function timeToInput(v, format) {
+  (0, _newArrowCheck2.default)(this, _this);
+  if (v == null) return '';
+  return (0, _moment.default)(+v).format(format);
+}.bind(void 0);
+
+var formatToTimeMode = function formatToTimeMode(format) {
+  (0, _newArrowCheck2.default)(this, _this);
+  var timeMode = [];
+  if (format.indexOf('H') >= 0) timeMode.push('HH');
+  if (format.indexOf('m') >= 0) timeMode.push('mm');
+  if (format.indexOf('s') >= 0) timeMode.push('ss');
+  return timeMode;
+}.bind(void 0);
+
+var DefaultFormat = 'HH:mm:ss';
+
+var TimePicker = function TimePicker(_ref2) {
+  var _this3 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+
+  var _value = _ref2.value,
+      defaultValue = _ref2.defaultValue,
+      _onChange = _ref2.onChange,
+      _ref2$format = _ref2.format,
+      _format = _ref2$format === void 0 ? DefaultFormat : _ref2$format,
+      nullable = _ref2.nullable,
+      size = _ref2.size,
+      disabled = _ref2.disabled,
+      popoverProps = _ref2.popoverProps,
+      locale = _ref2.locale;
+
+  var _useUncontrolled = (0, _useUncontrolled3.default)(_value, defaultValue, _onChange),
+      _useUncontrolled2 = (0, _slicedToArray2.default)(_useUncontrolled, 2),
+      value = _useUncontrolled2[0],
+      onChange = _useUncontrolled2[1];
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(value),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      timeValue = _useState4[0],
+      setTimeValue = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(true),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      useInputValue = _useState6[0],
+      setUseInputValue = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      active = _useState8[0],
+      setActive = _useState8[1];
+
+  var defaultTime = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this3);
+    return (0, _moment.default)().startOf('date');
+  }.bind(this), []);
+  var avoidBlur = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this3);
+    return e.preventDefault();
+  }.bind(this), []);
+  var format = _format || DefaultFormat;
+  var handleConfirm = (0, _react.useCallback)(function (value) {
+    (0, _newArrowCheck2.default)(this, _this3);
+    setActive(false);
+    var finalValue = timeValue;
+
+    if (value !== undefined) {
+      onChange(value === null ? null : (0, _moment.default)(+value));
+      return;
+    }
+
+    if (useInputValue) {
+      var inputTime = inputToTime(inputValue, format);
+
+      if (inputTime) {
+        finalValue = inputTime;
+        if (inputTime.isValid()) return;
+      } else {
+        finalValue = null;
+      }
+    }
+
+    if (finalValue == null && !nullable) return;
+    onChange(finalValue == null ? null : (0, _moment.default)(+finalValue));
+  }.bind(this), [format, inputValue, nullable, onChange, timeValue, useInputValue]);
+  var handleInputChange = (0, _react.useCallback)(function (e) {
+    (0, _newArrowCheck2.default)(this, _this3);
+    var s = e.target.value;
+    setInputValue(s);
+    var inputTime = inputToTime(s, format);
+    if (inputTime && inputTime.isValid()) setTimeValue(inputTime);
+    setUseInputValue(true);
+  }.bind(this), [format]);
+  var handleTimeChange = (0, _react.useCallback)(function (v) {
+    (0, _newArrowCheck2.default)(this, _this3);
+    setTimeValue(v);
+    setInputValue(timeToInput(v, format));
+    setUseInputValue(false);
+  }.bind(this), [format]);
+  var handleInputFocus = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this3);
+    return setActive(true);
+  }.bind(this), []);
+  var handleInputBlur = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this3);
+    return setActive(false);
+  }.bind(this), []);
+  var handleInputClear = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this3);
+    nullable && handleConfirm(null);
+  }.bind(this), [handleConfirm, nullable]);
+  var formatTimeValue = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this3);
+    return new Date(+(timeValue == null ? defaultTime : timeValue));
+  }.bind(this), [defaultTime, timeValue]);
+  var isValid = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this3);
+
+    if (useInputValue) {
+      var inputTime = inputToTime(inputValue, format);
+      if (inputTime) return inputTime.isValid();
+      return nullable;
+    }
+
+    return true;
+  }.bind(this), [format, inputValue, nullable, useInputValue]);
+  var timeMode = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this3);
+    return formatToTimeMode(format);
+  }.bind(this), [format]);
+  var popoverConfigProps = (0, _usePopoverConfig.default)();
+  (0, _react.useEffect)(function () {
+    (0, _newArrowCheck2.default)(this, _this3);
+
+    if (!active) {
+      setTimeValue(value);
+      setInputValue(value == null ? nullable ? '' : timeToInput(defaultTime, format) : timeToInput(value, format));
+    }
+  }.bind(this), [active, defaultTime, format, nullable, value]);
+  return /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
+    transitionName: "".concat(_globalAnimation.animationPrefixCls, "-fade")
+  }, popoverConfigProps, popoverProps, {
+    trigger: [],
+    visible: active,
+    onVisibleChange: setActive,
+    popup: /*#__PURE__*/_react.default.createElement(_style.SPopup, {
+      onMouseDown: avoidBlur
+    }, /*#__PURE__*/_react.default.createElement(_Time.default, {
+      value: formatTimeValue,
+      onChange: handleTimeChange,
+      mode: timeMode
+    }), /*#__PURE__*/_react.default.createElement(Footer, {
+      onConfirm: handleConfirm,
+      disabled: !isValid,
+      locale: locale
+    }))
+  }), /*#__PURE__*/_react.default.createElement(_style.SWrap, {
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+    value: inputValue,
+    onChange: handleInputChange,
+    onBlur: handleInputBlur,
+    onFocus: handleInputFocus,
+    onClick: handleInputFocus,
+    onClear: handleInputClear,
+    size: size,
+    disabled: disabled,
+    clearable: nullable ? {
+      autoFocus: false,
+      callOnChange: false
+    } : false,
+    prefix: /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+      type: "clock"
+    })
+  })));
+}.bind(void 0);
+
+TimePicker.propTypes = {
+  onChange: _propTypes.default.func,
+  popoverProps: _propTypes.default.any,
+  nullable: _propTypes.default.bool,
+  format: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  locale: _propTypes.default.any
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)(TimePicker);
+
+exports.default = _default;

package/lib/components/TimePicker/index.d.ts

@@ -0,0 +1,2 @@
+import TimePicker from './TimePicker';
+export default TimePicker;

package/lib/components/TimePicker/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _TimePicker = _interopRequireDefault(require("./TimePicker"));
+
+var _default = _TimePicker.default;
+exports.default = _default;

package/lib/components/TimePicker/locale/en_US.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  confirm: 'Confirm'
+};
+exports.default = _default;

package/lib/components/TimePicker/locale/zh_CN.d.ts

@@ -0,0 +1,4 @@
+declare namespace _default {
+    const confirm: string;
+}
+export default _default;

package/lib/components/TimePicker/locale/zh_CN.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  confirm: '确定'
+};
+exports.default = _default;

package/lib/components/TimePicker/style/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const prefixCls: string;
+export declare const timePrefixCls: string;
+export declare const shortcutCls: string;
+export declare const footerCls: string;
+export declare const SWrap: import("react").ForwardRefExoticComponent<{
+    disabled?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLElement> & {
+    theme?: import("../../../style").Theme | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+export declare const SPopup: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & {
+    theme?: import("../../../style").Theme | undefined;
+} & import("react").RefAttributes<HTMLElement>>;
+export declare const STime: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<HTMLElement>>;