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

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.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface UseBadgeA11yProps {
+    displayValue: React.ReactNode;
+    type?: 'dot' | 'standard' | 'bubble';
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    role?: 'status' | 'img' | 'presentation';
+    'aria-hidden'?: boolean;
+}
+export interface UseBadgeA11yResult {
+    accessibilityLabel: string | undefined;
+    ariaAttributes: {
+        role?: string;
+        'aria-label'?: string;
+        'aria-describedby'?: string;
+        'aria-hidden'?: boolean;
+    };
+}
+/**
+ * Badge 无障碍功能的自定义 Hook
+ * 负责处理可访问性标签和ARIA属性
+ */
+export declare const useBadgeA11y: ({ displayValue, type, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, role, "aria-hidden": ariaHidden, }: UseBadgeA11yProps) => UseBadgeA11yResult;

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.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface UseBadgeDisplayProps {
+    content?: React.ReactNode;
+    max?: number;
+    showZero?: boolean;
+    type?: 'dot' | 'standard' | 'bubble';
+}
+export interface UseBadgeDisplayResult {
+    displayValue: React.ReactNode;
+    shouldShowBadge: boolean;
+}
+/**
+ * Badge 显示逻辑的自定义 Hook
+ * 负责计算显示值和判断是否应该显示徽章
+ */
+export declare const useBadgeDisplay: ({ content, max, showZero, type, }: UseBadgeDisplayProps) => UseBadgeDisplayResult;

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/Button/Button.js

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

package/dist/Button/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * 自定义 Button 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 customDemoComponent.tsx（固定约定）
+ */
+export declare const basicButtonDemo: () => React.JSX.Element;
+export declare const variantButtonDemo: () => React.JSX.Element;
+export declare const colorButtonDemo: () => React.JSX.Element;
+export declare const sizeButtonDemo: () => React.JSX.Element;
+export declare const disabledButtonDemo: () => React.JSX.Element;
+export declare const iconButtonDemo: () => React.JSX.Element;
+export declare const ariaLabelButtonDemo: () => React.JSX.Element;
+declare const _default: {
+    basicButtonDemo: () => React.JSX.Element;
+    variantButtonDemo: () => React.JSX.Element;
+    colorButtonDemo: () => React.JSX.Element;
+    sizeButtonDemo: () => React.JSX.Element;
+    disabledButtonDemo: () => React.JSX.Element;
+    iconButtonDemo: () => React.JSX.Element;
+    ariaLabelButtonDemo: () => React.JSX.Element;
+};
+export default _default;

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

@@ -0,0 +1,81 @@
+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, {
+  ariaLabelButtonDemo: () => ariaLabelButtonDemo,
+  basicButtonDemo: () => basicButtonDemo,
+  colorButtonDemo: () => colorButtonDemo,
+  default: () => A11yDemos_default,
+  disabledButtonDemo: () => disabledButtonDemo,
+  iconButtonDemo: () => iconButtonDemo,
+  sizeButtonDemo: () => sizeButtonDemo,
+  variantButtonDemo: () => variantButtonDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Button = __toESM(require("../../Button"));
+const basicButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, null, "\u57FA\u7840\u6309\u94AE"));
+};
+const variantButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "text" }, "\u6587\u5B57\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "outlined" }, "\u7EBF\u6846\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "contained" }, "\u586B\u5145\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "subtle" }, "\u67D4\u548C\u6309\u94AE"));
+};
+const colorButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { color: "primary" }, "\u4E3B\u8981\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { color: "success" }, "\u6210\u529F\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { color: "warning" }, "\u8B66\u544A\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { color: "danger" }, "\u5371\u9669\u6309\u94AE"));
+};
+const sizeButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { size: "small" }, "\u5C0F\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { size: "medium" }, "\u4E2D\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { size: "large" }, "\u5927\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { size: "full", style: { width: "200px" } }, "\u5168\u5BBD\u6309\u94AE"));
+};
+const disabledButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { disabled: true }, "\u7981\u7528\u6309\u94AE"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { variant: "contained", disabled: true }, "\u7981\u7528\u586B\u5145\u6309\u94AE"));
+};
+const iconButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { startIcon: /* @__PURE__ */ import_react.default.createElement("span", null, "\u{1F31F}") }, "\u5E26\u524D\u7F00\u56FE\u6807"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { endIcon: /* @__PURE__ */ import_react.default.createElement("span", null, "\u{1F4C5}") }, "\u5E26\u540E\u7F00\u56FE\u6807"));
+};
+const ariaLabelButtonDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Button.default, { "aria-label": "\u63D0\u4EA4\u8868\u5355" }, "\u63D0\u4EA4"), /* @__PURE__ */ import_react.default.createElement(import_Button.default, { "aria-label": "\u53D6\u6D88\u64CD\u4F5C" }, "\u53D6\u6D88"));
+};
+var A11yDemos_default = {
+  basicButtonDemo,
+  variantButtonDemo,
+  colorButtonDemo,
+  sizeButtonDemo,
+  disabledButtonDemo,
+  iconButtonDemo,
+  ariaLabelButtonDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaLabelButtonDemo,
+  basicButtonDemo,
+  colorButtonDemo,
+  disabledButtonDemo,
+  iconButtonDemo,
+  sizeButtonDemo,
+  variantButtonDemo
+});

package/dist/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);

package/dist/CSSTransition/CSSTransition.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CSSTransitionProps } from './CSSTransition.types';
+declare const CSSTransition: React.ForwardRefExoticComponent<CSSTransitionProps & React.RefAttributes<HTMLElement>>;
+export default CSSTransition;

package/dist/CSSTransition/CSSTransition.js

@@ -0,0 +1,177 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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 CSSTransition_exports = {};
+__export(CSSTransition_exports, {
+  default: () => CSSTransition_default
+});
+module.exports = __toCommonJS(CSSTransition_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+var import_Transition = __toESM(require("../Transition"));
+const forceReflow = (node) => node.scrollTop;
+const benchAddClass = (node, classes) => node && classes && classes.split(" ").forEach((c) => (0, import_utils.addClass)(node, c));
+const benchRemoveClass = (node, classes) => node && classes && classes.split(" ").forEach((c) => (0, import_utils.removeClass)(node, c));
+const CSSTransition = /* @__PURE__ */ import_react.default.forwardRef(
+  (props, ref) => {
+    const _a = props, { classNames = "" } = _a, others = __objRest(_a, ["classNames"]);
+    const appliedClasses = (0, import_react.useRef)({
+      appear: {},
+      enter: {},
+      exit: {}
+    });
+    const getClassNames = (type) => {
+      const isStringClassNames = typeof classNames === "string";
+      const prefix = isStringClassNames && classNames ? `${classNames}-` : "";
+      if (isStringClassNames) {
+        return {
+          baseClassName: `${prefix}${type}`,
+          activeClassName: `${prefix}${type}-active`,
+          doneClassName: `${prefix}${type}-done`
+        };
+      }
+      return {
+        baseClassName: classNames == null ? void 0 : classNames[type],
+        activeClassName: classNames == null ? void 0 : classNames[`${type}Active`],
+        doneClassName: classNames == null ? void 0 : classNames[`${type}Done`]
+      };
+    };
+    const addClass = (node, type, phase) => {
+      const className = getClassNames(type)[`${phase}ClassName`];
+      if (phase === "active") {
+        if (node)
+          forceReflow(node);
+      }
+      if (className) {
+        appliedClasses.current[type][phase] = className;
+        benchAddClass(node, className);
+      }
+    };
+    const removeClasses = (node, type) => {
+      const {
+        base: baseClassName,
+        active: activeClassName,
+        done: doneClassName
+      } = appliedClasses.current[type];
+      appliedClasses.current[type] = {};
+      if (baseClassName) {
+        benchRemoveClass(node, baseClassName);
+      }
+      if (activeClassName) {
+        benchRemoveClass(node, activeClassName);
+      }
+      if (doneClassName) {
+        benchRemoveClass(node, doneClassName);
+      }
+    };
+    const onEnter = (node) => {
+      removeClasses(node, "exit");
+      addClass(node, "enter", "base");
+      if (props.onEnter) {
+        props.onEnter(node);
+      }
+    };
+    const onEntering = (node) => {
+      addClass(node, "enter", "active");
+      if (props.onEntering) {
+        props.onEntering(node);
+      }
+    };
+    const onEntered = (node) => {
+      removeClasses(node, "enter");
+      addClass(node, "enter", "done");
+      if (props.onEntered) {
+        props.onEntered(node);
+      }
+    };
+    const onExit = (node) => {
+      removeClasses(node, "enter");
+      addClass(node, "exit", "base");
+      if (props.onExit) {
+        props.onExit(node);
+      }
+    };
+    const onExiting = (node) => {
+      addClass(node, "exit", "active");
+      if (props.onExiting) {
+        props.onExiting(node);
+      }
+    };
+    const onExited = (node) => {
+      removeClasses(node, "exit");
+      addClass(node, "exit", "done");
+      if (props.onExited) {
+        props.onExited(node);
+      }
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Transition.default,
+      __spreadProps(__spreadValues({
+        ref,
+        delay: 0
+      }, others), {
+        onEnter,
+        onEntered,
+        onEntering,
+        onExit,
+        onExiting,
+        onExited
+      })
+    );
+  }
+);
+CSSTransition.displayName = "BuiCSSTransition";
+var CSSTransition_default = CSSTransition;

package/dist/CSSTransition/CSSTransition.types.d.ts

@@ -0,0 +1,13 @@
+import { TransitionProps } from '../Transition';
+type IClassNames = string | {
+    enter?: string;
+    enterActive?: string;
+    enterDone?: string;
+    exit?: string;
+    exitActive?: string;
+    exitDone?: string;
+};
+export interface CSSTransitionProps extends TransitionProps {
+    classNames?: IClassNames;
+}
+export {};

package/dist/CSSTransition/CSSTransition.types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 CSSTransition_types_exports = {};
+module.exports = __toCommonJS(CSSTransition_types_exports);

package/dist/CSSTransition/demo/CSSTransitionDemo.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const StackDemo: () => React.JSX.Element;
+export default StackDemo;