@teamix-evo/ui 0.4.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.
- package/README.md +46 -50
- package/manifest.json +406 -653
- package/package.json +15 -34
- package/src/_design-system/theme-tokens/stories.tsx +1474 -0
- package/src/components/accordion/index.tsx +139 -0
- package/src/components/accordion/meta.md +162 -0
- package/src/components/accordion/stories.tsx +145 -0
- package/src/components/affix/index.tsx +149 -0
- package/src/components/affix/meta.md +23 -0
- package/src/components/affix/stories.tsx +70 -0
- package/src/components/alert/index.tsx +220 -0
- package/src/components/alert/meta.md +133 -0
- package/src/components/alert/stories.tsx +126 -0
- package/src/components/alert-dialog/index.tsx +282 -0
- package/src/components/alert-dialog/meta.md +86 -0
- package/src/components/alert-dialog/stories.tsx +163 -0
- package/src/components/avatar/index.tsx +159 -0
- package/src/components/avatar/meta.md +242 -0
- package/src/components/avatar/stories.tsx +241 -0
- package/src/components/badge/index.tsx +299 -0
- package/src/components/badge/meta.md +237 -0
- package/src/components/badge/stories.tsx +275 -0
- package/src/components/breadcrumb/index.tsx +137 -0
- package/src/components/breadcrumb/meta.md +64 -0
- package/src/components/breadcrumb/stories.tsx +86 -0
- package/src/components/button/index.tsx +202 -0
- package/src/components/button/meta.md +209 -0
- package/src/components/button/stories.tsx +215 -0
- package/src/components/button-group/index.tsx +211 -0
- package/src/components/button-group/meta.md +190 -0
- package/src/components/button-group/stories.tsx +182 -0
- package/src/components/calendar/index.tsx +240 -0
- package/src/components/calendar/meta.md +36 -0
- package/src/components/calendar/stories.tsx +36 -0
- package/src/components/card/index.tsx +262 -0
- package/src/components/card/meta.md +194 -0
- package/src/components/card/stories.tsx +202 -0
- package/src/components/carousel/index.tsx +481 -0
- package/src/components/carousel/meta.md +208 -0
- package/src/components/carousel/stories.tsx +271 -0
- package/src/components/cascader-select/index.tsx +308 -0
- package/src/components/cascader-select/meta.md +28 -0
- package/src/components/cascader-select/stories.tsx +118 -0
- package/src/components/checkbox/index.tsx +208 -0
- package/src/components/checkbox/meta.md +166 -0
- package/src/components/checkbox/stories.tsx +206 -0
- package/src/components/collapsible/index.tsx +72 -0
- package/src/components/collapsible/meta.md +87 -0
- package/src/components/collapsible/stories.tsx +97 -0
- package/src/components/color-picker/index.tsx +677 -0
- package/src/components/color-picker/meta.md +83 -0
- package/src/components/color-picker/stories.tsx +172 -0
- package/src/components/combobox/index.tsx +687 -0
- package/src/components/combobox/meta.md +83 -0
- package/src/components/combobox/stories.tsx +179 -0
- package/src/components/command/index.tsx +238 -0
- package/src/components/command/meta.md +48 -0
- package/src/components/command/stories.tsx +83 -0
- package/src/components/data-table/index.tsx +1537 -0
- package/src/components/data-table/meta.md +107 -0
- package/src/components/data-table/stories.tsx +1234 -0
- package/src/components/date-picker/index.tsx +1492 -0
- package/src/components/date-picker/meta.md +103 -0
- package/src/components/date-picker/stories.tsx +125 -0
- package/src/components/descriptions/index.tsx +535 -0
- package/src/components/descriptions/meta.md +104 -0
- package/src/components/descriptions/stories.tsx +389 -0
- package/src/components/dialog/index.tsx +255 -0
- package/src/components/dialog/meta.md +244 -0
- package/src/components/dialog/stories.tsx +330 -0
- package/src/components/dropdown-menu/index.tsx +301 -0
- package/src/components/dropdown-menu/meta.md +93 -0
- package/src/components/dropdown-menu/stories.tsx +124 -0
- package/src/components/empty/index.tsx +431 -0
- package/src/components/empty/meta.md +274 -0
- package/src/components/empty/stories.tsx +278 -0
- package/src/components/field/index.tsx +374 -0
- package/src/components/field/meta.md +283 -0
- package/src/components/field/stories.tsx +327 -0
- package/src/components/filter-bar/index.tsx +976 -0
- package/src/components/filter-bar/meta.md +57 -0
- package/src/components/filter-bar/stories.tsx +496 -0
- package/src/components/float-button/index.tsx +163 -0
- package/src/components/float-button/meta.md +73 -0
- package/src/components/float-button/stories.tsx +68 -0
- package/src/components/form/index.tsx +218 -0
- package/src/components/form/meta.md +16 -0
- package/src/components/form/stories.tsx +301 -0
- package/src/components/hover-card/index.tsx +103 -0
- package/src/components/hover-card/meta.md +71 -0
- package/src/components/hover-card/stories.tsx +107 -0
- package/src/components/icon/index.tsx +225 -0
- package/src/components/icon/meta.md +102 -0
- package/src/components/icon/stories.tsx +127 -0
- package/src/components/image/index.tsx +147 -0
- package/src/components/image/meta.md +55 -0
- package/src/components/image/stories.tsx +48 -0
- package/src/components/input/index.tsx +63 -0
- package/src/components/input/meta.md +57 -0
- package/src/components/input/stories.tsx +66 -0
- package/src/components/input-group/index.tsx +292 -0
- package/src/components/input-group/meta.md +108 -0
- package/src/components/input-group/stories.tsx +258 -0
- package/src/components/input-ip/index.tsx +288 -0
- package/src/components/input-ip/meta.md +48 -0
- package/src/components/input-ip/stories.tsx +69 -0
- package/src/components/input-number/index.tsx +360 -0
- package/src/components/input-number/meta.md +156 -0
- package/src/components/input-number/stories.tsx +187 -0
- package/src/components/item/index.tsx +368 -0
- package/src/components/item/meta.md +395 -0
- package/src/components/item/stories.tsx +432 -0
- package/src/components/label/index.tsx +44 -0
- package/src/components/label/meta.md +68 -0
- package/src/components/label/stories.tsx +64 -0
- package/src/components/mentions/index.tsx +369 -0
- package/src/components/mentions/meta.md +118 -0
- package/src/components/mentions/stories.tsx +153 -0
- package/src/components/menubar/index.tsx +313 -0
- package/src/components/menubar/meta.md +52 -0
- package/src/components/menubar/stories.tsx +99 -0
- package/src/components/navigation-menu/index.tsx +216 -0
- package/src/components/navigation-menu/meta.md +66 -0
- package/src/components/navigation-menu/stories.tsx +137 -0
- package/src/components/page-header/index.tsx +218 -0
- package/src/components/page-header/meta.md +211 -0
- package/src/components/page-header/stories.tsx +290 -0
- package/src/components/page-shell/index.tsx +119 -0
- package/src/components/page-shell/meta.md +115 -0
- package/src/components/page-shell/stories.tsx +154 -0
- package/src/components/pagination/index.tsx +580 -0
- package/src/components/pagination/meta.md +39 -0
- package/src/components/pagination/stories.tsx +319 -0
- package/src/components/popconfirm/index.tsx +477 -0
- package/src/components/popconfirm/meta.md +164 -0
- package/src/components/popconfirm/stories.tsx +231 -0
- package/src/components/popover/index.tsx +181 -0
- package/src/components/popover/meta.md +97 -0
- package/src/components/popover/stories.tsx +169 -0
- package/src/components/progress/index.tsx +176 -0
- package/src/components/progress/meta.md +95 -0
- package/src/components/progress/stories.tsx +115 -0
- package/src/components/radio-group/index.tsx +78 -0
- package/src/components/radio-group/meta.md +137 -0
- package/src/components/radio-group/stories.tsx +285 -0
- package/src/components/rate/index.tsx +284 -0
- package/src/components/rate/meta.md +63 -0
- package/src/components/rate/stories.tsx +107 -0
- package/src/components/resizable/index.tsx +122 -0
- package/src/components/resizable/meta.md +142 -0
- package/src/components/resizable/stories.tsx +105 -0
- package/src/components/scroll-area/index.tsx +83 -0
- package/src/components/scroll-area/meta.md +85 -0
- package/src/components/scroll-area/stories.tsx +82 -0
- package/src/components/select/index.tsx +325 -0
- package/src/components/select/meta.md +183 -0
- package/src/components/select/stories.tsx +210 -0
- package/src/components/separator/index.tsx +51 -0
- package/src/components/separator/meta.md +68 -0
- package/src/components/separator/stories.tsx +53 -0
- package/src/components/sheet/index.tsx +293 -0
- package/src/components/sheet/meta.md +226 -0
- package/src/components/sheet/stories.tsx +405 -0
- package/src/components/sidebar/index.tsx +715 -0
- package/src/components/sidebar/meta.md +14 -0
- package/src/components/sidebar/{sidebar.stories.tsx → stories.tsx} +250 -330
- package/src/components/skeleton/index.tsx +415 -0
- package/src/components/skeleton/meta.md +210 -0
- package/src/components/skeleton/stories.tsx +197 -0
- package/src/components/slider/index.tsx +222 -0
- package/src/components/slider/meta.md +125 -0
- package/src/components/slider/stories.tsx +109 -0
- package/src/components/sonner/index.tsx +149 -0
- package/src/components/sonner/meta.md +156 -0
- package/src/components/sonner/stories.tsx +285 -0
- package/src/components/spinner/index.tsx +335 -0
- package/src/components/spinner/meta.md +172 -0
- package/src/components/spinner/stories.tsx +197 -0
- package/src/components/statistic/{statistic.tsx → index.tsx} +25 -26
- package/src/components/statistic/meta.md +94 -0
- package/src/components/statistic/stories.tsx +85 -0
- package/src/components/steps/index.tsx +500 -0
- package/src/components/steps/meta.md +245 -0
- package/src/components/steps/stories.tsx +287 -0
- package/src/components/switch/index.tsx +175 -0
- package/src/components/switch/meta.md +107 -0
- package/src/components/switch/stories.tsx +154 -0
- package/src/components/table/index.tsx +350 -0
- package/src/components/table/meta.md +148 -0
- package/src/components/table/stories.tsx +189 -0
- package/src/components/tabs/index.tsx +379 -0
- package/src/components/tabs/meta.md +244 -0
- package/src/components/tabs/stories.tsx +312 -0
- package/src/components/tag/index.tsx +774 -0
- package/src/components/tag/meta.md +256 -0
- package/src/components/tag/stories.tsx +431 -0
- package/src/components/textarea/index.tsx +62 -0
- package/src/components/textarea/meta.md +77 -0
- package/src/components/textarea/stories.tsx +112 -0
- package/src/components/time-picker/index.tsx +887 -0
- package/src/components/time-picker/meta.md +102 -0
- package/src/components/time-picker/stories.tsx +125 -0
- package/src/components/timeline/index.tsx +422 -0
- package/src/components/timeline/meta.md +352 -0
- package/src/components/timeline/stories.tsx +369 -0
- package/src/components/toggle/index.tsx +74 -0
- package/src/components/toggle/meta.md +76 -0
- package/src/components/toggle/stories.tsx +66 -0
- package/src/components/toggle-group/index.tsx +167 -0
- package/src/components/toggle-group/meta.md +141 -0
- package/src/components/toggle-group/stories.tsx +124 -0
- package/src/components/tooltip/index.tsx +144 -0
- package/src/components/tooltip/meta.md +186 -0
- package/src/components/tooltip/stories.tsx +212 -0
- package/src/components/transfer/index.tsx +639 -0
- package/src/components/transfer/meta.md +76 -0
- package/src/components/transfer/stories.tsx +221 -0
- package/src/components/tree/index.tsx +764 -0
- package/src/components/tree/meta.md +96 -0
- package/src/components/tree/stories.tsx +385 -0
- package/src/components/tree/utils.ts +269 -0
- package/src/components/tree-select/index.tsx +400 -0
- package/src/components/tree-select/meta.md +78 -0
- package/src/components/tree-select/stories.tsx +234 -0
- package/src/components/typography/index.tsx +290 -0
- package/src/components/typography/meta.md +151 -0
- package/src/components/typography/stories.tsx +151 -0
- package/src/components/upload/index.tsx +858 -0
- package/src/components/upload/meta.md +122 -0
- package/src/components/upload/stories.tsx +261 -0
- package/src/components/watermark/index.tsx +152 -0
- package/src/components/watermark/meta.md +67 -0
- package/src/components/watermark/stories.tsx +59 -0
- package/src/hooks/use-mobile.ts +9 -11
- package/src/lib/color.ts +243 -0
- package/src/{utils/cn.ts → lib/utils.ts} +1 -1
- package/src/components/accordion/accordion.meta.md +0 -88
- package/src/components/accordion/accordion.stories.tsx +0 -72
- package/src/components/accordion/accordion.tsx +0 -154
- package/src/components/affix/affix.meta.md +0 -98
- package/src/components/affix/affix.stories.tsx +0 -134
- package/src/components/affix/affix.tsx +0 -167
- package/src/components/alert/alert.meta.md +0 -132
- package/src/components/alert/alert.stories.tsx +0 -138
- package/src/components/alert/alert.tsx +0 -179
- package/src/components/alert-dialog/alert-dialog.meta.md +0 -152
- package/src/components/alert-dialog/alert-dialog.stories.tsx +0 -223
- package/src/components/alert-dialog/alert-dialog.tsx +0 -183
- package/src/components/anchor/anchor.meta.md +0 -92
- package/src/components/anchor/anchor.stories.tsx +0 -74
- package/src/components/anchor/anchor.tsx +0 -130
- package/src/components/app/app.meta.md +0 -91
- package/src/components/app/app.stories.tsx +0 -64
- package/src/components/app/app.tsx +0 -58
- package/src/components/aspect-ratio/aspect-ratio.meta.md +0 -82
- package/src/components/aspect-ratio/aspect-ratio.stories.tsx +0 -59
- package/src/components/aspect-ratio/aspect-ratio.tsx +0 -22
- package/src/components/auto-complete/auto-complete.meta.md +0 -110
- package/src/components/auto-complete/auto-complete.stories.tsx +0 -136
- package/src/components/auto-complete/auto-complete.tsx +0 -253
- package/src/components/avatar/avatar.meta.md +0 -93
- package/src/components/avatar/avatar.stories.tsx +0 -98
- package/src/components/avatar/avatar.tsx +0 -127
- package/src/components/badge/badge.meta.md +0 -120
- package/src/components/badge/badge.stories.tsx +0 -153
- package/src/components/badge/badge.tsx +0 -204
- package/src/components/breadcrumb/breadcrumb.meta.md +0 -127
- package/src/components/breadcrumb/breadcrumb.stories.tsx +0 -207
- package/src/components/breadcrumb/breadcrumb.tsx +0 -136
- package/src/components/button/button.meta.md +0 -335
- package/src/components/button/button.stories.tsx +0 -743
- package/src/components/button/button.tsx +0 -466
- package/src/components/calendar/calendar.meta.md +0 -128
- package/src/components/calendar/calendar.stories.tsx +0 -68
- package/src/components/calendar/calendar.tsx +0 -172
- package/src/components/card/card.meta.md +0 -139
- package/src/components/card/card.stories.tsx +0 -151
- package/src/components/card/card.tsx +0 -306
- package/src/components/carousel/carousel.meta.md +0 -118
- package/src/components/carousel/carousel.stories.tsx +0 -89
- package/src/components/carousel/carousel.tsx +0 -224
- package/src/components/cascader/cascader.meta.md +0 -140
- package/src/components/cascader/cascader.stories.tsx +0 -120
- package/src/components/cascader/cascader.tsx +0 -548
- package/src/components/checkbox/checkbox.meta.md +0 -167
- package/src/components/checkbox/checkbox.stories.tsx +0 -288
- package/src/components/checkbox/checkbox.tsx +0 -195
- package/src/components/collapsible/collapsible.meta.md +0 -88
- package/src/components/collapsible/collapsible.stories.tsx +0 -43
- package/src/components/collapsible/collapsible.tsx +0 -105
- package/src/components/color-picker/color-picker.meta.md +0 -89
- package/src/components/color-picker/color-picker.stories.tsx +0 -159
- package/src/components/color-picker/color-picker.tsx +0 -171
- package/src/components/command/command.meta.md +0 -120
- package/src/components/command/command.stories.tsx +0 -59
- package/src/components/command/command.tsx +0 -158
- package/src/components/context-menu/context-menu.meta.md +0 -93
- package/src/components/context-menu/context-menu.stories.tsx +0 -54
- package/src/components/context-menu/context-menu.tsx +0 -204
- package/src/components/data-table/data-table.meta.md +0 -150
- package/src/components/data-table/data-table.stories.tsx +0 -132
- package/src/components/data-table/data-table.tsx +0 -185
- package/src/components/date-picker/date-picker.meta.md +0 -175
- package/src/components/date-picker/date-picker.stories.tsx +0 -108
- package/src/components/date-picker/date-picker.tsx +0 -1554
- package/src/components/descriptions/descriptions.meta.md +0 -83
- package/src/components/descriptions/descriptions.stories.tsx +0 -60
- package/src/components/descriptions/descriptions.tsx +0 -137
- package/src/components/dialog/dialog.meta.md +0 -168
- package/src/components/dialog/dialog.stories.tsx +0 -255
- package/src/components/dialog/dialog.tsx +0 -180
- package/src/components/dialog/imperative.tsx +0 -252
- package/src/components/drawer/drawer.meta.md +0 -95
- package/src/components/drawer/drawer.stories.tsx +0 -71
- package/src/components/drawer/drawer.tsx +0 -23
- package/src/components/dropdown-menu/dropdown-menu.meta.md +0 -171
- package/src/components/dropdown-menu/dropdown-menu.stories.tsx +0 -198
- package/src/components/dropdown-menu/dropdown-menu.tsx +0 -209
- package/src/components/ellipsis/ellipsis.meta.md +0 -87
- package/src/components/ellipsis/ellipsis.stories.tsx +0 -72
- package/src/components/ellipsis/ellipsis.tsx +0 -153
- package/src/components/empty/empty.meta.md +0 -86
- package/src/components/empty/empty.stories.tsx +0 -46
- package/src/components/empty/empty.tsx +0 -54
- package/src/components/field/field.meta.md +0 -154
- package/src/components/field/field.stories.tsx +0 -497
- package/src/components/field/field.tsx +0 -392
- package/src/components/filter-bar/filter-bar.meta.md +0 -92
- package/src/components/filter-bar/filter-bar.stories.tsx +0 -1086
- package/src/components/filter-bar/filter-bar.tsx +0 -568
- package/src/components/flex/flex.meta.md +0 -142
- package/src/components/flex/flex.stories.tsx +0 -199
- package/src/components/flex/flex.tsx +0 -145
- package/src/components/float-button/float-button.meta.md +0 -92
- package/src/components/float-button/float-button.stories.tsx +0 -80
- package/src/components/float-button/float-button.tsx +0 -143
- package/src/components/form/form.meta.md +0 -153
- package/src/components/form/form.stories.tsx +0 -472
- package/src/components/form/form.tsx +0 -260
- package/src/components/grid/grid.meta.md +0 -92
- package/src/components/grid/grid.stories.tsx +0 -101
- package/src/components/grid/grid.tsx +0 -130
- package/src/components/hover-card/hover-card.meta.md +0 -103
- package/src/components/hover-card/hover-card.stories.tsx +0 -97
- package/src/components/hover-card/hover-card.tsx +0 -67
- package/src/components/icon/DEVELOPMENT.md +0 -809
- package/src/components/icon/icon.meta.md +0 -170
- package/src/components/icon/icon.stories.tsx +0 -344
- package/src/components/icon/icon.tsx +0 -248
- package/src/components/image/image.meta.md +0 -99
- package/src/components/image/image.stories.tsx +0 -55
- package/src/components/image/image.tsx +0 -140
- package/src/components/input/input.meta.md +0 -115
- package/src/components/input/input.stories.tsx +0 -144
- package/src/components/input/input.tsx +0 -212
- package/src/components/input-group/input-group.meta.md +0 -124
- package/src/components/input-group/input-group.stories.tsx +0 -121
- package/src/components/input-group/input-group.tsx +0 -143
- package/src/components/input-number/input-number.meta.md +0 -148
- package/src/components/input-number/input-number.stories.tsx +0 -125
- package/src/components/input-number/input-number.tsx +0 -283
- package/src/components/input-otp/input-otp.meta.md +0 -106
- package/src/components/input-otp/input-otp.stories.tsx +0 -65
- package/src/components/input-otp/input-otp.tsx +0 -97
- package/src/components/item/item.meta.md +0 -121
- package/src/components/item/item.stories.tsx +0 -116
- package/src/components/item/item.tsx +0 -172
- package/src/components/kbd/kbd.meta.md +0 -94
- package/src/components/kbd/kbd.stories.tsx +0 -70
- package/src/components/kbd/kbd.tsx +0 -86
- package/src/components/label/label.meta.md +0 -99
- package/src/components/label/label.stories.tsx +0 -145
- package/src/components/label/label.tsx +0 -138
- package/src/components/masonry/masonry.meta.md +0 -90
- package/src/components/masonry/masonry.stories.tsx +0 -68
- package/src/components/masonry/masonry.tsx +0 -60
- package/src/components/mentions/mentions.meta.md +0 -119
- package/src/components/mentions/mentions.stories.tsx +0 -189
- package/src/components/mentions/mentions.tsx +0 -243
- package/src/components/menubar/menubar.meta.md +0 -118
- package/src/components/menubar/menubar.stories.tsx +0 -141
- package/src/components/menubar/menubar.tsx +0 -232
- package/src/components/native-select/native-select.meta.md +0 -93
- package/src/components/native-select/native-select.stories.tsx +0 -83
- package/src/components/native-select/native-select.tsx +0 -54
- package/src/components/navigation-menu/navigation-menu.meta.md +0 -118
- package/src/components/navigation-menu/navigation-menu.stories.tsx +0 -215
- package/src/components/navigation-menu/navigation-menu.tsx +0 -129
- package/src/components/notification/notification.meta.md +0 -133
- package/src/components/notification/notification.stories.tsx +0 -98
- package/src/components/notification/notification.tsx +0 -99
- package/src/components/page-header/DEVELOPMENT.md +0 -842
- package/src/components/page-header/page-header.meta.md +0 -210
- package/src/components/page-header/page-header.stories.tsx +0 -428
- package/src/components/page-header/page-header.tsx +0 -284
- package/src/components/page-shell/page-shell.meta.md +0 -116
- package/src/components/page-shell/page-shell.stories.tsx +0 -149
- package/src/components/page-shell/page-shell.tsx +0 -115
- package/src/components/pagination/pagination.meta.md +0 -230
- package/src/components/pagination/pagination.stories.tsx +0 -284
- package/src/components/pagination/pagination.tsx +0 -567
- package/src/components/popconfirm/popconfirm.meta.md +0 -114
- package/src/components/popconfirm/popconfirm.stories.tsx +0 -75
- package/src/components/popconfirm/popconfirm.tsx +0 -134
- package/src/components/popover/popover.meta.md +0 -154
- package/src/components/popover/popover.stories.tsx +0 -158
- package/src/components/popover/popover.tsx +0 -104
- package/src/components/progress/progress.meta.md +0 -118
- package/src/components/progress/progress.stories.tsx +0 -75
- package/src/components/progress/progress.tsx +0 -203
- package/src/components/radio-group/radio-group.meta.md +0 -175
- package/src/components/radio-group/radio-group.stories.tsx +0 -113
- package/src/components/radio-group/radio-group.tsx +0 -209
- package/src/components/rate/rate.meta.md +0 -118
- package/src/components/rate/rate.stories.tsx +0 -89
- package/src/components/rate/rate.tsx +0 -180
- package/src/components/resizable/resizable.meta.md +0 -95
- package/src/components/resizable/resizable.stories.tsx +0 -104
- package/src/components/resizable/resizable.tsx +0 -56
- package/src/components/result/result.meta.md +0 -95
- package/src/components/result/result.stories.tsx +0 -67
- package/src/components/result/result.tsx +0 -100
- package/src/components/scroll-area/scroll-area.meta.md +0 -85
- package/src/components/scroll-area/scroll-area.stories.tsx +0 -49
- package/src/components/scroll-area/scroll-area.tsx +0 -51
- package/src/components/segmented/segmented.meta.md +0 -106
- package/src/components/segmented/segmented.stories.tsx +0 -130
- package/src/components/segmented/segmented.tsx +0 -146
- package/src/components/select/select.meta.md +0 -255
- package/src/components/select/select.stories.tsx +0 -275
- package/src/components/select/select.tsx +0 -735
- package/src/components/separator/separator.meta.md +0 -75
- package/src/components/separator/separator.stories.tsx +0 -71
- package/src/components/separator/separator.tsx +0 -100
- package/src/components/sheet/sheet.meta.md +0 -113
- package/src/components/sheet/sheet.stories.tsx +0 -188
- package/src/components/sheet/sheet.tsx +0 -226
- package/src/components/sidebar/sidebar.meta.md +0 -151
- package/src/components/sidebar/sidebar.tsx +0 -853
- package/src/components/skeleton/skeleton.meta.md +0 -94
- package/src/components/skeleton/skeleton.stories.tsx +0 -79
- package/src/components/skeleton/skeleton.tsx +0 -144
- package/src/components/slider/slider.meta.md +0 -146
- package/src/components/slider/slider.stories.tsx +0 -121
- package/src/components/slider/slider.tsx +0 -227
- package/src/components/sonner/sonner.meta.md +0 -147
- package/src/components/sonner/sonner.stories.tsx +0 -164
- package/src/components/sonner/sonner.tsx +0 -169
- package/src/components/spinner/spinner.meta.md +0 -125
- package/src/components/spinner/spinner.stories.tsx +0 -123
- package/src/components/spinner/spinner.tsx +0 -166
- package/src/components/statistic/statistic.meta.md +0 -104
- package/src/components/statistic/statistic.stories.tsx +0 -67
- package/src/components/steps/steps.meta.md +0 -116
- package/src/components/steps/steps.stories.tsx +0 -115
- package/src/components/steps/steps.tsx +0 -173
- package/src/components/switch/switch.meta.md +0 -138
- package/src/components/switch/switch.stories.tsx +0 -75
- package/src/components/switch/switch.tsx +0 -169
- package/src/components/table/table.meta.md +0 -106
- package/src/components/table/table.stories.tsx +0 -80
- package/src/components/table/table.tsx +0 -124
- package/src/components/tabs/tabs.meta.md +0 -111
- package/src/components/tabs/tabs.stories.tsx +0 -156
- package/src/components/tabs/tabs.tsx +0 -190
- package/src/components/tag/tag.meta.md +0 -159
- package/src/components/tag/tag.stories.tsx +0 -250
- package/src/components/tag/tag.tsx +0 -386
- package/src/components/textarea/textarea.meta.md +0 -99
- package/src/components/textarea/textarea.stories.tsx +0 -89
- package/src/components/textarea/textarea.tsx +0 -137
- package/src/components/time-picker/time-picker.meta.md +0 -175
- package/src/components/time-picker/time-picker.stories.tsx +0 -129
- package/src/components/time-picker/time-picker.tsx +0 -946
- package/src/components/timeline/timeline.meta.md +0 -110
- package/src/components/timeline/timeline.stories.tsx +0 -134
- package/src/components/timeline/timeline.tsx +0 -168
- package/src/components/toggle/toggle.meta.md +0 -89
- package/src/components/toggle/toggle.stories.tsx +0 -66
- package/src/components/toggle/toggle.tsx +0 -54
- package/src/components/toggle-group/toggle-group.meta.md +0 -91
- package/src/components/toggle-group/toggle-group.stories.tsx +0 -83
- package/src/components/toggle-group/toggle-group.tsx +0 -78
- package/src/components/tooltip/tooltip.meta.md +0 -149
- package/src/components/tooltip/tooltip.stories.tsx +0 -108
- package/src/components/tooltip/tooltip.tsx +0 -153
- package/src/components/tour/tour.meta.md +0 -121
- package/src/components/tour/tour.stories.tsx +0 -66
- package/src/components/tour/tour.tsx +0 -242
- package/src/components/transfer/transfer.meta.md +0 -95
- package/src/components/transfer/transfer.stories.tsx +0 -64
- package/src/components/transfer/transfer.tsx +0 -258
- package/src/components/tree/tree.meta.md +0 -169
- package/src/components/tree/tree.stories.tsx +0 -128
- package/src/components/tree/tree.tsx +0 -368
- package/src/components/tree-select/tree-select.meta.md +0 -151
- package/src/components/tree-select/tree-select.stories.tsx +0 -80
- package/src/components/tree-select/tree-select.tsx +0 -206
- package/src/components/typography/typography.meta.md +0 -149
- package/src/components/typography/typography.stories.tsx +0 -116
- package/src/components/typography/typography.tsx +0 -260
- package/src/components/upload/upload.meta.md +0 -156
- package/src/components/upload/upload.stories.tsx +0 -135
- package/src/components/upload/upload.tsx +0 -398
- package/src/components/watermark/watermark.meta.md +0 -100
- package/src/components/watermark/watermark.stories.tsx +0 -170
- package/src/components/watermark/watermark.tsx +0 -166
- package/src/hooks/use-breakpoint.ts +0 -117
- package/src/hooks/use-debounce-callback.ts +0 -52
- package/src/stories/theme-tokens.stories.tsx +0 -747
- package/src/utils/trigger-input.ts +0 -57
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { RefreshCcw } from 'lucide-react';
|
|
3
|
-
import { Popconfirm } from './popconfirm';
|
|
4
|
-
import { Button } from '@/components/button/button';
|
|
5
|
-
|
|
6
|
-
const meta: Meta<typeof Popconfirm> = {
|
|
7
|
-
title: '反馈 · Feedback/Popconfirm',
|
|
8
|
-
component: Popconfirm,
|
|
9
|
-
tags: ['autodocs'],
|
|
10
|
-
parameters: {
|
|
11
|
-
docs: {
|
|
12
|
-
description: {
|
|
13
|
-
component:
|
|
14
|
-
'轻量级确认弹层 — 小风险操作的二次确认(删除一行 / 忽略一条通知)。视觉比 AlertDialog 更轻、不阻塞页面;onConfirm 支持 Promise(等待时按钮自动 loading)。等价 antd `Popconfirm`。',
|
|
15
|
-
},
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export default meta;
|
|
21
|
-
type Story = StoryObj<typeof Popconfirm>;
|
|
22
|
-
|
|
23
|
-
export const Playground: Story = {
|
|
24
|
-
parameters: { controls: { disable: true } },
|
|
25
|
-
render: () => (
|
|
26
|
-
<Popconfirm
|
|
27
|
-
title="确认取消订阅?"
|
|
28
|
-
description="你将停止收到每日摘要邮件"
|
|
29
|
-
onConfirm={() => new Promise<void>((r) => setTimeout(r, 400))}
|
|
30
|
-
>
|
|
31
|
-
<Button variant="outline">取消订阅</Button>
|
|
32
|
-
</Popconfirm>
|
|
33
|
-
),
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
export const Destructive: Story = {
|
|
37
|
-
parameters: { controls: { disable: true } },
|
|
38
|
-
render: () => (
|
|
39
|
-
<Popconfirm
|
|
40
|
-
title="删除此评论?"
|
|
41
|
-
description="删除后无法恢复"
|
|
42
|
-
okType="destructive"
|
|
43
|
-
okText="删除"
|
|
44
|
-
onConfirm={() => new Promise<void>((r) => setTimeout(r, 600))}
|
|
45
|
-
>
|
|
46
|
-
<Button variant="ghost" size="sm">
|
|
47
|
-
删除
|
|
48
|
-
</Button>
|
|
49
|
-
</Popconfirm>
|
|
50
|
-
),
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export const CustomIcon: Story = {
|
|
54
|
-
parameters: { controls: { disable: true } },
|
|
55
|
-
render: () => (
|
|
56
|
-
<Popconfirm
|
|
57
|
-
title="重置所有筛选条件?"
|
|
58
|
-
icon={<RefreshCcw className="size-4 text-primary" />}
|
|
59
|
-
onConfirm={() => {
|
|
60
|
-
alert('已重置');
|
|
61
|
-
}}
|
|
62
|
-
>
|
|
63
|
-
<Button variant="ghost">重置筛选</Button>
|
|
64
|
-
</Popconfirm>
|
|
65
|
-
),
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
export const Disabled: Story = {
|
|
69
|
-
parameters: { controls: { disable: true } },
|
|
70
|
-
render: () => (
|
|
71
|
-
<Popconfirm disabled title="不会弹出">
|
|
72
|
-
<Button variant="outline">禁用态(直接点击不弹出)</Button>
|
|
73
|
-
</Popconfirm>
|
|
74
|
-
),
|
|
75
|
-
};
|
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { AlertCircle } from 'lucide-react';
|
|
3
|
-
|
|
4
|
-
import { cn } from '@/utils/cn';
|
|
5
|
-
import { Button } from '@/components/button/button';
|
|
6
|
-
import {
|
|
7
|
-
Popover,
|
|
8
|
-
PopoverContent,
|
|
9
|
-
PopoverTrigger,
|
|
10
|
-
} from '@/components/popover/popover';
|
|
11
|
-
|
|
12
|
-
export interface PopconfirmProps {
|
|
13
|
-
/** 触发节点(通常是 Button / a)。 */
|
|
14
|
-
children: React.ReactElement;
|
|
15
|
-
/** 主标题(antd `title` 并集)。 */
|
|
16
|
-
title: React.ReactNode;
|
|
17
|
-
/** 副描述(antd `description` 并集) — 解释操作后果。 */
|
|
18
|
-
description?: React.ReactNode;
|
|
19
|
-
/**
|
|
20
|
-
* 触发图标(antd `icon` 并集) — 默认警示图标。
|
|
21
|
-
*/
|
|
22
|
-
icon?: React.ReactNode;
|
|
23
|
-
/** 确认按钮文本(antd `okText` 并集)。 @default "确定" */
|
|
24
|
-
okText?: string;
|
|
25
|
-
/** 取消按钮文本(antd `cancelText` 并集)。 @default "取消" */
|
|
26
|
-
cancelText?: string;
|
|
27
|
-
/**
|
|
28
|
-
* 确认按钮 variant(antd `okType` 并集) — 危险操作请用 `destructive`。
|
|
29
|
-
* @default "default"
|
|
30
|
-
*/
|
|
31
|
-
okType?: 'default' | 'destructive';
|
|
32
|
-
/** 确认回调。 */
|
|
33
|
-
onConfirm?: () => void | Promise<void>;
|
|
34
|
-
/** 取消回调。 */
|
|
35
|
-
onCancel?: () => void;
|
|
36
|
-
/** 受控 open(antd `open` 并集) — 不传时本组件自管 open 状态。 */
|
|
37
|
-
open?: boolean;
|
|
38
|
-
/** open 变化回调。 */
|
|
39
|
-
onOpenChange?: (next: boolean) => void;
|
|
40
|
-
/** 禁用(子节点点击不弹出)。 */
|
|
41
|
-
disabled?: boolean;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* 轻量级确认弹层 — antd 独有补足。**等价 antd `Popconfirm`**。
|
|
46
|
-
* 用于"小风险"操作的二次确认(删除某一行、忽略某条通知),
|
|
47
|
-
* 视觉比 `AlertDialog` 更轻、不阻塞页面。
|
|
48
|
-
*
|
|
49
|
-
* **风险更高的操作请用 `AlertDialog`**(全屏阻塞模态)。
|
|
50
|
-
*/
|
|
51
|
-
const Popconfirm: React.FC<PopconfirmProps> = ({
|
|
52
|
-
children,
|
|
53
|
-
title,
|
|
54
|
-
description,
|
|
55
|
-
icon,
|
|
56
|
-
okText = '确定',
|
|
57
|
-
cancelText = '取消',
|
|
58
|
-
okType = 'default',
|
|
59
|
-
onConfirm,
|
|
60
|
-
onCancel,
|
|
61
|
-
open,
|
|
62
|
-
onOpenChange,
|
|
63
|
-
disabled = false,
|
|
64
|
-
}) => {
|
|
65
|
-
const [internalOpen, setInternalOpen] = React.useState(false);
|
|
66
|
-
const isControlled = open !== undefined;
|
|
67
|
-
const currentOpen = isControlled ? open! : internalOpen;
|
|
68
|
-
const [loading, setLoading] = React.useState(false);
|
|
69
|
-
|
|
70
|
-
const setOpen = (next: boolean) => {
|
|
71
|
-
if (!isControlled) setInternalOpen(next);
|
|
72
|
-
onOpenChange?.(next);
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
const handleConfirm = async () => {
|
|
76
|
-
try {
|
|
77
|
-
setLoading(true);
|
|
78
|
-
await onConfirm?.();
|
|
79
|
-
setOpen(false);
|
|
80
|
-
} finally {
|
|
81
|
-
setLoading(false);
|
|
82
|
-
}
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
const handleCancel = () => {
|
|
86
|
-
onCancel?.();
|
|
87
|
-
setOpen(false);
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
if (disabled) return children;
|
|
91
|
-
|
|
92
|
-
return (
|
|
93
|
-
<Popover open={currentOpen} onOpenChange={setOpen}>
|
|
94
|
-
<PopoverTrigger asChild>{children}</PopoverTrigger>
|
|
95
|
-
<PopoverContent className="w-72 p-3" align="start">
|
|
96
|
-
<div className="flex items-start gap-2">
|
|
97
|
-
<span className="mt-0.5 text-warning">
|
|
98
|
-
{icon ?? <AlertCircle className="size-4" />}
|
|
99
|
-
</span>
|
|
100
|
-
<div className="min-w-0 flex-1">
|
|
101
|
-
<div className="text-xs font-medium">{title}</div>
|
|
102
|
-
{description ? (
|
|
103
|
-
<div className={cn('mt-1 text-xs text-muted-foreground')}>
|
|
104
|
-
{description}
|
|
105
|
-
</div>
|
|
106
|
-
) : null}
|
|
107
|
-
</div>
|
|
108
|
-
</div>
|
|
109
|
-
<div className="mt-3 flex justify-end gap-2">
|
|
110
|
-
<Button
|
|
111
|
-
type="button"
|
|
112
|
-
variant="outline"
|
|
113
|
-
size="sm"
|
|
114
|
-
onClick={handleCancel}
|
|
115
|
-
>
|
|
116
|
-
{cancelText}
|
|
117
|
-
</Button>
|
|
118
|
-
<Button
|
|
119
|
-
type="button"
|
|
120
|
-
variant={okType === 'destructive' ? 'destructive' : 'default'}
|
|
121
|
-
size="sm"
|
|
122
|
-
loading={loading}
|
|
123
|
-
onClick={handleConfirm}
|
|
124
|
-
>
|
|
125
|
-
{okText}
|
|
126
|
-
</Button>
|
|
127
|
-
</div>
|
|
128
|
-
</PopoverContent>
|
|
129
|
-
</Popover>
|
|
130
|
-
);
|
|
131
|
-
};
|
|
132
|
-
Popconfirm.displayName = 'Popconfirm';
|
|
133
|
-
|
|
134
|
-
export { Popconfirm };
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
id: popover
|
|
3
|
-
name: Popover
|
|
4
|
-
type: component
|
|
5
|
-
category: feedback
|
|
6
|
-
since: 0.1.0
|
|
7
|
-
package: '@teamix-evo/ui'
|
|
8
|
-
displayName: 气泡卡片
|
|
9
|
-
---
|
|
10
|
-
|
|
11
|
-
# Popover 气泡卡片
|
|
12
|
-
|
|
13
|
-
可交互浮层 — Radix Popover + antd `arrow` 并集,使用 `showArrow` 控制尖角(与 Tooltip / HoverCard 命名统一)。
|
|
14
|
-
**与 Tooltip 区别**:Popover 内可放任意交互元素(button / form / link),触发方式为 click(默认),不是 hover。
|
|
15
|
-
|
|
16
|
-
## When to use
|
|
17
|
-
|
|
18
|
-
- 行内编辑(点字段名跳出编辑面板)
|
|
19
|
-
- 高级筛选 / 设置面板
|
|
20
|
-
- 动作菜单(超过 3 项时考虑 DropdownMenu)
|
|
21
|
-
- 信息卡片(用户头像 + 简介)
|
|
22
|
-
|
|
23
|
-
## When NOT to use
|
|
24
|
-
|
|
25
|
-
- 仅文字提示 → `Tooltip`
|
|
26
|
-
- 必须用户响应(阻断式)→ `Dialog` / `AlertDialog`
|
|
27
|
-
- 选择类下拉 → `Select` / `Combobox`
|
|
28
|
-
|
|
29
|
-
## Props
|
|
30
|
-
|
|
31
|
-
> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `PopoverContent` 的 props;`Popover`(Root)透传 Radix 的 `open / defaultOpen / onOpenChange / modal`。
|
|
32
|
-
|
|
33
|
-
<!-- auto:props:begin -->
|
|
34
|
-
| 名称 | 类型 | 默认值 | 必填 | 说明 |
|
|
35
|
-
| --- | --- | --- | --- | --- |
|
|
36
|
-
| `showArrow` | `boolean` | `false` | – | 是否显示三角形箭头(antd `arrow` 并集)。 与 Tooltip / HoverCard 统一用 `showArrow`,语义更清晰。 |
|
|
37
|
-
| `arrow` | `boolean` | – | – | 向后兼容别名:与 `showArrow` 二选一,同时传入时 `showArrow` 优先。 |
|
|
38
|
-
| `container` | `HTMLElement \| null` | – | – | 弹层 Portal 挂载容器 — 透传给 Radix Popover Portal。 默认挂在 `document.body`;在内层滚动容器 / Dialog 内时常需指定为该容器节点。 等价 antd `popupContainer`。 |
|
|
39
|
-
<!-- auto:props:end -->
|
|
40
|
-
|
|
41
|
-
## 依赖
|
|
42
|
-
|
|
43
|
-
> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
|
|
44
|
-
|
|
45
|
-
<!-- auto:deps:begin -->
|
|
46
|
-
### 同库依赖
|
|
47
|
-
|
|
48
|
-
> `teamix-evo ui add popover` 时,以下 entry 会被自动连带安装(无需手动 add)。
|
|
49
|
-
|
|
50
|
-
| Entry | 类型 | 描述 |
|
|
51
|
-
| --- | --- | --- |
|
|
52
|
-
| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
|
|
53
|
-
|
|
54
|
-
### npm 依赖
|
|
55
|
-
|
|
56
|
-
> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
|
|
57
|
-
|
|
58
|
-
```bash
|
|
59
|
-
pnpm add @radix-ui/react-popover@^1.1.0
|
|
60
|
-
```
|
|
61
|
-
<!-- auto:deps:end -->
|
|
62
|
-
|
|
63
|
-
> 子组件:`Popover`(Root)/ `PopoverTrigger`(触发器,通常 asChild)/ `PopoverContent`(浮层内容)/ `PopoverClose`(关闭按钮)/ `PopoverAnchor`(独立锚点)。
|
|
64
|
-
|
|
65
|
-
## AI 生成纪律
|
|
66
|
-
|
|
67
|
-
- **Trigger 用 `asChild`**:把已有按钮 wrap 进去而非另套层 `<button>`
|
|
68
|
-
- **Content 必有焦点目标**:键盘可达性 — Popover 打开后第一个可聚焦元素自动获焦
|
|
69
|
-
- **不嵌套 Popover**:嵌套会导致焦点陷阱混乱;改用 `Sheet` 或 `Dialog`
|
|
70
|
-
- **`modal={true}` 仅用于阻断场景**:默认 modal=false,允许用户点外部关闭
|
|
71
|
-
- **尖角名称用 `showArrow`**:与 Tooltip / HoverCard 保持一致;老字段 `arrow` 仅作为 deprecated 别名兼容,新代码不要再使用
|
|
72
|
-
- **表单场景推荐 `showArrow`**:轻微联动视觉、用户能快速识别浮层来源;菜单类/设置面板可省略尖角以减少视觉噪点
|
|
73
|
-
|
|
74
|
-
## Examples
|
|
75
|
-
|
|
76
|
-
```tsx
|
|
77
|
-
import {
|
|
78
|
-
Popover, PopoverTrigger, PopoverContent,
|
|
79
|
-
} from '@/components/ui/popover';
|
|
80
|
-
import { Button } from '@/components/ui/button';
|
|
81
|
-
|
|
82
|
-
// 基础
|
|
83
|
-
<Popover>
|
|
84
|
-
<PopoverTrigger asChild>
|
|
85
|
-
<Button variant="outline">打开</Button>
|
|
86
|
-
</PopoverTrigger>
|
|
87
|
-
<PopoverContent>
|
|
88
|
-
<h4 className="font-medium">标题</h4>
|
|
89
|
-
<p className="text-sm text-muted-foreground">描述文字...</p>
|
|
90
|
-
</PopoverContent>
|
|
91
|
-
</Popover>
|
|
92
|
-
|
|
93
|
-
// 带箭头
|
|
94
|
-
<Popover>
|
|
95
|
-
<PopoverTrigger asChild>
|
|
96
|
-
<Button>更多</Button>
|
|
97
|
-
</PopoverTrigger>
|
|
98
|
-
<PopoverContent showArrow>
|
|
99
|
-
<p>简短说明</p>
|
|
100
|
-
</PopoverContent>
|
|
101
|
-
</Popover>
|
|
102
|
-
```
|
|
103
|
-
|
|
104
|
-
## Balloon 形态 — 旧库 API → 新组合映射
|
|
105
|
-
|
|
106
|
-
新库 **不提供独立的 `Balloon` 组件**。这是主动决策 — 旧库 cloud-design `Balloon` 是"hover 提示 + click 浮层 + closable + 多主题"一物多相,违背 P1 三层对齐。新库拆为:
|
|
107
|
-
|
|
108
|
-
- **`Tooltip`**(hover) — 对应 cloud-design `Balloon.Tooltip` 和 `Balloon triggerType="hover"`,详见 [`tooltip.meta.md`](../tooltip/tooltip.meta.md)
|
|
109
|
-
- **`Popover`**(click,本组件) — 对应 cloud-design `Balloon triggerType="click"`(默认)
|
|
110
|
-
- **`HoverCard`**(纯展示的 hover 富内容) — 对应 `Balloon` 里放了富文本但不需交互的场景
|
|
111
|
-
|
|
112
|
-
### Props 映射表(`Balloon` triggerType="click" 主路径)
|
|
113
|
-
|
|
114
|
-
| 旧库 `Balloon` API | 新库等价写法 | 备注 |
|
|
115
|
-
| -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
|
|
116
|
-
| `triggerType="click"`(默认) | `<Popover>` | 默认即点击,无需额外配置 |
|
|
117
|
-
| `triggerType="hover"` | `<Tooltip>` 或 `<HoverCard>` | hover 请拆到专门组件 — 语义不同 |
|
|
118
|
-
| `triggerType="focus"` | 暂不提供 | Radix Popover 默认不含 focus 触发;需要时业务侧 `onFocus={() => setOpen(true)}` |
|
|
119
|
-
| `trigger` (触发元素) | `<PopoverTrigger asChild>{element}</PopoverTrigger>` | asChild 透传,不多一层 wrapper |
|
|
120
|
-
| `children` (浮层内容) | `<PopoverContent>{...}</PopoverContent>` | 可放任意交互元素 |
|
|
121
|
-
| `align`(12 方向 `tl/t/tr/lt/l/lb/rt/r/rb/bl/b/br`) | `side` + `align` 二维拆解 — 例: `tl` → `side="top" align="start"`,`t` → `side="top" align="center"` | Radix 范式,遵循 W3C 方位语义 |
|
|
122
|
-
| `offset` | `sideOffset` / `alignOffset` | 拆为两个轴,更精细 |
|
|
123
|
-
| `type="normal"`(深色) / `type="primary"`(浅色) | Popover 默认仅 light 一种 — 需深色请用 `Tooltip variant="default"` 或自带 `bg-primary` className | 替代思路:Popover 是富内容容器,深色背景会严重限制子节点 contrast,业务需要时手动覆盖设计令牌 |
|
|
124
|
-
| `closable=true`(右上角 X) | `<PopoverClose asChild><Button size="icon" variant="ghost" icon={<X />} aria-label="关闭" /></PopoverClose>` | 组合式 — 位置/样式/图标任意可控,见 `ClosableContent` story |
|
|
125
|
-
| `visible` / `defaultVisible` | `<Popover open={...}>` / `defaultOpen={...}` | 受控/非受控两套 |
|
|
126
|
-
| `onVisibleChange` | `<Popover onOpenChange={...}>` | — |
|
|
127
|
-
| `onClose` | `onOpenChange(open)` 里 · `if (!open) {...}` | 统一为 `onOpenChange`,不拆 open/close 二事件 |
|
|
128
|
-
| `safeNode`(点击该节点不关闭) | `onInteractOutside={(e) => { if (mySafeNode.contains(e.target as Node)) e.preventDefault(); }}` | Radix 原生在 `onInteractOutside` callback 里自由判断,可控性更高 |
|
|
129
|
-
| `popupClassName` | `<PopoverContent className="...">` | 直接透传 |
|
|
130
|
-
| `popupStyle` | `<PopoverContent style="...">` | 直接透传 |
|
|
131
|
-
| `popupContainer` | `<PopoverPrimitive.Portal container={...}>` (需手动包裹) | Radix 默认 portal 到 body |
|
|
132
|
-
| `cache`(隐藏时保留 DOM) | 不提供 | Radix Portal 是 mount/unmount 语义;需 cache 请业务侧自管 mount state |
|
|
133
|
-
| `delay`(hover 延时) | 请用 `<Tooltip delayDuration={...}>` | Popover 点击触发本就不需延时 |
|
|
134
|
-
| `animation` 自定义 | 已固化为 `animate-in/out fade+zoom+slide` 四向 | 业务覆盖 → `<PopoverContent className="...">` |
|
|
135
|
-
| `followTrigger` | 不提供 | Radix Portal 默认即 follow trigger,无需 prop |
|
|
136
|
-
|
|
137
|
-
### 不修复清单(主动不补)
|
|
138
|
-
|
|
139
|
-
| 旧 API | 决策原因 |
|
|
140
|
-
| -------------------------------------- | ------------------------------------------------------------------------------------- |
|
|
141
|
-
| 独立 `Balloon` 组件导出 | P1 三层对齐;`Tooltip`/`Popover`/`HoverCard` 三件拆解语义更明确 |
|
|
142
|
-
| `triggerType="focus"` 内置支持 | Radix Popover 不含 focus 触发;业务需要时手动 controlled `onFocus`,更可控 |
|
|
143
|
-
| `cache`(隐藏时保留 DOM) | mount/unmount 语义更准;cache 语义需业务侧明确控制 |
|
|
144
|
-
| `safeNode` prop | `onInteractOutside` callback 表达力更强(可同时判断多个安全节点 + 条件逻辑) |
|
|
145
|
-
| 12 方向语言 | 拆解为 `side` + `align` 二维 — W3C 语义,与 shadcn / Radix / antd `placement` 拆解一致 |
|
|
146
|
-
| `cache` / `popupContainer` 为默认 prop | 低频场景,业务手动包 Portal container 更加明确 |
|
|
147
|
-
|
|
148
|
-
### Balloon 专项 AI 生成纪律(在通用纪律之上叠加)
|
|
149
|
-
|
|
150
|
-
- **实例化时先选语义不选品牌**:写业务代码时,口说 "加个 Balloon" → 先问 "hover 还是 click + 内部能交互吗" → 选出 Tooltip / HoverCard / Popover
|
|
151
|
-
- **closable 走组合式**:不要为了"对齐 closable=true" 反向在 Popover 级加 prop — `<PopoverClose asChild>` 包 icon Button 即可(见 `ClosableContent` story)
|
|
152
|
-
- **带 PopoverClose 的 X 按钮走 `variant="ghost" size="icon"`** + 主体内容 `pr-6` 避免多行文本被覆盖
|
|
153
|
-
- **不要为 `safeNode` 需求抽 helper**:`onInteractOutside={(e) => isInsideRef(e.target, [refA, refB]) && e.preventDefault()}` 即足够
|
|
154
|
-
- **深色背景需求请优先考虑切换到 Tooltip variant="default"** — 仅在 "深色且需交互" 的少数场景才走 Popover className 覆盖
|
|
@@ -1,158 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
-
import { X } from 'lucide-react';
|
|
3
|
-
import {
|
|
4
|
-
Popover,
|
|
5
|
-
PopoverTrigger,
|
|
6
|
-
PopoverContent,
|
|
7
|
-
PopoverClose,
|
|
8
|
-
} from './popover';
|
|
9
|
-
import { Button } from '@/components/button/button';
|
|
10
|
-
import { Input } from '@/components/input/input';
|
|
11
|
-
import { Label } from '@/components/label/label';
|
|
12
|
-
|
|
13
|
-
const meta: Meta<typeof PopoverContent> = {
|
|
14
|
-
title: '反馈 · Feedback/Popover',
|
|
15
|
-
component: PopoverContent,
|
|
16
|
-
tags: ['autodocs'],
|
|
17
|
-
parameters: {
|
|
18
|
-
docs: {
|
|
19
|
-
description: {
|
|
20
|
-
component:
|
|
21
|
-
'气泡卡片 —— 由 trigger 触发,在 portal 中展示富内容(表单、菜单、说明等)。基于 Radix Popover 实现 + antd `Popover` 并集能力:`side` / `align` 控制方位、`showArrow` 渲染尖角、`modal` 控制是否阻断外部交互。相比 Tooltip 仅承载纯文本提示,Popover 可承载任意交互内容。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
argTypes: {
|
|
26
|
-
side: {
|
|
27
|
-
control: 'inline-radio',
|
|
28
|
-
options: ['top', 'right', 'bottom', 'left'],
|
|
29
|
-
},
|
|
30
|
-
align: {
|
|
31
|
-
control: 'inline-radio',
|
|
32
|
-
options: ['start', 'center', 'end'],
|
|
33
|
-
},
|
|
34
|
-
showArrow: { control: 'boolean' },
|
|
35
|
-
},
|
|
36
|
-
args: { side: 'bottom', align: 'center', showArrow: false },
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export default meta;
|
|
40
|
-
type Story = StoryObj<typeof PopoverContent>;
|
|
41
|
-
|
|
42
|
-
export const Playground: Story = {
|
|
43
|
-
render: (args) => (
|
|
44
|
-
<Popover>
|
|
45
|
-
<PopoverTrigger asChild>
|
|
46
|
-
<Button variant="outline">打开 Popover</Button>
|
|
47
|
-
</PopoverTrigger>
|
|
48
|
-
<PopoverContent {...args}>
|
|
49
|
-
<h4 className="mb-1 font-medium">尺寸调整</h4>
|
|
50
|
-
<p className="text-sm text-muted-foreground">
|
|
51
|
-
设置组件宽高,关闭后自动应用。
|
|
52
|
-
</p>
|
|
53
|
-
</PopoverContent>
|
|
54
|
-
</Popover>
|
|
55
|
-
),
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export const WithArrow: Story = {
|
|
59
|
-
name: 'showArrow · 有尖角',
|
|
60
|
-
parameters: { controls: { disable: true } },
|
|
61
|
-
render: () => (
|
|
62
|
-
<Popover defaultOpen>
|
|
63
|
-
<PopoverTrigger asChild>
|
|
64
|
-
<Button variant="outline">带箭头</Button>
|
|
65
|
-
</PopoverTrigger>
|
|
66
|
-
<PopoverContent showArrow>
|
|
67
|
-
<h4 className="mb-1 font-medium">导出 CSV</h4>
|
|
68
|
-
<p className="text-sm text-muted-foreground">
|
|
69
|
-
仅导出当前筛选范围内的数据。
|
|
70
|
-
</p>
|
|
71
|
-
</PopoverContent>
|
|
72
|
-
</Popover>
|
|
73
|
-
),
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
export const WithoutArrow: Story = {
|
|
77
|
-
name: 'showArrow={false} · 无尖角',
|
|
78
|
-
parameters: { controls: { disable: true } },
|
|
79
|
-
render: () => (
|
|
80
|
-
<Popover defaultOpen>
|
|
81
|
-
<PopoverTrigger asChild>
|
|
82
|
-
<Button variant="outline">无箭头</Button>
|
|
83
|
-
</PopoverTrigger>
|
|
84
|
-
<PopoverContent>
|
|
85
|
-
<h4 className="mb-1 font-medium">默认形态</h4>
|
|
86
|
-
<p className="text-sm text-muted-foreground">
|
|
87
|
-
浮层与 trigger 之间留白,不带尖角。
|
|
88
|
-
</p>
|
|
89
|
-
</PopoverContent>
|
|
90
|
-
</Popover>
|
|
91
|
-
),
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
export const InteractiveForm: Story = {
|
|
95
|
-
parameters: { controls: { disable: true } },
|
|
96
|
-
render: () => (
|
|
97
|
-
<Popover>
|
|
98
|
-
<PopoverTrigger asChild>
|
|
99
|
-
<Button>边距设置</Button>
|
|
100
|
-
</PopoverTrigger>
|
|
101
|
-
<PopoverContent className="w-80" showArrow>
|
|
102
|
-
<div className="grid gap-3">
|
|
103
|
-
<h4 className="font-medium">边距</h4>
|
|
104
|
-
<div className="grid grid-cols-3 items-center gap-3">
|
|
105
|
-
<Label htmlFor="m-top">上</Label>
|
|
106
|
-
<Input id="m-top" defaultValue="16" className="col-span-2 h-8" />
|
|
107
|
-
</div>
|
|
108
|
-
<div className="grid grid-cols-3 items-center gap-3">
|
|
109
|
-
<Label htmlFor="m-right">右</Label>
|
|
110
|
-
<Input id="m-right" defaultValue="16" className="col-span-2 h-8" />
|
|
111
|
-
</div>
|
|
112
|
-
<div className="grid grid-cols-3 items-center gap-3">
|
|
113
|
-
<Label htmlFor="m-bottom">下</Label>
|
|
114
|
-
<Input id="m-bottom" defaultValue="16" className="col-span-2 h-8" />
|
|
115
|
-
</div>
|
|
116
|
-
<div className="grid grid-cols-3 items-center gap-3">
|
|
117
|
-
<Label htmlFor="m-left">左</Label>
|
|
118
|
-
<Input id="m-left" defaultValue="16" className="col-span-2 h-8" />
|
|
119
|
-
</div>
|
|
120
|
-
</div>
|
|
121
|
-
</PopoverContent>
|
|
122
|
-
</Popover>
|
|
123
|
-
),
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
/**
|
|
127
|
-
* Closable 形态 — 对齐 cloud-design `Balloon closable=true`。旧库用
|
|
128
|
-
* `closable` prop 声明式控制右上角 X 按钮,新库用 `<PopoverClose asChild>`
|
|
129
|
-
* 包裹 icon Button 的组合式 — 位置/样式/图标任意可控,且与整体设计体系的
|
|
130
|
-
* Button 变体(`size="icon"` `variant="ghost"`)保持一致。
|
|
131
|
-
*/
|
|
132
|
-
export const ClosableContent: Story = {
|
|
133
|
-
parameters: { controls: { disable: true } },
|
|
134
|
-
render: () => (
|
|
135
|
-
<Popover defaultOpen>
|
|
136
|
-
<PopoverTrigger asChild>
|
|
137
|
-
<Button variant="outline">可关闭浮层</Button>
|
|
138
|
-
</PopoverTrigger>
|
|
139
|
-
<PopoverContent className="relative w-80" showArrow>
|
|
140
|
-
<PopoverClose asChild>
|
|
141
|
-
<Button
|
|
142
|
-
size="icon"
|
|
143
|
-
variant="ghost"
|
|
144
|
-
icon={<X />}
|
|
145
|
-
aria-label="关闭浮层"
|
|
146
|
-
className="absolute right-1 top-1"
|
|
147
|
-
/>
|
|
148
|
-
</PopoverClose>
|
|
149
|
-
<div className="pr-6">
|
|
150
|
-
<h4 className="mb-1 font-medium">付费提示</h4>
|
|
151
|
-
<p className="text-sm text-muted-foreground">
|
|
152
|
-
升级到专业版可解锁高级限流策略。点击右上角 × 随时关闭。
|
|
153
|
-
</p>
|
|
154
|
-
</div>
|
|
155
|
-
</PopoverContent>
|
|
156
|
-
</Popover>
|
|
157
|
-
),
|
|
158
|
-
};
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
3
|
-
|
|
4
|
-
import { cn } from '@/utils/cn';
|
|
5
|
-
|
|
6
|
-
const Popover = PopoverPrimitive.Root;
|
|
7
|
-
const PopoverTrigger = React.forwardRef<
|
|
8
|
-
React.ElementRef<typeof PopoverPrimitive.Trigger>,
|
|
9
|
-
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
|
|
10
|
-
>(({ className, ...props }, ref) => (
|
|
11
|
-
<PopoverPrimitive.Trigger
|
|
12
|
-
ref={ref}
|
|
13
|
-
className={cn('cursor-pointer', className)}
|
|
14
|
-
{...props}
|
|
15
|
-
/>
|
|
16
|
-
));
|
|
17
|
-
PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
|
|
18
|
-
const PopoverAnchor = PopoverPrimitive.Anchor;
|
|
19
|
-
const PopoverClose = PopoverPrimitive.Close;
|
|
20
|
-
|
|
21
|
-
export interface PopoverContentProps
|
|
22
|
-
extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
|
|
23
|
-
/**
|
|
24
|
-
* 是否显示三角形箭头(antd `arrow` 并集)。
|
|
25
|
-
* 与 Tooltip / HoverCard 统一用 `showArrow`,语义更清晰。
|
|
26
|
-
* @default false
|
|
27
|
-
*/
|
|
28
|
-
showArrow?: boolean;
|
|
29
|
-
/**
|
|
30
|
-
* 向后兼容别名:与 `showArrow` 二选一,同时传入时 `showArrow` 优先。
|
|
31
|
-
* @deprecated 请改用 `showArrow`,后续版本会移除。
|
|
32
|
-
*/
|
|
33
|
-
arrow?: boolean;
|
|
34
|
-
/**
|
|
35
|
-
* 弹层 Portal 挂载容器 — 透传给 Radix Popover Portal。
|
|
36
|
-
* 默认挂在 `document.body`;在内层滚动容器 / Dialog 内时常需指定为该容器节点。
|
|
37
|
-
* 等价 antd `popupContainer`。
|
|
38
|
-
*/
|
|
39
|
-
container?: HTMLElement | null;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* `onCloseAutoFocus` 默认 `preventDefault` — 阻止 Radix 关闭时把焦点程序化
|
|
44
|
-
* restore 回 trigger。
|
|
45
|
-
*
|
|
46
|
-
* 原因:Chromium/Safari 把"程序化 restore 的 focus"判定为非鼠标焦点 → 触发
|
|
47
|
-
* `:focus-visible` → trigger(多数是 Button)在关闭后残留蓝色 ring,与用户
|
|
48
|
-
* "鼠标点完已经失焦了"的视觉预期冲突。与 DropdownMenu / ContextMenu 走同一
|
|
49
|
-
* 默认策略,对齐 antd `Popover` / cloud-design `Balloon` 的鼠标体感。
|
|
50
|
-
*
|
|
51
|
-
* 取舍:键盘 Esc 关闭后焦点也不会 restore 回 trigger,而是落到 body。业务侧
|
|
52
|
-
* 需要保留 restore 行为时,显式传 `onCloseAutoFocus` 即可完全覆盖默认。
|
|
53
|
-
*/
|
|
54
|
-
const PopoverContent = React.forwardRef<
|
|
55
|
-
React.ElementRef<typeof PopoverPrimitive.Content>,
|
|
56
|
-
PopoverContentProps
|
|
57
|
-
>(
|
|
58
|
-
(
|
|
59
|
-
{
|
|
60
|
-
className,
|
|
61
|
-
align = 'center',
|
|
62
|
-
sideOffset = 4,
|
|
63
|
-
showArrow,
|
|
64
|
-
arrow,
|
|
65
|
-
onCloseAutoFocus,
|
|
66
|
-
container,
|
|
67
|
-
children,
|
|
68
|
-
...props
|
|
69
|
-
},
|
|
70
|
-
ref,
|
|
71
|
-
) => {
|
|
72
|
-
// showArrow 优先;arrow 作为 deprecated 别名兜底,保持向后兼容
|
|
73
|
-
const renderArrow = showArrow ?? arrow ?? false;
|
|
74
|
-
return (
|
|
75
|
-
<PopoverPrimitive.Portal container={container}>
|
|
76
|
-
<PopoverPrimitive.Content
|
|
77
|
-
ref={ref}
|
|
78
|
-
align={align}
|
|
79
|
-
sideOffset={sideOffset}
|
|
80
|
-
onCloseAutoFocus={
|
|
81
|
-
onCloseAutoFocus ?? ((event) => event.preventDefault())
|
|
82
|
-
}
|
|
83
|
-
className={cn(
|
|
84
|
-
'z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none 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',
|
|
85
|
-
className,
|
|
86
|
-
)}
|
|
87
|
-
{...props}
|
|
88
|
-
>
|
|
89
|
-
{children}
|
|
90
|
-
{renderArrow ? (
|
|
91
|
-
<PopoverPrimitive.Arrow
|
|
92
|
-
className="fill-popover"
|
|
93
|
-
width={10}
|
|
94
|
-
height={5}
|
|
95
|
-
/>
|
|
96
|
-
) : null}
|
|
97
|
-
</PopoverPrimitive.Content>
|
|
98
|
-
</PopoverPrimitive.Portal>
|
|
99
|
-
);
|
|
100
|
-
},
|
|
101
|
-
);
|
|
102
|
-
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
103
|
-
|
|
104
|
-
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };
|