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

package/dist/Fade/Fade.miniapp.js

@@ -0,0 +1,197 @@
+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 Fade_miniapp_exports = {};
+__export(Fade_miniapp_exports, {
+  default: () => Fade_miniapp_default
+});
+module.exports = __toCommonJS(Fade_miniapp_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+var import_index = require("./index.css");
+const defaultEasing = {
+  enter: import_utils.easing.easeOut,
+  exit: import_utils.easing.sharp
+};
+const defaultTimeout = {
+  enter: import_utils.duration.enteringScreen,
+  exit: import_utils.duration.leavingScreen
+};
+const Fade = /* @__PURE__ */ import_react.default.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 = (0, import_react.useRef)(inProp || !mountOnEnter);
+  const [isMounted, setIsMounted] = (0, import_react.useState)(inProp || !mountOnEnter);
+  const elementRef = (0, import_react.useRef)(null);
+  const handleRef = (0, import_utils.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 = (0, import_utils.createTransitions)();
+  const animationName = inProp ? "bui-fade-in" : "bui-fade-out";
+  const animationDurationAndDelay = getAnimationDurationAndDelay();
+  const animation = transitions.create(
+    animationName,
+    (0, import_utils.getTransitionProps)(
+      __spreadProps(__spreadValues({}, animationDurationAndDelay), {
+        style,
+        easing: easingProp
+      }),
+      { mode: inProp ? "enter" : "exit" }
+    )
+  );
+  (0, import_react.useEffect)(() => {
+    if (inProp && !isMounted) {
+      setIsMounted(true);
+    }
+  }, [inProp, isMounted]);
+  (0, import_react.useEffect)(() => {
+    if (isMounted && isFirstMount.current) {
+      isFirstMount.current = false;
+    }
+  }, [isMounted]);
+  (0, import_react.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, shouldExecuteAnimation, onEnter, onExit]);
+  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 import_react.default.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;

package/dist/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/dist/IconButton/IconButton.js

@@ -63,15 +63,17 @@ var import_index = require("./index.css");
 const prefixCls = "bui-icon-btn";
 const IconButton = /* @__PURE__ */ import_react.default.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",
@@ -79,12 +81,24 @@ const IconButton = /* @__PURE__ */ import_react.default.forwardRef(
       "disabled",
       "size",
       "variant",
-      "shape"
+      "shape",
+      "aria-label"
     ]);
     const isContainedVariant = variant === "contained";
+    let childrenDisplayName = "";
+    const firstChild = (_b = import_react.default.Children.toArray(children)) == null ? void 0 : _b[0];
+    if (import_react.default.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__ */ import_react.default.createElement(
       "button",
-      __spreadValues({
+      __spreadValues(__spreadValues({
         type: "button",
         className: (0, import_clsx.default)(
           prefixCls,
@@ -98,11 +112,12 @@ const IconButton = /* @__PURE__ */ import_react.default.forwardRef(
           className
         ),
         ref
-      }, others),
+      }, accessibilityProps), others),
       import_utils.isMini && import_react.default.isValidElement(children) ? import_react.default.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/dist/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);
 }

package/dist/Image/Image.js

@@ -123,14 +123,19 @@ const Image = /* @__PURE__ */ import_react.default.forwardRef(
       setLoaded(false);
       setFailed(false);
     }, [src]);
-    function defaultIconWrap(icon) {
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-default-icon-wrap` }, icon);
-    }
-    const defaultIcon = defaultIconWrap(
-      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-default-icon-item` })
-    );
-    const defaultPlaceholder = placeholder === false ? [] : placeholder !== true && defaultIconWrap(placeholder) || defaultIcon;
-    const defaultFallback = fallback && defaultIconWrap(fallback) || defaultPlaceholder;
+    const defaultIconWrap = (icon) => {
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_clsx.default)(`${prefixCls}-default-icon-wrap`, {
+            "default-holder": !icon
+          }),
+          "aria-hidden": "true"
+        },
+        icon
+      );
+    };
+    const defaultPlaceholder = placeholder === false ? [] : placeholder !== true && defaultIconWrap(placeholder) || defaultIconWrap();
     const miniAttr = {
       webp,
       lazyLoad: lazy,
@@ -151,7 +156,7 @@ const Image = /* @__PURE__ */ import_react.default.forwardRef(
           setFailed(true);
           onError == null ? void 0 : onError(e);
         },
-        alt
+        alt: alt || ""
       }, imgProps), {
         style: __spreadValues({ objectFit: fit }, (imgProps == null ? void 0 : imgProps.style) || {}),
         className: (0, import_clsx.default)(
@@ -163,7 +168,9 @@ const Image = /* @__PURE__ */ import_react.default.forwardRef(
       }), import_utils.isMini ? miniAttr : {})
     );
     function renderImgEle() {
-      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, failed && defaultFallback || !loaded && defaultPlaceholder || null, imgEle);
+      if (failed)
+        return fallback || defaultPlaceholder;
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, !loaded && defaultPlaceholder, imgEle);
     }
     return /* @__PURE__ */ import_react.default.createElement(
       "div",

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

@@ -0,0 +1,130 @@
+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, {
+  ClickableImageDemo: () => ClickableImageDemo,
+  basicImageDemo: () => basicImageDemo,
+  default: () => A11yDemos_default,
+  errorImageDemo: () => errorImageDemo,
+  lazyImageDemo: () => lazyImageDemo,
+  noAltImageDemo: () => noAltImageDemo,
+  placeholderImageDemo: () => placeholderImageDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Image = __toESM(require("../../Image"));
+const basicImageDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Image.default,
+    {
+      src: "https://via.placeholder.com/150x100",
+      alt: "\u793A\u4F8B\u56FE\u7247",
+      width: 150,
+      height: 100
+    }
+  ));
+};
+const ClickableImageDemo = () => {
+  const [clicked, setClicked] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Image.default,
+    {
+      src: "https://via.placeholder.com/150x100",
+      alt: "\u53EF\u70B9\u51FB\u7684\u793A\u4F8B\u56FE\u7247",
+      width: 150,
+      height: 100,
+      onClick: () => {
+        setClicked(!clicked);
+        console.log("\u56FE\u7247\u88AB\u70B9\u51FB\u4E86");
+      }
+    }
+  ), clicked && /* @__PURE__ */ import_react.default.createElement("p", null, "\u56FE\u7247\u5DF2\u88AB\u70B9\u51FB"));
+};
+const placeholderImageDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Image.default,
+    {
+      src: "",
+      alt: "\u5E26\u5360\u4F4D\u7B26\u7684\u56FE\u7247",
+      width: 150,
+      height: 100,
+      placeholder: /* @__PURE__ */ import_react.default.createElement("div", null, "\u52A0\u8F7D\u4E2D...")
+    }
+  ));
+};
+const errorImageDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Image.default,
+    {
+      src: "https://invalid-url.com/nonexistent.jpg",
+      alt: "\u52A0\u8F7D\u5931\u8D25\u7684\u56FE\u7247",
+      width: 150,
+      height: 100,
+      fallback: /* @__PURE__ */ import_react.default.createElement("div", null, "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25")
+    }
+  ));
+};
+const lazyImageDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Image.default,
+    {
+      src: "https://via.placeholder.com/150x100",
+      alt: "\u61D2\u52A0\u8F7D\u56FE\u7247",
+      width: 150,
+      height: 100,
+      lazy: true
+    }
+  ));
+};
+const noAltImageDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    import_Image.default,
+    {
+      src: "https://via.placeholder.com/150x100",
+      width: 150,
+      height: 100
+    }
+  ));
+};
+var A11yDemos_default = {
+  basicImageDemo,
+  ClickableImageDemo,
+  placeholderImageDemo,
+  errorImageDemo,
+  lazyImageDemo,
+  noAltImageDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ClickableImageDemo,
+  basicImageDemo,
+  errorImageDemo,
+  lazyImageDemo,
+  noAltImageDemo,
+  placeholderImageDemo
+});

package/dist/Image/index.css

@@ -1,7 +1,7 @@
 :root,
 page,
 xhs-page {
-  --bui-image-default-background-color: rgba(127, 127, 127, 0.2);
+  --bui-image-default-bg-color: rgba(127, 127, 127, 0.2);
 }
 .bui-image {
   width: auto;
@@ -30,11 +30,6 @@ xhs-page {
   width: 100%;
   height: 100%;
 }
-.bui-image-default-icon-wrap.bui-image-loaded {
-  opacity: 0;
-}
-.bui-image-default-icon-item {
-  width: 100%;
-  height: 100%;
-  background-color: var(--bui-image-default-background-color);
+.bui-image-default-icon-wrap.default-holder {
+  background-color: var(--bui-image-default-bg-color);
 }

package/dist/Input/Input.js

@@ -68,7 +68,7 @@ const prefixCls = "bui-input";
 const Input = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
     className,
-    defaultValue = "",
+    defaultValue,
     value,
     inputProps,
     inputRef,
@@ -101,6 +101,8 @@ const Input = (0, import_react.forwardRef)((props, ref) => {
     "onFocus",
     "onBlur"
   ]);
+  const { required, readOnly } = inputProps || {};
+  const ariaProps = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, required && { "aria-required": required }), readOnly && { "aria-readonly": readOnly }), disabled && { "aria-disabled": disabled }), placeholder && { "aria-placeholder": placeholder });
   const [inputValue, triggerChange] = (0, import_utils.useValue)({
     value,
     defaultValue,
@@ -156,14 +158,14 @@ const Input = (0, import_react.forwardRef)((props, ref) => {
     startIcon && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-icon ${prefixCls}-icon-start` }, startIcon),
     /* @__PURE__ */ import_react.default.createElement(
       "input",
-      __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, nativeProps), {
+      __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, nativeProps), {
         name,
         type,
         ref: inputRef,
         value: inputValue,
         disabled,
         placeholder
-      }), inputProps), {
+      }), ariaProps), inputProps), {
         onChange: handleChange,
         onFocus: handleFocus,
         onBlur: handleBlur,

package/dist/Input/__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, {
+  ariaLabelInputDemo: () => ariaLabelInputDemo,
+  basicInputDemo: () => basicInputDemo,
+  default: () => A11yDemos_default,
+  disabledInputDemo: () => disabledInputDemo,
+  placeholderInputDemo: () => placeholderInputDemo,
+  readOnlyInputDemo: () => readOnlyInputDemo,
+  requiredInputDemo: () => requiredInputDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Input = __toESM(require("../../Input"));
+const basicInputDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, "First name: ", /* @__PURE__ */ import_react.default.createElement(import_Input.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" })));
+};
+const disabledInputDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, "First name:", /* @__PURE__ */ import_react.default.createElement(import_Input.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", disabled: true })));
+};
+const requiredInputDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, "First name:", /* @__PURE__ */ import_react.default.createElement(import_Input.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", inputProps: { required: true } })));
+};
+const readOnlyInputDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, "First name:", /* @__PURE__ */ import_react.default.createElement(import_Input.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9", inputProps: { readOnly: true } })));
+};
+const placeholderInputDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, "First name:", /* @__PURE__ */ import_react.default.createElement(import_Input.default, { placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9" })));
+};
+const ariaLabelInputDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, "First name:", /* @__PURE__ */ import_react.default.createElement(
+    import_Input.default,
+    {
+      placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9",
+      inputProps: { "aria-label": "\u8F93\u5165\u6846" }
+    }
+  )));
+};
+var A11yDemos_default = {
+  basicInputDemo,
+  disabledInputDemo,
+  requiredInputDemo,
+  readOnlyInputDemo,
+  placeholderInputDemo,
+  ariaLabelInputDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaLabelInputDemo,
+  basicInputDemo,
+  disabledInputDemo,
+  placeholderInputDemo,
+  readOnlyInputDemo,
+  requiredInputDemo
+});

package/dist/Input/index.css

@@ -4,10 +4,10 @@ xhs-page {
   --bui-input-height: 32px;
   --bui-input-padding: 4px 10px;
   --bui-input-border-radius: var(--bui-shape-radius-default);
-  --bui-input-icon-start-margin-right: 3px;
-  --bui-input-icon-end-margin-left: 3px;
-  --bui-input-background-color: transparent;
-  --bui-input-disabled-background-color: rgba(0, 0, 0, 0.04);
+  --bui-input-icon-start-margin: 0 3px 0 0;
+  --bui-input-icon-end-margin: 0 0 0 3px;
+  --bui-input-bg-color: transparent;
+  --bui-input-disabled-bg-color: rgba(0, 0, 0, 0.04);
   --bui-input-clear-color: #ced1d6;
   --bui-input-clear-font-size: var(--bui-title-size-3);
 }
@@ -29,10 +29,10 @@ xhs-page {
   font-size: var(--bui-title-size-3);
 }
 .bui-input-icon-start {
-  margin-right: var(--bui-input-icon-start-margin-right);
+  margin: var(--bui-input-icon-start-margin);
 }
 .bui-input-icon-end {
-  margin-left: var(--bui-input-icon-end-margin-left);
+  margin: var(--bui-input-icon-end-margin);
 }
 .bui-input-input {
   flex: 1;
@@ -42,14 +42,14 @@ xhs-page {
   color: var(--bui-color-fg-default);
   border: none;
   outline: none;
-  background-color: var(--bui-input-background-color);
+  background-color: var(--bui-input-bg-color);
   font-size: var(--bui-text-size-2);
 }
 .bui-input-input::placeholder {
   color: var(--bui-color-fg-subtle);
 }
 .bui-input-disabled {
-  background-color: var(--bui-input-disabled-background-color);
+  background-color: var(--bui-input-disabled-bg-color);
 }
 .bui-input-disabled .bui-input-input {
   color: var(--bui-color-fg-disabled);