@mantine/nprogress 5.0.0-alpha.3 → 5.0.0-alpha.7

package/README.md

@@ -1,4 +1,4 @@
-# Mantine NProgress
+# Mantine Navigation Progress
 
 A navigation progress bar
 

package/cjs/NProgress.js

@@ -25,14 +25,16 @@ function NProgress({
   onFinish,
   autoReset = false,
   withinPortal = true,
-  zIndex = styles.getDefaultZIndex("nprogress")
+  zIndex = styles.getDefaultZIndex("max")
 }) {
-  const reducedMotion = hooks.useReducedMotion();
+  const theme = core.useMantineTheme();
+  const shouldReduceMotion = hooks.useReducedMotion();
+  const reducedMotion = theme.respectReducedMotion ? shouldReduceMotion : false;
   const [_progress, setProgress] = React.useState(defaultProgress);
   const [mounted, setMounted] = React.useState(true);
+  const [unmountProgress, setUnmountProgress] = React.useState(false);
   const resetRef = React.useRef();
   const unmountRef = React.useRef();
-  const unmountProgressRef = React.useRef(false);
   const interval = hooks.useInterval(() => {
     setProgress((amount) => {
       let next = 0;
@@ -48,17 +50,6 @@ function NProgress({
       return amount + next;
     });
   }, stepIntervalTime);
-  const cancelUnmount = () => {
-    if (unmountRef.current) {
-      window.clearTimeout(unmountRef.current);
-      unmountRef.current = null;
-    }
-    if (resetRef.current) {
-      window.clearTimeout(resetRef.current);
-      resetRef.current = null;
-    }
-    setMounted(true);
-  };
   const set = (value) => setProgress(value);
   const add = (value) => setProgress((c) => Math.min(c + value, 100));
   const decrease = (value) => setProgress((c) => Math.max(c - value, 0));
@@ -68,10 +59,10 @@ function NProgress({
   };
   const stop = () => interval.stop();
   const reset = () => {
-    unmountProgressRef.current = true;
+    setUnmountProgress(true);
     stop();
     setProgress(0);
-    unmountProgressRef.current = false;
+    window.setTimeout(() => setUnmountProgress(false), 0);
   };
   const ctx = {
     set,
@@ -81,30 +72,39 @@ function NProgress({
     stop,
     reset
   };
-  const unmountProgress = () => {
-    unmountRef.current = null;
-    setMounted(false);
-    if (autoReset) {
-      resetRef.current = window.setTimeout(() => {
-        resetRef.current = null;
-        reset();
-      }, exitTransitionDuration);
+  const cancelUnmount = () => {
+    if (unmountRef.current) {
+      window.clearTimeout(unmountRef.current);
+      unmountRef.current = null;
     }
+    if (resetRef.current) {
+      window.clearTimeout(resetRef.current);
+      resetRef.current = null;
+    }
+    setMounted(true);
   };
   hooks.useDidUpdate(() => {
     if (_progress >= 100) {
       stop();
       onFinish && onFinish();
-      unmountRef.current = window.setTimeout(unmountProgress, exitTimeout);
+      unmountRef.current = window.setTimeout(() => {
+        unmountRef.current = null;
+        setMounted(false);
+        if (autoReset) {
+          resetRef.current = window.setTimeout(() => {
+            resetRef.current = null;
+            reset();
+          }, reducedMotion ? 0 : exitTransitionDuration);
+        }
+      }, exitTimeout);
     } else if (!mounted) {
       cancelUnmount();
     }
   }, [_progress]);
   events.useNProgressEvents(ctx);
   return /* @__PURE__ */ React__default.createElement(core.OptionalPortal, {
-    withinPortal,
-    zIndex
-  }, !unmountProgressRef.current && /* @__PURE__ */ React__default.createElement(core.Progress, {
+    withinPortal
+  }, !unmountProgress && /* @__PURE__ */ React__default.createElement(core.Progress, {
     radius: 0,
     value: _progress,
     size,
@@ -114,6 +114,7 @@ function NProgress({
         top: 0,
         left: 0,
         position: "fixed",
+        zIndex,
         width: "100vw",
         backgroundColor: "transparent",
         transitionProperty: "opacity",

package/cjs/NProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"NProgress.js","sources":["../src/NProgress.tsx"],"sourcesContent":["import { OptionalPortal, Progress } from '@mantine/core';\nimport { useDidUpdate, useInterval, useReducedMotion } from '@mantine/hooks';\nimport { getDefaultZIndex, MantineColor } from '@mantine/styles';\nimport React, { useRef, useState } from 'react';\nimport { useNProgressEvents } from './events';\n\nexport interface NProgressProps {\n  /** The default progress */\n  defaultProgress?: number;\n\n  /** The color of the progressbar */\n  color?: MantineColor;\n\n  /** The height of the progressbar */\n  size?: number;\n\n  /** Called when the progress is 100% */\n  onFinish?: () => void;\n\n  /** Automatically resets the progress when 100% is reached */\n  autoReset?: boolean;\n\n  /** Step delay in ms */\n  stepIntervalTime?: number;\n\n  /** Transition function (transition-timing-function) */\n  progressTransition?: string;\n\n  /** Transition duration in ms */\n  progressTransitionDuration?: number;\n\n  /** The time when the component should be unmounted after progress is 100% */\n  exitTimeout?: number;\n\n  /** Exit transition duration in ms */\n  exitTransitionDuration?: number;\n\n  /** Exit transition function (transition-timing-function)*/\n  exitTransition?: string;\n\n  /** Determines whether NProgress should be rendered within Portal, defaults to true */\n  withinPortal?: boolean;\n\n  /** NProgress container z-index */\n  zIndex?: number;\n}\n\nexport function NProgress({\n  defaultProgress = 0,\n  color = 'blue',\n  size = 2,\n  stepIntervalTime = 500,\n  progressTransition = 'ease',\n  progressTransitionDuration = 600,\n  exitTimeout = 700,\n  exitTransitionDuration = 600,\n  exitTransition = 'ease',\n  onFinish,\n  autoReset = false,\n  withinPortal = true,\n  zIndex = getDefaultZIndex('nprogress'),\n}: NProgressProps) {\n  const reducedMotion = useReducedMotion();\n  const [_progress, setProgress] = useState(defaultProgress);\n  const [mounted, setMounted] = useState(true);\n  const resetRef = useRef<number>();\n  const unmountRef = useRef<number>();\n  const unmountProgressRef = useRef(false);\n\n  const interval = useInterval(() => {\n    setProgress((amount) => {\n      let next = 0;\n      if (amount >= 0 && amount <= 20) {\n        next = 10;\n      } else if (amount >= 20 && amount <= 50) {\n        next = 4;\n      } else if (amount >= 50 && amount <= 80) {\n        next = 2;\n      } else if (amount >= 80 && amount <= 99) {\n        next = 0.5;\n      }\n\n      return amount + next;\n    });\n  }, stepIntervalTime);\n\n  const cancelUnmount = () => {\n    if (unmountRef.current) {\n      window.clearTimeout(unmountRef.current);\n      unmountRef.current = null;\n    }\n    if (resetRef.current) {\n      window.clearTimeout(resetRef.current);\n      resetRef.current = null;\n    }\n\n    setMounted(true);\n  };\n\n  const set = (value: React.SetStateAction<number>) => setProgress(value);\n  const add = (value: number) => setProgress((c) => Math.min(c + value, 100));\n  const decrease = (value: number) => setProgress((c) => Math.max(c - value, 0));\n  const start = () => {\n    interval.stop();\n    interval.start();\n  };\n  const stop = () => interval.stop();\n  const reset = () => {\n    unmountProgressRef.current = true;\n    stop();\n    setProgress(0);\n    unmountProgressRef.current = false;\n  };\n\n  const ctx = {\n    set,\n    add,\n    decrease,\n    start,\n    stop,\n    reset,\n  };\n\n  const unmountProgress = () => {\n    unmountRef.current = null;\n    setMounted(false);\n\n    if (autoReset) {\n      resetRef.current = window.setTimeout(() => {\n        resetRef.current = null;\n        reset();\n      }, exitTransitionDuration);\n    }\n  };\n\n  useDidUpdate(() => {\n    if (_progress >= 100) {\n      stop();\n      onFinish && onFinish();\n      unmountRef.current = window.setTimeout(unmountProgress, exitTimeout);\n    } else if (!mounted) {\n      cancelUnmount();\n    }\n  }, [_progress]);\n\n  useNProgressEvents(ctx);\n\n  return (\n    <OptionalPortal withinPortal={withinPortal} zIndex={zIndex}>\n      {!unmountProgressRef.current && (\n        <Progress\n          radius={0}\n          value={_progress}\n          size={size}\n          color={color}\n          styles={{\n            root: {\n              top: 0,\n              left: 0,\n              position: 'fixed',\n              width: '100vw',\n              backgroundColor: 'transparent',\n              transitionProperty: 'opacity',\n              transitionTimingFunction: exitTransition,\n              transitionDuration: `${\n                reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration\n              }ms`,\n              opacity: mounted ? 1 : 0,\n            },\n            bar: {\n              transitionProperty: 'width',\n              transitionTimingFunction: progressTransition,\n              transitionDuration: `${reducedMotion || !mounted ? 0 : progressTransitionDuration}ms`,\n            },\n          }}\n        />\n      )}\n    </OptionalPortal>\n  );\n}\n"],"names":["getDefaultZIndex","useReducedMotion","useState","useRef","useInterval","useDidUpdate","useNProgressEvents","React","OptionalPortal","Progress"],"mappings":"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"}
+{"version":3,"file":"NProgress.js","sources":["../src/NProgress.tsx"],"sourcesContent":["import { OptionalPortal, Progress, useMantineTheme } from '@mantine/core';\nimport { useDidUpdate, useInterval, useReducedMotion } from '@mantine/hooks';\nimport { getDefaultZIndex, MantineColor } from '@mantine/styles';\nimport React, { useRef, useState } from 'react';\nimport { useNProgressEvents } from './events';\n\nexport interface NProgressProps {\n  /** The default progress */\n  defaultProgress?: number;\n\n  /** The color of the progressbar */\n  color?: MantineColor;\n\n  /** The height of the progressbar */\n  size?: number;\n\n  /** Called when the progress is 100% */\n  onFinish?: () => void;\n\n  /** Automatically resets the progress when 100% is reached */\n  autoReset?: boolean;\n\n  /** Step delay in ms */\n  stepIntervalTime?: number;\n\n  /** Transition function (transition-timing-function) */\n  progressTransition?: string;\n\n  /** Transition duration in ms */\n  progressTransitionDuration?: number;\n\n  /** The time when the component should be unmounted after progress is 100% */\n  exitTimeout?: number;\n\n  /** Exit transition duration in ms */\n  exitTransitionDuration?: number;\n\n  /** Exit transition function (transition-timing-function)*/\n  exitTransition?: string;\n\n  /** Determines whether NProgress should be rendered within Portal, defaults to true */\n  withinPortal?: boolean;\n\n  /** NProgress container z-index */\n  zIndex?: React.CSSProperties['zIndex'];\n}\n\nexport function NProgress({\n  defaultProgress = 0,\n  color = 'blue',\n  size = 2,\n  stepIntervalTime = 500,\n  progressTransition = 'ease',\n  progressTransitionDuration = 600,\n  exitTimeout = 700,\n  exitTransitionDuration = 600,\n  exitTransition = 'ease',\n  onFinish,\n  autoReset = false,\n  withinPortal = true,\n  zIndex = getDefaultZIndex('max'),\n}: NProgressProps) {\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reducedMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const [_progress, setProgress] = useState(defaultProgress);\n  const [mounted, setMounted] = useState(true);\n  const [unmountProgress, setUnmountProgress] = useState(false);\n  const resetRef = useRef<number>();\n  const unmountRef = useRef<number>();\n\n  const interval = useInterval(() => {\n    setProgress((amount) => {\n      let next = 0;\n      if (amount >= 0 && amount <= 20) {\n        next = 10;\n      } else if (amount >= 20 && amount <= 50) {\n        next = 4;\n      } else if (amount >= 50 && amount <= 80) {\n        next = 2;\n      } else if (amount >= 80 && amount <= 99) {\n        next = 0.5;\n      }\n\n      return amount + next;\n    });\n  }, stepIntervalTime);\n\n  const set = (value: React.SetStateAction<number>) => setProgress(value);\n  const add = (value: number) => setProgress((c) => Math.min(c + value, 100));\n  const decrease = (value: number) => setProgress((c) => Math.max(c - value, 0));\n  const start = () => {\n    interval.stop();\n    interval.start();\n  };\n  const stop = () => interval.stop();\n  const reset = () => {\n    setUnmountProgress(true);\n    stop();\n    setProgress(0);\n    window.setTimeout(() => setUnmountProgress(false), 0);\n  };\n\n  const ctx = {\n    set,\n    add,\n    decrease,\n    start,\n    stop,\n    reset,\n  };\n\n  const cancelUnmount = () => {\n    if (unmountRef.current) {\n      window.clearTimeout(unmountRef.current);\n      unmountRef.current = null;\n    }\n    if (resetRef.current) {\n      window.clearTimeout(resetRef.current);\n      resetRef.current = null;\n    }\n\n    setMounted(true);\n  };\n\n  useDidUpdate(() => {\n    if (_progress >= 100) {\n      stop();\n      onFinish && onFinish();\n      unmountRef.current = window.setTimeout(() => {\n        unmountRef.current = null;\n        setMounted(false);\n\n        if (autoReset) {\n          resetRef.current = window.setTimeout(\n            () => {\n              resetRef.current = null;\n              reset();\n            },\n            reducedMotion ? 0 : exitTransitionDuration\n          );\n        }\n      }, exitTimeout);\n    } else if (!mounted) {\n      cancelUnmount();\n    }\n  }, [_progress]);\n\n  useNProgressEvents(ctx);\n\n  return (\n    <OptionalPortal withinPortal={withinPortal}>\n      {!unmountProgress && (\n        <Progress\n          radius={0}\n          value={_progress}\n          size={size}\n          color={color}\n          styles={{\n            root: {\n              top: 0,\n              left: 0,\n              position: 'fixed',\n              zIndex,\n              width: '100vw',\n              backgroundColor: 'transparent',\n              transitionProperty: 'opacity',\n              transitionTimingFunction: exitTransition,\n              transitionDuration: `${\n                reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration\n              }ms`,\n              opacity: mounted ? 1 : 0,\n            },\n            bar: {\n              transitionProperty: 'width',\n              transitionTimingFunction: progressTransition,\n              transitionDuration: `${reducedMotion || !mounted ? 0 : progressTransitionDuration}ms`,\n            },\n          }}\n        />\n      )}\n    </OptionalPortal>\n  );\n}\n"],"names":["getDefaultZIndex","useMantineTheme","useReducedMotion","useState","useRef","useInterval","useDidUpdate","useNProgressEvents","React","OptionalPortal","Progress"],"mappings":"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"}

package/cjs/NavigationProgress.js

@@ -0,0 +1,125 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@mantine/core');
+var hooks = require('@mantine/hooks');
+var React = require('react');
+var events = require('./events.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function NavigationProgress({
+  initialProgress = 0,
+  color,
+  size = 3,
+  stepInterval = 500,
+  transitionDuration = 300,
+  exitTimeout = 500,
+  exitTransitionDuration = 400,
+  onFinish,
+  autoReset = false,
+  withinPortal = true,
+  zIndex = core.getDefaultZIndex("max")
+}) {
+  const theme = core.useMantineTheme();
+  const shouldReduceMotion = hooks.useReducedMotion();
+  const reducedMotion = theme.respectReducedMotion ? shouldReduceMotion : false;
+  const [_progress, setProgress] = React.useState(initialProgress);
+  const [mounted, setMounted] = React.useState(true);
+  const [unmountProgress, setUnmountProgress] = React.useState(false);
+  const resetRef = React.useRef();
+  const unmountRef = React.useRef();
+  const interval = hooks.useInterval(() => {
+    setProgress((amount) => {
+      let next = 0;
+      if (amount >= 0 && amount <= 20) {
+        next = 10;
+      } else if (amount >= 20 && amount <= 50) {
+        next = 4;
+      } else if (amount >= 50 && amount <= 80) {
+        next = 2;
+      } else if (amount >= 80 && amount <= 99) {
+        next = 0.5;
+      }
+      return amount + next;
+    });
+  }, stepInterval);
+  const set = (value) => setProgress(value);
+  const increment = (value) => setProgress((c) => Math.min(c + value, 100));
+  const decrement = (value) => setProgress((c) => Math.max(c - value, 0));
+  const start = () => {
+    interval.stop();
+    interval.start();
+  };
+  const stop = () => interval.stop();
+  const reset = () => {
+    setUnmountProgress(true);
+    stop();
+    setProgress(0);
+    window.setTimeout(() => setUnmountProgress(false), 0);
+  };
+  const cancelUnmount = () => {
+    if (unmountRef.current) {
+      window.clearTimeout(unmountRef.current);
+      unmountRef.current = null;
+    }
+    if (resetRef.current) {
+      window.clearTimeout(resetRef.current);
+      resetRef.current = null;
+    }
+    setMounted(true);
+  };
+  hooks.useDidUpdate(() => {
+    if (_progress >= 100) {
+      stop();
+      onFinish == null ? void 0 : onFinish();
+      unmountRef.current = window.setTimeout(() => {
+        unmountRef.current = null;
+        setMounted(false);
+        if (autoReset) {
+          resetRef.current = window.setTimeout(() => {
+            resetRef.current = null;
+            reset();
+          }, reducedMotion ? 0 : exitTransitionDuration);
+        }
+      }, exitTimeout);
+    } else if (!mounted) {
+      cancelUnmount();
+    }
+  }, [_progress]);
+  events.useNavigationProgressEvents({ start, stop, set, increment, decrement, reset });
+  return /* @__PURE__ */ React__default.createElement(core.OptionalPortal, {
+    withinPortal
+  }, !unmountProgress && /* @__PURE__ */ React__default.createElement(core.Progress, {
+    radius: 0,
+    value: _progress,
+    size,
+    color,
+    styles: {
+      root: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex,
+        backgroundColor: "transparent",
+        transitionProperty: "opacity",
+        transitionTimingFunction: theme.transitionTimingFunction,
+        transitionDuration: `${reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration}ms`,
+        opacity: mounted ? 1 : 0
+      },
+      bar: {
+        position: "relative",
+        transitionProperty: "width",
+        transitionTimingFunction: theme.transitionTimingFunction,
+        transitionDuration: `${reducedMotion || !mounted ? 0 : transitionDuration}ms`
+      }
+    }
+  }));
+}
+
+exports.NavigationProgress = NavigationProgress;
+//# sourceMappingURL=NavigationProgress.js.map

package/cjs/NavigationProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationProgress.js","sources":["../src/NavigationProgress.tsx"],"sourcesContent":["import {\n  OptionalPortal,\n  Progress,\n  useMantineTheme,\n  getDefaultZIndex,\n  MantineColor,\n} from '@mantine/core';\nimport { useDidUpdate, useInterval, useReducedMotion } from '@mantine/hooks';\nimport React, { useRef, useState } from 'react';\nimport { useNavigationProgressEvents } from './events';\n\nexport interface NavigationProgressProps {\n  /** The default progress */\n  initialProgress?: number;\n\n  /** Key of theme.colors of any other valid CSS color */\n  color?: MantineColor;\n\n  /** The height of the progressbar in px */\n  size?: number;\n\n  /** Called when the progressbar reaches 100% */\n  onFinish?(): void;\n\n  /** Determines whether progress should be automatically reset when 100% is reached */\n  autoReset?: boolean;\n\n  /** Step interval in ms */\n  stepInterval?: number;\n\n  /** Transition duration in ms */\n  transitionDuration?: number;\n\n  /** Number of ms that should elapse before progressbar is hidden after reaching 100% */\n  exitTimeout?: number;\n\n  /** Exit transition duration in ms */\n  exitTransitionDuration?: number;\n\n  /** Determines whether progressbar should be rendered within Portal, defaults to true */\n  withinPortal?: boolean;\n\n  /** Progressbar z-index */\n  zIndex?: React.CSSProperties['zIndex'];\n}\n\nexport function NavigationProgress({\n  initialProgress = 0,\n  color,\n  size = 3,\n  stepInterval = 500,\n  transitionDuration = 300,\n  exitTimeout = 500,\n  exitTransitionDuration = 400,\n  onFinish,\n  autoReset = false,\n  withinPortal = true,\n  zIndex = getDefaultZIndex('max'),\n}: NavigationProgressProps) {\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reducedMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const [_progress, setProgress] = useState(initialProgress);\n  const [mounted, setMounted] = useState(true);\n  const [unmountProgress, setUnmountProgress] = useState(false);\n  const resetRef = useRef<number>();\n  const unmountRef = useRef<number>();\n\n  const interval = useInterval(() => {\n    setProgress((amount) => {\n      let next = 0;\n      if (amount >= 0 && amount <= 20) {\n        next = 10;\n      } else if (amount >= 20 && amount <= 50) {\n        next = 4;\n      } else if (amount >= 50 && amount <= 80) {\n        next = 2;\n      } else if (amount >= 80 && amount <= 99) {\n        next = 0.5;\n      }\n\n      return amount + next;\n    });\n  }, stepInterval);\n\n  const set = (value: React.SetStateAction<number>) => setProgress(value);\n  const increment = (value: number) => setProgress((c) => Math.min(c + value, 100));\n  const decrement = (value: number) => setProgress((c) => Math.max(c - value, 0));\n  const start = () => {\n    interval.stop();\n    interval.start();\n  };\n  const stop = () => interval.stop();\n  const reset = () => {\n    setUnmountProgress(true);\n    stop();\n    setProgress(0);\n    window.setTimeout(() => setUnmountProgress(false), 0);\n  };\n\n  const cancelUnmount = () => {\n    if (unmountRef.current) {\n      window.clearTimeout(unmountRef.current);\n      unmountRef.current = null;\n    }\n    if (resetRef.current) {\n      window.clearTimeout(resetRef.current);\n      resetRef.current = null;\n    }\n\n    setMounted(true);\n  };\n\n  useDidUpdate(() => {\n    if (_progress >= 100) {\n      stop();\n      onFinish?.();\n\n      unmountRef.current = window.setTimeout(() => {\n        unmountRef.current = null;\n        setMounted(false);\n\n        if (autoReset) {\n          resetRef.current = window.setTimeout(\n            () => {\n              resetRef.current = null;\n              reset();\n            },\n            reducedMotion ? 0 : exitTransitionDuration\n          );\n        }\n      }, exitTimeout);\n    } else if (!mounted) {\n      cancelUnmount();\n    }\n  }, [_progress]);\n\n  useNavigationProgressEvents({ start, stop, set, increment, decrement, reset });\n\n  return (\n    <OptionalPortal withinPortal={withinPortal}>\n      {!unmountProgress && (\n        <Progress\n          radius={0}\n          value={_progress}\n          size={size}\n          color={color}\n          styles={{\n            root: {\n              position: 'fixed',\n              top: 0,\n              left: 0,\n              right: 0,\n              zIndex,\n              backgroundColor: 'transparent',\n              transitionProperty: 'opacity',\n              transitionTimingFunction: theme.transitionTimingFunction,\n              transitionDuration: `${\n                reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration\n              }ms`,\n              opacity: mounted ? 1 : 0,\n            },\n            bar: {\n              position: 'relative',\n              transitionProperty: 'width',\n              transitionTimingFunction: theme.transitionTimingFunction,\n              transitionDuration: `${reducedMotion || !mounted ? 0 : transitionDuration}ms`,\n            },\n          }}\n        />\n      )}\n    </OptionalPortal>\n  );\n}\n"],"names":["getDefaultZIndex","useMantineTheme","useReducedMotion","useState","useRef","useInterval","useDidUpdate","useNavigationProgressEvents","React","OptionalPortal","Progress"],"mappings":"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"}

package/cjs/events.js

@@ -2,65 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var utils = require('@mantine/utils');
 
-const NPROGRESS_EVENTS = {
-  add: "mantine:add-nprogress",
-  decrease: "mantine:decrease-nprogress",
-  set: "mantine:set-nprogress",
-  start: "mantine:start-nprogress",
-  stop: "mantine:stop-nprogress",
-  reset: "mantine:reset-nprogress"
-};
-function createEvent(type, detail) {
-  return new CustomEvent(type, { detail });
-}
-function addNProgress(progress) {
-  window.dispatchEvent(createEvent(NPROGRESS_EVENTS.add, progress));
-}
-function decreaseNProgress(progress) {
-  window.dispatchEvent(createEvent(NPROGRESS_EVENTS.decrease, progress));
-}
-function setNProgress(progress) {
-  window.dispatchEvent(createEvent(NPROGRESS_EVENTS.set, progress));
-}
-function startNProgress() {
-  window.dispatchEvent(createEvent(NPROGRESS_EVENTS.start));
-}
-function stopNProgress() {
-  window.dispatchEvent(createEvent(NPROGRESS_EVENTS.stop));
-}
-function resetNProgress() {
-  window.dispatchEvent(createEvent(NPROGRESS_EVENTS.reset));
-}
-function useNProgressEvents(ctx) {
-  const events = {
-    add: (event) => ctx.add(event.detail),
-    decrease: (event) => ctx.decrease(event.detail),
-    set: (event) => ctx.set(event.detail),
-    start: ctx.start,
-    stop: ctx.stop,
-    reset: ctx.reset
-  };
-  React.useEffect(() => {
-    Object.keys(events).forEach((event) => {
-      window.addEventListener(NPROGRESS_EVENTS[event], events[event]);
-    });
-    return () => {
-      Object.keys(events).forEach((event) => {
-        window.removeEventListener(NPROGRESS_EVENTS[event], events[event]);
-      });
-    };
-  }, []);
-}
+const [useNavigationProgressEvents, createEvent] = utils.createUseExternalEvents("mantine-nprogress");
+const startNavigationProgress = createEvent("start");
+const stopNavigationProgress = createEvent("stop");
+const resetNavigationProgress = createEvent("reset");
+const setNavigationProgress = createEvent("set");
+const incrementNavigationProgress = createEvent("increment");
+const decrementNavigationProgress = createEvent("decrement");
 
-exports.NPROGRESS_EVENTS = NPROGRESS_EVENTS;
-exports.addNProgress = addNProgress;
 exports.createEvent = createEvent;
-exports.decreaseNProgress = decreaseNProgress;
-exports.resetNProgress = resetNProgress;
-exports.setNProgress = setNProgress;
-exports.startNProgress = startNProgress;
-exports.stopNProgress = stopNProgress;
-exports.useNProgressEvents = useNProgressEvents;
+exports.decrementNavigationProgress = decrementNavigationProgress;
+exports.incrementNavigationProgress = incrementNavigationProgress;
+exports.resetNavigationProgress = resetNavigationProgress;
+exports.setNavigationProgress = setNavigationProgress;
+exports.startNavigationProgress = startNavigationProgress;
+exports.stopNavigationProgress = stopNavigationProgress;
+exports.useNavigationProgressEvents = useNavigationProgressEvents;
 //# sourceMappingURL=events.js.map

package/cjs/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","sources":["../src/events.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype ValueOf<T> = T[keyof T];\n\ninterface NProgressProps {\n  start: () => void;\n  stop: () => void;\n  set: (progress: number) => void;\n  add: (progress: number) => void;\n  decrease: (progress: number) => void;\n  reset: () => void;\n}\n\nexport const NPROGRESS_EVENTS = {\n  add: 'mantine:add-nprogress',\n  decrease: 'mantine:decrease-nprogress',\n  set: 'mantine:set-nprogress',\n  start: 'mantine:start-nprogress',\n  stop: 'mantine:stop-nprogress',\n  reset: 'mantine:reset-nprogress',\n} as const;\n\nexport function createEvent(type: ValueOf<typeof NPROGRESS_EVENTS>, detail?: any) {\n  return new CustomEvent(type, { detail });\n}\n\nexport function addNProgress(progress: number) {\n  window.dispatchEvent(createEvent(NPROGRESS_EVENTS.add, progress));\n}\n\nexport function decreaseNProgress(progress: number) {\n  window.dispatchEvent(createEvent(NPROGRESS_EVENTS.decrease, progress));\n}\n\nexport function setNProgress(progress: React.SetStateAction<number>) {\n  window.dispatchEvent(createEvent(NPROGRESS_EVENTS.set, progress));\n}\n\nexport function startNProgress() {\n  window.dispatchEvent(createEvent(NPROGRESS_EVENTS.start));\n}\n\nexport function stopNProgress() {\n  window.dispatchEvent(createEvent(NPROGRESS_EVENTS.stop));\n}\n\nexport function resetNProgress() {\n  window.dispatchEvent(createEvent(NPROGRESS_EVENTS.reset));\n}\n\nexport function useNProgressEvents(ctx: NProgressProps) {\n  const events = {\n    add: (event: any) => ctx.add(event.detail),\n    decrease: (event: any) => ctx.decrease(event.detail),\n    set: (event: any) => ctx.set(event.detail),\n    start: ctx.start,\n    stop: ctx.stop,\n    reset: ctx.reset,\n  };\n\n  useEffect(() => {\n    Object.keys(events).forEach((event) => {\n      window.addEventListener(NPROGRESS_EVENTS[event], events[event]);\n    });\n\n    return () => {\n      Object.keys(events).forEach((event) => {\n        window.removeEventListener(NPROGRESS_EVENTS[event], events[event]);\n      });\n    };\n  }, []);\n}\n"],"names":["useEffect"],"mappings":";;;;;;AACY,MAAC,gBAAgB,GAAG;AAChC,EAAE,GAAG,EAAE,uBAAuB;AAC9B,EAAE,QAAQ,EAAE,4BAA4B;AACxC,EAAE,GAAG,EAAE,uBAAuB;AAC9B,EAAE,KAAK,EAAE,yBAAyB;AAClC,EAAE,IAAI,EAAE,wBAAwB;AAChC,EAAE,KAAK,EAAE,yBAAyB;AAClC,EAAE;AACK,SAAS,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE;AAC1C,EAAE,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;AAC3C,CAAC;AACM,SAAS,YAAY,CAAC,QAAQ,EAAE;AACvC,EAAE,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC,gBAAgB,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;AACpE,CAAC;AACM,SAAS,iBAAiB,CAAC,QAAQ,EAAE;AAC5C,EAAE,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;AACzE,CAAC;AACM,SAAS,YAAY,CAAC,QAAQ,EAAE;AACvC,EAAE,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC,gBAAgB,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;AACpE,CAAC;AACM,SAAS,cAAc,GAAG;AACjC,EAAE,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5D,CAAC;AACM,SAAS,aAAa,GAAG;AAChC,EAAE,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC;AAC3D,CAAC;AACM,SAAS,cAAc,GAAG;AACjC,EAAE,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;AAC5D,CAAC;AACM,SAAS,kBAAkB,CAAC,GAAG,EAAE;AACxC,EAAE,MAAM,MAAM,GAAG;AACjB,IAAI,GAAG,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC;AACzC,IAAI,QAAQ,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;AACnD,IAAI,GAAG,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC;AACzC,IAAI,KAAK,EAAE,GAAG,CAAC,KAAK;AACpB,IAAI,IAAI,EAAE,GAAG,CAAC,IAAI;AAClB,IAAI,KAAK,EAAE,GAAG,CAAC,KAAK;AACpB,GAAG,CAAC;AACJ,EAAEA,eAAS,CAAC,MAAM;AAClB,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK;AAC3C,MAAM,MAAM,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AACtE,KAAK,CAAC,CAAC;AACP,IAAI,OAAO,MAAM;AACjB,MAAM,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK;AAC7C,QAAQ,MAAM,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAC3E,OAAO,CAAC,CAAC;AACT,KAAK,CAAC;AACN,GAAG,EAAE,EAAE,CAAC,CAAC;AACT;;;;;;;;;;;;"}
+{"version":3,"file":"events.js","sources":["../src/events.ts"],"sourcesContent":["import { createUseExternalEvents } from '@mantine/utils';\n\nexport type NavigationProgressEvents = {\n  start(): void;\n  stop(): void;\n  set(progress: number): void;\n  increment(progress: number): void;\n  decrement(progress: number): void;\n  reset(): void;\n};\n\nexport const [useNavigationProgressEvents, createEvent] =\n  createUseExternalEvents<NavigationProgressEvents>('mantine-nprogress');\n\nexport const startNavigationProgress = createEvent('start');\nexport const stopNavigationProgress = createEvent('stop');\nexport const resetNavigationProgress = createEvent('reset');\nexport const setNavigationProgress = createEvent('set');\nexport const incrementNavigationProgress = createEvent('increment');\nexport const decrementNavigationProgress = createEvent('decrement');\n"],"names":["createUseExternalEvents"],"mappings":";;;;;;AACY,MAAC,CAAC,2BAA2B,EAAE,WAAW,CAAC,GAAGA,6BAAuB,CAAC,mBAAmB,EAAE;AAC3F,MAAC,uBAAuB,GAAG,WAAW,CAAC,OAAO,EAAE;AAChD,MAAC,sBAAsB,GAAG,WAAW,CAAC,MAAM,EAAE;AAC9C,MAAC,uBAAuB,GAAG,WAAW,CAAC,OAAO,EAAE;AAChD,MAAC,qBAAqB,GAAG,WAAW,CAAC,KAAK,EAAE;AAC5C,MAAC,2BAA2B,GAAG,WAAW,CAAC,WAAW,EAAE;AACxD,MAAC,2BAA2B,GAAG,WAAW,CAAC,WAAW;;;;;;;;;;;"}

package/cjs/index.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var NProgress = require('./NProgress.js');
+var NavigationProgress = require('./NavigationProgress.js');
 var events = require('./events.js');
 
 
 
-exports.NProgress = NProgress.NProgress;
-exports.addNProgress = events.addNProgress;
-exports.decreaseNProgress = events.decreaseNProgress;
-exports.resetNProgress = events.resetNProgress;
-exports.setNProgress = events.setNProgress;
-exports.startNProgress = events.startNProgress;
-exports.stopNProgress = events.stopNProgress;
+exports.NavigationProgress = NavigationProgress.NavigationProgress;
+exports.decrementNavigationProgress = events.decrementNavigationProgress;
+exports.incrementNavigationProgress = events.incrementNavigationProgress;
+exports.resetNavigationProgress = events.resetNavigationProgress;
+exports.setNavigationProgress = events.setNavigationProgress;
+exports.startNavigationProgress = events.startNavigationProgress;
+exports.stopNavigationProgress = events.stopNavigationProgress;
 //# sourceMappingURL=index.js.map

package/cjs/mantine-nprogress/src/NavigationProgress.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@mantine/core');
+var hooks = require('@mantine/hooks');
+var React = require('react');
+var events = require('./events.js');
+var getDefaultZIndex = require('../../mantine-styles/esm/theme/utils/get-default-z-index/get-default-z-index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function NavigationProgress({
+  initialProgress = 0,
+  color,
+  size = 3,
+  stepInterval = 500,
+  transitionDuration = 600,
+  exitTimeout = 700,
+  exitTransitionDuration = 600,
+  onFinish,
+  autoReset = false,
+  withinPortal = true,
+  zIndex = getDefaultZIndex.getDefaultZIndex("max")
+}) {
+  const theme = core.useMantineTheme();
+  const shouldReduceMotion = hooks.useReducedMotion();
+  const reducedMotion = theme.respectReducedMotion ? shouldReduceMotion : false;
+  const [_progress, setProgress] = React.useState(initialProgress);
+  const [mounted, setMounted] = React.useState(true);
+  const [unmountProgress, setUnmountProgress] = React.useState(false);
+  const resetRef = React.useRef();
+  const unmountRef = React.useRef();
+  const interval = hooks.useInterval(() => {
+    setProgress((amount) => {
+      let next = 0;
+      if (amount >= 0 && amount <= 20) {
+        next = 10;
+      } else if (amount >= 20 && amount <= 50) {
+        next = 4;
+      } else if (amount >= 50 && amount <= 80) {
+        next = 2;
+      } else if (amount >= 80 && amount <= 99) {
+        next = 0.5;
+      }
+      return amount + next;
+    });
+  }, stepInterval);
+  const set = (value) => setProgress(value);
+  const increment = (value) => setProgress((c) => Math.min(c + value, 100));
+  const decrement = (value) => setProgress((c) => Math.max(c - value, 0));
+  const start = () => {
+    interval.stop();
+    interval.start();
+  };
+  const stop = () => interval.stop();
+  const reset = () => {
+    setUnmountProgress(true);
+    stop();
+    setProgress(0);
+    window.setTimeout(() => setUnmountProgress(false), 0);
+  };
+  const cancelUnmount = () => {
+    if (unmountRef.current) {
+      window.clearTimeout(unmountRef.current);
+      unmountRef.current = null;
+    }
+    if (resetRef.current) {
+      window.clearTimeout(resetRef.current);
+      resetRef.current = null;
+    }
+    setMounted(true);
+  };
+  hooks.useDidUpdate(() => {
+    if (_progress >= 100) {
+      stop();
+      onFinish == null ? void 0 : onFinish();
+      unmountRef.current = window.setTimeout(() => {
+        unmountRef.current = null;
+        setMounted(false);
+        if (autoReset) {
+          resetRef.current = window.setTimeout(() => {
+            resetRef.current = null;
+            reset();
+          }, reducedMotion ? 0 : exitTransitionDuration);
+        }
+      }, exitTimeout);
+    } else if (!mounted) {
+      cancelUnmount();
+    }
+  }, [_progress]);
+  events.useNavigationProgressEvents({ start, stop, set, increment, decrement, reset });
+  return /* @__PURE__ */ React__default.createElement(core.OptionalPortal, {
+    withinPortal
+  }, !unmountProgress && /* @__PURE__ */ React__default.createElement(core.Progress, {
+    radius: 0,
+    value: _progress,
+    size,
+    color,
+    styles: {
+      root: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex,
+        backgroundColor: "transparent",
+        transitionProperty: "opacity",
+        transitionTimingFunction: theme.transitionTimingFunction,
+        transitionDuration: `${reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration}ms`,
+        opacity: mounted ? 1 : 0
+      },
+      bar: {
+        position: "relative",
+        transitionProperty: "width",
+        transitionTimingFunction: theme.transitionTimingFunction,
+        transitionDuration: `${reducedMotion || !mounted ? 0 : transitionDuration}ms`
+      }
+    }
+  }));
+}
+
+exports.NavigationProgress = NavigationProgress;
+//# sourceMappingURL=NavigationProgress.js.map

package/cjs/mantine-nprogress/src/NavigationProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationProgress.js","sources":["../../../src/NavigationProgress.tsx"],"sourcesContent":["import { OptionalPortal, Progress, useMantineTheme } from '@mantine/core';\nimport { useDidUpdate, useInterval, useReducedMotion } from '@mantine/hooks';\nimport { getDefaultZIndex, MantineColor } from '@mantine/styles';\nimport React, { useRef, useState } from 'react';\nimport { useNavigationProgressEvents } from './events';\n\nexport interface NavigationProgressProps {\n  /** The default progress */\n  initialProgress?: number;\n\n  /** Key of theme.colors of any other valid CSS color */\n  color?: MantineColor;\n\n  /** The height of the progressbar in px */\n  size?: number;\n\n  /** Called when the progressbar reaches 100% */\n  onFinish?(): void;\n\n  /** Determines whether progress should be automatically reset when 100% is reached */\n  autoReset?: boolean;\n\n  /** Step interval in ms */\n  stepInterval?: number;\n\n  /** Transition duration in ms */\n  transitionDuration?: number;\n\n  /** Number of ms that should elapse before progressbar is hidden after reaching 100% */\n  exitTimeout?: number;\n\n  /** Exit transition duration in ms */\n  exitTransitionDuration?: number;\n\n  /** Determines whether progressbar should be rendered within Portal, defaults to true */\n  withinPortal?: boolean;\n\n  /** Progressbar z-index */\n  zIndex?: React.CSSProperties['zIndex'];\n}\n\nexport function NavigationProgress({\n  initialProgress = 0,\n  color,\n  size = 3,\n  stepInterval = 500,\n  transitionDuration = 600,\n  exitTimeout = 700,\n  exitTransitionDuration = 600,\n  onFinish,\n  autoReset = false,\n  withinPortal = true,\n  zIndex = getDefaultZIndex('max'),\n}: NavigationProgressProps) {\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reducedMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const [_progress, setProgress] = useState(initialProgress);\n  const [mounted, setMounted] = useState(true);\n  const [unmountProgress, setUnmountProgress] = useState(false);\n  const resetRef = useRef<number>();\n  const unmountRef = useRef<number>();\n\n  const interval = useInterval(() => {\n    setProgress((amount) => {\n      let next = 0;\n      if (amount >= 0 && amount <= 20) {\n        next = 10;\n      } else if (amount >= 20 && amount <= 50) {\n        next = 4;\n      } else if (amount >= 50 && amount <= 80) {\n        next = 2;\n      } else if (amount >= 80 && amount <= 99) {\n        next = 0.5;\n      }\n\n      return amount + next;\n    });\n  }, stepInterval);\n\n  const set = (value: React.SetStateAction<number>) => setProgress(value);\n  const increment = (value: number) => setProgress((c) => Math.min(c + value, 100));\n  const decrement = (value: number) => setProgress((c) => Math.max(c - value, 0));\n  const start = () => {\n    interval.stop();\n    interval.start();\n  };\n  const stop = () => interval.stop();\n  const reset = () => {\n    setUnmountProgress(true);\n    stop();\n    setProgress(0);\n    window.setTimeout(() => setUnmountProgress(false), 0);\n  };\n\n  const cancelUnmount = () => {\n    if (unmountRef.current) {\n      window.clearTimeout(unmountRef.current);\n      unmountRef.current = null;\n    }\n    if (resetRef.current) {\n      window.clearTimeout(resetRef.current);\n      resetRef.current = null;\n    }\n\n    setMounted(true);\n  };\n\n  useDidUpdate(() => {\n    if (_progress >= 100) {\n      stop();\n      onFinish?.();\n\n      unmountRef.current = window.setTimeout(() => {\n        unmountRef.current = null;\n        setMounted(false);\n\n        if (autoReset) {\n          resetRef.current = window.setTimeout(\n            () => {\n              resetRef.current = null;\n              reset();\n            },\n            reducedMotion ? 0 : exitTransitionDuration\n          );\n        }\n      }, exitTimeout);\n    } else if (!mounted) {\n      cancelUnmount();\n    }\n  }, [_progress]);\n\n  useNavigationProgressEvents({ start, stop, set, increment, decrement, reset });\n\n  return (\n    <OptionalPortal withinPortal={withinPortal}>\n      {!unmountProgress && (\n        <Progress\n          radius={0}\n          value={_progress}\n          size={size}\n          color={color}\n          styles={{\n            root: {\n              position: 'fixed',\n              top: 0,\n              left: 0,\n              right: 0,\n              zIndex,\n              backgroundColor: 'transparent',\n              transitionProperty: 'opacity',\n              transitionTimingFunction: theme.transitionTimingFunction,\n              transitionDuration: `${\n                reducedMotion || _progress !== 100 ? 0 : exitTransitionDuration\n              }ms`,\n              opacity: mounted ? 1 : 0,\n            },\n            bar: {\n              position: 'relative',\n              transitionProperty: 'width',\n              transitionTimingFunction: theme.transitionTimingFunction,\n              transitionDuration: `${reducedMotion || !mounted ? 0 : transitionDuration}ms`,\n            },\n          }}\n        />\n      )}\n    </OptionalPortal>\n  );\n}\n"],"names":["getDefaultZIndex","useMantineTheme","useReducedMotion","useState","useRef","useInterval","useDidUpdate","useNavigationProgressEvents","React","OptionalPortal","Progress"],"mappings":"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"}

package/cjs/mantine-nprogress/src/events.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('@mantine/utils');
+
+const [useNavigationProgressEvents, createEvent] = utils.createUseExternalEvents("mantine-nprogress");
+const startNavigationProgress = createEvent("start");
+const stopNavigationProgress = createEvent("stop");
+const resetNavigationProgress = createEvent("reset");
+const setNavigationProgress = createEvent("set");
+const incrementNavigationProgress = createEvent("increment");
+const decrementNavigationProgress = createEvent("decrement");
+
+exports.createEvent = createEvent;
+exports.decrementNavigationProgress = decrementNavigationProgress;
+exports.incrementNavigationProgress = incrementNavigationProgress;
+exports.resetNavigationProgress = resetNavigationProgress;
+exports.setNavigationProgress = setNavigationProgress;
+exports.startNavigationProgress = startNavigationProgress;
+exports.stopNavigationProgress = stopNavigationProgress;
+exports.useNavigationProgressEvents = useNavigationProgressEvents;
+//# sourceMappingURL=events.js.map

package/cjs/mantine-nprogress/src/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","sources":["../../../src/events.ts"],"sourcesContent":["import { createUseExternalEvents } from '@mantine/utils';\n\nexport type NavigationProgressEvents = {\n  start(): void;\n  stop(): void;\n  set(progress: number): void;\n  increment(progress: number): void;\n  decrement(progress: number): void;\n  reset(): void;\n};\n\nexport const [useNavigationProgressEvents, createEvent] =\n  createUseExternalEvents<NavigationProgressEvents>('mantine-nprogress');\n\nexport const NPROGRESS_EVENTS = {\n  add: 'mantine:add-nprogress',\n  decrease: 'mantine:decrease-nprogress',\n  set: 'mantine:set-nprogress',\n  start: 'mantine:start-nprogress',\n  stop: 'mantine:stop-nprogress',\n  reset: 'mantine:reset-nprogress',\n} as const;\n\nexport const startNavigationProgress = createEvent('start');\nexport const stopNavigationProgress = createEvent('stop');\nexport const resetNavigationProgress = createEvent('reset');\nexport const setNavigationProgress = createEvent('set');\nexport const incrementNavigationProgress = createEvent('increment');\nexport const decrementNavigationProgress = createEvent('decrement');\n"],"names":["createUseExternalEvents"],"mappings":";;;;;;AACY,MAAC,CAAC,2BAA2B,EAAE,WAAW,CAAC,GAAGA,6BAAuB,CAAC,mBAAmB,EAAE;AAS3F,MAAC,uBAAuB,GAAG,WAAW,CAAC,OAAO,EAAE;AAChD,MAAC,sBAAsB,GAAG,WAAW,CAAC,MAAM,EAAE;AAC9C,MAAC,uBAAuB,GAAG,WAAW,CAAC,OAAO,EAAE;AAChD,MAAC,qBAAqB,GAAG,WAAW,CAAC,KAAK,EAAE;AAC5C,MAAC,2BAA2B,GAAG,WAAW,CAAC,WAAW,EAAE;AACxD,MAAC,2BAA2B,GAAG,WAAW,CAAC,WAAW;;;;;;;;;;;"}

package/cjs/mantine-nprogress/src/index.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var NavigationProgress = require('./NavigationProgress.js');
+var events = require('./events.js');
+
+
+
+exports.NavigationProgress = NavigationProgress.NavigationProgress;
+exports.decrementNavigationProgress = events.decrementNavigationProgress;
+exports.incrementNavigationProgress = events.incrementNavigationProgress;
+exports.resetNavigationProgress = events.resetNavigationProgress;
+exports.setNavigationProgress = events.setNavigationProgress;
+exports.startNavigationProgress = events.startNavigationProgress;
+exports.stopNavigationProgress = events.stopNavigationProgress;
+//# sourceMappingURL=index.js.map

package/cjs/mantine-nprogress/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}