@ptengine/design-components 0.3.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 (197) hide show
  1. package/README.md +309 -0
  2. package/components.json +21 -0
  3. package/dist/components/ui/accordion.d.ts +8 -0
  4. package/dist/components/ui/accordion.d.ts.map +1 -0
  5. package/dist/components/ui/alert-dialog.d.ts +21 -0
  6. package/dist/components/ui/alert-dialog.d.ts.map +1 -0
  7. package/dist/components/ui/alert.d.ts +9 -0
  8. package/dist/components/ui/alert.d.ts.map +1 -0
  9. package/dist/components/ui/aspect-ratio.d.ts +4 -0
  10. package/dist/components/ui/aspect-ratio.d.ts.map +1 -0
  11. package/dist/components/ui/attachment.d.ts +26 -0
  12. package/dist/components/ui/attachment.d.ts.map +1 -0
  13. package/dist/components/ui/avatar.d.ts +10 -0
  14. package/dist/components/ui/avatar.d.ts.map +1 -0
  15. package/dist/components/ui/badge.d.ts +10 -0
  16. package/dist/components/ui/badge.d.ts.map +1 -0
  17. package/dist/components/ui/breadcrumb.d.ts +22 -0
  18. package/dist/components/ui/breadcrumb.d.ts.map +1 -0
  19. package/dist/components/ui/bubble.d.ts +19 -0
  20. package/dist/components/ui/bubble.d.ts.map +1 -0
  21. package/dist/components/ui/button-group.d.ts +13 -0
  22. package/dist/components/ui/button-group.d.ts.map +1 -0
  23. package/dist/components/ui/button.d.ts +13 -0
  24. package/dist/components/ui/button.d.ts.map +1 -0
  25. package/dist/components/ui/calendar.d.ts +9 -0
  26. package/dist/components/ui/calendar.d.ts.map +1 -0
  27. package/dist/components/ui/card.d.ts +9 -0
  28. package/dist/components/ui/card.d.ts.map +1 -0
  29. package/dist/components/ui/carousel.d.ts +23 -0
  30. package/dist/components/ui/carousel.d.ts.map +1 -0
  31. package/dist/components/ui/chart.d.ts +63 -0
  32. package/dist/components/ui/chart.d.ts.map +1 -0
  33. package/dist/components/ui/checkbox.d.ts +5 -0
  34. package/dist/components/ui/checkbox.d.ts.map +1 -0
  35. package/dist/components/ui/collapsible.d.ts +6 -0
  36. package/dist/components/ui/collapsible.d.ts.map +1 -0
  37. package/dist/components/ui/command.d.ts +81 -0
  38. package/dist/components/ui/command.d.ts.map +1 -0
  39. package/dist/components/ui/context-menu.d.ts +28 -0
  40. package/dist/components/ui/context-menu.d.ts.map +1 -0
  41. package/dist/components/ui/dialog.d.ts +22 -0
  42. package/dist/components/ui/dialog.d.ts.map +1 -0
  43. package/dist/components/ui/direction.d.ts +8 -0
  44. package/dist/components/ui/direction.d.ts.map +1 -0
  45. package/dist/components/ui/drawer.d.ts +23 -0
  46. package/dist/components/ui/drawer.d.ts.map +1 -0
  47. package/dist/components/ui/dropdown-menu.d.ts +28 -0
  48. package/dist/components/ui/dropdown-menu.d.ts.map +1 -0
  49. package/dist/components/ui/empty.d.ts +13 -0
  50. package/dist/components/ui/empty.d.ts.map +1 -0
  51. package/dist/components/ui/field.d.ts +25 -0
  52. package/dist/components/ui/field.d.ts.map +1 -0
  53. package/dist/components/ui/hover-card.d.ts +7 -0
  54. package/dist/components/ui/hover-card.d.ts.map +1 -0
  55. package/dist/components/ui/input-group.d.ts +13 -0
  56. package/dist/components/ui/input-group.d.ts.map +1 -0
  57. package/dist/components/ui/input-otp.d.ts +35 -0
  58. package/dist/components/ui/input-otp.d.ts.map +1 -0
  59. package/dist/components/ui/input.d.ts +5 -0
  60. package/dist/components/ui/input.d.ts.map +1 -0
  61. package/dist/components/ui/item.d.ts +24 -0
  62. package/dist/components/ui/item.d.ts.map +1 -0
  63. package/dist/components/ui/kbd.d.ts +5 -0
  64. package/dist/components/ui/kbd.d.ts.map +1 -0
  65. package/dist/components/ui/label.d.ts +6 -0
  66. package/dist/components/ui/label.d.ts.map +1 -0
  67. package/dist/components/ui/marker.d.ts +13 -0
  68. package/dist/components/ui/marker.d.ts.map +1 -0
  69. package/dist/components/ui/menubar.d.ts +29 -0
  70. package/dist/components/ui/menubar.d.ts.map +1 -0
  71. package/dist/components/ui/message-scroller.d.ts +26 -0
  72. package/dist/components/ui/message-scroller.d.ts.map +1 -0
  73. package/dist/components/ui/message.d.ts +11 -0
  74. package/dist/components/ui/message.d.ts.map +1 -0
  75. package/dist/components/ui/native-select.d.ts +4 -0
  76. package/dist/components/ui/native-select.d.ts.map +1 -0
  77. package/dist/components/ui/navigation-menu.d.ts +13 -0
  78. package/dist/components/ui/navigation-menu.d.ts.map +1 -0
  79. package/dist/components/ui/pagination.d.ts +35 -0
  80. package/dist/components/ui/pagination.d.ts.map +1 -0
  81. package/dist/components/ui/popover.d.ts +8 -0
  82. package/dist/components/ui/popover.d.ts.map +1 -0
  83. package/dist/components/ui/progress.d.ts +5 -0
  84. package/dist/components/ui/progress.d.ts.map +1 -0
  85. package/dist/components/ui/radio-group.d.ts +6 -0
  86. package/dist/components/ui/radio-group.d.ts.map +1 -0
  87. package/dist/components/ui/resizable.d.ts +24 -0
  88. package/dist/components/ui/resizable.d.ts.map +1 -0
  89. package/dist/components/ui/scroll-area.d.ts +6 -0
  90. package/dist/components/ui/scroll-area.d.ts.map +1 -0
  91. package/dist/components/ui/search-input.d.ts +23 -0
  92. package/dist/components/ui/search-input.d.ts.map +1 -0
  93. package/dist/components/ui/select.d.ts +14 -0
  94. package/dist/components/ui/select.d.ts.map +1 -0
  95. package/dist/components/ui/separator.d.ts +5 -0
  96. package/dist/components/ui/separator.d.ts.map +1 -0
  97. package/dist/components/ui/sheet.d.ts +28 -0
  98. package/dist/components/ui/sheet.d.ts.map +1 -0
  99. package/dist/components/ui/sidebar.d.ts +70 -0
  100. package/dist/components/ui/sidebar.d.ts.map +1 -0
  101. package/dist/components/ui/skeleton.d.ts +4 -0
  102. package/dist/components/ui/skeleton.d.ts.map +1 -0
  103. package/dist/components/ui/slider.d.ts +5 -0
  104. package/dist/components/ui/slider.d.ts.map +1 -0
  105. package/dist/components/ui/sonner.d.ts +6 -0
  106. package/dist/components/ui/sonner.d.ts.map +1 -0
  107. package/dist/components/ui/spinner.d.ts +7 -0
  108. package/dist/components/ui/spinner.d.ts.map +1 -0
  109. package/dist/components/ui/switch.d.ts +5 -0
  110. package/dist/components/ui/switch.d.ts.map +1 -0
  111. package/dist/components/ui/table.d.ts +11 -0
  112. package/dist/components/ui/table.d.ts.map +1 -0
  113. package/dist/components/ui/tabs.d.ts +13 -0
  114. package/dist/components/ui/tabs.d.ts.map +1 -0
  115. package/dist/components/ui/textarea.d.ts +5 -0
  116. package/dist/components/ui/textarea.d.ts.map +1 -0
  117. package/dist/components/ui/toggle-group.d.ts +13 -0
  118. package/dist/components/ui/toggle-group.d.ts.map +1 -0
  119. package/dist/components/ui/toggle.d.ts +13 -0
  120. package/dist/components/ui/toggle.d.ts.map +1 -0
  121. package/dist/components/ui/tooltip.d.ts +8 -0
  122. package/dist/components/ui/tooltip.d.ts.map +1 -0
  123. package/dist/hooks/use-mobile.d.ts +2 -0
  124. package/dist/hooks/use-mobile.d.ts.map +1 -0
  125. package/dist/index.cjs +82 -0
  126. package/dist/index.d.ts +71 -0
  127. package/dist/index.d.ts.map +1 -0
  128. package/dist/index.js +20969 -0
  129. package/dist/lib/utils.d.ts +4 -0
  130. package/dist/lib/utils.d.ts.map +1 -0
  131. package/llms.txt +173 -0
  132. package/package.json +125 -0
  133. package/src/components/ui/accordion.tsx +51 -0
  134. package/src/components/ui/alert-dialog.tsx +115 -0
  135. package/src/components/ui/alert.tsx +48 -0
  136. package/src/components/ui/aspect-ratio.tsx +5 -0
  137. package/src/components/ui/attachment.tsx +186 -0
  138. package/src/components/ui/avatar.tsx +57 -0
  139. package/src/components/ui/badge.tsx +40 -0
  140. package/src/components/ui/breadcrumb.tsx +101 -0
  141. package/src/components/ui/bubble.tsx +123 -0
  142. package/src/components/ui/button-group.tsx +74 -0
  143. package/src/components/ui/button.tsx +64 -0
  144. package/src/components/ui/calendar.tsx +63 -0
  145. package/src/components/ui/card.tsx +55 -0
  146. package/src/components/ui/carousel.tsx +252 -0
  147. package/src/components/ui/chart.tsx +323 -0
  148. package/src/components/ui/checkbox.tsx +26 -0
  149. package/src/components/ui/collapsible.tsx +9 -0
  150. package/src/components/ui/command.tsx +136 -0
  151. package/src/components/ui/context-menu.tsx +187 -0
  152. package/src/components/ui/dialog.tsx +103 -0
  153. package/src/components/ui/direction.tsx +15 -0
  154. package/src/components/ui/drawer.tsx +98 -0
  155. package/src/components/ui/dropdown-menu.tsx +186 -0
  156. package/src/components/ui/empty.tsx +75 -0
  157. package/src/components/ui/field.tsx +175 -0
  158. package/src/components/ui/hover-card.tsx +27 -0
  159. package/src/components/ui/input-group.tsx +80 -0
  160. package/src/components/ui/input-otp.tsx +67 -0
  161. package/src/components/ui/input.tsx +24 -0
  162. package/src/components/ui/item.tsx +118 -0
  163. package/src/components/ui/kbd.tsx +21 -0
  164. package/src/components/ui/label.tsx +19 -0
  165. package/src/components/ui/marker.tsx +67 -0
  166. package/src/components/ui/menubar.tsx +218 -0
  167. package/src/components/ui/message-scroller.tsx +206 -0
  168. package/src/components/ui/message.tsx +85 -0
  169. package/src/components/ui/native-select.tsx +29 -0
  170. package/src/components/ui/navigation-menu.tsx +120 -0
  171. package/src/components/ui/pagination.tsx +108 -0
  172. package/src/components/ui/popover.tsx +31 -0
  173. package/src/components/ui/progress.tsx +23 -0
  174. package/src/components/ui/radio-group.tsx +36 -0
  175. package/src/components/ui/resizable.tsx +40 -0
  176. package/src/components/ui/scroll-area.tsx +44 -0
  177. package/src/components/ui/search-input.tsx +97 -0
  178. package/src/components/ui/select.tsx +151 -0
  179. package/src/components/ui/separator.tsx +24 -0
  180. package/src/components/ui/sheet.tsx +124 -0
  181. package/src/components/ui/sidebar.tsx +704 -0
  182. package/src/components/ui/skeleton.tsx +9 -0
  183. package/src/components/ui/slider.tsx +41 -0
  184. package/src/components/ui/sonner.tsx +45 -0
  185. package/src/components/ui/spinner.tsx +21 -0
  186. package/src/components/ui/switch.tsx +27 -0
  187. package/src/components/ui/table.tsx +95 -0
  188. package/src/components/ui/tabs.tsx +119 -0
  189. package/src/components/ui/textarea.tsx +23 -0
  190. package/src/components/ui/toggle-group.tsx +55 -0
  191. package/src/components/ui/toggle.tsx +40 -0
  192. package/src/components/ui/tooltip.tsx +30 -0
  193. package/src/hooks/use-mobile.ts +19 -0
  194. package/src/index.ts +414 -0
  195. package/src/lib/utils.ts +7 -0
  196. package/src/styles/tokens.css +360 -0
  197. package/tailwind.preset.js +235 -0
package/dist/lib/utils.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { ClassValue } from 'clsx';
2
+ /** 合并 className：clsx 处理条件，tailwind-merge 消解 Tailwind 冲突类。 */
3
+ export declare function cn(...inputs: ClassValue[]): string;
4
+ //# sourceMappingURL=utils.d.ts.map
package/dist/lib/utils.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,6DAA6D;AAC7D,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
package/llms.txt ADDED
@@ -0,0 +1,173 @@
1
+ # PT Design System — AI 使用说明(llms.txt)
2
+
3
+ > 你(AI 助手)在为 Ptmind / Ptengine 团队生成任何 UI 时,必须遵循本文件的设计规范。
4
+ > 本文件自带全部关键 token 数值,可直接使用;需要完整定义时再读文末「源文件链接」。
5
+
6
+ ## 你在什么环境,决定怎么用
7
+
8
+ **A. 目标项目是 React + Tailwind,且能安装依赖** → 直接用现成组件库,不要重写组件:
9
+ ```bash
10
+ pnpm add git+ssh://git@github.com/ptmafia/Design-components.git
11
+ # 或(仓库公开时)
12
+ pnpm add github:ptmafia/Design-components
13
+ ```
14
+ ```js
15
+ // tailwind.config.js
16
+ import preset from '@ptmafia/pt-ai-components/tailwind-preset';
17
+ export default {
18
+ presets: [preset],
19
+ content: ['./src/**/*.{ts,tsx}', './node_modules/@ptmafia/pt-ai-components/dist/**/*.{js,cjs}']
20
+ };
21
+ ```
22
+ ```ts
23
+ // 应用入口。库不写任何 :root 级样式:变量全部 --pt- 前缀、作用域在 .pt-ui 类下,
24
+ // 与宿主零撞名。推荐挂 <html>(浮层 portal 到 body 才取得到变量);暗色 = 再加 .dark 类
25
+ import '@ptmafia/pt-ai-components/styles/tokens.css';
26
+ document.documentElement.classList.add('pt-ui');
27
+ ```
28
+ ```tsx
29
+ import { Button, Dialog, Tabs } from '@ptmafia/pt-ai-components';
30
+ ```
31
+ 使用规约:只从包入口 import;className 只做布局(宽度/间距/对齐),不改观感;
32
+ 不硬编码色值、不覆盖 `--pt-*` 变量;缺组件先看下方组件清单,没有再新写。
33
+ 浮层层级:库浮层默认 z-50,宿主已有 z-index 体系时设三个变量接入自己的阶梯
34
+ (这是「不覆盖变量」规约的唯一豁免,属布局集成钩子):`--pt-z-overlay`
35
+ (dialog/sheet/drawer) < `--pt-z-popup`(popover/select/dropdown 等) <
36
+ `--pt-z-tooltip`(tooltip),设在 :root 或 .pt-ui 宿主上均可。
37
+
38
+ **B. 无法安装依赖(v0、单文件 demo、纯 HTML 原型等)** → 按下方 token 数值与规则
39
+ 手写样式,视觉必须与组件库一致。
40
+
41
+ ## 设计原则(硬约束,逐条对照)
42
+
43
+ 1. **近黑文字 + 暖灰中性色为绝对主体**。文字灰阶一律 = 近黑 `#101C1F` 配透明度:
44
+ 强调 90% / 正文 70% / 次要 40% / 禁用 30%。不用纯黑、不自造灰色。
45
+ 2. **彩色是稀缺资源,按功能发放,不做装饰**。品牌绿只给 Brand 场景;语义色只表达
46
+ 状态(成功/危险/警告/信息/AI);图表色板只给数据。没有功能含义的地方不出现彩色。
47
+ 3. **层级靠大字号 + 留白建立**,不靠色块、分隔线、阴影。卡片与表单控件**无阴影**;
48
+ 只有浮层(Dialog / Popover / Dropdown / Sheet / Tooltip)保留阴影。
49
+
50
+ ## Design Tokens 速查
51
+
52
+ ### 颜色(RGB 亦列出,便于写 CSS 变量)
53
+
54
+ | 用途 | 值 | 说明 |
55
+ |---|---|---|
56
+ | 文字·强调 | `#101C1F` @ 90% | 标题 |
57
+ | 文字·正文 | `#101C1F` @ 70% | 默认正文 |
58
+ | 文字·次要 | `#101C1F` @ 40% | 辅助说明 |
59
+ | 文字·禁用 | `#101C1F` @ 30% | |
60
+ | 背景·页面/卡片 | `#FFFFFF` | |
61
+ | 背景·次级面 | `#F3F4F4` (neutral-50) | 灰底区域 |
62
+ | 背景·深色面 | `#1C272A` (neutral-950) | 反白文字 |
63
+ | 边框·默认 | `#E7E8E9` (neutral-100) | 分隔线/输入框描边 |
64
+ | 边框·hover 加深 | `#101C1F` @ 20% | 表单控件悬停 |
65
+ | 品牌绿 Brand | `#25AC00` (rgb 37 172 0) | 仅 Brand 场景按钮/标识 |
66
+ | 成功 | `#25AC00`(面)/ 深文字 `#185613` | |
67
+ | 危险 | `#CF3E3F`(rgb 207 62 63) | 错误/删除 |
68
+ | 警告 | `#FF903B` | |
69
+ | 信息 | `#2291F8` | |
70
+ | AI 专属 | `#BF63F3`(fuchsia) | AI 角色/AI 功能标识 |
71
+
72
+ ### 交互状态(叠加式,非替换式)
73
+
74
+ - **hover**:在原底色上**叠加**一层中性色 8%(`#101C1F` @ 8%),不是换背景色。
75
+ - **按下 press**:叠加 10%。
76
+ - **选中/激活(持久态)**:底色 = 中性 8%(与 hover 同值);悬停选中项时两层叠加 ≈ 16%,
77
+ 天然区分。**禁止用品牌绿等彩色表达选中**。
78
+ - **焦点环 focus ring**:中性 90%。
79
+ - **禁用**:整体 `opacity: 50%`。
80
+ - 深色表面(如黑色 Primary 按钮)的 hover 叠加改用**白色** 8%。
81
+ - **可点击卡片**:hover = 状态层叠加 + 边框加深(黑 20%),**禁止用 hover 阴影**表达浮起
82
+ (阴影在暗色模式下失效;与 M3 / Carbon / Atlassian 的表面变化方案同派)。
83
+
84
+ ### 字体与字阶
85
+
86
+ - 字体:英文 `Inter` / 日文 `Noto Sans JP` / 中文 `Noto Sans SC`(按 `<html lang>` 切换,
87
+ 拉丁字符与数字统一 Inter)。
88
+ - 字阶(px 字号/行高):`12/16 · 13/20 · 14/20 · 16/24 · 18/28 · 20/32 · 24/36 · 28/40 ·
89
+ 32/48 · 40/56 · 48/72`。注意 **xs = 13px**(非 12)。字号只能从这个表里取。
90
+ - 字重五档:300 / 400 / 500 / 600 / 700。
91
+
92
+ ### 控件尺寸三档(Button/Input/Select/SearchInput/Toggle 等全部控件统一)
93
+
94
+ | 档位 | 高度 | 文字 | 圆角 | 语义图标 | 辅助图标 | 间距·按钮/Input | 间距·带icon组件 |
95
+ |---|---|---|---|---|---|---|---|
96
+ | sm | 24px | 12px | 6px | 16px | 12px | 8px | 8px |
97
+ | default(中) | **32px** | 13px | 8px | 16px | 12px | 12px | 10px |
98
+ | lg | 40px | 14px | 8px | 20px | 16px | 16px | 12px |
99
+
100
+ - 寓意/语义图标 = 按钮里的保存/删除/加号等,**含搜索放大镜**;辅助图标 = 箭头、关闭叉。
101
+ - 「带icon组件」= SearchInput 等自带图标的成品件;Select 触发器按 Input 档(12px)。
102
+ - 表单控件(Input/Select/InputGroup 等)固定 default 档 32px;图标方钮三档
103
+ 24/32/40(`icon-sm` / `icon` / `icon-lg`),内部语义图标 16/16/20 随档。
104
+ - 不存在 40px 以外的更大档。
105
+ - Avatar 头像三档:sm 24 / md 32 / lg 40(默认),Fallback 首字母字号 12/13/14 随档。
106
+
107
+ ### 圆角
108
+
109
+ 基准 `--radius: 10px`;lg = 10px / md = 8px / sm = 6px。头像等正圆用 `9999px`。
110
+
111
+ ## Button 变体词汇(与 shadcn 官方不同,别搞混)
112
+
113
+ | 本库 variant | 样式 | 对应 shadcn 官方 |
114
+ |---|---|---|
115
+ | `default`(Primary) | 高强调黑底白字 | 官方 default(primary=黑) |
116
+ | `brand` | 品牌绿 `#25AC00` | 无(本库新增) |
117
+ | `secondary` | 白底描边 | 官方 **outline** |
118
+ | `tertiary` | 灰底弱强调 | 官方 **secondary** |
119
+ | `ghost` / `link` / `destructive` | 同官方 | 同名 |
120
+ | `ghost-destructive` / `secondary-destructive` | 常态同 ghost/secondary,hover 文字/图标变红 `--pt-red`(边框不变) | 无(本库新增,删除类操作) |
121
+
122
+ 从官方示例迁移时:`variant="outline"` → `secondary`;官方 `secondary` → `tertiary`。
123
+
124
+ ## 组件清单(60 个 + 3 组合模式,全部可直接 import)
125
+
126
+ Form:Button · ButtonGroup · Input · InputGroup · SearchInput(自研搜索框:图标+清空钮+Esc 内置) · InputOTP · Label · Field · Textarea ·
127
+ Checkbox · Switch · RadioGroup · Select · NativeSelect · Slider · Toggle · ToggleGroup · Calendar
128
+ 导航:Breadcrumb · NavigationMenu · Menubar · Pagination · Tabs · Sidebar · Command
129
+ 浮层:Dialog · AlertDialog · Sheet · Drawer · Popover · HoverCard · Tooltip · DropdownMenu · ContextMenu
130
+ 展示:Table · Card · Avatar · Badge · Accordion · Collapsible · Carousel · Chart · Item · Kbd · AspectRatio
131
+ 反馈:Alert · Progress · Skeleton · Spinner · Sonner(toast) · Empty
132
+ 聊天/AI 对话:Message(Group/Avatar/Content/Header/Footer) · MessageScroller(粘底滚动
133
+ + 回到底部按钮) · Bubble(气泡,variant=default/secondary/muted/outline/ghost/destructive,
134
+ 无彩色装饰变体) · Attachment(附件卡,state=idle/uploading/processing/error/done) · Marker(时间线标记)
135
+ 布局:Separator · ScrollArea · Resizable · Direction(RTL Provider)
136
+ 组合模式:combobox = Popover+Command;date-picker = Popover+Calendar;
137
+ data-table = Table + @tanstack/react-table。
138
+
139
+ ## 组件内建文案的本地化(库不做 i18n,消费方传译文)
140
+
141
+ 个别组件自带可见文案或读屏标签,一律通过 prop 传入、默认英文。做多语界面时
142
+ 把译文传进去(不传就保持英文,不影响现有代码):
143
+
144
+ | 组件 | prop | 默认值 |
145
+ |---|---|---|
146
+ | SearchInput | `clearLabel` | Clear |
147
+ | PaginationPrevious / PaginationNext | `label` | Previous / Next |
148
+ | PaginationEllipsis / BreadcrumbEllipsis | `label` | More pages / More |
149
+ | DialogContent / SheetContent | `closeLabel` | Close |
150
+ | CarouselPrevious / CarouselNext | `label` | Previous slide / Next slide |
151
+ | SidebarTrigger / SidebarRail | `label` | Toggle sidebar |
152
+ | MessageScrollerButton | `label` | Scroll to end / Scroll to start |
153
+ | Spinner | `label` | Loading |
154
+
155
+ ```tsx
156
+ <PaginationPrevious label={t('上一页')} />
157
+ <DialogContent closeLabel={t('关闭')}>…</DialogContent>
158
+ ```
159
+
160
+ ## 硬性禁令
161
+
162
+ - 禁止硬编码色值 / 字体名 / 字阶之外的字号
163
+ - 禁止 `hover:bg-primary/90` 这类"替换式" hover(必须是叠加式,见交互状态)
164
+ - 禁止给卡片/表单控件加阴影
165
+ - 禁止复制组件源码到业务项目(能装包时必须 import)
166
+ - 禁止用彩色表达选中态或做装饰
167
+
168
+ ## 源文件链接(需要完整定义时读取)
169
+
170
+ - 全量 CSS 变量:https://raw.githubusercontent.com/ptmafia/Design-components/main/src/styles/tokens.css
171
+ - Tailwind 预设(token→工具类映射):https://raw.githubusercontent.com/ptmafia/Design-components/main/tailwind.preset.js
172
+ - 组件源码目录:https://github.com/ptmafia/Design-components/tree/main/src/components/ui
173
+ - 完整设计文档:https://github.com/ptmafia/Design-components/blob/main/README.md
package/package.json ADDED
@@ -0,0 +1,125 @@
1
+ {
2
+ "name": "@ptengine/design-components",
3
+ "version": "0.3.0",
4
+ "description": "PT-AI-Components — PTEngine 基于 shadcn/ui 的 React 组件库",
5
+ "license": "UNLICENSED",
6
+ "private": false,
7
+ "author": "Ptmind",
8
+ "publishConfig": {
9
+ "access": "public",
10
+ "registry": "https://registry.npmjs.org/"
11
+ },
12
+ "repository": {
13
+ "type": "git",
14
+ "url": "git+https://github.com/ptmafia/Design-components.git"
15
+ },
16
+ "homepage": "https://github.com/ptmafia/Design-components#readme",
17
+ "bugs": {
18
+ "url": "https://github.com/ptmafia/Design-components/issues"
19
+ },
20
+ "type": "module",
21
+ "sideEffects": [
22
+ "**/*.css"
23
+ ],
24
+ "keywords": [
25
+ "react",
26
+ "components",
27
+ "ui",
28
+ "shadcn",
29
+ "tailwind",
30
+ "design-system",
31
+ "radix-ui",
32
+ "ptengine"
33
+ ],
34
+ "main": "./dist/index.cjs",
35
+ "module": "./dist/index.js",
36
+ "types": "./dist/index.d.ts",
37
+ "exports": {
38
+ ".": {
39
+ "types": "./dist/index.d.ts",
40
+ "import": "./dist/index.js",
41
+ "require": "./dist/index.cjs"
42
+ },
43
+ "./styles/tokens.css": "./src/styles/tokens.css",
44
+ "./tailwind-preset": "./tailwind.preset.js"
45
+ },
46
+ "files": [
47
+ "dist",
48
+ "src",
49
+ "tailwind.preset.js",
50
+ "components.json",
51
+ "llms.txt",
52
+ "README.md"
53
+ ],
54
+ "scripts": {
55
+ "dev": "vite --port 5199 --strictPort",
56
+ "build": "tsc && vite build",
57
+ "type-check": "tsc --noEmit",
58
+ "preview": "vite preview"
59
+ },
60
+ "dependencies": {
61
+ "@radix-ui/react-accordion": "^1.2.15",
62
+ "@radix-ui/react-alert-dialog": "^1.1.18",
63
+ "@radix-ui/react-aspect-ratio": "^1.1.11",
64
+ "@radix-ui/react-avatar": "^1.2.1",
65
+ "@radix-ui/react-checkbox": "^1.3.5",
66
+ "@radix-ui/react-collapsible": "^1.1.15",
67
+ "@radix-ui/react-context-menu": "^2.3.3",
68
+ "@radix-ui/react-dialog": "^1.1.18",
69
+ "@radix-ui/react-direction": "^1.1.1",
70
+ "@radix-ui/react-dropdown-menu": "^2.1.18",
71
+ "@radix-ui/react-hover-card": "^1.1.19",
72
+ "@radix-ui/react-label": "^2.1.10",
73
+ "@radix-ui/react-menubar": "^1.1.20",
74
+ "@radix-ui/react-navigation-menu": "^1.2.18",
75
+ "@radix-ui/react-popover": "^1.1.18",
76
+ "@radix-ui/react-progress": "^1.1.11",
77
+ "@radix-ui/react-radio-group": "^1.4.2",
78
+ "@radix-ui/react-scroll-area": "^1.2.12",
79
+ "@radix-ui/react-select": "^2.3.1",
80
+ "@radix-ui/react-separator": "^1.1.11",
81
+ "@radix-ui/react-slider": "^1.4.2",
82
+ "@radix-ui/react-slot": "^1.3.0",
83
+ "@radix-ui/react-switch": "^1.3.1",
84
+ "@radix-ui/react-tabs": "^1.1.15",
85
+ "@radix-ui/react-toggle": "^1.1.13",
86
+ "@radix-ui/react-toggle-group": "^1.1.14",
87
+ "@radix-ui/react-tooltip": "^1.2.10",
88
+ "class-variance-authority": "^0.7.1",
89
+ "clsx": "^2.1.1",
90
+ "cmdk": "^1.1.1",
91
+ "date-fns": "^3.6.0",
92
+ "embla-carousel-react": "^8.6.0",
93
+ "input-otp": "^1.4.2",
94
+ "lucide-react": "^0.577.0",
95
+ "react-day-picker": "^8.10.2",
96
+ "react-resizable-panels": "^2.1.9",
97
+ "recharts": "^2.15.4",
98
+ "sonner": "^2.0.7",
99
+ "tailwind-merge": "^3.6.0",
100
+ "tailwindcss-animate": "^1.0.7",
101
+ "vaul": "^1.1.2"
102
+ },
103
+ "devDependencies": {
104
+ "@tanstack/react-table": "^8.21.3",
105
+ "@types/react": "^19.1.16",
106
+ "@types/react-dom": "^19.1.9",
107
+ "@vitejs/plugin-react": "^5.0.4",
108
+ "autoprefixer": "^10.4.21",
109
+ "postcss": "^8.5.6",
110
+ "react": "^19.1.1",
111
+ "react-dom": "^19.1.1",
112
+ "tailwindcss": "^3.4.17",
113
+ "typescript": "~5.9.3",
114
+ "vite": "npm:rolldown-vite@7.1.14",
115
+ "vite-plugin-dts": "^4.5.4"
116
+ },
117
+ "peerDependencies": {
118
+ "react": ">=18.0.0",
119
+ "react-dom": ">=18.0.0"
120
+ },
121
+ "engines": {
122
+ "node": ">=18.0.0",
123
+ "pnpm": ">=8.0.0"
124
+ }
125
+ }
package/src/components/ui/accordion.tsx ADDED
@@ -0,0 +1,51 @@
1
+ import * as React from 'react';
2
+ import * as AccordionPrimitive from '@radix-ui/react-accordion';
3
+ import { ChevronDown } from 'lucide-react';
4
+
5
+ import { cn } from '../../lib/utils';
6
+
7
+ const Accordion = AccordionPrimitive.Root;
8
+
9
+ const AccordionItem = React.forwardRef<
10
+ React.ElementRef<typeof AccordionPrimitive.Item>,
11
+ React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
12
+ >(({ className, ...props }, ref) => (
13
+ <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
14
+ ));
15
+ AccordionItem.displayName = 'AccordionItem';
16
+
17
+ const AccordionTrigger = React.forwardRef<
18
+ React.ElementRef<typeof AccordionPrimitive.Trigger>,
19
+ React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
20
+ >(({ className, children, ...props }, ref) => (
21
+ <AccordionPrimitive.Header className="flex">
22
+ <AccordionPrimitive.Trigger
23
+ ref={ref}
24
+ className={cn(
25
+ 'flex flex-1 items-center justify-between py-[16px] text-[14px] leading-[20px] font-medium text-foreground transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
26
+ className
27
+ )}
28
+ {...props}
29
+ >
30
+ {children}
31
+ <ChevronDown className="h-[16px] w-[16px] shrink-0 text-muted-foreground transition-transform duration-200" />
32
+ </AccordionPrimitive.Trigger>
33
+ </AccordionPrimitive.Header>
34
+ ));
35
+ AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
36
+
37
+ const AccordionContent = React.forwardRef<
38
+ React.ElementRef<typeof AccordionPrimitive.Content>,
39
+ React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
40
+ >(({ className, children, ...props }, ref) => (
41
+ <AccordionPrimitive.Content
42
+ ref={ref}
43
+ className="overflow-hidden text-[14px] leading-[20px] text-foreground data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
44
+ {...props}
45
+ >
46
+ <div className={cn('pb-[16px] pt-0', className)}>{children}</div>
47
+ </AccordionPrimitive.Content>
48
+ ));
49
+ AccordionContent.displayName = AccordionPrimitive.Content.displayName;
50
+
51
+ export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
package/src/components/ui/alert-dialog.tsx ADDED
@@ -0,0 +1,115 @@
1
+ import * as React from 'react';
2
+ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
3
+
4
+ import { cn } from '../../lib/utils';
5
+ import { buttonVariants } from './button';
6
+
7
+ const AlertDialog = AlertDialogPrimitive.Root;
8
+
9
+ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
10
+
11
+ const AlertDialogPortal = AlertDialogPrimitive.Portal;
12
+
13
+ const AlertDialogOverlay = React.forwardRef<
14
+ React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
15
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
16
+ >(({ className, ...props }, ref) => (
17
+ <AlertDialogPrimitive.Overlay
18
+ ref={ref}
19
+ className={cn(
20
+ 'fixed inset-0 z-[var(--pt-z-overlay,50)] bg-[rgb(var(--pt-black)/0.8)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
21
+ className
22
+ )}
23
+ {...props}
24
+ />
25
+ ));
26
+ AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
27
+
28
+ const AlertDialogContent = React.forwardRef<
29
+ React.ElementRef<typeof AlertDialogPrimitive.Content>,
30
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
31
+ >(({ className, ...props }, ref) => (
32
+ <AlertDialogPortal>
33
+ <AlertDialogOverlay />
34
+ <AlertDialogPrimitive.Content
35
+ ref={ref}
36
+ className={cn(
37
+ 'fixed left-[50%] top-[50%] z-[var(--pt-z-overlay,50)] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-[16px] border bg-background p-[24px] shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-[var(--pt-radius)]',
38
+ className
39
+ )}
40
+ {...props}
41
+ />
42
+ </AlertDialogPortal>
43
+ ));
44
+ AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
45
+
46
+ const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
47
+ <div className={cn('flex flex-col space-y-[8px] text-center sm:text-left', className)} {...props} />
48
+ );
49
+ AlertDialogHeader.displayName = 'AlertDialogHeader';
50
+
51
+ const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
52
+ <div
53
+ className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-[8px]', className)}
54
+ {...props}
55
+ />
56
+ );
57
+ AlertDialogFooter.displayName = 'AlertDialogFooter';
58
+
59
+ const AlertDialogTitle = React.forwardRef<
60
+ React.ElementRef<typeof AlertDialogPrimitive.Title>,
61
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
62
+ >(({ className, ...props }, ref) => (
63
+ <AlertDialogPrimitive.Title
64
+ ref={ref}
65
+ className={cn('text-[18px] leading-[28px] font-semibold text-foreground', className)}
66
+ {...props}
67
+ />
68
+ ));
69
+ AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
70
+
71
+ const AlertDialogDescription = React.forwardRef<
72
+ React.ElementRef<typeof AlertDialogPrimitive.Description>,
73
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
74
+ >(({ className, ...props }, ref) => (
75
+ <AlertDialogPrimitive.Description
76
+ ref={ref}
77
+ className={cn('text-[14px] leading-[20px] text-muted-foreground', className)}
78
+ {...props}
79
+ />
80
+ ));
81
+ AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
82
+
83
+ const AlertDialogAction = React.forwardRef<
84
+ React.ElementRef<typeof AlertDialogPrimitive.Action>,
85
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
86
+ >(({ className, ...props }, ref) => (
87
+ <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
88
+ ));
89
+ AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
90
+
91
+ const AlertDialogCancel = React.forwardRef<
92
+ React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
93
+ React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
94
+ >(({ className, ...props }, ref) => (
95
+ <AlertDialogPrimitive.Cancel
96
+ ref={ref}
97
+ className={cn(buttonVariants({ variant: 'secondary' }), 'mt-[8px] sm:mt-0', className)}
98
+ {...props}
99
+ />
100
+ ));
101
+ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
102
+
103
+ export {
104
+ AlertDialog,
105
+ AlertDialogPortal,
106
+ AlertDialogOverlay,
107
+ AlertDialogTrigger,
108
+ AlertDialogContent,
109
+ AlertDialogHeader,
110
+ AlertDialogFooter,
111
+ AlertDialogTitle,
112
+ AlertDialogDescription,
113
+ AlertDialogAction,
114
+ AlertDialogCancel
115
+ };
package/src/components/ui/alert.tsx ADDED
@@ -0,0 +1,48 @@
1
+ import * as React from 'react';
2
+ import { cva, type VariantProps } from 'class-variance-authority';
3
+
4
+ import { cn } from '../../lib/utils';
5
+
6
+ const alertVariants = cva(
7
+ 'relative w-full rounded-[var(--pt-radius)] border px-[16px] py-[12px] text-[14px] leading-[20px] [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-[16px] [&>svg]:top-[16px] [&>svg]:size-[16px] [&>svg~*]:pl-[28px]',
8
+ {
9
+ variants: {
10
+ variant: {
11
+ default: 'bg-background text-foreground [&>svg]:text-foreground',
12
+ destructive: 'border-destructive/50 text-destructive [&>svg]:text-destructive'
13
+ }
14
+ },
15
+ defaultVariants: {
16
+ variant: 'default'
17
+ }
18
+ }
19
+ );
20
+
21
+ const Alert = React.forwardRef<
22
+ HTMLDivElement,
23
+ React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
24
+ >(({ className, variant, ...props }, ref) => (
25
+ <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
26
+ ));
27
+ Alert.displayName = 'Alert';
28
+
29
+ const AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
30
+ ({ className, ...props }, ref) => (
31
+ <h5
32
+ ref={ref}
33
+ className={cn('mb-[4px] font-medium leading-none tracking-tight', className)}
34
+ {...props}
35
+ />
36
+ )
37
+ );
38
+ AlertTitle.displayName = 'AlertTitle';
39
+
40
+ const AlertDescription = React.forwardRef<
41
+ HTMLParagraphElement,
42
+ React.HTMLAttributes<HTMLParagraphElement>
43
+ >(({ className, ...props }, ref) => (
44
+ <div ref={ref} className={cn('text-[14px] leading-[20px] [&_p]:leading-relaxed', className)} {...props} />
45
+ ));
46
+ AlertDescription.displayName = 'AlertDescription';
47
+
48
+ export { Alert, AlertTitle, AlertDescription };
package/src/components/ui/aspect-ratio.tsx ADDED
@@ -0,0 +1,5 @@
1
+ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
2
+
3
+ const AspectRatio = AspectRatioPrimitive.Root;
4
+
5
+ export { AspectRatio };