@bifrostui/react 1.4.0-beta.2 → 1.4.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.
Files changed (25) hide show
  1. package/dist/Button/Button.css +2 -1
  2. package/dist/Checkbox/Checkbox.css +1 -1
  3. package/dist/Checkbox/CheckboxGroup.d.ts +1 -1
  4. package/dist/Checkbox/CheckboxGroup.js +1 -1
  5. package/dist/Popover/Popover.css +2 -1
  6. package/dist/Rating/Rating.css +1 -1
  7. package/dist/Select/Select.css +3 -4
  8. package/dist/Slider/Slider.css +1 -1
  9. package/dist/Tabs/Tab.css +7 -3
  10. package/dist/Tabs/Tabs.css +6 -3
  11. package/dist/Tabs/Tabs.js +1 -0
  12. package/dist/Tag/Tag.css +7 -0
  13. package/es/Button/Button.css +2 -1
  14. package/es/Checkbox/Checkbox.css +1 -1
  15. package/es/Checkbox/CheckboxGroup.d.ts +1 -1
  16. package/es/Checkbox/CheckboxGroup.js +1 -1
  17. package/es/Popover/Popover.css +2 -1
  18. package/es/Rating/Rating.css +1 -1
  19. package/es/Select/Select.css +3 -4
  20. package/es/Slider/Slider.css +1 -1
  21. package/es/Tabs/Tab.css +7 -3
  22. package/es/Tabs/Tabs.css +6 -3
  23. package/es/Tabs/Tabs.js +1 -0
  24. package/es/Tag/Tag.css +7 -0
  25. package/package.json +5 -5
package/dist/Button/Button.css CHANGED
@@ -1,5 +1,6 @@
1
1
  .bui-btn {
2
2
  --border-radius: var(--bui-button-border-radius, 100px);
3
+ --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
3
4
  --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
4
5
  --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
5
6
  --height: var(--bui-button-height, 27px);
@@ -20,7 +21,7 @@
20
21
  outline: 0;
21
22
  background-color: transparent;
22
23
  cursor: pointer;
23
- color: var(--bui-color-fg-muted);
24
+ color: var(--text-color);
24
25
  box-sizing: border-box;
25
26
  position: relative;
26
27
  display: inline-flex;
package/dist/Checkbox/Checkbox.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .bui-checkbox {
2
- --label-color: var(--bui-checkbox-label-color, --bui-color-fg-default);
2
+ --label-color: var(--bui-checkbox-label-color, var(--bui-color-fg-default));
3
3
  --label-font-size: var(--bui-checkbox-label-font-size, var(--bui-text-size-1));
4
4
  --icon-font-size: var(--bui-checkbox-icon-font-size, var(--bui-title-size-2));
5
5
  --disabled-opacity: var(--bui-checkbox-disabled-opacity, 0.5);
package/dist/Checkbox/CheckboxGroup.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import './Checkbox.less';
3
2
  import { CheckboxGroupProps } from './Checkbox.types';
3
+ import './Checkbox.less';
4
4
  declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<CheckboxGroupProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
5
5
  export default CheckboxGroup;
package/dist/Checkbox/CheckboxGroup.js CHANGED
@@ -59,8 +59,8 @@ module.exports = __toCommonJS(CheckboxGroup_exports);
59
59
  var import_utils = require("@bifrostui/utils");
60
60
  var import_clsx = __toESM(require("clsx"));
61
61
  var import_react = __toESM(require("react"));
62
- var import_Checkbox = require("./Checkbox.css");
63
62
  var import_CheckboxContext = require("./CheckboxContext");
63
+ var import_Checkbox2 = require("./Checkbox.css");
64
64
  const prefixCls = "bui-checkbox-group";
65
65
  const CheckboxGroup = (0, import_react.forwardRef)(
66
66
  (props, ref) => {
package/dist/Popover/Popover.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --localtion-position: var(--bui-popover-localtion-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
- --content-padding: var(--bui-popover-content-padding, 6px 8px);
6
+ --content-padding: var(--bui-popover-content-padding, 0);
7
7
  max-width: var(--max-width);
8
8
  font-size: var(--bui-text-size-1);
9
9
  position: absolute;
@@ -79,6 +79,7 @@
79
79
  .bui-popover .bui-popover-content {
80
80
  min-width: var(--content-min-width);
81
81
  color: var(--bui-color-fg-muted);
82
+ padding: var(--content-padding);
82
83
  text-align: left;
83
84
  text-decoration: none;
84
85
  word-wrap: break-word;
package/dist/Rating/Rating.css CHANGED
@@ -27,7 +27,7 @@
27
27
  }
28
28
  .bui-rating-container-medium {
29
29
  font-size: var(--bui-title-size-3);
30
- margin-right: var(--small-medium-right);
30
+ margin-right: var(--medium-margin-right);
31
31
  }
32
32
  .bui-rating-container-large {
33
33
  font-size: var(--large-font-size);
package/dist/Select/Select.css CHANGED
@@ -4,11 +4,10 @@
4
4
  --font-size: var(--bui-select-font-size, var(--bui-title-size-3));
5
5
  --padding: var(--bui-select-selector-container, 0 14px);
6
6
  --option-container-padding: var(--bui-select-option-container-padding, 3px 0);
7
- --option-margin-top: var(--bui-select-option-margin-top, 6px);
7
+ --option-container-margin-top: var(--bui-select-option-margin-top, 6px);
8
8
  --option-padding: var(--bui-select-option-padding, 0 14px);
9
9
  --option-margin: var(--bui-select-option-margin, 0 3px);
10
10
  --option-height: var(--bui-select-option-height, 27px);
11
- --option-active-font-weight: var(--bui-select-option-active-font-weight, 500);
12
11
  position: relative;
13
12
  cursor: pointer;
14
13
  height: var(--height);
@@ -42,7 +41,7 @@
42
41
  justify-content: space-between;
43
42
  align-items: center;
44
43
  flex: 1;
45
- height: var(--bui-select-height);
44
+ height: var(--height);
46
45
  background-color: transparent;
47
46
  outline: none;
48
47
  border: 0;
@@ -82,7 +81,7 @@
82
81
  color: var(--bui-color-primary);
83
82
  }
84
83
  .bui-select-option-active {
85
- font-weight: 500;
84
+ font-weight: var(--bui-font-weight-medium);
86
85
  color: var(--bui-color-primary);
87
86
  background-color: var(---bui-select-options-active-bg, #fff2f0);
88
87
  }
package/dist/Slider/Slider.css CHANGED
@@ -7,7 +7,7 @@
7
7
  --button-width: var(--bui-slider-button-width, 26px);
8
8
  --button-height: var(--bui-slider-button-height, 26px);
9
9
  --button-font-size: var(--bui-slider-button-font-size, var(--bui-title-size-3));
10
- --button-border-radius: var(--bui--slider-button-border-radius, 50%);
10
+ --button-border-radius: var(--bui-slider-button-border-radius, 50%);
11
11
  --tooltip-width: var(--bui-slider-tooltip-width, 46px);
12
12
  --tooltip-height: var(--bui-slider-tooltip-height, 24px);
13
13
  --tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);
package/dist/Tabs/Tab.css CHANGED
@@ -8,20 +8,24 @@
8
8
  box-sizing: border-box;
9
9
  position: relative;
10
10
  cursor: pointer;
11
- font-size: var(--bui-text-size-1);
11
+ font-size: var(--font-size);
12
12
  line-height: var(--bui-line-height);
13
13
  color: var(--color);
14
14
  padding: var(--tab-padding);
15
15
  font-family: var(--bui-font-family);
16
16
  }
17
17
  .bui-tab-active {
18
- font-size: var(--bui-text-size-1);
18
+ font-size: var(--font-size);
19
19
  line-height: var(--bui-line-height);
20
20
  font-weight: var(--bui-font-weight-medium);
21
21
  color: var(--active-color);
22
22
  }
23
+ .bui-tab-center {
24
+ flex: 1 0 0;
25
+ margin: 0 auto;
26
+ }
23
27
  .bui-tab-miniapp-active {
24
- font-size: var(--bui-text-size-1);
28
+ font-size: var(--font-size);
25
29
  line-height: 1.5;
26
30
  font-weight: var(--bui-font-weight-medium);
27
31
  color: var(--active-color);
package/dist/Tabs/Tabs.css CHANGED
@@ -2,11 +2,14 @@
2
2
  --height: var(--bui-tabs-height, 39px);
3
3
  --color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
4
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));
5
6
  --line-height: var(--bui-tabs-line-height, 3PX);
6
7
  --line-width: var(--bui-tabs-line-width, 18px);
8
+ --mask-width: var(--bui-tabs-mask-width, 12px);
7
9
  --mask-height: var(--bui-tabs-mask-height, 100%);
8
10
  --tab-height: var(--bui-tab-height, 100%);
9
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));
10
13
  position: relative;
11
14
  font-family: var(--bui-font-family);
12
15
  }
@@ -29,7 +32,7 @@
29
32
  bottom: 0;
30
33
  height: var(--line-height);
31
34
  color: var(--bui-color-primary);
32
- background: var(--bui-color-primary);
35
+ background: var(--line-color);
33
36
  border-radius: var(--bui-shape-radius-label);
34
37
  }
35
38
  .bui-tabs-content {
@@ -40,8 +43,8 @@
40
43
  top: 0;
41
44
  bottom: 0;
42
45
  z-index: 1;
43
- width: 12px;
44
- height: var(--bui-tabs-mask-height);
46
+ width: var(--mask-width);
47
+ height: var(--mask-height);
45
48
  pointer-events: none;
46
49
  }
47
50
  .bui-tabs-mask-left {
package/dist/Tabs/Tabs.js CHANGED
@@ -135,6 +135,7 @@ const Tabs = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
135
135
  (0, import_react.useEffect)(() => {
136
136
  const handleResize = (0, import_utils.debounce)(() => {
137
137
  animate({ transitionInUse: true });
138
+ updateMask();
138
139
  }, 100);
139
140
  window.addEventListener("resize", handleResize);
140
141
  return () => {
package/dist/Tag/Tag.css CHANGED
@@ -1,4 +1,11 @@
1
1
  .bui-tag {
2
+ --tag-color: var(--bui-tag-color, var(--bui-color-gray));
3
+ --tag-border-color: var(--bui-tag-border-color, var(--bui-color-border-gray));
4
+ --tag-bg-color: var(--bui-tag-bg-color, var(--bui-color-gray));
5
+ --tag-height: var(--bui-tag-height, 15px);
6
+ --tag-line-height: var(--bui-tag-line-height, 15px);
7
+ --tag-padding: var(--bui-tag-padding, 0 var(--bui-spacing-xs));
8
+ --tag-bg-color-vip: var(--bui-tag-color-vip, rgba(255, 134, 110, 0.3));
2
9
  position: relative;
3
10
  display: inline-flex;
4
11
  align-items: center;
package/es/Button/Button.css CHANGED
@@ -1,5 +1,6 @@
1
1
  .bui-btn {
2
2
  --border-radius: var(--bui-button-border-radius, 100px);
3
+ --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
3
4
  --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
4
5
  --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
5
6
  --height: var(--bui-button-height, 27px);
@@ -20,7 +21,7 @@
20
21
  outline: 0;
21
22
  background-color: transparent;
22
23
  cursor: pointer;
23
- color: var(--bui-color-fg-muted);
24
+ color: var(--text-color);
24
25
  box-sizing: border-box;
25
26
  position: relative;
26
27
  display: inline-flex;
package/es/Checkbox/Checkbox.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .bui-checkbox {
2
- --label-color: var(--bui-checkbox-label-color, --bui-color-fg-default);
2
+ --label-color: var(--bui-checkbox-label-color, var(--bui-color-fg-default));
3
3
  --label-font-size: var(--bui-checkbox-label-font-size, var(--bui-text-size-1));
4
4
  --icon-font-size: var(--bui-checkbox-icon-font-size, var(--bui-title-size-2));
5
5
  --disabled-opacity: var(--bui-checkbox-disabled-opacity, 0.5);
package/es/Checkbox/CheckboxGroup.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import './Checkbox.less';
3
2
  import { CheckboxGroupProps } from './Checkbox.types';
3
+ import './Checkbox.less';
4
4
  declare const CheckboxGroup: React.ForwardRefExoticComponent<Omit<CheckboxGroupProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
5
5
  export default CheckboxGroup;
package/es/Checkbox/CheckboxGroup.js CHANGED
@@ -29,8 +29,8 @@ var __objRest = (source, exclude) => {
29
29
  import { useValue } from "@bifrostui/utils";
30
30
  import clsx from "clsx";
31
31
  import React, { forwardRef } from "react";
32
- import "./Checkbox.css";
33
32
  import { CheckboxContextProvider } from "./CheckboxContext";
33
+ import "./Checkbox.css";
34
34
  const prefixCls = "bui-checkbox-group";
35
35
  const CheckboxGroup = forwardRef(
36
36
  (props, ref) => {
package/es/Popover/Popover.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --localtion-position: var(--bui-popover-localtion-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
- --content-padding: var(--bui-popover-content-padding, 6px 8px);
6
+ --content-padding: var(--bui-popover-content-padding, 0);
7
7
  max-width: var(--max-width);
8
8
  font-size: var(--bui-text-size-1);
9
9
  position: absolute;
@@ -79,6 +79,7 @@
79
79
  .bui-popover .bui-popover-content {
80
80
  min-width: var(--content-min-width);
81
81
  color: var(--bui-color-fg-muted);
82
+ padding: var(--content-padding);
82
83
  text-align: left;
83
84
  text-decoration: none;
84
85
  word-wrap: break-word;
package/es/Rating/Rating.css CHANGED
@@ -27,7 +27,7 @@
27
27
  }
28
28
  .bui-rating-container-medium {
29
29
  font-size: var(--bui-title-size-3);
30
- margin-right: var(--small-medium-right);
30
+ margin-right: var(--medium-margin-right);
31
31
  }
32
32
  .bui-rating-container-large {
33
33
  font-size: var(--large-font-size);
package/es/Select/Select.css CHANGED
@@ -4,11 +4,10 @@
4
4
  --font-size: var(--bui-select-font-size, var(--bui-title-size-3));
5
5
  --padding: var(--bui-select-selector-container, 0 14px);
6
6
  --option-container-padding: var(--bui-select-option-container-padding, 3px 0);
7
- --option-margin-top: var(--bui-select-option-margin-top, 6px);
7
+ --option-container-margin-top: var(--bui-select-option-margin-top, 6px);
8
8
  --option-padding: var(--bui-select-option-padding, 0 14px);
9
9
  --option-margin: var(--bui-select-option-margin, 0 3px);
10
10
  --option-height: var(--bui-select-option-height, 27px);
11
- --option-active-font-weight: var(--bui-select-option-active-font-weight, 500);
12
11
  position: relative;
13
12
  cursor: pointer;
14
13
  height: var(--height);
@@ -42,7 +41,7 @@
42
41
  justify-content: space-between;
43
42
  align-items: center;
44
43
  flex: 1;
45
- height: var(--bui-select-height);
44
+ height: var(--height);
46
45
  background-color: transparent;
47
46
  outline: none;
48
47
  border: 0;
@@ -82,7 +81,7 @@
82
81
  color: var(--bui-color-primary);
83
82
  }
84
83
  .bui-select-option-active {
85
- font-weight: 500;
84
+ font-weight: var(--bui-font-weight-medium);
86
85
  color: var(--bui-color-primary);
87
86
  background-color: var(---bui-select-options-active-bg, #fff2f0);
88
87
  }
package/es/Slider/Slider.css CHANGED
@@ -7,7 +7,7 @@
7
7
  --button-width: var(--bui-slider-button-width, 26px);
8
8
  --button-height: var(--bui-slider-button-height, 26px);
9
9
  --button-font-size: var(--bui-slider-button-font-size, var(--bui-title-size-3));
10
- --button-border-radius: var(--bui--slider-button-border-radius, 50%);
10
+ --button-border-radius: var(--bui-slider-button-border-radius, 50%);
11
11
  --tooltip-width: var(--bui-slider-tooltip-width, 46px);
12
12
  --tooltip-height: var(--bui-slider-tooltip-height, 24px);
13
13
  --tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);
package/es/Tabs/Tab.css CHANGED
@@ -8,20 +8,24 @@
8
8
  box-sizing: border-box;
9
9
  position: relative;
10
10
  cursor: pointer;
11
- font-size: var(--bui-text-size-1);
11
+ font-size: var(--font-size);
12
12
  line-height: var(--bui-line-height);
13
13
  color: var(--color);
14
14
  padding: var(--tab-padding);
15
15
  font-family: var(--bui-font-family);
16
16
  }
17
17
  .bui-tab-active {
18
- font-size: var(--bui-text-size-1);
18
+ font-size: var(--font-size);
19
19
  line-height: var(--bui-line-height);
20
20
  font-weight: var(--bui-font-weight-medium);
21
21
  color: var(--active-color);
22
22
  }
23
+ .bui-tab-center {
24
+ flex: 1 0 0;
25
+ margin: 0 auto;
26
+ }
23
27
  .bui-tab-miniapp-active {
24
- font-size: var(--bui-text-size-1);
28
+ font-size: var(--font-size);
25
29
  line-height: 1.5;
26
30
  font-weight: var(--bui-font-weight-medium);
27
31
  color: var(--active-color);
package/es/Tabs/Tabs.css CHANGED
@@ -2,11 +2,14 @@
2
2
  --height: var(--bui-tabs-height, 39px);
3
3
  --color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
4
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));
5
6
  --line-height: var(--bui-tabs-line-height, 3PX);
6
7
  --line-width: var(--bui-tabs-line-width, 18px);
8
+ --mask-width: var(--bui-tabs-mask-width, 12px);
7
9
  --mask-height: var(--bui-tabs-mask-height, 100%);
8
10
  --tab-height: var(--bui-tab-height, 100%);
9
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));
10
13
  position: relative;
11
14
  font-family: var(--bui-font-family);
12
15
  }
@@ -29,7 +32,7 @@
29
32
  bottom: 0;
30
33
  height: var(--line-height);
31
34
  color: var(--bui-color-primary);
32
- background: var(--bui-color-primary);
35
+ background: var(--line-color);
33
36
  border-radius: var(--bui-shape-radius-label);
34
37
  }
35
38
  .bui-tabs-content {
@@ -40,8 +43,8 @@
40
43
  top: 0;
41
44
  bottom: 0;
42
45
  z-index: 1;
43
- width: 12px;
44
- height: var(--bui-tabs-mask-height);
46
+ width: var(--mask-width);
47
+ height: var(--mask-height);
45
48
  pointer-events: none;
46
49
  }
47
50
  .bui-tabs-mask-left {
package/es/Tabs/Tabs.js CHANGED
@@ -116,6 +116,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
116
116
  useEffect(() => {
117
117
  const handleResize = debounce(() => {
118
118
  animate({ transitionInUse: true });
119
+ updateMask();
119
120
  }, 100);
120
121
  window.addEventListener("resize", handleResize);
121
122
  return () => {
package/es/Tag/Tag.css CHANGED
@@ -1,4 +1,11 @@
1
1
  .bui-tag {
2
+ --tag-color: var(--bui-tag-color, var(--bui-color-gray));
3
+ --tag-border-color: var(--bui-tag-border-color, var(--bui-color-border-gray));
4
+ --tag-bg-color: var(--bui-tag-bg-color, var(--bui-color-gray));
5
+ --tag-height: var(--bui-tag-height, 15px);
6
+ --tag-line-height: var(--bui-tag-line-height, 15px);
7
+ --tag-padding: var(--bui-tag-padding, 0 var(--bui-spacing-xs));
8
+ --tag-bg-color-vip: var(--bui-tag-color-vip, rgba(255, 134, 110, 0.3));
2
9
  position: relative;
3
10
  display: inline-flex;
4
11
  align-items: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/react",
3
- "version": "1.4.0-beta.2",
3
+ "version": "1.4.1",
4
4
  "description": "React components for building mobile application",
5
5
  "homepage": "http://bui.taopiaopiao.com",
6
6
  "license": "MIT",
@@ -33,10 +33,10 @@
33
33
  "clsx": "^1.2.1",
34
34
  "dayjs": "^1.11.7",
35
35
  "swiper": "^8.1.5",
36
- "@bifrostui/icons": "1.4.0-beta.2",
37
- "@bifrostui/styles": "1.4.0-beta.2",
38
- "@bifrostui/types": "1.4.0-beta.2",
39
- "@bifrostui/utils": "1.4.0-beta.2"
36
+ "@bifrostui/icons": "1.4.1",
37
+ "@bifrostui/styles": "1.4.1",
38
+ "@bifrostui/types": "1.4.1",
39
+ "@bifrostui/utils": "1.4.1"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@tarojs/components": "^3.0.0",