@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,99 +0,0 @@
1
- ---
2
- id: textarea
3
- name: Textarea
4
- type: component
5
- category: data-entry
6
- since: 0.2.0
7
- package: '@teamix-evo/ui'
8
- displayName: 多行文本框
9
- ---
10
-
11
- # Textarea 多行文本框
12
-
13
- 多行文本输入 — shadcn 简洁基底 + antd `Input.TextArea` 的 `autoSize` / `showCount` 并集。从 v0.2 起作为**独立 entry**,与 [`Input`](../input/input.meta.md) 拆开(对齐 shadcn 2025-10 拆分粒度)。
14
-
15
- `size` 三档字号与 Input 对齐(高度由 `rows` / `autoSize` 决定,**不受 size 影响**)。
16
-
17
- ## When to use
18
-
19
- - 多行内容输入(评论 / 反馈 / 描述 / 备注)
20
- - 配 `autoSize={{ minRows, maxRows }}` 给"动态高度"输入
21
- - 配 `showCount + maxLength` 控制长度
22
-
23
- ## When NOT to use
24
-
25
- - 单行文本 → `Input`
26
- - 输入 + 发送按钮(聊天框 / 评论框)→ `InputGroup` + `InputGroupTextarea` + `InputGroupAddon variant="button"`
27
- - @提及输入 → `Mentions`
28
-
29
- ## Props
30
-
31
- > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
32
-
33
- <!-- auto:props:begin -->
34
- | 名称 | 类型 | 默认值 | 必填 | 说明 |
35
- | --- | --- | --- | --- | --- |
36
- | `autoSize` | `boolean \| { minRows?: number; maxRows?: number }` | `false` | – | 自动高度。`true` 时无上下限;传 `{ minRows, maxRows }` 时受限。 实现:监听 input 事件,把 textarea 设为 auto 后再读 scrollHeight。 |
37
- | `showCount` | `boolean` | `false` | – | 显示字符计数(antd `showCount` 并集);需配合 `maxLength`。 |
38
- | `size` | `'sm' \| 'md' \| 'lg'` | `"md"` | – | 字号档位,与 `Input` 三档对齐:`sm`(text-xs) / `md`(text-xs,默认) / `lg`(text-sm)。 高度由 `rows` / `autoSize` 决定,不受 size 影响。 |
39
- | `error` | `boolean` | `false` | – | 错误态(快捷开关),会同时设置 `aria-invalid`,渲染 destructive 边框 / ring。 |
40
- | `value` | `string` | – | – | 受控值。 |
41
- | `defaultValue` | `string` | – | – | uncontrolled 初始值。 |
42
- | `rows` | `number` | `3` | – | 行数(autoSize 关闭时生效)。 |
43
- <!-- auto:props:end -->
44
-
45
- ## 依赖
46
-
47
- <!-- auto:deps:begin -->
48
- ### 同库依赖
49
-
50
- > `teamix-evo ui add textarea` 时,以下 entry 会被自动连带安装(无需手动 add)。
51
-
52
- | Entry | 类型 | 描述 |
53
- | --- | --- | --- |
54
- | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
55
-
56
- ### npm 依赖
57
-
58
- _无 — 本组件不依赖任何 npm 包。_
59
- <!-- auto:deps:end -->
60
-
61
- > 透传所有 `<textarea>` 原生属性(`name` / `id` / `placeholder` / `aria-*` / `onChange` / ...)。
62
-
63
- ## AI 生成纪律
64
-
65
- - **`autoSize` 替代 `rows`** —— autoSize 启用后 rows 被忽略,两者不要同时传
66
- - **autoSize 配 `maxRows` 防止失控** —— 不限的 autoSize 在长内容下会撑爆容器,推荐 `{ minRows: 3, maxRows: 8 }`
67
- - **`showCount` 必须配 `maxLength`** —— 无 maxLength 时 showCount 不显示
68
- - **粘贴长内容时 effect 监听 value 自动 resize** —— 无需业务侧介入
69
- - **错误态走 `error` prop** —— 自动反映 `aria-invalid="true"`,**不要**手动拼 `border-destructive`
70
- - **不要硬编码颜色** —— `bg-background` / `border-input` / `placeholder:text-muted-foreground` 都是 design token
71
-
72
- ## Examples
73
-
74
- ```tsx
75
- import { Textarea } from '@/components/ui/textarea';
76
-
77
- // 基础
78
- <Textarea placeholder="留下你的反馈..." />
79
-
80
- // 自动高度(推荐配 maxRows)
81
- <Textarea autoSize={{ minRows: 3, maxRows: 8 }} placeholder="..." />
82
-
83
- // 字数统计
84
- <Textarea showCount maxLength={500} placeholder="不超过 500 字" />
85
-
86
- // 错误态
87
- <Textarea error defaultValue="非法内容" />
88
- ```
89
-
90
- ## Migration · 从旧 `@/components/input/input` 迁移
91
-
92
- v0.2 起 Textarea 拆为独立 entry,import 路径变化:
93
-
94
- ```diff
95
- - import { Textarea } from '@/components/input/input';
96
- + import { Textarea } from '@/components/textarea/textarea';
97
- ```
98
-
99
- CLI 命令:`teamix-evo ui add textarea`(单独安装,不再需要先装 input)。组件 API 完全保持不变。
@@ -1,89 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
2
-
3
- import { Textarea } from './textarea';
4
-
5
- const meta: Meta<typeof Textarea> = {
6
- title: '数据录入 · Data Entry/Textarea',
7
- component: Textarea,
8
- tags: ['autodocs'],
9
- parameters: {
10
- docs: {
11
- description: {
12
- component:
13
- 'Textarea 多行文本框 —— shadcn 简洁基底 + antd `Input.TextArea` 的 `autoSize` / `showCount` 并集。`size` 三档字号与 Input 对齐(高度由 `rows` / `autoSize` 决定,**不受 size 影响**)。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
14
- },
15
- },
16
- },
17
- argTypes: {
18
- size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
19
- rows: { control: 'number' },
20
- showCount: { control: 'boolean' },
21
- error: { control: 'boolean' },
22
- disabled: { control: 'boolean' },
23
- placeholder: { control: 'text' },
24
- maxLength: { control: 'number' },
25
- },
26
- args: {
27
- size: 'md',
28
- rows: 3,
29
- showCount: false,
30
- error: false,
31
- disabled: false,
32
- placeholder: '请输入...',
33
- },
34
- decorators: [
35
- (Story) => (
36
- <div className="w-96">
37
- <Story />
38
- </div>
39
- ),
40
- ],
41
- };
42
-
43
- export default meta;
44
- type Story = StoryObj<typeof Textarea>;
45
-
46
- export const Playground: Story = {};
47
-
48
- /** 自动高度 —— `autoSize={{ minRows, maxRows }}` 让高度随内容生长,粘贴大段文本不撑爆容器。 */
49
- export const AutoSize: Story = {
50
- parameters: { controls: { disable: true } },
51
- render: () => (
52
- <Textarea
53
- autoSize={{ minRows: 3, maxRows: 8 }}
54
- placeholder="试试粘贴一段长文本看看高度变化..."
55
- />
56
- ),
57
- };
58
-
59
- /** 字数统计 —— `showCount` 必须配 `maxLength`,缺一不显示。 */
60
- export const ShowCount: Story = {
61
- parameters: { controls: { disable: true } },
62
- render: () => (
63
- <Textarea showCount maxLength={500} placeholder="不超过 500 字" />
64
- ),
65
- };
66
-
67
- /** 三档字号 —— 高度仍由 rows 决定,只有字号变化(text-xs / text-xs / text-sm)。 */
68
- export const Sizes: Story = {
69
- parameters: { controls: { disable: true } },
70
- render: () => (
71
- <div className="flex flex-col gap-3">
72
- <Textarea size="sm" placeholder="Small (text-xs)" />
73
- <Textarea size="md" placeholder="Medium (text-xs)" />
74
- <Textarea size="lg" placeholder="Large (text-sm)" />
75
- </div>
76
- ),
77
- };
78
-
79
- /** 错误态 —— `error` 自动设置 `aria-invalid="true"` + destructive 边框 / ring。 */
80
- export const Error: Story = {
81
- parameters: { controls: { disable: true } },
82
- render: () => <Textarea error defaultValue="非法内容" />,
83
- };
84
-
85
- /** 禁用态。 */
86
- export const Disabled: Story = {
87
- parameters: { controls: { disable: true } },
88
- render: () => <Textarea disabled defaultValue="这是只读的内容,不可编辑。" />,
89
- };
@@ -1,137 +0,0 @@
1
- import * as React from 'react';
2
-
3
- import { cn } from '@/utils/cn';
4
-
5
- // ─── Textarea ───────────────────────────────────────────────────────────────
6
- //
7
- // 多行文本输入。高度由 `rows` / `autoSize` 决定,`size` 仅控制字号档位与 Input 一致。
8
- // 与 Input 拆分独立 entry(对齐 shadcn 2025-10 拆分粒度)。
9
-
10
- export interface TextareaProps
11
- extends Omit<
12
- React.TextareaHTMLAttributes<HTMLTextAreaElement>,
13
- 'rows' | 'size'
14
- > {
15
- /**
16
- * 自动高度。`true` 时无上下限;传 `{ minRows, maxRows }` 时受限。
17
- * 实现:监听 input 事件,把 textarea 设为 auto 后再读 scrollHeight。
18
- * @default false
19
- */
20
- autoSize?: boolean | { minRows?: number; maxRows?: number };
21
- /**
22
- * 显示字符计数(antd `showCount` 并集);需配合 `maxLength`。
23
- * @default false
24
- */
25
- showCount?: boolean;
26
- /**
27
- * 字号档位,与 `Input` 三档对齐:`sm`(text-xs) / `md`(text-xs,默认) / `lg`(text-sm)。
28
- * 高度由 `rows` / `autoSize` 决定,不受 size 影响。
29
- * @default "md"
30
- */
31
- size?: 'sm' | 'md' | 'lg';
32
- /**
33
- * 错误态(快捷开关),会同时设置 `aria-invalid`,渲染 destructive 边框 / ring。
34
- * @default false
35
- */
36
- error?: boolean;
37
- /** 受控值。 */
38
- value?: string;
39
- /** uncontrolled 初始值。 */
40
- defaultValue?: string;
41
- /** 行数(autoSize 关闭时生效)。 @default 3 */
42
- rows?: number;
43
- }
44
-
45
- const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
46
- (
47
- {
48
- className,
49
- autoSize = false,
50
- showCount = false,
51
- size = 'md',
52
- error = false,
53
- value,
54
- defaultValue,
55
- rows = 3,
56
- onChange,
57
- maxLength,
58
- 'aria-invalid': ariaInvalidProp,
59
- ...props
60
- },
61
- ref,
62
- ) => {
63
- const ariaInvalid = ariaInvalidProp ?? (error ? true : undefined);
64
- const sizeClass =
65
- size === 'sm' ? 'text-xs' : size === 'lg' ? 'text-sm' : 'text-xs';
66
- const isControlled = value !== undefined;
67
- const [internal, setInternal] = React.useState<string>(defaultValue ?? '');
68
- const current = isControlled ? value : internal;
69
-
70
- const innerRef = React.useRef<HTMLTextAreaElement | null>(null);
71
- React.useImperativeHandle(
72
- ref,
73
- () => innerRef.current as HTMLTextAreaElement,
74
- );
75
-
76
- const resize = React.useCallback(() => {
77
- if (!autoSize) return;
78
- const el = innerRef.current;
79
- if (!el) return;
80
- const cs = window.getComputedStyle(el);
81
- const lineHeight =
82
- parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.5;
83
- const padTop = parseFloat(cs.paddingTop) || 0;
84
- const padBottom = parseFloat(cs.paddingBottom) || 0;
85
- el.style.height = 'auto';
86
- const next = el.scrollHeight;
87
- const opts = typeof autoSize === 'object' ? autoSize : {};
88
- const minH = (opts.minRows ?? 0) * lineHeight + padTop + padBottom;
89
- const maxH = opts.maxRows
90
- ? opts.maxRows * lineHeight + padTop + padBottom
91
- : Number.POSITIVE_INFINITY;
92
- el.style.height = `${Math.max(minH, Math.min(next, maxH))}px`;
93
- el.style.overflowY = next > maxH ? 'auto' : 'hidden';
94
- }, [autoSize]);
95
-
96
- React.useEffect(resize, [resize, current]);
97
-
98
- const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
99
- if (!isControlled) setInternal(e.target.value);
100
- onChange?.(e);
101
- };
102
-
103
- const textarea = (
104
- <textarea
105
- ref={innerRef}
106
- rows={autoSize ? undefined : rows}
107
- value={isControlled ? value : undefined}
108
- defaultValue={!isControlled ? defaultValue : undefined}
109
- maxLength={maxLength}
110
- aria-invalid={ariaInvalid}
111
- onChange={handleChange}
112
- className={cn(
113
- 'flex w-full rounded-md border border-input bg-background px-3 py-2 shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive',
114
- sizeClass,
115
- autoSize ? 'resize-none' : 'min-h-textarea',
116
- className,
117
- )}
118
- {...props}
119
- />
120
- );
121
-
122
- if (showCount && maxLength) {
123
- return (
124
- <div className="flex flex-col gap-1">
125
- {textarea}
126
- <div className="text-right text-xs text-muted-foreground tabular-nums">
127
- {current?.length ?? 0} / {maxLength}
128
- </div>
129
- </div>
130
- );
131
- }
132
- return textarea;
133
- },
134
- );
135
- Textarea.displayName = 'Textarea';
136
-
137
- export { Textarea };
@@ -1,175 +0,0 @@
1
- ---
2
- id: time-picker
3
- name: TimePicker
4
- displayName: 时间选择
5
- type: component
6
- category: data-entry
7
- since: 0.1.0
8
- package: '@teamix-evo/ui'
9
- ---
10
-
11
- # TimePicker 时间选择
12
-
13
- 时间选择 — 输入框 + 滚动列面板。提供两种形态:
14
-
15
- - `<TimePicker />` — 单值(对应 antd `TimePicker`)
16
- - `<TimeRangePicker />` — 范围(对应 antd `TimePicker.RangePicker`)
17
-
18
- 内核为 Radix Popover + 自研 `TimeColumn` 滚动列(每列单独滚动、点选高亮、自动 scroll into view),完全替换原 `<input type="time">` 实现以贴合 OpenTrek 设计语言。
19
-
20
- ## When to use
21
-
22
- - 表单需要时分(可选秒)精确输入(会议预约、闹钟、营业时间)
23
- - 需要时间区间(开始-结束)→ 用 `TimeRangePicker`
24
- - 配 `DatePicker` 的 `showTime` 完成日期 + 时间填写
25
-
26
- ## When NOT to use
27
-
28
- - 仅需日期 → `DatePicker`(纯日期模式)
29
- - 不需要面板交互、SSR safe 优先、移动端原生体验 → 直接用原生 `<input type="time">`
30
-
31
- ## Props
32
-
33
- > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
34
-
35
- <!-- auto:props:begin -->
36
- | 名称 | 类型 | 默认值 | 必填 | 说明 |
37
- | --- | --- | --- | --- | --- |
38
- | `value` | `string` | – | – | 受控值(由 `format` 决定字面)。空串表示未选。 |
39
- | `defaultValue` | `string` | – | – | 非受控初值。 |
40
- | `onChange` | `(value: string) => void` | – | – | 值变化回调(选中或清除时触发)。 |
41
- | `format` | `string` | `"HH:mm:ss"` | – | 时间格式(date-fns / antd 风格 token):支持 `HH/H/mm/m/ss/s`。 不含 `s` token 时不渲染秒列。 |
42
- | `hourStep` | `number` | `1` | – | 小时步长(antd 并集)。 |
43
- | `minuteStep` | `number` | `1` | – | 分钟步长。 |
44
- | `secondStep` | `number` | `1` | – | 秒步长。 |
45
- | `disabledHours` | `() => number[]` | – | – | 禁用小时回调,返回禁用的小时数组。 |
46
- | `disabledMinutes` | `(hour: number) => number[]` | – | – | 禁用分钟回调,接收当前选中小时。 |
47
- | `disabledSeconds` | `(hour: number, minute: number) => number[]` | – | – | 禁用秒回调,接收当前选中小时/分钟。 |
48
- | `placeholder` | `string` | `"请选择时间"` | – | 占位文本。 |
49
- | `disabled` | `boolean` | – | – | 是否禁用。 |
50
- | `size` | `'sm' \| 'md' \| 'lg'` | `"md"` | – | 触发器尺寸(对齐 Input)。 |
51
- | `error` | `boolean` | `false` | – | 错误态(同时设置 `aria-invalid`)。 |
52
- | `hasClear` | `boolean` | `true` | – | 显示清除按钮(antd `allowClear` 并集)。有值时显示 X,空值还原为时钟 icon。 |
53
- | `className` | `string` | – | – | 触发器 className。 |
54
- | `id` | `string` | – | – | 触发器 id(用于 label htmlFor)。 |
55
- | `status` | `'default' \| 'error' \| 'warning'` | `"default"` | – | 校验状态(对齐 antd `status`)— `'error'` / `'warning'` / `'default'`。 与 `error` 并存时,`status='error'` 优先。 |
56
- | `open` | `boolean` | – | – | 受控弹层显隐(对齐 antd `open`)。 业务侧需要"程序化打开 / 关闭"时使用;不传则组件内部自管。 |
57
- | `onOpenChange` | `(open: boolean) => void` | – | – | 弹层显隐变化回调。 |
58
- | `inputReadOnly` | `boolean` | `false` | – | 输入框只读 — 仅能通过点击弹层选择,不能直接键入(对齐 antd `inputReadOnly`)。 |
59
- <!-- auto:props:end -->
60
-
61
- ## TimeRangePicker Props
62
-
63
- `TimeRangePicker` 共享 `TimePicker` 的所有 prop(format / hourStep / minuteStep / secondStep / disabledHours / disabledMinutes / disabledSeconds / size / disabled / error / clearable / className / id),并增加:
64
-
65
- | 名称 | 类型 | 默认值 | 必填 | 说明 |
66
- | -------------- | ----------------------------------- | ----------------------------- | ---- | -------------------------------------------- |
67
- | `value` | `[string, string]` | – | – | 受控值(`[起始, 结束]`)。空串表示对应端未选。 |
68
- | `defaultValue` | `[string, string]` | – | – | 非受控初值。 |
69
- | `onChange` | `(value: [string, string]) => void` | – | – | 值变化回调(点击「确定」时触发)。 |
70
- | `placeholders` | `[string, string]` | `["请选择时间","请选择时间"]` | – | 起始 / 结束占位文本。 |
71
-
72
- ## 依赖
73
-
74
- > 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
75
-
76
- <!-- auto:deps:begin -->
77
- ### 同库依赖
78
-
79
- > `teamix-evo ui add time-picker` 时,以下 entry 会被自动连带安装(无需手动 add)。
80
-
81
- | Entry | 类型 | 描述 |
82
- | --- | --- | --- |
83
- | `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
84
- | `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集,使用 showArrow 控制尖角(与 Tooltip / HoverCard 命名统一) |
85
- | `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
86
-
87
- ### npm 依赖
88
-
89
- > 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
90
-
91
- ```bash
92
- pnpm add lucide-react@^0.460.0
93
- ```
94
- <!-- auto:deps:end -->
95
-
96
- ## AI 生成纪律
97
-
98
- - **`format` 决定列的显隐**:有 `s/ss` 才显示秒列,没有 `m/mm` 时不显示分钟列。**默认 "HH:mm:ss"** —— 单纯需要时分用 `format="HH:mm"`,**不要**为了"隐藏秒"而魔改样式
99
- - **value 必须能被 `parseTime` 解析**:格式宽松,按非数字切分;但**强烈建议**与 `format` 保持一致,避免来回 round-trip 时丢失字段
100
- - **`hourStep` / `minuteStep` / `secondStep` 是渲染步长**:仅决定可选项粒度,**不会**自动把已有值往档位上对齐(由消费方负责)
101
- - **`disabledHours` / `disabledMinutes` / `disabledSeconds` 是高阶函数**:`disabledMinutes(hour)` 接收当前选中小时;切换小时后自动重新计算可选分钟。**不要**手动写 useState 维护可选集
102
- - **空状态用空字符串** `""`,不要传 `null` / `undefined`(受控模式时类型即不允许)
103
- - **Range 模式点「确定」才触发 `onChange`**:面板内的滚动调整只更新内部 draft;关闭面板等价于"取消"
104
- - **`error` 是布尔开关**(对齐 Input);消费方可以直接 `aria-invalid` 也能达到同效果
105
- - **`clearable` 仅在有值时显示**:点击清除会触发 `onChange('')` / `onChange(['', ''])`
106
-
107
- ## Examples
108
-
109
- ```tsx
110
- import { TimePicker, TimeRangePicker } from '@/components/ui/time-picker';
111
- import * as React from 'react';
112
-
113
- // 基础(默认 HH:mm:ss)
114
- <TimePicker defaultValue="09:30:00" />
115
-
116
- // 受控 + 可清除
117
- const [t, setT] = React.useState('09:30:00');
118
- <TimePicker value={t} onChange={setT} clearable />
119
-
120
- // 只显示时:分
121
- <TimePicker format="HH:mm" defaultValue="09:30" />
122
-
123
- // 5 分钟一档,禁用工作时间外
124
- <TimePicker
125
- minuteStep={5}
126
- disabledHours={() => [0, 1, 2, 3, 4, 5, 6, 7, 8, 19, 20, 21, 22, 23]}
127
- />
128
-
129
- // 错误态
130
- <TimePicker error defaultValue="09:00:00" />
131
-
132
- // 范围
133
- const [r, setR] = React.useState<[string, string]>(['09:00', '18:00']);
134
- <TimeRangePicker value={r} onChange={setR} format="HH:mm" clearable />
135
-
136
- // 与 DatePicker.showTime 配对(走 DatePicker)
137
- <DatePicker showTime />
138
- ```
139
-
140
- ---
141
-
142
- ## TimePicker 形态 — 旧库 API → 新映射
143
-
144
- > 旧库 `TimePicker2`(hybridcloud) → 新库 `TimePicker` + `TimeRangePicker`(独立导出)。
145
- > 新库值类型为 `string`(如 `"09:30:00"`),不依赖 moment / dayjs。
146
-
147
- ### 命名 & 结构映射
148
-
149
- | 旧库 | 新库 | 说明 |
150
- | -------------------------------- | ------------------------------------------- | ------------------------------ |
151
- | `TimePicker2` | `TimePicker` | 组件名简化 |
152
- | `TimePicker2.RangePicker` | `TimeRangePicker` | 独立导出(非挂载) |
153
- | `value` (Dayjs) | `value` (string) | 类型变更,无日期库依赖 |
154
- | `onChange(Dayjs, string)` | `onChange(string)` | 签名简化,直接返回格式化字符串 |
155
- | `size: large/medium/small` | `size: 'sm' \| 'md' \| 'lg'` | md = medium |
156
- | `state="error"` | `error={true}` | 布尔开关(对齐 Input) |
157
- | `format` (HH:mm:ss) | `format` (HH:mm:ss) | 相同语法 |
158
- | `disabledHours(i) => bool` | `disabledHours() => number[]` | 返回禁用数组(对齐 antd v5) |
159
- | `disabledMinutes(h,i) => bool` | `disabledMinutes(hour) => number[]` | 返回禁用数组 |
160
- | `disabledSeconds(h,m,i) => bool` | `disabledSeconds(hour, minute) => number[]` | 返回禁用数组 |
161
- | `hasClear` | `hasClear` | 命名保留 |
162
- | `visible / onVisibleChange` | _(未来 P2)_ | MVP 内部管理 |
163
- | `ranges` (快捷值) | _(未来 P2: presets)_ | MVP 不含预设 |
164
- | `label` | 不复刻 | 用外部 FormItem label |
165
- | `hasBorder` | 不复刻 | className 覆盖 |
166
- | `isPreview / renderPreview` | 不复刻 | 新库无预览态 |
167
-
168
- ### 迁移 FAQ
169
-
170
- | 问题 | 回答 |
171
- | ----------------------- | ---------------------------------------------------------------------------------- |
172
- | Dayjs → string 怎么转? | `dayjs.format('HH:mm:ss')` 即可;反向 `dayjs(str, 'HH:mm:ss')` |
173
- | disabledHours 签名差异? | 旧: `(hour) => boolean` 返回单项是否禁用;新: `() => number[]` 返回所有禁用小时数组 |
174
- | Range 值结构? | 旧: `[Dayjs, Dayjs]` → 新: `[string, string]`,如 `['09:00', '18:00']` |
175
- | 只要时分怎么办? | `format="HH:mm"`,自动隐藏秒列 |
@@ -1,129 +0,0 @@
1
- import * as React from 'react';
2
- import type { Meta, StoryObj } from '@storybook/react-vite';
3
- import { TimePicker, TimeRangePicker } from './time-picker';
4
-
5
- const meta: Meta<typeof TimePicker> = {
6
- title: '数据录入 · Data Entry/TimePicker',
7
- component: TimePicker,
8
- tags: ['autodocs'],
9
- parameters: {
10
- docs: {
11
- description: {
12
- component:
13
- 'TimePicker 时间选择 —— 选择一个时间点或一段时间区间。Radix Popover 容器 + 自研 TimeColumn 滚动列(对齐 antd `TimePicker` / `TimePicker.RangePicker`,shadcn 未提供原子,本组件做并集补足):关键 prop 包括 `format` / `hourStep` / `minuteStep` / `secondStep` / `disabledHours` / `disabledMinutes` / `disabledSeconds` / `hasClear` / `size` / `error`。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
14
- },
15
- },
16
- },
17
- argTypes: {
18
- size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
19
- format: { control: 'text' },
20
- disabled: { control: 'boolean' },
21
- hasClear: { control: 'boolean' },
22
- error: { control: 'boolean' },
23
- placeholder: { control: 'text' },
24
- },
25
- args: {
26
- size: 'md',
27
- format: 'HH:mm:ss',
28
- disabled: false,
29
- hasClear: true,
30
- error: false,
31
- placeholder: '请选择时间',
32
- },
33
- };
34
-
35
- export default meta;
36
- type Story = StoryObj<typeof TimePicker>;
37
-
38
- export const Playground: Story = {
39
- render: (args) => <TimePicker {...args} defaultValue="09:30:00" />,
40
- };
41
-
42
- export const Controlled: Story = {
43
- parameters: { controls: { disable: true } },
44
- render: () => {
45
- const [t, setT] = React.useState('09:30:00');
46
- return (
47
- <div className="flex items-center gap-3">
48
- <TimePicker value={t} onChange={setT} />
49
- <span className="text-sm text-muted-foreground tabular-nums">
50
- {t || '(空)'}
51
- </span>
52
- </div>
53
- );
54
- },
55
- };
56
-
57
- export const HourMinute: Story = {
58
- name: '只显示时:分',
59
- parameters: { controls: { disable: true } },
60
- render: () => <TimePicker format="HH:mm" defaultValue="09:30" />,
61
- };
62
-
63
- export const StepFiveMinutes: Story = {
64
- name: '5 分钟一档',
65
- parameters: { controls: { disable: true } },
66
- render: () => (
67
- <TimePicker minuteStep={5} secondStep={10} defaultValue="10:00:00" />
68
- ),
69
- };
70
-
71
- export const DisabledHours: Story = {
72
- name: '禁用工作时间外',
73
- parameters: { controls: { disable: true } },
74
- render: () => (
75
- <TimePicker
76
- defaultValue="09:00:00"
77
- disabledHours={() => [
78
- ...Array.from({ length: 9 }, (_, i) => i), // 0-8
79
- ...Array.from({ length: 5 }, (_, i) => 19 + i), // 19-23
80
- ]}
81
- />
82
- ),
83
- };
84
-
85
- export const Sizes: Story = {
86
- parameters: { controls: { disable: true } },
87
- render: () => (
88
- <div className="flex items-center gap-3">
89
- <TimePicker size="sm" defaultValue="09:00:00" />
90
- <TimePicker size="md" defaultValue="09:00:00" />
91
- <TimePicker size="lg" defaultValue="09:00:00" />
92
- </div>
93
- ),
94
- };
95
-
96
- export const Disabled: Story = {
97
- parameters: { controls: { disable: true } },
98
- render: () => <TimePicker disabled defaultValue="09:00:00" />,
99
- };
100
-
101
- export const ErrorState: Story = {
102
- name: '错误态',
103
- parameters: { controls: { disable: true } },
104
- render: () => <TimePicker error defaultValue="09:00:00" />,
105
- };
106
-
107
- export const RangePlayground: StoryObj<typeof TimeRangePicker> = {
108
- name: 'Range / 范围选择',
109
- parameters: { controls: { disable: true } },
110
- render: () => {
111
- const [r, setR] = React.useState<[string, string]>(['', '']);
112
- return (
113
- <div className="flex flex-col gap-3">
114
- <TimeRangePicker value={r} onChange={setR} />
115
- <span className="text-sm text-muted-foreground tabular-nums">
116
- {r[0] && r[1] ? `${r[0]} ~ ${r[1]}` : '(未选)'}
117
- </span>
118
- </div>
119
- );
120
- },
121
- };
122
-
123
- export const RangeHourMinute: StoryObj<typeof TimeRangePicker> = {
124
- name: 'Range · 时:分',
125
- parameters: { controls: { disable: true } },
126
- render: () => (
127
- <TimeRangePicker defaultValue={['09:00', '18:00']} format="HH:mm" />
128
- ),
129
- };