klun-ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -5,6 +5,163 @@ 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.3.0] — 2026-09-16
+
+### Added
+- **Settings is now a full five-tab page** (`MetronicSettingsTemplate`), each tab
+  interactive and exportable on its own:
+  - **Profile** (`ProfileSection`) — photo upload with a local preview,
+    personal information with validation and dirty tracking, regional
+    preferences (language / timezone / date format / week start).
+  - **Account** (`AccountSection`) — password change with a live strength meter
+    and requirement checklist, two-factor enrolment (setup key + copy button +
+    `DigitInput` verification, recovery codes), active-session list with revoke
+    and “sign out others”, and a danger zone (deactivate + delete behind typed
+    confirmation).
+  - **Notifications** (`NotificationsSection`) — channel matrix (email / push /
+    SMS × event) with column-level select-all and indeterminate state, digest
+    cadence, quiet hours and a test send.
+  - **Billing** (`BillingSection`) — current plan with usage meters, plan
+    switching, payment methods (add / make default / remove), billing details and
+    an invoice history table.
+  - **API keys** (`ApiKeysSection`) — usage summary, create dialog with scope
+    picker, one-time secret reveal, rotate and revoke.
+- Exports: `ProfileSection`, `AccountSection`, `NotificationsSection`,
+  `BillingSection`, `ApiKeysSection`, `SETTINGS_NAV` and `SettingsSectionKey`
+  join the templates subpath.
+- Storybook: one story per settings tab under *Templates / Metronic*.
+- **Interactive demo shell** (`MetronicDashboardTemplate`) — the top bar is now
+  fully wired instead of decorative:
+  - a **⌘K / Ctrl-K command palette** (navigate + actions + recents), also
+    opened from the search box and the help menu;
+  - a **notification centre** with unread indicator, per-item read state and
+    “mark all as read”;
+  - an **appearance menu** that live-switches `data-theme` (light / dark),
+    `data-density` (comfortable / compact) and `data-mode` (metronic / blue /
+    purple / orange / green / slate) across the whole demo;
+  - an **account menu** (profile, billing, team & roles, sign out) and a working
+    “New order” shortcut that jumps to the orders page and opens its dialog.
+- **Orders is a full CRUD page** — create / edit in a modal with validation,
+  a details drawer with a status timeline, advance-status, refund, duplicate and
+  “email receipt” actions, delete behind `Confirm`, working bulk actions
+  (mark fulfilled / refund) and a search empty state.
+- `DashboardScreen` accepts `onViewAllOrders` — “View all” and recent-order rows
+  now jump to the orders page.
+- **Four more back-office screens** (Metronic examples):
+  - **`DepartmentsScreen`** — organisation tree on the Table’s tree mode:
+    expandable departments with manager, headcount and budget usage, full CRUD
+    (deleting a parent reparents its children) and a details drawer that links to
+    the team page.
+  - **`RoleTreeScreen`** — role hierarchy built on the `Tree` component: two
+    panes showing the selected role’s ancestors, the permissions it *owns*
+    versus the ones it *inherits*, its members, and a child-role comparison
+    table with clone / delete actions.
+  - **`TasksScreen`** — cron-style scheduled tasks: human-readable schedule,
+    last / next run, inline enable switch, “run now” with a simulated execution,
+    a run-history drawer and a create/edit dialog with schedule presets,
+    timezone, retries and notify-on-failure.
+  - **`AuditScreen`** — audit trail with search, action / severity / range
+    filters, severity and result badges, and a drawer exposing the request
+    metadata JSON (copyable) plus actor actions.
+- **User management is now a full module** — the members list gained a security
+  summary (2FA coverage, flags, pending invites), department / role / status /
+  security filters, row selection with bulk actions (activate, suspend, reset
+  2FA, assign role, move department) and a **user detail drawer** with four
+  tabs: profile, access (roles plus direct allow/deny overrides and the
+  resulting effective permission set), security (account state, 2FA, password
+  policy, per-device sessions) and activity (that member’s audit trail, with a
+  jump into the audit screen filtered by them).
+- **`DepartmentFilter`** — a cascading department picker built on `Dropdown`:
+  branches expand in place (the chevron only toggles, the row selects), every
+  row shows the member count of its whole branch, and choosing a parent filters
+  the list by that department *and* its sub-departments.
+- **Demo i18n** (`i18n.tsx`) — the shell now renders inside `ConfigProvider`, so
+  every component string follows the active locale pack (pagination, filters,
+  export, modal buttons, …), while nav labels, page headers and shell copy come
+  from a demo dictionary covering en-US, zh-CN, zh-TW and ja-JP. A language menu
+  in the top bar switches between all 17 shipped locales and flips the layout to
+  RTL (Arabic).
+- `PageHeader`, `useDemoText`, `demoTextFor`, `DEMO_TEXT`, `LOCALE_OPTIONS` and
+  `RTL_LOCALES` join the templates subpath.
+- **`Cascader` gained the props it was missing for real-world filters** —
+  `clearable` (an inline `×`), `renderOption` (decorate panel rows without
+  touching the trigger label) and `defaultValue` (uncontrolled usage). The panel
+  is now `role="menu"` with `role="menuitem"` / `aria-selected` rows, and the
+  component ships 9 unit tests.
+
+### Changed
+- **The settings page is full width by default** — it now fills the host content
+  area instead of being capped at 1000px. Pass `maxWidth={1000}` (or any CSS
+  length) to restore a centred column.
+- `MetronicSettingsTemplate` accepts `section` / `defaultSection` /
+  `onSectionChange` so the active tab can be controlled from the router.
+- The page header shows a dirty-state badge that flips between
+  “All changes saved” and “Unsaved changes”.
+- `MetronicTopBar` now takes props (appearance state, notifications and action
+  handlers) instead of rendering static buttons; `OrdersScreen` takes an optional
+  `createRequest` counter used by the shell’s “New order” button.
+- `MetronicSidebar` items take an optional `label` (resolved from the demo
+  dictionary), support multiple nested groups and hairline section breaks, and
+  the top bar gained `localeCode` / `onLocaleChange`.
+- `UsersScreen` accepts `initialDepartment` / `onOpenAudit` / `onOpenRoles` /
+  `onOpenDepartments` so the departments and audit screens can drill straight
+  into it, and `AuditScreen` accepts `initialActor` for the reverse jump.
+- The department filter in the demo is now the design-system **`Cascader`**
+  (multi-column drill-down with per-row member counts) instead of a hand-rolled
+  dropdown, and `Cascader` follows the density tokens — heights and padding come
+  from `--klun-control-h-*` / `--klun-field-px-*`, so compact density shrinks it
+  like every other field.
+
+## [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` (five interactive tabs: profile, account security, notifications, billing, API keys — also exported individually as `ProfileSection`, `AccountSection`, `NotificationsSection`, `BillingSection`, `ApiKeysSection`) 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/Chip-DiCYJmnv.d.cts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type ChipColor = "gray" | "blue" | "orange" | "red" | "green" | "purple" | "yellow" | "teal" | "sky" | "pink";
+interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+    color?: ChipColor;
+    selected?: boolean;
+    /** Show a leading color dot. */
+    dot?: boolean;
+    /** Show a dismiss (×) button; receives the click handler. */
+    onDismiss?: () => void;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+/** Klun UI Chip — compact, optionally-selectable color category pill. */
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { type ChipColor as C, Chip as a, type ChipProps as b };

package/dist/Chip-DiCYJmnv.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type ChipColor = "gray" | "blue" | "orange" | "red" | "green" | "purple" | "yellow" | "teal" | "sky" | "pink";
+interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+    color?: ChipColor;
+    selected?: boolean;
+    /** Show a leading color dot. */
+    dot?: boolean;
+    /** Show a dismiss (×) button; receives the click handler. */
+    onDismiss?: () => void;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+/** Klun UI Chip — compact, optionally-selectable color category pill. */
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { type ChipColor as C, Chip as a, type ChipProps as b };

package/dist/{chunk-UJOMGMCV.js → chunk-I4OHTBZQ.js}

@@ -6539,25 +6539,30 @@ var AutoComplete = forwardRef(
 AutoComplete.displayName = "AutoComplete";
 var Cascader = forwardRef(function Cascader2({
   options = [],
-  value = [],
+  value,
+  defaultValue,
   onChange,
   placeholder: placeholderProp,
   size: sizeProp,
   disabled = false,
   separator = " / ",
   changeOnSelect = false,
+  clearable = false,
+  renderOption,
   error = false,
   className,
   ...props
 }, ref) {
   const size = useSize(sizeProp);
-  const { cascader } = useLocale();
+  const { cascader, input: inputText } = useLocale();
   const placeholder = placeholderProp ?? cascader.placeholder;
+  const [inner, setInner] = useState(defaultValue ?? []);
+  const current = value ?? inner;
   const [open, setOpen] = useState(false);
-  const [active, setActive] = useState(value);
+  const [active, setActive] = useState(current);
   const rootRef = useRef(null);
   useEffect(() => {
-    setActive(value);
+    setActive(current);
   }, [open]);
   useEffect(() => {
     if (!open) return;
@@ -6586,7 +6591,7 @@ var Cascader = forwardRef(function Cascader2({
   }
   const labelPath = [];
   let lvl = options;
-  for (const key of value) {
+  for (const key of current) {
     const found = (lvl || []).find((o) => o.value === key);
     if (!found) break;
     labelPath.push(found.label);
@@ -6598,10 +6603,16 @@ var Cascader = forwardRef(function Cascader2({
     setActive(nextPath);
     const leaf = !opt.children || !opt.children.length;
     if (leaf || changeOnSelect) {
+      if (value === void 0) setInner(nextPath);
       onChange && onChange(nextPath);
       if (leaf) setOpen(false);
     }
   };
+  const clear = () => {
+    if (value === void 0) setInner([]);
+    setActive([]);
+    onChange && onChange([]);
+  };
   const setRefs = (node) => {
     rootRef.current = node;
     if (typeof ref === "function") ref(node);
@@ -6631,6 +6642,20 @@ var Cascader = forwardRef(function Cascader2({
                 i > 0 ? /* @__PURE__ */ jsx("span", { className: "klun-cascader__separator", children: separator }) : null,
                 lbl
               ] }, i)) : placeholder }),
+              clearable && labelPath.length && !disabled ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  role: "button",
+                  tabIndex: -1,
+                  "aria-label": inputText.clear,
+                  className: "klun-cascader__clear",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    clear();
+                  },
+                  children: /* @__PURE__ */ jsx("i", { className: "ri-close-circle-fill" })
+                }
+              ) : null,
               /* @__PURE__ */ jsx(
                 "svg",
                 {
@@ -6655,7 +6680,7 @@ var Cascader = forwardRef(function Cascader2({
             ]
           }
         ),
-        open ? /* @__PURE__ */ jsx("div", { className: "klun-cascader__panel", children: columns.map((col, ci) => /* @__PURE__ */ jsx(
+        open ? /* @__PURE__ */ jsx("div", { className: "klun-cascader__panel", role: "menu", children: columns.map((col, ci) => /* @__PURE__ */ jsx(
           "div",
           {
             className: cx(
@@ -6669,12 +6694,14 @@ var Cascader = forwardRef(function Cascader2({
                 "button",
                 {
                   type: "button",
+                  role: "menuitem",
                   className: "klun-cascader__option",
                   disabled: opt.disabled,
                   onClick: () => pick(ci, opt),
+                  "aria-selected": selected,
                   "data-selected": selected || void 0,
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: "klun-cascader__option-label", children: opt.label }),
+                    /* @__PURE__ */ jsx("span", { className: "klun-cascader__option-label", children: renderOption ? renderOption(opt, ci) : opt.label }),
                     hasChildren2 ? /* @__PURE__ */ jsx("i", { className: "ri-arrow-right-s-line klun-cascader__option-arrow" }) : selected ? /* @__PURE__ */ jsx("i", { className: "ri-check-line klun-cascader__option-check" }) : null
                   ]
                 },
@@ -11601,5 +11628,5 @@ var Popconfirm = forwardRef(function Popconfirm2({
 Popconfirm.displayName = "Popconfirm";
 
 export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, CrossRefBadge, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, Drawer, Dropdown, EmptyState, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, Notification, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, Result, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, StatCard, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
-//# sourceMappingURL=chunk-UJOMGMCV.js.map
-//# sourceMappingURL=chunk-UJOMGMCV.js.map
+//# sourceMappingURL=chunk-I4OHTBZQ.js.map
+//# sourceMappingURL=chunk-I4OHTBZQ.js.map