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 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
- ## [Unreleased]
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 |