@rainbow-oh/yee-c 0.14.3 → 0.14.4

package/dist/cjs/Splitter/demo/animation.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/cjs/Splitter/demo/animation.js

@@ -0,0 +1,43 @@
+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);
+
+// src/Splitter/demo/animation.tsx
+var animation_exports = {};
+__export(animation_exports, {
+  default: () => animation_default
+});
+module.exports = __toCommonJS(animation_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var animation_default = () => {
+  const [open, setOpen] = import_react.default.useState(false);
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 8 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", onClick: () => setOpen((v) => !v) }, open ? "Close Panel" : "Open Panel")), /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 300 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter, { animation: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter.Item, { min: "30%" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, backgroundColor: "#f0f0f0" } }, "Content Panel")), open ? (
+    // 条件渲染的面板：挂载时从 0 展开到目标尺寸，卸载时过渡收合到 0 后移除
+    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Splitter.Item, { size: "40%", min: "200px", max: "60%" }, /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 16, backgroundColor: "#e0e0e0" } }, "Assistant Panel"))
+  ) : null)));
+};

package/dist/cjs/Splitter/hooks/useMove.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export default function useMove(handler: React.RefObject<HTMLDivElement | null>, direction: 'horizontal' | 'vertical', onMove: (dis: number) => void): boolean[];
+export default function useMove(handler: React.RefObject<HTMLDivElement | null>, direction: 'horizontal' | 'vertical', onMove: (dis: number) => void, onMovingChange?: (moving: boolean) => void): boolean[];

package/dist/cjs/Splitter/hooks/useMove.js

@@ -34,7 +34,7 @@ __export(useMove_exports, {
 module.exports = __toCommonJS(useMove_exports);
 var React = __toESM(require("react"));
 var import_debounce = __toESM(require("../../utils/debounce"));
-function useMove(handler, direction, onMove) {
+function useMove(handler, direction, onMove, onMovingChange) {
   const [moving, setMoving] = React.useState(false);
   const moveTarget = (distance) => {
     onMove(distance);
@@ -48,6 +48,7 @@ function useMove(handler, direction, onMove) {
       let x = e.pageX;
       let y = e.pageY;
       setMoving(true);
+      onMovingChange == null ? void 0 : onMovingChange(true);
       const onMouseMove = (0, import_debounce.default)((e2) => {
         document.body.style.userSelect = "none";
         document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize";
@@ -63,6 +64,7 @@ function useMove(handler, direction, onMove) {
       }, 5);
       const onMouseUp = () => {
         setMoving(false);
+        onMovingChange == null ? void 0 : onMovingChange(false);
         window.removeEventListener("mousemove", onMouseMove);
         window.removeEventListener("mouseup", onMouseUp);
         ele.removeEventListener("mouseup", onMouseUp);

package/dist/cjs/Splitter/interface.d.ts

@@ -83,4 +83,10 @@ export interface SplitterProps extends DataAttributeProps {
      * panel size change event
      * */
     onResize?: (sizes: PanelRect[]) => void;
+    /**
+     * animate programmatic size changes and panel mount/unmount with a
+     * flex-basis transition; dragging always tracks the pointer in real time
+     * @default false
+     */
+    animation?: boolean;
 }

package/dist/cjs/Splitter/splitter-handler.d.ts

@@ -17,6 +17,8 @@ interface SplitterHandlerProps {
         start: HTMLDivElement;
         end: HTMLDivElement;
     }) => void;
+    /** 拖拽开始/结束回调（animation 模式下拖拽期间需关闭 flex-basis 过渡） */
+    onDraggingChange?: (dragging: boolean) => void;
 }
-declare const SplitterHandler: ({ layout, resizable, collapsible, index, records, setRecords, onClick, }: SplitterHandlerProps) => React.JSX.Element;
+declare const SplitterHandler: ({ layout, resizable, collapsible, index, records, setRecords, onClick, onDraggingChange, }: SplitterHandlerProps) => React.JSX.Element;
 export default SplitterHandler;

package/dist/cjs/Splitter/splitter-handler.js

@@ -61,7 +61,8 @@ var SplitterHandler = ({
   index,
   records,
   setRecords,
-  onClick
+  onClick,
+  onDraggingChange
 }) => {
   const { start, end } = collapsible ? typeof collapsible === "boolean" ? { start: true, end: true } : collapsible : {};
   const cref = (0, import_react.useRef)(null);
@@ -108,7 +109,7 @@ var SplitterHandler = ({
       return newState;
     });
   };
-  (0, import_useMove.default)(handler, layout, onMove);
+  (0, import_useMove.default)(handler, layout, onMove, onDraggingChange);
   const handleClick = (action) => {
     const eles = refs.current;
     const { el: start2 } = eles[`item${index}`];

package/dist/cjs/Splitter/splitter.js

@@ -162,7 +162,21 @@ var getPanelSize = (children, {
   return panelsRect;
 };
 var Wrapper = (_a) => {
-  var _b = _a, { children, itemsSize, onClick } = _b, props = __objRest(_b, ["children", "itemsSize", "onClick"]);
+  var _b = _a, {
+    children,
+    itemsSize,
+    itemTransition,
+    animation,
+    onDraggingChange,
+    onClick
+  } = _b, props = __objRest(_b, [
+    "children",
+    "itemsSize",
+    "itemTransition",
+    "animation",
+    "onDraggingChange",
+    "onClick"
+  ]);
   const wrappered = [];
   const refs = (0, import_react.useRef)({});
   const arr = import_react.default.Children.toArray(children);
@@ -181,7 +195,9 @@ var Wrapper = (_a) => {
           // @ts-ignore
           style: __spreadProps(__spreadValues({}, style), {
             // If there is a border or other size-related design, it may cause calculation issues
-            flexBasis: currentSize
+            flexBasis: currentSize,
+            // animation 模式下受控尺寸变更走 flex-basis 过渡；拖拽期间为 undefined 保证跟手
+            transition: itemTransition
           }),
           min,
           max,
@@ -217,13 +233,43 @@ var Wrapper = (_a) => {
             flexable,
             expandable: _expandable,
             onClick,
+            onDraggingChange,
             key: `handler-${n}`
           })
         )
       );
     }
   });
-  return /* @__PURE__ */ import_react.default.createElement(SplitterWrapperCtx.Provider, { value: { refs } }, wrappered);
+  const prevCountRef = import_react.default.useRef(arr.length);
+  const prevClonesRef = import_react.default.useRef([]);
+  const [exiting, setExiting] = import_react.default.useState([]);
+  import_react.default.useEffect(() => {
+    const prevCount = prevCountRef.current;
+    prevCountRef.current = arr.length;
+    if (!animation || arr.length >= prevCount) {
+      return;
+    }
+    const removed = prevClonesRef.current.slice(arr.length);
+    if (!removed.length) {
+      return;
+    }
+    setExiting(removed);
+    const raf = requestAnimationFrame(() => {
+      setExiting(
+        (list) => list.map((el) => import_react.default.cloneElement(el, { style: __spreadProps(__spreadValues({}, el.props.style), { flexBasis: 0 }) }))
+      );
+    });
+    const timer = window.setTimeout(() => setExiting([]), 320);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.clearTimeout(timer);
+      setExiting([]);
+    };
+  }, [arr.length, animation]);
+  import_react.default.useEffect(() => {
+    prevClonesRef.current = wrappered;
+  });
+  return /* @__PURE__ */ import_react.default.createElement(SplitterWrapperCtx.Provider, { value: { refs } }, wrappered, exiting);
 };
 var Splitter = import_react.default.forwardRef(
   (baseprops, ref) => {
@@ -235,18 +281,22 @@ var Splitter = import_react.default.forwardRef(
       layout = "horizontal",
       children,
       bordered,
-      onResize
+      onResize,
+      animation
     } = _a, rest = __objRest(_a, [
       "prefixCls",
       "className",
       "layout",
       "children",
       "bordered",
-      "onResize"
+      "onResize",
+      "animation"
     ]);
     const internalRef = (0, import_react.useRef)(null);
     const componentRef = ref || internalRef;
     const [records, setRecords] = (0, import_react.useState)([]);
+    const [dragging, setDragging] = import_react.default.useState(false);
+    const itemTransition = animation ? dragging ? void 0 : "flex-basis 0.28s cubic-bezier(0.22, 0.61, 0.36, 1)" : void 0;
     const handleClick = (index, action) => {
       const c = index - 1;
       const newRecords = [...records];
@@ -296,15 +346,28 @@ var Splitter = import_react.default.forwardRef(
         };
       }
     }, [layout]);
+    const prevPanelCountRef = import_react.default.useRef(-1);
     import_react.default.useEffect(() => {
       if (totalSize) {
         const panelsSize = getPanelSize(children, {
           totalSize,
           layout
         });
+        const prevCount = prevPanelCountRef.current;
+        prevPanelCountRef.current = panelsSize.length;
+        if (animation && prevCount >= 0 && panelsSize.length > prevCount) {
+          panelsSize.slice(prevCount).forEach((item) => {
+            item.currentSize = 0;
+          });
+          setRecords(panelsSize);
+          const raf = requestAnimationFrame(() => {
+            setRecords(getPanelSize(children, { totalSize, layout }));
+          });
+          return () => cancelAnimationFrame(raf);
+        }
         setRecords(panelsSize);
       }
-    }, [children, totalSize, layout]);
+    }, [children, totalSize, layout, animation]);
     return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({ className: cls }, rest), { ref: componentRef }), /* @__PURE__ */ import_react.default.createElement(SplitterCtx.Provider, { value: { prefixCls, onResize } }, /* @__PURE__ */ import_react.default.createElement(
       Wrapper,
       {
@@ -313,7 +376,10 @@ var Splitter = import_react.default.forwardRef(
         setRecords,
         totalSize,
         itemsSize: records,
-        onClick: handleClick
+        onClick: handleClick,
+        animation,
+        itemTransition,
+        onDraggingChange: setDragging
       },
       children
     )));

package/dist/cjs/style/themes.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-09-21T06:47:43.665Z
+ * Generated on 2026-09-23T09:41:24.738Z
  */
 
 /* ========== color.blue.css ========== */

package/dist/cjs/style/variables.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-09-21T06:47:43.665Z
+ * Generated on 2026-09-23T09:41:24.738Z
  */
 
 /* ========== color.css ========== */

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@ declare global {
         __yee_c_version__: string;
     }
 }
-export declare const version = "0.14.3";
+export declare const version = "0.14.4";

package/dist/cjs/version.js

@@ -22,7 +22,7 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-var version = "0.14.3";
+var version = "0.14.4";
 if (typeof window !== "undefined") {
   window.__yee_c_version__ = version;
 }

package/dist/esm/Splitter/demo/animation.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/esm/Splitter/demo/animation.js

@@ -0,0 +1,51 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Button, Splitter } from "../..";
+import React from 'react';
+export default (function () {
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    open = _React$useState2[0],
+    setOpen = _React$useState2[1];
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 8
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: function onClick() {
+      return setOpen(function (v) {
+        return !v;
+      });
+    }
+  }, open ? 'Close Panel' : 'Open Panel')), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: 300
+    }
+  }, /*#__PURE__*/React.createElement(Splitter, {
+    animation: true
+  }, /*#__PURE__*/React.createElement(Splitter.Item, {
+    min: "30%"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 16,
+      backgroundColor: '#f0f0f0'
+    }
+  }, "Content Panel")), open ?
+  /*#__PURE__*/
+  // 条件渲染的面板：挂载时从 0 展开到目标尺寸，卸载时过渡收合到 0 后移除
+  React.createElement(Splitter.Item, {
+    size: "40%",
+    min: "200px",
+    max: "60%"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 16,
+      backgroundColor: '#e0e0e0'
+    }
+  }, "Assistant Panel")) : null)));
+});

package/dist/esm/Splitter/hooks/useMove.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export default function useMove(handler: React.RefObject<HTMLDivElement | null>, direction: 'horizontal' | 'vertical', onMove: (dis: number) => void): boolean[];
+export default function useMove(handler: React.RefObject<HTMLDivElement | null>, direction: 'horizontal' | 'vertical', onMove: (dis: number) => void, onMovingChange?: (moving: boolean) => void): boolean[];

package/dist/esm/Splitter/hooks/useMove.js

@@ -6,7 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import * as React from 'react';
 import debounce from "../../utils/debounce";
-export default function useMove(handler, direction, onMove) {
+export default function useMove(handler, direction, onMove, onMovingChange) {
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     moving = _React$useState2[0],
@@ -22,6 +22,7 @@ export default function useMove(handler, direction, onMove) {
       var x = e.pageX;
       var y = e.pageY;
       setMoving(true);
+      onMovingChange === null || onMovingChange === void 0 || onMovingChange(true);
       var onMouseMove = debounce(function (e) {
         document.body.style.userSelect = 'none';
         document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
@@ -37,6 +38,7 @@ export default function useMove(handler, direction, onMove) {
       }, 5);
       var onMouseUp = function onMouseUp() {
         setMoving(false);
+        onMovingChange === null || onMovingChange === void 0 || onMovingChange(false);
         window.removeEventListener('mousemove', onMouseMove);
         window.removeEventListener('mouseup', onMouseUp);
         ele.removeEventListener('mouseup', onMouseUp);

package/dist/esm/Splitter/interface.d.ts

@@ -83,4 +83,10 @@ export interface SplitterProps extends DataAttributeProps {
      * panel size change event
      * */
     onResize?: (sizes: PanelRect[]) => void;
+    /**
+     * animate programmatic size changes and panel mount/unmount with a
+     * flex-basis transition; dragging always tracks the pointer in real time
+     * @default false
+     */
+    animation?: boolean;
 }

package/dist/esm/Splitter/splitter-handler.d.ts

@@ -17,6 +17,8 @@ interface SplitterHandlerProps {
         start: HTMLDivElement;
         end: HTMLDivElement;
     }) => void;
+    /** 拖拽开始/结束回调（animation 模式下拖拽期间需关闭 flex-basis 过渡） */
+    onDraggingChange?: (dragging: boolean) => void;
 }
-declare const SplitterHandler: ({ layout, resizable, collapsible, index, records, setRecords, onClick, }: SplitterHandlerProps) => React.JSX.Element;
+declare const SplitterHandler: ({ layout, resizable, collapsible, index, records, setRecords, onClick, onDraggingChange, }: SplitterHandlerProps) => React.JSX.Element;
 export default SplitterHandler;

package/dist/esm/Splitter/splitter-handler.js

@@ -23,7 +23,8 @@ var SplitterHandler = function SplitterHandler(_ref) {
     index = _ref.index,
     records = _ref.records,
     setRecords = _ref.setRecords,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    onDraggingChange = _ref.onDraggingChange;
   // eslint-disable-line @typescript-eslint/no-unused-vars
   var _ref2 = collapsible ? typeof collapsible === 'boolean' ? {
       start: true,
@@ -85,7 +86,7 @@ var SplitterHandler = function SplitterHandler(_ref) {
       return newState;
     });
   };
-  useMove(handler, layout, onMove);
+  useMove(handler, layout, onMove, onDraggingChange);
   var handleClick = function handleClick(action) {
     var eles = refs.current;
     var start = eles["item".concat(index)].el;

package/dist/esm/Splitter/splitter.js

@@ -1,6 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["children", "itemsSize", "onClick"],
-  _excluded2 = ["prefixCls", "className", "layout", "children", "bordered", "onResize"];
+var _excluded = ["children", "itemsSize", "itemTransition", "animation", "onDraggingChange", "onClick"],
+  _excluded2 = ["prefixCls", "className", "layout", "children", "bordered", "onResize", "animation"];
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -128,6 +128,9 @@ var getPanelSize = function getPanelSize(children, _ref) {
 var Wrapper = function Wrapper(_ref3) {
   var children = _ref3.children,
     itemsSize = _ref3.itemsSize,
+    itemTransition = _ref3.itemTransition,
+    animation = _ref3.animation,
+    onDraggingChange = _ref3.onDraggingChange,
     onClick = _ref3.onClick,
     props = _objectWithoutProperties(_ref3, _excluded);
   var wrappered = [];
@@ -152,7 +155,9 @@ var Wrapper = function Wrapper(_ref3) {
         // @ts-ignore
         style: _objectSpread(_objectSpread({}, style), {}, {
           // If there is a border or other size-related design, it may cause calculation issues
-          flexBasis: currentSize
+          flexBasis: currentSize,
+          // animation 模式下受控尺寸变更走 flex-basis 过渡；拖拽期间为 undefined 保证跟手
+          transition: itemTransition
         }),
         min: min,
         max: max,
@@ -193,15 +198,64 @@ var Wrapper = function Wrapper(_ref3) {
         flexable: flexable,
         expandable: _expandable,
         onClick: onClick,
+        onDraggingChange: onDraggingChange,
         key: "handler-".concat(n)
       })));
     }
   });
+
+  // ── 出场动画：children 数量减少（条件渲染的面板卸载）时，保留上一次渲染的
+  // 尾部面板克隆，flex-basis 过渡到 0 后再真正移除，避免右栏瞬间消失导致跳变。
+  var prevCountRef = React.useRef(arr.length);
+  var prevClonesRef = React.useRef([]);
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    exiting = _React$useState2[0],
+    setExiting = _React$useState2[1];
+  React.useEffect(function () {
+    var prevCount = prevCountRef.current;
+    prevCountRef.current = arr.length;
+    if (!animation || arr.length >= prevCount) {
+      return;
+    }
+    // 上一帧克隆里已带原 flex-basis（本帧 records 已不含被移除面板）
+    var removed = prevClonesRef.current.slice(arr.length);
+    if (!removed.length) {
+      return;
+    }
+    setExiting(removed);
+    // 第二阶段：下一帧 flex-basis 归 0，触发过渡
+    var raf = requestAnimationFrame(function () {
+      setExiting(function (list) {
+        return list.map(function (el) {
+          return /*#__PURE__*/React.cloneElement(el, {
+            style: _objectSpread(_objectSpread({}, el.props.style), {}, {
+              flexBasis: 0
+            })
+          });
+        });
+      });
+    });
+    var timer = window.setTimeout(function () {
+      return setExiting([]);
+    }, 320);
+    return function () {
+      // 过渡期间面板重新打开：立即丢弃残留克隆
+      cancelAnimationFrame(raf);
+      window.clearTimeout(timer);
+      setExiting([]);
+    };
+  }, [arr.length, animation]);
+
+  // 记录本帧克隆，供下一次渲染的移除检测读取（声明在其后：上方 effect 读到的是旧值）
+  React.useEffect(function () {
+    prevClonesRef.current = wrappered;
+  });
   return /*#__PURE__*/React.createElement(SplitterWrapperCtx.Provider, {
     value: {
       refs: refs
     }
-  }, wrappered);
+  }, wrappered, exiting);
 };
 var Splitter = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
   var _useContext = useContext(GlobalContext),
@@ -215,6 +269,7 @@ var Splitter = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     children = props.children,
     bordered = props.bordered,
     onResize = props.onResize,
+    animation = props.animation,
     rest = _objectWithoutProperties(props, _excluded2);
   var internalRef = useRef(null);
   var componentRef = ref || internalRef;
@@ -222,6 +277,14 @@ var Splitter = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     records = _useState2[0],
     setRecords = _useState2[1];
+
+  // animation 模式：拖拽期间关掉面板的 flex-basis 过渡（onMove 直接写 DOM，过渡会导致跟不
+  // 上鼠标）；其余程序性尺寸变更（受控 size、collapsible 收展、面板增减）都走过渡。
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    dragging = _React$useState4[0],
+    setDragging = _React$useState4[1];
+  var itemTransition = animation ? dragging ? undefined : 'flex-basis 0.28s cubic-bezier(0.22, 0.61, 0.36, 1)' : undefined;
   var handleClick = function handleClick(index, action) {
     var c = index - 1;
     var newRecords = _toConsumableArray(records);
@@ -239,10 +302,10 @@ var Splitter = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     setRecords(newRecords);
   };
   var cls = clsx(prefixCls, ["".concat(prefixCls, "-").concat(layout)], _defineProperty({}, "".concat(prefixCls, "-bordered"), bordered), className);
-  var _React$useState = React.useState(0),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    totalSize = _React$useState2[0],
-    setTotalSize = _React$useState2[1];
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    totalSize = _React$useState6[0],
+    setTotalSize = _React$useState6[1];
   var updateTotalSize = function updateTotalSize(ele) {
     if (layout === 'horizontal') {
       setTotalSize(ele.offsetWidth);
@@ -267,15 +330,35 @@ var Splitter = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
       };
     }
   }, [layout]);
+  var prevPanelCountRef = React.useRef(-1);
   React.useEffect(function () {
     if (totalSize) {
       var panelsSize = getPanelSize(children, {
         totalSize: totalSize,
         layout: layout
       });
+      // animation 模式下面板新增（条件渲染的面板挂载）时先以 0 尺寸入库，下一帧再落到
+      // 目标尺寸，配合 flex-basis 过渡播放入场动画；否则新面板瞬间撑开、旧面板瞬间收窄。
+      var prevCount = prevPanelCountRef.current;
+      prevPanelCountRef.current = panelsSize.length;
+      if (animation && prevCount >= 0 && panelsSize.length > prevCount) {
+        panelsSize.slice(prevCount).forEach(function (item) {
+          item.currentSize = 0;
+        });
+        setRecords(panelsSize);
+        var raf = requestAnimationFrame(function () {
+          setRecords(getPanelSize(children, {
+            totalSize: totalSize,
+            layout: layout
+          }));
+        });
+        return function () {
+          return cancelAnimationFrame(raf);
+        };
+      }
       setRecords(panelsSize);
     }
-  }, [children, totalSize, layout]);
+  }, [children, totalSize, layout, animation]);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cls
   }, rest, {
@@ -291,7 +374,10 @@ var Splitter = /*#__PURE__*/React.forwardRef(function (baseprops, ref) {
     setRecords: setRecords,
     totalSize: totalSize,
     itemsSize: records,
-    onClick: handleClick
+    onClick: handleClick,
+    animation: animation,
+    itemTransition: itemTransition,
+    onDraggingChange: setDragging
   }, children)));
 });
 Splitter.displayName = 'Splitter';

package/dist/esm/style/themes.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-09-21T06:47:43.665Z
+ * Generated on 2026-09-23T09:41:24.738Z
  */
 
 /* ========== color.blue.css ========== */

package/dist/esm/style/variables.css

@@ -1,7 +1,7 @@
 /*!
  * @rainbow-oh/yee-c CSS Variables
  * Auto-generated, do not edit manually
- * Generated on 2026-09-21T06:47:43.665Z
+ * Generated on 2026-09-23T09:41:24.738Z
  */
 
 /* ========== color.css ========== */

package/dist/esm/version.d.ts

@@ -3,4 +3,4 @@ declare global {
         __yee_c_version__: string;
     }
 }
-export declare const version = "0.14.3";
+export declare const version = "0.14.4";

package/dist/esm/version.js

@@ -1,4 +1,4 @@
-export var version = "0.14.3";
+export var version = "0.14.4";
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;
 }