@tanem/react-nprogress 6.0.4 → 7.1.0

package/README.md

@@ -8,22 +8,30 @@
 
 > A React primitive for building slim progress bars.
 
-[Background](#background) | [Usage](#usage) | [Live Examples](#live-examples) | [API](#api) | [Installation](#installation) | [License](#license)
+[Background](#background) | [When to Use This](#when-to-use-this) | [Usage](#usage) | [API](#api) | [Live Examples](#live-examples) | [Installation](#installation) | [Contributing](#contributing) | [License](#license)
 
 ## Background
 
 This is a React port of [rstacruz](https://github.com/rstacruz)'s [`nprogress`](https://github.com/rstacruz/nprogress) module. It exposes an API that encapsulates the logic of `nprogress` and renders nothing, allowing consumers to implement their own rendering.
 
+Two versions of `nprogress` are in circulation and they trickle differently. The 2014 npm release, `0.2.0`, adds a random amount of at most `0.02` every 800ms. The repository's master branch, never published to npm, adds tiered amounts every 200ms. This library mirrors master, so a side by side comparison against the npm package or the official demo page will show a different pace. The [`increment`](#increment) option covers the `0.2.0` pacing if you prefer the older feel.
+
+## When to Use This
+
+This package is a headless primitive. It renders no markup and ships no CSS, supplying only the pacing state: a `progress` value that trickles towards completion, an `isFinished` flag, and the `animationDuration` to transition with. The bar itself is yours to write.
+
+- Use a drop-in bar such as [`nextjs-toploader`](https://github.com/TheSGJ/nextjs-toploader), [`next-nprogress-bar`](https://github.com/Skyleen77/next-nprogress-bar), or [`nprogress`](https://github.com/rstacruz/nprogress) itself when you want a styled bar wired up to your router with no rendering work.
+- Use this package when you render the bar yourself, for example with design-system components or custom containers and spinners, and want only the trickle and completion logic handled for you.
+- Use this package when you need several progress bars on one page, each tracking its own state.
+
 ## Usage
 
-In the following examples, `Container`, `Bar` and `Spinner` are custom components.
+`Container`, `Bar` and `Spinner` are components you write: this package renders nothing itself. Every entry in [Live Examples](#live-examples) contains a working implementation of all three.
 
 **Hook**
 
 ```jsx
 import { useNProgress } from '@tanem/react-nprogress'
-import React from 'react'
-import { render } from 'react-dom'
 
 import Bar from './Bar'
 import Container from './Container'
@@ -41,170 +49,168 @@ const Progress = ({ isAnimating }) => {
     </Container>
   )
 }
-
-render(<Progress isAnimating />, document.getElementById('root'))
 ```
 
 **Render Props**
 
 ```jsx
 import { NProgress } from '@tanem/react-nprogress'
-import React from 'react'
-import { render } from 'react-dom'
 
 import Bar from './Bar'
 import Container from './Container'
 import Spinner from './Spinner'
 
-render(
-  <NProgress isAnimating>
+const Progress = ({ isAnimating }) => (
+  <NProgress isAnimating={isAnimating}>
     {({ animationDuration, isFinished, progress }) => (
       <Container animationDuration={animationDuration} isFinished={isFinished}>
         <Bar animationDuration={animationDuration} progress={progress} />
         <Spinner />
       </Container>
     )}
-  </NProgress>,
-  document.getElementById('root')
+  </NProgress>
 )
 ```
 
-**HOC**
+**Restarting**
 
-```jsx
-import { withNProgress } from '@tanem/react-nprogress'
-import React from 'react'
-import { render } from 'react-dom'
+Both patterns leave the bar mounted between runs, and `progress` returns to `minimum` when it starts again. A bar that transitions `margin-left` or `transform` therefore animates backwards from where it finished, in full view, before it starts trickling forward. Back to back navigations hit this every time.
 
-import Bar from './Bar'
-import Container from './Container'
-import Spinner from './Spinner'
+Change a `key` on the bar whenever it starts, so React mounts a fresh element at `minimum` instead:
 
-const Inner = ({ animationDuration, isFinished, progress }) => (
-  <Container animationDuration={animationDuration} isFinished={isFinished}>
-    <Bar animationDuration={animationDuration} progress={progress} />
-    <Spinner />
-  </Container>
-)
+```jsx
+const [state, setState] = useState({ isAnimating: false, key: 0 })
 
-const Enhanced = withNProgress(Inner)
+const start = () => {
+  setState((prevState) => ({ isAnimating: true, key: prevState.key ^ 1 }))
+}
 
-render(<Enhanced isAnimating />, document.getElementById('root'))
+return <Progress isAnimating={state.isAnimating} key={state.key} />
 ```
 
-## Live Examples
-
-- HOC: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/hoc) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/hoc)
-- Material UI: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/material-ui) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/material-ui)
-- Multiple Instances: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/multiple-instances) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/multiple-instances)
-- Next App Router: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/next-app-router) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/next-app-router)
-- Next Pages Router: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/next-pages-router) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/next-pages-router)
-- Original Design: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/original-design) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/original-design)
-- Plain JS: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/plain-js) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/plain-js)
-- React Router: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/react-router) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/react-router)
-- Render Props: [Source](https://github.com/tanem/react-nprogress/tree/master/examples/render-props) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/render-props)
-- UMD Build (Development): [Source](https://github.com/tanem/react-nprogress/tree/master/examples/umd-dev) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/umd-dev)
-- UMD Build (Production): [Source](https://github.com/tanem/react-nprogress/tree/master/examples/umd-prod) | [Sandbox](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/umd-prod)
+Every entry in [Live Examples](#live-examples) does this. Dropping the transition while `isFinished` is not an alternative: `isFinished` is already `false` by the time `progress` resets, so the transition is back on for the step that moves the bar.
 
 ## API
 
-**Props**
-
-- `animationDuration` - _Optional_ Number indicating the animation duration in `ms`. Defaults to `200`.
-- `incrementDuration` - _Optional_ Number indicating the length of time between progress bar increments in `ms`. Defaults to `200`.
-- `isAnimating` - _Optional_ Boolean indicating if the progress bar is animating. Defaults to `false`.
-- `minimum` - _Optional_ Number between `0` and `1` indicating the minimum value of the progress bar. Defaults to `0.08`.
+The package exports one hook and one component. Both take the same [options](#options) and produce the same [values](#return-value), so the choice between them is a matter of which pattern suits the calling code. Both shapes are exported as types, for typing code that wraps either entry point:
 
-**Hook Example**
+```ts
+import type { NProgressOptions, NProgressState } from '@tanem/react-nprogress'
+```
 
-```jsx
-const Progress = ({
-  animationDuration,
-  incrementDuration,
-  isAnimating,
-  minimum
-}) => {
-  const { isFinished, progress } = useNProgress({
-    animationDuration,
-    incrementDuration,
-    isAnimating,
-    minimum
-  })
+### `useNProgress`
 
-  return (
-    <Container animationDuration={animationDuration} isFinished={isFinished}>
-      <Bar animationDuration={animationDuration} progress={progress} />
-      <Spinner />
-    </Container>
-  )
-}
+Returns the state of one progress bar. Call it once per bar: two calls, or two mounted `NProgress` components, track their progress independently.
 
-<Progress
-  animationDuration={300}
-  incrementDuration={500}
-  isAnimating
-  minimum={0.1}
-/>
+```jsx
+const { animationDuration, isFinished, progress } = useNProgress({
+  animationDuration: 300,
+  increment: (progress) => progress + 0.01,
+  incrementDuration: 500,
+  isAnimating: true,
+  minimum: 0.1,
+})
 ```
 
-**Render Props Example**
+### `NProgress`
+
+Takes the options as props and calls `children` with the values the hook returns. `children` is required and must return a React element.
 
 ```jsx
 <NProgress
   animationDuration={300}
+  increment={(progress) => progress + 0.01}
   incrementDuration={500}
   isAnimating
   minimum={0.1}
 >
-  {({ animationDuration, isFinished, progress }) => (
-    <Container animationDuration={animationDuration} isFinished={isFinished}>
-      <Bar animationDuration={animationDuration} progress={progress} />
-      <Spinner />
-    </Container>
+  {({ animationDuration, progress }) => (
+    <Bar animationDuration={animationDuration} progress={progress} />
   )}
 </NProgress>
 ```
 
-**HOC Example**
+### Options
 
-```jsx
-const Inner = ({ animationDuration, isFinished, progress }) => (
-  <Container animationDuration={animationDuration} isFinished={isFinished}>
-    <Bar animationDuration={animationDuration} progress={progress} />
-    <Spinner />
-  </Container>
-)
+All five options are optional. The type is `NProgressOptions`.
 
-const Enhanced = withNProgress(Inner)
+| Option                                    | Type                           | Default        |
+| ----------------------------------------- | ------------------------------ | -------------- |
+| [`animationDuration`](#animationduration) | `number`                       | `200`          |
+| [`increment`](#increment)                 | `(progress: number) => number` | tiered trickle |
+| [`incrementDuration`](#incrementduration) | `number`                       | `200`          |
+| [`isAnimating`](#isanimating)             | `boolean`                      | `false`        |
+| [`minimum`](#minimum)                     | `number`                       | `0.08`         |
 
-<Enhanced
-  animationDuration={300}
-  incrementDuration={500}
-  isAnimating
-  minimum={0.1}
-/>
-```
+#### `animationDuration`
 
-## Installation
+Milliseconds the bar is given to animate out once it completes. `progress` reaches `1` as soon as `isAnimating` goes `false`, and `isFinished` follows this many milliseconds later, leaving that window for the exit transition. The value is also returned unchanged, so a single number drives both the timing and the CSS transitions.
 
+#### `increment`
+
+Size of each trickle step. The function is called with the current `progress` and returns the next value. The default is the tiered curve nprogress uses: `+0.1` below `0.2`, then `+0.04`, `+0.02`, and `+0.005` as `progress` grows, held at a ceiling of `0.994` so the bar never looks complete before it is.
+
+The return value is clamped to between `minimum` and `1`, and nothing else. A custom function therefore owns its own ceiling. Leave it short of `1`, since reaching `1` is what completion means, and let `isAnimating` going `false` take the bar the rest of the way.
+
+Returning a random amount is fine, but keep the function free of other side effects. It runs inside a React state update, and StrictMode calls it twice per increment in development. This trickles a random amount of at most `0.02` every 800ms, which is how nprogress `0.2.0` paces itself:
+
+```jsx
+const { progress } = useNProgress({
+  increment: (progress) => Math.min(progress + Math.random() * 0.02, 0.994),
+  incrementDuration: 800,
+  isAnimating,
+})
 ```
-$ npm install @tanem/react-nprogress
-```
 
-UMD builds are also available for use with pre-React 19 via [unpkg](https://unpkg.com/):
+`0.2.0` also transitions the bar with `ease` where master uses `linear`. Easing lives in your renderer's CSS, so match it there if you want the rest of that look. The [Classic 0.2.0](https://github.com/tanem/react-nprogress/tree/master/examples/classic-020) example puts both together.
+
+A new function identity on every render is fine too: passing an inline function does not restart the trickle timer. The next increment uses the latest function.
+
+#### `incrementDuration`
+
+Milliseconds between increments while the bar is animating. It controls the trickle pacing only. Step size is [`increment`](#increment).
+
+#### `isAnimating`
+
+Whether the bar is running. Going `true` starts it, going `false` completes it. Completion is what drives the final state: `progress` is set to `1`, and `isFinished` becomes `true` `animationDuration` milliseconds later.
+
+#### `minimum`
+
+Lower bound for `progress`, between `0` and `1`. The bar first appears at this value, then trickles up from there. Changing it while the bar is animating does not rewind the bar. Progress holds where it is, and the new bound applies from the next increment.
 
-- https://unpkg.com/@tanem/react-nprogress/dist/react-nprogress.umd.development.js
-- https://unpkg.com/@tanem/react-nprogress/dist/react-nprogress.umd.production.js
+### Return Value
 
-For the non-minified development version, make sure you have already included:
+`useNProgress` returns these values, and `NProgress` passes the same object to `children`. The type is `NProgressState`.
 
-- [`React`](https://unpkg.com/react@18/umd/react.development.js)
-- [`ReactDOM`](https://unpkg.com/react-dom@18/umd/react-dom.development.js)
+| Value               | Type      | Description                                                                                                                                                   |
+| ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `animationDuration` | `number`  | The `animationDuration` option, passed through so rendering code can transition with it.                                                                      |
+| `isFinished`        | `boolean` | `true` before the bar starts and again once it has animated out. `false` from when `isAnimating` goes `true` until `animationDuration` after it goes `false`. |
+| `progress`          | `number`  | Starts at `0`, appears at `minimum` when the bar starts, then trickles up by [`increment`](#increment) and goes to `1` on completion.                         |
+
+## Live Examples
+
+| Example                                                                                                | Sandbox                                                                                                      |
+| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
+| [Classic 0.2.0](https://github.com/tanem/react-nprogress/tree/master/examples/classic-020)             | [Open](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/classic-020)        |
+| [Material UI](https://github.com/tanem/react-nprogress/tree/master/examples/material-ui)               | [Open](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/material-ui)        |
+| [Multiple Instances](https://github.com/tanem/react-nprogress/tree/master/examples/multiple-instances) | [Open](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/multiple-instances) |
+| [Next App Router](https://github.com/tanem/react-nprogress/tree/master/examples/next-app-router)       | [Open](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/next-app-router)    |
+| [Next Pages Router](https://github.com/tanem/react-nprogress/tree/master/examples/next-pages-router)   | [Open](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/next-pages-router)  |
+| [Original Design](https://github.com/tanem/react-nprogress/tree/master/examples/original-design)       | [Open](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/original-design)    |
+| [Plain JS](https://github.com/tanem/react-nprogress/tree/master/examples/plain-js)                     | [Open](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/plain-js)           |
+| [React Router](https://github.com/tanem/react-nprogress/tree/master/examples/react-router)             | [Open](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/react-router)       |
+| [Render Props](https://github.com/tanem/react-nprogress/tree/master/examples/render-props)             | [Open](https://codesandbox.io/p/devbox/github/tanem/react-nprogress/tree/master/examples/render-props)       |
+
+## Installation
+
+```
+$ npm install @tanem/react-nprogress
+```
 
-For the minified production version, make sure you have already included:
+## Contributing
 
-- [`React`](https://unpkg.com/react@18/umd/react.production.min.js)
-- [`ReactDOM`](https://unpkg.com/react-dom@18/umd/react-dom.production.min.js)
+Issues and pull requests are welcome. The development loop is `npm run test:src`, and `npm test` runs the full suite. Repository conventions, for humans and coding agents alike, live in [`AGENTS.md`](AGENTS.md).
 
 ## License
 

package/dist/react-nprogress.cjs

@@ -0,0 +1,124 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let react = require("react");
+//#region src/clamp.ts
+const clamp = (num, lower, upper) => {
+	num = num <= upper ? num : upper;
+	num = num >= lower ? num : lower;
+	return num;
+};
+//#endregion
+//#region src/createTimeout.ts
+const createTimeout = () => {
+	let handle;
+	const cancel = () => {
+		if (handle !== void 0) window.cancelAnimationFrame(handle);
+	};
+	const schedule = (callback, delay) => {
+		cancel();
+		let deltaTime;
+		let start;
+		const frame = (time) => {
+			start = start || time;
+			deltaTime = time - start;
+			if (deltaTime > delay) {
+				callback();
+				return;
+			}
+			handle = window.requestAnimationFrame(frame);
+		};
+		handle = window.requestAnimationFrame(frame);
+	};
+	return {
+		cancel,
+		schedule
+	};
+};
+//#endregion
+//#region src/increment.ts
+const increment = (progress) => {
+	let amount = 0;
+	if (progress >= 0 && progress < .2) amount = .1;
+	else if (progress >= .2 && progress < .5) amount = .04;
+	else if (progress >= .5 && progress < .8) amount = .02;
+	else if (progress >= .8 && progress < .99) amount = .005;
+	return clamp(progress + amount, 0, .994);
+};
+//#endregion
+//#region src/useNProgress.tsx
+const initialState = {
+	phase: "idle",
+	progress: 0
+};
+const reducer = (state, action) => {
+	switch (action.type) {
+		case "complete": return state.phase === "animating" ? {
+			phase: "completing",
+			progress: 1
+		} : state;
+		case "finish": return {
+			phase: "finished",
+			progress: 1
+		};
+		case "start": return state.phase === "animating" ? state : {
+			phase: "animating",
+			progress: clamp(0, action.minimum, 1)
+		};
+		case "trickle": return {
+			...state,
+			progress: clamp(action.increment(state.progress), action.minimum, 1)
+		};
+	}
+};
+const useNProgress = ({ animationDuration = 200, increment: increment$1 = increment, incrementDuration = 200, isAnimating = false, minimum = .08 } = {}) => {
+	const [{ phase, progress }, dispatch] = (0, react.useReducer)(reducer, initialState);
+	const incrementRef = (0, react.useRef)(increment$1);
+	(0, react.useEffect)(() => {
+		incrementRef.current = increment$1;
+	});
+	(0, react.useEffect)(() => {
+		dispatch(isAnimating ? {
+			minimum,
+			type: "start"
+		} : { type: "complete" });
+	}, [isAnimating, minimum]);
+	(0, react.useEffect)(() => {
+		if (phase !== "animating") return;
+		const timeout = createTimeout();
+		const trickle = () => {
+			dispatch({
+				increment: incrementRef.current,
+				minimum,
+				type: "trickle"
+			});
+			timeout.schedule(trickle, incrementDuration);
+		};
+		timeout.schedule(trickle, incrementDuration);
+		return () => timeout.cancel();
+	}, [
+		incrementDuration,
+		minimum,
+		phase
+	]);
+	(0, react.useEffect)(() => {
+		if (phase !== "completing") return;
+		const timeout = createTimeout();
+		timeout.schedule(() => dispatch({ type: "finish" }), animationDuration);
+		return () => timeout.cancel();
+	}, [animationDuration, phase]);
+	return {
+		animationDuration,
+		isFinished: phase === "finished" || phase === "idle",
+		progress
+	};
+};
+//#endregion
+//#region src/NProgress.tsx
+const NProgress = ({ children, ...restProps }) => {
+	return children(useNProgress(restProps));
+};
+//#endregion
+exports.NProgress = NProgress;
+exports.useNProgress = useNProgress;
+
+//# sourceMappingURL=react-nprogress.cjs.map

package/dist/react-nprogress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-nprogress.cjs","names":["defaultIncrement","useReducer","useRef","increment"],"sources":["../src/clamp.ts","../src/createTimeout.ts","../src/increment.ts","../src/useNProgress.tsx","../src/NProgress.tsx"],"sourcesContent":["export const clamp = (num: number, lower: number, upper: number): number => {\n  num = num <= upper ? num : upper\n  num = num >= lower ? num : lower\n  return num\n}\n","// Uses requestAnimationFrame rather than setTimeout for smoother animation\n// timing. Note that rAF is throttled or paused in background tabs, so progress\n// will stall when the tab is hidden and resume when it regains focus.\nexport const createTimeout = () => {\n  let handle: number | undefined\n\n  const cancel = (): void => {\n    if (handle !== undefined) {\n      window.cancelAnimationFrame(handle)\n    }\n  }\n\n  const schedule = (callback: () => void, delay: number): void => {\n    cancel()\n\n    let deltaTime\n    let start: number | undefined\n    const frame: FrameRequestCallback = (time) => {\n      start = start || time\n      deltaTime = time - start\n      if (deltaTime > delay) {\n        callback()\n        return\n      }\n      handle = window.requestAnimationFrame(frame)\n    }\n\n    handle = window.requestAnimationFrame(frame)\n  }\n\n  return {\n    cancel,\n    schedule,\n  }\n}\n","import { clamp } from './clamp'\n\nexport const increment = (progress: number): number => {\n  let amount = 0\n\n  if (progress >= 0 && progress < 0.2) {\n    amount = 0.1\n  } else if (progress >= 0.2 && progress < 0.5) {\n    amount = 0.04\n  } else if (progress >= 0.5 && progress < 0.8) {\n    amount = 0.02\n  } else if (progress >= 0.8 && progress < 0.99) {\n    amount = 0.005\n  }\n\n  return clamp(progress + amount, 0, 0.994)\n}\n","import { useEffect, useReducer, useRef } from 'react'\n\nimport { clamp } from './clamp'\nimport { createTimeout } from './createTimeout'\nimport { increment as defaultIncrement } from './increment'\nimport type { NProgressOptions, NProgressState } from './types'\n\n// A four-phase state machine. `idle` and `finished` both report\n// `isFinished: true` and differ only in the progress they hold, so the phase,\n// not `isFinished`, is what decides which transitions and timers apply.\ntype Phase = 'animating' | 'completing' | 'finished' | 'idle'\n\ninterface State {\n  phase: Phase\n  progress: number\n}\n\ntype Action =\n  | {\n      increment: (progress: number) => number\n      minimum: number\n      type: 'trickle'\n    }\n  | { minimum: number; type: 'start' }\n  | { type: 'complete' }\n  | { type: 'finish' }\n\nconst initialState: State = {\n  phase: 'idle',\n  progress: 0,\n}\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case 'complete':\n      // The original nprogress `done()` computes a random progress jump before\n      // animating to 1, but its queue runs both steps in the same tick, so the\n      // jump's CSS is overwritten before paint and never renders. Omitting the\n      // jump changes nothing visually.\n      //\n      // Ignored unless an animation is actually running, which is what makes a\n      // StrictMode double-mount a no-op rather than a spurious completion.\n      return state.phase === 'animating'\n        ? { phase: 'completing', progress: 1 }\n        : state\n\n    case 'finish':\n      return { phase: 'finished', progress: 1 }\n\n    case 'start':\n      // Matches the original nprogress `start()`, which calls set(0) and so\n      // paints first at `minimum` before any trickle runs.\n      //\n      // Guarded the same way as `complete`, and for the same reason: a repeat\n      // dispatch against a running animation must not rewind the bar. That\n      // happens whenever `minimum` changes mid-animation, as well as on a\n      // StrictMode double-mount.\n      return state.phase === 'animating'\n        ? state\n        : {\n            phase: 'animating',\n            progress: clamp(0, action.minimum, 1),\n          }\n\n    case 'trickle':\n      // Clamped here rather than trusted from the increment function, so a\n      // custom one cannot take the bar outside the documented range. Stopping\n      // short of 1 is that function's own business: 1 is what completion\n      // means.\n      return {\n        ...state,\n        progress: clamp(action.increment(state.progress), action.minimum, 1),\n      }\n  }\n}\n\nexport const useNProgress = ({\n  animationDuration = 200,\n  increment = defaultIncrement,\n  incrementDuration = 200,\n  isAnimating = false,\n  minimum = 0.08,\n}: NProgressOptions = {}): NProgressState => {\n  const [{ phase, progress }, dispatch] = useReducer(reducer, initialState)\n\n  // Held in a ref so the trickle timer can read the latest increment function\n  // without listing it as a dependency. Consumers commonly pass an inline\n  // function, whose identity changes every render; depending on it directly\n  // would cancel and recreate the timer each time, and a render loop faster\n  // than `incrementDuration` would stop the bar advancing altogether.\n  const incrementRef = useRef(increment)\n  useEffect(() => {\n    incrementRef.current = increment\n  })\n\n  useEffect(() => {\n    dispatch(isAnimating ? { minimum, type: 'start' } : { type: 'complete' })\n  }, [isAnimating, minimum])\n\n  // A timer per running phase, rather than one effect branching over both.\n  // Each then depends only on the options its own phase reads, so changing an\n  // option the running phase ignores cannot cancel its timer. Both are keyed\n  // on the phase rather than on progress, so trickling does not tear down and\n  // recreate the timer mid-animation.\n  useEffect(() => {\n    if (phase !== 'animating') {\n      return\n    }\n\n    const timeout = createTimeout()\n\n    const trickle = () => {\n      dispatch({ increment: incrementRef.current, minimum, type: 'trickle' })\n      timeout.schedule(trickle, incrementDuration)\n    }\n    timeout.schedule(trickle, incrementDuration)\n\n    return () => timeout.cancel()\n  }, [incrementDuration, minimum, phase])\n\n  useEffect(() => {\n    if (phase !== 'completing') {\n      return\n    }\n\n    const timeout = createTimeout()\n    timeout.schedule(() => dispatch({ type: 'finish' }), animationDuration)\n\n    return () => timeout.cancel()\n  }, [animationDuration, phase])\n\n  return {\n    animationDuration,\n    isFinished: phase === 'finished' || phase === 'idle',\n    progress,\n  }\n}\n","import type { FC, ReactElement } from 'react'\n\nimport type { NProgressOptions, NProgressState } from './types'\nimport { useNProgress } from './useNProgress'\n\ntype Props = NProgressOptions & {\n  children: (renderProps: NProgressState) => ReactElement\n}\n\nexport const NProgress: FC<Props> = ({ children, ...restProps }: Props) => {\n  const renderProps = useNProgress(restProps)\n  return children(renderProps)\n}\n"],"mappings":"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"}

package/dist/react-nprogress.d.cts

@@ -0,0 +1,26 @@
+import { FC, ReactElement } from "react";
+//#region src/types.d.ts
+interface NProgressOptions {
+  animationDuration?: number;
+  increment?: (progress: number) => number;
+  incrementDuration?: number;
+  isAnimating?: boolean;
+  minimum?: number;
+}
+interface NProgressState {
+  animationDuration: number;
+  isFinished: boolean;
+  progress: number;
+}
+//#endregion
+//#region src/NProgress.d.ts
+type Props = NProgressOptions & {
+  children: (renderProps: NProgressState) => ReactElement;
+};
+declare const NProgress: FC<Props>;
+//#endregion
+//#region src/useNProgress.d.ts
+declare const useNProgress: ({ animationDuration, increment, incrementDuration, isAnimating, minimum }?: NProgressOptions) => NProgressState;
+//#endregion
+export { NProgress, type NProgressOptions, type NProgressState, useNProgress };
+//# sourceMappingURL=react-nprogress.d.cts.map

package/dist/react-nprogress.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-nprogress.d.cts","names":[],"sources":["../src/types.ts","../src/NProgress.tsx","../src/useNProgress.tsx"],"mappings":";;UAAiB;EACf;EACA,aAAa;EACb;EACA;EACA;;UAGe;EACf;EACA;EACA;;;;KCNG,QAAQ;EACX,WAAW,aAAa,mBAAmB;;cAGhC,WAAW,GAAG;;;cCmEd,iBAAgB,mBAAA,WAAA,mBAAA,aAAA,YAM1B,qBAAwB"}

package/dist/react-nprogress.d.mts

@@ -0,0 +1,26 @@
+import { FC, ReactElement } from "react";
+//#region src/types.d.ts
+interface NProgressOptions {
+  animationDuration?: number;
+  increment?: (progress: number) => number;
+  incrementDuration?: number;
+  isAnimating?: boolean;
+  minimum?: number;
+}
+interface NProgressState {
+  animationDuration: number;
+  isFinished: boolean;
+  progress: number;
+}
+//#endregion
+//#region src/NProgress.d.ts
+type Props = NProgressOptions & {
+  children: (renderProps: NProgressState) => ReactElement;
+};
+declare const NProgress: FC<Props>;
+//#endregion
+//#region src/useNProgress.d.ts
+declare const useNProgress: ({ animationDuration, increment, incrementDuration, isAnimating, minimum }?: NProgressOptions) => NProgressState;
+//#endregion
+export { NProgress, type NProgressOptions, type NProgressState, useNProgress };
+//# sourceMappingURL=react-nprogress.d.mts.map

package/dist/react-nprogress.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-nprogress.d.mts","names":[],"sources":["../src/types.ts","../src/NProgress.tsx","../src/useNProgress.tsx"],"mappings":";;UAAiB;EACf;EACA,aAAa;EACb;EACA;EACA;;UAGe;EACf;EACA;EACA;;;;KCNG,QAAQ;EACX,WAAW,aAAa,mBAAmB;;cAGhC,WAAW,GAAG;;;cCmEd,iBAAgB,mBAAA,WAAA,mBAAA,aAAA,YAM1B,qBAAwB"}

package/dist/react-nprogress.mjs

@@ -0,0 +1,122 @@
+"use client";
+import { useEffect, useReducer, useRef } from "react";
+//#region src/clamp.ts
+const clamp = (num, lower, upper) => {
+	num = num <= upper ? num : upper;
+	num = num >= lower ? num : lower;
+	return num;
+};
+//#endregion
+//#region src/createTimeout.ts
+const createTimeout = () => {
+	let handle;
+	const cancel = () => {
+		if (handle !== void 0) window.cancelAnimationFrame(handle);
+	};
+	const schedule = (callback, delay) => {
+		cancel();
+		let deltaTime;
+		let start;
+		const frame = (time) => {
+			start = start || time;
+			deltaTime = time - start;
+			if (deltaTime > delay) {
+				callback();
+				return;
+			}
+			handle = window.requestAnimationFrame(frame);
+		};
+		handle = window.requestAnimationFrame(frame);
+	};
+	return {
+		cancel,
+		schedule
+	};
+};
+//#endregion
+//#region src/increment.ts
+const increment = (progress) => {
+	let amount = 0;
+	if (progress >= 0 && progress < .2) amount = .1;
+	else if (progress >= .2 && progress < .5) amount = .04;
+	else if (progress >= .5 && progress < .8) amount = .02;
+	else if (progress >= .8 && progress < .99) amount = .005;
+	return clamp(progress + amount, 0, .994);
+};
+//#endregion
+//#region src/useNProgress.tsx
+const initialState = {
+	phase: "idle",
+	progress: 0
+};
+const reducer = (state, action) => {
+	switch (action.type) {
+		case "complete": return state.phase === "animating" ? {
+			phase: "completing",
+			progress: 1
+		} : state;
+		case "finish": return {
+			phase: "finished",
+			progress: 1
+		};
+		case "start": return state.phase === "animating" ? state : {
+			phase: "animating",
+			progress: clamp(0, action.minimum, 1)
+		};
+		case "trickle": return {
+			...state,
+			progress: clamp(action.increment(state.progress), action.minimum, 1)
+		};
+	}
+};
+const useNProgress = ({ animationDuration = 200, increment: increment$1 = increment, incrementDuration = 200, isAnimating = false, minimum = .08 } = {}) => {
+	const [{ phase, progress }, dispatch] = useReducer(reducer, initialState);
+	const incrementRef = useRef(increment$1);
+	useEffect(() => {
+		incrementRef.current = increment$1;
+	});
+	useEffect(() => {
+		dispatch(isAnimating ? {
+			minimum,
+			type: "start"
+		} : { type: "complete" });
+	}, [isAnimating, minimum]);
+	useEffect(() => {
+		if (phase !== "animating") return;
+		const timeout = createTimeout();
+		const trickle = () => {
+			dispatch({
+				increment: incrementRef.current,
+				minimum,
+				type: "trickle"
+			});
+			timeout.schedule(trickle, incrementDuration);
+		};
+		timeout.schedule(trickle, incrementDuration);
+		return () => timeout.cancel();
+	}, [
+		incrementDuration,
+		minimum,
+		phase
+	]);
+	useEffect(() => {
+		if (phase !== "completing") return;
+		const timeout = createTimeout();
+		timeout.schedule(() => dispatch({ type: "finish" }), animationDuration);
+		return () => timeout.cancel();
+	}, [animationDuration, phase]);
+	return {
+		animationDuration,
+		isFinished: phase === "finished" || phase === "idle",
+		progress
+	};
+};
+//#endregion
+//#region src/NProgress.tsx
+const NProgress = ({ children, ...restProps }) => {
+	return children(useNProgress(restProps));
+};
+//#endregion
+export { NProgress, useNProgress };
+
+//# sourceMappingURL=react-nprogress.mjs.map