izen-react-starter 2.2.8 → 2.3.0

package/README.md

@@ -2,6 +2,10 @@
 
 A modern React component library built with Vite, TypeScript, and best practices.
 
+## Changelog
+
+- 2026-01-02: `BrowserRouter` removed from inside `AppProvider`. Consumers must wrap `AppProvider` (and any `react-router-dom` usage) in their own router at the app root.
+
 ## Features
 
 - 🎨 **UI Components**: Pre-built, customizable components (Button, Card, etc.)
@@ -54,24 +58,39 @@ The library includes Tailwind CSS with pre-configured theme variables for:
 
 ### App Provider (All-in-one)
 
-Wrap your application with `AppProvider` to get all providers in one go:
+Wrap your application with `BrowserRouter` at the root. `AppProvider` no longer creates a router internally so you control the router setup in your app entry point:
 
 ```tsx
+import { BrowserRouter } from 'react-router-dom';
 import { AppProvider } from 'izen-react-starter';
 import { AppRouter } from './routes';
 
 function App() {
   return (
-    <AppProvider 
-      defaultTheme="light"
-      showReactQueryDevtools={true}
-    >
-      <AppRouter />
-    </AppProvider>
+    <BrowserRouter>
+      <AppProvider 
+        defaultTheme="light"
+        showReactQueryDevtools={true}
+        // Option A: merge extra react-query defaults
+        queryClientOptions={{
+          defaultOptions: {
+            queries: {
+              retry: 1,
+            },
+          },
+        }}
+        // Option B: supply a custom QueryClient instance
+        // queryClient={myCustomClient}
+      >
+        <AppRouter />
+      </AppProvider>
+    </BrowserRouter>
   );
 }
 ```
 
+> Recent change: `BrowserRouter` was removed from inside `AppProvider`. Always wrap `AppProvider` (or any components using `react-router-dom` hooks/components) in your own router at the application root.
+
 ### Authentication
 
 ```tsx
@@ -106,6 +125,23 @@ function ProfilePage() {
 }
 ```
 
+#### Typing `useAuth`
+
+`useAuth` is generic. Bring your own user shape for full IntelliSense:
+
+```tsx
+import { useAuth } from 'izen-react-starter';
+
+type MyUser = {
+  id: string;
+  name: string;
+  role: 'admin' | 'user';
+};
+
+const { user, setAuthData } = useAuth<MyUser>();
+setAuthData({ id: '1', name: 'Ada', role: 'admin' }, { access_token: 'jwt' });
+```
+
 ### Protected Routes
 
 ```tsx
@@ -127,6 +163,17 @@ function AppRouter() {
 }
 ```
 
+> Make sure these routes are rendered inside your app-level router (e.g., `BrowserRouter`) that wraps `AppProvider`, so `RequiredAuth` and router hooks have a valid router context.
+
+Optional guard: pass `canAccess` for custom checks (e.g., roles/claims) in addition to the default `auth?.user` presence.
+
+```tsx
+<Route element={<RequiredAuth canAccess={(auth) => Boolean(auth?.user && auth?.user.role === 'admin')} />}
+  path="/admin"
+  element={<AdminPage />}
+/>
+```
+
 ### App Router Hook (Simplified Routing)
 
 The `useAppRouter` hook simplifies route configuration by automatically handling:

package/dist/{MIMHJGAX-QHfr44HB.js → MIMHJGAX-CkycM4_6.js}

@@ -1,7 +1,7 @@
 var ws = Object.defineProperty;
 var xs = (e, t, n) => t in e ? ws(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var Re = (e, t, n) => xs(e, typeof t != "symbol" ? t + "" : t, n);
-import { b as $e, d as B, o as xt, e as H, c as L, a as v, P as zo, m as ye, S as K, t as P, i as k, f as U, h as F, j as $s, k as sr, u as Ce, l as V, s as Vn, n as jn, p as ft, q as T, r as Cs, v as cn, w as qe, x as Ss, y as _t, z as Kt, A as ks, B as Es, C as Cn, F as Ds, D as Hr, E as Nt, $ as Ko, G as Ms, H as As, I as W, J as Gr, K as Ts, L as Fs, M as ar, N as Is, O as Os, Q as Kn, R as Ls, T as Ps, U as ie, V as qs, W as _s } from "./index-BqTfpBWD.js";
+import { b as $e, d as B, o as xt, e as H, c as L, a as v, P as zo, m as ye, S as K, t as P, i as k, f as U, h as F, j as $s, k as sr, u as Ce, l as V, s as Vn, n as jn, p as ft, q as T, r as Cs, v as cn, w as qe, x as Ss, y as _t, z as Kt, A as ks, B as Es, C as Cn, F as Ds, D as Hr, E as Nt, $ as Ko, G as Ms, H as As, I as W, J as Gr, K as Ts, L as Fs, M as ar, N as Is, O as Os, Q as Kn, R as Ls, T as Ps, U as ie, V as qs, W as _s } from "./index-DGFW2ITH.js";
 var Rs = (e) => e != null, zs = (e) => e.filter(Rs);
 function Ks(e) {
   return (...t) => {

package/dist/{Q7LWSL4U-BArv4XpB.js → Q7LWSL4U-5bNkDdVO.js}

@@ -1,5 +1,5 @@
-import { c, T as l, P as m, a as u, D as v, Q as i } from "./MIMHJGAX-QHfr44HB.js";
-import { g as d, c as f, a as e } from "./index-BqTfpBWD.js";
+import { c, T as l, P as m, a as u, D as v, Q as i } from "./MIMHJGAX-CkycM4_6.js";
+import { g as d, c as f, a as e } from "./index-DGFW2ITH.js";
 var h = (t) => {
   const [r, o] = c({
     prefix: "TanstackQueryDevtools"

package/dist/{VLTTJS3N-DAIMU_ht.js → VLTTJS3N-CO-S_rDj.js}

@@ -1,5 +1,5 @@
-import { c as s, T as c, P as u, a as i, b as m, C as P, Q as d } from "./MIMHJGAX-QHfr44HB.js";
-import { g as h, c as v, a as e } from "./index-BqTfpBWD.js";
+import { c as s, T as c, P as u, a as i, b as m, C as P, Q as d } from "./MIMHJGAX-CkycM4_6.js";
+import { g as h, c as v, a as e } from "./index-DGFW2ITH.js";
 var C = (r) => {
   const [t, o] = s({
     prefix: "TanstackQueryDevtools"