@bifrostui/react 1.3.2 → 1.4.0-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 (280) 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 +37 -25
  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 +14 -7
  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/NavBar/NavBar.css +9 -5
  59. package/dist/Picker/Picker.css +25 -29
  60. package/dist/Picker/Picker.js +31 -11
  61. package/dist/Picker/Picker.types.d.ts +4 -0
  62. package/dist/Picker/PickerPanel.css +8 -8
  63. package/dist/Picker/PickerPanel.js +14 -8
  64. package/dist/Picker/utils.d.ts +16 -0
  65. package/dist/Picker/utils.js +32 -2
  66. package/dist/Popover/Popover.css +97 -0
  67. package/dist/Popover/Popover.d.ts +5 -0
  68. package/dist/Popover/Popover.js +195 -0
  69. package/dist/Popover/Popover.types.d.ts +58 -0
  70. package/dist/Popover/Popover.types.js +15 -0
  71. package/dist/Popover/index.d.ts +2 -0
  72. package/dist/Popover/index.js +41 -0
  73. package/dist/Portal/Portal.types.d.ts +4 -0
  74. package/dist/Portal/PortalCore.js +8 -1
  75. package/dist/Progress/Progress.css +9 -7
  76. package/dist/Radio/Radio.css +5 -4
  77. package/dist/Rating/Rating.css +8 -4
  78. package/dist/Select/Select.css +21 -10
  79. package/dist/Select/Select.js +1 -1
  80. package/dist/Select/SelectOption.js +3 -0
  81. package/dist/Skeleton/Skeleton.css +5 -5
  82. package/dist/Slider/Slider.css +29 -18
  83. package/dist/Steps/Step.css +13 -13
  84. package/dist/Steps/Steps.css +14 -7
  85. package/dist/Swiper/Swiper.css +2 -1
  86. package/dist/Switch/Switch.css +31 -16
  87. package/dist/TabBar/TabBar.css +7 -3
  88. package/dist/TabBar/TabBarItem.css +0 -1
  89. package/dist/Tabs/Tab.css +6 -10
  90. package/dist/Tabs/Tabs.css +10 -9
  91. package/dist/Tag/Tag.css +7 -10
  92. package/dist/Tag/TagGroup.css +9 -1
  93. package/dist/TextArea/TextArea.css +23 -13
  94. package/dist/ThemeProvider/ThemeProvider.d.ts +4 -0
  95. package/dist/ThemeProvider/ThemeProvider.js +91 -0
  96. package/dist/ThemeProvider/ThemeProvider.types.d.ts +127 -0
  97. package/dist/ThemeProvider/ThemeProvider.types.js +27 -0
  98. package/dist/ThemeProvider/hooks/ThemeContext.d.ts +4 -0
  99. package/dist/ThemeProvider/hooks/ThemeContext.js +35 -0
  100. package/dist/ThemeProvider/hooks/createTheme.d.ts +2 -0
  101. package/dist/ThemeProvider/hooks/createTheme.js +55 -0
  102. package/dist/ThemeProvider/hooks/index.d.ts +4 -0
  103. package/dist/ThemeProvider/hooks/index.js +43 -0
  104. package/dist/ThemeProvider/hooks/useTheme.d.ts +1 -0
  105. package/dist/ThemeProvider/hooks/useTheme.js +39 -0
  106. package/dist/ThemeProvider/index.d.ts +4 -0
  107. package/dist/ThemeProvider/index.js +45 -0
  108. package/dist/ThemeProvider/utils/constants.d.ts +38 -0
  109. package/dist/ThemeProvider/utils/constants.js +65 -0
  110. package/dist/ThemeProvider/utils/index.d.ts +2 -0
  111. package/dist/ThemeProvider/utils/index.js +23 -0
  112. package/dist/ThemeProvider/utils/mountTokens.d.ts +26 -0
  113. package/dist/ThemeProvider/utils/mountTokens.js +123 -0
  114. package/dist/Toast/FunctionalToast.js +18 -0
  115. package/dist/Toast/Toast.css +18 -20
  116. package/dist/Toast/Toast.d.ts +2 -2
  117. package/dist/Toast/Toast.js +52 -48
  118. package/dist/Toast/Toast.types.d.ts +15 -1
  119. package/dist/Tooltip/Tooltip.css +91 -0
  120. package/dist/Tooltip/Tooltip.d.ts +5 -0
  121. package/dist/Tooltip/Tooltip.js +184 -0
  122. package/dist/Tooltip/Tooltip.types.d.ts +49 -0
  123. package/dist/Tooltip/Tooltip.types.js +15 -0
  124. package/dist/Tooltip/index.d.ts +2 -0
  125. package/dist/Tooltip/index.js +41 -0
  126. package/dist/index.d.ts +7 -0
  127. package/dist/index.js +15 -1
  128. package/dist/locales/base.d.ts +40 -0
  129. package/dist/locales/base.js +15 -0
  130. package/dist/locales/en-US.d.ts +3 -0
  131. package/dist/locales/en-US.js +69 -0
  132. package/dist/locales/hooks/useLocaleText.d.ts +3 -0
  133. package/dist/locales/hooks/useLocaleText.js +43 -0
  134. package/dist/locales/index.d.ts +5 -0
  135. package/dist/locales/index.js +49 -0
  136. package/dist/locales/zh-CN.d.ts +3 -0
  137. package/dist/locales/zh-CN.js +51 -0
  138. package/dist/locales/zh-TW.d.ts +3 -0
  139. package/dist/locales/zh-TW.js +51 -0
  140. package/es/ActionSheet/ActionSheet.css +6 -3
  141. package/es/ActionSheet/ActionSheetItem.css +10 -6
  142. package/es/Alert/index.css +14 -8
  143. package/es/Avatar/Avatar.css +13 -9
  144. package/es/Avatar/AvatarGroup.css +15 -8
  145. package/es/Backdrop/Backdrop.css +2 -1
  146. package/es/Badge/Badge.css +27 -17
  147. package/es/Breadcrumb/Breadcrumb.css +34 -0
  148. package/es/Breadcrumb/Breadcrumb.d.ts +5 -0
  149. package/es/Breadcrumb/Breadcrumb.js +101 -0
  150. package/es/Breadcrumb/Breadcrumb.types.d.ts +49 -0
  151. package/es/Breadcrumb/Breadcrumb.types.js +1 -0
  152. package/es/Breadcrumb/BreadcrumbItem.d.ts +4 -0
  153. package/es/Breadcrumb/BreadcrumbItem.js +51 -0
  154. package/es/Breadcrumb/index.d.ts +4 -0
  155. package/es/Breadcrumb/index.js +9 -0
  156. package/es/Button/Button.css +37 -25
  157. package/es/Calendar/Calendar.css +33 -18
  158. package/es/Calendar/Calendar.d.ts +1 -1
  159. package/es/Calendar/Calendar.js +38 -17
  160. package/es/Calendar/Calendar.types.d.ts +21 -0
  161. package/es/Card/CardFooter.css +2 -1
  162. package/es/Card/CardHeader.css +3 -1
  163. package/es/Checkbox/Checkbox.css +7 -5
  164. package/es/CitySelector/CitySelector.css +29 -15
  165. package/es/CitySelector/CitySelectorCore.js +25 -16
  166. package/es/CitySelector/Selector/index.css +4 -4
  167. package/es/Collapse/Collapse.css +6 -0
  168. package/es/Collapse/Collapse.d.ts +5 -0
  169. package/es/Collapse/Collapse.js +144 -0
  170. package/es/Collapse/Collapse.types.d.ts +16 -0
  171. package/es/Collapse/Collapse.types.js +1 -0
  172. package/es/Collapse/index.d.ts +2 -0
  173. package/es/Collapse/index.js +6 -0
  174. package/es/CollapsePanel/CollapsePanel.css +32 -0
  175. package/es/CollapsePanel/CollapsePanel.d.ts +5 -0
  176. package/es/CollapsePanel/CollapsePanel.js +132 -0
  177. package/es/CollapsePanel/CollapsePanel.types.d.ts +64 -0
  178. package/es/CollapsePanel/CollapsePanel.types.js +1 -0
  179. package/es/CollapsePanel/CollapsePanelItem.d.ts +4 -0
  180. package/es/CollapsePanel/CollapsePanelItem.js +85 -0
  181. package/es/CollapsePanel/index.d.ts +4 -0
  182. package/es/CollapsePanel/index.js +9 -0
  183. package/es/Countdown/Countdown.css +2 -1
  184. package/es/Dialog/Dialog.d.ts +2 -2
  185. package/es/Dialog/Dialog.js +20 -8
  186. package/es/Dialog/Dialog.types.d.ts +12 -1
  187. package/es/Dialog/FunctionalDialog.js +38 -2
  188. package/es/Dialog/index.css +27 -18
  189. package/es/Divider/Divider.css +6 -4
  190. package/es/IconButton/IconButton.css +9 -7
  191. package/es/Image/index.css +2 -1
  192. package/es/Input/Input.css +14 -7
  193. package/es/List/List.css +3 -0
  194. package/es/List/ListItem.css +3 -3
  195. package/es/List/ListItemContent.css +1 -1
  196. package/es/Loading/Loading.css +4 -2
  197. package/es/Modal/Modal.miniapp.d.ts +1 -1
  198. package/es/NavBar/NavBar.css +9 -5
  199. package/es/Picker/Picker.css +25 -29
  200. package/es/Picker/Picker.js +32 -12
  201. package/es/Picker/Picker.types.d.ts +4 -0
  202. package/es/Picker/PickerPanel.css +8 -8
  203. package/es/Picker/PickerPanel.js +14 -8
  204. package/es/Picker/utils.d.ts +16 -0
  205. package/es/Picker/utils.js +29 -1
  206. package/es/Popover/Popover.css +97 -0
  207. package/es/Popover/Popover.d.ts +5 -0
  208. package/es/Popover/Popover.js +172 -0
  209. package/es/Popover/Popover.types.d.ts +58 -0
  210. package/es/Popover/Popover.types.js +1 -0
  211. package/es/Popover/index.d.ts +2 -0
  212. package/es/Popover/index.js +6 -0
  213. package/es/Portal/Portal.types.d.ts +4 -0
  214. package/es/Portal/PortalCore.js +8 -1
  215. package/es/Progress/Progress.css +9 -7
  216. package/es/Radio/Radio.css +5 -4
  217. package/es/Rating/Rating.css +8 -4
  218. package/es/Select/Select.css +21 -10
  219. package/es/Select/Select.js +1 -1
  220. package/es/Select/SelectOption.js +3 -0
  221. package/es/Skeleton/Skeleton.css +5 -5
  222. package/es/Slider/Slider.css +29 -18
  223. package/es/Steps/Step.css +13 -13
  224. package/es/Steps/Steps.css +14 -7
  225. package/es/Swiper/Swiper.css +2 -1
  226. package/es/Switch/Switch.css +31 -16
  227. package/es/TabBar/TabBar.css +7 -3
  228. package/es/TabBar/TabBarItem.css +0 -1
  229. package/es/Tabs/Tab.css +6 -10
  230. package/es/Tabs/Tabs.css +10 -9
  231. package/es/Tag/Tag.css +7 -10
  232. package/es/Tag/TagGroup.css +9 -1
  233. package/es/TextArea/TextArea.css +23 -13
  234. package/es/ThemeProvider/ThemeProvider.d.ts +4 -0
  235. package/es/ThemeProvider/ThemeProvider.js +62 -0
  236. package/es/ThemeProvider/ThemeProvider.types.d.ts +127 -0
  237. package/es/ThemeProvider/ThemeProvider.types.js +1 -0
  238. package/es/ThemeProvider/hooks/ThemeContext.d.ts +4 -0
  239. package/es/ThemeProvider/hooks/ThemeContext.js +6 -0
  240. package/es/ThemeProvider/hooks/createTheme.d.ts +2 -0
  241. package/es/ThemeProvider/hooks/createTheme.js +38 -0
  242. package/es/ThemeProvider/hooks/index.d.ts +4 -0
  243. package/es/ThemeProvider/hooks/index.js +8 -0
  244. package/es/ThemeProvider/hooks/useTheme.d.ts +1 -0
  245. package/es/ThemeProvider/hooks/useTheme.js +10 -0
  246. package/es/ThemeProvider/index.d.ts +4 -0
  247. package/es/ThemeProvider/index.js +8 -0
  248. package/es/ThemeProvider/utils/constants.d.ts +38 -0
  249. package/es/ThemeProvider/utils/constants.js +40 -0
  250. package/es/ThemeProvider/utils/index.d.ts +2 -0
  251. package/es/ThemeProvider/utils/index.js +2 -0
  252. package/es/ThemeProvider/utils/mountTokens.d.ts +26 -0
  253. package/es/ThemeProvider/utils/mountTokens.js +88 -0
  254. package/es/Toast/FunctionalToast.js +18 -0
  255. package/es/Toast/Toast.css +18 -20
  256. package/es/Toast/Toast.d.ts +2 -2
  257. package/es/Toast/Toast.js +53 -49
  258. package/es/Toast/Toast.types.d.ts +15 -1
  259. package/es/Tooltip/Tooltip.css +91 -0
  260. package/es/Tooltip/Tooltip.d.ts +5 -0
  261. package/es/Tooltip/Tooltip.js +161 -0
  262. package/es/Tooltip/Tooltip.types.d.ts +49 -0
  263. package/es/Tooltip/Tooltip.types.js +1 -0
  264. package/es/Tooltip/index.d.ts +2 -0
  265. package/es/Tooltip/index.js +6 -0
  266. package/es/index.d.ts +7 -0
  267. package/es/index.js +7 -0
  268. package/es/locales/base.d.ts +40 -0
  269. package/es/locales/base.js +0 -0
  270. package/es/locales/en-US.d.ts +3 -0
  271. package/es/locales/en-US.js +50 -0
  272. package/es/locales/hooks/useLocaleText.d.ts +3 -0
  273. package/es/locales/hooks/useLocaleText.js +26 -0
  274. package/es/locales/index.d.ts +5 -0
  275. package/es/locales/index.js +11 -0
  276. package/es/locales/zh-CN.d.ts +3 -0
  277. package/es/locales/zh-CN.js +32 -0
  278. package/es/locales/zh-TW.d.ts +3 -0
  279. package/es/locales/zh-TW.js +32 -0
  280. package/package.json +5 -5
@@ -63,55 +63,59 @@ var import_clsx = __toESM(require("clsx"));
63
63
  var import_react = __toESM(require("react"));
64
64
  var import_icons = require("@bifrostui/icons");
65
65
  var import_Fade = __toESM(require("../Fade"));
66
+ var import_ThemeProvider = require("../ThemeProvider");
66
67
  var import_Toast2 = require("./Toast.css");
67
68
  const prefixCls = "bui-toast";
68
- const ToastComponent = /* @__PURE__ */ import_react.default.forwardRef(
69
- (props, ref) => {
70
- const _a = props, {
71
- className,
72
- style,
73
- open,
74
- type,
75
- icon,
76
- message,
77
- position = "center",
78
- disableClick = false
79
- } = _a, others = __objRest(_a, [
80
- "className",
81
- "style",
82
- "open",
83
- "type",
84
- "icon",
85
- "message",
86
- "position",
87
- "disableClick"
88
- ]);
89
- const iconMap = {
90
- fail: /* @__PURE__ */ import_react.default.createElement(import_icons.ErrorCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
91
- loading: /* @__PURE__ */ import_react.default.createElement(import_icons.AccessTimeCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
92
- warning: /* @__PURE__ */ import_react.default.createElement(import_icons.AlertCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
93
- success: /* @__PURE__ */ import_react.default.createElement(import_icons.SuccessCircleFilledBoldIcon, { htmlColor: "#ffffff" })
94
- };
95
- const iconDom = iconMap[type] || icon;
96
- return /* @__PURE__ */ import_react.default.createElement(import_Fade.default, __spreadProps(__spreadValues({}, others), { in: open, appear: false, unmountOnExit: true }), /* @__PURE__ */ import_react.default.createElement(
97
- "div",
98
- {
99
- className: (0, import_clsx.default)(
100
- prefixCls,
101
- `${prefixCls}-${position}`,
102
- {
103
- [`${prefixCls}-icon`]: !!iconDom,
104
- [`${prefixCls}-allow-click`]: !disableClick
105
- },
106
- className
107
- ),
108
- ref,
109
- style
110
- },
111
- iconDom,
112
- message
113
- ));
114
- }
115
- );
69
+ const ToastComponent = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
70
+ const _a = props, {
71
+ className,
72
+ style,
73
+ open,
74
+ type,
75
+ icon,
76
+ message,
77
+ position = "center",
78
+ disableClick = false,
79
+ theme
80
+ } = _a, others = __objRest(_a, [
81
+ "className",
82
+ "style",
83
+ "open",
84
+ "type",
85
+ "icon",
86
+ "message",
87
+ "position",
88
+ "disableClick",
89
+ "theme"
90
+ ]);
91
+ const themeConfig = (0, import_ThemeProvider.useTheme)(theme);
92
+ (0, import_react.useImperativeHandle)(ref, () => {
93
+ return { theme: themeConfig };
94
+ }, []);
95
+ const iconMap = {
96
+ fail: /* @__PURE__ */ import_react.default.createElement(import_icons.ErrorCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
97
+ loading: /* @__PURE__ */ import_react.default.createElement(import_icons.AccessTimeCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
98
+ warning: /* @__PURE__ */ import_react.default.createElement(import_icons.AlertCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
99
+ success: /* @__PURE__ */ import_react.default.createElement(import_icons.SuccessCircleFilledBoldIcon, { htmlColor: "#ffffff" })
100
+ };
101
+ const iconDom = iconMap[type] || icon;
102
+ return /* @__PURE__ */ import_react.default.createElement(import_Fade.default, __spreadProps(__spreadValues({}, others), { in: open, appear: false, unmountOnExit: true }), /* @__PURE__ */ import_react.default.createElement(
103
+ "div",
104
+ {
105
+ className: (0, import_clsx.default)(
106
+ prefixCls,
107
+ `${prefixCls}-${position}`,
108
+ {
109
+ [`${prefixCls}-icon`]: !!iconDom,
110
+ [`${prefixCls}-allow-click`]: !disableClick
111
+ },
112
+ className
113
+ ),
114
+ style
115
+ },
116
+ iconDom,
117
+ message
118
+ ));
119
+ });
116
120
  ToastComponent.displayName = "BuiToast";
117
121
  var Toast_default = ToastComponent;
@@ -1,5 +1,9 @@
1
1
  import React from 'react';
2
2
  import { FadeProps } from '../Fade/Fade.types';
3
+ import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
4
+ export type ToastRef = {
5
+ theme?: ThemeProps;
6
+ };
3
7
  /**
4
8
  * 提示类型
5
9
  */
@@ -36,6 +40,10 @@ export interface ToastProps extends FadeProps {
36
40
  * 自定义图标
37
41
  */
38
42
  icon?: React.ReactNode;
43
+ /**
44
+ * theme 主题定制
45
+ */
46
+ theme?: ThemeProps;
39
47
  /**
40
48
  * 展示Toast时,页面内容是否可以点击
41
49
  * @default false
@@ -62,7 +70,7 @@ export type ToastReturnType = {
62
70
  /**
63
71
  * Toast Instance
64
72
  */
65
- export interface ToastInstance {
73
+ export interface ToastFunction {
66
74
  (options: ToastOptions): ToastReturnType;
67
75
  /**
68
76
  * 警告提示
@@ -85,3 +93,9 @@ export interface ToastInstance {
85
93
  */
86
94
  clear: () => void;
87
95
  }
96
+ export interface ToastInstance extends ToastFunction {
97
+ /**
98
+ * 获取toast静态方法 & contextHolder
99
+ */
100
+ useToast: () => [ToastFunction, React.JSX.Element];
101
+ }
@@ -0,0 +1,91 @@
1
+ .bui-tooltip {
2
+ --arrow-size: var(--bui-tooltip-arrow-size, 8PX);
3
+ --localtion-position: var(--bui-tooltip-localtion-position, 8PX);
4
+ --max-width: var(--bui-tooltip-max-width, 350px);
5
+ --content-min-width: var(--bui-tooltip-content-min-width, 30px);
6
+ --content-min-height: var(--bui-tooltip-content-min-height, 32px);
7
+ --content-padding: var(--bui-tooltip-content-padding, 6px 8px);
8
+ max-width: var(--max-width);
9
+ font-size: var(--bui-text-size-1);
10
+ position: absolute;
11
+ visibility: hidden;
12
+ z-index: var(--bui-z-index-tooltip);
13
+ }
14
+ .bui-tooltip .bui-tooltip-arrow {
15
+ width: 0;
16
+ height: 0;
17
+ position: absolute;
18
+ }
19
+ .bui-tooltip .bui-tooltip-arrow.location-left {
20
+ left: var(--localtion-position);
21
+ }
22
+ .bui-tooltip .bui-tooltip-arrow.location-right {
23
+ right: var(--localtion-position);
24
+ }
25
+ .bui-tooltip .bui-tooltip-arrow.location-top {
26
+ top: var(--localtion-position);
27
+ }
28
+ .bui-tooltip .bui-tooltip-arrow.location-bottom {
29
+ bottom: var(--localtion-position);
30
+ }
31
+ .bui-tooltip.tooltip-top .location-center,
32
+ .bui-tooltip.tooltip-bottom .location-center {
33
+ left: 50%;
34
+ transform: translateX(-50%);
35
+ }
36
+ .bui-tooltip.tooltip-left .location-center,
37
+ .bui-tooltip.tooltip-right .location-center {
38
+ top: 50%;
39
+ transform: translateY(-50%);
40
+ }
41
+ .bui-tooltip.tooltip-top {
42
+ padding-bottom: var(--arrow-size);
43
+ }
44
+ .bui-tooltip.tooltip-top .bui-tooltip-arrow {
45
+ border-left: var(--arrow-size) solid transparent;
46
+ border-right: var(--arrow-size) solid transparent;
47
+ border-top: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
48
+ bottom: 0;
49
+ }
50
+ .bui-tooltip.tooltip-bottom {
51
+ padding-top: var(--arrow-size);
52
+ }
53
+ .bui-tooltip.tooltip-bottom .bui-tooltip-arrow {
54
+ border-left: var(--arrow-size) solid transparent;
55
+ border-right: var(--arrow-size) solid transparent;
56
+ border-bottom: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
57
+ top: 0;
58
+ }
59
+ .bui-tooltip.tooltip-left {
60
+ padding-right: var(--arrow-size);
61
+ }
62
+ .bui-tooltip.tooltip-left .bui-tooltip-arrow {
63
+ border-top: var(--arrow-size) solid transparent;
64
+ border-bottom: var(--arrow-size) solid transparent;
65
+ border-left: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
66
+ right: 0;
67
+ }
68
+ .bui-tooltip.tooltip-right {
69
+ padding-left: var(--arrow-size);
70
+ }
71
+ .bui-tooltip.tooltip-right .bui-tooltip-arrow {
72
+ border-top: var(--arrow-size) solid transparent;
73
+ border-bottom: var(--arrow-size) solid transparent;
74
+ border-right: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
75
+ left: 0;
76
+ }
77
+ .bui-tooltip .bui-tooltip-content {
78
+ min-width: var(--content-min-width);
79
+ min-height: var(--content-min-height);
80
+ padding: var(--content-padding);
81
+ color: var(--bui-color-white);
82
+ text-align: left;
83
+ text-decoration: none;
84
+ word-wrap: break-word;
85
+ background-color: var(--bui-color-bg-alpha-dark-7);
86
+ border-radius: var(--bui-shape-radius-poster);
87
+ box-shadow:
88
+ 0 3px 6px -4px rgba(0, 0, 0, 0.12),
89
+ 0 6px 16px 0 rgba(0, 0, 0, 0.08),
90
+ 0 9px 28px 8px rgba(0, 0, 0, 0.05);
91
+ }
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import { TooltipProps } from './Tooltip.types';
3
+ import './Tooltip.less';
4
+ declare const Tooltip: React.ForwardRefExoticComponent<Omit<TooltipProps<"div", {}>, "ref"> & React.RefAttributes<HTMLElement>>;
5
+ export default Tooltip;
@@ -0,0 +1,184 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
+ var __getProtoOf = Object.getPrototypeOf;
9
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __spreadValues = (a, b) => {
13
+ for (var prop in b || (b = {}))
14
+ if (__hasOwnProp.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ if (__getOwnPropSymbols)
17
+ for (var prop of __getOwnPropSymbols(b)) {
18
+ if (__propIsEnum.call(b, prop))
19
+ __defNormalProp(a, prop, b[prop]);
20
+ }
21
+ return a;
22
+ };
23
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
24
+ var __objRest = (source, exclude) => {
25
+ var target = {};
26
+ for (var prop in source)
27
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
28
+ target[prop] = source[prop];
29
+ if (source != null && __getOwnPropSymbols)
30
+ for (var prop of __getOwnPropSymbols(source)) {
31
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
32
+ target[prop] = source[prop];
33
+ }
34
+ return target;
35
+ };
36
+ var __export = (target, all) => {
37
+ for (var name in all)
38
+ __defProp(target, name, { get: all[name], enumerable: true });
39
+ };
40
+ var __copyProps = (to, from, except, desc) => {
41
+ if (from && typeof from === "object" || typeof from === "function") {
42
+ for (let key of __getOwnPropNames(from))
43
+ if (!__hasOwnProp.call(to, key) && key !== except)
44
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
45
+ }
46
+ return to;
47
+ };
48
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
49
+ // If the importer is in node compatibility mode or this is not an ESM
50
+ // file that has been converted to a CommonJS file using a Babel-
51
+ // compatible transform (i.e. "__esModule" has not been set), then set
52
+ // "default" to the CommonJS "module.exports" for node compatibility.
53
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
54
+ mod
55
+ ));
56
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
57
+ var Tooltip_exports = {};
58
+ __export(Tooltip_exports, {
59
+ default: () => Tooltip_default
60
+ });
61
+ module.exports = __toCommonJS(Tooltip_exports);
62
+ var import_clsx = __toESM(require("clsx"));
63
+ var import_react = __toESM(require("react"));
64
+ var import_utils = require("@bifrostui/utils");
65
+ var import_Portal = __toESM(require("../Portal"));
66
+ var import_Tooltip2 = require("./Tooltip.css");
67
+ const prefixCls = "bui-tooltip";
68
+ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
69
+ const _a = props, {
70
+ className,
71
+ style,
72
+ children,
73
+ title,
74
+ defaultOpen,
75
+ placement = "top",
76
+ trigger,
77
+ onOpenChange,
78
+ open,
79
+ PortalProps
80
+ } = _a, others = __objRest(_a, [
81
+ "className",
82
+ "style",
83
+ "children",
84
+ "title",
85
+ "defaultOpen",
86
+ "placement",
87
+ "trigger",
88
+ "onOpenChange",
89
+ "open",
90
+ "PortalProps"
91
+ ]);
92
+ const controlByUser = typeof open !== "undefined";
93
+ const positionArr = placement.split(/([A-Z])/);
94
+ const direction = positionArr[0];
95
+ let location;
96
+ if (positionArr.length > 1) {
97
+ positionArr.splice(0, 1);
98
+ location = positionArr.join("").toLowerCase();
99
+ } else {
100
+ location = "center";
101
+ }
102
+ const childrenRef = (0, import_react.useRef)();
103
+ const [openStatus, setOpenStatus] = (0, import_react.useState)(defaultOpen);
104
+ const [arrowDirection, setArrowDirection] = (0, import_react.useState)(direction);
105
+ const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
106
+ const [tooltyles, setTooltyles] = (0, import_react.useState)({});
107
+ const ttId = (0, import_utils.useUniqueId)();
108
+ (0, import_react.useEffect)(() => {
109
+ if (!controlByUser)
110
+ return;
111
+ setOpenStatus(open);
112
+ }, [open]);
113
+ const onRootElementMouted = () => {
114
+ const result = (0, import_utils.getStylesAndLocation)({
115
+ childrenRef,
116
+ arrowDirection,
117
+ arrowLocation,
118
+ selector: `[data-id="tt_${ttId}"]`
119
+ });
120
+ if (!result)
121
+ return;
122
+ const { styles, newArrowDirection, newArrowLocation } = result;
123
+ if (newArrowDirection !== arrowDirection) {
124
+ setArrowDirection(newArrowDirection);
125
+ }
126
+ if (newArrowLocation !== arrowLocation) {
127
+ setArrowLocation(newArrowLocation);
128
+ }
129
+ setTooltyles(styles);
130
+ };
131
+ const changeOpenStatus = (event, status) => {
132
+ if (controlByUser)
133
+ return;
134
+ setOpenStatus(status);
135
+ onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
136
+ };
137
+ const triggerClick = (event) => {
138
+ const targetStatus = !openStatus;
139
+ changeOpenStatus(event, targetStatus);
140
+ };
141
+ const hideTooltip = (event) => {
142
+ changeOpenStatus(event, false);
143
+ };
144
+ const showTooltip = (event) => {
145
+ changeOpenStatus(event, true);
146
+ };
147
+ let triggerEventOption;
148
+ if (!controlByUser) {
149
+ triggerEventOption = (0, import_utils.triggerEventTransform)({
150
+ trigger,
151
+ click: triggerClick,
152
+ show: showTooltip,
153
+ hide: hideTooltip
154
+ });
155
+ }
156
+ const childrenOptions = __spreadValues({
157
+ ref: childrenRef
158
+ }, triggerEventOption);
159
+ return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ import_react.default.createElement(
160
+ import_Portal.default,
161
+ __spreadProps(__spreadValues({
162
+ onRootElementMouted
163
+ }, PortalProps), {
164
+ ref
165
+ }),
166
+ /* @__PURE__ */ import_react.default.createElement(
167
+ "div",
168
+ __spreadValues({
169
+ className: (0, import_clsx.default)(prefixCls, className, `tooltip-${arrowDirection}`),
170
+ style: __spreadValues(__spreadValues({}, style), tooltyles),
171
+ "data-id": `tt_${ttId}`
172
+ }, others),
173
+ /* @__PURE__ */ import_react.default.createElement(
174
+ "div",
175
+ {
176
+ className: (0, import_clsx.default)("bui-tooltip-arrow", `location-${arrowLocation}`)
177
+ }
178
+ ),
179
+ /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-tooltip-content" }, title)
180
+ )
181
+ ) : null, import_react.default.isValidElement(children) ? import_react.default.cloneElement(children, childrenOptions) : children);
182
+ });
183
+ Tooltip.displayName = "BuiTooltip";
184
+ var Tooltip_default = Tooltip;
@@ -0,0 +1,49 @@
1
+ import React from 'react';
2
+ import { OverrideProps } from '@bifrostui/types';
3
+ import { PortalCoreProps } from '../Portal/Portal.types';
4
+ type triggerType = 'click' | 'hover';
5
+ export type TooltipProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
6
+ props: P & {
7
+ /**
8
+ * 气泡浮层显示内容
9
+ */
10
+ title?: string;
11
+ /**
12
+ * 默认是否显隐
13
+ * @default false
14
+ */
15
+ defaultOpen?: boolean;
16
+ /**
17
+ * 用于手动控制气泡浮层显隐
18
+ */
19
+ open?: boolean;
20
+ /**
21
+ * 气泡框位置
22
+ * @default 'top'
23
+ */
24
+ placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
25
+ /**
26
+ * 触发行为
27
+ * - click: 点击触发
28
+ * - hover: hover触发
29
+ * - 或者是他们的数组
30
+ * @default 'click'
31
+ */
32
+ trigger?: triggerType | triggerType[];
33
+ /**
34
+ * Portal组件的属性
35
+ */
36
+ PortalProps?: PortalCoreProps;
37
+ /**
38
+ * 点击事件回调方法
39
+ * - event 触发事件
40
+ * - data.open 浮层显隐状态
41
+ * @returns
42
+ */
43
+ onOpenChange?: (event: React.SyntheticEvent, data: {
44
+ open: boolean;
45
+ }) => void;
46
+ };
47
+ defaultComponent: D;
48
+ }, D>;
49
+ export {};
@@ -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 Tooltip_types_exports = {};
15
+ module.exports = __toCommonJS(Tooltip_types_exports);
@@ -0,0 +1,2 @@
1
+ export { default as Tooltip, default } from './Tooltip';
2
+ export * from './Tooltip.types';
@@ -0,0 +1,41 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var Tooltip_exports = {};
30
+ __export(Tooltip_exports, {
31
+ Tooltip: () => import_Tooltip.default,
32
+ default: () => import_Tooltip.default
33
+ });
34
+ module.exports = __toCommonJS(Tooltip_exports);
35
+ var import_Tooltip = __toESM(require("./Tooltip"));
36
+ __reExport(Tooltip_exports, require("./Tooltip.types"), module.exports);
37
+ // Annotate the CommonJS export names for ESM import in node:
38
+ 0 && (module.exports = {
39
+ Tooltip,
40
+ ...require("./Tooltip.types")
41
+ });
package/dist/index.d.ts CHANGED
@@ -7,6 +7,7 @@ export * from './Button';
7
7
  export * from './Calendar';
8
8
  export * from './Card';
9
9
  export * from './Checkbox';
10
+ export * from './Collapse';
10
11
  export * from './Divider';
11
12
  export * from './Drawer';
12
13
  export * from './Fade';
@@ -15,6 +16,7 @@ export * from './Image';
15
16
  export * from './Input';
16
17
  export * from './List';
17
18
  export * from './Modal';
19
+ export * from './Popover';
18
20
  export * from './Portal';
19
21
  export * from './Progress';
20
22
  export * from './Radio';
@@ -32,11 +34,16 @@ export * from './Tabs';
32
34
  export * from './Tag';
33
35
  export * from './TextArea';
34
36
  export * from './Transition';
37
+ export * from './Tooltip';
35
38
  export * from './NavBar';
36
39
  export * from './Loading';
37
40
  export * from './TabBar';
38
41
  export * from './Countdown';
39
42
  export * from './CitySelector';
40
43
  export * from './Picker';
44
+ export * from './CollapsePanel';
45
+ export * from './Breadcrumb';
41
46
  export * from './Toast';
42
47
  export * from './Dialog';
48
+ export * from './ThemeProvider';
49
+ export * from './locales';
package/dist/index.js CHANGED
@@ -23,6 +23,7 @@ __reExport(src_exports, require("./Button"), module.exports);
23
23
  __reExport(src_exports, require("./Calendar"), module.exports);
24
24
  __reExport(src_exports, require("./Card"), module.exports);
25
25
  __reExport(src_exports, require("./Checkbox"), module.exports);
26
+ __reExport(src_exports, require("./Collapse"), module.exports);
26
27
  __reExport(src_exports, require("./Divider"), module.exports);
27
28
  __reExport(src_exports, require("./Drawer"), module.exports);
28
29
  __reExport(src_exports, require("./Fade"), module.exports);
@@ -31,6 +32,7 @@ __reExport(src_exports, require("./Image"), module.exports);
31
32
  __reExport(src_exports, require("./Input"), module.exports);
32
33
  __reExport(src_exports, require("./List"), module.exports);
33
34
  __reExport(src_exports, require("./Modal"), module.exports);
35
+ __reExport(src_exports, require("./Popover"), module.exports);
34
36
  __reExport(src_exports, require("./Portal"), module.exports);
35
37
  __reExport(src_exports, require("./Progress"), module.exports);
36
38
  __reExport(src_exports, require("./Radio"), module.exports);
@@ -48,14 +50,19 @@ __reExport(src_exports, require("./Tabs"), module.exports);
48
50
  __reExport(src_exports, require("./Tag"), module.exports);
49
51
  __reExport(src_exports, require("./TextArea"), module.exports);
50
52
  __reExport(src_exports, require("./Transition"), module.exports);
53
+ __reExport(src_exports, require("./Tooltip"), module.exports);
51
54
  __reExport(src_exports, require("./NavBar"), module.exports);
52
55
  __reExport(src_exports, require("./Loading"), module.exports);
53
56
  __reExport(src_exports, require("./TabBar"), module.exports);
54
57
  __reExport(src_exports, require("./Countdown"), module.exports);
55
58
  __reExport(src_exports, require("./CitySelector"), module.exports);
56
59
  __reExport(src_exports, require("./Picker"), module.exports);
60
+ __reExport(src_exports, require("./CollapsePanel"), module.exports);
61
+ __reExport(src_exports, require("./Breadcrumb"), module.exports);
57
62
  __reExport(src_exports, require("./Toast"), module.exports);
58
63
  __reExport(src_exports, require("./Dialog"), module.exports);
64
+ __reExport(src_exports, require("./ThemeProvider"), module.exports);
65
+ __reExport(src_exports, require("./locales"), module.exports);
59
66
  // Annotate the CommonJS export names for ESM import in node:
60
67
  0 && (module.exports = {
61
68
  ...require("./ActionSheet"),
@@ -67,6 +74,7 @@ __reExport(src_exports, require("./Dialog"), module.exports);
67
74
  ...require("./Calendar"),
68
75
  ...require("./Card"),
69
76
  ...require("./Checkbox"),
77
+ ...require("./Collapse"),
70
78
  ...require("./Divider"),
71
79
  ...require("./Drawer"),
72
80
  ...require("./Fade"),
@@ -75,6 +83,7 @@ __reExport(src_exports, require("./Dialog"), module.exports);
75
83
  ...require("./Input"),
76
84
  ...require("./List"),
77
85
  ...require("./Modal"),
86
+ ...require("./Popover"),
78
87
  ...require("./Portal"),
79
88
  ...require("./Progress"),
80
89
  ...require("./Radio"),
@@ -92,12 +101,17 @@ __reExport(src_exports, require("./Dialog"), module.exports);
92
101
  ...require("./Tag"),
93
102
  ...require("./TextArea"),
94
103
  ...require("./Transition"),
104
+ ...require("./Tooltip"),
95
105
  ...require("./NavBar"),
96
106
  ...require("./Loading"),
97
107
  ...require("./TabBar"),
98
108
  ...require("./Countdown"),
99
109
  ...require("./CitySelector"),
100
110
  ...require("./Picker"),
111
+ ...require("./CollapsePanel"),
112
+ ...require("./Breadcrumb"),
101
113
  ...require("./Toast"),
102
- ...require("./Dialog")
114
+ ...require("./Dialog"),
115
+ ...require("./ThemeProvider"),
116
+ ...require("./locales")
103
117
  });