feat(tanstack-router): add TanStack Router support

README.md

@@ -12,13 +12,14 @@ It helps users understand that a new page or content is being loaded, making nav
 
 ## Packages
 
-| Package     | Lien                                                               | Changelog                                                                                 |
-| ----------- | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- |
-| **Core**    | [@bprogress/core](https://www.npmjs.com/package/@bprogress/core)   | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/core/CHANGELOG.md)  |
-| **React**   | [@bprogress/react](https://www.npmjs.com/package/@bprogress/react) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/react/CHANGELOG.md) |
-| **Next.js** | [@bprogress/next](https://www.npmjs.com/package/@bprogress/next)   | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/next/CHANGELOG.md)  |
-| **Remix**   | [@bprogress/remix](https://www.npmjs.com/package/@bprogress/remix) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/remix/CHANGELOG.md) |
-| **Vue**     | [@bprogress/vue](https://www.npmjs.com/package/@bprogress/vue)     | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/vue/CHANGELOG.md)   |
+| Package              | Lien                                                                                 | Changelog                                                                                                  |
+| -------------------- | ------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- |
+| **Core**             | [@bprogress/core](https://www.npmjs.com/package/@bprogress/core)                     | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/core/CHANGELOG.md)                   |
+| **React**            | [@bprogress/react](https://www.npmjs.com/package/@bprogress/react)                   | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/react/CHANGELOG.md)                  |
+| **Next.js**          | [@bprogress/next](https://www.npmjs.com/package/@bprogress/next)                     | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/next/CHANGELOG.md)                   |
+| **Remix**            | [@bprogress/remix](https://www.npmjs.com/package/@bprogress/remix)                   | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/remix/CHANGELOG.md)                  |
+| **TanStack Router**  | [@bprogress/tanstack-router](https://www.npmjs.com/package/@bprogress/tanstack-router) | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/tanstack-router/CHANGELOG.md)        |
+| **Vue**              | [@bprogress/vue](https://www.npmjs.com/package/@bprogress/vue)                       | [CHANGELOG](https://github.com/imskyleen/bprogress/tree/main/packages/vue/CHANGELOG.md)                    |
 
 ## Documentation
 

apps/docs/content/docs/meta.json

@@ -34,6 +34,7 @@
     "react",
     "next",
     "remix",
+    "tanstack-router",
     "vue",
     "---More---",
     "roadmap",

apps/docs/content/docs/tanstack-router/components/progress-provider.mdx

@@ -0,0 +1,18 @@
+---
+title: ProgressProvider
+description: The main provider component for TanStack Router progress bar
+---
+
+## Import
+
+```tsx
+import { ProgressProvider } from '@bprogress/tanstack-router';
+```
+
+## Usage
+
+```tsx
+<ProgressProvider>
+  ...
+</ProgressProvider>
+```

apps/docs/content/docs/tanstack-router/installation.mdx

@@ -0,0 +1,48 @@
+---
+title: Installation
+description: Install BProgress in your TanStack Router application
+---
+
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { SiNpm } from 'react-icons/si';
+import { FaGithub } from 'react-icons/fa6';
+
+## Installation
+
+To install BProgress, run the following command:
+
+<Tabs groupId="packageManager" items={['npm', 'pnpm', 'yarn', 'bun']} persist>
+  <Tab value="npm">```bash npm install @bprogress/tanstack-router ```</Tab>
+  <Tab value="pnpm">```bash pnpm add @bprogress/tanstack-router ```</Tab>
+  <Tab value="yarn">```bash yarn add @bprogress/tanstack-router ```</Tab>
+  <Tab value="bun">```bash bun add @bprogress/tanstack-router ```</Tab>
+</Tabs>
+
+Now you are ready to use BProgress in your TanStack Router application!
+
+<Callout type="info" title="Compatibility">
+  This package works with both:
+  - **TanStack Router** (SPA mode)
+  - **TanStack Start** (SSR/SSG mode)
+</Callout>
+
+## Links
+
+<Cards>
+  <Card
+    external
+    title="NPM"
+    href="https://www.npmjs.com/package/@bprogress/tanstack-router"
+    icon={<SiNpm />}
+  >
+    Check the package on NPM
+  </Card>
+  <Card
+    external
+    title="GitHub"
+    href="https://github.com/imskyleen/bprogress/tree/main/packages/tanstack-router"
+    icon={<FaGithub />}
+  >
+    Check the repository on GitHub
+  </Card>
+</Cards>

apps/docs/content/docs/tanstack-router/meta.json

@@ -0,0 +1,14 @@
+{
+  "title": "TanStack Router",
+  "root": false,
+  "pages": [
+    "---Guide---",
+    "installation",
+    "quick-start",
+    "---Components---",
+    "components/progress-provider",
+    "../react/components/progress-components",
+    "---Hooks---",
+    "../react/hooks/use-progress"
+  ]
+}

apps/docs/content/docs/tanstack-router/quick-start.mdx

@@ -0,0 +1,75 @@
+---
+title: Quick Start
+description: Get started with BProgress for TanStack Router
+---
+
+## Import
+
+```tsx
+import { ProgressProvider } from '@bprogress/tanstack-router';
+```
+
+## Usage
+
+`<ProgressProvider>` must be **inside** `<RouterProvider>`.
+
+```tsx
+<ProgressProvider>
+  ...
+</ProgressProvider>
+```
+
+## Example
+
+In both setups, `__root.tsx` is rendered as a child of `<RouterProvider>`.
+
+### TanStack Router (SPA)
+
+```tsx title="src/routes/__root.tsx"
+import { createRootRoute, Outlet } from "@tanstack/react-router";
+import { ProgressProvider } from '@bprogress/tanstack-router'
+
+export const Route = createRootRoute({
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <ProgressProvider>
+      <Outlet />
+    </ProgressProvider>
+  );
+}
+```
+
+### TanStack Start (SSR)
+
+```tsx title="src/routes/__root.tsx"
+import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
+import { ProgressProvider } from '@bprogress/tanstack-router'
+
+export const Route = createRootRoute({
+  head: () => ({ meta: [...], links: [...] }),
+  component: RootComponent,
+})
+
+function RootComponent({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <ProgressProvider>
+          {children}
+        </ProgressProvider>
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+```
+
+<Callout type="info" title="SSR Support">
+  The provider uses `<ClientOnly>` from `@tanstack/react-router` internally in SSR, so the same usage works in both SPA and TanStack Start.
+</Callout>

apps/tanstack-start-app/.cta.json

@@ -0,0 +1,15 @@
+{
+  "projectName": "tanstack-start-app",
+  "mode": "file-router",
+  "typescript": true,
+  "tailwind": false,
+  "packageManager": "pnpm",
+  "git": true,
+  "install": true,
+  "addOnOptions": {},
+  "version": 1,
+  "framework": "react-cra",
+  "chosenAddOns": [
+    "start"
+  ]
+}

apps/tanstack-start-app/.gitignore

@@ -0,0 +1,13 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+count.txt
+.env
+.nitro
+.tanstack
+.wrangler
+.output
+.vinxi
+todos.json