@onesy/ui-react 1.0.130 → 1.0.132

package/Countdown/Countdown.js

@@ -1,266 +1,414 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const date_1 = require("@onesy/date");
-const style_react_1 = require("@onesy/style-react");
-const IconMaterialAvTimerW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialAvTimerW100"));
-const IconMaterialPlayArrowW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialPlayArrowW100"));
-const IconMaterialPauseW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialPauseW100"));
-const IconMaterialStopW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialStopW100"));
-const Fade_1 = __importDefault(require("../Fade"));
-const Type_1 = __importDefault(require("../Type"));
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const Surface_1 = __importDefault(require("../Surface"));
-const NumericTextField_1 = __importDefault(require("../NumericTextField"));
-const RoundProgress_1 = __importDefault(require("../RoundProgress"));
-const LinearProgress_1 = __importDefault(require("../LinearProgress"));
-const Line_1 = __importDefault(require("../Line"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        minWidth: '314px',
-        padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(5, 'px')}`,
-        borderRadius: theme.methods.shape.radius.value('rg', 'px')
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _date = require("@onesy/date");
+var _styleReact = require("@onesy/style-react");
+var _IconMaterialAvTimerW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialAvTimerW100"));
+var _IconMaterialPlayArrowW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialPlayArrowW100"));
+var _IconMaterialPauseW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialPauseW100"));
+var _IconMaterialStopW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialStopW100"));
+var _Fade = _interopRequireDefault(require("../Fade"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _NumericTextField = _interopRequireDefault(require("../NumericTextField"));
+var _RoundProgress = _interopRequireDefault(require("../RoundProgress"));
+var _LinearProgress = _interopRequireDefault(require("../LinearProgress"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "version", "renderValue", "icon", "onStart", "onPause", "onStop", "onResume", "Icon", "IconStart", "IconPause", "IconStop", "TreeProps", "TooltipProps", "RoundProgressProps", "NumericTextFieldProps", "IconButtonProps", "LinearProgressProps", "IconProps", "Component", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    minWidth: '314px',
+    padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(5, 'px')}`,
+    borderRadius: theme.methods.shape.radius.value('rg', 'px')
+  },
+  roundWrapper: {
+    position: 'relative',
+    width: '240px',
+    height: '240px'
+  },
+  linearProgress: {
+    borderRadius: theme.methods.shape.radius.value(40, 'px'),
+    '&.onesy-LinearProgress-root': {
+      height: '6px'
+    },
+    '& .onesy-LinearProgress-line, & .onesy-LinearProgress-buffer': {
+      borderRadius: theme.methods.shape.radius.value(40, 'px')
+    }
+  },
+  roundProgress: {
+    '&.onesy-RoundedProgress-root': {
+      position: 'absolute',
+      inset: '0'
     },
-    roundWrapper: {
-        position: 'relative',
-        width: '240px',
-        height: '240px'
+    '& .onesy-RoundedProgress-svg': {
+      width: '100%',
+      height: '100%',
+      margin: '0'
     },
-    linearProgress: {
-        borderRadius: theme.methods.shape.radius.value(40, 'px'),
-        '&.onesy-LinearProgress-root': {
-            height: '6px'
-        },
-        '& .onesy-LinearProgress-line, & .onesy-LinearProgress-buffer': {
-            borderRadius: theme.methods.shape.radius.value(40, 'px')
-        }
+    '& .onesy-RoundedProgress-path-background': {
+      stroke: 'currentColor',
+      opacity: '0.24'
     },
-    roundProgress: {
-        '&.onesy-RoundedProgress-root': {
-            position: 'absolute',
-            inset: '0'
-        },
-        '& .onesy-RoundedProgress-svg': {
-            width: '100%',
-            height: '100%',
-            margin: '0'
-        },
-        '& .onesy-RoundedProgress-path-background': {
-            stroke: 'currentColor',
-            opacity: '0.24'
-        },
-        '& .onesy-RoundedProgress-path, & .onesy-RoundedProgress-path-background': {
-            strokeLinecap: 'round'
-        }
+    '& .onesy-RoundedProgress-path, & .onesy-RoundedProgress-path-background': {
+      strokeLinecap: 'round'
+    }
+  },
+  meta: {
+    maxWidth: '114px',
+    textAlign: 'center'
+  },
+  numericTextField: {
+    width: '70px',
+    '& .onesy-TextField-input-wrapper': {
+      paddingInline: '0px',
+      paddingBlock: theme.methods.space.value(1, 'px'),
+      height: 'auto'
     },
-    meta: {
-        maxWidth: '114px',
-        textAlign: 'center'
+    '&.onesy-TextField-value .onesy-TextField-label, &.onesy-TextField-focus .onesy-TextField-label': {
+      insetInlineStart: '60%',
+      transform: `translate(${theme.direction === 'ltr' ? '-' : ''}50%, -16px) scale(0.667)`
     },
-    numericTextField: {
-        width: '70px',
-        '& .onesy-TextField-input-wrapper': {
-            paddingInline: '0px',
-            paddingBlock: theme.methods.space.value(1, 'px'),
-            height: 'auto'
-        },
-        '&.onesy-TextField-value .onesy-TextField-label, &.onesy-TextField-focus .onesy-TextField-label': {
-            insetInlineStart: '60%',
-            transform: `translate(${theme.direction === 'ltr' ? '-' : ''}50%, -16px) scale(0.667)`
-        },
-        '& .onesy-TextField-input': Object.assign(Object.assign({}, theme.typography.values.h2), { textAlign: 'center' }),
-        '& .onesy-TextField-border': {
-            boxShadow: 'none'
-        }
+    '& .onesy-TextField-input': _objectSpread(_objectSpread({}, theme.typography.values.h2), {}, {
+      textAlign: 'center'
+    }),
+    '& .onesy-TextField-border': {
+      boxShadow: 'none'
     }
-}), { name: 'onesy-Countdown' });
-const Countdown = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const l = theme.l;
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyCountdown) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const Fade = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Fade) || Fade_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
-    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
-    const NumericTextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.NumericTextField) || NumericTextField_1.default; }, [theme]);
-    const RoundProgress = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.RoundProgress) || RoundProgress_1.default; }, [theme]);
-    const LinearProgress = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.LinearProgress) || LinearProgress_1.default; }, [theme]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', version = 'linear', renderValue, icon = true, onStart: onStart_, onPause: onPause_, onStop: onStop_, onResume: onResume_, Icon: Icon_ = IconMaterialAvTimerW100_1.default, IconStart = IconMaterialPlayArrowW100_1.default, IconPause = IconMaterialPauseW100_1.default, IconStop = IconMaterialStopW100_1.default, TreeProps: TreeProps_, TooltipProps: TooltipProps_, RoundProgressProps: RoundProgressProps_, NumericTextFieldProps: NumericTextFieldProps_, IconButtonProps: IconButtonProps_, LinearProgressProps: LinearProgressProps_, IconProps: IconProps_, Component = 'div', className } = props, other = __rest(props, ["tonal", "color", "version", "renderValue", "icon", "onStart", "onPause", "onStop", "onResume", "Icon", "IconStart", "IconPause", "IconStop", "TreeProps", "TooltipProps", "RoundProgressProps", "NumericTextFieldProps", "IconButtonProps", "LinearProgressProps", "IconProps", "Component", "className"]);
-    const { classes } = useStyle();
-    const [status, setStatus] = react_1.default.useState('initial');
-    const [value, setValue] = react_1.default.useState(0);
-    const [values, setValues] = react_1.default.useState({
-        hours: 0,
-        minutes: 0,
-        seconds: 0
-    });
-    const refs = {
-        start: react_1.default.useRef(0),
-        valuePaused: react_1.default.useRef(0),
-        value: react_1.default.useRef(undefined),
-        total: react_1.default.useRef(undefined),
-        values: react_1.default.useRef(undefined),
-        animationFrame: react_1.default.useRef(undefined)
-    };
-    refs.value.current = value;
-    refs.values.current = values;
-    const updateValues = (property, valueItem) => {
-        setValues(values_ => (Object.assign(Object.assign({}, values_), { [property]: valueItem })));
-    };
-    const clear = () => {
-        cancelAnimationFrame(refs.animationFrame.current);
-    };
-    react_1.default.useEffect(() => {
-        return () => {
-            // Clean up
-            clear();
-        };
-    }, []);
-    const update = () => {
-        if (refs.value.current <= 0) {
-            // Wait for linear, round progress
-            // transitions to end
-            setTimeout(() => {
-                setStatus('initial');
-            }, 1400);
-            return clear();
-        }
-        setValue(refs.valuePaused.current - (date_1.OnesyDate.milliseconds - refs.start.current));
-        refs.animationFrame.current = requestAnimationFrame(update);
+  }
+}), {
+  name: 'onesy-Countdown'
+});
+const Countdown = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const l = theme.l;
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyCountdown) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Line = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  }, [theme]);
+  const Fade = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Fade) || _Fade.default;
+  }, [theme]);
+  const Type = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
+  }, [theme]);
+  const Tooltip = _react.default.useMemo(() => {
+    var _theme$elements4;
+    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Tooltip) || _Tooltip.default;
+  }, [theme]);
+  const Surface = _react.default.useMemo(() => {
+    var _theme$elements5;
+    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Surface) || _Surface.default;
+  }, [theme]);
+  const NumericTextField = _react.default.useMemo(() => {
+    var _theme$elements6;
+    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.NumericTextField) || _NumericTextField.default;
+  }, [theme]);
+  const RoundProgress = _react.default.useMemo(() => {
+    var _theme$elements7;
+    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.RoundProgress) || _RoundProgress.default;
+  }, [theme]);
+  const LinearProgress = _react.default.useMemo(() => {
+    var _theme$elements8;
+    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.LinearProgress) || _LinearProgress.default;
+  }, [theme]);
+  const IconButton = _react.default.useMemo(() => {
+    var _theme$elements9;
+    return (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.IconButton) || _IconButton.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      version = 'linear',
+      renderValue,
+      icon = true,
+      onStart: onStart_,
+      onPause: onPause_,
+      onStop: onStop_,
+      onResume: onResume_,
+      Icon: Icon_ = _IconMaterialAvTimerW.default,
+      IconStart = _IconMaterialPlayArrowW.default,
+      IconPause = _IconMaterialPauseW.default,
+      IconStop = _IconMaterialStopW.default,
+      TreeProps: TreeProps_,
+      TooltipProps: TooltipProps_,
+      RoundProgressProps: RoundProgressProps_,
+      NumericTextFieldProps: NumericTextFieldProps_,
+      IconButtonProps: IconButtonProps_,
+      LinearProgressProps: LinearProgressProps_,
+      IconProps: IconProps_,
+      Component = 'div',
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [status, setStatus] = _react.default.useState('initial');
+  const [value, setValue] = _react.default.useState(0);
+  const [values, setValues] = _react.default.useState({
+    hours: 0,
+    minutes: 0,
+    seconds: 0
+  });
+  const refs = {
+    start: _react.default.useRef(0),
+    valuePaused: _react.default.useRef(0),
+    value: _react.default.useRef(undefined),
+    total: _react.default.useRef(undefined),
+    values: _react.default.useRef(undefined),
+    animationFrame: _react.default.useRef(undefined)
+  };
+  refs.value.current = value;
+  refs.values.current = values;
+  const updateValues = (property, valueItem) => {
+    setValues(values_ => _objectSpread(_objectSpread({}, values_), {}, {
+      [property]: valueItem
+    }));
+  };
+  const clear = () => {
+    cancelAnimationFrame(refs.animationFrame.current);
+  };
+  _react.default.useEffect(() => {
+    return () => {
+      // Clean up
+      clear();
     };
-    const onStart = react_1.default.useCallback((event) => {
-        refs.total.current = refs.valuePaused.current = (((refs.values.current.hours || 0) * (60 ** 2) * 1e3) +
-            ((refs.values.current.minutes || 0) * (60 ** 1) * 1e3) +
-            ((refs.values.current.seconds || 0) * 1e3));
-        setValue(refs.valuePaused.current);
-        setStatus('running');
-        setTimeout(() => {
-            refs.start.current = date_1.OnesyDate.milliseconds;
-            refs.animationFrame.current = requestAnimationFrame(update);
-        }, 14);
-        if ((0, utils_1.is)('function', onStart_))
-            onStart_(event);
-    }, []);
-    const onPause = react_1.default.useCallback((event) => {
-        clear();
-        // Remember previous value
-        refs.valuePaused.current = refs.value.current;
-        setStatus('paused');
-        if ((0, utils_1.is)('function', onPause_))
-            onPause_(event);
-    }, []);
-    const onStop = react_1.default.useCallback((event) => {
-        clear();
-        refs.start.current = 0;
-        refs.valuePaused.current = 0;
-        refs.value.current = 0;
+  }, []);
+  const update = () => {
+    if (refs.value.current <= 0) {
+      // Wait for linear, round progress
+      // transitions to end
+      setTimeout(() => {
         setStatus('initial');
-        setValue(0);
-        if ((0, utils_1.is)('function', onStop_))
-            onStop_(event);
-    }, []);
-    const onResume = react_1.default.useCallback((event) => {
-        // Update start, valuePaused value
-        refs.start.current = date_1.OnesyDate.milliseconds;
-        // ~60+ fps
-        refs.animationFrame.current = requestAnimationFrame(update);
-        setStatus('running');
-        if ((0, utils_1.is)('function', onResume_))
-            onResume_(event);
-    }, []);
-    const IconProps = Object.assign({}, IconProps_);
-    const TooltipProps = Object.assign({ portal: true, interactive: false }, TooltipProps_);
-    const NumericTextFieldProps = Object.assign({ tonal, color: 'inherit', size: 'small', version: 'text', increment: false, decrement: false }, NumericTextFieldProps_);
-    const RoundProgressProps = Object.assign({ tonal,
-        color, rounded: true, thickness: 1 }, RoundProgressProps_);
-    const LinearProgressProps = Object.assign({ tonal,
-        color }, LinearProgressProps_);
-    const IconButtonProps = Object.assign({ tonal, color: 'inherit', version: 'text' }, IconButtonProps_);
-    const valueFormat = (valueNew_) => {
-        let valueNew = '';
-        const valueDuration = (0, date_1.duration)(valueNew_, undefined, true, undefined, ['hour', 'minute', 'second']);
-        valueNew += `${(0, utils_1.getLeadingZerosNumber)(valueDuration.hour || 0)}:`;
-        valueNew += `${(0, utils_1.getLeadingZerosNumber)(valueDuration.minute || 0)}:`;
-        valueNew += `${(0, utils_1.getLeadingZerosNumber)(valueDuration.second || 0)}`;
-        return valueNew;
-    };
-    const value_ = status === 'initial' ? '00:00:00' : valueFormat(value);
-    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: ref, tonal: tonal, color: color, gap: 1, direction: 'column', align: 'center', Component: Line, AdditionalProps: {
-            Component
-        }, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('Countdown', theme) && [
-                'onesy-Countdown-root'
-            ],
-            className,
-            classes.root
-        ]) }, other, { children: [icon && ((0, jsx_runtime_1.jsx)(Icon_, Object.assign({ size: 'medium' }, IconProps, { style: Object.assign({ marginBottom: 4 }, IconProps === null || IconProps === void 0 ? void 0 : IconProps.style) }))), status === 'initial' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'flex-end', style: {
-                        marginTop: 12,
-                        marginBottom: -8
-                    } }, { children: [(0, jsx_runtime_1.jsx)(NumericTextField, Object.assign({ name: l('Hours'), min: 0, max: 23, value: values.hours, onChange: valueNew => updateValues('hours', !valueNew ? 0 : valueNew) }, NumericTextFieldProps, { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Countdown', theme) && [
-                                    'onesy-Countdown-numeric-text-field'
-                                ],
-                                NumericTextFieldProps === null || NumericTextFieldProps === void 0 ? void 0 : NumericTextFieldProps.className,
-                                classes.numericTextField
-                            ]) })), (0, jsx_runtime_1.jsx)(NumericTextField, Object.assign({ name: l('Minutes'), min: 0, max: 59, value: values.minutes, onChange: valueNew => updateValues('minutes', !valueNew ? 0 : valueNew) }, NumericTextFieldProps, { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Countdown', theme) && [
-                                    'onesy-Countdown-numeric-text-field'
-                                ],
-                                NumericTextFieldProps === null || NumericTextFieldProps === void 0 ? void 0 : NumericTextFieldProps.className,
-                                classes.numericTextField
-                            ]) })), (0, jsx_runtime_1.jsx)(NumericTextField, Object.assign({ name: l('Seconds'), min: 0, max: 59, value: values.seconds, onChange: valueNew => updateValues('seconds', !valueNew ? 0 : valueNew) }, NumericTextFieldProps, { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Countdown', theme) && [
-                                    'onesy-Countdown-numeric-text-field'
-                                ],
-                                NumericTextFieldProps === null || NumericTextFieldProps === void 0 ? void 0 : NumericTextFieldProps.className,
-                                classes.numericTextField
-                            ]) }))] })) }))), status !== 'initial' && ['regular', 'linear'].includes(version) && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'column', align: 'center', justify: 'center', style: {
-                        width: '100%'
-                    } }, { children: [(0, utils_1.is)('function', renderValue) ? renderValue(value_) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h1' }, { children: value_ }))), version === 'linear' && ((0, jsx_runtime_1.jsx)(LinearProgress, Object.assign({ version: 'determinate', value: (0, utils_1.clamp)(Math.round(((value / 1000) / (refs.total.current / 1000)) * 100), 0, 100), reverse: true, style: {
-                                margin: '4px 0 8px'
-                            } }, LinearProgressProps, { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Countdown', theme) && [
-                                    'onesy-Countdown-linear-progress'
-                                ],
-                                LinearProgressProps === null || LinearProgressProps === void 0 ? void 0 : LinearProgressProps.className,
-                                classes.linearProgress
-                            ]) })))] })) }))), status !== 'initial' && ['round'].includes(version) && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.5, direction: 'column', align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('Countdown', theme) && [
-                            'onesy-Countdown-round-wrapper'
-                        ],
-                        classes.roundWrapper
-                    ]) }, { children: [(0, jsx_runtime_1.jsx)(RoundProgress, Object.assign({ version: 'determinate', value: (0, utils_1.clamp)(Math.round(((value / 1000) / (refs.total.current / 1000)) * 100), 0, 100) }, RoundProgressProps, { className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Countdown', theme) && [
-                                    'onesy-Countdown-round-progress'
-                                ],
-                                RoundProgressProps === null || RoundProgressProps === void 0 ? void 0 : RoundProgressProps.className,
-                                classes.roundProgress
-                            ]) })), (0, utils_1.is)('function', renderValue) ? renderValue(value_) : ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'h1' }, { children: value_ }))), (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b3', className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('Countdown', theme) && [
-                                    'onesy-Countdown-meta'
-                                ],
-                                classes.meta
-                            ]) }, { children: [l('Total'), " ", (0, date_1.duration)(refs.total.current, false)] }))] })) }))), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center' }, { children: [status === 'initial' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Start') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStart, disabled: !((values.hours || 0) + (values.minutes || 0) + (values.seconds || 0)) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStart, {}) })) })) }) }))), status === 'running' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Stop') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Pause') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onPause }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconPause, {}) })) }))] }) }))), status === 'paused' && ((0, jsx_runtime_1.jsx)(Fade, Object.assign({ in: true, add: true }, { children: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Stop') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onStop }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStop, {}) })) })), (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Resume') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onResume }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconStart, {}) })) }))] }) })))] }))] })));
+      }, 1400);
+      return clear();
+    }
+    setValue(refs.valuePaused.current - (_date.OnesyDate.milliseconds - refs.start.current));
+    refs.animationFrame.current = requestAnimationFrame(update);
+  };
+  const onStart = _react.default.useCallback(event => {
+    refs.total.current = refs.valuePaused.current = (refs.values.current.hours || 0) * 60 ** 2 * 1e3 + (refs.values.current.minutes || 0) * 60 ** 1 * 1e3 + (refs.values.current.seconds || 0) * 1e3;
+    setValue(refs.valuePaused.current);
+    setStatus('running');
+    setTimeout(() => {
+      refs.start.current = _date.OnesyDate.milliseconds;
+      refs.animationFrame.current = requestAnimationFrame(update);
+    }, 14);
+    if ((0, _utils.is)('function', onStart_)) onStart_(event);
+  }, []);
+  const onPause = _react.default.useCallback(event => {
+    clear();
+
+    // Remember previous value
+    refs.valuePaused.current = refs.value.current;
+    setStatus('paused');
+    if ((0, _utils.is)('function', onPause_)) onPause_(event);
+  }, []);
+  const onStop = _react.default.useCallback(event => {
+    clear();
+    refs.start.current = 0;
+    refs.valuePaused.current = 0;
+    refs.value.current = 0;
+    setStatus('initial');
+    setValue(0);
+    if ((0, _utils.is)('function', onStop_)) onStop_(event);
+  }, []);
+  const onResume = _react.default.useCallback(event => {
+    // Update start, valuePaused value
+    refs.start.current = _date.OnesyDate.milliseconds;
+
+    // ~60+ fps
+    refs.animationFrame.current = requestAnimationFrame(update);
+    setStatus('running');
+    if ((0, _utils.is)('function', onResume_)) onResume_(event);
+  }, []);
+  const IconProps = _objectSpread({}, IconProps_);
+  const TooltipProps = _objectSpread({
+    portal: true,
+    interactive: false
+  }, TooltipProps_);
+  const NumericTextFieldProps = _objectSpread({
+    tonal,
+    color: 'inherit',
+    size: 'small',
+    version: 'text',
+    increment: false,
+    decrement: false
+  }, NumericTextFieldProps_);
+  const RoundProgressProps = _objectSpread({
+    tonal,
+    color,
+    rounded: true,
+    thickness: 1
+  }, RoundProgressProps_);
+  const LinearProgressProps = _objectSpread({
+    tonal,
+    color
+  }, LinearProgressProps_);
+  const IconButtonProps = _objectSpread({
+    tonal,
+    color: 'inherit',
+    version: 'text'
+  }, IconButtonProps_);
+  const valueFormat = valueNew_ => {
+    let valueNew = '';
+    const valueDuration = (0, _date.duration)(valueNew_, undefined, true, undefined, ['hour', 'minute', 'second']);
+    valueNew += `${(0, _utils.getLeadingZerosNumber)(valueDuration.hour || 0)}:`;
+    valueNew += `${(0, _utils.getLeadingZerosNumber)(valueDuration.minute || 0)}:`;
+    valueNew += `${(0, _utils.getLeadingZerosNumber)(valueDuration.second || 0)}`;
+    return valueNew;
+  };
+  const value_ = status === 'initial' ? '00:00:00' : valueFormat(value);
+  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+    ref: ref,
+    tonal: tonal,
+    color: color,
+    gap: 1,
+    direction: "column",
+    align: "center",
+    Component: Line,
+    AdditionalProps: {
+      Component
+    },
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Countdown', theme) && ['onesy-Countdown-root'], className, classes.root])
+  }, other), icon && /*#__PURE__*/_react.default.createElement(Icon_, (0, _extends2.default)({
+    size: "medium"
+  }, IconProps, {
+    style: _objectSpread({
+      marginBottom: 4
+    }, IconProps === null || IconProps === void 0 ? void 0 : IconProps.style)
+  })), status === 'initial' && /*#__PURE__*/_react.default.createElement(Fade, {
+    in: true,
+    add: true
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "flex-end",
+    style: {
+      marginTop: 12,
+      marginBottom: -8
+    }
+  }, /*#__PURE__*/_react.default.createElement(NumericTextField, (0, _extends2.default)({
+    name: l('Hours'),
+    min: 0,
+    max: 23,
+    value: values.hours,
+    onChange: valueNew => updateValues('hours', !valueNew ? 0 : valueNew)
+  }, NumericTextFieldProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps === null || NumericTextFieldProps === void 0 ? void 0 : NumericTextFieldProps.className, classes.numericTextField])
+  })), /*#__PURE__*/_react.default.createElement(NumericTextField, (0, _extends2.default)({
+    name: l('Minutes'),
+    min: 0,
+    max: 59,
+    value: values.minutes,
+    onChange: valueNew => updateValues('minutes', !valueNew ? 0 : valueNew)
+  }, NumericTextFieldProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps === null || NumericTextFieldProps === void 0 ? void 0 : NumericTextFieldProps.className, classes.numericTextField])
+  })), /*#__PURE__*/_react.default.createElement(NumericTextField, (0, _extends2.default)({
+    name: l('Seconds'),
+    min: 0,
+    max: 59,
+    value: values.seconds,
+    onChange: valueNew => updateValues('seconds', !valueNew ? 0 : valueNew)
+  }, NumericTextFieldProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps === null || NumericTextFieldProps === void 0 ? void 0 : NumericTextFieldProps.className, classes.numericTextField])
+  })))), status !== 'initial' && ['regular', 'linear'].includes(version) && /*#__PURE__*/_react.default.createElement(Fade, {
+    in: true,
+    add: true
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: "column",
+    align: "center",
+    justify: "center",
+    style: {
+      width: '100%'
+    }
+  }, (0, _utils.is)('function', renderValue) ? renderValue(value_) : /*#__PURE__*/_react.default.createElement(Type, {
+    version: "h1"
+  }, value_), version === 'linear' && /*#__PURE__*/_react.default.createElement(LinearProgress, (0, _extends2.default)({
+    version: "determinate",
+    value: (0, _utils.clamp)(Math.round(value / 1000 / (refs.total.current / 1000) * 100), 0, 100),
+    reverse: true,
+    style: {
+      margin: '4px 0 8px'
+    }
+  }, LinearProgressProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Countdown', theme) && ['onesy-Countdown-linear-progress'], LinearProgressProps === null || LinearProgressProps === void 0 ? void 0 : LinearProgressProps.className, classes.linearProgress])
+  })))), status !== 'initial' && ['round'].includes(version) && /*#__PURE__*/_react.default.createElement(Fade, {
+    in: true,
+    add: true
+  }, /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 0.5,
+    direction: "column",
+    align: "center",
+    justify: "center",
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Countdown', theme) && ['onesy-Countdown-round-wrapper'], classes.roundWrapper])
+  }, /*#__PURE__*/_react.default.createElement(RoundProgress, (0, _extends2.default)({
+    version: "determinate",
+    value: (0, _utils.clamp)(Math.round(value / 1000 / (refs.total.current / 1000) * 100), 0, 100)
+  }, RoundProgressProps, {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Countdown', theme) && ['onesy-Countdown-round-progress'], RoundProgressProps === null || RoundProgressProps === void 0 ? void 0 : RoundProgressProps.className, classes.roundProgress])
+  })), (0, _utils.is)('function', renderValue) ? renderValue(value_) : /*#__PURE__*/_react.default.createElement(Type, {
+    version: "h1"
+  }, value_), /*#__PURE__*/_react.default.createElement(Type, {
+    version: "b3",
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Countdown', theme) && ['onesy-Countdown-meta'], classes.meta])
+  }, l('Total'), " ", (0, _date.duration)(refs.total.current, false)))), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "center",
+    justify: "center"
+  }, status === 'initial' && /*#__PURE__*/_react.default.createElement(Fade, {
+    in: true,
+    add: true
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: l('Start')
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onStart,
+    disabled: !((values.hours || 0) + (values.minutes || 0) + (values.seconds || 0))
+  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconStart, null))))), status === 'running' && /*#__PURE__*/_react.default.createElement(Fade, {
+    in: true,
+    add: true
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: l('Stop')
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onStop
+  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconStop, null))), /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: l('Pause')
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onPause
+  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconPause, null))))), status === 'paused' && /*#__PURE__*/_react.default.createElement(Fade, {
+    in: true,
+    add: true
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: l('Stop')
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onStop
+  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconStop, null))), /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: l('Resume')
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onResume
+  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconStart, null)))))));
 });
 Countdown.displayName = 'onesy-Countdown';
-exports.default = Countdown;
+var _default = exports.default = Countdown;