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

package/es/Dialog/index.css

@@ -4,21 +4,21 @@ xhs-page {
   --bui-dialog-max-width: 300px;
   --bui-dialog-border-radius: var(--bui-shape-radius-drawer);
   --bui-dialog-title-padding: 0 40px 9px;
-  --bui-dialog-desc-padding: 0 24px;
-  --bui-dialog-footer-margin-top: 15px;
+  --bui-dialog-content-padding: 0 24px;
+  --bui-dialog-actions-margin: 15px 0 0 0;
   --bui-dialog-button-height: 53px;
   --bui-dialog-button-line-height: 25px;
   --bui-dialog-button-padding: 12px 0 13px;
   --bui-dialog-button-font-size: 17px;
   --bui-dialog-button-border-left: 1px solid rgba(0, 0, 0, 0.05);
-  --bui-dialog-button-active-background-color: rgba(54, 57, 64, 0.05);
+  --bui-dialog-button-active-bg-color: rgba(54, 57, 64, 0.05);
 }
 .bui-dialog {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.bui-dialog-body {
+.bui-dialog-container {
   padding-top: 21px;
   min-width: var(--bui-dialog-max-width);
   margin: 0 auto;
@@ -27,35 +27,31 @@ xhs-page {
   background-color: var(--bui-color-bg-view);
   line-height: 21px;
 }
-.bui-dialog-body-title {
+.bui-dialog-title {
   padding: var(--bui-dialog-title-padding);
   font-size: var(--bui-title-size-2);
   text-align: center;
   color: var(--bui-color-fg-default);
   font-weight: var(--bui-font-weight-medium);
 }
-.bui-dialog-body-title + .bui-dialog-body-footer {
+.bui-dialog-title + .bui-dialog-actions {
   margin-top: var(--bui-spacing-sm);
 }
-.bui-dialog-body-desc {
-  padding: var(--bui-dialog-desc-padding);
+.bui-dialog-content {
+  padding: var(--bui-dialog-content-padding);
   color: var(--bui-color-fg-muted);
   font-size: var(--bui-title-size-4);
   text-align: center;
 }
-.bui-dialog-body-desc:first-child {
+.bui-dialog-content:first-child {
   padding-top: 0;
 }
-.bui-dialog-body-footer {
-  margin-top: var(--bui-dialog-footer-margin-top);
+.bui-dialog-actions {
+  margin: var(--bui-dialog-actions-margin);
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   display: flex;
 }
-.bui-dialog-body-input {
-  width: calc(100% - 48px);
-  margin: 14px 24px 0;
-}
-.bui-dialog-body-button {
+.bui-dialog-actions-btn {
   flex: 1;
   display: block;
   width: 100%;
@@ -70,9 +66,13 @@ xhs-page {
   text-align: center;
   box-sizing: border-box;
 }
-.bui-dialog-body-button:first-child {
+.bui-dialog-actions-btn:first-child {
   border: none;
 }
-.bui-dialog-body-button:active {
-  background-color: var(--bui-dialog-button-active-background-color);
+.bui-dialog-actions-btn:active {
+  background-color: var(--bui-dialog-button-active-bg-color);
+}
+.bui-dialog-input {
+  width: calc(100% - 48px);
+  margin: 14px 24px 0;
 }

package/es/Dialog/index.d.ts

@@ -1,2 +1,5 @@
-export { default, default as Dialog } from './FunctionalDialog';
+import { DialogComponent as DialogComponentType } from './Dialog.types';
+declare const DialogWithMethods: DialogComponentType;
+export default DialogWithMethods;
+export { DialogWithMethods as Dialog };
 export * from './Dialog.types';

package/es/Dialog/index.js

@@ -1,6 +1,13 @@
-import { default as default2, default as default3 } from "./FunctionalDialog";
+import Dialog from "./Dialog";
+import FunctionalDialog from "./FunctionalDialog";
+const DialogWithMethods = Dialog;
+DialogWithMethods.confirm = FunctionalDialog.confirm;
+DialogWithMethods.prompt = FunctionalDialog.prompt;
+DialogWithMethods.alert = FunctionalDialog.alert;
+DialogWithMethods.useDialog = FunctionalDialog.useDialog;
+var Dialog_default = DialogWithMethods;
 export * from "./Dialog.types";
 export {
-  default3 as Dialog,
-  default2 as default
+  DialogWithMethods as Dialog,
+  Dialog_default as default
 };

package/es/Drawer/Drawer.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React, { useState } from "react";
+import React from "react";
 import Modal from "../Modal";
 import Slide from "../Slide";
 import "./index.css";
@@ -68,7 +68,6 @@ const Drawer = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "transitionDuration"
   ]);
   const anchorInvariant = oppositeDirection[anchorProp];
-  const [keepMounted, setKeepMounted] = useState(open);
   return /* @__PURE__ */ React.createElement(
     Modal,
     __spreadValues({
@@ -78,17 +77,14 @@ const Drawer = /* @__PURE__ */ React.forwardRef((props, ref) => {
       hideBackdrop,
       ref,
       className: clsx(prefixCls, className),
-      disablePortal,
-      keepMounted
+      disablePortal
     }, others),
     /* @__PURE__ */ React.createElement(
       Slide,
       __spreadValues({
         in: open,
         direction: anchorInvariant,
-        timeout: transitionDuration,
-        onEnter: () => setKeepMounted(true),
-        onExited: () => setKeepMounted(false)
+        timeout: transitionDuration
       }, SlideProps),
       /* @__PURE__ */ React.createElement(
         "div",
@@ -97,7 +93,11 @@ const Drawer = /* @__PURE__ */ React.forwardRef((props, ref) => {
             `${prefixCls}-content`,
             `${prefixCls}-content-${anchorProp}`,
             contentProps == null ? void 0 : contentProps.className
-          )
+          ),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": (contentProps == null ? void 0 : contentProps["aria-label"]) || "Drawer",
+          tabIndex: -1
         }),
         children
       )

package/es/Drawer/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+/**
+ * 自定义 Drawer 组件 Demo 集合
+ * 这个文件包含多个测试 demo，展示如何使用 getCustomDemoCodesFromFile 进行无障碍测试
+ * 文件名必须是 A11yDemos.tsx（固定约定）
+ */
+export declare const basicDrawerDemo: () => React.JSX.Element;
+export declare const leftDrawerDemo: () => React.JSX.Element;
+export declare const rightDrawerDemo: () => React.JSX.Element;
+export declare const topDrawerDemo: () => React.JSX.Element;
+export declare const noBackdropDrawerDemo: () => React.JSX.Element;
+export declare const interactiveDrawerDemo: () => React.JSX.Element;
+declare const _default: {
+    basicDrawerDemo: () => React.JSX.Element;
+    leftDrawerDemo: () => React.JSX.Element;
+    rightDrawerDemo: () => React.JSX.Element;
+    topDrawerDemo: () => React.JSX.Element;
+    noBackdropDrawerDemo: () => React.JSX.Element;
+    interactiveDrawerDemo: () => React.JSX.Element;
+};
+export default _default;

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

@@ -0,0 +1,112 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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));
+import React, { useState } from "react";
+import Drawer from "../../Drawer";
+const basicDrawerDemo = () => {
+  return /* @__PURE__ */ React.createElement(Drawer, { open: true, anchor: "bottom", "aria-label": "\u57FA\u7840\u62BD\u5C49", disablePortal: true }, /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", minHeight: "200px" } }, /* @__PURE__ */ React.createElement("h3", null, "\u57FA\u7840\u62BD\u5C49\u5185\u5BB9"), /* @__PURE__ */ React.createElement("p", null, "\u8FD9\u662F\u4E00\u4E2A\u4ECE\u5E95\u90E8\u5F39\u51FA\u7684\u62BD\u5C49"), /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u786E\u8BA4"), /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u53D6\u6D88")));
+};
+const leftDrawerDemo = () => {
+  return /* @__PURE__ */ React.createElement(Drawer, { open: true, anchor: "left", "aria-label": "\u5DE6\u4FA7\u62BD\u5C49", disablePortal: true }, /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", width: "300px", minHeight: "100vh" } }, /* @__PURE__ */ React.createElement("h3", null, "\u5DE6\u4FA7\u62BD\u5C49"), /* @__PURE__ */ React.createElement("ul", null, /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("a", { href: "#item1" }, "\u83DC\u5355\u9879 1")), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("a", { href: "#item2" }, "\u83DC\u5355\u9879 2")), /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement("a", { href: "#item3" }, "\u83DC\u5355\u9879 3")))));
+};
+const rightDrawerDemo = () => {
+  return /* @__PURE__ */ React.createElement(Drawer, { open: true, anchor: "right", "aria-label": "\u53F3\u4FA7\u62BD\u5C49", disablePortal: true }, /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", width: "300px", minHeight: "100vh" } }, /* @__PURE__ */ React.createElement("h3", null, "\u53F3\u4FA7\u62BD\u5C49"), /* @__PURE__ */ React.createElement("form", null, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "10px" } }, /* @__PURE__ */ React.createElement("label", { htmlFor: "name" }, "\u59D3\u540D:"), /* @__PURE__ */ React.createElement("input", { id: "name", type: "text" })), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "10px" } }, /* @__PURE__ */ React.createElement("label", { htmlFor: "email" }, "\u90AE\u7BB1:"), /* @__PURE__ */ React.createElement("input", { id: "email", type: "email" })), /* @__PURE__ */ React.createElement("button", { type: "submit" }, "\u63D0\u4EA4"))));
+};
+const topDrawerDemo = () => {
+  return /* @__PURE__ */ React.createElement(Drawer, { open: true, anchor: "top", "aria-label": "\u9876\u90E8\u62BD\u5C49", disablePortal: true }, /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", minHeight: "200px" } }, /* @__PURE__ */ React.createElement("h3", null, "\u9876\u90E8\u62BD\u5C49"), /* @__PURE__ */ React.createElement("p", null, "\u8FD9\u662F\u4E00\u4E2A\u4ECE\u9876\u90E8\u5F39\u51FA\u7684\u62BD\u5C49"), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u64CD\u4F5C\u6309\u94AE 1"), /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u64CD\u4F5C\u6309\u94AE 2"))));
+};
+const noBackdropDrawerDemo = () => {
+  return /* @__PURE__ */ React.createElement(
+    Drawer,
+    {
+      open: true,
+      anchor: "bottom",
+      hideBackdrop: true,
+      "aria-label": "\u65E0\u80CC\u666F\u906E\u7F69\u62BD\u5C49",
+      disablePortal: true
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", minHeight: "150px" } }, /* @__PURE__ */ React.createElement("h3", null, "\u65E0\u80CC\u666F\u906E\u7F69"), /* @__PURE__ */ React.createElement("p", null, "\u8FD9\u4E2A\u62BD\u5C49\u6CA1\u6709\u80CC\u666F\u906E\u7F69"), /* @__PURE__ */ React.createElement("button", { type: "button" }, "\u5173\u95ED"))
+  );
+};
+const interactiveDrawerDemo = () => {
+  const InteractiveDrawerDemo = () => {
+    const [open, setOpen] = useState(true);
+    const [formData, setFormData] = useState({ name: "", message: "" });
+    const handleClose = () => {
+      setOpen(false);
+    };
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      console.log("\u63D0\u4EA4\u8868\u5355:", formData);
+      handleClose();
+    };
+    if (!open) {
+      return /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setOpen(true) }, "\u91CD\u65B0\u6253\u5F00\u62BD\u5C49");
+    }
+    return /* @__PURE__ */ React.createElement(
+      Drawer,
+      {
+        open,
+        anchor: "right",
+        onClose: handleClose,
+        "aria-label": "\u53EF\u4EA4\u4E92\u62BD\u5C49",
+        disablePortal: true
+      },
+      /* @__PURE__ */ React.createElement("div", { style: { padding: "20px", width: "350px" } }, /* @__PURE__ */ React.createElement("h3", null, "\u53CD\u9988\u8868\u5355"), /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmit }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "15px" } }, /* @__PURE__ */ React.createElement("label", { htmlFor: "feedback-name" }, "\u59D3\u540D:"), /* @__PURE__ */ React.createElement(
+        "input",
+        {
+          id: "feedback-name",
+          type: "text",
+          value: formData.name,
+          onChange: (e) => setFormData(__spreadProps(__spreadValues({}, formData), { name: e.target.value })),
+          required: true,
+          "aria-required": "true"
+        }
+      )), /* @__PURE__ */ React.createElement("div", { style: { marginBottom: "15px" } }, /* @__PURE__ */ React.createElement("label", { htmlFor: "feedback-message" }, "\u53CD\u9988\u5185\u5BB9:"), /* @__PURE__ */ React.createElement(
+        "textarea",
+        {
+          id: "feedback-message",
+          value: formData.message,
+          onChange: (e) => setFormData(__spreadProps(__spreadValues({}, formData), { message: e.target.value })),
+          required: true,
+          "aria-required": "true",
+          rows: 4
+        }
+      )), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("button", { type: "submit" }, "\u63D0\u4EA4\u53CD\u9988"), /* @__PURE__ */ React.createElement("button", { type: "button", onClick: handleClose }, "\u53D6\u6D88"))))
+    );
+  };
+  return /* @__PURE__ */ React.createElement(InteractiveDrawerDemo, null);
+};
+var A11yDemos_default = {
+  basicDrawerDemo,
+  leftDrawerDemo,
+  rightDrawerDemo,
+  topDrawerDemo,
+  noBackdropDrawerDemo,
+  interactiveDrawerDemo
+};
+export {
+  basicDrawerDemo,
+  A11yDemos_default as default,
+  interactiveDrawerDemo,
+  leftDrawerDemo,
+  noBackdropDrawerDemo,
+  rightDrawerDemo,
+  topDrawerDemo
+};

package/es/Fade/Fade.js

@@ -78,7 +78,7 @@ const Fade = /* @__PURE__ */ React.forwardRef(
         ref: nodeRef
       }),
       (state, childProps) => {
-        const transition = transitions.create(
+        const transition = state === "entering" || state === "exiting" ? transitions.create(
           "opacity",
           getTransitionProps(
             { timeout, style, easing: easingProp, delay },
@@ -86,7 +86,7 @@ const Fade = /* @__PURE__ */ React.forwardRef(
               mode: state
             }
           )
-        );
+        ) : "none";
         return React.cloneElement(children, __spreadValues({
           style: __spreadValues(__spreadValues({
             visibility: state === "exited" ? "hidden" : "visible",

package/es/Fade/Fade.miniapp.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Fade Animation Component
+ * @description A component that implements fade in/out animation effects for elements
+ * @component Fade
+ */
+import React from 'react';
+import type { FadeProps } from './Fade.types';
+import './index.less';
+declare const Fade: React.ForwardRefExoticComponent<FadeProps & React.RefAttributes<HTMLElement>>;
+export default Fade;

package/es/Fade/Fade.miniapp.js

@@ -0,0 +1,179 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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;
+};
+import React, { useEffect, useState, useRef, useMemo } from "react";
+import {
+  createTransitions,
+  duration,
+  easing,
+  getTransitionProps,
+  useForkRef
+} from "@bifrostui/utils";
+import "./index.css";
+const defaultEasing = {
+  enter: easing.easeOut,
+  exit: easing.sharp
+};
+const defaultTimeout = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen
+};
+const Fade = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  var _b;
+  const _a = props, {
+    children: children,
+    in: inProp,
+    style,
+    appear: appear = true,
+    enter = true,
+    exit = true,
+    delay = 0,
+    easing: easingProp = defaultEasing,
+    timeout = defaultTimeout,
+    mountOnEnter: mountOnEnter,
+    unmountOnExit,
+    onEnter: onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited
+  } = _a, others = __objRest(_a, [
+    // Base props
+    "children",
+    "in",
+    "style",
+    // Animation controls
+    "appear",
+    "enter",
+    "exit",
+    "delay",
+    "easing",
+    "timeout",
+    // Lifecycle hooks
+    "mountOnEnter",
+    "unmountOnExit",
+    // Animation callbacks
+    "onEnter",
+    "onEntering",
+    "onEntered",
+    "onExit",
+    "onExiting",
+    "onExited"
+  ]);
+  const isFirstMount = useRef(inProp || !mountOnEnter);
+  const [isMounted, setIsMounted] = useState(inProp || !mountOnEnter);
+  const elementRef = useRef(null);
+  const handleRef = useForkRef(ref, children == null ? void 0 : children.ref, elementRef);
+  const shouldAnimateOnFirstMount = inProp && appear;
+  const shouldAnimate = inProp && enter || !inProp && exit;
+  const shouldExecuteAnimation = isFirstMount.current ? shouldAnimateOnFirstMount : shouldAnimate;
+  const getAnimationDurationAndDelay = () => {
+    if (!shouldExecuteAnimation) {
+      return { timeout: 0, delay: 0 };
+    }
+    return { timeout, delay };
+  };
+  const shouldSkipFirstAnimation = isFirstMount.current && !shouldAnimateOnFirstMount;
+  const transitions = createTransitions();
+  const animationName = inProp ? "bui-fade-in" : "bui-fade-out";
+  const animationDurationAndDelay = getAnimationDurationAndDelay();
+  const animation = useMemo(
+    () => transitions.create(
+      animationName,
+      getTransitionProps(
+        __spreadProps(__spreadValues({}, animationDurationAndDelay), {
+          style,
+          easing: easingProp
+        }),
+        { mode: inProp ? "enter" : "exit" }
+      )
+    ),
+    [inProp, animationName, animationDurationAndDelay, easingProp, style]
+  );
+  useEffect(() => {
+    if (inProp && !isMounted) {
+      setIsMounted(true);
+    }
+  }, [inProp, isMounted]);
+  useEffect(() => {
+    if (isMounted && isFirstMount.current) {
+      isFirstMount.current = false;
+    }
+  }, [isMounted]);
+  useEffect(() => {
+    const shouldTriggerCallback = isMounted && shouldExecuteAnimation;
+    if (!shouldTriggerCallback)
+      return;
+    if (inProp) {
+      onEnter == null ? void 0 : onEnter(elementRef.current);
+    } else {
+      onExit == null ? void 0 : onExit(elementRef.current);
+    }
+  }, [inProp, isMounted]);
+  const handleAnimationStart = () => {
+    if (!shouldExecuteAnimation)
+      return;
+    if (inProp) {
+      onEntering == null ? void 0 : onEntering(elementRef.current);
+    } else {
+      onExiting == null ? void 0 : onExiting(elementRef.current);
+    }
+  };
+  const handleAnimationEnd = () => {
+    if (shouldSkipFirstAnimation)
+      return;
+    if (inProp) {
+      onEntered == null ? void 0 : onEntered(elementRef.current);
+    } else {
+      onExited == null ? void 0 : onExited(elementRef.current);
+      if (unmountOnExit) {
+        setIsMounted(false);
+      }
+    }
+  };
+  if (!children || !isMounted)
+    return null;
+  return React.cloneElement(children, __spreadProps(__spreadValues({}, others), {
+    ref: handleRef,
+    onAnimationEnd: handleAnimationEnd,
+    onAnimationStart: handleAnimationStart,
+    style: __spreadValues(__spreadValues({
+      animation,
+      animationFillMode: "both"
+    }, style), (_b = children.props) == null ? void 0 : _b.style)
+  }));
+});
+Fade.displayName = "BuiFade";
+var Fade_miniapp_default = Fade;
+export {
+  Fade_miniapp_default as default
+};

package/es/Fade/index.css

@@ -0,0 +1,18 @@
+@keyframes bui-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+@keyframes bui-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/es/IconButton/IconButton.js

@@ -33,15 +33,17 @@ import "./index.css";
 const prefixCls = "bui-icon-btn";
 const IconButton = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
-    var _b, _c;
+    var _b, _c, _d, _e, _f, _g, _h;
     const _a = props, {
       className,
       children,
-      color = "neutral",
+      color,
       disabled = false,
       size = "medium",
       variant = "default",
-      shape = "circular"
+      shape = "circular",
+      // 无障碍属性
+      "aria-label": ariaLabel
     } = _a, others = __objRest(_a, [
       "className",
       "children",
@@ -49,12 +51,24 @@ const IconButton = /* @__PURE__ */ React.forwardRef(
       "disabled",
       "size",
       "variant",
-      "shape"
+      "shape",
+      "aria-label"
     ]);
     const isContainedVariant = variant === "contained";
+    let childrenDisplayName = "";
+    const firstChild = (_b = React.Children.toArray(children)) == null ? void 0 : _b[0];
+    if (React.isValidElement(firstChild)) {
+      childrenDisplayName = ((_e = (_d = (_c = firstChild.type) == null ? void 0 : _c.type) == null ? void 0 : _d.render) == null ? void 0 : _e.displayName) || "";
+    }
+    const accessibilityProps = {
+      // 描述性文本标签。默认取第一个children的displayName
+      "aria-label": ariaLabel || childrenDisplayName,
+      // 禁用状态
+      "aria-disabled": disabled
+    };
     return /* @__PURE__ */ React.createElement(
       "button",
-      __spreadValues({
+      __spreadValues(__spreadValues({
         type: "button",
         className: clsx(
           prefixCls,
@@ -68,11 +82,12 @@ const IconButton = /* @__PURE__ */ React.forwardRef(
           className
         ),
         ref
-      }, others),
+      }, accessibilityProps), others),
       isMini && React.isValidElement(children) ? React.cloneElement(children, __spreadValues(__spreadValues({}, !isContainedVariant && {
-        color: ((_b = children.props) == null ? void 0 : _b.color) || color
+        color: ((_f = children.props) == null ? void 0 : _f.color) || color,
+        htmlColor: ((_g = children.props) == null ? void 0 : _g.htmlColor) || "var(--bui-color-fg-subtle)"
       }), isContainedVariant && {
-        htmlColor: ((_c = children.props) == null ? void 0 : _c.htmlColor) || "var(--bui-color-white)"
+        htmlColor: ((_h = children.props) == null ? void 0 : _h.htmlColor) || "var(--bui-color-white)"
       })) : children
     );
   }

package/es/IconButton/IconButton.types.d.ts

@@ -10,7 +10,6 @@ export type IconButtonProps<D extends React.ElementType = 'button', P = {}> = Ov
          */
         size?: 'small' | 'medium' | 'large';
         /** 按钮颜色
-         * @default 'neutral'
          */
         color?: ThemeColor;
         /**
@@ -37,6 +36,41 @@ export type IconButtonProps<D extends React.ElementType = 'button', P = {}> = Ov
          * 仅微信小程序支持的button开放能力
          */
         openType?: ButtonOpenType;
+        /**
+         * 提供可访问的名称
+         * 图标按钮必须设置此属性，因为没有可见文本
+         * @example "搜索", "关闭", "菜单", "收藏"
+         */
+        'aria-label'?: string;
+        /**
+         * 禁用状态
+         * @example true - 禁用, false - 开启
+         */
+        'aria-disabled'?: boolean;
+        /**
+         * 切换按钮的按下状态
+         * 用于切换类型的按钮（如收藏、点赞、静音等）
+         * @example true - 已激活, false - 未激活
+         */
+        'aria-pressed'?: boolean;
+        /**
+         * 展开/折叠状态
+         * 用于控制下拉菜单、面板等可展开内容的按钮
+         * @example true - 已展开, false - 已折叠
+         */
+        'aria-expanded'?: boolean;
+        /**
+         * 弹出内容类型
+         * 指示点击按钮后会弹出什么类型的内容
+         * @example "menu" - 弹出菜单, "dialog" - 弹出对话框
+         */
+        'aria-haspopup'?: boolean | 'menu' | 'dialog' | 'listbox';
+        /**
+         * 关联描述该按钮的元素ID
+         * 用于提供额外的说明信息
+         * @example aria-describedby="help-text"
+         */
+        'aria-describedby'?: string;
     };
     defaultComponent: D;
 }, D>;

package/es/IconButton/index.css

@@ -82,6 +82,9 @@ xhs-page {
 .bui-icon-btn-default.bui-icon-btn-warning {
   color: var(--bui-color-warning);
 }
+.bui-icon-btn-default.bui-icon-btn-danger {
+  color: var(--bui-color-danger);
+}
 .bui-icon-btn-default.bui-icon-btn-light {
   color: var(--bui-color-bg-view);
 }