@jinmi/ui 0.0.0-stage → 6.0.2

package/es/DraggablePanel/DraggablePanel.mjs

@@ -0,0 +1,479 @@
+"use client";
+import Center from "../Flex/Center.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { handleVariants, panelVariants, styles, toggleVariants } from "./style.mjs";
+import { isBelowCollapseThreshold, reversePlacement } from "./utils.mjs";
+import { memo, startTransition, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import useMergeState from "use-merge-value";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import { ConfigProvider } from "antd";
+import { useHover } from "ahooks";
+import isEqual from "fast-deep-equal";
+import { Resizable } from "re-resizable";
+//#region src/DraggablePanel/DraggablePanel.tsx
+const ARROW_MAP = {
+	bottom: ChevronUp,
+	left: ChevronRight,
+	right: ChevronLeft,
+	top: ChevronDown
+};
+const MARGIN_MAP = {
+	bottom: { marginTop: 4 },
+	left: { marginRight: 4 },
+	right: { marginLeft: 4 },
+	top: { marginBottom: 4 }
+};
+const DISABLED_RESIZING = {
+	bottom: false,
+	bottomLeft: false,
+	bottomRight: false,
+	left: false,
+	right: false,
+	top: false,
+	topLeft: false,
+	topRight: false
+};
+const toCssSize = (value, fallback) => {
+	if (typeof value === "number") return `${Math.max(value, 0)}px`;
+	if (typeof value === "string" && value.length > 0) return value;
+	return fallback;
+};
+const DraggablePanel = memo(({ headerHeight = 0, fullscreen, maxHeight, pin = true, mode = "fixed", children, placement = "right", resize, style, showBorder = true, showHandleHighlight = false, showHandleWideArea = true, backgroundColor, collapseThreshold, size, stableLayout = true, defaultSize: customizeDefaultSize, minWidth, minHeight, maxWidth, onSizeChange, onSizeDragging, expandable = true, expand, defaultExpand = true, onExpandChange, className, showHandleWhenCollapsed, destroyOnClose, styles: customStyles, classNames, dir }) => {
+	const ref = useRef(null);
+	const isHovering = useHover(ref);
+	const isVertical = placement === "top" || placement === "bottom";
+	const hoverTimeoutRef = useRef(void 0);
+	const resetTransitionTimeoutRef = useRef(void 0);
+	const resizableRef = useRef(null);
+	const initialExpandedSizeRef = useRef(void 0);
+	const resizeStartSizeRef = useRef(void 0);
+	const outerRef = useRef(null);
+	const { direction: antdDirection } = use(ConfigProvider.ConfigContext);
+	const direction = dir ?? antdDirection;
+	const internalPlacement = useMemo(() => {
+		if (direction !== "rtl") return placement;
+		if (placement === "left") return "right";
+		if (placement === "right") return "left";
+		return placement;
+	}, [direction, placement]);
+	const cssVariables = {
+		"--draggable-panel-bg": backgroundColor || "",
+		"--draggable-panel-header-height": `${headerHeight}px`
+	};
+	const [isExpand, setIsExpand] = useMergeState(defaultExpand, {
+		onChange: onExpandChange,
+		value: expand
+	});
+	const [shouldTransition, setShouldTransition] = useState(true);
+	const [showExpand, setShowExpand] = useState(true);
+	const usesStableLayout = stableLayout || collapseThreshold !== void 0;
+	useEffect(() => {
+		if (pin) return;
+		if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+		if (isHovering && !isExpand) startTransition(() => setIsExpand(true));
+		else if (!isHovering && isExpand) hoverTimeoutRef.current = setTimeout(() => {
+			startTransition(() => setIsExpand(false));
+		}, 150);
+	}, [
+		pin,
+		isHovering,
+		isExpand,
+		setIsExpand
+	]);
+	useEffect(() => {
+		return () => {
+			if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+			if (resetTransitionTimeoutRef.current) clearTimeout(resetTransitionTimeoutRef.current);
+		};
+	}, []);
+	useEffect(() => {
+		initialExpandedSizeRef.current = void 0;
+	}, [internalPlacement]);
+	const reversed = reversePlacement(internalPlacement);
+	const canResizing = resize !== false && isExpand;
+	const resizing = useMemo(() => ({
+		bottom: false,
+		bottomLeft: false,
+		bottomRight: false,
+		left: false,
+		right: false,
+		top: false,
+		topLeft: false,
+		topRight: false,
+		[reversed]: true,
+		...resize
+	}), [reversed, resize]);
+	const defaultSize = useMemo(() => {
+		if (isVertical) return {
+			height: 180,
+			width: "100%",
+			...customizeDefaultSize
+		};
+		return {
+			height: "100%",
+			width: 280,
+			...customizeDefaultSize
+		};
+	}, [isVertical, customizeDefaultSize]);
+	const normalizedMaxHeight = typeof maxHeight === "number" ? Math.max(maxHeight, 0) : void 0;
+	const normalizedMaxWidth = typeof maxWidth === "number" ? Math.max(maxWidth, 0) : void 0;
+	const normalizedMinHeight = typeof minHeight === "number" ? Math.max(minHeight, 0) : void 0;
+	const normalizedMinWidth = typeof minWidth === "number" ? Math.max(minWidth, 0) : void 0;
+	const sizeProps = useMemo(() => {
+		if (!usesStableLayout && !isExpand) return isVertical ? {
+			minHeight: 0,
+			size: { height: 0 }
+		} : {
+			minWidth: 0,
+			size: { width: 0 }
+		};
+		return {
+			defaultSize,
+			maxHeight: normalizedMaxHeight,
+			maxWidth: normalizedMaxWidth,
+			minHeight: normalizedMinHeight,
+			minWidth: normalizedMinWidth,
+			size
+		};
+	}, [
+		usesStableLayout,
+		isExpand,
+		isVertical,
+		defaultSize,
+		normalizedMaxHeight,
+		normalizedMaxWidth,
+		normalizedMinHeight,
+		normalizedMinWidth,
+		size
+	]);
+	const fallbackExpandedSize = isVertical ? "180px" : "280px";
+	const controlledExpandedSize = useMemo(() => {
+		const controlledSize = isVertical ? size?.height : size?.width;
+		if (controlledSize === void 0) return void 0;
+		return toCssSize(controlledSize, fallbackExpandedSize);
+	}, [
+		isVertical,
+		size?.height,
+		size?.width,
+		fallbackExpandedSize
+	]);
+	const defaultExpandedSize = useMemo(() => {
+		const initialSize = isVertical ? defaultSize.height : defaultSize.width;
+		return toCssSize(initialSize, fallbackExpandedSize);
+	}, [
+		isVertical,
+		defaultSize.height,
+		defaultSize.width,
+		fallbackExpandedSize
+	]);
+	const [resizedExpandedSize, setResizedExpandedSize] = useState({});
+	const expandedOuterSize = controlledExpandedSize ?? (isVertical ? resizedExpandedSize.vertical : resizedExpandedSize.horizontal) ?? defaultExpandedSize;
+	const setExpandedMainSize = useCallback((nextSize) => {
+		if (!usesStableLayout) return;
+		const currentSize = isVertical ? nextSize.height : nextSize.width;
+		if (!currentSize) return;
+		const normalizedSize = toCssSize(currentSize, fallbackExpandedSize);
+		setResizedExpandedSize((state) => isVertical ? {
+			...state,
+			vertical: normalizedSize
+		} : {
+			...state,
+			horizontal: normalizedSize
+		});
+	}, [
+		fallbackExpandedSize,
+		isVertical,
+		usesStableLayout
+	]);
+	const readCurrentSize = useCallback(() => {
+		const rect = resizableRef.current?.resizable?.getBoundingClientRect();
+		if (!rect) return void 0;
+		return isVertical ? {
+			height: rect.height,
+			width: "100%"
+		} : {
+			height: "100%",
+			width: rect.width
+		};
+	}, [isVertical]);
+	const captureInitialExpandedSize = useCallback(() => {
+		if (initialExpandedSizeRef.current) return initialExpandedSizeRef.current;
+		const nextInitialSize = readCurrentSize();
+		if (!nextInitialSize) return void 0;
+		initialExpandedSizeRef.current = nextInitialSize;
+		return nextInitialSize;
+	}, [readCurrentSize]);
+	useEffect(() => {
+		if (!isExpand) return;
+		captureInitialExpandedSize();
+	}, [captureInitialExpandedSize, isExpand]);
+	const toggleExpand = useCallback(() => {
+		if (expandable) setIsExpand(!isExpand);
+	}, [
+		expandable,
+		isExpand,
+		setIsExpand
+	]);
+	const clampResizeSize = useCallback((el) => {
+		const rect = el.getBoundingClientRect();
+		const currentMainSize = isVertical ? rect.height : rect.width;
+		const minMainSize = isVertical ? normalizedMinHeight : normalizedMinWidth;
+		const maxMainSize = isVertical ? normalizedMaxHeight : normalizedMaxWidth;
+		let clampedMainSize = currentMainSize;
+		if (typeof minMainSize === "number") clampedMainSize = Math.max(clampedMainSize, minMainSize);
+		if (typeof maxMainSize === "number") clampedMainSize = Math.min(clampedMainSize, maxMainSize);
+		if (!Number.isFinite(clampedMainSize) || Math.abs(clampedMainSize - currentMainSize) < .5) return {
+			height: el.style.height,
+			width: el.style.width
+		};
+		const width = isVertical ? el.style.width || "100%" : `${clampedMainSize}px`;
+		const height = isVertical ? `${clampedMainSize}px` : el.style.height || "100%";
+		resizableRef.current?.updateSize({
+			height,
+			width
+		});
+		return {
+			height,
+			width
+		};
+	}, [
+		isVertical,
+		normalizedMaxHeight,
+		normalizedMaxWidth,
+		normalizedMinHeight,
+		normalizedMinWidth
+	]);
+	const handleResize = useCallback((_event, _direction, el, delta) => {
+		const nextSize = clampResizeSize(el);
+		const nextCollapsePreview = isBelowCollapseThreshold({
+			axis: isVertical ? "height" : "width",
+			collapseThreshold,
+			size: nextSize
+		});
+		if (usesStableLayout && outerRef.current) {
+			const dimension = isVertical ? nextSize.height : nextSize.width;
+			if (dimension) {
+				const previewDimension = nextCollapsePreview ? "0px" : dimension;
+				if (isVertical) outerRef.current.style.height = previewDimension;
+				else outerRef.current.style.width = previewDimension;
+			}
+		}
+		if (collapseThreshold === void 0) setExpandedMainSize(nextSize);
+		onSizeDragging?.(delta, nextSize);
+	}, [
+		clampResizeSize,
+		collapseThreshold,
+		isVertical,
+		onSizeDragging,
+		setExpandedMainSize,
+		usesStableLayout
+	]);
+	const triggerResetWithoutTransition = useCallback(() => {
+		if (resetTransitionTimeoutRef.current) clearTimeout(resetTransitionTimeoutRef.current);
+		setShouldTransition(false);
+		resetTransitionTimeoutRef.current = setTimeout(() => {
+			setShouldTransition(true);
+		}, 0);
+	}, []);
+	const handleResetSize = useCallback(() => {
+		if (!canResizing) return;
+		const resetSize = captureInitialExpandedSize();
+		if (!resetSize) return;
+		triggerResetWithoutTransition();
+		const rect = resizableRef.current?.resizable?.getBoundingClientRect();
+		const prevMainSize = rect ? isVertical ? rect.height : rect.width : 0;
+		const resetMainSize = isVertical ? resetSize.height : resetSize.width;
+		const nextMainSize = typeof resetMainSize === "number" ? resetMainSize : prevMainSize;
+		resizableRef.current?.updateSize(resetSize);
+		setExpandedMainSize(resetSize);
+		onSizeChange?.(isVertical ? {
+			height: nextMainSize - prevMainSize,
+			width: 0
+		} : {
+			height: 0,
+			width: nextMainSize - prevMainSize
+		}, resetSize);
+	}, [
+		canResizing,
+		captureInitialExpandedSize,
+		isVertical,
+		onSizeChange,
+		setExpandedMainSize,
+		triggerResetWithoutTransition
+	]);
+	const handleResizeStart = useCallback((event) => {
+		if (event.detail === 2) {
+			handleResetSize();
+			return false;
+		}
+		if (resetTransitionTimeoutRef.current) {
+			clearTimeout(resetTransitionTimeoutRef.current);
+			resetTransitionTimeoutRef.current = void 0;
+		}
+		resizeStartSizeRef.current = readCurrentSize();
+		if (usesStableLayout && outerRef.current) outerRef.current.style.transition = "none";
+		setShouldTransition(false);
+		setShowExpand(false);
+	}, [
+		handleResetSize,
+		readCurrentSize,
+		usesStableLayout
+	]);
+	const handleResizeStop = useCallback((_event, _direction, el, delta) => {
+		const nextSize = clampResizeSize(el);
+		const shouldCollapse = isBelowCollapseThreshold({
+			axis: isVertical ? "height" : "width",
+			collapseThreshold,
+			size: nextSize
+		});
+		const committedSize = shouldCollapse ? resizeStartSizeRef.current ?? nextSize : nextSize;
+		resizableRef.current?.updateSize(committedSize);
+		if (!shouldCollapse) setExpandedMainSize(committedSize);
+		setShouldTransition(true);
+		setShowExpand(true);
+		if (usesStableLayout && outerRef.current) {
+			outerRef.current.style.removeProperty("transition");
+			if (shouldCollapse) {
+				if (isVertical) outerRef.current.style.height = "0px";
+				else outerRef.current.style.width = "0px";
+			} else {
+				outerRef.current.style.removeProperty("width");
+				outerRef.current.style.removeProperty("height");
+			}
+		}
+		if (shouldCollapse) setIsExpand(false);
+		resizeStartSizeRef.current = void 0;
+		onSizeChange?.(delta, committedSize);
+	}, [
+		clampResizeSize,
+		collapseThreshold,
+		isVertical,
+		onSizeChange,
+		setExpandedMainSize,
+		setIsExpand,
+		usesStableLayout
+	]);
+	const resizeHandleClassName = useMemo(() => cx(handleVariants({ placement: reversed }), showHandleHighlight && styles.handleHighlight), [reversed, showHandleHighlight]);
+	if (fullscreen) return /* @__PURE__ */ jsx("div", {
+		className: cx(styles.fullscreen, className),
+		style: cssVariables,
+		children
+	});
+	const Arrow = ARROW_MAP[internalPlacement] ?? ChevronLeft;
+	const stableOuterFlex = usesStableLayout ? {
+		display: "flex",
+		flexDirection: "column",
+		minHeight: 0
+	} : {};
+	const sidebarOuterStyle = isVertical ? {
+		height: isExpand ? expandedOuterSize : 0,
+		overflow: "hidden",
+		transition: shouldTransition ? "height 0.2s var(--ant-motion-ease-out, ease)" : "none",
+		width: "100%",
+		...stableOuterFlex
+	} : {
+		overflow: "hidden",
+		transition: shouldTransition ? "width 0.2s var(--ant-motion-ease-out, ease)" : "none",
+		width: isExpand ? expandedOuterSize : 0,
+		...usesStableLayout ? {
+			...stableOuterFlex,
+			flex: 1,
+			minWidth: 0,
+			height: "100%"
+		} : {}
+	};
+	const sidebarInnerStyle = usesStableLayout ? {
+		display: "flex",
+		flex: 1,
+		flexDirection: "column",
+		height: "100%",
+		minHeight: 0,
+		minWidth: 0,
+		width: "100%"
+	} : isVertical ? {
+		height: "100%",
+		width: "100%"
+	} : { width: "100%" };
+	const stableAsideStyle = usesStableLayout ? {
+		display: "flex",
+		flexDirection: "column",
+		minHeight: 0,
+		...mode === "fixed" ? isVertical ? { width: "100%" } : { height: "100%" } : {}
+	} : {};
+	const stableResizableStyle = {
+		display: "flex",
+		flex: 1,
+		flexDirection: "column",
+		height: "100%",
+		minHeight: 0,
+		minWidth: 0,
+		width: "100%"
+	};
+	const panelNode = (!destroyOnClose || isExpand) && /* @__PURE__ */ jsx(Resizable, {
+		ref: resizableRef,
+		...sizeProps,
+		className: cx(styles.panel, classNames?.content),
+		enable: canResizing ? resizing : DISABLED_RESIZING,
+		handleClasses: canResizing ? { [reversed]: resizeHandleClassName } : {},
+		style: {
+			...cssVariables,
+			transition: shouldTransition ? void 0 : "none",
+			...usesStableLayout ? stableResizableStyle : {},
+			...style
+		},
+		onResize: handleResize,
+		onResizeStart: handleResizeStart,
+		onResizeStop: handleResizeStop,
+		children: usesStableLayout ? /* @__PURE__ */ jsx("div", {
+			style: sidebarInnerStyle,
+			children
+		}) : children
+	});
+	return /* @__PURE__ */ jsxs("aside", {
+		dir,
+		ref,
+		style: {
+			...cssVariables,
+			...stableAsideStyle
+		},
+		className: cx(panelVariants({
+			isExpand,
+			mode,
+			placement: internalPlacement,
+			showBorder
+		}), className),
+		children: [expandable && showExpand && /* @__PURE__ */ jsx(Center, {
+			className: toggleVariants({
+				placement: internalPlacement,
+				showHandleWideArea
+			}),
+			style: { opacity: isExpand ? pin ? void 0 : 0 : showHandleWhenCollapsed ? 1 : 0 },
+			children: /* @__PURE__ */ jsx(Center, {
+				className: classNames?.handle,
+				style: customStyles?.handle,
+				onClick: toggleExpand,
+				children: /* @__PURE__ */ jsx(Icon, {
+					className: styles.handlerIcon,
+					icon: Arrow,
+					size: 16,
+					style: {
+						...MARGIN_MAP[internalPlacement],
+						transform: `rotate(${isExpand ? 180 : 0}deg)`,
+						transition: "transform 0.3s ease"
+					}
+				})
+			})
+		}), usesStableLayout ? /* @__PURE__ */ jsx("div", {
+			ref: outerRef,
+			style: sidebarOuterStyle,
+			children: panelNode
+		}) : panelNode]
+	});
+}, isEqual);
+DraggablePanel.displayName = "DraggablePanel";
+//#endregion
+export { DraggablePanel as default };
+
+//# sourceMappingURL=DraggablePanel.mjs.map

package/es/DraggablePanel/DraggablePanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggablePanel.mjs","names":["useControlledState"],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useHover } from 'ahooks';\r\nimport { ConfigProvider } from 'antd';\r\nimport { cx } from 'antd-style';\r\nimport isEqual from 'fast-deep-equal';\r\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';\r\nimport type { Enable, NumberSize, Size } from 're-resizable';\r\nimport { Resizable } from 're-resizable';\r\nimport {\r\n  type CSSProperties,\r\n  memo,\r\n  startTransition,\r\n  use,\r\n  useCallback,\r\n  useEffect,\r\n  useMemo,\r\n  useRef,\r\n  useState,\r\n} from 'react';\r\nimport useControlledState from 'use-merge-value';\r\n\r\nimport { Center } from '@/Flex';\r\nimport Icon from '@/Icon';\r\n\r\nimport { handleVariants, panelVariants, styles, toggleVariants } from './style';\r\nimport type { DraggablePanelProps } from './type';\r\nimport { isBelowCollapseThreshold, reversePlacement } from './utils';\r\n\r\nconst ARROW_MAP = {\r\n  bottom: ChevronUp,\r\n  left: ChevronRight,\r\n  right: ChevronLeft,\r\n  top: ChevronDown,\r\n} as const;\r\n\r\nconst MARGIN_MAP = {\r\n  bottom: { marginTop: 4 },\r\n  left: { marginRight: 4 },\r\n  right: { marginLeft: 4 },\r\n  top: { marginBottom: 4 },\r\n} as const;\r\n\r\nconst DISABLED_RESIZING: Enable = {\r\n  bottom: false,\r\n  bottomLeft: false,\r\n  bottomRight: false,\r\n  left: false,\r\n  right: false,\r\n  top: false,\r\n  topLeft: false,\r\n  topRight: false,\r\n};\r\n\r\nconst toCssSize = (value: string | number | undefined, fallback: string) => {\r\n  if (typeof value === 'number') return `${Math.max(value, 0)}px`;\r\n  if (typeof value === 'string' && value.length > 0) return value;\r\n  return fallback;\r\n};\r\n\r\nconst DraggablePanel = memo<DraggablePanelProps>(\r\n  ({\r\n    headerHeight = 0,\r\n    fullscreen,\r\n    maxHeight,\r\n    pin = true,\r\n    mode = 'fixed',\r\n    children,\r\n    placement = 'right',\r\n    resize,\r\n    style,\r\n    showBorder = true,\r\n    showHandleHighlight = false,\r\n    showHandleWideArea = true,\r\n    backgroundColor,\r\n    collapseThreshold,\r\n    size,\r\n    stableLayout = true,\r\n    defaultSize: customizeDefaultSize,\r\n    minWidth,\r\n    minHeight,\r\n    maxWidth,\r\n    onSizeChange,\r\n    onSizeDragging,\r\n    expandable = true,\r\n    expand,\r\n    defaultExpand = true,\r\n    onExpandChange,\r\n    className,\r\n    showHandleWhenCollapsed,\r\n    destroyOnClose,\r\n    styles: customStyles,\r\n    classNames,\r\n    dir,\r\n  }) => {\r\n    const ref = useRef<HTMLDivElement>(null);\r\n    const isHovering = useHover(ref);\r\n    const isVertical = placement === 'top' || placement === 'bottom';\r\n    const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\r\n    const resetTransitionTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);\r\n    const resizableRef = useRef<Resizable>(null);\r\n    const initialExpandedSizeRef = useRef<Size | undefined>(undefined);\r\n    const resizeStartSizeRef = useRef<Size | undefined>(undefined);\r\n    const outerRef = useRef<HTMLDivElement>(null);\r\n\r\n    const { direction: antdDirection } = use(ConfigProvider.ConfigContext);\r\n    const direction = dir ?? antdDirection;\r\n\r\n    const internalPlacement = useMemo(() => {\r\n      if (direction !== 'rtl') return placement;\r\n      if (placement === 'left') return 'right';\r\n      if (placement === 'right') return 'left';\r\n      return placement;\r\n    }, [direction, placement]);\r\n\r\n    const cssVariables = {\r\n      '--draggable-panel-bg': backgroundColor || '',\r\n      '--draggable-panel-header-height': `${headerHeight}px`,\r\n    } as Record<string, string>;\r\n\r\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\r\n      onChange: onExpandChange,\r\n      value: expand,\r\n    });\r\n\r\n    const [shouldTransition, setShouldTransition] = useState(true);\r\n    const [showExpand, setShowExpand] = useState(true);\r\n    const usesStableLayout = stableLayout || collapseThreshold !== undefined;\r\n\r\n    useEffect(() => {\r\n      if (pin) return;\r\n\r\n      if (hoverTimeoutRef.current) {\r\n        clearTimeout(hoverTimeoutRef.current);\r\n      }\r\n\r\n      if (isHovering && !isExpand) {\r\n        startTransition(() => setIsExpand(true));\r\n      } else if (!isHovering && isExpand) {\r\n        hoverTimeoutRef.current = setTimeout(() => {\r\n          startTransition(() => setIsExpand(false));\r\n        }, 150);\r\n      }\r\n    }, [pin, isHovering, isExpand, setIsExpand]);\r\n\r\n    useEffect(() => {\r\n      return () => {\r\n        if (hoverTimeoutRef.current) {\r\n          clearTimeout(hoverTimeoutRef.current);\r\n        }\r\n        if (resetTransitionTimeoutRef.current) {\r\n          clearTimeout(resetTransitionTimeoutRef.current);\r\n        }\r\n      };\r\n    }, []);\r\n\r\n    useEffect(() => {\r\n      initialExpandedSizeRef.current = undefined;\r\n    }, [internalPlacement]);\r\n\r\n    const reversed = reversePlacement(internalPlacement);\r\n    const canResizing = resize !== false && isExpand;\r\n\r\n    const resizing = useMemo(\r\n      () => ({\r\n        bottom: false,\r\n        bottomLeft: false,\r\n        bottomRight: false,\r\n        left: false,\r\n        right: false,\r\n        top: false,\r\n        topLeft: false,\r\n        topRight: false,\r\n        [reversed]: true,\r\n        ...(resize as Enable),\r\n      }),\r\n      [reversed, resize],\r\n    );\r\n\r\n    const defaultSize: Size = useMemo(() => {\r\n      if (isVertical) return { height: 180, width: '100%', ...customizeDefaultSize };\r\n      return { height: '100%', width: 280, ...customizeDefaultSize };\r\n    }, [isVertical, customizeDefaultSize]);\r\n    const normalizedMaxHeight = typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : undefined;\r\n    const normalizedMaxWidth = typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : undefined;\r\n    const normalizedMinHeight = typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined;\r\n    const normalizedMinWidth = typeof minWidth === 'number' ? Math.max(minWidth, 0) : undefined;\r\n\r\n    const sizeProps = useMemo(() => {\r\n      if (!usesStableLayout && !isExpand) {\r\n        return isVertical\r\n          ? { minHeight: 0, size: { height: 0 } }\r\n          : { minWidth: 0, size: { width: 0 } };\r\n      }\r\n\r\n      return {\r\n        defaultSize,\r\n        maxHeight: normalizedMaxHeight,\r\n        maxWidth: normalizedMaxWidth,\r\n        minHeight: normalizedMinHeight,\r\n        minWidth: normalizedMinWidth,\r\n        size: size as Size,\r\n      };\r\n    }, [\r\n      usesStableLayout,\r\n      isExpand,\r\n      isVertical,\r\n      defaultSize,\r\n      normalizedMaxHeight,\r\n      normalizedMaxWidth,\r\n      normalizedMinHeight,\r\n      normalizedMinWidth,\r\n      size,\r\n    ]);\r\n\r\n    const fallbackExpandedSize = isVertical ? '180px' : '280px';\r\n    const controlledExpandedSize = useMemo(() => {\r\n      const controlledSize = isVertical ? size?.height : size?.width;\r\n      if (controlledSize === undefined) return undefined;\r\n      return toCssSize(controlledSize, fallbackExpandedSize);\r\n    }, [isVertical, size?.height, size?.width, fallbackExpandedSize]);\r\n    const defaultExpandedSize = useMemo(() => {\r\n      const initialSize = isVertical ? defaultSize.height : defaultSize.width;\r\n      return toCssSize(initialSize, fallbackExpandedSize);\r\n    }, [isVertical, defaultSize.height, defaultSize.width, fallbackExpandedSize]);\r\n    const [resizedExpandedSize, setResizedExpandedSize] = useState<{\r\n      horizontal?: string;\r\n      vertical?: string;\r\n    }>({});\r\n    const expandedOuterSize =\r\n      controlledExpandedSize ??\r\n      (isVertical ? resizedExpandedSize.vertical : resizedExpandedSize.horizontal) ??\r\n      defaultExpandedSize;\r\n\r\n    const setExpandedMainSize = useCallback(\r\n      (nextSize: Size) => {\r\n        if (!usesStableLayout) return;\r\n\r\n        const currentSize = isVertical ? nextSize.height : nextSize.width;\r\n        if (!currentSize) return;\r\n\r\n        const normalizedSize = toCssSize(currentSize, fallbackExpandedSize);\r\n        setResizedExpandedSize((state) =>\r\n          isVertical\r\n            ? { ...state, vertical: normalizedSize }\r\n            : { ...state, horizontal: normalizedSize },\r\n        );\r\n      },\r\n      [fallbackExpandedSize, isVertical, usesStableLayout],\r\n    );\r\n\r\n    const readCurrentSize = useCallback((): Size | undefined => {\r\n      const rect = resizableRef.current?.resizable?.getBoundingClientRect();\r\n      if (!rect) return undefined;\r\n\r\n      return isVertical\r\n        ? { height: rect.height, width: '100%' }\r\n        : { height: '100%', width: rect.width };\r\n    }, [isVertical]);\r\n\r\n    const captureInitialExpandedSize = useCallback(() => {\r\n      if (initialExpandedSizeRef.current) return initialExpandedSizeRef.current;\r\n\r\n      const nextInitialSize = readCurrentSize();\r\n      if (!nextInitialSize) return undefined;\r\n\r\n      initialExpandedSizeRef.current = nextInitialSize;\r\n      return nextInitialSize;\r\n    }, [readCurrentSize]);\r\n\r\n    useEffect(() => {\r\n      if (!isExpand) return;\r\n      captureInitialExpandedSize();\r\n    }, [captureInitialExpandedSize, isExpand]);\r\n\r\n    const toggleExpand = useCallback(() => {\r\n      if (expandable) setIsExpand(!isExpand);\r\n    }, [expandable, isExpand, setIsExpand]);\r\n\r\n    const clampResizeSize = useCallback(\r\n      (el: HTMLElement) => {\r\n        const rect = el.getBoundingClientRect();\r\n        const currentMainSize = isVertical ? rect.height : rect.width;\r\n        const minMainSize = isVertical ? normalizedMinHeight : normalizedMinWidth;\r\n        const maxMainSize = isVertical ? normalizedMaxHeight : normalizedMaxWidth;\r\n\r\n        let clampedMainSize = currentMainSize;\r\n        if (typeof minMainSize === 'number')\r\n          clampedMainSize = Math.max(clampedMainSize, minMainSize);\r\n        if (typeof maxMainSize === 'number')\r\n          clampedMainSize = Math.min(clampedMainSize, maxMainSize);\r\n\r\n        if (\r\n          !Number.isFinite(clampedMainSize) ||\r\n          Math.abs(clampedMainSize - currentMainSize) < 0.5\r\n        ) {\r\n          return { height: el.style.height, width: el.style.width };\r\n        }\r\n\r\n        const width = isVertical ? el.style.width || '100%' : `${clampedMainSize}px`;\r\n        const height = isVertical ? `${clampedMainSize}px` : el.style.height || '100%';\r\n        resizableRef.current?.updateSize({ height, width });\r\n\r\n        return { height, width };\r\n      },\r\n      [\r\n        isVertical,\r\n        normalizedMaxHeight,\r\n        normalizedMaxWidth,\r\n        normalizedMinHeight,\r\n        normalizedMinWidth,\r\n      ],\r\n    );\r\n\r\n    const handleResize = useCallback(\r\n      (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\r\n        const nextSize = clampResizeSize(el);\r\n        const nextCollapsePreview = isBelowCollapseThreshold({\r\n          axis: isVertical ? 'height' : 'width',\r\n          collapseThreshold,\r\n          size: nextSize,\r\n        });\r\n\r\n        if (usesStableLayout && outerRef.current) {\r\n          // Sync outer DOM width immediately so it doesn't lag behind the\r\n          // re-resizable inline style (which would otherwise trigger a 0.2s\r\n          // width transition on the outer/aside each frame during drag).\r\n          const dimension = isVertical ? nextSize.height : nextSize.width;\r\n          if (dimension) {\r\n            const previewDimension = nextCollapsePreview ? '0px' : dimension;\r\n            if (isVertical) outerRef.current.style.height = previewDimension;\r\n            else outerRef.current.style.width = previewDimension;\r\n          }\r\n        }\r\n        // With drag-to-collapse enabled, defer the persisted expanded size until\r\n        // pointer release. This keeps the pre-drag width as the single source of\r\n        // truth while the outer stable-layout layer previews collapse/restore.\r\n        if (collapseThreshold === undefined) setExpandedMainSize(nextSize);\r\n        onSizeDragging?.(delta, nextSize);\r\n      },\r\n      [\r\n        clampResizeSize,\r\n        collapseThreshold,\r\n        isVertical,\r\n        onSizeDragging,\r\n        setExpandedMainSize,\r\n        usesStableLayout,\r\n      ],\r\n    );\r\n\r\n    const triggerResetWithoutTransition = useCallback(() => {\r\n      if (resetTransitionTimeoutRef.current) {\r\n        clearTimeout(resetTransitionTimeoutRef.current);\r\n      }\r\n\r\n      setShouldTransition(false);\r\n      resetTransitionTimeoutRef.current = setTimeout(() => {\r\n        setShouldTransition(true);\r\n      }, 0);\r\n    }, []);\r\n\r\n    const handleResetSize = useCallback(() => {\r\n      if (!canResizing) return;\r\n\r\n      const resetSize = captureInitialExpandedSize();\r\n      if (!resetSize) return;\r\n\r\n      triggerResetWithoutTransition();\r\n\r\n      const rect = resizableRef.current?.resizable?.getBoundingClientRect();\r\n      const prevMainSize = rect ? (isVertical ? rect.height : rect.width) : 0;\r\n      const resetMainSize = isVertical ? resetSize.height : resetSize.width;\r\n      const nextMainSize = typeof resetMainSize === 'number' ? resetMainSize : prevMainSize;\r\n\r\n      resizableRef.current?.updateSize(resetSize);\r\n      setExpandedMainSize(resetSize);\r\n\r\n      onSizeChange?.(\r\n        isVertical\r\n          ? { height: nextMainSize - prevMainSize, width: 0 }\r\n          : { height: 0, width: nextMainSize - prevMainSize },\r\n        resetSize,\r\n      );\r\n    }, [\r\n      canResizing,\r\n      captureInitialExpandedSize,\r\n      isVertical,\r\n      onSizeChange,\r\n      setExpandedMainSize,\r\n      triggerResetWithoutTransition,\r\n    ]);\r\n\r\n    const handleResizeStart = useCallback(\r\n      (event: { detail?: number }) => {\r\n        if (event.detail === 2) {\r\n          handleResetSize();\r\n          return false;\r\n        }\r\n\r\n        if (resetTransitionTimeoutRef.current) {\r\n          clearTimeout(resetTransitionTimeoutRef.current);\r\n          resetTransitionTimeoutRef.current = undefined;\r\n        }\r\n\r\n        resizeStartSizeRef.current = readCurrentSize();\r\n\r\n        // Synchronously disable the outer transition so the first drag frame\r\n        // does not animate. `setShouldTransition(false)` below is asynchronous\r\n        // and would only take effect after the next React commit.\r\n        if (usesStableLayout && outerRef.current) {\r\n          outerRef.current.style.transition = 'none';\r\n        }\r\n        setShouldTransition(false);\r\n        setShowExpand(false);\r\n      },\r\n      [handleResetSize, readCurrentSize, usesStableLayout],\r\n    );\r\n\r\n    const handleResizeStop = useCallback(\r\n      (_event: unknown, _direction: unknown, el: HTMLElement, delta: NumberSize) => {\r\n        const nextSize = clampResizeSize(el);\r\n        const shouldCollapse = isBelowCollapseThreshold({\r\n          axis: isVertical ? 'height' : 'width',\r\n          collapseThreshold,\r\n          size: nextSize,\r\n        });\r\n        const committedSize = shouldCollapse ? (resizeStartSizeRef.current ?? nextSize) : nextSize;\r\n\r\n        resizableRef.current?.updateSize(committedSize);\r\n        if (!shouldCollapse) setExpandedMainSize(committedSize);\r\n        setShouldTransition(true);\r\n        setShowExpand(true);\r\n        // Keep the collapsed main-axis size at zero until the controlled\r\n        // `expand=false` value arrives. Clearing it here would reveal the panel\r\n        // for one render between preview teardown and controlled-state commit.\r\n        if (usesStableLayout && outerRef.current) {\r\n          outerRef.current.style.removeProperty('transition');\r\n          if (shouldCollapse) {\r\n            if (isVertical) outerRef.current.style.height = '0px';\r\n            else outerRef.current.style.width = '0px';\r\n          } else {\r\n            outerRef.current.style.removeProperty('width');\r\n            outerRef.current.style.removeProperty('height');\r\n          }\r\n        }\r\n        if (shouldCollapse) setIsExpand(false);\r\n\r\n        resizeStartSizeRef.current = undefined;\r\n        onSizeChange?.(delta, committedSize);\r\n      },\r\n      [\r\n        clampResizeSize,\r\n        collapseThreshold,\r\n        isVertical,\r\n        onSizeChange,\r\n        setExpandedMainSize,\r\n        setIsExpand,\r\n        usesStableLayout,\r\n      ],\r\n    );\r\n\r\n    const resizeHandleClassName = useMemo(\r\n      () =>\r\n        cx(handleVariants({ placement: reversed }), showHandleHighlight && styles.handleHighlight),\r\n      [reversed, showHandleHighlight],\r\n    );\r\n\r\n    if (fullscreen) {\r\n      return (\r\n        <div className={cx(styles.fullscreen, className)} style={cssVariables}>\r\n          {children}\r\n        </div>\r\n      );\r\n    }\r\n\r\n    const Arrow = ARROW_MAP[internalPlacement] ?? ChevronLeft;\r\n    const stableOuterFlex = usesStableLayout\r\n      ? ({\r\n          display: 'flex',\r\n          flexDirection: 'column',\r\n          minHeight: 0,\r\n        } as const)\r\n      : {};\r\n\r\n    const sidebarOuterStyle = isVertical\r\n      ? {\r\n          height: isExpand ? expandedOuterSize : 0,\r\n          overflow: 'hidden',\r\n          transition: shouldTransition ? 'height 0.2s var(--ant-motion-ease-out, ease)' : 'none',\r\n          width: '100%',\r\n          ...stableOuterFlex,\r\n        }\r\n      : {\r\n          overflow: 'hidden',\r\n          transition: shouldTransition ? 'width 0.2s var(--ant-motion-ease-out, ease)' : 'none',\r\n          width: isExpand ? expandedOuterSize : 0,\r\n          ...(usesStableLayout\r\n            ? {\r\n                ...stableOuterFlex,\r\n                flex: 1,\r\n                minWidth: 0,\r\n                height: '100%',\r\n              }\r\n            : {}),\r\n        };\r\n\r\n    const stableInnerStyle: CSSProperties = {\r\n      display: 'flex',\r\n      flex: 1,\r\n      flexDirection: 'column',\r\n      height: '100%',\r\n      minHeight: 0,\r\n      minWidth: 0,\r\n      width: '100%',\r\n    };\r\n    const sidebarInnerStyle: CSSProperties = usesStableLayout\r\n      ? stableInnerStyle\r\n      : isVertical\r\n        ? { height: '100%', width: '100%' }\r\n        : { width: '100%' };\r\n\r\n    const stableAsideFixedSize: CSSProperties = isVertical ? { width: '100%' } : { height: '100%' };\r\n    const stableAsideStyle: CSSProperties = usesStableLayout\r\n      ? {\r\n          display: 'flex',\r\n          flexDirection: 'column',\r\n          minHeight: 0,\r\n          ...(mode === 'fixed' ? stableAsideFixedSize : {}),\r\n        }\r\n      : {};\r\n\r\n    const stableResizableStyle: CSSProperties = {\r\n      display: 'flex',\r\n      flex: 1,\r\n      flexDirection: 'column',\r\n      height: '100%',\r\n      minHeight: 0,\r\n      minWidth: 0,\r\n      width: '100%',\r\n    };\r\n\r\n    const panelNode = (!destroyOnClose || isExpand) && (\r\n      <Resizable\r\n        ref={resizableRef}\r\n        {...sizeProps}\r\n        className={cx(styles.panel, classNames?.content)}\r\n        enable={canResizing ? (resizing as Enable) : DISABLED_RESIZING}\r\n        handleClasses={\r\n          canResizing\r\n            ? {\r\n                [reversed]: resizeHandleClassName,\r\n              }\r\n            : {}\r\n        }\r\n        style={{\r\n          ...cssVariables,\r\n          transition: shouldTransition ? undefined : 'none',\r\n          ...(usesStableLayout ? stableResizableStyle : {}),\r\n          ...style,\r\n        }}\r\n        onResize={handleResize}\r\n        onResizeStart={handleResizeStart}\r\n        onResizeStop={handleResizeStop}\r\n      >\r\n        {usesStableLayout ? <div style={sidebarInnerStyle}>{children}</div> : children}\r\n      </Resizable>\r\n    );\r\n\r\n    return (\r\n      <aside\r\n        dir={dir}\r\n        ref={ref}\r\n        style={{ ...cssVariables, ...stableAsideStyle }}\r\n        className={cx(\r\n          panelVariants({ isExpand, mode, placement: internalPlacement, showBorder }),\r\n          className,\r\n        )}\r\n      >\r\n        {expandable && showExpand && (\r\n          <Center\r\n            className={toggleVariants({ placement: internalPlacement, showHandleWideArea })}\r\n            style={{\r\n              opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0,\r\n            }}\r\n          >\r\n            <Center\r\n              className={classNames?.handle}\r\n              style={customStyles?.handle}\r\n              onClick={toggleExpand}\r\n            >\r\n              <Icon\r\n                className={styles.handlerIcon}\r\n                icon={Arrow}\r\n                size={16}\r\n                style={{\r\n                  ...MARGIN_MAP[internalPlacement],\r\n                  transform: `rotate(${isExpand ? 180 : 0}deg)`,\r\n                  transition: 'transform 0.3s ease',\r\n                }}\r\n              />\r\n            </Center>\r\n          </Center>\r\n        )}\r\n        {usesStableLayout ? (\r\n          <div ref={outerRef} style={sidebarOuterStyle}>\r\n            {panelNode}\r\n          </div>\r\n        ) : (\r\n          panelNode\r\n        )}\r\n      </aside>\r\n    );\r\n  },\r\n  isEqual,\r\n);\r\n\r\nDraggablePanel.displayName = 'DraggablePanel';\r\n\r\nexport default DraggablePanel;\r\n"],"mappings":"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"}

package/es/DraggablePanel/components/DraggablePanelBody.d.mts

@@ -0,0 +1,7 @@
+import { DivProps } from "../../types/index.mjs";
+//#region src/DraggablePanel/components/DraggablePanelBody.d.ts
+type DraggablePanelBodyProps = DivProps;
+declare const DraggablePanelBody: import("react").NamedExoticComponent<DivProps>;
+//#endregion
+export { DraggablePanelBodyProps, DraggablePanelBody as default };
+//# sourceMappingURL=DraggablePanelBody.d.mts.map

package/es/DraggablePanel/components/DraggablePanelBody.mjs

@@ -0,0 +1,19 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/DraggablePanel/components/DraggablePanelBody.tsx
+const DraggablePanelBody = memo(({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		className: cx(styles.body, className),
+		flex: 1,
+		...rest
+	});
+});
+DraggablePanelBody.displayName = "DraggablePanelBody";
+//#endregion
+export { DraggablePanelBody as default };
+
+//# sourceMappingURL=DraggablePanelBody.mjs.map

package/es/DraggablePanel/components/DraggablePanelBody.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggablePanelBody.mjs","names":["Flexbox"],"sources":["../../../src/DraggablePanel/components/DraggablePanelBody.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { memo } from 'react';\r\n\r\nimport { Flexbox } from '@/Flex';\r\nimport { type DivProps } from '@/types';\r\n\r\nimport { styles } from './style';\r\n\r\nexport type DraggablePanelBodyProps = DivProps;\r\n\r\nconst DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, ...rest }) => {\r\n  return <Flexbox className={cx(styles.body, className)} flex={1} {...rest} />;\r\n});\r\n\r\nDraggablePanelBody.displayName = 'DraggablePanelBody';\r\n\r\nexport default DraggablePanelBody;\r\n"],"mappings":";;;;;;;AAYA,MAAM,qBAAqB,MAA+B,EAAE,WAAW,GAAG,WAAW;CACnF,OAAO,oBAACA,mBAAD;EAAS,WAAW,GAAG,OAAO,MAAM,SAAS;EAAG,MAAM;EAAG,GAAI;CAAO,CAAA;AAC7E,CAAC;AAED,mBAAmB,cAAc"}

package/es/DraggablePanel/components/DraggablePanelContainer.d.mts

@@ -0,0 +1,7 @@
+import { DivProps } from "../../types/index.mjs";
+//#region src/DraggablePanel/components/DraggablePanelContainer.d.ts
+type DraggablePanelContainerProps = DivProps;
+declare const DraggablePanelContainer: import("react").NamedExoticComponent<DivProps>;
+//#endregion
+export { DraggablePanelContainerProps, DraggablePanelContainer as default };
+//# sourceMappingURL=DraggablePanelContainer.d.mts.map

package/es/DraggablePanel/components/DraggablePanelContainer.mjs

@@ -0,0 +1,18 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/DraggablePanel/components/DraggablePanelContainer.tsx
+const DraggablePanelContainer = memo(({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		className: cx(styles.container, className),
+		...rest
+	});
+});
+DraggablePanelContainer.displayName = "DraggablePanelContainer";
+//#endregion
+export { DraggablePanelContainer as default };
+
+//# sourceMappingURL=DraggablePanelContainer.mjs.map

package/es/DraggablePanel/components/DraggablePanelContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggablePanelContainer.mjs","names":["Flexbox"],"sources":["../../../src/DraggablePanel/components/DraggablePanelContainer.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { memo } from 'react';\r\n\r\nimport { Flexbox } from '@/Flex';\r\nimport { type DivProps } from '@/types';\r\n\r\nimport { styles } from './style';\r\n\r\nexport type DraggablePanelContainerProps = DivProps;\r\n\r\nconst DraggablePanelContainer = memo<DraggablePanelContainerProps>(({ className, ...rest }) => {\r\n  return <Flexbox className={cx(styles.container, className)} {...rest} />;\r\n});\r\n\r\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\r\n\r\nexport default DraggablePanelContainer;\r\n"],"mappings":";;;;;;;AAYA,MAAM,0BAA0B,MAAoC,EAAE,WAAW,GAAG,WAAW;CAC7F,OAAO,oBAACA,mBAAD;EAAS,WAAW,GAAG,OAAO,WAAW,SAAS;EAAG,GAAI;CAAO,CAAA;AACzE,CAAC;AAED,wBAAwB,cAAc"}

package/es/DraggablePanel/components/DraggablePanelFooter.d.mts

@@ -0,0 +1,7 @@
+import { DivProps } from "../../types/index.mjs";
+//#region src/DraggablePanel/components/DraggablePanelFooter.d.ts
+type DraggablePanelFooterProps = DivProps;
+declare const DraggablePanelFooter: import("react").NamedExoticComponent<DivProps>;
+//#endregion
+export { DraggablePanelFooterProps, DraggablePanelFooter as default };
+//# sourceMappingURL=DraggablePanelFooter.d.mts.map

package/es/DraggablePanel/components/DraggablePanelFooter.mjs

@@ -0,0 +1,23 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { styles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+//#region src/DraggablePanel/components/DraggablePanelFooter.tsx
+const DraggablePanelFooter = memo(({ className, ...rest }) => {
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		horizontal: true,
+		align: "center",
+		className: cx(styles.footer, className),
+		flex: "none",
+		gap: 8,
+		justify: "flex-start",
+		...rest
+	});
+});
+DraggablePanelFooter.displayName = "DraggablePanelFooter";
+//#endregion
+export { DraggablePanelFooter as default };
+
+//# sourceMappingURL=DraggablePanelFooter.mjs.map

package/es/DraggablePanel/components/DraggablePanelFooter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggablePanelFooter.mjs","names":["Flexbox"],"sources":["../../../src/DraggablePanel/components/DraggablePanelFooter.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { memo } from 'react';\r\n\r\nimport { Flexbox } from '@/Flex';\r\nimport { type DivProps } from '@/types';\r\n\r\nimport { styles } from './style';\r\n\r\nexport type DraggablePanelFooterProps = DivProps;\r\n\r\nconst DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => {\r\n  return (\r\n    <Flexbox\r\n      horizontal\r\n      align={'center'}\r\n      className={cx(styles.footer, className)}\r\n      flex={'none'}\r\n      gap={8}\r\n      justify={'flex-start'}\r\n      {...rest}\r\n    />\r\n  );\r\n});\r\n\r\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\r\n\r\nexport default DraggablePanelFooter;\r\n"],"mappings":";;;;;;;AAYA,MAAM,uBAAuB,MAAiC,EAAE,WAAW,GAAG,WAAW;CACvF,OACE,oBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,SAAS;EACtC,MAAM;EACN,KAAK;EACL,SAAS;EACT,GAAI;CACL,CAAA;AAEL,CAAC;AAED,qBAAqB,cAAc"}

package/es/DraggablePanel/components/DraggablePanelHeader.d.mts

@@ -0,0 +1,13 @@
+import { DivProps } from "../../types/index.mjs";
+//#region src/DraggablePanel/components/DraggablePanelHeader.d.ts
+interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {
+  pin?: boolean;
+  position?: 'left' | 'right';
+  setExpand?: (expand: boolean) => void;
+  setPin?: (pin: boolean) => void;
+  title?: string;
+}
+declare const DraggablePanelHeader: import("react").NamedExoticComponent<DraggablePanelHeaderProps>;
+//#endregion
+export { DraggablePanelHeaderProps, DraggablePanelHeader as default };
+//# sourceMappingURL=DraggablePanelHeader.d.mts.map