klun-ui 0.4.1 → 0.5.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.
- package/CHANGELOG.md +248 -1
- package/README.md +6 -6
- package/dist/{chunk-IETPQZRQ.cjs → chunk-ODVX2AVA.cjs} +3219 -568
- package/dist/chunk-ODVX2AVA.cjs.map +1 -0
- package/dist/{chunk-MBL2CDDG.js → chunk-WONPY7ZX.js} +3149 -570
- package/dist/chunk-WONPY7ZX.js.map +1 -0
- package/dist/index.cjs +448 -164
- package/dist/index.d.cts +915 -63
- package/dist/index.d.ts +915 -63
- package/dist/index.js +1 -1
- package/dist/styles.css +4615 -267
- package/dist/templates/index.cjs +13094 -941
- package/dist/templates/index.cjs.map +1 -1
- package/dist/templates/index.d.cts +1232 -2
- package/dist/templates/index.d.ts +1232 -2
- package/dist/templates/index.js +12041 -72
- package/dist/templates/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/chunk-IETPQZRQ.cjs.map +0 -1
- package/dist/chunk-MBL2CDDG.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,7 +5,254 @@ 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
|
-
## [
|
|
8
|
+
## [0.5.0] — 2026-09-29
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
- **`kk` theme** (`src/styles/tokens/kk-theme.css`, ships with `styles.css`) — the
|
|
12
|
+
admin-console skin, activated with `data-mode="kk"` or `<ConfigProvider accent="kk">`.
|
|
13
|
+
It carries a `--kk-*` palette (light + dark) that re-points the klun semantic
|
|
14
|
+
tokens (so Button / Input / Switch / Modal / Cascader… render in the console
|
|
15
|
+
style on their own) plus the shared console blocks — `.kk-page`, `.kk-aside`,
|
|
16
|
+
`.kk-node`, `.kk-toolbar`, `.kk-btn`, `.kk-table` (+ `--grid` form table),
|
|
17
|
+
`.kk-check`, `.kk-switch`, `.kk-pager`, `.kk-move`, form rows… — so a console
|
|
18
|
+
page ships markup instead of its own stylesheet. The SCUI console pages
|
|
19
|
+
(用户管理 / 菜单管理 / 字典管理) now carry **no page CSS at all** and the shell
|
|
20
|
+
sets `data-mode="kk"` on its root, so the klun components they embed
|
|
21
|
+
(`IconPicker`, `Modal`, `Cascader`, `Popconfirm`) pick up the console palette too.
|
|
22
|
+
The console **shell frame** moved in as well (`:where([data-mode="kk"]) .scui*`
|
|
23
|
+
blocks — 65px rail, 210px panel, 50px topbar, 35px tag bar, drawer, with the
|
|
24
|
+
`--scui-*` palette), so `ScuiShell` ships no CSS either. `:where()` keeps every
|
|
25
|
+
selector at the specificity it had inline, and the root itself is matched with
|
|
26
|
+
`.scui:where([data-mode="kk"])` (the attribute sits on that element, not an
|
|
27
|
+
ancestor — a plain descendant selector silently skips the root).
|
|
28
|
+
**kk is square (直角)**: every *corner* radius token collapses to 0 (only real
|
|
29
|
+
circles — avatars, switch knobs, round icon buttons — keep their 50%), and klun
|
|
30
|
+
components embedded in a console page are skinned to the same standard: 32px
|
|
31
|
+
control height, square corners, Element Plus colours (buttons: `primary` filled
|
|
32
|
+
blue, `neutral`/`stroke` white + `#dcdfe6` border; dialogs: 16px padding, no
|
|
33
|
+
divider above the buttons), and the Cascader fills its field, is 32px tall and
|
|
34
|
+
keeps its dropdown left-aligned with 108px columns, so even a two-column panel
|
|
35
|
+
stays inside the narrowest console dialog. The console's element resets sit in
|
|
36
|
+
`:where()` end-to-end (zero specificity) — at (0,2,0) they used to beat a
|
|
37
|
+
component's own rules, e.g. wiping the Cascader trigger's inner padding.
|
|
38
|
+
Row actions are one icon family (Element Plus `Edit` / `Plus` / `Delete` SVGs,
|
|
39
|
+
exported from the SCUI pages as `IconEdit` / `IconPlus` / `IconDelete` — no
|
|
40
|
+
Remix font icons mixed in) and carry no frame: `.kk-iconbtn` defaults to a
|
|
41
|
+
transparent border, so a row's 编辑/删除 reads as two bare icons, while the
|
|
42
|
+
`--plain` / `--primary` / `--danger` variants opt back in with their own border
|
|
43
|
+
(previously the base left the border colour unset, which painted it
|
|
44
|
+
`currentColor` — a dark box around every action).
|
|
45
|
+
One **6px scrollbar for every scrolling console block** (`--kk-scrollbar` /
|
|
46
|
+
`--kk-scrollbar-hover`, Element Plus' translucent grey: reads on light and
|
|
47
|
+
dark, rails keep their own light thumb) instead of the browser's fat default,
|
|
48
|
+
plus the two form controls a console page was missing: `.kk-textarea` and the
|
|
49
|
+
disabled state of `.kk-input` (`--kk-hover` fill, weak text).
|
|
50
|
+
- `ScuiDictPage` — SCUI's 配置 → 字典管理 page: 300px dictionary-type tree
|
|
51
|
+
(filter, hover 编辑/删除, 字典分类 button) + the item table (selection, drag
|
|
52
|
+
handle column, 名称 / 键值 / 是否有效 switch / 操作) with a pager. Both sides are
|
|
53
|
+
editable (dialogs via `Modal` + `Cascader`, `Popconfirm` for row delete) and
|
|
54
|
+
both sides reorder by drag (dnd-kit, siblings-only for the tree). It is the
|
|
55
|
+
first console page with **no page CSS at all** — everything comes from the `kk`
|
|
56
|
+
theme.
|
|
57
|
+
- `ScuiDeptPage` (`src/templates/scui/DeptPage.tsx`) — SCUI's 配置 → 部门管理
|
|
58
|
+
page, 左树右明细: a 300px organisation tree (keyword filter, expand/collapse,
|
|
59
|
+
sibling drag sorting, footer 新增子部门 / 删除 acting on the selection) and the
|
|
60
|
+
明细 pane on the right — 部门名称 / 部门编码 / 上级部门 (read-only, the hierarchy
|
|
61
|
+
comes from 新增子部门) / 负责人 / 联系电话 / 状态 switch / 备注 / 创建时间, saved with
|
|
62
|
+
保存 and reverted with 重置. Deleting a branch warns about its children first.
|
|
63
|
+
Ships `SCUI_DEPTS` (3 levels) and the same demo data shape as the other pages.
|
|
64
|
+
- `ScuiRolePage` (`src/templates/scui/RolePage.tsx`) — SCUI's 配置 → 角色管理
|
|
65
|
+
page, 左角色列表 + 右权限树: the 300px list holds 名称/标识 (keyword filter, hover
|
|
66
|
+
编辑, footer + 新增角色 / 🗑 删除 with a warning about the granted permissions),
|
|
67
|
+
the right pane is the selected role's 菜单权限树 built from the console's own
|
|
68
|
+
navigation (`SCUI_PERM_TREE`, 78 nodes, 3 levels, expanded by default).
|
|
69
|
+
**改动即保存** — a click writes into the role, no 保存 button. A node counts as
|
|
70
|
+
granted only when its whole branch is (`aria-checked="mixed"` + the new
|
|
71
|
+
`.kk-check.is-half` dash while partial), so clicking a half-granted group grants
|
|
72
|
+
or clears its entire branch; the toolbar carries 全选 / 清空 and the
|
|
73
|
+
`已授权 N 项` count.
|
|
74
|
+
- `ScuiWorkflowPage` (`src/templates/scui/WorkflowPage.tsx`) — SCUI's 组件 →
|
|
75
|
+
工作流设计器 page: a **1:1 port** of the live demo's `vab/workflow` canvas (the
|
|
76
|
+
vue-admin-beautiful "workflow-design" component). The original class names and
|
|
77
|
+
values live in `kk-theme.css` under `.sc-workflow-design` (12px content font,
|
|
78
|
+
220×72 cards, 4px radius, `0 2px 5px rgba(0,0,0,.1)`, 24px title bars in
|
|
79
|
+
`#576a95` 发起人 / `#ff943e` 审批人 / `#3296fa` 抄送人, 2px `#cacaca` connectors,
|
|
80
|
+
`#cccccc` branch rules with cover lines masking their ends, `54.5px 0` canvas
|
|
81
|
+
padding, 10px `#dbdcdc` end dot) — verified by measuring live and port with the
|
|
82
|
+
same selectors: every value matches (the last 1px on the condition card is line
|
|
83
|
+
box rounding). Interaction: every card is followed by a round + whose popup
|
|
84
|
+
(270px, right of the button) appends 审批节点 / 抄送节点 / 条件分支 — a column's +
|
|
85
|
+
sits between its condition card and the branch's steps, exactly like the live
|
|
86
|
+
one; ✕ deletes a node or a 条件 (hover); ▸/◂ swap the 优先级 columns. Clicking a
|
|
87
|
+
card opens its config drawer: steps edit 节点名称 / 负责人, 条件 opens the 600px
|
|
88
|
+
**条件设置** drawer — editable title (pencil), 条件关系 且/或, and the
|
|
89
|
+
描述 / 条件字段 / 运算符 / 值 / 移除 table with 暂无数据, + 增加条件 and 保存 / 取 消
|
|
90
|
+
(the drawer works on a copy, so 取消 really drops the edits; the else branch
|
|
91
|
+
keeps 其他条件进入此流程 and offers no rows). 导出 JSON still dumps the tree.
|
|
92
|
+
The 条件字段 list is **data-driven** (`WF_FIELDS`: label + kind + options) and the
|
|
93
|
+
rest of the row follows it — 请假天数 offers the six comparison operators and a
|
|
94
|
+
number input, 请假类型 the four text ones (`= != 包含 不包含`) and a dropdown of its
|
|
95
|
+
own options — so changing the field rewrites the operator list and the value
|
|
96
|
+
control, the way the live form does.
|
|
97
|
+
- 审批 / 抄送 nodes carry the live demo's **人员设置**: 审批人员类型 (指定成员 / 主管 /
|
|
98
|
+
角色 / 发起人自选 / 发起人自己 / 连续多级主管), a + 选择人员 button growing 人员 chips
|
|
99
|
+
(× removes one), ☐ 超时自动审批 and 多人审批时审批方式 (按顺序依次审批 / 会签 / 或签).
|
|
100
|
+
The type actually takes effect: 指定成员 opens the 640px 人员选择 dialog (部门导航
|
|
101
|
+
filters the member list, 请输入成员姓名 searches it, 已选 (N) collects the picks),
|
|
102
|
+
角色 opens the 460px 角色选择 dialog, and the kinds that need no picker (主管 /
|
|
103
|
+
发起人自选 / 发起人自己 / 连续多级主管) hide the row and write the type onto the card.
|
|
104
|
+
保存 joins the picked names into the card's second line.
|
|
105
|
+
- A **`Fixed`** note for the same page: an empty 条件 column renders a **single** + now
|
|
106
|
+
(its own, between the condition card and the — empty — step chain) instead of
|
|
107
|
+
stacking the chain's fallback + under it, so a fresh 条件 shows one unbroken 单线; the
|
|
108
|
+
**汇聚点** + the live demo puts under a 条件组 (inside `.branch-box-wrap`, after
|
|
109
|
+
`.branch-box`) is back too — both shapes were measured against the live page with the
|
|
110
|
+
same selectors (`branch-box-wrap` children = `branch-box, add-node-btn-box`).
|
|
111
|
+
- **工作流设计器拆成模块组** (`src/templates/scui/workflow/`): `model.ts` (节点/条件类型、
|
|
112
|
+
演示数据、`opsFor` / `summaryOf` / `scopeLabel` / `edit` 等纯函数), `WorkflowGlyphs.tsx`
|
|
113
|
+
(原版 SVG), `WfMemberPicker.tsx` 与 `WfScopePicker.tsx` (两张选择弹窗) — `WorkflowPage.tsx`
|
|
114
|
+
只留画布与两个抽屉(1386 → 919 行),并 `export *` 保持原来的导入路径与公开面不变。
|
|
115
|
+
- `src/templates/scui/tree.ts` — the tree helpers (path lookup, insert/update/
|
|
116
|
+
remove, filter, flatten, `collectIds`) shared by the 菜单管理 / 字典管理 / 部门管理
|
|
117
|
+
trees — a keyword filter passes `collectIds(...)` as the open list, so matches
|
|
118
|
+
inside collapsed branches show up instead of staying hidden (the 菜单管理 tree
|
|
119
|
+
now does the same).
|
|
120
|
+
- `IconPicker` (`src/components/forms/`) — generic icon picker: a 38×32 icon-only
|
|
121
|
+
trigger (like SCUI's 菜单图标 field) opening a 520px dialog with category tabs,
|
|
122
|
+
an auto-filling grid, live search across every group, a 清除 action and Esc/✕ to
|
|
123
|
+
bail out. Picking commits straight away — no OK button.
|
|
124
|
+
Ships `ICON_GROUPS` (100 Remix line icons in 5 categories); `groups` + `renderIcon`
|
|
125
|
+
swap in any other icon set. Built on `Modal` and the `--klun-*` tokens, so it
|
|
126
|
+
follows the host page's light/dark palette (`data-theme="dark"`); the SCUI shell
|
|
127
|
+
root now carries that attribute for the components it embeds.
|
|
128
|
+
- **SCUI shell template** (`src/templates/scui/` → `Templates/SCUI` in Storybook) —
|
|
129
|
+
a 1:1 port of the [SCUI](https://github.com/scui-plus/scui) admin layout:
|
|
130
|
+
65px dark icon rail (`#222B45`, SCUI's own SVG glyphs incl. the brand "S" mark),
|
|
131
|
+
210px secondary menu panel with collapse, 50px breadcrumb topbar with action
|
|
132
|
+
icons + notification badge + user chip, 35px multi-view tag bar (closable tabs,
|
|
133
|
+
the home tab stays), `#F6F8F9` content slot, and the floating 布局设置 drawer
|
|
134
|
+
(dark mode, accent presets, language). Dimensions/colours follow the live demo
|
|
135
|
+
instead of the klun-ui theme.
|
|
136
|
+
- SCUI's **real menu tree** (`menuData.ts`, generated from the live demo): nested
|
|
137
|
+
sub-menus (组件/模板/其他), SCUI's own icon paths (30, deduplicated) and the
|
|
138
|
+
entries it leaves bare — so the panel matches the original item for item. The
|
|
139
|
+
submenu arrow is Element Plus' `ArrowDown` SVG at 12px (rotating 180° while
|
|
140
|
+
open), exactly what the live demo renders — it used to be a 24×18 Remix font
|
|
141
|
+
chevron pointing right.
|
|
142
|
+
- `ScuiUsersPage` — SCUI's 配置 → 用户管理 CRUD page: department tree with filter,
|
|
143
|
+
selection toolbar (新增 / 删除 / 分配角色 / 密码重置 + search), user table
|
|
144
|
+
(ID / 头像 / 登录账号 / 姓名 / 所属角色 / 加入时间 / 操作) and the pager. The shell
|
|
145
|
+
gained `initialView` + `renderView` so tabs can mount real pages.
|
|
146
|
+
- Selected-state wash in the SCUI shell: the current secondary-menu item and the
|
|
147
|
+
current department-tree node both get the light-blue highlight (`#ECF5FF`,
|
|
148
|
+
dark mode uses the themed hover colour).
|
|
149
|
+
- `ScuiMenuPage` — SCUI's 配置 → 菜单管理 page: the 300px menu tree (checkbox,
|
|
150
|
+
18px indents, **hovering a row reveals its 新增 button**), the 菜单表单
|
|
151
|
+
(显示名称 / 上级菜单 / 类型 / 别名 / 菜单图标 / 路由地址 / 重定向 / 菜单高亮 /
|
|
152
|
+
视图 / 颜色 / 是否隐藏 / 整页路由 / 标签) and the 接口权限 table — its 50px first
|
|
153
|
+
column is centred (same centre line as the header's +) and shows the row number,
|
|
154
|
+
which swaps in place for a plain-danger circle delete button while the row is
|
|
155
|
+
hovered or focused. Dark mode covered like the other SCUI pages.
|
|
156
|
+
- The 菜单管理 tree is **drag-to-reorder** (dnd-kit, same engine as `Table` /
|
|
157
|
+
`Kanban`): grab a row to sort it among its siblings — pointer or keyboard
|
|
158
|
+
(space / arrows). Nodes carry stable ids, so the open/checked/selected state
|
|
159
|
+
survives reorders, and a drag toward another branch never reparents.
|
|
160
|
+
- Dark mode follows the live demo's Element Plus dark palette — rail `#141414`,
|
|
161
|
+
panel/topbar/tag bar `#1D1E1F` with `#414243` borders, content `#141414`,
|
|
162
|
+
menu/breadcrumb text `#D0D0D0`/`#CFD3DA`, hover wash `#0C1F32`, table borders
|
|
163
|
+
`#363637` — and the ported 用户管理 page carries its own dark overrides.
|
|
164
|
+
- **klun-web console, ported page by page** (`src/templates/scui/` → story
|
|
165
|
+
`Templates/SCUI → Console — 全站(所有页面)`). The whole admin console is rebuilt
|
|
166
|
+
in the SCUI language on **one entry point**: `KLUN_PAGES` maps a view key
|
|
167
|
+
(`<group>/<label>`) to a page element and `KlunConsoleShell` renders it through
|
|
168
|
+
the SCUI shell with klun-web's own 7-group menu, so a new page is one line in
|
|
169
|
+
the registry — the shell, the menu and the stylesheet stay untouched.
|
|
170
|
+
Each page is self-contained demo data shaped like klun-web's `lib/api/klun.ts` types —
|
|
171
|
+
CRUD pages really mutate (注册/同步集群, 封锁节点, 伸缩副本, 添加解析, 签发证书…),
|
|
172
|
+
read-only pages (网络/存储/配置) show live-looking state.
|
|
173
|
+
- **The port now covers every klun-web menu entry** — 31/31 entries plus klun-ui's own
|
|
174
|
+
字典管理 · 工作流设计器: 控制台/概览 · 收件箱, 运维/资产管理 · 审计日志 · 会话审计,
|
|
175
|
+
服务与监控/应用清单 · 域名探活 · 接口监控 · 告警 · 告警规则, 容器管理/集群 · 节点 ·
|
|
176
|
+
命名空间 · 工作负载 · 网络 · 存储 · 配置 · 诊断, 云服务/Cloudflare 账号 · DNS 解析 ·
|
|
177
|
+
站点设置 · 证书 · Google 账号 · 云盘, 团队/用户管理 · 角色管理 · 部门管理,
|
|
178
|
+
系统/版本发布 · 配置中心 · 设置 · 菜单管理 · 字典管理 · 工作流设计器.
|
|
179
|
+
The system pages keep their real behaviour: 版本发布 knows the "latest" rule (highest
|
|
180
|
+
`active` version per app), warns before disabling/revoking and shows a version's
|
|
181
|
+
artifacts with their sha256; 配置中心 never echoes secret values (it shows
|
|
182
|
+
「已配置(不回显)」 and treats an empty secret value as "keep the stored one"); 设置
|
|
183
|
+
renders appearance changes on a real preview element (`data-theme` / `data-density` /
|
|
184
|
+
`data-radius` on the preview card) and walks through MFA enrolment, recovery-code
|
|
185
|
+
rotation and per-device session revocation; 收件箱 marks a message read when its detail
|
|
186
|
+
opens, and can send to everyone or to picked members.
|
|
187
|
+
- The remaining non-menu klun-web screens (登录 / 403 / 404 / CLI 授权 / 终端) are not
|
|
188
|
+
ported — they sit outside the console's navigation.
|
|
189
|
+
- **Shared console pieces** instead of per-page styling: `ScuiPage` (the five-slot
|
|
190
|
+
skeleton — head / stat cards / toolbar / body / pager, each slot opt-in) with
|
|
191
|
+
`ScuiStat` + `ScuiPager`, `containerModel.tsx` (the cross-cluster dataset, a
|
|
192
|
+
`ScuiScopeBar` cluster+namespace scope bar with `hideNamespace` for cluster-scoped
|
|
193
|
+
resources, and `ScuiFailedBanner` for "some clusters could not be read" with the
|
|
194
|
+
real error text), `cloudModel.tsx` (Cloudflare + Google dataset, a `ScuiCloudBar`
|
|
195
|
+
account/zone scope bar, `formatSize`, `driveIcon`) and `consoleFormat.ts`. New `kk`
|
|
196
|
+
blocks back them: `.kk-scope(--field/--refresh/--hint)`, `.kk-banner`, `.kk-summary`,
|
|
197
|
+
`.kk-message`, `.kk-textarea--mono`, `.kk-tip--block`.
|
|
198
|
+
- The Cloudflare / Google flows keep their real shape: the account pages open the
|
|
199
|
+
authorization window and only write the account back once it returns; 站点设置 renders
|
|
200
|
+
the editor that matches each setting's value type (switch / number / enum / string /
|
|
201
|
+
read-only JSON) and tracks unsaved drafts; 证书 issues Origin CA certificates whose
|
|
202
|
+
private key is shown exactly once; 云盘 keeps a breadcrumb path stack and can search
|
|
203
|
+
across folders.
|
|
204
|
+
- Two console fixes found by porting: `.kk-node-do` (the row action group) is
|
|
205
|
+
hidden until its `.kk-node` row is hovered — right for tree rows, invisible for
|
|
206
|
+
table rows, so `.kk-table .kk-node-do` is now always shown; and Remix font icons
|
|
207
|
+
inherit the row's `line-height` (56px menu rows) which draws the glyph below the
|
|
208
|
+
baseline — every `i.ri-*` inside `[data-mode="kk"]` is normalised to
|
|
209
|
+
`line-height: 1` + inline-flex centring.
|
|
210
|
+
- **`Sidebar`** — two-level navigation ported 1:1 from the “Minimalist sidebar”
|
|
211
|
+
Figma Make community file: a 64px icon rail (brand slot, nav items, foot items,
|
|
212
|
+
avatar) beside a 320px detail panel that collapses to the rail width with the
|
|
213
|
+
original soft-spring animation (500ms, `cubic-bezier(0.25, 1.1, 0.4, 1)`;
|
|
214
|
+
override `--klun-sidebar-ease` for the stock klun curve). Data-driven
|
|
215
|
+
(`navItems` / `footNavItems` / `sections`, icons as `ReactNode`), controlled or
|
|
216
|
+
uncontrolled rail selection and collapse, expandable rows, optional search.
|
|
217
|
+
Geometry matches the source (40px rows, 16px shell / 8px row radii, 36px nested
|
|
218
|
+
indent); colours ride the klun semantic tokens, so it re-themes in light/dark —
|
|
219
|
+
dark lands on the original near-black surfaces. The story ships the full
|
|
220
|
+
eight-section demo data set from the community file.
|
|
221
|
+
- **Multica UI migration** — ten components ported from the Multica UI
|
|
222
|
+
(`packages/ui`) into the klun class + token architecture, dependency-free:
|
|
223
|
+
`ActorAvatar` (member / agent / squad / system + `emoji:` avatars),
|
|
224
|
+
`ReactionBar` (+ `groupReactions`), `EmojiPicker` / `QuickEmojiPicker` (built-in
|
|
225
|
+
trimmed emoji-mart dataset, grouped and searchable), `ShimmerText`,
|
|
226
|
+
`UnicodeSpinner` (18 braille/unicode frame sets), `BorderBeam`,
|
|
227
|
+
`NumberFlow` (+ currency / compact / capped variants — a rolling-digit
|
|
228
|
+
implementation, no `@number-flow` dependency), `DotSphere` (canvas),
|
|
229
|
+
`ListGrid` (subgrid list with sortable headers) and `CapabilityBanner`.
|
|
230
|
+
Colours ride the klun tokens (light/dark); geometry, copy and animations
|
|
231
|
+
follow the originals (border beam tinted to the theme accent).
|
|
232
|
+
- **Multica UI migration, part two** — six more components ported from the Multica
|
|
233
|
+
UI, again dependency-free: `Toggle` (pressed button, default / outline, three
|
|
234
|
+
sizes), `HoverCard` (hover/focus popover with open+close delays, four sides,
|
|
235
|
+
controlled or not, click-through inside the panel), `InputGroup` (+ `Input` /
|
|
236
|
+
`Addon` / `Text` / `Button` — inline or block affixes, click-to-focus, four
|
|
237
|
+
button sizes), `Field` (+ `FieldGroup` / `FieldContent` / `FieldLabel` /
|
|
238
|
+
`FieldTitle` / `FieldDescription` / `FieldError` — vertical or horizontal
|
|
239
|
+
forms, `invalid` sets `role="alert"` errors in red), `Item` (+ `ItemGroup` /
|
|
240
|
+
`ItemSeparator` / `ItemMedia` / `ItemContent` / `ItemTitle` / `ItemDescription` /
|
|
241
|
+
`ItemActions` / `ItemHeader` / `ItemFooter` — list rows with icon or image
|
|
242
|
+
media) and `Stepper` (+ `StepperNav` / `StepperItem` / `StepperTrigger` /
|
|
243
|
+
`StepperIndicator` / `StepperSeparator` / `StepperTitle` / `StepperDescription` /
|
|
244
|
+
`StepperPanel` / `StepperContent` — tab-style steps, horizontal or vertical,
|
|
245
|
+
completed / loading states, arrow-key navigation).
|
|
246
|
+
- **Multica UI migration, part three — from `packages/views`** — the product
|
|
247
|
+
layer of the Multica repo was swept for library-grade pieces; two made the
|
|
248
|
+
cut (the rest are page logic tied to their router / data layer):
|
|
249
|
+
`ActivityHeatmap` (zero-dependency GitHub-style calendar heatmap on a plain
|
|
250
|
+
`date -> value` map — quartile colour ramp riding the theme accent, month /
|
|
251
|
+
weekday labels via `Intl`, plus pure `buildHeatmapGrid()` / `summarizeHeatmap()`
|
|
252
|
+
helpers for custom insights panels) and `NavigationProgress` (2px
|
|
253
|
+
indeterminate top progress bar for route transitions — `active`-driven,
|
|
254
|
+
`position: fixed | absolute`, sweep mounted only while visible,
|
|
255
|
+
`prefers-reduced-motion` aware).
|
|
9
256
|
|
|
10
257
|
## [0.4.1] — 2026-09-17
|
|
11
258
|
|
package/README.md
CHANGED
|
@@ -96,12 +96,12 @@ For extra-fine control, the button family adds a `size="tiny"` tier (28px, icon-
|
|
|
96
96
|
|
|
97
97
|
| Group | Components |
|
|
98
98
|
|---|---|
|
|
99
|
-
| **Buttons** | Button (kinds: default / fancy / compact / link), ButtonGroup, CopyButton |
|
|
100
|
-
| **Forms** | AutoComplete, Cascader, CharacterCounter, Checkbox, CheckboxGroup, CheckboxCard, ColorDot, ColorPicker, ColorSlider, CompactSelect, CompactSelectForInput, CounterInput, CronEditor, DatePicker, DateRangePicker, DateTimePicker, DigitInput, FileUpload, Form (+ FormItem, FormList, useForm), Hint, ImageUpload, InlineInput, InlineSelect, Input, Label, PasswordStrength, Radio, RadioCard, RangeSlider, RichEditor, RichEditorToolbar, Select, SelectMenu, Slider, Switch, Textarea, TimePicker |
|
|
101
|
-
| **Data display** | Avatar, AvatarGroup, Badge, BulkActionBar (+ BulkAction), Carousel, ChartLegend, ChartTooltip, Chip, CodeViewer (+ LogViewer), ContentLabel, CrossRefBadge, Descriptions, DiffViewer, Kbd, Kanban, KeyIcon, List (+ ListItem), Markdown, Money, Rating, RelativeTime (+ ExpiryCountdown), StatCard, Statistic, StatusBadge, StatusDot (+ LiveDot), Table, Tag, Timeline, Tooltip, Tree, VirtualTable |
|
|
102
|
-
| **Feedback** | Alert, Banner, CircularProgress, EmptyState, GaugeBar, Message (useMessage), Notification (useNotification), ProgressBar, Result, SegmentedProgress, Skeleton, Spinner, Toast, Toaster (+ toast) |
|
|
103
|
-
| **Navigation** | Breadcrumb, Divider, HorizontalFilter, Menu, PageHeader, Pagination, SegmentedControl, StepIndicator, Tabs, Wizard |
|
|
104
|
-
| **Overlays** | CommandMenu, Confirm, ContextMenu, Drawer, Dropdown, ImageViewer, Modal, Popconfirm, Popover |
|
|
99
|
+
| **Buttons** | Button (kinds: default / fancy / compact / link), ButtonGroup, CopyButton, Toggle |
|
|
100
|
+
| **Forms** | AutoComplete, Cascader, CharacterCounter, Checkbox, CheckboxGroup, CheckboxCard, ColorDot, ColorPicker, ColorSlider, CompactSelect, CompactSelectForInput, CounterInput, CronEditor, DatePicker, DateRangePicker, DateTimePicker, DigitInput, EmojiPicker, Field (+ FieldGroup / FieldContent / FieldLabel / FieldTitle / FieldDescription / FieldError), FileUpload, Form (+ FormItem, FormList, useForm), Hint, ImageUpload, InlineInput, InlineSelect, Input, InputGroup (+ Input / Addon / Text / Button), Label, PasswordStrength, QuickEmojiPicker, Radio, RadioCard, RangeSlider, RichEditor, RichEditorToolbar, Select, SelectMenu, Slider, Switch, Textarea, TimePicker |
|
|
101
|
+
| **Data display** | ActivityHeatmap, ActorAvatar, Avatar, AvatarGroup, Badge, BulkActionBar (+ BulkAction), Carousel, ChartLegend, ChartTooltip, Chip, CodeViewer (+ LogViewer), ContentLabel, CrossRefBadge, Descriptions, DiffViewer, Item (+ ItemGroup / ItemSeparator / ItemMedia / ItemContent / ItemTitle / ItemDescription / ItemActions), Kbd, Kanban, KeyIcon, List (+ ListItem), ListGrid, Markdown, Money, NumberFlow (+ Currency / Compact / Capped), Rating, ReactionBar, RelativeTime (+ ExpiryCountdown), ShimmerText, StatCard, Statistic, StatusBadge, StatusDot (+ LiveDot), Table, Tag, Timeline, Tooltip, Tree, VirtualTable |
|
|
102
|
+
| **Feedback** | Alert, Banner, BorderBeam, CapabilityBanner, CircularProgress, DotSphere, EmptyState, GaugeBar, Message (useMessage), NavigationProgress, Notification (useNotification), ProgressBar, Result, SegmentedProgress, Skeleton, Spinner, Toast, Toaster (+ toast), UnicodeSpinner |
|
|
103
|
+
| **Navigation** | Breadcrumb, Divider, HorizontalFilter, Menu, PageHeader, Pagination, SegmentedControl, Sidebar, StepIndicator, Stepper (+ StepperNav / StepperItem / StepperTrigger / StepperIndicator / StepperSeparator / StepperPanel / StepperContent), Tabs, Wizard |
|
|
104
|
+
| **Overlays** | CommandMenu, Confirm, ContextMenu, Drawer, Dropdown, HoverCard (+ HoverCardTrigger / HoverCardContent), ImageViewer, Modal, Popconfirm, Popover |
|
|
105
105
|
| **Disclosure** | Accordion, Collapse |
|
|
106
106
|
| **Layout** | Card, Flex, Grid (Row / Col / useBreakpoint), Layout (+ Header / Content / Footer / Sider), Masonry, Space, Splitter (+ SplitterPanel) |
|
|
107
107
|
| **Config** | ConfigProvider (theme / accent / radius / size / locale / dir), 17 locale dictionaries, Format utils |
|