@rainbow-oh/yee-c 0.14.2 → 0.14.4

package/dist/cjs/Form/index.d.ts

@@ -16,5 +16,5 @@ type FormInterface = typeof InternalForm & {
     List: typeof List;
 };
 declare const Form: FormInterface;
-export type { FieldGroupProps, FieldStatus, FieldStatusData, FormInstance, FormListProps, FormProps, ValidateMessage, } from './interface';
+export type { FieldGroupProps, FieldStatus, FieldStatusData, FormInstance, FormListProps, FormProps, Rule as FormRule, ValidateMessage, } from './interface';
 export default Form;

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

@@ -80,10 +80,11 @@ var getPanelSize = (children, {
   layout
 }) => {
   const panelsRect = [];
-  const count = import_react.default.Children.count(children);
+  const items = import_react.default.Children.toArray(children);
+  const count = items.length;
   let remainingSize = totalSize;
   let remainingItem = count;
-  import_react.default.Children.forEach(children, (child) => {
+  items.forEach((child) => {
     if (import_react.default.isValidElement(child)) {
       const { style, size, defaultSize, min, max } = child.props || {};
       const styleSize = style ? layout === "horizontal" ? style.width : style.height : void 0;
@@ -140,6 +141,7 @@ var getPanelSize = (children, {
   });
   panelsRect.forEach((item) => {
     if (item.type === "default") {
+      item.currentSize = item.size;
       remainingSize -= item.size || 0;
       remainingItem--;
     } else if (item.type === "percent") {
@@ -152,7 +154,7 @@ var getPanelSize = (children, {
   if (remainingItem > 0) {
     panelsRect.forEach((item) => {
       if (item.type === "auto") {
-        item.size = remainingSize / remainingItem;
+        item.size = Math.max(0, remainingSize / remainingItem);
         item.currentSize = item.size;
       }
     });
@@ -160,11 +162,25 @@ 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);
-  import_react.default.Children.forEach(children, (child, index) => {
+  arr.forEach((child, index) => {
     if (import_react.default.isValidElement(child)) {
       const n = index + 1;
       const { style } = child.props || {};
@@ -179,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,
@@ -215,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) => {
@@ -233,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];
@@ -294,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,
       {
@@ -311,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-20T02:38:16.830Z
+ * 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-20T02:38:16.830Z
+ * 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.2";
+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.2";
+var version = "0.14.4";
 if (typeof window !== "undefined") {
   window.__yee_c_version__ = version;
 }

package/dist/esm/Form/index.d.ts

@@ -16,5 +16,5 @@ type FormInterface = typeof InternalForm & {
     List: typeof List;
 };
 declare const Form: FormInterface;
-export type { FieldGroupProps, FieldStatus, FieldStatusData, FormInstance, FormListProps, FormProps, ValidateMessage, } from './interface';
+export type { FieldGroupProps, FieldStatus, FieldStatusData, FormInstance, FormListProps, FormProps, Rule as FormRule, ValidateMessage, } from './interface';
 export default Form;

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;