izen-react-starter 2.7.2 → 2.7.3

package/README.md

@@ -4,8 +4,12 @@ A modern React component library built with Vite, TypeScript, and best practices
 
 ## Changelog
 
-- 2026-01-12: Added `publicResources` prop to `RBACConfig` for defining resources accessible without authentication. The `useAccessControl` hook now checks `publicResources` first, allowing guest access to specified resources. Added `DashboardLayout` component with integrated `AppSidebar`, header, and overlay support. Sidebar now supports `collapsible: 'icon'` for desktop toggle and `'offcanvas'` for mobile sheet behavior. Updated `ApiService` interface to include `setTokenGetter` method for token management.
-- 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.
+- **2026-01-17**: 
+  - **Tailwind CSS as peer dependency**: Library no longer bundles Tailwind. Consuming projects must install `tailwindcss` separately, reducing bundle size.
+  - **Exported `tailwindConfig`**: Can now import the library's default Tailwind config: `import { tailwindConfig } from 'izen-react-starter'`.
+  - **Custom sidebar support**: Added `customSidebar` and `useCustomSidebar` props to `DashboardLayout` for rendering custom sidebar components.
+- **2026-01-12**: Added `publicResources` prop to `RBACConfig` for guest access without authentication. Added `DashboardLayout` component with integrated `AppSidebar`, header, and overlay support. Sidebar supports `collapsible: 'icon'` for desktop toggle and `'offcanvas'` for mobile sheet behavior.
+- **2026-01-02**: `BrowserRouter` removed from inside `AppProvider`. Consumers must wrap `AppProvider` in their own router at the app root.
 
 ## Features
 
@@ -28,28 +32,77 @@ A modern React component library built with Vite, TypeScript, and best practices
 ## Installation
 
 ```bash
-npm install izen-react-starter
+npm install izen-react-starter tailwindcss
 # or
-yarn add izen-react-starter
+yarn add izen-react-starter tailwindcss
 # or
-pnpm add izen-react-starter
+pnpm add izen-react-starter tailwindcss
 ```
 
+> **Important**: This library requires `tailwindcss` as a peer dependency. You must install it in your project for the styles to work correctly.
+
 > **Note**: This library has a peer dependency of React ^18.2.0. If you're using React 19, you may need to install with `--legacy-peer-deps` flag:
 > ```bash
-> npm install izen-react-starter --legacy-peer-deps
+> npm install izen-react-starter tailwindcss --legacy-peer-deps
 > ```
 
+### Setup Tailwind in Your Project
+
+If you haven't already, initialize Tailwind in your consuming project:
+
+```bash
+npx tailwindcss init -p
+```
+
+#### Option 1: Use the library's default config (Recommended for simplicity)
+
+```js
+// tailwind.config.js
+import { tailwindConfig } from 'izen-react-starter';
+
+export default {
+  ...tailwindConfig,
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/izen-react-starter/**/*.{js,ts,jsx,tsx}"
+  ]
+}
+```
+
+#### Option 2: Create your own config (For full customization)
+
+Configure your `tailwind.config.js` to include the library's components:
+
+```js
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/izen-react-starter/**/*.{js,ts,jsx,tsx}"
+  ],
+  theme: {
+    extend: {
+      // Add your custom theme extensions here
+    },
+  },
+  plugins: [],
+}
+```
+
 ### Import Styles
 
 Don't forget to import the CSS file in your app entry point:
 
 ```tsx
 // In your main.tsx or App.tsx
-import 'izen-react-starter/style.css';
+import 'tailwindcss/tailwind.css'; // Tailwind styles from your project
+import 'izen-react-starter/style.css'; // Library styles
 ```
 
-The library includes Tailwind CSS with pre-configured theme variables for:
+The library includes pre-configured Tailwind theme variables for:
 - Light/Dark modes
 - Customizable color schemes
 - Geist font family

package/dist/{2SSKDMRQ-CGMqH5PF.js → 2SSKDMRQ-Chn-NgZI.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 "./AP7HFJJL-Dnup2inR.js";
-import { g as h, c as v, a as e } from "./index-D6QTki-w.js";
+import { c as s, T as c, P as u, a as i, b as m, C as P, Q as d } from "./AP7HFJJL-BME9q2ff.js";
+import { g as h, c as v, a as e } from "./index-DPdV1XXU.js";
 var C = (r) => {
   const [t, o] = s({
     prefix: "TanstackQueryDevtools"

package/dist/{AP7HFJJL-Dnup2inR.js → AP7HFJJL-BME9q2ff.js}

@@ -1,7 +1,7 @@
 var xs = Object.defineProperty;
 var $s = (e, t, n) => t in e ? xs(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var Re = (e, t, n) => $s(e, typeof t != "symbol" ? t + "" : t, n);
-import { b as $e, d as B, o as ft, e as H, c as P, a as m, P as No, m as ve, S as K, t as _, i as k, f as U, h as F, j as Cs, k as ur, u as Ce, l as V, s as Qn, n as Yn, p as gt, q as T, r as Ss, v as Ut, w as _t, x as qe, y as ks, z as Rt, A as Bt, B as Es, C as Ds, D as En, F as As, E as Ht, $ as Ho, G as Ms, H as Ts, I as W, J as Vr, K as Fs, L as Is, M as cr, N as Os, O as Ls, Q as Hn, R as Ps, T as qs, U as ie, V as _s, W as Rs } from "./index-D6QTki-w.js";
+import { b as $e, d as B, o as ft, e as H, c as P, a as m, P as No, m as ve, S as K, t as _, i as k, f as U, h as F, j as Cs, k as ur, u as Ce, l as V, s as Qn, n as Yn, p as gt, q as T, r as Ss, v as Ut, w as _t, x as qe, y as ks, z as Rt, A as Bt, B as Es, C as Ds, D as En, F as As, E as Ht, $ as Ho, G as Ms, H as Ts, I as W, J as Vr, K as Fs, L as Is, M as cr, N as Os, O as Ls, Q as Hn, R as Ps, T as qs, U as ie, V as _s, W as Rs } from "./index-DPdV1XXU.js";
 var zs = (e) => e != null, Ks = (e) => e.filter(zs);
 function Bs(e) {
   return (...t) => {

package/dist/{WDYDFRGG-BAxy4Yei.js → WDYDFRGG-CYAbLseR.js}

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