@bifrostui/react 2.0.0-beta.2 → 2.0.0-beta.5

package/es/TabBar/index.types.d.ts

@@ -10,14 +10,14 @@ export type TabBarProps<D extends React.ElementType = 'div', P = {}> = OverrideP
         current?: number;
         /**
          * 默认文案颜色
-         * @default 'default'
+         * @default 'neutral'
          */
-        color?: ThemeColor | 'default' | 'vip';
+        color?: ThemeColor | 'vip';
         /**
          * 选中文案颜色
          * @default 'primary'
          */
-        activeColor?: ThemeColor | 'default' | 'vip';
+        activeColor?: ThemeColor | 'vip';
         /**
          * 变化时回调函数
          */

package/es/Tabs/Tab.css

@@ -4,25 +4,25 @@
   justify-content: center;
   white-space: nowrap;
   width: min-content;
-  height: 100%;
+  height: var(--bui-tab-height);
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  font-size: var(--bui-tabs-font-size);
+  font-size: var(--bui-tab-font-size);
   line-height: var(--bui-line-height);
-  color: var(--bui-tabs-color);
+  color: var(--bui-tab-color);
   padding: var(--bui-tab-padding);
-  font-family: var(--bui-tabs-font-family);
+  font-family: var(--bui-font-family);
 }
 .bui-tab-active {
-  --bui-tabs-font-family: var(--bui-font-family-accent, inherit);
-  --bui-tabs-color: var(--bui-color-fg-default);
-  font-weight: 600;
+  color: var(--bui-tab-active-color);
+  font-weight: var(--bui-font-weight-bold);
+  font-family: var(--bui-tab-active-font-family);
 }
 .bui-tab-miniapp-active {
-  --bui-tabs-color: var(--bui-color-fg-default);
+  color: var(--bui-tab-active-color);
   line-height: 1.5;
-  font-weight: var(--bui-font-weight-medium);
+  font-weight: var(--bui-font-weight-bold);
   position: relative;
 }
 .bui-tab-miniapp-active-line {

package/es/Tabs/Tabs.css

@@ -1,6 +1,26 @@
+:root,
+page,
+xhs-page {
+  --bui-tabs-height: 39px;
+  --bui-tabs-font-weight: var(--bui-font-weight-medium);
+  --bui-tabs-indicator-background: var(--bui-color-primary);
+  --bui-tabs-indicator-height: 3PX;
+  --bui-tabs-indicator-width: 24px;
+  --bui-tabs-indicator-border-radius: 3px 3px 0 0;
+  --bui-tabs-indicator-bottom: 0;
+  --bui-tabs-indicator-box-shadow: none;
+  --bui-tabs-mask-width: 12px;
+  --bui-tabs-mask-height: 100%;
+  --bui-tab-font-size: var(--bui-text-size-1);
+  --bui-tab-color: var(--bui-color-fg-subtle);
+  --bui-tab-height: 100%;
+  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
+  --bui-tab-active-color: var(--bui-color-fg-default);
+  --bui-tab-active-font-family: var(--bui-font-family-accent, inherit);
+}
 .bui-tabs {
   position: relative;
-  font-family: var(--bui-tabs-font-family);
+  font-family: var(--bui-font-family);
   font-weight: var(--bui-tabs-font-weight);
 }
 .bui-tabs-tabs {
@@ -22,7 +42,7 @@
   bottom: var(--bui-tabs-indicator-bottom);
   height: var(--bui-tabs-indicator-height);
   color: var(--bui-color-primary);
-  background: var(--bui-tabs-indicator-bg);
+  background: var(--bui-tabs-indicator-background);
   border-radius: var(--bui-tabs-indicator-border-radius);
   box-shadow: var(--bui-tabs-indicator-box-shadow);
 }
@@ -34,8 +54,8 @@
   top: 0;
   bottom: 0;
   z-index: 1;
-  width: 12px;
-  height: 100%;
+  width: var(--bui-tabs-mask-width);
+  height: var(--bui-tabs-mask-height);
   pointer-events: none;
 }
 .bui-tabs-mask-left {

package/es/Tabs/Tabs.js

@@ -174,7 +174,7 @@ const Tabs = /* @__PURE__ */ React.forwardRef((props, ref) => {
       }),
       style: {
         transition: "transform 0.3s ease-in-out",
-        transform: `translate3d(${indicatorData.x}px, 0px, 0px)`
+        transform: `translate(${indicatorData.x}px, 0px)`
       }
     }
   ), /* @__PURE__ */ React.createElement(TabsContextProvider, { value: providerValue }, !!tabs.length && tabs.map((item) => {

package/es/Tabs/index.css

@@ -0,0 +1,135 @@
+:root,
+page,
+xhs-page {
+  --bui-tabs-height: 39px;
+  --bui-tabs-font-weight: var(--bui-font-weight-medium);
+  --bui-tabs-indicator-background: var(--bui-color-primary);
+  --bui-tabs-indicator-height: 3PX;
+  --bui-tabs-indicator-width: 24px;
+  --bui-tabs-indicator-border-radius: 3px 3px 0 0;
+  --bui-tabs-indicator-bottom: 0;
+  --bui-tabs-indicator-box-shadow: none;
+  --bui-tabs-mask-width: 12px;
+  --bui-tabs-mask-height: 100%;
+  --bui-tab-font-size: var(--bui-text-size-1);
+  --bui-tab-color: var(--bui-color-fg-subtle);
+  --bui-tab-height: 100%;
+  --bui-tab-padding: var(--bui-spacing-lg) var(--bui-spacing-lg) 10px;
+  --bui-tab-active-color: var(--bui-color-fg-default);
+  --bui-tab-active-font-family: var(--bui-font-family-accent, inherit);
+}
+.bui-tabs {
+  position: relative;
+  font-family: var(--bui-font-family);
+  font-weight: var(--bui-tabs-font-weight);
+}
+.bui-tabs-tabs {
+  height: var(--bui-tabs-height);
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+.bui-tabs-tabs::-webkit-scrollbar {
+  display: none;
+}
+.bui-tabs-indicator {
+  position: absolute;
+  width: var(--bui-tabs-indicator-width);
+  bottom: var(--bui-tabs-indicator-bottom);
+  height: var(--bui-tabs-indicator-height);
+  color: var(--bui-color-primary);
+  background: var(--bui-tabs-indicator-background);
+  border-radius: var(--bui-tabs-indicator-border-radius);
+  box-shadow: var(--bui-tabs-indicator-box-shadow);
+}
+.bui-tabs-content {
+  padding: var(--bui-spacing-lg);
+}
+.bui-tabs-mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: var(--bui-tabs-mask-width);
+  height: var(--bui-tabs-mask-height);
+  pointer-events: none;
+}
+.bui-tabs-mask-left {
+  left: 0;
+  background:
+    linear-gradient(
+      to right,
+      var(--bui-color-bg-view),
+      rgba(255, 255, 255, 0));
+}
+.bui-tabs-mask-right {
+  right: 0;
+  background:
+    linear-gradient(
+      to left,
+      var(--bui-color-bg-view),
+      rgba(255, 255, 255, 0));
+}
+.bui-indicator-invisible {
+  visibility: hidden;
+  background-color: transparent;
+}
+.bui-tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  width: min-content;
+  height: var(--bui-tab-height);
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+  font-size: var(--bui-tab-font-size);
+  line-height: var(--bui-line-height);
+  color: var(--bui-tab-color);
+  padding: var(--bui-tab-padding);
+  font-family: var(--bui-font-family);
+}
+.bui-tab-active {
+  color: var(--bui-tab-active-color);
+  font-weight: var(--bui-font-weight-bold);
+  font-family: var(--bui-tab-active-font-family);
+}
+.bui-tab-miniapp-active {
+  color: var(--bui-tab-active-color);
+  line-height: 1.5;
+  font-weight: var(--bui-font-weight-bold);
+  position: relative;
+}
+.bui-tab-miniapp-active-line {
+  position: absolute;
+  bottom: 0;
+  left: -12px;
+  right: -12px;
+  margin: 0 auto !important;
+  width: 18px;
+  height: 2px;
+  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background-color: var(--bui-color-primary);
+}
+.bui-tab-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.bui-indicator-invisible {
+  visibility: hidden;
+  background-color: transparent;
+}
+.bui-tabpanel {
+  font-family: var(--bui-font-family);
+}
+.bui-tabpanel-active {
+  display: block;
+}
+.bui-tabpanel-inactive {
+  display: none;
+}

package/es/Tag/Tag.css

@@ -1,30 +1,34 @@
+:root,
+page,
+xhs-page {
+  --bui-tag-color: var(--bui-color-gray);
+  --bui-tag-border-color: var(--bui-color-border-gray);
+  --bui-tag-bg-color: var(--bui-color-gray);
+  --bui-tag-height: 15px;
+  --bui-tag-line-height: 15px;
+  --bui-tag-padding: 0 var(--bui-spacing-xs);
+  --bui-tag-color-vip: rgba(255, 134, 110, 0.3);
+}
 .bui-tag {
-  --tag-color: var(--bui-tag-color, var(--bui-color-gray));
-  --tag-border-color: var(--bui-tag-border-color, var(--bui-color-border-gray));
-  --tag-bg-color: var(--bui-tag-bg-color, var(--bui-color-gray));
-  --tag-height: var(--bui-tag-height, 15px);
-  --tag-line-height: var(--bui-tag-line-height, 15px);
-  --tag-padding: var(--bui-tag-padding, 0 var(--bui-spacing-xs));
-  --tag-bg-color-vip: var(--bui-tag-color-vip, rgba(255, 134, 110, 0.3));
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  height: var(--tag-height);
-  line-height: var(--tag-line-height);
-  padding: var(--tag-padding);
+  height: var(--bui-tag-height);
+  line-height: var(--bui-tag-line-height);
+  padding: var(--bui-tag-padding);
   font-size: var(--bui-text-size-5);
   font-weight: var(--bui-font-weight-normal);
   border-radius: var(--bui-shape-radius-label);
   border: 1px solid transparent;
   box-sizing: border-box;
-  color: var(--bui-color-bg-view);
+  color: var(--bui-color-white);
   font-family: var(--bui-font-family);
 }
 .bui-tag-outlined {
-  color: var(--tag-color);
-  border: 1px solid var(--tag-border-color);
+  color: var(--bui-tag-color);
+  border: 1px solid var(--bui-tag-border-color);
 }
 .bui-tag-outlined.bui-tag-primary {
   color: var(--bui-color-primary);
@@ -46,12 +50,20 @@
   color: var(--bui-color-danger);
   border: 1px solid var(--bui-color-border-danger);
 }
+.bui-tag-outlined.bui-tag-light {
+  color: var(--bui-color-bg-view);
+  border: 1px solid var(--bui-color-bg-view);
+}
+.bui-tag-outlined.bui-tag-dark {
+  color: var(--bui-color-fg-default);
+  border: 1px solid var(--bui-color-fg-default);
+}
 .bui-tag-outlined.bui-tag-vip {
   color: var(--bui-color-primary);
   border: 1px solid var(--bui-color-border-primary);
 }
 .bui-tag-contained {
-  background-color: var(--tag-bg-color);
+  background-color: var(--bui-tag-bg-color);
 }
 .bui-tag-contained.bui-tag-primary {
   background-color: var(--bui-color-primary);
@@ -68,34 +80,48 @@
 .bui-tag-contained.bui-tag-danger {
   background-color: var(--bui-color-danger);
 }
+.bui-tag-contained.bui-tag-light {
+  color: var(--bui-color-fg-default);
+  background-color: var(--bui-color-bg-view);
+}
+.bui-tag-contained.bui-tag-dark {
+  color: var(--bui-color-bg-view);
+  background-color: var(--bui-color-fg-default);
+}
 .bui-tag-contained.bui-tag-vip {
   background-color: var(--bui-color-vip);
 }
-.bui-tag-light {
+.bui-tag-subtle {
   background-color: var(--bui-color-gray-light);
   color: var(--bui-color-gray);
 }
-.bui-tag-light.bui-tag-primary {
+.bui-tag-subtle.bui-tag-primary {
   background-color: var(--bui-color-primary-light);
   color: var(--bui-color-primary);
 }
-.bui-tag-light.bui-tag-info {
+.bui-tag-subtle.bui-tag-info {
   background-color: var(--bui-color-info-light);
   color: var(--bui-color-info);
 }
-.bui-tag-light.bui-tag-warning {
+.bui-tag-subtle.bui-tag-warning {
   background-color: var(--bui-color-warning-light);
   color: var(--bui-color-warning);
 }
-.bui-tag-light.bui-tag-success {
+.bui-tag-subtle.bui-tag-success {
   background-color: var(--bui-color-success-light);
   color: var(--bui-color-success);
 }
-.bui-tag-light.bui-tag-danger {
+.bui-tag-subtle.bui-tag-danger {
   background-color: var(--bui-color-danger-light);
   color: var(--bui-color-danger);
 }
-.bui-tag-light.bui-tag-vip {
-  background-color: var(--tag-bg-color-vip);
+.bui-tag-subtle.bui-tag-light {
+  color: var(--bui-color-bg-view);
+}
+.bui-tag-subtle.bui-tag-dark {
+  color: var(--bui-color-fg-default);
+}
+.bui-tag-subtle.bui-tag-vip {
+  background-color: var(--bui-tag-color-vip);
   color: var(--bui-color-vip);
 }

package/es/Tag/Tag.js

@@ -47,7 +47,7 @@ const Tag = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     className,
     style,
-    color = "default",
+    color = "neutral",
     htmlColor,
     variant = "outlined",
     onClick,
@@ -68,7 +68,7 @@ const Tag = /* @__PURE__ */ React.forwardRef((props, ref) => {
         color: htmlColor,
         borderColor: colorHandler(htmlColor, 0.4)
       };
-    } else if (variant === "light") {
+    } else if (variant === "subtle") {
       customStyles = {
         color: htmlColor,
         backgroundColor: colorHandler(htmlColor, 0.3)

package/es/Tag/Tag.types.d.ts

@@ -4,9 +4,9 @@ export type TagProps<D extends React.ElementType = 'div', P = {}> = OverrideProp
     props: P & {
         /**
          * 预定义色彩
-         * @default 'default'
+         * @default 'neutral'
          */
-        color?: ThemeColor | 'default' | 'vip';
+        color?: ThemeColor | 'vip';
         /**
          * 自定义色彩
          */
@@ -14,10 +14,10 @@ export type TagProps<D extends React.ElementType = 'div', P = {}> = OverrideProp
         /**
          * - outlined: 描边
          * - contained: 实心填充
-         * - light: 浅亮填充
+         * - subtle: 柔和填充
          * @default 'outlined'
          */
-        variant?: 'outlined' | 'contained' | 'light';
+        variant?: 'outlined' | 'contained' | 'subtle';
     };
     defaultComponent: D;
 }, D>;

package/es/Tag/TagGroup.css

@@ -1,12 +1,16 @@
+:root,
+page,
+xhs-page {
+  --bui-tag-group-divider-height: 13%;
+  --bui-tag-color: var(--bui-color-gray);
+  --bui-tag-border-color: var(--bui-color-border-gray);
+  --bui-tag-bg-color: var(--bui-color-gray);
+  --bui-tag-height: 15px;
+  --bui-tag-line-height: 15px;
+  --bui-tag-padding: 0 var(--bui-spacing-xs);
+  --bui-tag-color-vip: rgba(255, 134, 110, 0.3);
+}
 .bui-tag-group {
-  --height: var(--bui-tag-group-divider-height, 13%);
-  --tag-color: var(--bui-tag-color, var(--bui-color-gray));
-  --tag-border-color: var(--bui-tag-border-color, var(--bui-color-border-gray));
-  --tag-bg-color: var(--bui-tag-bg-color, var(--bui-color-gray));
-  --tag-height: var(--bui-tag-height, 15px);
-  --tag-line-height: var(--bui-tag-line-height, 15px);
-  --tag-padding: var(--bui-tag-padding, 0 var(--bui-spacing-xs));
-  --tag-bg-color-vip: var(--bui-tag-color-vip, rgba(255, 134, 110, 0.3));
   display: inline-flex;
   font-family: var(--bui-font-family);
 }
@@ -32,7 +36,7 @@
   position: absolute;
   right: -1px;
   width: 1px;
-  height: var(--height);
+  height: var(--bui-tag-group-divider-height);
   color: #fff;
   background-color: #fff;
   border-right-style: solid;

package/es/Tag/index.css

@@ -0,0 +1,182 @@
+:root,
+page,
+xhs-page {
+  --bui-tag-color: var(--bui-color-gray);
+  --bui-tag-border-color: var(--bui-color-border-gray);
+  --bui-tag-bg-color: var(--bui-color-gray);
+  --bui-tag-height: 15px;
+  --bui-tag-line-height: 15px;
+  --bui-tag-padding: 0 var(--bui-spacing-xs);
+  --bui-tag-color-vip: rgba(255, 134, 110, 0.3);
+}
+.bui-tag {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  height: var(--bui-tag-height);
+  line-height: var(--bui-tag-line-height);
+  padding: var(--bui-tag-padding);
+  font-size: var(--bui-text-size-5);
+  font-weight: var(--bui-font-weight-normal);
+  border-radius: var(--bui-shape-radius-label);
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  color: var(--bui-color-white);
+  font-family: var(--bui-font-family);
+}
+.bui-tag-outlined {
+  color: var(--bui-tag-color);
+  border: 1px solid var(--bui-tag-border-color);
+}
+.bui-tag-outlined.bui-tag-primary {
+  color: var(--bui-color-primary);
+  border: 1px solid var(--bui-color-border-primary);
+}
+.bui-tag-outlined.bui-tag-info {
+  color: var(--bui-color-info);
+  border: 1px solid var(--bui-color-border-info);
+}
+.bui-tag-outlined.bui-tag-warning {
+  color: var(--bui-color-warning);
+  border: 1px solid var(--bui-color-border-warning);
+}
+.bui-tag-outlined.bui-tag-success {
+  color: var(--bui-color-success);
+  border: 1px solid var(--bui-color-border-success);
+}
+.bui-tag-outlined.bui-tag-danger {
+  color: var(--bui-color-danger);
+  border: 1px solid var(--bui-color-border-danger);
+}
+.bui-tag-outlined.bui-tag-light {
+  color: var(--bui-color-bg-view);
+  border: 1px solid var(--bui-color-bg-view);
+}
+.bui-tag-outlined.bui-tag-dark {
+  color: var(--bui-color-fg-default);
+  border: 1px solid var(--bui-color-fg-default);
+}
+.bui-tag-outlined.bui-tag-vip {
+  color: var(--bui-color-primary);
+  border: 1px solid var(--bui-color-border-primary);
+}
+.bui-tag-contained {
+  background-color: var(--bui-tag-bg-color);
+}
+.bui-tag-contained.bui-tag-primary {
+  background-color: var(--bui-color-primary);
+}
+.bui-tag-contained.bui-tag-info {
+  background-color: var(--bui-color-info);
+}
+.bui-tag-contained.bui-tag-warning {
+  background-color: var(--bui-color-warning);
+}
+.bui-tag-contained.bui-tag-success {
+  background-color: var(--bui-color-success);
+}
+.bui-tag-contained.bui-tag-danger {
+  background-color: var(--bui-color-danger);
+}
+.bui-tag-contained.bui-tag-light {
+  color: var(--bui-color-fg-default);
+  background-color: var(--bui-color-bg-view);
+}
+.bui-tag-contained.bui-tag-dark {
+  color: var(--bui-color-bg-view);
+  background-color: var(--bui-color-fg-default);
+}
+.bui-tag-contained.bui-tag-vip {
+  background-color: var(--bui-color-vip);
+}
+.bui-tag-subtle {
+  background-color: var(--bui-color-gray-light);
+  color: var(--bui-color-gray);
+}
+.bui-tag-subtle.bui-tag-primary {
+  background-color: var(--bui-color-primary-light);
+  color: var(--bui-color-primary);
+}
+.bui-tag-subtle.bui-tag-info {
+  background-color: var(--bui-color-info-light);
+  color: var(--bui-color-info);
+}
+.bui-tag-subtle.bui-tag-warning {
+  background-color: var(--bui-color-warning-light);
+  color: var(--bui-color-warning);
+}
+.bui-tag-subtle.bui-tag-success {
+  background-color: var(--bui-color-success-light);
+  color: var(--bui-color-success);
+}
+.bui-tag-subtle.bui-tag-danger {
+  background-color: var(--bui-color-danger-light);
+  color: var(--bui-color-danger);
+}
+.bui-tag-subtle.bui-tag-light {
+  color: var(--bui-color-bg-view);
+}
+.bui-tag-subtle.bui-tag-dark {
+  color: var(--bui-color-fg-default);
+}
+.bui-tag-subtle.bui-tag-vip {
+  background-color: var(--bui-tag-color-vip);
+  color: var(--bui-color-vip);
+}
+:root,
+page,
+xhs-page {
+  --bui-tag-group-divider-height: 13%;
+  --bui-tag-color: var(--bui-color-gray);
+  --bui-tag-border-color: var(--bui-color-border-gray);
+  --bui-tag-bg-color: var(--bui-color-gray);
+  --bui-tag-height: 15px;
+  --bui-tag-line-height: 15px;
+  --bui-tag-padding: 0 var(--bui-spacing-xs);
+  --bui-tag-color-vip: rgba(255, 134, 110, 0.3);
+}
+.bui-tag-group {
+  display: inline-flex;
+  font-family: var(--bui-font-family);
+}
+.bui-tag-group .bui-tag-outlined {
+  background-color: var(--bui-color-white);
+}
+.bui-tag-group .bui-tag-outlined + .bui-tag-contained {
+  margin-left: -1px;
+}
+.bui-tag-group .bui-tag-outlined:not(:last-child) {
+  position: relative;
+  border-right-style: dotted;
+}
+.bui-tag-group .bui-tag-outlined:not(:last-child)::after {
+  top: 0;
+}
+.bui-tag-group .bui-tag-outlined:not(:last-child)::before {
+  bottom: 0;
+}
+.bui-tag-group .bui-tag-outlined:not(:last-child)::after,
+.bui-tag-group .bui-tag-outlined:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  right: -1px;
+  width: 1px;
+  height: var(--bui-tag-group-divider-height);
+  color: #fff;
+  background-color: #fff;
+  border-right-style: solid;
+}
+.bui-tag-group .bui-tag:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.bui-tag-group .bui-tag:not(:last-child):not(.bui-tag-outlined) {
+  border-right: 0;
+}
+.bui-tag-group .bui-tag:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: 0;
+}

package/es/TextArea/TextArea.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { TextAreaProps } from './TextArea.types';
-import './TextArea.less';
+import './index.less';
 declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default TextArea;

package/es/TextArea/TextArea.js

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 import { isMini, useForkRef, useValue } from "@bifrostui/utils";
 import clsx from "clsx";
 import React, { useEffect, useRef } from "react";
-import "./TextArea.css";
+import "./index.css";
 const prefixCls = "bui-textarea";
 const DEFAULT_ROWS = 2;
 const TextArea = /* @__PURE__ */ React.forwardRef(