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

package/dist/ScrollView/ScrollView.types.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { OverrideProps } from '@bifrostui/types';
 /**
  * 滚动事件详情
@@ -9,6 +9,22 @@ export interface ScrollViewScrollEvent extends Event {
         scrollTop: number;
         scrollHeight: number;
         scrollWidth: number;
+        deltaX?: number;
+        deltaY?: number;
+        isDrag?: boolean;
+    };
+}
+/**
+ * 拖拽事件详情
+ */
+export interface ScrollViewDragEvent extends Event {
+    detail?: {
+        /** 横向滚动条位置 */
+        scrollLeft?: number;
+        /** 竖向滚动条位置 */
+        scrollTop?: number;
+        /** 滚动速度 */
+        velocity?: number;
     };
 }
 /**
@@ -52,6 +68,134 @@ export type ScrollViewProps<D extends React.ElementType = 'div', P = {}> = Overr
          * @default false
          */
         scrollWithAnimation?: boolean;
+        /**
+         * 当 scroll-with-animation设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。
+         */
+        scrollAnimationDuration?: number;
+        /**
+         * 滚动条返回顶部，只支持竖向
+         * 仅小程序可用
+         * @default false
+         */
+        enableBackToTop?: boolean;
+        /**
+         * 启用 flexbox 布局。开启后，当前节点声明了 `display: flex` 就会成为 flex container，并作用于其孩子节点。
+         * 仅小程序可用
+         * @default false
+         */
+        enableFlex?: boolean;
+        /**
+         * 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS `overflow-anchor` 属性。
+         * 仅小程序可用
+         * @default false
+         */
+        scrollAnchoring?: boolean;
+        /**
+         * 启用 scroll-view 增强特性
+         * 仅小程序可用
+         * @default false
+         */
+        enhanced?: boolean;
+        /**
+         * iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         * @default true
+         */
+        bounces?: boolean;
+        /**
+         * 滚动条显隐控制 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         * @default true
+         */
+        showScrollbar?: boolean;
+        /**
+         * 分页滑动效果 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         * @default false
+         */
+        pagingEnabled?: boolean;
+        /**
+         * 滑动减速速率控制 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         * @default false
+         */
+        fastDeceleration?: boolean;
+        /**
+         * 纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。
+         * 仅小程序可用
+         * @default false
+         */
+        trapScroll?: string;
+        /**
+         * 发生滚动前，对滚动方向进行判断，当方向是顶部/左边时，如果值为always将始终禁止滚动，如果值为out-of-bounds 且当前已经滚动到顶部/左边，禁止滚动。
+         * 仅小程序可用
+         */
+        disableLowerScroll?: string;
+        /**
+         * 发生滚动前，对滚动方向进行判断，当方向是底部/右边时，如果值为always将始终禁止滚动，如果值为out-of-bounds 且当前已经滚动到底部/右边，禁止滚动。
+         * 仅小程序可用
+         */
+        disableUpperScroll?: string;
+        /**
+         * 无障碍访问，（属性）元素的额外描述
+         * 仅小程序可用
+         */
+        ariaLabel?: string;
+        /**
+         * 开启 passive 特性，能优化一定的滚动性能
+         * 仅小程序可用
+         * @default false
+         */
+        enablePassive?: string;
+        /**
+         * 渲染模式
+         * list - 列表模式。只会渲染在屏节点，会根据直接子节点是否在屏来按需渲染，若只有一个直接子节点则性能会退化
+         * custom - 自定义模式。只会渲染在屏节点，子节点可以是 sticky-section list-view grid-view 等组件
+         * 仅小程序可用
+         * @default 'list'
+         */
+        type?: 'list' | 'custom';
+        /**
+         * 是否反向滚动。一般初始滚动位置是在顶部，反向滚动则是在底部。
+         * 仅小程序可用
+         * @default false
+         */
+        reverse?: boolean;
+        /**
+         * 指定视口外渲染区域的距离，默认情况下视口外节点不渲染。指定 cache-extent 可优化滚动体验和加载速度，但会提高内存占用且影响首屏速度，可按需启用。
+         * 仅小程序可用
+         */
+        cacheExtent?: number;
+        /**
+         * 只 scroll-into-view 到 cacheExtent 以内的目标节点，性能更佳
+         * 仅小程序可用
+         * @default false
+         */
+        scrollIntoViewWithinExtent?: boolean;
+        /**
+         * 开启自定义下拉刷新
+         * 仅小程序可用
+         * @default false
+         */
+        refresherEnabled?: boolean;
+        /**
+         * 设置自定义下拉刷新默认样式，支持设置 `black | white | none`， none 表示不使用默认样式
+         * 仅小程序可用
+         * @default 'black'
+         */
+        refresherDefaultStyle?: string;
+        /**
+         * 设置自定义下拉刷新区域背景颜色
+         * 仅小程序可用
+         * @default '#FFF'
+         */
+        refresherBackground?: string;
+        /**
+         * 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
+         * 仅小程序可用
+         * @default false
+         */
+        refresherTriggered?: boolean;
         /**
          * 距顶部/左边多远时（单位px），触发 onScrollToUpper 事件
          * @default 50
@@ -78,6 +222,71 @@ export type ScrollViewProps<D extends React.ElementType = 'div', P = {}> = Overr
          * 触摸移动时触发
          */
         onTouchMove?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
+        /**
+         * 滚动开始事件
+         * 仅小程序可用
+         */
+        onScrollStart?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
+        /**
+         * 滚动结束事件
+         * 仅小程序可用
+         */
+        onScrollEnd?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
+        /**
+         * 自定义下拉刷新控件被下拉
+         * 仅小程序可用
+         */
+        onRefresherPulling?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 自定义下拉刷新被触发
+         * 仅小程序可用
+         */
+        onRefresherRefresh?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 自定义下拉刷新被复位
+         * 仅小程序可用
+         */
+        onRefresherRestore?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 自定义下拉刷新被中止
+         * 仅小程序可用
+         */
+        onRefresherAbort?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 自定义下拉刷新即将触发刷新（拖动超过 refresher-threshold 时）的事件
+         * 仅小程序可用
+         */
+        onRefresherWillRefresh?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 滑动开始事件 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         */
+        onDragStart?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
+        /**
+         * 滑动事件 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         */
+        onDragging?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
+        /**
+         * 滑动结束事件 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         */
+        onDragEnd?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
+        /**
+         * 触摸动作开始。
+         * 仅小程序可用
+         */
+        onTouchStart?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
+        /**
+         * 触摸动作结束。
+         * 仅小程序可用
+         */
+        onTouchEnd?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
+        /**
+         * 触摸动作被打断，如来电提醒、弹窗。
+         * 仅小程序可用
+         */
+        onTouchCancel?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
     };
     defaultComponent: D;
 }, D>;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 export declare const BasicScrollViewDemo: React.FC;
 export declare const HorizontalScrollViewDemo: React.FC;
 export declare const ScrollEventsDemo: React.FC;

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

@@ -52,10 +52,10 @@ __export(A11yDemos_exports, {
   ThresholdTestDemo: () => ThresholdTestDemo
 });
 module.exports = __toCommonJS(A11yDemos_exports);
-var import_react = __toESM(require("react"));
+var React = __toESM(require("react"));
 var import_ScrollView = __toESM(require("../../ScrollView"));
 const BasicScrollViewDemo = () => {
-  return /* @__PURE__ */ import_react.default.createElement(import_ScrollView.default, { scrollY: true, style: { height: "300px", width: "100%" } }, Array.from({ length: 50 }, (_, index) => /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ React.createElement(import_ScrollView.default, { scrollY: true, style: { height: "300px", width: "100%" } }, Array.from({ length: 50 }, (_, index) => /* @__PURE__ */ React.createElement(
     "div",
     {
       key: index,
@@ -66,7 +66,7 @@ const BasicScrollViewDemo = () => {
   )));
 };
 const HorizontalScrollViewDemo = () => {
-  return /* @__PURE__ */ import_react.default.createElement(import_ScrollView.default, { scrollX: true, style: { width: "300px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", width: "max-content" } }, Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ React.createElement(import_ScrollView.default, { scrollX: true, style: { width: "300px" } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", width: "max-content" } }, Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ React.createElement(
     "div",
     {
       key: index,
@@ -86,7 +86,7 @@ const HorizontalScrollViewDemo = () => {
   ))));
 };
 const ScrollEventsDemo = () => {
-  const [scrollInfo, setScrollInfo] = import_react.default.useState({
+  const [scrollInfo, setScrollInfo] = React.useState({
     scrollTop: 0,
     atTop: false,
     atBottom: false
@@ -105,7 +105,7 @@ const ScrollEventsDemo = () => {
   const handleScrollToLower = () => {
     setScrollInfo((prev) => __spreadProps(__spreadValues({}, prev), { atTop: false, atBottom: true }));
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
     "div",
     {
       "data-testid": "scroll-info",
@@ -115,10 +115,10 @@ const ScrollEventsDemo = () => {
         backgroundColor: "#f9f9f9"
       }
     },
-    /* @__PURE__ */ import_react.default.createElement("p", null, "Scroll Top: ", scrollInfo.scrollTop),
-    /* @__PURE__ */ import_react.default.createElement("p", null, "At Top: ", scrollInfo.atTop ? "Yes" : "No"),
-    /* @__PURE__ */ import_react.default.createElement("p", null, "At Bottom: ", scrollInfo.atBottom ? "Yes" : "No")
-  ), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ React.createElement("p", null, "Scroll Top: ", scrollInfo.scrollTop),
+    /* @__PURE__ */ React.createElement("p", null, "At Top: ", scrollInfo.atTop ? "Yes" : "No"),
+    /* @__PURE__ */ React.createElement("p", null, "At Bottom: ", scrollInfo.atBottom ? "Yes" : "No")
+  ), /* @__PURE__ */ React.createElement(
     import_ScrollView.default,
     {
       scrollY: true,
@@ -129,7 +129,7 @@ const ScrollEventsDemo = () => {
       upperThreshold: 30,
       lowerThreshold: 30
     },
-    Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ import_react.default.createElement(
+    Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ React.createElement(
       "div",
       {
         key: index,
@@ -141,8 +141,8 @@ const ScrollEventsDemo = () => {
   ));
 };
 const ControlledScrollDemo = () => {
-  const [scrollTop, setScrollTop] = import_react.default.useState(0);
-  const [scrollIntoView, setScrollIntoView] = import_react.default.useState("");
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [scrollIntoView, setScrollIntoView] = React.useState("");
   const scrollToPosition = (position) => {
     setScrollIntoView("");
     setScrollTop(position);
@@ -151,7 +151,7 @@ const ControlledScrollDemo = () => {
     setScrollTop(0);
     setScrollIntoView(elementId);
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
     "div",
     {
       style: {
@@ -160,7 +160,7 @@ const ControlledScrollDemo = () => {
         backgroundColor: "#f5f5f5"
       }
     },
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ React.createElement(
       "button",
       {
         type: "button",
@@ -169,7 +169,7 @@ const ControlledScrollDemo = () => {
       },
       "Top"
     ),
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ React.createElement(
       "button",
       {
         type: "button",
@@ -178,7 +178,7 @@ const ControlledScrollDemo = () => {
       },
       "200px"
     ),
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ React.createElement(
       "button",
       {
         type: "button",
@@ -187,8 +187,8 @@ const ControlledScrollDemo = () => {
       },
       "Item 10"
     ),
-    /* @__PURE__ */ import_react.default.createElement("button", { type: "button", onClick: () => scrollToElement("item-20") }, "Item 20")
-  ), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => scrollToElement("item-20") }, "Item 20")
+  ), /* @__PURE__ */ React.createElement(
     import_ScrollView.default,
     {
       scrollY: true,
@@ -197,7 +197,7 @@ const ControlledScrollDemo = () => {
       scrollIntoView,
       scrollWithAnimation: true
     },
-    Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ import_react.default.createElement(
+    Array.from({ length: 30 }, (_, index) => /* @__PURE__ */ React.createElement(
       "div",
       {
         key: index,
@@ -216,7 +216,7 @@ const ControlledScrollDemo = () => {
   ));
 };
 const BidirectionalScrollDemo = () => {
-  return /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ React.createElement(
     import_ScrollView.default,
     {
       scrollX: true,
@@ -228,7 +228,7 @@ const BidirectionalScrollDemo = () => {
         borderRadius: "4px"
       }
     },
-    /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         style: {
@@ -240,7 +240,7 @@ const BidirectionalScrollDemo = () => {
           position: "relative"
         }
       },
-      /* @__PURE__ */ import_react.default.createElement(
+      /* @__PURE__ */ React.createElement(
         "div",
         {
           style: {
@@ -255,21 +255,21 @@ const BidirectionalScrollDemo = () => {
             boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
           }
         },
-        /* @__PURE__ */ import_react.default.createElement("h3", { style: { margin: "0 0 10px 0", color: "#007acc" } }, "Scroll in both directions!"),
-        /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: 0, color: "#666" } }, "This content area is larger than the viewport")
+        /* @__PURE__ */ React.createElement("h3", { style: { margin: "0 0 10px 0", color: "#007acc" } }, "Scroll in both directions!"),
+        /* @__PURE__ */ React.createElement("p", { style: { margin: 0, color: "#666" } }, "This content area is larger than the viewport")
       )
     )
   );
 };
 const ThresholdTestDemo = () => {
-  const [thresholdEvents, setThresholdEvents] = import_react.default.useState([]);
+  const [thresholdEvents, setThresholdEvents] = React.useState([]);
   const addEvent = (event) => {
     setThresholdEvents((prev) => [
       ...prev.slice(-4),
       `${(/* @__PURE__ */ new Date()).toLocaleTimeString()}: ${event}`
     ]);
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
     "div",
     {
       "data-testid": "threshold-events",
@@ -280,9 +280,9 @@ const ThresholdTestDemo = () => {
         minHeight: "80px"
       }
     },
-    /* @__PURE__ */ import_react.default.createElement("strong", null, "Threshold Events:"),
-    thresholdEvents.map((event, index) => /* @__PURE__ */ import_react.default.createElement("div", { key: index, style: { fontSize: "12px", color: "#666" } }, event))
-  ), /* @__PURE__ */ import_react.default.createElement(
+    /* @__PURE__ */ React.createElement("strong", null, "Threshold Events:"),
+    thresholdEvents.map((event, index) => /* @__PURE__ */ React.createElement("div", { key: index, style: { fontSize: "12px", color: "#666" } }, event))
+  ), /* @__PURE__ */ React.createElement(
     import_ScrollView.default,
     {
       scrollY: true,
@@ -292,7 +292,7 @@ const ThresholdTestDemo = () => {
       onScrollToUpper: () => addEvent("Reached upper threshold (20px)"),
       onScrollToLower: () => addEvent("Reached lower threshold (20px)")
     },
-    Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ import_react.default.createElement(
+    Array.from({ length: 20 }, (_, index) => /* @__PURE__ */ React.createElement(
       "div",
       {
         key: index,

package/dist/ScrollView/useScrollView.js

@@ -113,25 +113,31 @@ function useScrollView(parameters) {
   const scrollVertical = (0, import_react.useCallback)((top, isAnimation) => {
     if (top === void 0)
       return;
+    if (!container.current)
+      return;
     if (isAnimation) {
       easeOutScroll(container.current.scrollTop, top, (pos) => {
         if (container.current)
           container.current.scrollTop = pos;
       });
-    } else if (container.current)
+    } else {
       container.current.scrollTop = top;
+    }
   }, []);
   const scrollHorizontal = (0, import_react.useCallback)(
     (left, isAnimation) => {
       if (left === void 0)
         return;
+      if (!container.current)
+        return;
       if (isAnimation) {
         easeOutScroll(container.current.scrollLeft, left, (pos) => {
           if (container.current)
             container.current.scrollLeft = pos;
         });
-      } else if (container.current)
+      } else {
         container.current.scrollLeft = left;
+      }
     },
     []
   );
@@ -141,9 +147,13 @@ function useScrollView(parameters) {
       const isAnimation = scrollWithAnimation;
       if (scrollIntoView && typeof scrollIntoView === "string" && ((_b = (_a2 = container == null ? void 0 : container.current) == null ? void 0 : _a2.querySelector) == null ? void 0 : _b.call(_a2, `#${scrollIntoView}`))) {
         const doScrollIntoView = (id, alignment = "start", _isAnimation = isAnimation) => {
+          if (!container.current)
+            return;
           const target = container.current.querySelector(
             `#${id}`
           );
+          if (!target)
+            return;
           if (scrollY) {
             const start = target.offsetTop;
             const end = target.offsetTop + target.offsetHeight - container.current.clientHeight;
@@ -196,14 +206,14 @@ function useScrollView(parameters) {
           );
         }
       } else {
-        if (scrollY && typeof scrollTopProp === "number" && scrollTopProp !== container.current.scrollTop) {
+        if (scrollY && typeof scrollTopProp === "number" && container.current && scrollTopProp !== container.current.scrollTop) {
           if (isInit) {
             setTimeout(() => scrollVertical(scrollTopProp, isAnimation), 10);
           } else {
             scrollVertical(scrollTopProp, isAnimation);
           }
         }
-        if (scrollX && typeof scrollLeftProp === "number" && scrollLeftProp !== container.current.scrollLeft) {
+        if (scrollX && typeof scrollLeftProp === "number" && container.current && scrollLeftProp !== container.current.scrollLeft) {
           if (isInit) {
             setTimeout(() => scrollHorizontal(scrollLeftProp, isAnimation), 10);
           } else {
@@ -261,6 +271,8 @@ function useScrollView(parameters) {
     }
   };
   const onScrollHandler = (e) => {
+    if (!container.current)
+      return;
     const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = container.current;
     Object.defineProperty(e, "detail", {
       enumerable: true,

package/dist/Skeleton/Skeleton.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { SkeletonProps } from './Skeleton.types';
 import './index.less';
 declare const Skeleton: React.ForwardRefExoticComponent<Omit<SkeletonProps<"div", {}>, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/Skeleton/Skeleton.js

@@ -57,10 +57,10 @@ __export(Skeleton_exports, {
 });
 module.exports = __toCommonJS(Skeleton_exports);
 var import_clsx = __toESM(require("clsx"));
-var import_react = __toESM(require("react"));
+var React = __toESM(require("react"));
 var import_index = require("./index.css");
 const prefixCls = "bui-skeleton";
-const Skeleton = /* @__PURE__ */ import_react.default.forwardRef(
+const Skeleton = /* @__PURE__ */ React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -79,7 +79,7 @@ const Skeleton = /* @__PURE__ */ import_react.default.forwardRef(
       "variant",
       "children"
     ]);
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ React.createElement(
       "span",
       __spreadValues({
         className: (0, import_clsx.default)(

package/dist/Skeleton/Skeleton.types.d.ts

@@ -1,5 +1,5 @@
 import { OverrideProps } from '@bifrostui/types';
-import React from 'react';
+import * as React from 'react';
 export type VariantEnum = 'text' | 'circular' | 'rectangular' | 'rounded';
 export type animationEnum = 'wave' | 'pulse' | false;
 export type SkeletonProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{

package/dist/Slide/Slide.d.ts

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

package/dist/Slide/Slide.js

@@ -60,7 +60,7 @@ __export(Slide_exports, {
 });
 module.exports = __toCommonJS(Slide_exports);
 var import_utils = require("@bifrostui/utils");
-var import_react = __toESM(require("react"));
+var React = __toESM(require("react"));
 var import_Transition = __toESM(require("../Transition"));
 const defaultEasing = {
   enter: import_utils.easing.easeOut,
@@ -70,7 +70,7 @@ const defaultTimeout = {
   enter: import_utils.duration.enteringScreen,
   exit: import_utils.duration.leavingScreen
 };
-const Slide = /* @__PURE__ */ import_react.default.forwardRef(
+const Slide = /* @__PURE__ */ React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       appear = true,
@@ -107,7 +107,7 @@ const Slide = /* @__PURE__ */ import_react.default.forwardRef(
     };
     if (!children)
       return null;
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ React.createElement(
       import_Transition.default,
       __spreadProps(__spreadValues({}, others), {
         appear,
@@ -127,7 +127,7 @@ const Slide = /* @__PURE__ */ import_react.default.forwardRef(
           )
         ) : "none";
         const transform = state === "entering" || state === "entered" ? "none" : getTranslateValue(direction);
-        return import_react.default.cloneElement(children, __spreadValues({
+        return React.cloneElement(children, __spreadValues({
           style: __spreadValues(__spreadValues({
             visibility: state === "exited" ? "hidden" : "visible",
             transition,

package/dist/Slide/Slide.miniapp.js

@@ -142,15 +142,18 @@ const Slide = /* @__PURE__ */ import_react.default.forwardRef(
     const transitions = (0, import_utils.createTransitions)();
     const animationName = getAnimationName(direction, inProp);
     const animationDurationAndDelay = getAnimationDurationAndDelay();
-    const animation = transitions.create(
-      animationName,
-      (0, import_utils.getTransitionProps)(
-        __spreadProps(__spreadValues({}, animationDurationAndDelay), {
-          style,
-          easing: easingProp
-        }),
-        { mode: inProp ? "enter" : "exit" }
-      )
+    const animation = (0, import_react.useMemo)(
+      () => transitions.create(
+        animationName,
+        (0, import_utils.getTransitionProps)(
+          __spreadProps(__spreadValues({}, animationDurationAndDelay), {
+            style,
+            easing: easingProp
+          }),
+          { mode: inProp ? "enter" : "exit" }
+        )
+      ),
+      [inProp]
     );
     (0, import_react.useEffect)(() => {
       if (inProp && !isMounted) {
@@ -171,7 +174,7 @@ const Slide = /* @__PURE__ */ import_react.default.forwardRef(
       } else {
         onExit == null ? void 0 : onExit(elementRef.current);
       }
-    }, [inProp, isMounted, shouldExecuteAnimation, onEnter, onExit]);
+    }, [inProp, isMounted]);
     const handleAnimationStart = () => {
       if (!shouldExecuteAnimation)
         return;

package/dist/Slider/Slider.types.d.ts

@@ -1,5 +1,5 @@
 import { OverrideProps } from '@bifrostui/types';
-import React from 'react';
+import * as React from 'react';
 export type SliderValue = number | [number, number];
 export type SliderProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
     props: P & {

package/dist/Steps/Step.types.d.ts

@@ -1,5 +1,5 @@
 import { OverrideProps } from '@bifrostui/types';
-import React from 'react';
+import * as React from 'react';
 import { OnChangeEvent } from './Steps.types';
 export type StatusProps = 'wait' | 'active' | 'finish' | 'error';
 export type StepProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{

package/dist/Steps/StepsContext.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { StepsContextProps } from './Steps.types';
 declare const StepsContext: React.Context<StepsContextProps>;
 export declare const StepsContextProvider: React.Provider<StepsContextProps>;

package/dist/Steps/StepsContext.js

@@ -31,8 +31,8 @@ __export(StepsContext_exports, {
   default: () => StepsContext_default
 });
 module.exports = __toCommonJS(StepsContext_exports);
-var import_react = __toESM(require("react"));
-const StepsContext = import_react.default.createContext(null);
+var React = __toESM(require("react"));
+const StepsContext = React.createContext(null);
 const StepsContextProvider = StepsContext.Provider;
 var StepsContext_default = StepsContext;
 // Annotate the CommonJS export names for ESM import in node: