@tiny-design/react 1.1.1 → 1.2.0

package/es/form/use-form.js

@@ -1,7 +1,10 @@
 import FormInstance from "./form-instance.js";
+import { useRef } from "react";
 //#region src/form/use-form.ts
 function useForm(initialValues = {}) {
-	return [new FormInstance(initialValues)];
+	const ref = useRef(null);
+	if (!ref.current) ref.current = new FormInstance(initialValues);
+	return [ref.current];
 }
 //#endregion
 export { useForm as default };

package/es/form/use-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-form.js","names":[],"sources":["../../src/form/use-form.ts"],"sourcesContent":["import FormInstance, { FormValues } from './form-instance';\n\nexport default function useForm(initialValues: FormValues = {}): [FormInstance] {\n  return [new FormInstance(initialValues)];\n}\n"],"mappings":";;AAEA,SAAwB,QAAQ,gBAA4B,EAAE,EAAkB;AAC9E,QAAO,CAAC,IAAI,aAAa,cAAc,CAAC"}
+{"version":3,"file":"use-form.js","names":[],"sources":["../../src/form/use-form.ts"],"sourcesContent":["import { useRef } from 'react';\nimport FormInstance, { FormValues } from './form-instance';\n\nexport default function useForm(initialValues: FormValues = {}): [FormInstance] {\n  const ref = useRef<FormInstance | null>(null);\n  if (!ref.current) {\n    ref.current = new FormInstance(initialValues);\n  }\n  return [ref.current];\n}\n"],"mappings":";;;AAGA,SAAwB,QAAQ,gBAA4B,EAAE,EAAkB;CAC9E,MAAM,MAAM,OAA4B,KAAK;AAC7C,KAAI,CAAC,IAAI,QACP,KAAI,UAAU,IAAI,aAAa,cAAc;AAE/C,QAAO,CAAC,IAAI,QAAQ"}

package/es/index.d.ts

@@ -80,10 +80,11 @@ import { Transition } from "./transition/transition.js";
 import { Tree } from "./tree/tree.js";
 import { DefaultTypo } from "./typography/index.js";
 import { Upload } from "./upload/upload.js";
+import { Waterfall } from "./waterfall/waterfall.js";
 import { withLocale } from "./intl-provider/with-locale.js";
 import { withSpin } from "./with-spin/with-spin.js";
 import { en_US } from "./locale/en_US.js";
 import { zh_CN } from "./locale/zh_CN.js";
 import { useLocale } from "./_utils/use-locale.js";
 import { ThemeMode, useTheme } from "./_utils/use-theme.js";
-export { Alert, DefaultAnchor as Anchor, AspectRatio, AutoComplete, DefaultAvatar as Avatar, BackTop, Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, Calendar, DefaultCard as Card, DefaultCarousel as Carousel, Cascader, DefaultCheckbox as Checkbox, Col, DefaultCollapse as Collapse, ColorPicker, ConfigProvider, CopyToClipboard, Countdown, DatePicker, DefaultDesc as Descriptions, Divider, Drawer, Dropdown, Empty, Flex, DefaultFlip as Flip, DefaultForm as Form, Image, DefaultInput as Input, InputNumber, InputOTP, InputPassword, IntlProvider, Keyboard, DefaultLayout as Layout, Link, DefaultList as List, Loader, _default as LoadingBar, type Locale, DefaultMenu as Menu, messageContainer as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notificationContainer as Notification, Overlay, Pagination, PopConfirm, Popover, Progress, DefaultRadio as Radio, Rate, Result, Row, ScrollIndicator, Segmented, DefaultSelect$1 as Select, Skeleton, Slider, Space, DefaultSpeedDial as SpeedDial, Split, SplitButton, Statistic, DefaultSteps as Steps, Sticky, StrengthIndicator, Switch, Table, DefaultTabs as Tabs, DefaultTag as Tag, Textarea, type ThemeMode, TimePicker, DefaultTimeline as Timeline, Tooltip, Transfer, Transition, Tree, DefaultTypo as Typography, Upload, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };
+export { Alert, DefaultAnchor as Anchor, AspectRatio, AutoComplete, DefaultAvatar as Avatar, BackTop, Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, Calendar, DefaultCard as Card, DefaultCarousel as Carousel, Cascader, DefaultCheckbox as Checkbox, Col, DefaultCollapse as Collapse, ColorPicker, ConfigProvider, CopyToClipboard, Countdown, DatePicker, DefaultDesc as Descriptions, Divider, Drawer, Dropdown, Empty, Flex, DefaultFlip as Flip, DefaultForm as Form, Image, DefaultInput as Input, InputNumber, InputOTP, InputPassword, IntlProvider, Keyboard, DefaultLayout as Layout, Link, DefaultList as List, Loader, _default as LoadingBar, type Locale, DefaultMenu as Menu, messageContainer as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notificationContainer as Notification, Overlay, Pagination, PopConfirm, Popover, Progress, DefaultRadio as Radio, Rate, Result, Row, ScrollIndicator, Segmented, DefaultSelect$1 as Select, Skeleton, Slider, Space, DefaultSpeedDial as SpeedDial, Split, SplitButton, Statistic, DefaultSteps as Steps, Sticky, StrengthIndicator, Switch, Table, DefaultTabs as Tabs, DefaultTag as Tag, Textarea, type ThemeMode, TimePicker, DefaultTimeline as Timeline, Tooltip, Transfer, Transition, Tree, DefaultTypo as Typography, Upload, Waterfall, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };

package/es/index.js

@@ -82,8 +82,9 @@ import transfer_default from "./transfer/index.js";
 import tree_default from "./tree/index.js";
 import DefaultTypo from "./typography/index.js";
 import upload_default from "./upload/index.js";
+import waterfall_default from "./waterfall/index.js";
 import { withLocale } from "./intl-provider/with-locale.js";
 import { withSpin } from "./with-spin/with-spin.js";
 import zh_CN from "./locale/zh_CN.js";
 import { useTheme } from "./_utils/use-theme.js";
-export { alert_default as Alert, DefaultAnchor as Anchor, aspect_ratio_default as AspectRatio, auto_complete_default as AutoComplete, DefaultAvatar as Avatar, back_top_default as BackTop, badge_default as Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, calendar_default as Calendar, DefaultCard as Card, DefaultCarousel as Carousel, cascader_default as Cascader, DefaultCheckbox as Checkbox, col_default as Col, DefaultCollapse as Collapse, color_picker_default as ColorPicker, config_provider_default as ConfigProvider, copy_to_clipboard_default as CopyToClipboard, countdown_default as Countdown, date_picker_default as DatePicker, DefaultDesc as Descriptions, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, empty_default as Empty, flex_default as Flex, DefaultFlip as Flip, DefaultForm as Form, image_default as Image, DefaultInput as Input, input_number_default as InputNumber, input_otp_default as InputOTP, input_password_default as InputPassword, intl_provider_default as IntlProvider, keyboard_default as Keyboard, DefaultLayout as Layout, link_default as Link, DefaultList as List, loader_default as Loader, loading_bar_default as LoadingBar, DefaultMenu as Menu, message_default as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notification_default as Notification, overlay_default as Overlay, pagination_default as Pagination, pop_confirm_default as PopConfirm, popover_default as Popover, Progress, DefaultRadio as Radio, rate_default as Rate, result_default as Result, row_default as Row, scroll_indicator_default as ScrollIndicator, segmented_default as Segmented, DefaultSelect$1 as Select, skeleton_default as Skeleton, slider_default as Slider, space_default as Space, DefaultSpeedDial as SpeedDial, split_default as Split, split_button_default as SplitButton, statistic_default as Statistic, DefaultSteps as Steps, sticky_default as Sticky, strength_indicator_default as StrengthIndicator, switch_default as Switch, table_default as Table, DefaultTabs as Tabs, DefaultTag as Tag, textarea_default as Textarea, time_picker_default as TimePicker, DefaultTimeline as Timeline, tooltip_default as Tooltip, transfer_default as Transfer, transition_default as Transition, tree_default as Tree, DefaultTypo as Typography, upload_default as Upload, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };
+export { alert_default as Alert, DefaultAnchor as Anchor, aspect_ratio_default as AspectRatio, auto_complete_default as AutoComplete, DefaultAvatar as Avatar, back_top_default as BackTop, badge_default as Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, calendar_default as Calendar, DefaultCard as Card, DefaultCarousel as Carousel, cascader_default as Cascader, DefaultCheckbox as Checkbox, col_default as Col, DefaultCollapse as Collapse, color_picker_default as ColorPicker, config_provider_default as ConfigProvider, copy_to_clipboard_default as CopyToClipboard, countdown_default as Countdown, date_picker_default as DatePicker, DefaultDesc as Descriptions, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, empty_default as Empty, flex_default as Flex, DefaultFlip as Flip, DefaultForm as Form, image_default as Image, DefaultInput as Input, input_number_default as InputNumber, input_otp_default as InputOTP, input_password_default as InputPassword, intl_provider_default as IntlProvider, keyboard_default as Keyboard, DefaultLayout as Layout, link_default as Link, DefaultList as List, loader_default as Loader, loading_bar_default as LoadingBar, DefaultMenu as Menu, message_default as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notification_default as Notification, overlay_default as Overlay, pagination_default as Pagination, pop_confirm_default as PopConfirm, popover_default as Popover, Progress, DefaultRadio as Radio, rate_default as Rate, result_default as Result, row_default as Row, scroll_indicator_default as ScrollIndicator, segmented_default as Segmented, DefaultSelect$1 as Select, skeleton_default as Skeleton, slider_default as Slider, space_default as Space, DefaultSpeedDial as SpeedDial, split_default as Split, split_button_default as SplitButton, statistic_default as Statistic, DefaultSteps as Steps, sticky_default as Sticky, strength_indicator_default as StrengthIndicator, switch_default as Switch, table_default as Table, DefaultTabs as Tabs, DefaultTag as Tag, textarea_default as Textarea, time_picker_default as TimePicker, DefaultTimeline as Timeline, tooltip_default as Tooltip, transfer_default as Transfer, transition_default as Transition, tree_default as Tree, DefaultTypo as Typography, upload_default as Upload, waterfall_default as Waterfall, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };

package/es/waterfall/hooks/use-breakpoint.js

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+//#region src/waterfall/hooks/use-breakpoint.ts
+const breakpointMap = {
+	xxl: "(min-width: 1600px)",
+	xl: "(min-width: 1200px)",
+	lg: "(min-width: 992px)",
+	md: "(min-width: 768px)",
+	sm: "(min-width: 576px)",
+	xs: "(max-width: 575.98px)"
+};
+const responsiveArray = [
+	"xxl",
+	"xl",
+	"lg",
+	"md",
+	"sm",
+	"xs"
+];
+function useBreakpoint() {
+	const [screens, setScreens] = useState({});
+	useEffect(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+		const queries = /* @__PURE__ */ new Map();
+		const update = () => {
+			const next = {};
+			for (const bp of responsiveArray) {
+				const mql = queries.get(bp);
+				if (mql) next[bp] = mql.matches;
+			}
+			setScreens(next);
+		};
+		for (const bp of responsiveArray) {
+			const mql = window.matchMedia(breakpointMap[bp]);
+			queries.set(bp, mql);
+			mql.addEventListener("change", update);
+		}
+		update();
+		return () => {
+			for (const [, mql] of queries) mql.removeEventListener("change", update);
+		};
+	}, []);
+	return screens;
+}
+//#endregion
+export { useBreakpoint as default, responsiveArray };
+
+//# sourceMappingURL=use-breakpoint.js.map

package/es/waterfall/hooks/use-breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breakpoint.js","names":[],"sources":["../../../src/waterfall/hooks/use-breakpoint.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Breakpoint } from '../types';\n\nconst breakpointMap: Record<Breakpoint, string> = {\n  xxl: '(min-width: 1600px)',\n  xl: '(min-width: 1200px)',\n  lg: '(min-width: 992px)',\n  md: '(min-width: 768px)',\n  sm: '(min-width: 576px)',\n  xs: '(max-width: 575.98px)',\n};\n\nconst responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];\n\ntype Screens = Partial<Record<Breakpoint, boolean>>;\n\nexport { responsiveArray };\n\nexport default function useBreakpoint(): Screens {\n  const [screens, setScreens] = useState<Screens>({});\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;\n\n    const queries = new Map<Breakpoint, MediaQueryList>();\n\n    const update = () => {\n      const next: Screens = {};\n      for (const bp of responsiveArray) {\n        const mql = queries.get(bp);\n        if (mql) {\n          next[bp] = mql.matches;\n        }\n      }\n      setScreens(next);\n    };\n\n    for (const bp of responsiveArray) {\n      const mql = window.matchMedia(breakpointMap[bp]);\n      queries.set(bp, mql);\n      mql.addEventListener('change', update);\n    }\n\n    update();\n\n    return () => {\n      for (const [, mql] of queries) {\n        mql.removeEventListener('change', update);\n      }\n    };\n  }, []);\n\n  return screens;\n}\n"],"mappings":";;AAGA,MAAM,gBAA4C;CAChD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,kBAAgC;CAAC;CAAO;CAAM;CAAM;CAAM;CAAM;CAAK;AAM3E,SAAwB,gBAAyB;CAC/C,MAAM,CAAC,SAAS,cAAc,SAAkB,EAAE,CAAC;AAEnD,iBAAgB;AACd,MAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,WAAY;EAE9E,MAAM,0BAAU,IAAI,KAAiC;EAErD,MAAM,eAAe;GACnB,MAAM,OAAgB,EAAE;AACxB,QAAK,MAAM,MAAM,iBAAiB;IAChC,MAAM,MAAM,QAAQ,IAAI,GAAG;AAC3B,QAAI,IACF,MAAK,MAAM,IAAI;;AAGnB,cAAW,KAAK;;AAGlB,OAAK,MAAM,MAAM,iBAAiB;GAChC,MAAM,MAAM,OAAO,WAAW,cAAc,IAAI;AAChD,WAAQ,IAAI,IAAI,IAAI;AACpB,OAAI,iBAAiB,UAAU,OAAO;;AAGxC,UAAQ;AAER,eAAa;AACX,QAAK,MAAM,GAAG,QAAQ,QACpB,KAAI,oBAAoB,UAAU,OAAO;;IAG5C,EAAE,CAAC;AAEN,QAAO"}

package/es/waterfall/hooks/use-positions.js

@@ -0,0 +1,28 @@
+import { useMemo } from "react";
+//#region src/waterfall/hooks/use-positions.ts
+function usePositions(itemHeights, columnCount, verticalGutter) {
+	return useMemo(() => {
+		const columnHeights = new Array(columnCount).fill(0);
+		const positions = /* @__PURE__ */ new Map();
+		for (let i = 0; i < itemHeights.length; i += 1) {
+			const [itemKey, itemHeight, itemColumn] = itemHeights[i];
+			let targetColumn = itemColumn ?? columnHeights.indexOf(Math.min(...columnHeights));
+			targetColumn = Math.min(targetColumn, columnCount - 1);
+			const top = columnHeights[targetColumn];
+			positions.set(itemKey, {
+				column: targetColumn,
+				top
+			});
+			columnHeights[targetColumn] += itemHeight + verticalGutter;
+		}
+		return [positions, Math.max(0, Math.max(...columnHeights) - verticalGutter)];
+	}, [
+		columnCount,
+		itemHeights,
+		verticalGutter
+	]);
+}
+//#endregion
+export { usePositions as default };
+
+//# sourceMappingURL=use-positions.js.map

package/es/waterfall/hooks/use-positions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-positions.js","names":[],"sources":["../../../src/waterfall/hooks/use-positions.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nexport type ItemHeightData = [key: React.Key, height: number, column?: number];\n\nexport type ItemPositions = Map<\n  React.Key,\n  {\n    column: number;\n    top: number;\n  }\n>;\n\nexport default function usePositions(\n  itemHeights: ItemHeightData[],\n  columnCount: number,\n  verticalGutter: number,\n): [ItemPositions, number] {\n  return useMemo(() => {\n    const columnHeights = new Array(columnCount).fill(0) as number[];\n    const positions: ItemPositions = new Map();\n\n    for (let i = 0; i < itemHeights.length; i += 1) {\n      const [itemKey, itemHeight, itemColumn] = itemHeights[i];\n\n      let targetColumn = itemColumn ?? columnHeights.indexOf(Math.min(...columnHeights));\n      targetColumn = Math.min(targetColumn, columnCount - 1);\n\n      const top = columnHeights[targetColumn];\n      positions.set(itemKey, { column: targetColumn, top });\n\n      columnHeights[targetColumn] += itemHeight + verticalGutter;\n    }\n\n    const totalHeight = Math.max(0, Math.max(...columnHeights) - verticalGutter);\n    return [positions, totalHeight];\n  }, [columnCount, itemHeights, verticalGutter]);\n}\n"],"mappings":";;AAYA,SAAwB,aACtB,aACA,aACA,gBACyB;AACzB,QAAO,cAAc;EACnB,MAAM,gBAAgB,IAAI,MAAM,YAAY,CAAC,KAAK,EAAE;EACpD,MAAM,4BAA2B,IAAI,KAAK;AAE1C,OAAK,IAAI,IAAI,GAAG,IAAI,YAAY,QAAQ,KAAK,GAAG;GAC9C,MAAM,CAAC,SAAS,YAAY,cAAc,YAAY;GAEtD,IAAI,eAAe,cAAc,cAAc,QAAQ,KAAK,IAAI,GAAG,cAAc,CAAC;AAClF,kBAAe,KAAK,IAAI,cAAc,cAAc,EAAE;GAEtD,MAAM,MAAM,cAAc;AAC1B,aAAU,IAAI,SAAS;IAAE,QAAQ;IAAc;IAAK,CAAC;AAErD,iBAAc,iBAAiB,aAAa;;AAI9C,SAAO,CAAC,WADY,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,cAAc,GAAG,eAAe,CAC7C;IAC9B;EAAC;EAAa;EAAa;EAAe,CAAC"}

package/es/waterfall/index.d.ts

@@ -0,0 +1,2 @@
+import { Breakpoint, WaterfallItem, WaterfallProps } from "./types.js";
+import { Waterfall } from "./waterfall.js";

package/es/waterfall/index.js

@@ -0,0 +1,9 @@
+import '../style/base.css';
+import './style/index.css';
+import Waterfall from "./waterfall.js";
+//#region src/waterfall/index.tsx
+var waterfall_default = Waterfall;
+//#endregion
+export { waterfall_default as default };
+
+//# sourceMappingURL=index.js.map

package/es/waterfall/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/waterfall/index.tsx"],"sourcesContent":["import Waterfall from './waterfall';\n\nexport type { WaterfallProps, WaterfallItem, Breakpoint } from './types';\n\nexport default Waterfall;\n"],"mappings":";;AAIA,IAAA,oBAAe"}

package/es/waterfall/style/_index.scss

@@ -0,0 +1,22 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-waterfall {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+
+  &__item {
+    position: absolute;
+    box-sizing: border-box;
+  }
+
+  // Exit animation
+  &__item-fade-exit {
+    opacity: 1;
+  }
+
+  &__item-fade-exit-active {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+}

package/es/waterfall/style/index.css

@@ -0,0 +1,16 @@
+.ty-waterfall {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.ty-waterfall__item {
+  position: absolute;
+  box-sizing: border-box;
+}
+.ty-waterfall__item-fade-exit {
+  opacity: 1;
+}
+.ty-waterfall__item-fade-exit-active {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}

package/es/waterfall/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/waterfall/style/index.js

@@ -0,0 +1 @@
+import "./_index.css";

package/es/waterfall/types.d.ts

@@ -0,0 +1,35 @@
+import { BaseProps } from "../_utils/props.js";
+import React, { ReactNode } from "react";
+
+//#region src/waterfall/types.d.ts
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+interface WaterfallItem<T = any> {
+  key: React.Key;
+  /** Pin this item to a specific column index */
+  column?: number;
+  /** Direct content — takes priority over itemRender */
+  children?: ReactNode;
+  /** Custom data passed to itemRender */
+  data?: T;
+}
+interface WaterfallProps<T = any> extends BaseProps, Omit<React.PropsWithRef<JSX.IntrinsicElements['div']>, 'children'> {
+  /** Number of columns, or responsive breakpoint config. Default: 3 */
+  columns?: number | Partial<Record<Breakpoint, number>>;
+  /** Spacing between items: number or [horizontal, vertical] */
+  gutter?: number | [number, number];
+  /** Array of items to render */
+  items?: WaterfallItem<T>[];
+  /** Custom render function for each item */
+  itemRender?: (item: WaterfallItem<T> & {
+    index: number;
+    column: number;
+  }) => ReactNode;
+  /** Callback when layout order changes */
+  onLayoutChange?: (sortInfo: {
+    key: React.Key;
+    column: number;
+  }[]) => void;
+}
+//#endregion
+export { Breakpoint, WaterfallItem, WaterfallProps };
+//# sourceMappingURL=types.d.ts.map

package/es/waterfall/waterfall.d.ts

@@ -0,0 +1,8 @@
+import { WaterfallProps } from "./types.js";
+import React from "react";
+
+//#region src/waterfall/waterfall.d.ts
+declare const Waterfall: React.ForwardRefExoticComponent<Omit<WaterfallProps<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Waterfall };
+//# sourceMappingURL=waterfall.d.ts.map

package/es/waterfall/waterfall.js

@@ -0,0 +1,128 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import useBreakpoint, { responsiveArray } from "./hooks/use-breakpoint.js";
+import usePositions from "./hooks/use-positions.js";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
+//#region src/waterfall/waterfall.tsx
+const Waterfall = React.forwardRef((props, ref) => {
+	const { prefixCls: customisedCls, className, style, columns = 3, gutter = 0, items, itemRender, onLayoutChange, ...otherProps } = props;
+	const prefixCls = getPrefixCls("waterfall", useContext(ConfigContext).prefixCls, customisedCls);
+	const screens = useBreakpoint();
+	const columnCount = React.useMemo(() => {
+		if (typeof columns === "number") return columns;
+		const matchingBreakpoint = responsiveArray.find((bp) => screens[bp] && columns[bp] !== void 0);
+		if (matchingBreakpoint) return columns[matchingBreakpoint];
+		return columns.xs ?? 1;
+	}, [columns, screens]);
+	const [horizontalGutter, verticalGutter] = Array.isArray(gutter) ? gutter : [gutter, gutter];
+	const itemRefsMap = useRef(/* @__PURE__ */ new Map());
+	const setItemRef = useCallback((key, el) => {
+		itemRefsMap.current.set(key, el);
+	}, []);
+	const [itemHeights, setItemHeights] = useState([]);
+	const collectItemSizes = useCallback(() => {
+		if (!items || items.length === 0) {
+			setItemHeights([]);
+			return;
+		}
+		const nextHeights = items.map((item, index) => {
+			const key = item.key ?? index;
+			const el = itemRefsMap.current.get(key);
+			return [
+				key,
+				el ? el.getBoundingClientRect().height : 0,
+				item.column
+			];
+		});
+		setItemHeights((prev) => {
+			return prev.length === nextHeights.length && prev.every((p, i) => p[0] === nextHeights[i][0] && p[1] === nextHeights[i][1]) ? prev : nextHeights;
+		});
+	}, [items]);
+	const [itemPositions, totalHeight] = usePositions(itemHeights, columnCount, verticalGutter);
+	useEffect(() => {
+		collectItemSizes();
+	}, [
+		items,
+		columnCount,
+		collectItemSizes
+	]);
+	useEffect(() => {
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			collectItemSizes();
+		});
+		for (const [, el] of itemRefsMap.current) if (el) observer.observe(el);
+		return () => observer.disconnect();
+	}, [items, collectItemSizes]);
+	useEffect(() => {
+		if (!onLayoutChange || !items || items.length === 0) return;
+		if (!items.every((item) => itemPositions.has(item.key))) return;
+		onLayoutChange(items.map((item) => ({
+			key: item.key,
+			column: itemPositions.get(item.key).column
+		})));
+	}, [
+		itemPositions,
+		items,
+		onLayoutChange
+	]);
+	const cls = classNames(prefixCls, className);
+	const containerStyle = {
+		...style,
+		position: "relative",
+		height: totalHeight || void 0
+	};
+	const mergedItems = items || [];
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		...otherProps,
+		className: cls,
+		style: containerStyle,
+		onLoad: collectItemSizes,
+		onError: collectItemSizes,
+		children: /* @__PURE__ */ jsx(TransitionGroup, {
+			component: null,
+			children: mergedItems.map((item, index) => {
+				const key = item.key ?? index;
+				const position = itemPositions.get(key);
+				const hasPosition = !!position;
+				const columnIndex = position?.column ?? 0;
+				const itemStyle = {
+					position: "absolute",
+					width: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount})`,
+					left: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount} * ${columnIndex} + ${horizontalGutter * columnIndex}px)`,
+					top: position?.top ?? 0,
+					transition: hasPosition ? "top 0.3s ease, left 0.3s ease, opacity 0.3s ease" : "none",
+					opacity: hasPosition ? 1 : 0
+				};
+				const content = item.children ?? itemRender?.({
+					...item,
+					index,
+					column: columnIndex
+				});
+				return /* @__PURE__ */ jsx(CSSTransition, {
+					timeout: 300,
+					classNames: `${prefixCls}__item-fade`,
+					onExited: () => {
+						itemRefsMap.current.delete(key);
+						collectItemSizes();
+					},
+					children: /* @__PURE__ */ jsx("div", {
+						ref: (el) => setItemRef(key, el),
+						className: `${prefixCls}__item`,
+						style: itemStyle,
+						children: content
+					})
+				}, key);
+			})
+		})
+	});
+});
+Waterfall.displayName = "Waterfall";
+//#endregion
+export { Waterfall as default };
+
+//# sourceMappingURL=waterfall.js.map

package/es/waterfall/waterfall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"waterfall.js","names":[],"sources":["../../src/waterfall/waterfall.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { Breakpoint, WaterfallItem, WaterfallProps } from './types';\nimport useBreakpoint, { responsiveArray } from './hooks/use-breakpoint';\nimport usePositions, { ItemHeightData } from './hooks/use-positions';\n\nconst Waterfall = React.forwardRef<HTMLDivElement, WaterfallProps>((props, ref) => {\n  const {\n    prefixCls: customisedCls,\n    className,\n    style,\n    columns = 3,\n    gutter = 0,\n    items,\n    itemRender,\n    onLayoutChange,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('waterfall', configContext.prefixCls, customisedCls);\n\n  // ===================== Breakpoint =====================\n  const screens = useBreakpoint();\n\n  const columnCount = React.useMemo<number>(() => {\n    if (typeof columns === 'number') {\n      return columns;\n    }\n\n    const matchingBreakpoint = responsiveArray.find(\n      (bp: Breakpoint) => screens[bp] && columns[bp] !== undefined,\n    );\n\n    if (matchingBreakpoint) {\n      return columns[matchingBreakpoint] as number;\n    }\n\n    return columns.xs ?? 1;\n  }, [columns, screens]);\n\n  // ====================== Gutter ======================\n  const [horizontalGutter, verticalGutter] = Array.isArray(gutter)\n    ? gutter\n    : [gutter, gutter];\n\n  // =================== Item Refs ===================\n  const itemRefsMap = useRef<Map<React.Key, HTMLDivElement | null>>(new Map());\n\n  const setItemRef = useCallback((key: React.Key, el: HTMLDivElement | null) => {\n    itemRefsMap.current.set(key, el);\n  }, []);\n\n  // ================= Item Heights ==================\n  const [itemHeights, setItemHeights] = useState<ItemHeightData[]>([]);\n\n  const collectItemSizes = useCallback(() => {\n    if (!items || items.length === 0) {\n      setItemHeights([]);\n      return;\n    }\n\n    const nextHeights = items.map<ItemHeightData>((item, index) => {\n      const key = item.key ?? index;\n      const el = itemRefsMap.current.get(key);\n      const height = el ? el.getBoundingClientRect().height : 0;\n      return [key, height, item.column];\n    });\n\n    setItemHeights((prev) => {\n      const isSame =\n        prev.length === nextHeights.length &&\n        prev.every((p, i) => p[0] === nextHeights[i][0] && p[1] === nextHeights[i][1]);\n      return isSame ? prev : nextHeights;\n    });\n  }, [items]);\n\n  // ================= Positions ==================\n  const [itemPositions, totalHeight] = usePositions(itemHeights, columnCount, verticalGutter);\n\n  // Collect sizes on items/columns change\n  useEffect(() => {\n    collectItemSizes();\n  }, [items, columnCount, collectItemSizes]);\n\n  // ResizeObserver for dynamic content\n  useEffect(() => {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(() => {\n      collectItemSizes();\n    });\n\n    for (const [, el] of itemRefsMap.current) {\n      if (el) observer.observe(el);\n    }\n\n    return () => observer.disconnect();\n  }, [items, collectItemSizes]);\n\n  // ================ onLayoutChange ================\n  useEffect(() => {\n    if (!onLayoutChange || !items || items.length === 0) return;\n\n    const allPositioned = items.every((item) => itemPositions.has(item.key));\n    if (!allPositioned) return;\n\n    const sortInfo = items.map((item) => ({\n      key: item.key,\n      column: itemPositions.get(item.key)!.column,\n    }));\n    onLayoutChange(sortInfo);\n  }, [itemPositions, items, onLayoutChange]);\n\n  // ==================== Render ====================\n  const cls = classNames(prefixCls, className);\n\n  const containerStyle: React.CSSProperties = {\n    ...style,\n    position: 'relative',\n    height: totalHeight || undefined,\n  };\n\n  const mergedItems = items || [];\n\n  return (\n    <div\n      ref={ref}\n      {...otherProps}\n      className={cls}\n      style={containerStyle}\n      onLoad={collectItemSizes}\n      onError={collectItemSizes}\n    >\n      <TransitionGroup component={null}>\n        {mergedItems.map((item, index) => {\n          const key = item.key ?? index;\n          const position = itemPositions.get(key);\n          const hasPosition = !!position;\n          const columnIndex = position?.column ?? 0;\n\n          const itemStyle: React.CSSProperties = {\n            position: 'absolute',\n            width: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount})`,\n            left: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount} * ${columnIndex} + ${horizontalGutter * columnIndex}px)`,\n            top: position?.top ?? 0,\n            // Only transition position changes after initial placement\n            transition: hasPosition ? 'top 0.3s ease, left 0.3s ease, opacity 0.3s ease' : 'none',\n            // Hide until position is computed so items don't flash at (0,0)\n            opacity: hasPosition ? 1 : 0,\n          };\n\n          const content = item.children ?? itemRender?.({ ...item, index, column: columnIndex });\n\n          return (\n            <CSSTransition\n              key={key}\n              timeout={300}\n              classNames={`${prefixCls}__item-fade`}\n              onExited={() => {\n                itemRefsMap.current.delete(key);\n                collectItemSizes();\n              }}\n            >\n              <div\n                ref={(el) => setItemRef(key, el)}\n                className={`${prefixCls}__item`}\n                style={itemStyle}\n              >\n                {content}\n              </div>\n            </CSSTransition>\n          );\n        })}\n      </TransitionGroup>\n    </div>\n  );\n});\n\nWaterfall.displayName = 'Waterfall';\n\nexport default Waterfall;\n"],"mappings":"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"}

package/lib/form/use-form.js

@@ -1,7 +1,11 @@
+require("../_virtual/_rolldown/runtime.js");
 const require_form_instance = require("./form-instance.js");
+let react = require("react");
 //#region src/form/use-form.ts
 function useForm(initialValues = {}) {
-	return [new require_form_instance.default(initialValues)];
+	const ref = (0, react.useRef)(null);
+	if (!ref.current) ref.current = new require_form_instance.default(initialValues);
+	return [ref.current];
 }
 //#endregion
 exports.default = useForm;

package/lib/form/use-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-form.js","names":["FormInstance"],"sources":["../../src/form/use-form.ts"],"sourcesContent":["import FormInstance, { FormValues } from './form-instance';\n\nexport default function useForm(initialValues: FormValues = {}): [FormInstance] {\n  return [new FormInstance(initialValues)];\n}\n"],"mappings":";;AAEA,SAAwB,QAAQ,gBAA4B,EAAE,EAAkB;AAC9E,QAAO,CAAC,IAAIA,sBAAAA,QAAa,cAAc,CAAC"}
+{"version":3,"file":"use-form.js","names":["FormInstance"],"sources":["../../src/form/use-form.ts"],"sourcesContent":["import { useRef } from 'react';\nimport FormInstance, { FormValues } from './form-instance';\n\nexport default function useForm(initialValues: FormValues = {}): [FormInstance] {\n  const ref = useRef<FormInstance | null>(null);\n  if (!ref.current) {\n    ref.current = new FormInstance(initialValues);\n  }\n  return [ref.current];\n}\n"],"mappings":";;;;AAGA,SAAwB,QAAQ,gBAA4B,EAAE,EAAkB;CAC9E,MAAM,OAAA,GAAA,MAAA,QAAkC,KAAK;AAC7C,KAAI,CAAC,IAAI,QACP,KAAI,UAAU,IAAIA,sBAAAA,QAAa,cAAc;AAE/C,QAAO,CAAC,IAAI,QAAQ"}

package/lib/index.d.ts

@@ -80,10 +80,11 @@ import { Transition } from "./transition/transition.js";
 import { Tree } from "./tree/tree.js";
 import { DefaultTypo } from "./typography/index.js";
 import { Upload } from "./upload/upload.js";
+import { Waterfall } from "./waterfall/waterfall.js";
 import { withLocale } from "./intl-provider/with-locale.js";
 import { withSpin } from "./with-spin/with-spin.js";
 import { en_US } from "./locale/en_US.js";
 import { zh_CN } from "./locale/zh_CN.js";
 import { useLocale } from "./_utils/use-locale.js";
 import { ThemeMode, useTheme } from "./_utils/use-theme.js";
-export { Alert, DefaultAnchor as Anchor, AspectRatio, AutoComplete, DefaultAvatar as Avatar, BackTop, Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, Calendar, DefaultCard as Card, DefaultCarousel as Carousel, Cascader, DefaultCheckbox as Checkbox, Col, DefaultCollapse as Collapse, ColorPicker, ConfigProvider, CopyToClipboard, Countdown, DatePicker, DefaultDesc as Descriptions, Divider, Drawer, Dropdown, Empty, Flex, DefaultFlip as Flip, DefaultForm as Form, Image, DefaultInput as Input, InputNumber, InputOTP, InputPassword, IntlProvider, Keyboard, DefaultLayout as Layout, Link, DefaultList as List, Loader, _default as LoadingBar, type Locale, DefaultMenu as Menu, messageContainer as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notificationContainer as Notification, Overlay, Pagination, PopConfirm, Popover, Progress, DefaultRadio as Radio, Rate, Result, Row, ScrollIndicator, Segmented, DefaultSelect$1 as Select, Skeleton, Slider, Space, DefaultSpeedDial as SpeedDial, Split, SplitButton, Statistic, DefaultSteps as Steps, Sticky, StrengthIndicator, Switch, Table, DefaultTabs as Tabs, DefaultTag as Tag, Textarea, type ThemeMode, TimePicker, DefaultTimeline as Timeline, Tooltip, Transfer, Transition, Tree, DefaultTypo as Typography, Upload, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };
+export { Alert, DefaultAnchor as Anchor, AspectRatio, AutoComplete, DefaultAvatar as Avatar, BackTop, Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, Calendar, DefaultCard as Card, DefaultCarousel as Carousel, Cascader, DefaultCheckbox as Checkbox, Col, DefaultCollapse as Collapse, ColorPicker, ConfigProvider, CopyToClipboard, Countdown, DatePicker, DefaultDesc as Descriptions, Divider, Drawer, Dropdown, Empty, Flex, DefaultFlip as Flip, DefaultForm as Form, Image, DefaultInput as Input, InputNumber, InputOTP, InputPassword, IntlProvider, Keyboard, DefaultLayout as Layout, Link, DefaultList as List, Loader, _default as LoadingBar, type Locale, DefaultMenu as Menu, messageContainer as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notificationContainer as Notification, Overlay, Pagination, PopConfirm, Popover, Progress, DefaultRadio as Radio, Rate, Result, Row, ScrollIndicator, Segmented, DefaultSelect$1 as Select, Skeleton, Slider, Space, DefaultSpeedDial as SpeedDial, Split, SplitButton, Statistic, DefaultSteps as Steps, Sticky, StrengthIndicator, Switch, Table, DefaultTabs as Tabs, DefaultTag as Tag, Textarea, type ThemeMode, TimePicker, DefaultTimeline as Timeline, Tooltip, Transfer, Transition, Tree, DefaultTypo as Typography, Upload, Waterfall, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };

package/lib/index.js

@@ -83,6 +83,7 @@ const require_index$77 = require("./transfer/index.js");
 const require_index$78 = require("./tree/index.js");
 const require_index$79 = require("./typography/index.js");
 const require_index$80 = require("./upload/index.js");
+const require_index$81 = require("./waterfall/index.js");
 const require_with_locale = require("./intl-provider/with-locale.js");
 const require_with_spin = require("./with-spin/with-spin.js");
 const require_zh_CN = require("./locale/zh_CN.js");
@@ -168,6 +169,7 @@ exports.Transition = require_index;
 exports.Tree = require_index$78;
 exports.Typography = require_index$79;
 exports.Upload = require_index$80;
+exports.Waterfall = require_index$81;
 exports.en_US = require_en_US;
 exports.useLocale = require_use_locale.useLocale;
 exports.useTheme = require_use_theme.useTheme;

package/lib/waterfall/hooks/use-breakpoint.js

@@ -0,0 +1,49 @@
+require("../../_virtual/_rolldown/runtime.js");
+let react = require("react");
+//#region src/waterfall/hooks/use-breakpoint.ts
+const breakpointMap = {
+	xxl: "(min-width: 1600px)",
+	xl: "(min-width: 1200px)",
+	lg: "(min-width: 992px)",
+	md: "(min-width: 768px)",
+	sm: "(min-width: 576px)",
+	xs: "(max-width: 575.98px)"
+};
+const responsiveArray = [
+	"xxl",
+	"xl",
+	"lg",
+	"md",
+	"sm",
+	"xs"
+];
+function useBreakpoint() {
+	const [screens, setScreens] = (0, react.useState)({});
+	(0, react.useEffect)(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+		const queries = /* @__PURE__ */ new Map();
+		const update = () => {
+			const next = {};
+			for (const bp of responsiveArray) {
+				const mql = queries.get(bp);
+				if (mql) next[bp] = mql.matches;
+			}
+			setScreens(next);
+		};
+		for (const bp of responsiveArray) {
+			const mql = window.matchMedia(breakpointMap[bp]);
+			queries.set(bp, mql);
+			mql.addEventListener("change", update);
+		}
+		update();
+		return () => {
+			for (const [, mql] of queries) mql.removeEventListener("change", update);
+		};
+	}, []);
+	return screens;
+}
+//#endregion
+exports.default = useBreakpoint;
+exports.responsiveArray = responsiveArray;
+
+//# sourceMappingURL=use-breakpoint.js.map

package/lib/waterfall/hooks/use-breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breakpoint.js","names":[],"sources":["../../../src/waterfall/hooks/use-breakpoint.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Breakpoint } from '../types';\n\nconst breakpointMap: Record<Breakpoint, string> = {\n  xxl: '(min-width: 1600px)',\n  xl: '(min-width: 1200px)',\n  lg: '(min-width: 992px)',\n  md: '(min-width: 768px)',\n  sm: '(min-width: 576px)',\n  xs: '(max-width: 575.98px)',\n};\n\nconst responsiveArray: Breakpoint[] = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];\n\ntype Screens = Partial<Record<Breakpoint, boolean>>;\n\nexport { responsiveArray };\n\nexport default function useBreakpoint(): Screens {\n  const [screens, setScreens] = useState<Screens>({});\n\n  useEffect(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;\n\n    const queries = new Map<Breakpoint, MediaQueryList>();\n\n    const update = () => {\n      const next: Screens = {};\n      for (const bp of responsiveArray) {\n        const mql = queries.get(bp);\n        if (mql) {\n          next[bp] = mql.matches;\n        }\n      }\n      setScreens(next);\n    };\n\n    for (const bp of responsiveArray) {\n      const mql = window.matchMedia(breakpointMap[bp]);\n      queries.set(bp, mql);\n      mql.addEventListener('change', update);\n    }\n\n    update();\n\n    return () => {\n      for (const [, mql] of queries) {\n        mql.removeEventListener('change', update);\n      }\n    };\n  }, []);\n\n  return screens;\n}\n"],"mappings":";;;AAGA,MAAM,gBAA4C;CAChD,KAAK;CACL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,kBAAgC;CAAC;CAAO;CAAM;CAAM;CAAM;CAAM;CAAK;AAM3E,SAAwB,gBAAyB;CAC/C,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAgC,EAAE,CAAC;AAEnD,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,WAAY;EAE9E,MAAM,0BAAU,IAAI,KAAiC;EAErD,MAAM,eAAe;GACnB,MAAM,OAAgB,EAAE;AACxB,QAAK,MAAM,MAAM,iBAAiB;IAChC,MAAM,MAAM,QAAQ,IAAI,GAAG;AAC3B,QAAI,IACF,MAAK,MAAM,IAAI;;AAGnB,cAAW,KAAK;;AAGlB,OAAK,MAAM,MAAM,iBAAiB;GAChC,MAAM,MAAM,OAAO,WAAW,cAAc,IAAI;AAChD,WAAQ,IAAI,IAAI,IAAI;AACpB,OAAI,iBAAiB,UAAU,OAAO;;AAGxC,UAAQ;AAER,eAAa;AACX,QAAK,MAAM,GAAG,QAAQ,QACpB,KAAI,oBAAoB,UAAU,OAAO;;IAG5C,EAAE,CAAC;AAEN,QAAO"}

package/lib/waterfall/hooks/use-positions.js

@@ -0,0 +1,29 @@
+require("../../_virtual/_rolldown/runtime.js");
+let react = require("react");
+//#region src/waterfall/hooks/use-positions.ts
+function usePositions(itemHeights, columnCount, verticalGutter) {
+	return (0, react.useMemo)(() => {
+		const columnHeights = new Array(columnCount).fill(0);
+		const positions = /* @__PURE__ */ new Map();
+		for (let i = 0; i < itemHeights.length; i += 1) {
+			const [itemKey, itemHeight, itemColumn] = itemHeights[i];
+			let targetColumn = itemColumn ?? columnHeights.indexOf(Math.min(...columnHeights));
+			targetColumn = Math.min(targetColumn, columnCount - 1);
+			const top = columnHeights[targetColumn];
+			positions.set(itemKey, {
+				column: targetColumn,
+				top
+			});
+			columnHeights[targetColumn] += itemHeight + verticalGutter;
+		}
+		return [positions, Math.max(0, Math.max(...columnHeights) - verticalGutter)];
+	}, [
+		columnCount,
+		itemHeights,
+		verticalGutter
+	]);
+}
+//#endregion
+exports.default = usePositions;
+
+//# sourceMappingURL=use-positions.js.map

package/lib/waterfall/hooks/use-positions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-positions.js","names":[],"sources":["../../../src/waterfall/hooks/use-positions.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nexport type ItemHeightData = [key: React.Key, height: number, column?: number];\n\nexport type ItemPositions = Map<\n  React.Key,\n  {\n    column: number;\n    top: number;\n  }\n>;\n\nexport default function usePositions(\n  itemHeights: ItemHeightData[],\n  columnCount: number,\n  verticalGutter: number,\n): [ItemPositions, number] {\n  return useMemo(() => {\n    const columnHeights = new Array(columnCount).fill(0) as number[];\n    const positions: ItemPositions = new Map();\n\n    for (let i = 0; i < itemHeights.length; i += 1) {\n      const [itemKey, itemHeight, itemColumn] = itemHeights[i];\n\n      let targetColumn = itemColumn ?? columnHeights.indexOf(Math.min(...columnHeights));\n      targetColumn = Math.min(targetColumn, columnCount - 1);\n\n      const top = columnHeights[targetColumn];\n      positions.set(itemKey, { column: targetColumn, top });\n\n      columnHeights[targetColumn] += itemHeight + verticalGutter;\n    }\n\n    const totalHeight = Math.max(0, Math.max(...columnHeights) - verticalGutter);\n    return [positions, totalHeight];\n  }, [columnCount, itemHeights, verticalGutter]);\n}\n"],"mappings":";;;AAYA,SAAwB,aACtB,aACA,aACA,gBACyB;AACzB,SAAA,GAAA,MAAA,eAAqB;EACnB,MAAM,gBAAgB,IAAI,MAAM,YAAY,CAAC,KAAK,EAAE;EACpD,MAAM,4BAA2B,IAAI,KAAK;AAE1C,OAAK,IAAI,IAAI,GAAG,IAAI,YAAY,QAAQ,KAAK,GAAG;GAC9C,MAAM,CAAC,SAAS,YAAY,cAAc,YAAY;GAEtD,IAAI,eAAe,cAAc,cAAc,QAAQ,KAAK,IAAI,GAAG,cAAc,CAAC;AAClF,kBAAe,KAAK,IAAI,cAAc,cAAc,EAAE;GAEtD,MAAM,MAAM,cAAc;AAC1B,aAAU,IAAI,SAAS;IAAE,QAAQ;IAAc;IAAK,CAAC;AAErD,iBAAc,iBAAiB,aAAa;;AAI9C,SAAO,CAAC,WADY,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,cAAc,GAAG,eAAe,CAC7C;IAC9B;EAAC;EAAa;EAAa;EAAe,CAAC"}

package/lib/waterfall/index.js

@@ -0,0 +1,8 @@
+require('../style/base.css');
+require('./style/index.css');
+//#region src/waterfall/index.tsx
+var waterfall_default = require("./waterfall.js").default;
+//#endregion
+exports.default = waterfall_default;
+
+//# sourceMappingURL=index.js.map

package/lib/waterfall/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Waterfall"],"sources":["../../src/waterfall/index.tsx"],"sourcesContent":["import Waterfall from './waterfall';\n\nexport type { WaterfallProps, WaterfallItem, Breakpoint } from './types';\n\nexport default Waterfall;\n"],"mappings":";AAIA,IAAA,8CAAeA"}

package/lib/waterfall/style/_index.scss

@@ -0,0 +1,22 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-waterfall {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+
+  &__item {
+    position: absolute;
+    box-sizing: border-box;
+  }
+
+  // Exit animation
+  &__item-fade-exit {
+    opacity: 1;
+  }
+
+  &__item-fade-exit-active {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+}

package/lib/waterfall/style/index.css

@@ -0,0 +1,16 @@
+.ty-waterfall {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+.ty-waterfall__item {
+  position: absolute;
+  box-sizing: border-box;
+}
+.ty-waterfall__item-fade-exit {
+  opacity: 1;
+}
+.ty-waterfall__item-fade-exit-active {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}

package/lib/waterfall/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/lib/waterfall/style/index.js

@@ -0,0 +1 @@
+require("./_index.css");

package/lib/waterfall/types.d.ts

@@ -0,0 +1,35 @@
+import { BaseProps } from "../_utils/props.js";
+import React, { ReactNode } from "react";
+
+//#region src/waterfall/types.d.ts
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+interface WaterfallItem<T = any> {
+  key: React.Key;
+  /** Pin this item to a specific column index */
+  column?: number;
+  /** Direct content — takes priority over itemRender */
+  children?: ReactNode;
+  /** Custom data passed to itemRender */
+  data?: T;
+}
+interface WaterfallProps<T = any> extends BaseProps, Omit<React.PropsWithRef<JSX.IntrinsicElements['div']>, 'children'> {
+  /** Number of columns, or responsive breakpoint config. Default: 3 */
+  columns?: number | Partial<Record<Breakpoint, number>>;
+  /** Spacing between items: number or [horizontal, vertical] */
+  gutter?: number | [number, number];
+  /** Array of items to render */
+  items?: WaterfallItem<T>[];
+  /** Custom render function for each item */
+  itemRender?: (item: WaterfallItem<T> & {
+    index: number;
+    column: number;
+  }) => ReactNode;
+  /** Callback when layout order changes */
+  onLayoutChange?: (sortInfo: {
+    key: React.Key;
+    column: number;
+  }[]) => void;
+}
+//#endregion
+export { WaterfallProps };
+//# sourceMappingURL=types.d.ts.map

package/lib/waterfall/waterfall.d.ts

@@ -0,0 +1,8 @@
+import { WaterfallProps } from "./types.js";
+import React from "react";
+
+//#region src/waterfall/waterfall.d.ts
+declare const Waterfall: React.ForwardRefExoticComponent<Omit<WaterfallProps<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Waterfall };
+//# sourceMappingURL=waterfall.d.ts.map

package/lib/waterfall/waterfall.js

@@ -0,0 +1,131 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+const require_use_breakpoint = require("./hooks/use-breakpoint.js");
+const require_use_positions = require("./hooks/use-positions.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_transition_group = require("react-transition-group");
+//#region src/waterfall/waterfall.tsx
+const Waterfall = react.default.forwardRef((props, ref) => {
+	const { prefixCls: customisedCls, className, style, columns = 3, gutter = 0, items, itemRender, onLayoutChange, ...otherProps } = props;
+	const prefixCls = require_general.getPrefixCls("waterfall", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
+	const screens = require_use_breakpoint.default();
+	const columnCount = react.default.useMemo(() => {
+		if (typeof columns === "number") return columns;
+		const matchingBreakpoint = require_use_breakpoint.responsiveArray.find((bp) => screens[bp] && columns[bp] !== void 0);
+		if (matchingBreakpoint) return columns[matchingBreakpoint];
+		return columns.xs ?? 1;
+	}, [columns, screens]);
+	const [horizontalGutter, verticalGutter] = Array.isArray(gutter) ? gutter : [gutter, gutter];
+	const itemRefsMap = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const setItemRef = (0, react.useCallback)((key, el) => {
+		itemRefsMap.current.set(key, el);
+	}, []);
+	const [itemHeights, setItemHeights] = (0, react.useState)([]);
+	const collectItemSizes = (0, react.useCallback)(() => {
+		if (!items || items.length === 0) {
+			setItemHeights([]);
+			return;
+		}
+		const nextHeights = items.map((item, index) => {
+			const key = item.key ?? index;
+			const el = itemRefsMap.current.get(key);
+			return [
+				key,
+				el ? el.getBoundingClientRect().height : 0,
+				item.column
+			];
+		});
+		setItemHeights((prev) => {
+			return prev.length === nextHeights.length && prev.every((p, i) => p[0] === nextHeights[i][0] && p[1] === nextHeights[i][1]) ? prev : nextHeights;
+		});
+	}, [items]);
+	const [itemPositions, totalHeight] = require_use_positions.default(itemHeights, columnCount, verticalGutter);
+	(0, react.useEffect)(() => {
+		collectItemSizes();
+	}, [
+		items,
+		columnCount,
+		collectItemSizes
+	]);
+	(0, react.useEffect)(() => {
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			collectItemSizes();
+		});
+		for (const [, el] of itemRefsMap.current) if (el) observer.observe(el);
+		return () => observer.disconnect();
+	}, [items, collectItemSizes]);
+	(0, react.useEffect)(() => {
+		if (!onLayoutChange || !items || items.length === 0) return;
+		if (!items.every((item) => itemPositions.has(item.key))) return;
+		onLayoutChange(items.map((item) => ({
+			key: item.key,
+			column: itemPositions.get(item.key).column
+		})));
+	}, [
+		itemPositions,
+		items,
+		onLayoutChange
+	]);
+	const cls = (0, classnames.default)(prefixCls, className);
+	const containerStyle = {
+		...style,
+		position: "relative",
+		height: totalHeight || void 0
+	};
+	const mergedItems = items || [];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		...otherProps,
+		className: cls,
+		style: containerStyle,
+		onLoad: collectItemSizes,
+		onError: collectItemSizes,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.TransitionGroup, {
+			component: null,
+			children: mergedItems.map((item, index) => {
+				const key = item.key ?? index;
+				const position = itemPositions.get(key);
+				const hasPosition = !!position;
+				const columnIndex = position?.column ?? 0;
+				const itemStyle = {
+					position: "absolute",
+					width: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount})`,
+					left: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount} * ${columnIndex} + ${horizontalGutter * columnIndex}px)`,
+					top: position?.top ?? 0,
+					transition: hasPosition ? "top 0.3s ease, left 0.3s ease, opacity 0.3s ease" : "none",
+					opacity: hasPosition ? 1 : 0
+				};
+				const content = item.children ?? itemRender?.({
+					...item,
+					index,
+					column: columnIndex
+				});
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_transition_group.CSSTransition, {
+					timeout: 300,
+					classNames: `${prefixCls}__item-fade`,
+					onExited: () => {
+						itemRefsMap.current.delete(key);
+						collectItemSizes();
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						ref: (el) => setItemRef(key, el),
+						className: `${prefixCls}__item`,
+						style: itemStyle,
+						children: content
+					})
+				}, key);
+			})
+		})
+	});
+});
+Waterfall.displayName = "Waterfall";
+//#endregion
+exports.default = Waterfall;
+
+//# sourceMappingURL=waterfall.js.map

package/lib/waterfall/waterfall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"waterfall.js","names":["React","getPrefixCls","ConfigContext","useBreakpoint","responsiveArray","usePositions","TransitionGroup","CSSTransition"],"sources":["../../src/waterfall/waterfall.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { Breakpoint, WaterfallItem, WaterfallProps } from './types';\nimport useBreakpoint, { responsiveArray } from './hooks/use-breakpoint';\nimport usePositions, { ItemHeightData } from './hooks/use-positions';\n\nconst Waterfall = React.forwardRef<HTMLDivElement, WaterfallProps>((props, ref) => {\n  const {\n    prefixCls: customisedCls,\n    className,\n    style,\n    columns = 3,\n    gutter = 0,\n    items,\n    itemRender,\n    onLayoutChange,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('waterfall', configContext.prefixCls, customisedCls);\n\n  // ===================== Breakpoint =====================\n  const screens = useBreakpoint();\n\n  const columnCount = React.useMemo<number>(() => {\n    if (typeof columns === 'number') {\n      return columns;\n    }\n\n    const matchingBreakpoint = responsiveArray.find(\n      (bp: Breakpoint) => screens[bp] && columns[bp] !== undefined,\n    );\n\n    if (matchingBreakpoint) {\n      return columns[matchingBreakpoint] as number;\n    }\n\n    return columns.xs ?? 1;\n  }, [columns, screens]);\n\n  // ====================== Gutter ======================\n  const [horizontalGutter, verticalGutter] = Array.isArray(gutter)\n    ? gutter\n    : [gutter, gutter];\n\n  // =================== Item Refs ===================\n  const itemRefsMap = useRef<Map<React.Key, HTMLDivElement | null>>(new Map());\n\n  const setItemRef = useCallback((key: React.Key, el: HTMLDivElement | null) => {\n    itemRefsMap.current.set(key, el);\n  }, []);\n\n  // ================= Item Heights ==================\n  const [itemHeights, setItemHeights] = useState<ItemHeightData[]>([]);\n\n  const collectItemSizes = useCallback(() => {\n    if (!items || items.length === 0) {\n      setItemHeights([]);\n      return;\n    }\n\n    const nextHeights = items.map<ItemHeightData>((item, index) => {\n      const key = item.key ?? index;\n      const el = itemRefsMap.current.get(key);\n      const height = el ? el.getBoundingClientRect().height : 0;\n      return [key, height, item.column];\n    });\n\n    setItemHeights((prev) => {\n      const isSame =\n        prev.length === nextHeights.length &&\n        prev.every((p, i) => p[0] === nextHeights[i][0] && p[1] === nextHeights[i][1]);\n      return isSame ? prev : nextHeights;\n    });\n  }, [items]);\n\n  // ================= Positions ==================\n  const [itemPositions, totalHeight] = usePositions(itemHeights, columnCount, verticalGutter);\n\n  // Collect sizes on items/columns change\n  useEffect(() => {\n    collectItemSizes();\n  }, [items, columnCount, collectItemSizes]);\n\n  // ResizeObserver for dynamic content\n  useEffect(() => {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(() => {\n      collectItemSizes();\n    });\n\n    for (const [, el] of itemRefsMap.current) {\n      if (el) observer.observe(el);\n    }\n\n    return () => observer.disconnect();\n  }, [items, collectItemSizes]);\n\n  // ================ onLayoutChange ================\n  useEffect(() => {\n    if (!onLayoutChange || !items || items.length === 0) return;\n\n    const allPositioned = items.every((item) => itemPositions.has(item.key));\n    if (!allPositioned) return;\n\n    const sortInfo = items.map((item) => ({\n      key: item.key,\n      column: itemPositions.get(item.key)!.column,\n    }));\n    onLayoutChange(sortInfo);\n  }, [itemPositions, items, onLayoutChange]);\n\n  // ==================== Render ====================\n  const cls = classNames(prefixCls, className);\n\n  const containerStyle: React.CSSProperties = {\n    ...style,\n    position: 'relative',\n    height: totalHeight || undefined,\n  };\n\n  const mergedItems = items || [];\n\n  return (\n    <div\n      ref={ref}\n      {...otherProps}\n      className={cls}\n      style={containerStyle}\n      onLoad={collectItemSizes}\n      onError={collectItemSizes}\n    >\n      <TransitionGroup component={null}>\n        {mergedItems.map((item, index) => {\n          const key = item.key ?? index;\n          const position = itemPositions.get(key);\n          const hasPosition = !!position;\n          const columnIndex = position?.column ?? 0;\n\n          const itemStyle: React.CSSProperties = {\n            position: 'absolute',\n            width: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount})`,\n            left: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount} * ${columnIndex} + ${horizontalGutter * columnIndex}px)`,\n            top: position?.top ?? 0,\n            // Only transition position changes after initial placement\n            transition: hasPosition ? 'top 0.3s ease, left 0.3s ease, opacity 0.3s ease' : 'none',\n            // Hide until position is computed so items don't flash at (0,0)\n            opacity: hasPosition ? 1 : 0,\n          };\n\n          const content = item.children ?? itemRender?.({ ...item, index, column: columnIndex });\n\n          return (\n            <CSSTransition\n              key={key}\n              timeout={300}\n              classNames={`${prefixCls}__item-fade`}\n              onExited={() => {\n                itemRefsMap.current.delete(key);\n                collectItemSizes();\n              }}\n            >\n              <div\n                ref={(el) => setItemRef(key, el)}\n                className={`${prefixCls}__item`}\n                style={itemStyle}\n              >\n                {content}\n              </div>\n            </CSSTransition>\n          );\n        })}\n      </TransitionGroup>\n    </div>\n  );\n});\n\nWaterfall.displayName = 'Waterfall';\n\nexport default Waterfall;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiny-design/react",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A friendly UI component set for React",
   "license": "MIT",
   "keywords": [
@@ -55,8 +55,8 @@
     "classnames": "^2.3.1",
     "react-transition-group": "^4.4.2",
     "tslib": "^2.3.1",
-    "@tiny-design/tokens": "1.1.1",
-    "@tiny-design/icons": "1.1.1"
+    "@tiny-design/icons": "1.2.0",
+    "@tiny-design/tokens": "1.2.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.0.0",