@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/Switch/index.css

@@ -0,0 +1,153 @@
+:root,
+page,
+xhs-page {
+  --bui-switch-bg-color: #ccc;
+  --bui-switch-padding: 0;
+  --bui-switch-border-radius: 15px;
+  --bui-switch-small-width: 24px;
+  --bui-switch-small-height: 16px;
+  --bui-switch-small-font-size: 9px;
+  --bui-switch-controller-small-width: 12px;
+  --bui-switch-controller-small-height: 12px;
+  --bui-switch-width: 44px;
+  --bui-switch-height: 22px;
+  --bui-switch-font-size: var(--bui-text-size-3);
+  --bui-switch-controller-width: 18px;
+  --bui-switch-controller-height: 18px;
+  --bui-switch-checked-controller-left: calc(100% - 20px);
+  --bui-switch-controller-left: 2px;
+  --bui-switch-large-width: 51px;
+  --bui-switch-large-height: 30px;
+  --bui-switch-large-font-size: var(--bui-text-size-3);
+  --bui-switch-controller-large-width: 24px;
+  --bui-switch-controller-large-height: 24px;
+}
+.bui-switch {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  padding: var(--bui-switch-padding);
+  vertical-align: middle;
+  border-radius: var(--bui-switch-border-radius);
+  background-color: var(--bui-switch-bg-color);
+  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+  font-family: var(--bui-font-family);
+}
+.bui-switch::after {
+  position: absolute;
+  left: var(--bui-switch-controller-left);
+  top: 2px;
+  border-radius: 50%;
+  background-color: #fff;
+  content: " ";
+  cursor: pointer;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
+  transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+  animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
+  animation-duration: 0.3s;
+}
+.bui-switch:focus {
+  outline: none;
+}
+.bui-switch-small {
+  width: var(--bui-switch-small-width);
+  height: var(--bui-switch-small-height);
+}
+.bui-switch-small .bui-switch-inner {
+  left: calc(100% - 10px);
+  font-size: var(--bui-switch-small-font-size);
+}
+.bui-switch-small::after {
+  width: var(--bui-switch-controller-small-width);
+  height: var(--bui-switch-controller-small-height);
+  left: 2px;
+  top: 2px;
+}
+.bui-switch-small.bui-switch-checked::after {
+  left: calc(100% - 14px);
+}
+.bui-switch-small.bui-switch-checked .bui-switch-inner {
+  left: 2px;
+}
+.bui-switch-medium {
+  width: var(--bui-switch-width);
+  height: var(--bui-switch-height);
+}
+.bui-switch-medium .bui-switch-inner {
+  font-size: var(--bui-switch-font-size);
+}
+.bui-switch-medium::after {
+  width: var(--bui-switch-controller-width);
+  height: var(--bui-switch-controller-height);
+}
+.bui-switch-medium.bui-switch-checked::after {
+  left: var(--bui-switch-checked-controller-left);
+}
+.bui-switch-medium.bui-switch-checked .bui-switch-inner {
+  left: var(--bui-spacing-sm);
+}
+.bui-switch-large {
+  width: var(--bui-switch-large-width);
+  height: var(--bui-switch-large-height);
+}
+.bui-switch-large .bui-switch-inner {
+  left: calc(100% - 22px);
+  font-size: var(--bui-switch-large-font-size);
+}
+.bui-switch-large::after {
+  width: var(--bui-switch-controller-large-width);
+  height: var(--bui-switch-controller-large-height);
+  left: 3px;
+  top: 3px;
+}
+.bui-switch-large.bui-switch-checked::after {
+  left: calc(100% - 27px);
+}
+.bui-switch-large.bui-switch-checked .bui-switch-inner {
+  left: var(--bui-spacing-sm);
+}
+.bui-switch-primary.bui-switch-checked {
+  background-color: var(--bui-color-primary);
+}
+.bui-switch-info.bui-switch-checked {
+  background-color: var(--bui-color-info);
+}
+.bui-switch-success.bui-switch-checked {
+  background-color: var(--bui-color-success);
+}
+.bui-switch-warning.bui-switch-checked {
+  background-color: var(--bui-color-warning);
+}
+.bui-switch-danger.bui-switch-checked {
+  background-color: var(--bui-color-danger);
+}
+.bui-switch-inner {
+  position: absolute;
+  left: calc(100% - 20px);
+  color: var(--bui-color-white);
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.bui-switch-inner .bui-svg-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.bui-switch-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.bui-switch-disabled::after {
+  animation-name: none;
+  cursor: not-allowed;
+}
+.bui-switch-input {
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  position: absolute;
+  z-index: 1;
+  cursor: pointer;
+}

package/dist/TabBar/TabBar.css

@@ -1,12 +1,16 @@
+:root,
+page,
+xhs-page {
+  --bui-tab-bar-width: 100%;
+  --bui-tab-bar-height: 50px;
+  --bui-tab-bar-padding: 6px 0;
+  --bui-tab-bar-color: var(--bui-color-fg-default);
+}
 .bui-tab-bar {
-  --width: var(--bui-tab-bar-width, 100%);
-  --height: var(--bui-tab-bar-height, 50px);
-  --padding: var(--bui-tab-bar-padding, 6px 0);
-  --bui-tab-bar-color: var(--bui-tab-bar-default-color, var(--bui-color-fg-default));
   display: flex;
-  width: var(--width);
-  height: var(--height);
-  padding: var(--padding);
-  background: var(--bui-color-white);
+  width: var(--bui-tab-bar-width);
+  height: var(--bui-tab-bar-height);
+  padding: var(--bui-tab-bar-padding);
+  background: var(--bui-color-bg-view);
   font-family: var(--bui-font-family);
 }

package/dist/TabBar/TabBar.js

@@ -63,9 +63,9 @@ var import_TabBar = require("./TabBar.css");
 const prefixCls = "bui-tab-bar";
 const TabBar = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props || {}, {
-    current,
-    activeColor,
-    color,
+    current = 0,
+    activeColor = "primary",
+    color = "neutral",
     children,
     className,
     onChange
@@ -97,9 +97,4 @@ const TabBar = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   );
 });
 TabBar.displayName = "BuiTabBar";
-TabBar.defaultProps = {
-  activeColor: "primary",
-  color: "default",
-  current: 0
-};
 var TabBar_default = TabBar;

package/dist/TabBar/TabBarItem.css

@@ -22,6 +22,12 @@
 .bui-tab-bar-item-danger {
   color: var(--bui-color-danger);
 }
+.bui-tab-bar-item-light {
+  color: var(--bui-color-fg-default);
+}
+.bui-tab-bar-item-dark {
+  color: var(--bui-color-bg-view);
+}
 .bui-tab-bar-item-vip {
   color: var(--bui-color-vip);
 }

package/dist/TabBar/TabBarItem.js

@@ -58,9 +58,9 @@ __export(TabBarItem_exports, {
 module.exports = __toCommonJS(TabBarItem_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
-var import_Badge = __toESM(require("../Badge"));
-var import_TabBarItem = require("./TabBarItem.css");
+var import_Badge = require("../Badge");
 var import_TabBarContext = __toESM(require("./TabBarContext"));
+var import_TabBarItem = require("./TabBarItem.css");
 const prefixCls = "bui-tab-bar-item";
 const TabBarItem = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
@@ -102,7 +102,7 @@ const TabBarItem = /* @__PURE__ */ import_react.default.forwardRef(
         ref,
         onClick: handleClick
       }, others),
-      children || ((_b = Object.values(BadgeProps || {})) == null ? void 0 : _b.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(import_Badge.default, __spreadValues({}, BadgeProps), currentIndex === index && activeIcon ? activeIcon : icon, /* @__PURE__ */ import_react.default.createElement(
+      children || ((_b = Object.values(BadgeProps || {})) == null ? void 0 : _b.length) > 0 ? /* @__PURE__ */ import_react.default.createElement(import_Badge.Badge, __spreadValues({}, BadgeProps), currentIndex === index && activeIcon ? activeIcon : icon, /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
           className: (0, import_clsx.default)(`${prefixCls}-title`, {

package/dist/TabBar/index.css

@@ -0,0 +1,59 @@
+:root,
+page,
+xhs-page {
+  --bui-tab-bar-width: 100%;
+  --bui-tab-bar-height: 50px;
+  --bui-tab-bar-padding: 6px 0;
+  --bui-tab-bar-color: var(--bui-color-fg-default);
+}
+.bui-tab-bar {
+  display: flex;
+  width: var(--bui-tab-bar-width);
+  height: var(--bui-tab-bar-height);
+  padding: var(--bui-tab-bar-padding);
+  background: var(--bui-color-bg-view);
+  font-family: var(--bui-font-family);
+}
+.bui-tab-bar-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  flex: 1;
+  color: var(--bui-tab-bar-color);
+  font-family: var(--bui-font-family);
+}
+.bui-tab-bar-item-primary {
+  color: var(--bui-color-primary);
+}
+.bui-tab-bar-item-success {
+  color: var(--bui-color-success);
+}
+.bui-tab-bar-item-info {
+  color: var(--bui-color-info);
+}
+.bui-tab-bar-item-warning {
+  color: var(--bui-color-warning);
+}
+.bui-tab-bar-item-danger {
+  color: var(--bui-color-danger);
+}
+.bui-tab-bar-item-light {
+  color: var(--bui-color-fg-default);
+}
+.bui-tab-bar-item-dark {
+  color: var(--bui-color-bg-view);
+}
+.bui-tab-bar-item-vip {
+  color: var(--bui-color-vip);
+}
+.bui-tab-bar-item .bui-badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.bui-tab-bar-item .bui-badge-position .bui-badge-contained,
+.bui-tab-bar-item .bui-badge-position .bui-badge-outlined {
+  top: 0;
+}

package/dist/Tabs/Tab.css

@@ -4,31 +4,25 @@
   justify-content: center;
   white-space: nowrap;
   width: min-content;
-  height: var(--tab-height);
+  height: var(--bui-tab-height);
   box-sizing: border-box;
   position: relative;
   cursor: pointer;
-  font-size: var(--font-size);
+  font-size: var(--bui-tab-font-size);
   line-height: var(--bui-line-height);
-  color: var(--color);
-  padding: var(--tab-padding);
+  color: var(--bui-tab-color);
+  padding: var(--bui-tab-padding);
   font-family: var(--bui-font-family);
 }
 .bui-tab-active {
-  font-size: var(--font-size);
-  line-height: var(--bui-line-height);
-  font-weight: var(--bui-font-weight-medium);
-  color: var(--active-color);
-}
-.bui-tab-center {
-  flex: 1 0 0;
-  margin: 0 auto;
+  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 {
-  font-size: var(--font-size);
+  color: var(--bui-tab-active-color);
   line-height: 1.5;
-  font-weight: var(--bui-font-weight-medium);
-  color: var(--active-color);
+  font-weight: var(--bui-font-weight-bold);
   position: relative;
 }
 .bui-tab-miniapp-active-line {
@@ -46,7 +40,7 @@
   opacity: 0.5;
   pointer-events: none;
 }
-.bui-tabline-invisible {
+.bui-indicator-invisible {
   visibility: hidden;
   background-color: transparent;
 }

package/dist/Tabs/Tab.js

@@ -59,9 +59,9 @@ __export(Tab_exports, {
   default: () => Tab_default
 });
 module.exports = __toCommonJS(Tab_exports);
-var import_utils = require("@bifrostui/utils");
-var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_clsx = __toESM(require("clsx"));
+var import_utils = require("@bifrostui/utils");
 var import_TabsContext = __toESM(require("./TabsContext"));
 var import_Tab2 = require("./Tab.css");
 const prefixCls = "bui-tab";
@@ -71,45 +71,59 @@ const Tab = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     children,
     index,
     disabled = false,
-    onClick
+    onClick,
+    role = "tab",
+    tabIndex,
+    "aria-selected": ariaSelected,
+    "aria-disabled": ariaDisabled
   } = _a, others = __objRest(_a, [
     "className",
     "children",
     "index",
     "disabled",
-    "onClick"
+    "onClick",
+    "role",
+    "tabIndex",
+    "aria-selected",
+    "aria-disabled"
   ]);
   const tabsContext = import_react.default.useContext(import_TabsContext.default);
-  const { value, align, triggerChange } = tabsContext;
+  const { value, triggerChange } = tabsContext;
+  const isActive = index === value;
+  const rootCls = (0, import_clsx.default)(
+    prefixCls,
+    {
+      [`${prefixCls}-active`]: !import_utils.isMini && isActive,
+      [`${prefixCls}-miniapp-active`]: import_utils.isMini && isActive,
+      [`${prefixCls}-disabled`]: disabled
+    },
+    className
+  );
+  const handleClick = (e) => {
+    if (disabled)
+      return;
+    e.preventDefault();
+    triggerChange(e, { index });
+    onClick == null ? void 0 : onClick(e, { index });
+  };
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadProps(__spreadValues({
+      role,
+      "aria-selected": ariaSelected != null ? ariaSelected : isActive,
+      "aria-disabled": ariaDisabled != null ? ariaDisabled : disabled,
+      tabIndex: tabIndex != null ? tabIndex : disabled ? -1 : 0,
       ref,
-      className: (0, import_clsx.default)(
-        prefixCls,
-        align !== "start" && `${prefixCls}-${align}`,
-        {
-          [`${prefixCls}-active`]: !import_utils.isMini && index === value,
-          [`${prefixCls}-miniapp-active`]: import_utils.isMini && index === value,
-          [`${prefixCls}-disabled`]: disabled
-        },
-        className
-      )
+      className: rootCls
     }, others), {
-      onClick: (e) => {
-        if (disabled)
-          return;
-        e.preventDefault();
-        triggerChange(e, { index });
-        onClick == null ? void 0 : onClick(e, { index });
-      }
+      onClick: handleClick
     }),
     children,
     import_utils.isMini && /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
         className: (0, import_clsx.default)(`${prefixCls}-miniapp-active-line`, {
-          "bui-tabline-invisible": index !== value
+          "bui-indicator-invisible": !isActive
         })
       }
     )

package/dist/Tabs/TabPanel.js

@@ -56,9 +56,9 @@ __export(TabPanel_exports, {
   default: () => TabPanel_default
 });
 module.exports = __toCommonJS(TabPanel_exports);
-var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_TabPanel = require("./TabPanel.css");
+var import_clsx = __toESM(require("clsx"));
+var import_TabPanel2 = require("./TabPanel.css");
 const prefixCls = "bui-tabpanel";
 const TabPanel = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
@@ -74,17 +74,21 @@ const TabPanel = (0, import_react.forwardRef)((props, ref) => {
     "index",
     "keepMounted"
   ]);
+  const isActive = value === index;
   const keepActiveDom = keepMounted ? children : null;
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadValues({
+      role: "tabpanel",
+      "aria-hidden": !isActive,
+      tabIndex: 0,
       ref,
       className: (0, import_clsx.default)(prefixCls, className, {
-        [`${prefixCls}-active`]: value === index,
-        [`${prefixCls}-inactive`]: value !== index
+        [`${prefixCls}-active`]: isActive,
+        [`${prefixCls}-inactive`]: !isActive
       })
     }, others),
-    value === index ? children : keepActiveDom
+    isActive ? children : keepActiveDom
   );
 });
 TabPanel.displayName = "BuiTabPanel";

package/dist/Tabs/Tabs.css

@@ -1,20 +1,30 @@
+:root,
+page,
+xhs-page {
+  --bui-tabs-height: 39px;
+  --bui-tabs-font-weight: var(--bui-font-weight-medium);
+  --bui-tabs-indicator-bg: 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 {
-  --height: var(--bui-tabs-height, 39px);
-  --color: var(--bui-tabs-color, var(--bui-color-fg-subtle));
-  --active-color: var(--bui-tabs-active-color, var(--bui-color-fg-default));
-  --line-color: var(--bui-tabs-line-color, var(--bui-color-primary));
-  --line-height: var(--bui-tabs-line-height, 3PX);
-  --line-width: var(--bui-tabs-line-width, 18px);
-  --mask-width: var(--bui-tabs-mask-width, 12px);
-  --mask-height: var(--bui-tabs-mask-height, 100%);
-  --tab-height: var(--bui-tab-height, 100%);
-  --tab-padding: var(--bui-tab-padding, var(--bui-spacing-lg) var(--bui-spacing-lg) 10px);
-  --font-size: var(--bui-tab-font-size, var(--bui-text-size-1));
   position: relative;
   font-family: var(--bui-font-family);
+  font-weight: var(--bui-tabs-font-weight);
 }
 .bui-tabs-tabs {
-  height: var(--height);
+  height: var(--bui-tabs-height);
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;
@@ -26,14 +36,15 @@
 .bui-tabs-tabs::-webkit-scrollbar {
   display: none;
 }
-.bui-tabs-tabline {
+.bui-tabs-indicator {
   position: absolute;
-  width: var(--line-width);
-  bottom: 0;
-  height: var(--line-height);
+  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(--line-color);
-  border-radius: var(--bui-shape-radius-label);
+  background: var(--bui-tabs-indicator-bg);
+  border-radius: var(--bui-tabs-indicator-border-radius);
+  box-shadow: var(--bui-tabs-indicator-box-shadow);
 }
 .bui-tabs-content {
   padding: var(--bui-spacing-lg);
@@ -43,8 +54,8 @@
   top: 0;
   bottom: 0;
   z-index: 1;
-  width: var(--mask-width);
-  height: var(--mask-height);
+  width: var(--bui-tabs-mask-width);
+  height: var(--bui-tabs-mask-height);
   pointer-events: none;
 }
 .bui-tabs-mask-left {
@@ -63,7 +74,7 @@
       var(--bui-color-bg-view),
       rgba(255, 255, 255, 0));
 }
-.bui-tabline-invisible {
+.bui-indicator-invisible {
   visibility: hidden;
   background-color: transparent;
 }