klun-ui 0.1.23 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/CHANGELOG.md +109 -0
  2. package/README.md +41 -15
  3. package/dist/{chunk-UMR3IWCQ.cjs → chunk-T7O3RMWL.cjs} +501 -497
  4. package/dist/chunk-T7O3RMWL.cjs.map +1 -0
  5. package/dist/{chunk-T3IFNMYU.js → chunk-UJOMGMCV.js} +502 -498
  6. package/dist/chunk-UJOMGMCV.js.map +1 -0
  7. package/dist/index.cjs +158 -158
  8. package/dist/index.d.cts +217 -205
  9. package/dist/index.d.ts +217 -205
  10. package/dist/index.js +1 -1
  11. package/dist/styles.css +240 -98
  12. package/dist/templates/index.cjs +2583 -94
  13. package/dist/templates/index.cjs.map +1 -1
  14. package/dist/templates/index.d.cts +142 -1
  15. package/dist/templates/index.d.ts +142 -1
  16. package/dist/templates/index.js +2480 -13
  17. package/dist/templates/index.js.map +1 -1
  18. package/package.json +3 -2
  19. package/dist/chunk-T3IFNMYU.js.map +0 -1
  20. package/dist/chunk-UMR3IWCQ.cjs.map +0 -1
package/CHANGELOG.md CHANGED
@@ -5,6 +5,115 @@ All notable changes to **klun-ui** are documented here. The format follows
5
5
  [Semantic Versioning](https://semver.org/) (pre-1.0: minor/patch bumps may carry
6
6
  small breaking changes).
7
7
 
8
+ ## [0.2.2] — 2026-09-16
9
+
10
+ ### Added
11
+ - **Back-office business pages (Metronic examples, continued).** The templates
12
+ subpath now ships a complete admin set beside the dashboard & settings
13
+ examples — every screen is exported for standalone use and previewable in
14
+ Storybook under *Templates / Metronic*:
15
+ - **RBAC** — `RolesScreen` (role list + module × action permission matrix
16
+ with per-row select-all, dirty tracking and Reset/Save) and `UsersScreen`
17
+ (team list with role / status / 2FA, invite & edit in a modal, suspend and
18
+ remove behind the confirm dialog).
19
+ - **CRUD with two editor flows** — `ProductsScreen` (list + detail drawer +
20
+ delete confirm) supports quick add/edit in a **modal** and a route-style
21
+ **full-page wizard** (`ProductWizardPage`: basics → pricing & stock →
22
+ review, with per-step validation). With a router, mount the wizard at
23
+ `/products/new` and `/products/:id/edit`.
24
+ - `OrdersScreen` (selection + bulk actions, column filters, CSV export,
25
+ pagination), `CustomersScreen` (segments, lifetime spend, relative times)
26
+ and `ReportsScreen` (sales / traffic views with an area chart, donut and
27
+ breakdown tables).
28
+ - **Table toolbar & pager are now density-aware**, and the remaining controls
29
+ joined the density axis: command-menu items, select-menu options,
30
+ horizontal-filter pills, popconfirm buttons, bulk-action bar, tree rows and
31
+ the image-viewer controls all follow `data-density`.
32
+
33
+ ### Changed
34
+ - **The Metronic example pages are compact by default** (`data-density="compact"`
35
+ on the template roots) — buttons 40→36, 36→32, tiny 28→24, fields 40→36,
36
+ table toolbar / pager 32→28. Drop the attribute to get the comfortable scale
37
+ back.
38
+ - Table toolbar buttons now use the small tier in the default scale as well
39
+ (36 → 32), matching the pager.
40
+
41
+ ## [0.2.1] — 2026-09-16
42
+
43
+ ### Added
44
+ - **Metronic example pages — `MetronicDashboardTemplate` /
45
+ `MetronicSettingsTemplate`** (templates subpath). They port the Metronic
46
+ design-system examples onto klun-ui components inside the Metronic 9.0 skin
47
+ (`data-mode="metronic"`, drop the attribute to fall back to the default
48
+ theme):
49
+ - *Dashboard* — app shell (brand sidebar with badge + nested nav, search top
50
+ bar) around KPI tiles with inline sparklines, a revenue/orders bar chart
51
+ with pill tabs, a traffic-sources donut and a recent-orders table.
52
+ - *Settings* — breadcrumb + section nav with profile photo, personal
53
+ information form (inputs, selects, textarea), and notification toggles.
54
+ - The charts (`Sparkline` / `BarChart` / `DonutChart`) are dependency-free
55
+ inline SVG and fully token-driven, so both pages follow the skin and dark
56
+ mode automatically. Preview both in Storybook under *Templates / Metronic*.
57
+
58
+ ## [0.2.0] — 2026-09-16
59
+
60
+ ### Added
61
+ - **Global density — `data-density="compact"` / `<ConfigProvider density="compact">`.**
62
+ Every control now derives its height and inline padding from shared
63
+ `--klun-control-h-*` / `--klun-control-px-*` / `--klun-field-*` tokens, so one
64
+ switch shifts the whole UI down a tier — buttons and fields 40→36, tabs /
65
+ menu rows / pagination tighten, checkbox, radio and switch shrink. Works
66
+ document-wide (`<html data-density="compact">`), per subtree, and nestable
67
+ (a nested `density="default"` restores comfortable sizing). Covers Button
68
+ (all kinds), Input, Select, SelectMenu, Textarea, CompactSelect
69
+ (+ CompactSelectForInput), CounterInput, TimePicker, ButtonGroup, CopyButton,
70
+ Tabs, SegmentedControl, Pagination, Menu, Dropdown, Checkbox, Radio and
71
+ Switch. `Table` keeps its own `density` prop (`compact` / `comfortable` /
72
+ `spacious`) and is unchanged.
73
+ - **Finer button sizes.** `Button size="tiny"` (28px, icon-only 24px) joins the
74
+ scale for row actions and dense toolbars.
75
+ - **`size="xsmall"` fields.** `Input`, `Select` and `Textarea` gain a 32px tier
76
+ for compact forms.
77
+
78
+ ### Changed
79
+ - Control geometry is now token-driven (`--klun-control-h-*`, default values
80
+ unchanged), so a custom density can be built by overriding them, e.g.
81
+ `:root { --klun-control-h-lg: 38px; }`.
82
+ - Storybook gained a **Density** toolbar switch plus a *Getting Started /
83
+ Density* guide (default vs compact, the new sizes, a dense admin sample);
84
+ the README documents the density axis.
85
+
86
+ ## [0.1.24] — 2026-09-16
87
+
88
+ ### Added
89
+ - **`DrawerPlacement` is now part of the public API.** The
90
+ `"top" | "right" | "bottom" | "left"` type was exported from `Drawer.tsx` but
91
+ missing from the generated barrel, so `import type { DrawerPlacement } from
92
+ "klun-ui"` failed to resolve. It is now re-exported next to `DrawerProps`;
93
+ no runtime changes.
94
+ - **Storybook coverage is complete.** `Wizard`, `RangeSlider` and
95
+ `DateTimePicker` were the last public components without stories — each now
96
+ ships one (playground, controlled and disabled states, plus sizes /
97
+ orientation / inline variants).
98
+
99
+ ### Changed
100
+ - **README rebuilt against the real export surface.** The component table now
101
+ lists what actually ships (removed names that were never standalone
102
+ components — `IconButton`, `FancyButton`, `CompactButton`, `InlineTip`,
103
+ `PaymentIcon`, …; added `Timeline`, `Tree`, `List`, `Descriptions`,
104
+ `DiffViewer`, `Wizard`, …), the theming section documents every `data-mode`
105
+ value (`blue` is the default — `purple`, `orange`, `green`, `slate`, plus
106
+ the full `metronic` skin), the `data-radius` corner axis and
107
+ `ConfigProvider`, and the templates section covers all eight templates plus
108
+ the `klun-ui/charts` subpath.
109
+
110
+ ### Fixed
111
+ - **Developer scripts are cross-platform again.** `scripts/gen-barrel.mjs`
112
+ and `scripts/jsx-to-tsx.mjs` resolved the repo root from a hardcoded
113
+ absolute path, so they only ran on one machine; both now derive it from
114
+ their own location, like `scripts/build-css.mjs`. Regenerating the barrel is
115
+ what surfaced the missing `DrawerPlacement` export above.
116
+
8
117
  ## [0.1.23] — 2026-07-16
9
118
 
10
119
  ### Fixed
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # klun-ui
2
2
 
3
- A themeable **React + TypeScript** component library and design system — 84 components, light/dark modes, and five accent themes, all driven by a deep `--klun-*` CSS design-token layer.
3
+ A themeable **React + TypeScript** component library and design system — 120+ components, light/dark modes, and six accent themes (incl. the full Metronic 9.0 skin), all driven by a deep `--klun-*` CSS design-token layer.
4
4
 
5
5
  - **Standard architecture** — every component is a thin `forwardRef` wrapper that maps props to CSS classes (`className` and `style` pass through, `displayName` set). Styling lives in one stylesheet driven by design tokens, so real `:hover` / `:focus-visible` / `:disabled` states work and consumers can override with their own CSS.
6
6
  - **Dual ESM + CJS** with bundled type declarations.
@@ -50,49 +50,75 @@ Components accept icons as React nodes. The design system uses [Remix Icon](http
50
50
 
51
51
  ## Theming
52
52
 
53
- `data-theme` (light/dark) and `data-mode` (accent + neutral ramp) compose on any ancestor — usually `<html>`. Components reference only semantic tokens, so they re-theme automatically.
53
+ `data-theme` (light/dark), `data-mode` (accent + neutral ramp) and `data-radius` (global corner scale) compose on any ancestor — usually `<html>`. Components reference only semantic tokens, so they re-theme automatically.
54
54
 
55
55
  ```html
56
56
  <html data-theme="dark"> <!-- dark mode -->
57
- <html data-mode="purple"> <!-- purple accent (also: orange, green) -->
57
+ <html data-mode="purple"> <!-- purple accent (also: orange, green; blue is default) -->
58
58
  <html data-mode="slate"> <!-- cooler neutral ramp -->
59
- <html data-theme="dark" data-mode="green"><!-- compose both -->
59
+ <html data-mode="metronic"> <!-- full Metronic 9.0 skin (re-points the whole palette) -->
60
+ <html data-radius="sharp"> <!-- corner scale: default | sharp | square | rounded -->
61
+ <html data-theme="dark" data-mode="green" data-radius="rounded"><!-- compose freely -->
60
62
  ```
61
63
 
62
- You can also override tokens directly:
64
+ The same switches are available from React via `<ConfigProvider>` (`theme` / `accent` / `radius` / `size` / `locale` / `dir` / `density`), scoped to a subtree; `primaryColor` accepts any hex and derives the full shade/tint ramp. You can also override tokens directly:
63
65
 
64
66
  ```css
65
67
  :root { --klun-primary-base: #7d52f4; }
66
68
  ```
67
69
 
70
+ ### Density
71
+
72
+ `data-density="compact"` (or `<ConfigProvider density="compact">`) shifts every control one tier smaller — buttons and fields 40→36, tabs / menu rows / pagination tighten, checkbox, radio and switch shrink — for dense admin, toolbar and table surfaces. `size` props still compose on top of it.
73
+
74
+ ```html
75
+ <html data-density="compact">
76
+ <html data-theme="dark" data-mode="green" data-radius="rounded" data-density="compact">
77
+ ```
78
+
79
+ ```tsx
80
+ <ConfigProvider density="compact">…</ConfigProvider>
81
+ ```
82
+
83
+ For extra-fine control, the button family adds a `size="tiny"` tier (28px, icon-only 24px) and `Input` / `Select` / `Textarea` add `size="xsmall"` (32px). Every control size derives from the `--klun-control-h-*` / `--klun-control-px-*` / `--klun-field-*` tokens, so a custom density can be built by overriding those.
84
+
68
85
  ## Components
69
86
 
70
87
  | Group | Components |
71
88
  |---|---|
72
- | **Buttons** | Button, IconButton, CompactButton, LinkButton, ButtonGroup, FancyButton |
73
- | **Forms** | Input, Textarea, Select, Checkbox, Radio, Switch, Slider, Label, Hint, DigitInput, FileUpload, ImageUpload, ColorPicker, ColorDot, ColorSlider, DatePicker, DateRangePicker, TimePicker, RichEditorToolbar, CharacterCounter, CheckboxCard, CompactSelect, CompactSelectForInput, InlineInput, InlineSelect, SelectMenu, CounterInput, PasswordStrength |
74
- | **Data display** | Avatar, AvatarGroup, CompactAvatarGroup, Badge, Chip, Tag, ContentLabel, Tooltip, Table, Rating, Kbd, KeyIcon, PaymentIcon, StatCard, FileFormatIcon, ChatBubble, ChartLegend, ChartTooltip, IntegrationSwitch, PeriodRange |
75
- | **Feedback** | Alert, Banner, InlineTip, Toast, NotificationItem, ProgressBar, GaugeBar, CircularProgress, SegmentedProgress, Spinner, Skeleton, EmptyState |
76
- | **Navigation** | Tabs, SegmentedControl, Breadcrumb, Pagination, StepIndicator, Divider, ContentDivider, HorizontalFilter, PageHeader |
77
- | **Overlays** | Modal, Drawer, Dropdown, Popover, CommandMenu |
89
+ | **Buttons** | Button (kinds: default / fancy / compact / link), ButtonGroup, CopyButton |
90
+ | **Forms** | AutoComplete, Cascader, CharacterCounter, Checkbox, CheckboxGroup, CheckboxCard, ColorDot, ColorPicker, ColorSlider, CompactSelect, CompactSelectForInput, CounterInput, DatePicker, DateRangePicker, DateTimePicker, DigitInput, FileUpload, Form (+ FormItem, FormList, useForm), Hint, ImageUpload, InlineInput, InlineSelect, Input, Label, PasswordStrength, Radio, RadioCard, RangeSlider, RichEditorToolbar, Select, SelectMenu, Slider, Switch, Textarea, TimePicker |
91
+ | **Data display** | Avatar, AvatarGroup, Badge, BulkActionBar (+ BulkAction), Carousel, ChartLegend, ChartTooltip, Chip, CodeViewer (+ LogViewer), ContentLabel, CrossRefBadge, Descriptions, DiffViewer, Kbd, KeyIcon, List (+ ListItem), Markdown, Money, Rating, RelativeTime (+ ExpiryCountdown), StatCard, Statistic, StatusBadge, StatusDot (+ LiveDot), Table, Tag, Timeline, Tooltip, Tree |
92
+ | **Feedback** | Alert, Banner, CircularProgress, EmptyState, GaugeBar, Message (useMessage), Notification (useNotification), ProgressBar, Result, SegmentedProgress, Skeleton, Spinner, Toast, Toaster (+ toast) |
93
+ | **Navigation** | Breadcrumb, Divider, HorizontalFilter, Menu, PageHeader, Pagination, SegmentedControl, StepIndicator, Tabs, Wizard |
94
+ | **Overlays** | CommandMenu, Confirm, ContextMenu, Drawer, Dropdown, ImageViewer, Modal, Popconfirm, Popover |
78
95
  | **Disclosure** | Accordion, Collapse |
79
- | **Layout** | Card, ContentCard, FeatureCard |
96
+ | **Layout** | Card, Flex, Grid (Row / Col / useBreakpoint), Layout (+ Header / Content / Footer / Sider), Masonry, Space, Splitter (+ SplitterPanel) |
97
+ | **Config** | ConfigProvider (theme / accent / radius / size / locale / dir), 17 locale dictionaries, Format utils |
80
98
 
81
- All components and their prop types are named exports; a `cx` classnames helper is exported too.
99
+ All components and their prop types are named exports; the `cx` classnames helper is exported too.
82
100
 
83
101
  ## Templates
84
102
 
85
- Full-screen example compositions are available from the `klun-ui/templates` subpath — copy-and-go starting points built entirely from klun-ui components:
103
+ 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):
86
104
 
87
105
  ```tsx
88
106
  import "klun-ui/styles.css";
89
- import { DashboardTemplate, AIAssistantTemplate, AgentChatTemplate, CryptoTemplate, MarketingTemplate } from "klun-ui/templates";
107
+ import { DashboardTemplate, AIAssistantTemplate, AgentChatTemplate, CryptoTemplate, MarketingTemplate, CalendarTemplate, PricingTemplate, SettingsTemplate, MetronicDashboardTemplate, MetronicSettingsTemplate } from "klun-ui/templates";
90
108
 
91
109
  export default function App() {
92
110
  return <DashboardTemplate />;
93
111
  }
94
112
  ```
95
113
 
114
+ ## Charts
115
+
116
+ Chart components live on the `klun-ui/charts` subpath and use the optional `recharts` peer dependency — kept out of the main entry so the core bundle stays chart-free:
117
+
118
+ ```tsx
119
+ import { AreaChart, BarChart, Donut } from "klun-ui/charts";
120
+ ```
121
+
96
122
  ## TypeScript
97
123
 
98
124
  Types ship with the package. Every component exports its `*Props` interface: