@bifrostui/react 1.4.4 → 1.4.5-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/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
  }, []);
@@ -211,11 +215,11 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
211
215
  "div",
212
216
  {
213
217
  ref: activeLineRef,
214
- className: (0, import_clsx.default)(`${prefixCls}-tabline`, {
215
- "bui-tabline-invisible": import_utils.isMini || !lineData.hasActiveTab
218
+ className: (0, import_clsx.default)(`${prefixCls}-indicator`, {
219
+ "bui-indicator-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;
@@ -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 {
@@ -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 {
@@ -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
  }
@@ -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,57 +62,61 @@
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);
90
+ }
91
+ .bui-btn-text {
92
+ --bui-btn-bg: none;
101
93
  }
102
94
  .bui-btn-text.bui-btn-primary {
103
- color: var(--bui-color-primary);
95
+ --bui-btn-color: var(--bui-color-primary);
104
96
  }
105
97
  .bui-btn-text.bui-btn-success {
106
- color: var(--bui-color-success);
98
+ --bui-btn-color: var(--bui-color-success);
107
99
  }
108
100
  .bui-btn-text.bui-btn-info {
109
- color: var(--bui-color-info);
101
+ --bui-btn-color: var(--bui-color-info);
110
102
  }
111
103
  .bui-btn-text.bui-btn-warning {
112
- color: var(--bui-color-warning);
104
+ --bui-btn-color: var(--bui-color-warning);
113
105
  }
114
106
  .bui-btn-text.bui-btn-danger {
115
- color: var(--bui-color-danger);
107
+ --bui-btn-color: var(--bui-color-danger);
108
+ }
109
+ .bui-btn-text.bui-btn-light {
110
+ --bui-btn-color: var(--bui-color-bg-view);
111
+ }
112
+ .bui-btn-text.bui-btn-dark {
113
+ --bui-btn-color: var(--bui-color-fg-default);
116
114
  }
117
115
  .bui-btn-text.bui-btn-vip {
118
- color: var(--bui-color-vip);
116
+ --bui-btn-color: var(--bui-color-vip);
119
117
  }
120
118
  .bui-btn-contained {
121
- background-color: var(--bg-color);
119
+ --bui-btn-bg: var(--bui-color-neutral-5);
122
120
  }
123
121
  .bui-btn-contained.bui-btn-primary {
124
122
  color: var(--bui-color-white);
@@ -160,16 +158,25 @@
160
158
  var(--bui-color-danger-start) 0%,
161
159
  var(--bui-color-danger-end) 100%);
162
160
  }
161
+ .bui-btn-contained.bui-btn-light {
162
+ --bui-btn-color: var(--bui-color-fg-default);
163
+ --bui-btn-bg: var(--bui-color-bg-view);
164
+ }
165
+ .bui-btn-contained.bui-btn-dark {
166
+ --bui-btn-color: var(--bui-color-bg-view);
167
+ --bui-btn-bg: var(--bui-color-fg-default);
168
+ }
163
169
  .bui-btn-contained.bui-btn-vip {
164
- color: #582331;
165
- background-image:
170
+ --bui-btn-color: #582331;
171
+ --bui-btn-bg:
166
172
  linear-gradient(
167
173
  90deg,
168
174
  var(--bui-color-vip-start) 3%,
169
175
  var(--bui-color-vip-end) 100%);
170
176
  }
171
177
  .bui-btn-outlined {
172
- border: var(--outlined-default-border);
178
+ --bui-btn-bg: transparent;
179
+ --bui-btn-border: 1px solid var(--bui-color-neutral-4);
173
180
  }
174
181
  .bui-btn-outlined.bui-btn-primary {
175
182
  color: var(--bui-color-primary);
@@ -191,47 +198,49 @@
191
198
  color: var(--bui-color-danger);
192
199
  border-color: var(--bui-color-danger);
193
200
  }
201
+ .bui-btn-outlined.bui-btn-light {
202
+ --bui-btn-color: var(--bui-color-bg-view);
203
+ --bui-btn-border: solid 1px var(--bui-color-bg-view);
204
+ }
205
+ .bui-btn-outlined.bui-btn-dark {
206
+ --bui-btn-color: var(--bui-color-fg-default);
207
+ --bui-btn-border: solid 1px var(--bui-color-fg-default);
208
+ }
194
209
  .bui-btn-outlined.bui-btn-vip {
195
210
  color: var(--bui-color-vip);
196
211
  border-color: var(--bui-color-vip);
197
212
  }
198
- .bui-btn-light {
199
- background-image: none;
200
- background-color: var(--bui-color-gray-light);
201
- border: var(--light-border);
213
+ .bui-btn-subtle {
214
+ --bui-btn-bg: var(--bui-color-gray-light);
202
215
  }
203
- .bui-btn-light.bui-btn-warning {
204
- background-image: none;
205
- border: var(--light-border);
216
+ .bui-btn-subtle.bui-btn-warning {
206
217
  color: var(--bui-color-warning);
207
- background-color: var(--bui-color-warning-light);
218
+ background: var(--bui-color-warning-light);
208
219
  }
209
- .bui-btn-light.bui-btn-primary {
210
- background-image: none;
211
- border: var(--light-border);
220
+ .bui-btn-subtle.bui-btn-primary {
212
221
  color: var(--bui-color-primary);
213
- background-color: var(--bui-color-primary-light);
222
+ background: var(--bui-color-primary-light);
214
223
  }
215
- .bui-btn-light.bui-btn-info {
216
- background-image: none;
217
- border: var(--light-border);
224
+ .bui-btn-subtle.bui-btn-info {
218
225
  color: var(--bui-color-info);
219
- background-color: var(--bui-color-info-light);
226
+ background: var(--bui-color-info-light);
220
227
  }
221
- .bui-btn-light.bui-btn-success {
222
- background-image: none;
223
- border: var(--light-border);
228
+ .bui-btn-subtle.bui-btn-success {
224
229
  color: var(--bui-color-success);
225
- background-color: var(--bui-color-success-light);
230
+ background: var(--bui-color-success-light);
226
231
  }
227
- .bui-btn-light.bui-btn-danger {
228
- background-image: none;
229
- border: var(--light-border);
232
+ .bui-btn-subtle.bui-btn-danger {
230
233
  color: var(--bui-color-danger);
231
- background-color: var(--bui-color-danger-light);
234
+ background: var(--bui-color-danger-light);
232
235
  }
233
- .bui-btn-light.bui-btn-vip {
234
- color: var(--bui-color-vip);
236
+ .bui-btn-subtle.bui-btn-light {
237
+ --bui-btn-color: var(--bui-color-bg-view);
238
+ }
239
+ .bui-btn-subtle.bui-btn-dark {
240
+ --bui-btn-color: var(--bui-color-fg-default);
241
+ }
242
+ .bui-btn-subtle.bui-btn-vip {
235
243
  position: relative;
236
- background-color: rgba(255, 134, 110, 0.3);
244
+ --bui-btn-color: var(--bui-color-vip);
245
+ --bui-btn-bg: rgba(255, 134, 110, 0.3);
237
246
  }
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import './Button.less';
3
2
  import { ButtonProps } from './Button.types';
3
+ import './Button.less';
4
4
  declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<"button", {}>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
5
5
  export default Button;
@@ -80,7 +80,6 @@ Button.displayName = "BuiButton";
80
80
  Button.defaultProps = {
81
81
  size: "medium",
82
82
  variant: "outlined",
83
- color: "default",
84
83
  disabled: false
85
84
  };
86
85
  var Button_default = Button;
@@ -16,19 +16,20 @@ export type ButtonProps<D extends React.ElementType = 'button', P = {}> = Overri
16
16
  * @default 'medium'
17
17
  */
18
18
  size?: 'small' | 'medium' | 'large' | 'full';
19
- /** 按钮颜色
20
- * @default 'default'
19
+ /**
20
+ * 按钮颜色
21
+ * @default 'neutral'
21
22
  */
22
- color?: ThemeColor | 'default' | 'vip';
23
+ color?: ThemeColor | 'vip';
23
24
  /**
24
25
  * 按钮类型
25
26
  * - text: 文字按钮
26
- * - outlined: 描边按钮
27
- * - contained: 实心填充按钮
28
- * - light: 浅亮填充按钮
27
+ * - outlined: 线框按钮
28
+ * - contained: 填充按钮
29
+ * - subtle: 柔和按钮
29
30
  * @default 'outlined'
30
31
  */
31
- variant?: 'outlined' | 'text' | 'contained' | 'light';
32
+ variant?: 'outlined' | 'text' | 'contained' | 'subtle';
32
33
  /**
33
34
  * 在子元素前放在的内容
34
35
  */
package/es/Card/Card.css CHANGED
@@ -1,8 +1,11 @@
1
1
  .bui-card {
2
+ --bui-card-font-family: var(--bui-font-family);
3
+ --bui-card-font-size: var(--bui-text-size-1);
2
4
  background-color: var(--bui-color-bg-view);
3
5
  border-radius: var(--bui-shape-radius-card);
4
6
  overflow: hidden;
5
- font-family: var(--bui-font-family);
7
+ font-family: var(--bui-card-font-family);
8
+ font-size: var(--bui-card-font-size);
6
9
  }
7
10
  .bui-card-header + .bui-card-content {
8
11
  padding-top: 0;
@@ -1,6 +1,4 @@
1
1
  .bui-card-content {
2
- font-size: var(--bui-text-size-2);
3
2
  padding: var(--bui-spacing-lg);
4
3
  color: var(--bui-color-fg-muted);
5
- font-family: var(--bui-font-family);
6
4
  }
@@ -1,9 +1,6 @@
1
1
  .bui-card-footer {
2
- --padding: var(--bui-card-footer-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
3
2
  color: var(--bui-color-fg-muted);
4
- font-size: var(--bui-text-size-1);
5
3
  display: flex;
6
4
  align-items: center;
7
- padding: var(--padding);
8
- font-family: var(--bui-font-family);
5
+ padding: var(--bui-spacing-md) var(--bui-spacing-lg);
9
6
  }
@@ -1,15 +1,13 @@
1
1
  .bui-card-header {
2
- --padding: var(--bui-card-header-padding, var(--bui-spacing-md) var(--bui-spacing-lg));
3
- --end-icon-margin-left: var(--bui-card-header-end-icon-margin-left, 2px);
2
+ --bui-card-font-size: var(--bui-title-size-4);
4
3
  display: flex;
5
4
  align-items: center;
6
5
  flex-direction: row;
7
6
  position: relative;
8
7
  padding: var(--bui-spacing-md) var(--bui-spacing-lg);
9
- font-size: var(--bui-title-size-4);
10
- font-weight: var(--bui-font-weight-medium);
8
+ font-weight: var(--bui-font-weight-bold);
9
+ font-family: var(--bui-card-font-family);
11
10
  color: var(--bui-color-fg-default);
12
- font-family: var(--bui-font-family);
13
11
  }
14
12
  .bui-card-header-title {
15
13
  white-space: nowrap;
@@ -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 {
@@ -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,28 @@
4
4
  justify-content: center;
5
5
  white-space: nowrap;
6
6
  width: min-content;
7
- height: var(--tab-height);
7
+ height: 100%;
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-tabs-font-size);
12
12
  line-height: var(--bui-line-height);
13
- color: var(--color);
14
- padding: var(--tab-padding);
15
- font-family: var(--bui-font-family);
13
+ color: var(--bui-tabs-color);
14
+ padding: var(--bui-tab-padding);
15
+ font-family: var(--bui-tabs-font-family);
16
16
  }
17
17
  .bui-tab-active {
18
- font-size: var(--font-size);
19
18
  line-height: var(--bui-line-height);
20
- font-weight: var(--bui-font-weight-medium);
21
- color: var(--active-color);
19
+ --bui-tabs-color: var(--bui-color-fg-default);
22
20
  }
23
21
  .bui-tab-center {
24
22
  flex: 1 0 0;
25
23
  margin: 0 auto;
26
24
  }
27
25
  .bui-tab-miniapp-active {
28
- font-size: var(--font-size);
29
26
  line-height: 1.5;
30
27
  font-weight: var(--bui-font-weight-medium);
31
- color: var(--active-color);
28
+ --bui-tabs-color: var(--bui-color-fg-default);
32
29
  position: relative;
33
30
  }
34
31
  .bui-tab-miniapp-active-line {
@@ -46,7 +43,7 @@
46
43
  opacity: 0.5;
47
44
  pointer-events: none;
48
45
  }
49
- .bui-tabline-invisible {
46
+ .bui-indicator-invisible {
50
47
  visibility: hidden;
51
48
  background-color: transparent;
52
49
  }
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(
@@ -67,16 +70,13 @@ const Tab = /* @__PURE__ */ React.forwardRef((props, ref) => {
67
70
  "div",
68
71
  {
69
72
  className: clsx(`${prefixCls}-miniapp-active-line`, {
70
- "bui-tabline-invisible": index !== value
73
+ "bui-indicator-invisible": index !== value
71
74
  })
72
75
  }
73
76
  )
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