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

package/dist/Calendar/utils.js

@@ -28,28 +28,37 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var utils_exports = {};
 __export(utils_exports, {
   formatDate: () => formatDate,
-  generateRangeDate: () => generateRangeDate,
-  geteDateDiff: () => geteDateDiff,
-  isRange: () => isRange,
+  generateDateRange: () => generateDateRange,
+  getDateDiff: () => getDateDiff,
+  isDateInRange: () => isDateInRange,
+  isEqualVal: () => isEqualVal,
   isSame: () => isSame
 });
 module.exports = __toCommonJS(utils_exports);
 var import_esm = __toESM(require("dayjs/esm/index"));
 const isSame = (start, end) => (0, import_esm.default)(start).isSame(end, "day");
-const geteDateDiff = (a, b) => {
-  return (0, import_esm.default)((0, import_esm.default)(a).format("YYYYMMDD")).diff(
-    (0, import_esm.default)((0, import_esm.default)(b).format("YYYYMMDD")),
-    "day"
-  );
-};
-const isRange = (current, start, end) => {
-  let flag = true;
-  if (geteDateDiff(current, start) < 0 || geteDateDiff(current, end) > 0) {
-    flag = false;
+const isEqualVal = (a, b) => {
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length)
+      return false;
+    return a.every((item, index) => isSame(item, b[index]));
   }
-  return flag;
+  if (typeof a !== typeof b)
+    return false;
+  return a instanceof Date && b instanceof Date && isSame(a, b);
+};
+const getDateDiff = (a, b) => {
+  const aDate = (0, import_esm.default)((0, import_esm.default)(a).format("YYYYMMDD"));
+  const bDate = (0, import_esm.default)((0, import_esm.default)(b).format("YYYYMMDD"));
+  return aDate.diff(bDate, "day");
 };
-const generateRangeDate = (value) => {
+const isDateInRange = (current, start, end) => {
+  return getDateDiff(current, start) >= 0 && getDateDiff(current, end) <= 0;
+};
+const generateDateRange = (value) => {
+  if (!Array.isArray(value) || value.length === 0) {
+    return { start: null, end: null };
+  }
   const finalIndex = value.length - 1;
   return {
     start: value[0],
@@ -62,16 +71,16 @@ const formatDate = (mode, value, minDate, maxDate) => {
   let defaultStartDate = null;
   let defaultEndDate = null;
   if (mode === "single" && value) {
-    defaultStartDate = isRange(value, minDate, maxDate) ? value : null;
+    defaultStartDate = isDateInRange(value, minDate, maxDate) ? value : null;
   } else if (mode === "range") {
-    const { start, end } = generateRangeDate(value);
+    const { start, end } = generateDateRange(value);
     if (start) {
-      defaultStartDate = isRange(start, minDate, maxDate) ? start : null;
+      defaultStartDate = isDateInRange(start, minDate, maxDate) ? start : null;
     }
     if (end) {
-      defaultEndDate = isRange(end, minDate, maxDate) ? end : null;
+      defaultEndDate = isDateInRange(end, minDate, maxDate) ? end : null;
     }
-    if (start && end && geteDateDiff(start, end) > 0) {
+    if (start && end && getDateDiff(start, end) > 0) {
       defaultStartDate = end;
       defaultEndDate = start;
     }
@@ -81,8 +90,9 @@ const formatDate = (mode, value, minDate, maxDate) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   formatDate,
-  generateRangeDate,
-  geteDateDiff,
-  isRange,
+  generateDateRange,
+  getDateDiff,
+  isDateInRange,
+  isEqualVal,
   isSame
 });

package/dist/Checkbox/Checkbox.js

@@ -71,7 +71,7 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
   const _a = props, {
     className,
     defaultChecked = false,
-    checked,
+    checked = false,
     inputProps,
     inputRef,
     name,
@@ -97,6 +97,7 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
     "onChange",
     "children"
   ]);
+  const ariaProps = __spreadValues({}, disabled && { "aria-disabled": disabled });
   const groupContext = (0, import_react.useContext)(import_CheckboxContext.default);
   let validDefaultChecked = defaultChecked;
   let validChecked = checked;
@@ -113,7 +114,7 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
   }
   const checkboxCheckIcon = checkedIcon || /* @__PURE__ */ import_react.default.createElement(import_icons.SuccessCircleFilledIcon, { color: "primary" });
   const checkboxUncheckIcon = icon || /* @__PURE__ */ import_react.default.createElement(import_icons.CircleOutlinedIcon, { color: "neutral" });
-  const checkboxDisabled = disabled !== void 0 ? disabled : groupContext == null ? void 0 : groupContext.disabled;
+  const checkboxDisabled = disabled !== void 0 ? disabled : (groupContext == null ? void 0 : groupContext.disabled) || false;
   const handleChange = (e) => {
     var _a2, _b2, _c2;
     const isChecked = !checkboxChecked;
@@ -144,14 +145,14 @@ const Checkbox = (0, import_react.forwardRef)((props, ref) => {
     }, others),
     /* @__PURE__ */ import_react.default.createElement(
       "input",
-      __spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadValues({
         ref: inputRef,
         type: "checkbox",
         value,
         name,
         checked: checkboxChecked,
         disabled: checkboxDisabled
-      }, inputProps), {
+      }, ariaProps), inputProps), {
         onChange: handleChange,
         className: (0, import_clsx.default)(`${prefixCls}-input`, inputProps == null ? void 0 : inputProps.className)
       })

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

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

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

@@ -0,0 +1,57 @@
+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, {
+  ariaLabelCheckboxDemo: () => ariaLabelCheckboxDemo,
+  basicCheckboxDemo: () => basicCheckboxDemo,
+  default: () => A11yDemos_default,
+  disabledCheckboxDemo: () => disabledCheckboxDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Checkbox = __toESM(require("../../Checkbox"));
+const basicCheckboxDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, { checked: true }), "Checkbox"));
+};
+const disabledCheckboxDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", null, /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, { disabled: true }), "Checkbox"));
+};
+const ariaLabelCheckboxDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_Checkbox.default, { inputProps: { "aria-label": "\u590D\u9009\u6846" } }, "Checkbox"));
+};
+var A11yDemos_default = {
+  basicCheckboxDemo,
+  disabledCheckboxDemo,
+  ariaLabelCheckboxDemo
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ariaLabelCheckboxDemo,
+  basicCheckboxDemo,
+  disabledCheckboxDemo
+});

package/dist/CitySelector/CitySelector.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { OverrideProps } from '@bifrostui/types';
 export type cityType = {
     /** 城市名 */

package/dist/Collapse/Collapse.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CollapseProps } from './Collapse.types';
 import './index.less';
-declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<unknown>>;
+declare const Collapse: React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLElement>>;
 export default Collapse;

package/dist/Collapse/Collapse.js

@@ -61,12 +61,14 @@ __export(Collapse_exports, {
 module.exports = __toCommonJS(Collapse_exports);
 var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
+var import_clsx = __toESM(require("clsx"));
 var import_Transition = require("../Transition");
 var import_index = require("./index.css");
 const defaultEasing = {
   enter: import_utils.easing.easeOut,
   exit: import_utils.easing.sharp
 };
+const FIT_CONTENT = "fit-content";
 const defaultTimeout = {
   enter: import_utils.duration.enteringScreen,
   exit: import_utils.duration.leavingScreen
@@ -95,7 +97,6 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     "className",
     "children"
   ]);
-  const nodeRef = (0, import_utils.useForkRef)(ref);
   const wrapperRef = (0, import_react.useRef)(null);
   const collapseRef = (0, import_utils.useForkRef)(wrapperRef, ref);
   const transitions = (0, import_utils.createTransitions)();
@@ -103,11 +104,11 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   const collapsedSize = typeof collapsedSizeProp === "number" ? `${collapsedSizeProp}px` : collapsedSizeProp;
   const size = isHorizontal ? "width" : "height";
   const getCollapseWrapperSize = (reactNode) => {
-    return reactNode ? `${reactNode[isHorizontal ? "clientWidth" : "clientHeight"]}px` : "fit-content";
+    return reactNode ? `${reactNode[isHorizontal ? "clientWidth" : "clientHeight"]}px` : FIT_CONTENT;
   };
   (0, import_react.useEffect)(() => {
     var _a2, _b, _c, _d;
-    if (appear === false && inProp === true && ((_b = (_a2 = wrapperRef.current) == null ? void 0 : _a2.style) == null ? void 0 : _b[size]) === "fit-content") {
+    if (appear === false && inProp === true && ((_b = (_a2 = wrapperRef.current) == null ? void 0 : _a2.style) == null ? void 0 : _b[size]) === FIT_CONTENT) {
       wrapperRef.current.style[size] = getCollapseWrapperSize(
         (_d = (_c = wrapperRef.current) == null ? void 0 : _c.children) == null ? void 0 : _d[0]
       );
@@ -118,7 +119,6 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   return /* @__PURE__ */ import_react.default.createElement(
     import_Transition.Transition,
     __spreadProps(__spreadValues({}, other), {
-      ref: nodeRef,
       in: inProp,
       timeout,
       delay,
@@ -126,16 +126,29 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     }),
     (state, childProps) => {
       var _a2;
-      const transition = transitions.create(
+      const transition = state === "entering" || state === "exiting" ? transitions.create(
         size,
         (0, import_utils.getTransitionProps)(
           { timeout, style, easing: easingProp, delay },
-          { mode: state }
+          {
+            mode: state
+          }
         )
-      );
+      ) : "none";
       const wrapperSize = () => {
         var _a3, _b;
-        const collapseWrapperSize = state === "entering" || state === "entered" ? getCollapseWrapperSize((_b = (_a3 = wrapperRef.current) == null ? void 0 : _a3.children) == null ? void 0 : _b[0]) : collapsedSize;
+        let collapseWrapperSize = collapsedSize;
+        if (inProp && state === "entered") {
+          collapseWrapperSize = "auto";
+        } else if (state === "entering" || state === "entered") {
+          collapseWrapperSize = getCollapseWrapperSize(
+            (_b = (_a3 = wrapperRef.current) == null ? void 0 : _a3.children) == null ? void 0 : _b[0]
+          );
+        }
+        if (wrapperRef.current && state === "exiting") {
+          const _ = wrapperRef.current.offsetHeight;
+          console.log(_);
+        }
         return isHorizontal ? {
           width: collapseWrapperSize,
           WebKitWidth: collapseWrapperSize
@@ -146,14 +159,15 @@ const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
       };
       return import_react.default.createElement(
         "div",
-        {
-          className: `bui-collapse ${className}`,
+        __spreadProps(__spreadValues({
+          className: (0, import_clsx.default)("bui-collapse", className),
           style: __spreadValues(__spreadProps(__spreadValues({}, style), {
             transition,
             WebkitTransition: transition
-          }), wrapperSize()),
+          }), wrapperSize())
+        }, childProps), {
           ref: collapseRef
-        },
+        }),
         import_react.default.cloneElement(children, __spreadValues({
           style: __spreadValues({}, (_a2 = children.props) == null ? void 0 : _a2.style)
         }, childProps))

package/dist/Collapse/Collapse.miniapp.d.ts

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

package/dist/Collapse/Collapse.miniapp.js

@@ -0,0 +1,255 @@
+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 Collapse_miniapp_exports = {};
+__export(Collapse_miniapp_exports, {
+  default: () => Collapse_miniapp_default
+});
+module.exports = __toCommonJS(Collapse_miniapp_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+var import_taro = __toESM(require("@tarojs/taro"));
+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 FIT_CONTENT = "fit-content";
+const Collapse = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
+  var _b;
+  const _a = props, {
+    children,
+    in: inProp,
+    style,
+    className,
+    appear = false,
+    enter = true,
+    exit = true,
+    delay = 0,
+    easing: easingProp = defaultEasing,
+    timeout = defaultTimeout,
+    direction = "vertical",
+    collapsedSize: collapsedSizeProp = 0,
+    mountOnEnter: mountOnEnter,
+    unmountOnExit,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited
+  } = _a, others = __objRest(_a, [
+    "children",
+    "in",
+    "style",
+    "className",
+    "appear",
+    "enter",
+    "exit",
+    "delay",
+    "easing",
+    "timeout",
+    "direction",
+    "collapsedSize",
+    // Lifecycle hooks
+    "mountOnEnter",
+    "unmountOnExit",
+    "onEnter",
+    "onEntering",
+    "onEntered",
+    "onExit",
+    "onExiting",
+    "onExited"
+  ]);
+  const [isMounted, setIsMounted] = (0, import_react.useState)(inProp || !mountOnEnter);
+  const shouldAnimate = inProp && enter || !inProp && exit;
+  const [animation, setAnimation] = (0, import_react.useState)("none");
+  const shouldAnimateOnFirstMount = inProp && appear;
+  const collapsedSize = typeof collapsedSizeProp === "number" ? `${collapsedSizeProp}px` : collapsedSizeProp;
+  const [actualSize, setActualSize] = (0, import_react.useState)(() => {
+    if (!shouldAnimateOnFirstMount) {
+      return inProp ? FIT_CONTENT : collapsedSize;
+    }
+    return collapsedSize;
+  });
+  const elementRef = (0, import_react.useRef)(null);
+  const handleRef = (0, import_utils.useForkRef)(ref, children == null ? void 0 : children.ref, elementRef);
+  const getAnimation = (canAnimate) => {
+    const transitions = (0, import_utils.createTransitions)();
+    const mode = inProp ? "enter" : "exit";
+    const animationName = `bui-collapse-${mode}-${direction}`;
+    return transitions.create(
+      animationName,
+      (0, import_utils.getTransitionProps)(
+        {
+          timeout: canAnimate ? timeout : 0,
+          delay: canAnimate ? delay : 0,
+          style,
+          easing: easingProp
+        },
+        { mode: inProp ? "enter" : "exit" }
+      )
+    );
+  };
+  const getCollapseWrapperSize = (reactNode) => {
+    return new Promise((resolve) => {
+      var _a2;
+      const reactNodeChild = (_a2 = reactNode == null ? void 0 : reactNode.children) == null ? void 0 : _a2[0];
+      if (!reactNodeChild) {
+        resolve(FIT_CONTENT);
+        return;
+      }
+      import_taro.default.nextTick(() => {
+        (0, import_utils.getBoundingClientRect)(reactNodeChild).then((res) => {
+          if (!res) {
+            resolve(FIT_CONTENT);
+          } else {
+            const isHorizontal = direction === "horizontal";
+            const newSize = isHorizontal ? `${res == null ? void 0 : res.width}px` : `${res == null ? void 0 : res.height}px`;
+            resolve(newSize);
+          }
+        });
+      });
+    });
+  };
+  (0, import_utils.useDidMountEffect)(() => {
+    if (inProp && !isMounted) {
+      setActualSize(collapsedSize);
+      setIsMounted(true);
+      return;
+    }
+    getCollapseWrapperSize(elementRef.current).then((size) => {
+      setActualSize(size);
+      setAnimation(getAnimation(shouldAnimate));
+    });
+  }, [inProp, isMounted]);
+  (0, import_react.useEffect)(() => {
+    if (!shouldAnimateOnFirstMount)
+      return;
+    getCollapseWrapperSize(elementRef.current).then((size) => {
+      setActualSize(size);
+      setAnimation(getAnimation(true));
+    });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const shouldTriggerCallback = isMounted && shouldAnimate;
+    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 (!shouldAnimate)
+      return;
+    if (inProp) {
+      onEntering == null ? void 0 : onEntering(elementRef.current);
+    } else {
+      onExiting == null ? void 0 : onExiting(elementRef.current);
+    }
+  };
+  const handleAnimationEnd = () => {
+    if (inProp) {
+      import_taro.default.nextTick(() => {
+        setActualSize("auto");
+      });
+      onEntered == null ? void 0 : onEntered(elementRef.current);
+    } else {
+      onExited == null ? void 0 : onExited(elementRef.current);
+      if (unmountOnExit) {
+        setIsMounted(false);
+      }
+    }
+  };
+  if (!children || !isMounted)
+    return null;
+  const cssVariables = {
+    "--collapse-size": actualSize,
+    "--collapse-collapsed-size": collapsedSize
+  };
+  const getClassName = () => {
+    const classes = ["bui-collapse"];
+    if (className) {
+      classes.push(className);
+    }
+    classes.push(`bui-collapse-${direction}`);
+    return classes.join(" ");
+  };
+  return import_react.default.createElement(
+    "div",
+    __spreadProps(__spreadValues({}, others), {
+      className: getClassName(),
+      style: __spreadValues(__spreadValues({
+        animation,
+        animationFillMode: "both"
+      }, cssVariables), style),
+      onAnimationStart: handleAnimationStart,
+      onAnimationEnd: handleAnimationEnd,
+      ref: handleRef
+    }),
+    import_react.default.cloneElement(children, {
+      style: __spreadValues({}, (_b = children.props) == null ? void 0 : _b.style)
+    })
+  );
+});
+Collapse.displayName = "BuiCollapse";
+var Collapse_miniapp_default = Collapse;

package/dist/Collapse/index.css

@@ -1,6 +1,45 @@
 .bui-collapse {
   overflow: hidden;
-  white-space: nowrap;
   height: fit-content;
   width: fit-content;
+  --collapse-size: auto;
+  --collapse-collapsed-size: 0px;
+}
+.bui-collapse.bui-collapse-vertical {
+  height: var(--collapse-size);
+}
+.bui-collapse.bui-collapse-horizontal {
+  width: var(--collapse-size);
+}
+@keyframes bui-collapse-enter-vertical {
+  from {
+    height: var(--collapse-collapsed-size);
+  }
+  to {
+    height: var(--collapse-size);
+  }
+}
+@keyframes bui-collapse-exit-vertical {
+  from {
+    height: var(--collapse-size);
+  }
+  to {
+    height: var(--collapse-collapsed-size);
+  }
+}
+@keyframes bui-collapse-enter-horizontal {
+  from {
+    width: var(--collapse-collapsed-size);
+  }
+  to {
+    width: var(--collapse-size);
+  }
+}
+@keyframes bui-collapse-exit-horizontal {
+  from {
+    width: var(--collapse-size);
+  }
+  to {
+    width: var(--collapse-collapsed-size);
+  }
 }

package/dist/CollapsePanel/index.css

@@ -19,7 +19,7 @@ xhs-page {
 }
 .bui-collapse-panel-item-header-label {
   padding: var(--bui-collapse-panel-header-padding);
-  font-size: var(--bui-title-size-2);
+  font-size: var(--bui-title-size-3);
 }
 .bui-collapse-panel-item-header-icon-arrow {
   transform: rotate(0deg);