@pactor-app/ui 0.1.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/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Pactor Contributors
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,113 @@
1
+ # @pactor-app/ui
2
+
3
+ [Pactor](https://github.com/426-330/pactor) 的**唯一内置 UI kit**(shadcn 风格):内含 components / interaction / layout 三层(vendored shadcn/ui 组件源码——Base UI 原语(`@base-ui/react`,shadcn 官方默认原语层)+ cva + tailwind-merge + lucide-react;12 组件 props 契约类型、交互核心 `OverlayManager` / `createUiBridge` / `registerInteractionActions` / `UiBridge`、布局类型与 `resolveLayout` 均为本包自有),并提供 `shadcnUiKit` 预设对象与预建样式表。**这是 @pactor-app/app 的内置默认(也是唯一内置)UI kit**。主入口导出三层全部公开 API 与预设,另提供子路径入口:`@pactor-app/ui/components`(DSL 组件适配层)/ `/interaction` / `/layout` / `/ui`(vendored shadcn 原语组件——宿主自写 React UI 用,如槽位内容与自定义组件)。
4
+
5
+ ## 安装
6
+
7
+ ```bash
8
+ npm install @pactor-app/ui @pactor-app/app react react-dom react-router-dom
9
+ # 或
10
+ pnpm add @pactor-app/ui @pactor-app/app react react-dom react-router-dom
11
+ ```
12
+
13
+ `react >= 18`、`react-dom >= 18` 为 peer dependency。消费方**无需安装或配置 Tailwind**——样式在包构建期编译为预建 `styles.css` 随包发布。
14
+
15
+ ## 默认路径(推荐)
16
+
17
+ 不传任何 UI 选项时,`createPactorApplication` 的组件注册表、外壳布局与交互层全部使用本包实现;只需导入预建样式表:
18
+
19
+ ```ts
20
+ import { createPactorApplication } from '@pactor-app/app';
21
+ import '@pactor-app/ui/styles.css';
22
+
23
+ createPactorApplication({
24
+ appId: 'risk-admin',
25
+ api: { baseURL: '/api/runtime' },
26
+ }).mount('#root');
27
+ ```
28
+
29
+ ## 预设对象 shadcnUiKit
30
+
31
+ 显式表达或局部覆盖场景使用 `shadcnUiKit`,一次提供三个槽位:
32
+
33
+ | 槽位 | 值 |
34
+ | --- | --- |
35
+ | `componentRegistry` | `createShadcnComponentRegistry`(components 层) |
36
+ | `layoutRegistry` | `createShadcnLayoutRegistry`(layout 层) |
37
+ | `interactionKit` | `{ Provider: ShadcnInteractionProvider, OverlayHost: ShadcnOverlayHost }`(interaction 层) |
38
+
39
+ ```ts
40
+ import { shadcnUiKit } from '@pactor-app/ui';
41
+
42
+ createPactorApplication({
43
+ appId: 'risk-admin',
44
+ api: { baseURL: '/api/runtime' },
45
+ ui: shadcnUiKit, // 与不传 ui 的默认行为一致
46
+ });
47
+ ```
48
+
49
+ 每个槽位的取值优先级为:**显式细粒度选项 > `ui` 预设 > 内置 shadcn 默认**。例如只覆盖布局层、其余槽位保持 shadcn 预设:
50
+
51
+ ```ts
52
+ createPactorApplication({
53
+ appId: 'risk-admin',
54
+ ui: shadcnUiKit,
55
+ layoutRegistry: createMyLayoutRegistry, // 覆盖预设的布局槽位
56
+ });
57
+ ```
58
+
59
+ ## 样式与主题
60
+
61
+ 三层样式经 Tailwind v4 在**包构建期**预编译为单文件样式表(组件 class 为 Tailwind 工具类 + `data-slot` 结构钩子):
62
+
63
+ ```ts
64
+ import '@pactor-app/ui/styles.css';
65
+ ```
66
+
67
+ 主题契约为 shadcn 语义令牌:`--background` / `--foreground` / `--card` / `--popover` / `--primary` / `--secondary` / `--muted` / `--accent` / `--destructive` / `--border` / `--input` / `--ring` / `--radius`(另补充 `--success` / `--warning` / `--info` 供 Alert 四态),定义在 `:root`,组件工具类经 `var()` 运行时读取。换肤即覆盖变量;内置暗色皮肤经 `<html data-pactor-theme="dark">`(或任意容器)切换,与全仓约定一致。
68
+
69
+ **preflight 开启(shadcn 官方基线)**:样式表为完整 `tailwindcss`(含 preflight)+ `tw-animate-css` 动画层 + 官方 base layer 的预编译产物,与 [shadcn 官方主题脚手架](https://ui.shadcn.com/docs/theming)一致——导入 `styles.css` 即接受 shadcn 基线全局样式(box-sizing / 边距归零 / 元素字体继承等),宿主的自定义皮肤 CSS 须在其后导入。令牌组含 chart-1..5 与 sidebar 系列;radius 派生为基于 `--radius` 的乘法比例(0.6/0.8/1/1.4/1.8/2.2/2.6)。
70
+
71
+ ## 独立使用(不经 @pactor-app/app)
72
+
73
+ 以 `createShadcnComponentRegistry()` 创建组件注册表,与 @pactor-app/runtime 直接组合:
74
+
75
+ ```tsx
76
+ import { createPageRuntime, PageRuntimeView } from '@pactor-app/runtime';
77
+ import { createShadcnComponentRegistry } from '@pactor-app/ui/components';
78
+ import '@pactor-app/ui/styles.css';
79
+
80
+ const runtime = createPageRuntime(pageDsl, {
81
+ components: createShadcnComponentRegistry(),
82
+ });
83
+
84
+ await runtime.initialized;
85
+ <PageRuntimeView runtime={runtime} />;
86
+ ```
87
+
88
+ 布局层(`createShadcnLayoutRegistry` / `registerShadcnLayouts`)与交互层(`ShadcnInteractionProvider` / `ShadcnOverlayHost`)同样可独立组合;交互核心(`OverlayManager` / `createUiBridge` / `registerInteractionActions`)由本包 `@pactor-app/ui/interaction` 导出。
89
+
90
+ ## 聚合 re-export
91
+
92
+ 三层的公开 API 与预设均可直接从本包导入:
93
+
94
+ ```ts
95
+ import {
96
+ createShadcnComponentRegistry,
97
+ createShadcnLayoutRegistry,
98
+ ShadcnInteractionProvider,
99
+ ShadcnOverlayHost,
100
+ shadcnUiKit,
101
+ // ...以及三层其余全部导出
102
+ } from '@pactor-app/ui';
103
+ ```
104
+
105
+ 契约类型(props / layout / interaction)与交互核心均为本包自有定义(自 0.x 的 `unify-ui-shadcn` 变更起;旧 `pactor-ui-antd` / `pactor-ui-radix` 包已删除,等价符号的迁移对照见 docs 的 @pactor-app/ui 章节)。
106
+
107
+ ## 文档
108
+
109
+ 完整文档见 <https://github.com/426-330/pactor/tree/main/docs>(`pnpm docs:dev` 本地启动文档站)。
110
+
111
+ ## License
112
+
113
+ [MIT](../../LICENSE)
@@ -0,0 +1,95 @@
1
+ import {
2
+ cn
3
+ } from "./chunk-RQHJBTEU.js";
4
+
5
+ // src/ui/card.tsx
6
+ import { jsx } from "react/jsx-runtime";
7
+ function Card({ className, ...props }) {
8
+ return /* @__PURE__ */ jsx(
9
+ "div",
10
+ {
11
+ "data-slot": "card",
12
+ className: cn(
13
+ "flex flex-col gap-6 rounded-xl border border-border bg-card py-6 text-card-foreground shadow-sm",
14
+ className
15
+ ),
16
+ ...props
17
+ }
18
+ );
19
+ }
20
+ function CardHeader({ className, ...props }) {
21
+ return /* @__PURE__ */ jsx(
22
+ "div",
23
+ {
24
+ "data-slot": "card-header",
25
+ className: cn(
26
+ "grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
27
+ className
28
+ ),
29
+ ...props
30
+ }
31
+ );
32
+ }
33
+ function CardTitle({ className, ...props }) {
34
+ return /* @__PURE__ */ jsx(
35
+ "div",
36
+ {
37
+ "data-slot": "card-title",
38
+ className: cn("leading-none font-semibold", className),
39
+ ...props
40
+ }
41
+ );
42
+ }
43
+ function CardDescription({ className, ...props }) {
44
+ return /* @__PURE__ */ jsx(
45
+ "div",
46
+ {
47
+ "data-slot": "card-description",
48
+ className: cn("text-sm text-muted-foreground", className),
49
+ ...props
50
+ }
51
+ );
52
+ }
53
+ function CardAction({ className, ...props }) {
54
+ return /* @__PURE__ */ jsx(
55
+ "div",
56
+ {
57
+ "data-slot": "card-action",
58
+ className: cn(
59
+ "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
60
+ className
61
+ ),
62
+ ...props
63
+ }
64
+ );
65
+ }
66
+ function CardContent({ className, ...props }) {
67
+ return /* @__PURE__ */ jsx(
68
+ "div",
69
+ {
70
+ "data-slot": "card-content",
71
+ className: cn("px-6", className),
72
+ ...props
73
+ }
74
+ );
75
+ }
76
+ function CardFooter({ className, ...props }) {
77
+ return /* @__PURE__ */ jsx(
78
+ "div",
79
+ {
80
+ "data-slot": "card-footer",
81
+ className: cn("flex items-center px-6 [.border-t]:pt-6", className),
82
+ ...props
83
+ }
84
+ );
85
+ }
86
+
87
+ export {
88
+ Card,
89
+ CardHeader,
90
+ CardTitle,
91
+ CardDescription,
92
+ CardAction,
93
+ CardContent,
94
+ CardFooter
95
+ };