@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.1

package/es/Alert/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,107 @@
+import React from "react";
+import Alert from "../../Alert";
+const basicAlertDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      color: "info",
+      onClose: () => {
+        console.log("\u5173\u95ED info alert");
+      }
+    },
+    "\u8FD9\u662F\u4E00\u4E2A\u57FA\u7840\u7684 Alert \u7EC4\u4EF6\u793A\u4F8B"
+  ));
+};
+const multipleTypeAlertDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      color: "info",
+      onClose: () => {
+        console.log("\u5173\u95ED info alert");
+      }
+    },
+    "\u4FE1\u606F\u63D0\u793A"
+  ), /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      color: "success",
+      onClose: () => {
+        console.log("\u5173\u95ED success alert");
+      }
+    },
+    "\u6210\u529F\u63D0\u793A"
+  ), /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      color: "warning",
+      onClose: () => {
+        console.log("\u5173\u95ED warning alert");
+      }
+    },
+    "\u8B66\u544A\u63D0\u793A"
+  ), /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      color: "danger",
+      onClose: () => {
+        console.log("\u5173\u95ED danger alert");
+      }
+    },
+    "\u9519\u8BEF\u63D0\u793A"
+  ));
+};
+const actionAlertDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Alert,
+    {
+      color: "info",
+      action: /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            console.log("\u6267\u884C\u64CD\u4F5C");
+          }
+        },
+        "\u6267\u884C\u64CD\u4F5C"
+      ),
+      onClose: () => {
+        console.log("\u5173\u95ED alert");
+      }
+    },
+    "\u8FD9\u662F\u4E00\u4E2A\u5E26\u64CD\u4F5C\u6309\u94AE\u7684 Alert \u7EC4\u4EF6"
+  ));
+};
+const complexInteractionAlertDemo = () => {
+  const ComplexInteractionAlertDemo = () => {
+    const [showAlert, setShowAlert] = React.useState(true);
+    if (!showAlert) {
+      return /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setShowAlert(true) }, "\u91CD\u65B0\u663E\u793A Alert");
+    }
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      Alert,
+      {
+        color: "warning",
+        onClose: () => {
+          setShowAlert(false);
+        }
+      },
+      "\u8FD9\u662F\u4E00\u4E2A\u53EF\u4EE5\u5173\u95ED\u7684 Alert \u7EC4\u4EF6\uFF0C\u5173\u95ED\u540E\u4F1A\u663E\u793A\u91CD\u65B0\u663E\u793A\u6309\u94AE"
+    ));
+  };
+  return /* @__PURE__ */ React.createElement(ComplexInteractionAlertDemo, null);
+};
+var A11yDemos_default = {
+  basicAlertDemo,
+  multipleTypeAlertDemo,
+  actionAlertDemo,
+  complexInteractionAlertDemo
+};
+export {
+  actionAlertDemo,
+  basicAlertDemo,
+  complexInteractionAlertDemo,
+  A11yDemos_default as default,
+  multipleTypeAlertDemo
+};

package/es/Alert/index.css

@@ -5,8 +5,8 @@ xhs-page {
   --bui-alert-padding: 8px;
   --bui-alert-line-height: 16px;
   --bui-alert-default-icon-font-size: 15px;
-  --bui-alert-action-margin-left: 16px;
-  --bui-alert-icon-margin-right: var(--bui-spacing-xs);
+  --bui-alert-action-margin: 0 0 0 16px;
+  --bui-alert-icon-margin: 0 var(--bui-spacing-xs) 0 0;
   --bui-alert-icon-font-size: var(--bui-title-size-4);
 }
 .bui-alert {
@@ -66,7 +66,7 @@ xhs-page {
 }
 .bui-alert-action {
   flex-shrink: 0;
-  margin-left: var(--bui-alert-action-margin-left);
+  margin: var(--bui-alert-action-margin);
   word-wrap: keep-all;
   font-size: var(--bui-text-size-3);
   cursor: pointer;
@@ -78,7 +78,7 @@ xhs-page {
 .bui-alert-icon {
   display: flex;
   align-items: center;
-  margin-right: var(--bui-alert-icon-margin-right);
+  margin: var(--bui-alert-icon-margin);
   vertical-align: middle;
   font-size: var(--bui-alert-icon-font-size);
   cursor: pointer;

package/es/Avatar/AvatarGroup.css

@@ -1,12 +1,12 @@
 :root,
 page,
 xhs-page {
-  --bui-avatar-group-xsmall-margin-left: -5px;
-  --bui-avatar-group-small-margin-left: -9px;
+  --bui-avatar-group-xsmall-margin: 0 0 0 -5px;
+  --bui-avatar-group-small-margin: 0 0 0 -9px;
   --bui-avatar-group-small-box-shadow: 0 0 0 1px var(--bui-color-bg-view);
-  --bui-avatar-group-medium-margin-left: -13px;
+  --bui-avatar-group-medium-margin: 0 0 0 -13px;
   --bui-avatar-group-medium-box-shadow: 0 0 0 2px var(--bui-color-bg-view);
-  --bui-avatar-group-large-margin-left: -21px;
+  --bui-avatar-group-large-margin: 0 0 0 -21px;
   --bui-avatar-group-large-box-shadow: 0 0 0 3px var(--bui-color-bg-view);
 }
 .bui-avatar-group {
@@ -20,23 +20,23 @@ xhs-page {
   color: var(--bui-color-fg-default);
 }
 .bui-avatar-group .bui-avatar-xsmall:not(:first-child) {
-  margin-left: var(--bui-avatar-group-xsmall-margin-left);
+  margin: var(--bui-avatar-group-xsmall-margin);
 }
 .bui-avatar-group .bui-avatar-small {
   box-shadow: var(--bui-avatar-group-small-box-shadow);
 }
 .bui-avatar-group .bui-avatar-small:not(:first-child) {
-  margin-left: var(--bui-avatar-group-small-margin-left);
+  margin: var(--bui-avatar-group-small-margin);
 }
 .bui-avatar-group .bui-avatar-large {
   box-shadow: var(--bui-avatar-group-large-box-shadow);
 }
 .bui-avatar-group .bui-avatar-large:not(:first-child) {
-  margin-left: var(--bui-avatar-group-large-margin-left);
+  margin: var(--bui-avatar-group-large-margin);
 }
 .bui-avatar-group .bui-avatar-medium {
   box-shadow: var(--bui-avatar-group-medium-box-shadow);
 }
 .bui-avatar-group .bui-avatar-medium:not(:first-child) {
-  margin-left: var(--bui-avatar-group-medium-margin-left);
+  margin: var(--bui-avatar-group-medium-margin);
 }

package/es/Avatar/index.css

@@ -52,12 +52,12 @@ xhs-page {
 :root,
 page,
 xhs-page {
-  --bui-avatar-group-xsmall-margin-left: -5px;
-  --bui-avatar-group-small-margin-left: -9px;
+  --bui-avatar-group-xsmall-margin: 0 0 0 -5px;
+  --bui-avatar-group-small-margin: 0 0 0 -9px;
   --bui-avatar-group-small-box-shadow: 0 0 0 1px var(--bui-color-bg-view);
-  --bui-avatar-group-medium-margin-left: -13px;
+  --bui-avatar-group-medium-margin: 0 0 0 -13px;
   --bui-avatar-group-medium-box-shadow: 0 0 0 2px var(--bui-color-bg-view);
-  --bui-avatar-group-large-margin-left: -21px;
+  --bui-avatar-group-large-margin: 0 0 0 -21px;
   --bui-avatar-group-large-box-shadow: 0 0 0 3px var(--bui-color-bg-view);
 }
 .bui-avatar-group {
@@ -71,23 +71,23 @@ xhs-page {
   color: var(--bui-color-fg-default);
 }
 .bui-avatar-group .bui-avatar-xsmall:not(:first-child) {
-  margin-left: var(--bui-avatar-group-xsmall-margin-left);
+  margin: var(--bui-avatar-group-xsmall-margin);
 }
 .bui-avatar-group .bui-avatar-small {
   box-shadow: var(--bui-avatar-group-small-box-shadow);
 }
 .bui-avatar-group .bui-avatar-small:not(:first-child) {
-  margin-left: var(--bui-avatar-group-small-margin-left);
+  margin: var(--bui-avatar-group-small-margin);
 }
 .bui-avatar-group .bui-avatar-large {
   box-shadow: var(--bui-avatar-group-large-box-shadow);
 }
 .bui-avatar-group .bui-avatar-large:not(:first-child) {
-  margin-left: var(--bui-avatar-group-large-margin-left);
+  margin: var(--bui-avatar-group-large-margin);
 }
 .bui-avatar-group .bui-avatar-medium {
   box-shadow: var(--bui-avatar-group-medium-box-shadow);
 }
 .bui-avatar-group .bui-avatar-medium:not(:first-child) {
-  margin-left: var(--bui-avatar-group-medium-margin-left);
+  margin: var(--bui-avatar-group-medium-margin);
 }

package/es/Backdrop/Backdrop.js

@@ -36,8 +36,8 @@ const Backdrop = /* @__PURE__ */ React.forwardRef(
     const _a = props, {
       children,
       className,
-      invisible,
-      open,
+      invisible = false,
+      open = false,
       transitionDuration
     } = _a, others = __objRest(_a, [
       "children",
@@ -49,6 +49,7 @@ const Backdrop = /* @__PURE__ */ React.forwardRef(
     return /* @__PURE__ */ React.createElement(Fade, __spreadValues({ in: open, timeout: transitionDuration }, others), /* @__PURE__ */ React.createElement(
       "div",
       {
+        "aria-hidden": "true",
         className: clsx(
           prefixCls,
           {

package/es/Backdrop/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,17 @@
+import React from "react";
+import Backdrop from "../../Backdrop";
+const basicBackdropDemo = () => {
+  return /* @__PURE__ */ React.createElement(Backdrop, { open: true });
+};
+const invisibleBackdropDemo = () => {
+  return /* @__PURE__ */ React.createElement(Backdrop, { open: true, invisible: true });
+};
+var A11yDemos_default = {
+  basicBackdropDemo,
+  invisibleBackdropDemo
+};
+export {
+  basicBackdropDemo,
+  A11yDemos_default as default,
+  invisibleBackdropDemo
+};

package/es/Backdrop/index.css

@@ -1,7 +1,7 @@
 :root,
 page,
 xhs-page {
-  --bui-backdrop-background-color: rgba(0, 0, 0, 0.68);
+  --bui-backdrop-bg-color: rgba(0, 0, 0, 0.68);
 }
 .bui-backdrop {
   position: fixed;
@@ -12,7 +12,7 @@ xhs-page {
   bottom: 0;
   left: 0;
   top: 0;
-  background-color: var(--bui-backdrop-background-color);
+  background-color: var(--bui-backdrop-bg-color);
 }
 .bui-backdrop-invisible {
   background-color: transparent;

package/es/Badge/Badge.js

@@ -28,47 +28,74 @@ var __objRest = (source, exclude) => {
 };
 import clsx from "clsx";
 import React from "react";
+import { useBadgeDisplay } from "./hooks/useBadgeDisplay";
+import { useBadgeA11y } from "./hooks/useBadgeA11y";
 import "./index.css";
 const prefixCls = "bui-badge";
 const Badge = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const _a = props, {
     className,
-    onClick,
     children,
     content,
     color = "primary",
-    maxCount,
+    max,
+    showZero = false,
+    invisible = false,
     variant = "contained",
-    type = "standard"
+    type = "standard",
+    // 无障碍功能相关属性
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    role = "status",
+    "aria-hidden": ariaHidden = false
   } = _a, others = __objRest(_a, [
     "className",
-    "onClick",
     "children",
     "content",
     "color",
-    "maxCount",
+    "max",
+    "showZero",
+    "invisible",
     "variant",
-    "type"
+    "type",
+    "aria-label",
+    "aria-describedby",
+    "role",
+    "aria-hidden"
   ]);
-  const displayValue = Number(content) > Number(maxCount) ? `${maxCount}+` : type !== "dot" && content;
+  const { displayValue, shouldShowBadge } = useBadgeDisplay({
+    content,
+    max,
+    showZero,
+    type
+  });
+  const { ariaAttributes } = useBadgeA11y({
+    displayValue,
+    type,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    role,
+    "aria-hidden": ariaHidden
+  });
+  if (invisible)
+    return null;
   return /* @__PURE__ */ React.createElement(
     "div",
     __spreadValues({
       className: clsx(`${prefixCls}`, className, {
         [`${prefixCls}-position`]: children
       }),
-      onClick,
       ref
     }, others),
-    (content || type === "dot") && /* @__PURE__ */ React.createElement(
+    shouldShowBadge && /* @__PURE__ */ React.createElement(
       "div",
-      {
+      __spreadValues({
         className: clsx(
           `${prefixCls}-${color}`,
           `${prefixCls}-${variant}`,
           `${prefixCls}-${type}`
         )
-      },
+      }, ariaAttributes),
       displayValue
     ),
     children

package/es/Badge/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,70 @@
+import React from "react";
+import Badge from "../../Badge";
+const basicBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Badge, { content: "12" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u5185\u5BB9")));
+};
+const colorBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React.createElement(Badge, { content: "1", color: "primary" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Primary")), /* @__PURE__ */ React.createElement(Badge, { content: "2", color: "success" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Success")), /* @__PURE__ */ React.createElement(Badge, { content: "3", color: "warning" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Warning")), /* @__PURE__ */ React.createElement(Badge, { content: "4", color: "danger" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Danger")));
+};
+const typeBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React.createElement(Badge, { content: "99", type: "standard" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Standard")), /* @__PURE__ */ React.createElement(Badge, { type: "dot" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Dot")), /* @__PURE__ */ React.createElement(Badge, { content: "NEW", type: "bubble" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Bubble")));
+};
+const maxBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React.createElement(Badge, { content: 99, max: 50 }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "50+")), /* @__PURE__ */ React.createElement(Badge, { content: 150, max: 99 }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "99+")));
+};
+const accessibilityBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px", flexDirection: "column" } }, /* @__PURE__ */ React.createElement(Badge, { content: 5, "aria-label": "\u81EA\u5B9A\u4E49\u6807\u7B7E" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u81EA\u5B9A\u4E49\u6807\u7B7E")), /* @__PURE__ */ React.createElement(Badge, { content: 3, role: "img" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u81EA\u5B9A\u4E49\u89D2\u8272")), /* @__PURE__ */ React.createElement(Badge, { content: 1, "aria-hidden": true }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u9690\u85CF\u89D2\u8272")), /* @__PURE__ */ React.createElement(Badge, { content: 2, "aria-hidden": true }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u9690\u85CF")));
+};
+const invisibilityBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ React.createElement(Badge, { content: 0, showZero: true }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "ShowZero")), /* @__PURE__ */ React.createElement(Badge, { content: 0, showZero: false }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "HideZero")), /* @__PURE__ */ React.createElement(Badge, { content: 5, invisible: false }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Visible")));
+};
+const complexInteractionBadgeDemo = () => {
+  const ComplexInteractionBadgeDemo = () => {
+    const [count, setCount] = React.useState(1);
+    const [visible, setVisible] = React.useState(true);
+    return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } }, /* @__PURE__ */ React.createElement(Badge, { content: count, invisible: !visible }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u5185\u5BB9")), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setCount(count + 1),
+        style: { padding: "4px 8px" }
+      },
+      "\u589E\u52A0(",
+      count,
+      ")"
+    ), /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setVisible(!visible),
+        style: { padding: "4px 8px" }
+      },
+      visible ? "\u9690\u85CF" : "\u663E\u793A"
+    ));
+  };
+  return /* @__PURE__ */ React.createElement(ComplexInteractionBadgeDemo, null);
+};
+const specialContentBadgeDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "10px", flexWrap: "wrap" } }, /* @__PURE__ */ React.createElement(Badge, { content: "NEW" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u6587\u672C")), /* @__PURE__ */ React.createElement(Badge, { content: "99+" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "99+")), /* @__PURE__ */ React.createElement(Badge, { content: 1 }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u5355\u6570")), /* @__PURE__ */ React.createElement(Badge, { content: "" }, /* @__PURE__ */ React.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u7A7A\u5185\u5BB9")));
+};
+var A11yDemos_default = {
+  basicBadgeDemo,
+  colorBadgeDemo,
+  typeBadgeDemo,
+  maxBadgeDemo,
+  accessibilityBadgeDemo,
+  invisibilityBadgeDemo,
+  complexInteractionBadgeDemo,
+  specialContentBadgeDemo
+};
+export {
+  accessibilityBadgeDemo,
+  basicBadgeDemo,
+  colorBadgeDemo,
+  complexInteractionBadgeDemo,
+  A11yDemos_default as default,
+  invisibilityBadgeDemo,
+  maxBadgeDemo,
+  specialContentBadgeDemo,
+  typeBadgeDemo
+};

package/es/Badge/hooks/useBadgeA11y.js

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+const useBadgeA11y = ({
+  displayValue,
+  type = "standard",
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedby,
+  role = "status",
+  "aria-hidden": ariaHidden = false
+}) => {
+  const accessibilityLabel = useMemo(() => {
+    if (ariaLabel)
+      return ariaLabel;
+    if (ariaHidden)
+      return void 0;
+    if (type === "dot") {
+      return "\u6709\u65B0\u901A\u77E5";
+    }
+    if (displayValue !== null && displayValue !== void 0) {
+      if (String(displayValue).includes("+")) {
+        return `\u8D85\u8FC7${String(displayValue).replace("+", "")}\u6761\u901A\u77E5`;
+      }
+      const numValue = Number(displayValue);
+      if (!Number.isNaN(numValue)) {
+        if (numValue === 0)
+          return "\u65E0\u901A\u77E5";
+        if (numValue === 1)
+          return "1\u6761\u901A\u77E5";
+        return `${displayValue}\u6761\u901A\u77E5`;
+      }
+      return `\u901A\u77E5\uFF1A${displayValue}`;
+    }
+    return void 0;
+  }, [ariaLabel, ariaHidden, type, displayValue]);
+  const ariaAttributes = useMemo(() => {
+    if (ariaHidden) {
+      return {
+        "aria-hidden": true
+      };
+    }
+    return {
+      role,
+      "aria-label": accessibilityLabel,
+      "aria-describedby": ariaDescribedby
+    };
+  }, [ariaHidden, role, accessibilityLabel, ariaDescribedby]);
+  return {
+    accessibilityLabel,
+    ariaAttributes
+  };
+};
+export {
+  useBadgeA11y
+};

package/es/Badge/hooks/useBadgeDisplay.js

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+const useBadgeDisplay = ({
+  content,
+  max,
+  showZero = false,
+  type = "standard"
+}) => {
+  const displayValue = useMemo(() => {
+    if (type === "dot") {
+      return null;
+    }
+    if (!Number.isNaN(Number(content)) && typeof max === "number") {
+      return Number(content) > Number(max) ? `${max}+` : content;
+    }
+    return content;
+  }, [content, max, type]);
+  const shouldShowBadge = useMemo(() => {
+    if (type === "dot") {
+      return true;
+    }
+    if (content === 0 && !showZero) {
+      return false;
+    }
+    return !!content || content === 0;
+  }, [content, showZero, type]);
+  return {
+    displayValue,
+    shouldShowBadge
+  };
+};
+export {
+  useBadgeDisplay
+};

package/es/Button/Button.js

@@ -69,7 +69,8 @@ const Button = /* @__PURE__ */ React.forwardRef(
           className
         ),
         ref,
-        disabled
+        disabled,
+        "aria-disabled": disabled ? "true" : void 0
       }, others),
       startIcon && /* @__PURE__ */ React.createElement(ButtonIcon, { iconPosition: "start" }, startIcon),
       children,

package/es/Button/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,42 @@
+import React from "react";
+import Button from "../../Button";
+const basicButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, null, "\u57FA\u7840\u6309\u94AE"));
+};
+const variantButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { variant: "text" }, "\u6587\u5B57\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { variant: "outlined" }, "\u7EBF\u6846\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { variant: "contained" }, "\u586B\u5145\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { variant: "subtle" }, "\u67D4\u548C\u6309\u94AE"));
+};
+const colorButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { color: "primary" }, "\u4E3B\u8981\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { color: "success" }, "\u6210\u529F\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { color: "warning" }, "\u8B66\u544A\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { color: "danger" }, "\u5371\u9669\u6309\u94AE"));
+};
+const sizeButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { size: "small" }, "\u5C0F\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { size: "medium" }, "\u4E2D\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { size: "large" }, "\u5927\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { size: "full", style: { width: "200px" } }, "\u5168\u5BBD\u6309\u94AE"));
+};
+const disabledButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { disabled: true }, "\u7981\u7528\u6309\u94AE"), /* @__PURE__ */ React.createElement(Button, { variant: "contained", disabled: true }, "\u7981\u7528\u586B\u5145\u6309\u94AE"));
+};
+const iconButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { startIcon: /* @__PURE__ */ React.createElement("span", null, "\u{1F31F}") }, "\u5E26\u524D\u7F00\u56FE\u6807"), /* @__PURE__ */ React.createElement(Button, { endIcon: /* @__PURE__ */ React.createElement("span", null, "\u{1F4C5}") }, "\u5E26\u540E\u7F00\u56FE\u6807"));
+};
+const ariaLabelButtonDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Button, { "aria-label": "\u63D0\u4EA4\u8868\u5355" }, "\u63D0\u4EA4"), /* @__PURE__ */ React.createElement(Button, { "aria-label": "\u53D6\u6D88\u64CD\u4F5C" }, "\u53D6\u6D88"));
+};
+var A11yDemos_default = {
+  basicButtonDemo,
+  variantButtonDemo,
+  colorButtonDemo,
+  sizeButtonDemo,
+  disabledButtonDemo,
+  iconButtonDemo,
+  ariaLabelButtonDemo
+};
+export {
+  ariaLabelButtonDemo,
+  basicButtonDemo,
+  colorButtonDemo,
+  A11yDemos_default as default,
+  disabledButtonDemo,
+  iconButtonDemo,
+  sizeButtonDemo,
+  variantButtonDemo
+};

package/es/Button/index.css

@@ -8,7 +8,7 @@ xhs-page {
   --bui-btn-large-border-radius: 120px;
   --bui-btn-full-border-radius: 120px;
   --bui-btn-color: var(--bui-color-fg-muted);
-  --bui-btn-background: var(--bui-color-bg-view);
+  --bui-btn-bg: var(--bui-color-bg-view);
   --bui-btn-border: 0;
   --bui-btn-height: 27px;
   --bui-btn-small-height: 24px;
@@ -34,7 +34,7 @@ xhs-page {
   justify-content: center;
   white-space: nowrap;
   color: var(--bui-btn-color);
-  background: var(--bui-btn-background);
+  background: var(--bui-btn-bg);
   font-size: var(--bui-btn-font-size);
   font-weight: var(--bui-btn-font-weight);
   border: var(--bui-btn-border);