@adminlte/react 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -5,6 +5,32 @@ All notable changes to **@adminlte/react** are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.0] - 2026-08-19
+
+### Changed
+
+- **AdminLTE core upgraded to 4.8.1** (from 4.3.1), covering core [4.4.0](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#440---2026-08-18), [4.4.1](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#441---2026-08-18), [4.5.0](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#450---2026-08-18), [4.6.0](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#460---2026-08-18), [4.7.0](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#470---2026-08-18), [4.8.0](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#480---2026-08-19) and [4.8.1](https://github.com/ColorlibHQ/AdminLTE/blob/master/CHANGELOG.md#481---2026-08-19). What the bundled stylesheet (`@adminlte/react/css`) actually picks up:
+  - **The sidebar is now a flex column** (core 4.4.0, #6104). `.app-sidebar` gets `display: flex; flex-direction: column`, `.sidebar-brand` / `.sidebar-search` become `flex: 0 0 auto` and `.sidebar-wrapper` `flex: 1 1 auto; min-height: 0` — replacing the hard-coded `height: calc(100vh - (3.5rem + 1px))` that was repeated across every `sidebar-expand-*` breakpoint. The wrapper now fills whatever the sidebar leaves it instead of assuming a 3.5rem header, so a taller brand or an extra block above the menu no longer pushes the last items out of view. Verified in-browser on `/layout/fixed-sidebar`: wrapper 664 px inside a 720 px viewport, still scrolling under OverlayScrollbars.
+  - **`data-lte-print="plain"`** (core 4.7.0) — set it on `<html>` (or any container) for pages that should print as documents: no `(https://…)` suffix after external links, no outline around buttons. It works with nothing but the bundled CSS. Print also stopped drawing a black box around `.skip-link` and every `.nav-link` — the `border: 1px solid #000` rule is scoped to `.btn` again, which matters here because the sidebar prints by design.
+  - **`d-print-none` works on the shell** (core 4.6.0) — the print rules that force `display` on `.app-wrapper` and `.app-sidebar` are now `:not(.d-print-none)`, so Bootstrap's utility can hide the chrome from printed pages.
+  - **Skip-link hover contrast fix** (core 4.6.0) — `--bs-white` / `--bs-primary-emphasis` (a token Bootstrap never defines, so the background computed to transparent) swapped for `--bs-body-bg` / `--bs-primary-text-emphasis`, so the hovered skip link stays legible in both colour modes.
+  - The demo's `public/css/adminlte.rtl.css` was refreshed from core 4.8.1 to match.
+- **Palette attributes are available, opt-in.** Core's extended palettes ship as separate stylesheets that `@adminlte/react/css` deliberately does **not** bundle: `adminlte-colors.css` (4.4.0 — 14 generated colours as `--bs-*` tokens plus the `.bg-*` / `.text-bg-*` / `.text-*` / `.border-*` / `.link-*` / `.bg-gradient-*` / `.card-*` / `.callout-*` / `.direct-chat-*` families, ≈8 kB gzipped) and `adminlte-colors-v3.css` (4.5.0 — the same families for the 18 AdminLTE 3 colours at their original values, ≈9.5 kB gzipped). Install `admin-lte` and import the sheet you want next to the library CSS to get:
+  - **`data-lte-primary="teal"`** (4.6.0, with 4.8.1's pagination focus-ring fix) — promotes any palette colour to Bootstrap's `primary`, so buttons, links, pagination, form focus rings, progress bars, list groups and dropdowns follow it. Verified: `.btn-primary` goes `rgb(13, 110, 253)` → `rgb(18, 130, 125)` once the sheet is loaded, and does nothing without it.
+  - **`data-lte-contrast="aa"`** (4.8.0, v3 sheet only) — flips text to black on the eight v3 colours that miss WCAG AA (blue, cyan, fuchsia, green, lightblue, olive, pink, teal). Verified: `.text-bg-lightblue` goes white → black.
+
+### Added
+
+- Docs for both of the above: a **Core `<html>` attributes** table in the README's Styling section, and **The extended palette** / **Print** sections on the in-app `/docs/theming` page. They document core CSS you opt into yourself — no new component props or APIs.
+
+### Notes
+
+- **Core's restyled search fields don't reach this port.** 4.4.0 restyles `.navbar-search` and `.sidebar-search` into quiet pills (a new `--lte-search-field-*` variable set). `@adminlte/react` renders neither: the topbar search is a command-palette trigger button and the sidebar has no filter, so the new rules are inert here — nothing regressed, nothing gained.
+- **Core 4.4.1's ApexCharts dark-mode fix is a recipe, not shipped CSS** — it was applied to core's own demo pages. The `ApexChart` wrapper still passes `config` through verbatim and sets no Apex `theme`, so callers wanting dark tooltips pass `theme: { mode }` themselves.
+- Core's JavaScript is still irrelevant to this port — `@adminlte/react` never loads `adminlte.js` (see the 0.3.0 notes).
+- No dependency other than `admin-lte` changed; peer dependency ranges are untouched.
+- Verified: library build, type-check, lint (0 errors, 13 pre-existing warnings) and 19 unit tests; demo type-check and production build; all 67 Playwright route-smoke + a11y tests.
+
 ## [0.4.0] - 2026-08-13
 
 ### Changed
@@ -186,6 +212,7 @@ Next.js App Router and React Server Components.
 - Heavy third-party libraries are never bundled eagerly — they load via dynamic
   `import()` inside the components that use them.
 
+[0.5.0]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.4.0...v0.5.0
 [0.4.0]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.3.0...v0.4.0
 [0.3.0]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.2.0...v0.3.0
 [0.2.0]: https://github.com/ColorlibHQ/adminlte-react/compare/v0.1.0...v0.2.0

package/README.md

@@ -9,7 +9,7 @@
 
 A modern React/Next.js component library for building admin dashboards and web applications with AdminLTE 4 styling and Bootstrap 5.3 — built for the Next.js App Router and React Server Components by [Colorlib](https://colorlib.com).
 
-**Status**: v0.4.0 (Early Release, AdminLTE core 4.3.1) · **Live demo:** [adminlte.io/themes/next-react](https://adminlte.io/themes/next-react/)
+**Status**: v0.5.0 (Early Release, AdminLTE core 4.8.1) · **Live demo:** [adminlte.io/themes/next-react](https://adminlte.io/themes/next-react/)
 
 <p align="center">
   <a href="https://adminlte.io/themes/next-react/">
@@ -318,6 +318,33 @@ All components use Bootstrap 5.3 utility classes. Customize via CSS variables or
 }
 ```
 
+### Core `<html>` attributes
+
+AdminLTE core 4.6–4.8 added three opt-in attributes you set on `<html>` yourself — there is no
+component prop for them, and they work with this port because they are plain CSS:
+
+| Attribute | What it does | Stylesheet |
+| --- | --- | --- |
+| `data-lte-print="plain"` | Prints the page as a document: no `(https://…)` suffix after external links, no outline around buttons. | bundled — `@adminlte/react/css` |
+| `data-lte-primary="teal"` | Promotes any palette colour to Bootstrap's `primary`, so buttons, links, pagination, form focus rings, progress bars, list groups and dropdowns follow it. | opt-in — `admin-lte/dist/css/adminlte-colors.css` (or `…-v3.css`) |
+| `data-lte-contrast="aa"` | Flips text to black on the eight AdminLTE 3 colours (blue, cyan, fuchsia, green, lightblue, olive, pink, teal) that otherwise miss WCAG AA. | opt-in — `admin-lte/dist/css/adminlte-colors-v3.css` |
+
+```tsx
+// app/layout.tsx — data-lte-print needs no extra CSS
+<html lang="en" data-lte-print="plain">
+```
+
+The extended palettes are **not** bundled with `@adminlte/react/css`; add `admin-lte` as a
+dependency and import the sheet you want next to the library CSS:
+
+```tsx
+import '@adminlte/react/css'
+import 'admin-lte/dist/css/adminlte-colors.css' // 14 extra colours + data-lte-primary
+```
+
+Bootstrap's `d-print-none` also works on `.app-wrapper` and `.app-sidebar` now, so you can hide
+the shell chrome from printed pages.
+
 ## Type Safety
 
 Full TypeScript support with exported types:

package/dist/css/adminlte.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- *   AdminLTE v4.3.1
+ *   AdminLTE v4.8.1
  *   Author: Colorlib
  *   Website: AdminLTE.io <https://adminlte.io>
  *   License: Open source - MIT <https://opensource.org/licenses/MIT>
@@ -12850,6 +12850,85 @@ textarea.form-control-lg {
   height: 2.5rem;
 }
 
+.navbar-search {
+  --lte-search-field-width: 14rem;
+  --lte-search-field-focus-width: 18rem;
+  --lte-search-field-bg: rgba(var(--bs-emphasis-color-rgb), .06);
+  --lte-search-field-hover-bg: rgba(var(--bs-emphasis-color-rgb), .09);
+  --lte-search-field-focus-bg: rgba(var(--bs-emphasis-color-rgb), .1);
+  --lte-search-field-border-color: rgba(var(--bs-emphasis-color-rgb), .1);
+  --lte-search-field-focus-border-color: rgba(var(--bs-emphasis-color-rgb), .35);
+  --lte-search-field-focus-ring: 0 0 0 .2rem rgba(var(--bs-emphasis-color-rgb), .12);
+  --lte-search-field-color: var(--bs-body-color);
+  --lte-search-field-placeholder-color: var(--bs-secondary-color);
+  --lte-search-field-icon-color: var(--bs-secondary-color);
+}
+.navbar-search .form-control {
+  padding: 0.3rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--lte-search-field-color);
+  background-color: var(--lte-search-field-bg);
+  border-color: var(--lte-search-field-border-color);
+  box-shadow: none;
+  border-radius: 50rem;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .navbar-search .form-control {
+    transition: none;
+  }
+}
+.navbar-search .form-control::placeholder {
+  color: var(--lte-search-field-placeholder-color);
+  opacity: 1;
+}
+.navbar-search .form-control:hover {
+  background-color: var(--lte-search-field-hover-bg);
+}
+.navbar-search .form-control:focus {
+  background-color: var(--lte-search-field-focus-bg);
+  border-color: var(--lte-search-field-focus-border-color);
+  box-shadow: var(--lte-search-field-focus-ring);
+}
+.navbar-search .navbar-search-field {
+  position: relative;
+  width: var(--lte-search-field-width);
+  max-width: 100%;
+  transition: width 0.2s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .navbar-search .navbar-search-field {
+    transition: none;
+  }
+}
+.navbar-search:focus-within .navbar-search-field {
+  width: var(--lte-search-field-focus-width);
+}
+.navbar-search .form-control {
+  padding-left: 2.125rem;
+}
+.navbar-search .navbar-search-submit {
+  position: absolute;
+  top: 50%;
+  left: 0.75rem;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  line-height: 1;
+  color: var(--lte-search-field-icon-color);
+  background: transparent;
+  border: 0;
+  transform: translateY(-50%);
+  border-radius: 50rem;
+}
+.navbar-search .navbar-search-submit:hover, .navbar-search .navbar-search-submit:focus-visible {
+  color: var(--lte-search-field-color);
+}
+.navbar-search .navbar-search-submit:focus-visible {
+  outline: 2px solid var(--bs-focus-ring-color);
+  outline-offset: 2px;
+}
+
 .navbar-badge {
   position: absolute;
   top: 9px;
@@ -12871,7 +12950,6 @@ textarea.form-control-lg {
     max-height: 100vh;
   }
   .fixed-header.sidebar-expand-sm .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -12883,7 +12961,6 @@ textarea.form-control-lg {
     max-height: 100vh;
   }
   .fixed-header.sidebar-expand-md .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -12895,7 +12972,6 @@ textarea.form-control-lg {
     max-height: 100vh;
   }
   .fixed-header.sidebar-expand-lg .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -12907,7 +12983,6 @@ textarea.form-control-lg {
     max-height: 100vh;
   }
   .fixed-header.sidebar-expand-xl .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -12919,7 +12994,6 @@ textarea.form-control-lg {
     max-height: 100vh;
   }
   .fixed-header.sidebar-expand-xxl .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -12930,7 +13004,6 @@ textarea.form-control-lg {
   max-height: 100vh;
 }
 .fixed-header.sidebar-expand .app-sidebar .sidebar-wrapper {
-  height: calc(100vh - (calc(3.5rem + 1px)));
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -12950,6 +13023,8 @@ textarea.form-control-lg {
   --lte-sidebar-submenu-active-bg: rgba(0, 0, 0, 0.1);
   --lte-sidebar-header-color: rgb(19.3725490196%, 21.6078431373%, 23.8431372549%);
   z-index: 1038;
+  display: flex;
+  flex-direction: column;
   grid-area: lte-app-sidebar;
   min-width: var(--lte-sidebar-width);
   max-width: var(--lte-sidebar-width);
@@ -12963,6 +13038,7 @@ textarea.form-control-lg {
 
 .sidebar-brand {
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
   justify-content: center;
   height: 3.5rem;
@@ -13019,6 +13095,8 @@ textarea.form-control-lg {
 }
 
 .sidebar-wrapper {
+  flex: 1 1 auto;
+  min-height: 0;
   padding-top: 0.5rem;
   padding-right: 0.5rem;
   padding-bottom: 0.5rem;
@@ -13218,7 +13296,44 @@ textarea.form-control-lg {
 }
 
 .sidebar-search {
+  flex: 0 0 auto;
   padding: 0.5rem 1rem;
+  --lte-search-field-bg: rgba(var(--bs-emphasis-color-rgb), .06);
+  --lte-search-field-hover-bg: rgba(var(--bs-emphasis-color-rgb), .09);
+  --lte-search-field-focus-bg: rgba(var(--bs-emphasis-color-rgb), .1);
+  --lte-search-field-border-color: rgba(var(--bs-emphasis-color-rgb), .1);
+  --lte-search-field-focus-border-color: rgba(var(--bs-emphasis-color-rgb), .35);
+  --lte-search-field-focus-ring: 0 0 0 .2rem rgba(var(--bs-emphasis-color-rgb), .12);
+  --lte-search-field-color: var(--bs-body-color);
+  --lte-search-field-placeholder-color: var(--bs-secondary-color);
+  --lte-search-field-icon-color: var(--bs-secondary-color);
+}
+.sidebar-search .form-control {
+  padding: 0.3rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--lte-search-field-color);
+  background-color: var(--lte-search-field-bg);
+  border-color: var(--lte-search-field-border-color);
+  box-shadow: none;
+  border-radius: 50rem;
+  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sidebar-search .form-control {
+    transition: none;
+  }
+}
+.sidebar-search .form-control::placeholder {
+  color: var(--lte-search-field-placeholder-color);
+  opacity: 1;
+}
+.sidebar-search .form-control:hover {
+  background-color: var(--lte-search-field-hover-bg);
+}
+.sidebar-search .form-control:focus {
+  background-color: var(--lte-search-field-focus-bg);
+  border-color: var(--lte-search-field-focus-border-color);
+  box-shadow: var(--lte-search-field-focus-ring);
 }
 
 .logo-xs,
@@ -13371,7 +13486,6 @@ textarea.form-control-lg {
     max-height: 100vh;
   }
   .sidebar-expand-sm.layout-fixed .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -13403,7 +13517,6 @@ textarea.form-control-lg {
     margin-left: calc(var(--lte-sidebar-width) * -1);
   }
   .sidebar-expand-sm .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -13446,7 +13559,6 @@ textarea.form-control-lg {
     max-height: 100vh;
   }
   .sidebar-expand-md.layout-fixed .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -13478,7 +13590,6 @@ textarea.form-control-lg {
     margin-left: calc(var(--lte-sidebar-width) * -1);
   }
   .sidebar-expand-md .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -13521,7 +13632,6 @@ textarea.form-control-lg {
     max-height: 100vh;
   }
   .sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -13553,7 +13663,6 @@ textarea.form-control-lg {
     margin-left: calc(var(--lte-sidebar-width) * -1);
   }
   .sidebar-expand-lg .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -13596,7 +13705,6 @@ textarea.form-control-lg {
     max-height: 100vh;
   }
   .sidebar-expand-xl.layout-fixed .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -13628,7 +13736,6 @@ textarea.form-control-lg {
     margin-left: calc(var(--lte-sidebar-width) * -1);
   }
   .sidebar-expand-xl .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -13671,7 +13778,6 @@ textarea.form-control-lg {
     max-height: 100vh;
   }
   .sidebar-expand-xxl.layout-fixed .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -13703,7 +13809,6 @@ textarea.form-control-lg {
     margin-left: calc(var(--lte-sidebar-width) * -1);
   }
   .sidebar-expand-xxl .app-sidebar .sidebar-wrapper {
-    height: calc(100vh - (calc(3.5rem + 1px)));
     overflow-x: hidden;
     overflow-y: auto;
   }
@@ -13745,7 +13850,6 @@ textarea.form-control-lg {
   max-height: 100vh;
 }
 .sidebar-expand.layout-fixed .app-sidebar .sidebar-wrapper {
-  height: calc(100vh - (calc(3.5rem + 1px)));
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -13775,7 +13879,6 @@ textarea.form-control-lg {
   margin-left: calc(var(--lte-sidebar-width) * -1);
 }
 .sidebar-expand .app-sidebar .sidebar-wrapper {
-  height: calc(100vh - (calc(3.5rem + 1px)));
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -15646,9 +15749,9 @@ html.maximized-card {
   outline-offset: 2px;
 }
 .skip-link:hover {
-  color: var(--bs-white);
+  color: var(--bs-body-bg);
   text-decoration: none;
-  background: var(--bs-primary-emphasis);
+  background: var(--bs-primary-text-emphasis);
 }
 
 /* Enhanced Focus Indicators - WCAG 2.4.7: Focus Visible */
@@ -15871,14 +15974,25 @@ fieldset legend {
   .nav-link {
     color: #000 !important;
     background: transparent !important;
+  }
+  .btn {
     border: 1px solid #000 !important;
   }
   a[href^=http]::after {
     font-size: 0.8em;
     content: " (" attr(href) ")";
   }
-  /* Print Layout Fix - Ensure sidebar and main content are both visible */
-  .app-wrapper {
+  [data-lte-print=plain] a[href^=http]::after {
+    content: none;
+  }
+  [data-lte-print=plain] .btn {
+    border-color: transparent !important;
+  }
+  /* Print Layout Fix - Ensure sidebar and main content are both visible.
+     `:not(.d-print-none)` on the two rules that force `display`, so Bootstrap's
+     print display utilities keep working: these are defaults for the standard
+     layout, not something a page should have to fight to hide. */
+  .app-wrapper:not(.d-print-none) {
     display: grid !important;
     grid-template-rows: auto 1fr auto !important;
     grid-template-columns: auto 1fr !important;
@@ -15886,7 +16000,7 @@ fieldset legend {
   .sidebar-overlay {
     display: none !important;
   }
-  .app-sidebar {
+  .app-sidebar:not(.d-print-none) {
     position: static !important;
     display: block !important;
     min-width: 200px !important;

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@adminlte/react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "AdminLTE 4 React/Next.js component library",
   "license": "MIT",
   "type": "module",
-  "packageManager": "pnpm@10.33.2",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -39,18 +38,6 @@
     "bootstrap",
     "components"
   ],
-  "scripts": {
-    "build": "tsup && npm run copy-css && npm run fix-dist",
-    "copy-css": "mkdir -p dist/css && cp node_modules/admin-lte/dist/css/adminlte.css dist/css/",
-    "fix-dist": "node fix-dist.js",
-    "dev": "tsup --watch",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint src",
-    "demo": "pnpm --filter adminlte-react-demo dev",
-    "demo:build": "pnpm --filter adminlte-react-demo build",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
   "peerDependencies": {
     "apexcharts": ">=4.0.0",
     "flatpickr": ">=4.6.0",
@@ -96,7 +83,7 @@
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
     "@types/sortablejs": "^1.15.9",
-    "admin-lte": "^4.3.1",
+    "admin-lte": "^4.8.1",
     "apexcharts": "^6.8.0",
     "eslint": "^10.8.1",
     "eslint-plugin-react-hooks": "^7.1.1",
@@ -113,5 +100,17 @@
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.67.0",
     "vitest": "^4.1.10"
+  },
+  "scripts": {
+    "build": "tsup && npm run copy-css && npm run fix-dist",
+    "copy-css": "mkdir -p dist/css && cp node_modules/admin-lte/dist/css/adminlte.css dist/css/",
+    "fix-dist": "node fix-dist.js",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src",
+    "demo": "pnpm --filter adminlte-react-demo dev",
+    "demo:build": "pnpm --filter adminlte-react-demo build",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}