@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/dist/Backdrop/Backdrop.js

@@ -59,15 +59,15 @@ module.exports = __toCommonJS(Backdrop_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_Fade = __toESM(require("../Fade"));
-var import_Backdrop = require("./Backdrop.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-backdrop";
 const Backdrop = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
     const _a = props, {
       children,
       className,
-      invisible,
-      open,
+      invisible = false,
+      open = false,
       transitionDuration
     } = _a, others = __objRest(_a, [
       "children",
@@ -79,6 +79,7 @@ const Backdrop = /* @__PURE__ */ import_react.default.forwardRef(
     return /* @__PURE__ */ import_react.default.createElement(import_Fade.default, __spreadValues({ in: open, timeout: transitionDuration }, others), /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
+        "aria-hidden": "true",
         className: (0, import_clsx.default)(
           prefixCls,
           {

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

@@ -0,0 +1,51 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  basicBackdropDemo: () => basicBackdropDemo,
+  default: () => A11yDemos_default,
+  invisibleBackdropDemo: () => invisibleBackdropDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Backdrop = __toESM(require("../../Backdrop"));
+const basicBackdropDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Backdrop.default, { open: true });
+};
+const invisibleBackdropDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Backdrop.default, { open: true, invisible: true });
+};
+var A11yDemos_default = {
+  basicBackdropDemo,
+  invisibleBackdropDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  basicBackdropDemo,
+  invisibleBackdropDemo
+});

package/dist/Backdrop/index.css

@@ -0,0 +1,19 @@
+:root,
+page,
+xhs-page {
+  --bui-backdrop-bg-color: rgba(0, 0, 0, 0.68);
+}
+.bui-backdrop {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  top: 0;
+  background-color: var(--bui-backdrop-bg-color);
+}
+.bui-backdrop-invisible {
+  background-color: transparent;
+}

package/dist/Badge/Badge.js

@@ -58,56 +58,78 @@ __export(Badge_exports, {
 module.exports = __toCommonJS(Badge_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Badge2 = require("./Badge.css");
+var import_useBadgeDisplay = require("./hooks/useBadgeDisplay");
+var import_useBadgeA11y = require("./hooks/useBadgeA11y");
+var import_index = require("./index.css");
 const prefixCls = "bui-badge";
 const Badge = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
     className,
-    onClick,
     children,
     content,
-    color,
-    maxCount,
-    variant,
-    type
+    color = "primary",
+    max,
+    showZero = false,
+    invisible = false,
+    variant = "contained",
+    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 } = (0, import_useBadgeDisplay.useBadgeDisplay)({
+    content,
+    max,
+    showZero,
+    type
+  });
+  const { ariaAttributes } = (0, import_useBadgeA11y.useBadgeA11y)({
+    displayValue,
+    type,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    role,
+    "aria-hidden": ariaHidden
+  });
+  if (invisible)
+    return null;
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadValues({
       className: (0, import_clsx.default)(`${prefixCls}`, className, {
         [`${prefixCls}-position`]: children
       }),
-      onClick,
       ref
     }, others),
-    (content || type === "dot") && /* @__PURE__ */ import_react.default.createElement(
+    shouldShowBadge && /* @__PURE__ */ import_react.default.createElement(
       "div",
-      {
+      __spreadValues({
         className: (0, import_clsx.default)(
           `${prefixCls}-${color}`,
           `${prefixCls}-${variant}`,
           `${prefixCls}-${type}`
         )
-      },
+      }, ariaAttributes),
       displayValue
     ),
     children
   );
 });
 Badge.displayName = "BuiBadge";
-Badge.defaultProps = {
-  color: "primary",
-  variant: "contained",
-  type: "standard"
-};
 var Badge_default = Badge;

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

@@ -0,0 +1,110 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  accessibilityBadgeDemo: () => accessibilityBadgeDemo,
+  basicBadgeDemo: () => basicBadgeDemo,
+  colorBadgeDemo: () => colorBadgeDemo,
+  complexInteractionBadgeDemo: () => complexInteractionBadgeDemo,
+  default: () => A11yDemos_default,
+  invisibilityBadgeDemo: () => invisibilityBadgeDemo,
+  maxBadgeDemo: () => maxBadgeDemo,
+  specialContentBadgeDemo: () => specialContentBadgeDemo,
+  typeBadgeDemo: () => typeBadgeDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Badge = __toESM(require("../../Badge"));
+const basicBadgeDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: "12" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u5185\u5BB9")));
+};
+const colorBadgeDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: "1", color: "primary" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Primary")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: "2", color: "success" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Success")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: "3", color: "warning" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Warning")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: "4", color: "danger" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Danger")));
+};
+const typeBadgeDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: "99", type: "standard" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Standard")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { type: "dot" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Dot")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: "NEW", type: "bubble" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Bubble")));
+};
+const maxBadgeDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: 99, max: 50 }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "50+")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: 150, max: 99 }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "99+")));
+};
+const accessibilityBadgeDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "10px", flexDirection: "column" } }, /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: 5, "aria-label": "\u81EA\u5B9A\u4E49\u6807\u7B7E" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u81EA\u5B9A\u4E49\u6807\u7B7E")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: 3, role: "img" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u81EA\u5B9A\u4E49\u89D2\u8272")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: 1, "aria-hidden": true }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u9690\u85CF\u89D2\u8272")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: 2, "aria-hidden": true }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u9690\u85CF")));
+};
+const invisibilityBadgeDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "10px" } }, /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: 0, showZero: true }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "ShowZero")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: 0, showZero: false }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "HideZero")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: 5, invisible: false }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "Visible")));
+};
+const complexInteractionBadgeDemo = () => {
+  const ComplexInteractionBadgeDemo = () => {
+    const [count, setCount] = import_react.default.useState(1);
+    const [visible, setVisible] = import_react.default.useState(true);
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: count, invisible: !visible }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u5185\u5BB9")), /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setCount(count + 1),
+        style: { padding: "4px 8px" }
+      },
+      "\u589E\u52A0(",
+      count,
+      ")"
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setVisible(!visible),
+        style: { padding: "4px 8px" }
+      },
+      visible ? "\u9690\u85CF" : "\u663E\u793A"
+    ));
+  };
+  return /* @__PURE__ */ import_react.default.createElement(ComplexInteractionBadgeDemo, null);
+};
+const specialContentBadgeDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "10px", flexWrap: "wrap" } }, /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: "NEW" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u6587\u672C")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: "99+" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "99+")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: 1 }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u5355\u6570")), /* @__PURE__ */ import_react.default.createElement(import_Badge.default, { content: "" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 40, height: 40, background: "#f0f0f0" } }, "\u7A7A\u5185\u5BB9")));
+};
+var A11yDemos_default = {
+  basicBadgeDemo,
+  colorBadgeDemo,
+  typeBadgeDemo,
+  maxBadgeDemo,
+  accessibilityBadgeDemo,
+  invisibilityBadgeDemo,
+  complexInteractionBadgeDemo,
+  specialContentBadgeDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  accessibilityBadgeDemo,
+  basicBadgeDemo,
+  colorBadgeDemo,
+  complexInteractionBadgeDemo,
+  invisibilityBadgeDemo,
+  maxBadgeDemo,
+  specialContentBadgeDemo,
+  typeBadgeDemo
+});

package/dist/Badge/hooks/useBadgeA11y.js

@@ -0,0 +1,76 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useBadgeA11y_exports = {};
+__export(useBadgeA11y_exports, {
+  useBadgeA11y: () => useBadgeA11y
+});
+module.exports = __toCommonJS(useBadgeA11y_exports);
+var import_react = require("react");
+const useBadgeA11y = ({
+  displayValue,
+  type = "standard",
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedby,
+  role = "status",
+  "aria-hidden": ariaHidden = false
+}) => {
+  const accessibilityLabel = (0, import_react.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 = (0, import_react.useMemo)(() => {
+    if (ariaHidden) {
+      return {
+        "aria-hidden": true
+      };
+    }
+    return {
+      role,
+      "aria-label": accessibilityLabel,
+      "aria-describedby": ariaDescribedby
+    };
+  }, [ariaHidden, role, accessibilityLabel, ariaDescribedby]);
+  return {
+    accessibilityLabel,
+    ariaAttributes
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useBadgeA11y
+});

package/dist/Badge/hooks/useBadgeDisplay.js

@@ -0,0 +1,56 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useBadgeDisplay_exports = {};
+__export(useBadgeDisplay_exports, {
+  useBadgeDisplay: () => useBadgeDisplay
+});
+module.exports = __toCommonJS(useBadgeDisplay_exports);
+var import_react = require("react");
+const useBadgeDisplay = ({
+  content,
+  max,
+  showZero = false,
+  type = "standard"
+}) => {
+  const displayValue = (0, import_react.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 = (0, import_react.useMemo)(() => {
+    if (type === "dot") {
+      return true;
+    }
+    if (content === 0 && !showZero) {
+      return false;
+    }
+    return !!content || content === 0;
+  }, [content, showZero, type]);
+  return {
+    displayValue,
+    shouldShowBadge
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useBadgeDisplay
+});

package/dist/Badge/index.css

@@ -0,0 +1,125 @@
+:root,
+page,
+xhs-page {
+  --bui-badge-position: 14%;
+  --bui-badge-min-width: 15px;
+  --bui-badge-height: 15px;
+  --bui-badge-line-height: 15px;
+  --bui-badge-padding: 0 3px;
+  --bui-badge-border-radius: 8px;
+  --bui-badge-outlined-padding: 0 2px;
+  --bui-badge-dot-size: 9px;
+  --bui-badge-bubble-padding: 0 5px;
+  --bui-badge-bubble-border-radius: 6px 6px 6px 0;
+}
+.bui-badge {
+  display: inline-block;
+  font-family: var(--bui-font-family);
+}
+.bui-badge-position {
+  position: relative;
+}
+.bui-badge-position .bui-badge-contained,
+.bui-badge-position .bui-badge-outlined {
+  position: absolute;
+  top: var(--bui-badge-position);
+  right: var(--bui-badge-position);
+  transform: scale(1) translate(50%, -50%);
+}
+.bui-badge-position .bui-badge-dot {
+  top: var(--bui-badge-position);
+  right: var(--bui-badge-position);
+  transform: scale(1) translate(50%, -50%);
+}
+.bui-badge-position .bui-badge-bubble {
+  top: var(--bui-badge-position);
+  right: var(--bui-badge-position);
+  transform: scale(1) translate(50%, -50%);
+}
+.bui-badge-contained,
+.bui-badge-outlined {
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--bui-badge-min-width);
+  height: var(--bui-badge-height);
+  line-height: var(--bui-badge-line-height);
+  padding: var(--bui-badge-padding);
+  font-size: var(--bui-text-size-4);
+  border-radius: var(--bui-badge-border-radius);
+  color: var(--bui-color-bg-view);
+  white-space: nowrap;
+  z-index: 1;
+}
+.bui-badge-outlined {
+  padding: var(--bui-badge-outlined-padding);
+}
+.bui-badge-primary {
+  background-color: var(--bui-color-primary);
+}
+.bui-badge-success {
+  background-color: var(--bui-color-success);
+}
+.bui-badge-info {
+  background-color: var(--bui-color-info);
+}
+.bui-badge-warning {
+  background-color: var(--bui-color-warning);
+}
+.bui-badge-danger {
+  background-color: var(--bui-color-danger);
+}
+.bui-badge-light {
+  color: var(--bui-color-fg-default);
+  background-color: var(--bui-color-bg-view);
+}
+.bui-badge-dark {
+  background-color: var(--bui-color-fg-default);
+}
+.bui-badge-dot {
+  width: var(--bui-badge-dot-size);
+  min-width: 0;
+  height: var(--bui-badge-dot-size);
+  padding: 0;
+  border-radius: 100%;
+}
+.bui-badge-bubble {
+  border-radius: var(--bui-badge-bubble-border-radius);
+  padding: var(--bui-badge-bubble-padding);
+}
+.bui-badge-outlined {
+  background: var(--bui-color-bg-view);
+}
+.bui-badge-outlined.bui-badge-primary {
+  border: 1px solid var(--bui-color-primary);
+  color: var(--bui-color-primary);
+}
+.bui-badge-outlined.bui-badge-success {
+  border: 1px solid var(--bui-color-success);
+  color: var(--bui-color-success);
+}
+.bui-badge-outlined.bui-badge-info {
+  border: 1px solid var(--bui-color-info);
+  color: var(--bui-color-info);
+}
+.bui-badge-outlined.bui-badge-warning {
+  border: 1px solid var(--bui-color-warning);
+  color: var(--bui-color-warning);
+}
+.bui-badge-outlined.bui-badge-danger {
+  border: 1px solid var(--bui-color-danger);
+  color: var(--bui-color-danger);
+}
+.bui-badge-outlined.bui-badge-light {
+  background: var(--bui-color-bg-default);
+  border: 1px solid var(--bui-color-bg-view);
+  color: var(--bui-color-bg-view);
+}
+.bui-badge-outlined.bui-badge-dark {
+  border: 1px solid var(--bui-color-fg-default);
+  color: var(--bui-color-fg-default);
+}
+.bui-badge-outlined.bui-badge-bubble {
+  border-radius: var(--bui-badge-bubble-border-radius);
+}

package/dist/Breadcrumb/Breadcrumb.js

@@ -59,7 +59,7 @@ module.exports = __toCommonJS(Breadcrumb_exports);
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_BreadcrumbItem = __toESM(require("./BreadcrumbItem"));
-var import_Breadcrumb2 = require("./Breadcrumb.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-breadcrumb";
 const Breadcrumb = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {

package/dist/Breadcrumb/index.css

@@ -0,0 +1,38 @@
+:root,
+page,
+xhs-page {
+  --bui-breadcrumb-margin: 0;
+  --bui-breadcrumb-padding: 0;
+  --bui-breadcrumb-color: rgba(0, 0, 0, 0.45);
+  --bui-breadcrumb-item-separator-margin: 0 8px;
+  --bui-breadcrumb-last-item-color: rgba(0, 0, 0, 0.88);
+}
+.bui-breadcrumb {
+  margin: var(--bui-breadcrumb-margin);
+  padding: var(--bui-breadcrumb-padding);
+  color: var(--bui-breadcrumb-color);
+  list-style: none;
+  font-size: var(--bui-text-size-1);
+  line-height: var(--bui-line-height);
+}
+.bui-breadcrumb-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: var(--bui-breadcrumb-margin);
+  padding: var(--bui-breadcrumb-padding);
+  list-style: none;
+}
+.bui-breadcrumb-list a {
+  color: var(--bui-breadcrumb-color);
+  text-decoration: none;
+  cursor: pointer;
+}
+.bui-breadcrumb-list li:last-child {
+  color: var(--bui-breadcrumb-last-item-color);
+}
+.bui-breadcrumb-item {
+  cursor: pointer;
+}
+.bui-breadcrumb-item-separator {
+  margin: var(--bui-breadcrumb-item-separator-margin);
+}

package/dist/Button/Button.js

@@ -58,7 +58,7 @@ __export(Button_exports, {
 module.exports = __toCommonJS(Button_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
-var import_Button = require("./Button.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-btn";
 const ButtonIcon = ({ children, iconPosition }) => {
   return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-icon-${iconPosition}` }, children);
@@ -70,10 +70,10 @@ const Button = /* @__PURE__ */ import_react.default.forwardRef(
       children,
       startIcon,
       endIcon,
-      size,
-      variant,
+      size = "medium",
+      variant = "outlined",
       color,
-      disabled
+      disabled = false
     } = _a, others = __objRest(_a, [
       "className",
       "children",
@@ -98,7 +98,9 @@ const Button = /* @__PURE__ */ import_react.default.forwardRef(
           },
           className
         ),
-        ref
+        ref,
+        disabled,
+        "aria-disabled": disabled ? "true" : void 0
       }, others),
       startIcon && /* @__PURE__ */ import_react.default.createElement(ButtonIcon, { iconPosition: "start" }, startIcon),
       children,
@@ -107,10 +109,4 @@ const Button = /* @__PURE__ */ import_react.default.forwardRef(
   }
 );
 Button.displayName = "BuiButton";
-Button.defaultProps = {
-  size: "medium",
-  variant: "outlined",
-  color: "default",
-  disabled: false
-};
 var Button_default = Button;