@nuraloom/navlink 1.0.1

package/README.md

@@ -0,0 +1,137 @@
+# 🧭 NavLink — Smart Active Link Component for Next.js (App Router)
+
+A **production-ready `NavLink` component** for Next.js App Router.
+It simplifies building navigation with **active link highlighting**, **SSR-safe active detection**, and **external link handling** — all fully typed with **TypeScript**.
+
+---
+
+## ✨ Features
+
+✅ Seamless integration with Next.js App Router (`usePathname`)
+✅ Automatic **active link detection** (exact or partial match)
+✅ Safe **external link handling** with proper security defaults
+✅ Fully **typed** with `NavLinkProps`
+✅ Built-in **accessibility** (`aria-current="page"`)
+✅ **SSR-safe** — avoids hydration mismatches
+✅ Minimal and **performance-optimized** (uses `useMemo` for all derived states)
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @your-org/navlink
+# or
+yarn add @your-org/navlink
+```
+
+---
+
+## 🚀 Usage
+
+```tsx
+"use client";
+
+import NavLink from "@your-org/navlink";
+
+export default function Navbar() {
+  return (
+    <nav className="flex gap-4">
+      <NavLink href="/" exact>
+        Home
+      </NavLink>
+      <NavLink href="/about">About</NavLink>
+      <NavLink href="https://example.com" target="_blank">
+        External Site
+      </NavLink>
+    </nav>
+  );
+}
+```
+
+### Active Link Example
+
+- When on `/about`, the “About” link automatically gets `activeClassName`.
+- For `/about/team`, it also highlights `/about` unless you set `exact`.
+
+---
+
+## ⚙️ Props
+
+| Prop              | Type              | Default                                                                                                   | Description                                          |
+| ----------------- | ----------------- | --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
+| `href`            | `string`          | **required**                                                                                              | Destination URL (internal or external).              |
+| `exact`           | `boolean`         | `false`                                                                                                   | Require exact match to mark as active.               |
+| `activeClassName` | `string`          | `"text-sky-600 font-semibold bg-sky-50 dark:bg-sky-950/20"`                                               | Classes applied when active.                         |
+| `className`       | `string`          | `"inline-flex items-center gap-2 px-3 py-2 rounded-md transition-colors duration-200 focus:outline-none"` | Base classes for the link.                           |
+| `children`        | `React.ReactNode` | —                                                                                                         | Link label or content.                               |
+| `[...rest]`       | HTML anchor props | —                                                                                                         | All other anchor attributes (`target`, `rel`, etc.). |
+
+---
+
+## 🧠 Active State Logic
+
+The component:
+
+- Uses `usePathname()` from `next/navigation`.
+- Normalizes paths (`/about/` → `/about`).
+- Supports **exact** or **startsWith** match.
+- Avoids hydration mismatches during SSR.
+
+---
+
+## 🌐 External Link Handling
+
+Automatically detects external URLs (`https://`, `http://`) and applies correct handling.
+You can still override `target="_blank"` or `rel="noopener noreferrer"` manually if needed.
+
+---
+
+## 🧩 Type Exports
+
+If you need strong typing in your project:
+
+```ts
+import type { NavLinkProps } from "@your-org/navlink";
+```
+
+---
+
+## 🔍 Example Styling
+
+You can customize styles easily with Tailwind or CSS:
+
+```tsx
+<NavLink
+  href="/dashboard"
+  className="px-4 py-2 text-gray-700 hover:text-sky-600"
+  activeClassName="font-bold text-sky-600 border-b-2 border-sky-600"
+>
+  Dashboard
+</NavLink>
+```
+
+---
+
+## 🧱 Folder Structure
+
+```
+src/
+├── NavLink.tsx
+└── index.ts
+```
+
+### `index.ts`
+
+```ts
+export { default } from "./NavLink";
+export type { NavLinkProps } from "./NavLink";
+```
+
+---
+
+## 📜 License
+
+MIT © 2025 NuraLoom
+
+---

package/dist/index.d.mts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface NavLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+    href: string;
+    exact?: boolean;
+    activeClassName?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+declare function NavLink({ href, exact, activeClassName, className, children, ...rest }: NavLinkProps): react_jsx_runtime.JSX.Element;
+declare namespace NavLink {
+    var displayName: string;
+}
+declare const useNavigate: () => (href: string, options?: {
+    replace?: boolean;
+    scroll?: boolean;
+}) => void;
+
+declare const NavigationProgressClient: React.FC<{
+    color?: string;
+    height?: string;
+    duration?: number;
+}>;
+
+export { NavLink, type NavLinkProps, NavigationProgressClient as NavigationProgress, useNavigate };

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface NavLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+    href: string;
+    exact?: boolean;
+    activeClassName?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+declare function NavLink({ href, exact, activeClassName, className, children, ...rest }: NavLinkProps): react_jsx_runtime.JSX.Element;
+declare namespace NavLink {
+    var displayName: string;
+}
+declare const useNavigate: () => (href: string, options?: {
+    replace?: boolean;
+    scroll?: boolean;
+}) => void;
+
+declare const NavigationProgressClient: React.FC<{
+    color?: string;
+    height?: string;
+    duration?: number;
+}>;
+
+export { NavLink, type NavLinkProps, NavigationProgressClient as NavigationProgress, useNavigate };

package/dist/index.js

@@ -0,0 +1,226 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  NavLink: () => NavLink,
+  NavigationProgress: () => NavigationProgressClient,
+  useNavigate: () => useNavigate
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/NavLink.tsx
+var import_link = __toESM(require("next/link"));
+var import_navigation = require("next/navigation");
+var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var NavProgressManager = class {
+  constructor() {
+    this.startListeners = [];
+    this.finishListeners = [];
+  }
+  start() {
+    this.startListeners.forEach((cb) => cb());
+  }
+  finish() {
+    this.finishListeners.forEach((cb) => cb());
+  }
+  onStart(cb) {
+    this.startListeners.push(cb);
+  }
+  onFinish(cb) {
+    this.finishListeners.push(cb);
+  }
+};
+var progressManager = new NavProgressManager();
+var EXTERNAL_LINK_REGEX = /^(https?:)?\/\//;
+var DEFAULT_CLASSES = "inline-flex items-center gap-2 px-3 py-2 rounded-md transition-colors duration-200 focus:outline-none";
+var DEFAULT_ACTIVE_CLASSES = "text-sky-600 font-semibold bg-sky-50 dark:bg-sky-950/20";
+var normalizePath = (path) => {
+  if (!path || path === "/") return "/";
+  return path.endsWith("/") ? path.slice(0, -1) : path;
+};
+var isExternalLink = (href) => EXTERNAL_LINK_REGEX.test(href);
+var getPathnameFromExternalUrl = (url) => {
+  try {
+    return new URL(url).pathname;
+  } catch (e) {
+    return url;
+  }
+};
+function NavLink(_a) {
+  var _b = _a, {
+    href,
+    exact = false,
+    activeClassName = DEFAULT_ACTIVE_CLASSES,
+    className = DEFAULT_CLASSES,
+    children
+  } = _b, rest = __objRest(_b, [
+    "href",
+    "exact",
+    "activeClassName",
+    "className",
+    "children"
+  ]);
+  const pathname = (0, import_navigation.usePathname)();
+  const router = (0, import_navigation.useRouter)();
+  const isExternal = import_react.default.useMemo(() => isExternalLink(href), [href]);
+  const isActive = import_react.default.useMemo(() => {
+    if (!pathname || isExternal) return false;
+    const currentPath = normalizePath(pathname);
+    const targetPath = href.startsWith("/") ? normalizePath(href) : normalizePath(getPathnameFromExternalUrl(href));
+    if (exact) return currentPath === targetPath;
+    if (targetPath === "/") return currentPath === "/";
+    return currentPath === targetPath || currentPath.startsWith(targetPath + "/");
+  }, [pathname, href, exact, isExternal]);
+  const mergedClassName = import_react.default.useMemo(() => {
+    const baseClasses = [className];
+    if (isActive && pathname !== null) baseClasses.push(activeClassName);
+    return baseClasses.filter(Boolean).join(" ").trim();
+  }, [className, isActive, activeClassName, pathname]);
+  const handleClick = (e) => {
+    if (isExternal) return;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 1)
+      return;
+    e.preventDefault();
+    if (pathname === href) return;
+    progressManager.start();
+    router.push(href);
+  };
+  const ariaAttributes = import_react.default.useMemo(() => {
+    const attributes = {
+      "aria-current": isActive ? "page" : void 0
+    };
+    if (rest["aria-label"]) {
+      attributes["aria-label"] = rest["aria-label"];
+    }
+    return attributes;
+  }, [isActive, rest]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_link.default,
+    __spreadProps(__spreadValues(__spreadValues({
+      href,
+      className: mergedClassName
+    }, ariaAttributes), rest), {
+      onClick: handleClick,
+      prefetch: true,
+      children
+    })
+  );
+}
+NavLink.displayName = "NavLink";
+var useNavigate = () => {
+  const router = (0, import_navigation.useRouter)();
+  const pathname = (0, import_navigation.usePathname)();
+  const navigate = (href, options) => {
+    if (pathname === href) return;
+    progressManager.start();
+    const { replace = false, scroll = true } = options || {};
+    if (replace) router.replace(href, { scroll });
+    else router.push(href, { scroll });
+  };
+  return navigate;
+};
+
+// src/NavigationProgressClient.tsx
+var import_react2 = require("react");
+var import_navigation2 = require("next/navigation");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var NavigationProgressClient = ({ color = "#2563EB", height = "3px", duration = 200 }) => {
+  const [width, setWidth] = (0, import_react2.useState)("0%");
+  const [visible, setVisible] = (0, import_react2.useState)(false);
+  const pathname = (0, import_navigation2.usePathname)();
+  (0, import_react2.useEffect)(() => {
+    progressManager.onStart(() => {
+      setVisible(true);
+      setWidth("0%");
+      setTimeout(() => setWidth("40%"), 10);
+    });
+    progressManager.onFinish(() => {
+      setWidth("100%");
+      setTimeout(() => {
+        setVisible(false);
+        setWidth("0%");
+      }, duration + 50);
+    });
+  }, [duration]);
+  (0, import_react2.useEffect)(() => {
+    progressManager.finish();
+  }, [pathname]);
+  if (!visible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        backgroundColor: color,
+        transition: `width ${duration}ms ease`
+      },
+      className: "fixed top-0 left-0 z-[99999]"
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NavLink,
+  NavigationProgress,
+  useNavigate
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/NavLink.tsx","../src/NavigationProgressClient.tsx"],"sourcesContent":["\"use client\";\nexport { NavLink } from \"./NavLink\";\nexport type { NavLinkProps } from \"./NavLink\";\n\n// index.ts\nexport { NavigationProgressClient as NavigationProgress } from \"./NavigationProgressClient\";\nexport { useNavigate } from \"./NavLink\";\n","\"use client\";\nimport Link from \"next/link\";\nimport { usePathname, useRouter } from \"next/navigation\";\nimport React, { useEffect, useState } from \"react\";\n\n// --------------------\n// Types\n// --------------------\n\nexport interface NavLinkProps\n  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> {\n  href: string;\n  exact?: boolean;\n  activeClassName?: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\n// --------------------\n// NavProgressManager\n// --------------------\n\ntype ProgressCallback = () => void;\n\nclass NavProgressManager {\n  private startListeners: ProgressCallback[] = [];\n  private finishListeners: ProgressCallback[] = [];\n\n  start() {\n    this.startListeners.forEach((cb) => cb());\n  }\n\n  finish() {\n    this.finishListeners.forEach((cb) => cb());\n  }\n\n  onStart(cb: ProgressCallback) {\n    this.startListeners.push(cb);\n  }\n\n  onFinish(cb: ProgressCallback) {\n    this.finishListeners.push(cb);\n  }\n}\n\nexport const progressManager = new NavProgressManager();\n\n// --------------------\n// Helper constants/functions for NavLink\n// --------------------\n\nconst EXTERNAL_LINK_REGEX = /^(https?:)?\\/\\//;\nconst DEFAULT_CLASSES =\n  \"inline-flex items-center gap-2 px-3 py-2 rounded-md transition-colors duration-200 focus:outline-none\";\nconst DEFAULT_ACTIVE_CLASSES =\n  \"text-sky-600 font-semibold bg-sky-50 dark:bg-sky-950/20\";\n\nconst normalizePath = (path: string): string => {\n  if (!path || path === \"/\") return \"/\";\n  return path.endsWith(\"/\") ? path.slice(0, -1) : path;\n};\n\nconst isExternalLink = (href: string): boolean =>\n  EXTERNAL_LINK_REGEX.test(href);\n\nconst getPathnameFromExternalUrl = (url: string): string => {\n  try {\n    return new URL(url).pathname;\n  } catch {\n    return url;\n  }\n};\n\n// --------------------\n// NavLink Component\n// --------------------\n\nexport function NavLink({\n  href,\n  exact = false,\n  activeClassName = DEFAULT_ACTIVE_CLASSES,\n  className = DEFAULT_CLASSES,\n  children,\n  ...rest\n}: NavLinkProps) {\n  const pathname = usePathname();\n  const router = useRouter();\n\n  const isExternal = React.useMemo(() => isExternalLink(href), [href]);\n\n  const isActive = React.useMemo(() => {\n    if (!pathname || isExternal) return false;\n\n    const currentPath = normalizePath(pathname);\n    const targetPath = href.startsWith(\"/\")\n      ? normalizePath(href)\n      : normalizePath(getPathnameFromExternalUrl(href));\n\n    if (exact) return currentPath === targetPath;\n\n    if (targetPath === \"/\") return currentPath === \"/\";\n\n    return (\n      currentPath === targetPath || currentPath.startsWith(targetPath + \"/\")\n    );\n  }, [pathname, href, exact, isExternal]);\n\n  const mergedClassName = React.useMemo(() => {\n    const baseClasses = [className];\n    if (isActive && pathname !== null) baseClasses.push(activeClassName);\n    return baseClasses.filter(Boolean).join(\" \").trim();\n  }, [className, isActive, activeClassName, pathname]);\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    if (isExternal) return; // external links behave normally\n    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 1)\n      return;\n    e.preventDefault();\n    if (pathname === href) return;\n    progressManager.start();\n    router.push(href);\n  };\n\n  const ariaAttributes = React.useMemo(() => {\n    const attributes: {\n      \"aria-current\"?: \"page\" | undefined;\n      \"aria-label\"?: string;\n    } = {\n      \"aria-current\": isActive ? \"page\" : undefined,\n    };\n\n    if (rest[\"aria-label\"]) {\n      attributes[\"aria-label\"] = rest[\"aria-label\"];\n    }\n\n    return attributes;\n  }, [isActive, rest]);\n\n  return (\n    <Link\n      href={href}\n      className={mergedClassName}\n      {...ariaAttributes}\n      {...rest}\n      onClick={handleClick}\n      prefetch={true}\n    >\n      {children}\n    </Link>\n  );\n}\n\nNavLink.displayName = \"NavLink\";\n\n// --------------------\n// useNavigate Hook\n// --------------------\n\nexport const useNavigate = () => {\n  const router = useRouter();\n  const pathname = usePathname();\n\n  const navigate = (\n    href: string,\n    options?: { replace?: boolean; scroll?: boolean }\n  ) => {\n    if (pathname === href) return;\n    progressManager.start();\n    const { replace = false, scroll = true } = options || {};\n    if (replace) router.replace(href, { scroll });\n    else router.push(href, { scroll });\n  };\n\n  return navigate;\n};\n\n// --------------------\n// NavigationProgress Component\n// --------------------\n","\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { progressManager } from \"./NavLink\"; // export your singleton from your package\n\nexport const NavigationProgressClient: React.FC<{\n  color?: string;\n  height?: string;\n  duration?: number;\n}> = ({ color = \"#2563EB\", height = \"3px\", duration = 200 }) => {\n  const [width, setWidth] = useState(\"0%\");\n  const [visible, setVisible] = useState(false);\n  const pathname = usePathname();\n\n  useEffect(() => {\n    progressManager.onStart(() => {\n      setVisible(true);\n      setWidth(\"0%\");\n      setTimeout(() => setWidth(\"40%\"), 10);\n    });\n\n    progressManager.onFinish(() => {\n      setWidth(\"100%\");\n      setTimeout(() => {\n        setVisible(false);\n        setWidth(\"0%\");\n      }, duration + 50);\n    });\n  }, [duration]);\n\n  useEffect(() => {\n    progressManager.finish();\n  }, [pathname]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      style={{\n        width,\n        height,\n        backgroundColor: color,\n        transition: `width ${duration}ms ease`,\n      }}\n      className=\"fixed top-0 left-0 z-[99999]\"\n    />\n  );\n};\n"],"mappings":"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","names":["React","Link","import_react","import_navigation","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,191 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/NavLink.tsx
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var NavProgressManager = class {
+  constructor() {
+    this.startListeners = [];
+    this.finishListeners = [];
+  }
+  start() {
+    this.startListeners.forEach((cb) => cb());
+  }
+  finish() {
+    this.finishListeners.forEach((cb) => cb());
+  }
+  onStart(cb) {
+    this.startListeners.push(cb);
+  }
+  onFinish(cb) {
+    this.finishListeners.push(cb);
+  }
+};
+var progressManager = new NavProgressManager();
+var EXTERNAL_LINK_REGEX = /^(https?:)?\/\//;
+var DEFAULT_CLASSES = "inline-flex items-center gap-2 px-3 py-2 rounded-md transition-colors duration-200 focus:outline-none";
+var DEFAULT_ACTIVE_CLASSES = "text-sky-600 font-semibold bg-sky-50 dark:bg-sky-950/20";
+var normalizePath = (path) => {
+  if (!path || path === "/") return "/";
+  return path.endsWith("/") ? path.slice(0, -1) : path;
+};
+var isExternalLink = (href) => EXTERNAL_LINK_REGEX.test(href);
+var getPathnameFromExternalUrl = (url) => {
+  try {
+    return new URL(url).pathname;
+  } catch (e) {
+    return url;
+  }
+};
+function NavLink(_a) {
+  var _b = _a, {
+    href,
+    exact = false,
+    activeClassName = DEFAULT_ACTIVE_CLASSES,
+    className = DEFAULT_CLASSES,
+    children
+  } = _b, rest = __objRest(_b, [
+    "href",
+    "exact",
+    "activeClassName",
+    "className",
+    "children"
+  ]);
+  const pathname = usePathname();
+  const router = useRouter();
+  const isExternal = React.useMemo(() => isExternalLink(href), [href]);
+  const isActive = React.useMemo(() => {
+    if (!pathname || isExternal) return false;
+    const currentPath = normalizePath(pathname);
+    const targetPath = href.startsWith("/") ? normalizePath(href) : normalizePath(getPathnameFromExternalUrl(href));
+    if (exact) return currentPath === targetPath;
+    if (targetPath === "/") return currentPath === "/";
+    return currentPath === targetPath || currentPath.startsWith(targetPath + "/");
+  }, [pathname, href, exact, isExternal]);
+  const mergedClassName = React.useMemo(() => {
+    const baseClasses = [className];
+    if (isActive && pathname !== null) baseClasses.push(activeClassName);
+    return baseClasses.filter(Boolean).join(" ").trim();
+  }, [className, isActive, activeClassName, pathname]);
+  const handleClick = (e) => {
+    if (isExternal) return;
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 1)
+      return;
+    e.preventDefault();
+    if (pathname === href) return;
+    progressManager.start();
+    router.push(href);
+  };
+  const ariaAttributes = React.useMemo(() => {
+    const attributes = {
+      "aria-current": isActive ? "page" : void 0
+    };
+    if (rest["aria-label"]) {
+      attributes["aria-label"] = rest["aria-label"];
+    }
+    return attributes;
+  }, [isActive, rest]);
+  return /* @__PURE__ */ jsx(
+    Link,
+    __spreadProps(__spreadValues(__spreadValues({
+      href,
+      className: mergedClassName
+    }, ariaAttributes), rest), {
+      onClick: handleClick,
+      prefetch: true,
+      children
+    })
+  );
+}
+NavLink.displayName = "NavLink";
+var useNavigate = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const navigate = (href, options) => {
+    if (pathname === href) return;
+    progressManager.start();
+    const { replace = false, scroll = true } = options || {};
+    if (replace) router.replace(href, { scroll });
+    else router.push(href, { scroll });
+  };
+  return navigate;
+};
+
+// src/NavigationProgressClient.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { usePathname as usePathname2 } from "next/navigation";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var NavigationProgressClient = ({ color = "#2563EB", height = "3px", duration = 200 }) => {
+  const [width, setWidth] = useState2("0%");
+  const [visible, setVisible] = useState2(false);
+  const pathname = usePathname2();
+  useEffect2(() => {
+    progressManager.onStart(() => {
+      setVisible(true);
+      setWidth("0%");
+      setTimeout(() => setWidth("40%"), 10);
+    });
+    progressManager.onFinish(() => {
+      setWidth("100%");
+      setTimeout(() => {
+        setVisible(false);
+        setWidth("0%");
+      }, duration + 50);
+    });
+  }, [duration]);
+  useEffect2(() => {
+    progressManager.finish();
+  }, [pathname]);
+  if (!visible) return null;
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        backgroundColor: color,
+        transition: `width ${duration}ms ease`
+      },
+      className: "fixed top-0 left-0 z-[99999]"
+    }
+  );
+};
+export {
+  NavLink,
+  NavigationProgressClient as NavigationProgress,
+  useNavigate
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/NavLink.tsx","../src/NavigationProgressClient.tsx"],"sourcesContent":["\"use client\";\nimport Link from \"next/link\";\nimport { usePathname, useRouter } from \"next/navigation\";\nimport React, { useEffect, useState } from \"react\";\n\n// --------------------\n// Types\n// --------------------\n\nexport interface NavLinkProps\n  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\"> {\n  href: string;\n  exact?: boolean;\n  activeClassName?: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\n// --------------------\n// NavProgressManager\n// --------------------\n\ntype ProgressCallback = () => void;\n\nclass NavProgressManager {\n  private startListeners: ProgressCallback[] = [];\n  private finishListeners: ProgressCallback[] = [];\n\n  start() {\n    this.startListeners.forEach((cb) => cb());\n  }\n\n  finish() {\n    this.finishListeners.forEach((cb) => cb());\n  }\n\n  onStart(cb: ProgressCallback) {\n    this.startListeners.push(cb);\n  }\n\n  onFinish(cb: ProgressCallback) {\n    this.finishListeners.push(cb);\n  }\n}\n\nexport const progressManager = new NavProgressManager();\n\n// --------------------\n// Helper constants/functions for NavLink\n// --------------------\n\nconst EXTERNAL_LINK_REGEX = /^(https?:)?\\/\\//;\nconst DEFAULT_CLASSES =\n  \"inline-flex items-center gap-2 px-3 py-2 rounded-md transition-colors duration-200 focus:outline-none\";\nconst DEFAULT_ACTIVE_CLASSES =\n  \"text-sky-600 font-semibold bg-sky-50 dark:bg-sky-950/20\";\n\nconst normalizePath = (path: string): string => {\n  if (!path || path === \"/\") return \"/\";\n  return path.endsWith(\"/\") ? path.slice(0, -1) : path;\n};\n\nconst isExternalLink = (href: string): boolean =>\n  EXTERNAL_LINK_REGEX.test(href);\n\nconst getPathnameFromExternalUrl = (url: string): string => {\n  try {\n    return new URL(url).pathname;\n  } catch {\n    return url;\n  }\n};\n\n// --------------------\n// NavLink Component\n// --------------------\n\nexport function NavLink({\n  href,\n  exact = false,\n  activeClassName = DEFAULT_ACTIVE_CLASSES,\n  className = DEFAULT_CLASSES,\n  children,\n  ...rest\n}: NavLinkProps) {\n  const pathname = usePathname();\n  const router = useRouter();\n\n  const isExternal = React.useMemo(() => isExternalLink(href), [href]);\n\n  const isActive = React.useMemo(() => {\n    if (!pathname || isExternal) return false;\n\n    const currentPath = normalizePath(pathname);\n    const targetPath = href.startsWith(\"/\")\n      ? normalizePath(href)\n      : normalizePath(getPathnameFromExternalUrl(href));\n\n    if (exact) return currentPath === targetPath;\n\n    if (targetPath === \"/\") return currentPath === \"/\";\n\n    return (\n      currentPath === targetPath || currentPath.startsWith(targetPath + \"/\")\n    );\n  }, [pathname, href, exact, isExternal]);\n\n  const mergedClassName = React.useMemo(() => {\n    const baseClasses = [className];\n    if (isActive && pathname !== null) baseClasses.push(activeClassName);\n    return baseClasses.filter(Boolean).join(\" \").trim();\n  }, [className, isActive, activeClassName, pathname]);\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    if (isExternal) return; // external links behave normally\n    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 1)\n      return;\n    e.preventDefault();\n    if (pathname === href) return;\n    progressManager.start();\n    router.push(href);\n  };\n\n  const ariaAttributes = React.useMemo(() => {\n    const attributes: {\n      \"aria-current\"?: \"page\" | undefined;\n      \"aria-label\"?: string;\n    } = {\n      \"aria-current\": isActive ? \"page\" : undefined,\n    };\n\n    if (rest[\"aria-label\"]) {\n      attributes[\"aria-label\"] = rest[\"aria-label\"];\n    }\n\n    return attributes;\n  }, [isActive, rest]);\n\n  return (\n    <Link\n      href={href}\n      className={mergedClassName}\n      {...ariaAttributes}\n      {...rest}\n      onClick={handleClick}\n      prefetch={true}\n    >\n      {children}\n    </Link>\n  );\n}\n\nNavLink.displayName = \"NavLink\";\n\n// --------------------\n// useNavigate Hook\n// --------------------\n\nexport const useNavigate = () => {\n  const router = useRouter();\n  const pathname = usePathname();\n\n  const navigate = (\n    href: string,\n    options?: { replace?: boolean; scroll?: boolean }\n  ) => {\n    if (pathname === href) return;\n    progressManager.start();\n    const { replace = false, scroll = true } = options || {};\n    if (replace) router.replace(href, { scroll });\n    else router.push(href, { scroll });\n  };\n\n  return navigate;\n};\n\n// --------------------\n// NavigationProgress Component\n// --------------------\n","\"use client\";\n\nimport React, { useEffect, useState } from \"react\";\nimport { usePathname } from \"next/navigation\";\nimport { progressManager } from \"./NavLink\"; // export your singleton from your package\n\nexport const NavigationProgressClient: React.FC<{\n  color?: string;\n  height?: string;\n  duration?: number;\n}> = ({ color = \"#2563EB\", height = \"3px\", duration = 200 }) => {\n  const [width, setWidth] = useState(\"0%\");\n  const [visible, setVisible] = useState(false);\n  const pathname = usePathname();\n\n  useEffect(() => {\n    progressManager.onStart(() => {\n      setVisible(true);\n      setWidth(\"0%\");\n      setTimeout(() => setWidth(\"40%\"), 10);\n    });\n\n    progressManager.onFinish(() => {\n      setWidth(\"100%\");\n      setTimeout(() => {\n        setVisible(false);\n        setWidth(\"0%\");\n      }, duration + 50);\n    });\n  }, [duration]);\n\n  useEffect(() => {\n    progressManager.finish();\n  }, [pathname]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      style={{\n        width,\n        height,\n        backgroundColor: color,\n        transition: `width ${duration}ms ease`,\n      }}\n      className=\"fixed top-0 left-0 z-[99999]\"\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,UAAU;AACjB,SAAS,aAAa,iBAAiB;AACvC,OAAO,WAAoC;AAwIvC;AAnHJ,IAAM,qBAAN,MAAyB;AAAA,EAAzB;AACE,SAAQ,iBAAqC,CAAC;AAC9C,SAAQ,kBAAsC,CAAC;AAAA;AAAA,EAE/C,QAAQ;AACN,SAAK,eAAe,QAAQ,CAAC,OAAO,GAAG,CAAC;AAAA,EAC1C;AAAA,EAEA,SAAS;AACP,SAAK,gBAAgB,QAAQ,CAAC,OAAO,GAAG,CAAC;AAAA,EAC3C;AAAA,EAEA,QAAQ,IAAsB;AAC5B,SAAK,eAAe,KAAK,EAAE;AAAA,EAC7B;AAAA,EAEA,SAAS,IAAsB;AAC7B,SAAK,gBAAgB,KAAK,EAAE;AAAA,EAC9B;AACF;AAEO,IAAM,kBAAkB,IAAI,mBAAmB;AAMtD,IAAM,sBAAsB;AAC5B,IAAM,kBACJ;AACF,IAAM,yBACJ;AAEF,IAAM,gBAAgB,CAAC,SAAyB;AAC9C,MAAI,CAAC,QAAQ,SAAS,IAAK,QAAO;AAClC,SAAO,KAAK,SAAS,GAAG,IAAI,KAAK,MAAM,GAAG,EAAE,IAAI;AAClD;AAEA,IAAM,iBAAiB,CAAC,SACtB,oBAAoB,KAAK,IAAI;AAE/B,IAAM,6BAA6B,CAAC,QAAwB;AAC1D,MAAI;AACF,WAAO,IAAI,IAAI,GAAG,EAAE;AAAA,EACtB,SAAQ;AACN,WAAO;AAAA,EACT;AACF;AAMO,SAAS,QAAQ,IAOP;AAPO,eACtB;AAAA;AAAA,IACA,QAAQ;AAAA,IACR,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ;AAAA,EAlFF,IA6EwB,IAMnB,iBANmB,IAMnB;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,UAAU;AAEzB,QAAM,aAAa,MAAM,QAAQ,MAAM,eAAe,IAAI,GAAG,CAAC,IAAI,CAAC;AAEnE,QAAM,WAAW,MAAM,QAAQ,MAAM;AACnC,QAAI,CAAC,YAAY,WAAY,QAAO;AAEpC,UAAM,cAAc,cAAc,QAAQ;AAC1C,UAAM,aAAa,KAAK,WAAW,GAAG,IAClC,cAAc,IAAI,IAClB,cAAc,2BAA2B,IAAI,CAAC;AAElD,QAAI,MAAO,QAAO,gBAAgB;AAElC,QAAI,eAAe,IAAK,QAAO,gBAAgB;AAE/C,WACE,gBAAgB,cAAc,YAAY,WAAW,aAAa,GAAG;AAAA,EAEzE,GAAG,CAAC,UAAU,MAAM,OAAO,UAAU,CAAC;AAEtC,QAAM,kBAAkB,MAAM,QAAQ,MAAM;AAC1C,UAAM,cAAc,CAAC,SAAS;AAC9B,QAAI,YAAY,aAAa,KAAM,aAAY,KAAK,eAAe;AACnE,WAAO,YAAY,OAAO,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK;AAAA,EACpD,GAAG,CAAC,WAAW,UAAU,iBAAiB,QAAQ,CAAC;AAEnD,QAAM,cAAc,CAAC,MAA2C;AAC9D,QAAI,WAAY;AAChB,QAAI,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW;AACnE;AACF,MAAE,eAAe;AACjB,QAAI,aAAa,KAAM;AACvB,oBAAgB,MAAM;AACtB,WAAO,KAAK,IAAI;AAAA,EAClB;AAEA,QAAM,iBAAiB,MAAM,QAAQ,MAAM;AACzC,UAAM,aAGF;AAAA,MACF,gBAAgB,WAAW,SAAS;AAAA,IACtC;AAEA,QAAI,KAAK,YAAY,GAAG;AACtB,iBAAW,YAAY,IAAI,KAAK,YAAY;AAAA,IAC9C;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,IAAI,CAAC;AAEnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,OACP,iBACA,OAJL;AAAA,MAKC,SAAS;AAAA,MACT,UAAU;AAAA,MAET;AAAA;AAAA,EACH;AAEJ;AAEA,QAAQ,cAAc;AAMf,IAAM,cAAc,MAAM;AAC/B,QAAM,SAAS,UAAU;AACzB,QAAM,WAAW,YAAY;AAE7B,QAAM,WAAW,CACf,MACA,YACG;AACH,QAAI,aAAa,KAAM;AACvB,oBAAgB,MAAM;AACtB,UAAM,EAAE,UAAU,OAAO,SAAS,KAAK,IAAI,WAAW,CAAC;AACvD,QAAI,QAAS,QAAO,QAAQ,MAAM,EAAE,OAAO,CAAC;AAAA,QACvC,QAAO,KAAK,MAAM,EAAE,OAAO,CAAC;AAAA,EACnC;AAEA,SAAO;AACT;;;AC5KA,SAAgB,aAAAA,YAAW,YAAAC,iBAAgB;AAC3C,SAAS,eAAAC,oBAAmB;AAmCxB,gBAAAC,YAAA;AAhCG,IAAM,2BAIR,CAAC,EAAE,QAAQ,WAAW,SAAS,OAAO,WAAW,IAAI,MAAM;AAC9D,QAAM,CAAC,OAAO,QAAQ,IAAIC,UAAS,IAAI;AACvC,QAAM,CAAC,SAAS,UAAU,IAAIA,UAAS,KAAK;AAC5C,QAAM,WAAWC,aAAY;AAE7B,EAAAC,WAAU,MAAM;AACd,oBAAgB,QAAQ,MAAM;AAC5B,iBAAW,IAAI;AACf,eAAS,IAAI;AACb,iBAAW,MAAM,SAAS,KAAK,GAAG,EAAE;AAAA,IACtC,CAAC;AAED,oBAAgB,SAAS,MAAM;AAC7B,eAAS,MAAM;AACf,iBAAW,MAAM;AACf,mBAAW,KAAK;AAChB,iBAAS,IAAI;AAAA,MACf,GAAG,WAAW,EAAE;AAAA,IAClB,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,CAAC;AAEb,EAAAA,WAAU,MAAM;AACd,oBAAgB,OAAO;AAAA,EACzB,GAAG,CAAC,QAAQ,CAAC;AAEb,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,gBAAAH;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,iBAAiB;AAAA,QACjB,YAAY,SAAS,QAAQ;AAAA,MAC/B;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;","names":["useEffect","useState","usePathname","jsx","useState","usePathname","useEffect"]}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@nuraloom/navlink",
+  "version": "1.0.1",
+  "description": "A production-ready NavLink component for Next.js (App Router)",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "keywords": [
+    "dct",
+    "delta",
+    "cube",
+    "delta cube",
+    "technology",
+    "delta cube technology",
+    "nextjs",
+    "react",
+    "navlink",
+    "navigation",
+    "component",
+    "typescript"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "peerDependencies": {
+    "next": ">=13",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.26",
+    "next": "^16.0.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/smattechnology/navlink.git"
+  },
+  "bugs": {
+    "url": "https://github.com/smattechnology/navlink/issues"
+  },
+  "homepage": "https://github.com/smattechnology/navlink#readme",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/NavLink.tsx

@@ -0,0 +1,179 @@
+"use client";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+
+// --------------------
+// Types
+// --------------------
+
+export interface NavLinkProps
+  extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  href: string;
+  exact?: boolean;
+  activeClassName?: string;
+  className?: string;
+  children: React.ReactNode;
+}
+
+// --------------------
+// NavProgressManager
+// --------------------
+
+type ProgressCallback = () => void;
+
+class NavProgressManager {
+  private startListeners: ProgressCallback[] = [];
+  private finishListeners: ProgressCallback[] = [];
+
+  start() {
+    this.startListeners.forEach((cb) => cb());
+  }
+
+  finish() {
+    this.finishListeners.forEach((cb) => cb());
+  }
+
+  onStart(cb: ProgressCallback) {
+    this.startListeners.push(cb);
+  }
+
+  onFinish(cb: ProgressCallback) {
+    this.finishListeners.push(cb);
+  }
+}
+
+export const progressManager = new NavProgressManager();
+
+// --------------------
+// Helper constants/functions for NavLink
+// --------------------
+
+const EXTERNAL_LINK_REGEX = /^(https?:)?\/\//;
+const DEFAULT_CLASSES =
+  "inline-flex items-center gap-2 px-3 py-2 rounded-md transition-colors duration-200 focus:outline-none";
+const DEFAULT_ACTIVE_CLASSES =
+  "text-sky-600 font-semibold bg-sky-50 dark:bg-sky-950/20";
+
+const normalizePath = (path: string): string => {
+  if (!path || path === "/") return "/";
+  return path.endsWith("/") ? path.slice(0, -1) : path;
+};
+
+const isExternalLink = (href: string): boolean =>
+  EXTERNAL_LINK_REGEX.test(href);
+
+const getPathnameFromExternalUrl = (url: string): string => {
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return url;
+  }
+};
+
+// --------------------
+// NavLink Component
+// --------------------
+
+export function NavLink({
+  href,
+  exact = false,
+  activeClassName = DEFAULT_ACTIVE_CLASSES,
+  className = DEFAULT_CLASSES,
+  children,
+  ...rest
+}: NavLinkProps) {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const isExternal = React.useMemo(() => isExternalLink(href), [href]);
+
+  const isActive = React.useMemo(() => {
+    if (!pathname || isExternal) return false;
+
+    const currentPath = normalizePath(pathname);
+    const targetPath = href.startsWith("/")
+      ? normalizePath(href)
+      : normalizePath(getPathnameFromExternalUrl(href));
+
+    if (exact) return currentPath === targetPath;
+
+    if (targetPath === "/") return currentPath === "/";
+
+    return (
+      currentPath === targetPath || currentPath.startsWith(targetPath + "/")
+    );
+  }, [pathname, href, exact, isExternal]);
+
+  const mergedClassName = React.useMemo(() => {
+    const baseClasses = [className];
+    if (isActive && pathname !== null) baseClasses.push(activeClassName);
+    return baseClasses.filter(Boolean).join(" ").trim();
+  }, [className, isActive, activeClassName, pathname]);
+
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (isExternal) return; // external links behave normally
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 1)
+      return;
+    e.preventDefault();
+    if (pathname === href) return;
+    progressManager.start();
+    router.push(href);
+  };
+
+  const ariaAttributes = React.useMemo(() => {
+    const attributes: {
+      "aria-current"?: "page" | undefined;
+      "aria-label"?: string;
+    } = {
+      "aria-current": isActive ? "page" : undefined,
+    };
+
+    if (rest["aria-label"]) {
+      attributes["aria-label"] = rest["aria-label"];
+    }
+
+    return attributes;
+  }, [isActive, rest]);
+
+  return (
+    <Link
+      href={href}
+      className={mergedClassName}
+      {...ariaAttributes}
+      {...rest}
+      onClick={handleClick}
+      prefetch={true}
+    >
+      {children}
+    </Link>
+  );
+}
+
+NavLink.displayName = "NavLink";
+
+// --------------------
+// useNavigate Hook
+// --------------------
+
+export const useNavigate = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const navigate = (
+    href: string,
+    options?: { replace?: boolean; scroll?: boolean }
+  ) => {
+    if (pathname === href) return;
+    progressManager.start();
+    const { replace = false, scroll = true } = options || {};
+    if (replace) router.replace(href, { scroll });
+    else router.push(href, { scroll });
+  };
+
+  return navigate;
+};
+
+// --------------------
+// NavigationProgress Component
+// --------------------

package/src/NavigationProgressClient.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import { progressManager } from "./NavLink"; // export your singleton from your package
+
+export const NavigationProgressClient: React.FC<{
+  color?: string;
+  height?: string;
+  duration?: number;
+}> = ({ color = "#2563EB", height = "3px", duration = 200 }) => {
+  const [width, setWidth] = useState("0%");
+  const [visible, setVisible] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    progressManager.onStart(() => {
+      setVisible(true);
+      setWidth("0%");
+      setTimeout(() => setWidth("40%"), 10);
+    });
+
+    progressManager.onFinish(() => {
+      setWidth("100%");
+      setTimeout(() => {
+        setVisible(false);
+        setWidth("0%");
+      }, duration + 50);
+    });
+  }, [duration]);
+
+  useEffect(() => {
+    progressManager.finish();
+  }, [pathname]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      style={{
+        width,
+        height,
+        backgroundColor: color,
+        transition: `width ${duration}ms ease`,
+      }}
+      className="fixed top-0 left-0 z-[99999]"
+    />
+  );
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+"use client";
+export { NavLink } from "./NavLink";
+export type { NavLinkProps } from "./NavLink";
+
+// index.ts
+export { NavigationProgressClient as NavigationProgress } from "./NavigationProgressClient";
+export { useNavigate } from "./NavLink";

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "Bundler",
+    "types": ["react", "next"],
+    "alwaysStrict": false
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"], // build from index.ts
+  format: ["esm", "cjs"],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  external: ["react", "next", "next/link", "next/navigation"],
+});