@lobehub/ui 3.4.2 → 3.4.3

package/es/DraggablePanel/DraggablePanel.mjs

@@ -0,0 +1,312 @@
+'use client';
+
+import Center_default from "../Flex/Center.mjs";
+import Icon_default from "../Icon/Icon.mjs";
+import { useStyles } from "./style.mjs";
+import { reversePlacement } from "./utils.mjs";
+import { ConfigProvider } from "antd";
+import { memo, use, useCallback, useEffect, useMemo, useReducer, useRef, useTransition } from "react";
+import useMergeState from "use-merge-value";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useHover } from "ahooks";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import { Resizable } from "re-resizable";
+
+//#region src/DraggablePanel/DraggablePanel.tsx
+const DEFAULT_HEIGHT = 180;
+const DEFAULT_WIDTH = 280;
+const DEFAULT_HEADER_HEIGHT = 0;
+const DEFAULT_PIN = true;
+const DEFAULT_MODE = "fixed";
+const DEFAULT_EXPANDABLE = true;
+const DEFAULT_EXPAND = true;
+const DEFAULT_SHOW_HANDLE_WIDE_AREA = true;
+function draggablePanelReducer(state, action) {
+	switch (action.type) {
+		case "START_RESIZE": return {
+			...state,
+			isResizing: true,
+			showExpand: false
+		};
+		case "STOP_RESIZE": return {
+			...state,
+			isResizing: false,
+			showExpand: true
+		};
+		case "SET_SHOW_EXPAND": return {
+			...state,
+			showExpand: action.payload
+		};
+		default: return state;
+	}
+}
+const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen, maxHeight, pin = DEFAULT_PIN, mode = DEFAULT_MODE, children, placement = "right", resize, style, showBorder = true, showHandleHighlight = false, showHandleWideArea = DEFAULT_SHOW_HANDLE_WIDE_AREA, backgroundColor, size, defaultSize: customizeDefaultSize, minWidth, minHeight, maxWidth, onSizeChange, onSizeDragging, expandable = DEFAULT_EXPANDABLE, expand, defaultExpand = DEFAULT_EXPAND, onExpandChange, className, showHandleWhenCollapsed, destroyOnClose, styles: customStyles, classNames, dir }) => {
+	const ref = useRef(null);
+	const isHovering = useHover(ref);
+	const isVertical = placement === "top" || placement === "bottom";
+	const [isPending, startTransition] = useTransition();
+	const hoverTimeoutRef = useRef(void 0);
+	const { direction: antdDirection } = use(ConfigProvider.ConfigContext);
+	const direction = dir ?? antdDirection;
+	const internalPlacement = useMemo(() => {
+		return direction === "rtl" && ["left", "right"].includes(placement) ? placement === "left" ? "right" : "left" : placement;
+	}, [direction, placement]);
+	const { styles, cx } = useStyles({
+		backgroundColor,
+		headerHeight,
+		showBorder,
+		showHandleWideArea
+	});
+	const [isExpand, setIsExpand] = useMergeState(defaultExpand, {
+		onChange: onExpandChange,
+		value: expand
+	});
+	const [state, dispatch] = useReducer(draggablePanelReducer, {
+		isResizing: false,
+		showExpand: true
+	});
+	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);
+		};
+	}, []);
+	const canResizing = resize !== false && isExpand;
+	const variants = useMemo(() => cva(styles.root, {
+		compoundVariants: [
+			{
+				class: styles.bottomFloat,
+				mode: "float",
+				placement: "bottom"
+			},
+			{
+				class: styles.topFloat,
+				mode: "float",
+				placement: "top"
+			},
+			{
+				class: styles.leftFloat,
+				mode: "float",
+				placement: "left"
+			},
+			{
+				class: styles.rightFloat,
+				mode: "float",
+				placement: "right"
+			}
+		],
+		variants: {
+			placement: {
+				top: isExpand && styles.borderBottom,
+				right: isExpand && styles.borderLeft,
+				bottom: isExpand && styles.borderTop,
+				left: isExpand && styles.borderRight
+			},
+			mode: {
+				fixed: styles.fixed,
+				float: null
+			}
+		}
+	}), [styles, isExpand]);
+	const handleVariants = useMemo(() => cva(styles.handleRoot, { variants: { placement: {
+		bottom: styles.handleBottom,
+		left: styles.handleLeft,
+		right: styles.handleRight,
+		top: styles.handleTop
+	} } }), [styles]);
+	const toggleVariants = useMemo(() => cva(styles.toggleRoot, { variants: { placement: {
+		bottom: styles.toggleTop,
+		left: styles.toggleRight,
+		right: styles.toggleLeft,
+		top: styles.toggleBottom
+	} } }), [styles]);
+	const resizing = useMemo(() => ({
+		bottom: false,
+		bottomLeft: false,
+		bottomRight: false,
+		left: false,
+		right: false,
+		top: false,
+		topLeft: false,
+		topRight: false,
+		[reversePlacement(internalPlacement)]: true,
+		...resize
+	}), [internalPlacement, resize]);
+	const defaultSize = useMemo(() => {
+		if (isVertical) return {
+			height: DEFAULT_HEIGHT,
+			width: "100%",
+			...customizeDefaultSize
+		};
+		return {
+			height: "100%",
+			width: DEFAULT_WIDTH,
+			...customizeDefaultSize
+		};
+	}, [isVertical, customizeDefaultSize]);
+	const sizeProps = useMemo(() => {
+		if (!isExpand) return isVertical ? {
+			minHeight: 0,
+			size: { height: 0 }
+		} : {
+			minWidth: 0,
+			size: { width: 0 }
+		};
+		return {
+			defaultSize,
+			maxHeight: typeof maxHeight === "number" ? Math.max(maxHeight, 0) : maxHeight,
+			maxWidth: typeof maxWidth === "number" ? Math.max(maxWidth, 0) : maxWidth,
+			minHeight: typeof minHeight === "number" ? Math.max(minHeight, 0) : minHeight,
+			minWidth: typeof minWidth === "number" ? Math.max(minWidth, 0) : minWidth,
+			size
+		};
+	}, [
+		isExpand,
+		isVertical,
+		defaultSize,
+		maxHeight,
+		maxWidth,
+		minHeight,
+		minWidth,
+		size
+	]);
+	const Arrow = useMemo(() => {
+		switch (internalPlacement) {
+			case "top": return ChevronDown;
+			case "bottom": return ChevronUp;
+			case "right": return ChevronLeft;
+			case "left": return ChevronRight;
+			default: return ChevronLeft;
+		}
+	}, [internalPlacement]);
+	const toggleExpand = useCallback(() => {
+		if (!expandable) return;
+		startTransition(() => {
+			setIsExpand(!isExpand);
+		});
+	}, [
+		expandable,
+		isExpand,
+		setIsExpand
+	]);
+	const handle = useMemo(() => /* @__PURE__ */ jsx(Center_default, {
+		className: toggleVariants({ placement: internalPlacement }),
+		style: { opacity: isExpand ? pin ? void 0 : 0 : showHandleWhenCollapsed ? 1 : 0 },
+		children: /* @__PURE__ */ jsx(Center_default, {
+			className: classNames?.handle,
+			onClick: toggleExpand,
+			style: customStyles?.handle,
+			children: /* @__PURE__ */ jsx(Icon_default, {
+				className: styles.handlerIcon,
+				icon: Arrow,
+				size: 16,
+				style: {
+					marginBottom: internalPlacement === "top" ? 4 : 0,
+					marginLeft: internalPlacement === "right" ? 4 : 0,
+					marginRight: internalPlacement === "left" ? 4 : 0,
+					marginTop: internalPlacement === "bottom" ? 4 : 0,
+					transform: `rotate(${isExpand ? 180 : 0}deg)`,
+					transition: "transform 0.3s ease"
+				}
+			})
+		})
+	}), [
+		toggleVariants,
+		internalPlacement,
+		isExpand,
+		pin,
+		showHandleWhenCollapsed,
+		classNames?.handle,
+		toggleExpand,
+		customStyles?.handle,
+		styles.handlerIcon,
+		Arrow
+	]);
+	const handleResize = useCallback((_, _direction, reference_, delta) => {
+		onSizeDragging?.(delta, {
+			height: reference_.style.height,
+			width: reference_.style.width
+		});
+	}, [onSizeDragging]);
+	const handleResizeStart = useCallback(() => {
+		dispatch({ type: "START_RESIZE" });
+	}, []);
+	const handleResizeStop = useCallback((e, direction$1, reference_, delta) => {
+		dispatch({ type: "STOP_RESIZE" });
+		onSizeChange?.(delta, {
+			height: reference_.style.height,
+			width: reference_.style.width
+		});
+	}, [onSizeChange]);
+	const inner = useMemo(() => /* @__PURE__ */ jsx(Resizable, {
+		...sizeProps,
+		className: cx(styles.panel, classNames?.content),
+		enable: canResizing ? resizing : void 0,
+		handleClasses: canResizing ? { [reversePlacement(internalPlacement)]: cx(handleVariants({ placement: reversePlacement(internalPlacement) }), showHandleHighlight && styles.handleHighlight) } : {},
+		onResize: handleResize,
+		onResizeStart: handleResizeStart,
+		onResizeStop: handleResizeStop,
+		style: {
+			opacity: isPending ? .95 : 1,
+			transition: state.isResizing ? "unset" : void 0,
+			...style
+		},
+		children
+	}), [
+		sizeProps,
+		styles.panel,
+		classNames?.content,
+		canResizing,
+		resizing,
+		internalPlacement,
+		handleVariants,
+		showHandleHighlight,
+		styles.handleHighlight,
+		handleResize,
+		handleResizeStart,
+		handleResizeStop,
+		state.isResizing,
+		isPending,
+		style,
+		children,
+		cx
+	]);
+	if (fullscreen) return /* @__PURE__ */ jsx("div", {
+		className: cx(styles.fullscreen, className),
+		children
+	});
+	return /* @__PURE__ */ jsxs("aside", {
+		className: cx(variants({
+			mode,
+			placement: internalPlacement
+		}), className),
+		dir,
+		ref,
+		children: [expandable && state.showExpand && handle, destroyOnClose ? isExpand && inner : inner]
+	});
+}, (prevProps, nextProps) => {
+	return prevProps.placement === nextProps.placement && prevProps.mode === nextProps.mode && prevProps.expand === nextProps.expand && prevProps.pin === nextProps.pin && prevProps.fullscreen === nextProps.fullscreen && prevProps.size === nextProps.size && prevProps.defaultSize === nextProps.defaultSize && prevProps.minWidth === nextProps.minWidth && prevProps.minHeight === nextProps.minHeight && prevProps.maxWidth === nextProps.maxWidth && prevProps.maxHeight === nextProps.maxHeight && prevProps.expandable === nextProps.expandable && prevProps.resize === nextProps.resize && prevProps.showHandleWhenCollapsed === nextProps.showHandleWhenCollapsed && prevProps.destroyOnClose === nextProps.destroyOnClose && prevProps.showBorder === nextProps.showBorder && prevProps.showHandleHighlight === nextProps.showHandleHighlight && prevProps.showHandleWideArea === nextProps.showHandleWideArea && prevProps.backgroundColor === nextProps.backgroundColor && prevProps.className === nextProps.className && prevProps.dir === nextProps.dir && prevProps.headerHeight === nextProps.headerHeight && prevProps.onSizeChange === nextProps.onSizeChange && prevProps.onSizeDragging === nextProps.onSizeDragging && prevProps.onExpandChange === nextProps.onExpandChange && prevProps.children === nextProps.children;
+});
+DraggablePanel.displayName = "DraggablePanel";
+var DraggablePanel_default = DraggablePanel;
+
+//#endregion
+export { DraggablePanel_default as default };
+//# sourceMappingURL=DraggablePanel.mjs.map

package/es/DraggablePanel/DraggablePanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggablePanel.mjs","names":["useControlledState","defaultSize: Size","Center","Icon"],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { ConfigProvider } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';\nimport type { Enable, NumberSize, Size } from 're-resizable';\nimport { Resizable } from 're-resizable';\nimport {\n  memo,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useTransition,\n} from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { Center } from '@/Flex';\nimport Icon from '@/Icon';\n\nimport { useStyles } from './style';\nimport type { DraggablePanelProps } from './type';\nimport { reversePlacement } from './utils';\n\n// Constants\nconst DEFAULT_HEIGHT = 180;\nconst DEFAULT_WIDTH = 280;\nconst DEFAULT_HEADER_HEIGHT = 0;\nconst DEFAULT_PIN = true;\nconst DEFAULT_MODE = 'fixed';\nconst DEFAULT_EXPANDABLE = true;\nconst DEFAULT_EXPAND = true;\nconst DEFAULT_SHOW_HANDLE_WIDE_AREA = true;\n\n// State reducer for better state management\ninterface DraggablePanelState {\n  isResizing: boolean;\n  showExpand: boolean;\n}\n\ntype DraggablePanelAction =\n  | { type: 'START_RESIZE' }\n  | { type: 'STOP_RESIZE' }\n  | { payload: boolean; type: 'SET_SHOW_EXPAND' };\n\nfunction draggablePanelReducer(\n  state: DraggablePanelState,\n  action: DraggablePanelAction,\n): DraggablePanelState {\n  switch (action.type) {\n    case 'START_RESIZE': {\n      return { ...state, isResizing: true, showExpand: false };\n    }\n    case 'STOP_RESIZE': {\n      return { ...state, isResizing: false, showExpand: true };\n    }\n    case 'SET_SHOW_EXPAND': {\n      return { ...state, showExpand: action.payload };\n    }\n    default: {\n      return state;\n    }\n  }\n}\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n  ({\n    headerHeight = DEFAULT_HEADER_HEIGHT,\n    fullscreen,\n    maxHeight,\n    pin = DEFAULT_PIN,\n    mode = DEFAULT_MODE,\n    children,\n    placement = 'right',\n    resize,\n    style,\n    showBorder = true,\n    showHandleHighlight = false,\n    showHandleWideArea = DEFAULT_SHOW_HANDLE_WIDE_AREA,\n    backgroundColor,\n    size,\n    defaultSize: customizeDefaultSize,\n    minWidth,\n    minHeight,\n    maxWidth,\n    onSizeChange,\n    onSizeDragging,\n    expandable = DEFAULT_EXPANDABLE,\n    expand,\n    defaultExpand = DEFAULT_EXPAND,\n    onExpandChange,\n    className,\n    showHandleWhenCollapsed,\n    destroyOnClose,\n    styles: customStyles,\n    classNames,\n    dir,\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const isHovering = useHover(ref);\n    const isVertical = placement === 'top' || placement === 'bottom';\n    const [isPending, startTransition] = useTransition();\n\n    // Use ref for hover timeout to avoid memory leaks\n    const hoverTimeoutRef = useRef<any>(undefined);\n\n    // inherit direction from Ant Design ConfigProvider\n    const { direction: antdDirection } = use(ConfigProvider.ConfigContext);\n    const direction = dir ?? antdDirection;\n\n    // Handle RTL direction\n    const internalPlacement = useMemo(() => {\n      return direction === 'rtl' && ['left', 'right'].includes(placement)\n        ? placement === 'left'\n          ? 'right'\n          : 'left'\n        : placement;\n    }, [direction, placement]);\n\n    const { styles, cx } = useStyles({\n      backgroundColor,\n      headerHeight,\n      showBorder,\n      showHandleWideArea,\n    });\n\n    const [isExpand, setIsExpand] = useControlledState(defaultExpand, {\n      onChange: onExpandChange,\n      value: expand,\n    });\n\n    // Initialize state with useReducer for better performance\n    const initialState: DraggablePanelState = {\n      isResizing: false,\n      showExpand: true,\n    };\n\n    const [state, dispatch] = useReducer(draggablePanelReducer, initialState);\n\n    // Auto-expand on hover if not pinned with optimized transition\n    useEffect(() => {\n      if (pin) return;\n\n      // Clear previous timeout\n      if (hoverTimeoutRef.current) {\n        clearTimeout(hoverTimeoutRef.current);\n      }\n\n      if (isHovering && !isExpand) {\n        startTransition(() => {\n          setIsExpand(true);\n        });\n      } else if (!isHovering && isExpand) {\n        // Add a small delay before collapsing to prevent flickering\n        hoverTimeoutRef.current = setTimeout(() => {\n          startTransition(() => {\n            setIsExpand(false);\n          });\n        }, 150);\n      }\n    }, [pin, isHovering, isExpand, setIsExpand]);\n\n    // Cleanup timeout on unmount\n    useEffect(() => {\n      return () => {\n        if (hoverTimeoutRef.current) {\n          clearTimeout(hoverTimeoutRef.current);\n        }\n      };\n    }, []);\n\n    const canResizing = resize !== false && isExpand;\n\n    // Style variants for the panel\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          compoundVariants: [\n            {\n              class: styles.bottomFloat,\n              mode: 'float',\n              placement: 'bottom',\n            },\n            {\n              class: styles.topFloat,\n              mode: 'float',\n              placement: 'top',\n            },\n            {\n              class: styles.leftFloat,\n              mode: 'float',\n              placement: 'left',\n            },\n            {\n              class: styles.rightFloat,\n              mode: 'float',\n              placement: 'right',\n            },\n          ],\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            placement: {\n              top: isExpand && styles.borderBottom,\n              right: isExpand && styles.borderLeft,\n              bottom: isExpand && styles.borderTop,\n              left: isExpand && styles.borderRight,\n            },\n            mode: {\n              fixed: styles.fixed,\n              float: null,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles, isExpand],\n    );\n\n    // Style variants for the handle\n    const handleVariants = useMemo(\n      () =>\n        cva(styles.handleRoot, {\n          variants: {\n            placement: {\n              bottom: styles.handleBottom,\n              left: styles.handleLeft,\n              right: styles.handleRight,\n              top: styles.handleTop,\n            },\n          },\n        }),\n      [styles],\n    );\n\n    // Style variants for the toggle button\n    const toggleVariants = useMemo(\n      () =>\n        cva(styles.toggleRoot, {\n          variants: {\n            placement: {\n              bottom: styles.toggleTop,\n              left: styles.toggleRight,\n              right: styles.toggleLeft,\n              top: styles.toggleBottom,\n            },\n          },\n        }),\n      [styles],\n    );\n\n    // Configure resizing handles\n    const resizing = useMemo(\n      () => ({\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: false,\n        right: false,\n        top: false,\n        topLeft: false,\n        topRight: false,\n        [reversePlacement(internalPlacement)]: true,\n        ...(resize as Enable),\n      }),\n      [internalPlacement, resize],\n    );\n\n    // Calculate default size based on orientation\n    const defaultSize: Size = useMemo(() => {\n      if (isVertical)\n        return {\n          height: DEFAULT_HEIGHT,\n          width: '100%',\n          ...customizeDefaultSize,\n        };\n\n      return {\n        height: '100%',\n        width: DEFAULT_WIDTH,\n        ...customizeDefaultSize,\n      };\n    }, [isVertical, customizeDefaultSize]);\n\n    // Determine appropriate size props based on expand state\n    const sizeProps = useMemo(() => {\n      if (!isExpand) {\n        return isVertical\n          ? { minHeight: 0, size: { height: 0 } }\n          : { minWidth: 0, size: { width: 0 } };\n      }\n\n      return {\n        defaultSize,\n        maxHeight: typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : maxHeight,\n        maxWidth: typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : maxWidth,\n        minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : minHeight,\n        minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : minWidth,\n        size: size as Size,\n      };\n    }, [isExpand, isVertical, defaultSize, maxHeight, maxWidth, minHeight, minWidth, size]);\n\n    // Determine the appropriate arrow icon based on placement\n    const Arrow = useMemo(() => {\n      switch (internalPlacement) {\n        case 'top': {\n          return ChevronDown;\n        }\n        case 'bottom': {\n          return ChevronUp;\n        }\n        case 'right': {\n          return ChevronLeft;\n        }\n        case 'left': {\n          return ChevronRight;\n        }\n        default: {\n          return ChevronLeft;\n        }\n      }\n    }, [internalPlacement]);\n\n    // Toggle expand state with transition for better performance\n    const toggleExpand = useCallback(() => {\n      if (!expandable) return;\n\n      startTransition(() => {\n        setIsExpand(!isExpand);\n      });\n    }, [expandable, isExpand, setIsExpand]);\n\n    // Toggle handle component\n    const handle = useMemo(\n      () => (\n        <Center\n          className={toggleVariants({ placement: internalPlacement })}\n          style={{ opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0 }}\n        >\n          <Center\n            className={classNames?.handle}\n            onClick={toggleExpand}\n            style={customStyles?.handle}\n          >\n            <Icon\n              className={styles.handlerIcon}\n              icon={Arrow}\n              size={16}\n              style={{\n                marginBottom: internalPlacement === 'top' ? 4 : 0,\n                marginLeft: internalPlacement === 'right' ? 4 : 0,\n                marginRight: internalPlacement === 'left' ? 4 : 0,\n                marginTop: internalPlacement === 'bottom' ? 4 : 0,\n                transform: `rotate(${isExpand ? 180 : 0}deg)`,\n                transition: 'transform 0.3s ease',\n              }}\n            />\n          </Center>\n        </Center>\n      ),\n      [\n        toggleVariants,\n        internalPlacement,\n        isExpand,\n        pin,\n        showHandleWhenCollapsed,\n        classNames?.handle,\n        toggleExpand,\n        customStyles?.handle,\n        styles.handlerIcon,\n        Arrow,\n      ],\n    );\n\n    // Handle resize events with memoization\n    const handleResize = useCallback(\n      (_: unknown, _direction: unknown, reference_: HTMLElement, delta: NumberSize) => {\n        onSizeDragging?.(delta, {\n          height: reference_.style.height,\n          width: reference_.style.width,\n        });\n      },\n      [onSizeDragging],\n    );\n\n    const handleResizeStart = useCallback(() => {\n      dispatch({ type: 'START_RESIZE' });\n    }, []);\n\n    const handleResizeStop = useCallback(\n      (e: unknown, direction: unknown, reference_: HTMLElement, delta: NumberSize) => {\n        dispatch({ type: 'STOP_RESIZE' });\n        onSizeChange?.(delta, {\n          height: reference_.style.height,\n          width: reference_.style.width,\n        });\n      },\n      [onSizeChange],\n    );\n\n    // Main panel content\n    const inner = useMemo(\n      () => (\n        <Resizable\n          {...sizeProps}\n          className={cx(styles.panel, classNames?.content)}\n          enable={canResizing ? (resizing as Enable) : undefined}\n          handleClasses={\n            canResizing\n              ? {\n                  [reversePlacement(internalPlacement)]: cx(\n                    handleVariants({\n                      placement: reversePlacement(internalPlacement),\n                    }),\n                    showHandleHighlight && styles.handleHighlight,\n                  ),\n                }\n              : {}\n          }\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\n          style={{\n            opacity: isPending ? 0.95 : 1,\n            transition: state.isResizing ? 'unset' : undefined,\n            ...style,\n          }}\n        >\n          {children}\n        </Resizable>\n      ),\n      [\n        sizeProps,\n        styles.panel,\n        classNames?.content,\n        canResizing,\n        resizing,\n        internalPlacement,\n        handleVariants,\n        showHandleHighlight,\n        styles.handleHighlight,\n        handleResize,\n        handleResizeStart,\n        handleResizeStop,\n        state.isResizing,\n        isPending,\n        style,\n        children,\n        cx,\n      ],\n    );\n\n    // For fullscreen mode, return a simpler layout\n    if (fullscreen) {\n      return <div className={cx(styles.fullscreen, className)}>{children}</div>;\n    }\n\n    return (\n      <aside\n        className={cx(variants({ mode, placement: internalPlacement }), className)}\n        dir={dir}\n        ref={ref}\n      >\n        {expandable && state.showExpand && handle}\n        {destroyOnClose ? isExpand && inner : inner}\n      </aside>\n    );\n  },\n  // Custom comparison function to avoid unnecessary re-renders\n  (prevProps, nextProps) => {\n    // Only re-render if critical props change\n    return (\n      prevProps.placement === nextProps.placement &&\n      prevProps.mode === nextProps.mode &&\n      prevProps.expand === nextProps.expand &&\n      prevProps.pin === nextProps.pin &&\n      prevProps.fullscreen === nextProps.fullscreen &&\n      prevProps.size === nextProps.size &&\n      prevProps.defaultSize === nextProps.defaultSize &&\n      prevProps.minWidth === nextProps.minWidth &&\n      prevProps.minHeight === nextProps.minHeight &&\n      prevProps.maxWidth === nextProps.maxWidth &&\n      prevProps.maxHeight === nextProps.maxHeight &&\n      prevProps.expandable === nextProps.expandable &&\n      prevProps.resize === nextProps.resize &&\n      prevProps.showHandleWhenCollapsed === nextProps.showHandleWhenCollapsed &&\n      prevProps.destroyOnClose === nextProps.destroyOnClose &&\n      prevProps.showBorder === nextProps.showBorder &&\n      prevProps.showHandleHighlight === nextProps.showHandleHighlight &&\n      prevProps.showHandleWideArea === nextProps.showHandleWideArea &&\n      prevProps.backgroundColor === nextProps.backgroundColor &&\n      prevProps.className === nextProps.className &&\n      prevProps.dir === nextProps.dir &&\n      prevProps.headerHeight === nextProps.headerHeight &&\n      prevProps.onSizeChange === nextProps.onSizeChange &&\n      prevProps.onSizeDragging === nextProps.onSizeDragging &&\n      prevProps.onExpandChange === nextProps.onExpandChange &&\n      prevProps.children === nextProps.children\n    );\n  },\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":"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"}

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

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

package/es/DraggablePanel/components/DraggablePanelBody.mjs

@@ -0,0 +1,22 @@
+'use client';
+
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useStyles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/DraggablePanel/components/DraggablePanelBody.tsx
+const DraggablePanelBody = memo(({ className, ...rest }) => {
+	const { cx, styles } = useStyles();
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		className: cx(styles.body, className),
+		flex: 1,
+		...rest
+	});
+});
+DraggablePanelBody.displayName = "DraggablePanelBody";
+var DraggablePanelBody_default = DraggablePanelBody;
+
+//#endregion
+export { DraggablePanelBody_default 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';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { type DivProps } from '@/types';\n\nimport { useStyles } from './style';\n\nexport type DraggablePanelBodyProps = DivProps;\n\nconst DraggablePanelBody = memo<DraggablePanelBodyProps>(({ className, ...rest }) => {\n  const { cx, styles } = useStyles();\n  return <Flexbox className={cx(styles.body, className)} flex={1} {...rest} />;\n});\n\nDraggablePanelBody.displayName = 'DraggablePanelBody';\n\nexport default DraggablePanelBody;\n"],"mappings":";;;;;;;;AAWA,MAAM,qBAAqB,MAA+B,EAAE,WAAW,GAAG,WAAW;CACnF,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QAAO,oBAACA;EAAQ,WAAW,GAAG,OAAO,MAAM,UAAU;EAAE,MAAM;EAAG,GAAI;GAAQ;EAC5E;AAEF,mBAAmB,cAAc;AAEjC,iCAAe"}

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

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

package/es/DraggablePanel/components/DraggablePanelContainer.mjs

@@ -0,0 +1,21 @@
+'use client';
+
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useStyles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/DraggablePanel/components/DraggablePanelContainer.tsx
+const DraggablePanelContainer = memo(({ className, ...rest }) => {
+	const { cx, styles } = useStyles();
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		className: cx(styles.container, className),
+		...rest
+	});
+});
+DraggablePanelContainer.displayName = "DraggablePanelContainer";
+var DraggablePanelContainer_default = DraggablePanelContainer;
+
+//#endregion
+export { DraggablePanelContainer_default 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';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { type DivProps } from '@/types';\n\nimport { useStyles } from './style';\n\nexport type DraggablePanelContainerProps = DivProps;\n\nconst DraggablePanelContainer = memo<DraggablePanelContainerProps>(({ className, ...rest }) => {\n  const { cx, styles } = useStyles();\n  return <Flexbox className={cx(styles.container, className)} {...rest} />;\n});\n\nDraggablePanelContainer.displayName = 'DraggablePanelContainer';\n\nexport default DraggablePanelContainer;\n"],"mappings":";;;;;;;;AAWA,MAAM,0BAA0B,MAAoC,EAAE,WAAW,GAAG,WAAW;CAC7F,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QAAO,oBAACA;EAAQ,WAAW,GAAG,OAAO,WAAW,UAAU;EAAE,GAAI;GAAQ;EACxE;AAEF,wBAAwB,cAAc;AAEtC,sCAAe"}

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

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

package/es/DraggablePanel/components/DraggablePanelFooter.mjs

@@ -0,0 +1,26 @@
+'use client';
+
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { useStyles } from "./style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/DraggablePanel/components/DraggablePanelFooter.tsx
+const DraggablePanelFooter = memo(({ className, ...rest }) => {
+	const { cx, styles } = useStyles();
+	return /* @__PURE__ */ jsx(FlexBasic_default, {
+		align: "center",
+		className: cx(styles.footer, className),
+		flex: "none",
+		gap: 8,
+		horizontal: true,
+		justify: "flex-start",
+		...rest
+	});
+});
+DraggablePanelFooter.displayName = "DraggablePanelFooter";
+var DraggablePanelFooter_default = DraggablePanelFooter;
+
+//#endregion
+export { DraggablePanelFooter_default 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';\n\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport { type DivProps } from '@/types';\n\nimport { useStyles } from './style';\n\nexport type DraggablePanelFooterProps = DivProps;\n\nconst DraggablePanelFooter = memo<DraggablePanelFooterProps>(({ className, ...rest }) => {\n  const { cx, styles } = useStyles();\n  return (\n    <Flexbox\n      align={'center'}\n      className={cx(styles.footer, className)}\n      flex={'none'}\n      gap={8}\n      horizontal\n      justify={'flex-start'}\n      {...rest}\n    />\n  );\n});\n\nDraggablePanelFooter.displayName = 'DraggablePanelFooter';\n\nexport default DraggablePanelFooter;\n"],"mappings":";;;;;;;;AAWA,MAAM,uBAAuB,MAAiC,EAAE,WAAW,GAAG,WAAW;CACvF,MAAM,EAAE,IAAI,WAAW,WAAW;AAClC,QACE,oBAACA;EACC,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,MAAM;EACN,KAAK;EACL;EACA,SAAS;EACT,GAAI;GACJ;EAEJ;AAEF,qBAAqB,cAAc;AAEnC,mCAAe"}

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

@@ -0,0 +1,15 @@
+import { DivProps } from "../../types/index.mjs";
+import * as react42 from "react";
+
+//#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: react42.NamedExoticComponent<DraggablePanelHeaderProps>;
+//#endregion
+export { DraggablePanelHeader, DraggablePanelHeaderProps };
+//# sourceMappingURL=DraggablePanelHeader.d.mts.map

package/es/DraggablePanel/components/DraggablePanelHeader.mjs

@@ -0,0 +1,50 @@
+'use client';
+
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import ActionIcon_default from "../../ActionIcon/ActionIcon.mjs";
+import { useStyles } from "./style.mjs";
+import { memo } from "react";
+import useMergeState from "use-merge-value";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PanelLeft, Pin, PinOff } from "lucide-react";
+
+//#region src/DraggablePanel/components/DraggablePanelHeader.tsx
+const DraggablePanelHeader = memo((props) => {
+	const { pin, setPin, className, setExpand, title, position = "left", ...rest } = props;
+	const { cx, styles } = useStyles();
+	const [isPinned, setIsPinned] = useMergeState(false, {
+		onChange: setPin,
+		value: pin
+	});
+	const panelIcon = /* @__PURE__ */ jsx(ActionIcon_default, {
+		icon: PanelLeft,
+		onClick: () => setExpand?.(false),
+		size: "small"
+	});
+	const pinIcon = /* @__PURE__ */ jsx(ActionIcon_default, {
+		active: pin,
+		icon: pin ? Pin : PinOff,
+		onClick: () => setIsPinned(!isPinned),
+		size: "small"
+	});
+	return /* @__PURE__ */ jsxs(FlexBasic_default, {
+		align: "center",
+		className: cx(styles.header, className),
+		flex: "none",
+		gap: 8,
+		horizontal: true,
+		justify: "space-between",
+		...rest,
+		children: [
+			position === "left" ? panelIcon : pinIcon,
+			title,
+			position === "left" ? pinIcon : panelIcon
+		]
+	});
+});
+DraggablePanelHeader.displayName = "DraggablePanelHeader";
+var DraggablePanelHeader_default = DraggablePanelHeader;
+
+//#endregion
+export { DraggablePanelHeader_default as default };
+//# sourceMappingURL=DraggablePanelHeader.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DraggablePanelHeader.mjs","names":["useControlledState","ActionIcon","Flexbox"],"sources":["../../../src/DraggablePanel/components/DraggablePanelHeader.tsx"],"sourcesContent":["'use client';\n\nimport { PanelLeft, Pin, PinOff } from 'lucide-react';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { type DivProps } from '@/types';\n\nimport { useStyles } from './style';\n\nexport interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {\n  pin?: boolean;\n  position?: 'left' | 'right';\n  setExpand?: (expand: boolean) => void;\n  setPin?: (pin: boolean) => void;\n  title?: string;\n}\n\nconst DraggablePanelHeader = memo<DraggablePanelHeaderProps>((props) => {\n  const { pin, setPin, className, setExpand, title, position = 'left', ...rest } = props;\n  const { cx, styles } = useStyles();\n\n  const [isPinned, setIsPinned] = useControlledState(false, {\n    onChange: setPin,\n    value: pin,\n  });\n\n  const panelIcon = (\n    <ActionIcon icon={PanelLeft} onClick={() => setExpand?.(false)} size={'small'} />\n  );\n  const pinIcon = (\n    <ActionIcon\n      active={pin}\n      icon={pin ? Pin : PinOff}\n      onClick={() => setIsPinned(!isPinned)}\n      size={'small'}\n    />\n  );\n  return (\n    <Flexbox\n      align={'center'}\n      className={cx(styles.header, className)}\n      flex={'none'}\n      gap={8}\n      horizontal\n      justify={'space-between'}\n      {...rest}\n    >\n      {position === 'left' ? panelIcon : pinIcon}\n      {title}\n      {position === 'left' ? pinIcon : panelIcon}\n    </Flexbox>\n  );\n});\n\nDraggablePanelHeader.displayName = 'DraggablePanelHeader';\n\nexport default DraggablePanelHeader;\n"],"mappings":";;;;;;;;;;;AAoBA,MAAM,uBAAuB,MAAiC,UAAU;CACtE,MAAM,EAAE,KAAK,QAAQ,WAAW,WAAW,OAAO,WAAW,QAAQ,GAAG,SAAS;CACjF,MAAM,EAAE,IAAI,WAAW,WAAW;CAElC,MAAM,CAAC,UAAU,eAAeA,cAAmB,OAAO;EACxD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,YACJ,oBAACC;EAAW,MAAM;EAAW,eAAe,YAAY,MAAM;EAAE,MAAM;GAAW;CAEnF,MAAM,UACJ,oBAACA;EACC,QAAQ;EACR,MAAM,MAAM,MAAM;EAClB,eAAe,YAAY,CAAC,SAAS;EACrC,MAAM;GACN;AAEJ,QACE,qBAACC;EACC,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,MAAM;EACN,KAAK;EACL;EACA,SAAS;EACT,GAAI;;GAEH,aAAa,SAAS,YAAY;GAClC;GACA,aAAa,SAAS,UAAU;;GACzB;EAEZ;AAEF,qBAAqB,cAAc;AAEnC,mCAAe"}

package/es/DraggablePanel/components/style.mjs

@@ -0,0 +1,36 @@
+import { createStyles } from "antd-style";
+
+//#region src/DraggablePanel/components/style.ts
+const useStyles = createStyles(({ css: css$1, token }) => {
+	return {
+		body: css$1`
+      overflow: hidden auto;
+      padding: 16px;
+    `,
+		container: css$1`
+      position: relative;
+      overflow: hidden;
+    `,
+		footer: css$1`
+      padding-block: 8px;
+      padding-inline: 16px;
+      border-block-start: 1px solid ${token.colorBorderSecondary};
+    `,
+		handlerIcon: css$1`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s ${token.motionEaseOut};
+    `,
+		header: css$1`
+      padding-block: 8px;
+      padding-inline: 16px;
+      font-weight: 500;
+      border-block-end: 1px solid ${token.colorBorderSecondary};
+    `
+	};
+});
+
+//#endregion
+export { useStyles };
+//# sourceMappingURL=style.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/DraggablePanel/components/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token }) => {\n  return {\n    body: css`\n      overflow: hidden auto;\n      padding: 16px;\n    `,\n    container: css`\n      position: relative;\n      overflow: hidden;\n    `,\n    footer: css`\n      padding-block: 8px;\n      padding-inline: 16px;\n      border-block-start: 1px solid ${token.colorBorderSecondary};\n    `,\n    handlerIcon: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ${token.motionEaseOut};\n    `,\n    header: css`\n      padding-block: 8px;\n      padding-inline: 16px;\n      font-weight: 500;\n      border-block-end: 1px solid ${token.colorBorderSecondary};\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,YAAY;AACxD,QAAO;EACL,MAAM,KAAG;;;;EAIT,WAAW,KAAG;;;;EAId,QAAQ,KAAG;;;sCAGuB,MAAM,qBAAqB;;EAE7D,aAAa,KAAG;;;;6BAIS,MAAM,cAAc;;EAE7C,QAAQ,KAAG;;;;oCAIqB,MAAM,qBAAqB;;EAE5D;EACD"}

package/es/DraggablePanel/index.d.mts

@@ -0,0 +1,19 @@
+import { DraggablePanelBody, DraggablePanelBodyProps } from "./components/DraggablePanelBody.mjs";
+import { DraggablePanelContainer, DraggablePanelContainerProps } from "./components/DraggablePanelContainer.mjs";
+import { DraggablePanelFooter, DraggablePanelFooterProps } from "./components/DraggablePanelFooter.mjs";
+import { DraggablePanelHeader, DraggablePanelHeaderProps } from "./components/DraggablePanelHeader.mjs";
+import { DraggablePanelProps } from "./type.mjs";
+import { ReactNode, RefAttributes } from "react";
+
+//#region src/DraggablePanel/index.d.ts
+interface IDraggablePanel {
+  (props: DraggablePanelProps & RefAttributes<HTMLDivElement>): ReactNode;
+  Body: typeof DraggablePanelBody;
+  Container: typeof DraggablePanelContainer;
+  Footer: typeof DraggablePanelFooter;
+  Header: typeof DraggablePanelHeader;
+}
+declare const DraggablePanel: IDraggablePanel;
+//#endregion
+export { DraggablePanelBody, type DraggablePanelBodyProps, DraggablePanelContainer, type DraggablePanelContainerProps, DraggablePanelFooter, type DraggablePanelFooterProps, DraggablePanelHeader, type DraggablePanelHeaderProps, DraggablePanelProps, DraggablePanel as default };
+//# sourceMappingURL=index.d.mts.map

package/es/DraggablePanel/index.mjs

@@ -0,0 +1,19 @@
+'use client';
+
+import DraggablePanel_default$1 from "./DraggablePanel.mjs";
+import DraggablePanelBody_default from "./components/DraggablePanelBody.mjs";
+import DraggablePanelContainer_default from "./components/DraggablePanelContainer.mjs";
+import DraggablePanelFooter_default from "./components/DraggablePanelFooter.mjs";
+import DraggablePanelHeader_default from "./components/DraggablePanelHeader.mjs";
+
+//#region src/DraggablePanel/index.ts
+const DraggablePanel = DraggablePanel_default$1;
+DraggablePanel.Body = DraggablePanelBody_default;
+DraggablePanel.Container = DraggablePanelContainer_default;
+DraggablePanel.Footer = DraggablePanelFooter_default;
+DraggablePanel.Header = DraggablePanelHeader_default;
+var DraggablePanel_default = DraggablePanel;
+
+//#endregion
+export { DraggablePanelBody_default as DraggablePanelBody, DraggablePanelContainer_default as DraggablePanelContainer, DraggablePanelFooter_default as DraggablePanelFooter, DraggablePanelHeader_default as DraggablePanelHeader, DraggablePanel_default as default };
+//# sourceMappingURL=index.mjs.map

package/es/DraggablePanel/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["DraggablePanelParent","DraggablePanelBody","DraggablePanelContainer","DraggablePanelFooter","DraggablePanelHeader"],"sources":["../../src/DraggablePanel/index.ts"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\n\nimport DraggablePanelParent from './DraggablePanel';\nimport DraggablePanelBody from './components/DraggablePanelBody';\nimport DraggablePanelContainer from './components/DraggablePanelContainer';\nimport DraggablePanelFooter from './components/DraggablePanelFooter';\nimport DraggablePanelHeader from './components/DraggablePanelHeader';\nimport type { DraggablePanelProps } from './type';\n\ninterface IDraggablePanel {\n  (props: DraggablePanelProps & RefAttributes<HTMLDivElement>): ReactNode;\n  Body: typeof DraggablePanelBody;\n  Container: typeof DraggablePanelContainer;\n  Footer: typeof DraggablePanelFooter;\n  Header: typeof DraggablePanelHeader;\n}\n\nconst DraggablePanel = DraggablePanelParent as unknown as IDraggablePanel;\n\nDraggablePanel.Body = DraggablePanelBody;\nDraggablePanel.Container = DraggablePanelContainer;\nDraggablePanel.Footer = DraggablePanelFooter;\nDraggablePanel.Header = DraggablePanelHeader;\n\nexport default DraggablePanel;\nexport {\n  default as DraggablePanelBody,\n  type DraggablePanelBodyProps,\n} from './components/DraggablePanelBody';\nexport {\n  default as DraggablePanelContainer,\n  type DraggablePanelContainerProps,\n} from './components/DraggablePanelContainer';\nexport {\n  default as DraggablePanelFooter,\n  type DraggablePanelFooterProps,\n} from './components/DraggablePanelFooter';\nexport {\n  default as DraggablePanelHeader,\n  type DraggablePanelHeaderProps,\n} from './components/DraggablePanelHeader';\nexport type * from './type';\n"],"mappings":";;;;;;;;;AAmBA,MAAM,iBAAiBA;AAEvB,eAAe,OAAOC;AACtB,eAAe,YAAYC;AAC3B,eAAe,SAASC;AACxB,eAAe,SAASC;AAExB,6BAAe"}