@tanem/react-nprogress 6.0.4 → 7.0.0

package/README.md

@@ -8,22 +8,28 @@
 
 > 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.
 
+## 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,113 +47,53 @@ 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**
-
-```jsx
-import { withNProgress } 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'
-
-const Inner = ({ animationDuration, isFinished, progress }) => (
-  <Container animationDuration={animationDuration} isFinished={isFinished}>
-    <Bar animationDuration={animationDuration} progress={progress} />
-    <Spinner />
-  </Container>
-)
+## API
 
-const Enhanced = withNProgress(Inner)
+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:
 
-render(<Enhanced isAnimating />, document.getElementById('root'))
+```ts
+import type { NProgressOptions, NProgressState } from '@tanem/react-nprogress'
 ```
 
-## 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)
+### `useNProgress`
 
-## 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`.
-
-**Hook Example**
+Returns the state of one progress bar. Call it once per bar: two calls, or two mounted `NProgress` components, track their progress independently.
 
 ```jsx
-const Progress = ({
-  animationDuration,
-  incrementDuration,
-  isAnimating,
-  minimum
-}) => {
-  const { isFinished, progress } = useNProgress({
-    animationDuration,
-    incrementDuration,
-    isAnimating,
-    minimum
-  })
-
-  return (
-    <Container animationDuration={animationDuration} isFinished={isFinished}>
-      <Bar animationDuration={animationDuration} progress={progress} />
-      <Spinner />
-    </Container>
-  )
-}
-
-<Progress
-  animationDuration={300}
-  incrementDuration={500}
-  isAnimating
-  minimum={0.1}
-/>
+const { animationDuration, isFinished, progress } = useNProgress({
+  animationDuration: 300,
+  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
@@ -156,55 +102,71 @@ const Progress = ({
   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 four options are optional. The type is `NProgressOptions`.
 
-const Enhanced = withNProgress(Inner)
+| Option                                    | Type      | Default |
+| ----------------------------------------- | --------- | ------- |
+| [`animationDuration`](#animationduration) | `number`  | `200`   |
+| [`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.
 
-```
-$ npm install @tanem/react-nprogress
-```
+#### `incrementDuration`
+
+Milliseconds between increments while the bar is animating. It controls the trickle pacing only: the size of each increment is not configurable, and shrinks as `progress` grows.
+
+#### `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 first increment starts from `0.1` rather than from `0`, so the bar appears at `max(0.1, minimum)` and the option only shows through when it is set above `0.1`. 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.
 
-UMD builds are also available for use with pre-React 19 via [unpkg](https://unpkg.com/):
+### Return Value
 
-- https://unpkg.com/@tanem/react-nprogress/dist/react-nprogress.umd.development.js
-- https://unpkg.com/@tanem/react-nprogress/dist/react-nprogress.umd.production.js
+`useNProgress` returns these values, and `NProgress` passes the same object to `children`. The type is `NProgressState`.
 
-For the non-minified development version, make sure you have already included:
+| 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` and trickles up in shrinking steps to a ceiling of `0.994`, then goes to `1` on completion.                                                     |
 
-- [`React`](https://unpkg.com/react@18/umd/react.development.js)
-- [`ReactDOM`](https://unpkg.com/react-dom@18/umd/react-dom.development.js)
+## Live Examples
+
+| Example                                                                                                | Sandbox                                                                                                      |
+| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
+| [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,119 @@
+"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(increment(0), action.minimum, 1)
+		};
+		case "trickle": return {
+			...state,
+			progress: clamp(increment(state.progress), action.minimum, 1)
+		};
+	}
+};
+const useNProgress = ({ animationDuration = 200, incrementDuration = 200, isAnimating = false, minimum = .08 } = {}) => {
+	const [{ phase, progress }, dispatch] = (0, react.useReducer)(reducer, initialState);
+	(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({
+				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":["useReducer"],"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 } from 'react'\n\nimport { clamp } from './clamp'\nimport { createTimeout } from './createTimeout'\nimport { increment } 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  | { minimum: number; type: 'start' }\n  | { minimum: number; type: 'trickle' }\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      // Unlike the original nprogress `done()`, completion does not include a\n      // random progress jump before animating to 1. This keeps the primitive\n      // predictable; consumers can set a higher progress value before stopping\n      // the animation if they want that effect.\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      // The original nprogress calls set(0) - which clamps to `minimum` -\n      // before the first trickle. Here, the first trickle starts from\n      // increment(0) = 0.1, so the bar appears at max(0.1, minimum) rather\n      // than exactly `minimum`. The difference is negligible at the default\n      // minimum of 0.08.\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(increment(0), action.minimum, 1),\n          }\n\n    case 'trickle':\n      return {\n        ...state,\n        progress: clamp(increment(state.progress), action.minimum, 1),\n      }\n  }\n}\n\nexport const useNProgress = ({\n  animationDuration = 200,\n  incrementDuration = 200,\n  isAnimating = false,\n  minimum = 0.08,\n}: NProgressOptions = {}): NProgressState => {\n  const [{ phase, progress }, dispatch] = useReducer(reducer, initialState)\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({ 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":";;;;AAAA,MAAa,SAAS,KAAa,OAAe,UAA0B;CAC1E,MAAM,OAAO,QAAQ,MAAM;CAC3B,MAAM,OAAO,QAAQ,MAAM;CAC3B,OAAO;AACT;;;ACDA,MAAa,sBAAsB;CACjC,IAAI;CAEJ,MAAM,eAAqB;EACzB,IAAI,WAAW,KAAA,GACb,OAAO,qBAAqB,MAAM;CAEtC;CAEA,MAAM,YAAY,UAAsB,UAAwB;EAC9D,OAAO;EAEP,IAAI;EACJ,IAAI;EACJ,MAAM,SAA+B,SAAS;GAC5C,QAAQ,SAAS;GACjB,YAAY,OAAO;GACnB,IAAI,YAAY,OAAO;IACrB,SAAS;IACT;GACF;GACA,SAAS,OAAO,sBAAsB,KAAK;EAC7C;EAEA,SAAS,OAAO,sBAAsB,KAAK;CAC7C;CAEA,OAAO;EACL;EACA;CACF;AACF;;;AChCA,MAAa,aAAa,aAA6B;CACrD,IAAI,SAAS;CAEb,IAAI,YAAY,KAAK,WAAW,IAC9B,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,IACvC,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,IACvC,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,KACvC,SAAS;CAGX,OAAO,MAAM,WAAW,QAAQ,GAAG,IAAK;AAC1C;;;ACOA,MAAM,eAAsB;CAC1B,OAAO;CACP,UAAU;AACZ;AAEA,MAAM,WAAW,OAAc,WAA0B;CACvD,QAAQ,OAAO,MAAf;EACE,KAAK,YAQH,OAAO,MAAM,UAAU,cACnB;GAAE,OAAO;GAAc,UAAU;EAAE,IACnC;EAEN,KAAK,UACH,OAAO;GAAE,OAAO;GAAY,UAAU;EAAE;EAE1C,KAAK,SAWH,OAAO,MAAM,UAAU,cACnB,QACA;GACE,OAAO;GACP,UAAU,MAAM,UAAU,CAAC,GAAG,OAAO,SAAS,CAAC;EACjD;EAEN,KAAK,WACH,OAAO;GACL,GAAG;GACH,UAAU,MAAM,UAAU,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC;EAC9D;CACJ;AACF;AAEA,MAAa,gBAAgB,EAC3B,oBAAoB,KACpB,oBAAoB,KACpB,cAAc,OACd,UAAU,QACU,CAAC,MAAsB;CAC3C,MAAM,CAAC,EAAE,OAAO,YAAY,aAAA,GAAYA,MAAAA,WAAAA,CAAW,SAAS,YAAY;CAExE,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,SAAS,cAAc;GAAE;GAAS,MAAM;EAAQ,IAAI,EAAE,MAAM,WAAW,CAAC;CAC1E,GAAG,CAAC,aAAa,OAAO,CAAC;CAOzB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,UAAU,aACZ;EAGF,MAAM,UAAU,cAAc;EAE9B,MAAM,gBAAgB;GACpB,SAAS;IAAE;IAAS,MAAM;GAAU,CAAC;GACrC,QAAQ,SAAS,SAAS,iBAAiB;EAC7C;EACA,QAAQ,SAAS,SAAS,iBAAiB;EAE3C,aAAa,QAAQ,OAAO;CAC9B,GAAG;EAAC;EAAmB;EAAS;CAAK,CAAC;CAEtC,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,UAAU,cACZ;EAGF,MAAM,UAAU,cAAc;EAC9B,QAAQ,eAAe,SAAS,EAAE,MAAM,SAAS,CAAC,GAAG,iBAAiB;EAEtE,aAAa,QAAQ,OAAO;CAC9B,GAAG,CAAC,mBAAmB,KAAK,CAAC;CAE7B,OAAO;EACL;EACA,YAAY,UAAU,cAAc,UAAU;EAC9C;CACF;AACF;;;AC/GA,MAAa,aAAwB,EAAE,UAAU,GAAG,gBAAuB;CAEzE,OAAO,SADa,aAAa,SACP,CAAC;AAC7B"}

package/dist/react-nprogress.d.cts

@@ -0,0 +1,25 @@
+import { FC, ReactElement } from "react";
+//#region src/types.d.ts
+interface NProgressOptions {
+  animationDuration?: 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, 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;EACA;EACA;;UAGe;EACf;EACA;EACA;;;;KCLG,QAAQ;EACX,WAAW,aAAa,mBAAmB;;cAGhC,WAAW,GAAG;;;cC8Dd,iBAAgB,mBAAA,mBAAA,aAAA,YAK1B,qBAAwB"}

package/dist/react-nprogress.d.mts

@@ -0,0 +1,25 @@
+import { FC, ReactElement } from "react";
+//#region src/types.d.ts
+interface NProgressOptions {
+  animationDuration?: 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, 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;EACA;EACA;;UAGe;EACf;EACA;EACA;;;;KCLG,QAAQ;EACX,WAAW,aAAa,mBAAmB;;cAGhC,WAAW,GAAG;;;cC8Dd,iBAAgB,mBAAA,mBAAA,aAAA,YAK1B,qBAAwB"}

package/dist/react-nprogress.mjs

@@ -0,0 +1,117 @@
+"use client";
+import { useEffect, useReducer } 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(increment(0), action.minimum, 1)
+		};
+		case "trickle": return {
+			...state,
+			progress: clamp(increment(state.progress), action.minimum, 1)
+		};
+	}
+};
+const useNProgress = ({ animationDuration = 200, incrementDuration = 200, isAnimating = false, minimum = .08 } = {}) => {
+	const [{ phase, progress }, dispatch] = useReducer(reducer, initialState);
+	useEffect(() => {
+		dispatch(isAnimating ? {
+			minimum,
+			type: "start"
+		} : { type: "complete" });
+	}, [isAnimating, minimum]);
+	useEffect(() => {
+		if (phase !== "animating") return;
+		const timeout = createTimeout();
+		const trickle = () => {
+			dispatch({
+				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

package/dist/react-nprogress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-nprogress.mjs","names":[],"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 } from 'react'\n\nimport { clamp } from './clamp'\nimport { createTimeout } from './createTimeout'\nimport { increment } 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  | { minimum: number; type: 'start' }\n  | { minimum: number; type: 'trickle' }\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      // Unlike the original nprogress `done()`, completion does not include a\n      // random progress jump before animating to 1. This keeps the primitive\n      // predictable; consumers can set a higher progress value before stopping\n      // the animation if they want that effect.\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      // The original nprogress calls set(0) - which clamps to `minimum` -\n      // before the first trickle. Here, the first trickle starts from\n      // increment(0) = 0.1, so the bar appears at max(0.1, minimum) rather\n      // than exactly `minimum`. The difference is negligible at the default\n      // minimum of 0.08.\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(increment(0), action.minimum, 1),\n          }\n\n    case 'trickle':\n      return {\n        ...state,\n        progress: clamp(increment(state.progress), action.minimum, 1),\n      }\n  }\n}\n\nexport const useNProgress = ({\n  animationDuration = 200,\n  incrementDuration = 200,\n  isAnimating = false,\n  minimum = 0.08,\n}: NProgressOptions = {}): NProgressState => {\n  const [{ phase, progress }, dispatch] = useReducer(reducer, initialState)\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({ 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":";;;AAAA,MAAa,SAAS,KAAa,OAAe,UAA0B;CAC1E,MAAM,OAAO,QAAQ,MAAM;CAC3B,MAAM,OAAO,QAAQ,MAAM;CAC3B,OAAO;AACT;;;ACDA,MAAa,sBAAsB;CACjC,IAAI;CAEJ,MAAM,eAAqB;EACzB,IAAI,WAAW,KAAA,GACb,OAAO,qBAAqB,MAAM;CAEtC;CAEA,MAAM,YAAY,UAAsB,UAAwB;EAC9D,OAAO;EAEP,IAAI;EACJ,IAAI;EACJ,MAAM,SAA+B,SAAS;GAC5C,QAAQ,SAAS;GACjB,YAAY,OAAO;GACnB,IAAI,YAAY,OAAO;IACrB,SAAS;IACT;GACF;GACA,SAAS,OAAO,sBAAsB,KAAK;EAC7C;EAEA,SAAS,OAAO,sBAAsB,KAAK;CAC7C;CAEA,OAAO;EACL;EACA;CACF;AACF;;;AChCA,MAAa,aAAa,aAA6B;CACrD,IAAI,SAAS;CAEb,IAAI,YAAY,KAAK,WAAW,IAC9B,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,IACvC,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,IACvC,SAAS;MACJ,IAAI,YAAY,MAAO,WAAW,KACvC,SAAS;CAGX,OAAO,MAAM,WAAW,QAAQ,GAAG,IAAK;AAC1C;;;ACOA,MAAM,eAAsB;CAC1B,OAAO;CACP,UAAU;AACZ;AAEA,MAAM,WAAW,OAAc,WAA0B;CACvD,QAAQ,OAAO,MAAf;EACE,KAAK,YAQH,OAAO,MAAM,UAAU,cACnB;GAAE,OAAO;GAAc,UAAU;EAAE,IACnC;EAEN,KAAK,UACH,OAAO;GAAE,OAAO;GAAY,UAAU;EAAE;EAE1C,KAAK,SAWH,OAAO,MAAM,UAAU,cACnB,QACA;GACE,OAAO;GACP,UAAU,MAAM,UAAU,CAAC,GAAG,OAAO,SAAS,CAAC;EACjD;EAEN,KAAK,WACH,OAAO;GACL,GAAG;GACH,UAAU,MAAM,UAAU,MAAM,QAAQ,GAAG,OAAO,SAAS,CAAC;EAC9D;CACJ;AACF;AAEA,MAAa,gBAAgB,EAC3B,oBAAoB,KACpB,oBAAoB,KACpB,cAAc,OACd,UAAU,QACU,CAAC,MAAsB;CAC3C,MAAM,CAAC,EAAE,OAAO,YAAY,YAAY,WAAW,SAAS,YAAY;CAExE,gBAAgB;EACd,SAAS,cAAc;GAAE;GAAS,MAAM;EAAQ,IAAI,EAAE,MAAM,WAAW,CAAC;CAC1E,GAAG,CAAC,aAAa,OAAO,CAAC;CAOzB,gBAAgB;EACd,IAAI,UAAU,aACZ;EAGF,MAAM,UAAU,cAAc;EAE9B,MAAM,gBAAgB;GACpB,SAAS;IAAE;IAAS,MAAM;GAAU,CAAC;GACrC,QAAQ,SAAS,SAAS,iBAAiB;EAC7C;EACA,QAAQ,SAAS,SAAS,iBAAiB;EAE3C,aAAa,QAAQ,OAAO;CAC9B,GAAG;EAAC;EAAmB;EAAS;CAAK,CAAC;CAEtC,gBAAgB;EACd,IAAI,UAAU,cACZ;EAGF,MAAM,UAAU,cAAc;EAC9B,QAAQ,eAAe,SAAS,EAAE,MAAM,SAAS,CAAC,GAAG,iBAAiB;EAEtE,aAAa,QAAQ,OAAO;CAC9B,GAAG,CAAC,mBAAmB,KAAK,CAAC;CAE7B,OAAO;EACL;EACA,YAAY,UAAU,cAAc,UAAU;EAC9C;CACF;AACF;;;AC/GA,MAAa,aAAwB,EAAE,UAAU,GAAG,gBAAuB;CAEzE,OAAO,SADa,aAAa,SACP,CAAC;AAC7B"}