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

package/es/Select/Select.js

@@ -29,13 +29,32 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import { CaretDownIcon, CaretUpIcon } from "@bifrostui/icons";
 import {
   getStylesAndLocation,
   isMini,
   throttle,
   useForkRef,
-  useUniqueId,
   useValue
 } from "@bifrostui/utils";
 import clsx from "clsx";
@@ -100,38 +119,36 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const isOpen = open !== void 0 ? open : internalOpen;
   const locatorRef = useRef(null);
   const rootRef = useForkRef(ref, locatorRef);
-  const ttId = useUniqueId();
-  const dataId = `${prefixCls}-tt-${ttId}`;
-  const updateOptionStyle = throttle(() => {
+  const optionContainerRef = useRef(null);
+  const optionMainRef = useRef(null);
+  const updateOptionStyle = () => __async(void 0, null, function* () {
     const curScrollRoot = scrollContainer();
-    if (!isMini && curScrollRoot) {
-      const result = getStylesAndLocation({
-        scrollRoot: curScrollRoot,
-        childrenRef: locatorRef,
-        arrowDirection: defaultPlacement,
-        arrowLocation: "none",
-        selector: `[data-id="${dataId}"]`,
-        offsetSpacing: 0
-      });
-      if (!result)
-        return;
-      const { styles, childrenStyle, newArrowDirection } = result;
-      setPlacement(newArrowDirection);
-      setOptionStyle(__spreadProps(__spreadValues({}, styles), { width: childrenStyle.width }));
-    }
-  }, 100);
-  const changeOpen = (newOpen) => {
+    const result = yield getStylesAndLocation({
+      scrollRoot: curScrollRoot,
+      childrenRef: locatorRef,
+      tipRef: optionContainerRef,
+      arrowDirection: defaultPlacement,
+      arrowLocation: "none",
+      offsetSpacing: 0
+    });
+    if (!result)
+      return;
+    const { styles, childrenStyle, newArrowDirection } = result;
+    optionMainRef.current.style.transition = "none";
+    optionMainRef.current.style.transform = `translateY(${newArrowDirection === "bottom" ? "-100%" : "100%"})`;
+    setPlacement(newArrowDirection);
+    setOptionStyle(__spreadProps(__spreadValues({}, styles), { width: childrenStyle == null ? void 0 : childrenStyle.width }));
+  });
+  const changeOpen = (newOpen) => __async(void 0, null, function* () {
     if (newOpen) {
-      updateOptionStyle();
-      setTimeout(() => {
-        setInternalOpen(newOpen);
-        onOpen == null ? void 0 : onOpen();
-      }, 100);
+      yield updateOptionStyle();
+      setInternalOpen(newOpen);
+      onOpen == null ? void 0 : onOpen();
     } else {
       onClose == null ? void 0 : onClose();
       setInternalOpen(newOpen);
     }
-  };
+  });
   const handleSelectClick = (e) => {
     if (disabled)
       return;
@@ -156,10 +173,11 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
     [selectValue, onChange, setRenderValue]
   );
   useEffect(() => {
+    const resizeCb = throttle(updateOptionStyle, 100);
     if (!isMini) {
-      window.addEventListener("resize", updateOptionStyle);
+      window.addEventListener("resize", resizeCb);
       return () => {
-        window.removeEventListener("resize", updateOptionStyle);
+        window.removeEventListener("resize", resizeCb);
       };
     }
   }, []);
@@ -171,8 +189,8 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
       {
         in: isOpen,
         timeout: {
-          enter: 150,
-          exit: 150
+          enter: 167,
+          exit: 167
         }
       },
       /* @__PURE__ */ React.createElement(
@@ -186,7 +204,7 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
               [`${prefixCls}-option-container-hide`]: !isOpen
             }
           ),
-          "data-id": dataId,
+          ref: optionContainerRef,
           style: optionStyle
         },
         /* @__PURE__ */ React.createElement(
@@ -195,11 +213,20 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
             in: isOpen,
             direction: placement === "bottom" ? "down" : "up",
             timeout: {
-              enter: 150,
-              exit: 150
+              enter: 167,
+              exit: 167
             }
           },
-          /* @__PURE__ */ React.createElement("div", { className: clsx(`${prefixCls}-option-main`) }, children)
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: clsx(`${prefixCls}-option-main`),
+              ref: optionMainRef,
+              role: "listbox",
+              "aria-label": "option list"
+            },
+            children
+          )
         )
       )
     );
@@ -211,7 +238,12 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
         [`${prefixCls}-disabled`]: disabled,
         [`${prefixCls}-active`]: isOpen
       }),
-      ref: rootRef
+      ref: rootRef,
+      role: "combobox",
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      "aria-label": others["aria-label"] || "Select",
+      tabIndex: disabled ? -1 : 0
     }, others), {
       onClick: handleSelectClick
     }),
@@ -221,15 +253,16 @@ const Select = /* @__PURE__ */ React.forwardRef((props, ref) => {
         name,
         readOnly: true,
         ref: inputRef,
-        value: selectValue
+        value: selectValue,
+        "aria-hidden": "true",
+        tabIndex: -1
       }, inputProps), {
         className: clsx(`${prefixCls}-input`, {
           [inputProps == null ? void 0 : inputProps.className]: inputProps == null ? void 0 : inputProps.className
         })
       })
-    ), icon || defaultIcon),
-    isMini && renderOptions()
-  ), !isMini && /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ React.createElement(
+    ), icon || defaultIcon)
+  ), /* @__PURE__ */ React.createElement(Portal, { onMounted: updateOptionStyle }, renderOptions()), /* @__PURE__ */ React.createElement(
     Backdrop,
     __spreadProps(__spreadValues({
       open: isOpen,

package/es/Select/Select.types.d.ts

@@ -1,5 +1,5 @@
 import { OverrideProps } from '@bifrostui/types';
-import React, { Ref, SyntheticEvent } from 'react';
+import React, { ReactNode, Ref, SyntheticEvent } from 'react';
 import { BackdropProps } from '../Backdrop';
 export type BuiSelectValue = string | number;
 export interface BuiSelectContextProps {
@@ -10,7 +10,7 @@ export interface BuiSelectContextProps {
     /**
      * 设置根选择器展示内容
      */
-    setRenderValue?: React.Dispatch<React.SetStateAction<string>>;
+    setRenderValue?: React.Dispatch<React.SetStateAction<ReactNode>>;
     /**
      * 选项点击的回调
      */

package/es/Select/SelectOption.js

@@ -53,7 +53,11 @@ const SelectOption = /* @__PURE__ */ React.forwardRef(
           [`${prefixCls}-active`]: !disabled && value === selectValue,
           [`${prefixCls}-disabled`]: disabled
         }),
-        ref
+        ref,
+        role: "option",
+        "aria-selected": !disabled && value === selectValue,
+        "aria-disabled": disabled,
+        tabIndex: disabled ? -1 : 0
       }, others), {
         onClick: (e) => {
           if (!disabled)

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

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

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

@@ -0,0 +1,118 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import React, { useState } from "react";
+import Select from "../../Select";
+import SelectOption from "../../SelectOption";
+const basicSelectDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Select, { placeholder: "\u8BF7\u9009\u62E9\u9009\u9879", "aria-label": "\u57FA\u7840\u9009\u62E9\u5668" }, /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09")));
+};
+const ControlledSelectDemo = () => {
+  const [value, setValue] = useState("option1");
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      value,
+      placeholder: "\u53D7\u63A7\u9009\u62E9\u5668",
+      "aria-label": "\u53D7\u63A7\u9009\u62E9\u5668",
+      onChange: (e, { value: newValue }) => {
+        setValue(newValue);
+        console.log("\u9009\u4E2D\u503C:", newValue);
+      }
+    },
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"),
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C"),
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09")
+  ), /* @__PURE__ */ React.createElement("p", null, "\u5F53\u524D\u9009\u4E2D\u503C: ", value));
+};
+const disabledSelectDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Select, { disabled: true, placeholder: "\u7981\u7528\u7684\u9009\u62E9\u5668", "aria-label": "\u7981\u7528\u9009\u62E9\u5668" }, /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C")));
+};
+const selectWithDisabledOptionsDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Select, { placeholder: "\u5305\u542B\u7981\u7528\u9009\u9879", "aria-label": "\u5305\u542B\u7981\u7528\u9009\u9879\u7684\u9009\u62E9\u5668" }, /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C", disabled: true }, "\u9009\u9879\u4E8C\uFF08\u7981\u7528\uFF09"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09"), /* @__PURE__ */ React.createElement(SelectOption, { value: "option4", label: "\u9009\u9879\u56DB", disabled: true }, "\u9009\u9879\u56DB\uFF08\u7981\u7528\uFF09")));
+};
+const defaultValueSelectDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Select,
+    {
+      defaultValue: "option2",
+      placeholder: "\u6709\u9ED8\u8BA4\u503C\u7684\u9009\u62E9\u5668",
+      "aria-label": "\u6709\u9ED8\u8BA4\u503C\u7684\u9009\u62E9\u5668"
+    },
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option1", label: "\u9009\u9879\u4E00" }, "\u9009\u9879\u4E00"),
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option2", label: "\u9009\u9879\u4E8C" }, "\u9009\u9879\u4E8C"),
+    /* @__PURE__ */ React.createElement(SelectOption, { value: "option3", label: "\u9009\u9879\u4E09" }, "\u9009\u9879\u4E09")
+  ));
+};
+const complexInteractionSelectDemo = () => {
+  const ComplexInteractionSelectDemo = () => {
+    const [value, setValue] = useState("");
+    const [options, setOptions] = useState([
+      { value: "option1", label: "\u9009\u9879\u4E00", disabled: false },
+      { value: "option2", label: "\u9009\u9879\u4E8C", disabled: false },
+      { value: "option3", label: "\u9009\u9879\u4E09", disabled: false }
+    ]);
+    const toggleOptionDisabled = (targetValue) => {
+      setOptions(
+        (prevOptions) => prevOptions.map(
+          (option) => option.value === targetValue ? __spreadProps(__spreadValues({}, option), { disabled: !option.disabled }) : option
+        )
+      );
+    };
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        value,
+        placeholder: "\u590D\u6742\u4EA4\u4E92\u9009\u62E9\u5668",
+        "aria-label": "\u590D\u6742\u4EA4\u4E92\u9009\u62E9\u5668",
+        onChange: (e, { value: newValue }) => {
+          setValue(newValue);
+        }
+      },
+      options.map((option) => /* @__PURE__ */ React.createElement(
+        SelectOption,
+        {
+          key: option.value,
+          value: option.value,
+          label: option.label,
+          disabled: option.disabled
+        },
+        option.label
+      ))
+    ), /* @__PURE__ */ React.createElement("div", { style: { marginTop: 10 } }, /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => toggleOptionDisabled("option2") }, "\u5207\u6362\u9009\u9879\u4E8C\u72B6\u6001")), value && /* @__PURE__ */ React.createElement("p", null, "\u5F53\u524D\u9009\u4E2D: ", value));
+  };
+  return /* @__PURE__ */ React.createElement(ComplexInteractionSelectDemo, null);
+};
+var A11yDemos_default = {
+  basicSelectDemo,
+  ControlledSelectDemo,
+  disabledSelectDemo,
+  selectWithDisabledOptionsDemo,
+  defaultValueSelectDemo,
+  complexInteractionSelectDemo
+};
+export {
+  ControlledSelectDemo,
+  basicSelectDemo,
+  complexInteractionSelectDemo,
+  A11yDemos_default as default,
+  defaultValueSelectDemo,
+  disabledSelectDemo,
+  selectWithDisabledOptionsDemo
+};

package/es/Select/index.css

@@ -8,9 +8,10 @@ xhs-page {
   --bui-select-option-main-padding: 3px 0;
   --bui-select-option-padding: 0 14px;
   --bui-select-option-border-radius: 5px;
-  --bui-select-option-margin: 0 3px;
+  --bui-select-option-margin: 2px 3px;
   --bui-select-option-height: 32px;
   --bui-select-option-active-bg-color: #fff2f0;
+  --bui-select-option-hover-bg-color: rgba(255, 242, 240, 0.4);
 }
 .bui-select {
   position: relative;
@@ -58,13 +59,9 @@ xhs-page {
 .bui-select-option-container {
   position: absolute;
   box-sizing: border-box;
-  top: 100%;
-  left: 0;
-  width: 100%;
   font-size: var(--bui-select-font-size, var(--bui-title-size-3));
   z-index: var(--bui-z-index-tooltip);
   border-radius: 3px;
-  background-color: var(--bui-color-bg-view);
   padding: 2px;
   overflow: hidden;
 }
@@ -81,18 +78,22 @@ xhs-page {
   border-radius: 3px;
   padding: var(--bui-select-option-main-padding);
   box-shadow: 0 0 0 2px var(--bui-color-bg-default);
+  background-color: var(--bui-color-bg-view);
   overflow: hidden;
 }
 .bui-select-option {
-  display: flex;
-  align-items: center;
   height: var(--bui-select-option-height);
+  line-height: var(--bui-select-option-height);
   padding: var(--bui-select-option-padding);
   border-radius: var(--bui-select-option-border-radius);
   margin: var(--bui-select-option-margin);
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .bui-select-option:hover {
-  background-color: var(--bui-select-option-active-bg-color);
+  background-color: var(--bui-select-option-hover-bg-color);
   color: var(--bui-color-primary);
 }
 .bui-select-option-active {
@@ -100,6 +101,9 @@ xhs-page {
   color: var(--bui-color-primary);
   background-color: var(--bui-select-option-active-bg-color);
 }
+.bui-select-option-active:hover {
+  background-color: var(--bui-select-option-active-bg-color);
+}
 .bui-select-option-hide {
   opacity: 0;
   transform: translateY(-5px);

package/es/Select/selectContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BuiSelectContextProps } from './Select.types';
 declare const BuiSelectContext: import("react").Context<BuiSelectContextProps>;
 export default BuiSelectContext;

package/es/Slide/Slide.js

@@ -93,7 +93,7 @@ const Slide = /* @__PURE__ */ React.forwardRef(
         ref: nodeRef
       }),
       (state, childProps) => {
-        const transition = transitions.create(
+        const transition = state === "entering" || state === "exiting" ? transitions.create(
           "transform",
           getTransitionProps(
             { timeout, style, easing: easingProp, delay },
@@ -101,7 +101,7 @@ const Slide = /* @__PURE__ */ React.forwardRef(
               mode: state
             }
           )
-        );
+        ) : "none";
         const transform = state === "entering" || state === "entered" ? "none" : getTranslateValue(direction);
         return React.cloneElement(children, __spreadValues({
           style: __spreadValues(__spreadValues({

package/es/Slide/Slide.miniapp.d.ts

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

package/es/Slide/Slide.miniapp.js

@@ -0,0 +1,192 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import React, { useEffect, useState, useRef, useMemo } from "react";
+import {
+  createTransitions,
+  duration,
+  easing,
+  getTransitionProps,
+  useForkRef
+} from "@bifrostui/utils";
+import "./index.css";
+const defaultEasing = {
+  enter: easing.easeOut,
+  exit: easing.sharp
+};
+const defaultTimeout = {
+  enter: duration.enteringScreen,
+  exit: duration.leavingScreen
+};
+const getAnimationName = (direction, inProp) => {
+  const animations = {
+    left: inProp ? "bui-slide-left-in" : "bui-slide-left-out",
+    right: inProp ? "bui-slide-right-in" : "bui-slide-right-out",
+    up: inProp ? "bui-slide-up-in" : "bui-slide-up-out",
+    down: inProp ? "bui-slide-down-in" : "bui-slide-down-out"
+  };
+  return animations[direction] || animations.down;
+};
+const Slide = /* @__PURE__ */ React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      children: children,
+      in: inProp,
+      style,
+      direction = "down",
+      appear: appear = true,
+      enter = true,
+      exit = true,
+      delay = 0,
+      easing: easingProp = defaultEasing,
+      timeout = defaultTimeout,
+      mountOnEnter: mountOnEnter,
+      unmountOnExit,
+      onEnter: onEnter,
+      onEntering,
+      onEntered,
+      onExit,
+      onExiting,
+      onExited
+    } = _b, others = __objRest(_b, [
+      // Base props
+      "children",
+      "in",
+      "style",
+      "direction",
+      // Animation controls
+      "appear",
+      "enter",
+      "exit",
+      "delay",
+      "easing",
+      "timeout",
+      // Lifecycle hooks
+      "mountOnEnter",
+      "unmountOnExit",
+      // Animation callbacks
+      "onEnter",
+      "onEntering",
+      "onEntered",
+      "onExit",
+      "onExiting",
+      "onExited"
+    ]);
+    var _a2;
+    const isFirstMount = useRef(inProp || !mountOnEnter);
+    const [isMounted, setIsMounted] = useState(inProp || !mountOnEnter);
+    const elementRef = useRef(null);
+    const handleRef = useForkRef(ref, children == null ? void 0 : children.ref, elementRef);
+    const shouldAnimateOnFirstMount = inProp && appear;
+    const shouldAnimate = inProp && enter || !inProp && exit;
+    const shouldExecuteAnimation = isFirstMount.current ? shouldAnimateOnFirstMount : shouldAnimate;
+    const getAnimationDurationAndDelay = () => {
+      if (!shouldExecuteAnimation) {
+        return { timeout: 0, delay: 0 };
+      }
+      return { timeout, delay };
+    };
+    const shouldSkipFirstAnimation = isFirstMount.current && !shouldAnimateOnFirstMount;
+    const transitions = createTransitions();
+    const animationName = getAnimationName(direction, inProp);
+    const animationDurationAndDelay = getAnimationDurationAndDelay();
+    const animation = useMemo(
+      () => transitions.create(
+        animationName,
+        getTransitionProps(
+          __spreadProps(__spreadValues({}, animationDurationAndDelay), {
+            style,
+            easing: easingProp
+          }),
+          { mode: inProp ? "enter" : "exit" }
+        )
+      ),
+      [inProp]
+    );
+    useEffect(() => {
+      if (inProp && !isMounted) {
+        setIsMounted(true);
+      }
+    }, [inProp, isMounted]);
+    useEffect(() => {
+      if (isMounted && isFirstMount.current) {
+        isFirstMount.current = false;
+      }
+    }, [isMounted]);
+    useEffect(() => {
+      const shouldTriggerCallback = isMounted && shouldExecuteAnimation;
+      if (!shouldTriggerCallback)
+        return;
+      if (inProp) {
+        onEnter == null ? void 0 : onEnter(elementRef.current);
+      } else {
+        onExit == null ? void 0 : onExit(elementRef.current);
+      }
+    }, [inProp, isMounted]);
+    const handleAnimationStart = () => {
+      if (!shouldExecuteAnimation)
+        return;
+      if (inProp) {
+        onEntering == null ? void 0 : onEntering(elementRef.current);
+      } else {
+        onExiting == null ? void 0 : onExiting(elementRef.current);
+      }
+    };
+    const handleAnimationEnd = () => {
+      if (shouldSkipFirstAnimation)
+        return;
+      if (inProp) {
+        onEntered == null ? void 0 : onEntered(elementRef.current);
+      } else {
+        onExited == null ? void 0 : onExited(elementRef.current);
+        if (unmountOnExit) {
+          setIsMounted(false);
+        }
+      }
+    };
+    if (!children || !isMounted)
+      return null;
+    return React.cloneElement(children, __spreadProps(__spreadValues({}, others), {
+      ref: handleRef,
+      onAnimationEnd: handleAnimationEnd,
+      onAnimationStart: handleAnimationStart,
+      style: __spreadValues(__spreadValues({
+        animation,
+        animationFillMode: "both"
+      }, style), (_a2 = children.props) == null ? void 0 : _a2.style)
+    }));
+  }
+);
+Slide.displayName = "BuiSlide";
+var Slide_miniapp_default = Slide;
+export {
+  Slide_miniapp_default as default
+};