klun-ui 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -5,6 +5,56 @@ All notable changes to **klun-ui** are documented here. The format follows
 [Semantic Versioning](https://semver.org/) (pre-1.0: minor/patch bumps may carry
 small breaking changes).
 
+## [0.2.2] — 2026-09-16
+
+### Added
+- **Back-office business pages (Metronic examples, continued).** The templates
+  subpath now ships a complete admin set beside the dashboard & settings
+  examples — every screen is exported for standalone use and previewable in
+  Storybook under *Templates / Metronic*:
+  - **RBAC** — `RolesScreen` (role list + module × action permission matrix
+    with per-row select-all, dirty tracking and Reset/Save) and `UsersScreen`
+    (team list with role / status / 2FA, invite & edit in a modal, suspend and
+    remove behind the confirm dialog).
+  - **CRUD with two editor flows** — `ProductsScreen` (list + detail drawer +
+    delete confirm) supports quick add/edit in a **modal** and a route-style
+    **full-page wizard** (`ProductWizardPage`: basics → pricing & stock →
+    review, with per-step validation). With a router, mount the wizard at
+    `/products/new` and `/products/:id/edit`.
+  - `OrdersScreen` (selection + bulk actions, column filters, CSV export,
+    pagination), `CustomersScreen` (segments, lifetime spend, relative times)
+    and `ReportsScreen` (sales / traffic views with an area chart, donut and
+    breakdown tables).
+- **Table toolbar & pager are now density-aware**, and the remaining controls
+  joined the density axis: command-menu items, select-menu options,
+  horizontal-filter pills, popconfirm buttons, bulk-action bar, tree rows and
+  the image-viewer controls all follow `data-density`.
+
+### Changed
+- **The Metronic example pages are compact by default** (`data-density="compact"`
+  on the template roots) — buttons 40→36, 36→32, tiny 28→24, fields 40→36,
+  table toolbar / pager 32→28. Drop the attribute to get the comfortable scale
+  back.
+- Table toolbar buttons now use the small tier in the default scale as well
+  (36 → 32), matching the pager.
+
+## [0.2.1] — 2026-09-16
+
+### Added
+- **Metronic example pages — `MetronicDashboardTemplate` /
+  `MetronicSettingsTemplate`** (templates subpath). They port the Metronic
+  design-system examples onto klun-ui components inside the Metronic 9.0 skin
+  (`data-mode="metronic"`, drop the attribute to fall back to the default
+  theme):
+  - *Dashboard* — app shell (brand sidebar with badge + nested nav, search top
+    bar) around KPI tiles with inline sparklines, a revenue/orders bar chart
+    with pill tabs, a traffic-sources donut and a recent-orders table.
+  - *Settings* — breadcrumb + section nav with profile photo, personal
+    information form (inputs, selects, textarea), and notification toggles.
+  - The charts (`Sparkline` / `BarChart` / `DonutChart`) are dependency-free
+    inline SVG and fully token-driven, so both pages follow the skin and dark
+    mode automatically. Preview both in Storybook under *Templates / Metronic*.
+
 ## [0.2.0] — 2026-09-16
 
 ### Added

package/README.md

@@ -100,11 +100,11 @@ All components and their prop types are named exports; the `cx` classnames helpe
 
 ## Templates
 
-Full-screen example compositions are available from the `klun-ui/templates` subpath — copy-and-go starting points built entirely from klun-ui components (`DashboardTemplate`, `AIAssistantTemplate`, `AgentChatTemplate`, `CryptoTemplate`, `MarketingTemplate`, `CalendarTemplate`, `PricingTemplate`, `SettingsTemplate`):
+Full-screen example compositions are available from the `klun-ui/templates` subpath — copy-and-go starting points built entirely from klun-ui components (`DashboardTemplate`, `AIAssistantTemplate`, `AgentChatTemplate`, `CryptoTemplate`, `MarketingTemplate`, `CalendarTemplate`, `PricingTemplate`, `SettingsTemplate`, plus the Metronic examples — `MetronicDashboardTemplate` / `MetronicSettingsTemplate` and the back-office screens `OrdersScreen`, `ProductsScreen` (CRUD with modal + full-page wizard editors), `CustomersScreen`, `UsersScreen`, `RolesScreen` (RBAC), `ReportsScreen` — which render inside the Metronic 9.0 skin at compact density):
 
 ```tsx
 import "klun-ui/styles.css";
-import { DashboardTemplate, AIAssistantTemplate, AgentChatTemplate, CryptoTemplate, MarketingTemplate, CalendarTemplate, PricingTemplate, SettingsTemplate } from "klun-ui/templates";
+import { DashboardTemplate, AIAssistantTemplate, AgentChatTemplate, CryptoTemplate, MarketingTemplate, CalendarTemplate, PricingTemplate, SettingsTemplate, MetronicDashboardTemplate, MetronicSettingsTemplate } from "klun-ui/templates";
 
 export default function App() {
   return <DashboardTemplate />;

package/dist/styles.css

@@ -2239,8 +2239,8 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: var(--klun-control-h-sm, 32px);
+  height: var(--klun-control-h-sm, 32px);
   margin-left: 4px;
   border: none;
   cursor: pointer;
@@ -2259,7 +2259,7 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 32px;
+  height: var(--klun-control-h-sm, 32px);
   padding: 0 12px;
   border: none;
   cursor: pointer;
@@ -4318,8 +4318,8 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 36px;
-  padding: 0 12px;
+  height: var(--klun-control-h-sm, 32px);
+  padding: 0 var(--klun-control-px-sm, 12px);
   border: none;
   border-radius: var(--klun-radius-lg);
   background: var(--klun-bg-white-0);
@@ -4353,8 +4353,8 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 28px;
-  height: 28px;
+  width: var(--klun-control-h-xs, 28px);
+  height: var(--klun-control-h-xs, 28px);
   border: none;
   border-radius: var(--klun-radius-md);
   background: transparent;
@@ -4516,7 +4516,7 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 32px;
+  height: var(--klun-control-h-sm, 32px);
   padding: 0 8px 0 10px;
   border: none;
   border-radius: var(--klun-radius-md);
@@ -4570,8 +4570,8 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 32px;
-  height: 32px;
+  min-width: var(--klun-control-h-sm, 32px);
+  height: var(--klun-control-h-sm, 32px);
   padding: 0 6px;
   border: none;
   border-radius: var(--klun-radius-md);
@@ -4808,7 +4808,7 @@ body {
   display: flex;
   align-items: center;
   gap: 6px;
-  height: 32px;
+  height: var(--klun-control-h-sm, 32px);
   padding-left: var(--klun-tree-indent, 6px);
   padding-right: 8px;
   border-radius: var(--klun-radius-md);
@@ -8045,7 +8045,7 @@ body {
   align-items: center;
   gap: 10px;
   width: 100%;
-  min-height: 36px;
+  min-height: var(--klun-control-h-md, 36px);
   padding: 7px 10px;
   border: none;
   border-radius: var(--klun-radius-md);
@@ -8870,11 +8870,11 @@ body {
   display: none;
 }
 .klun-horizontal-filter--small .klun-horizontal-filter__item {
-  height: 30px;
+  height: var(--klun-control-h-xs, 28px);
   font: var(--klun-text-label-xs);
 }
 .klun-horizontal-filter--medium .klun-horizontal-filter__item {
-  height: 36px;
+  height: var(--klun-control-h-md, 36px);
   font: var(--klun-text-label-sm);
 }
 .klun-horizontal-filter__item {
@@ -9527,7 +9527,7 @@ body {
   align-items: center;
   gap: 12px;
   width: 100%;
-  height: 40px;
+  height: var(--klun-control-h-lg, 40px);
   padding: 0 10px;
   border: none;
   border-radius: var(--klun-radius-md);
@@ -10039,8 +10039,8 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: var(--klun-control-h-sm, 32px);
+  height: var(--klun-control-h-sm, 32px);
   border: none;
   border-radius: 8px;
   background: transparent;
@@ -10297,7 +10297,7 @@ body {
   margin-top: 12px;
 }
 .klun-popconfirm__cancel {
-  height: 32px;
+  height: var(--klun-control-h-sm, 32px);
   padding: 0 12px;
   border: none;
   border-radius: var(--klun-radius-lg);
@@ -10315,7 +10315,7 @@ body {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 32px;
+  height: var(--klun-control-h-sm, 32px);
   padding: 0 14px;
   border: none;
   border-radius: var(--klun-radius-lg);