@lobehub/ui 5.6.3 → 5.6.4

package/es/DatePicker/DatePicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","names":["DatePicker","AntDatePicker"],"sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport { DatePicker as AntDatePicker } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { DatePickerProps } from './type';\n\nconst DatePicker = memo<DatePickerProps>(({ variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntDatePicker\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;AASA,MAAMA,eAAa,MAAuB,EAAE,SAAS,QAAQ,WAAW,GAAG,WAAW;CACpF,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACC;EACC,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACD,GAAI;GACJ;EAEJ;AAEF,aAAW,cAAc;AAEzB,yBAAeD"}
+{"version":3,"file":"DatePicker.mjs","names":["DatePicker","AntDatePicker"],"sources":["../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client';\n\nimport { DatePicker as AntDatePicker } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { variants } from './style';\nimport type { DatePickerProps } from './type';\n\nconst DatePicker = memo<DatePickerProps>(({ variant, shadow, className, ...rest }) => {\n  const { isDarkMode } = useThemeMode();\n\n  return (\n    <AntDatePicker\n      variant={variant || (isDarkMode ? 'filled' : 'outlined')}\n      className={cx(\n        variants({ shadow, variant: variant || (isDarkMode ? 'filled' : 'outlined') }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";;;;;;;AASA,MAAMA,eAAa,MAAuB,EAAE,SAAS,QAAQ,WAAW,GAAG,WAAW;CACpF,MAAM,EAAE,eAAe,cAAc;AAErC,QACE,oBAACC,YAAD;EACE,SAAS,YAAY,aAAa,WAAW;EAC7C,WAAW,GACT,SAAS;GAAE;GAAQ,SAAS,YAAY,aAAa,WAAW;GAAa,CAAC,EAC9E,UACD;EACD,GAAI;EACJ,CAAA;EAEJ;AAEF,aAAW,cAAc"}

package/es/DatePicker/index.mjs

@@ -1,3 +1,2 @@
-import DatePicker_default from "./DatePicker.mjs";
-
-export { DatePicker_default as default };
+import DatePicker from "./DatePicker.mjs";
+export { DatePicker as default };

package/es/DatePicker/style.mjs

@@ -1,14 +1,13 @@
 import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
 import { createStaticStyles } from "antd-style";
 import { cva } from "class-variance-authority";
-
 //#region src/DatePicker/style.ts
-const styles = createStaticStyles(({ css: css$1 }) => {
+const styles = createStaticStyles(({ css }) => {
 	return {
 		borderless: staticStylish.variantBorderless,
 		filled: staticStylish.variantFilled,
 		outlined: staticStylish.variantOutlined,
-		root: css$1``,
+		root: css``,
 		shadow: staticStylish.shadow
 	};
 });
@@ -27,7 +26,7 @@ const variants = cva(styles.root, {
 		}
 	}
 });
-
 //#endregion
 export { variants };
+
 //# sourceMappingURL=style.mjs.map

package/es/DatePicker/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/DatePicker/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    borderless: lobeStaticStylish.variantBorderless,\n    filled: lobeStaticStylish.variantFilled,\n    outlined: lobeStaticStylish.variantOutlined,\n    root: css``,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: false,\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n      underlined: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n});\n"],"mappings":";;;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO;EACL,YAAYA,cAAkB;EAC9B,QAAQA,cAAkB;EAC1B,UAAUA,cAAkB;EAC5B,MAAM,KAAG;EACT,QAAQA,cAAkB;EAC3B;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,QAAQ,OACT;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;GACb;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/DatePicker/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    borderless: lobeStaticStylish.variantBorderless,\n    filled: lobeStaticStylish.variantFilled,\n    outlined: lobeStaticStylish.variantOutlined,\n    root: css``,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    shadow: false,\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n      underlined: null,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,UAAU;AACpD,QAAO;EACL,YAAYA,cAAkB;EAC9B,QAAQA,cAAkB;EAC1B,UAAUA,cAAkB;EAC5B,MAAM,GAAG;EACT,QAAQA,cAAkB;EAC3B;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,QAAQ,OACT;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACnB,YAAY;GACb;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACF;CACF,CAAC"}

package/es/DownloadButton/DownloadButton.mjs

@@ -1,11 +1,9 @@
-'use client';
-
-import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
+"use client";
+import ActionIcon from "../ActionIcon/ActionIcon.mjs";
 import { downloadBlob } from "../utils/downloadBlob.mjs";
-import React, { memo } from "react";
+import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Download } from "lucide-react";
-
 //#region src/DownloadButton/DownloadButton.tsx
 const DownloadButton = memo(({ fileName = "download", fileType = "svg", disabled = false, blobUrl, ...rest }) => {
 	const handleDownload = async () => {
@@ -16,7 +14,7 @@ const DownloadButton = memo(({ fileName = "download", fileType = "svg", disabled
 			console.error("Download failed:", error);
 		}
 	};
-	return /* @__PURE__ */ jsx(ActionIcon_default, {
+	return /* @__PURE__ */ jsx(ActionIcon, {
 		title: `Download ${fileType.toUpperCase()}`,
 		...rest,
 		icon: Download,
@@ -24,8 +22,7 @@ const DownloadButton = memo(({ fileName = "download", fileType = "svg", disabled
 	});
 });
 DownloadButton.displayName = "DownloadButton";
-var DownloadButton_default = DownloadButton;
-
 //#endregion
-export { DownloadButton_default as default };
+export { DownloadButton as default };
+
 //# sourceMappingURL=DownloadButton.mjs.map

package/es/DownloadButton/DownloadButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadButton.mjs","names":["ActionIcon"],"sources":["../../src/DownloadButton/DownloadButton.tsx"],"sourcesContent":["'use client';\n\nimport { Download } from 'lucide-react';\nimport React, { memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport type { DownloadButtonProps } from './type';\n\nconst DownloadButton = memo<DownloadButtonProps>(\n  ({ fileName = 'download', fileType = 'svg', disabled = false, blobUrl, ...rest }) => {\n    const handleDownload = async () => {\n      if (!blobUrl || disabled) return;\n      try {\n        await downloadBlob(blobUrl, `${fileName.replace(/\\.[^./]+$/, '')}.${fileType}`);\n      } catch (error) {\n        console.error('Download failed:', error);\n      }\n    };\n    return (\n      <ActionIcon\n        title={`Download ${fileType.toUpperCase()}`}\n        {...rest}\n        icon={Download}\n        onClick={handleDownload}\n      />\n    );\n  },\n);\n\nDownloadButton.displayName = 'DownloadButton';\n\nexport default DownloadButton;\n"],"mappings":";;;;;;;;;AAUA,MAAM,iBAAiB,MACpB,EAAE,WAAW,YAAY,WAAW,OAAO,WAAW,OAAO,SAAS,GAAG,WAAW;CACnF,MAAM,iBAAiB,YAAY;AACjC,MAAI,CAAC,WAAW,SAAU;AAC1B,MAAI;AACF,SAAM,aAAa,SAAS,GAAG,SAAS,QAAQ,aAAa,GAAG,CAAC,GAAG,WAAW;WACxE,OAAO;AACd,WAAQ,MAAM,oBAAoB,MAAM;;;AAG5C,QACE,oBAACA;EACC,OAAO,YAAY,SAAS,aAAa;EACzC,GAAI;EACJ,MAAM;EACN,SAAS;GACT;EAGP;AAED,eAAe,cAAc;AAE7B,6BAAe"}
+{"version":3,"file":"DownloadButton.mjs","names":[],"sources":["../../src/DownloadButton/DownloadButton.tsx"],"sourcesContent":["'use client';\n\nimport { Download } from 'lucide-react';\nimport React, { memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport type { DownloadButtonProps } from './type';\n\nconst DownloadButton = memo<DownloadButtonProps>(\n  ({ fileName = 'download', fileType = 'svg', disabled = false, blobUrl, ...rest }) => {\n    const handleDownload = async () => {\n      if (!blobUrl || disabled) return;\n      try {\n        await downloadBlob(blobUrl, `${fileName.replace(/\\.[^./]+$/, '')}.${fileType}`);\n      } catch (error) {\n        console.error('Download failed:', error);\n      }\n    };\n    return (\n      <ActionIcon\n        title={`Download ${fileType.toUpperCase()}`}\n        {...rest}\n        icon={Download}\n        onClick={handleDownload}\n      />\n    );\n  },\n);\n\nDownloadButton.displayName = 'DownloadButton';\n\nexport default DownloadButton;\n"],"mappings":";;;;;;;AAUA,MAAM,iBAAiB,MACpB,EAAE,WAAW,YAAY,WAAW,OAAO,WAAW,OAAO,SAAS,GAAG,WAAW;CACnF,MAAM,iBAAiB,YAAY;AACjC,MAAI,CAAC,WAAW,SAAU;AAC1B,MAAI;AACF,SAAM,aAAa,SAAS,GAAG,SAAS,QAAQ,aAAa,GAAG,CAAC,GAAG,WAAW;WACxE,OAAO;AACd,WAAQ,MAAM,oBAAoB,MAAM;;;AAG5C,QACE,oBAAC,YAAD;EACE,OAAO,YAAY,SAAS,aAAa;EACzC,GAAI;EACJ,MAAM;EACN,SAAS;EACT,CAAA;EAGP;AAED,eAAe,cAAc"}

package/es/DownloadButton/index.mjs

@@ -1,3 +1,2 @@
-import DownloadButton_default from "./DownloadButton.mjs";
-
-export { DownloadButton_default as default };
+import DownloadButton from "./DownloadButton.mjs";
+export { DownloadButton as default };

package/es/DownloadButton/type.d.mts

@@ -1,6 +1,4 @@
 import { ActionIconProps } from "../ActionIcon/type.mjs";
-import "../ActionIcon/index.mjs";
-
 //#region src/DownloadButton/type.d.ts
 interface DownloadButtonProps extends ActionIconProps {
   blobUrl?: string;

package/es/DraggablePanel/DraggablePanel.mjs

@@ -1,7 +1,6 @@
-'use client';
-
-import Center_default from "../Flex/Center.mjs";
-import Icon_default from "../Icon/Icon.mjs";
+"use client";
+import Center from "../Flex/Center.mjs";
+import Icon from "../Icon/Icon.mjs";
 import { handleVariants, panelVariants, styles, toggleVariants } from "./style.mjs";
 import { reversePlacement } from "./utils.mjs";
 import { memo, use, useCallback, useEffect, useMemo, useReducer, useRef, useTransition } from "react";
@@ -13,7 +12,6 @@ import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react"
 import { useHover } from "ahooks";
 import isEqual from "fast-deep-equal";
 import { Resizable } from "re-resizable";
-
 //#region src/DraggablePanel/DraggablePanel.tsx
 const DEFAULT_HEIGHT = 180;
 const DEFAULT_WIDTH = 280;
@@ -157,17 +155,17 @@ const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen,
 		isExpand,
 		setIsExpand
 	]);
-	const handle = useMemo(() => /* @__PURE__ */ jsx(Center_default, {
+	const handle = useMemo(() => /* @__PURE__ */ jsx(Center, {
 		className: toggleVariants({
 			placement: internalPlacement,
 			showHandleWideArea
 		}),
 		style: { opacity: isExpand ? pin ? void 0 : 0 : showHandleWhenCollapsed ? 1 : 0 },
-		children: /* @__PURE__ */ jsx(Center_default, {
+		children: /* @__PURE__ */ jsx(Center, {
 			className: classNames?.handle,
 			style: customStyles?.handle,
 			onClick: toggleExpand,
-			children: /* @__PURE__ */ jsx(Icon_default, {
+			children: /* @__PURE__ */ jsx(Icon, {
 				className: styles.handlerIcon,
 				icon: Arrow,
 				size: 16,
@@ -202,7 +200,7 @@ const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen,
 	const handleResizeStart = useCallback(() => {
 		dispatch({ type: "START_RESIZE" });
 	}, []);
-	const handleResizeStop = useCallback((e, direction$1, reference_, delta) => {
+	const handleResizeStop = useCallback((e, direction, reference_, delta) => {
 		dispatch({ type: "STOP_RESIZE" });
 		onSizeChange?.(delta, {
 			height: reference_.style.height,
@@ -262,8 +260,7 @@ const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen,
 	});
 }, isEqual);
 DraggablePanel.displayName = "DraggablePanel";
-var DraggablePanel_default = DraggablePanel;
-
 //#endregion
-export { DraggablePanel_default as default };
+export { DraggablePanel as default };
+
 //# sourceMappingURL=DraggablePanel.mjs.map

package/es/DraggablePanel/DraggablePanel.mjs.map

@@ -1 +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 { cx } from 'antd-style';\nimport isEqual from 'fast-deep-equal';\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 { handleVariants, panelVariants, styles, toggleVariants } 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 cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--draggable-panel-bg': backgroundColor || '',\n        '--draggable-panel-header-height': `${headerHeight}px`,\n      }),\n      [backgroundColor, headerHeight],\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    // 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, showHandleWideArea })}\n          style={{ opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0 }}\n        >\n          <Center\n            className={classNames?.handle}\n            style={customStyles?.handle}\n            onClick={toggleExpand}\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          style={{\n            ...cssVariables,\n            opacity: isPending ? 0.95 : 1,\n            transition: state.isResizing ? 'unset' : undefined,\n            ...style,\n          }}\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\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 (\n        <div className={cx(styles.fullscreen, className)} style={cssVariables}>\n          {children}\n        </div>\n      );\n    }\n\n    return (\n      <aside\n        dir={dir}\n        ref={ref}\n        style={cssVariables}\n        className={cx(\n          panelVariants({\n            isExpand,\n            mode,\n            placement: internalPlacement,\n            showBorder,\n          }),\n          className,\n        )}\n      >\n        {expandable && state.showExpand && handle}\n        {destroyOnClose ? isExpand && inner : inner}\n      </aside>\n    );\n  },\n  isEqual,\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":"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"}
+{"version":3,"file":"DraggablePanel.mjs","names":["useControlledState"],"sources":["../../src/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { useHover } from 'ahooks';\nimport { ConfigProvider } from 'antd';\nimport { cx } from 'antd-style';\nimport isEqual from 'fast-deep-equal';\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 { handleVariants, panelVariants, styles, toggleVariants } 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 cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--draggable-panel-bg': backgroundColor || '',\n        '--draggable-panel-header-height': `${headerHeight}px`,\n      }),\n      [backgroundColor, headerHeight],\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    // 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, showHandleWideArea })}\n          style={{ opacity: isExpand ? (pin ? undefined : 0) : showHandleWhenCollapsed ? 1 : 0 }}\n        >\n          <Center\n            className={classNames?.handle}\n            style={customStyles?.handle}\n            onClick={toggleExpand}\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          style={{\n            ...cssVariables,\n            opacity: isPending ? 0.95 : 1,\n            transition: state.isResizing ? 'unset' : undefined,\n            ...style,\n          }}\n          onResize={handleResize}\n          onResizeStart={handleResizeStart}\n          onResizeStop={handleResizeStop}\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 (\n        <div className={cx(styles.fullscreen, className)} style={cssVariables}>\n          {children}\n        </div>\n      );\n    }\n\n    return (\n      <aside\n        dir={dir}\n        ref={ref}\n        style={cssVariables}\n        className={cx(\n          panelVariants({\n            isExpand,\n            mode,\n            placement: internalPlacement,\n            showBorder,\n          }),\n          className,\n        )}\n      >\n        {expandable && state.showExpand && handle}\n        {destroyOnClose ? isExpand && inner : inner}\n      </aside>\n    );\n  },\n  isEqual,\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":"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"}

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

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

package/es/DraggablePanel/components/DraggablePanelBody.mjs

@@ -1,11 +1,9 @@
-'use client';
-
+"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, {
@@ -15,8 +13,7 @@ const DraggablePanelBody = memo(({ className, ...rest }) => {
 	});
 });
 DraggablePanelBody.displayName = "DraggablePanelBody";
-var DraggablePanelBody_default = DraggablePanelBody;
-
 //#endregion
-export { DraggablePanelBody_default as default };
+export { DraggablePanelBody as default };
+
 //# sourceMappingURL=DraggablePanelBody.mjs.map

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

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

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

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

package/es/DraggablePanel/components/DraggablePanelContainer.mjs

@@ -1,11 +1,9 @@
-'use client';
-
+"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, {
@@ -14,8 +12,7 @@ const DraggablePanelContainer = memo(({ className, ...rest }) => {
 	});
 });
 DraggablePanelContainer.displayName = "DraggablePanelContainer";
-var DraggablePanelContainer_default = DraggablePanelContainer;
-
 //#endregion
-export { DraggablePanelContainer_default as default };
+export { DraggablePanelContainer as default };
+
 //# sourceMappingURL=DraggablePanelContainer.mjs.map

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

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

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

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

package/es/DraggablePanel/components/DraggablePanelFooter.mjs

@@ -1,11 +1,9 @@
-'use client';
-
+"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, {
@@ -19,8 +17,7 @@ const DraggablePanelFooter = memo(({ className, ...rest }) => {
 	});
 });
 DraggablePanelFooter.displayName = "DraggablePanelFooter";
-var DraggablePanelFooter_default = DraggablePanelFooter;
-
 //#endregion
-export { DraggablePanelFooter_default as default };
+export { DraggablePanelFooter as default };
+
 //# sourceMappingURL=DraggablePanelFooter.mjs.map

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

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

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

@@ -1,5 +1,5 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react73 from "react";
+import * as _$react from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelHeader.d.ts
 interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {
@@ -9,7 +9,7 @@ interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {
   setPin?: (pin: boolean) => void;
   title?: string;
 }
-declare const DraggablePanelHeader: react73.NamedExoticComponent<DraggablePanelHeaderProps>;
+declare const DraggablePanelHeader: _$react.NamedExoticComponent<DraggablePanelHeaderProps>;
 //#endregion
 export { DraggablePanelHeader, DraggablePanelHeaderProps };
 //# sourceMappingURL=DraggablePanelHeader.d.mts.map

package/es/DraggablePanel/components/DraggablePanelHeader.mjs

@@ -1,14 +1,12 @@
-'use client';
-
+"use client";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
-import ActionIcon_default from "../../ActionIcon/ActionIcon.mjs";
+import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import useMergeState from "use-merge-value";
 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;
@@ -16,12 +14,12 @@ const DraggablePanelHeader = memo((props) => {
 		onChange: setPin,
 		value: pin
 	});
-	const panelIcon = /* @__PURE__ */ jsx(ActionIcon_default, {
+	const panelIcon = /* @__PURE__ */ jsx(ActionIcon, {
 		icon: PanelLeft,
 		size: "small",
 		onClick: () => setExpand?.(false)
 	});
-	const pinIcon = /* @__PURE__ */ jsx(ActionIcon_default, {
+	const pinIcon = /* @__PURE__ */ jsx(ActionIcon, {
 		active: pin,
 		icon: pin ? Pin : PinOff,
 		size: "small",
@@ -43,8 +41,7 @@ const DraggablePanelHeader = memo((props) => {
 	});
 });
 DraggablePanelHeader.displayName = "DraggablePanelHeader";
-var DraggablePanelHeader_default = DraggablePanelHeader;
-
 //#endregion
-export { DraggablePanelHeader_default as default };
+export { DraggablePanelHeader as default };
+
 //# sourceMappingURL=DraggablePanelHeader.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"DraggablePanelHeader.mjs","names":["useControlledState","ActionIcon","Flexbox"],"sources":["../../../src/DraggablePanel/components/DraggablePanelHeader.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\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 { styles } 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\n  const [isPinned, setIsPinned] = useControlledState(false, {\n    onChange: setPin,\n    value: pin,\n  });\n\n  const panelIcon = (\n    <ActionIcon icon={PanelLeft} size={'small'} onClick={() => setExpand?.(false)} />\n  );\n  const pinIcon = (\n    <ActionIcon\n      active={pin}\n      icon={pin ? Pin : PinOff}\n      size={'small'}\n      onClick={() => setIsPinned(!isPinned)}\n    />\n  );\n  return (\n    <Flexbox\n      horizontal\n      align={'center'}\n      className={cx(styles.header, className)}\n      flex={'none'}\n      gap={8}\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":";;;;;;;;;;;;AAqBA,MAAM,uBAAuB,MAAiC,UAAU;CACtE,MAAM,EAAE,KAAK,QAAQ,WAAW,WAAW,OAAO,WAAW,QAAQ,GAAG,SAAS;CAEjF,MAAM,CAAC,UAAU,eAAeA,cAAmB,OAAO;EACxD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,YACJ,oBAACC;EAAW,MAAM;EAAW,MAAM;EAAS,eAAe,YAAY,MAAM;GAAI;CAEnF,MAAM,UACJ,oBAACA;EACC,QAAQ;EACR,MAAM,MAAM,MAAM;EAClB,MAAM;EACN,eAAe,YAAY,CAAC,SAAS;GACrC;AAEJ,QACE,qBAACC;EACC;EACA,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,MAAM;EACN,KAAK;EACL,SAAS;EACT,GAAI;;GAEH,aAAa,SAAS,YAAY;GAClC;GACA,aAAa,SAAS,UAAU;;GACzB;EAEZ;AAEF,qBAAqB,cAAc;AAEnC,mCAAe"}
+{"version":3,"file":"DraggablePanelHeader.mjs","names":["useControlledState","Flexbox"],"sources":["../../../src/DraggablePanel/components/DraggablePanelHeader.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\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 { styles } 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\n  const [isPinned, setIsPinned] = useControlledState(false, {\n    onChange: setPin,\n    value: pin,\n  });\n\n  const panelIcon = (\n    <ActionIcon icon={PanelLeft} size={'small'} onClick={() => setExpand?.(false)} />\n  );\n  const pinIcon = (\n    <ActionIcon\n      active={pin}\n      icon={pin ? Pin : PinOff}\n      size={'small'}\n      onClick={() => setIsPinned(!isPinned)}\n    />\n  );\n  return (\n    <Flexbox\n      horizontal\n      align={'center'}\n      className={cx(styles.header, className)}\n      flex={'none'}\n      gap={8}\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":";;;;;;;;;;AAqBA,MAAM,uBAAuB,MAAiC,UAAU;CACtE,MAAM,EAAE,KAAK,QAAQ,WAAW,WAAW,OAAO,WAAW,QAAQ,GAAG,SAAS;CAEjF,MAAM,CAAC,UAAU,eAAeA,cAAmB,OAAO;EACxD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,YACJ,oBAAC,YAAD;EAAY,MAAM;EAAW,MAAM;EAAS,eAAe,YAAY,MAAM;EAAI,CAAA;CAEnF,MAAM,UACJ,oBAAC,YAAD;EACE,QAAQ;EACR,MAAM,MAAM,MAAM;EAClB,MAAM;EACN,eAAe,YAAY,CAAC,SAAS;EACrC,CAAA;AAEJ,QACE,qBAACC,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,MAAM;EACN,KAAK;EACL,SAAS;EACT,GAAI;YAPN;GASG,aAAa,SAAS,YAAY;GAClC;GACA,aAAa,SAAS,UAAU;GACzB;;EAEZ;AAEF,qBAAqB,cAAc"}

package/es/DraggablePanel/components/style.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/DraggablePanel/components/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\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 ${cssVar.colorBorderSecondary};\n    `,\n    handlerIcon: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ${cssVar.motionEaseOut};\n    `,\n    header: css`\n      padding-block: 8px;\n      padding-inline: 16px;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n      font-weight: 500;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,MAAM,KAAG;;;;EAIT,WAAW,KAAG;;;;EAId,QAAQ,KAAG;;;sCAGuBA,SAAO,qBAAqB;;EAE9D,aAAa,KAAG;;;;6BAISA,SAAO,cAAc;;EAE9C,QAAQ,KAAG;;;oCAGqBA,SAAO,qBAAqB;;;EAG7D;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/DraggablePanel/components/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\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 ${cssVar.colorBorderSecondary};\n    `,\n    handlerIcon: css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ${cssVar.motionEaseOut};\n    `,\n    header: css`\n      padding-block: 8px;\n      padding-inline: 16px;\n      border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n      font-weight: 500;\n    `,\n  };\n});\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;AAC5D,QAAO;EACL,MAAM,GAAG;;;;EAIT,WAAW,GAAG;;;;EAId,QAAQ,GAAG;;;sCAGuB,OAAO,qBAAqB;;EAE9D,aAAa,GAAG;;;;6BAIS,OAAO,cAAc;;EAE9C,QAAQ,GAAG;;;oCAGqB,OAAO,qBAAqB;;;EAG7D;EACD"}

package/es/DraggablePanel/index.mjs

@@ -1,19 +1,16 @@
-'use client';
-
-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";
-import DraggablePanel_default$1 from "./DraggablePanel.mjs";
-
+"use client";
+import DraggablePanelBody from "./components/DraggablePanelBody.mjs";
+import DraggablePanelContainer from "./components/DraggablePanelContainer.mjs";
+import DraggablePanelFooter from "./components/DraggablePanelFooter.mjs";
+import DraggablePanelHeader from "./components/DraggablePanelHeader.mjs";
+import DraggablePanel$1 from "./DraggablePanel.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;
-
+const DraggablePanel = DraggablePanel$1;
+DraggablePanel.Body = DraggablePanelBody;
+DraggablePanel.Container = DraggablePanelContainer;
+DraggablePanel.Footer = DraggablePanelFooter;
+DraggablePanel.Header = DraggablePanelHeader;
 //#endregion
-export { DraggablePanelBody_default as DraggablePanelBody, DraggablePanelContainer_default as DraggablePanelContainer, DraggablePanelFooter_default as DraggablePanelFooter, DraggablePanelHeader_default as DraggablePanelHeader, DraggablePanel_default as default };
+export { DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader, DraggablePanel as default };
+
 //# sourceMappingURL=index.mjs.map

package/es/DraggablePanel/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["DraggablePanelParent","DraggablePanelBody","DraggablePanelContainer","DraggablePanelFooter","DraggablePanelHeader"],"sources":["../../src/DraggablePanel/index.ts"],"sourcesContent":["'use client';\n\nimport { type ReactNode, type RefAttributes } from 'react';\n\nimport DraggablePanelBody from './components/DraggablePanelBody';\nimport DraggablePanelContainer from './components/DraggablePanelContainer';\nimport DraggablePanelFooter from './components/DraggablePanelFooter';\nimport DraggablePanelHeader from './components/DraggablePanelHeader';\nimport DraggablePanelParent from './DraggablePanel';\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"}
+{"version":3,"file":"index.mjs","names":["DraggablePanelParent"],"sources":["../../src/DraggablePanel/index.ts"],"sourcesContent":["'use client';\n\nimport { type ReactNode, type RefAttributes } from 'react';\n\nimport DraggablePanelBody from './components/DraggablePanelBody';\nimport DraggablePanelContainer from './components/DraggablePanelContainer';\nimport DraggablePanelFooter from './components/DraggablePanelFooter';\nimport DraggablePanelHeader from './components/DraggablePanelHeader';\nimport DraggablePanelParent from './DraggablePanel';\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,OAAO;AACtB,eAAe,YAAY;AAC3B,eAAe,SAAS;AACxB,eAAe,SAAS"}