@endfield-ui/react 1.2.0 → 1.3.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 (483) hide show
  1. package/README.md +8 -3
  2. package/dist/components/accordion/Accordion.d.ts +46 -0
  3. package/dist/components/accordion/Accordion.js +2 -0
  4. package/dist/components/accordion/index.d.ts +3 -0
  5. package/dist/components/alert/Alert.d.ts +28 -0
  6. package/dist/components/alert/Alert.js +2 -0
  7. package/dist/components/alert/index.d.ts +3 -0
  8. package/dist/components/avatar/Avatar.d.ts +24 -0
  9. package/dist/components/avatar/Avatar.js +2 -0
  10. package/dist/components/avatar/AvatarSwitcher.d.ts +46 -0
  11. package/dist/components/avatar/AvatarSwitcher.js +2 -0
  12. package/dist/components/avatar/index.d.ts +4 -0
  13. package/dist/components/back-to-top/BackToTop.d.ts +21 -0
  14. package/dist/components/back-to-top/BackToTop.js +2 -0
  15. package/dist/components/back-to-top/index.d.ts +3 -0
  16. package/dist/components/badge/Badge.d.ts +20 -0
  17. package/dist/components/badge/Badge.js +2 -0
  18. package/dist/components/badge/index.d.ts +3 -0
  19. package/dist/components/bracket-title/BracketTitle.d.ts +17 -0
  20. package/dist/components/bracket-title/BracketTitle.js +2 -0
  21. package/dist/components/bracket-title/index.d.ts +3 -0
  22. package/dist/components/breadcrumb/Breadcrumb.d.ts +26 -0
  23. package/dist/components/breadcrumb/Breadcrumb.js +2 -0
  24. package/dist/components/breadcrumb/index.d.ts +3 -0
  25. package/dist/components/button/Button.d.ts +50 -0
  26. package/dist/components/button/Button.js +2 -0
  27. package/dist/components/button/ButtonGroup.d.ts +21 -0
  28. package/dist/components/button/ButtonGroup.js +2 -0
  29. package/dist/components/button/index.d.ts +4 -0
  30. package/dist/components/calendar/Calendar.d.ts +57 -0
  31. package/dist/components/calendar/Calendar.js +2 -0
  32. package/dist/components/calendar/index.d.ts +3 -0
  33. package/dist/components/carousel/Carousel.d.ts +38 -0
  34. package/dist/components/carousel/Carousel.js +2 -0
  35. package/dist/components/carousel/index.d.ts +3 -0
  36. package/dist/components/carousel/snap-track.js +2 -0
  37. package/dist/components/checkbox/Checkbox.d.ts +18 -0
  38. package/dist/components/checkbox/Checkbox.js +2 -0
  39. package/dist/components/checkbox/choice-style.js +2 -0
  40. package/dist/components/checkbox/index.d.ts +3 -0
  41. package/dist/components/chip/FilterChip.d.ts +18 -0
  42. package/dist/components/chip/FilterChip.js +2 -0
  43. package/dist/components/chip/ResourceChip.d.ts +16 -0
  44. package/dist/components/chip/ResourceChip.js +2 -0
  45. package/dist/components/chip/capsule-style.d.ts +4 -0
  46. package/dist/components/chip/capsule-style.js +2 -0
  47. package/dist/components/chip/index.d.ts +4 -0
  48. package/dist/components/combobox/Combobox.d.ts +105 -0
  49. package/dist/components/combobox/Combobox.js +2 -0
  50. package/dist/components/combobox/index.d.ts +3 -0
  51. package/dist/components/completion-banner/CompletionBanner.d.ts +26 -0
  52. package/dist/components/completion-banner/CompletionBanner.js +2 -0
  53. package/dist/components/completion-banner/index.d.ts +3 -0
  54. package/dist/components/context-menu/ContextMenu.d.ts +30 -0
  55. package/dist/components/context-menu/ContextMenu.js +2 -0
  56. package/dist/components/context-menu/index.d.ts +3 -0
  57. package/dist/components/corner-brackets/CornerBrackets.d.ts +20 -0
  58. package/dist/components/corner-brackets/CornerBrackets.js +2 -0
  59. package/dist/components/corner-brackets/index.d.ts +3 -0
  60. package/dist/components/countdown/Countdown.d.ts +26 -0
  61. package/dist/components/countdown/Countdown.js +2 -0
  62. package/dist/components/countdown/index.d.ts +3 -0
  63. package/dist/components/dash-indicator/DashIndicator.d.ts +15 -0
  64. package/dist/components/dash-indicator/DashIndicator.js +2 -0
  65. package/dist/components/dash-indicator/index.d.ts +3 -0
  66. package/dist/components/data-row/DataRow.d.ts +58 -0
  67. package/dist/components/data-row/DataRow.js +2 -0
  68. package/dist/components/data-row/index.d.ts +3 -0
  69. package/dist/components/date-picker/DateField.js +2 -0
  70. package/dist/components/date-picker/DatePicker.d.ts +56 -0
  71. package/dist/components/date-picker/DatePicker.js +2 -0
  72. package/dist/components/date-picker/DateRangePicker.d.ts +57 -0
  73. package/dist/components/date-picker/DateRangePicker.js +2 -0
  74. package/dist/components/date-picker/index.d.ts +4 -0
  75. package/dist/components/dialog/Dialog.d.ts +55 -0
  76. package/dist/components/dialog/Dialog.js +2 -0
  77. package/dist/components/dialog/index.d.ts +3 -0
  78. package/dist/components/dialog/initial-focus.js +2 -0
  79. package/dist/components/dialog/overlay-style.js +2 -0
  80. package/dist/components/drawer/Drawer.d.ts +48 -0
  81. package/dist/components/drawer/Drawer.js +2 -0
  82. package/dist/components/drawer/index.d.ts +3 -0
  83. package/dist/components/dropdown-menu/DropdownMenu.d.ts +115 -0
  84. package/dist/components/dropdown-menu/DropdownMenu.js +2 -0
  85. package/dist/components/dropdown-menu/MenuCheck.js +2 -0
  86. package/dist/components/dropdown-menu/index.d.ts +3 -0
  87. package/dist/components/dropdown-menu/menu-style.d.ts +4 -0
  88. package/dist/components/dropdown-menu/menu-style.js +2 -0
  89. package/dist/components/empty-state/EmptyState.d.ts +22 -0
  90. package/dist/components/empty-state/EmptyState.js +2 -0
  91. package/dist/components/empty-state/index.d.ts +3 -0
  92. package/dist/components/field/Field.d.ts +58 -0
  93. package/dist/components/field/Field.js +2 -0
  94. package/dist/components/field/index.d.ts +3 -0
  95. package/dist/components/file-upload/FileItem.d.ts +50 -0
  96. package/dist/components/file-upload/FileItem.js +2 -0
  97. package/dist/components/file-upload/FileUpload.d.ts +82 -0
  98. package/dist/components/file-upload/FileUpload.js +2 -0
  99. package/dist/components/file-upload/index.d.ts +4 -0
  100. package/dist/components/flyout-bar/FlyoutBar.d.ts +46 -0
  101. package/dist/components/flyout-bar/FlyoutBar.js +2 -0
  102. package/dist/components/flyout-bar/index.d.ts +3 -0
  103. package/dist/components/ghost-text/GhostText.d.ts +21 -0
  104. package/dist/components/ghost-text/GhostText.js +2 -0
  105. package/dist/components/ghost-text/index.d.ts +3 -0
  106. package/dist/components/hatch/Hatch.d.ts +18 -0
  107. package/dist/components/hatch/Hatch.js +2 -0
  108. package/dist/components/hatch/index.d.ts +3 -0
  109. package/dist/components/hazard-stripe/HazardStripe.d.ts +15 -0
  110. package/dist/components/hazard-stripe/HazardStripe.js +2 -0
  111. package/dist/components/hazard-stripe/index.d.ts +3 -0
  112. package/dist/components/hover-card/HoverCard.d.ts +35 -0
  113. package/dist/components/hover-card/HoverCard.js +2 -0
  114. package/dist/components/hover-card/index.d.ts +3 -0
  115. package/dist/components/icon-button/IconButton.d.ts +21 -0
  116. package/dist/components/icon-button/IconButton.js +2 -0
  117. package/dist/components/icon-button/index.d.ts +3 -0
  118. package/dist/components/image-viewer/ImageViewer.d.ts +48 -0
  119. package/dist/components/image-viewer/ImageViewer.js +2 -0
  120. package/dist/components/image-viewer/index.d.ts +3 -0
  121. package/dist/components/input/Input.d.ts +27 -0
  122. package/dist/components/input/Input.js +2 -0
  123. package/dist/components/input/control-box.d.ts +5 -0
  124. package/dist/components/input/control-box.js +2 -0
  125. package/dist/components/input/index.d.ts +3 -0
  126. package/dist/components/input/value-chip.js +2 -0
  127. package/dist/components/item-slot/ItemGrid.d.ts +12 -0
  128. package/dist/components/item-slot/ItemGrid.js +2 -0
  129. package/dist/components/item-slot/ItemSlot.d.ts +54 -0
  130. package/dist/components/item-slot/ItemSlot.js +2 -0
  131. package/dist/components/item-slot/index.d.ts +4 -0
  132. package/dist/components/kbd/Kbd.d.ts +15 -0
  133. package/dist/components/kbd/Kbd.js +2 -0
  134. package/dist/components/kbd/index.d.ts +3 -0
  135. package/dist/components/link-element/LinkElement.d.ts +6 -0
  136. package/dist/components/link-element/LinkElement.js +2 -0
  137. package/dist/components/list/List.d.ts +46 -0
  138. package/dist/components/list/List.js +2 -0
  139. package/dist/components/list/band-style.js +2 -0
  140. package/dist/components/list/index.d.ts +3 -0
  141. package/dist/components/loader/Loader.d.ts +23 -0
  142. package/dist/components/loader/Loader.js +2 -0
  143. package/dist/components/loader/index.d.ts +3 -0
  144. package/dist/components/marquee/Marquee.d.ts +22 -0
  145. package/dist/components/marquee/Marquee.js +2 -0
  146. package/dist/components/marquee/index.d.ts +3 -0
  147. package/dist/components/media-card/MediaCard.d.ts +36 -0
  148. package/dist/components/media-card/MediaCard.js +2 -0
  149. package/dist/components/media-card/index.d.ts +3 -0
  150. package/dist/components/nav-action/NavAction.d.ts +34 -0
  151. package/dist/components/nav-action/NavAction.js +2 -0
  152. package/dist/components/nav-action/index.d.ts +3 -0
  153. package/dist/components/nav-menu/NavMenu.d.ts +57 -0
  154. package/dist/components/nav-menu/NavMenu.js +2 -0
  155. package/dist/components/nav-menu/index.d.ts +3 -0
  156. package/dist/components/navigator/Navigator.d.ts +27 -0
  157. package/dist/components/navigator/Navigator.js +2 -0
  158. package/dist/components/navigator/index.d.ts +3 -0
  159. package/dist/components/otp-input/OtpInput.d.ts +52 -0
  160. package/dist/components/otp-input/OtpInput.js +2 -0
  161. package/dist/components/otp-input/index.d.ts +3 -0
  162. package/dist/components/page-header/PageHeader.d.ts +56 -0
  163. package/dist/components/page-header/PageHeader.js +2 -0
  164. package/dist/components/page-header/index.d.ts +3 -0
  165. package/dist/components/pagination/Pagination.d.ts +29 -0
  166. package/dist/components/pagination/Pagination.js +2 -0
  167. package/dist/components/pagination/index.d.ts +3 -0
  168. package/dist/components/panel/Panel.d.ts +36 -0
  169. package/dist/components/panel/Panel.js +2 -0
  170. package/dist/components/panel/index.d.ts +3 -0
  171. package/dist/components/play-button/PlayButton.d.ts +20 -0
  172. package/dist/components/play-button/PlayButton.js +2 -0
  173. package/dist/components/play-button/index.d.ts +3 -0
  174. package/dist/components/popover/Popover.d.ts +36 -0
  175. package/dist/components/popover/Popover.js +2 -0
  176. package/dist/components/popover/index.d.ts +3 -0
  177. package/dist/components/popover/panel-style.js +2 -0
  178. package/dist/components/progress/Progress.d.ts +27 -0
  179. package/dist/components/progress/Progress.js +2 -0
  180. package/dist/components/progress/ProgressRing.d.ts +23 -0
  181. package/dist/components/progress/ProgressRing.js +2 -0
  182. package/dist/components/progress/index.d.ts +4 -0
  183. package/dist/components/radio/Radio.d.ts +33 -0
  184. package/dist/components/radio/Radio.js +2 -0
  185. package/dist/components/radio/index.d.ts +3 -0
  186. package/dist/components/rec-indicator/RecIndicator.d.ts +16 -0
  187. package/dist/components/rec-indicator/RecIndicator.js +2 -0
  188. package/dist/components/rec-indicator/index.d.ts +3 -0
  189. package/dist/components/registration-strip/RegistrationStrip.d.ts +16 -0
  190. package/dist/components/registration-strip/RegistrationStrip.js +2 -0
  191. package/dist/components/registration-strip/index.d.ts +3 -0
  192. package/dist/components/rolling-number/RollingNumber.d.ts +25 -0
  193. package/dist/components/rolling-number/RollingNumber.js +2 -0
  194. package/dist/components/rolling-number/index.d.ts +3 -0
  195. package/dist/components/schedule/Schedule.d.ts +78 -0
  196. package/dist/components/schedule/Schedule.js +2 -0
  197. package/dist/components/schedule/index.d.ts +3 -0
  198. package/dist/components/scroll-area/ScrollArea.d.ts +26 -0
  199. package/dist/components/scroll-area/ScrollArea.js +2 -0
  200. package/dist/components/scroll-area/index.d.ts +3 -0
  201. package/dist/components/scroll-hint/ScrollHint.d.ts +23 -0
  202. package/dist/components/scroll-hint/ScrollHint.js +2 -0
  203. package/dist/components/scroll-hint/index.d.ts +3 -0
  204. package/dist/components/section-title/SectionTitle.d.ts +33 -0
  205. package/dist/components/section-title/SectionTitle.js +2 -0
  206. package/dist/components/section-title/index.d.ts +3 -0
  207. package/dist/components/segmented-control/SegmentedControl.d.ts +49 -0
  208. package/dist/components/segmented-control/SegmentedControl.js +2 -0
  209. package/dist/components/segmented-control/index.d.ts +3 -0
  210. package/dist/components/select/Select.d.ts +95 -0
  211. package/dist/components/select/Select.js +2 -0
  212. package/dist/components/select/index.d.ts +3 -0
  213. package/dist/components/side-rail/SideRail.d.ts +62 -0
  214. package/dist/components/side-rail/SideRail.js +2 -0
  215. package/dist/components/side-rail/SideRailSub.d.ts +47 -0
  216. package/dist/components/side-rail/SideRailSub.js +2 -0
  217. package/dist/components/side-rail/index.d.ts +4 -0
  218. package/dist/components/skeleton/Skeleton.d.ts +22 -0
  219. package/dist/components/skeleton/Skeleton.js +2 -0
  220. package/dist/components/skeleton/index.d.ts +3 -0
  221. package/dist/components/slider/Slider.d.ts +63 -0
  222. package/dist/components/slider/Slider.js +2 -0
  223. package/dist/components/slider/index.d.ts +3 -0
  224. package/dist/components/sparkline/Sparkline.d.ts +32 -0
  225. package/dist/components/sparkline/Sparkline.js +2 -0
  226. package/dist/components/sparkline/index.d.ts +3 -0
  227. package/dist/components/spinner/Spinner.d.ts +19 -0
  228. package/dist/components/spinner/Spinner.js +2 -0
  229. package/dist/components/spinner/index.d.ts +3 -0
  230. package/dist/components/splash-screen/SplashScreen.d.ts +43 -0
  231. package/dist/components/splash-screen/SplashScreen.js +2 -0
  232. package/dist/components/splash-screen/index.d.ts +3 -0
  233. package/dist/components/stat/Stat.d.ts +22 -0
  234. package/dist/components/stat/Stat.js +2 -0
  235. package/dist/components/stat/index.d.ts +3 -0
  236. package/dist/components/stepper/Stepper.d.ts +29 -0
  237. package/dist/components/stepper/Stepper.js +2 -0
  238. package/dist/components/stepper/index.d.ts +3 -0
  239. package/dist/components/steps/Steps.d.ts +55 -0
  240. package/dist/components/steps/Steps.js +2 -0
  241. package/dist/components/steps/index.d.ts +3 -0
  242. package/dist/components/switch/Switch.d.ts +28 -0
  243. package/dist/components/switch/Switch.js +2 -0
  244. package/dist/components/switch/index.d.ts +3 -0
  245. package/dist/components/table/Table.d.ts +96 -0
  246. package/dist/components/table/Table.js +2 -0
  247. package/dist/components/table/index.d.ts +3 -0
  248. package/dist/components/tabs/Tabs.d.ts +39 -0
  249. package/dist/components/tabs/Tabs.js +2 -0
  250. package/dist/components/tabs/index.d.ts +3 -0
  251. package/dist/components/tag/Tag.d.ts +25 -0
  252. package/dist/components/tag/Tag.js +2 -0
  253. package/dist/components/tag/TagPair.d.ts +16 -0
  254. package/dist/components/tag/TagPair.js +2 -0
  255. package/dist/components/tag/index.d.ts +4 -0
  256. package/dist/components/tag-input/TagInput.d.ts +66 -0
  257. package/dist/components/tag-input/TagInput.js +3 -0
  258. package/dist/components/tag-input/index.d.ts +3 -0
  259. package/dist/components/term/Term.d.ts +19 -0
  260. package/dist/components/term/Term.js +2 -0
  261. package/dist/components/term/index.d.ts +3 -0
  262. package/dist/components/textarea/Textarea.d.ts +17 -0
  263. package/dist/components/textarea/Textarea.js +2 -0
  264. package/dist/components/textarea/index.d.ts +3 -0
  265. package/dist/components/texture/Texture.d.ts +19 -0
  266. package/dist/components/texture/Texture.js +2 -0
  267. package/dist/components/texture/index.d.ts +3 -0
  268. package/dist/components/tick-ring/TickRing.d.ts +22 -0
  269. package/dist/components/tick-ring/TickRing.js +2 -0
  270. package/dist/components/tick-ring/index.d.ts +3 -0
  271. package/dist/components/timeline/Timeline.d.ts +22 -0
  272. package/dist/components/timeline/Timeline.js +2 -0
  273. package/dist/components/timeline/index.d.ts +3 -0
  274. package/dist/components/toast/Toast.d.ts +45 -0
  275. package/dist/components/toast/Toast.js +2 -0
  276. package/dist/components/toast/index.d.ts +3 -0
  277. package/dist/components/toc/Toc.d.ts +46 -0
  278. package/dist/components/toc/Toc.js +2 -0
  279. package/dist/components/toc/index.d.ts +3 -0
  280. package/dist/components/toolbar/Toolbar.d.ts +97 -0
  281. package/dist/components/toolbar/Toolbar.js +2 -0
  282. package/dist/components/toolbar/index.d.ts +3 -0
  283. package/dist/components/tooltip/Tooltip.d.ts +47 -0
  284. package/dist/components/tooltip/Tooltip.js +2 -0
  285. package/dist/components/tooltip/index.d.ts +3 -0
  286. package/dist/components/top-bar/TopBar.d.ts +21 -0
  287. package/dist/components/top-bar/TopBar.js +2 -0
  288. package/dist/components/top-bar/index.d.ts +3 -0
  289. package/dist/components/viewfinder/Viewfinder.d.ts +35 -0
  290. package/dist/components/viewfinder/Viewfinder.js +2 -0
  291. package/dist/components/viewfinder/index.d.ts +3 -0
  292. package/dist/game/animated-dialog/AnimatedDialog.d.ts +53 -0
  293. package/dist/game/animated-dialog/AnimatedDialog.js +2 -0
  294. package/dist/game/animated-dialog/index.d.ts +3 -0
  295. package/dist/game/banner-alert/AlertIcons.js +2 -0
  296. package/dist/game/banner-alert/AlertModal.js +2 -0
  297. package/dist/game/banner-alert/BannerAlert.d.ts +6 -0
  298. package/dist/game/banner-alert/BannerAlert.js +2 -0
  299. package/dist/game/banner-alert/index.d.ts +3 -0
  300. package/dist/game/banner-alert/types.d.ts +48 -0
  301. package/dist/game/banner-alert/types.js +2 -0
  302. package/dist/game/banner-alert/useAlertActions.js +2 -0
  303. package/dist/game/banner-alert/useAlertGlitch.js +2 -0
  304. package/dist/game/full-width-alert/FullWidthAlert.d.ts +7 -0
  305. package/dist/game/full-width-alert/FullWidthAlert.js +2 -0
  306. package/dist/game/full-width-alert/index.d.ts +3 -0
  307. package/dist/game/item-card/ItemCard.d.ts +48 -0
  308. package/dist/game/item-card/ItemCard.js +2 -0
  309. package/dist/game/item-card/index.d.ts +3 -0
  310. package/dist/game/item-hover-card/ItemHoverCard.d.ts +31 -0
  311. package/dist/game/item-hover-card/ItemHoverCard.js +2 -0
  312. package/dist/game/item-hover-card/events.js +2 -0
  313. package/dist/game/item-hover-card/index.d.ts +3 -0
  314. package/dist/game/item-icon/ItemIcon.d.ts +5 -0
  315. package/dist/game/item-icon/ItemIcon.js +2 -0
  316. package/dist/game/item-icon/helpers.d.ts +22 -0
  317. package/dist/game/item-icon/helpers.js +2 -0
  318. package/dist/game/item-icon/index.d.ts +5 -0
  319. package/dist/game/item-icon/types.d.ts +32 -0
  320. package/dist/game/item-tooltip-card/ItemTooltipCard.d.ts +6 -0
  321. package/dist/game/item-tooltip-card/ItemTooltipCard.js +2 -0
  322. package/dist/game/item-tooltip-card/icons.js +2 -0
  323. package/dist/game/item-tooltip-card/index.d.ts +4 -0
  324. package/dist/game/item-tooltip-card/types.d.ts +40 -0
  325. package/dist/game/lib/core.d.ts +8 -0
  326. package/dist/game/lib/first-focusable.js +2 -0
  327. package/dist/game/rounded-button/RoundedButton.d.ts +22 -0
  328. package/dist/game/rounded-button/RoundedButton.js +2 -0
  329. package/dist/game/rounded-button/RoundedIconButton.d.ts +10 -0
  330. package/dist/game/rounded-button/RoundedIconButton.js +2 -0
  331. package/dist/game/rounded-button/index.d.ts +4 -0
  332. package/dist/game/rounded-select/RoundedSelect.d.ts +43 -0
  333. package/dist/game/rounded-select/RoundedSelect.js +2 -0
  334. package/dist/game/rounded-select/index.d.ts +3 -0
  335. package/dist/game/rounded-switch/RoundedSwitch.d.ts +16 -0
  336. package/dist/game/rounded-switch/RoundedSwitch.js +2 -0
  337. package/dist/game/rounded-switch/index.d.ts +3 -0
  338. package/dist/game/rounded-toggle/RoundedToggle.d.ts +23 -0
  339. package/dist/game/rounded-toggle/RoundedToggle.js +2 -0
  340. package/dist/game/rounded-toggle/index.d.ts +3 -0
  341. package/dist/game/rounded-toggle/keyboard.js +2 -0
  342. package/dist/game/rounded-toggle/spring-highlight.js +2 -0
  343. package/dist/game/splash-screen/EndfieldSplashScreen.d.ts +14 -0
  344. package/dist/game/splash-screen/EndfieldSplashScreen.js +2 -0
  345. package/dist/game/splash-screen/index.d.ts +3 -0
  346. package/dist/game.d.ts +29 -383
  347. package/dist/game.js +1 -2068
  348. package/dist/hooks/index.d.ts +7 -0
  349. package/dist/hooks/useAddedKeys.js +2 -0
  350. package/dist/hooks/useControllableState.d.ts +12 -0
  351. package/dist/hooks/useControllableState.js +2 -0
  352. package/dist/hooks/useFlip.js +2 -0
  353. package/dist/hooks/useInView.d.ts +15 -0
  354. package/dist/hooks/useInView.js +2 -0
  355. package/dist/hooks/useIndicator.js +2 -0
  356. package/dist/hooks/useLingering.js +2 -0
  357. package/dist/hooks/useOverflowing.js +2 -0
  358. package/dist/hooks/usePortalScope.d.ts +26 -0
  359. package/dist/hooks/usePortalScope.js +2 -0
  360. package/dist/hooks/usePresence.js +2 -0
  361. package/dist/hooks/useReducedMotion.d.ts +10 -0
  362. package/dist/hooks/useReducedMotion.js +2 -0
  363. package/dist/hooks/useScrollPosition.js +2 -0
  364. package/dist/hooks/useTheme.d.ts +21 -0
  365. package/dist/hooks/useTheme.js +2 -0
  366. package/dist/icons/ArrowCorner.d.ts +9 -0
  367. package/dist/icons/ArrowCorner.js +2 -0
  368. package/dist/icons/ArrowLeft.d.ts +8 -0
  369. package/dist/icons/ArrowLeft.js +2 -0
  370. package/dist/icons/ArrowRight.d.ts +8 -0
  371. package/dist/icons/ArrowRight.js +2 -0
  372. package/dist/icons/CalendarIcon.d.ts +12 -0
  373. package/dist/icons/CalendarIcon.js +2 -0
  374. package/dist/icons/Check.d.ts +9 -0
  375. package/dist/icons/Check.js +2 -0
  376. package/dist/icons/ChevronDown.d.ts +8 -0
  377. package/dist/icons/ChevronDown.js +2 -0
  378. package/dist/icons/ChevronLeft.d.ts +8 -0
  379. package/dist/icons/ChevronLeft.js +2 -0
  380. package/dist/icons/ChevronRight.d.ts +8 -0
  381. package/dist/icons/ChevronRight.js +2 -0
  382. package/dist/icons/Close.d.ts +8 -0
  383. package/dist/icons/Close.js +2 -0
  384. package/dist/icons/Crosshair.d.ts +9 -0
  385. package/dist/icons/Crosshair.js +2 -0
  386. package/dist/icons/Lock.d.ts +8 -0
  387. package/dist/icons/Lock.js +2 -0
  388. package/dist/icons/Menu.d.ts +9 -0
  389. package/dist/icons/Menu.js +2 -0
  390. package/dist/icons/Minus.d.ts +9 -0
  391. package/dist/icons/Minus.js +2 -0
  392. package/dist/icons/Plus.d.ts +8 -0
  393. package/dist/icons/Plus.js +2 -0
  394. package/dist/icons/StatusDanger.d.ts +9 -0
  395. package/dist/icons/StatusDanger.js +2 -0
  396. package/dist/icons/StatusInfo.d.ts +9 -0
  397. package/dist/icons/StatusInfo.js +2 -0
  398. package/dist/icons/StatusSuccess.d.ts +9 -0
  399. package/dist/icons/StatusSuccess.js +2 -0
  400. package/dist/icons/StatusWarning.d.ts +9 -0
  401. package/dist/icons/StatusWarning.js +2 -0
  402. package/dist/icons/TriangleRight.d.ts +9 -0
  403. package/dist/icons/TriangleRight.js +2 -0
  404. package/dist/icons/Upload.d.ts +9 -0
  405. package/dist/icons/Upload.js +2 -0
  406. package/dist/icons/createIcon.d.ts +16 -0
  407. package/dist/icons/createIcon.js +2 -0
  408. package/dist/icons/index.d.ts +23 -0
  409. package/dist/index.d.ts +209 -3546
  410. package/dist/index.js +1 -9848
  411. package/dist/lib/cn.d.ts +5 -0
  412. package/dist/lib/cn.js +2 -0
  413. package/dist/lib/create-lazy-context.js +2 -0
  414. package/dist/lib/date.js +2 -0
  415. package/dist/lib/decor.js +2 -0
  416. package/dist/lib/defined.js +2 -0
  417. package/dist/lib/file.js +2 -0
  418. package/dist/lib/focus-ring.js +2 -0
  419. package/dist/lib/inline-style.js +2 -0
  420. package/dist/lib/merge-refs.js +2 -0
  421. package/dist/lib/motion.js +2 -0
  422. package/dist/styles.css +1 -1
  423. package/package.json +17 -11
  424. package/src/components/accordion/Accordion.tsx +13 -5
  425. package/src/components/avatar/AvatarSwitcher.tsx +7 -5
  426. package/src/components/button/Button.tsx +77 -90
  427. package/src/components/carousel/Carousel.tsx +6 -5
  428. package/src/components/context-menu/ContextMenu.tsx +5 -2
  429. package/src/components/data-row/DataRow.tsx +10 -4
  430. package/src/components/date-picker/DateField.tsx +1 -1
  431. package/src/components/dropdown-menu/DropdownMenu.tsx +7 -4
  432. package/src/components/dropdown-menu/menu-style.ts +3 -2
  433. package/src/components/field/Field.tsx +10 -6
  434. package/src/components/flyout-bar/FlyoutBar.tsx +1 -1
  435. package/src/components/icon-button/IconButton.tsx +5 -5
  436. package/src/components/image-viewer/ImageViewer.tsx +6 -5
  437. package/src/components/list/List.tsx +7 -5
  438. package/src/components/nav-action/NavAction.tsx +6 -4
  439. package/src/components/nav-menu/NavMenu.tsx +13 -7
  440. package/src/components/page-header/PageHeader.tsx +1 -1
  441. package/src/components/play-button/PlayButton.tsx +1 -1
  442. package/src/components/radio/Radio.tsx +7 -5
  443. package/src/components/schedule/Schedule.tsx +7 -5
  444. package/src/components/segmented-control/SegmentedControl.tsx +7 -5
  445. package/src/components/select/Select.tsx +11 -9
  446. package/src/components/side-rail/SideRail.tsx +15 -9
  447. package/src/components/side-rail/SideRailSub.tsx +12 -7
  448. package/src/components/steps/Steps.tsx +7 -5
  449. package/src/components/table/Table.tsx +23 -17
  450. package/src/components/tabs/Tabs.tsx +7 -5
  451. package/src/components/toast/Toast.tsx +8 -5
  452. package/src/components/toc/Toc.tsx +5 -4
  453. package/src/components/toolbar/Toolbar.tsx +7 -6
  454. package/src/components/tooltip/Tooltip.tsx +7 -4
  455. package/src/components/top-bar/TopBar.tsx +7 -2
  456. package/src/icons/ArrowCorner.tsx +1 -1
  457. package/src/icons/ArrowLeft.tsx +1 -1
  458. package/src/icons/ArrowRight.tsx +1 -1
  459. package/src/icons/CalendarIcon.tsx +1 -1
  460. package/src/icons/Check.tsx +4 -1
  461. package/src/icons/ChevronDown.tsx +4 -1
  462. package/src/icons/ChevronLeft.tsx +1 -1
  463. package/src/icons/ChevronRight.tsx +1 -1
  464. package/src/icons/Close.tsx +4 -1
  465. package/src/icons/Crosshair.tsx +1 -1
  466. package/src/icons/Lock.tsx +1 -1
  467. package/src/icons/Menu.tsx +4 -1
  468. package/src/icons/Minus.tsx +1 -1
  469. package/src/icons/Plus.tsx +4 -1
  470. package/src/icons/StatusDanger.tsx +1 -1
  471. package/src/icons/StatusInfo.tsx +1 -1
  472. package/src/icons/StatusSuccess.tsx +1 -1
  473. package/src/icons/StatusWarning.tsx +1 -1
  474. package/src/icons/TriangleRight.tsx +1 -1
  475. package/src/icons/Upload.tsx +1 -1
  476. package/src/lib/cn.ts +1 -1
  477. package/src/lib/create-lazy-context.ts +6 -0
  478. package/src/styles/theme.css +37 -0
  479. package/src/components/README.md +0 -191
  480. package/src/hooks/README.md +0 -20
  481. package/src/icons/README.md +0 -31
  482. package/src/lib/README.md +0 -19
  483. package/src/styles/README.md +0 -77
package/dist/index.d.ts CHANGED
@@ -1,3547 +1,210 @@
1
1
 
2
- import { CSSProperties, ComponentProps, HTMLAttributes, MouseEvent, MouseEventHandler, ReactElement, ReactNode, Ref, RefObject } from "react";
3
- import { ClassValue } from "clsx";
4
- import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
5
- import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
6
- //#region src/components/accordion/Accordion.d.ts
7
- type AccordionSize = "sm" | "md";
8
- type AccordionLevel = 2 | 3 | 4 | 5 | 6;
9
- type AccordionProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange" | "style"> & {
10
- /** 可以同时展开几项。默认开了这个,那个就收起来 */
11
- multiple?: boolean;
12
- /** 展开着的那几项的 `value` */
13
- value?: string[];
14
- defaultValue?: string[];
15
- onValueChange?: (value: string[]) => void;
16
- /** 标题行高 40 / 48px,默认 `md` */
17
- size?: AccordionSize;
18
- /** 标题的层级,默认 3(`<h3>`)。按它在页面里的位置给 */
19
- level?: AccordionLevel;
20
- /**
21
- * 收起的内容也留在页面里:浏览器的页内查找找得到,找到时自动展开。
22
- * 常见问题这类"来找一句话"的内容值得开
23
- */
24
- searchable?: boolean;
25
- disabled?: boolean;
26
- /** `AccordionItem` */
27
- children: ReactNode;
28
- };
29
- /**
30
- * 折叠面板:一摞可以各自展开收起的小节。先问能不能不折叠——
31
- * 藏起来的东西有人会找不到。
32
- */
33
- export declare function Accordion({ multiple, value, defaultValue, onValueChange, size, level, searchable, disabled, className, children, ...props }: AccordionProps): import("react").JSX.Element;
34
- type ItemOwnProps$6 = {
35
- /** 这一项的标识:`Accordion` 的 `value` 里放的就是它 */
36
- value: string;
37
- /** 标题:写成"里面是什么" */
38
- title: ReactNode;
39
- /** 标题右侧、记号之前的补充:计数、一个标签。它在按钮里,不能放能点的东西 */
40
- extra?: ReactNode;
41
- disabled?: boolean;
42
- /** 内容 */
43
- children: ReactNode;
44
- };
45
- type AccordionItemProps = ItemOwnProps$6 & Omit<ComponentProps<"div">, keyof ItemOwnProps$6 | "style">;
46
- /** 折叠面板里的一节。 */
47
- export declare function AccordionItem({ value, title, extra, disabled, className, children, ...props }: AccordionItemProps): import("react").JSX.Element;
48
- //#endregion
49
- //#region src/components/alert/Alert.d.ts
50
- type AlertTone = "info" | "success" | "warning" | "danger";
51
- type AlertProps = Omit<ComponentProps<"div">, "title"> & {
52
- /** 色调只点在左缘色条和图标上,底色保持中性。默认 `info` */
53
- tone?: AlertTone;
54
- /** 加粗的一行标题,可省 */
55
- title?: ReactNode;
56
- /** 右侧的一个操作,通常是 `text` 按钮 */
57
- action?: ReactNode;
58
- /**
59
- * 传了就出现关闭图标。它只负责通知:显示与否由使用方决定——
60
- * 要收起的过程,把 `open` 交给提示条;直接不渲染它就是立刻消失
61
- */
62
- onClose?: () => void;
63
- /** 置为 `false` 时先收起、淡出,再卸载。默认 `true` */
64
- open?: boolean;
65
- /** 收完、已经卸载之后触发 */
66
- onExited?: () => void;
67
- /** 关闭图标的可访问名称 */
68
- closeLabel?: string;
69
- /** 替换默认图标;传 `null` 去掉 */
70
- icon?: ReactNode;
71
- };
72
- /** 页面内的一条常驻消息。需要用户处理的重要信息用它,不用会消失的轻提示。 */
73
- export declare function Alert({ tone, title, action, onClose, open, onExited, closeLabel, icon, className, ref, children, ...props }: AlertProps): import("react").JSX.Element | null;
74
- //#endregion
75
- //#region src/components/avatar/Avatar.d.ts
76
- type AvatarSize = "sm" | "md" | "lg" | "xl";
77
- type AvatarProps = Omit<ComponentProps<"span">, "style"> & {
78
- /** 名字。没有图时显示它的首字;也是头像默认的可访问名称 */
79
- name?: string;
80
- /** 图片地址。没给、没加载出来、加载失败时显示首字 */
81
- src?: string;
82
- /**
83
- * 可访问名称,默认取 `name`。
84
- * 旁边已经写了名字时传 `""`:头像变成纯装饰,对读屏隐藏
85
- */
86
- alt?: string;
87
- /** 32 / 40 / 56 / 80px,默认 `md` */
88
- size?: AvatarSize;
89
- /** 选中:外面一圈行动色的环 */
90
- selected?: boolean;
91
- /** 没有图时显示的东西,代替首字(比如一个图标) */
92
- children?: ReactNode;
93
- };
94
- /** 头像:代表一个人或一个角色的圆形图。自己不能点。 */
95
- export declare function Avatar({ name, src, alt, size, selected, className, children, ...props }: AvatarProps): import("react").JSX.Element;
96
- //#endregion
97
- //#region src/components/avatar/AvatarSwitcher.d.ts
98
- type AvatarSwitcherOrientation = "vertical" | "horizontal";
99
- type AvatarSwitcherProps = Omit<ComponentProps<"div">, "aria-label" | "defaultValue" | "onChange"> & {
100
- /** 选的是什么,比如"人员" */
101
- "aria-label": string;
102
- /** 选中的那一个的 `value` */
103
- value?: string;
104
- defaultValue?: string;
105
- onValueChange?: (value: string) => void;
106
- /** 竖排(默认)或横排 */
107
- orientation?: AvatarSwitcherOrientation;
108
- /** 头像的大小,默认 `lg`(56px) */
109
- size?: AvatarSize;
110
- /** 翻页钮到头之后绕回另一头。默认到头时禁用 */
111
- loop?: boolean;
112
- /** 表单字段名:选中的值会随表单提交 */
113
- name?: string;
114
- previousLabel?: string;
115
- nextLabel?: string;
116
- /** 直接放 `AvatarSwitcherItem` */
117
- children: ReactNode;
118
- };
119
- /**
120
- * 头像切换:一列圆形头像里选一个,两端各一个圆形翻页钮。
121
- * 语义是单选组——方向键换人。头像放不下时给它一个高度(横排时是宽度)上限,
122
- * 头像在两个翻页钮之间滚动。
123
- */
124
- export declare function AvatarSwitcher({ value: valueProp, defaultValue, onValueChange, orientation, size, loop, name: nameProp, previousLabel, nextLabel, className, children, ...props }: AvatarSwitcherProps): import("react").JSX.Element;
125
- type ItemOwnProps$5 = {
126
- value: string;
127
- /** 名字:这一项的可访问名称,没有图时显示它的首字 */
128
- label: string;
129
- /** 头像的图片地址 */
130
- src?: string;
131
- disabled?: boolean;
132
- /** 没有图时显示的东西,代替首字 */
133
- children?: ReactNode;
134
- };
135
- type AvatarSwitcherItemProps = ItemOwnProps$5 & Omit<ComponentProps<"label">, keyof ItemOwnProps$5>;
136
- /** 头像切换里的一个头像。 */
137
- export declare function AvatarSwitcherItem({ value, label, src, disabled, className, children, ...props }: AvatarSwitcherItemProps): import("react").JSX.Element;
138
- //#endregion
139
- //#region src/components/back-to-top/BackToTop.d.ts
140
- type BackToTopSize = "sm" | "md";
141
- type BackToTopProps = Omit<ComponentProps<"button">, "children" | "aria-label"> & {
142
- /** 默认"回到顶部" */
143
- "aria-label"?: string;
144
- /** 看哪个滚动容器、回到谁的顶部。不传就是整个页面 */
145
- target?: RefObject<HTMLElement | null>;
146
- /** 滚过多少像素才出现,默认 400 */
147
- threshold?: number;
148
- /** 48px(默认)或 40px 见方 */
149
- size?: BackToTopSize;
150
- };
151
- /**
152
- * 回到顶部:滚过一段才出现的悬浮钮,点了回到最上面,焦点也跟着回去。
153
- * 默认看整个页面、自己 `fixed` 在视口右下角;放进某个滚动容器时传 `target`,
154
- * 并用 `className` 把位置改成相对那个容器的。
155
- */
156
- export declare function BackToTop({ "aria-label": ariaLabel, target, threshold, size, type, className, onClick, ...props }: BackToTopProps): import("react").JSX.Element;
157
- //#endregion
158
- //#region src/components/badge/Badge.d.ts
159
- type BadgeProps = Omit<ComponentProps<"span">, "children"> & {
160
- /** 数量。显示为橙色数字块 */
161
- count?: number;
162
- /** 超过后显示为 `max+`,默认 99 */
163
- max?: number;
164
- /** `count` 为 0 时是否仍然显示,默认不显示 */
165
- showZero?: boolean;
166
- /** 不带数字的提醒:一个橙色菱形 */
167
- dot?: boolean;
168
- /** 给读屏的完整说明,如"12 条未读"。提供后角标本身对辅助技术隐藏 */
169
- label?: string;
170
- /** 被标记的元素。角标压在它的右上角,向外偏移半个自身 */
171
- children?: ReactNode;
172
- };
173
- /** 通知角标:提醒与数量归橙色,不用来表示危险。 */
174
- export declare function Badge({ count, max, showZero, dot, label, className, children, ...props }: BadgeProps): import("react").JSX.Element;
175
- //#endregion
176
- //#region src/components/bracket-title/BracketTitle.d.ts
177
- type BracketTitleProps = Omit<ComponentProps<"h3">, "children"> & {
178
- /** 标题层级,默认 3(`<h3>`) */
179
- level?: 1 | 2 | 3 | 4 | 5 | 6;
180
- /** 进入视口时播放一次入场:括号先到,名称随后。默认开启 */
181
- animate?: boolean;
182
- /** 名称 */
183
- children: ReactNode;
184
- };
185
- /**
186
- * 方括号标题 `[ 名称 ]`:人物、地点、物品的名称——"一个被归档的条目"。
187
- * 普通的分节标题用 `SectionTitle`。字号用 `className` 改,默认是名称用的 `text-4xl`。
188
- */
189
- export declare function BracketTitle({ level, animate, className, children, ref, ...props }: BracketTitleProps): import("react").JSX.Element;
190
- //#endregion
191
- //#region src/components/link-element/LinkElement.d.ts
192
- /** 用来代替 `<a>` 的元素,通常是路由库的链接组件:`<Link to="/archive" />` */
193
- type LinkRender = ReactElement<Record<string, unknown>>;
194
- //#endregion
195
- //#region src/components/breadcrumb/Breadcrumb.d.ts
196
- type BreadcrumbProps = ComponentProps<"nav"> & {
197
- /**
198
- * 最多显示几项。超出时保留首项和靠后的几项,中间折叠成 `…`,点击展开。
199
- * 不传则全部显示。
200
- */
201
- maxItems?: number;
202
- /** 折叠按钮的可访问名称 */
203
- expandLabel?: string;
204
- };
205
- /** 层级路径:`// 档案 / 干员 / 详情`。双斜杠起头,单斜杠分隔。 */
206
- export declare function Breadcrumb({ maxItems, expandLabel, "aria-label": ariaLabel, className, children, ...props }: BreadcrumbProps): import("react").JSX.Element;
207
- type BreadcrumbItemProps = Omit<ComponentProps<"li">, "children"> & {
208
- /** 传了就渲染成链接 */
209
- href?: string;
210
- /** 用这个元素代替 `<a>`(路由库的链接组件)。传了就按链接处理 */
211
- render?: LinkRender;
212
- /** 当前页:加粗、不可点击,输出 `aria-current="page"`。给最后一项 */
213
- current?: boolean;
214
- children: ReactNode;
215
- };
216
- export declare function BreadcrumbItem({ href, render, current, className, children, ...props }: BreadcrumbItemProps): import("react").JSX.Element;
217
- //#endregion
218
- //#region src/components/button/Button.d.ts
219
- type ButtonVariant = "control" | "action" | "light" | "back" | "text" | "danger";
220
- type ButtonSize = "sm" | "md" | "lg";
221
- type OwnProps$4 = {
222
- /**
223
- * - `control` 深灰底 + 黄色竖条,默认;
224
- * - `action` 信号黄底,一屏只用一个;
225
- * - `light` 白底,用在深色底上或作次要项;
226
- * - `back` 深灰斜纹底 + 左箭头,返回上一级;
227
- * - `text` 无底、下划线、斜箭头,低强调;
228
- * - `danger` 同 `control`,竖条为红色,用于不可逆操作。
229
- */
230
- variant?: ButtonVariant;
231
- size?: ButtonSize;
232
- /** 文字左侧的图标 */
233
- iconStart?: ReactNode;
234
- /** 文字右侧的图标;`text` 变体默认是斜箭头,传 `null` 去掉 */
235
- iconEnd?: ReactNode;
236
- /** 提交中:记号变成旋转指示,尺寸不变,不响应点击 */
237
- loading?: boolean;
238
- /** 提交中显示的文字,如"处理中"。传了之后按钮按两段文字里较宽的一段定宽 */
239
- loadingText?: ReactNode;
240
- /** 撑满容器宽度 */
241
- block?: boolean;
242
- disabled?: boolean;
243
- };
244
- type ButtonAsButton = OwnProps$4 & Omit<ComponentProps<"button">, keyof OwnProps$4> & {
245
- href?: undefined;
246
- render?: undefined;
247
- };
248
- type ButtonAsLink = OwnProps$4 & Omit<ComponentProps<"a">, keyof OwnProps$4> & {
249
- /** 传了就渲染成链接 */
250
- href: string;
251
- render?: LinkRender;
252
- };
253
- type ButtonAsRendered = OwnProps$4 & Omit<ComponentProps<"a">, keyof OwnProps$4> & {
254
- href?: undefined;
255
- /**
256
- * 用这个元素代替 `<a>`,给路由库的链接组件用:
257
- * `<Button render={<Link to="/archive" />}>`。传了就按链接处理
258
- */
259
- render: LinkRender;
260
- };
261
- type ButtonProps = ButtonAsButton | ButtonAsLink | ButtonAsRendered;
262
- export declare function Button(props: ButtonProps): import("react").JSX.Element;
263
- //#endregion
264
- //#region src/components/button/ButtonGroup.d.ts
265
- type ButtonGroupAlign = "start" | "end" | "between";
266
- type ButtonGroupOrientation = "horizontal" | "vertical";
267
- type ButtonGroupGap = "sm" | "md";
268
- type ButtonGroupProps = ComponentProps<"div"> & {
269
- /** 横排时靠哪一边。默认 `end`:主要行动放在最右 */
270
- align?: ButtonGroupAlign;
271
- /** 竖排时按钮等宽,主要行动放在最下 */
272
- orientation?: ButtonGroupOrientation;
273
- /** 按钮之间 8px 或 12px */
274
- gap?: ButtonGroupGap;
275
- };
276
- /**
277
- * 并排的一组按钮。主要行动写在最后(最右或最下),一组里最多一个 `action`;
278
- * "取消 + 确认"用 `light` + `control`,把黄色留给真正重要的时刻。
279
- * 放不下时整组换行,不挤压按钮。
280
- */
281
- export declare function ButtonGroup({ align, orientation, gap, className, ...props }: ButtonGroupProps): import("react").JSX.Element;
282
- //#endregion
283
- //#region src/components/calendar/Calendar.d.ts
284
- /** 一段日期:`[起, 止]`,两头都包含。只有一天时两个一样 */
285
- type DateRange = [start: string, end: string];
286
- type CalendarBaseProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
287
- /** 现在显示的月份,`YYYY-MM`。不传时跟着选中的那一天(没选就是今天) */
288
- month?: string;
289
- defaultMonth?: string;
290
- onMonthChange?: (month: string) => void;
291
- /** 能选的最早一天 */
292
- min?: string;
293
- /** 能选的最晚一天 */
294
- max?: string;
295
- /** 返回真的日子不可选(比如周末、已经约满的日子) */
296
- isDateDisabled?: (date: string) => boolean;
297
- /** 一周从哪天开始:1 是星期一(默认),0 是星期日 */
298
- weekStartsOn?: 0 | 1;
299
- /** 月份标题、星期、读屏听到的日期名称按它走。默认 `zh-CN` */
300
- locale?: string;
301
- /** 哪一天算"今天"。默认取本地时间;服务端渲染或要一个固定的今天时自己传 */
302
- today?: string;
303
- previousLabel?: string;
304
- nextLabel?: string;
305
- };
306
- type CalendarSingleProps = CalendarBaseProps & {
307
- range?: false;
308
- /** 选中的那一天,`YYYY-MM-DD`;没选是 `null` */
309
- value?: string | null;
310
- defaultValue?: string | null;
311
- onValueChange?: (value: string) => void;
312
- startLabel?: never;
313
- endLabel?: never;
314
- pendingLabel?: never;
315
- };
316
- type CalendarRangeProps = CalendarBaseProps & {
317
- /** 选一段:点两下,第一下定起始日,第二下定结束日 */
318
- range: true;
319
- /** 选中的那一段,`[起, 止]`;没选是 `null` */
320
- value?: DateRange | null;
321
- defaultValue?: DateRange | null;
322
- /** 只在一段选完时触发;后点的那天更早也会排成先后 */
323
- onValueChange?: (value: DateRange) => void;
324
- /** 读屏在两端那两天的名称后面听到的词,默认"起始日""结束日" */
325
- startLabel?: string;
326
- endLabel?: string;
327
- /** 起始日定了之后的那句播报,默认"再选结束日" */
328
- pendingLabel?: string;
329
- };
330
- type CalendarProps = CalendarSingleProps | CalendarRangeProps;
331
- /**
332
- * 月历:选一天;加 `range` 是选一段。日期是 `YYYY-MM-DD` 的字符串。
333
- * 要一个带面板的字段用 `DatePicker` / `DateRangePicker`。
334
- */
335
- export declare function Calendar({ range, value: valueProp, defaultValue, onValueChange, month: monthProp, defaultMonth, onMonthChange, min, max, isDateDisabled, weekStartsOn, locale, today: todayProp, previousLabel, nextLabel, startLabel, endLabel, pendingLabel, className, ...props }: CalendarProps): import("react").JSX.Element;
336
- //#endregion
337
- //#region src/components/carousel/Carousel.d.ts
338
- type CarouselRatio = "16/9" | "4/3" | "1/1" | "3/4" | "21/9";
339
- type CarouselProps = Omit<ComponentProps<"section">, "aria-label" | "onChange"> & {
340
- /** 这组媒体是什么,比如"玩法介绍" */
341
- "aria-label": string;
342
- /** 现在是第几张,从 0 起 */
343
- index?: number;
344
- defaultIndex?: number;
345
- onIndexChange?: (index: number) => void;
346
- /** 到头之后绕回另一头。默认到头时翻页钮禁用 */
347
- loop?: boolean;
348
- /** 媒体的宽高比,默认 `16/9` */
349
- ratio?: CarouselRatio;
350
- /** 计数旁边再加一排进度短横 */
351
- indicator?: boolean;
352
- previousLabel?: string;
353
- nextLabel?: string;
354
- /** 直接放 `CarouselSlide` */
355
- children: ReactNode;
356
- };
357
- /**
358
- * 媒体轮播:一次看一张的大幅媒体,前后翻。不自动播放。
359
- * 轨道是原生的横向滚动加滚动吸附,触屏滑动是浏览器自带的。
360
- */
361
- export declare function Carousel({ index: indexProp, defaultIndex, onIndexChange, loop, ratio, indicator, previousLabel, nextLabel, className, children, ...props }: CarouselProps): import("react").JSX.Element;
362
- type CarouselSlideProps = Omit<ComponentProps<"div">, "title"> & {
363
- /** 这一张的标题,显示在媒体下方 */
364
- title?: ReactNode;
365
- /** 标题下面的一段正文 */
366
- description?: ReactNode;
367
- /** 媒体:一张图或一段视频,铺满并裁切 */
368
- children: ReactNode;
369
- };
370
- /** 轮播里的一张。直接放在 `Carousel` 里。 */
371
- export declare function CarouselSlide({ title: _title, description: _description, className, children, ...props }: CarouselSlideProps): import("react").JSX.Element;
372
- //#endregion
373
- //#region src/components/checkbox/Checkbox.d.ts
374
- type CheckboxProps = Omit<ComponentProps<"input">, "type" | "size"> & {
375
- /** 半选:一组子项只选了一部分。显示为短横,读屏读作"部分选中" */
376
- indeterminate?: boolean;
377
- /** 错误态:描边变红 */
378
- invalid?: boolean;
379
- onCheckedChange?: (checked: boolean) => void;
380
- /** 右侧的文字标签。不传时必须自己给 `aria-label` */
381
- children?: ReactNode;
382
- };
383
- /**
384
- * 复选框。原生 `<input type="checkbox">`,受控用 `checked`、非受控用 `defaultChecked`。
385
- * `className` 给整行,其余属性与 `ref` 给 `<input>`。
386
- */
387
- export declare function Checkbox({ indeterminate, invalid, onCheckedChange, onChange, className, children, ref, ...props }: CheckboxProps): import("react").JSX.Element;
388
- //#endregion
389
- //#region src/components/chip/capsule-style.d.ts
390
- type CapsuleSize = "sm" | "md";
391
- //#endregion
392
- //#region src/components/chip/FilterChip.d.ts
393
- type FilterChipProps = Omit<ComponentProps<"button">, "aria-pressed"> & {
394
- /** 受控的选中状态 */
395
- selected?: boolean;
396
- /** 非受控时的初始状态 */
397
- defaultSelected?: boolean;
398
- onSelectedChange?: (selected: boolean) => void;
399
- size?: CapsuleSize;
400
- };
401
- /**
402
- * 筛选胶囊:一个可以独立开关的条件,几个并排就是多选筛选。
403
- * 几项里只能选一项时用 `Tabs` 的 `capsule` 变体或单选。
404
- */
405
- export declare function FilterChip({ selected, defaultSelected, onSelectedChange, size, disabled, type, className, onClick, ...props }: FilterChipProps): import("react").JSX.Element;
406
- //#endregion
407
- //#region src/components/chip/ResourceChip.d.ts
408
- type ResourceChipSize = "sm" | "md";
409
- type ResourceChipProps = Omit<ComponentProps<"span">, "children"> & {
410
- /** 资源的图标,放进左端的圆形底托。本库不带资源图标,由使用方提供 */
411
- icon?: ReactNode;
412
- /** 数量,等宽数字 */
413
- children: ReactNode;
414
- /** 给读屏的完整说明,如"燃料 1,280"。提供后数字本身对辅助技术隐藏 */
415
- label?: string;
416
- size?: ResourceChipSize;
417
- };
418
- /** 资源胶囊:货币、材料的当前数量——会变的状态,所以是胶囊。 */
419
- export declare function ResourceChip({ icon, label, size, className, children, ...props }: ResourceChipProps): import("react").JSX.Element;
420
- //#endregion
421
- //#region src/components/dropdown-menu/menu-style.d.ts
422
- type MenuVariant = "plain" | "strong";
423
- //#endregion
424
- //#region src/components/input/control-box.d.ts
425
- type ControlVariant = "sunken" | "outline";
426
- type ControlSize = "sm" | "md" | "lg";
427
- //#endregion
428
- //#region src/components/combobox/Combobox.d.ts
429
- type ComboboxSize = ControlSize;
430
- type ComboboxVariant = ControlVariant;
431
- type ComboboxOption = {
432
- value: string;
433
- /** 显示的文字,也是检索的对象,所以必须是字符串 */
434
- label: string;
435
- /** 别名:检索时一并匹配,不显示。编号、缩写、旧称 */
436
- keywords?: readonly string[];
437
- disabled?: boolean;
438
- };
439
- type ComboboxOptionGroup = {
440
- /** 分组的小标题 */
441
- label: string;
442
- items: readonly ComboboxOption[];
443
- };
444
- type ComboboxCommonProps = {
445
- /** 选项,或者 `{ label, items }` 的分组。分组和不分组的不要混着传 */
446
- items: readonly ComboboxOption[] | readonly ComboboxOptionGroup[];
447
- /** 没选时输入框里的提示 */
448
- placeholder?: string;
449
- /** 表单字段名:选中的值会随表单提交 */
450
- name?: string;
451
- /**
452
- * 外框的画法,和输入框相同:
453
- * - `sunken` 凹陷的底 + 一条底边线,默认;
454
- * - `outline` 四边描边,放在凹陷底色的区域里时用。
455
- */
456
- variant?: ComboboxVariant;
457
- /** 32 / 40 / 56px 高。多选时这是最小高度,已选项多了会长高 */
458
- size?: ComboboxSize;
459
- /**
460
- * 面板的画法:
461
- * - `plain` 跟随主题,默认;
462
- * - `strong` 固定的深色面板,当前项整行黄底墨字。
463
- */
464
- panelVariant?: MenuVariant;
465
- /** 一个都没匹配上时面板里的说明 */
466
- emptyText?: ReactNode;
467
- /**
468
- * 正在取选项:面板里出一行"正在查找…",这时不显示 `emptyText`。
469
- * 已经拿到的选项照常显示
470
- */
471
- loading?: boolean;
472
- /** `loading` 时那一行的文字 */
473
- loadingText?: ReactNode;
474
- /**
475
- * 关掉之后不在本地筛选:`items` 给什么就显示什么。
476
- * 选项由服务器按输入的文字返回时用,配合 `onInputValueChange` 和 `loading`
477
- */
478
- filter?: boolean;
479
- /** 清除钮的可访问名称 */
480
- clearLabel?: string;
481
- /** 右侧三角按钮的可访问名称 */
482
- toggleLabel?: string;
483
- /** 错误态。放在 `Field` 里时跟随它的 `error` */
484
- invalid?: boolean;
485
- disabled?: boolean;
486
- required?: boolean;
487
- open?: boolean;
488
- defaultOpen?: boolean;
489
- onOpenChange?: (open: boolean) => void;
490
- /** 输入框里的文字变了:要自己去取选项(远程检索)时用 */
491
- onInputValueChange?: (text: string) => void;
492
- id?: string;
493
- "aria-label"?: string;
494
- "aria-describedby"?: string;
495
- /** 给外框 */
496
- className?: string;
497
- /** 给里面的 `<input>` */
498
- ref?: Ref<HTMLInputElement>;
499
- };
500
- type ComboboxSingleProps = ComboboxCommonProps & {
501
- multiple?: false;
502
- value?: string | null;
503
- defaultValue?: string | null;
504
- /** 清除之后拿到的是 `null` */
505
- onValueChange?: (value: string | null) => void;
506
- removeLabel?: never;
507
- };
508
- type ComboboxMultipleProps = ComboboxCommonProps & {
509
- /**
510
- * 可以选多项:值是数组,已选项在框里排成一个个小块。
511
- * 没打字直接选时面板不关;打了字搜出来再选,文字清空、面板关上
512
- */
513
- multiple: true;
514
- value?: string[];
515
- defaultValue?: string[];
516
- onValueChange?: (value: string[]) => void;
517
- /** 小块上删除叉的可访问名称,拿到的是这一项的文字。默认"移除某某" */
518
- removeLabel?: (label: string) => string;
519
- };
520
- type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
521
- /**
522
- * 组合框:一个能打字的下拉。选项多到要找的时候用它;只有几项时用 `Select`。
523
- * 值只能是选项里有的——它不是"带建议的输入框"。
524
- * 每个组合框都要有标签:放进 `Field`,或者自己传 `aria-label`。
525
- */
526
- export declare function Combobox(props: ComboboxProps): import("react").JSX.Element;
527
- //#endregion
528
- //#region src/components/completion-banner/CompletionBanner.d.ts
529
- type CompletionBannerProps = Omit<ComponentProps<"div">, "title"> & {
530
- /** 一句话说明完成了什么:"第三阶段已完成" */
531
- title: ReactNode;
532
- /** 背后的巨型描边词,默认 `COMPLETED`。纯装饰;传 `null` 去掉 */
533
- word?: ReactNode;
534
- /** 标题下的一行说明 */
535
- description?: ReactNode;
536
- /** 右侧的一个行动:领取、查看下一阶段 */
537
- action?: ReactNode;
538
- /** 标题层级,默认 3(`<h3>`) */
539
- level?: 2 | 3 | 4 | 5 | 6;
540
- /** 进入视口时播放一次入场:色带从左擦入,随后出字。默认开启 */
541
- animate?: boolean;
542
- };
543
- /**
544
- * 完成横幅:一个阶段全部完成时,头部区域做一次明暗反转。
545
- * 只在真正的里程碑上用;日常的"保存成功"用提示条就够了。
546
- *
547
- * 底是反转块:亮色主题下是深底黄字,暗色主题下是浅底深字。
548
- * 整块是一个 `data-theme="inverse"` 的局部主题,`action` 里的按钮按这块底色取值。
549
- */
550
- export declare function CompletionBanner({ title, word, description, action, level, animate, className, children, ref, ...props }: CompletionBannerProps): import("react").JSX.Element;
551
- //#endregion
552
- //#region src/components/context-menu/ContextMenu.d.ts
553
- type ContextMenuVariant = MenuVariant;
554
- type ContextMenuProps = {
555
- /**
556
- * 菜单里的内容:`DropdownMenuItem`、`DropdownMenuCheckboxItem`、
557
- * `DropdownMenuGroup`、`DropdownMenuSeparator`、`DropdownMenuSub`
558
- */
559
- menu: ReactNode;
560
- /** 被右键的区域:一个能接收 `ref` 与事件的元素 */
561
- children: ReactElement<Record<string, unknown>>;
562
- /**
563
- * - `plain` 跟随主题的面板,默认;
564
- * - `strong` 固定的深色面板。
565
- */
566
- variant?: ContextMenuVariant;
567
- onOpenChange?: (open: boolean) => void;
568
- /** 不再拦右键:回到浏览器自己的菜单 */
569
- disabled?: boolean;
570
- /** 给面板 */
571
- className?: string;
572
- };
573
- /**
574
- * 右键菜单:在一块区域上点右键(或按菜单键、触屏长按)时出现在指针处的下拉菜单。
575
- * 它只是捷径——里面的操作在页面上必须另有入口。
576
- */
577
- export declare function ContextMenu({ menu, children, variant, onOpenChange, disabled, className }: ContextMenuProps): import("react").JSX.Element;
578
- //#endregion
579
- //#region src/components/corner-brackets/CornerBrackets.d.ts
580
- type CornerBracketsSize = "sm" | "md";
581
- type CornerBracketsProps = ComponentProps<"div"> & {
582
- /** 要不要画括号,默认画。用作选中态时把选中状态传进来 */
583
- visible?: boolean;
584
- /** 臂长 12px 或 16px */
585
- size?: CornerBracketsSize;
586
- };
587
- /**
588
- * 角括号:四角各一个 L 形短线,把里面的东西框出来。
589
- * 用于矩阵里的单选(物品格、名册卡、图鉴);列表行用左缘色条,页签用底色,都不用它。
590
- *
591
- * 括号画在盒子之外 4px:它所在的容器不能贴着盒子裁切。
592
- * 出现时八段短线从角的顶点伸到满长(200ms),消失是直接消失。
593
- * 括号只是给眼睛看的,选中态另外要有 `aria-selected` / `aria-pressed`。
594
- */
595
- export declare function CornerBrackets({ visible, size, className, ...props }: CornerBracketsProps): import("react").JSX.Element;
596
- //#endregion
597
- //#region src/components/countdown/Countdown.d.ts
598
- type CountdownSize = "sm" | "md";
599
- type CountdownState = "ample" | "urgent" | "expired";
600
- type CountdownProps = Omit<ComponentProps<"span">, "children"> & {
601
- /** 截止时间:`Date`、时间戳或能被 `new Date()` 解析的字符串 */
602
- to: Date | number | string;
603
- /** 剩余时间不多于这个毫秒数时进入紧迫态,默认 24 小时 */
604
- urgentWithin?: number;
605
- /** 到期后显示的文字 */
606
- expiredLabel?: ReactNode;
607
- /** 到期的那一刻调用一次;挂载时就已过期则不调用 */
608
- onExpire?: () => void;
609
- /** 超过一天时"天"的写法,如 `3天 04:12:09` */
610
- dayUnit?: string;
611
- /** 给读屏的静态截止时间。默认是"截止 + 本地格式的日期时间" */
612
- deadlineLabel?: ReactNode;
613
- size?: CountdownSize;
614
- };
615
- /**
616
- * 倒计时:充裕时是绿色胶囊,紧迫时变红并多一个 `!`。
617
- * 不会每秒播报——读屏拿到的是静态的截止时间,走到这里时才读当前剩余。
618
- */
619
- export declare function Countdown({ to, urgentWithin, expiredLabel, onExpire, dayUnit, deadlineLabel, size, className, ...props }: CountdownProps): import("react").JSX.Element;
620
- //#endregion
621
- //#region src/components/data-row/DataRow.d.ts
622
- type DataRowColumns = {
623
- /** 名称那一列的列名 */
624
- name: ReactNode;
625
- /** 走势列的列名。不给就没有这一列 */
626
- trend?: ReactNode;
627
- /** 当前值那一列的列名 */
628
- value: ReactNode;
629
- /** 参考值列的列名。不给就没有这一列 */
630
- reference?: ReactNode;
631
- };
632
- type DataRowListProps = Omit<ComponentProps<"div">, "children"> & {
633
- /** 这张表的名称,读屏会读出来 */
634
- label?: string;
635
- /** 各列的列名;有没有走势列、参考值列也由它决定 */
636
- columns: DataRowColumns;
637
- /** `DataRow` */
638
- children: ReactNode;
639
- };
640
- /**
641
- * 数据行带:浅色画布上一条条深色的行,上面一条胶囊形的列头。
642
- * 语义是一张表格;里面只放 `DataRow`。
643
- */
644
- export declare function DataRowList({ label, columns, className, children, ...props }: DataRowListProps): import("react").JSX.Element;
645
- type DataRowTone = "neutral" | "info" | "accent" | "danger";
646
- type DataRowProps = Omit<ComponentProps<"div">, "children"> & {
647
- /** 这一行的名称 */
648
- name: ReactNode;
649
- /**
650
- * 左缘的类目色条:一个 CSS 颜色值,通常传令牌变量(`var(--color-special)`)。
651
- * 不要用黄色——黄色是"选中"和"收藏"
652
- */
653
- categoryColor?: string;
654
- /** 收藏。只传它是一个静态的标记;同时传 `onFavoriteChange` 才是一个能点的切换按钮 */
655
- favorite?: boolean;
656
- onFavoriteChange?: (favorite: boolean) => void;
657
- /** 收藏按钮的可访问名称,默认"收藏" */
658
- favoriteLabel?: string;
659
- /** 走势:一串数值,画成行内的小型面积图。表头没有走势列时不显示 */
660
- series?: readonly number[];
661
- /** 当前值。正负号连同数值一起传:颜色之外还要有符号 */
662
- value: ReactNode;
663
- /**
664
- * 当前值的含义:
665
- * - `info` 产出、正向(蓝);
666
- * - `accent` 消耗、关注(黄);
667
- * - `danger` 超支、异常(红),走势图也跟着变红;
668
- * - `neutral` 不表态,默认。
669
- */
670
- tone?: DataRowTone;
671
- /** 参考值(理论值、上限)。表头没有参考值列时不显示 */
672
- reference?: ReactNode;
673
- };
674
- /** 数据行带里的一行。放在 `DataRowList` 里。 */
675
- export declare function DataRow({ name, categoryColor, favorite, onFavoriteChange, favoriteLabel, series, value, tone, reference, className, style, ...props }: DataRowProps): import("react").JSX.Element;
676
- //#endregion
677
- //#region src/components/date-picker/DatePicker.d.ts
678
- type DatePickerSize = ControlSize;
679
- type DatePickerVariant = ControlVariant;
680
- type DatePickerProps = Pick<CalendarProps, "min" | "max" | "isDateDisabled" | "weekStartsOn" | "locale" | "today"> & {
681
- /** 选中的那一天,`YYYY-MM-DD`;没选是 `null` */
682
- value?: string | null;
683
- defaultValue?: string | null;
684
- /** 清除之后拿到的是 `null` */
685
- onValueChange?: (value: string | null) => void;
686
- /** 没选时显示的提示 */
687
- placeholder?: ReactNode;
688
- /** 表单字段名:选中的值(`YYYY-MM-DD`)会随表单提交 */
689
- name?: string;
690
- /**
691
- * 外框的画法,和输入框相同:
692
- * - `sunken` 凹陷的底 + 一条底边线,默认;
693
- * - `outline` 四边描边,放在凹陷底色的区域里时用。
694
- */
695
- variant?: DatePickerVariant;
696
- /** 32 / 40 / 56px 高 */
697
- size?: DatePickerSize;
698
- /** 日期怎么写。默认 `2026.10.09` */
699
- format?: (date: string) => ReactNode;
700
- /** 错误态。放在 `Field` 里时跟随它的 `error` */
701
- invalid?: boolean;
702
- disabled?: boolean;
703
- /** 必填:面板里没有"清除" */
704
- required?: boolean;
705
- open?: boolean;
706
- defaultOpen?: boolean;
707
- onOpenChange?: (open: boolean) => void;
708
- /** 面板的可访问名称 */
709
- panelLabel?: string;
710
- todayLabel?: string;
711
- clearLabel?: string;
712
- id?: string;
713
- "aria-label"?: string;
714
- "aria-describedby"?: string;
715
- /** 给外框 */
716
- className?: string;
717
- /** 给触发按钮 */
718
- ref?: Ref<HTMLButtonElement>;
719
- };
720
- /**
721
- * 日期选择:一个字段,点开是一块带月历的面板。值是 `YYYY-MM-DD` 的字符串。
722
- * 触发器是按钮,不能打字——要打字用原生的 `<Input type="date">`。
723
- * 每个日期选择都要有标签:放进 `Field`,或者自己传 `aria-label`。
724
- *
725
- * 选一段(起止日期)用 `DateRangePicker`。
726
- */
727
- export declare function DatePicker({ value: valueProp, defaultValue, onValueChange, placeholder, name, variant, size, format, invalid: invalidProp, disabled: disabledProp, required: requiredProp, open: openProp, defaultOpen, onOpenChange, panelLabel, todayLabel, clearLabel, min, max, isDateDisabled, weekStartsOn, locale, today: todayProp, id: idProp, "aria-label": ariaLabel, "aria-describedby": describedByProp, className, ref }: DatePickerProps): import("react").JSX.Element;
728
- //#endregion
729
- //#region src/components/date-picker/DateRangePicker.d.ts
730
- type DateRangePickerProps = Pick<CalendarProps, "min" | "max" | "isDateDisabled" | "weekStartsOn" | "locale" | "today"> & {
731
- /** 选中的那一段,`[起, 止]`,两头都包含;没选是 `null` */
732
- value?: DateRange | null;
733
- defaultValue?: DateRange | null;
734
- /** 一段选完才触发;清除之后拿到的是 `null` */
735
- onValueChange?: (value: DateRange | null) => void;
736
- /** 没选时显示的提示 */
737
- placeholder?: ReactNode;
738
- /** 表单字段名:起始日和结束日各一个,值是 `YYYY-MM-DD` */
739
- startName?: string;
740
- endName?: string;
741
- /**
742
- * 外框的画法,和输入框相同:
743
- * - `sunken` 凹陷的底 + 一条底边线,默认;
744
- * - `outline` 四边描边,放在凹陷底色的区域里时用。
745
- */
746
- variant?: ControlVariant;
747
- /** 32 / 40 / 56px 高 */
748
- size?: ControlSize;
749
- /** 每个日期怎么写。默认 `2026.10.09` */
750
- format?: (date: string) => ReactNode;
751
- /** 错误态。放在 `Field` 里时跟随它的 `error` */
752
- invalid?: boolean;
753
- disabled?: boolean;
754
- /** 必填:面板里没有"清除" */
755
- required?: boolean;
756
- open?: boolean;
757
- defaultOpen?: boolean;
758
- onOpenChange?: (open: boolean) => void;
759
- /** 面板的可访问名称 */
760
- panelLabel?: string;
761
- /** 面板底下那句提示 */
762
- hint?: ReactNode;
763
- clearLabel?: string;
764
- /** 读屏在两端那两天的名称后面听到的词 */
765
- startLabel?: string;
766
- endLabel?: string;
767
- id?: string;
768
- "aria-label"?: string;
769
- "aria-describedby"?: string;
770
- /** 给外框 */
771
- className?: string;
772
- /** 给触发按钮 */
773
- ref?: Ref<HTMLButtonElement>;
774
- };
775
- /**
776
- * 日期范围:一个字段,点开是一块带月历的面板,点两下选出起止两天。
777
- * 值是 `[起, 止]`,两头都包含;结束日选完面板才关。
778
- * 每个字段都要有标签:放进 `Field`,或者自己传 `aria-label`。
779
- */
780
- export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, startName, endName, variant, size, format, invalid: invalidProp, disabled: disabledProp, required: requiredProp, open: openProp, defaultOpen, onOpenChange, panelLabel, hint, clearLabel, startLabel, endLabel, min, max, isDateDisabled, weekStartsOn, locale, today, id: idProp, "aria-label": ariaLabel, "aria-describedby": describedByProp, className, ref }: DateRangePickerProps): import("react").JSX.Element;
781
- //#endregion
782
- //#region src/components/dash-indicator/DashIndicator.d.ts
783
- type DashIndicatorProps = Omit<ComponentProps<"span">, "children"> & {
784
- /** 一共几项 */
785
- count: number;
786
- /** 当前是第几项,从 0 起 */
787
- index: number;
788
- };
789
- /**
790
- * 进度短横:一排短横线表示"共几项、在第几项"。只做指示,不可点击;
791
- * 要能翻动,旁边配一个 `Navigator` 或一对翻页钮。
792
- */
793
- export declare function DashIndicator({ count, index, className, ...props }: DashIndicatorProps): import("react").JSX.Element;
794
- //#endregion
795
- //#region src/components/dialog/Dialog.d.ts
796
- type DialogSize = "sm" | "md" | "lg";
797
- type PopupProps$1 = ComponentProps<typeof Dialog$1.Popup>;
798
- type DialogProps = Omit<ComponentProps<"div">, "title" | "children" | "className" | "style"> & {
799
- /** 触发按钮。不传就用 `open` / `onOpenChange` 自己控制 */
800
- trigger?: ReactElement<Record<string, unknown>>;
801
- open?: boolean;
802
- defaultOpen?: boolean;
803
- onOpenChange?: (open: boolean) => void;
804
- /** 标题,在深色标题带里居中。它也是弹窗的可访问名称 */
805
- title: ReactNode;
806
- /** 标题下的一段说明,会关联给读屏 */
807
- description?: ReactNode;
808
- /** 底部的行动区:按钮靠右,主要行动在最右 */
809
- footer?: ReactNode;
810
- /** 最大宽度 480 / 640 / 1040px,窄屏上通宽。默认 `md` */
811
- size?: DialogSize;
812
- /**
813
- * 需要用户明确回应的确认(破坏性操作):角色是 `alertdialog`,点遮罩不关。
814
- * `Esc` 和关闭图标仍然可用。
815
- */
816
- alert?: boolean;
817
- /** 标题下方加一排小方点。纯装饰 */
818
- ornament?: boolean;
819
- /**
820
- * 左下角的线稿,纯装饰。本库不带线稿:传自己的原创图形,
821
- * 用 `currentColor` 画会跟着取低对比的墨色。高 48px
822
- */
823
- cornerArt?: ReactNode;
824
- /** 关闭图标的可访问名称 */
825
- closeLabel?: string;
826
- /** 打开时焦点落在哪。默认是内容区里第一个可聚焦的元素:第一个字段,或者行动区的第一个按钮 */
827
- initialFocus?: PopupProps$1["initialFocus"];
828
- /** 关闭后焦点回到哪。默认是触发按钮 */
829
- finalFocus?: PopupProps$1["finalFocus"];
830
- /** 给弹窗本身 */
831
- className?: string;
832
- children?: ReactNode;
833
- };
834
- /**
835
- * 弹窗:深色斜纹标题带 + 点阵底的内容区。打开时焦点移入并被限制在内,
836
- * 关闭后回到触发按钮;背景不可滚动、不可交互。不要弹窗套弹窗。
837
- */
838
- export declare function Dialog({ trigger, open, defaultOpen, onOpenChange, title, description, footer, size, alert, ornament, cornerArt, closeLabel, initialFocus, finalFocus, className, children, ...props }: DialogProps): import("react").JSX.Element;
839
- type DialogCloseProps = {
840
- /** 点了就关掉弹窗的按钮,比如"取消" */
841
- children: ReactElement<Record<string, unknown>>;
842
- };
843
- /** 包住行动区里"点了就关"的按钮。弹窗和抽屉里都能用。 */
844
- export declare function DialogClose({ children }: DialogCloseProps): import("react").JSX.Element;
845
- //#endregion
846
- //#region src/components/drawer/Drawer.d.ts
847
- type DrawerSide = "right" | "left" | "bottom";
848
- type DrawerSize = "sm" | "md" | "lg";
849
- type PopupProps = ComponentProps<typeof Drawer$1.Popup>;
850
- type DrawerProps = Omit<ComponentProps<"div">, "title" | "children" | "className" | "style"> & {
851
- /** 触发按钮。不传就用 `open` / `onOpenChange` 自己控制 */
852
- trigger?: ReactElement<Record<string, unknown>>;
853
- open?: boolean;
854
- defaultOpen?: boolean;
855
- onOpenChange?: (open: boolean) => void;
856
- /** 标题,在深色标题带里左对齐。它也是抽屉的可访问名称 */
857
- title: ReactNode;
858
- /** 标题下的一段说明,会关联给读屏 */
859
- description?: ReactNode;
860
- /** 底部的行动区,不随内容滚动 */
861
- footer?: ReactNode;
862
- /**
863
- * 从哪一边滑入:
864
- * - `right` 详情、设置,默认;
865
- * - `left` 导航;
866
- * - `bottom` 移动端的操作菜单,带拖动把手。
867
- * 都可以朝来的方向划走。
868
- */
869
- side?: DrawerSide;
870
- /** 侧边抽屉的宽度 320 / 400 / 480px,窄屏上通宽。默认 `md`。底部抽屉不用 */
871
- size?: DrawerSize;
872
- /** 靠页面内容的一侧加一条行动色的细条 */
873
- accent?: boolean;
874
- /** 关闭图标的可访问名称 */
875
- closeLabel?: string;
876
- /** 打开时焦点落在哪。默认是内容区里第一个可聚焦的元素 */
877
- initialFocus?: PopupProps["initialFocus"];
878
- /** 关闭后焦点回到哪。默认是触发按钮 */
879
- finalFocus?: PopupProps["finalFocus"];
880
- /** 给抽屉本身 */
881
- className?: string;
882
- children?: ReactNode;
883
- };
884
- /**
885
- * 抽屉:从屏幕一侧滑入的面板。在不离开当前页面的前提下查看、编辑一个条目,
886
- * 或者在窄屏上替代侧栏。焦点与背景的处理和弹窗相同。
887
- */
888
- export declare function Drawer({ trigger, open, defaultOpen, onOpenChange, title, description, footer, side, size, accent, closeLabel, initialFocus, finalFocus, className, children, ...props }: DrawerProps): import("react").JSX.Element;
889
- //#endregion
890
- //#region src/components/dropdown-menu/DropdownMenu.d.ts
891
- type DropdownMenuVariant = MenuVariant;
892
- type DropdownMenuSide = "top" | "bottom" | "left" | "right";
893
- type DropdownMenuAlign = "start" | "center" | "end";
894
- type DropdownMenuProps = {
895
- /** 触发按钮 */
896
- trigger: ReactElement<Record<string, unknown>>;
897
- /**
898
- * - `plain` 跟随主题的面板,默认;
899
- * - `strong` 固定的深色面板,当前项整行黄底墨字。
900
- */
901
- variant?: DropdownMenuVariant;
902
- /** 面板出现在触发按钮的哪一侧,放不下时自动翻到对面。默认 `bottom` */
903
- side?: DropdownMenuSide;
904
- /** 和触发按钮的哪一边对齐。默认 `start` */
905
- align?: DropdownMenuAlign;
906
- open?: boolean;
907
- defaultOpen?: boolean;
908
- onOpenChange?: (open: boolean) => void;
909
- /** 给面板 */
910
- className?: string;
911
- /**
912
- * `DropdownMenuItem`、`DropdownMenuCheckboxItem`、`DropdownMenuGroup`、
913
- * `DropdownMenuSeparator`、`DropdownMenuRadioGroup`、`DropdownMenuSub`
914
- */
915
- children: ReactNode;
916
- };
917
- /**
918
- * 点击触发的一组操作或选项。方向键移动、回车选择、`Esc` 关闭、按首字母跳转。
919
- * 危险项放在最后并和其他项隔开。
920
- */
921
- export declare function DropdownMenu({ trigger, variant, side, align, open, defaultOpen, onOpenChange, className, children }: DropdownMenuProps): import("react").JSX.Element;
922
- type DropdownMenuItemTone = "neutral" | "danger";
923
- type ItemOwnProps$4 = {
924
- /** `danger` 用于删除一类的操作:文字变红,放在最后并和其他项隔开 */
925
- tone?: DropdownMenuItemTone;
926
- /** 文字左侧的图标 */
927
- iconStart?: ReactNode;
928
- /** 行尾的补充:快捷键、计数 */
929
- end?: ReactNode;
930
- disabled?: boolean;
931
- /** 点了之后是否关掉菜单。操作项默认关,链接项默认不关 */
932
- closeOnClick?: boolean;
933
- /** 传了就渲染成链接 */
934
- href?: string;
935
- target?: string;
936
- rel?: string;
937
- /** 用这个元素代替 `<a>`(路由库的链接组件)。传了就按链接处理 */
938
- render?: LinkRender;
939
- onClick?: (event: MouseEvent<HTMLElement>) => void;
940
- };
941
- type DropdownMenuItemProps = ItemOwnProps$4 & Omit<ComponentProps<"div">, keyof ItemOwnProps$4 | "id" | "style">;
942
- /** 菜单里的一个操作;传 `href` 就是一个链接。 */
943
- export declare function DropdownMenuItem({ tone, iconStart, end, disabled, closeOnClick, href, target, rel, render, onClick, className, children, ...props }: DropdownMenuItemProps): import("react").JSX.Element;
944
- type DropdownMenuGroupProps = Omit<ComponentProps<"div">, "style"> & {
945
- /** 分组的小标题 */
946
- label?: ReactNode;
947
- };
948
- export declare function DropdownMenuGroup({ label, children, ...props }: DropdownMenuGroupProps): import("react").JSX.Element;
949
- type DropdownMenuSeparatorProps = Omit<ComponentProps<"div">, "style">;
950
- export declare function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps): import("react").JSX.Element;
951
- type DropdownMenuRadioGroupProps = {
952
- value?: string;
953
- defaultValue?: string;
954
- onValueChange?: (value: string) => void;
955
- /** 这一组的小标题 */
956
- label?: ReactNode;
957
- disabled?: boolean;
958
- children: ReactNode;
959
- };
960
- /** 一组里只有一个"当前项"的选项,比如语言、排序方式。 */
961
- export declare function DropdownMenuRadioGroup({ value, defaultValue, onValueChange, label, disabled, children }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
962
- type DropdownMenuRadioItemProps = Omit<ComponentProps<"div">, "id" | "style" | "onClick"> & {
963
- value: string;
964
- disabled?: boolean;
965
- /** 行尾的补充 */
966
- end?: ReactNode;
967
- /** 选了之后是否关掉菜单,默认关 */
968
- closeOnClick?: boolean;
969
- };
970
- export declare function DropdownMenuRadioItem({ value, disabled, end, closeOnClick, className, children, ...props }: DropdownMenuRadioItemProps): import("react").JSX.Element;
971
- type DropdownMenuCheckboxItemProps = Omit<ComponentProps<"div">, "id" | "style" | "onClick"> & {
972
- checked?: boolean;
973
- defaultChecked?: boolean;
974
- onCheckedChange?: (checked: boolean) => void;
975
- disabled?: boolean;
976
- /** 行尾的补充 */
977
- end?: ReactNode;
978
- /** 勾了之后是否关掉菜单。默认不关:可以连着改几项 */
979
- closeOnClick?: boolean;
980
- };
981
- /** 能开能关的一项设置,比如"显示缩略图"。行首是一个小方格,没勾的时候也看得见。 */
982
- export declare function DropdownMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, disabled, end, closeOnClick, className, children, ...props }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
983
- type DropdownMenuSubProps = {
984
- /** 这一行的文字 */
985
- label: ReactNode;
986
- /** 文字左侧的图标 */
987
- iconStart?: ReactNode;
988
- disabled?: boolean;
989
- /** 给子面板 */
990
- className?: string;
991
- /** 子面板里的选项 */
992
- children: ReactNode;
993
- };
994
- /**
995
- * 子菜单:菜单里的一行,停留或按 `→` 时在侧边展开另一块面板。
996
- * 只做一层,不要在子菜单里再套子菜单。
997
- */
998
- export declare function DropdownMenuSub({ label, iconStart, disabled, className, children }: DropdownMenuSubProps): import("react").JSX.Element;
999
- //#endregion
1000
- //#region src/components/empty-state/EmptyState.d.ts
1001
- type EmptyStateProps = Omit<ComponentProps<"div">, "title"> & {
1002
- /** 一句话说明现状:"暂无记录" */
1003
- title: ReactNode;
1004
- /** 一句话说明原因或下一步 */
1005
- description?: ReactNode;
1006
- /** 可选的一个行动,通常是一个 `control` 按钮 */
1007
- action?: ReactNode;
1008
- /** 图形。默认是取景角 + 准星;传 `null` 去掉 */
1009
- icon?: ReactNode;
1010
- /** 虚线描边,默认有 */
1011
- bordered?: boolean;
1012
- /** 标题层级,默认 3(`<h3>`) */
1013
- level?: 2 | 3 | 4 | 5 | 6;
1014
- /** 挂上时淡入一次,不"啪"地一下出现。默认开启 */
1015
- animate?: boolean;
1016
- };
1017
- /** 没有内容时的占位。说清楚为什么为空、接下来能做什么;不要用大幅插画填满。 */
1018
- export declare function EmptyState({ title, description, action, icon, bordered, level, animate, className, children, ...props }: EmptyStateProps): import("react").JSX.Element;
1019
- //#endregion
1020
- //#region src/components/field/Field.d.ts
1021
- type FieldContextValue = {
1022
- /** 单个控件的 id;`group` 字段里有多个控件,不提供 */
1023
- controlId: string | undefined;
1024
- labelId: string;
1025
- describedBy: string | undefined;
1026
- invalid: boolean;
1027
- disabled: boolean;
1028
- required: boolean;
1029
- group: boolean;
1030
- };
1031
- /** 给成组的控件(单选组)读取所在字段的状态。不在 `Field` 里时返回 `null`。 */
1032
- export declare function useFieldContext(): FieldContextValue | null;
1033
- type ControlProps = {
1034
- id?: string;
1035
- disabled?: boolean;
1036
- required?: boolean;
1037
- /** 错误态。不传时跟随所在的 `Field` */
1038
- invalid?: boolean;
1039
- "aria-describedby"?: string;
1040
- };
1041
- /**
1042
- * 把所在 `Field` 的 id、说明文字、错误态、禁用、必填并进控件自己的属性。
1043
- * 控件上显式传的值优先。自定义控件用它接入 `Field`。
1044
- */
1045
- export declare function useFieldControl({ id, disabled, required, invalid, "aria-describedby": describedBy }: ControlProps): {
1046
- id: string | undefined;
1047
- disabled: boolean;
1048
- required: boolean;
1049
- invalid: boolean;
1050
- "aria-describedby": string | undefined;
1051
- };
1052
- type FieldProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
1053
- /** 标签,在控件上方。不要用占位文字代替它 */
1054
- label: ReactNode;
1055
- /** 帮助文字,在控件下方 */
1056
- help?: ReactNode;
1057
- /** 错误说明:写"哪里不对、怎么改"。有值即为错误态 */
1058
- error?: ReactNode;
1059
- /** 必填:标签后加一个小菱形,并交给里面的控件 */
1060
- required?: boolean;
1061
- /** 禁用:标签变浅,并交给里面的控件 */
1062
- disabled?: boolean;
1063
- /**
1064
- * 里面是一组控件(几个复选、一个单选组)而不是单个输入框时打开:
1065
- * 渲染成 `<fieldset>` + `<legend>`。
1066
- */
1067
- group?: boolean;
1068
- /** 单个控件的 id,缺省自动生成 */
1069
- controlId?: string;
1070
- children: ReactNode;
1071
- };
1072
- /** 表单字段:标签在上、控件在下,下面是帮助与错误文字,三者自动关联。 */
1073
- export declare function Field({ label, help, error, required, disabled, group, controlId, className, children, ...props }: FieldProps): import("react").JSX.Element;
1074
- //#endregion
1075
- //#region src/components/file-upload/FileItem.d.ts
1076
- type FileItemStatus = "uploading" | "done" | "error";
1077
- type OwnProps$3 = {
1078
- /** 文件名。前面的扩展名标签是从它里面取的 */
1079
- name: string;
1080
- /** 大小,字节 */
1081
- size?: number;
1082
- /**
1083
- * 传到哪一步了,由使用方给:
1084
- * - 不传:只是列出来;
1085
- * - `uploading` 行底一条进度条,大小的位置换成百分比;
1086
- * - `done` 多一个成功图标;
1087
- * - `error` 文件名下面一行错误说明。
1088
- */
1089
- status?: FileItemStatus;
1090
- /** `uploading` 时的进度,0 – 100。不传就是不确定进度 */
1091
- progress?: number;
1092
- /** `error` 时的说明:写"怎么了、怎么办" */
1093
- error?: ReactNode;
1094
- /** 传了右端就有移除钮 */
1095
- onRemove?: () => void;
1096
- /** 传了、且是 `error` 时,多一个"重试" */
1097
- onRetry?: () => void;
1098
- /** 移除钮的可访问名称,默认"移除某某" */
1099
- removeLabel?: string;
1100
- /** "重试"两个字 */
1101
- retryLabel?: ReactNode;
1102
- /** `done` 时读屏多听到的一句,默认"已上传" */
1103
- doneLabel?: string;
1104
- /** 进度条的可访问名称,默认"某某的上传进度" */
1105
- progressLabel?: string;
1106
- /** 传了文件名就是链接:已有的附件可以点开 */
1107
- href?: string;
1108
- target?: string;
1109
- rel?: string;
1110
- /** 用这个元素代替 `<a>`(路由库的链接组件)。传了就按链接处理 */
1111
- render?: LinkRender;
1112
- disabled?: boolean;
1113
- };
1114
- type FileItemProps = OwnProps$3 & Omit<ComponentProps<"div">, keyof OwnProps$3 | "children">;
1115
- /**
1116
- * 一个文件一行:扩展名、文件名、大小、状态、移除钮。
1117
- * `FileUpload` 里每个文件默认渲染一行;也可以单独拿去列"已有的附件"。
1118
- */
1119
- export declare function FileItem({ name, size, status, progress, error, onRemove, onRetry, removeLabel, retryLabel, doneLabel, progressLabel, href, target, rel, render, disabled, className, ...props }: FileItemProps): import("react").JSX.Element;
1120
- //#endregion
1121
- //#region src/components/file-upload/FileUpload.d.ts
1122
- type FileUploadSize = "sm" | "md";
1123
- /** 没收的原因:类型不对、太大、个数超了 */
1124
- type FileRejectReason = "type" | "size" | "count";
1125
- type FileRejection = {
1126
- file: File;
1127
- reason: FileRejectReason;
1128
- };
1129
- /** 文件列表的名称、没收时的那几句话 */
1130
- type FileUploadLabels = {
1131
- /** 文件列表的可访问名称 */
1132
- list: string;
1133
- /** 选了几个:读屏的播报 */
1134
- selected: (count: number) => string;
1135
- /** 没收了几个:那一行说明的开头 */
1136
- rejected: (count: number) => string;
1137
- type: string;
1138
- size: (limit: string) => string;
1139
- count: (max: number) => string;
1140
- };
1141
- type FileUploadProps = {
1142
- /** 受控的值 */
1143
- value?: File[];
1144
- /** 非受控时的初始值 */
1145
- defaultValue?: File[];
1146
- onValueChange?: (files: File[]) => void;
1147
- /** 可以选几个。不开时新选的替掉原来的 */
1148
- multiple?: boolean;
1149
- /** 收哪些类型,写法和原生的一样:`.pdf,image/*` */
1150
- accept?: string;
1151
- /** 单个文件最大多少字节 */
1152
- maxSize?: number;
1153
- /** 最多几个(`multiple` 时) */
1154
- maxFiles?: number;
1155
- /** 有文件没收:拿到每个文件和原因 */
1156
- onReject?: (rejections: FileRejection[]) => void;
1157
- /** 表单字段名:列表里的文件随表单提交 */
1158
- name?: string;
1159
- /** 投放区的第一行字,后面跟着 `browseLabel` */
1160
- title?: ReactNode;
1161
- /** 带下划线的那几个字 */
1162
- browseLabel?: ReactNode;
1163
- /** 文件拖到上面时换成的字 */
1164
- dropLabel?: ReactNode;
1165
- /** 第二行:把限制写清楚——"PDF 或图片,单个不超过 10 MB" */
1166
- description?: ReactNode;
1167
- /** `md` 两行,默认;`sm` 是 40px 高的一行 */
1168
- size?: FileUploadSize;
1169
- /** 错误态。放在 `Field` 里时跟随它的 `error` */
1170
- invalid?: boolean;
1171
- disabled?: boolean;
1172
- required?: boolean;
1173
- /**
1174
- * 自己画每个文件的那一行:选了就要传、要显示进度时用,返回一个带 `status` 的 `FileItem`。
1175
- * 不传就是一行不带状态的 `FileItem`
1176
- */
1177
- renderFile?: (file: File, actions: {
1178
- remove: () => void;
1179
- index: number;
1180
- }) => ReactNode;
1181
- /** 移除钮的可访问名称,拿到的是文件名。默认"移除某某" */
1182
- removeLabel?: (name: string) => string;
1183
- /** 文件列表的名称、没收时的那几句话,换哪句传哪句 */
1184
- labels?: Partial<FileUploadLabels>;
1185
- id?: string;
1186
- "aria-label"?: string;
1187
- "aria-describedby"?: string;
1188
- /** 给最外面那一层 */
1189
- className?: string;
1190
- /** 给里面的 `<input type="file">` */
1191
- ref?: Ref<HTMLInputElement>;
1192
- };
1193
- /**
1194
- * 文件上传:选文件,或者把文件拖进来。它只管"选"和"列"——发请求、算进度是使用方的事。
1195
- *
1196
- * 里面是一个真的 `<input type="file">`,铺满整个投放区:点哪儿都是打开系统的文件框。
1197
- * 每个文件上传都要有标签:放进 `Field`,或者自己传 `aria-label`。
1198
- */
1199
- export declare function FileUpload({ value, defaultValue, onValueChange, multiple, accept, maxSize, maxFiles, onReject, name, title, browseLabel, dropLabel, description, size, invalid: invalidProp, disabled: disabledProp, required: requiredProp, renderFile, removeLabel, labels: labelsProp, id: idProp, "aria-label": ariaLabel, "aria-describedby": describedByProp, className, ref }: FileUploadProps): import("react").JSX.Element;
1200
- //#endregion
1201
- //#region src/components/flyout-bar/FlyoutBar.d.ts
1202
- type FlyoutBarSide = "right" | "left";
1203
- type FlyoutBarProps = {
1204
- /**
1205
- * 触发按钮,通常是 `<IconButton variant="inverse">`。
1206
- * 它的名称(`aria-label`)同时是这一条的名称,读屏打开时会读出来
1207
- */
1208
- trigger: ReactElement<Record<string, unknown>>;
1209
- /** 展开在触发按钮的哪一侧,放不下时自动翻到另一侧。默认 `right` */
1210
- side?: FlyoutBarSide;
1211
- open?: boolean;
1212
- defaultOpen?: boolean;
1213
- onOpenChange?: (open: boolean) => void;
1214
- /** 给横条本身 */
1215
- className?: string;
1216
- /** `FlyoutBarItem` */
1217
- children: ReactNode;
1218
- };
1219
- /**
1220
- * 展开条:从一个图标按钮旁边拉开的一条横排操作,比如分享的几个去处。
1221
- * 语义和键盘都是横向的菜单——左右方向键移动、回车选择、`Esc` 关闭。
1222
- * 选项多于六个、或者要文字才看得懂时,用 `DropdownMenu`。
1223
- */
1224
- export declare function FlyoutBar({ trigger, side, open, defaultOpen, onOpenChange, className, children }: FlyoutBarProps): import("react").JSX.Element;
1225
- type ItemOwnProps$3 = {
1226
- /** 只有图标时必须给:它是这一项的名称 */
1227
- "aria-label"?: string;
1228
- disabled?: boolean;
1229
- /** 点了之后是否关掉。操作项默认关,链接项默认不关 */
1230
- closeOnClick?: boolean;
1231
- /** 传了就渲染成链接 */
1232
- href?: string;
1233
- target?: string;
1234
- rel?: string;
1235
- /** 用这个元素代替 `<a>`(路由库的链接组件)。传了就按链接处理 */
1236
- render?: LinkRender;
1237
- onClick?: (event: MouseEvent<HTMLElement>) => void;
1238
- };
1239
- type FlyoutBarItemProps = ItemOwnProps$3 & Omit<ComponentProps<"div">, keyof ItemOwnProps$3 | "id" | "style">;
1240
- /** 展开条里的一项:子元素是图标,可以再带文字;传 `href` 就是一个链接。 */
1241
- export declare function FlyoutBarItem({ "aria-label": ariaLabel, disabled, closeOnClick, href, target, rel, render, onClick, className, children, ...props }: FlyoutBarItemProps): import("react").JSX.Element;
1242
- //#endregion
1243
- //#region src/components/ghost-text/GhostText.d.ts
1244
- type GhostTextVariant = "hatch" | "outline" | "solid";
1245
- type GhostTextProps = ComponentProps<"span"> & {
1246
- /**
1247
- * - `hatch` 字形透明,用细斜纹填充。版块分隔、背景,默认;
1248
- * - `outline` 字形透明,只有一圈浅色描边。章节编号、完成态的庆祝词;
1249
- * - `solid` 纯墨色,越过容器边界被截断。
1250
- */
1251
- variant?: GhostTextVariant;
1252
- };
1253
- /**
1254
- * 镂空巨字:版面背景层里的一个词或一个编号,不是标题。
1255
- * 它只管长相与隐藏:放在哪、被谁裁切由使用方定——通常是绝对定位在一个
1256
- * `relative overflow-clip` 的版块里。字号默认是 `text-ghost`,用 `className` 换。
1257
- *
1258
- * 内容要短,写与版块相关的真实词语;一个版块一个;窄屏上往往直接去掉更好。
1259
- */
1260
- export declare function GhostText({ variant, className, ...props }: GhostTextProps): import("react").JSX.Element;
1261
- //#endregion
1262
- //#region src/components/hatch/Hatch.d.ts
1263
- type HatchDensity = "fine" | "mid" | "bold";
1264
- type HatchProps = Omit<ComponentProps<"div">, "children"> & {
1265
- /**
1266
- * - `bold` 粗而淡的斜带(墨色 5%),跟随主题。条带状的表面:工具条、标题栏,默认;
1267
- * - `mid` 比底色亮一档的斜带,压在深色控件上,不随主题变;
1268
- * - `fine` 很细的墨色斜带,填未探索的区域、需要"留空"的格子。
1269
- */
1270
- density?: HatchDensity;
1271
- };
1272
- /**
1273
- * 一块 45° 斜纹,纯装饰。尺寸、位置、底色都由 `className` 给。
1274
- * 把它限制在条带和控件上:不要铺满整个页面,也不要压在正文下面。
1275
- */
1276
- export declare function Hatch({ density, className, ...props }: HatchProps): import("react").JSX.Element;
1277
- //#endregion
1278
- //#region src/components/hazard-stripe/HazardStripe.d.ts
1279
- type HazardStripeSize = "sm" | "md";
1280
- type HazardStripeProps = Omit<ComponentProps<"div">, "children"> & {
1281
- /** 条高 6px 或 12px */
1282
- size?: HazardStripeSize;
1283
- };
1284
- /**
1285
- * 警示条纹:黄黑相间的窄条,和红色一样带"危险 / 施工"的含义。
1286
- * 放在删除确认、不可逆操作这类区域的边缘;一个视口最多一处,普通内容不要用。
1287
- * 它只是装饰:危险的含义必须另外用文字写出来。
1288
- */
1289
- export declare function HazardStripe({ size, className, ...props }: HazardStripeProps): import("react").JSX.Element;
1290
- //#endregion
1291
- //#region src/components/hover-card/HoverCard.d.ts
1292
- type HoverCardSide = "top" | "bottom" | "left" | "right";
1293
- type HoverCardAlign = "start" | "center" | "end";
1294
- type HoverCardProps = Omit<ComponentProps<"div">, "title" | "children" | "className" | "style"> & {
1295
- /** 触发元素:一个链接(`<a>`、带 `href` 的按钮、路由库的链接组件) */
1296
- trigger: ReactElement<Record<string, unknown>>;
1297
- /** 卡片里的标题 */
1298
- title?: ReactNode;
1299
- /** 标题下的一行说明 */
1300
- description?: ReactNode;
1301
- /** 卡片出现在链接的哪一侧,放不下时自动翻到对面。默认 `bottom` */
1302
- side?: HoverCardSide;
1303
- /** 和链接的哪一边对齐。默认 `start` */
1304
- align?: HoverCardAlign;
1305
- /** 指针停住多久后出现,毫秒,默认 600。键盘聚焦时同样要等 */
1306
- delay?: number;
1307
- /** 指针离开多久后消失,毫秒,默认 300:够把指针移进卡片里 */
1308
- closeDelay?: number;
1309
- open?: boolean;
1310
- defaultOpen?: boolean;
1311
- onOpenChange?: (open: boolean) => void;
1312
- /** 给卡片 */
1313
- className?: string;
1314
- children?: ReactNode;
1315
- };
1316
- /**
1317
- * 悬浮卡:指针停在一个链接上时,在旁边预览它的去处。面板和气泡卡片是同一块。
1318
- *
1319
- * 触屏上不出现,读屏也不会读到它:里面只放"点进去也看得到"的内容,
1320
- * 不放只有这里才有的信息和操作。要操作的用 `Popover`,一句说明用 `Tooltip`。
1321
- */
1322
- export declare function HoverCard({ trigger, title, description, side, align, delay, closeDelay, open, defaultOpen, onOpenChange, className, children, ...props }: HoverCardProps): import("react").JSX.Element;
1323
- //#endregion
1324
- //#region src/components/icon-button/IconButton.d.ts
1325
- type IconButtonVariant = "plain" | "floating" | "accent" | "inverse";
1326
- type IconButtonSize = "sm" | "md" | "lg";
1327
- type IconButtonProps = Omit<ComponentProps<"button">, "aria-label"> & {
1328
- /** 纯图标控件必须有可访问名称 */
1329
- "aria-label": string;
1330
- /**
1331
- * - `plain` 方形浅灰底,工具栏与顶栏,默认;
1332
- * - `floating` 圆形白底 + 环境阴影,翻页与浮在图像上的操作;
1333
- * - `accent` 方形,悬停或激活时变信号黄;
1334
- * - `inverse` 方形,悬停或激活时变墨底;它打开的菜单、展开条开着的时候也是。
1335
- */
1336
- variant?: IconButtonVariant;
1337
- size?: IconButtonSize;
1338
- /** 开关类按钮的激活状态,同时输出 `aria-pressed` */
1339
- pressed?: boolean;
1340
- };
1341
- export declare function IconButton({ variant, size, pressed, disabled, type, className, children, ...props }: IconButtonProps): import("react").JSX.Element;
1342
- //#endregion
1343
- //#region src/components/image-viewer/ImageViewer.d.ts
1344
- type ImageViewerRatio = "16/9" | "4/3" | "1/1" | "3/4";
1345
- type ImageViewerProps = Omit<ComponentProps<"ul">, "aria-label"> & {
1346
- /** 这组图是什么,比如"现场照片"。缩略图的列表和大图层都用它命名 */
1347
- "aria-label": string;
1348
- /** 大图层开没开 */
1349
- open?: boolean;
1350
- onOpenChange?: (open: boolean) => void;
1351
- /** 大图层现在是第几张,从 0 起 */
1352
- index?: number;
1353
- defaultIndex?: number;
1354
- onIndexChange?: (index: number) => void;
1355
- /** 到头之后绕回另一头。默认到头时翻页钮禁用 */
1356
- loop?: boolean;
1357
- /** 缩略图的宽高比,默认 `4/3`。大图不裁切,按原比例整张显示 */
1358
- ratio?: ImageViewerRatio;
1359
- /** 缩略图按钮名称的开头,默认"查看大图" */
1360
- viewLabel?: string;
1361
- previousLabel?: string;
1362
- nextLabel?: string;
1363
- closeLabel?: string;
1364
- /** 直接放 `ImageViewerItem` */
1365
- children: ReactNode;
1366
- };
1367
- /**
1368
- * 图片查看:一组缩略图,点一张放大到整屏看,前后翻。
1369
- * 大图那一层在亮暗两个主题下都是深色;翻页用的是媒体轮播的那条轨道,触屏可以左右滑。
1370
- *
1371
- * `className` 和其余属性给缩略图的列表。
1372
- */
1373
- export declare function ImageViewer({ "aria-label": label, open: openProp, onOpenChange, index: indexProp, defaultIndex, onIndexChange, loop, ratio, viewLabel, previousLabel, nextLabel, closeLabel, className, children, ...props }: ImageViewerProps): import("react").JSX.Element;
1374
- type ImageViewerItemProps = Omit<ComponentProps<"li">, "title" | "aria-label"> & {
1375
- /** 这一张的标题,显示在大图下面;也用来给缩略图按钮起名 */
1376
- title?: ReactNode;
1377
- /** 标题下面的一段说明 */
1378
- description?: ReactNode;
1379
- /** 另给的小图,放在缩略图里。不传就用同一张图 */
1380
- thumbnail?: ReactNode;
1381
- /** 缩略图按钮的可访问名称。默认是"查看大图:标题",没有文字标题时报第几张 */
1382
- "aria-label"?: string;
1383
- /** 图:一个 `<img>`(或 `<video>`)。大图层里按原比例整张显示 */
1384
- children: ReactNode;
1385
- };
1386
- /** 图片查看里的一张。直接放在 `ImageViewer` 里。 */
1387
- export declare function ImageViewerItem({ title, description: _description, thumbnail, "aria-label": ariaLabel, className, children, ...props }: ImageViewerItemProps): import("react").JSX.Element;
1388
- //#endregion
1389
- //#region src/components/input/Input.d.ts
1390
- type InputSize = ControlSize;
1391
- type InputVariant = ControlVariant;
1392
- type InputProps = Omit<ComponentProps<"input">, "size"> & {
1393
- /**
1394
- * - `sunken` 凹陷的底 + 一条底边线,默认;
1395
- * - `outline` 四边描边,放在凹陷底色的区域(工具条、筛选栏)里时用。
1396
- */
1397
- variant?: InputVariant;
1398
- /** 32 / 40 / 56px 高 */
1399
- size?: InputSize;
1400
- /** 框内左端:图标 */
1401
- start?: ReactNode;
1402
- /** 框内右端:单位、清除按钮 */
1403
- end?: ReactNode;
1404
- /** 错误态:底边线变红,右侧出现菱形图标。放在 `Field` 里时跟随它的 `error` */
1405
- invalid?: boolean;
1406
- };
1407
- /**
1408
- * 单行输入框。`className` 给外框,其余属性与 `ref` 给里面的 `<input>`。
1409
- * 每个输入框都要有标签:放进 `Field`,或者自己传 `aria-label`。
1410
- */
1411
- export declare function Input({ variant, size, start, end, invalid: invalidProp, id: idProp, disabled: disabledProp, required: requiredProp, readOnly, "aria-describedby": describedByProp, className, ...props }: InputProps): import("react").JSX.Element;
1412
- //#endregion
1413
- //#region src/components/item-slot/ItemGrid.d.ts
1414
- type ItemGridProps = ComponentProps<"div">;
1415
- /**
1416
- * 物品格的矩阵:一组 `ItemSlot` 排成自动填充的网格,整个矩阵只占一个 Tab 停靠点,
1417
- * 进去之后用方向键在格子之间走。给它一个 `aria-label`,说明这是哪一组物品。
1418
- *
1419
- * 默认每格最小 72px、间距 8px,四周留 4px 给选中格的角括号;用 `className` 改。
1420
- */
1421
- export declare function ItemGrid({ className, onKeyDown, onFocus, ref: forwardedRef, ...props }: ItemGridProps): import("react").JSX.Element;
1422
- //#endregion
1423
- //#region src/components/item-slot/ItemSlot.d.ts
1424
- type ItemSlotRarity = 1 | 2 | 3 | 4;
1425
- type ItemSlotRatio = "1/1" | "4/5";
1426
- type OwnProps$2 = {
1427
- /** 物品名称。格子里只有图标,名称是给读屏的 */
1428
- name: string;
1429
- /** 完整的读屏文字。缺省由名称、数量、稀有度与各状态拼出来 */
1430
- label?: string;
1431
- /** 右下角的数量 */
1432
- count?: ReactNode;
1433
- /** 稀有度 1 – 4:底部一段向上消散的渐变,左缘另有同样个数的小菱形 */
1434
- rarity?: ItemSlotRarity;
1435
- /** 宽高比:正方形(默认)或 4:5 */
1436
- ratio?: ItemSlotRatio;
1437
- /** 选中:四角出现角括号 */
1438
- selected?: boolean;
1439
- /** 锁定:左下角一个锁,卡面不变灰 */
1440
- locked?: boolean;
1441
- /** 未获得(图鉴):内容换成准星占位符 */
1442
- unowned?: boolean;
1443
- /** 新获得:左上角的黄签 */
1444
- isNew?: boolean;
1445
- /** 黄签上的字,默认 `NEW` */
1446
- newLabel?: ReactNode;
1447
- /** 右上角的小圆位:已装备者的头像 */
1448
- badge?: ReactNode;
1449
- /** 售罄 / 不可用:整卡压一层遮罩。传文字("售罄")会写在遮罩上 */
1450
- unavailable?: boolean | ReactNode;
1451
- /** 传了就整格渲染成链接 */
1452
- href?: string;
1453
- target?: string;
1454
- rel?: string;
1455
- /** 用这个元素代替 `<a>`(路由库的链接组件)。传了就按链接处理 */
1456
- render?: LinkRender;
1457
- /** 传了(且没有 `href` 和 `render`)就整格渲染成按钮 */
1458
- onClick?: (event: MouseEvent<HTMLElement>) => void;
1459
- disabled?: boolean;
1460
- /** 图标或缩略图 */
1461
- children?: ReactNode;
1462
- };
1463
- type ItemSlotProps = Omit<ComponentProps<"div">, keyof OwnProps$2> & OwnProps$2;
1464
- /**
1465
- * 物品格:矩阵里的一个格子——图标、数量、稀有度。
1466
- * 整格只有一个可点击元素;宽度跟着所在的网格走,格子之间留 6 – 8px。
1467
- *
1468
- * `className` 与其余属性给最外层的盒子。角括号画在盒子之外 4px,
1469
- * 所以网格容器不能贴着格子裁切。一组格子放进 `ItemGrid`,就能用方向键在里面走。
1470
- */
1471
- export declare function ItemSlot({ name, label, count, rarity, ratio, selected, locked, unowned, isNew, newLabel, badge, unavailable, href, target, rel, render, onClick, disabled, className, children, ...props }: ItemSlotProps): import("react").JSX.Element;
1472
- //#endregion
1473
- //#region src/components/kbd/Kbd.d.ts
1474
- type KbdSize = "sm" | "md";
1475
- type KbdProps = ComponentProps<"kbd"> & {
1476
- /** 20px 或 24px 高 */
1477
- size?: KbdSize;
1478
- };
1479
- /**
1480
- * 键位提示:一颗小键帽,贴在对应的控件旁。
1481
- * 只用于真的支持键盘快捷键的地方,触屏界面和普通网页不要伪造键帽。
1482
- * 组合键分开写:`<Kbd>Ctrl</Kbd> + <Kbd>K</Kbd>`。
1483
- */
1484
- export declare function Kbd({ size, className, ...props }: KbdProps): import("react").JSX.Element;
1485
- //#endregion
1486
- //#region src/components/list/List.d.ts
1487
- type ListVariant = "plain" | "band";
1488
- type ListProps = ComponentProps<"ul"> & {
1489
- /**
1490
- * - `plain` 行间一条 1px 的线,默认;
1491
- * - `band` 浅色画布上一条条固定深色的行,行间留缝;选中行整行反转成白底墨字。
1492
- */
1493
- variant?: ListVariant;
1494
- };
1495
- /** 列表行的容器,外圈不描边。里面只放 `ListRow`。 */
1496
- export declare function List({ variant, className, ...props }: ListProps): import("react").JSX.Element;
1497
- type ListRowSize = "sm" | "md";
1498
- type ListRowProps = Omit<ComponentProps<"li">, "onClick"> & {
1499
- /** 行首:图标、日期块、缩略图 */
1500
- start?: ReactNode;
1501
- /** 行尾:数值或状态,右对齐、等宽 */
1502
- end?: ReactNode;
1503
- /** 标题下的一行次要说明 */
1504
- description?: ReactNode;
1505
- /** 选中:浅灰底 + 左缘黄条 + 标题加粗;在 `band` 列表里是整行反转成白底墨字 */
1506
- selected?: boolean;
1507
- /** 已完成:整行降一档对比,行尾数值前多一个低对比的描边词,读屏多读一句"已完成" */
1508
- completed?: boolean;
1509
- /** 完成态的描边词,默认 `DONE`。纯装饰;传 `null` 去掉 */
1510
- completedWord?: ReactNode;
1511
- /** 40px 或 48px 行高 */
1512
- size?: ListRowSize;
1513
- /** 传了就整行渲染成链接 */
1514
- href?: string;
1515
- target?: string;
1516
- rel?: string;
1517
- /** 用这个元素代替 `<a>`(路由库的链接组件)。传了就按链接处理 */
1518
- render?: LinkRender;
1519
- /** 传了(且没有 `href` 和 `render`)就整行渲染成按钮 */
1520
- onClick?: (event: MouseEvent<HTMLElement>) => void;
1521
- disabled?: boolean;
1522
- };
1523
- /**
1524
- * 一行一个条目。整行可点时只有一个可点击元素,不要在里面再嵌按钮。
1525
- * 左缘的黄条只表示"选中",不要拿它表示类目。
1526
- */
1527
- export declare function ListRow({ start, end, description, selected, completed, completedWord, size, href, target, rel, render, onClick, disabled, className, children, ...props }: ListRowProps): import("react").JSX.Element;
1528
- //#endregion
1529
- //#region src/components/loader/Loader.d.ts
1530
- type LoaderProps = Omit<ComponentProps<"div">, "children"> & {
1531
- /** 真实进度,0 – 100。不知道就不传:显示不确定进度,不显示数字 */
1532
- value?: number;
1533
- /** 进度下方的一行标语 */
1534
- tagline?: ReactNode;
1535
- /** 置为 `false` 时遮罩向上滑出,结束后卸载。默认 `true` */
1536
- open?: boolean;
1537
- /** 铺满视口并锁住页面(默认);关掉则铺满所在的定位容器 */
1538
- fullscreen?: boolean;
1539
- /** 进度条的可访问名称 */
1540
- label?: string;
1541
- /** 滑出结束、已经卸载之后触发 */
1542
- onExited?: () => void;
1543
- };
1544
- /**
1545
- * 加载页:近黑底、大号等宽百分比、一行标语、黄色进度条。只用于整页的首次加载。
1546
- * 不伪造进度;内容就绪后立刻把 `open` 置为 `false`,不要为了播完动画而等待。
1547
- */
1548
- export declare function Loader({ value, tagline, open, fullscreen, label, onExited, onKeyDown, className, ref, ...props }: LoaderProps): import("react").JSX.Element | null;
1549
- //#endregion
1550
- //#region src/components/marquee/Marquee.d.ts
1551
- type MarqueeProps = ComponentProps<"div"> & {
1552
- /** 走完一程的秒数,默认 20。内容越长给得越大 */
1553
- duration?: number;
1554
- /** 首尾两份内容之间的间隔,任意 CSS 长度,默认 `2rem` */
1555
- gap?: string;
1556
- /** 鼠标悬停或焦点落到里面时暂停,默认开 */
1557
- pauseOnHover?: boolean;
1558
- /** 由使用方控制的暂停 */
1559
- paused?: boolean;
1560
- /** 只在内容放不下时才动;放得下就是一行普通的文字 */
1561
- overflowOnly?: boolean;
1562
- };
1563
- /**
1564
- * 跑马灯:内容复制一份首尾相接,匀速走到一半后停顿一下再循环。
1565
- * 用在巨字和过长的单行文字上;系统开启"减少动态效果"时静止在起点。
1566
- * 纯装饰的巨字给它加 `aria-hidden`。
1567
- */
1568
- export declare function Marquee({ duration, gap, pauseOnHover, paused, overflowOnly, className, children, ...props }: MarqueeProps): import("react").JSX.Element;
1569
- //#endregion
1570
- //#region src/components/media-card/MediaCard.d.ts
1571
- type MediaCardRatio = "16/9" | "4/3" | "1/1" | "3/4";
1572
- type MediaCardProps = Omit<ComponentProps<"article">, "title"> & {
1573
- /** 图片、视频封面或任意占位图形,铺满媒体区 */
1574
- media: ReactNode;
1575
- /** 媒体区的宽高比 */
1576
- ratio?: MediaCardRatio;
1577
- title: ReactNode;
1578
- /** 微标行里的类目,组件在前面加 `//` */
1579
- category?: ReactNode;
1580
- /** 微标行里的日期 */
1581
- date?: ReactNode;
1582
- /** 类型标签(如 `PV`),放在图片下方的微标行里,不叠在图上 */
1583
- tag?: ReactNode;
1584
- /** 这张卡是一段影像:媒体区左下角多一个播放记号。记号不能点,整卡仍然只有一个链接 */
1585
- video?: boolean;
1586
- /** `video` 时加在标题前、读屏才听得到的那个词,默认"视频" */
1587
- videoLabel?: string;
1588
- /** 传了就整卡可点:标题是链接,点击范围铺满整张卡 */
1589
- href?: string;
1590
- target?: string;
1591
- rel?: string;
1592
- /** 用这个元素代替标题里的 `<a>`(路由库的链接组件)。传了整卡同样可点 */
1593
- render?: LinkRender;
1594
- /** 标题的层级,默认 `h3` */
1595
- level?: 2 | 3 | 4 | 5 | 6;
1596
- };
1597
- /**
1598
- * 媒体卡:图片 + 微标行 + 标题。标题和标签都在图片之外。
1599
- * 整卡只有一个可点击元素,不要在里面再放按钮或链接。
1600
- */
1601
- export declare function MediaCard({ media, ratio, title, category, date, tag, video, videoLabel, href, target, rel, render, level, className, ...props }: MediaCardProps): import("react").JSX.Element;
1602
- //#endregion
1603
- //#region src/components/nav-action/NavAction.d.ts
1604
- type NavActionLayout = "inline" | "block" | "stacked";
1605
- type OwnProps$1 = {
1606
- /** 换掉默认的实心三角 */
1607
- icon?: ReactNode;
1608
- /**
1609
- * 摆法。放在侧轨、全屏菜单里时由它们决定,一般不用传:
1610
- * - `inline` 40px 高的横块,顶栏里;
1611
- * - `block` 48px 高的通宽横条,展开的侧轨和全屏菜单的底部;
1612
- * - `stacked` 48px 宽、至少 96px 高的竖块,文字竖排,收起的侧轨里。
1613
- */
1614
- layout?: NavActionLayout;
1615
- /** 传了就渲染成链接 */
1616
- href?: string;
1617
- target?: string;
1618
- rel?: string;
1619
- /** 用这个元素代替 `<a>`(路由库的链接组件)。传了就按链接处理 */
1620
- render?: LinkRender;
1621
- onClick?: (event: MouseEvent<HTMLElement>) => void;
1622
- disabled?: boolean;
1623
- children: ReactNode;
1624
- };
1625
- type NavActionProps = OwnProps$1 & Omit<ComponentProps<"button">, keyof OwnProps$1 | "type">;
1626
- /**
1627
- * 主行动块:整个产品最主要的那一个去处("前往控制台")。
1628
- * 反转的一整块,悬停时变成信号黄。侧轨、顶栏、全屏菜单的底部放的都是它;
1629
- * 一个界面里只放一个。
1630
- */
1631
- export declare function NavAction({ icon, layout: layoutProp, href, target, rel, render, onClick, disabled, className, children, ...props }: NavActionProps): import("react").JSX.Element;
1632
- //#endregion
1633
- //#region src/components/nav-menu/NavMenu.d.ts
1634
- type NavMenuProps = {
1635
- /** 菜单钮,通常是顶栏最右边的 `<IconButton>`。不传就用 `open` / `onOpenChange` 自己控制 */
1636
- trigger?: ReactElement<Record<string, unknown>>;
1637
- open?: boolean;
1638
- defaultOpen?: boolean;
1639
- onOpenChange?: (open: boolean) => void;
1640
- /** 菜单的名称,读屏打开时读它。没有 `brand` 时也显示在最上面一行 */
1641
- title: ReactNode;
1642
- /** 最上面一行左边的标志,通常和顶栏的是同一个 */
1643
- brand?: ReactNode;
1644
- /** 导航项下面的一排工具按钮 */
1645
- tools?: ReactNode;
1646
- /** 底部通宽的按钮:放一到两个 `NavAction` */
1647
- footer?: ReactNode;
1648
- /** 背景底部的一行镂空巨字,纯装饰。写一个短词 */
1649
- ghost?: string;
1650
- /** 里面那组栏目的名称 */
1651
- navLabel?: string;
1652
- /** 关闭钮的可访问名称 */
1653
- closeLabel?: string;
1654
- /** 给整块面板 */
1655
- className?: string;
1656
- /** `NavMenuItem` */
1657
- children: ReactNode;
1658
- };
1659
- /**
1660
- * 全屏菜单:窄屏上顶栏的菜单钮打开的那一整屏栏目。
1661
- * 打开时焦点移入并被限制在内、背景不可滚动;`Esc` 关闭,焦点回到菜单钮。
1662
- */
1663
- export declare function NavMenu({ trigger, open, defaultOpen, onOpenChange, title, brand, tools, footer, ghost, navLabel, closeLabel, className, children }: NavMenuProps): import("react").JSX.Element;
1664
- type ItemOwnProps$2 = {
1665
- /** 图标,后面跟一条竖向的分隔线 */
1666
- icon?: ReactNode;
1667
- /** 当前所在的栏目:整条变信号黄,输出 `aria-current="page"` */
1668
- current?: boolean;
1669
- disabled?: boolean;
1670
- /** 点了之后是否关掉菜单,默认关 */
1671
- closeOnClick?: boolean;
1672
- /** 传了就渲染成链接 */
1673
- href?: string;
1674
- target?: string;
1675
- rel?: string;
1676
- /** 用这个元素代替 `<a>`(路由库的链接组件)。传了就按链接处理 */
1677
- render?: LinkRender;
1678
- /** 没有 `href` 和 `render` 时渲染成按钮 */
1679
- onClick?: (event: MouseEvent<HTMLElement>) => void;
1680
- children: ReactNode;
1681
- };
1682
- type NavMenuItemProps = ItemOwnProps$2 & Omit<ComponentProps<"li">, keyof ItemOwnProps$2>;
1683
- /** 全屏菜单里的一个栏目。 */
1684
- export declare function NavMenuItem({ icon, current, disabled, closeOnClick, href, target, rel, render, onClick, className, children, ...props }: NavMenuItemProps): import("react").JSX.Element;
1685
- //#endregion
1686
- //#region src/components/navigator/Navigator.d.ts
1687
- type NavigatorSize = "sm" | "md";
1688
- type NavigatorProps = Omit<ComponentProps<"div">, "children" | "onChange"> & {
1689
- /** 各条目的名称,按顺序 */
1690
- items: ReactNode[];
1691
- /** 受控的当前条目,从 0 起 */
1692
- index?: number;
1693
- /** 非受控时的初始条目,默认 0 */
1694
- defaultIndex?: number;
1695
- onIndexChange?: (index: number) => void;
1696
- /** 首尾相接:到最后一项再往后回到第一项。默认到头时按钮禁用 */
1697
- loop?: boolean;
1698
- /** 40 或 56px 高 */
1699
- size?: NavigatorSize;
1700
- prevLabel?: string;
1701
- nextLabel?: string;
1702
- /** 读屏听到的当前位置,默认"第 1 项,共 4 项" */
1703
- positionLabel?: (position: number, count: number) => string;
1704
- };
1705
- /**
1706
- * 胶囊导航器:在少量条目间前后切换,并显示当前条目的名称。
1707
- * 用 `aria-label` 说明翻的是什么("勘探区")。
1708
- */
1709
- export declare function Navigator({ items, index, defaultIndex, onIndexChange, loop, size, prevLabel, nextLabel, positionLabel, className, ...props }: NavigatorProps): import("react").JSX.Element;
1710
- //#endregion
1711
- //#region src/components/otp-input/OtpInput.d.ts
1712
- type OtpInputType = "numeric" | "alphanumeric";
1713
- type OtpInputSize = ControlSize;
1714
- type OtpInputVariant = ControlVariant;
1715
- type OtpInputProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue" | "children"> & {
1716
- /** 一共几位,默认 6 */
1717
- length?: number;
1718
- /** 拼起来的那一串 */
1719
- value?: string;
1720
- defaultValue?: string;
1721
- onValueChange?: (value: string) => void;
1722
- /** 每一位都填上了。粘贴一整串也算 */
1723
- onComplete?: (value: string) => void;
1724
- /** 收哪些字符:`numeric` 只收数字,默认;`alphanumeric` 收字母和数字 */
1725
- type?: OtpInputType;
1726
- /** 字母统一成大写:值也是大写,不只是看起来 */
1727
- uppercase?: boolean;
1728
- /** 把填进去的字遮成圆点 */
1729
- mask?: boolean;
1730
- /** 每几格之间加一道短横,如 6 位的码写 `3` 分成两组。只是画的 */
1731
- groupSize?: number;
1732
- /** 32 / 40 / 56px 见方 */
1733
- size?: OtpInputSize;
1734
- /** 同输入框:`sunken` 凹陷的底 + 底边线,默认;`outline` 四边描边 */
1735
- variant?: OtpInputVariant;
1736
- /** 错误态:每一格的边线变红。放在 `Field` 里时跟随它的 `error` */
1737
- invalid?: boolean;
1738
- disabled?: boolean;
1739
- readOnly?: boolean;
1740
- required?: boolean;
1741
- /** 传了就有一个隐藏字段随表单提交,值是拼起来的那一串 */
1742
- name?: string;
1743
- form?: string;
1744
- /** 填满就提交所在的表单 */
1745
- autoSubmit?: boolean;
1746
- /** 挂载后焦点落在第一格 */
1747
- autoFocus?: boolean;
1748
- /** 第二格起每一格的可访问名称,默认"第 2 位,共 6 位"。第一格的名称是字段的标签 */
1749
- slotLabel?: (position: number, length: number) => string;
1750
- };
1751
- /**
1752
- * 验证码输入:一格一位的短码。每一格是一个真的输入框——打一位跳一格,
1753
- * 粘贴一整串会分到各格,整组在 Tab 顺序里只停一次。
1754
- *
1755
- * 每个都要有标签:放进 `Field`,或者自己传 `aria-label`。
1756
- * `className` 与 `ref` 给外面那一排。
1757
- */
1758
- export declare function OtpInput({ length, value, defaultValue, onValueChange, onComplete, type, uppercase, mask, groupSize, size, variant, invalid: invalidProp, id: idProp, disabled: disabledProp, required: requiredProp, readOnly, name, form, autoSubmit, autoFocus, slotLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": describedByProp, className, ...props }: OtpInputProps): import("react").JSX.Element;
1759
- //#endregion
1760
- //#region src/components/page-header/PageHeader.d.ts
1761
- type PageHeaderProps = Omit<ComponentProps<"header">, "title"> & {
1762
- /** 页面的标题 */
1763
- title: ReactNode;
1764
- /** 标题的层级,默认 1(`<h1>`)。页头用在抽屉、分栏里时改小 */
1765
- level?: 1 | 2 | 3;
1766
- /** 标题上面的微文字行,如 `// ARCHIVE 共 128 条` */
1767
- meta?: ReactNode;
1768
- /** 标题下面的一段说明 */
1769
- description?: ReactNode;
1770
- /** 最上面的层级路径:放一个 `Breadcrumb` */
1771
- breadcrumb?: ReactNode;
1772
- /** 标题左边的返回:放一个 `PageHeaderBack` */
1773
- back?: ReactNode;
1774
- /** 右边的行动区:几个按钮。放不下时折到标题下面 */
1775
- actions?: ReactNode;
1776
- /** 底下加一条分隔线 */
1777
- divider?: boolean;
1778
- /**
1779
- * 吸在滚动容器的顶上,带实底和底下那条线。
1780
- * 上面还有吸顶的顶栏时用 `className` 改 `top`
1781
- */
1782
- sticky?: boolean;
1783
- /** 挂上时播放一次入场:微文字行 → 标题 → 说明。默认开启;`sticky` 时不播 */
1784
- animate?: boolean;
1785
- /** 标题下面的一行:页签、几个统计块 */
1786
- children?: ReactNode;
1787
- };
1788
- /**
1789
- * 页头:这是哪一页、怎么回去、在这一页能做什么。一页一个。
1790
- * 按自身的宽度响应:行动区放不下时折到标题下面。
1791
- */
1792
- export declare function PageHeader({ title, level, meta, description, breadcrumb, back, actions, divider, sticky, animate, className, children, ...props }: PageHeaderProps): import("react").JSX.Element;
1793
- type BackOwnProps = {
1794
- /** 默认"返回"。建议写成"返回某某" */
1795
- "aria-label"?: string;
1796
- /** 传了就渲染成链接 */
1797
- href?: string;
1798
- target?: string;
1799
- rel?: string;
1800
- /** 用这个元素代替 `<a>`(路由库的链接组件)。传了就按链接处理 */
1801
- render?: LinkRender;
1802
- onClick?: (event: MouseEvent<HTMLElement>) => void;
1803
- disabled?: boolean;
1804
- };
1805
- type PageHeaderBackProps = BackOwnProps & Omit<ComponentProps<"button">, keyof BackOwnProps | "type" | "children">;
1806
- /**
1807
- * 页头里的返回:40px 的深灰斜纹方块加一个左箭头,`back` 按钮收成的图标形态。
1808
- * 放进 `PageHeader` 的 `back`。
1809
- */
1810
- export declare function PageHeaderBack({ "aria-label": label, href, target, rel, render, onClick, disabled, className, ...props }: PageHeaderBackProps): import("react").JSX.Element;
1811
- //#endregion
1812
- //#region src/components/pagination/Pagination.d.ts
1813
- type PaginationSize = "md" | "lg";
1814
- type PaginationProps = Omit<ComponentProps<"nav">, "children" | "onChange"> & {
1815
- /** 受控的当前页,从 1 起 */
1816
- page?: number;
1817
- /** 非受控时的初始页,默认 1 */
1818
- defaultPage?: number;
1819
- onPageChange?: (page: number) => void;
1820
- /** 总页数 */
1821
- pageCount: number;
1822
- /** 页码处换成输入框:输入页码后回车或失焦跳页,Esc 还原 */
1823
- jump?: boolean;
1824
- /** 条高 48 或 56px */
1825
- size?: PaginationSize;
1826
- prevLabel?: string;
1827
- nextLabel?: string;
1828
- /** 跳页输入框的可访问名称 */
1829
- jumpLabel?: string;
1830
- /** 读屏听到的当前位置,默认"第 1 页,共 12 页" */
1831
- pageLabel?: (page: number, pageCount: number) => string;
1832
- };
1833
- /**
1834
- * 分页条:浅灰斜纹条,两端是方钮,中间是 `01 / 12`。
1835
- * 不列一长串数字按钮;要跳页就打开 `jump`,在页码处直接输入。
1836
- */
1837
- export declare function Pagination({ page, defaultPage, onPageChange, pageCount, jump, size, prevLabel, nextLabel, jumpLabel, pageLabel, className, ...props }: PaginationProps): import("react").JSX.Element;
1838
- //#endregion
1839
- //#region src/components/panel/Panel.d.ts
1840
- type PanelProps = ComponentProps<"div"> & {
1841
- /** 1px 描边,默认有。关掉后只靠底色差分层 */
1842
- bordered?: boolean;
1843
- };
1844
- /** 围住一组信息的容器:直角、底色只比页面差一档、没有阴影。不要面板套面板。 */
1845
- export declare function Panel({ bordered, className, ...props }: PanelProps): import("react").JSX.Element;
1846
- type PanelHeaderVariant = "band" | "line";
1847
- type PanelHeaderProps = Omit<ComponentProps<"div">, "title"> & {
1848
- /**
1849
- * - `band` 反转的横带 + 左端短竖条,默认。它是一个 `data-theme="inverse"` 的
1850
- * 局部主题:里面的按钮、标签、焦点环都按这条带子的底色取值;
1851
- * - `line` 只有一条细线和小标题,更轻。同一个界面选一种。
1852
- */
1853
- variant?: PanelHeaderVariant;
1854
- /** 标题右侧的计数或一个小操作 */
1855
- extra?: ReactNode;
1856
- /** 标题层级,默认 3(`<h3>`) */
1857
- level?: 2 | 3 | 4 | 5 | 6;
1858
- };
1859
- export declare function PanelHeader({ variant, extra, level, className, children, ...props }: PanelHeaderProps): import("react").JSX.Element;
1860
- type PanelBodyProps = ComponentProps<"div">;
1861
- export declare function PanelBody({ className, ...props }: PanelBodyProps): import("react").JSX.Element;
1862
- type PanelRowsProps = ComponentProps<"dl">;
1863
- /** 属性行的容器。里面只放 `PanelRow`。 */
1864
- export declare function PanelRows({ className, ...props }: PanelRowsProps): import("react").JSX.Element;
1865
- type PanelRowProps = Omit<ComponentProps<"div">, "children"> & {
1866
- /** 属性名,左对齐 */
1867
- label: ReactNode;
1868
- /** 属性值,右对齐、等宽、加粗 */
1869
- children: ReactNode;
1870
- };
1871
- export declare function PanelRow({ label, children, className, ...props }: PanelRowProps): import("react").JSX.Element;
1872
- //#endregion
1873
- //#region src/components/play-button/PlayButton.d.ts
1874
- type PlayMarkSize = "sm" | "md" | "lg";
1875
- type PlayMarkProps = Omit<ComponentProps<"span">, "children"> & {
1876
- size?: PlayMarkSize;
1877
- };
1878
- /**
1879
- * 播放记号:只是一个记号,不能点,对读屏隐藏。
1880
- * 整张卡已经是一个链接时用它(媒体卡的 `video`);要它自己能点用 `PlayButton`。
1881
- */
1882
- export declare function PlayMark({ size, className, ...props }: PlayMarkProps): import("react").JSX.Element;
1883
- type PlayButtonProps = Omit<ComponentProps<"button">, "children" | "aria-label"> & {
1884
- /** 默认"播放"。一页有好几个时写明播的是什么 */
1885
- "aria-label"?: string;
1886
- size?: PlayMarkSize;
1887
- };
1888
- /** 播放钮:和播放记号同一个画法的按钮,给"点了就在原地播放"的封面用。 */
1889
- export declare function PlayButton({ "aria-label": ariaLabel, size, type, disabled, className, ...props }: PlayButtonProps): import("react").JSX.Element;
1890
- //#endregion
1891
- //#region src/components/popover/Popover.d.ts
1892
- type PopoverSide = "top" | "bottom" | "left" | "right";
1893
- type PopoverAlign = "start" | "center" | "end";
1894
- type PopoverProps = Omit<ComponentProps<"div">, "title" | "children" | "className" | "style"> & {
1895
- /** 触发按钮 */
1896
- trigger: ReactElement<Record<string, unknown>>;
1897
- /** 标题。有它时它就是面板的可访问名称;没有时自己传 `aria-label` */
1898
- title?: ReactNode;
1899
- /** 标题下的一行说明,会关联给读屏 */
1900
- description?: ReactNode;
1901
- /** 面板出现在触发按钮的哪一侧,放不下时自动翻到对面。默认 `bottom` */
1902
- side?: PopoverSide;
1903
- /** 和触发按钮的哪一边对齐。默认 `start` */
1904
- align?: PopoverAlign;
1905
- open?: boolean;
1906
- defaultOpen?: boolean;
1907
- onOpenChange?: (open: boolean) => void;
1908
- /** 给面板 */
1909
- className?: string;
1910
- children?: ReactNode;
1911
- };
1912
- /**
1913
- * 气泡卡片:点击触发、里面可以操作的一小块面板。不是模态——页面其余部分照常可用,
1914
- * 点别处、按 `Esc`、焦点移出去都会关。只是一句说明用 `Tooltip`,
1915
- * 必须做完才能继续的用 `Dialog`。
1916
- */
1917
- export declare function Popover({ trigger, title, description, side, align, open, defaultOpen, onOpenChange, className, children, ...props }: PopoverProps): import("react").JSX.Element;
1918
- type PopoverCloseProps = {
1919
- /** 点了就关掉面板的按钮,比如"完成" */
1920
- children: ReactElement<Record<string, unknown>>;
1921
- };
1922
- /** 包住面板里"点了就关"的按钮。 */
1923
- export declare function PopoverClose({ children }: PopoverCloseProps): import("react").JSX.Element;
1924
- //#endregion
1925
- //#region src/components/progress/Progress.d.ts
1926
- type ProgressSize = "sm" | "md";
1927
- type ProgressProps = Omit<ComponentProps<"div">, "children"> & {
1928
- /** 当前值。不传就是"不确定进度":一段色块在轨道上往返 */
1929
- value?: number;
1930
- /** 最大值,默认 100;分段进度下默认等于段数 */
1931
- max?: number;
1932
- /** 步骤数明确时把轨道切成等长的小段,`value` 是已完成的段数 */
1933
- segments?: number;
1934
- /** 4px 细条或 8px 标准条 */
1935
- size?: ProgressSize;
1936
- /** 在右侧显示数值:百分比,分段时是 `3 / 6` */
1937
- showValue?: boolean;
1938
- /** 自定义数值的写法 */
1939
- formatValue?: (value: number, max: number) => ReactNode;
1940
- /** 入场时从左侧充填一次 */
1941
- animate?: boolean;
1942
- };
1943
- /**
1944
- * 进度:灰轨 + 黄填充。表示"完成了多少";表示"数量有多少"用图表,那是蓝色的事。
1945
- *
1946
- * `className` 给外层,其余属性(`aria-label` 等)给带 `role="progressbar"` 的轨道。
1947
- */
1948
- export declare function Progress({ value, max, segments, size, showValue, formatValue, animate, className, style, ...props }: ProgressProps): import("react").JSX.Element;
1949
- //#endregion
1950
- //#region src/components/progress/ProgressRing.d.ts
1951
- type ProgressRingProps = Omit<ComponentProps<"div">, "children"> & {
1952
- /** 当前值。不传就是"不确定进度":一段弧匀速旋转 */
1953
- value?: number;
1954
- /** 最大值,默认 100 */
1955
- max?: number;
1956
- /** 直径,像素,默认 48 */
1957
- size?: number;
1958
- /** 线宽,像素,缺省取直径的 9% */
1959
- thickness?: number;
1960
- /** 在中心显示百分比的数值,不带 `%` */
1961
- showValue?: boolean;
1962
- /** 中心的内容:图标或头像。传了就不显示数值 */
1963
- children?: ReactNode;
1964
- };
1965
- /**
1966
- * 进度环:细圆环轨道 + 从 12 点方向顺时针的黄弧。用在紧凑的位置,或者围住一个头像、图标。
1967
- * 取色与 `Progress` 相同;需要名称时传 `aria-label`。
1968
- */
1969
- export declare function ProgressRing({ value, max, size, thickness, showValue, className, style, children, ...props }: ProgressRingProps): import("react").JSX.Element;
1970
- //#endregion
1971
- //#region src/components/radio/Radio.d.ts
1972
- type RadioGroupOrientation = "vertical" | "horizontal";
1973
- type RadioGroupProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue"> & {
1974
- /** 受控的当前值 */
1975
- value?: string;
1976
- /** 非受控时的初始值 */
1977
- defaultValue?: string;
1978
- onValueChange?: (value: string) => void;
1979
- /** 表单提交用的字段名,缺省自动生成 */
1980
- name?: string;
1981
- disabled?: boolean;
1982
- required?: boolean;
1983
- /** 竖排(默认)或横排 */
1984
- orientation?: RadioGroupOrientation;
1985
- };
1986
- /**
1987
- * 单选组。方向键在组内移动并选中,这是原生单选的行为,组件不另外处理。
1988
- * 标签用 `<Field group label="…">` 包住它,或者自己传 `aria-label`。
1989
- */
1990
- export declare function RadioGroup({ value, defaultValue, onValueChange, name, disabled: disabledProp, required: requiredProp, orientation, className, ...props }: RadioGroupProps): import("react").JSX.Element;
1991
- type RadioProps = Omit<ComponentProps<"input">, "type" | "size" | "value"> & {
1992
- value: string;
1993
- /** 右侧的文字标签。不传时必须自己给 `aria-label` */
1994
- children?: ReactNode;
1995
- };
1996
- /**
1997
- * 单选框,放在 `RadioGroup` 里。`className` 给整行,其余属性与 `ref` 给 `<input>`。
1998
- * 脱离 `RadioGroup` 时就是一个原生单选,自己管 `name` 与 `checked`。
1999
- */
2000
- export declare function Radio({ value, disabled, onChange, className, children, ...props }: RadioProps): import("react").JSX.Element;
2001
- //#endregion
2002
- //#region src/components/rec-indicator/RecIndicator.d.ts
2003
- type RecIndicatorProps = Omit<ComponentProps<"span">, "children"> & {
2004
- /** 方括号里的字,默认 `REC`;直播、实时数据可以写 `LIVE` */
2005
- label?: ReactNode;
2006
- /** 红点硬切明灭,默认开。关掉后红点常亮 */
2007
- blink?: boolean;
2008
- };
2009
- /**
2010
- * 录制指示:一个红点 + `[ REC ]`。
2011
- * 只在确有"进行中"的语义时用(正在录制、直播中、实时数据),不要当氛围装饰——
2012
- * 红色在这套语言里是危险与紧急。
2013
- */
2014
- export declare function RecIndicator({ label, blink, className, ...props }: RecIndicatorProps): import("react").JSX.Element;
2015
- //#endregion
2016
- //#region src/components/registration-strip/RegistrationStrip.d.ts
2017
- type RegistrationStripOrientation = "horizontal" | "vertical";
2018
- type RegistrationStripProps = Omit<ComponentProps<"div">, "children"> & {
2019
- /** 横条高 3px、每段 64px;竖条是三段 6 × 14px 叠放 */
2020
- orientation?: RegistrationStripOrientation;
2021
- /** 横条后面接一段灰线、撑满容器:用作名称下方的分隔线 */
2022
- rule?: boolean;
2023
- };
2024
- /**
2025
- * 注册色条:品红、青、黄三段的微条,印刷品语气的点缀。
2026
- * 纯装饰,不承担任何数据或状态含义;一个版块最多一处,离图表远一点。
2027
- */
2028
- export declare function RegistrationStrip({ orientation, rule, className, ...props }: RegistrationStripProps): import("react").JSX.Element;
2029
- //#endregion
2030
- //#region src/components/rolling-number/RollingNumber.d.ts
2031
- type RollingNumberProps = Omit<ComponentProps<"span">, "children"> & {
2032
- /** 终值 */
2033
- value: number;
2034
- /**
2035
- * 把数值写成字。默认带千分位(`1,280`),小数位数跟着 `value`。
2036
- * 滚的过程中每一帧都会调它
2037
- */
2038
- format?: (value: number) => string;
2039
- /** 进入视口时从 0 滚到终值,一次。默认开启 */
2040
- animate?: boolean;
2041
- };
2042
- /**
2043
- * 滚动数字:进入视口时从 0 滚到终值,只滚一次。放进 `Stat` 的 `value` 里,
2044
- * 或者任何"一个需要被一眼看到的数字"的地方。等宽数字由所在处给(`tabular-nums`)。
2045
- *
2046
- * - 读屏只读终值:终值一直在,滚的时候只是看不见;滚动的那一份对读屏隐藏。
2047
- * - 宽度由终值占着,滚的时候旁边的东西不动。
2048
- * - 服务端渲染出来的、打印出来的、"减少动态效果"下的,都直接是终值。
2049
- * - 值后来变了直接换,不再滚。
2050
- */
2051
- export declare function RollingNumber({ value, format, animate, className, ref, ...props }: RollingNumberProps): import("react").JSX.Element;
2052
- //#endregion
2053
- //#region src/components/schedule/Schedule.d.ts
2054
- type ScheduleProps = Omit<ComponentProps<"div">, "aria-label"> & {
2055
- /** 这张排期的名称。横向能滚动时,滚动的那一块用它 */
2056
- label: string;
2057
- /** 第一天,`YYYY-MM-DD` */
2058
- start: string;
2059
- /** 最后一天(包含) */
2060
- end: string;
2061
- /**
2062
- * 哪几天是日期锚:压在轴条上的日期块,往下带一条引线。
2063
- * 默认是第一天和范围内每个月的 1 号
2064
- */
2065
- anchors?: readonly string[];
2066
- /** 今天:画一条竖线。不传就不画 */
2067
- today?: string;
2068
- /** 一天至少多宽,像素。默认 32。容器够宽时各列平分多出来的宽度 */
2069
- dayWidth?: number;
2070
- /** 读屏听到的日期按它写。默认 `zh-CN` */
2071
- locale?: string;
2072
- /**
2073
- * 读屏听到的起止日期怎么说。默认"10月3日至10月12日",只有一天时是"10月5日"。
2074
- * 换了 `locale` 一般也要换它
2075
- */
2076
- describeRange?: (start: string, end: string) => string;
2077
- /** `ScheduleTrack` */
2078
- children?: ReactNode;
2079
- };
2080
- /**
2081
- * 排期:横向的时间轨图。条目从起始日的位置开始,长度就是持续时间。
2082
- * 最小单位是天。放不下时在自己的容器里横向滚动。
2083
- */
2084
- export declare function Schedule({ label, start, end, anchors: anchorsProp, today, dayWidth, locale, describeRange, className, style, children, ...props }: ScheduleProps): import("react").JSX.Element;
2085
- type ScheduleTrackProps = Omit<ComponentProps<"section">, "aria-label"> & {
2086
- /** 类目的名称:竖轨上的字,也是这条轨的可访问名称 */
2087
- label: string;
2088
- /** 竖轨上的图标 */
2089
- icon?: ReactNode;
2090
- /** 直接放 `ScheduleItem` */
2091
- children?: ReactNode;
2092
- };
2093
- /**
2094
- * 一条轨:一个类目的条目排在一行里,时间重叠的自动错到下一行。
2095
- * 竖轨的颜色用 `className="[--track-color:…] [--track-ink:…]"` 换。
2096
- */
2097
- export declare function ScheduleTrack({ label, icon, className, children, ...props }: ScheduleTrackProps): import("react").JSX.Element;
2098
- type ScheduleItemVariant = "banner" | "system";
2099
- type ItemOwnProps$1 = {
2100
- /** 第一天,`YYYY-MM-DD` */
2101
- start: string;
2102
- /** 最后一天(包含) */
2103
- end: string;
2104
- /** 名称 */
2105
- title: ReactNode;
2106
- /** 类型小标签:右上角的白底描边小块。只有 `banner` 有 */
2107
- type?: ReactNode;
2108
- /**
2109
- * - `banner` 活动:浅底,可以垫一张图,左上是墨色的名称块,默认;
2110
- * - `system` 系统类:炭灰底 + 行动色侧签 + 一条虚线,不带图。
2111
- */
2112
- variant?: ScheduleItemVariant;
2113
- /** 垫在条目下面的图,铺满并裁切。只有 `banner` 有 */
2114
- media?: ReactNode;
2115
- /** 传了名称就是一个链接,点击范围铺满整个条目 */
2116
- href?: string;
2117
- target?: string;
2118
- rel?: string;
2119
- /** 用这个元素代替 `<a>`(路由库的链接组件)。传了就按链接处理 */
2120
- render?: LinkRender;
2121
- onClick?: (event: MouseEvent<HTMLElement>) => void;
2122
- };
2123
- type ScheduleItemProps = ItemOwnProps$1 & Omit<ComponentProps<"li">, keyof ItemOwnProps$1 | "children">;
2124
- /** 排期里的一个条目。直接放在 `ScheduleTrack` 里。 */
2125
- export declare function ScheduleItem({ start, end, title, type, variant, media, href, target, rel, render, onClick, className, style, ...props }: ScheduleItemProps): import("react").JSX.Element | null;
2126
- //#endregion
2127
- //#region src/components/scroll-area/ScrollArea.d.ts
2128
- type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
2129
- type ScrollAreaProps = Omit<ComponentProps<"div">, "aria-label" | "className" | "style" | "ref"> & {
2130
- /** 这一块是什么。能滚的时候它是一个能聚焦的区域,读屏听到的就是这个名称 */
2131
- "aria-label": string;
2132
- /** 哪个方向能滚,默认 `vertical`。只管一个方向时,另一个方向滚不了 */
2133
- orientation?: ScrollAreaOrientation;
2134
- /** 真正在滚的那个元素:给页内目录、回到顶部的 `target` */
2135
- viewportRef?: Ref<HTMLDivElement>;
2136
- /** 给外框:高度或者高度上限写在这里 */
2137
- className?: string;
2138
- style?: CSSProperties;
2139
- /** 给外框 */
2140
- ref?: Ref<HTMLDivElement>;
2141
- };
2142
- /**
2143
- * 滚动区:一块自己能滚的区域,滚动条是画出来的。高度(或高度上限)由 `className` 给。
2144
- * 只有真的溢出时才有滚动条,也才是一个能聚焦的区域。
2145
- *
2146
- * 整页的滚动留给浏览器,不要把页面主体包进来。
2147
- * `className` 与 `ref` 给外框,其余属性(`onScroll` 等)给真正在滚的可视区。
2148
- */
2149
- export declare function ScrollArea({ "aria-label": label, orientation, viewportRef, className, style, ref, children, ...props }: ScrollAreaProps): import("react").JSX.Element;
2150
- //#endregion
2151
- //#region src/components/scroll-hint/ScrollHint.d.ts
2152
- type ScrollHintVariant = "line" | "chevron";
2153
- type ScrollHintProps = Omit<ComponentProps<"div">, "children"> & {
2154
- /** 上方的小字,默认 `SCROLL` */
2155
- label?: ReactNode;
2156
- /**
2157
- * - `line` 一条细竖线 + 一个下坠的光点,默认;
2158
- * - `chevron` 一个下坠的折线箭头,窄屏用。
2159
- */
2160
- variant?: ScrollHintVariant;
2161
- /** 看哪个滚动容器。不传就是整个页面 */
2162
- target?: RefObject<HTMLElement | null>;
2163
- /** 滚过多少像素算"已经开始滚动",默认 8 */
2164
- threshold?: number;
2165
- };
2166
- /**
2167
- * 滚动提示:只在确实还能往下滚、并且还没开始滚的时候出现,滚动开始后淡出。
2168
- * 纯装饰,对读屏隐藏;位置由使用方定(首屏底部居中或右下)。
2169
- */
2170
- export declare function ScrollHint({ label, variant, target, threshold, className, ...props }: ScrollHintProps): import("react").JSX.Element;
2171
- //#endregion
2172
- //#region src/components/section-title/SectionTitle.d.ts
2173
- type SectionTitleVariant = "standard" | "plain" | "band" | "side";
2174
- type SectionTitleProps = Omit<ComponentProps<"header">, "title"> & {
2175
- /**
2176
- * - `standard` 灰色滑块 + 斜箭头 + 英文,下接中文。版块的第一级标题,默认;
2177
- * - `plain` 只留标题和左侧一条短竖条。文档、设置这类工具页面;
2178
- * - `band` 通栏信号黄色带。亮暗版块之间的过渡,一页最多一到两条;
2179
- * - `side` 竖排侧签。贴在横向展开的版块左缘,窄屏下回到横排。
2180
- */
2181
- variant?: SectionTitleVariant;
2182
- /** 真正的标题文字 */
2183
- children: ReactNode;
2184
- /** 英文结构层:`standard` 的栏目名、`side` 的大字。写真实的栏目名 */
2185
- latin?: ReactNode;
2186
- /** `band` 主题上方的小号副题 */
2187
- subtitle?: ReactNode;
2188
- /** `standard` 顶部的微文字行,如 `// 新闻 2026.10.08` */
2189
- meta?: ReactNode;
2190
- /** 标题层级,默认 2(`<h2>`) */
2191
- level?: 1 | 2 | 3 | 4 | 5 | 6;
2192
- /** `standard` 进入视口时播放一次入场,默认开启 */
2193
- animate?: boolean;
2194
- /** 英文只是标题的翻译时对读屏隐藏,避免重复朗读。默认隐藏 */
2195
- latinHidden?: boolean;
2196
- /** `side` 的底色:`accent` 信号黄,`muted` 浅灰 */
2197
- tone?: "accent" | "muted";
2198
- /** `band` 与 `side` 的线稿插图位,纯装饰 */
2199
- illustration?: ReactNode;
2200
- };
2201
- export declare function SectionTitle({ variant, children, latin, subtitle, meta, level, animate, latinHidden, tone, illustration, className, ref: forwardedRef, ...props }: SectionTitleProps): import("react").JSX.Element;
2202
- //#endregion
2203
- //#region src/components/segmented-control/SegmentedControl.d.ts
2204
- type SegmentedControlSize = ControlSize;
2205
- type SegmentedControlVariant = ControlVariant;
2206
- type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue"> & {
2207
- /** 受控的当前值 */
2208
- value?: string;
2209
- /** 非受控时的初始值 */
2210
- defaultValue?: string;
2211
- onValueChange?: (value: string) => void;
2212
- /** 表单字段名:选中的值会随表单提交。缺省自动生成 */
2213
- name?: string;
2214
- /** 32 / 40 / 56px 高,和输入框同三档 */
2215
- size?: SegmentedControlSize;
2216
- /**
2217
- * 轨道的画法,和输入框相同:
2218
- * - `sunken` 凹陷的底 + 一条底边线,默认;
2219
- * - `outline` 四边描边,放在凹陷底色的区域里时用。
2220
- */
2221
- variant?: SegmentedControlVariant;
2222
- disabled?: boolean;
2223
- required?: boolean;
2224
- /** 错误态。放在 `Field` 里时跟随它的 `error` */
2225
- invalid?: boolean;
2226
- };
2227
- /**
2228
- * 分段选择:两到五个值里选一个,选项并排摆在一条轨道里。
2229
- * 语义是单选组——方向键换值,带 `name` 时随表单提交。里面只放 `Segment`。
2230
- * 标签用 `Field` 包住它,或者自己传 `aria-label`。
2231
- *
2232
- * 切换的是下面显示哪一块内容时用 `Tabs`,不是它。
2233
- */
2234
- export declare function SegmentedControl({ value, defaultValue, onValueChange, name, size, variant, disabled: disabledProp, required: requiredProp, invalid: invalidProp, className, ref, ...props }: SegmentedControlProps): import("react").JSX.Element;
2235
- type SegmentOwnProps = {
2236
- value: string;
2237
- /** 文字左边的图标。只有图标时要给 `aria-label` */
2238
- icon?: ReactNode;
2239
- disabled?: boolean;
2240
- /** 这一段的可访问名称;不传就是里面的文字 */
2241
- "aria-label"?: string;
2242
- children?: ReactNode;
2243
- };
2244
- type SegmentProps = SegmentOwnProps & Omit<ComponentProps<"label">, keyof SegmentOwnProps>;
2245
- /** 分段选择里的一段。`className` 给这一段的外壳。 */
2246
- export declare function Segment({ value, icon, disabled: disabledProp, "aria-label": ariaLabel, className, children, ...props }: SegmentProps): import("react").JSX.Element;
2247
- //#endregion
2248
- //#region src/components/select/Select.d.ts
2249
- type SelectSize = ControlSize;
2250
- type SelectVariant = ControlVariant;
2251
- type SelectOption = {
2252
- value: string;
2253
- label: ReactNode;
2254
- disabled?: boolean;
2255
- };
2256
- type SelectCommonProps = {
2257
- /**
2258
- * 选项。只传它就够了;需要分组时改用子元素(`SelectGroup`、`SelectItem`),
2259
- * 并仍然把全部选项传进来——触发器靠它在面板没打开时显示当前项的文字。
2260
- */
2261
- items: readonly SelectOption[];
2262
- /** 没选时显示的文字 */
2263
- placeholder?: ReactNode;
2264
- /** 表单字段名:选中的值会随表单提交 */
2265
- name?: string;
2266
- /**
2267
- * 触发器的画法,和输入框相同:
2268
- * - `sunken` 凹陷的底 + 一条底边线,默认;
2269
- * - `outline` 四边描边,放在凹陷底色的区域里时用。
2270
- */
2271
- variant?: SelectVariant;
2272
- /** 32 / 40 / 56px 高 */
2273
- size?: SelectSize;
2274
- /**
2275
- * 面板的画法:
2276
- * - `plain` 跟随主题,默认;
2277
- * - `strong` 固定的深色面板,当前项整行黄底墨字。
2278
- */
2279
- panelVariant?: MenuVariant;
2280
- /** 错误态。放在 `Field` 里时跟随它的 `error` */
2281
- invalid?: boolean;
2282
- disabled?: boolean;
2283
- required?: boolean;
2284
- open?: boolean;
2285
- defaultOpen?: boolean;
2286
- onOpenChange?: (open: boolean) => void;
2287
- id?: string;
2288
- "aria-label"?: string;
2289
- "aria-describedby"?: string;
2290
- /** 给触发器的外框 */
2291
- className?: string;
2292
- /** 给触发按钮 */
2293
- ref?: Ref<HTMLButtonElement>;
2294
- /** 自定义面板里的内容:`SelectItem`、`SelectGroup`、`SelectSeparator` */
2295
- children?: ReactNode;
2296
- };
2297
- type SelectSingleProps = SelectCommonProps & {
2298
- multiple?: false;
2299
- value?: string | null;
2300
- defaultValue?: string | null;
2301
- onValueChange?: (value: string) => void;
2302
- renderValue?: never;
2303
- };
2304
- type SelectMultipleProps = SelectCommonProps & {
2305
- /** 可以选多项:值是数组,选项行首多一个小方格,选了不关面板 */
2306
- multiple: true;
2307
- value?: string[];
2308
- defaultValue?: string[];
2309
- onValueChange?: (value: string[]) => void;
2310
- /**
2311
- * 自己画触发器里的内容,拿到的是已选的选项(按 `items` 的顺序)。
2312
- * 默认把标签用顿号连起来,两项以上时后面跟一个计数。一项都没选时显示 `placeholder`
2313
- */
2314
- renderValue?: (selected: SelectOption[]) => ReactNode;
2315
- };
2316
- type SelectProps = SelectSingleProps | SelectMultipleProps;
2317
- /**
2318
- * 下拉选择:外观同输入框的触发器 + 一个落在它下方的面板。
2319
- * 每个下拉都要有标签:放进 `Field`,或者自己传 `aria-label`。
2320
- * 加 `multiple` 可以选多项,这时值是数组。
2321
- * 选项只有两三个、又都该一眼看到时,用单选或页签,不用它。
2322
- */
2323
- export declare function Select(props: SelectProps): import("react").JSX.Element;
2324
- type SelectItemProps = Omit<ComponentProps<"div">, "value" | "id" | "style"> & {
2325
- value: string;
2326
- disabled?: boolean;
2327
- };
2328
- /** 面板里的一个选项。只在自定义面板内容时用。 */
2329
- export declare function SelectItem({ value, disabled, className, children, ...props }: SelectItemProps): import("react").JSX.Element;
2330
- type SelectGroupProps = Omit<ComponentProps<"div">, "style"> & {
2331
- /** 分组的小标题 */
2332
- label: ReactNode;
2333
- };
2334
- export declare function SelectGroup({ label, className, children, ...props }: SelectGroupProps): import("react").JSX.Element;
2335
- type SelectSeparatorProps = Omit<ComponentProps<"div">, "style">;
2336
- export declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): import("react").JSX.Element;
2337
- //#endregion
2338
- //#region src/components/side-rail/SideRail.d.ts
2339
- type SideRailProps = Omit<ComponentProps<"nav">, "aria-label"> & {
2340
- /** 这块导航的名称,比如"主导航" */
2341
- "aria-label": string;
2342
- /**
2343
- * 收起成只有图标的窄轨(64px)。默认是展开的(224px,图标 + 文字)。
2344
- * 栏目少且固定、屏幕空间紧张时才收起
2345
- */
2346
- collapsed?: boolean;
2347
- /** 最上面的标志。本库不带标志,传你自己的 */
2348
- brand?: ReactNode;
2349
- /** 导航项下面的工具组:几个图标按钮 */
2350
- tools?: ReactNode;
2351
- /** 主行动块:放一个 `NavAction` */
2352
- action?: ReactNode;
2353
- /** 最下面的次要入口 */
2354
- footer?: ReactNode;
2355
- /** `SideRailItem`、`SideRailGroup`、`SideRailSub` */
2356
- children: ReactNode;
2357
- };
2358
- /**
2359
- * 侧轨:桌面端贴在左边的主导航。自上而下是标志、导航项、工具组、主行动块、次要入口;
2360
- * 导航项放不下时在中间那一段里滚动。
2361
- *
2362
- * 默认 `sticky`、占满视口高;窄屏上不要把它缩小,换成 `TopBar` + `NavMenu`。
2363
- */
2364
- export declare function SideRail({ collapsed, brand, tools, action, footer, className, children, ...props }: SideRailProps): import("react").JSX.Element;
2365
- type ItemOwnProps = {
2366
- /** 图标。收起时只剩它,所以每一项都要有 */
2367
- icon: ReactNode;
2368
- /** 当前所在的栏目:墨色 + 左缘一条短竖条,输出 `aria-current="page"` */
2369
- current?: boolean;
2370
- /** 行尾的补充:计数、角标。收起时不显示 */
2371
- end?: ReactNode;
2372
- disabled?: boolean;
2373
- /** 传了就渲染成链接 */
2374
- href?: string;
2375
- target?: string;
2376
- rel?: string;
2377
- /** 用这个元素代替 `<a>`(路由库的链接组件)。传了就按链接处理 */
2378
- render?: LinkRender;
2379
- /** 没有 `href` 和 `render` 时渲染成按钮 */
2380
- onClick?: (event: MouseEvent<HTMLElement>) => void;
2381
- /** 栏目的名称。收起时看不见,但仍然是这一项的可访问名称 */
2382
- children: ReactNode;
2383
- };
2384
- type SideRailItemProps = ItemOwnProps & Omit<ComponentProps<"li">, keyof ItemOwnProps>;
2385
- /** 侧轨里的一个栏目。 */
2386
- export declare function SideRailItem({ icon, current, end, disabled, href, target, rel, render, onClick, children, ...props }: SideRailItemProps): import("react").JSX.Element;
2387
- type SideRailGroupProps = Omit<ComponentProps<"li">, "children"> & {
2388
- /** 这一组的小标题。收起时换成一条短线,名称仍然读得到 */
2389
- label: string;
2390
- /** `SideRailItem` */
2391
- children: ReactNode;
2392
- };
2393
- /** 把几个栏目归成一组。栏目多的时候用。它只是分组;能展开收起的是 `SideRailSub`。 */
2394
- export declare function SideRailGroup({ label, className, children, ...props }: SideRailGroupProps): import("react").JSX.Element;
2395
- //#endregion
2396
- //#region src/components/side-rail/SideRailSub.d.ts
2397
- type SubOwnProps = {
2398
- /** 图标。收起时只剩它 */
2399
- icon: ReactNode;
2400
- /** 这一组的名称:父项上的文字,也是子列表和菜单的名称 */
2401
- label: string;
2402
- /** 展开着吗。只在侧轨展开时有意义;收起的侧轨上是弹出的菜单 */
2403
- open?: boolean;
2404
- /**
2405
- * 一开始展开着吗。默认:当前项在里面就展开。
2406
- * 之后当前项换到了里面(从别处导航过来),也会自己展开
2407
- */
2408
- defaultOpen?: boolean;
2409
- onOpenChange?: (open: boolean) => void;
2410
- /** 直接放 `SideRailSubItem` */
2411
- children: ReactNode;
2412
- };
2413
- type SideRailSubProps = SubOwnProps & Omit<ComponentProps<"li">, keyof SubOwnProps>;
2414
- /**
2415
- * 侧轨里带二级的栏目。父项本身不是一个去处:点它只是展开收起。
2416
- * 侧轨收起时没有地方就地展开,改成向右弹出一块菜单。
2417
- */
2418
- export declare function SideRailSub({ icon, label, open: openProp, defaultOpen, onOpenChange, children, ...props }: SideRailSubProps): import("react").JSX.Element;
2419
- type SubItemOwnProps = {
2420
- /** 当前所在的页面:墨色、加粗,引线在这一段变成粗条;输出 `aria-current="page"` */
2421
- current?: boolean;
2422
- /** 行尾的补充:计数、角标 */
2423
- end?: ReactNode;
2424
- disabled?: boolean;
2425
- /** 传了就渲染成链接 */
2426
- href?: string;
2427
- target?: string;
2428
- rel?: string;
2429
- /** 用这个元素代替 `<a>`(路由库的链接组件)。传了就按链接处理 */
2430
- render?: LinkRender;
2431
- /** 没有 `href` 和 `render` 时渲染成按钮 */
2432
- onClick?: (event: MouseEvent<HTMLElement>) => void;
2433
- children: ReactNode;
2434
- };
2435
- type SideRailSubItemProps = SubItemOwnProps & Omit<ComponentProps<"li">, keyof SubItemOwnProps>;
2436
- /** 二级里的一项。直接放在 `SideRailSub` 里。 */
2437
- export declare function SideRailSubItem({ current, end, disabled, href, target, rel, render, onClick, children, ...props }: SideRailSubItemProps): import("react").JSX.Element;
2438
- //#endregion
2439
- //#region src/components/skeleton/Skeleton.d.ts
2440
- type SkeletonVariant = "block" | "text" | "circle";
2441
- type SkeletonProps = Omit<ComponentProps<"span">, "children"> & {
2442
- /**
2443
- * - `block` 与内容等大的色块,尺寸用 `className` 给(`h-40 w-full`),默认;
2444
- * - `text` 几行文字,行高跟随所在位置的字号;
2445
- * - `circle` 圆形,头像、图标。
2446
- */
2447
- variant?: SkeletonVariant;
2448
- /** `text` 的行数,默认 3。多于一行时末行短一截 */
2449
- lines?: number;
2450
- /** 很轻的明度往返。默认不动 */
2451
- pulse?: boolean;
2452
- };
2453
- /**
2454
- * 骨架:只画大块,不画细节。
2455
- * 自身对辅助技术隐藏;"正在加载"由外层区域的 `aria-busy="true"` 表达。
2456
- */
2457
- export declare function Skeleton({ variant, lines, pulse, className, ...props }: SkeletonProps): import("react").JSX.Element;
2458
- //#endregion
2459
- //#region src/components/slider/Slider.d.ts
2460
- type SliderSize = "sm" | "md";
2461
- type SliderMark = {
2462
- value: number;
2463
- /** 刻度下面的标注;不传就只有一条短线 */
2464
- label?: ReactNode;
2465
- };
2466
- type SliderCommonProps = {
2467
- /** 下限,默认 0 */
2468
- min?: number;
2469
- /** 上限,默认 100 */
2470
- max?: number;
2471
- /** 一步走多少,默认 1 */
2472
- step?: number;
2473
- /** `PageUp` / `PageDown`、`Shift` + 方向键一次走多少,默认 10 */
2474
- largeStep?: number;
2475
- /** 整个控件占 32 / 40px 高,默认 `md` */
2476
- size?: SliderSize;
2477
- /** 在右侧显示当前值 */
2478
- showValue?: boolean;
2479
- /** 数值怎么写:`Intl.NumberFormat` 的选项(百分比、单位、小数位) */
2480
- format?: Intl.NumberFormatOptions;
2481
- /** 轨道下面的刻度。只是标注,不改变步长 */
2482
- marks?: readonly SliderMark[];
2483
- /** 表单字段名:值随表单提交 */
2484
- name?: string;
2485
- disabled?: boolean;
2486
- /** 不在 `Field` 里时必须给 */
2487
- "aria-label"?: string;
2488
- "aria-describedby"?: string;
2489
- className?: string;
2490
- };
2491
- type SliderSingleProps = SliderCommonProps & {
2492
- value?: number;
2493
- defaultValue?: number;
2494
- /** 拖动的每一步都触发 */
2495
- onValueChange?: (value: number) => void;
2496
- /** 松手(或一次按键)之后触发:要发请求的事放这里 */
2497
- onValueCommitted?: (value: number) => void;
2498
- thumbLabels?: never;
2499
- minStepsBetweenValues?: never;
2500
- };
2501
- type SliderRangeProps = SliderCommonProps & {
2502
- /** 传两个数就是范围滑块 */
2503
- value?: readonly [number, number];
2504
- defaultValue?: readonly [number, number];
2505
- onValueChange?: (value: [number, number]) => void;
2506
- onValueCommitted?: (value: [number, number]) => void;
2507
- /** 两个滑块各自的名称,默认"最小值""最大值" */
2508
- thumbLabels?: readonly [string, string];
2509
- /** 两个滑块之间至少隔几步,默认 0 */
2510
- minStepsBetweenValues?: number;
2511
- };
2512
- type SliderProps = SliderSingleProps | SliderRangeProps;
2513
- /**
2514
- * 滑块:在一个范围里拖着选一个数。要的是确切的数时用 `Stepper`。
2515
- * 每个滑块都要有名称:放进 `Field`,或者自己传 `aria-label`。
2516
- */
2517
- export declare function Slider(props: SliderProps): import("react").JSX.Element;
2518
- //#endregion
2519
- //#region src/components/sparkline/Sparkline.d.ts
2520
- type SparklineVariant = "area" | "line";
2521
- type SparklineTone = "info" | "danger" | "accent" | "neutral";
2522
- type SparklineProps = Omit<ComponentProps<"svg">, "children"> & {
2523
- /** 一串数值,按先后顺序。少于两个点时什么都不画 */
2524
- data: readonly number[];
2525
- /** `area` 一块填充的面积,默认;`line` 一条折线 */
2526
- variant?: SparklineVariant;
2527
- /**
2528
- * - `info` 量值图表的蓝,默认;
2529
- * - `danger` 超支、异常的红;
2530
- * - `accent` 强调色;
2531
- * - `neutral` 次要的墨色。
2532
- */
2533
- tone?: SparklineTone;
2534
- /** 纵向范围的下端。默认从数据的最小值往下再留四分之一,让最低的那一点也有厚度 */
2535
- min?: number;
2536
- /** 纵向范围的上端。默认是数据的最大值 */
2537
- max?: number;
2538
- /** 传了它就是一张有名称的图;不传是纯装饰,对读屏隐藏 */
2539
- label?: string;
2540
- /** 进入视口时从左画出一次。默认开启 */
2541
- animate?: boolean;
2542
- };
2543
- /**
2544
- * 行内的小型图表:没有坐标轴、网格和图例,只有一块面积或一条折线。
2545
- * 撑满给它的盒子(默认高 32px、通宽)。它旁边应该有数字——图只是帮着看趋势。
2546
- */
2547
- export declare function Sparkline({ data, variant, tone, min, max, label, animate, className, ref, ...props }: SparklineProps): import("react").JSX.Element;
2548
- //#endregion
2549
- //#region src/components/spinner/Spinner.d.ts
2550
- type SpinnerSize = "sm" | "md";
2551
- type SpinnerProps = Omit<ComponentProps<"span">, "children"> & {
2552
- /** 12px 或 16px。要别的尺寸用 `className` 给 `size-*` */
2553
- size?: SpinnerSize;
2554
- /**
2555
- * 读屏听到的话,默认"加载中"。
2556
- * 旁边已经有文字说明正在加载时传 `null`:这时它只是装饰,对读屏隐藏。
2557
- */
2558
- label?: ReactNode;
2559
- };
2560
- /**
2561
- * 行内加载指示:一个匀速旋转的小方块,颜色继承文字。
2562
- * 圆环形的用 `<ProgressRing size={16} />`;整块内容加载用 `Skeleton`。
2563
- */
2564
- export declare function Spinner({ size, label, className, ...props }: SpinnerProps): import("react").JSX.Element;
2565
- //#endregion
2566
- //#region src/components/splash-screen/SplashScreen.d.ts
2567
- type SplashScreenProps = Omit<ComponentProps<"div">, "children"> & {
2568
- /** 真实进度,0 – 100。不知道就不传:显示不确定进度,不显示数字 */
2569
- value?: number;
2570
- /** 标志:自己的图或 SVG。放在画面偏右的一个盒子里,竖排时居中 */
2571
- logo?: ReactNode;
2572
- /** 标志下面的一行标语 */
2573
- tagline?: ReactNode;
2574
- /** 标语上方那组微标里的微文字。纯氛围,对读屏隐藏 */
2575
- caption?: ReactNode;
2576
- /**
2577
- * 换掉标语上方的整组微标。不传是代码画的一组(小方框、`caption`、方点阵,旁边一枚三角标),
2578
- * 传 `null` 是不要
2579
- */
2580
- decor?: ReactNode;
2581
- /** 读数下面的状态字。默认 `LOADING` */
2582
- status?: ReactNode;
2583
- /** 底图:铺满整块,随进度从模糊变清晰 */
2584
- backdrop?: ReactNode;
2585
- /** 置为 `false` 开始退场:走满、铺满、淡出,结束后卸载。默认 `true` */
2586
- open?: boolean;
2587
- /** 铺满视口并锁住页面(默认);关掉则铺满所在的定位容器 */
2588
- fullscreen?: boolean;
2589
- /** 进度条的可访问名称 */
2590
- label?: string;
2591
- /** 开始淡出、页面露出来的那一刻触发:页面自己的入场从这里起 */
2592
- onReveal?: () => void;
2593
- /** 淡出结束、已经卸载之后触发 */
2594
- onExited?: () => void;
2595
- };
2596
- /**
2597
- * 开屏页:照官网首次载入的那一页排的。近黑底,一根贴边的黄色进度条,读数跟着条的末端走;
2598
- * 画面偏右是标志,下面一组微标、一条分隔线和一行标语。就绪后黄色铺满整屏,再整层淡出。
2599
- *
2600
- * 标志和底图是插槽,库里不带任何图。横竖看它所在的那一块自己的宽高比,不看视口;
2601
- * 尺寸跟着那一块的宽度等比缩放,插槽里的东西可以用 `--ef-splash-unit` 跟着缩。
2602
- *
2603
- * 只要一块盖住整页的等待、不要这些排场,用 `Loader`。
2604
- */
2605
- export declare function SplashScreen({ value, logo, tagline, caption, decor, status, backdrop, open, fullscreen, label, onReveal, onExited, onKeyDown, className, style, ref, ...props }: SplashScreenProps): import("react").JSX.Element | null;
2606
- //#endregion
2607
- //#region src/components/stat/Stat.d.ts
2608
- type StatSize = "md" | "lg";
2609
- type StatTrend = "up" | "down";
2610
- type StatProps = Omit<ComponentProps<"div">, "children"> & {
2611
- /** 微标,说明这是什么数。前面的 `//` 由组件加,不用自己写 */
2612
- label: ReactNode;
2613
- /** 主角:一个需要被一眼看到的数字 */
2614
- value: ReactNode;
2615
- /** 单位,小一号、与数字基线对齐 */
2616
- unit?: ReactNode;
2617
- /** 增量,连同正负号一起传,如 `+6%`、`−2%` */
2618
- delta?: ReactNode;
2619
- /** `up` 渲染为增益签,默认;`down` 渲染为危险色文字 */
2620
- trend?: StatTrend;
2621
- /** 并排几个时,让最重要的那个用 `lg` */
2622
- size?: StatSize;
2623
- };
2624
- /** 统计块:不装进卡片,只用左缘一条墨色竖线。 */
2625
- export declare function Stat({ label, value, unit, delta, trend, size, className, ...props }: StatProps): import("react").JSX.Element;
2626
- //#endregion
2627
- //#region src/components/stepper/Stepper.d.ts
2628
- type StepperSize = "sm" | "md" | "lg";
2629
- type StepperProps = Omit<ComponentProps<"input">, "type" | "size" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step"> & {
2630
- /** 受控的当前值 */
2631
- value?: number;
2632
- /** 非受控时的初始值,缺省取 `min`,没有 `min` 则为 0 */
2633
- defaultValue?: number;
2634
- onValueChange?: (value: number) => void;
2635
- min?: number;
2636
- max?: number;
2637
- /** 每一步的增量,默认 1;可以是小数 */
2638
- step?: number;
2639
- /** 32 / 40 / 56px 高 */
2640
- size?: StepperSize;
2641
- /** 错误态:数字下方出现一条红线。放在 `Field` 里时跟随它的 `error` */
2642
- invalid?: boolean;
2643
- /** 两端按钮的可访问名称 */
2644
- decrementLabel?: string;
2645
- incrementLabel?: string;
2646
- };
2647
- /**
2648
- * 步进器:`−` 钮 + 数字 + `+` 钮,三段紧贴。数字可以直接输入,
2649
- * 也可以用 ↑ ↓(一步)、PageUp / PageDown(十步)、Home / End(上下限)。
2650
- * `className` 给外框,其余属性与 `ref` 给中间的 `<input>`。
2651
- */
2652
- export declare function Stepper({ value: valueProp, defaultValue, onValueChange, min, max, step, size, invalid: invalidProp, decrementLabel, incrementLabel, id: idProp, disabled: disabledProp, required: requiredProp, readOnly, "aria-describedby": describedByProp, onKeyDown, onBlur, className, ...props }: StepperProps): import("react").JSX.Element;
2653
- //#endregion
2654
- //#region src/components/steps/Steps.d.ts
2655
- type StepsOrientation = "horizontal" | "vertical";
2656
- type StepsSize = "sm" | "md";
2657
- type StepStatus = "done" | "current" | "upcoming";
2658
- /** 读屏听到的状态。未到的步骤不另说 */
2659
- type StepStatusLabels = {
2660
- done: string;
2661
- current: string;
2662
- invalid: string;
2663
- };
2664
- type StepsProps = Omit<ComponentProps<"ol">, "aria-label"> & {
2665
- /** 这是哪件事的步骤,比如"建站流程" */
2666
- "aria-label": string;
2667
- /** 走到了第几步,从 0 起。等于步数时全部是已完成 */
2668
- current: number;
2669
- /**
2670
- * - `horizontal` 横排,默认。所在的容器窄于 28rem 时自动改成竖排;
2671
- * - `vertical` 一直竖排。
2672
- */
2673
- orientation?: StepsOrientation;
2674
- size?: StepsSize;
2675
- /** 换掉读屏听到的那几句状态 */
2676
- statusLabels?: Partial<StepStatusLabels>;
2677
- /** 直接放 `Step` */
2678
- children: ReactNode;
2679
- };
2680
- /**
2681
- * 步骤条:一件事分几步做,一共几步、走到了哪一步。里面只放 `Step`。
2682
- * 每一步的状态由 `current` 和它的位置算出来。
2683
- *
2684
- * `className` 给最外面的那层(它是量宽度的容器),其余属性给里面的 `<ol>`。
2685
- */
2686
- export declare function Steps({ current, orientation, size, statusLabels, className, children, ...props }: StepsProps): import("react").JSX.Element;
2687
- type StepOwnProps = {
2688
- title: ReactNode;
2689
- /** 标题下的说明 */
2690
- description?: ReactNode;
2691
- /** 这一步有东西没填对:节点换成警示图标,读屏多听到一句"有误" */
2692
- invalid?: boolean;
2693
- /** 传了就可以点(回到做过的步骤):标题是链接,点击范围铺满这一步 */
2694
- href?: string;
2695
- target?: string;
2696
- rel?: string;
2697
- /** 用这个元素代替标题里的 `<a>`(路由库的链接组件) */
2698
- render?: LinkRender;
2699
- /** 不是链接、但要能点时用它:标题是按钮 */
2700
- onClick?: MouseEventHandler<HTMLElement>;
2701
- };
2702
- type StepProps = StepOwnProps & Omit<ComponentProps<"li">, keyof StepOwnProps | "children">;
2703
- export declare function Step({ title, description, invalid, href, target, rel, render, onClick, className, ...props }: StepProps): import("react").JSX.Element;
2704
- //#endregion
2705
- //#region src/components/switch/Switch.d.ts
2706
- type DualLabels = {
2707
- offLabel?: undefined;
2708
- onLabel?: undefined;
2709
- } | {
2710
- /** 双标签开关:关闭时的值,写在轨道左半(如 `2D`) */
2711
- offLabel: ReactNode;
2712
- /** 双标签开关:开启时的值,写在轨道右半(如 `3D`) */
2713
- onLabel: ReactNode;
2714
- };
2715
- type SwitchProps = Omit<ComponentProps<"input">, "type" | "size"> & {
2716
- onCheckedChange?: (checked: boolean) => void;
2717
- /** 右侧的文字标签。不传时必须自己给 `aria-label` */
2718
- children?: ReactNode;
2719
- } & DualLabels;
2720
- /**
2721
- * 开关:胶囊轨道 + 圆形旋钮,立即生效的设置用它(需要"保存"才生效的用复选框)。
2722
- * 原生 `<input type="checkbox" role="switch">`,受控用 `checked`、非受控用 `defaultChecked`。
2723
- * `className` 给整行,其余属性与 `ref` 给 `<input>`。
2724
- *
2725
- * 两个值都要显示时(`2D` / `3D`)同时传 `offLabel` 与 `onLabel`:两个值并排写在轨道上,
2726
- * 旋钮盖住当前的那一个。这时名称要写成"开 = 第二个值"的说法,如 `aria-label="三维视图"`。
2727
- */
2728
- export declare function Switch({ onCheckedChange, onChange, offLabel, onLabel, className, children, ...props }: SwitchProps): import("react").JSX.Element;
2729
- //#endregion
2730
- //#region src/components/table/Table.d.ts
2731
- type TableHeaderVariant = "band" | "muted";
2732
- type TableSize = "sm" | "md";
2733
- type TableSortDirection = "ascending" | "descending";
2734
- type TableAlign = "start" | "center" | "end";
2735
- type TableProps = Omit<ComponentProps<"table">, "aria-label"> & {
2736
- /** 表格的名称。横向能滚动时,滚动的那一块也用它 */
2737
- label: string;
2738
- /**
2739
- * 表头的画法:
2740
- * - `band` 反转的标题带(亮色下墨底白字),默认,和面板的标题带是同一个样子。
2741
- * 表头是一个 `data-theme="inverse"` 的局部主题,里面可以照常放复选框;
2742
- * - `muted` 浅灰底墨字,页面上已经有很多深色块时用。
2743
- */
2744
- headerVariant?: TableHeaderVariant;
2745
- /** 行高 36 / 44px,默认 `md` */
2746
- size?: TableSize;
2747
- /** 横向滚动时冻结第一列。列多、窄屏上要滚着看时打开 */
2748
- stickyFirstColumn?: boolean;
2749
- /**
2750
- * 表身在容器里纵向滚动时,表头留在容器的上沿。
2751
- * 容器要有一个高度上限才滚得起来:`className="max-h-96"`
2752
- */
2753
- stickyHeader?: boolean;
2754
- /** 每隔五行加重一条线。行数很多时帮眼睛数行 */
2755
- ruled?: boolean;
2756
- /** 给外面那层横向滚动的容器;其余属性给 `<table>` */
2757
- className?: string;
2758
- };
2759
- /**
2760
- * 表格:原生 `<table>` 套样式。里面放 `TableHead`、`TableBody`、`TableRow`、
2761
- * `TableHeaderCell`、`TableCell`。
2762
- *
2763
- * 放不下时在自己的容器里横向滚动,不撑破页面;给容器一个高度上限,它也能纵向滚动。整行不可点:
2764
- * 要进详情把名称写成链接,要勾选在第一列放 `Checkbox`,要展开明细给行传 `detail`、
2765
- * 在格子里放 `TableExpander`。
2766
- */
2767
- export declare function Table({ label, headerVariant, size, stickyFirstColumn, stickyHeader, ruled, className, ...props }: TableProps): import("react").JSX.Element;
2768
- type TableHeadProps = ComponentProps<"thead">;
2769
- export declare function TableHead(props: TableHeadProps): import("react").JSX.Element;
2770
- type TableBodyProps = ComponentProps<"tbody">;
2771
- export declare function TableBody({ className, ...props }: TableBodyProps): import("react").JSX.Element;
2772
- type TableRowProps = ComponentProps<"tr"> & {
2773
- /** 选中:浅灰底 + 左缘黄条,输出 `aria-selected`。只用在表身的行上 */
2774
- selected?: boolean;
2775
- /**
2776
- * 这一行的明细。传了这一行就能展开:展开时它出现在这一行下面,通栏。
2777
- * 展开钮自己放:在某一格里放一个 `TableExpander`
2778
- */
2779
- detail?: ReactNode;
2780
- /** 受控的展开状态 */
2781
- expanded?: boolean;
2782
- /** 非受控时一开始是不是展开的 */
2783
- defaultExpanded?: boolean;
2784
- onExpandedChange?: (expanded: boolean) => void;
2785
- };
2786
- export declare function TableRow({ selected, detail, expanded: expandedProp, defaultExpanded, onExpandedChange, className, ref, children, ...props }: TableRowProps): import("react").JSX.Element;
2787
- type TableExpanderProps = Omit<ComponentProps<"button">, "aria-expanded" | "aria-controls" | "children">;
2788
- /**
2789
- * 展开钮:放在能展开的行(传了 `detail` 的 `TableRow`)的某一格里,通常在名称前面。
2790
- * 一张表里有很多个,名称写成"TR-2041 的明细"读屏才分得清。放在不能展开的行里不渲染。
2791
- */
2792
- export declare function TableExpander({ "aria-label": label, type, className, onClick, ...props }: TableExpanderProps): import("react").JSX.Element | null;
2793
- type TableHeaderCellProps = Omit<ComponentProps<"th">, "align"> & {
2794
- /** 数字列:右对齐 */
2795
- numeric?: boolean;
2796
- /** 对齐,默认靠左;`numeric` 时默认靠右 */
2797
- align?: TableAlign;
2798
- /** 这一列现在的排序方向。没按它排就不传 */
2799
- sort?: TableSortDirection | null;
2800
- /**
2801
- * 传了这一列就能排序:列名变成一个按钮,右侧一个小三角。
2802
- * 拿到的是点了之后该换成的方向——没排或降序时是升序,升序时是降序
2803
- */
2804
- onSort?: (next: TableSortDirection) => void;
2805
- };
2806
- /** 列头:`<th scope="col">`。 */
2807
- export declare function TableHeaderCell({ numeric, align, sort, onSort, className, children, ...props }: TableHeaderCellProps): import("react").JSX.Element;
2808
- type TableCellProps = Omit<ComponentProps<"td">, "align"> & {
2809
- /** 数字:右对齐、等宽 */
2810
- numeric?: boolean;
2811
- /** 对齐,默认靠左;`numeric` 时默认靠右 */
2812
- align?: TableAlign;
2813
- /** 这一格是这一行的名称:渲染成 `<th scope="row">` */
2814
- rowHeader?: boolean;
2815
- /**
2816
- * 行内操作:鼠标悬停或键盘聚焦到这一行时才显示。
2817
- * 触屏上没有悬停,所以常显
2818
- */
2819
- reveal?: boolean;
2820
- };
2821
- /** 单元格:`<td>`;`rowHeader` 时是 `<th scope="row">`。 */
2822
- export declare function TableCell({ numeric, align, rowHeader, reveal, className, children, ...props }: TableCellProps): import("react").JSX.Element;
2823
- //#endregion
2824
- //#region src/components/tabs/Tabs.d.ts
2825
- type TabsVariant = "block" | "capsule" | "wedge";
2826
- type TabsSize = "sm" | "md";
2827
- type TabsOwnProps = {
2828
- /**
2829
- * - `block` 直角的格子,之间是不通顶的竖线;激活时文字让位给箭头。默认;
2830
- * - `capsule` 横向胶囊,选中反转为墨底。筛选、类目切换;
2831
- * - `wedge` 选中项是黄底墨字、右侧斜切的楔形。游戏风格界面的一级页签。
2832
- */
2833
- variant?: TabsVariant;
2834
- size?: TabsSize;
2835
- onValueChange?: (value: string) => void;
2836
- } & ({
2837
- value: string;
2838
- defaultValue?: never;
2839
- } | {
2840
- defaultValue: string;
2841
- value?: never;
2842
- });
2843
- type TabsProps = Omit<ComponentProps<"div">, keyof TabsOwnProps> & TabsOwnProps;
2844
- export declare function Tabs({ value, defaultValue, onValueChange, variant, size, ...props }: TabsProps): import("react").JSX.Element;
2845
- type TabListProps = ComponentProps<"div">;
2846
- export declare function TabList({ className, onKeyDown, ref, ...props }: TabListProps): import("react").JSX.Element;
2847
- type TabProps = Omit<ComponentProps<"button">, "value"> & {
2848
- value: string;
2849
- };
2850
- export declare function Tab({ value, disabled, className, children, onClick, ...props }: TabProps): import("react").JSX.Element;
2851
- type TabPanelProps = ComponentProps<"div"> & {
2852
- value: string;
2853
- };
2854
- /**
2855
- * 未选中的面板保留一个隐藏的空容器,让页签的 `aria-controls` 始终有所指。
2856
- * 切过来的面板淡入;一开始就选中的那一块不动。
2857
- */
2858
- export declare function TabPanel({ value, className, children, ...props }: TabPanelProps): import("react").JSX.Element;
2859
- //#endregion
2860
- //#region src/components/tag/Tag.d.ts
2861
- type TagVariant = "solid" | "outline" | "inverse" | "muted" | "accent" | "gain";
2862
- type TagSize = "sm" | "md";
2863
- type TagProps = ComponentProps<"span"> & {
2864
- /**
2865
- * 直角标签:归档性的、不变的信息。
2866
- *
2867
- * - `solid` 深灰底白字、2px 微圆角,媒体类型(`PV`、`OST`),默认;
2868
- * - `outline` 白底细边,活动类型、分类;
2869
- * - `inverse` 墨底白字,日期块、名值对里的"名";
2870
- * - `muted` 浅灰底墨字,名值对里的"值";
2871
- * - `accent` 黄底墨字,状态签(`NEW`、推荐);
2872
- * - `gain` 荧光黄绿底墨字,增益签(`+6%`)。
2873
- */
2874
- variant?: TagVariant;
2875
- size?: TagSize;
2876
- /** 等宽数字,用于日期、编号 */
2877
- numeric?: boolean;
2878
- /** 左上角加一个小红角,标出一组日期块里需要留意的那一个 */
2879
- marked?: boolean;
2880
- };
2881
- export declare function Tag({ variant, size, numeric, marked, className, ...props }: TagProps): import("react").JSX.Element;
2882
- //#endregion
2883
- //#region src/components/tag/TagPair.d.ts
2884
- type TagPairProps = Omit<ComponentProps<"span">, "children"> & {
2885
- /** 属性名,如"阵营" */
2886
- name: ReactNode;
2887
- /** 属性值 */
2888
- value: ReactNode;
2889
- /** 一组里需要突出的那一项:"名"换成黄底 */
2890
- emphasis?: boolean;
2891
- size?: TagSize;
2892
- };
2893
- /** 名值对:两半紧贴,中间没有缝也没有分隔线。多组之间由使用方留 8px。 */
2894
- export declare function TagPair({ name, value, emphasis, size, className, ...props }: TagPairProps): import("react").JSX.Element;
2895
- //#endregion
2896
- //#region src/components/tag-input/TagInput.d.ts
2897
- type TagInputSize = ControlSize;
2898
- type TagInputVariant = ControlVariant;
2899
- /** 没加成的原因:已经有了、到了上限、没过 `validate` */
2900
- type TagInputRejectReason = "duplicate" | "max" | "invalid";
2901
- /** 读屏听到的那几句话 */
2902
- type TagInputLabels = {
2903
- /** 框里现在有哪些,作为输入框的补充说明 */
2904
- summary: (tags: readonly string[]) => string;
2905
- added: (tag: string) => string;
2906
- removed: (tag: string) => string;
2907
- duplicate: (tag: string) => string;
2908
- max: (max: number) => string;
2909
- };
2910
- type OwnProps = {
2911
- /** 受控的值 */
2912
- value?: string[];
2913
- /** 非受控时的初始值 */
2914
- defaultValue?: string[];
2915
- onValueChange?: (value: string[]) => void;
2916
- /** 表单字段名:每个标签一个同名的隐藏字段 */
2917
- name?: string;
2918
- /** 最多几个。传了右端会出现一个计数 */
2919
- max?: number;
2920
- /**
2921
- * 这个词能不能加。返回一句话就是不让加,这句话会交给 `onReject`;
2922
- * 返回空的就是可以
2923
- */
2924
- validate?: (text: string, current: readonly string[]) => string | null | undefined | false;
2925
- /** 打出这些字符就提交。默认是半角和全角的逗号;回车总是提交 */
2926
- separators?: readonly string[];
2927
- /** 离开输入框时把没提交的字也加进去,默认开 */
2928
- commitOnBlur?: boolean;
2929
- /** 一个词没加成:已经有了、到了上限、没过 `validate`(这时第三个参数是那句话) */
2930
- onReject?: (text: string, reason: TagInputRejectReason, message?: string) => void;
2931
- /**
2932
- * 外框的画法,和输入框相同:
2933
- * - `sunken` 凹陷的底 + 一条底边线,默认;
2934
- * - `outline` 四边描边,放在凹陷底色的区域里时用。
2935
- */
2936
- variant?: TagInputVariant;
2937
- /** 32 / 40 / 56px:这是最小高度,标签多了会换行、外框长高 */
2938
- size?: TagInputSize;
2939
- /** 错误态。放在 `Field` 里时跟随它的 `error` */
2940
- invalid?: boolean;
2941
- /** 小块上删除叉的可访问名称,拿到的是这个标签。默认"移除某某" */
2942
- removeLabel?: (tag: string) => string;
2943
- /** 读屏听到的那几句话,换哪句传哪句 */
2944
- labels?: Partial<TagInputLabels>;
2945
- /** 给外框 */
2946
- className?: string;
2947
- };
2948
- type TagInputProps = OwnProps & Omit<ComponentProps<"input">, keyof OwnProps | "defaultValue" | "max" | "size" | "type" | "value">;
2949
- /**
2950
- * 标签输入:自己打出来的一串短词。回车或者打出分隔符就加一个,粘贴一串会拆开。
2951
- * 要从现成的选项里挑,用 `Combobox` 的 `multiple`。
2952
- *
2953
- * `className` 给外框,其余属性与 `ref` 给里面的 `<input>`。
2954
- * 每个标签输入都要有标签:放进 `Field`,或者自己传 `aria-label`。
2955
- */
2956
- export declare function TagInput({ value, defaultValue, onValueChange, name, max, validate, separators, commitOnBlur, onReject, variant, size, invalid: invalidProp, removeLabel, labels: labelsProp, id: idProp, disabled: disabledProp, required: requiredProp, readOnly, placeholder, "aria-describedby": describedByProp, className, ref, onKeyDown, onBlur, onPaste, onCompositionEnd, ...props }: TagInputProps): import("react").JSX.Element;
2957
- //#endregion
2958
- //#region src/components/term/Term.d.ts
2959
- type TermTone = "accent" | "info" | "success" | "warning" | "danger";
2960
- type TermProps = ComponentProps<"strong"> & {
2961
- /**
2962
- * 颜色代表的含义。同一个产品里"颜色 → 含义"的对应必须唯一,并写成一张表。
2963
- * 默认 `accent`:数值与一般的强调。
2964
- */
2965
- tone?: TermTone;
2966
- /** 词前的小图标,跟着文字的大小与颜色走 */
2967
- icon?: ReactNode;
2968
- };
2969
- /**
2970
- * 正文里着色的机制词(技能、属性、数值)。着色的同时加粗,不只靠颜色。
2971
- * 用在页面表面上;反转块上这些颜色不够亮,不要用。
2972
- */
2973
- export declare function Term({ tone, icon, className, children, ...props }: TermProps): import("react").JSX.Element;
2974
- //#endregion
2975
- //#region src/components/textarea/Textarea.d.ts
2976
- type TextareaProps = ComponentProps<"textarea"> & {
2977
- /** `sunken` 凹陷底 + 底边线(默认),或 `outline` 四边描边 */
2978
- variant?: ControlVariant;
2979
- /** 错误态:底边线变红。放在 `Field` 里时跟随它的 `error` */
2980
- invalid?: boolean;
2981
- /** 在右下角显示字数;有 `maxLength` 时显示成 `12 / 200` */
2982
- showCount?: boolean;
2983
- };
2984
- /**
2985
- * 多行文本,最少三行。`className` 给外框,其余属性与 `ref` 给里面的 `<textarea>`。
2986
- */
2987
- export declare function Textarea({ variant, invalid: invalidProp, showCount, id: idProp, disabled: disabledProp, required: requiredProp, readOnly, "aria-describedby": describedByProp, rows, maxLength, value, defaultValue, onChange, className, ...props }: TextareaProps): import("react").JSX.Element;
2988
- //#endregion
2989
- //#region src/components/texture/Texture.d.ts
2990
- type TextureVariant = "dots" | "grid" | "contour";
2991
- type TextureProps = Omit<ComponentProps<"div">, "children"> & {
2992
- /**
2993
- * - `dots` 点阵,印刷网点:弹窗、卡片、面板的底,默认;
2994
- * - `grid` 工程网格,图纸与坐标:图解、工作台的背景;
2995
- * - `contour` 等高线,测绘与地形:偏在一角,被容器的边缘截断。
2996
- */
2997
- variant?: TextureVariant;
2998
- };
2999
- /**
3000
- * 铺在内容之下的一层底纹,纯装饰。默认铺满最近的定位祖先:
3001
- * 父容器要自己写 `relative`,需要裁切时再加 `overflow-clip`。
3002
- * 一个视口选一种;文字下面垫一层实色,别让底纹穿过正文。
3003
- */
3004
- export declare function Texture({ variant, className, ...props }: TextureProps): import("react").JSX.Element;
3005
- //#endregion
3006
- //#region src/components/tick-ring/TickRing.d.ts
3007
- type TickRingProps = Omit<ComponentProps<"div">, "children"> & {
3008
- /** 直径:数字是像素,也可以传 `"100%"` 这类长度(高度跟着宽度走)。默认 240 */
3009
- size?: number | string;
3010
- /** 外圈刻度的根数,默认 40 */
3011
- ticks?: number;
3012
- /** 整体缓慢匀速旋转(60 秒一圈) */
3013
- spin?: boolean;
3014
- /** 被圆环围住的主体,居中 */
3015
- children?: ReactNode;
3016
- };
3017
- /**
3018
- * 刻度圆环:细内环 + 一圈刻度 + 两段不对称的粗弧,围住一个主体(模型、头像、地图焦点)。
3019
- * 纯装饰,只用在展示性的画面上。颜色继承文字:浅色底上是墨与灰,
3020
- * 压在深色画面上时给它加 `data-theme="dark"`。
3021
- *
3022
- * 它不承载数据;表示进度用 `ProgressRing`。
3023
- */
3024
- export declare function TickRing({ size, ticks, spin, className, style, children, ...props }: TickRingProps): import("react").JSX.Element;
3025
- //#endregion
3026
- //#region src/components/timeline/Timeline.d.ts
3027
- type TimelineProps = ComponentProps<"ol">;
3028
- /** 竖向时间线的容器,里面只放 `TimelineItem`,按时间顺序排。 */
3029
- export declare function Timeline({ className, ...props }: TimelineProps): import("react").JSX.Element;
3030
- type TimelineStatus = "past" | "current" | "upcoming";
3031
- type TimelineItemProps = Omit<ComponentProps<"li">, "title"> & {
3032
- /**
3033
- * - `past` 已过:实心菱形,默认;
3034
- * - `current` 当前:黄色菱形,标题加粗;
3035
- * - `upcoming` 未到:空心菱形,文字降为次级色。
3036
- */
3037
- status?: TimelineStatus;
3038
- /** 节点旁的日期或时间,等宽小字 */
3039
- date?: ReactNode;
3040
- title: ReactNode;
3041
- /** 标题下的说明 */
3042
- children?: ReactNode;
3043
- };
3044
- export declare function TimelineItem({ status, date, title, className, children, ...props }: TimelineItemProps): import("react").JSX.Element;
3045
- //#endregion
3046
- //#region src/components/toast/Toast.d.ts
3047
- type ToastTone = "neutral" | "info" | "success" | "warning" | "danger";
3048
- type ToastPlacement = "bottom" | "center";
3049
- type ToastAction = {
3050
- label: ReactNode;
3051
- /** 点了之后这条提示随即关掉 */
3052
- onClick: () => void;
3053
- };
3054
- type ToastOptions = {
3055
- /** 一句话 */
3056
- message: ReactNode;
3057
- /** 文字前的小图形,区分成功与失败。底色不变。默认 `neutral`:没有图形 */
3058
- tone?: ToastTone;
3059
- /** 一个操作,比如"撤销"。带操作的提示多停一会儿,并出现关闭图标 */
3060
- action?: ToastAction;
3061
- /** 停留多久,毫秒。`0` 是一直留着,直到被关掉或被下一条替换 */
3062
- duration?: number;
3063
- };
3064
- type ToastApi = {
3065
- /** 弹出一条,返回它的 id。上一条还在的话会被它替换 */
3066
- (input: ReactNode | ToastOptions): string;
3067
- /** 关掉指定的一条;不传 id 就关掉当前这条 */
3068
- dismiss: (id?: string) => void;
3069
- };
3070
- /** 弹出轻提示。要在 `ToastProvider` 里面用。 */
3071
- export declare function useToast(): ToastApi;
3072
- type ToastProviderProps = {
3073
- /** 出现在哪:视口底部居中(默认),或者视口正中(官网的做法) */
3074
- placement?: ToastPlacement;
3075
- /** 默认停留多久,毫秒。规范是 2 – 4 秒 */
3076
- duration?: number;
3077
- /** 提示区域的可访问名称(按 `F6` 可以把焦点移进来) */
3078
- label?: string;
3079
- /** 关闭图标的可访问名称 */
3080
- closeLabel?: string;
3081
- children: ReactNode;
3082
- };
3083
- /**
3084
- * 轻提示的容器,包在应用的最外层。里面的任何地方用 `useToast()` 弹出。
3085
- * 重要的、需要用户处理的信息不要用轻提示,用提示条或弹窗。
3086
- */
3087
- export declare function ToastProvider({ placement, duration, label, closeLabel, children }: ToastProviderProps): import("react").JSX.Element;
3088
- //#endregion
3089
- //#region src/components/toc/Toc.d.ts
3090
- type TocLevel = 1 | 2 | 3;
3091
- type TocOwnProps = {
3092
- /** 列表上面的一行小标。有它时目录以它命名 */
3093
- title?: ReactNode;
3094
- /**
3095
- * 视口上沿往下让多少像素才算"到了"。页面有吸顶的页头时传页头的高度,
3096
- * 并给各节的标题加同样大小的 `scroll-mt-*`
3097
- */
3098
- offset?: number;
3099
- /** 内容在哪个滚动容器里。不传就是整个页面 */
3100
- target?: RefObject<HTMLElement | null>;
3101
- /** 当前的小节变了:拿到它的 `id`,一节都还没到时是 `null` */
3102
- onActiveChange?: (section: string | null) => void;
3103
- /** `TocItem` */
3104
- children: ReactNode;
3105
- };
3106
- type TocProps = TocOwnProps & Omit<ComponentProps<"nav">, keyof TocOwnProps>;
3107
- /**
3108
- * 页内目录:这一页有哪几节、现在看到了哪一节。里面放 `TocItem`。
3109
- *
3110
- * 位置由使用方给,通常是 `className="sticky top-6"`。点一项仍然是点一个锚点链接——
3111
- * 地址、后退、`scroll-mt` 都是浏览器原生的那一套;它只让这一次跳转滚得平滑
3112
- * (系统开了"减少动态效果"时照旧直接跳)。
3113
- */
3114
- export declare function Toc({ title, offset, target, onActiveChange, "aria-label": ariaLabel, className, ref, children, ...props }: TocProps): import("react").JSX.Element;
3115
- type TocItemOwnProps = {
3116
- /** `#小节的 id`。小节就是按 `#` 后面这一段找的 */
3117
- href?: string;
3118
- /** 小节的 `id`。地址在 `render` 那个元素手里时用它 */
3119
- section?: string;
3120
- /** 第几级,只影响缩进。默认 1 */
3121
- level?: TocLevel;
3122
- /** 用这个元素代替 `<a>`(路由库的链接组件) */
3123
- render?: LinkRender;
3124
- onClick?: (event: MouseEvent<HTMLElement>) => void;
3125
- children: ReactNode;
3126
- };
3127
- type TocItemProps = TocItemOwnProps & Omit<ComponentProps<"li">, keyof TocItemOwnProps>;
3128
- /** 目录里的一项:一个指向小节的锚点链接。 */
3129
- export declare function TocItem({ href, section, level, render, onClick, children, ...props }: TocItemProps): import("react").JSX.Element;
3130
- //#endregion
3131
- //#region src/components/toolbar/Toolbar.d.ts
3132
- type ToolbarSize = "sm" | "md";
3133
- type ToolbarVariant = "sunken" | "outline";
3134
- type ToolbarOrientation = "horizontal" | "vertical";
3135
- type ToolbarProps = Omit<ComponentProps<"div">, "aria-label" | "style"> & {
3136
- /** 这条工具栏管的是什么:"表格工具" */
3137
- "aria-label": string;
3138
- /** 带子高 32 / 40px(里面的钮 28 / 36px),默认 `md`。触屏上用 `md` */
3139
- size?: ToolbarSize;
3140
- /**
3141
- * - `sunken` 凹陷的底,默认;
3142
- * - `outline` 四边描边,放在凹陷底色的区域里时用。
3143
- */
3144
- variant?: ToolbarVariant;
3145
- /** 竖排时方向键换成上下 */
3146
- orientation?: ToolbarOrientation;
3147
- /** 整条禁用 */
3148
- disabled?: boolean;
3149
- };
3150
- /**
3151
- * 工具栏:一排作用于同一个对象的小工具,收在一条带子里。整条只占一个 Tab 停靠点,
3152
- * 方向键在各项之间走。里面放 `ToolbarButton`、`ToolbarToggle`、`ToolbarToggleGroup`、
3153
- * `ToolbarGroup`、`ToolbarSeparator`。
3154
- *
3155
- * 不在里面放输入框:左右方向键在输入框里是移光标。
3156
- */
3157
- export declare function Toolbar({ size, variant, orientation, disabled, className, onKeyDown, ...props }: ToolbarProps): import("react").JSX.Element;
3158
- /** 有字的钮名称就是字;只有图标的必须另给名称 */
3159
- type ItemContentProps = {
3160
- children: ReactNode;
3161
- "aria-label"?: string;
3162
- } | {
3163
- children?: undefined;
3164
- "aria-label": string;
3165
- };
3166
- type ButtonOwnProps = {
3167
- /** 图标,在文字左边 */
3168
- icon?: ReactNode;
3169
- disabled?: boolean;
3170
- /** 传了就渲染成链接 */
3171
- href?: string;
3172
- target?: string;
3173
- rel?: string;
3174
- /** 用这个元素代替 `<a>`(路由库的链接组件)。传了就按链接处理 */
3175
- render?: LinkRender;
3176
- onClick?: (event: MouseEvent<HTMLElement>) => void;
3177
- };
3178
- type ToolbarButtonProps = ButtonOwnProps & ItemContentProps & Omit<ComponentProps<"button">, keyof ButtonOwnProps | "children" | "aria-label" | "style">;
3179
- /**
3180
- * 工具栏里的一个钮。只有图标时是方的,必须有 `aria-label`。
3181
- * 可以交给 `Menu` / `Popover` 的 `trigger`,也可以用 `Tooltip` 包住。
3182
- */
3183
- export declare function ToolbarButton({ icon, disabled, href, target, rel, render, onClick, type, className, children, ...props }: ToolbarButtonProps): import("react").JSX.Element;
3184
- type ToggleOwnProps = {
3185
- /** 图标,在文字左边 */
3186
- icon?: ReactNode;
3187
- /** 受控的按下状态。放在 `ToolbarToggleGroup` 里时不用它,用 `value` */
3188
- pressed?: boolean;
3189
- /** 非受控时一开始是不是按下的 */
3190
- defaultPressed?: boolean;
3191
- onPressedChange?: (pressed: boolean) => void;
3192
- /** 在 `ToolbarToggleGroup` 里是这一个钮的标识:组的 `value` 里放的就是它 */
3193
- value?: string;
3194
- disabled?: boolean;
3195
- };
3196
- type ToolbarToggleProps = ToggleOwnProps & ItemContentProps & Omit<ComponentProps<"button">, keyof ToggleOwnProps | "children" | "aria-label" | "aria-pressed" | "style">;
3197
- /** 开关钮:按下是墨底黄记号。单独用,或者几个放进 `ToolbarToggleGroup`。 */
3198
- export declare function ToolbarToggle({ icon, pressed, defaultPressed, onPressedChange, value, disabled, type, className, children, ...props }: ToolbarToggleProps): import("react").JSX.Element;
3199
- type ToolbarToggleGroupProps = Omit<ComponentProps<"div">, "aria-label" | "defaultValue" | "onChange" | "style"> & {
3200
- /** 这一组管的是什么:"行高" */
3201
- "aria-label": string;
3202
- /** 按下的那几个钮的 `value` */
3203
- value?: string[];
3204
- defaultValue?: string[];
3205
- onValueChange?: (value: string[]) => void;
3206
- /** 可以同时按下几个。默认按下这个,那个就弹起来;一个都不按也可以 */
3207
- multiple?: boolean;
3208
- disabled?: boolean;
3209
- };
3210
- /** 一组开关钮。值是数组:没有按下的就是空的。 */
3211
- export declare function ToolbarToggleGroup({ value, defaultValue, onValueChange, multiple, disabled, className, ...props }: ToolbarToggleGroupProps): import("react").JSX.Element;
3212
- type ToolbarGroupProps = Omit<ComponentProps<"div">, "aria-label" | "style"> & {
3213
- /** 这一组管的是什么 */
3214
- "aria-label": string;
3215
- /** 整组禁用 */
3216
- disabled?: boolean;
3217
- };
3218
- /** 把几个钮在读屏里算成一组。看上去没有区别;要分开看,中间放 `ToolbarSeparator`。 */
3219
- export declare function ToolbarGroup({ className, ...props }: ToolbarGroupProps): import("react").JSX.Element;
3220
- type ToolbarSeparatorProps = Omit<ComponentProps<"div">, "style">;
3221
- /** 分隔:一条短线,方向和工具栏垂直。 */
3222
- export declare function ToolbarSeparator({ className, ...props }: ToolbarSeparatorProps): import("react").JSX.Element;
3223
- //#endregion
3224
- //#region src/components/tooltip/Tooltip.d.ts
3225
- type TooltipSide = "top" | "bottom" | "left" | "right";
3226
- type TooltipAlign = "start" | "center" | "end";
3227
- type TooltipProviderProps = {
3228
- /** 这一组提示统一的延迟,毫秒 */
3229
- delay?: number;
3230
- /** 一个提示消失后多久之内,旁边的提示不用再等延迟,毫秒。默认 400 */
3231
- timeout?: number;
3232
- children: ReactNode;
3233
- };
3234
- /**
3235
- * 可选。包住一组相邻的提示(工具栏):第一个出现之后,移到旁边的不用再等延迟。
3236
- */
3237
- export declare function TooltipProvider({ delay, timeout, children }: TooltipProviderProps): import("react").JSX.Element;
3238
- type TooltipProps = {
3239
- /** 提示的内容:一句话,不放交互元素 */
3240
- content: ReactNode;
3241
- /** 触发元素:一个能接收 `ref` 与事件的元素(按钮、链接) */
3242
- children: ReactElement<Record<string, unknown>>;
3243
- /** 出现在触发元素的哪一侧,放不下时自动翻到对面。默认 `top` */
3244
- side?: TooltipSide;
3245
- align?: TooltipAlign;
3246
- /**
3247
- * 悬停多久后出现,毫秒,默认 300。键盘聚焦时立刻出现;消失不延迟。
3248
- * 在 `TooltipProvider` 里不传时跟随它的 `delay`。
3249
- */
3250
- delay?: number;
3251
- /** 指向触发元素的小三角,默认有。关掉后提示贴着触发元素 */
3252
- arrow?: boolean;
3253
- open?: boolean;
3254
- defaultOpen?: boolean;
3255
- onOpenChange?: (open: boolean) => void;
3256
- /** 不再出现 */
3257
- disabled?: boolean;
3258
- /** 给提示本身 */
3259
- className?: string;
3260
- };
3261
- /**
3262
- * 悬停或键盘聚焦时出现的一句说明。触屏上不出现:必要的信息不要只放在这里。
3263
- *
3264
- * 触发元素要有自己的可访问名称(图标按钮的 `aria-label`)。提示的内容会作为
3265
- * 补充说明关联给读屏;它和 `aria-label` 一字不差时不再重复关联。
3266
- */
3267
- export declare function Tooltip({ content, children, side, align, delay, arrow, open, defaultOpen, onOpenChange, disabled, className }: TooltipProps): import("react").JSX.Element;
3268
- //#endregion
3269
- //#region src/components/top-bar/TopBar.d.ts
3270
- type TopBarProps = ComponentProps<"header"> & {
3271
- /** 最左边的标志。本库不带标志,传你自己的 */
3272
- brand?: ReactNode;
3273
- /** 工具图标钮:几个 `IconButton` */
3274
- tools?: ReactNode;
3275
- /** 主行动:放一个 `NavAction` */
3276
- action?: ReactNode;
3277
- /** 最右边的菜单钮:放一个 `NavMenu`(它自己带着触发按钮) */
3278
- menu?: ReactNode;
3279
- };
3280
- /**
3281
- * 顶栏:窄屏上的主导航。从左到右是标志、空白、工具图标钮、主行动、菜单钮;
3282
- * 栏目本身不排在这一条里,收进 `NavMenu`。
3283
- *
3284
- * 默认 `sticky` 贴在顶上。它只管排版,各格放什么由使用方给。
3285
- */
3286
- export declare function TopBar({ brand, tools, action, menu, className, children, ...props }: TopBarProps): import("react").JSX.Element;
3287
- //#endregion
3288
- //#region src/components/viewfinder/Viewfinder.d.ts
3289
- type ViewfinderSize = "sm" | "md";
3290
- type ViewfinderReadouts = {
3291
- topLeft?: ReactNode;
3292
- topRight?: ReactNode;
3293
- bottomLeft?: ReactNode;
3294
- bottomRight?: ReactNode;
3295
- };
3296
- type ViewfinderProps = ComponentProps<"div"> & {
3297
- /** 取景角的臂长:16px 或 24px */
3298
- size?: ViewfinderSize;
3299
- /** 正中放一个小准星,标出焦点 */
3300
- crosshair?: boolean;
3301
- /**
3302
- * 挂上的时候取景角落位:八段短线各自从角上伸出来,播一次。
3303
- * 默认不动——取景角平时是静态的装饰。要它晚一点再动(等外面那一层先淡入完),
3304
- * 在外层设 `--bracket-delay`
3305
- */
3306
- animate?: boolean;
3307
- /**
3308
- * 四个角上的读数:坐标、比例、版本、时间码。
3309
- * 必须是真实的数据;没有就不放。
3310
- */
3311
- readouts?: ViewfinderReadouts;
3312
- };
3313
- /**
3314
- * 取景角:框住一张图、一片地图区域、一个焦点,标的是"范围",不是选中。
3315
- * 里面放被框住的内容;压在深色画面上时给它加 `data-theme="dark"`。
3316
- *
3317
- * 只用在展示性的画面上,一屏一处。取景角与准星是装饰,读数是真实信息、读屏读得到。
3318
- */
3319
- export declare function Viewfinder({ size, crosshair, animate, readouts, className, children, ...props }: ViewfinderProps): import("react").JSX.Element;
3320
- //#endregion
3321
- //#region src/hooks/useControllableState.d.ts
3322
- type Options$1<T> = {
3323
- /** 传入即为受控 */
3324
- value?: T;
3325
- defaultValue: T;
3326
- onChange?: (value: T) => void;
3327
- };
3328
- /** 合并受控与非受控两种用法;值没有变化时不触发 `onChange`。 */
3329
- export declare function useControllableState<T>({ value, defaultValue, onChange }: Options$1<T>): [T, (next: T) => void];
3330
- //#endregion
3331
- //#region src/hooks/useInView.d.ts
3332
- type Options = {
3333
- /** 为 true 时不观察,始终返回 false */
3334
- disabled?: boolean;
3335
- rootMargin?: string;
3336
- threshold?: number;
3337
- };
3338
- /**
3339
- * 元素第一次进入视口后返回 true,之后不再变回 false——入场动画只播一次。
3340
- */
3341
- export declare function useInView<T extends Element = Element>({ disabled, rootMargin, threshold }?: Options): [RefObject<T | null>, boolean];
3342
- //#endregion
3343
- //#region src/hooks/useReducedMotion.d.ts
3344
- /**
3345
- * 系统开了"减少动态效果"时返回 true,设置变了会跟着变。
3346
- *
3347
- * CSS 的动画和过渡不用它:`theme.css` 末尾的全局规则已经统一降级了。
3348
- * 只有脚本驱动的动效(一帧一帧自己算的)才要看它——那条规则管不到脚本。
3349
- */
3350
- export declare function useReducedMotion(): boolean;
3351
- //#endregion
3352
- //#region src/hooks/useTheme.d.ts
3353
- type Theme = "light" | "dark";
3354
- type ThemePreference = Theme | "system";
3355
- type Snapshot = {
3356
- theme: ThemePreference;
3357
- resolvedTheme: Theme;
3358
- };
3359
- /**
3360
- * 读写 `<html data-theme>`。
3361
- *
3362
- * - `theme`:用户的选择,可以是 `"system"`;
3363
- * - `resolvedTheme`:实际生效的 `"light"` 或 `"dark"`;
3364
- * - `setTheme`:切换并记到 `localStorage`。亮暗变了的时候整页交叉淡化一次
3365
- * (浏览器支持视图过渡、系统没开"减少动态效果"时;否则直接切)。
3366
- */
3367
- export declare function useTheme(): Snapshot & {
3368
- setTheme: (theme: ThemePreference) => void;
3369
- };
3370
- //#endregion
3371
- //#region src/hooks/usePortalScope.d.ts
3372
- type PortalScopeOptions = {
3373
- /**
3374
- * 浮层用和声明处相反的主题:亮色页面上是一块深色,暗色页面上是一块浅色
3375
- * (文字提示)。里面的控件因此也按相反的底色取值。
3376
- */
3377
- invertTheme?: boolean;
3378
- };
3379
- /**
3380
- * 浮层挂在 `<body>` 下,离开了声明它的那棵子树,拿不到局部容器上的
3381
- * `data-theme` / `data-choice`。把 `anchorRef` 交给触发元素、`portalRef`
3382
- * 交给浮层的容器:容器每次挂载时,从触发元素往上找最近的开关,抄到容器上。
3383
- *
3384
- * 最近的就是 `<html>` 时不抄——浮层本来就继承它,抄了反而会在切换主题后留下旧值。
3385
- * 没有触发元素(纯受控的弹窗)时什么都不做,浮层跟随 `<html>`。
3386
- *
3387
- * 最近的是 `data-theme="inverse"`(反转块)时不能照抄:`inverse` 是相对的,
3388
- * 到了 `<body>` 下它反的就成了页面。所以先算出它实际是亮还是暗,抄算出来的那个。
3389
- */
3390
- export declare function usePortalScope({ invertTheme }?: PortalScopeOptions): {
3391
- anchorRef: (node: Element | null) => void;
3392
- portalRef: (portal: HTMLElement | null) => void;
3393
- };
3394
- //#endregion
3395
- //#region src/icons/createIcon.d.ts
3396
- type IconProps = Omit<ComponentProps<"svg">, "children"> & {
3397
- /** 显示尺寸,默认 24。线宽随尺寸等比缩放 */
3398
- size?: number | string;
3399
- };
3400
- /**
3401
- * 按图标规范生成组件:24 网格、2px 描边、平头端点、尖角拐角、颜色继承。
3402
- * 默认对辅助技术隐藏;单独承担含义时由使用方传 `aria-label` 并去掉 `aria-hidden`。
3403
- */
3404
- export declare function createIcon(displayName: string, content: ReactNode): {
3405
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3406
- displayName: string;
3407
- };
3408
- //#endregion
3409
- //#region src/icons/ArrowCorner.d.ts
3410
- /** 斜箭头 ↘:分节引导、"查看详情" */
3411
- export declare const ArrowCorner: {
3412
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3413
- displayName: string;
3414
- };
3415
- //#endregion
3416
- //#region src/icons/ArrowLeft.d.ts
3417
- export declare const ArrowLeft: {
3418
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3419
- displayName: string;
3420
- };
3421
- //#endregion
3422
- //#region src/icons/ArrowRight.d.ts
3423
- export declare const ArrowRight: {
3424
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3425
- displayName: string;
3426
- };
3427
- //#endregion
3428
- //#region src/icons/CalendarIcon.d.ts
3429
- /**
3430
- * 日历:日期字段右侧的记号。
3431
- * 名字带 `Icon` 是因为 `Calendar` 已经是月历控件了
3432
- */
3433
- export declare const CalendarIcon: {
3434
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3435
- displayName: string;
3436
- };
3437
- //#endregion
3438
- //#region src/icons/Check.d.ts
3439
- /** 对勾:已选、已完成 */
3440
- export declare const Check: {
3441
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3442
- displayName: string;
3443
- };
3444
- //#endregion
3445
- //#region src/icons/ChevronDown.d.ts
3446
- export declare const ChevronDown: {
3447
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3448
- displayName: string;
3449
- };
3450
- //#endregion
3451
- //#region src/icons/ChevronLeft.d.ts
3452
- export declare const ChevronLeft: {
3453
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3454
- displayName: string;
3455
- };
3456
- //#endregion
3457
- //#region src/icons/ChevronRight.d.ts
3458
- export declare const ChevronRight: {
3459
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3460
- displayName: string;
3461
- };
3462
- //#endregion
3463
- //#region src/icons/Close.d.ts
3464
- export declare const Close: {
3465
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3466
- displayName: string;
3467
- };
3468
- //#endregion
3469
- //#region src/icons/Crosshair.d.ts
3470
- /** 四个取景角加中心的准星:图鉴里"未获得"的占位符 */
3471
- export declare const Crosshair: {
3472
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3473
- displayName: string;
3474
- };
3475
- //#endregion
3476
- //#region src/icons/Lock.d.ts
3477
- export declare const Lock: {
3478
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3479
- displayName: string;
3480
- };
3481
- //#endregion
3482
- //#region src/icons/Menu.d.ts
3483
- /** 三条横线:打开菜单 */
3484
- export declare const Menu: {
3485
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3486
- displayName: string;
3487
- };
3488
- //#endregion
3489
- //#region src/icons/Minus.d.ts
3490
- /** 短横:半选、减少 */
3491
- export declare const Minus: {
3492
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3493
- displayName: string;
3494
- };
3495
- //#endregion
3496
- //#region src/icons/Plus.d.ts
3497
- export declare const Plus: {
3498
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3499
- displayName: string;
3500
- };
3501
- //#endregion
3502
- //#region src/icons/StatusDanger.d.ts
3503
- /** 菱形:危险、错误 */
3504
- export declare const StatusDanger: {
3505
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3506
- displayName: string;
3507
- };
3508
- //#endregion
3509
- //#region src/icons/StatusInfo.d.ts
3510
- /** 方框:说明。四种状态图标各用一种外形,不只靠颜色区分 */
3511
- export declare const StatusInfo: {
3512
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3513
- displayName: string;
3514
- };
3515
- //#endregion
3516
- //#region src/icons/StatusSuccess.d.ts
3517
- /** 圆 + 对勾:成功 */
3518
- export declare const StatusSuccess: {
3519
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3520
- displayName: string;
3521
- };
3522
- //#endregion
3523
- //#region src/icons/StatusWarning.d.ts
3524
- /** 三角:警告 */
3525
- export declare const StatusWarning: {
3526
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3527
- displayName: string;
3528
- };
3529
- //#endregion
3530
- //#region src/icons/TriangleRight.d.ts
3531
- /** 实心三角 ▶:前往、展开 */
3532
- export declare const TriangleRight: {
3533
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3534
- displayName: string;
3535
- };
3536
- //#endregion
3537
- //#region src/icons/Upload.d.ts
3538
- /** 上传:一个托盘,上面一支朝上的箭头 */
3539
- export declare const Upload: {
3540
- ({ size, ...props }: IconProps): import("react").JSX.Element;
3541
- displayName: string;
3542
- };
3543
- //#endregion
3544
- //#region src/lib/cn.d.ts
3545
- export declare function cn(...inputs: ClassValue[]): string;
3546
- //#endregion
3547
- export type { AccordionItemProps, AccordionLevel, AccordionProps, AccordionSize, AlertProps, AlertTone, AvatarProps, AvatarSize, AvatarSwitcherItemProps, AvatarSwitcherOrientation, AvatarSwitcherProps, BackToTopProps, BackToTopSize, BadgeProps, BracketTitleProps, BreadcrumbItemProps, BreadcrumbProps, ButtonGroupAlign, ButtonGroupGap, ButtonGroupOrientation, ButtonGroupProps, ButtonProps, ButtonSize, ButtonVariant, CalendarProps, CalendarRangeProps, CalendarSingleProps, CarouselProps, CarouselRatio, CarouselSlideProps, CheckboxProps, ComboboxMultipleProps, ComboboxOption, ComboboxOptionGroup, ComboboxProps, ComboboxSingleProps, ComboboxSize, ComboboxVariant, CompletionBannerProps, ContextMenuProps, ContextMenuVariant, CornerBracketsProps, CornerBracketsSize, CountdownProps, CountdownSize, CountdownState, DashIndicatorProps, DataRowColumns, DataRowListProps, DataRowProps, DataRowTone, DatePickerProps, DatePickerSize, DatePickerVariant, DateRange, DateRangePickerProps, DialogCloseProps, DialogProps, DialogSize, DrawerProps, DrawerSide, DrawerSize, DropdownMenuAlign, DropdownMenuCheckboxItemProps, DropdownMenuGroupProps, DropdownMenuItemProps, DropdownMenuItemTone, DropdownMenuProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuSide, DropdownMenuSubProps, DropdownMenuVariant, EmptyStateProps, FieldProps, FileItemProps, FileItemStatus, FileRejectReason, FileRejection, FileUploadLabels, FileUploadProps, FileUploadSize, FilterChipProps, FlyoutBarItemProps, FlyoutBarProps, FlyoutBarSide, GhostTextProps, GhostTextVariant, HatchDensity, HatchProps, HazardStripeProps, HazardStripeSize, HoverCardAlign, HoverCardProps, HoverCardSide, IconButtonProps, IconButtonSize, IconButtonVariant, IconProps, ImageViewerItemProps, ImageViewerProps, ImageViewerRatio, InputProps, InputSize, InputVariant, ItemGridProps, ItemSlotProps, ItemSlotRarity, ItemSlotRatio, KbdProps, KbdSize, ListProps, ListRowProps, ListRowSize, ListVariant, LoaderProps, MarqueeProps, MediaCardProps, MediaCardRatio, NavActionLayout, NavActionProps, NavMenuItemProps, NavMenuProps, NavigatorProps, NavigatorSize, OtpInputProps, OtpInputSize, OtpInputType, OtpInputVariant, PageHeaderBackProps, PageHeaderProps, PaginationProps, PaginationSize, PanelBodyProps, PanelHeaderProps, PanelHeaderVariant, PanelProps, PanelRowProps, PanelRowsProps, PlayButtonProps, PlayMarkProps, PlayMarkSize, PopoverAlign, PopoverCloseProps, PopoverProps, PopoverSide, ProgressProps, ProgressRingProps, ProgressSize, RadioGroupOrientation, RadioGroupProps, RadioProps, RecIndicatorProps, RegistrationStripOrientation, RegistrationStripProps, ResourceChipProps, ResourceChipSize, RollingNumberProps, ScheduleItemProps, ScheduleItemVariant, ScheduleProps, ScheduleTrackProps, ScrollAreaOrientation, ScrollAreaProps, ScrollHintProps, ScrollHintVariant, SectionTitleProps, SectionTitleVariant, SegmentProps, SegmentedControlProps, SegmentedControlSize, SegmentedControlVariant, SelectGroupProps, SelectItemProps, SelectMultipleProps, SelectOption, SelectProps, SelectSeparatorProps, SelectSingleProps, SelectSize, SelectVariant, SideRailGroupProps, SideRailItemProps, SideRailProps, SideRailSubItemProps, SideRailSubProps, SkeletonProps, SkeletonVariant, SliderMark, SliderProps, SliderRangeProps, SliderSingleProps, SliderSize, SparklineProps, SparklineTone, SparklineVariant, SpinnerProps, SpinnerSize, SplashScreenProps, StatProps, StatSize, StatTrend, StepProps, StepStatus, StepStatusLabels, StepperProps, StepperSize, StepsOrientation, StepsProps, StepsSize, SwitchProps, TabListProps, TabPanelProps, TabProps, TableAlign, TableBodyProps, TableCellProps, TableExpanderProps, TableHeadProps, TableHeaderCellProps, TableHeaderVariant, TableProps, TableRowProps, TableSize, TableSortDirection, TabsProps, TabsSize, TabsVariant, TagInputLabels, TagInputProps, TagInputRejectReason, TagInputSize, TagInputVariant, TagPairProps, TagProps, TagSize, TagVariant, TermProps, TermTone, TextareaProps, TextureProps, TextureVariant, Theme, ThemePreference, TickRingProps, TimelineItemProps, TimelineProps, TimelineStatus, ToastAction, ToastApi, ToastOptions, ToastPlacement, ToastProviderProps, ToastTone, TocItemProps, TocLevel, TocProps, ToolbarButtonProps, ToolbarGroupProps, ToolbarOrientation, ToolbarProps, ToolbarSeparatorProps, ToolbarSize, ToolbarToggleGroupProps, ToolbarToggleProps, ToolbarVariant, TooltipAlign, TooltipProps, TooltipProviderProps, TooltipSide, TopBarProps, ViewfinderProps, ViewfinderReadouts, ViewfinderSize };
2
+ import { Field, FieldProps, useFieldContext, useFieldControl } from "./components/field/Field.js";
3
+ import { SplashScreen, SplashScreenProps } from "./components/splash-screen/SplashScreen.js";
4
+ import { useControllableState } from "./hooks/useControllableState.js";
5
+ import { usePortalScope } from "./hooks/usePortalScope.js";
6
+ import { useReducedMotion } from "./hooks/useReducedMotion.js";
7
+ import { cn } from "./lib/cn.js";
8
+ import { Accordion, AccordionItem, AccordionItemProps, AccordionLevel, AccordionProps, AccordionSize } from "./components/accordion/Accordion.js";
9
+ import "./components/accordion/index.js";
10
+ import { Alert, AlertProps, AlertTone } from "./components/alert/Alert.js";
11
+ import "./components/alert/index.js";
12
+ import { Avatar, AvatarProps, AvatarSize } from "./components/avatar/Avatar.js";
13
+ import { AvatarSwitcher, AvatarSwitcherItem, AvatarSwitcherItemProps, AvatarSwitcherOrientation, AvatarSwitcherProps } from "./components/avatar/AvatarSwitcher.js";
14
+ import "./components/avatar/index.js";
15
+ import { BackToTop, BackToTopProps, BackToTopSize } from "./components/back-to-top/BackToTop.js";
16
+ import "./components/back-to-top/index.js";
17
+ import { Badge, BadgeProps } from "./components/badge/Badge.js";
18
+ import "./components/badge/index.js";
19
+ import { BracketTitle, BracketTitleProps } from "./components/bracket-title/BracketTitle.js";
20
+ import "./components/bracket-title/index.js";
21
+ import { Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbProps } from "./components/breadcrumb/Breadcrumb.js";
22
+ import "./components/breadcrumb/index.js";
23
+ import { Button, ButtonProps, ButtonSize, ButtonVariant } from "./components/button/Button.js";
24
+ import { ButtonGroup, ButtonGroupAlign, ButtonGroupGap, ButtonGroupOrientation, ButtonGroupProps } from "./components/button/ButtonGroup.js";
25
+ import "./components/button/index.js";
26
+ import { Calendar, CalendarProps, CalendarRangeProps, CalendarSingleProps, DateRange } from "./components/calendar/Calendar.js";
27
+ import "./components/calendar/index.js";
28
+ import { Carousel, CarouselProps, CarouselRatio, CarouselSlide, CarouselSlideProps } from "./components/carousel/Carousel.js";
29
+ import "./components/carousel/index.js";
30
+ import { Checkbox, CheckboxProps } from "./components/checkbox/Checkbox.js";
31
+ import "./components/checkbox/index.js";
32
+ import { FilterChip, FilterChipProps } from "./components/chip/FilterChip.js";
33
+ import { ResourceChip, ResourceChipProps, ResourceChipSize } from "./components/chip/ResourceChip.js";
34
+ import "./components/chip/index.js";
35
+ import { Combobox, ComboboxMultipleProps, ComboboxOption, ComboboxOptionGroup, ComboboxProps, ComboboxSingleProps, ComboboxSize, ComboboxVariant } from "./components/combobox/Combobox.js";
36
+ import "./components/combobox/index.js";
37
+ import { CompletionBanner, CompletionBannerProps } from "./components/completion-banner/CompletionBanner.js";
38
+ import "./components/completion-banner/index.js";
39
+ import { ContextMenu, ContextMenuProps, ContextMenuVariant } from "./components/context-menu/ContextMenu.js";
40
+ import "./components/context-menu/index.js";
41
+ import { CornerBrackets, CornerBracketsProps, CornerBracketsSize } from "./components/corner-brackets/CornerBrackets.js";
42
+ import "./components/corner-brackets/index.js";
43
+ import { Countdown, CountdownProps, CountdownSize, CountdownState } from "./components/countdown/Countdown.js";
44
+ import "./components/countdown/index.js";
45
+ import { DataRow, DataRowColumns, DataRowList, DataRowListProps, DataRowProps, DataRowTone } from "./components/data-row/DataRow.js";
46
+ import "./components/data-row/index.js";
47
+ import { DatePicker, DatePickerProps, DatePickerSize, DatePickerVariant } from "./components/date-picker/DatePicker.js";
48
+ import { DateRangePicker, DateRangePickerProps } from "./components/date-picker/DateRangePicker.js";
49
+ import "./components/date-picker/index.js";
50
+ import { DashIndicator, DashIndicatorProps } from "./components/dash-indicator/DashIndicator.js";
51
+ import "./components/dash-indicator/index.js";
52
+ import { Dialog, DialogClose, DialogCloseProps, DialogProps, DialogSize } from "./components/dialog/Dialog.js";
53
+ import "./components/dialog/index.js";
54
+ import { Drawer, DrawerProps, DrawerSide, DrawerSize } from "./components/drawer/Drawer.js";
55
+ import "./components/drawer/index.js";
56
+ import { DropdownMenu, DropdownMenuAlign, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuGroup, DropdownMenuGroupProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuItemTone, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuSide, DropdownMenuSub, DropdownMenuSubProps, DropdownMenuVariant } from "./components/dropdown-menu/DropdownMenu.js";
57
+ import "./components/dropdown-menu/index.js";
58
+ import { EmptyState, EmptyStateProps } from "./components/empty-state/EmptyState.js";
59
+ import "./components/empty-state/index.js";
60
+ import "./components/field/index.js";
61
+ import { FileItem, FileItemProps, FileItemStatus } from "./components/file-upload/FileItem.js";
62
+ import { FileRejectReason, FileRejection, FileUpload, FileUploadLabels, FileUploadProps, FileUploadSize } from "./components/file-upload/FileUpload.js";
63
+ import "./components/file-upload/index.js";
64
+ import { FlyoutBar, FlyoutBarItem, FlyoutBarItemProps, FlyoutBarProps, FlyoutBarSide } from "./components/flyout-bar/FlyoutBar.js";
65
+ import "./components/flyout-bar/index.js";
66
+ import { GhostText, GhostTextProps, GhostTextVariant } from "./components/ghost-text/GhostText.js";
67
+ import "./components/ghost-text/index.js";
68
+ import { Hatch, HatchDensity, HatchProps } from "./components/hatch/Hatch.js";
69
+ import "./components/hatch/index.js";
70
+ import { HazardStripe, HazardStripeProps, HazardStripeSize } from "./components/hazard-stripe/HazardStripe.js";
71
+ import "./components/hazard-stripe/index.js";
72
+ import { HoverCard, HoverCardAlign, HoverCardProps, HoverCardSide } from "./components/hover-card/HoverCard.js";
73
+ import "./components/hover-card/index.js";
74
+ import { IconButton, IconButtonProps, IconButtonSize, IconButtonVariant } from "./components/icon-button/IconButton.js";
75
+ import "./components/icon-button/index.js";
76
+ import { ImageViewer, ImageViewerItem, ImageViewerItemProps, ImageViewerProps, ImageViewerRatio } from "./components/image-viewer/ImageViewer.js";
77
+ import "./components/image-viewer/index.js";
78
+ import { Input, InputProps, InputSize, InputVariant } from "./components/input/Input.js";
79
+ import "./components/input/index.js";
80
+ import { ItemGrid, ItemGridProps } from "./components/item-slot/ItemGrid.js";
81
+ import { ItemSlot, ItemSlotProps, ItemSlotRarity, ItemSlotRatio } from "./components/item-slot/ItemSlot.js";
82
+ import "./components/item-slot/index.js";
83
+ import { Kbd, KbdProps, KbdSize } from "./components/kbd/Kbd.js";
84
+ import "./components/kbd/index.js";
85
+ import { List, ListProps, ListRow, ListRowProps, ListRowSize, ListVariant } from "./components/list/List.js";
86
+ import "./components/list/index.js";
87
+ import { Loader, LoaderProps } from "./components/loader/Loader.js";
88
+ import "./components/loader/index.js";
89
+ import { Marquee, MarqueeProps } from "./components/marquee/Marquee.js";
90
+ import "./components/marquee/index.js";
91
+ import { MediaCard, MediaCardProps, MediaCardRatio } from "./components/media-card/MediaCard.js";
92
+ import "./components/media-card/index.js";
93
+ import { NavAction, NavActionLayout, NavActionProps } from "./components/nav-action/NavAction.js";
94
+ import "./components/nav-action/index.js";
95
+ import { NavMenu, NavMenuItem, NavMenuItemProps, NavMenuProps } from "./components/nav-menu/NavMenu.js";
96
+ import "./components/nav-menu/index.js";
97
+ import { Navigator, NavigatorProps, NavigatorSize } from "./components/navigator/Navigator.js";
98
+ import "./components/navigator/index.js";
99
+ import { OtpInput, OtpInputProps, OtpInputSize, OtpInputType, OtpInputVariant } from "./components/otp-input/OtpInput.js";
100
+ import "./components/otp-input/index.js";
101
+ import { PageHeader, PageHeaderBack, PageHeaderBackProps, PageHeaderProps } from "./components/page-header/PageHeader.js";
102
+ import "./components/page-header/index.js";
103
+ import { Pagination, PaginationProps, PaginationSize } from "./components/pagination/Pagination.js";
104
+ import "./components/pagination/index.js";
105
+ import { Panel, PanelBody, PanelBodyProps, PanelHeader, PanelHeaderProps, PanelHeaderVariant, PanelProps, PanelRow, PanelRowProps, PanelRows, PanelRowsProps } from "./components/panel/Panel.js";
106
+ import "./components/panel/index.js";
107
+ import { PlayButton, PlayButtonProps, PlayMark, PlayMarkProps, PlayMarkSize } from "./components/play-button/PlayButton.js";
108
+ import "./components/play-button/index.js";
109
+ import { Popover, PopoverAlign, PopoverClose, PopoverCloseProps, PopoverProps, PopoverSide } from "./components/popover/Popover.js";
110
+ import "./components/popover/index.js";
111
+ import { Progress, ProgressProps, ProgressSize } from "./components/progress/Progress.js";
112
+ import { ProgressRing, ProgressRingProps } from "./components/progress/ProgressRing.js";
113
+ import "./components/progress/index.js";
114
+ import { Radio, RadioGroup, RadioGroupOrientation, RadioGroupProps, RadioProps } from "./components/radio/Radio.js";
115
+ import "./components/radio/index.js";
116
+ import { RecIndicator, RecIndicatorProps } from "./components/rec-indicator/RecIndicator.js";
117
+ import "./components/rec-indicator/index.js";
118
+ import { RegistrationStrip, RegistrationStripOrientation, RegistrationStripProps } from "./components/registration-strip/RegistrationStrip.js";
119
+ import "./components/registration-strip/index.js";
120
+ import { RollingNumber, RollingNumberProps } from "./components/rolling-number/RollingNumber.js";
121
+ import "./components/rolling-number/index.js";
122
+ import { Schedule, ScheduleItem, ScheduleItemProps, ScheduleItemVariant, ScheduleProps, ScheduleTrack, ScheduleTrackProps } from "./components/schedule/Schedule.js";
123
+ import "./components/schedule/index.js";
124
+ import { ScrollArea, ScrollAreaOrientation, ScrollAreaProps } from "./components/scroll-area/ScrollArea.js";
125
+ import "./components/scroll-area/index.js";
126
+ import { ScrollHint, ScrollHintProps, ScrollHintVariant } from "./components/scroll-hint/ScrollHint.js";
127
+ import "./components/scroll-hint/index.js";
128
+ import { SectionTitle, SectionTitleProps, SectionTitleVariant } from "./components/section-title/SectionTitle.js";
129
+ import "./components/section-title/index.js";
130
+ import { Segment, SegmentProps, SegmentedControl, SegmentedControlProps, SegmentedControlSize, SegmentedControlVariant } from "./components/segmented-control/SegmentedControl.js";
131
+ import "./components/segmented-control/index.js";
132
+ import { Select, SelectGroup, SelectGroupProps, SelectItem, SelectItemProps, SelectMultipleProps, SelectOption, SelectProps, SelectSeparator, SelectSeparatorProps, SelectSingleProps, SelectSize, SelectVariant } from "./components/select/Select.js";
133
+ import "./components/select/index.js";
134
+ import { SideRail, SideRailGroup, SideRailGroupProps, SideRailItem, SideRailItemProps, SideRailProps } from "./components/side-rail/SideRail.js";
135
+ import { SideRailSub, SideRailSubItem, SideRailSubItemProps, SideRailSubProps } from "./components/side-rail/SideRailSub.js";
136
+ import "./components/side-rail/index.js";
137
+ import { Skeleton, SkeletonProps, SkeletonVariant } from "./components/skeleton/Skeleton.js";
138
+ import "./components/skeleton/index.js";
139
+ import { Slider, SliderMark, SliderProps, SliderRangeProps, SliderSingleProps, SliderSize } from "./components/slider/Slider.js";
140
+ import "./components/slider/index.js";
141
+ import { Sparkline, SparklineProps, SparklineTone, SparklineVariant } from "./components/sparkline/Sparkline.js";
142
+ import "./components/sparkline/index.js";
143
+ import { Spinner, SpinnerProps, SpinnerSize } from "./components/spinner/Spinner.js";
144
+ import "./components/spinner/index.js";
145
+ import "./components/splash-screen/index.js";
146
+ import { Stat, StatProps, StatSize, StatTrend } from "./components/stat/Stat.js";
147
+ import "./components/stat/index.js";
148
+ import { Stepper, StepperProps, StepperSize } from "./components/stepper/Stepper.js";
149
+ import "./components/stepper/index.js";
150
+ import { Step, StepProps, StepStatus, StepStatusLabels, Steps, StepsOrientation, StepsProps, StepsSize } from "./components/steps/Steps.js";
151
+ import "./components/steps/index.js";
152
+ import { Switch, SwitchProps } from "./components/switch/Switch.js";
153
+ import "./components/switch/index.js";
154
+ import { Table, TableAlign, TableBody, TableBodyProps, TableCell, TableCellProps, TableExpander, TableExpanderProps, TableHead, TableHeadProps, TableHeaderCell, TableHeaderCellProps, TableHeaderVariant, TableProps, TableRow, TableRowProps, TableSize, TableSortDirection } from "./components/table/Table.js";
155
+ import "./components/table/index.js";
156
+ import { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps, TabsSize, TabsVariant } from "./components/tabs/Tabs.js";
157
+ import "./components/tabs/index.js";
158
+ import { Tag, TagProps, TagSize, TagVariant } from "./components/tag/Tag.js";
159
+ import { TagPair, TagPairProps } from "./components/tag/TagPair.js";
160
+ import "./components/tag/index.js";
161
+ import { TagInput, TagInputLabels, TagInputProps, TagInputRejectReason, TagInputSize, TagInputVariant } from "./components/tag-input/TagInput.js";
162
+ import "./components/tag-input/index.js";
163
+ import { Term, TermProps, TermTone } from "./components/term/Term.js";
164
+ import "./components/term/index.js";
165
+ import { Textarea, TextareaProps } from "./components/textarea/Textarea.js";
166
+ import "./components/textarea/index.js";
167
+ import { Texture, TextureProps, TextureVariant } from "./components/texture/Texture.js";
168
+ import "./components/texture/index.js";
169
+ import { TickRing, TickRingProps } from "./components/tick-ring/TickRing.js";
170
+ import "./components/tick-ring/index.js";
171
+ import { Timeline, TimelineItem, TimelineItemProps, TimelineProps, TimelineStatus } from "./components/timeline/Timeline.js";
172
+ import "./components/timeline/index.js";
173
+ import { ToastAction, ToastApi, ToastOptions, ToastPlacement, ToastProvider, ToastProviderProps, ToastTone, useToast } from "./components/toast/Toast.js";
174
+ import "./components/toast/index.js";
175
+ import { Toc, TocItem, TocItemProps, TocLevel, TocProps } from "./components/toc/Toc.js";
176
+ import "./components/toc/index.js";
177
+ import { Toolbar, ToolbarButton, ToolbarButtonProps, ToolbarGroup, ToolbarGroupProps, ToolbarOrientation, ToolbarProps, ToolbarSeparator, ToolbarSeparatorProps, ToolbarSize, ToolbarToggle, ToolbarToggleGroup, ToolbarToggleGroupProps, ToolbarToggleProps, ToolbarVariant } from "./components/toolbar/Toolbar.js";
178
+ import "./components/toolbar/index.js";
179
+ import { Tooltip, TooltipAlign, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipSide } from "./components/tooltip/Tooltip.js";
180
+ import "./components/tooltip/index.js";
181
+ import { TopBar, TopBarProps } from "./components/top-bar/TopBar.js";
182
+ import "./components/top-bar/index.js";
183
+ import { Viewfinder, ViewfinderProps, ViewfinderReadouts, ViewfinderSize } from "./components/viewfinder/Viewfinder.js";
184
+ import "./components/viewfinder/index.js";
185
+ import { useInView } from "./hooks/useInView.js";
186
+ import { Theme, ThemePreference, useTheme } from "./hooks/useTheme.js";
187
+ import "./hooks/index.js";
188
+ import { IconProps, createIcon } from "./icons/createIcon.js";
189
+ import { ArrowCorner } from "./icons/ArrowCorner.js";
190
+ import { ArrowLeft } from "./icons/ArrowLeft.js";
191
+ import { ArrowRight } from "./icons/ArrowRight.js";
192
+ import { CalendarIcon } from "./icons/CalendarIcon.js";
193
+ import { Check } from "./icons/Check.js";
194
+ import { ChevronDown } from "./icons/ChevronDown.js";
195
+ import { ChevronLeft } from "./icons/ChevronLeft.js";
196
+ import { ChevronRight } from "./icons/ChevronRight.js";
197
+ import { Close } from "./icons/Close.js";
198
+ import { Crosshair } from "./icons/Crosshair.js";
199
+ import { Lock } from "./icons/Lock.js";
200
+ import { Menu } from "./icons/Menu.js";
201
+ import { Minus } from "./icons/Minus.js";
202
+ import { Plus } from "./icons/Plus.js";
203
+ import { StatusDanger } from "./icons/StatusDanger.js";
204
+ import { StatusInfo } from "./icons/StatusInfo.js";
205
+ import { StatusSuccess } from "./icons/StatusSuccess.js";
206
+ import { StatusWarning } from "./icons/StatusWarning.js";
207
+ import { TriangleRight } from "./icons/TriangleRight.js";
208
+ import { Upload } from "./icons/Upload.js";
209
+ import "./icons/index.js";
210
+ export { Accordion, AccordionItem, type AccordionItemProps, type AccordionLevel, type AccordionProps, type AccordionSize, Alert, type AlertProps, type AlertTone, ArrowCorner, ArrowLeft, ArrowRight, Avatar, type AvatarProps, type AvatarSize, AvatarSwitcher, AvatarSwitcherItem, type AvatarSwitcherItemProps, type AvatarSwitcherOrientation, type AvatarSwitcherProps, BackToTop, type BackToTopProps, type BackToTopSize, Badge, type BadgeProps, BracketTitle, type BracketTitleProps, Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupAlign, type ButtonGroupGap, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarIcon, type CalendarProps, type CalendarRangeProps, type CalendarSingleProps, Carousel, type CarouselProps, type CarouselRatio, CarouselSlide, type CarouselSlideProps, Check, Checkbox, type CheckboxProps, ChevronDown, ChevronLeft, ChevronRight, Close, Combobox, type ComboboxMultipleProps, type ComboboxOption, type ComboboxOptionGroup, type ComboboxProps, type ComboboxSingleProps, type ComboboxSize, type ComboboxVariant, CompletionBanner, type CompletionBannerProps, ContextMenu, type ContextMenuProps, type ContextMenuVariant, CornerBrackets, type CornerBracketsProps, type CornerBracketsSize, Countdown, type CountdownProps, type CountdownSize, type CountdownState, Crosshair, DashIndicator, type DashIndicatorProps, DataRow, type DataRowColumns, DataRowList, type DataRowListProps, type DataRowProps, type DataRowTone, DatePicker, type DatePickerProps, type DatePickerSize, type DatePickerVariant, type DateRange, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, type DialogCloseProps, type DialogProps, type DialogSize, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropdownMenu, type DropdownMenuAlign, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemTone, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, type DropdownMenuSide, DropdownMenuSub, type DropdownMenuSubProps, type DropdownMenuVariant, EmptyState, type EmptyStateProps, Field, type FieldProps, FileItem, type FileItemProps, type FileItemStatus, type FileRejectReason, type FileRejection, FileUpload, type FileUploadLabels, type FileUploadProps, type FileUploadSize, FilterChip, type FilterChipProps, FlyoutBar, FlyoutBarItem, type FlyoutBarItemProps, type FlyoutBarProps, type FlyoutBarSide, GhostText, type GhostTextProps, type GhostTextVariant, Hatch, type HatchDensity, type HatchProps, HazardStripe, type HazardStripeProps, type HazardStripeSize, HoverCard, type HoverCardAlign, type HoverCardProps, type HoverCardSide, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps, ImageViewer, ImageViewerItem, type ImageViewerItemProps, type ImageViewerProps, type ImageViewerRatio, Input, type InputProps, type InputSize, type InputVariant, ItemGrid, type ItemGridProps, ItemSlot, type ItemSlotProps, type ItemSlotRarity, type ItemSlotRatio, Kbd, type KbdProps, type KbdSize, List, type ListProps, ListRow, type ListRowProps, type ListRowSize, type ListVariant, Loader, type LoaderProps, Lock, Marquee, type MarqueeProps, MediaCard, type MediaCardProps, type MediaCardRatio, Menu, Minus, NavAction, type NavActionLayout, type NavActionProps, NavMenu, NavMenuItem, type NavMenuItemProps, type NavMenuProps, Navigator, type NavigatorProps, type NavigatorSize, OtpInput, type OtpInputProps, type OtpInputSize, type OtpInputType, type OtpInputVariant, PageHeader, PageHeaderBack, type PageHeaderBackProps, type PageHeaderProps, Pagination, type PaginationProps, type PaginationSize, Panel, PanelBody, type PanelBodyProps, PanelHeader, type PanelHeaderProps, type PanelHeaderVariant, type PanelProps, PanelRow, type PanelRowProps, PanelRows, type PanelRowsProps, PlayButton, type PlayButtonProps, PlayMark, type PlayMarkProps, type PlayMarkSize, Plus, Popover, type PopoverAlign, PopoverClose, type PopoverCloseProps, type PopoverProps, type PopoverSide, Progress, type ProgressProps, ProgressRing, type ProgressRingProps, type ProgressSize, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, RecIndicator, type RecIndicatorProps, RegistrationStrip, type RegistrationStripOrientation, type RegistrationStripProps, ResourceChip, type ResourceChipProps, type ResourceChipSize, RollingNumber, type RollingNumberProps, Schedule, ScheduleItem, type ScheduleItemProps, type ScheduleItemVariant, type ScheduleProps, ScheduleTrack, type ScheduleTrackProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, ScrollHint, type ScrollHintProps, type ScrollHintVariant, SectionTitle, type SectionTitleProps, type SectionTitleVariant, Segment, type SegmentProps, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, type SegmentedControlVariant, Select, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, type SelectMultipleProps, type SelectOption, type SelectProps, SelectSeparator, type SelectSeparatorProps, type SelectSingleProps, type SelectSize, type SelectVariant, SideRail, SideRailGroup, type SideRailGroupProps, SideRailItem, type SideRailItemProps, type SideRailProps, SideRailSub, SideRailSubItem, type SideRailSubItemProps, type SideRailSubProps, Skeleton, type SkeletonProps, type SkeletonVariant, Slider, type SliderMark, type SliderProps, type SliderRangeProps, type SliderSingleProps, type SliderSize, Sparkline, type SparklineProps, type SparklineTone, type SparklineVariant, Spinner, type SpinnerProps, type SpinnerSize, SplashScreen, type SplashScreenProps, Stat, type StatProps, type StatSize, type StatTrend, StatusDanger, StatusInfo, StatusSuccess, StatusWarning, Step, type StepProps, type StepStatus, type StepStatusLabels, Stepper, type StepperProps, type StepperSize, Steps, type StepsOrientation, type StepsProps, type StepsSize, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableAlign, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableExpander, type TableExpanderProps, TableHead, type TableHeadProps, TableHeaderCell, type TableHeaderCellProps, type TableHeaderVariant, type TableProps, TableRow, type TableRowProps, type TableSize, type TableSortDirection, Tabs, type TabsProps, type TabsSize, type TabsVariant, Tag, TagInput, type TagInputLabels, type TagInputProps, type TagInputRejectReason, type TagInputSize, type TagInputVariant, TagPair, type TagPairProps, type TagProps, type TagSize, type TagVariant, Term, type TermProps, type TermTone, Textarea, type TextareaProps, Texture, type TextureProps, type TextureVariant, type Theme, type ThemePreference, TickRing, type TickRingProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, type TimelineStatus, type ToastAction, type ToastApi, type ToastOptions, type ToastPlacement, ToastProvider, type ToastProviderProps, type ToastTone, Toc, TocItem, type TocItemProps, type TocLevel, type TocProps, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, type ToolbarOrientation, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, type ToolbarSize, ToolbarToggle, ToolbarToggleGroup, type ToolbarToggleGroupProps, type ToolbarToggleProps, type ToolbarVariant, Tooltip, type TooltipAlign, type TooltipProps, TooltipProvider, type TooltipProviderProps, type TooltipSide, TopBar, type TopBarProps, TriangleRight, Upload, Viewfinder, type ViewfinderProps, type ViewfinderReadouts, type ViewfinderSize, cn, createIcon, useControllableState, useFieldContext, useFieldControl, useInView, usePortalScope, useReducedMotion, useTheme, useToast };