@bifrostui/react 1.3.0 → 1.3.1-beta.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 (281) hide show
  1. package/dist/ActionSheet/ActionSheet.css +6 -3
  2. package/dist/ActionSheet/ActionSheetItem.css +10 -6
  3. package/dist/Alert/index.css +14 -8
  4. package/dist/Avatar/Avatar.css +13 -9
  5. package/dist/Avatar/AvatarGroup.css +15 -8
  6. package/dist/Backdrop/Backdrop.css +2 -1
  7. package/dist/Badge/Badge.css +27 -17
  8. package/dist/Breadcrumb/Breadcrumb.css +34 -0
  9. package/dist/Breadcrumb/Breadcrumb.d.ts +5 -0
  10. package/dist/Breadcrumb/Breadcrumb.js +128 -0
  11. package/dist/Breadcrumb/Breadcrumb.types.d.ts +49 -0
  12. package/dist/Breadcrumb/Breadcrumb.types.js +15 -0
  13. package/dist/Breadcrumb/BreadcrumbItem.d.ts +4 -0
  14. package/dist/Breadcrumb/BreadcrumbItem.js +78 -0
  15. package/dist/Breadcrumb/index.d.ts +4 -0
  16. package/dist/Breadcrumb/index.js +45 -0
  17. package/dist/Button/Button.css +26 -17
  18. package/dist/Calendar/Calendar.css +33 -18
  19. package/dist/Calendar/Calendar.d.ts +1 -1
  20. package/dist/Calendar/Calendar.js +38 -17
  21. package/dist/Calendar/Calendar.types.d.ts +21 -0
  22. package/dist/Card/CardFooter.css +2 -1
  23. package/dist/Card/CardHeader.css +3 -1
  24. package/dist/Checkbox/Checkbox.css +7 -5
  25. package/dist/CitySelector/CitySelector.css +29 -15
  26. package/dist/CitySelector/CitySelectorCore.js +25 -16
  27. package/dist/CitySelector/Selector/index.css +4 -4
  28. package/dist/Collapse/Collapse.css +6 -0
  29. package/dist/Collapse/Collapse.d.ts +5 -0
  30. package/dist/Collapse/Collapse.js +165 -0
  31. package/dist/Collapse/Collapse.types.d.ts +16 -0
  32. package/dist/Collapse/Collapse.types.js +15 -0
  33. package/dist/Collapse/index.d.ts +2 -0
  34. package/dist/Collapse/index.js +41 -0
  35. package/dist/CollapsePanel/CollapsePanel.css +32 -0
  36. package/dist/CollapsePanel/CollapsePanel.d.ts +5 -0
  37. package/dist/CollapsePanel/CollapsePanel.js +159 -0
  38. package/dist/CollapsePanel/CollapsePanel.types.d.ts +64 -0
  39. package/dist/CollapsePanel/CollapsePanel.types.js +15 -0
  40. package/dist/CollapsePanel/CollapsePanelItem.d.ts +4 -0
  41. package/dist/CollapsePanel/CollapsePanelItem.js +112 -0
  42. package/dist/CollapsePanel/index.d.ts +4 -0
  43. package/dist/CollapsePanel/index.js +45 -0
  44. package/dist/Countdown/Countdown.css +2 -1
  45. package/dist/Dialog/Dialog.d.ts +2 -2
  46. package/dist/Dialog/Dialog.js +20 -8
  47. package/dist/Dialog/Dialog.types.d.ts +12 -1
  48. package/dist/Dialog/FunctionalDialog.js +38 -2
  49. package/dist/Dialog/index.css +27 -18
  50. package/dist/Divider/Divider.css +6 -4
  51. package/dist/IconButton/IconButton.css +9 -7
  52. package/dist/Image/index.css +2 -1
  53. package/dist/Input/Input.css +10 -5
  54. package/dist/List/List.css +3 -0
  55. package/dist/List/ListItem.css +3 -3
  56. package/dist/List/ListItemContent.css +1 -1
  57. package/dist/Loading/Loading.css +4 -2
  58. package/dist/Modal/Modal.miniapp.d.ts +1 -1
  59. package/dist/NavBar/NavBar.css +9 -5
  60. package/dist/Picker/Picker.css +25 -29
  61. package/dist/Picker/Picker.js +31 -11
  62. package/dist/Picker/Picker.types.d.ts +4 -0
  63. package/dist/Picker/PickerPanel.css +8 -8
  64. package/dist/Picker/PickerPanel.js +14 -8
  65. package/dist/Picker/utils.d.ts +16 -0
  66. package/dist/Picker/utils.js +32 -2
  67. package/dist/Popover/Popover.css +97 -0
  68. package/dist/Popover/Popover.d.ts +5 -0
  69. package/dist/Popover/Popover.js +186 -0
  70. package/dist/Popover/Popover.types.d.ts +60 -0
  71. package/dist/Popover/Popover.types.js +15 -0
  72. package/dist/Popover/index.d.ts +2 -0
  73. package/dist/Popover/index.js +41 -0
  74. package/dist/Portal/Portal.types.d.ts +4 -0
  75. package/dist/Portal/PortalCore.js +8 -1
  76. package/dist/Progress/Progress.css +8 -6
  77. package/dist/Radio/Radio.css +2 -1
  78. package/dist/Rating/Rating.css +8 -4
  79. package/dist/Select/Select.css +21 -10
  80. package/dist/Select/Select.js +1 -1
  81. package/dist/Select/SelectOption.js +3 -0
  82. package/dist/Skeleton/Skeleton.css +3 -2
  83. package/dist/Slider/Slider.css +24 -13
  84. package/dist/Steps/Step.css +11 -11
  85. package/dist/Steps/Steps.css +14 -5
  86. package/dist/Swiper/Swiper.css +2 -1
  87. package/dist/Switch/Switch.css +31 -16
  88. package/dist/TabBar/TabBar.css +7 -3
  89. package/dist/TabBar/TabBarItem.css +0 -1
  90. package/dist/Tabs/Tab.css +2 -6
  91. package/dist/Tabs/Tabs.css +7 -4
  92. package/dist/Tag/Tag.css +7 -10
  93. package/dist/Tag/TagGroup.css +9 -1
  94. package/dist/TextArea/TextArea.css +14 -8
  95. package/dist/ThemeProvider/ThemeProvider.d.ts +4 -0
  96. package/dist/ThemeProvider/ThemeProvider.js +90 -0
  97. package/dist/ThemeProvider/ThemeProvider.types.d.ts +127 -0
  98. package/dist/ThemeProvider/ThemeProvider.types.js +27 -0
  99. package/dist/ThemeProvider/hooks/ThemeContext.d.ts +4 -0
  100. package/dist/ThemeProvider/hooks/ThemeContext.js +35 -0
  101. package/dist/ThemeProvider/hooks/createTheme.d.ts +2 -0
  102. package/dist/ThemeProvider/hooks/createTheme.js +55 -0
  103. package/dist/ThemeProvider/hooks/index.d.ts +4 -0
  104. package/dist/ThemeProvider/hooks/index.js +43 -0
  105. package/dist/ThemeProvider/hooks/useTheme.d.ts +1 -0
  106. package/dist/ThemeProvider/hooks/useTheme.js +39 -0
  107. package/dist/ThemeProvider/index.d.ts +4 -0
  108. package/dist/ThemeProvider/index.js +45 -0
  109. package/dist/ThemeProvider/utils/constants.d.ts +38 -0
  110. package/dist/ThemeProvider/utils/constants.js +65 -0
  111. package/dist/ThemeProvider/utils/index.d.ts +2 -0
  112. package/dist/ThemeProvider/utils/index.js +23 -0
  113. package/dist/ThemeProvider/utils/mountTokens.d.ts +26 -0
  114. package/dist/ThemeProvider/utils/mountTokens.js +123 -0
  115. package/dist/Toast/FunctionalToast.js +18 -0
  116. package/dist/Toast/Toast.css +15 -14
  117. package/dist/Toast/Toast.d.ts +2 -2
  118. package/dist/Toast/Toast.js +52 -48
  119. package/dist/Toast/Toast.types.d.ts +15 -1
  120. package/dist/Tooltip/Tooltip.css +91 -0
  121. package/dist/Tooltip/Tooltip.d.ts +5 -0
  122. package/dist/Tooltip/Tooltip.js +177 -0
  123. package/dist/Tooltip/Tooltip.types.d.ts +51 -0
  124. package/dist/Tooltip/Tooltip.types.js +15 -0
  125. package/dist/Tooltip/index.d.ts +2 -0
  126. package/dist/Tooltip/index.js +41 -0
  127. package/dist/index.d.ts +7 -0
  128. package/dist/index.js +15 -1
  129. package/dist/locales/base.d.ts +40 -0
  130. package/dist/locales/base.js +15 -0
  131. package/dist/locales/en-US.d.ts +3 -0
  132. package/dist/locales/en-US.js +69 -0
  133. package/dist/locales/hooks/useLocaleText.d.ts +3 -0
  134. package/dist/locales/hooks/useLocaleText.js +43 -0
  135. package/dist/locales/index.d.ts +5 -0
  136. package/dist/locales/index.js +49 -0
  137. package/dist/locales/zh-CN.d.ts +3 -0
  138. package/dist/locales/zh-CN.js +51 -0
  139. package/dist/locales/zh-TW.d.ts +3 -0
  140. package/dist/locales/zh-TW.js +51 -0
  141. package/es/ActionSheet/ActionSheet.css +6 -3
  142. package/es/ActionSheet/ActionSheetItem.css +10 -6
  143. package/es/Alert/index.css +14 -8
  144. package/es/Avatar/Avatar.css +13 -9
  145. package/es/Avatar/AvatarGroup.css +15 -8
  146. package/es/Backdrop/Backdrop.css +2 -1
  147. package/es/Badge/Badge.css +27 -17
  148. package/es/Breadcrumb/Breadcrumb.css +34 -0
  149. package/es/Breadcrumb/Breadcrumb.d.ts +5 -0
  150. package/es/Breadcrumb/Breadcrumb.js +101 -0
  151. package/es/Breadcrumb/Breadcrumb.types.d.ts +49 -0
  152. package/es/Breadcrumb/Breadcrumb.types.js +1 -0
  153. package/es/Breadcrumb/BreadcrumbItem.d.ts +4 -0
  154. package/es/Breadcrumb/BreadcrumbItem.js +51 -0
  155. package/es/Breadcrumb/index.d.ts +4 -0
  156. package/es/Breadcrumb/index.js +9 -0
  157. package/es/Button/Button.css +26 -17
  158. package/es/Calendar/Calendar.css +33 -18
  159. package/es/Calendar/Calendar.d.ts +1 -1
  160. package/es/Calendar/Calendar.js +38 -17
  161. package/es/Calendar/Calendar.types.d.ts +21 -0
  162. package/es/Card/CardFooter.css +2 -1
  163. package/es/Card/CardHeader.css +3 -1
  164. package/es/Checkbox/Checkbox.css +7 -5
  165. package/es/CitySelector/CitySelector.css +29 -15
  166. package/es/CitySelector/CitySelectorCore.js +25 -16
  167. package/es/CitySelector/Selector/index.css +4 -4
  168. package/es/Collapse/Collapse.css +6 -0
  169. package/es/Collapse/Collapse.d.ts +5 -0
  170. package/es/Collapse/Collapse.js +144 -0
  171. package/es/Collapse/Collapse.types.d.ts +16 -0
  172. package/es/Collapse/Collapse.types.js +1 -0
  173. package/es/Collapse/index.d.ts +2 -0
  174. package/es/Collapse/index.js +6 -0
  175. package/es/CollapsePanel/CollapsePanel.css +32 -0
  176. package/es/CollapsePanel/CollapsePanel.d.ts +5 -0
  177. package/es/CollapsePanel/CollapsePanel.js +132 -0
  178. package/es/CollapsePanel/CollapsePanel.types.d.ts +64 -0
  179. package/es/CollapsePanel/CollapsePanel.types.js +1 -0
  180. package/es/CollapsePanel/CollapsePanelItem.d.ts +4 -0
  181. package/es/CollapsePanel/CollapsePanelItem.js +85 -0
  182. package/es/CollapsePanel/index.d.ts +4 -0
  183. package/es/CollapsePanel/index.js +9 -0
  184. package/es/Countdown/Countdown.css +2 -1
  185. package/es/Dialog/Dialog.d.ts +2 -2
  186. package/es/Dialog/Dialog.js +20 -8
  187. package/es/Dialog/Dialog.types.d.ts +12 -1
  188. package/es/Dialog/FunctionalDialog.js +38 -2
  189. package/es/Dialog/index.css +27 -18
  190. package/es/Divider/Divider.css +6 -4
  191. package/es/IconButton/IconButton.css +9 -7
  192. package/es/Image/index.css +2 -1
  193. package/es/Input/Input.css +10 -5
  194. package/es/List/List.css +3 -0
  195. package/es/List/ListItem.css +3 -3
  196. package/es/List/ListItemContent.css +1 -1
  197. package/es/Loading/Loading.css +4 -2
  198. package/es/Modal/Modal.miniapp.d.ts +1 -1
  199. package/es/NavBar/NavBar.css +9 -5
  200. package/es/Picker/Picker.css +25 -29
  201. package/es/Picker/Picker.js +32 -12
  202. package/es/Picker/Picker.types.d.ts +4 -0
  203. package/es/Picker/PickerPanel.css +8 -8
  204. package/es/Picker/PickerPanel.js +14 -8
  205. package/es/Picker/utils.d.ts +16 -0
  206. package/es/Picker/utils.js +29 -1
  207. package/es/Popover/Popover.css +97 -0
  208. package/es/Popover/Popover.d.ts +5 -0
  209. package/es/Popover/Popover.js +159 -0
  210. package/es/Popover/Popover.types.d.ts +60 -0
  211. package/es/Popover/Popover.types.js +1 -0
  212. package/es/Popover/index.d.ts +2 -0
  213. package/es/Popover/index.js +6 -0
  214. package/es/Portal/Portal.types.d.ts +4 -0
  215. package/es/Portal/PortalCore.js +8 -1
  216. package/es/Progress/Progress.css +8 -6
  217. package/es/Radio/Radio.css +2 -1
  218. package/es/Rating/Rating.css +8 -4
  219. package/es/Select/Select.css +21 -10
  220. package/es/Select/Select.js +1 -1
  221. package/es/Select/SelectOption.js +3 -0
  222. package/es/Skeleton/Skeleton.css +3 -2
  223. package/es/Slider/Slider.css +24 -13
  224. package/es/Steps/Step.css +11 -11
  225. package/es/Steps/Steps.css +14 -5
  226. package/es/Swiper/Swiper.css +2 -1
  227. package/es/Switch/Switch.css +31 -16
  228. package/es/TabBar/TabBar.css +7 -3
  229. package/es/TabBar/TabBarItem.css +0 -1
  230. package/es/Tabs/Tab.css +2 -6
  231. package/es/Tabs/Tabs.css +7 -4
  232. package/es/Tag/Tag.css +7 -10
  233. package/es/Tag/TagGroup.css +9 -1
  234. package/es/TextArea/TextArea.css +14 -8
  235. package/es/ThemeProvider/ThemeProvider.d.ts +4 -0
  236. package/es/ThemeProvider/ThemeProvider.js +61 -0
  237. package/es/ThemeProvider/ThemeProvider.types.d.ts +127 -0
  238. package/es/ThemeProvider/ThemeProvider.types.js +1 -0
  239. package/es/ThemeProvider/hooks/ThemeContext.d.ts +4 -0
  240. package/es/ThemeProvider/hooks/ThemeContext.js +6 -0
  241. package/es/ThemeProvider/hooks/createTheme.d.ts +2 -0
  242. package/es/ThemeProvider/hooks/createTheme.js +38 -0
  243. package/es/ThemeProvider/hooks/index.d.ts +4 -0
  244. package/es/ThemeProvider/hooks/index.js +8 -0
  245. package/es/ThemeProvider/hooks/useTheme.d.ts +1 -0
  246. package/es/ThemeProvider/hooks/useTheme.js +10 -0
  247. package/es/ThemeProvider/index.d.ts +4 -0
  248. package/es/ThemeProvider/index.js +8 -0
  249. package/es/ThemeProvider/utils/constants.d.ts +38 -0
  250. package/es/ThemeProvider/utils/constants.js +40 -0
  251. package/es/ThemeProvider/utils/index.d.ts +2 -0
  252. package/es/ThemeProvider/utils/index.js +2 -0
  253. package/es/ThemeProvider/utils/mountTokens.d.ts +26 -0
  254. package/es/ThemeProvider/utils/mountTokens.js +88 -0
  255. package/es/Toast/FunctionalToast.js +18 -0
  256. package/es/Toast/Toast.css +15 -14
  257. package/es/Toast/Toast.d.ts +2 -2
  258. package/es/Toast/Toast.js +53 -49
  259. package/es/Toast/Toast.types.d.ts +15 -1
  260. package/es/Tooltip/Tooltip.css +91 -0
  261. package/es/Tooltip/Tooltip.d.ts +5 -0
  262. package/es/Tooltip/Tooltip.js +150 -0
  263. package/es/Tooltip/Tooltip.types.d.ts +51 -0
  264. package/es/Tooltip/Tooltip.types.js +1 -0
  265. package/es/Tooltip/index.d.ts +2 -0
  266. package/es/Tooltip/index.js +6 -0
  267. package/es/index.d.ts +7 -0
  268. package/es/index.js +7 -0
  269. package/es/locales/base.d.ts +40 -0
  270. package/es/locales/base.js +0 -0
  271. package/es/locales/en-US.d.ts +3 -0
  272. package/es/locales/en-US.js +50 -0
  273. package/es/locales/hooks/useLocaleText.d.ts +3 -0
  274. package/es/locales/hooks/useLocaleText.js +26 -0
  275. package/es/locales/index.d.ts +5 -0
  276. package/es/locales/index.js +11 -0
  277. package/es/locales/zh-CN.d.ts +3 -0
  278. package/es/locales/zh-CN.js +32 -0
  279. package/es/locales/zh-TW.d.ts +3 -0
  280. package/es/locales/zh-TW.js +32 -0
  281. package/package.json +5 -5
@@ -1,4 +1,7 @@
1
1
  .bui-action-sheet {
2
+ --extra-line-height: var(--bui-action-sheet-extra-line-height, 23px);
3
+ --extra-padding: var(--bui-action-sheet-extra-padding, var(--bui-spacing-xl));
4
+ --extra-magin: var(--bui-action-sheet-extra-magin, 0 var(--bui-spacing-xl));
2
5
  font-family: var(--bui-font-family);
3
6
  }
4
7
  .bui-action-sheet-content {
@@ -17,11 +20,11 @@
17
20
  }
18
21
  .bui-action-sheet-extra {
19
22
  font-size: var(--bui-text-size-1);
20
- line-height: 23px;
21
- padding: var(--bui-spacing-xl);
23
+ line-height: var(--extra-line-height);
24
+ padding: var(--extra-padding);
22
25
  color: var(--bui-color-fg-muted);
23
26
  background: var(--bui-color-bg-view);
24
27
  text-align: center;
25
28
  border-bottom: 1px solid var(--bui-color-border-default);
26
- margin: 0 var(--bui-spacing-xl);
29
+ margin: var(--extra-magin);
27
30
  }
@@ -1,17 +1,21 @@
1
1
  .bui-action-sheet-item {
2
- --font-size: var(--bui-title-size-2);
3
- --color: var(--bui-color-fg-default);
2
+ --padding: var(--bui-action-sheet-item-padding, var(--bui-spacing-xl));
3
+ --font-size: var(--bui-action-sheet-item-font-size, var(--bui-title-size-2));
4
+ --line-height: var(--bui-action-sheet-item-line-height, 24px);
5
+ --color: var(--bui-action-sheet-item-color, var(--bui-color-fg-default));
6
+ --margin: var(--bui-action-sheet-item-margin, 0 var(--bui-spacing-xl));
7
+ --description-line-height: var(--bui-action-sheet-item-description-line-height, 19px);
4
8
  font-family: var(--bui-font-family);
5
9
  position: relative;
6
- padding: var(--bui-spacing-xl);
10
+ padding: var(--padding);
7
11
  cursor: pointer;
8
12
  background: var(--bui-color-bg-view);
9
13
  font-size: var(--font-size);
10
14
  text-align: center;
11
- line-height: 24px;
15
+ line-height: var(--line-height);
12
16
  color: var(--color);
13
17
  border-top: 1px solid var(--bui-color-border-default);
14
- margin: 0 var(--bui-spacing-xl);
18
+ margin: var(--margin);
15
19
  }
16
20
  .bui-action-sheet-item:first-child {
17
21
  border-top: none;
@@ -46,6 +50,6 @@
46
50
  }
47
51
  .bui-action-sheet-item-description {
48
52
  font-size: var(--bui-text-size-2);
49
- line-height: 19px;
53
+ line-height: var(--description-line-height);
50
54
  color: var(--bui-color-fg-subtle);
51
55
  }
@@ -1,10 +1,16 @@
1
1
  .bui-alert {
2
- --bui-alert-marquee-speed: var(--bui-alert-marquee-seed, 10s);
2
+ --content-marquee-speed: var(--bui-alert-content-marquee-speed, 10s);
3
+ --padding: var(--bui-alert-padding, 8px);
4
+ --line-height: var(--bui-alert-line-height, 16px);
5
+ --default-icon-font-size: var(--bui-alert-default-icon-font-size, 15px);
6
+ --action-margin-left: var(--bui-alert-action-margin-left, 16px);
7
+ --icon-margin-right: var(--bui-alert-icon-margin-right, var(--bui-spacing-xs));
8
+ --icon-font-size: var(--bui-alert-icon-font-size, var(--bui-title-size-4));
3
9
  display: flex;
4
- padding: 8px;
10
+ padding: var(--padding);
5
11
  border-radius: var(--bui-shape-radius-default);
6
12
  align-items: center;
7
- line-height: 16px;
13
+ line-height: var(--line-height);
8
14
  font-size: var(--bui-text-size-3);
9
15
  font-family: var(--bui-font-family);
10
16
  }
@@ -49,14 +55,14 @@
49
55
  color: var(--bui-color-warning);
50
56
  }
51
57
  .bui-alert-default-icon {
52
- font-size: 15px;
58
+ font-size: var(--default-icon-font-size);
53
59
  }
54
60
  .bui-alert-content {
55
61
  flex-grow: 1;
56
62
  }
57
63
  .bui-alert-action {
58
64
  flex-shrink: 0;
59
- margin-left: 16px;
65
+ margin-left: var(--action-margin-left);
60
66
  word-wrap: keep-all;
61
67
  font-size: var(--bui-text-size-3);
62
68
  cursor: pointer;
@@ -68,9 +74,9 @@
68
74
  .bui-alert-icon {
69
75
  display: flex;
70
76
  align-items: center;
71
- padding-right: 4px;
77
+ margin-right: var(--icon-margin-right);
72
78
  vertical-align: middle;
73
- font-size: 15px;
79
+ font-size: var(--icon-font-size);
74
80
  cursor: pointer;
75
81
  }
76
82
  .bui-alert-marquee {
@@ -80,7 +86,7 @@
80
86
  display: inline-block;
81
87
  padding-left: 100%;
82
88
  white-space: nowrap;
83
- animation: marquee var(--bui-alert-marquee-speed) linear infinite both;
89
+ animation: marquee var(--content-marquee-speed) linear infinite both;
84
90
  }
85
91
  @keyframes marquee {
86
92
  100% {
@@ -1,8 +1,12 @@
1
1
  .bui-avatar {
2
+ --large-size: var(--bui-avatar-large-size, 60px);
3
+ --medium-size: var(--bui-avatar-medium-size, 42px);
4
+ --small-size: var(--bui-avatar-small-size, 30px);
5
+ --xsmall-size: var(--bui-avatar-xsmall-size, 24px);
2
6
  display: flex;
3
7
  justify-content: center;
4
8
  align-items: center;
5
- font-size: 12px;
9
+ font-size: var(--bui-text-size-3);
6
10
  background-color: var(--bui-color-bg-default);
7
11
  font-family: var(--bui-font-family);
8
12
  }
@@ -12,20 +16,20 @@
12
16
  text-overflow: ellipsis;
13
17
  }
14
18
  .bui-avatar-large {
15
- width: 60px;
16
- height: 60px;
19
+ width: var(--large-size);
20
+ height: var(--large-size);
17
21
  }
18
22
  .bui-avatar-medium {
19
- width: 42px;
20
- height: 42px;
23
+ width: var(--medium-size);
24
+ height: var(--medium-size);
21
25
  }
22
26
  .bui-avatar-small {
23
- width: 30px;
24
- height: 30px;
27
+ width: var(--small-size);
28
+ height: var(--small-size);
25
29
  }
26
30
  .bui-avatar-xsmall {
27
- width: 24px;
28
- height: 24px;
31
+ width: var(--xsmall-size);
32
+ height: var(--xsmall-size);
29
33
  }
30
34
  .bui-avatar-rounded {
31
35
  border-radius: 50%;
@@ -1,31 +1,38 @@
1
1
  .bui-avatar-group {
2
+ --xsmall-margin-left: var(--bui-avatar-group-xsmall-margin-left, -5px);
3
+ --small-margin-left: var(--bui-avatar-group-small-margin-left, -9px);
4
+ --small-box-shadow: var(--bui-avatar-group-small-box-shadow, 0 0 0 1px var(--bui-color-bg-view));
5
+ --medium-margin-left: var(--bui-avatar-group-medium-margin-left, -13px);
6
+ --medium-box-shadow: var(--bui-avatar-group-medium-box-shadow, 0 0 0 2px var(--bui-color-bg-view));
7
+ --large-margin-left: var(--bui-avatar-group-large-margin-left, -21px);
8
+ --large-box-shadow: var(--bui-avatar-group-large-box-shadow, 0 0 0 3px var(--bui-color-bg-view));
2
9
  display: flex;
3
10
  flex-direction: row;
4
11
  font-family: var(--bui-font-family);
5
12
  }
6
13
  .bui-avatar-group-avatar,
7
14
  .bui-avatar-group-extra {
8
- box-shadow: 0 0 0 2px var(--bui-color-bg-view);
15
+ box-shadow: var(--medium-box-shadow);
9
16
  color: var(--bui-color-fg-default);
10
17
  }
11
18
  .bui-avatar-group .bui-avatar-xsmall:not(:first-child) {
12
- margin-left: -5px;
19
+ margin-left: var(--xsmall-margin-left);
13
20
  }
14
21
  .bui-avatar-group .bui-avatar-small {
15
- box-shadow: 0 0 0 1px var(--bui-color-bg-view);
22
+ box-shadow: var(--small-box-shadow);
16
23
  }
17
24
  .bui-avatar-group .bui-avatar-small:not(:first-child) {
18
- margin-left: -9px;
25
+ margin-left: var(--small-margin-left);
19
26
  }
20
27
  .bui-avatar-group .bui-avatar-large {
21
- box-shadow: 0 0 0 3px var(--bui-color-bg-view);
28
+ box-shadow: var(--large-box-shadow);
22
29
  }
23
30
  .bui-avatar-group .bui-avatar-large:not(:first-child) {
24
- margin-left: -21px;
31
+ margin-left: var(--large-margin-left);
25
32
  }
26
33
  .bui-avatar-group .bui-avatar-medium {
27
- box-shadow: 0 0 0 2px var(--bui-color-bg-view);
34
+ box-shadow: var(--medium-box-shadow);
28
35
  }
29
36
  .bui-avatar-group .bui-avatar-medium:not(:first-child) {
30
- margin-left: -13px;
37
+ margin-left: var(--medium-margin-left);
31
38
  }
@@ -1,4 +1,5 @@
1
1
  .bui-backdrop {
2
+ --background-color: var(--bui-backdrop-background-color, rgba(0, 0, 0, 0.68));
2
3
  position: fixed;
3
4
  display: flex;
4
5
  align-items: center;
@@ -7,7 +8,7 @@
7
8
  bottom: 0;
8
9
  left: 0;
9
10
  top: 0;
10
- background-color: rgba(0, 0, 0, 0.68);
11
+ background-color: var(--background-color);
11
12
  }
12
13
  .bui-backdrop-invisible {
13
14
  background-color: transparent;
@@ -1,4 +1,14 @@
1
1
  .bui-badge {
2
+ --badge-position: var(--bui-badge-position, 14%);
3
+ --min-width: var(--bui-badge-min-width, 15px);
4
+ --height: var(--bui-badge-height, 15px);
5
+ --line-height: var(--bui-badge-line-height, 15px);
6
+ --padding: var(--bui-badge-padding, 0 3px);
7
+ --border-radius: var(--bui-badge-border-radius, 8px);
8
+ --outlined-padding: var(--bui-badge-outlined-padding, 0 2px);
9
+ --dot-size: var(--bui-badge-dot-size, 9px);
10
+ --bubble-padding: var(--bui-badge-bubble-padding, 0 5px);
11
+ --bubble-border-radius: var(--bui-badge-bubble-border-radius, 6px 6px 6px 0);
2
12
  display: inline-block;
3
13
  font-family: var(--bui-font-family);
4
14
  }
@@ -8,18 +18,18 @@
8
18
  .bui-badge-position .bui-badge-contained,
9
19
  .bui-badge-position .bui-badge-outlined {
10
20
  position: absolute;
11
- top: 14%;
12
- right: 14%;
21
+ top: var(--badge-position);
22
+ right: var(--badge-position);
13
23
  transform: scale(1) translate(50%, -50%);
14
24
  }
15
25
  .bui-badge-position .bui-badge-dot {
16
- top: 14%;
17
- right: 14%;
26
+ top: var(--badge-position);
27
+ right: var(--badge-position);
18
28
  transform: scale(1) translate(50%, -50%);
19
29
  }
20
30
  .bui-badge-position .bui-badge-bubble {
21
- top: 14%;
22
- right: 14%;
31
+ top: var(--badge-position);
32
+ right: var(--badge-position);
23
33
  transform: scale(1) translate(50%, -50%);
24
34
  }
25
35
  .bui-badge-contained,
@@ -28,18 +38,18 @@
28
38
  box-sizing: border-box;
29
39
  align-items: center;
30
40
  justify-content: center;
31
- min-width: 15px;
32
- height: 15px;
33
- line-height: 15px;
34
- padding: 0 3px;
41
+ min-width: var(--min-width);
42
+ height: var(--height);
43
+ line-height: var(--line-height);
44
+ padding: var(--padding);
35
45
  font-size: var(--bui-text-size-4);
36
- border-radius: 8px;
46
+ border-radius: var(--border-radius);
37
47
  color: var(--bui-color-bg-view);
38
48
  white-space: nowrap;
39
49
  z-index: 1;
40
50
  }
41
51
  .bui-badge-outlined {
42
- padding: 0 2px;
52
+ padding: var(--outlined-padding);
43
53
  }
44
54
  .bui-badge-primary {
45
55
  background-color: var(--bui-color-primary);
@@ -57,15 +67,15 @@
57
67
  background-color: var(--bui-color-danger);
58
68
  }
59
69
  .bui-badge-dot {
60
- width: 9px;
70
+ width: var(--dot-size);
61
71
  min-width: 0;
62
- height: 9px;
72
+ height: var(--dot-size);
63
73
  padding: 0;
64
74
  border-radius: 100%;
65
75
  }
66
76
  .bui-badge-bubble {
67
- border-radius: 6px 6px 6px 0;
68
- padding: 0 5px;
77
+ border-radius: var(--bubble-border-radius);
78
+ padding: var(--bubble-padding);
69
79
  }
70
80
  .bui-badge-outlined {
71
81
  background: var(--bui-color-bg-view);
@@ -91,5 +101,5 @@
91
101
  color: var(--bui-color-danger);
92
102
  }
93
103
  .bui-badge-outlined.bui-badge-bubble {
94
- border-radius: 6px 6px 6px 0;
104
+ border-radius: var(--bubble-border-radius);
95
105
  }
@@ -0,0 +1,34 @@
1
+ .bui-breadcrumb {
2
+ --margin: var(--bui-breadcrumb-margin, 0);
3
+ --padding: var(--bui-breadcrumb-padding, 0);
4
+ --color: var(--bui-breadcrumb-color, rgba(0, 0, 0, 0.45));
5
+ --item-separator-margin: var(--bui-breadcrumb-item-separator-margin, 0 8px);
6
+ --list-li-color: var(--bui-breadcrumb-list-li-color, rgba(0, 0, 0, 0.88));
7
+ margin: var(--margin);
8
+ padding: var(--padding);
9
+ color: var(--color);
10
+ list-style: none;
11
+ font-size: var(--bui-text-size-1);
12
+ line-height: var(--bui-line-height);
13
+ }
14
+ .bui-breadcrumb-list {
15
+ display: flex;
16
+ flex-wrap: wrap;
17
+ margin: var(--margin);
18
+ padding: var(--padding);
19
+ list-style: none;
20
+ }
21
+ .bui-breadcrumb-list a {
22
+ color: var(--color);
23
+ text-decoration: none;
24
+ cursor: pointer;
25
+ }
26
+ .bui-breadcrumb-list li:last-child {
27
+ color: var(--list-li-color);
28
+ }
29
+ .bui-breadcrumb-item {
30
+ cursor: pointer;
31
+ }
32
+ .bui-breadcrumb-item-separator {
33
+ margin: var(--item-separator-margin);
34
+ }
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import { BreadcrumbProps } from './Breadcrumb.types';
3
+ import './Breadcrumb.less';
4
+ declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<BreadcrumbProps<"nav", {}>, "ref"> & React.RefAttributes<HTMLElement>>;
5
+ export default Breadcrumb;
@@ -0,0 +1,128 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
9
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
10
+ var __spreadValues = (a, b) => {
11
+ for (var prop in b || (b = {}))
12
+ if (__hasOwnProp.call(b, prop))
13
+ __defNormalProp(a, prop, b[prop]);
14
+ if (__getOwnPropSymbols)
15
+ for (var prop of __getOwnPropSymbols(b)) {
16
+ if (__propIsEnum.call(b, prop))
17
+ __defNormalProp(a, prop, b[prop]);
18
+ }
19
+ return a;
20
+ };
21
+ var __objRest = (source, exclude) => {
22
+ var target = {};
23
+ for (var prop in source)
24
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
25
+ target[prop] = source[prop];
26
+ if (source != null && __getOwnPropSymbols)
27
+ for (var prop of __getOwnPropSymbols(source)) {
28
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
29
+ target[prop] = source[prop];
30
+ }
31
+ return target;
32
+ };
33
+ var __export = (target, all) => {
34
+ for (var name in all)
35
+ __defProp(target, name, { get: all[name], enumerable: true });
36
+ };
37
+ var __copyProps = (to, from, except, desc) => {
38
+ if (from && typeof from === "object" || typeof from === "function") {
39
+ for (let key of __getOwnPropNames(from))
40
+ if (!__hasOwnProp.call(to, key) && key !== except)
41
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
42
+ }
43
+ return to;
44
+ };
45
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
46
+ // If the importer is in node compatibility mode or this is not an ESM
47
+ // file that has been converted to a CommonJS file using a Babel-
48
+ // compatible transform (i.e. "__esModule" has not been set), then set
49
+ // "default" to the CommonJS "module.exports" for node compatibility.
50
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
51
+ mod
52
+ ));
53
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
54
+ var Breadcrumb_exports = {};
55
+ __export(Breadcrumb_exports, {
56
+ default: () => Breadcrumb_default
57
+ });
58
+ module.exports = __toCommonJS(Breadcrumb_exports);
59
+ var import_react = __toESM(require("react"));
60
+ var import_clsx = __toESM(require("clsx"));
61
+ var import_BreadcrumbItem = __toESM(require("./BreadcrumbItem"));
62
+ var import_Breadcrumb2 = require("./Breadcrumb.css");
63
+ const prefixCls = "bui-breadcrumb";
64
+ const Breadcrumb = /* @__PURE__ */ import_react.default.forwardRef(
65
+ (props, ref) => {
66
+ const _a = props, {
67
+ className,
68
+ style,
69
+ items,
70
+ separator = "/",
71
+ children
72
+ } = _a, others = __objRest(_a, [
73
+ "className",
74
+ "style",
75
+ "items",
76
+ "separator",
77
+ "children"
78
+ ]);
79
+ const renderList = () => {
80
+ if (items && items.length > 0) {
81
+ return items.map((item, index) => {
82
+ const _a2 = item, { title } = _a2, otherItemProps = __objRest(_a2, ["title"]);
83
+ const isLast = index === items.length - 1;
84
+ return /* @__PURE__ */ import_react.default.createElement(
85
+ import_BreadcrumbItem.default,
86
+ __spreadValues({
87
+ key: index,
88
+ separator: isLast ? "" : separator
89
+ }, otherItemProps),
90
+ title
91
+ );
92
+ });
93
+ }
94
+ if (children) {
95
+ const childrenLength = import_react.default.Children.count(children);
96
+ const enhancedChildren = import_react.default.Children.map(
97
+ children,
98
+ (child, index) => {
99
+ if (import_react.default.isValidElement(child)) {
100
+ const itemSeparator = child.props.separator || separator;
101
+ const newProps = {
102
+ separator: index === childrenLength - 1 ? "" : itemSeparator
103
+ };
104
+ return import_react.default.cloneElement(child, newProps);
105
+ }
106
+ return child;
107
+ }
108
+ );
109
+ return enhancedChildren;
110
+ }
111
+ return null;
112
+ };
113
+ if (items == null && children == null) {
114
+ return null;
115
+ }
116
+ return /* @__PURE__ */ import_react.default.createElement(
117
+ "nav",
118
+ __spreadValues({
119
+ className: (0, import_clsx.default)(prefixCls, className),
120
+ style,
121
+ ref
122
+ }, others),
123
+ /* @__PURE__ */ import_react.default.createElement("ol", { className: `${prefixCls}-list` }, renderList())
124
+ );
125
+ }
126
+ );
127
+ Breadcrumb.displayName = "BuiBreadcrumb";
128
+ var Breadcrumb_default = Breadcrumb;
@@ -0,0 +1,49 @@
1
+ import { OverrideProps } from '@bifrostui/types';
2
+ import React from 'react';
3
+ export type BreadcrumbItemProps<D extends React.ElementType = 'li', P = {}> = OverrideProps<{
4
+ props: P & {
5
+ /**
6
+ * 分隔符自定义
7
+ */
8
+ separator?: React.ReactNode;
9
+ /**
10
+ * body 区域内容
11
+ */
12
+ children?: React.ReactNode;
13
+ /**
14
+ * 点击事件
15
+ */
16
+ onClick?: (e: React.SyntheticEvent) => void;
17
+ };
18
+ defaultComponent: D;
19
+ }, D>;
20
+ export type BreadcrumbProps<D extends React.ElementType = 'nav', P = {}> = OverrideProps<{
21
+ props: P & {
22
+ /**
23
+ * 路由栈信息
24
+ */
25
+ items?: Array<{
26
+ /**
27
+ * 名称
28
+ */
29
+ title?: string;
30
+ /**
31
+ * 分隔符自定义
32
+ */
33
+ separator?: React.ReactNode;
34
+ /**
35
+ * 点击事件
36
+ */
37
+ onClick?: (e: React.SyntheticEvent) => void;
38
+ }>;
39
+ /**
40
+ * 分隔符自定义
41
+ */
42
+ separator?: React.ReactNode;
43
+ /**
44
+ * body 区域内容,使用 CollapseItem 进行渲染
45
+ */
46
+ children?: React.ReactNode;
47
+ };
48
+ defaultComponent: D;
49
+ }, D>;
@@ -0,0 +1,15 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __copyProps = (to, from, except, desc) => {
6
+ if (from && typeof from === "object" || typeof from === "function") {
7
+ for (let key of __getOwnPropNames(from))
8
+ if (!__hasOwnProp.call(to, key) && key !== except)
9
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
10
+ }
11
+ return to;
12
+ };
13
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
14
+ var Breadcrumb_types_exports = {};
15
+ module.exports = __toCommonJS(Breadcrumb_types_exports);
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { BreadcrumbItemProps } from './Breadcrumb.types';
3
+ declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<BreadcrumbItemProps<"li", {}>, "ref"> & React.RefAttributes<HTMLLIElement>>;
4
+ export default BreadcrumbItem;
@@ -0,0 +1,78 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
9
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
10
+ var __spreadValues = (a, b) => {
11
+ for (var prop in b || (b = {}))
12
+ if (__hasOwnProp.call(b, prop))
13
+ __defNormalProp(a, prop, b[prop]);
14
+ if (__getOwnPropSymbols)
15
+ for (var prop of __getOwnPropSymbols(b)) {
16
+ if (__propIsEnum.call(b, prop))
17
+ __defNormalProp(a, prop, b[prop]);
18
+ }
19
+ return a;
20
+ };
21
+ var __objRest = (source, exclude) => {
22
+ var target = {};
23
+ for (var prop in source)
24
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
25
+ target[prop] = source[prop];
26
+ if (source != null && __getOwnPropSymbols)
27
+ for (var prop of __getOwnPropSymbols(source)) {
28
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
29
+ target[prop] = source[prop];
30
+ }
31
+ return target;
32
+ };
33
+ var __export = (target, all) => {
34
+ for (var name in all)
35
+ __defProp(target, name, { get: all[name], enumerable: true });
36
+ };
37
+ var __copyProps = (to, from, except, desc) => {
38
+ if (from && typeof from === "object" || typeof from === "function") {
39
+ for (let key of __getOwnPropNames(from))
40
+ if (!__hasOwnProp.call(to, key) && key !== except)
41
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
42
+ }
43
+ return to;
44
+ };
45
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
46
+ // If the importer is in node compatibility mode or this is not an ESM
47
+ // file that has been converted to a CommonJS file using a Babel-
48
+ // compatible transform (i.e. "__esModule" has not been set), then set
49
+ // "default" to the CommonJS "module.exports" for node compatibility.
50
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
51
+ mod
52
+ ));
53
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
54
+ var BreadcrumbItem_exports = {};
55
+ __export(BreadcrumbItem_exports, {
56
+ default: () => BreadcrumbItem_default
57
+ });
58
+ module.exports = __toCommonJS(BreadcrumbItem_exports);
59
+ var import_react = __toESM(require("react"));
60
+ var import_clsx = __toESM(require("clsx"));
61
+ const prefixCls = "bui-breadcrumb-item";
62
+ const BreadcrumbItem = /* @__PURE__ */ import_react.default.forwardRef(
63
+ (props, ref) => {
64
+ const _a = props, { className, style, separator, children, onClick } = _a, others = __objRest(_a, ["className", "style", "separator", "children", "onClick"]);
65
+ return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
66
+ "li",
67
+ __spreadValues({
68
+ className: (0, import_clsx.default)(`${prefixCls}`, className),
69
+ style,
70
+ ref,
71
+ onClick
72
+ }, others),
73
+ children
74
+ ), separator && /* @__PURE__ */ import_react.default.createElement("li", { className: `${prefixCls}-separator` }, separator));
75
+ }
76
+ );
77
+ BreadcrumbItem.displayName = "BuiBreadcrumbItem";
78
+ var BreadcrumbItem_default = BreadcrumbItem;
@@ -0,0 +1,4 @@
1
+ export { default } from './Breadcrumb';
2
+ export { default as Breadcrumb } from './Breadcrumb';
3
+ export { default as BreadcrumbItem } from './BreadcrumbItem';
4
+ export * from './Breadcrumb.types';