@bifrostui/react 2.0.0-alpha.31 → 2.0.0-alpha.33

package/dist/Stack/demo/StackDemo.js

@@ -1,11 +1,9 @@
-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;
@@ -33,21 +31,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 StackDemo_exports = {};
 __export(StackDemo_exports, {
   default: () => StackDemo_default
 });
 module.exports = __toCommonJS(StackDemo_exports);
-var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_react2 = require("@bifrostui/react");
 var import_index = require("./index.css");
 const StackDemo = () => {
@@ -58,95 +49,117 @@ const StackDemo = () => {
     spacing: "",
     wrap: ""
   });
-  return /* @__PURE__ */ import_react.default.createElement(import_react2.Stack, null, /* @__PURE__ */ import_react.default.createElement(
-    import_react2.Stack,
-    __spreadValues({
-      style: {
-        width: "150px",
-        height: "150px"
-      }
-    }, stackState),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Button, null, "\u6309\u94AE1"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Button, null, "\u6309\u94AE2"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Button, null, "\u6309\u94AE3")
-  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-stack-demo-options" }, /* @__PURE__ */ import_react.default.createElement(
-    import_react2.RadioGroup,
-    {
-      value: stackState.direction,
-      onChange: (e, data) => {
-        setStackState(__spreadProps(__spreadValues({}, stackState), {
-          direction: data.value
-        }));
-      }
-    },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-stack-demo-options-title" }, "direction"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "row" }, " row"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "row-reverse" }, " row-reverse"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "column" }, "column"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "column-reverse" }, "column-reverse")
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_react2.RadioGroup,
-    {
-      value: stackState.justifyContent,
-      onChange: (e, data) => {
-        setStackState(__spreadProps(__spreadValues({}, stackState), {
-          justifyContent: data.value
-        }));
-      }
-    },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-stack-demo-options-title" }, " justifyContent"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "flex-start" }, " flex-start"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "flex-end" }, " flex-end"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "center" }, "center"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "space-between" }, "space-between"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "space-around" }, "space-around"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "space-evenly" }, "space-evenly")
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_react2.RadioGroup,
-    {
-      value: stackState.alignItems,
-      onChange: (e, data) => {
-        setStackState(__spreadProps(__spreadValues({}, stackState), {
-          alignItems: data.value
-        }));
-      }
-    },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-stack-demo-options-title" }, " alignItems"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "flex-start" }, " flex-start"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "flex-end" }, " flex-end"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "center" }, "center"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "stretch" }, "stretch"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "baseline" }, " baseline")
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_react2.RadioGroup,
-    {
-      value: stackState.flexWrap,
-      onChange: (e, data) => {
-        setStackState(__spreadProps(__spreadValues({}, stackState), {
-          flexWrap: data.value
-        }));
-      }
-    },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-stack-demo-options-title" }, " flexWrap"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "wrap" }, " wrap"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "no-wrap" }, " no-wrap"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "wrap-reverse" }, "wrap-reverse")
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_react2.RadioGroup,
-    {
-      value: stackState.spacing,
-      onChange: (e, data) => {
-        setStackState(__spreadProps(__spreadValues({}, stackState), {
-          spacing: data.value
-        }));
-      }
-    },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-stack-demo-options-title" }, " spacing"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "10px" }, "10px"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "20px" }, " 20px"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "30px" }, "30px"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "40px" }, "40px"),
-    /* @__PURE__ */ import_react.default.createElement(import_react2.Radio, { value: "50px" }, " 50px")
-  )));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.Stack, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_react2.Stack,
+      __spreadProps(__spreadValues({
+        style: {
+          width: "150px",
+          height: "150px"
+        }
+      }, stackState), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Button, { children: "\u6309\u94AE1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Button, { children: "\u6309\u94AE2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Button, { children: "\u6309\u94AE3" })
+        ]
+      })
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bui-stack-demo-options", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_react2.RadioGroup,
+        {
+          value: stackState.direction,
+          onChange: (e, data) => {
+            setStackState(__spreadProps(__spreadValues({}, stackState), {
+              direction: data.value
+            }));
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bui-stack-demo-options-title", children: "direction" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "row", children: " row" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "row-reverse", children: " row-reverse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "column", children: "column" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "column-reverse", children: "column-reverse" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_react2.RadioGroup,
+        {
+          value: stackState.justifyContent,
+          onChange: (e, data) => {
+            setStackState(__spreadProps(__spreadValues({}, stackState), {
+              justifyContent: data.value
+            }));
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bui-stack-demo-options-title", children: " justifyContent" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "flex-start", children: " flex-start" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "flex-end", children: " flex-end" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "center", children: "center" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "space-between", children: "space-between" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "space-around", children: "space-around" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "space-evenly", children: "space-evenly" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_react2.RadioGroup,
+        {
+          value: stackState.alignItems,
+          onChange: (e, data) => {
+            setStackState(__spreadProps(__spreadValues({}, stackState), {
+              alignItems: data.value
+            }));
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bui-stack-demo-options-title", children: " alignItems" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "flex-start", children: " flex-start" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "flex-end", children: " flex-end" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "center", children: "center" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "stretch", children: "stretch" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "baseline", children: " baseline" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_react2.RadioGroup,
+        {
+          value: stackState.flexWrap,
+          onChange: (e, data) => {
+            setStackState(__spreadProps(__spreadValues({}, stackState), {
+              flexWrap: data.value
+            }));
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bui-stack-demo-options-title", children: " flexWrap" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "wrap", children: " wrap" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "no-wrap", children: " no-wrap" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "wrap-reverse", children: "wrap-reverse" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_react2.RadioGroup,
+        {
+          value: stackState.spacing,
+          onChange: (e, data) => {
+            setStackState(__spreadProps(__spreadValues({}, stackState), {
+              spacing: data.value
+            }));
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bui-stack-demo-options-title", children: " spacing" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "10px", children: "10px" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "20px", children: " 20px" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "30px", children: "30px" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "40px", children: "40px" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Radio, { value: "50px", children: " 50px" })
+          ]
+        }
+      )
+    ] })
+  ] });
 };
 var StackDemo_default = StackDemo;

package/dist/Steps/Step.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import './Step.less';
 import { StepProps } from './Step.types';
-declare const Step: React.ForwardRefExoticComponent<Omit<StepProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Step: React.ForwardRefExoticComponent<Omit<StepProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Step;

package/dist/Steps/Step.js

@@ -1,6 +1,8 @@
 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;
@@ -18,6 +20,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -56,9 +59,10 @@ __export(Step_exports, {
   default: () => Step_default
 });
 module.exports = __toCommonJS(Step_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_icons = require("@bifrostui/icons");
 var import_clsx = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_Step = require("./Step.css");
 var import_StepsContext = __toESM(require("./StepsContext"));
 const classes = {
@@ -100,18 +104,18 @@ const Step = (0, import_react.forwardRef)(
     };
     const renderIcon = () => {
       const icons = {
-        active: /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.icon}-active` }),
-        wait: /* @__PURE__ */ import_react.default.createElement(import_icons.CircleOutlinedIcon, { color: "disabled" }),
-        finish: /* @__PURE__ */ import_react.default.createElement(import_icons.SuccessCircleFilledIcon, { color: "primary" }),
-        error: /* @__PURE__ */ import_react.default.createElement(import_icons.ErrorCircleFilledIcon, { color: "primary" })
+        active: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${classes.icon}-active` }),
+        wait: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CircleOutlinedIcon, { color: "disabled" }),
+        finish: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SuccessCircleFilledIcon, { color: "primary" }),
+        error: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ErrorCircleFilledIcon, { color: "primary" })
       };
       if (icon)
         return icon;
       return icons[status];
     };
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
-      __spreadValues({
+      __spreadProps(__spreadValues({
         className: (0, import_clsx.default)(classes.root, className, {
           [`${classes.root}-${direction}`]: direction,
           [`${classes.root}-label-${labelPlacement}`]: labelPlacement,
@@ -119,43 +123,51 @@ const Step = (0, import_react.forwardRef)(
         }),
         ref,
         onClick: handleClick
-      }, others),
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: (0, import_clsx.default)(classes.line, {
-            [`${classes.line}-${status}`]: status
-          })
-        }
-      ),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: classes.icon }, renderIcon()),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.root}-content` }, /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: (0, import_clsx.default)(`${classes.title}-wrapper`, {
-            [`${classes.title}-wrapper-vertical`]: isTitleVertical,
-            [`${classes.title}-wrapper-line-${status}`]: status
-          })
-        },
-        !!title && /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            className: (0, import_clsx.default)(classes.title, `${classes.title}-${status}`, {
-              [`${classes.title}-${labelPlacement}`]: labelPlacement
-            })
-          },
-          title
-        ),
-        !!subtitle && /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            className: (0, import_clsx.default)(classes.subtitle, {
-              [`${classes.subtitle}-${labelPlacement}`]: labelPlacement
-            })
-          },
-          subtitle
-        )
-      ), !!description && /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.root}-desc` }, description))
+      }, others), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: (0, import_clsx.default)(classes.line, {
+                [`${classes.line}-${status}`]: status
+              })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: classes.icon, children: renderIcon() }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${classes.root}-content`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
+              {
+                className: (0, import_clsx.default)(`${classes.title}-wrapper`, {
+                  [`${classes.title}-wrapper-vertical`]: isTitleVertical,
+                  [`${classes.title}-wrapper-line-${status}`]: status
+                }),
+                children: [
+                  !!title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      className: (0, import_clsx.default)(classes.title, `${classes.title}-${status}`, {
+                        [`${classes.title}-${labelPlacement}`]: labelPlacement
+                      }),
+                      children: title
+                    }
+                  ),
+                  !!subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      className: (0, import_clsx.default)(classes.subtitle, {
+                        [`${classes.subtitle}-${labelPlacement}`]: labelPlacement
+                      }),
+                      children: subtitle
+                    }
+                  )
+                ]
+              }
+            ),
+            !!description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${classes.root}-desc`, children: description })
+          ] })
+        ]
+      })
     );
   }
 );

package/dist/Steps/Steps.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { StepsProps } from './Steps.types';
 import './Steps.less';
-declare const Steps: React.ForwardRefExoticComponent<Omit<StepsProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Steps: React.ForwardRefExoticComponent<Omit<StepsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Steps;

package/dist/Steps/Steps.js

@@ -1,6 +1,8 @@
 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;
@@ -18,6 +20,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -56,9 +59,10 @@ __export(Steps_exports, {
   default: () => Steps_default
 });
 module.exports = __toCommonJS(Steps_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_utils = require("@bifrostui/utils");
 var import_clsx = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_StepsContext = require("./StepsContext");
 var import_Steps2 = require("./Steps.css");
 const prefixCls = "bui-steps";
@@ -81,10 +85,11 @@ const Steps = (0, import_react.forwardRef)(
     ]);
     const renderStep = () => {
       return (0, import_utils.toArray)(children).map((child, index) => {
+        const typedChild = child;
         const childProps = __spreadValues({
           key: index
-        }, child.props);
-        if (!child.props.status) {
+        }, typedChild.props);
+        if (!typedChild.props.status) {
           if (index === current) {
             childProps.status = "active";
           } else if (index < current) {
@@ -93,10 +98,10 @@ const Steps = (0, import_react.forwardRef)(
             childProps.status = "wait";
           }
         }
-        return (0, import_react.cloneElement)(child, childProps);
+        return (0, import_react.cloneElement)(typedChild, childProps);
       });
     };
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_StepsContext.StepsContextProvider,
       {
         value: {
@@ -104,18 +109,19 @@ const Steps = (0, import_react.forwardRef)(
           current,
           labelPlacement,
           onChange
-        }
-      },
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        __spreadValues({
-          className: (0, import_clsx.default)(prefixCls, className, {
-            [`${prefixCls}-${direction}`]: direction
-          }),
-          ref
-        }, others),
-        renderStep()
-      )
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          __spreadProps(__spreadValues({
+            className: (0, import_clsx.default)(prefixCls, className, {
+              [`${prefixCls}-${direction}`]: direction
+            }),
+            ref
+          }, others), {
+            children: renderStep()
+          })
+        )
+      }
     );
   }
 );

package/dist/SwipeAction/SwipeAction.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { SwipeActionProps, SwipeActionRef } from './SwipeAction.types';
 import './SwipeAction.less';
-declare const SwipeAction: React.ForwardRefExoticComponent<Omit<SwipeActionProps<"div", {}>, "ref"> & React.RefAttributes<SwipeActionRef>>;
+declare const SwipeAction: React.ForwardRefExoticComponent<Omit<SwipeActionProps, "ref"> & React.RefAttributes<SwipeActionRef>>;
 export default SwipeAction;

package/dist/SwipeAction/SwipeAction.js

@@ -1,6 +1,8 @@
 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;
@@ -18,6 +20,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -76,6 +79,7 @@ __export(SwipeAction_exports, {
   default: () => SwipeAction_default
 });
 module.exports = __toCommonJS(SwipeAction_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_utils = require("@bifrostui/utils");
@@ -290,58 +294,63 @@ const SwipeAction = /* @__PURE__ */ import_react.default.forwardRef(
       () => ({ closeOnClickActionItem, close }),
       [closeOnClickActionItem]
     );
-    return /* @__PURE__ */ import_react.default.createElement(import_SwipeActionContext.default.Provider, { value: SwipeActionContext }, /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SwipeActionContext.default.Provider, { value: SwipeActionContext, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
-      __spreadValues({
+      __spreadProps(__spreadValues({
         className: (0, import_clsx.default)(`${classPrefix}`, className),
         ref: rootRef
-      }, others),
-      /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: `${classPrefix}-track`,
-          style: {
-            transform: `translate3d(${translateX}px, 0, 0)`
-          }
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            className: `${classPrefix}-actions ${classPrefix}-actions-left`,
-            ref: leftRef
-          },
-          leftActions
-        ),
-        /* @__PURE__ */ import_react.default.createElement(
+      }, others), {
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
-            className: `${classPrefix}-content-container`,
-            ref: contentRef,
-            onTouchStart: handleTouchStart,
-            onTouchMove: handleTouchMove,
-            onTouchEnd: handleTouchEnd,
-            onTouchCancel: handleTouchEnd
-          },
-          isOpen && closeOnClickContainer && /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              className: `${classPrefix}-content-mask`,
-              id: "content-mask",
-              onClick: outClickHandle
-            }
-          ),
-          children
-        ),
-        /* @__PURE__ */ import_react.default.createElement(
-          "div",
-          {
-            className: `${classPrefix}-actions ${classPrefix}-actions-right`,
-            ref: rightRef
-          },
-          rightActions
+            className: `${classPrefix}-track`,
+            style: {
+              transform: `translate3d(${translateX}px, 0, 0)`
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: `${classPrefix}-actions ${classPrefix}-actions-left`,
+                  ref: leftRef,
+                  children: leftActions
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: `${classPrefix}-content-container`,
+                  ref: contentRef,
+                  onTouchStart: handleTouchStart,
+                  onTouchMove: handleTouchMove,
+                  onTouchEnd: handleTouchEnd,
+                  onTouchCancel: handleTouchEnd,
+                  children: [
+                    isOpen && closeOnClickContainer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: `${classPrefix}-content-mask`,
+                        id: "content-mask",
+                        onClick: outClickHandle
+                      }
+                    ),
+                    children
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: `${classPrefix}-actions ${classPrefix}-actions-right`,
+                  ref: rightRef,
+                  children: rightActions
+                }
+              )
+            ]
+          }
         )
-      )
-    ));
+      })
+    ) });
   }
 );
 SwipeAction.displayName = "BuiSwipeAction";