@bifrostui/react 1.4.4 → 1.4.5-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 (23) hide show
  1. package/dist/ActionSheet/ActionSheet.css +2 -2
  2. package/dist/Button/Button.css +37 -55
  3. package/dist/Popover/Popover.css +5 -5
  4. package/dist/Radio/Radio.css +0 -1
  5. package/dist/Tabs/Tab.css +9 -9
  6. package/dist/Tabs/Tab.js +4 -4
  7. package/dist/Tabs/Tabs.css +25 -19
  8. package/dist/Tabs/Tabs.js +25 -25
  9. package/dist/Tabs/Tabs.types.d.ts +0 -6
  10. package/dist/Tag/Tag.css +1 -1
  11. package/dist/Tooltip/Tooltip.css +5 -5
  12. package/es/ActionSheet/ActionSheet.css +2 -2
  13. package/es/Button/Button.css +37 -55
  14. package/es/Popover/Popover.css +5 -5
  15. package/es/Radio/Radio.css +0 -1
  16. package/es/Tabs/Tab.css +9 -9
  17. package/es/Tabs/Tab.js +4 -4
  18. package/es/Tabs/Tabs.css +25 -19
  19. package/es/Tabs/Tabs.js +25 -25
  20. package/es/Tabs/Tabs.types.d.ts +0 -6
  21. package/es/Tag/Tag.css +1 -1
  22. package/es/Tooltip/Tooltip.css +5 -5
  23. package/package.json +6 -6
package/dist/ActionSheet/ActionSheet.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .bui-action-sheet {
2
2
  --extra-line-height: var(--bui-action-sheet-extra-line-height, 23px);
3
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));
4
+ --extra-margin: var(--bui-action-sheet-extra-margin, 0 var(--bui-spacing-xl));
5
5
  font-family: var(--bui-font-family);
6
6
  }
7
7
  .bui-action-sheet-content {
@@ -26,5 +26,5 @@
26
26
  background: var(--bui-color-bg-view);
27
27
  text-align: center;
28
28
  border-bottom: 1px solid var(--bui-color-border-default);
29
- margin: var(--extra-magin);
29
+ margin: var(--extra-margin);
30
30
  }
package/dist/Button/Button.css CHANGED
@@ -1,27 +1,16 @@
1
1
  .bui-btn {
2
- --border-radius: var(--bui-button-border-radius, 100px);
3
- --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
4
- --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
5
- --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
6
- --height: var(--bui-button-height, 27px);
7
- --icon-start-margin-right: var(--bui-button-icon-start-margin-right, var(--bui-spacing-xs));
8
- --icon-start-margin-left: var(--bui-button-icon-start-margin-left, var(--bui-spacing-xs));
9
- --default-border: var(--bui-button-default-border, 1px solid transparent);
10
- --light-border: var(--bui-button-light-border, 1px solid transparent);
11
- --outlined-default-border: var(--bui-button-outlined-default-border, 1px solid var(--bui-color-neutral-4));
12
- --disabled-opacity: var(--bui-button-disabled-opacity, 0.5);
13
- --small-padding: var(--bui-button-small-padding, 0 11px);
14
- --small-height: var(--bui-button-small-height, 24px);
15
- --medium-padding: var(--bui-button-medium-padding, 0 14px);
16
- --large-padding: var(--bui-button-large-padding, 0 14px);
17
- --large-height: var(--bui-button-large-height, 33px);
18
- --full-font-size: var(--bui-button-full-font-size, var(--bui-title-size-4));
19
- --full-height: var(--bui-button-full-height, 42px);
20
- border: var(--default-border);
2
+ --bui-btn-font-size: var(--bui-text-size-3);
3
+ --bui-btn-font-weight: var(--bui-font-weight-medium);
4
+ --bui-btn-border-radius: 120px;
5
+ --bui-btn-height: 27px;
6
+ --bui-btn-color: var(--bui-color-fg-muted);
7
+ --bui-btn-bg: var(--bui-color-bg-view);
8
+ --bui-btn-opacity: 1;
9
+ --bui-btn-padding: 0 14px;
10
+ --bui-btn-border: 0;
11
+ --bui-btn-font-family: var(--bui-font-family);
21
12
  outline: 0;
22
- background-color: transparent;
23
13
  cursor: pointer;
24
- color: var(--text-color);
25
14
  box-sizing: border-box;
26
15
  position: relative;
27
16
  display: inline-flex;
@@ -29,12 +18,17 @@
29
18
  align-items: center;
30
19
  justify-content: center;
31
20
  white-space: nowrap;
32
- font-size: var(--bui-text-size-3);
33
- font-weight: var(--bui-font-weight-medium);
34
- border-radius: var(--border-radius);
35
- height: var(--height);
21
+ color: var(--bui-btn-color);
22
+ background: var(--bui-btn-bg);
23
+ font-size: var(--bui-btn-font-size);
24
+ font-weight: var(--bui-btn-font-weight);
25
+ border: var(--bui-btn-border);
26
+ border-radius: var(--bui-btn-border-radius);
27
+ height: var(--bui-btn-height);
28
+ padding: var(--bui-btn-padding);
36
29
  line-height: var(--bui-line-height);
37
- font-family: var(--bui-font-family);
30
+ font-family: var(--bui-btn-font-family);
31
+ opacity: var(--bui-btn-opacity);
38
32
  }
39
33
  @keyframes spin {
40
34
  from {
@@ -68,36 +62,31 @@
68
62
  display: inline-flex;
69
63
  align-self: center;
70
64
  flex-shrink: 0;
71
- margin-right: var(--icon-start-margin-right);
65
+ margin-right: var(--bui-spacing-xs);
72
66
  }
73
67
  .bui-btn-icon-end {
74
68
  display: inline-flex;
75
69
  align-self: center;
76
70
  flex-shrink: 0;
77
- margin-left: var(--icon-start-margin-left);
71
+ margin-left: var(--bui-spacing-xs);
78
72
  }
79
73
  .bui-btn-disabled {
80
74
  pointer-events: none;
81
- opacity: var(--disabled-opacity);
75
+ --bui-btn-opacity: 0.5;
82
76
  }
83
77
  .bui-btn-small {
84
- font-size: var(--bui-text-size-4);
85
- padding: var(--small-padding);
86
- height: var(--small-height);
87
- }
88
- .bui-btn-medium {
89
- padding: var(--medium-padding);
90
- height: var(--height);
78
+ --bui-btn-height: 24px;
79
+ --bui-btn-font-size: var(--bui-text-size-4);
80
+ --bui-btn-padding: 0 11px;
91
81
  }
92
82
  .bui-btn-large {
93
- font-size: var(--bui-text-size-2);
94
- padding: var(--large-padding);
95
- height: var(--large-height);
83
+ --bui-btn-height: 33px;
84
+ --bui-btn-font-size: var(--bui-text-size-2);
96
85
  }
97
86
  .bui-btn-full {
98
- font-size: var(--full-font-size);
87
+ --bui-btn-height: 42px;
88
+ --bui-btn-font-size: var(--bui-title-size-4);
99
89
  width: 100%;
100
- height: var(--full-height);
101
90
  }
102
91
  .bui-btn-text.bui-btn-primary {
103
92
  color: var(--bui-color-primary);
@@ -118,7 +107,7 @@
118
107
  color: var(--bui-color-vip);
119
108
  }
120
109
  .bui-btn-contained {
121
- background-color: var(--bg-color);
110
+ --bui-btn-bg: var(--bui-color-neutral-5);
122
111
  }
123
112
  .bui-btn-contained.bui-btn-primary {
124
113
  color: var(--bui-color-white);
@@ -161,15 +150,15 @@
161
150
  var(--bui-color-danger-end) 100%);
162
151
  }
163
152
  .bui-btn-contained.bui-btn-vip {
164
- color: #582331;
165
- background-image:
153
+ --bui-btn-color: #582331;
154
+ --bui-btn-bg:
166
155
  linear-gradient(
167
156
  90deg,
168
157
  var(--bui-color-vip-start) 3%,
169
158
  var(--bui-color-vip-end) 100%);
170
159
  }
171
160
  .bui-btn-outlined {
172
- border: var(--outlined-default-border);
161
+ --bui-btn-border: 1px solid var(--bui-color-neutral-4);
173
162
  }
174
163
  .bui-btn-outlined.bui-btn-primary {
175
164
  color: var(--bui-color-primary);
@@ -196,42 +185,35 @@
196
185
  border-color: var(--bui-color-vip);
197
186
  }
198
187
  .bui-btn-light {
199
- background-image: none;
200
- background-color: var(--bui-color-gray-light);
201
- border: var(--light-border);
188
+ --bui-btn-bg: var(--bui-color-gray-light);
202
189
  }
203
190
  .bui-btn-light.bui-btn-warning {
204
191
  background-image: none;
205
- border: var(--light-border);
206
192
  color: var(--bui-color-warning);
207
193
  background-color: var(--bui-color-warning-light);
208
194
  }
209
195
  .bui-btn-light.bui-btn-primary {
210
196
  background-image: none;
211
- border: var(--light-border);
212
197
  color: var(--bui-color-primary);
213
198
  background-color: var(--bui-color-primary-light);
214
199
  }
215
200
  .bui-btn-light.bui-btn-info {
216
201
  background-image: none;
217
- border: var(--light-border);
218
202
  color: var(--bui-color-info);
219
203
  background-color: var(--bui-color-info-light);
220
204
  }
221
205
  .bui-btn-light.bui-btn-success {
222
206
  background-image: none;
223
- border: var(--light-border);
224
207
  color: var(--bui-color-success);
225
208
  background-color: var(--bui-color-success-light);
226
209
  }
227
210
  .bui-btn-light.bui-btn-danger {
228
211
  background-image: none;
229
- border: var(--light-border);
230
212
  color: var(--bui-color-danger);
231
213
  background-color: var(--bui-color-danger-light);
232
214
  }
233
215
  .bui-btn-light.bui-btn-vip {
234
- color: var(--bui-color-vip);
235
216
  position: relative;
236
- background-color: rgba(255, 134, 110, 0.3);
217
+ --bui-btn-color: var(--bui-color-vip);
218
+ --bui-btn-bg: rgba(255, 134, 110, 0.3);
237
219
  }
package/dist/Popover/Popover.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .bui-popover {
2
2
  --arrow-size: var(--bui-popover-arrow-size, 8PX);
3
- --localtion-position: var(--bui-popover-localtion-position, 8PX);
3
+ --location-position: var(--bui-popover-location-position, 8PX);
4
4
  --max-width: var(--bui-popover-max-width, 350px);
5
5
  --content-min-width: var(--bui-popover-content-min-width, 30px);
6
6
  --content-padding: var(--bui-popover-content-padding, 6px 8px);
@@ -16,16 +16,16 @@
16
16
  position: absolute;
17
17
  }
18
18
  .bui-popover .bui-popover-arrow.location-left {
19
- left: var(--localtion-position);
19
+ left: var(--location-position);
20
20
  }
21
21
  .bui-popover .bui-popover-arrow.location-right {
22
- right: var(--localtion-position);
22
+ right: var(--location-position);
23
23
  }
24
24
  .bui-popover .bui-popover-arrow.location-top {
25
- top: var(--localtion-position);
25
+ top: var(--location-position);
26
26
  }
27
27
  .bui-popover .bui-popover-arrow.location-bottom {
28
- bottom: var(--localtion-position);
28
+ bottom: var(--location-position);
29
29
  }
30
30
  .bui-popover.popover-top .location-center,
31
31
  .bui-popover.popover-bottom .location-center {
package/dist/Radio/Radio.css CHANGED
@@ -1,7 +1,6 @@
1
1
  .bui-radio {
2
2
  --label-color: var(--bui-radio-label-color, var(--bui-color-fg-default));
3
3
  --label-font-size: var(--bui-radio-label-font-size, var(--bui-text-size-1));
4
- --icon-font-size: var(--bui-radio-icon-font-size, var(--bui-title-size-2));
5
4
  --icon-padding: var(--bui-radio-icon-padding, 5px);
6
5
  display: inline-flex;
7
6
  align-items: center;
package/dist/Tabs/Tab.css CHANGED
@@ -4,31 +4,31 @@
4
4
  justify-content: center;
5
5
  white-space: nowrap;
6
6
  width: min-content;
7
- height: var(--tab-height);
7
+ height: var(--bui-tab-height);
8
8
  box-sizing: border-box;
9
9
  position: relative;
10
10
  cursor: pointer;
11
- font-size: var(--font-size);
11
+ font-size: var(--bui-tab-font-size);
12
12
  line-height: var(--bui-line-height);
13
- color: var(--color);
14
- padding: var(--tab-padding);
13
+ color: var(--bui-tabs-color);
14
+ padding: var(--bui-tab-padding);
15
15
  font-family: var(--bui-font-family);
16
16
  }
17
17
  .bui-tab-active {
18
- font-size: var(--font-size);
18
+ font-size: var(--bui-tab-active-font-size);
19
19
  line-height: var(--bui-line-height);
20
- font-weight: var(--bui-font-weight-medium);
21
- color: var(--active-color);
20
+ font-weight: var(--bui-tabs-active-font-weight);
21
+ color: var(--bui-tabs-active-color);
22
22
  }
23
23
  .bui-tab-center {
24
24
  flex: 1 0 0;
25
25
  margin: 0 auto;
26
26
  }
27
27
  .bui-tab-miniapp-active {
28
- font-size: var(--font-size);
28
+ font-size: var(--bui-tab-font-size);
29
29
  line-height: 1.5;
30
30
  font-weight: var(--bui-font-weight-medium);
31
- color: var(--active-color);
31
+ color: var(--bui-tabs-active-color);
32
32
  position: relative;
33
33
  }
34
34
  .bui-tab-miniapp-active-line {
package/dist/Tabs/Tab.js CHANGED
@@ -65,8 +65,11 @@ var import_react = __toESM(require("react"));
65
65
  var import_TabsContext = __toESM(require("./TabsContext"));
66
66
  var import_Tab2 = require("./Tab.css");
67
67
  const prefixCls = "bui-tab";
68
+ const defaultProps = {
69
+ disabled: false
70
+ };
68
71
  const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
69
- const _a = props, { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
72
+ const _a = __spreadValues(__spreadValues({}, defaultProps), props), { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
70
73
  const tabsContext = import_react.default.useContext(import_TabsContext.default);
71
74
  const { value, align, triggerChange } = tabsContext;
72
75
  return /* @__PURE__ */ import_react.default.createElement(
@@ -104,7 +107,4 @@ const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
104
107
  );
105
108
  });
106
109
  Tab.displayName = "BuiTab";
107
- Tab.defaultProps = {
108
- disabled: false
109
- };
110
110
  var Tab_default = Tab;
package/dist/Tabs/Tabs.css CHANGED
@@ -1,20 +1,25 @@
1
1
  .bui-tabs {
2
- --height: var(--bui-tabs-height, 39px);
3
- --color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
4
- --active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
5
- --line-color: var(--bui-tabs-line-color, var(--bui-color-primary));
6
- --line-height: var(--bui-tabs-line-height, 3PX);
7
- --line-width: var(--bui-tabs-line-width, 18px);
8
- --mask-width: var(--bui-tabs-mask-width, 12px);
9
- --mask-height: var(--bui-tabs-mask-height, 100%);
10
- --tab-height: var(--bui-tab-height, 100%);
11
- --tab-padding: var(--bui-tab-padding, var(--bui-spacing-lg) var(--bui-spacing-lg) 10px);
12
- --font-size: var(--bui-tab-font-size, var(--bui-text-size-1));
2
+ --bui-tabs-height: 39px;
3
+ --bui-tabs-color: var(--bui-color-fg-subtle);
4
+ --bui-tabs-active-color: var(--bui-color-fg-default);
5
+ --bui-tabs-line-color: var(--bui-color-primary);
6
+ --bui-tabs-line-height: 3px;
7
+ --bui-tabs-line-width: 18px;
8
+ --bui-tabs-line-border-radius: 3px;
9
+ --bui-tabs-line-bottom: 0;
10
+ --bui-tabs-line-box-shadow: none;
11
+ --bui-tabs-mask-width: 12px;
12
+ --bui-tabs-mask-height: 100%;
13
+ --bui-tab-height: 100%;
14
+ --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
15
+ --bui-tab-font-size: var(--bui-text-size-1);
16
+ --bui-tab-active-font-size: var(--bui-text-size-1);
17
+ --bui-tabs-active-font-weight: var(--bui-font-weight-medium);
13
18
  position: relative;
14
19
  font-family: var(--bui-font-family);
15
20
  }
16
21
  .bui-tabs-tabs {
17
- height: var(--height);
22
+ height: var(--bui-tabs-height);
18
23
  display: flex;
19
24
  flex-wrap: nowrap;
20
25
  justify-content: flex-start;
@@ -28,12 +33,13 @@
28
33
  }
29
34
  .bui-tabs-tabline {
30
35
  position: absolute;
31
- width: var(--line-width);
32
- bottom: 0;
33
- height: var(--line-height);
36
+ width: var(--bui-tabs-line-width);
37
+ bottom: var(--bui-tabs-line-bottom);
38
+ height: var(--bui-tabs-line-height);
34
39
  color: var(--bui-color-primary);
35
- background: var(--line-color);
36
- border-radius: var(--bui-shape-radius-label);
40
+ background: var(--bui-tabs-line-color);
41
+ border-radius: var(--bui-tabs-line-border-radius);
42
+ box-shadow: var(--bui-tabs-line-box-shadow);
37
43
  }
38
44
  .bui-tabs-content {
39
45
  padding: var(--bui-spacing-lg);
@@ -43,8 +49,8 @@
43
49
  top: 0;
44
50
  bottom: 0;
45
51
  z-index: 1;
46
- width: var(--mask-width);
47
- height: var(--mask-height);
52
+ width: var(--bui-tabs-mask-width);
53
+ height: var(--bui-tabs-mask-height);
48
54
  pointer-events: none;
49
55
  }
50
56
  .bui-tabs-mask-left {
package/dist/Tabs/Tabs.js CHANGED
@@ -64,8 +64,12 @@ var import_TabsContext = require("./TabsContext");
64
64
  var import_bound = __toESM(require("./utils/bound"));
65
65
  var import_Tabs2 = require("./Tabs.css");
66
66
  const prefixCls = "bui-tabs";
67
+ const defaultProps = {
68
+ align: "center",
69
+ tabs: []
70
+ };
67
71
  const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
68
- const _a = props, { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
72
+ const _a = __spreadValues(__spreadValues({}, defaultProps), props), { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
69
73
  const [active, setActive] = (0, import_react.useState)("");
70
74
  const tabsRef = (0, import_react.useRef)(null);
71
75
  const activeLineRef = (0, import_react.useRef)(null);
@@ -130,25 +134,6 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
130
134
  tabsRef.current.scrollLeft = nextScrollLeft;
131
135
  }
132
136
  };
133
- (0, import_react.useEffect)(() => {
134
- setActive(value);
135
- }, [value]);
136
- (0, import_react.useLayoutEffect)(() => {
137
- animate({ transitionInUse: false });
138
- }, []);
139
- (0, import_react.useEffect)(() => {
140
- const handleResize = (0, import_utils.debounce)(() => {
141
- animate({ transitionInUse: true });
142
- updateMask();
143
- }, 100);
144
- window.addEventListener("resize", handleResize);
145
- return () => {
146
- window.removeEventListener("resize", handleResize);
147
- };
148
- }, [active]);
149
- (0, import_utils.useDidMountEffect)(() => {
150
- animate({ transitionInUse: true });
151
- }, [active, tabs, children]);
152
137
  const updateMask = (0, import_react.useMemo)(
153
138
  () => (0, import_utils.throttle)(
154
139
  () => {
@@ -171,6 +156,25 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
171
156
  ),
172
157
  []
173
158
  );
159
+ (0, import_react.useEffect)(() => {
160
+ setActive(value);
161
+ }, [value]);
162
+ (0, import_react.useLayoutEffect)(() => {
163
+ animate({ transitionInUse: false });
164
+ }, []);
165
+ (0, import_react.useEffect)(() => {
166
+ const handleResize = (0, import_utils.debounce)(() => {
167
+ animate({ transitionInUse: true });
168
+ updateMask();
169
+ }, 100);
170
+ window.addEventListener("resize", handleResize);
171
+ return () => {
172
+ window.removeEventListener("resize", handleResize);
173
+ };
174
+ }, [active]);
175
+ (0, import_utils.useDidMountEffect)(() => {
176
+ animate({ transitionInUse: true });
177
+ }, [active, tabs, children]);
174
178
  (0, import_react.useLayoutEffect)(() => {
175
179
  updateMask();
176
180
  }, []);
@@ -215,7 +219,7 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
215
219
  "bui-tabline-invisible": import_utils.isMini || !lineData.hasActiveTab
216
220
  }),
217
221
  style: {
218
- transition: lineData.transitionInUse ? "transform 0.25s ease-in-out" : void 0,
222
+ transition: lineData.transitionInUse ? "transform 0.3s ease-in-out" : void 0,
219
223
  transform: `translate3d(${lineData.x}px, 0px, 0px)`
220
224
  }
221
225
  }
@@ -232,8 +236,4 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
232
236
  }), children)));
233
237
  });
234
238
  Tabs.displayName = "BuiTabs";
235
- Tabs.defaultProps = {
236
- align: "center",
237
- tabs: []
238
- };
239
239
  var Tabs_default = Tabs;
package/dist/Tabs/Tabs.types.d.ts CHANGED
@@ -3,9 +3,6 @@ import React, { SyntheticEvent } from 'react';
3
3
  export interface TabHeaderItem {
4
4
  title: React.ReactNode;
5
5
  index: string;
6
- /**
7
- * 是否禁止点击
8
- */
9
6
  disabled?: boolean;
10
7
  }
11
8
  export interface ITabsChangeData {
@@ -14,11 +11,8 @@ export interface ITabsChangeData {
14
11
  }
15
12
  export type TabChangeEvent = (e?: SyntheticEvent, data?: ITabsChangeData) => void;
16
13
  export interface ITabItem {
17
- /** 面板标题 */
18
14
  title: React.ReactNode;
19
- /** 面板的索引值 */
20
15
  index: string;
21
- /** 面板是否禁用 */
22
16
  disabled?: boolean;
23
17
  }
24
18
  export type ITabAlign = 'start' | 'center';
package/dist/Tag/Tag.css CHANGED
@@ -47,7 +47,7 @@
47
47
  border: 1px solid var(--bui-color-border-danger);
48
48
  }
49
49
  .bui-tag-outlined.bui-tag-vip {
50
- color: var(--bui-color-red);
50
+ color: var(--bui-color-primary);
51
51
  border: 1px solid var(--bui-color-border-primary);
52
52
  }
53
53
  .bui-tag-contained {
package/dist/Tooltip/Tooltip.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .bui-tooltip {
2
2
  --arrow-size: var(--bui-tooltip-arrow-size, 8PX);
3
- --localtion-position: var(--bui-tooltip-localtion-position, 8PX);
3
+ --location-position: var(--bui-tooltip-location-position, 8PX);
4
4
  --max-width: var(--bui-tooltip-max-width, 350px);
5
5
  --content-min-width: var(--bui-tooltip-content-min-width, 30px);
6
6
  --content-min-height: var(--bui-tooltip-content-min-height, 32px);
@@ -17,16 +17,16 @@
17
17
  position: absolute;
18
18
  }
19
19
  .bui-tooltip .bui-tooltip-arrow.location-left {
20
- left: var(--localtion-position);
20
+ left: var(--location-position);
21
21
  }
22
22
  .bui-tooltip .bui-tooltip-arrow.location-right {
23
- right: var(--localtion-position);
23
+ right: var(--location-position);
24
24
  }
25
25
  .bui-tooltip .bui-tooltip-arrow.location-top {
26
- top: var(--localtion-position);
26
+ top: var(--location-position);
27
27
  }
28
28
  .bui-tooltip .bui-tooltip-arrow.location-bottom {
29
- bottom: var(--localtion-position);
29
+ bottom: var(--location-position);
30
30
  }
31
31
  .bui-tooltip.tooltip-top .location-center,
32
32
  .bui-tooltip.tooltip-bottom .location-center {
package/es/ActionSheet/ActionSheet.css CHANGED
@@ -1,7 +1,7 @@
1
1
  .bui-action-sheet {
2
2
  --extra-line-height: var(--bui-action-sheet-extra-line-height, 23px);
3
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));
4
+ --extra-margin: var(--bui-action-sheet-extra-margin, 0 var(--bui-spacing-xl));
5
5
  font-family: var(--bui-font-family);
6
6
  }
7
7
  .bui-action-sheet-content {
@@ -26,5 +26,5 @@
26
26
  background: var(--bui-color-bg-view);
27
27
  text-align: center;
28
28
  border-bottom: 1px solid var(--bui-color-border-default);
29
- margin: var(--extra-magin);
29
+ margin: var(--extra-margin);
30
30
  }
package/es/Button/Button.css CHANGED
@@ -1,27 +1,16 @@
1
1
  .bui-btn {
2
- --border-radius: var(--bui-button-border-radius, 100px);
3
- --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
4
- --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
5
- --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
6
- --height: var(--bui-button-height, 27px);
7
- --icon-start-margin-right: var(--bui-button-icon-start-margin-right, var(--bui-spacing-xs));
8
- --icon-start-margin-left: var(--bui-button-icon-start-margin-left, var(--bui-spacing-xs));
9
- --default-border: var(--bui-button-default-border, 1px solid transparent);
10
- --light-border: var(--bui-button-light-border, 1px solid transparent);
11
- --outlined-default-border: var(--bui-button-outlined-default-border, 1px solid var(--bui-color-neutral-4));
12
- --disabled-opacity: var(--bui-button-disabled-opacity, 0.5);
13
- --small-padding: var(--bui-button-small-padding, 0 11px);
14
- --small-height: var(--bui-button-small-height, 24px);
15
- --medium-padding: var(--bui-button-medium-padding, 0 14px);
16
- --large-padding: var(--bui-button-large-padding, 0 14px);
17
- --large-height: var(--bui-button-large-height, 33px);
18
- --full-font-size: var(--bui-button-full-font-size, var(--bui-title-size-4));
19
- --full-height: var(--bui-button-full-height, 42px);
20
- border: var(--default-border);
2
+ --bui-btn-font-size: var(--bui-text-size-3);
3
+ --bui-btn-font-weight: var(--bui-font-weight-medium);
4
+ --bui-btn-border-radius: 120px;
5
+ --bui-btn-height: 27px;
6
+ --bui-btn-color: var(--bui-color-fg-muted);
7
+ --bui-btn-bg: var(--bui-color-bg-view);
8
+ --bui-btn-opacity: 1;
9
+ --bui-btn-padding: 0 14px;
10
+ --bui-btn-border: 0;
11
+ --bui-btn-font-family: var(--bui-font-family);
21
12
  outline: 0;
22
- background-color: transparent;
23
13
  cursor: pointer;
24
- color: var(--text-color);
25
14
  box-sizing: border-box;
26
15
  position: relative;
27
16
  display: inline-flex;
@@ -29,12 +18,17 @@
29
18
  align-items: center;
30
19
  justify-content: center;
31
20
  white-space: nowrap;
32
- font-size: var(--bui-text-size-3);
33
- font-weight: var(--bui-font-weight-medium);
34
- border-radius: var(--border-radius);
35
- height: var(--height);
21
+ color: var(--bui-btn-color);
22
+ background: var(--bui-btn-bg);
23
+ font-size: var(--bui-btn-font-size);
24
+ font-weight: var(--bui-btn-font-weight);
25
+ border: var(--bui-btn-border);
26
+ border-radius: var(--bui-btn-border-radius);
27
+ height: var(--bui-btn-height);
28
+ padding: var(--bui-btn-padding);
36
29
  line-height: var(--bui-line-height);
37
- font-family: var(--bui-font-family);
30
+ font-family: var(--bui-btn-font-family);
31
+ opacity: var(--bui-btn-opacity);
38
32
  }
39
33
  @keyframes spin {
40
34
  from {
@@ -68,36 +62,31 @@
68
62
  display: inline-flex;
69
63
  align-self: center;
70
64
  flex-shrink: 0;
71
- margin-right: var(--icon-start-margin-right);
65
+ margin-right: var(--bui-spacing-xs);
72
66
  }
73
67
  .bui-btn-icon-end {
74
68
  display: inline-flex;
75
69
  align-self: center;
76
70
  flex-shrink: 0;
77
- margin-left: var(--icon-start-margin-left);
71
+ margin-left: var(--bui-spacing-xs);
78
72
  }
79
73
  .bui-btn-disabled {
80
74
  pointer-events: none;
81
- opacity: var(--disabled-opacity);
75
+ --bui-btn-opacity: 0.5;
82
76
  }
83
77
  .bui-btn-small {
84
- font-size: var(--bui-text-size-4);
85
- padding: var(--small-padding);
86
- height: var(--small-height);
87
- }
88
- .bui-btn-medium {
89
- padding: var(--medium-padding);
90
- height: var(--height);
78
+ --bui-btn-height: 24px;
79
+ --bui-btn-font-size: var(--bui-text-size-4);
80
+ --bui-btn-padding: 0 11px;
91
81
  }
92
82
  .bui-btn-large {
93
- font-size: var(--bui-text-size-2);
94
- padding: var(--large-padding);
95
- height: var(--large-height);
83
+ --bui-btn-height: 33px;
84
+ --bui-btn-font-size: var(--bui-text-size-2);
96
85
  }
97
86
  .bui-btn-full {
98
- font-size: var(--full-font-size);
87
+ --bui-btn-height: 42px;
88
+ --bui-btn-font-size: var(--bui-title-size-4);
99
89
  width: 100%;
100
- height: var(--full-height);
101
90
  }
102
91
  .bui-btn-text.bui-btn-primary {
103
92
  color: var(--bui-color-primary);
@@ -118,7 +107,7 @@
118
107
  color: var(--bui-color-vip);
119
108
  }
120
109
  .bui-btn-contained {
121
- background-color: var(--bg-color);
110
+ --bui-btn-bg: var(--bui-color-neutral-5);
122
111
  }
123
112
  .bui-btn-contained.bui-btn-primary {
124
113
  color: var(--bui-color-white);
@@ -161,15 +150,15 @@
161
150
  var(--bui-color-danger-end) 100%);
162
151
  }
163
152
  .bui-btn-contained.bui-btn-vip {
164
- color: #582331;
165
- background-image:
153
+ --bui-btn-color: #582331;
154
+ --bui-btn-bg:
166
155
  linear-gradient(
167
156
  90deg,
168
157
  var(--bui-color-vip-start) 3%,
169
158
  var(--bui-color-vip-end) 100%);
170
159
  }
171
160
  .bui-btn-outlined {
172
- border: var(--outlined-default-border);
161
+ --bui-btn-border: 1px solid var(--bui-color-neutral-4);
173
162
  }
174
163
  .bui-btn-outlined.bui-btn-primary {
175
164
  color: var(--bui-color-primary);
@@ -196,42 +185,35 @@
196
185
  border-color: var(--bui-color-vip);
197
186
  }
198
187
  .bui-btn-light {
199
- background-image: none;
200
- background-color: var(--bui-color-gray-light);
201
- border: var(--light-border);
188
+ --bui-btn-bg: var(--bui-color-gray-light);
202
189
  }
203
190
  .bui-btn-light.bui-btn-warning {
204
191
  background-image: none;
205
- border: var(--light-border);
206
192
  color: var(--bui-color-warning);
207
193
  background-color: var(--bui-color-warning-light);
208
194
  }
209
195
  .bui-btn-light.bui-btn-primary {
210
196
  background-image: none;
211
- border: var(--light-border);
212
197
  color: var(--bui-color-primary);
213
198
  background-color: var(--bui-color-primary-light);
214
199
  }
215
200
  .bui-btn-light.bui-btn-info {
216
201
  background-image: none;
217
- border: var(--light-border);
218
202
  color: var(--bui-color-info);
219
203
  background-color: var(--bui-color-info-light);
220
204
  }
221
205
  .bui-btn-light.bui-btn-success {
222
206
  background-image: none;
223
- border: var(--light-border);
224
207
  color: var(--bui-color-success);
225
208
  background-color: var(--bui-color-success-light);
226
209
  }
227
210
  .bui-btn-light.bui-btn-danger {
228
211
  background-image: none;
229
- border: var(--light-border);
230
212
  color: var(--bui-color-danger);
231
213
  background-color: var(--bui-color-danger-light);
232
214
  }
233
215
  .bui-btn-light.bui-btn-vip {
234
- color: var(--bui-color-vip);
235
216
  position: relative;
236
- background-color: rgba(255, 134, 110, 0.3);
217
+ --bui-btn-color: var(--bui-color-vip);
218
+ --bui-btn-bg: rgba(255, 134, 110, 0.3);
237
219
  }
package/es/Popover/Popover.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .bui-popover {
2
2
  --arrow-size: var(--bui-popover-arrow-size, 8PX);
3
- --localtion-position: var(--bui-popover-localtion-position, 8PX);
3
+ --location-position: var(--bui-popover-location-position, 8PX);
4
4
  --max-width: var(--bui-popover-max-width, 350px);
5
5
  --content-min-width: var(--bui-popover-content-min-width, 30px);
6
6
  --content-padding: var(--bui-popover-content-padding, 6px 8px);
@@ -16,16 +16,16 @@
16
16
  position: absolute;
17
17
  }
18
18
  .bui-popover .bui-popover-arrow.location-left {
19
- left: var(--localtion-position);
19
+ left: var(--location-position);
20
20
  }
21
21
  .bui-popover .bui-popover-arrow.location-right {
22
- right: var(--localtion-position);
22
+ right: var(--location-position);
23
23
  }
24
24
  .bui-popover .bui-popover-arrow.location-top {
25
- top: var(--localtion-position);
25
+ top: var(--location-position);
26
26
  }
27
27
  .bui-popover .bui-popover-arrow.location-bottom {
28
- bottom: var(--localtion-position);
28
+ bottom: var(--location-position);
29
29
  }
30
30
  .bui-popover.popover-top .location-center,
31
31
  .bui-popover.popover-bottom .location-center {
package/es/Radio/Radio.css CHANGED
@@ -1,7 +1,6 @@
1
1
  .bui-radio {
2
2
  --label-color: var(--bui-radio-label-color, var(--bui-color-fg-default));
3
3
  --label-font-size: var(--bui-radio-label-font-size, var(--bui-text-size-1));
4
- --icon-font-size: var(--bui-radio-icon-font-size, var(--bui-title-size-2));
5
4
  --icon-padding: var(--bui-radio-icon-padding, 5px);
6
5
  display: inline-flex;
7
6
  align-items: center;
package/es/Tabs/Tab.css CHANGED
@@ -4,31 +4,31 @@
4
4
  justify-content: center;
5
5
  white-space: nowrap;
6
6
  width: min-content;
7
- height: var(--tab-height);
7
+ height: var(--bui-tab-height);
8
8
  box-sizing: border-box;
9
9
  position: relative;
10
10
  cursor: pointer;
11
- font-size: var(--font-size);
11
+ font-size: var(--bui-tab-font-size);
12
12
  line-height: var(--bui-line-height);
13
- color: var(--color);
14
- padding: var(--tab-padding);
13
+ color: var(--bui-tabs-color);
14
+ padding: var(--bui-tab-padding);
15
15
  font-family: var(--bui-font-family);
16
16
  }
17
17
  .bui-tab-active {
18
- font-size: var(--font-size);
18
+ font-size: var(--bui-tab-active-font-size);
19
19
  line-height: var(--bui-line-height);
20
- font-weight: var(--bui-font-weight-medium);
21
- color: var(--active-color);
20
+ font-weight: var(--bui-tabs-active-font-weight);
21
+ color: var(--bui-tabs-active-color);
22
22
  }
23
23
  .bui-tab-center {
24
24
  flex: 1 0 0;
25
25
  margin: 0 auto;
26
26
  }
27
27
  .bui-tab-miniapp-active {
28
- font-size: var(--font-size);
28
+ font-size: var(--bui-tab-font-size);
29
29
  line-height: 1.5;
30
30
  font-weight: var(--bui-font-weight-medium);
31
- color: var(--active-color);
31
+ color: var(--bui-tabs-active-color);
32
32
  position: relative;
33
33
  }
34
34
  .bui-tab-miniapp-active-line {
package/es/Tabs/Tab.js CHANGED
@@ -35,8 +35,11 @@ import React from "react";
35
35
  import TabsContext from "./TabsContext";
36
36
  import "./Tab.css";
37
37
  const prefixCls = "bui-tab";
38
+ const defaultProps = {
39
+ disabled: false
40
+ };
38
41
  const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
39
- const _a = props, { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
42
+ const _a = __spreadValues(__spreadValues({}, defaultProps), props), { className, children, index, disabled, onClick } = _a, others = __objRest(_a, ["className", "children", "index", "disabled", "onClick"]);
40
43
  const tabsContext = React.useContext(TabsContext);
41
44
  const { value, align, triggerChange } = tabsContext;
42
45
  return /* @__PURE__ */ React.createElement(
@@ -74,9 +77,6 @@ const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
74
77
  );
75
78
  });
76
79
  Tab.displayName = "BuiTab";
77
- Tab.defaultProps = {
78
- disabled: false
79
- };
80
80
  var Tab_default = Tab;
81
81
  export {
82
82
  Tab_default as default
package/es/Tabs/Tabs.css CHANGED
@@ -1,20 +1,25 @@
1
1
  .bui-tabs {
2
- --height: var(--bui-tabs-height, 39px);
3
- --color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
4
- --active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
5
- --line-color: var(--bui-tabs-line-color, var(--bui-color-primary));
6
- --line-height: var(--bui-tabs-line-height, 3PX);
7
- --line-width: var(--bui-tabs-line-width, 18px);
8
- --mask-width: var(--bui-tabs-mask-width, 12px);
9
- --mask-height: var(--bui-tabs-mask-height, 100%);
10
- --tab-height: var(--bui-tab-height, 100%);
11
- --tab-padding: var(--bui-tab-padding, var(--bui-spacing-lg) var(--bui-spacing-lg) 10px);
12
- --font-size: var(--bui-tab-font-size, var(--bui-text-size-1));
2
+ --bui-tabs-height: 39px;
3
+ --bui-tabs-color: var(--bui-color-fg-subtle);
4
+ --bui-tabs-active-color: var(--bui-color-fg-default);
5
+ --bui-tabs-line-color: var(--bui-color-primary);
6
+ --bui-tabs-line-height: 3px;
7
+ --bui-tabs-line-width: 18px;
8
+ --bui-tabs-line-border-radius: 3px;
9
+ --bui-tabs-line-bottom: 0;
10
+ --bui-tabs-line-box-shadow: none;
11
+ --bui-tabs-mask-width: 12px;
12
+ --bui-tabs-mask-height: 100%;
13
+ --bui-tab-height: 100%;
14
+ --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
15
+ --bui-tab-font-size: var(--bui-text-size-1);
16
+ --bui-tab-active-font-size: var(--bui-text-size-1);
17
+ --bui-tabs-active-font-weight: var(--bui-font-weight-medium);
13
18
  position: relative;
14
19
  font-family: var(--bui-font-family);
15
20
  }
16
21
  .bui-tabs-tabs {
17
- height: var(--height);
22
+ height: var(--bui-tabs-height);
18
23
  display: flex;
19
24
  flex-wrap: nowrap;
20
25
  justify-content: flex-start;
@@ -28,12 +33,13 @@
28
33
  }
29
34
  .bui-tabs-tabline {
30
35
  position: absolute;
31
- width: var(--line-width);
32
- bottom: 0;
33
- height: var(--line-height);
36
+ width: var(--bui-tabs-line-width);
37
+ bottom: var(--bui-tabs-line-bottom);
38
+ height: var(--bui-tabs-line-height);
34
39
  color: var(--bui-color-primary);
35
- background: var(--line-color);
36
- border-radius: var(--bui-shape-radius-label);
40
+ background: var(--bui-tabs-line-color);
41
+ border-radius: var(--bui-tabs-line-border-radius);
42
+ box-shadow: var(--bui-tabs-line-box-shadow);
37
43
  }
38
44
  .bui-tabs-content {
39
45
  padding: var(--bui-spacing-lg);
@@ -43,8 +49,8 @@
43
49
  top: 0;
44
50
  bottom: 0;
45
51
  z-index: 1;
46
- width: var(--mask-width);
47
- height: var(--mask-height);
52
+ width: var(--bui-tabs-mask-width);
53
+ height: var(--bui-tabs-mask-height);
48
54
  pointer-events: none;
49
55
  }
50
56
  .bui-tabs-mask-left {
package/es/Tabs/Tabs.js CHANGED
@@ -45,8 +45,12 @@ import { TabsContextProvider } from "./TabsContext";
45
45
  import bound from "./utils/bound";
46
46
  import "./Tabs.css";
47
47
  const prefixCls = "bui-tabs";
48
+ const defaultProps = {
49
+ align: "center",
50
+ tabs: []
51
+ };
48
52
  const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
49
- const _a = props, { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
53
+ const _a = __spreadValues(__spreadValues({}, defaultProps), props), { children, className, value, tabs, align, onChange } = _a, others = __objRest(_a, ["children", "className", "value", "tabs", "align", "onChange"]);
50
54
  const [active, setActive] = useState("");
51
55
  const tabsRef = useRef(null);
52
56
  const activeLineRef = useRef(null);
@@ -111,25 +115,6 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
111
115
  tabsRef.current.scrollLeft = nextScrollLeft;
112
116
  }
113
117
  };
114
- useEffect(() => {
115
- setActive(value);
116
- }, [value]);
117
- useLayoutEffect(() => {
118
- animate({ transitionInUse: false });
119
- }, []);
120
- useEffect(() => {
121
- const handleResize = debounce(() => {
122
- animate({ transitionInUse: true });
123
- updateMask();
124
- }, 100);
125
- window.addEventListener("resize", handleResize);
126
- return () => {
127
- window.removeEventListener("resize", handleResize);
128
- };
129
- }, [active]);
130
- useDidMountEffect(() => {
131
- animate({ transitionInUse: true });
132
- }, [active, tabs, children]);
133
118
  const updateMask = useMemo(
134
119
  () => throttle(
135
120
  () => {
@@ -152,6 +137,25 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
152
137
  ),
153
138
  []
154
139
  );
140
+ useEffect(() => {
141
+ setActive(value);
142
+ }, [value]);
143
+ useLayoutEffect(() => {
144
+ animate({ transitionInUse: false });
145
+ }, []);
146
+ useEffect(() => {
147
+ const handleResize = debounce(() => {
148
+ animate({ transitionInUse: true });
149
+ updateMask();
150
+ }, 100);
151
+ window.addEventListener("resize", handleResize);
152
+ return () => {
153
+ window.removeEventListener("resize", handleResize);
154
+ };
155
+ }, [active]);
156
+ useDidMountEffect(() => {
157
+ animate({ transitionInUse: true });
158
+ }, [active, tabs, children]);
155
159
  useLayoutEffect(() => {
156
160
  updateMask();
157
161
  }, []);
@@ -196,7 +200,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
196
200
  "bui-tabline-invisible": isMini || !lineData.hasActiveTab
197
201
  }),
198
202
  style: {
199
- transition: lineData.transitionInUse ? "transform 0.25s ease-in-out" : void 0,
203
+ transition: lineData.transitionInUse ? "transform 0.3s ease-in-out" : void 0,
200
204
  transform: `translate3d(${lineData.x}px, 0px, 0px)`
201
205
  }
202
206
  }
@@ -213,10 +217,6 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
213
217
  }), children)));
214
218
  });
215
219
  Tabs.displayName = "BuiTabs";
216
- Tabs.defaultProps = {
217
- align: "center",
218
- tabs: []
219
- };
220
220
  var Tabs_default = Tabs;
221
221
  export {
222
222
  Tabs_default as default
package/es/Tabs/Tabs.types.d.ts CHANGED
@@ -3,9 +3,6 @@ import React, { SyntheticEvent } from 'react';
3
3
  export interface TabHeaderItem {
4
4
  title: React.ReactNode;
5
5
  index: string;
6
- /**
7
- * 是否禁止点击
8
- */
9
6
  disabled?: boolean;
10
7
  }
11
8
  export interface ITabsChangeData {
@@ -14,11 +11,8 @@ export interface ITabsChangeData {
14
11
  }
15
12
  export type TabChangeEvent = (e?: SyntheticEvent, data?: ITabsChangeData) => void;
16
13
  export interface ITabItem {
17
- /** 面板标题 */
18
14
  title: React.ReactNode;
19
- /** 面板的索引值 */
20
15
  index: string;
21
- /** 面板是否禁用 */
22
16
  disabled?: boolean;
23
17
  }
24
18
  export type ITabAlign = 'start' | 'center';
package/es/Tag/Tag.css CHANGED
@@ -47,7 +47,7 @@
47
47
  border: 1px solid var(--bui-color-border-danger);
48
48
  }
49
49
  .bui-tag-outlined.bui-tag-vip {
50
- color: var(--bui-color-red);
50
+ color: var(--bui-color-primary);
51
51
  border: 1px solid var(--bui-color-border-primary);
52
52
  }
53
53
  .bui-tag-contained {
package/es/Tooltip/Tooltip.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .bui-tooltip {
2
2
  --arrow-size: var(--bui-tooltip-arrow-size, 8PX);
3
- --localtion-position: var(--bui-tooltip-localtion-position, 8PX);
3
+ --location-position: var(--bui-tooltip-location-position, 8PX);
4
4
  --max-width: var(--bui-tooltip-max-width, 350px);
5
5
  --content-min-width: var(--bui-tooltip-content-min-width, 30px);
6
6
  --content-min-height: var(--bui-tooltip-content-min-height, 32px);
@@ -17,16 +17,16 @@
17
17
  position: absolute;
18
18
  }
19
19
  .bui-tooltip .bui-tooltip-arrow.location-left {
20
- left: var(--localtion-position);
20
+ left: var(--location-position);
21
21
  }
22
22
  .bui-tooltip .bui-tooltip-arrow.location-right {
23
- right: var(--localtion-position);
23
+ right: var(--location-position);
24
24
  }
25
25
  .bui-tooltip .bui-tooltip-arrow.location-top {
26
- top: var(--localtion-position);
26
+ top: var(--location-position);
27
27
  }
28
28
  .bui-tooltip .bui-tooltip-arrow.location-bottom {
29
- bottom: var(--localtion-position);
29
+ bottom: var(--location-position);
30
30
  }
31
31
  .bui-tooltip.tooltip-top .location-center,
32
32
  .bui-tooltip.tooltip-bottom .location-center {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/react",
3
- "version": "1.4.4",
3
+ "version": "1.4.5-beta.0",
4
4
  "description": "React components for building mobile application",
5
5
  "homepage": "http://bui.taopiaopiao.com",
6
6
  "license": "MIT",
@@ -30,13 +30,13 @@
30
30
  "glob": "11.0.0"
31
31
  },
32
32
  "dependencies": {
33
- "clsx": "^1.2.1",
33
+ "clsx": "^2.1.1",
34
34
  "dayjs": "^1.11.7",
35
35
  "swiper": "^8.1.5",
36
- "@bifrostui/icons": "1.4.4",
37
- "@bifrostui/styles": "1.4.4",
38
- "@bifrostui/types": "1.4.4",
39
- "@bifrostui/utils": "1.4.4"
36
+ "@bifrostui/icons": "1.4.5-beta.0",
37
+ "@bifrostui/types": "1.4.5-beta.0",
38
+ "@bifrostui/utils": "1.4.5-beta.0",
39
+ "@bifrostui/styles": "1.4.5-beta.0"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@tarojs/components": "^3.0.0",