klun-ui 0.1.23 → 0.2.0

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 (16) hide show
  1. package/CHANGELOG.md +59 -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 +221 -79
  12. package/dist/templates/index.cjs +89 -89
  13. package/dist/templates/index.js +1 -1
  14. package/package.json +1 -1
  15. package/dist/chunk-T3IFNMYU.js.map +0 -1
  16. package/dist/chunk-UMR3IWCQ.cjs.map +0 -1
package/CHANGELOG.md CHANGED
@@ -5,6 +5,65 @@ 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.0] — 2026-09-16
9
+
10
+ ### Added
11
+ - **Global density — `data-density="compact"` / `<ConfigProvider density="compact">`.**
12
+ Every control now derives its height and inline padding from shared
13
+ `--klun-control-h-*` / `--klun-control-px-*` / `--klun-field-*` tokens, so one
14
+ switch shifts the whole UI down a tier — buttons and fields 40→36, tabs /
15
+ menu rows / pagination tighten, checkbox, radio and switch shrink. Works
16
+ document-wide (`<html data-density="compact">`), per subtree, and nestable
17
+ (a nested `density="default"` restores comfortable sizing). Covers Button
18
+ (all kinds), Input, Select, SelectMenu, Textarea, CompactSelect
19
+ (+ CompactSelectForInput), CounterInput, TimePicker, ButtonGroup, CopyButton,
20
+ Tabs, SegmentedControl, Pagination, Menu, Dropdown, Checkbox, Radio and
21
+ Switch. `Table` keeps its own `density` prop (`compact` / `comfortable` /
22
+ `spacious`) and is unchanged.
23
+ - **Finer button sizes.** `Button size="tiny"` (28px, icon-only 24px) joins the
24
+ scale for row actions and dense toolbars.
25
+ - **`size="xsmall"` fields.** `Input`, `Select` and `Textarea` gain a 32px tier
26
+ for compact forms.
27
+
28
+ ### Changed
29
+ - Control geometry is now token-driven (`--klun-control-h-*`, default values
30
+ unchanged), so a custom density can be built by overriding them, e.g.
31
+ `:root { --klun-control-h-lg: 38px; }`.
32
+ - Storybook gained a **Density** toolbar switch plus a *Getting Started /
33
+ Density* guide (default vs compact, the new sizes, a dense admin sample);
34
+ the README documents the density axis.
35
+
36
+ ## [0.1.24] — 2026-09-16
37
+
38
+ ### Added
39
+ - **`DrawerPlacement` is now part of the public API.** The
40
+ `"top" | "right" | "bottom" | "left"` type was exported from `Drawer.tsx` but
41
+ missing from the generated barrel, so `import type { DrawerPlacement } from
42
+ "klun-ui"` failed to resolve. It is now re-exported next to `DrawerProps`;
43
+ no runtime changes.
44
+ - **Storybook coverage is complete.** `Wizard`, `RangeSlider` and
45
+ `DateTimePicker` were the last public components without stories — each now
46
+ ships one (playground, controlled and disabled states, plus sizes /
47
+ orientation / inline variants).
48
+
49
+ ### Changed
50
+ - **README rebuilt against the real export surface.** The component table now
51
+ lists what actually ships (removed names that were never standalone
52
+ components — `IconButton`, `FancyButton`, `CompactButton`, `InlineTip`,
53
+ `PaymentIcon`, …; added `Timeline`, `Tree`, `List`, `Descriptions`,
54
+ `DiffViewer`, `Wizard`, …), the theming section documents every `data-mode`
55
+ value (`blue` is the default — `purple`, `orange`, `green`, `slate`, plus
56
+ the full `metronic` skin), the `data-radius` corner axis and
57
+ `ConfigProvider`, and the templates section covers all eight templates plus
58
+ the `klun-ui/charts` subpath.
59
+
60
+ ### Fixed
61
+ - **Developer scripts are cross-platform again.** `scripts/gen-barrel.mjs`
62
+ and `scripts/jsx-to-tsx.mjs` resolved the repo root from a hardcoded
63
+ absolute path, so they only ran on one machine; both now derive it from
64
+ their own location, like `scripts/build-css.mjs`. Regenerating the barrel is
65
+ what surfaced the missing `DrawerPlacement` export above.
66
+
8
67
  ## [0.1.23] — 2026-07-16
9
68
 
10
69
  ### 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`):
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 } 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: