@onesy/ui-react 1.0.0

package/esm/ListItem/ListItem.js

@@ -0,0 +1,369 @@
+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", "colorSelected", "inset", "primary", "secondary", "tertiary", "preselected", "selected", "start", "startAlign", "end", "endAlign", "size", "noPadding", "href", "button", "shape", "shapePosition", "menuItem", "footer", "tabIndex", "interaction", "noOutline", "noBackground", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "onClose", "RootComponent", "WrapperProps", "RootProps", "InteractionProps", "PrimaryProps", "SecondaryProps", "TertiaryProps", "MainProps", "AsideProps", "AsideStartProps", "AsideEndProps", "Component", "className", "style", "children"];
+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) { _defineProperty(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; }
+import React from 'react';
+import { is } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import SurfaceElement from '../Surface';
+import InteractionElement from '../Interaction';
+import TypeElement from '../Type';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => {
+  const overflow = {
+    width: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  };
+  return {
+    wrapper: {
+      width: '100%'
+    },
+    root: {
+      // Reset
+      margin: '0',
+      padding: '0',
+      '-webkit-appearance': 'none',
+      appearance: 'none',
+      border: 'none',
+      textDecoration: 'none',
+      color: 'inherit',
+      boxSizing: 'border-box',
+      position: 'relative',
+      display: 'inline-flex',
+      width: '100%'
+    },
+    shape_round_position_both: {
+      borderRadius: theme.methods.shape.radius.value(40, 'px')
+    },
+    shape_round_position_start: {
+      borderEndStartRadius: theme.methods.shape.radius.value(40, 'px'),
+      borderStartStartRadius: theme.methods.shape.radius.value(40, 'px')
+    },
+    shape_round_position_end: {
+      borderStartEndRadius: theme.methods.shape.radius.value(40, 'px'),
+      borderEndEndRadius: theme.methods.shape.radius.value(40, 'px')
+    },
+    shape_round_position_none: {
+      borderRadius: '0'
+    },
+    button: {
+      cursor: 'pointer',
+      userSelect: 'none'
+    },
+    size_small: {
+      padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
+      minHeight: '24px'
+    },
+    size_regular: {
+      padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(2, 'px')}`,
+      minHeight: '40px'
+    },
+    size_large: {
+      padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
+      minHeight: '56px'
+    },
+    menuItem_size_small: {
+      padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`
+    },
+    menuItem_size_regular: {
+      padding: `${theme.methods.space.value(0.75, 'px')} ${theme.methods.space.value(2, 'px')}`
+    },
+    menuItem_size_large: {
+      padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2.5, 'px')}`
+    },
+    inset_size_small: {
+      paddingInlineStart: `${(56 + theme.methods.space.value('rg')) * 0.75}px`
+    },
+    inset_size_regular: {
+      paddingInlineStart: `${56 + theme.methods.space.value('rg')}px`
+    },
+    inset_size_large: {
+      paddingInlineStart: `${(56 + theme.methods.space.value('rg')) * 1.25}px`
+    },
+    menuItem_inset_size_small: {
+      paddingInlineStart: theme.methods.space.value(7, 'px')
+    },
+    menuItem_inset_size_regular: {
+      paddingInlineStart: theme.methods.space.value(7, 'px')
+    },
+    menuItem_inset_size_large: {
+      paddingInlineStart: theme.methods.space.value(7, 'px')
+    },
+    middle: {
+      position: 'relative',
+      display: 'inline-flex',
+      flex: '1 1 auto',
+      width: '100%',
+      flexDirection: 'column',
+      // Fix for white-space: nowrap & flex: 1 1 auto
+      minWidth: '0',
+      alignSelf: 'center'
+    },
+    menuItem_middle: {
+      marginInlineEnd: '44px'
+    },
+    text: _objectSpread(_objectSpread({}, overflow), {}, {
+      whiteSpace: 'pre-wrap',
+      textAlign: 'start'
+    }),
+    text_primary: {
+      opacity: '1'
+    },
+    text_primary_weight: {
+      fontWeight: '500'
+    },
+    text_secondary: {
+      opacity: theme.palette.visual_contrast.default.opacity.primary
+    },
+    text_tertiary: {
+      opacity: theme.palette.visual_contrast.default.opacity.secondary
+    },
+    aside: {
+      position: 'relative',
+      display: 'inline-flex',
+      flex: '0 0 auto',
+      alignSelf: 'flex-start'
+    },
+    align_start: {
+      alignSelf: 'flex-start'
+    },
+    align_center: {
+      alignSelf: 'center'
+    },
+    align_end: {
+      alignSelf: 'flex-end'
+    },
+    start_icon: {
+      paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
+    },
+    start_button: {
+      paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
+    },
+    start_switch: {
+      paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
+    },
+    menuItem_start_icon_size_small: {
+      paddingInlineEnd: theme.methods.space.value(1.5, 'px')
+    },
+    menuItem_start_icon_size_regular: {
+      paddingInlineEnd: theme.methods.space.value(2, 'px')
+    },
+    menuItem_start_icon_size_large: {
+      paddingInlineEnd: theme.methods.space.value(2.5, 'px')
+    },
+    menuItem_start_button_size_small: {
+      paddingInlineEnd: theme.methods.space.value(1.5, 'px')
+    },
+    menuItem_start_button_size_regular: {
+      paddingInlineEnd: theme.methods.space.value(2, 'px')
+    },
+    menuItem_start_button_size_large: {
+      paddingInlineEnd: theme.methods.space.value(2.5, 'px')
+    },
+    menuItem_start_switch_size_small: {
+      paddingInlineEnd: theme.methods.space.value(1.5, 'px')
+    },
+    menuItem_start_switch_size_regular: {
+      paddingInlineEnd: theme.methods.space.value(2, 'px')
+    },
+    menuItem_start_switch_size_large: {
+      paddingInlineEnd: theme.methods.space.value(2.5, 'px')
+    },
+    end_icon: {
+      paddingInlineStart: theme.methods.space.value(1.5, 'px'),
+      paddingInlineEnd: theme.methods.space.value(1, 'px')
+    },
+    end_button: {
+      paddingInlineStart: theme.methods.space.value(1.5, 'px'),
+      paddingInlineEnd: '0'
+    },
+    end_switch: {
+      paddingInlineStart: theme.methods.space.value(1.5, 'px'),
+      paddingInlineEnd: '0'
+    },
+    menuItem_end_icon: {
+      paddingInlineStart: theme.methods.space.value(1.5, 'px')
+    },
+    menuItem_end_button: {
+      paddingInlineStart: theme.methods.space.value(1.5, 'px')
+    },
+    menuItem_end_switch: {
+      paddingInlineStart: theme.methods.space.value(1.5, 'px')
+    },
+    middle_disabled: {
+      opacity: theme.palette.visual_contrast.default.opacity.disabled
+    },
+    noPadding: {
+      padding: '0px'
+    },
+    noBackground: {
+      '&.onesy-Surface-root': {
+        background: 'none'
+      }
+    },
+    disabled: {
+      pointerEvents: 'none',
+      userSelect: 'none',
+      cursor: 'default'
+    }
+  };
+}, {
+  name: 'onesy-ListItem'
+});
+const ListItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyListItem?.props?.default), props_), [props_]);
+  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      tonal = true,
+      color = 'default',
+      colorSelected = props.color,
+      inset,
+      primary = props.children,
+      secondary,
+      tertiary,
+      preselected,
+      selected,
+      start,
+      startAlign = 'center',
+      end,
+      endAlign = 'center',
+      size = 'regular',
+      noPadding,
+      href,
+      button,
+      shape = 'round',
+      shapePosition = 'none',
+      menuItem,
+      footer,
+      tabIndex,
+      interaction,
+      noOutline,
+      noBackground,
+      disabled,
+      onClick,
+      onFocus,
+      onBlur,
+      onMouseEnter,
+      onMouseLeave,
+      onClose: onClose_,
+      RootComponent: RootComponent_ = 'div',
+      WrapperProps,
+      RootProps,
+      InteractionProps,
+      PrimaryProps,
+      SecondaryProps,
+      TertiaryProps,
+      MainProps,
+      AsideProps,
+      AsideStartProps,
+      AsideEndProps,
+      Component = 'li',
+      className,
+      style,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: React.useRef(undefined),
+    props: React.useRef(undefined),
+    ids: {
+      primary: React.useId(),
+      secondary: React.useId()
+    }
+  };
+  refs.props.current = props;
+  const styles = {
+    root: {},
+    icon: {
+      color: 'default'
+    },
+    wrapper: {},
+    primary: {},
+    secondary: {},
+    tertiary: {}
+  };
+  let RootComponent = RootComponent_;
+  if (href) RootComponent = 'a';
+  const colorToUse = selected ? colorSelected : color;
+  return /*#__PURE__*/React.createElement(Surface, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else if (ref?.current) ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tonal: tonal,
+    color: colorToUse,
+    tabIndex: tabIndex !== undefined ? tabIndex : button && !disabled ? 0 : undefined,
+    "aria-labelledby": refs.ids.primary,
+    "aria-describedby": refs.ids.secondary,
+    "aria-selected": selected,
+    Component: Component
+  }, WrapperProps, {
+    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-wrapper'], WrapperProps?.className, className, classes.wrapper, noBackground && classes.noBackground]),
+    noOutline: noOutline,
+    style: styles.wrapper
+  }, other), /*#__PURE__*/React.createElement(RootComponent, _extends({
+    href: href,
+    onClick: onClick,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, RootProps, {
+    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-root', `onesy-ListItem-size-${size}`, preselected && `onesy-ListItem-preselected`, selected && `onesy-ListItem-selected`, disabled && `onesy-ListItem-disabled`, inset && !start && `onesy-ListItem-inset`], RootProps?.className, classes.root, !menuItem && classes[`size_${size}`], classes[`shape_${shape}_position_${shapePosition}`], inset && !start && classes[`inset_size_${size}`], menuItem && [classes[`menuItem_size_${size}`], inset && classes[`menuItem_inset_size_${size}`]], (href || button) && classes.button, noPadding && classes.noPadding, disabled && classes.disabled]),
+    style: _objectSpread(_objectSpread({}, style), styles.root),
+    disabled: disabled
+  }), (href || button || interaction) && /*#__PURE__*/React.createElement(Interaction, _extends({
+    border: false,
+    preselected: InteractionProps?.focus || preselected || undefined,
+    selected: selected,
+    disabled: disabled
+  }, InteractionProps)), start && /*#__PURE__*/React.createElement("span", _extends({}, AsideProps, AsideStartProps, {
+    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-aside', 'onesy-ListItem-start', `onesy-ListItem-start-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}`], AsideProps?.className, AsideStartProps?.className, classes.aside, classes.start, classes[`align_${startAlign}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(start?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}_size_${size}`]])
+  }), is('string', start) ? start : /*#__PURE__*/React.cloneElement(start, {
+    color: start.props?.color || 'inherit',
+    size: start.props?.size !== undefined ? start.props?.size : ['onesy-Switch'].includes(start?.type?.displayName) ? 'small' : 'regular',
+    disabled
+  })), /*#__PURE__*/React.createElement("span", _extends({}, MainProps, {
+    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-middle'], MainProps?.className, classes.middle, menuItem && classes.menuItem_middle, disabled && classes.middle_disabled])
+  }), primary !== undefined && (is('simple', primary) ? /*#__PURE__*/React.createElement(Type, _extends({
+    version: "b2",
+    id: refs.ids.primary
+  }, PrimaryProps, {
+    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-primary'], PrimaryProps?.className, classes.text, classes.text_primary, !menuItem && classes.text_primary_weight]),
+    style: _objectSpread(_objectSpread({}, styles.primary), PrimaryProps?.style)
+  }), primary) : /*#__PURE__*/React.cloneElement(primary, {
+    id: refs.ids.primary
+  })), secondary !== undefined && (is('simple', secondary) ? /*#__PURE__*/React.createElement(Type, _extends({
+    version: "b2",
+    id: refs.ids.secondary
+  }, SecondaryProps, {
+    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-secondary'], SecondaryProps?.className, classes.text, classes.text_secondary]),
+    style: _objectSpread(_objectSpread({}, styles.secondary), SecondaryProps?.style)
+  }), secondary) : /*#__PURE__*/React.cloneElement(secondary, {
+    id: refs.ids.secondary
+  })), tertiary !== undefined && (is('simple', tertiary) ? /*#__PURE__*/React.createElement(Type, _extends({
+    version: "b2"
+  }, TertiaryProps, {
+    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-text', 'onesy-ListItem-text-tertiary'], TertiaryProps?.className, classes.text, classes.text_tertiary]),
+    style: _objectSpread(_objectSpread({}, styles.tertiary), TertiaryProps?.style)
+  }), tertiary) : tertiary)), end && /*#__PURE__*/React.createElement("span", _extends({}, AsideProps, AsideEndProps, {
+    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-aside', 'onesy-ListItem-end', `onesy-ListItem-end-${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}`], AsideProps?.className, AsideEndProps?.classname, classes.aside, classes.end, classes[`align_${endAlign}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['onesy-Avatar', 'onesy-IconButton', 'onesy-Checkbox', 'onesy-Radio'].includes(end?.type?.displayName) ? 'button' : ['onesy-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}_size_${size}`]])
+  }), is('string', end) ? end : /*#__PURE__*/React.cloneElement(end, {
+    color: end.props?.color || 'inherit',
+    size: end.props?.size !== undefined ? end.props?.size : ['onesy-Switch'].includes(end?.type?.displayName) ? 'small' : 'regular',
+    disabled
+  }))), footer);
+});
+ListItem.displayName = 'onesy-ListItem';
+export default ListItem;

package/esm/ListItem/index.js

@@ -0,0 +1 @@
+export { default } from './ListItem';

package/esm/ListSubheader/ListSubheader.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["className", "children"];
+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) { _defineProperty(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; }
+import React from 'react';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import ListItemElement from '../ListItem';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    top: '0',
+    position: 'sticky',
+    zIndex: '1',
+    userSelect: 'none',
+    '& .onesy-Type-root': {
+      fontWeight: 'bold'
+    }
+  }
+}), {
+  name: 'onesy-ListSubheader'
+});
+const ListSubheader = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyListSubheader?.props?.default), props_), [props_]);
+  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
+  const {
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  return /*#__PURE__*/React.createElement(ListItem, _extends({
+    ref: ref,
+    secondary: children,
+    className: classNames([staticClassName('ListSubheader', theme) && ['onesy-ListSubheader-root'], className, classes.root])
+  }, other));
+});
+ListSubheader.displayName = 'onesy-ListSubheader';
+export default ListSubheader;

package/esm/ListSubheader/index.js

@@ -0,0 +1 @@
+export { default } from './ListSubheader';

package/esm/MainProgress/Context.js

@@ -0,0 +1,3 @@
+import React from 'react';
+const OnesyMainProgressContext = /*#__PURE__*/React.createContext(undefined);
+export default OnesyMainProgressContext;

package/esm/MainProgress/MainProgress.js

@@ -0,0 +1,182 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["min", "max", "firstIncrement", "incrementMin", "incrementMax", "stepMin", "stepMax", "stepInterval", "onStart", "onIncrement", "onUpdate", "onDone", "fixed", "position", "TransitionComponent", "TransitionComponentProps", "className", "children"];
+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) { _defineProperty(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; }
+import React from 'react';
+import { is, wait, random, clamp } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import FadeElement from '../Fade';
+import LinearProgressElement from '../LinearProgress';
+import MainProgressContext from './Context';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    zIndex: theme.z_index.tooltip - 14,
+    '&.onesy-LinearProgress-root': {
+      height: '2px'
+    },
+    '& .onesy-LinearProgress-buffer': {
+      background: 'transparent'
+    }
+  },
+  fixed: {
+    insetInline: '0',
+    '&.onesy-LinearProgress-root': {
+      position: 'fixed'
+    }
+  },
+  position_top: {
+    top: '0'
+  },
+  position_bottom: {
+    bottom: '0'
+  }
+}), {
+  name: 'onesy-MainProgress'
+});
+const MainProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMainProgress?.props?.default), props_), [props_]);
+  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
+  const LinearProgress = React.useMemo(() => theme?.elements?.LinearProgress || LinearProgressElement, [theme]);
+  const {
+      min = 0,
+      max = 99,
+      firstIncrement = true,
+      incrementMin = 4,
+      incrementMax = 14,
+      stepMin = 1,
+      stepMax = 4,
+      stepInterval = 700,
+      onStart,
+      onIncrement,
+      onUpdate,
+      onDone,
+      fixed = true,
+      position = 'top',
+      TransitionComponent = Fade,
+      TransitionComponentProps = {},
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [inProp, setInProp] = React.useState(false);
+  const [value, setValue] = React.useState(min);
+  const refs = {
+    value_: React.useRef({}),
+    value: React.useRef(),
+    min: React.useRef(),
+    max: React.useRef(),
+    firstIncrement: React.useRef(),
+    incrementMin: React.useRef(),
+    incrementMax: React.useRef(),
+    stepInterval: React.useRef(),
+    stepMin: React.useRef(),
+    stepMax: React.useRef(),
+    TransitionComponentProps: React.useRef(undefined),
+    linearProgress: React.useRef(undefined),
+    interval: React.useRef(undefined),
+    props: React.useRef(undefined)
+  };
+  refs.value.current = value;
+  refs.props.current = props;
+  refs.min.current = min;
+  refs.max.current = max;
+  refs.firstIncrement.current = firstIncrement;
+  refs.incrementMin.current = incrementMin;
+  refs.incrementMax.current = incrementMax;
+  refs.stepInterval.current = stepInterval;
+  refs.stepMin.current = stepMin;
+  refs.stepMax.current = stepMax;
+  refs.TransitionComponentProps.current = TransitionComponentProps;
+  const clear = () => {
+    if (refs.interval.current) {
+      clearInterval(refs.interval.current);
+      refs.interval.current = undefined;
+    }
+  };
+  const start = React.useCallback(value_ => {
+    // Reset
+    clear();
+
+    // Update
+    refs.linearProgress.current = value_;
+
+    // Open
+    setInProp(true);
+
+    // Set initial value to min
+    const min_ = refs.min.current !== undefined ? refs.min.current : 0;
+    const max_ = refs.max.current !== undefined ? refs.max.current : 0;
+    setValue(min_);
+
+    // start inc interval for steps
+    // in refs.interval
+
+    // in interval, remove interval if value is >= max
+    if (min_ < max_) {
+      const stepInterval_ = refs.stepInterval.current !== undefined ? refs.stepInterval.current : 700;
+      refs.interval.current = setInterval(() => {
+        if (refs.value.current >= max_) clearInterval(refs.interval.current);
+        setValue(previousValue => clamp(previousValue + random(refs.stepMin.current, refs.stepMax.current), refs.min.current, refs.max.current));
+      }, stepInterval_);
+    }
+    if (is('function', onStart)) onStart();
+  }, []);
+  const increment = React.useCallback(() => {
+    // Inc value random between incrementMin, incrementMax, with clam to min, max
+    let valueNew = refs.value.current;
+    valueNew += clamp(random(refs.incrementMin.current, refs.incrementMax.current), refs.min.current, refs.max.current);
+    setValue(valueNew);
+    if (is('function', onIncrement)) onIncrement(valueNew);
+  }, []);
+  const update = React.useCallback(value_ => {
+    const valueNew = value_;
+    setValue(valueNew);
+    if (is('function', onUpdate)) onUpdate(valueNew);
+  }, []);
+  const done = React.useCallback(async () => {
+    clear();
+
+    // Update value to 100
+    setValue(100);
+
+    // Update inProp to false with the timeout value
+    const timeout = theme.transitions.duration.rg + 44;
+    await wait(timeout);
+    setInProp(false);
+    if (is('function', onDone)) onDone();
+  }, []);
+  const onExited = () => {
+    // Reset
+    setValue(0);
+  };
+  React.useEffect(() => {
+    if (inProp) {
+      if (refs.firstIncrement.current) increment();
+    }
+  }, [inProp]);
+  TransitionComponentProps.in = inProp;
+  refs.value_.current.start = start;
+  refs.value_.current.increment = increment;
+  refs.value_.current.update = update;
+  refs.value_.current.done = done;
+  return /*#__PURE__*/React.createElement(MainProgressContext.Provider, {
+    value: refs.value_.current
+  }, /*#__PURE__*/React.createElement(TransitionComponent, _extends({
+    in: inProp,
+    onExited: onExited
+  }, TransitionComponentProps), /*#__PURE__*/React.createElement(LinearProgress, _extends({
+    ref: ref,
+    value: value,
+    version: "determinate",
+    className: classNames([staticClassName('MainProgress', theme) && [`onesy-MainProgress-root`], className, classes.root, classes[`position_${position}`], fixed && classes.fixed])
+  }, other, refs.linearProgress.current))), children);
+});
+MainProgress.displayName = 'onesy-MainProgress';
+export default MainProgress;

package/esm/MainProgress/index.js

@@ -0,0 +1,4 @@
+export { default } from './MainProgress';
+export { default as MainProgressContext } from './Context';
+export { default as MainProgress } from './MainProgress';
+export { default as useMainProgress } from './useMainProgress';

package/esm/MainProgress/useMainProgress.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import MainProgressContext from './Context';
+export default function useMainProgress() {
+  const value = React.useContext(MainProgressContext);
+  return value;
+}