@onesy/ui-react 1.0.172 → 1.0.173

package/esm/Countdown/Countdown.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "renderValue", "icon", "onStart", "onPause", "onStop", "onResume", "Icon", "IconStart", "IconPause", "IconStop", "TreeProps", "TooltipProps", "RoundProgressProps", "NumericTextFieldProps", "IconButtonProps", "LinearProgressProps", "IconProps", "Component", "className"];
@@ -22,6 +21,7 @@ import LinearProgressElement from '../LinearProgress';
 import LineElement from '../Line';
 import IconButtonElement from '../IconButton';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     minWidth: '314px',
@@ -85,7 +85,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Countdown'
 });
-const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Countdown = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCountdown?.props?.default), props_);
@@ -242,8 +242,7 @@ const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
     return valueNew;
   };
   const value_ = status === 'initial' ? '00:00:00' : valueFormat(value);
-  return /*#__PURE__*/React.createElement(Surface, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
     tonal: tonal,
     color: color,
     gap: 1,
@@ -254,124 +253,165 @@ const Countdown = /*#__PURE__*/React.forwardRef((props_, ref) => {
       Component
     },
     className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-root'], className, classes.root])
-  }, other), icon && /*#__PURE__*/React.createElement(Icon_, _extends({
-    size: "medium"
-  }, IconProps, {
-    style: _objectSpread({
-      marginBottom: 4
-    }, IconProps?.style)
-  })), status === 'initial' && /*#__PURE__*/React.createElement(Fade, {
-    in: true,
-    add: true
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "flex-end",
-    style: {
-      marginTop: 12,
-      marginBottom: -8
-    }
-  }, /*#__PURE__*/React.createElement(NumericTextField, _extends({
-    name: l('Hours'),
-    min: 0,
-    max: 23,
-    value: values.hours,
-    onChange: valueNew_0 => updateValues('hours', !valueNew_0 ? 0 : valueNew_0)
-  }, NumericTextFieldProps, {
-    className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps?.className, classes.numericTextField])
-  })), /*#__PURE__*/React.createElement(NumericTextField, _extends({
-    name: l('Minutes'),
-    min: 0,
-    max: 59,
-    value: values.minutes,
-    onChange: valueNew_1 => updateValues('minutes', !valueNew_1 ? 0 : valueNew_1)
-  }, NumericTextFieldProps, {
-    className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps?.className, classes.numericTextField])
-  })), /*#__PURE__*/React.createElement(NumericTextField, _extends({
-    name: l('Seconds'),
-    min: 0,
-    max: 59,
-    value: values.seconds,
-    onChange: valueNew_2 => updateValues('seconds', !valueNew_2 ? 0 : valueNew_2)
-  }, NumericTextFieldProps, {
-    className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps?.className, classes.numericTextField])
-  })))), status !== 'initial' && ['regular', 'linear'].includes(version) && /*#__PURE__*/React.createElement(Fade, {
-    in: true,
-    add: true
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "column",
-    align: "center",
-    justify: "center",
-    style: {
-      width: '100%'
-    }
-  }, is('function', renderValue) ? renderValue(value_) : /*#__PURE__*/React.createElement(Type, {
-    version: "h1"
-  }, value_), version === 'linear' && /*#__PURE__*/React.createElement(LinearProgress, _extends({
-    version: "determinate",
-    value: clamp(Math.round(value / 1000 / (refs.total.current / 1000) * 100), 0, 100),
-    reverse: true,
-    style: {
-      margin: '4px 0 8px'
-    }
-  }, LinearProgressProps, {
-    className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-linear-progress'], LinearProgressProps?.className, classes.linearProgress])
-  })))), status !== 'initial' && ['round'].includes(version) && /*#__PURE__*/React.createElement(Fade, {
-    in: true,
-    add: true
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 0.5,
-    direction: "column",
-    align: "center",
-    justify: "center",
-    className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-round-wrapper'], classes.roundWrapper])
-  }, /*#__PURE__*/React.createElement(RoundProgress, _extends({
-    version: "determinate",
-    value: clamp(Math.round(value / 1000 / (refs.total.current / 1000) * 100), 0, 100)
-  }, RoundProgressProps, {
-    className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-round-progress'], RoundProgressProps?.className, classes.roundProgress])
-  })), is('function', renderValue) ? renderValue(value_) : /*#__PURE__*/React.createElement(Type, {
-    version: "h1"
-  }, value_), /*#__PURE__*/React.createElement(Type, {
-    version: "b3",
-    className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-meta'], classes.meta])
-  }, l('Total'), " ", duration(refs.total.current, false)))), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center"
-  }, status === 'initial' && /*#__PURE__*/React.createElement(Fade, {
-    in: true,
-    add: true
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Start')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onStart,
-    disabled: !((values.hours || 0) + (values.minutes || 0) + (values.seconds || 0))
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconStart, null))))), status === 'running' && /*#__PURE__*/React.createElement(Fade, {
-    in: true,
-    add: true
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Stop')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onStop
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconStop, null))), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Pause')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onPause
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconPause, null))))), status === 'paused' && /*#__PURE__*/React.createElement(Fade, {
-    in: true,
-    add: true
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Stop')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onStop
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconStop, null))), /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Resume')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onResume
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconStart, null)))))));
-});
+  }, other), {}, {
+    children: [icon && /*#__PURE__*/_jsx(Icon_, _objectSpread(_objectSpread({
+      size: "medium"
+    }, IconProps), {}, {
+      style: _objectSpread({
+        marginBottom: 4
+      }, IconProps?.style)
+    })), status === 'initial' && /*#__PURE__*/_jsx(Fade, {
+      in: true,
+      add: true,
+      children: /*#__PURE__*/_jsxs(Line, {
+        gap: 1,
+        direction: "row",
+        align: "flex-end",
+        style: {
+          marginTop: 12,
+          marginBottom: -8
+        },
+        children: [/*#__PURE__*/_jsx(NumericTextField, _objectSpread(_objectSpread({
+          name: l('Hours'),
+          min: 0,
+          max: 23,
+          value: values.hours,
+          onChange: valueNew_0 => updateValues('hours', !valueNew_0 ? 0 : valueNew_0)
+        }, NumericTextFieldProps), {}, {
+          className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps?.className, classes.numericTextField])
+        })), /*#__PURE__*/_jsx(NumericTextField, _objectSpread(_objectSpread({
+          name: l('Minutes'),
+          min: 0,
+          max: 59,
+          value: values.minutes,
+          onChange: valueNew_1 => updateValues('minutes', !valueNew_1 ? 0 : valueNew_1)
+        }, NumericTextFieldProps), {}, {
+          className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps?.className, classes.numericTextField])
+        })), /*#__PURE__*/_jsx(NumericTextField, _objectSpread(_objectSpread({
+          name: l('Seconds'),
+          min: 0,
+          max: 59,
+          value: values.seconds,
+          onChange: valueNew_2 => updateValues('seconds', !valueNew_2 ? 0 : valueNew_2)
+        }, NumericTextFieldProps), {}, {
+          className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-numeric-text-field'], NumericTextFieldProps?.className, classes.numericTextField])
+        }))]
+      })
+    }), status !== 'initial' && ['regular', 'linear'].includes(version) && /*#__PURE__*/_jsx(Fade, {
+      in: true,
+      add: true,
+      children: /*#__PURE__*/_jsxs(Line, {
+        gap: 1,
+        direction: "column",
+        align: "center",
+        justify: "center",
+        style: {
+          width: '100%'
+        },
+        children: [is('function', renderValue) ? renderValue(value_) : /*#__PURE__*/_jsx(Type, {
+          version: "h1",
+          children: value_
+        }), version === 'linear' && /*#__PURE__*/_jsx(LinearProgress, _objectSpread(_objectSpread({
+          version: "determinate",
+          value: clamp(Math.round(value / 1000 / (refs.total.current / 1000) * 100), 0, 100),
+          reverse: true,
+          style: {
+            margin: '4px 0 8px'
+          }
+        }, LinearProgressProps), {}, {
+          className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-linear-progress'], LinearProgressProps?.className, classes.linearProgress])
+        }))]
+      })
+    }), status !== 'initial' && ['round'].includes(version) && /*#__PURE__*/_jsx(Fade, {
+      in: true,
+      add: true,
+      children: /*#__PURE__*/_jsxs(Line, {
+        gap: 0.5,
+        direction: "column",
+        align: "center",
+        justify: "center",
+        className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-round-wrapper'], classes.roundWrapper]),
+        children: [/*#__PURE__*/_jsx(RoundProgress, _objectSpread(_objectSpread({
+          version: "determinate",
+          value: clamp(Math.round(value / 1000 / (refs.total.current / 1000) * 100), 0, 100)
+        }, RoundProgressProps), {}, {
+          className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-round-progress'], RoundProgressProps?.className, classes.roundProgress])
+        })), is('function', renderValue) ? renderValue(value_) : /*#__PURE__*/_jsx(Type, {
+          version: "h1",
+          children: value_
+        }), /*#__PURE__*/_jsxs(Type, {
+          version: "b3",
+          className: classNames([staticClassName('Countdown', theme) && ['onesy-Countdown-meta'], classes.meta]),
+          children: [l('Total'), " ", duration(refs.total.current, false)]
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(Line, {
+      gap: 1,
+      direction: "row",
+      align: "center",
+      justify: "center",
+      children: [status === 'initial' && /*#__PURE__*/_jsx(Fade, {
+        in: true,
+        add: true,
+        children: /*#__PURE__*/_jsx("span", {
+          children: /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+            name: l('Start')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: onStart,
+              disabled: !((values.hours || 0) + (values.minutes || 0) + (values.seconds || 0))
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconStart, {})
+            }))
+          }))
+        })
+      }), status === 'running' && /*#__PURE__*/_jsx(Fade, {
+        in: true,
+        add: true,
+        children: /*#__PURE__*/_jsxs("span", {
+          children: [/*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+            name: l('Stop')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: onStop
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconStop, {})
+            }))
+          })), /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+            name: l('Pause')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: onPause
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconPause, {})
+            }))
+          }))]
+        })
+      }), status === 'paused' && /*#__PURE__*/_jsx(Fade, {
+        in: true,
+        add: true,
+        children: /*#__PURE__*/_jsxs("span", {
+          children: [/*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+            name: l('Stop')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: onStop
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconStop, {})
+            }))
+          })), /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+            name: l('Resume')
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              onClick: onResume
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(IconStart, {})
+            }))
+          }))]
+        })
+      })]
+    })]
+  }));
+};
 Countdown.displayName = 'onesy-Countdown';
 export default Countdown;