@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,91 +0,0 @@
1
- ---
2
- id: toggle-group
3
- name: ToggleGroup
4
- type: component
5
- category: deprecated
6
- since: 0.1.0
7
- package: '@teamix-evo/ui'
8
- displayName: 切换按钮组
9
- ---
10
-
11
- # ToggleGroup 切换按钮组
12
-
13
- 切换按钮组 — Radix ToggleGroup,**单选(`type="single"`)+ 多选(`type="multiple"`)**。复用 Toggle 的 cva variants(default / outline)与 size。
14
-
15
- ## When to use
16
-
17
- - 工具栏(Bold / Italic / Underline)— `type="multiple"`
18
- - 视图切换(Grid / List / Card)— `type="single"`
19
- - 段落对齐(Left / Center / Right / Justify)— `type="single"`
20
-
21
- ## When NOT to use
22
-
23
- - 表单选择 → `RadioGroup`(单选)/ `Checkbox`(多选)
24
- - 选项数 > 5 → `Select` / `Combobox`
25
- - 单个二元开关 → `Switch` / `Toggle`
26
-
27
- ## Props
28
-
29
- > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
30
-
31
- <!-- auto:props:begin -->
32
- | 名称 | 类型 | 默认值 | 必填 | 说明 |
33
- | --- | --- | --- | --- | --- |
34
- | `variant` | `'default' \| 'outline'` | `"default"` | – | 视觉风格,与同源的 [`Toggle`](../toggle/toggle.tsx) 保持一致。 |
35
- | `size` | `'sm' \| 'md' \| 'default' \| 'lg'` | `"default"` | – | 尺寸,与同源的 [`Toggle`](../toggle/toggle.tsx) 保持一致。 |
36
- | `className` | `string` | – | – | 容器 className,会与默认布局类合并。 |
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 toggle-group` 时,以下 entry 会被自动连带安装(无需手动 add)。
47
-
48
- | Entry | 类型 | 描述 |
49
- | --- | --- | --- |
50
- | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
51
- | `toggle` | component | 二元状态按钮 — Radix Toggle 包装,工具栏图标级开关 |
52
-
53
- ### npm 依赖
54
-
55
- > 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
56
-
57
- ```bash
58
- pnpm add @radix-ui/react-toggle-group@^1.1.0 class-variance-authority@^0.7.0
59
- ```
60
- <!-- auto:deps:end -->
61
-
62
- > 透传 Radix ToggleGroup.Root 所有 props(`type` / `value` / `defaultValue` / `onValueChange` / `disabled` / `loop` / `orientation` 等)。
63
- > `ToggleGroupItem` 接受 `value` 等 Radix 标准 props。
64
-
65
- ## AI 生成纪律
66
-
67
- - **`type` 必传**:`type="single"` 与 `type="multiple"` value 类型不同(string vs string[])
68
- - **每项 value 唯一**:不要用 index
69
- - **`size` / `variant` 在 Group 上设置**:Item 自动继承,不要逐项设置
70
- - **图标按钮配 `aria-label`**
71
-
72
- ## Examples
73
-
74
- ```tsx
75
- import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
76
- import { AlignLeft, AlignCenter, AlignRight } from 'lucide-react';
77
-
78
- // 单选(对齐方式)
79
- <ToggleGroup type="single" defaultValue="left">
80
- <ToggleGroupItem value="left" aria-label="左对齐"><AlignLeft /></ToggleGroupItem>
81
- <ToggleGroupItem value="center" aria-label="居中"><AlignCenter /></ToggleGroupItem>
82
- <ToggleGroupItem value="right" aria-label="右对齐"><AlignRight /></ToggleGroupItem>
83
- </ToggleGroup>
84
-
85
- // 多选(文本格式)
86
- <ToggleGroup type="multiple" variant="outline">
87
- <ToggleGroupItem value="bold">B</ToggleGroupItem>
88
- <ToggleGroupItem value="italic">I</ToggleGroupItem>
89
- <ToggleGroupItem value="underline">U</ToggleGroupItem>
90
- </ToggleGroup>
91
- ```
@@ -1,83 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
2
- import {
3
- AlignLeft,
4
- AlignCenter,
5
- AlignRight,
6
- AlignJustify,
7
- Bold,
8
- Italic,
9
- Underline,
10
- } from 'lucide-react';
11
- import { ToggleGroup, ToggleGroupItem } from './toggle-group';
12
-
13
- const meta: Meta<typeof ToggleGroup> = {
14
- title: '废弃 · Deprecated/ToggleGroup',
15
- component: ToggleGroup,
16
- tags: ['autodocs'],
17
- parameters: {
18
- docs: {
19
- description: {
20
- component:
21
- '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n切换按钮组 — 一组二状态按钮的集合,可选单选 (`type="single"`) 或多选 (`type="multiple"`),常用于对齐方式 / 字体样式等工具栏场景。Radix ToggleGroup 实现,shadcn 专有(antd 以 `Radio.Group` + `Radio.Button` 表达单选、以菜单多选表达多选);`variant` / `size` 与 `Toggle` 保持一致。',
22
- },
23
- },
24
- },
25
- argTypes: {
26
- variant: { control: 'inline-radio', options: ['default', 'outline'] },
27
- size: { control: 'inline-radio', options: ['sm', 'default', 'lg'] },
28
- disabled: { control: 'boolean' },
29
- },
30
- args: { variant: 'default', size: 'default' },
31
- };
32
-
33
- export default meta;
34
- type Story = StoryObj<typeof ToggleGroup>;
35
-
36
- export const SingleAlign: Story = {
37
- args: { type: 'single', defaultValue: 'left' },
38
- render: (args) => (
39
- <ToggleGroup {...args}>
40
- <ToggleGroupItem value="left" aria-label="左对齐">
41
- <AlignLeft />
42
- </ToggleGroupItem>
43
- <ToggleGroupItem value="center" aria-label="居中">
44
- <AlignCenter />
45
- </ToggleGroupItem>
46
- <ToggleGroupItem value="right" aria-label="右对齐">
47
- <AlignRight />
48
- </ToggleGroupItem>
49
- <ToggleGroupItem value="justify" aria-label="两端对齐">
50
- <AlignJustify />
51
- </ToggleGroupItem>
52
- </ToggleGroup>
53
- ),
54
- };
55
-
56
- export const MultipleFormat: Story = {
57
- args: { type: 'multiple', variant: 'outline' },
58
- parameters: { controls: { disable: true } },
59
- render: (args) => (
60
- <ToggleGroup {...args}>
61
- <ToggleGroupItem value="bold" aria-label="加粗">
62
- <Bold />
63
- </ToggleGroupItem>
64
- <ToggleGroupItem value="italic" aria-label="斜体">
65
- <Italic />
66
- </ToggleGroupItem>
67
- <ToggleGroupItem value="underline" aria-label="下划线">
68
- <Underline />
69
- </ToggleGroupItem>
70
- </ToggleGroup>
71
- ),
72
- };
73
-
74
- export const TextItems: Story = {
75
- parameters: { controls: { disable: true } },
76
- render: () => (
77
- <ToggleGroup type="single" defaultValue="grid" variant="outline">
78
- <ToggleGroupItem value="grid">网格</ToggleGroupItem>
79
- <ToggleGroupItem value="list">列表</ToggleGroupItem>
80
- <ToggleGroupItem value="card">卡片</ToggleGroupItem>
81
- </ToggleGroup>
82
- ),
83
- };
@@ -1,78 +0,0 @@
1
- import * as React from 'react';
2
- import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
3
- import { type VariantProps } from 'class-variance-authority';
4
-
5
- import { cn } from '@/utils/cn';
6
- import { toggleVariants } from '@/components/toggle/toggle';
7
-
8
- const ToggleGroupContext = React.createContext<
9
- VariantProps<typeof toggleVariants>
10
- >({ size: 'md', variant: 'default' });
11
-
12
- /**
13
- * ToggleGroup 自身的可定制属性。底层 type=`single`|`multiple` 与对应的
14
- * `value` / `onValueChange` 等由 Radix 的 union props 透传。
15
- */
16
- export interface ToggleGroupProps {
17
- /**
18
- * 视觉风格,与同源的 [`Toggle`](../toggle/toggle.tsx) 保持一致。
19
- * @default "default"
20
- */
21
- variant?: 'default' | 'outline';
22
- /**
23
- * 尺寸,与同源的 [`Toggle`](../toggle/toggle.tsx) 保持一致。
24
- * @default "default"
25
- */
26
- size?: 'sm' | 'md' | 'default' | 'lg';
27
- /**
28
- * 容器 className,会与默认布局类合并。
29
- */
30
- className?: string;
31
- }
32
-
33
- function ToggleGroup({
34
- className,
35
- variant,
36
- size,
37
- children,
38
- ...props
39
- }: ToggleGroupProps &
40
- React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>) {
41
- return (
42
- <ToggleGroupPrimitive.Root
43
- className={cn('flex items-center justify-center gap-1', className)}
44
- {...props}
45
- >
46
- <ToggleGroupContext.Provider value={{ variant, size }}>
47
- {children}
48
- </ToggleGroupContext.Provider>
49
- </ToggleGroupPrimitive.Root>
50
- );
51
- }
52
- ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
53
-
54
- const ToggleGroupItem = React.forwardRef<
55
- React.ElementRef<typeof ToggleGroupPrimitive.Item>,
56
- React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
57
- VariantProps<typeof toggleVariants>
58
- >(({ className, children, variant, size, ...props }, ref) => {
59
- const ctx = React.useContext(ToggleGroupContext);
60
- return (
61
- <ToggleGroupPrimitive.Item
62
- ref={ref}
63
- className={cn(
64
- toggleVariants({
65
- variant: ctx.variant ?? variant,
66
- size: ctx.size ?? size,
67
- }),
68
- className,
69
- )}
70
- {...props}
71
- >
72
- {children}
73
- </ToggleGroupPrimitive.Item>
74
- );
75
- });
76
- ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
77
-
78
- export { ToggleGroup, ToggleGroupItem };
@@ -1,149 +0,0 @@
1
- ---
2
- id: tooltip
3
- name: Tooltip
4
- type: component
5
- category: data-display
6
- since: 0.1.0
7
- package: '@teamix-evo/ui'
8
- displayName: 文字提示
9
- ---
10
-
11
- # Tooltip 文字提示
12
-
13
- 文字提示气泡 — Radix Tooltip + antd `arrow / placement(side)` 并集 + cloud-design Balloon 双形态(`variant: default | light`)。
14
- **两种用法**:`<Tooltip title="...">{trigger}</Tooltip>` 一行包装,或拆分原子组件(`TooltipRoot/Trigger/Content`)精细控制。
15
-
16
- > **必须用 `<TooltipProvider>` 包裹**(通常在应用根),或在单 Tooltip 上传 `withProvider`。
17
-
18
- ## 视觉变体
19
-
20
- | variant | 背景 | 适用场景 |
21
- | --------- | ----------------------------- | ------------------------------------------------- |
22
- | `default` | 深色 + 浅色文字 | 图标按钮、列截断、工具栏 — 信息密度高、对比强 |
23
- | `light` | 浅色 + 深色文字 + 边框 + 阴影 | 富文本提示、字段说明、与 Popover 调性接近的轻提示 |
24
-
25
- 对应 cloud-design Balloon `type="primary"`(白色)/ `type="normal"`(深色)。
26
-
27
- ## When to use
28
-
29
- - 图标按钮的文字解释(无障碍 + 视觉提示)
30
- - 表单字段的辅助说明(替代占空间的描述文字)
31
- - 数据列的列宽不足导致截断时的完整内容
32
-
33
- ## When NOT to use
34
-
35
- - 包含交互的内容 → 用 `Popover` 或 `HoverCard`
36
- - 长文本(超过 1 行)→ 用 `HoverCard` 或对话框
37
- - 移动端首要功能 → 触屏不易触发 hover,改用按钮 + 弹窗
38
-
39
- ## Props
40
-
41
- > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
42
-
43
- <!-- auto:props:begin -->
44
- | 名称 | 类型 | 默认值 | 必填 | 说明 |
45
- | --- | --- | --- | --- | --- |
46
- | `children` | `React.ReactElement` | – | ✓ | 触发器(单个 ReactElement,asChild 透传)。 |
47
- | `title` | `React.ReactNode` | – | ✓ | 提示内容。 |
48
- | `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `"top"` | – | 弹出方向。 |
49
- | `variant` | `'default' \| 'light'` | `"default"` | – | 视觉变体: - `default`:深色背景 + 浅色文字(信息密度高、对比强,适合图标按钮 / 列截断提示) - `light`:浅色背景 + 深色文字 + 边框 + 阴影(视觉更轻,贴近富内容卡片调性, 对齐 cloud-design Balloon `type="primary"`) |
50
- | `arrow` | `boolean` | `true` | – | 是否显示三角形箭头。 |
51
- | `delayDuration` | `number` | – | – | 显示延迟(ms),默认沿用 Provider 的 delayDuration。 |
52
- | `withProvider` | `boolean` | – | – | 强制传给 Provider 的 delayDuration(便于不挂 Provider 的场景)。 |
53
- <!-- auto:props:end -->
54
-
55
- ## 依赖
56
-
57
- > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
58
-
59
- <!-- auto:deps:begin -->
60
- ### 同库依赖
61
-
62
- > `teamix-evo ui add tooltip` 时,以下 entry 会被自动连带安装(无需手动 add)。
63
-
64
- | Entry | 类型 | 描述 |
65
- | --- | --- | --- |
66
- | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
67
-
68
- ### npm 依赖
69
-
70
- > 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
71
-
72
- ```bash
73
- pnpm add @radix-ui/react-tooltip@^1.1.0 class-variance-authority@^0.7.0
74
- ```
75
- <!-- auto:deps:end -->
76
-
77
- > 子组件 `TooltipProvider / TooltipRoot / TooltipTrigger / TooltipContent` 用于精细控制,见 [`tooltip.tsx`](./tooltip.tsx)。
78
-
79
- ## AI 生成纪律
80
-
81
- - **必有 Provider**:不挂 Provider 直接用 Tooltip 会报错或不工作。**应用根**统一挂 `<TooltipProvider delayDuration={300}>`
82
- - **`title` 用文本不放交互**:Tooltip 内放 button / link 在键盘焦点流转上是反模式
83
- - **`title` ≤ 1 行**:超过 1 行换 `HoverCard`
84
- - **图标按钮必配 Tooltip + aria-label**:不能只靠 Tooltip 而省略 aria-label,屏幕阅读器不一定触发
85
- - **`side` 选 `top` 通常最稳**:避免被屏幕边缘截断;Radix 自带翻转回避能力,但标注首选语义
86
- - **变体选择**:默认深色(`default`)即可;只有需要承载图标 + 文字的轻提示、且周围已有大量深色元素时才选 `light`,避免与 `Popover` 视觉混淆
87
- - **不要为 `light` 自行覆写 `bg-white`/`text-black`**:语义色走 `bg-popover`/`text-popover-foreground`,主题切换时才能跟随
88
-
89
- ## Examples
90
-
91
- ```tsx
92
- import { Tooltip, TooltipProvider } from '@/components/ui/tooltip';
93
- import { Button } from '@/components/ui/button';
94
- import { Settings } from 'lucide-react';
95
-
96
- // 应用根挂 Provider
97
- <TooltipProvider delayDuration={300}>
98
- <App />
99
- </TooltipProvider>
100
-
101
- // 简洁用法
102
- <Tooltip title="设置">
103
- <Button size="icon" variant="ghost" aria-label="设置">
104
- <Settings />
105
- </Button>
106
- </Tooltip>
107
-
108
- // 自定义方向 + 无箭头
109
- <Tooltip title="向右弹出" side="right" arrow={false}>
110
- <Button variant="outline">悬浮我</Button>
111
- </Tooltip>
112
-
113
- // 浅色变体(light)
114
- <Tooltip title="浅色提示" variant="light">
115
- <Button variant="outline">浅色</Button>
116
- </Tooltip>
117
- ```
118
-
119
- ## Balloon.Tooltip 形态 — 旧库 API → 新库映射
120
-
121
- 旧库 cloud-design `Balloon.Tooltip`(以及 `Balloon triggerType="hover"`)在新库统一拆到 `Tooltip`。完整的 Balloon 拆解决策与 Props 总表见 [`popover.meta.md` "Balloon 形态” 章节](../popover/popover.meta.md);本表只列 Tooltip 主路径。
122
-
123
- ### Props 映射表
124
-
125
- | 旧库 `Balloon.Tooltip` / `Balloon hover` API | 新库等价写法 | 备注 |
126
- | -------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------- |
127
- | `trigger` | `<Tooltip>{element}</Tooltip>`(asChild 自动处理) | 与 Popover 统一 trigger 协议 |
128
- | `children`(文本内容) | `title` prop | 重命名为 `title`,与 antd `Tooltip` 一致 |
129
- | `align`(12 方向) | `side`(4 方向,Radix 范式) | Tooltip 只提供 4 方向,需要 12 方位请用 `<TooltipContent side={...} align={...}>` 拆分原子组件 |
130
- | `type="normal"`(深色) | `variant="default"`(默认) | bg-primary + text-primary-foreground |
131
- | `type="primary"`(浅色) | `variant="light"` | 边框 + bg-popover + shadow |
132
- | `delay`(hover 延时) | `delayDuration` | 默认走 `TooltipProvider` 上的值 |
133
- | `arrow=true`(默认) | `arrow={true}`(默认) | 一致 |
134
- | `popupClassName` / `popupStyle` | `<TooltipContent className/style>`(拆原子用法) | `<Tooltip>` 包装器未透传,需拆到 TooltipContent |
135
-
136
- ### 不修复清单
137
-
138
- | 旧 API | 决策原因 |
139
- | ------------------------------------- | ----------------------------------------------------------------------- |
140
- | `triggerType="click"` 在 Tooltip 混用 | hover/click 语义不同 — click 走 [`Popover`](../popover/popover.meta.md) |
141
- | 12 方向 prop 级支持 | shorthand `side` 足够覆盖 90% 场景;边缘对齐拆原子组件 + `align` |
142
- | `safeNode` | Tooltip 不需要 — hover 离开即隐藏,无 click outside 语义 |
143
- | `closable` | Tooltip 不需要 — 鼠标离开即隐藏;需手动关闭请用 Popover |
144
-
145
- ### Tooltip 专项 AI 生成纪律(在通用纪律之上叠加)
146
-
147
- - **不要用 Tooltip 装交互元素** — 需要点击/表单/链接 → 走 `Popover`(中量交互)/`HoverCard`(纯展示富内容)
148
- - **外层必挑 `<TooltipProvider delayDuration={300}>`** — 高频 demo 在应用根一次安装,不要每个 Tooltip 独立 `withProvider`(除非是独立 story / 孤零页面)
149
- - **`light` 变体只用于能够与 Popover 区分的轻提示** — 不要不分场景一套 light
@@ -1,108 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
2
- import { Settings, Info } from 'lucide-react';
3
- import { Tooltip, TooltipProvider } from './tooltip';
4
- import { Button } from '@/components/button/button';
5
-
6
- const meta: Meta<typeof Tooltip> = {
7
- title: '数据展示 · Data Display/Tooltip',
8
- component: Tooltip,
9
- tags: ['autodocs'],
10
- parameters: {
11
- docs: {
12
- description: {
13
- component:
14
- '文字提示 —— 鼠标悬停或键盘聚焦元素时弹出的简短文字解释。基于 Radix Tooltip 实现 + antd `Tooltip` 并集能力:`title` 文本、`side` 四向、`arrow` 尖角、`delayDuration` 延迟、`withProvider` 内联 Provider,新增 `variant`(default 深底 / light 白底)对齐 cloud-design Balloon 双形态。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
15
- },
16
- },
17
- },
18
- argTypes: {
19
- side: {
20
- control: 'inline-radio',
21
- options: ['top', 'right', 'bottom', 'left'],
22
- },
23
- variant: {
24
- control: 'inline-radio',
25
- options: ['default', 'light'],
26
- },
27
- arrow: { control: 'boolean' },
28
- title: { control: 'text' },
29
- },
30
- args: { side: 'top', variant: 'default', arrow: true, title: '设置' },
31
- decorators: [
32
- (Story) => (
33
- <TooltipProvider delayDuration={200}>
34
- <div className="flex h-32 items-center justify-center">
35
- <Story />
36
- </div>
37
- </TooltipProvider>
38
- ),
39
- ],
40
- };
41
-
42
- export default meta;
43
- type Story = StoryObj<typeof Tooltip>;
44
-
45
- export const Playground: Story = {
46
- render: (args) => (
47
- <Tooltip {...args}>
48
- <Button size="icon" variant="ghost" aria-label="设置">
49
- <Settings />
50
- </Button>
51
- </Tooltip>
52
- ),
53
- };
54
-
55
- export const Sides: Story = {
56
- parameters: { controls: { disable: true } },
57
- render: () => (
58
- <div className="flex items-center gap-3">
59
- {(['top', 'right', 'bottom', 'left'] as const).map((s) => (
60
- <Tooltip key={s} title={s} side={s}>
61
- <Button variant="outline">{s}</Button>
62
- </Tooltip>
63
- ))}
64
- </div>
65
- ),
66
- };
67
-
68
- export const Variants: Story = {
69
- name: 'Variants · default vs light',
70
- parameters: { controls: { disable: true } },
71
- render: () => (
72
- <div className="flex items-center gap-6">
73
- <Tooltip title="深色 tooltip(default)" variant="default">
74
- <Button variant="outline">深色</Button>
75
- </Tooltip>
76
- <Tooltip title="浅色 tooltip(light) · 带边框与阴影" variant="light">
77
- <Button variant="outline">浅色</Button>
78
- </Tooltip>
79
- </div>
80
- ),
81
- };
82
-
83
- export const LightVariant: Story = {
84
- name: 'Light variant 富文本',
85
- parameters: { controls: { disable: true } },
86
- render: () => (
87
- <Tooltip
88
- variant="light"
89
- side="right"
90
- title={
91
- <span className="inline-flex items-center gap-1.5">
92
- <Info className="size-3.5" /> 配额按账号每分钟计算
93
- </span>
94
- }
95
- >
96
- <Button variant="outline">规则说明</Button>
97
- </Tooltip>
98
- ),
99
- };
100
-
101
- export const NoArrow: Story = {
102
- parameters: { controls: { disable: true } },
103
- render: () => (
104
- <Tooltip title="无箭头" arrow={false}>
105
- <Button variant="outline">悬浮</Button>
106
- </Tooltip>
107
- ),
108
- };
@@ -1,153 +0,0 @@
1
- import * as React from 'react';
2
- import * as TooltipPrimitive from '@radix-ui/react-tooltip';
3
- import { cva, type VariantProps } from 'class-variance-authority';
4
-
5
- import { cn } from '@/utils/cn';
6
-
7
- const TooltipProvider = TooltipPrimitive.Provider;
8
- const TooltipRoot = TooltipPrimitive.Root;
9
- const TooltipTrigger = React.forwardRef<
10
- React.ElementRef<typeof TooltipPrimitive.Trigger>,
11
- React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>
12
- >(({ className, ...props }, ref) => (
13
- <TooltipPrimitive.Trigger
14
- ref={ref}
15
- className={cn('cursor-pointer', className)}
16
- {...props}
17
- />
18
- ));
19
- TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
20
-
21
- const tooltipContentVariants = cva(
22
- 'z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
23
- {
24
- variants: {
25
- variant: {
26
- default: 'bg-primary text-primary-foreground shadow-md',
27
- light:
28
- 'border border-border bg-popover text-popover-foreground shadow-md',
29
- },
30
- },
31
- defaultVariants: {
32
- variant: 'default',
33
- },
34
- },
35
- );
36
-
37
- /** 箭头填充色与变体一一对应。 */
38
- const arrowFillByVariant: Record<
39
- NonNullable<VariantProps<typeof tooltipContentVariants>['variant']>,
40
- string
41
- > = {
42
- default: 'fill-primary',
43
- light: 'fill-popover',
44
- };
45
-
46
- export interface TooltipContentProps
47
- extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
48
- VariantProps<typeof tooltipContentVariants> {
49
- /**
50
- * 是否显示三角形箭头(antd `arrow` 并集)。
51
- * @default true
52
- */
53
- arrow?: boolean;
54
- }
55
-
56
- const TooltipContent = React.forwardRef<
57
- React.ElementRef<typeof TooltipPrimitive.Content>,
58
- TooltipContentProps
59
- >(
60
- (
61
- {
62
- className,
63
- sideOffset = 4,
64
- arrow = true,
65
- variant = 'default',
66
- children,
67
- ...props
68
- },
69
- ref,
70
- ) => (
71
- <TooltipPrimitive.Portal>
72
- <TooltipPrimitive.Content
73
- ref={ref}
74
- sideOffset={sideOffset}
75
- className={cn(tooltipContentVariants({ variant }), className)}
76
- {...props}
77
- >
78
- {children}
79
- {arrow ? (
80
- <TooltipPrimitive.Arrow
81
- className={arrowFillByVariant[variant ?? 'default']}
82
- width={8}
83
- height={4}
84
- />
85
- ) : null}
86
- </TooltipPrimitive.Content>
87
- </TooltipPrimitive.Portal>
88
- ),
89
- );
90
- TooltipContent.displayName = TooltipPrimitive.Content.displayName;
91
-
92
- // ─── Convenience wrapper(antd-style 一行调用)──────────────────────────────
93
-
94
- export interface TooltipProps
95
- extends Omit<
96
- React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>,
97
- 'children'
98
- > {
99
- /** 触发器(单个 ReactElement,asChild 透传)。 */
100
- children: React.ReactElement;
101
- /** 提示内容。 */
102
- title: React.ReactNode;
103
- /** 弹出方向。 @default "top" */
104
- side?: 'top' | 'right' | 'bottom' | 'left';
105
- /**
106
- * 视觉变体:
107
- * - `default`:深色背景 + 浅色文字(信息密度高、对比强,适合图标按钮 / 列截断提示)
108
- * - `light`:浅色背景 + 深色文字 + 边框 + 阴影(视觉更轻,贴近富内容卡片调性,
109
- * 对齐 cloud-design Balloon `type="primary"`)
110
- * @default "default"
111
- */
112
- variant?: 'default' | 'light';
113
- /** 是否显示三角形箭头。 @default true */
114
- arrow?: boolean;
115
- /** 显示延迟(ms),默认沿用 Provider 的 delayDuration。 */
116
- delayDuration?: number;
117
- /** 强制传给 Provider 的 delayDuration(便于不挂 Provider 的场景)。 */
118
- withProvider?: boolean;
119
- }
120
-
121
- const Tooltip: React.FC<TooltipProps> = ({
122
- children,
123
- title,
124
- side = 'top',
125
- variant = 'default',
126
- arrow = true,
127
- delayDuration,
128
- withProvider = false,
129
- ...rootProps
130
- }) => {
131
- const inner = (
132
- <TooltipRoot delayDuration={delayDuration} {...rootProps}>
133
- <TooltipTrigger asChild>{children}</TooltipTrigger>
134
- <TooltipContent side={side} variant={variant} arrow={arrow}>
135
- {title}
136
- </TooltipContent>
137
- </TooltipRoot>
138
- );
139
- return withProvider ? (
140
- <TooltipProvider delayDuration={delayDuration}>{inner}</TooltipProvider>
141
- ) : (
142
- inner
143
- );
144
- };
145
-
146
- export {
147
- Tooltip,
148
- TooltipProvider,
149
- TooltipRoot,
150
- TooltipTrigger,
151
- TooltipContent,
152
- tooltipContentVariants,
153
- };