@teamix-evo/ui 0.3.0 → 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.
Files changed (520) hide show
  1. package/README.md +46 -50
  2. package/manifest.json +420 -647
  3. package/package.json +15 -34
  4. package/src/_design-system/theme-tokens/stories.tsx +1474 -0
  5. package/src/components/accordion/index.tsx +139 -0
  6. package/src/components/accordion/meta.md +162 -0
  7. package/src/components/accordion/stories.tsx +145 -0
  8. package/src/components/affix/index.tsx +149 -0
  9. package/src/components/affix/meta.md +23 -0
  10. package/src/components/affix/stories.tsx +70 -0
  11. package/src/components/alert/index.tsx +220 -0
  12. package/src/components/alert/meta.md +133 -0
  13. package/src/components/alert/stories.tsx +126 -0
  14. package/src/components/alert-dialog/index.tsx +282 -0
  15. package/src/components/alert-dialog/meta.md +86 -0
  16. package/src/components/alert-dialog/stories.tsx +163 -0
  17. package/src/components/avatar/index.tsx +159 -0
  18. package/src/components/avatar/meta.md +242 -0
  19. package/src/components/avatar/stories.tsx +241 -0
  20. package/src/components/badge/index.tsx +299 -0
  21. package/src/components/badge/meta.md +237 -0
  22. package/src/components/badge/stories.tsx +275 -0
  23. package/src/components/breadcrumb/index.tsx +137 -0
  24. package/src/components/breadcrumb/meta.md +64 -0
  25. package/src/components/breadcrumb/stories.tsx +86 -0
  26. package/src/components/button/index.tsx +202 -0
  27. package/src/components/button/meta.md +209 -0
  28. package/src/components/button/stories.tsx +215 -0
  29. package/src/components/button-group/index.tsx +211 -0
  30. package/src/components/button-group/meta.md +190 -0
  31. package/src/components/button-group/stories.tsx +182 -0
  32. package/src/components/calendar/index.tsx +240 -0
  33. package/src/components/calendar/meta.md +36 -0
  34. package/src/components/calendar/stories.tsx +36 -0
  35. package/src/components/card/index.tsx +262 -0
  36. package/src/components/card/meta.md +194 -0
  37. package/src/components/card/stories.tsx +202 -0
  38. package/src/components/carousel/index.tsx +481 -0
  39. package/src/components/carousel/meta.md +208 -0
  40. package/src/components/carousel/stories.tsx +271 -0
  41. package/src/components/cascader-select/index.tsx +308 -0
  42. package/src/components/cascader-select/meta.md +28 -0
  43. package/src/components/cascader-select/stories.tsx +118 -0
  44. package/src/components/checkbox/index.tsx +208 -0
  45. package/src/components/checkbox/meta.md +166 -0
  46. package/src/components/checkbox/stories.tsx +206 -0
  47. package/src/components/collapsible/index.tsx +72 -0
  48. package/src/components/collapsible/meta.md +87 -0
  49. package/src/components/collapsible/stories.tsx +97 -0
  50. package/src/components/color-picker/index.tsx +677 -0
  51. package/src/components/color-picker/meta.md +83 -0
  52. package/src/components/color-picker/stories.tsx +172 -0
  53. package/src/components/combobox/index.tsx +687 -0
  54. package/src/components/combobox/meta.md +83 -0
  55. package/src/components/combobox/stories.tsx +179 -0
  56. package/src/components/command/index.tsx +238 -0
  57. package/src/components/command/meta.md +48 -0
  58. package/src/components/command/stories.tsx +83 -0
  59. package/src/components/data-table/index.tsx +1537 -0
  60. package/src/components/data-table/meta.md +107 -0
  61. package/src/components/data-table/stories.tsx +1234 -0
  62. package/src/components/date-picker/index.tsx +1492 -0
  63. package/src/components/date-picker/meta.md +103 -0
  64. package/src/components/date-picker/stories.tsx +125 -0
  65. package/src/components/descriptions/index.tsx +535 -0
  66. package/src/components/descriptions/meta.md +104 -0
  67. package/src/components/descriptions/stories.tsx +389 -0
  68. package/src/components/dialog/index.tsx +255 -0
  69. package/src/components/dialog/meta.md +244 -0
  70. package/src/components/dialog/stories.tsx +330 -0
  71. package/src/components/dropdown-menu/index.tsx +301 -0
  72. package/src/components/dropdown-menu/meta.md +93 -0
  73. package/src/components/dropdown-menu/stories.tsx +124 -0
  74. package/src/components/empty/index.tsx +431 -0
  75. package/src/components/empty/meta.md +274 -0
  76. package/src/components/empty/stories.tsx +278 -0
  77. package/src/components/field/index.tsx +374 -0
  78. package/src/components/field/meta.md +283 -0
  79. package/src/components/field/stories.tsx +327 -0
  80. package/src/components/filter-bar/index.tsx +976 -0
  81. package/src/components/filter-bar/meta.md +57 -0
  82. package/src/components/filter-bar/stories.tsx +496 -0
  83. package/src/components/float-button/index.tsx +163 -0
  84. package/src/components/float-button/meta.md +73 -0
  85. package/src/components/float-button/stories.tsx +68 -0
  86. package/src/components/form/index.tsx +218 -0
  87. package/src/components/form/meta.md +16 -0
  88. package/src/components/form/stories.tsx +301 -0
  89. package/src/components/hover-card/index.tsx +103 -0
  90. package/src/components/hover-card/meta.md +71 -0
  91. package/src/components/hover-card/stories.tsx +107 -0
  92. package/src/components/icon/index.tsx +225 -0
  93. package/src/components/icon/meta.md +102 -0
  94. package/src/components/icon/stories.tsx +127 -0
  95. package/src/components/image/index.tsx +147 -0
  96. package/src/components/image/meta.md +55 -0
  97. package/src/components/image/stories.tsx +48 -0
  98. package/src/components/input/index.tsx +63 -0
  99. package/src/components/input/meta.md +57 -0
  100. package/src/components/input/stories.tsx +66 -0
  101. package/src/components/input-group/index.tsx +292 -0
  102. package/src/components/input-group/meta.md +108 -0
  103. package/src/components/input-group/stories.tsx +258 -0
  104. package/src/components/input-ip/index.tsx +288 -0
  105. package/src/components/input-ip/meta.md +48 -0
  106. package/src/components/input-ip/stories.tsx +69 -0
  107. package/src/components/input-number/index.tsx +360 -0
  108. package/src/components/input-number/meta.md +156 -0
  109. package/src/components/input-number/stories.tsx +187 -0
  110. package/src/components/item/index.tsx +368 -0
  111. package/src/components/item/meta.md +395 -0
  112. package/src/components/item/stories.tsx +432 -0
  113. package/src/components/label/index.tsx +44 -0
  114. package/src/components/label/meta.md +68 -0
  115. package/src/components/label/stories.tsx +64 -0
  116. package/src/components/mentions/index.tsx +369 -0
  117. package/src/components/mentions/meta.md +118 -0
  118. package/src/components/mentions/stories.tsx +153 -0
  119. package/src/components/menubar/index.tsx +313 -0
  120. package/src/components/menubar/meta.md +52 -0
  121. package/src/components/menubar/stories.tsx +99 -0
  122. package/src/components/navigation-menu/index.tsx +216 -0
  123. package/src/components/navigation-menu/meta.md +66 -0
  124. package/src/components/navigation-menu/stories.tsx +137 -0
  125. package/src/components/page-header/index.tsx +218 -0
  126. package/src/components/page-header/meta.md +211 -0
  127. package/src/components/page-header/stories.tsx +290 -0
  128. package/src/components/page-shell/index.tsx +119 -0
  129. package/src/components/page-shell/meta.md +115 -0
  130. package/src/components/page-shell/stories.tsx +154 -0
  131. package/src/components/pagination/index.tsx +580 -0
  132. package/src/components/pagination/meta.md +39 -0
  133. package/src/components/pagination/stories.tsx +319 -0
  134. package/src/components/popconfirm/index.tsx +477 -0
  135. package/src/components/popconfirm/meta.md +164 -0
  136. package/src/components/popconfirm/stories.tsx +231 -0
  137. package/src/components/popover/index.tsx +181 -0
  138. package/src/components/popover/meta.md +97 -0
  139. package/src/components/popover/stories.tsx +169 -0
  140. package/src/components/progress/index.tsx +176 -0
  141. package/src/components/progress/meta.md +95 -0
  142. package/src/components/progress/stories.tsx +115 -0
  143. package/src/components/radio-group/index.tsx +78 -0
  144. package/src/components/radio-group/meta.md +137 -0
  145. package/src/components/radio-group/stories.tsx +285 -0
  146. package/src/components/rate/index.tsx +284 -0
  147. package/src/components/rate/meta.md +63 -0
  148. package/src/components/rate/stories.tsx +107 -0
  149. package/src/components/resizable/index.tsx +122 -0
  150. package/src/components/resizable/meta.md +142 -0
  151. package/src/components/resizable/stories.tsx +105 -0
  152. package/src/components/scroll-area/index.tsx +83 -0
  153. package/src/components/scroll-area/meta.md +85 -0
  154. package/src/components/scroll-area/stories.tsx +82 -0
  155. package/src/components/select/index.tsx +325 -0
  156. package/src/components/select/meta.md +183 -0
  157. package/src/components/select/stories.tsx +210 -0
  158. package/src/components/separator/index.tsx +51 -0
  159. package/src/components/separator/meta.md +68 -0
  160. package/src/components/separator/stories.tsx +53 -0
  161. package/src/components/sheet/index.tsx +293 -0
  162. package/src/components/sheet/meta.md +226 -0
  163. package/src/components/sheet/stories.tsx +405 -0
  164. package/src/components/sidebar/index.tsx +715 -0
  165. package/src/components/sidebar/meta.md +14 -0
  166. package/src/components/sidebar/{sidebar.stories.tsx → stories.tsx} +250 -330
  167. package/src/components/skeleton/index.tsx +415 -0
  168. package/src/components/skeleton/meta.md +210 -0
  169. package/src/components/skeleton/stories.tsx +197 -0
  170. package/src/components/slider/index.tsx +222 -0
  171. package/src/components/slider/meta.md +125 -0
  172. package/src/components/slider/stories.tsx +109 -0
  173. package/src/components/sonner/index.tsx +149 -0
  174. package/src/components/sonner/meta.md +156 -0
  175. package/src/components/sonner/stories.tsx +285 -0
  176. package/src/components/spinner/index.tsx +335 -0
  177. package/src/components/spinner/meta.md +172 -0
  178. package/src/components/spinner/stories.tsx +197 -0
  179. package/src/components/statistic/{statistic.tsx → index.tsx} +25 -26
  180. package/src/components/statistic/meta.md +94 -0
  181. package/src/components/statistic/stories.tsx +85 -0
  182. package/src/components/steps/index.tsx +500 -0
  183. package/src/components/steps/meta.md +245 -0
  184. package/src/components/steps/stories.tsx +287 -0
  185. package/src/components/switch/index.tsx +175 -0
  186. package/src/components/switch/meta.md +107 -0
  187. package/src/components/switch/stories.tsx +154 -0
  188. package/src/components/table/index.tsx +350 -0
  189. package/src/components/table/meta.md +148 -0
  190. package/src/components/table/stories.tsx +189 -0
  191. package/src/components/tabs/index.tsx +379 -0
  192. package/src/components/tabs/meta.md +244 -0
  193. package/src/components/tabs/stories.tsx +312 -0
  194. package/src/components/tag/index.tsx +774 -0
  195. package/src/components/tag/meta.md +256 -0
  196. package/src/components/tag/stories.tsx +431 -0
  197. package/src/components/textarea/index.tsx +62 -0
  198. package/src/components/textarea/meta.md +77 -0
  199. package/src/components/textarea/stories.tsx +112 -0
  200. package/src/components/time-picker/index.tsx +887 -0
  201. package/src/components/time-picker/meta.md +102 -0
  202. package/src/components/time-picker/stories.tsx +125 -0
  203. package/src/components/timeline/index.tsx +422 -0
  204. package/src/components/timeline/meta.md +352 -0
  205. package/src/components/timeline/stories.tsx +369 -0
  206. package/src/components/toggle/index.tsx +74 -0
  207. package/src/components/toggle/meta.md +76 -0
  208. package/src/components/toggle/stories.tsx +66 -0
  209. package/src/components/toggle-group/index.tsx +167 -0
  210. package/src/components/toggle-group/meta.md +141 -0
  211. package/src/components/toggle-group/stories.tsx +124 -0
  212. package/src/components/tooltip/index.tsx +144 -0
  213. package/src/components/tooltip/meta.md +186 -0
  214. package/src/components/tooltip/stories.tsx +212 -0
  215. package/src/components/transfer/index.tsx +639 -0
  216. package/src/components/transfer/meta.md +76 -0
  217. package/src/components/transfer/stories.tsx +221 -0
  218. package/src/components/tree/index.tsx +764 -0
  219. package/src/components/tree/meta.md +96 -0
  220. package/src/components/tree/stories.tsx +385 -0
  221. package/src/components/tree/utils.ts +269 -0
  222. package/src/components/tree-select/index.tsx +400 -0
  223. package/src/components/tree-select/meta.md +78 -0
  224. package/src/components/tree-select/stories.tsx +234 -0
  225. package/src/components/typography/index.tsx +290 -0
  226. package/src/components/typography/meta.md +151 -0
  227. package/src/components/typography/stories.tsx +151 -0
  228. package/src/components/upload/index.tsx +858 -0
  229. package/src/components/upload/meta.md +122 -0
  230. package/src/components/upload/stories.tsx +261 -0
  231. package/src/components/watermark/index.tsx +152 -0
  232. package/src/components/watermark/meta.md +67 -0
  233. package/src/components/watermark/stories.tsx +59 -0
  234. package/src/hooks/use-mobile.ts +9 -11
  235. package/src/lib/color.ts +243 -0
  236. package/src/{utils/cn.ts → lib/utils.ts} +1 -1
  237. package/src/components/accordion/accordion.meta.md +0 -88
  238. package/src/components/accordion/accordion.stories.tsx +0 -72
  239. package/src/components/accordion/accordion.tsx +0 -154
  240. package/src/components/affix/affix.meta.md +0 -98
  241. package/src/components/affix/affix.stories.tsx +0 -134
  242. package/src/components/affix/affix.tsx +0 -167
  243. package/src/components/alert/alert.meta.md +0 -132
  244. package/src/components/alert/alert.stories.tsx +0 -138
  245. package/src/components/alert/alert.tsx +0 -179
  246. package/src/components/alert-dialog/alert-dialog.meta.md +0 -152
  247. package/src/components/alert-dialog/alert-dialog.stories.tsx +0 -223
  248. package/src/components/alert-dialog/alert-dialog.tsx +0 -183
  249. package/src/components/anchor/anchor.meta.md +0 -92
  250. package/src/components/anchor/anchor.stories.tsx +0 -74
  251. package/src/components/anchor/anchor.tsx +0 -130
  252. package/src/components/app/app.meta.md +0 -91
  253. package/src/components/app/app.stories.tsx +0 -64
  254. package/src/components/app/app.tsx +0 -58
  255. package/src/components/aspect-ratio/aspect-ratio.meta.md +0 -82
  256. package/src/components/aspect-ratio/aspect-ratio.stories.tsx +0 -59
  257. package/src/components/aspect-ratio/aspect-ratio.tsx +0 -22
  258. package/src/components/auto-complete/auto-complete.meta.md +0 -110
  259. package/src/components/auto-complete/auto-complete.stories.tsx +0 -136
  260. package/src/components/auto-complete/auto-complete.tsx +0 -253
  261. package/src/components/avatar/avatar.meta.md +0 -93
  262. package/src/components/avatar/avatar.stories.tsx +0 -98
  263. package/src/components/avatar/avatar.tsx +0 -127
  264. package/src/components/badge/badge.meta.md +0 -120
  265. package/src/components/badge/badge.stories.tsx +0 -153
  266. package/src/components/badge/badge.tsx +0 -204
  267. package/src/components/breadcrumb/breadcrumb.meta.md +0 -127
  268. package/src/components/breadcrumb/breadcrumb.stories.tsx +0 -207
  269. package/src/components/breadcrumb/breadcrumb.tsx +0 -136
  270. package/src/components/button/button.meta.md +0 -335
  271. package/src/components/button/button.stories.tsx +0 -743
  272. package/src/components/button/button.tsx +0 -462
  273. package/src/components/button/demo/as-child.tsx +0 -24
  274. package/src/components/button/demo/basic.tsx +0 -8
  275. package/src/components/button/demo/block.tsx +0 -16
  276. package/src/components/button/demo/loading.tsx +0 -19
  277. package/src/components/button/demo/shapes.tsx +0 -18
  278. package/src/components/button/demo/sizes.tsx +0 -19
  279. package/src/components/button/demo/variants.tsx +0 -19
  280. package/src/components/button/demo/with-icon.tsx +0 -20
  281. package/src/components/calendar/calendar.meta.md +0 -128
  282. package/src/components/calendar/calendar.stories.tsx +0 -68
  283. package/src/components/calendar/calendar.tsx +0 -172
  284. package/src/components/card/card.meta.md +0 -139
  285. package/src/components/card/card.stories.tsx +0 -151
  286. package/src/components/card/card.tsx +0 -305
  287. package/src/components/carousel/carousel.meta.md +0 -118
  288. package/src/components/carousel/carousel.stories.tsx +0 -89
  289. package/src/components/carousel/carousel.tsx +0 -224
  290. package/src/components/cascader/cascader.meta.md +0 -140
  291. package/src/components/cascader/cascader.stories.tsx +0 -120
  292. package/src/components/cascader/cascader.tsx +0 -541
  293. package/src/components/checkbox/checkbox.meta.md +0 -167
  294. package/src/components/checkbox/checkbox.stories.tsx +0 -288
  295. package/src/components/checkbox/checkbox.tsx +0 -193
  296. package/src/components/collapsible/collapsible.meta.md +0 -88
  297. package/src/components/collapsible/collapsible.stories.tsx +0 -43
  298. package/src/components/collapsible/collapsible.tsx +0 -105
  299. package/src/components/color-picker/color-picker.meta.md +0 -89
  300. package/src/components/color-picker/color-picker.stories.tsx +0 -159
  301. package/src/components/color-picker/color-picker.tsx +0 -171
  302. package/src/components/command/command.meta.md +0 -120
  303. package/src/components/command/command.stories.tsx +0 -59
  304. package/src/components/command/command.tsx +0 -158
  305. package/src/components/context-menu/context-menu.meta.md +0 -93
  306. package/src/components/context-menu/context-menu.stories.tsx +0 -54
  307. package/src/components/context-menu/context-menu.tsx +0 -204
  308. package/src/components/data-table/data-table.meta.md +0 -150
  309. package/src/components/data-table/data-table.stories.tsx +0 -132
  310. package/src/components/data-table/data-table.tsx +0 -185
  311. package/src/components/date-picker/date-picker.meta.md +0 -175
  312. package/src/components/date-picker/date-picker.stories.tsx +0 -108
  313. package/src/components/date-picker/date-picker.tsx +0 -1554
  314. package/src/components/descriptions/descriptions.meta.md +0 -83
  315. package/src/components/descriptions/descriptions.stories.tsx +0 -60
  316. package/src/components/descriptions/descriptions.tsx +0 -137
  317. package/src/components/dialog/dialog.meta.md +0 -168
  318. package/src/components/dialog/dialog.stories.tsx +0 -255
  319. package/src/components/dialog/dialog.tsx +0 -180
  320. package/src/components/dialog/imperative.tsx +0 -252
  321. package/src/components/drawer/drawer.meta.md +0 -95
  322. package/src/components/drawer/drawer.stories.tsx +0 -71
  323. package/src/components/drawer/drawer.tsx +0 -23
  324. package/src/components/dropdown-menu/dropdown-menu.meta.md +0 -171
  325. package/src/components/dropdown-menu/dropdown-menu.stories.tsx +0 -198
  326. package/src/components/dropdown-menu/dropdown-menu.tsx +0 -209
  327. package/src/components/ellipsis/ellipsis.meta.md +0 -87
  328. package/src/components/ellipsis/ellipsis.stories.tsx +0 -72
  329. package/src/components/ellipsis/ellipsis.tsx +0 -153
  330. package/src/components/empty/empty.meta.md +0 -86
  331. package/src/components/empty/empty.stories.tsx +0 -46
  332. package/src/components/empty/empty.tsx +0 -54
  333. package/src/components/field/field.meta.md +0 -154
  334. package/src/components/field/field.stories.tsx +0 -497
  335. package/src/components/field/field.tsx +0 -392
  336. package/src/components/filter-bar/filter-bar.meta.md +0 -92
  337. package/src/components/filter-bar/filter-bar.stories.tsx +0 -1083
  338. package/src/components/filter-bar/filter-bar.tsx +0 -568
  339. package/src/components/flex/flex.meta.md +0 -142
  340. package/src/components/flex/flex.stories.tsx +0 -199
  341. package/src/components/flex/flex.tsx +0 -145
  342. package/src/components/float-button/float-button.meta.md +0 -92
  343. package/src/components/float-button/float-button.stories.tsx +0 -80
  344. package/src/components/float-button/float-button.tsx +0 -143
  345. package/src/components/form/form.meta.md +0 -153
  346. package/src/components/form/form.stories.tsx +0 -469
  347. package/src/components/form/form.tsx +0 -260
  348. package/src/components/grid/grid.meta.md +0 -92
  349. package/src/components/grid/grid.stories.tsx +0 -101
  350. package/src/components/grid/grid.tsx +0 -130
  351. package/src/components/hover-card/hover-card.meta.md +0 -103
  352. package/src/components/hover-card/hover-card.stories.tsx +0 -97
  353. package/src/components/hover-card/hover-card.tsx +0 -67
  354. package/src/components/icon/DEVELOPMENT.md +0 -809
  355. package/src/components/icon/icon.meta.md +0 -170
  356. package/src/components/icon/icon.stories.tsx +0 -344
  357. package/src/components/icon/icon.tsx +0 -248
  358. package/src/components/image/image.meta.md +0 -99
  359. package/src/components/image/image.stories.tsx +0 -55
  360. package/src/components/image/image.tsx +0 -140
  361. package/src/components/input/demo/basic.tsx +0 -12
  362. package/src/components/input/demo/clearable.tsx +0 -21
  363. package/src/components/input/demo/show-count.tsx +0 -18
  364. package/src/components/input/demo/sizes.tsx +0 -15
  365. package/src/components/input/input.meta.md +0 -115
  366. package/src/components/input/input.stories.tsx +0 -144
  367. package/src/components/input/input.tsx +0 -212
  368. package/src/components/input-group/input-group.meta.md +0 -124
  369. package/src/components/input-group/input-group.stories.tsx +0 -121
  370. package/src/components/input-group/input-group.tsx +0 -143
  371. package/src/components/input-number/input-number.meta.md +0 -148
  372. package/src/components/input-number/input-number.stories.tsx +0 -125
  373. package/src/components/input-number/input-number.tsx +0 -283
  374. package/src/components/input-otp/input-otp.meta.md +0 -106
  375. package/src/components/input-otp/input-otp.stories.tsx +0 -65
  376. package/src/components/input-otp/input-otp.tsx +0 -97
  377. package/src/components/item/item.meta.md +0 -121
  378. package/src/components/item/item.stories.tsx +0 -116
  379. package/src/components/item/item.tsx +0 -172
  380. package/src/components/kbd/kbd.meta.md +0 -94
  381. package/src/components/kbd/kbd.stories.tsx +0 -70
  382. package/src/components/kbd/kbd.tsx +0 -86
  383. package/src/components/label/label.meta.md +0 -99
  384. package/src/components/label/label.stories.tsx +0 -145
  385. package/src/components/label/label.tsx +0 -138
  386. package/src/components/masonry/masonry.meta.md +0 -90
  387. package/src/components/masonry/masonry.stories.tsx +0 -68
  388. package/src/components/masonry/masonry.tsx +0 -60
  389. package/src/components/mentions/mentions.meta.md +0 -119
  390. package/src/components/mentions/mentions.stories.tsx +0 -189
  391. package/src/components/mentions/mentions.tsx +0 -243
  392. package/src/components/menubar/menubar.meta.md +0 -118
  393. package/src/components/menubar/menubar.stories.tsx +0 -141
  394. package/src/components/menubar/menubar.tsx +0 -232
  395. package/src/components/native-select/native-select.meta.md +0 -93
  396. package/src/components/native-select/native-select.stories.tsx +0 -83
  397. package/src/components/native-select/native-select.tsx +0 -54
  398. package/src/components/navigation-menu/navigation-menu.meta.md +0 -118
  399. package/src/components/navigation-menu/navigation-menu.stories.tsx +0 -215
  400. package/src/components/navigation-menu/navigation-menu.tsx +0 -129
  401. package/src/components/notification/notification.meta.md +0 -133
  402. package/src/components/notification/notification.stories.tsx +0 -98
  403. package/src/components/notification/notification.tsx +0 -99
  404. package/src/components/page-header/DEVELOPMENT.md +0 -842
  405. package/src/components/page-header/page-header.meta.md +0 -208
  406. package/src/components/page-header/page-header.stories.tsx +0 -421
  407. package/src/components/page-header/page-header.tsx +0 -281
  408. package/src/components/pagination/pagination.meta.md +0 -230
  409. package/src/components/pagination/pagination.stories.tsx +0 -284
  410. package/src/components/pagination/pagination.tsx +0 -577
  411. package/src/components/popconfirm/popconfirm.meta.md +0 -114
  412. package/src/components/popconfirm/popconfirm.stories.tsx +0 -75
  413. package/src/components/popconfirm/popconfirm.tsx +0 -134
  414. package/src/components/popover/popover.meta.md +0 -154
  415. package/src/components/popover/popover.stories.tsx +0 -158
  416. package/src/components/popover/popover.tsx +0 -104
  417. package/src/components/progress/progress.meta.md +0 -118
  418. package/src/components/progress/progress.stories.tsx +0 -75
  419. package/src/components/progress/progress.tsx +0 -203
  420. package/src/components/radio-group/radio-group.meta.md +0 -175
  421. package/src/components/radio-group/radio-group.stories.tsx +0 -113
  422. package/src/components/radio-group/radio-group.tsx +0 -209
  423. package/src/components/rate/rate.meta.md +0 -118
  424. package/src/components/rate/rate.stories.tsx +0 -89
  425. package/src/components/rate/rate.tsx +0 -180
  426. package/src/components/resizable/resizable.meta.md +0 -95
  427. package/src/components/resizable/resizable.stories.tsx +0 -104
  428. package/src/components/resizable/resizable.tsx +0 -56
  429. package/src/components/result/result.meta.md +0 -95
  430. package/src/components/result/result.stories.tsx +0 -67
  431. package/src/components/result/result.tsx +0 -100
  432. package/src/components/scroll-area/scroll-area.meta.md +0 -85
  433. package/src/components/scroll-area/scroll-area.stories.tsx +0 -49
  434. package/src/components/scroll-area/scroll-area.tsx +0 -51
  435. package/src/components/segmented/segmented.meta.md +0 -106
  436. package/src/components/segmented/segmented.stories.tsx +0 -130
  437. package/src/components/segmented/segmented.tsx +0 -146
  438. package/src/components/select/select.meta.md +0 -255
  439. package/src/components/select/select.stories.tsx +0 -275
  440. package/src/components/select/select.tsx +0 -735
  441. package/src/components/separator/separator.meta.md +0 -75
  442. package/src/components/separator/separator.stories.tsx +0 -71
  443. package/src/components/separator/separator.tsx +0 -100
  444. package/src/components/sheet/sheet.meta.md +0 -113
  445. package/src/components/sheet/sheet.stories.tsx +0 -188
  446. package/src/components/sheet/sheet.tsx +0 -226
  447. package/src/components/sidebar/sidebar.meta.md +0 -150
  448. package/src/components/sidebar/sidebar.tsx +0 -824
  449. package/src/components/skeleton/skeleton.meta.md +0 -94
  450. package/src/components/skeleton/skeleton.stories.tsx +0 -79
  451. package/src/components/skeleton/skeleton.tsx +0 -144
  452. package/src/components/slider/slider.meta.md +0 -146
  453. package/src/components/slider/slider.stories.tsx +0 -121
  454. package/src/components/slider/slider.tsx +0 -227
  455. package/src/components/sonner/sonner.meta.md +0 -147
  456. package/src/components/sonner/sonner.stories.tsx +0 -164
  457. package/src/components/sonner/sonner.tsx +0 -169
  458. package/src/components/spinner/spinner.meta.md +0 -125
  459. package/src/components/spinner/spinner.stories.tsx +0 -123
  460. package/src/components/spinner/spinner.tsx +0 -166
  461. package/src/components/statistic/statistic.meta.md +0 -104
  462. package/src/components/statistic/statistic.stories.tsx +0 -67
  463. package/src/components/steps/steps.meta.md +0 -116
  464. package/src/components/steps/steps.stories.tsx +0 -115
  465. package/src/components/steps/steps.tsx +0 -173
  466. package/src/components/switch/switch.meta.md +0 -138
  467. package/src/components/switch/switch.stories.tsx +0 -75
  468. package/src/components/switch/switch.tsx +0 -169
  469. package/src/components/table/table.meta.md +0 -106
  470. package/src/components/table/table.stories.tsx +0 -80
  471. package/src/components/table/table.tsx +0 -122
  472. package/src/components/tabs/tabs.meta.md +0 -111
  473. package/src/components/tabs/tabs.stories.tsx +0 -156
  474. package/src/components/tabs/tabs.tsx +0 -190
  475. package/src/components/tag/tag.meta.md +0 -159
  476. package/src/components/tag/tag.stories.tsx +0 -250
  477. package/src/components/tag/tag.tsx +0 -386
  478. package/src/components/textarea/textarea.meta.md +0 -99
  479. package/src/components/textarea/textarea.stories.tsx +0 -89
  480. package/src/components/textarea/textarea.tsx +0 -137
  481. package/src/components/time-picker/time-picker.meta.md +0 -175
  482. package/src/components/time-picker/time-picker.stories.tsx +0 -129
  483. package/src/components/time-picker/time-picker.tsx +0 -946
  484. package/src/components/timeline/timeline.meta.md +0 -110
  485. package/src/components/timeline/timeline.stories.tsx +0 -134
  486. package/src/components/timeline/timeline.tsx +0 -168
  487. package/src/components/toggle/toggle.meta.md +0 -89
  488. package/src/components/toggle/toggle.stories.tsx +0 -66
  489. package/src/components/toggle/toggle.tsx +0 -54
  490. package/src/components/toggle-group/toggle-group.meta.md +0 -91
  491. package/src/components/toggle-group/toggle-group.stories.tsx +0 -83
  492. package/src/components/toggle-group/toggle-group.tsx +0 -78
  493. package/src/components/tooltip/tooltip.meta.md +0 -149
  494. package/src/components/tooltip/tooltip.stories.tsx +0 -108
  495. package/src/components/tooltip/tooltip.tsx +0 -153
  496. package/src/components/tour/tour.meta.md +0 -121
  497. package/src/components/tour/tour.stories.tsx +0 -66
  498. package/src/components/tour/tour.tsx +0 -242
  499. package/src/components/transfer/transfer.meta.md +0 -95
  500. package/src/components/transfer/transfer.stories.tsx +0 -64
  501. package/src/components/transfer/transfer.tsx +0 -258
  502. package/src/components/tree/tree.meta.md +0 -169
  503. package/src/components/tree/tree.stories.tsx +0 -128
  504. package/src/components/tree/tree.tsx +0 -368
  505. package/src/components/tree-select/tree-select.meta.md +0 -151
  506. package/src/components/tree-select/tree-select.stories.tsx +0 -80
  507. package/src/components/tree-select/tree-select.tsx +0 -206
  508. package/src/components/typography/typography.meta.md +0 -149
  509. package/src/components/typography/typography.stories.tsx +0 -116
  510. package/src/components/typography/typography.tsx +0 -260
  511. package/src/components/upload/upload.meta.md +0 -156
  512. package/src/components/upload/upload.stories.tsx +0 -135
  513. package/src/components/upload/upload.tsx +0 -398
  514. package/src/components/watermark/watermark.meta.md +0 -100
  515. package/src/components/watermark/watermark.stories.tsx +0 -170
  516. package/src/components/watermark/watermark.tsx +0 -166
  517. package/src/hooks/use-breakpoint.ts +0 -117
  518. package/src/hooks/use-debounce-callback.ts +0 -52
  519. package/src/stories/theme-tokens.stories.tsx +0 -747
  520. package/src/utils/trigger-input.ts +0 -53
@@ -1,215 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
2
- import {
3
- NavigationMenu,
4
- NavigationMenuList,
5
- NavigationMenuItem,
6
- NavigationMenuTrigger,
7
- NavigationMenuContent,
8
- NavigationMenuLink,
9
- navigationMenuTriggerStyle,
10
- } from './navigation-menu';
11
- import { cn } from '@/utils/cn';
12
-
13
- const meta: Meta<typeof NavigationMenu> = {
14
- title: '废弃 · Deprecated/NavigationMenu',
15
- component: NavigationMenu,
16
- tags: ['autodocs'],
17
- parameters: {
18
- docs: {
19
- description: {
20
- component:
21
- '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\nNavigationMenu 导航菜单 —— 在网站、营销页或应用顶部承载主导航,每项可展开富面板预览子页面。Radix `NavigationMenu` 内核 + shadcn 原子,**对齐 antd `Menu mode="horizontal"`** 的水平主导航能力,对齐 shadcn `NavigationMenu` 的 `NavigationMenuTrigger` / `NavigationMenuContent` / `NavigationMenuLink` / `navigationMenuTriggerStyle`,并补足 antd 的 `disabled` 项与简单链接形态。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
22
- },
23
- },
24
- },
25
- };
26
-
27
- export default meta;
28
- type Story = StoryObj<typeof NavigationMenu>;
29
-
30
- export const Default: Story = {
31
- parameters: { layout: 'centered' },
32
- render: () => (
33
- <NavigationMenu>
34
- <NavigationMenuList>
35
- <NavigationMenuItem>
36
- <NavigationMenuTrigger>产品</NavigationMenuTrigger>
37
- <NavigationMenuContent>
38
- <ul className="grid w-[420px] gap-3 p-4 md:w-[520px] md:grid-cols-2">
39
- <li>
40
- <NavigationMenuLink asChild>
41
- <a
42
- href="#design"
43
- onClick={(e) => e.preventDefault()}
44
- className="block rounded-md p-3 hover:bg-accent"
45
- >
46
- <div className="text-sm font-medium">Design</div>
47
- <p className="text-xs text-muted-foreground">
48
- 设计体系与 tokens
49
- </p>
50
- </a>
51
- </NavigationMenuLink>
52
- </li>
53
- <li>
54
- <NavigationMenuLink asChild>
55
- <a
56
- href="#ui"
57
- onClick={(e) => e.preventDefault()}
58
- className="block rounded-md p-3 hover:bg-accent"
59
- >
60
- <div className="text-sm font-medium">UI</div>
61
- <p className="text-xs text-muted-foreground">
62
- 源码注入式组件
63
- </p>
64
- </a>
65
- </NavigationMenuLink>
66
- </li>
67
- <li>
68
- <NavigationMenuLink asChild>
69
- <a
70
- href="#cli"
71
- onClick={(e) => e.preventDefault()}
72
- className="block rounded-md p-3 hover:bg-accent"
73
- >
74
- <div className="text-sm font-medium">CLI</div>
75
- <p className="text-xs text-muted-foreground">
76
- teamix-evo 命令行
77
- </p>
78
- </a>
79
- </NavigationMenuLink>
80
- </li>
81
- <li>
82
- <NavigationMenuLink asChild>
83
- <a
84
- href="#skills"
85
- onClick={(e) => e.preventDefault()}
86
- className="block rounded-md p-3 hover:bg-accent"
87
- >
88
- <div className="text-sm font-medium">Skills</div>
89
- <p className="text-xs text-muted-foreground">AI IDE 技能</p>
90
- </a>
91
- </NavigationMenuLink>
92
- </li>
93
- </ul>
94
- </NavigationMenuContent>
95
- </NavigationMenuItem>
96
- <NavigationMenuItem>
97
- <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
98
- <a href="#docs" onClick={(e) => e.preventDefault()}>
99
- 文档
100
- </a>
101
- </NavigationMenuLink>
102
- </NavigationMenuItem>
103
- <NavigationMenuItem>
104
- <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
105
- <a href="#pricing" onClick={(e) => e.preventDefault()}>
106
- 定价
107
- </a>
108
- </NavigationMenuLink>
109
- </NavigationMenuItem>
110
- <NavigationMenuItem>
111
- <NavigationMenuLink
112
- asChild
113
- className={cn(
114
- navigationMenuTriggerStyle(),
115
- 'pointer-events-none opacity-50',
116
- )}
117
- aria-disabled
118
- >
119
- <span>企业版(即将上线)</span>
120
- </NavigationMenuLink>
121
- </NavigationMenuItem>
122
- </NavigationMenuList>
123
- </NavigationMenu>
124
- ),
125
- };
126
-
127
- export const SimpleLinks: Story = {
128
- parameters: { layout: 'centered' },
129
- render: () => (
130
- <NavigationMenu>
131
- <NavigationMenuList>
132
- {['首页', '产品', '文档', '社区', '联系我们'].map((label) => (
133
- <NavigationMenuItem key={label}>
134
- <NavigationMenuLink
135
- asChild
136
- className={navigationMenuTriggerStyle()}
137
- >
138
- <a href={`#${label}`} onClick={(e) => e.preventDefault()}>
139
- {label}
140
- </a>
141
- </NavigationMenuLink>
142
- </NavigationMenuItem>
143
- ))}
144
- </NavigationMenuList>
145
- </NavigationMenu>
146
- ),
147
- };
148
-
149
- export const DisabledItem: Story = {
150
- parameters: { layout: 'centered' },
151
- render: () => (
152
- <NavigationMenu>
153
- <NavigationMenuList>
154
- <NavigationMenuItem>
155
- <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
156
- <a href="#docs" onClick={(e) => e.preventDefault()}>
157
- 文档
158
- </a>
159
- </NavigationMenuLink>
160
- </NavigationMenuItem>
161
- <NavigationMenuItem>
162
- <NavigationMenuLink
163
- asChild
164
- aria-disabled
165
- className={cn(
166
- navigationMenuTriggerStyle(),
167
- 'pointer-events-none opacity-50',
168
- )}
169
- >
170
- <span>API(内部预览)</span>
171
- </NavigationMenuLink>
172
- </NavigationMenuItem>
173
- <NavigationMenuItem>
174
- <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
175
- <a href="#blog" onClick={(e) => e.preventDefault()}>
176
- 博客
177
- </a>
178
- </NavigationMenuLink>
179
- </NavigationMenuItem>
180
- </NavigationMenuList>
181
- </NavigationMenu>
182
- ),
183
- };
184
-
185
- /**
186
- * “纵向”其实是侧边列表形态的导航。Radix `NavigationMenu` 主要面向水平、
187
- * 可开富面板的主导航;需要侧边导航选 `Sidebar`。下面是将 NavigationMenu
188
- * `orientation="vertical"` 下的简样实例(供对齐 antd `Menu mode="vertical"` 的过度能力)。
189
- */
190
- export const Vertical: Story = {
191
- parameters: { layout: 'centered' },
192
- render: () => (
193
- <NavigationMenu orientation="vertical" className="w-56 max-w-none flex-col items-stretch">
194
- <NavigationMenuList className="w-full flex-col items-stretch gap-0">
195
- {[
196
- { label: '仪表盘', href: '#dashboard' },
197
- { label: '项目', href: '#projects' },
198
- { label: '任务', href: '#tasks' },
199
- { label: '设置', href: '#settings' },
200
- ].map((it) => (
201
- <NavigationMenuItem key={it.label} className="w-full">
202
- <NavigationMenuLink
203
- asChild
204
- className={cn(navigationMenuTriggerStyle(), 'w-full justify-start')}
205
- >
206
- <a href={it.href} onClick={(e) => e.preventDefault()}>
207
- {it.label}
208
- </a>
209
- </NavigationMenuLink>
210
- </NavigationMenuItem>
211
- ))}
212
- </NavigationMenuList>
213
- </NavigationMenu>
214
- ),
215
- };
@@ -1,129 +0,0 @@
1
- import * as React from 'react';
2
- import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
3
- import { cva } from 'class-variance-authority';
4
- import { ChevronDown } from 'lucide-react';
5
-
6
- import { cn } from '@/utils/cn';
7
-
8
- const NavigationMenu = React.forwardRef<
9
- React.ElementRef<typeof NavigationMenuPrimitive.Root>,
10
- React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
11
- >(({ className, children, ...props }, ref) => (
12
- <NavigationMenuPrimitive.Root
13
- ref={ref}
14
- className={cn(
15
- 'relative z-10 flex max-w-max flex-1 items-center justify-center',
16
- className,
17
- )}
18
- {...props}
19
- >
20
- {children}
21
- <NavigationMenuViewport />
22
- </NavigationMenuPrimitive.Root>
23
- ));
24
- NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
25
-
26
- const NavigationMenuList = React.forwardRef<
27
- React.ElementRef<typeof NavigationMenuPrimitive.List>,
28
- React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
29
- >(({ className, ...props }, ref) => (
30
- <NavigationMenuPrimitive.List
31
- ref={ref}
32
- className={cn(
33
- 'group flex flex-1 list-none items-center justify-center gap-1',
34
- className,
35
- )}
36
- {...props}
37
- />
38
- ));
39
- NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
40
-
41
- const NavigationMenuItem = NavigationMenuPrimitive.Item;
42
-
43
- const navigationMenuTriggerStyle = cva(
44
- 'group inline-flex h-9 w-max cursor-pointer items-center justify-center rounded-md bg-background px-4 py-2 text-xs font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
45
- );
46
-
47
- const NavigationMenuTrigger = React.forwardRef<
48
- React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
49
- React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
50
- >(({ className, children, ...props }, ref) => (
51
- <NavigationMenuPrimitive.Trigger
52
- ref={ref}
53
- className={cn(navigationMenuTriggerStyle(), 'group', className)}
54
- {...props}
55
- >
56
- {children}{' '}
57
- <ChevronDown
58
- className="relative top-px ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180"
59
- aria-hidden="true"
60
- />
61
- </NavigationMenuPrimitive.Trigger>
62
- ));
63
- NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
64
-
65
- const NavigationMenuContent = React.forwardRef<
66
- React.ElementRef<typeof NavigationMenuPrimitive.Content>,
67
- React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
68
- >(({ className, ...props }, ref) => (
69
- <NavigationMenuPrimitive.Content
70
- ref={ref}
71
- className={cn(
72
- 'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
73
- className,
74
- )}
75
- {...props}
76
- />
77
- ));
78
- NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
79
-
80
- const NavigationMenuLink = NavigationMenuPrimitive.Link;
81
-
82
- const NavigationMenuViewport = React.forwardRef<
83
- React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
84
- React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
85
- >(({ className, ...props }, ref) => (
86
- <div className={cn('absolute left-0 top-full flex justify-center')}>
87
- <NavigationMenuPrimitive.Viewport
88
- ref={ref}
89
- className={cn(
90
- 'origin-top-center relative mt-1.5 h-radix-nav-viewport w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-radix-nav-viewport',
91
- className,
92
- )}
93
- {...props}
94
- />
95
- </div>
96
- ));
97
- NavigationMenuViewport.displayName =
98
- NavigationMenuPrimitive.Viewport.displayName;
99
-
100
- const NavigationMenuIndicator = React.forwardRef<
101
- React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
102
- React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
103
- >(({ className, ...props }, ref) => (
104
- <NavigationMenuPrimitive.Indicator
105
- ref={ref}
106
- className={cn(
107
- 'top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in',
108
- className,
109
- )}
110
- {...props}
111
- >
112
- {/* eslint-disable-next-line teamix-evo/no-arbitrary-tw-value -- indicator arrow tip alignment 60% is shadcn-canonical, not a tokenizable layout value. */}
113
- <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
114
- </NavigationMenuPrimitive.Indicator>
115
- ));
116
- NavigationMenuIndicator.displayName =
117
- NavigationMenuPrimitive.Indicator.displayName;
118
-
119
- export {
120
- navigationMenuTriggerStyle,
121
- NavigationMenu,
122
- NavigationMenuList,
123
- NavigationMenuItem,
124
- NavigationMenuContent,
125
- NavigationMenuTrigger,
126
- NavigationMenuLink,
127
- NavigationMenuIndicator,
128
- NavigationMenuViewport,
129
- };
@@ -1,133 +0,0 @@
1
- ---
2
- id: notification
3
- name: notification
4
- type: component
5
- category: feedback
6
- since: 0.1.0
7
- package: '@teamix-evo/ui'
8
- displayName: 通知
9
- ---
10
-
11
- # Notification 通知
12
-
13
- 卡片式通知 — antd 独有补足。**等价 antd `Notification`**(右上角 title + description 卡片),与 sonner 同一渲染栈。基于 sonner `toast.custom` 二次封装,业务侧**只需要挂载一次 `<Toaster />`**,后续在任意地方调 `notification.success(...)` / `notification.destructive(...)` 等触发。4 档语义色对齐 [ADR 0021](../../../../docs/adr/0021-semantic-color-api-unification.md):`primary / success / warning / destructive`。
14
-
15
- ## When to use
16
-
17
- - 操作完成的"带描述卡片"反馈(部署成功、文件已上传、订单已生成)
18
- - 异步流程的最终结果通知(配 description 解释下一步)
19
- - 系统级提醒(订阅到期、新版本可用)
20
-
21
- ## When NOT to use
22
-
23
- - 短文字提示("已保存") → `toast()`(对应 antd `message`)
24
- - 阻塞式确认 → `Dialog` / `AlertDialog` / `Popconfirm`
25
- - 表单字段错误 → `FieldError`(就近显示)
26
-
27
- ## Props
28
-
29
- <!-- auto:props:begin -->
30
-
31
- _(组件无 `<Name>Props` interface — props 详见 [`notification.tsx`](./notification.tsx))_
32
-
33
- <!-- auto:props:end -->
34
-
35
- ## 依赖
36
-
37
- <!-- auto:deps:begin -->
38
-
39
- ### 同库依赖
40
-
41
- > `teamix-evo ui add notification` 时,以下 entry 会被自动连带安装(无需手动 add)。
42
-
43
- | Entry | 类型 | 描述 |
44
- | -------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
45
- | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
46
- | `sonner` | component | Toast 通知 — sonner 包装,等价 antd message + notification 并集(toast() 函数式 API + Toaster 容器,面性 5 状态图标 + 无边框) |
47
-
48
- ### npm 依赖
49
-
50
- > 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
51
-
52
- ```bash
53
- pnpm add sonner@^1.5.0 lucide-react@^0.460.0
54
- ```
55
-
56
- <!-- auto:deps:end -->
57
-
58
- ## AI 生成纪律
59
-
60
- - **业务侧必须挂载 `<Toaster />`** —— Notification 与 toast 共用同一容器,通常挂在 root layout
61
- - **`title` 用动词或事件名**:"部署成功"/"订单已创建";**不要**写"提示"等空话
62
- - **`description` 解释后果或下一步**:"用户可在 1 分钟内访问新版本"/"详情请查看订单页";**不要**重复 title
63
- - **语义不要混淆**:`success` 用于成功完成,`warning` 用于风险提示但操作未失败,`destructive` 用于真正失败 — 与 `Alert` / `Toast` 的语义一致(对齐 ADR 0021,不再使用 `info` / `error` 字面)
64
- - **不要在 onConfirm 里同时调 toast 和 notification** — 单次反馈选一种,避免视觉噪音
65
- - **`destroy(id)` 主动关闭**:用于"自动重试成功"等场景,把之前的 error notification 替换掉
66
-
67
- ## Examples
68
-
69
- ```tsx
70
- import { notification } from '@/components/ui/notification';
71
-
72
- // 各类型快捷方法
73
- notification.success({
74
- title: '部署成功',
75
- description: '用户可在 1 分钟内访问新版本',
76
- });
77
-
78
- notification.warning({
79
- title: '配额即将到期',
80
- description: '请在 3 天内续费,否则服务将暂停',
81
- });
82
-
83
- notification.destructive({
84
- title: '上传失败',
85
- description: '请检查网络连接后重试',
86
- });
87
-
88
- // 自定义 + 操作按钮(action 透传 sonner)
89
- const id = notification.open({
90
- color: 'primary',
91
- title: '新版本可用',
92
- description: 'v2.5 已发布,刷新页面以应用更新',
93
- action: { label: '刷新', onClick: () => location.reload() },
94
- });
95
-
96
- // 主动关闭
97
- notification.destroy(id);
98
- ```
99
-
100
- > 应用根组件需要挂载一次 `<Toaster />`(来自 `sonner` entry),Notification 与 toast 共用此容器。
101
-
102
- ---
103
-
104
- ## Notification 形态 — 旧库 API → 新映射
105
-
106
- > 旧库 `Notification`(hybridcloud,含 open/success/error/warning 命令式) → 新库 `notification`(小写对象)。
107
- > 新库基于 sonner `toast.custom` 封装,共用 `<Toaster />` 容器。
108
-
109
- ### 命名 & 结构映射
110
-
111
- | 旧库 | 新库 | 说明 |
112
- | ------------------------------------ | ----------------------------------------- | ----------------------------- |
113
- | `Notification` (类) | `notification` (对象) | 大小写变更 |
114
- | `Notification.success()` | `notification.success()` | 直接映射 |
115
- | `Notification.error()` | `notification.destructive()` | error → destructive(ADR 0021) |
116
- | `Notification.warning()` | `notification.warning()` | 直接映射 |
117
- | `Notification.notice()` | `notification.open({ color: 'primary' })` | notice → primary |
118
- | `options.content` | `options.description` | 字段重命名 |
119
- | `options.type` | `options.color` | type → color(4 档语义色) |
120
- | `Notification.close(key)` | `notification.destroy(id)` | 主动关闭 |
121
- | `Notification.config({ placement })` | `<Toaster position="..." />` | 声明式配置 |
122
- | `size: large/medium` | 不复刻 | 固定尺寸 |
123
- | `icon` 自定义 | 不复刻 | 固定语义图标(规范化) |
124
- | `type='help'` | `notification.open({ color: 'primary' })` | 合并到 primary |
125
-
126
- ### 迁移 FAQ
127
-
128
- | 问题 | 回答 |
129
- | ----------------------------- | ------------------------------------------------------------------- |
130
- | error 为什么变成 destructive? | 对齐 ADR 0021 语义色规范,统一用 destructive 表示错误/危险 |
131
- | Notification 和 toast 的关系? | 共用 Toaster 容器;简短提示用 toast,带标题+描述的卡片用 notification |
132
- | 怎么控制位置? | `<Toaster position="top-right" />`(默认右上) |
133
- | 怎么加 action 按钮? | `notification.open({ ..., action: { label, onClick } })` |
@@ -1,98 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
2
- import { Toaster } from '@/components/sonner/sonner';
3
- import { notification } from './notification';
4
- import { Button } from '@/components/button/button';
5
-
6
- const meta: Meta = {
7
- title: '反馈 · Feedback/Notification',
8
- tags: ['autodocs'],
9
- parameters: {
10
- docs: {
11
- description: {
12
- component:
13
- '卡片式通知 — 右上角 title + description 卡片(部署成功 / 配额提醒)。基于 sonner toast.custom,业务侧只需挂载一次 `<Toaster />`,后续在任意地方 imperative 触发。4 档语义色(primary / success / warning / destructive)对齐 ADR 0021,与 toast(message)互补。',
14
- },
15
- },
16
- },
17
- };
18
-
19
- export default meta;
20
- type Story = StoryObj;
21
-
22
- export const Playground: Story = {
23
- render: () => (
24
- <div className="flex flex-col gap-2">
25
- <Toaster position="top-right" />
26
- <div className="flex flex-wrap gap-2">
27
- <Button
28
- variant="outline"
29
- onClick={() =>
30
- notification.primary({
31
- title: '提示',
32
- description: '这是一条 primary 通知',
33
- })
34
- }
35
- >
36
- Primary
37
- </Button>
38
- <Button
39
- onClick={() =>
40
- notification.success({
41
- title: '部署成功',
42
- description: '用户可在 1 分钟内访问新版本',
43
- })
44
- }
45
- >
46
- Success
47
- </Button>
48
- <Button
49
- variant="outline"
50
- onClick={() =>
51
- notification.warning({
52
- title: '配额即将到期',
53
- description: '请在 3 天内续费,否则服务将暂停',
54
- })
55
- }
56
- >
57
- Warning
58
- </Button>
59
- <Button
60
- variant="destructive"
61
- onClick={() =>
62
- notification.destructive({
63
- title: '上传失败',
64
- description: '请检查网络连接后重试',
65
- })
66
- }
67
- >
68
- Destructive
69
- </Button>
70
- </div>
71
- </div>
72
- ),
73
- };
74
-
75
- export const WithAction: Story = {
76
- render: () => (
77
- <div className="flex flex-col gap-2">
78
- <Toaster position="top-right" />
79
- <Button
80
- onClick={() =>
81
- notification.open({
82
- color: 'primary',
83
- title: '新版本可用',
84
- description: 'v2.5 已发布,刷新页面以应用更新',
85
- action: {
86
- label: '刷新',
87
- onClick: () => {
88
- alert('刷新');
89
- },
90
- },
91
- })
92
- }
93
- >
94
- 显示带操作的通知
95
- </Button>
96
- </div>
97
- ),
98
- };
@@ -1,99 +0,0 @@
1
- import * as React from 'react';
2
- import { toast, type ExternalToast } from 'sonner';
3
- import { AlertCircle, CheckCircle2, Info, XCircle } from 'lucide-react';
4
-
5
- import { cn } from '@/utils/cn';
6
-
7
- /**
8
- * 卡片式通知 — antd 独有补足。**等价 antd `Notification`**(右上角卡片,与 sonner 同一栈)。
9
- * 基于 sonner 二次封装,提供 antd 风格的"标题 + 描述 + 状态图标"卡片化 API,
10
- * 与 `Toaster`(toast 容器)共用同一渲染层 —— 业务侧只需要挂载一次 `<Toaster />`。
11
- *
12
- * 与 `toast()` 区别:
13
- * - `toast()` 是无标题短文字(对应 antd `message`)
14
- * - `notification.open()` 是 **title + description 卡片**(对应 antd `notification`)
15
- */
16
-
17
- export type NotificationColor =
18
- | 'primary'
19
- | 'success'
20
- | 'warning'
21
- | 'destructive';
22
-
23
- export interface NotificationOptions
24
- extends Omit<ExternalToast, 'description' | 'icon'> {
25
- /** 标题(antd `message` 并集,但 antd 这里命名为 message,易混淆 — 我们用更准确的 `title`)。 */
26
- title: React.ReactNode;
27
- /** 描述(antd `description` 并集)。 */
28
- description?: React.ReactNode;
29
- /**
30
- * 语义色(对齐 ADR 0021)— 决定左侧 icon 颜色;`open()` 默认 `primary`。
31
- * `success` / `warning` / `destructive` 也可用对应快捷方法。
32
- */
33
- color?: NotificationColor;
34
- /**
35
- * 自定义左侧 icon — 覆盖默认按 `color` 映射的 lucide icon。
36
- * 传 `null` 显式隐藏 icon(只展示文字内容)。
37
- * @example
38
- * notification.open({ icon: <UserPlus className="size-5 text-primary" />, title: '新用户加入' })
39
- */
40
- icon?: React.ReactNode | null;
41
- }
42
-
43
- const iconMap: Record<NotificationColor, React.ReactNode> = {
44
- primary: <Info className="size-5 text-primary" />,
45
- success: <CheckCircle2 className="size-5 text-success" />,
46
- warning: <AlertCircle className="size-5 text-warning" />,
47
- destructive: <XCircle className="size-5 text-destructive" />,
48
- };
49
-
50
- function fire(
51
- color: NotificationColor,
52
- { title, description, icon, ...rest }: NotificationOptions,
53
- ) {
54
- // icon: undefined → 默认按 color 映射;null → 显式隐藏 icon;其他 ReactNode → 自定义
55
- const iconNode = icon === undefined ? iconMap[color] : icon;
56
- return toast.custom(
57
- (id) => (
58
- <div
59
- role="alert"
60
- className={cn(
61
- 'flex w-notification gap-3 rounded-md border border-border bg-background p-4 text-xs shadow-lg',
62
- )}
63
- >
64
- {iconNode ? <span className="mt-0.5 shrink-0">{iconNode}</span> : null}
65
- <div className="min-w-0 flex-1">
66
- <div className="font-semibold leading-tight">{title}</div>
67
- {description ? (
68
- <div className="mt-1 text-muted-foreground">{description}</div>
69
- ) : null}
70
- </div>
71
- <button
72
- type="button"
73
- aria-label="关闭"
74
- onClick={() => toast.dismiss(id)}
75
- className="cursor-pointer text-muted-foreground transition-colors hover:text-foreground"
76
- >
77
- ×
78
- </button>
79
- </div>
80
- ),
81
- rest,
82
- );
83
- }
84
-
85
- const notification = {
86
- /**
87
- * 通用打开 — 通过 `color` 区分状态;若只传 title,样式同 `primary`。
88
- */
89
- open: (opts: NotificationOptions) => fire(opts.color ?? 'primary', opts),
90
- primary: (opts: Omit<NotificationOptions, 'color'>) => fire('primary', opts),
91
- success: (opts: Omit<NotificationOptions, 'color'>) => fire('success', opts),
92
- warning: (opts: Omit<NotificationOptions, 'color'>) => fire('warning', opts),
93
- destructive: (opts: Omit<NotificationOptions, 'color'>) =>
94
- fire('destructive', opts),
95
- /** 主动关闭某条(传 `id`)/ 全部(不传)。 */
96
- destroy: (id?: string | number) => toast.dismiss(id),
97
- };
98
-
99
- export { notification };