@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
package/src/components/sonner/sonner.tsx DELETED
@@ -1,169 +0,0 @@
1
- import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'sonner';
2
- import {
3
- CircleCheck,
4
- CircleX,
5
- Info,
6
- Loader2,
7
- TriangleAlert,
8
- } from 'lucide-react';
9
-
10
- import { cn } from '@/utils/cn';
11
-
12
- /**
13
- * Toaster 容器 — 应用根挂一次,后续在任意地方调 `toast()` / `toast.success()` / `toast.error()` /
14
- * `toast.warning()` / `toast.info()` / `toast.loading()` / `toast.promise()` 等触发 toast。
15
- *
16
- * 视觉走 design tokens —— **去边框、纯 shadow 分界、面性状态图标**:
17
- * - 卡片:`border-0` + `shadow-lg`,卡片不再有线条切割感
18
- * - 5 状态:`success` / `error` / `warning` / `info` / `loading` 都有对齐 OpenTrek 的配色与图标
19
- * - 图标:`fill-* + text-*-foreground` 实心圆/三角面性风格(基于 lucide-react)
20
- *
21
- * 来自 antd `message` + `notification` 的并集 — sonner 的 toast API 已经覆盖了:
22
- * - 短文字提示(对应 message)
23
- * - 标题 + 描述(对应 notification)
24
- * - 操作按钮(action)
25
- * - Promise 状态切换(loading → success / error)
26
- */
27
- export interface ToasterProps
28
- extends Omit<
29
- SonnerProps,
30
- | 'position'
31
- | 'duration'
32
- | 'visibleToasts'
33
- | 'expand'
34
- | 'richColors'
35
- | 'closeButton'
36
- | 'theme'
37
- | 'dir'
38
- > {
39
- /**
40
- * Toast 弹出位置(对齐 antd `message.config.placement`)。
41
- * @default "top-right"
42
- */
43
- position?: SonnerProps['position'];
44
- /**
45
- * 自动消失时长(ms)— 0 表示常驻不自动关闭。
46
- * @default 4000
47
- */
48
- duration?: number;
49
- /**
50
- * 同屏最大可见 toast 数(超出旧的自动收起)。
51
- * @default 3
52
- */
53
- visibleToasts?: number;
54
- /**
55
- * 鼠标 hover 时是否展开堆叠的 toast(否则保持折叠堆叠状)。
56
- * @default false
57
- */
58
- expand?: boolean;
59
- /**
60
- * 启用 sonner 自带的"丰富配色"(更高对比度的状态色背景);
61
- * 关闭则走我们的视觉(对齐 OpenTrek tokens)。
62
- * @default false
63
- */
64
- richColors?: boolean;
65
- /**
66
- * 每张 toast 是否显示关闭按钮(右上角 ×)。
67
- * @default false
68
- */
69
- closeButton?: boolean;
70
- /**
71
- * 主题 — `'light'` / `'dark'` / `'system'`(跟随 OS 偏好)。
72
- * 通常无需手传,组件会跟随 `<html>` 上的 `.dark` class 自动切换。
73
- */
74
- theme?: SonnerProps['theme'];
75
- /**
76
- * 文字方向 — `'ltr'` / `'rtl'` / `'auto'`。
77
- * @default "auto"
78
- */
79
- dir?: SonnerProps['dir'];
80
- }
81
-
82
- /**
83
- * 面性状态图标 —— 通过 `fill-*` 给 SVG 根元素填充语义色,
84
- * 再用 `text-*-foreground` 把 currentColor 设为对比色;
85
- * lucide SVG 内部 `<circle>` / `<path>` 默认 `stroke="currentColor"`,
86
- * 因此环线与勾叉自动呈现高对比 foreground 颜色,得到"色块底 + 白色记号"的实心视觉。
87
- */
88
- const filledIcons = {
89
- success: (
90
- <CircleCheck
91
- aria-hidden
92
- className="size-5 fill-success text-success-foreground"
93
- />
94
- ),
95
- error: (
96
- <CircleX
97
- aria-hidden
98
- className="size-5 fill-destructive text-destructive-foreground"
99
- />
100
- ),
101
- warning: (
102
- <TriangleAlert
103
- aria-hidden
104
- className="size-5 fill-warning text-warning-foreground"
105
- />
106
- ),
107
- info: <Info aria-hidden className="size-5 fill-info text-info-foreground" />,
108
- loading: (
109
- <Loader2
110
- aria-hidden
111
- className="size-5 animate-spin text-muted-foreground"
112
- />
113
- ),
114
- };
115
-
116
- const Toaster = ({ className, toastOptions, ...props }: ToasterProps) => {
117
- return (
118
- <Sonner
119
- theme="system"
120
- className={cn('toaster group', className)}
121
- icons={filledIcons}
122
- toastOptions={{
123
- ...toastOptions,
124
- classNames: {
125
- // 基础卡片:去边框,纯 shadow 分界,留出图标 / 文本节奏
126
- toast: cn(
127
- 'group toast',
128
- 'group-[.toaster]:bg-background group-[.toaster]:text-foreground',
129
- 'group-[.toaster]:border-0 group-[.toaster]:shadow-lg',
130
- 'group-[.toaster]:rounded-md group-[.toaster]:px-4 group-[.toaster]:py-3',
131
- 'group-[.toaster]:gap-3',
132
- ),
133
- // 状态色:每种状态对应"浅底 + 同色文字",图标已在 icons 内填充实心色块
134
- success: cn(
135
- 'group-[.toaster]:bg-success-subtle group-[.toaster]:text-success',
136
- ),
137
- error: cn(
138
- 'group-[.toaster]:bg-destructive/10 group-[.toaster]:text-destructive',
139
- ),
140
- warning: cn(
141
- 'group-[.toaster]:bg-warning-subtle group-[.toaster]:text-warning',
142
- ),
143
- info: cn(
144
- 'group-[.toaster]:bg-info-subtle group-[.toaster]:text-info',
145
- ),
146
- loading: cn(
147
- 'group-[.toaster]:bg-muted group-[.toaster]:text-foreground',
148
- ),
149
- // 默认 / 非状态 toast
150
- default: cn(
151
- 'group-[.toaster]:bg-background group-[.toaster]:text-foreground',
152
- ),
153
- description: 'group-[.toast]:text-muted-foreground',
154
- actionButton:
155
- 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
156
- cancelButton:
157
- 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
158
- icon: 'group-[.toast]:shrink-0',
159
- ...(toastOptions?.classNames ?? {}),
160
- },
161
- }}
162
- {...props}
163
- />
164
- );
165
- };
166
-
167
- // Re-export the imperative API so consumers only depend on this module.
168
- export { toast } from 'sonner';
169
- export { Toaster };
package/src/components/spinner/spinner.meta.md DELETED
@@ -1,125 +0,0 @@
1
- ---
2
- id: spinner
3
- name: Spinner
4
- displayName: 加载指示器
5
- type: component
6
- category: feedback
7
- since: 0.1.0
8
- package: '@teamix-evo/ui'
9
- ---
10
-
11
- # Spinner 加载指示器
12
-
13
- 旋转加载指示器 — shadcn 2025-10 新增,**等价 antd `Spin`** 能力并集。核心 `Spinner` 是行内 / 局部旋转指示;配套 `SpinnerOverlay` 实现 antd `<Spin>{children}</Spin>` 的包裹遮罩形态。
14
-
15
- ## When to use
16
-
17
- - 按钮 / 表单内联 loading(`Button loading` 内部已用同一图标,这里独立 spinner 用于自定义触发器)
18
- - 容器局部加载(请求中) — 需要遮罩时用 `SpinnerOverlay`
19
- - 全屏 loading 占位(`size="xl"` + 居中)
20
-
21
- ## When NOT to use
22
-
23
- - 内容结构占位 → `Skeleton`(组件级 / 段落级)
24
- - 整页"模态阻塞 loading" → `Dialog` + Spinner 自行组合(本组件不内置遮罩)
25
- - 进度可知场景 → `Progress`(线形)或 `ProgressCircle`(环形)
26
-
27
- ## Props
28
-
29
- > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
30
-
31
- <!-- auto:props:begin -->
32
- | 名称 | 类型 | 默认值 | 必填 | 说明 |
33
- | --- | --- | --- | --- | --- |
34
- | `size` | `'sm' \| 'md' \| 'default' \| 'lg' \| 'xl'` | `"default"` | – | 尺寸 — 与 antd Spin 的 small/middle/large 对齐(加 xl 用于全屏 loading)。 |
35
- | `color` | `'default' \| 'muted' \| 'primary' \| 'destructive'` | `"default"` | – | 配色 — `muted` 走次级文本色;`primary` / `destructive` 走语义色。对齐 [ADR 0021](../../../../../docs/adr/0021-semantic-color-api-unification.md)。 |
36
- | `label` | `string` | – | – | 给读屏器的描述(默认 "Loading...")。 |
37
- <!-- auto:props:end -->
38
-
39
- ## 依赖
40
-
41
- > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成，数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
42
-
43
- <!-- auto:deps:begin -->
44
- ### 同库依赖
45
-
46
- > `teamix-evo ui add spinner` 时,以下 entry 会被自动连带安装(无需手动 add)。
47
-
48
- | Entry | 类型 | 描述 |
49
- | --- | --- | --- |
50
- | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
51
-
52
- ### npm 依赖
53
-
54
- > 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
55
-
56
- ```bash
57
- pnpm add class-variance-authority@^0.7.0 lucide-react@^0.460.0
58
- ```
59
- <!-- auto:deps:end -->
60
-
61
- ## AI 生成纪律
62
-
63
- - **不要自己写 `<div className="animate-spin">`** — 用本组件,保留读屏可访问性
64
- - **`color="primary"` 配主操作 loading**,`color="destructive"` 仅用于真正失败回退 — 不要乱用
65
- - **不要给 spinner 加旋转字幕 / 进度数字** — 那是 Progress 的职责,语义不同
66
- - **包裹遮罩场景请用 `SpinnerOverlay`** — 不要手写 `relative` + 遮罩 div,不要把遮罩逻辑塞进 `Spinner` 本体
67
- - **使用 SpinnerOverlay 时,外层 `className` 应控制边框 / 背景 / 圆角** — 本组件只负责 loading 的遮罩与 spinner 居中
68
-
69
- ## Examples
70
-
71
- ```tsx
72
- import { Spinner, SpinnerOverlay } from '@/components/ui/spinner';
73
-
74
- // 行内
75
- <span>正在保存 <Spinner size="sm" color="muted" /></span>
76
-
77
- // 居中
78
- <div className="flex h-40 items-center justify-center">
79
- <Spinner size="lg" color="primary" label="加载用户信息..." />
80
- </div>
81
-
82
- // 全屏
83
- <div className="fixed inset-0 grid place-items-center bg-background/80 backdrop-blur-sm">
84
- <Spinner size="xl" color="primary" />
85
- </div>
86
-
87
- // 包裹子元遮罩(antd Spin wrap children 并集)
88
- <SpinnerOverlay loading={isFetching} tip="加载中..." className="rounded-md border">
89
- <Card>...</Card>
90
- </SpinnerOverlay>
91
- ```
92
-
93
- ---
94
-
95
- ## Loading 形态 — 旧库 API → 新映射
96
-
97
- > 旧库 `Loading`(hybridcloud) → 新库 `Spinner`(行内) + `SpinnerOverlay`(包裹遮罩)。
98
- > 新库用 lucide `Loader2` + Tailwind `animate-spin`,视觉走 OpenTrek tokens。
99
-
100
- ### 命名 & 结构映射
101
-
102
- | 旧库 | 新库 | 说明 |
103
- | ----------------------- | ------------------------- | --------------------- |
104
- | `Loading` (无 children) | `Spinner` | 行内旋转图标 |
105
- | `Loading` (有 children) | `SpinnerOverlay` | 包裹遮罩加载 |
106
- | `visible` | `loading` | prop 重命名 |
107
- | `size: 'small'` | `size: 'sm'` | 尺寸缩写 |
108
- | `size: 'medium'` | `size: 'md' \| 'default'` | md = medium = default |
109
- | `size: 'large'` | `size: 'lg'` | 尺寸缩写 |
110
- | — | `size: 'xl'` | 新增(全屏加载用) |
111
- | `color='blue'` | `color='primary'` | 语义化 |
112
- | `tip` | `tip` | 保留(SpinnerOverlay) |
113
- | `tipAlign='right'` | 不复刻 | tip 固定下方 |
114
- | `indicator` 自定义 | 不复刻 | 固定 Loader2 图标 |
115
- | `fullScreen` | 不复刻 | 外层 div 自行组合 |
116
- | `disableScroll` | 不复刻 | 自行 overflow-hidden |
117
-
118
- ### 迁移 FAQ
119
-
120
- | 问题 | 回答 |
121
- | ------------------ | ------------------------------------------------------------------------------------ |
122
- | visible → loading? | prop 改名,语义相同(boolean) |
123
- | 包裹加载怎么写? | `<SpinnerOverlay loading={flag}>{children}</SpinnerOverlay>` |
124
- | 全屏加载怎么做? | `<div className="fixed inset-0 grid place-items-center"><Spinner size="xl" /></div>` |
125
- | blur 效果? | `<SpinnerOverlay blur loading>...</SpinnerOverlay>` — 遮罩加模糊 |
package/src/components/spinner/spinner.stories.tsx DELETED
@@ -1,123 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
2
- import { Spinner, SpinnerOverlay } from './spinner';
3
-
4
- const meta: Meta<typeof Spinner> = {
5
- title: '反馈 · Feedback/Spinner',
6
- component: Spinner,
7
- tags: ['autodocs'],
8
- parameters: {
9
- docs: {
10
- description: {
11
- component:
12
- '旋转加载指示器 — 局部 / 行内 loading（请求中、按钮提交、占位等待）。基于 lucide Loader2，4 档尺寸 + 4 档配色，自带 role="status" 与 sr-only 读屏文案。配套 `SpinnerOverlay` 可实现 antd `<Spin>{children}</Spin>` 的包裹遮罩形态。',
13
- },
14
- },
15
- },
16
- argTypes: {
17
- size: { control: 'inline-radio', options: ['sm', 'default', 'lg', 'xl'] },
18
- color: {
19
- control: 'inline-radio',
20
- options: ['default', 'muted', 'primary', 'destructive'],
21
- },
22
- },
23
- args: { size: 'default', color: 'default' },
24
- };
25
-
26
- export default meta;
27
- type Story = StoryObj<typeof Spinner>;
28
-
29
- export const Playground: Story = {};
30
-
31
- export const Sizes: Story = {
32
- parameters: { controls: { disable: true } },
33
- render: () => (
34
- <div className="flex items-end gap-6">
35
- <Spinner size="sm" />
36
- <Spinner size="default" />
37
- <Spinner size="lg" />
38
- <Spinner size="xl" />
39
- </div>
40
- ),
41
- };
42
-
43
- export const Colors: Story = {
44
- parameters: { controls: { disable: true } },
45
- render: () => (
46
- <div className="flex items-center gap-6">
47
- <Spinner color="default" />
48
- <Spinner color="muted" />
49
- <Spinner color="primary" />
50
- <Spinner color="destructive" />
51
- </div>
52
- ),
53
- };
54
-
55
- export const Inline: Story = {
56
- parameters: { controls: { disable: true } },
57
- render: () => (
58
- <p className="text-sm">
59
- 正在保存草稿 <Spinner size="sm" color="muted" />
60
- </p>
61
- ),
62
- };
63
-
64
- export const Centered: Story = {
65
- parameters: { controls: { disable: true } },
66
- render: () => (
67
- <div className="flex h-40 items-center justify-center rounded-md border border-border">
68
- <Spinner size="lg" color="primary" />
69
- </div>
70
- ),
71
- };
72
-
73
- // ─── SpinnerOverlay (wrap children) ─────────────────────────────────────
74
-
75
- export const OverlayBasic: StoryObj<typeof SpinnerOverlay> = {
76
- name: 'Overlay · 包裹子元遮罩',
77
- parameters: { controls: { disable: true } },
78
- render: () => (
79
- <SpinnerOverlay tip="加载中…" className="w-80 rounded-md border border-border">
80
- <div className="flex flex-col gap-2 p-6">
81
- <div className="text-base font-semibold">项目名称</div>
82
- <p className="text-sm text-muted-foreground">
83
- 内容被半透明遮罩覆盖，但仍然占据原有空间，加载结束后不会抖动。
84
- </p>
85
- <div className="text-xs text-muted-foreground">2 小时前·北京</div>
86
- </div>
87
- </SpinnerOverlay>
88
- ),
89
- };
90
-
91
- export const OverlayBlur: StoryObj<typeof SpinnerOverlay> = {
92
- name: 'Overlay · 高斯模糊',
93
- parameters: { controls: { disable: true } },
94
- render: () => (
95
- <SpinnerOverlay
96
- blur
97
- tip="提交中…"
98
- className="w-80 rounded-md border border-border"
99
- >
100
- <div className="flex flex-col gap-2 p-6">
101
- <div className="text-base font-semibold">提交表单</div>
102
- <p className="text-sm text-muted-foreground">
103
- 开启 blur 后，内容会轻微模糊，强化 “不可交互” 的视觉提示。
104
- </p>
105
- </div>
106
- </SpinnerOverlay>
107
- ),
108
- };
109
-
110
- export const OverlayInactive: StoryObj<typeof SpinnerOverlay> = {
111
- name: 'Overlay · 未加载状态',
112
- parameters: { controls: { disable: true } },
113
- render: () => (
114
- <SpinnerOverlay loading={false} className="w-80 rounded-md border border-border">
115
- <div className="flex flex-col gap-2 p-6">
116
- <div className="text-base font-semibold">加载完成</div>
117
- <p className="text-sm text-muted-foreground">
118
- loading=false 时仅渲染 children，零额外开销。
119
- </p>
120
- </div>
121
- </SpinnerOverlay>
122
- ),
123
- };
package/src/components/spinner/spinner.tsx DELETED
@@ -1,166 +0,0 @@
1
- import * as React from 'react';
2
- import { cva, type VariantProps } from 'class-variance-authority';
3
- import { Loader2 } from 'lucide-react';
4
-
5
- import { cn } from '@/utils/cn';
6
-
7
- const spinnerVariants = cva('inline-block shrink-0 animate-spin', {
8
- variants: {
9
- size: {
10
- sm: 'size-3',
11
- md: 'size-4',
12
- default: 'size-4',
13
- lg: 'size-6',
14
- xl: 'size-8',
15
- },
16
- color: {
17
- default: 'text-foreground',
18
- muted: 'text-muted-foreground',
19
- primary: 'text-primary',
20
- destructive: 'text-destructive',
21
- },
22
- },
23
- defaultVariants: { size: 'default', color: 'default' },
24
- });
25
-
26
- export interface SpinnerProps
27
- extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,
28
- VariantProps<typeof spinnerVariants> {
29
- /**
30
- * 尺寸 — 与 antd Spin 的 small/middle/large 对齐(加 xl 用于全屏 loading)。
31
- * @default "default"
32
- */
33
- size?: 'sm' | 'md' | 'default' | 'lg' | 'xl';
34
- /**
35
- * 配色 — `muted` 走次级文本色;`primary` / `destructive` 走语义色。对齐 [ADR 0021](../../../../../docs/adr/0021-semantic-color-api-unification.md)。
36
- * @default "default"
37
- */
38
- color?: 'default' | 'muted' | 'primary' | 'destructive';
39
- /**
40
- * 给读屏器的描述(默认 "Loading...")。
41
- */
42
- label?: string;
43
- }
44
-
45
- /**
46
- * 简单旋转 loading — shadcn 2025-10 新增,等价 antd `Spin`(无遮罩版)。
47
- * 需要"包裹内容显示遮罩 loading"时使用配套的 `SpinnerOverlay`。
48
- */
49
- const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(
50
- ({ size, color, label = 'Loading...', className, ...props }, ref) => (
51
- <span
52
- ref={ref}
53
- role="status"
54
- aria-live="polite"
55
- className={cn('inline-flex items-center', className)}
56
- {...props}
57
- >
58
- <Loader2
59
- className={cn(spinnerVariants({ size, color }))}
60
- aria-hidden="true"
61
- />
62
- <span className="sr-only">{label}</span>
63
- </span>
64
- ),
65
- );
66
- Spinner.displayName = 'Spinner';
67
-
68
- // ─── SpinnerOverlay(antd `Spin` wrap children 并集)─────────────────────────
69
-
70
- export interface SpinnerOverlayProps
71
- extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
72
- /**
73
- * 是否处于加载中 — `true` 时渲染半透明遮罩 + 居中 spinner;`false` 时仅渲染 children。
74
- * @default true
75
- */
76
- loading?: boolean;
77
- /**
78
- * 内层 spinner 尺寸(透传给 [`Spinner`](./spinner.tsx) 的 `size`)。
79
- * @default "lg"
80
- */
81
- size?: SpinnerProps['size'];
82
- /**
83
- * 内层 spinner 配色(透传给 [`Spinner`](./spinner.tsx) 的 `color`)。
84
- * @default "primary"
85
- */
86
- color?: SpinnerProps['color'];
87
- /**
88
- * 图标下方的提示文案(antd `Spin.tip` 并集);为空则只渲染 spinner。
89
- */
90
- tip?: React.ReactNode;
91
- /**
92
- * 被包裹的内容 — 加载中时仍渲染但被遮罩覆盖,占据原有空间不抖动。
93
- */
94
- children?: React.ReactNode;
95
- /**
96
- * 是否对内容做高斯模糊(配合半透明遮罩,营造 "内容被禁用" 视感)。
97
- * @default false
98
- */
99
- blur?: boolean;
100
- }
101
-
102
- /**
103
- * 包裹内容的加载遮罩 — 等价 antd `<Spin>{children}</Spin>` 的 wrap children 形态。
104
- * 加载中时:外层 `relative` 容器 + 半透明遮罩 + 居中 spinner + 可选 tip;
105
- * 非加载中时:children 透传,无任何额外节点(零运行时开销)。
106
- *
107
- * 实现纪律:
108
- * - 不内嵌别的容器样式 — 由消费方决定 Card / Section / 自定义边框
109
- * - 遮罩用 `bg-background/60 backdrop-blur-[1px]` 走 OpenTrek tokens,无字面色
110
- * - 加载中保留 children 在 DOM(`aria-busy="true"`),不做条件渲染避免布局抖动
111
- */
112
- const SpinnerOverlay = React.forwardRef<HTMLDivElement, SpinnerOverlayProps>(
113
- (
114
- {
115
- loading = true,
116
- size = 'lg',
117
- color = 'primary',
118
- tip,
119
- blur = false,
120
- className,
121
- children,
122
- ...props
123
- },
124
- ref,
125
- ) => {
126
- if (!loading) {
127
- return (
128
- <div ref={ref} className={cn('relative', className)} {...props}>
129
- {children}
130
- </div>
131
- );
132
- }
133
- return (
134
- <div
135
- ref={ref}
136
- aria-busy="true"
137
- className={cn('relative', className)}
138
- {...props}
139
- >
140
- <div
141
- aria-hidden="true"
142
- className={cn(
143
- 'pointer-events-none transition-[filter,opacity] duration-200',
144
- blur && 'opacity-60 blur-[1px]',
145
- )}
146
- >
147
- {children}
148
- </div>
149
- <div
150
- className={cn(
151
- 'absolute inset-0 z-10 flex flex-col items-center justify-center gap-2',
152
- 'bg-background/60 backdrop-blur-[1px]',
153
- )}
154
- >
155
- <Spinner size={size} color={color} />
156
- {tip ? (
157
- <span className="text-xs text-muted-foreground">{tip}</span>
158
- ) : null}
159
- </div>
160
- </div>
161
- );
162
- },
163
- );
164
- SpinnerOverlay.displayName = 'SpinnerOverlay';
165
-
166
- export { Spinner, SpinnerOverlay, spinnerVariants };
package/src/components/statistic/statistic.meta.md DELETED
@@ -1,104 +0,0 @@
1
- ---
2
- id: statistic
3
- name: Statistic
4
- displayName: 统计数值
5
- type: component
6
- category: data-display
7
- since: 0.1.0
8
- package: '@teamix-evo/ui'
9
- ---
10
-
11
- # Statistic 统计数值
12
-
13
- 数字展示 — antd 独有补足。**仪表板专用**:大字号数值 + 标题 + 前缀(¥/$ / 图标)+ 后缀(单位)+ 趋势(上 / 下,自动配色)+ 千分位 + 精度。
14
-
15
- ## When to use
16
-
17
- - 仪表板核心指标(GMV / 在线人数 / 成功率)
18
- - 卡片内 KPI 数字
19
- - 报表 / 数据周报顶部摘要
20
-
21
- ## When NOT to use
22
-
23
- - 长文本数据 → 普通 `Paragraph`
24
- - 表格内数字 → 直接 `<td className="tabular-nums">`
25
- - 图表 → `Chart`(本仓暂未提供)
26
-
27
- ## Props
28
-
29
- <!-- auto:props:begin -->
30
- | 名称 | 类型 | 默认值 | 必填 | 说明 |
31
- | --- | --- | --- | --- | --- |
32
- | `title` | `React.ReactNode` | – | – | 标题(antd `title` 并集)。 |
33
- | `value` | `number \| string` | – | ✓ | 数值(antd `value` 并集)。 |
34
- | `prefix` | `React.ReactNode` | – | – | 前缀(图标 / 货币符号 / 单位)。 |
35
- | `suffix` | `React.ReactNode` | – | – | 后缀(单位 / 趋势)。 |
36
- | `precision` | `number` | – | – | 数值精度(antd `precision` 并集),仅 number 生效。 |
37
- | `groupSeparator` | `boolean` | `true` | – | 千分位分隔符。 |
38
- | `trend` | `'up' \| 'down' \| 'none'` | `"none"` | – | 趋势 — `up`(绿色 ↑)/ `down`(红色 ↓)/ `none`。前置在数值上方或左侧。 |
39
- | `trendValue` | `string \| number` | – | – | 趋势百分比文字(配 trend 显示在 suffix 区)。 |
40
- | `valueClassName` | `string` | – | – | 数值颜色覆盖(默认随 trend / 否则 foreground)。 |
41
- <!-- auto:props:end -->
42
-
43
- ## 依赖
44
-
45
- <!-- auto:deps:begin -->
46
- ### 同库依赖
47
-
48
- > `teamix-evo ui add statistic` 时,以下 entry 会被自动连带安装(无需手动 add)。
49
-
50
- | Entry | 类型 | 描述 |
51
- | --- | --- | --- |
52
- | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
53
-
54
- ### npm 依赖
55
-
56
- > 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
57
-
58
- ```bash
59
- pnpm add lucide-react@^0.460.0
60
- ```
61
- <!-- auto:deps:end -->
62
-
63
- ## AI 生成纪律
64
-
65
- - **`trend` 颜色优先级最高**:有 trend 时数值 + 箭头自动套色,**不要**额外加 className 颜色
66
- - **`prefix` 用 ¥ / $ / icon**:**不要**塞文字单位(那是 suffix 的职责)
67
- - **`precision` 仅 number 生效**:string value(如 `'1,234.56k'`)请自行格式化好再传
68
- - **`tabular-nums` 已自动**:数字对齐用,不要再覆盖
69
-
70
- ## Examples
71
-
72
- ```tsx
73
- import { Statistic } from '@/components/ui/statistic';
74
-
75
- // 基础
76
- <Statistic title="今日 GMV" value={8493521} prefix="¥" />
77
-
78
- // 精度 + 后缀
79
- <Statistic title="转化率" value={3.245} precision={2} suffix="%" />
80
-
81
- // 趋势(自动配色)
82
- <Statistic
83
- title="活跃用户"
84
- value={1234}
85
- trend="up"
86
- trendValue="+12.4%"
87
- />
88
-
89
- <Statistic
90
- title="错误率"
91
- value={0.83}
92
- precision={2}
93
- suffix="%"
94
- trend="down"
95
- trendValue="-0.5%"
96
- />
97
-
98
- // 卡片内
99
- <Card>
100
- <CardContent className="pt-6">
101
- <Statistic title="本月订单" value={2847} prefix={<ShoppingCart />} />
102
- </CardContent>
103
- </Card>
104
- ```