@lobehub/ui 4.30.2 → 4.32.0

package/es/ContextMenu/renderItems.mjs

@@ -1,9 +1,10 @@
 import Icon_default from "../Icon/Icon.mjs";
 import { preventDefaultAndStopPropagation } from "../utils/dom.mjs";
 import { styles } from "../Menu/sharedStyle.mjs";
+import { getItemKey, getItemLabel, hasAnyIcon, hasCheckboxAndIcon, renderIcon } from "../Menu/renderUtils.mjs";
 import common_default from "../i18n/resources/en/common.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
-import { isValidElement, memo, useCallback, useState } from "react";
+import { memo, useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Switch } from "antd";
 import { cx } from "antd-style";
@@ -53,35 +54,11 @@ const ContextMenuSwitchItemInternal = ({ checked: checkedProp, children, closeOn
 		})]
 	});
 };
-const getItemKey = (item, fallback) => {
-	if (item && "key" in item && item.key !== void 0) return item.key;
-	return fallback;
-};
-const getItemLabel = (item) => {
-	if (item.label !== void 0) return item.label;
-	if ("title" in item && item.title !== void 0) return item.title;
-	return item.key;
-};
-const renderIcon = (icon) => {
-	if (!icon) return null;
-	if (isValidElement(icon)) return icon;
-	return /* @__PURE__ */ jsx(Icon_default, {
-		icon,
-		size: "small"
-	});
-};
-const hasAnyIcon = (items) => {
-	return items.some((item) => {
-		if (!item) return false;
-		if (item.type === "checkbox") return true;
-		if ("icon" in item && item.icon) return true;
-		return false;
-	});
-};
 const renderItemContent = (item, options, iconNode) => {
 	const label = getItemLabel(item);
 	const extra = "extra" in item ? item.extra : void 0;
-	const hasCustomIcon = iconNode !== void 0;
+	const indicatorOnRight = options?.indicatorOnRight;
+	const hasCustomIcon = iconNode !== void 0 && !indicatorOnRight;
 	const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);
 	const shouldRenderIcon = hasCustomIcon ? Boolean(options?.reserveIconSpace || iconNode) : Boolean(hasIcon || options?.reserveIconSpace);
 	return /* @__PURE__ */ jsxs("div", {
@@ -90,7 +67,7 @@ const renderItemContent = (item, options, iconNode) => {
 			shouldRenderIcon ? /* @__PURE__ */ jsx("span", {
 				"aria-hidden": !hasIcon,
 				className: styles.icon,
-				children: hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon) : null
+				children: hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon, "small") : null
 			}) : null,
 			/* @__PURE__ */ jsx("span", {
 				className: styles.label,
@@ -100,6 +77,7 @@ const renderItemContent = (item, options, iconNode) => {
 				className: styles.extra,
 				children: extra
 			}) : null,
+			indicatorOnRight && iconNode ? iconNode : null,
 			options?.submenu ? /* @__PURE__ */ jsx("span", {
 				className: styles.submenuArrow,
 				children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
@@ -119,7 +97,9 @@ const invokeItemClick = (item, keyPath, event) => {
 	item.onClick(info);
 };
 const renderContextMenuItems = (items, keyPath = [], options) => {
-	const reserveIconSpace = options?.reserveIconSpace ?? hasAnyIcon(items);
+	const iconSpaceMode = options?.iconSpaceMode ?? "global";
+	const reserveIconSpace = options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === "global");
+	const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);
 	return items.map((item, index) => {
 		if (!item) return null;
 		const itemKey = getItemKey(item, `${keyPath.join("-") || "root"}-${index}`);
@@ -141,7 +121,10 @@ const renderContextMenuItems = (items, keyPath = [], options) => {
 				disabled: checkboxItem.disabled,
 				label: labelText$1,
 				onCheckedChange: (checked) => checkboxItem.onCheckedChange?.(checked),
-				children: renderItemContent(checkboxItem, { reserveIconSpace }, indicator)
+				children: renderItemContent(checkboxItem, {
+					indicatorOnRight,
+					reserveIconSpace
+				}, indicator)
 			}, itemKey);
 		}
 		if (item.type === "switch") {
@@ -163,10 +146,16 @@ const renderContextMenuItems = (items, keyPath = [], options) => {
 		if (item.type === "divider") return /* @__PURE__ */ jsx(ContextMenu.Separator, { className: styles.separator }, itemKey);
 		if (item.type === "group") {
 			const group = item;
+			const groupReserveIconSpace = iconSpaceMode === "group" ? group.children ? hasAnyIcon(group.children) : false : reserveIconSpace;
+			const groupIndicatorOnRight = group.children ? hasCheckboxAndIcon(group.children) : false;
 			return /* @__PURE__ */ jsxs(ContextMenu.Group, { children: [group.label ? /* @__PURE__ */ jsx(ContextMenu.GroupLabel, {
 				className: styles.groupLabel,
 				children: group.label
-			}) : null, group.children ? renderContextMenuItems(group.children, nextKeyPath, { reserveIconSpace }) : null] }, itemKey);
+			}) : null, group.children ? renderContextMenuItems(group.children, nextKeyPath, {
+				iconSpaceMode,
+				indicatorOnRight: groupIndicatorOnRight,
+				reserveIconSpace: groupReserveIconSpace
+			}) : null] }, itemKey);
 		}
 		if (item.type === "submenu" || "children" in item && item.children) {
 			const submenu = item;
@@ -188,7 +177,7 @@ const renderContextMenuItems = (items, keyPath = [], options) => {
 				sideOffset: -1,
 				children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
 					className: styles.popup,
-					children: submenu.children && submenu.children.length > 0 ? renderContextMenuItems(submenu.children, nextKeyPath) : /* @__PURE__ */ jsx(EmptyMenuItem, {})
+					children: submenu.children && submenu.children.length > 0 ? renderContextMenuItems(submenu.children, nextKeyPath, { iconSpaceMode }) : /* @__PURE__ */ jsx(EmptyMenuItem, {})
 				})
 			}) })] }, itemKey);
 		}

package/es/ContextMenu/renderItems.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"renderItems.mjs","names":["common","Icon","info: MenuInfo","label","labelText","isDanger"],"sources":["../../src/ContextMenu/renderItems.tsx"],"sourcesContent":["import { ContextMenu } from '@base-ui/react/context-menu';\nimport { Switch } from 'antd';\nimport { cx } from 'antd-style';\nimport { Check, ChevronRight } from 'lucide-react';\nimport type { MenuInfo } from 'rc-menu/es/interface';\nimport type {\n  Key,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  ReactNode,\n} from 'react';\nimport { isValidElement, memo, useCallback, useState } from 'react';\n\nimport Icon from '@/Icon';\nimport type { MenuDividerType, MenuItemGroupType, MenuItemType, SubMenuType } from '@/Menu';\nimport common from '@/i18n/resources/en/common';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { styles } from './style';\nimport type { ContextMenuCheckboxItem, ContextMenuItem, ContextMenuSwitchItem } from './type';\n\nconst EmptyMenuItem = memo(() => {\n  const { t } = useTranslation(common);\n  return (\n    <ContextMenu.Item className={cx(styles.item, styles.empty)} disabled>\n      <div className={styles.itemContent}>\n        <span className={styles.label}>{t('common.empty')}</span>\n      </div>\n    </ContextMenu.Item>\n  );\n});\n\nEmptyMenuItem.displayName = 'EmptyMenuItem';\n\ninterface ContextMenuSwitchItemInternalProps {\n  checked?: boolean;\n  children: ReactNode;\n  closeOnClick?: boolean;\n  danger?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  label?: string;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nconst ContextMenuSwitchItemInternal = ({\n  checked: checkedProp,\n  children,\n  closeOnClick = false,\n  danger,\n  defaultChecked,\n  disabled,\n  label,\n  onCheckedChange,\n}: ContextMenuSwitchItemInternalProps) => {\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const isControlled = checkedProp !== undefined;\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  const handleCheckedChange = useCallback(\n    (newChecked: boolean) => {\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n      onCheckedChange?.(newChecked);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  return (\n    <ContextMenu.Item\n      className={cx(styles.item, danger && styles.danger)}\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      label={label}\n      onClick={(e) => {\n        e.preventDefault();\n        if (!disabled) {\n          handleCheckedChange(!checked);\n        }\n      }}\n    >\n      {children}\n      <Switch\n        checked={checked}\n        disabled={disabled}\n        onChange={handleCheckedChange}\n        onClick={(_, e) => e.stopPropagation()}\n        size=\"small\"\n        style={{ marginInlineStart: 16 }}\n      />\n    </ContextMenu.Item>\n  );\n};\n\ntype KeyableItem = { key?: Key };\n\nconst getItemKey = (item: KeyableItem, fallback: string): Key => {\n  if (item && 'key' in item && item.key !== undefined) return item.key;\n  return fallback;\n};\n\ntype LabelableItem = {\n  key?: Key;\n  label?: ReactNode;\n  title?: ReactNode;\n};\n\nconst getItemLabel = (\n  item: MenuItemType | SubMenuType | ContextMenuCheckboxItem | LabelableItem,\n): ReactNode => {\n  if (item.label !== undefined) return item.label;\n  if ('title' in item && item.title !== undefined) return item.title;\n  return item.key;\n};\n\nconst renderIcon = (icon: MenuItemType['icon']) => {\n  if (!icon) return null;\n  if (isValidElement(icon)) return icon;\n  return <Icon icon={icon} size={'small'} />;\n};\n\nconst hasAnyIcon = (items: ContextMenuItem[]): boolean => {\n  return items.some((item) => {\n    if (!item) return false;\n    if ((item as ContextMenuCheckboxItem).type === 'checkbox') return true;\n    if ('icon' in item && item.icon) return true;\n    return false;\n  });\n};\n\nconst renderItemContent = (\n  item: MenuItemType | SubMenuType | ContextMenuCheckboxItem | ContextMenuSwitchItem,\n  options?: { reserveIconSpace?: boolean; submenu?: boolean },\n  iconNode?: ReactNode,\n) => {\n  const label = getItemLabel(item);\n  const extra = 'extra' in item ? item.extra : undefined;\n  const hasCustomIcon = iconNode !== undefined;\n  const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);\n  const shouldRenderIcon = hasCustomIcon\n    ? Boolean(options?.reserveIconSpace || iconNode)\n    : Boolean(hasIcon || options?.reserveIconSpace);\n\n  return (\n    <div className={styles.itemContent}>\n      {shouldRenderIcon ? (\n        <span aria-hidden={!hasIcon} className={styles.icon}>\n          {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon) : null}\n        </span>\n      ) : null}\n      <span className={styles.label}>{label}</span>\n      {extra ? <span className={styles.extra}>{extra}</span> : null}\n      {options?.submenu ? (\n        <span className={styles.submenuArrow}>\n          <ChevronRight size={16} />\n        </span>\n      ) : null}\n    </div>\n  );\n};\n\nconst invokeItemClick = (\n  item: MenuItemType,\n  keyPath: string[],\n  event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n  if (!item.onClick) return;\n  const key = item.key ?? keyPath.at(-1) ?? '';\n  const info: MenuInfo = {\n    domEvent: event,\n    item: event.currentTarget as MenuInfo['item'],\n    key: String(key),\n    keyPath,\n  };\n  item.onClick(info);\n};\n\nexport const renderContextMenuItems = (\n  items: ContextMenuItem[],\n  keyPath: string[] = [],\n  options?: { reserveIconSpace?: boolean },\n): ReactNode[] => {\n  const reserveIconSpace = options?.reserveIconSpace ?? hasAnyIcon(items);\n\n  return items.map((item, index) => {\n    if (!item) return null;\n\n    const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n    const itemKey = getItemKey(item, fallbackKey);\n    const nextKeyPath = [...keyPath, String(itemKey)];\n\n    if ((item as ContextMenuCheckboxItem).type === 'checkbox') {\n      const checkboxItem = item as ContextMenuCheckboxItem;\n      const label = getItemLabel(checkboxItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(checkboxItem.danger);\n      const indicator = (\n        <ContextMenu.CheckboxItemIndicator>\n          <Icon icon={Check} size={'small'} />\n        </ContextMenu.CheckboxItemIndicator>\n      );\n\n      return (\n        <ContextMenu.CheckboxItem\n          checked={checkboxItem.checked}\n          className={cx(styles.item, isDanger && styles.danger)}\n          closeOnClick={checkboxItem.closeOnClick}\n          defaultChecked={checkboxItem.defaultChecked}\n          disabled={checkboxItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={(checked) => checkboxItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(checkboxItem, { reserveIconSpace }, indicator)}\n        </ContextMenu.CheckboxItem>\n      );\n    }\n\n    if ((item as ContextMenuSwitchItem).type === 'switch') {\n      const switchItem = item as ContextMenuSwitchItem;\n      const label = getItemLabel(switchItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(switchItem.danger);\n\n      return (\n        <ContextMenuSwitchItemInternal\n          checked={switchItem.checked}\n          closeOnClick={switchItem.closeOnClick}\n          danger={isDanger}\n          defaultChecked={switchItem.defaultChecked}\n          disabled={switchItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={switchItem.onCheckedChange}\n        >\n          {renderItemContent(switchItem, { reserveIconSpace })}\n        </ContextMenuSwitchItemInternal>\n      );\n    }\n\n    if ((item as MenuDividerType).type === 'divider') {\n      return <ContextMenu.Separator className={styles.separator} key={itemKey} />;\n    }\n\n    if ((item as MenuItemGroupType).type === 'group') {\n      const group = item as MenuItemGroupType;\n      return (\n        <ContextMenu.Group key={itemKey}>\n          {group.label ? (\n            <ContextMenu.GroupLabel className={styles.groupLabel}>\n              {group.label}\n            </ContextMenu.GroupLabel>\n          ) : null}\n          {group.children\n            ? renderContextMenuItems(group.children, nextKeyPath, { reserveIconSpace })\n            : null}\n        </ContextMenu.Group>\n      );\n    }\n\n    if (\n      (item as SubMenuType).type === 'submenu' ||\n      ('children' in item && (item as SubMenuType).children)\n    ) {\n      const submenu = item as SubMenuType;\n      const label = getItemLabel(submenu);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = 'danger' in submenu && Boolean(submenu.danger);\n\n      return (\n        <ContextMenu.SubmenuRoot key={itemKey}>\n          <ContextMenu.SubmenuTrigger\n            className={cx(styles.item, isDanger && styles.danger)}\n            disabled={submenu.disabled}\n            label={labelText}\n          >\n            {renderItemContent(submenu, {\n              reserveIconSpace,\n              submenu: true,\n            })}\n          </ContextMenu.SubmenuTrigger>\n          <ContextMenu.Portal>\n            <ContextMenu.Positioner\n              alignOffset={-4}\n              className={styles.positioner}\n              onContextMenu={preventDefaultAndStopPropagation}\n              sideOffset={-1}\n            >\n              <ContextMenu.Popup className={styles.popup}>\n                {submenu.children && submenu.children.length > 0 ? (\n                  renderContextMenuItems(submenu.children, nextKeyPath)\n                ) : (\n                  <EmptyMenuItem />\n                )}\n              </ContextMenu.Popup>\n            </ContextMenu.Positioner>\n          </ContextMenu.Portal>\n        </ContextMenu.SubmenuRoot>\n      );\n    }\n\n    const menuItem = item as MenuItemType;\n    const label = getItemLabel(menuItem);\n    const labelText = typeof label === 'string' ? label : undefined;\n    const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n    return (\n      <ContextMenu.Item\n        className={cx(styles.item, isDanger && styles.danger)}\n        closeOnClick={menuItem.closeOnClick}\n        disabled={menuItem.disabled}\n        key={itemKey}\n        label={labelText}\n        onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n      >\n        {renderItemContent(menuItem, { reserveIconSpace })}\n      </ContextMenu.Item>\n    );\n  });\n};\n"],"mappings":"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"}
+{"version":3,"file":"renderItems.mjs","names":["common","info: MenuInfo","label","labelText","isDanger","Icon"],"sources":["../../src/ContextMenu/renderItems.tsx"],"sourcesContent":["import { ContextMenu } from '@base-ui/react/context-menu';\nimport { Switch } from 'antd';\nimport { cx } from 'antd-style';\nimport { Check, ChevronRight } from 'lucide-react';\nimport type { MenuInfo } from 'rc-menu/es/interface';\nimport type {\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  ReactNode,\n} from 'react';\nimport { memo, useCallback, useState } from 'react';\n\nimport Icon from '@/Icon';\nimport {\n  type MenuDividerType,\n  type MenuItemGroupType,\n  type MenuItemType,\n  type RenderItemContentOptions,\n  type RenderOptions,\n  type SubMenuType,\n  getItemKey,\n  getItemLabel,\n  hasAnyIcon,\n  hasCheckboxAndIcon,\n  renderIcon,\n} from '@/Menu';\nimport common from '@/i18n/resources/en/common';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { preventDefaultAndStopPropagation } from '@/utils/dom';\n\nimport { styles } from './style';\nimport type { ContextMenuCheckboxItem, ContextMenuItem, ContextMenuSwitchItem } from './type';\n\nexport type { IconSpaceMode } from '@/Menu';\n\nconst EmptyMenuItem = memo(() => {\n  const { t } = useTranslation(common);\n  return (\n    <ContextMenu.Item className={cx(styles.item, styles.empty)} disabled>\n      <div className={styles.itemContent}>\n        <span className={styles.label}>{t('common.empty')}</span>\n      </div>\n    </ContextMenu.Item>\n  );\n});\n\nEmptyMenuItem.displayName = 'EmptyMenuItem';\n\ninterface ContextMenuSwitchItemInternalProps {\n  checked?: boolean;\n  children: ReactNode;\n  closeOnClick?: boolean;\n  danger?: boolean;\n  defaultChecked?: boolean;\n  disabled?: boolean;\n  label?: string;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nconst ContextMenuSwitchItemInternal = ({\n  checked: checkedProp,\n  children,\n  closeOnClick = false,\n  danger,\n  defaultChecked,\n  disabled,\n  label,\n  onCheckedChange,\n}: ContextMenuSwitchItemInternalProps) => {\n  const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);\n  const isControlled = checkedProp !== undefined;\n  const checked = isControlled ? checkedProp : internalChecked;\n\n  const handleCheckedChange = useCallback(\n    (newChecked: boolean) => {\n      if (!isControlled) {\n        setInternalChecked(newChecked);\n      }\n      onCheckedChange?.(newChecked);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  return (\n    <ContextMenu.Item\n      className={cx(styles.item, danger && styles.danger)}\n      closeOnClick={closeOnClick}\n      disabled={disabled}\n      label={label}\n      onClick={(e) => {\n        e.preventDefault();\n        if (!disabled) {\n          handleCheckedChange(!checked);\n        }\n      }}\n    >\n      {children}\n      <Switch\n        checked={checked}\n        disabled={disabled}\n        onChange={handleCheckedChange}\n        onClick={(_, e) => e.stopPropagation()}\n        size=\"small\"\n        style={{ marginInlineStart: 16 }}\n      />\n    </ContextMenu.Item>\n  );\n};\n\nconst renderItemContent = (\n  item: MenuItemType | SubMenuType | ContextMenuCheckboxItem | ContextMenuSwitchItem,\n  options?: RenderItemContentOptions,\n  iconNode?: ReactNode,\n) => {\n  const label = getItemLabel(item);\n  const extra = 'extra' in item ? item.extra : undefined;\n  const indicatorOnRight = options?.indicatorOnRight;\n  const hasCustomIcon = iconNode !== undefined && !indicatorOnRight;\n  const hasIcon = hasCustomIcon ? Boolean(iconNode) : Boolean(item.icon);\n  const shouldRenderIcon = hasCustomIcon\n    ? Boolean(options?.reserveIconSpace || iconNode)\n    : Boolean(hasIcon || options?.reserveIconSpace);\n\n  return (\n    <div className={styles.itemContent}>\n      {shouldRenderIcon ? (\n        <span aria-hidden={!hasIcon} className={styles.icon}>\n          {hasCustomIcon ? iconNode : hasIcon ? renderIcon(item.icon, 'small') : null}\n        </span>\n      ) : null}\n      <span className={styles.label}>{label}</span>\n      {extra ? <span className={styles.extra}>{extra}</span> : null}\n      {indicatorOnRight && iconNode ? iconNode : null}\n      {options?.submenu ? (\n        <span className={styles.submenuArrow}>\n          <ChevronRight size={16} />\n        </span>\n      ) : null}\n    </div>\n  );\n};\n\nconst invokeItemClick = (\n  item: MenuItemType,\n  keyPath: string[],\n  event: ReactMouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>,\n) => {\n  if (!item.onClick) return;\n  const key = item.key ?? keyPath.at(-1) ?? '';\n  const info: MenuInfo = {\n    domEvent: event,\n    item: event.currentTarget as MenuInfo['item'],\n    key: String(key),\n    keyPath,\n  };\n  item.onClick(info);\n};\n\nexport const renderContextMenuItems = (\n  items: ContextMenuItem[],\n  keyPath: string[] = [],\n  options?: RenderOptions,\n): ReactNode[] => {\n  const iconSpaceMode = options?.iconSpaceMode ?? 'global';\n  const reserveIconSpace =\n    options?.reserveIconSpace ?? hasAnyIcon(items, iconSpaceMode === 'global');\n  const indicatorOnRight = options?.indicatorOnRight ?? hasCheckboxAndIcon(items);\n\n  return items.map((item, index) => {\n    if (!item) return null;\n\n    const fallbackKey = `${keyPath.join('-') || 'root'}-${index}`;\n    const itemKey = getItemKey(item, fallbackKey);\n    const nextKeyPath = [...keyPath, String(itemKey)];\n\n    if ((item as ContextMenuCheckboxItem).type === 'checkbox') {\n      const checkboxItem = item as ContextMenuCheckboxItem;\n      const label = getItemLabel(checkboxItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(checkboxItem.danger);\n      const indicator = (\n        <ContextMenu.CheckboxItemIndicator>\n          <Icon icon={Check} size={'small'} />\n        </ContextMenu.CheckboxItemIndicator>\n      );\n\n      return (\n        <ContextMenu.CheckboxItem\n          checked={checkboxItem.checked}\n          className={cx(styles.item, isDanger && styles.danger)}\n          closeOnClick={checkboxItem.closeOnClick}\n          defaultChecked={checkboxItem.defaultChecked}\n          disabled={checkboxItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={(checked) => checkboxItem.onCheckedChange?.(checked)}\n        >\n          {renderItemContent(checkboxItem, { indicatorOnRight, reserveIconSpace }, indicator)}\n        </ContextMenu.CheckboxItem>\n      );\n    }\n\n    if ((item as ContextMenuSwitchItem).type === 'switch') {\n      const switchItem = item as ContextMenuSwitchItem;\n      const label = getItemLabel(switchItem);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = Boolean(switchItem.danger);\n\n      return (\n        <ContextMenuSwitchItemInternal\n          checked={switchItem.checked}\n          closeOnClick={switchItem.closeOnClick}\n          danger={isDanger}\n          defaultChecked={switchItem.defaultChecked}\n          disabled={switchItem.disabled}\n          key={itemKey}\n          label={labelText}\n          onCheckedChange={switchItem.onCheckedChange}\n        >\n          {renderItemContent(switchItem, { reserveIconSpace })}\n        </ContextMenuSwitchItemInternal>\n      );\n    }\n\n    if ((item as MenuDividerType).type === 'divider') {\n      return <ContextMenu.Separator className={styles.separator} key={itemKey} />;\n    }\n\n    if ((item as MenuItemGroupType).type === 'group') {\n      const group = item as MenuItemGroupType;\n      const groupReserveIconSpace =\n        iconSpaceMode === 'group'\n          ? group.children\n            ? hasAnyIcon(group.children)\n            : false\n          : reserveIconSpace;\n      const groupIndicatorOnRight = group.children ? hasCheckboxAndIcon(group.children) : false;\n      return (\n        <ContextMenu.Group key={itemKey}>\n          {group.label ? (\n            <ContextMenu.GroupLabel className={styles.groupLabel}>\n              {group.label}\n            </ContextMenu.GroupLabel>\n          ) : null}\n          {group.children\n            ? renderContextMenuItems(group.children, nextKeyPath, {\n                iconSpaceMode,\n                indicatorOnRight: groupIndicatorOnRight,\n                reserveIconSpace: groupReserveIconSpace,\n              })\n            : null}\n        </ContextMenu.Group>\n      );\n    }\n\n    if (\n      (item as SubMenuType).type === 'submenu' ||\n      ('children' in item && (item as SubMenuType).children)\n    ) {\n      const submenu = item as SubMenuType;\n      const label = getItemLabel(submenu);\n      const labelText = typeof label === 'string' ? label : undefined;\n      const isDanger = 'danger' in submenu && Boolean(submenu.danger);\n\n      return (\n        <ContextMenu.SubmenuRoot key={itemKey}>\n          <ContextMenu.SubmenuTrigger\n            className={cx(styles.item, isDanger && styles.danger)}\n            disabled={submenu.disabled}\n            label={labelText}\n          >\n            {renderItemContent(submenu, {\n              reserveIconSpace,\n              submenu: true,\n            })}\n          </ContextMenu.SubmenuTrigger>\n          <ContextMenu.Portal>\n            <ContextMenu.Positioner\n              alignOffset={-4}\n              className={styles.positioner}\n              onContextMenu={preventDefaultAndStopPropagation}\n              sideOffset={-1}\n            >\n              <ContextMenu.Popup className={styles.popup}>\n                {submenu.children && submenu.children.length > 0 ? (\n                  renderContextMenuItems(submenu.children, nextKeyPath, { iconSpaceMode })\n                ) : (\n                  <EmptyMenuItem />\n                )}\n              </ContextMenu.Popup>\n            </ContextMenu.Positioner>\n          </ContextMenu.Portal>\n        </ContextMenu.SubmenuRoot>\n      );\n    }\n\n    const menuItem = item as MenuItemType;\n    const label = getItemLabel(menuItem);\n    const labelText = typeof label === 'string' ? label : undefined;\n    const isDanger = 'danger' in menuItem && Boolean(menuItem.danger);\n\n    return (\n      <ContextMenu.Item\n        className={cx(styles.item, isDanger && styles.danger)}\n        closeOnClick={menuItem.closeOnClick}\n        disabled={menuItem.disabled}\n        key={itemKey}\n        label={labelText}\n        onClick={(event) => invokeItemClick(menuItem, nextKeyPath, event)}\n      >\n        {renderItemContent(menuItem, { reserveIconSpace })}\n      </ContextMenu.Item>\n    );\n  });\n};\n"],"mappings":"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"}

package/es/ContextMenu/store.d.mts

@@ -1,9 +1,14 @@
+import { IconSpaceMode } from "../Menu/renderUtils.mjs";
 import { ContextMenuItem } from "./type.mjs";
+import "./renderItems.mjs";
 import "@floating-ui/react";
 
 //#region src/ContextMenu/store.d.ts
 
-declare const showContextMenu: (items: ContextMenuItem[]) => void;
+interface ShowContextMenuOptions {
+  iconSpaceMode?: IconSpaceMode;
+}
+declare const showContextMenu: (items: ContextMenuItem[], options?: ShowContextMenuOptions) => void;
 /**
  * Update menu items while keeping current anchor/position.
  * Useful for interactive menu items (e.g. checkbox) to avoid re-positioning.
@@ -11,5 +16,5 @@ declare const showContextMenu: (items: ContextMenuItem[]) => void;
 declare const updateContextMenuItems: (items: ContextMenuItem[]) => void;
 declare const closeContextMenu: () => void;
 //#endregion
-export { closeContextMenu, showContextMenu, updateContextMenuItems };
+export { ShowContextMenuOptions, closeContextMenu, showContextMenu, updateContextMenuItems };
 //# sourceMappingURL=store.d.mts.map

package/es/ContextMenu/store.mjs

@@ -1,6 +1,7 @@
 //#region src/ContextMenu/store.ts
 const emptyState = {
 	anchor: null,
+	iconSpaceMode: "global",
 	items: [],
 	open: false,
 	triggerId: null
@@ -50,7 +51,7 @@ const setContextMenuState = (next) => {
 	};
 	notify();
 };
-const showContextMenu = (items) => {
+const showContextMenu = (items, options) => {
 	if (typeof window === "undefined") return;
 	const fallbackPoint = {
 		x: window.innerWidth / 2,
@@ -61,6 +62,7 @@ const showContextMenu = (items) => {
 			x: lastPointer.x,
 			y: lastPointer.y
 		} : fallbackPoint),
+		iconSpaceMode: options?.iconSpaceMode ?? "global",
 		items,
 		open: true,
 		triggerId: lastPointer.triggerId ?? null
@@ -77,6 +79,7 @@ const updateContextMenuItems = (items) => {
 const closeContextMenu = () => {
 	setContextMenuState({
 		anchor: null,
+		iconSpaceMode: "global",
 		items: [],
 		open: false,
 		triggerId: null

package/es/ContextMenu/store.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"store.mjs","names":["emptyState: ContextMenuState","contextMenuState: ContextMenuState"],"sources":["../../src/ContextMenu/store.ts"],"sourcesContent":["import type { VirtualElement } from '@floating-ui/react';\n\nimport type { ContextMenuItem } from './type';\n\nexport type ContextMenuState = {\n  anchor: VirtualElement | null;\n  items: ContextMenuItem[];\n  open: boolean;\n  triggerId: string | null;\n};\n\nconst emptyState: ContextMenuState = {\n  anchor: null,\n  items: [],\n  open: false,\n  triggerId: null,\n};\n\nlet contextMenuState: ContextMenuState = emptyState;\nconst listeners = new Set<() => void>();\nconst lastPointer = { ready: false, triggerId: null as string | null, x: 0, y: 0 };\n\nconst notify = () => {\n  listeners.forEach((listener) => listener());\n};\n\nexport const subscribe = (listener: () => void) => {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n};\n\nexport const getSnapshot = () => contextMenuState;\nexport const getServerSnapshot = () => emptyState;\n\nexport const updateLastPointer = (event: MouseEvent | PointerEvent) => {\n  lastPointer.x = event.clientX;\n  lastPointer.y = event.clientY;\n  lastPointer.ready = true;\n  if (event.target instanceof Element) {\n    const trigger = event.target.closest<HTMLElement>('[data-contextmenu-trigger]');\n    lastPointer.triggerId = trigger?.dataset.contextmenuTrigger ?? null;\n  } else {\n    lastPointer.triggerId = null;\n  }\n};\n\nconst createVirtualElement = (point: { x: number; y: number }): VirtualElement => ({\n  contextElement: typeof document === 'undefined' ? undefined : document.body,\n  getBoundingClientRect: () =>\n    ({\n      bottom: point.y,\n      height: 0,\n      left: point.x,\n      right: point.x,\n      toJSON: () => undefined,\n      top: point.y,\n      width: 0,\n      x: point.x,\n      y: point.y,\n    }) as DOMRect,\n});\n\nexport const setContextMenuState = (next: Partial<ContextMenuState>) => {\n  contextMenuState = { ...contextMenuState, ...next };\n  notify();\n};\n\nexport const showContextMenu = (items: ContextMenuItem[]) => {\n  if (typeof window === 'undefined') return;\n\n  const fallbackPoint = { x: window.innerWidth / 2, y: window.innerHeight / 2 };\n  const point = lastPointer.ready ? { x: lastPointer.x, y: lastPointer.y } : fallbackPoint;\n\n  setContextMenuState({\n    anchor: createVirtualElement(point),\n    items,\n    open: true,\n    triggerId: lastPointer.triggerId ?? null,\n  });\n};\n\n/**\n * Update menu items while keeping current anchor/position.\n * Useful for interactive menu items (e.g. checkbox) to avoid re-positioning.\n */\nexport const updateContextMenuItems = (items: ContextMenuItem[]) => {\n  if (typeof window === 'undefined') return;\n  setContextMenuState({ items });\n};\n\nexport const closeContextMenu = () => {\n  setContextMenuState({ anchor: null, items: [], open: false, triggerId: null });\n};\n"],"mappings":";AAWA,MAAMA,aAA+B;CACnC,QAAQ;CACR,OAAO,EAAE;CACT,MAAM;CACN,WAAW;CACZ;AAED,IAAIC,mBAAqC;AACzC,MAAM,4BAAY,IAAI,KAAiB;AACvC,MAAM,cAAc;CAAE,OAAO;CAAO,WAAW;CAAuB,GAAG;CAAG,GAAG;CAAG;AAElF,MAAM,eAAe;AACnB,WAAU,SAAS,aAAa,UAAU,CAAC;;AAG7C,MAAa,aAAa,aAAyB;AACjD,WAAU,IAAI,SAAS;AACvB,cAAa,UAAU,OAAO,SAAS;;AAGzC,MAAa,oBAAoB;AACjC,MAAa,0BAA0B;AAEvC,MAAa,qBAAqB,UAAqC;AACrE,aAAY,IAAI,MAAM;AACtB,aAAY,IAAI,MAAM;AACtB,aAAY,QAAQ;AACpB,KAAI,MAAM,kBAAkB,QAE1B,aAAY,YADI,MAAM,OAAO,QAAqB,6BAA6B,EAC9C,QAAQ,sBAAsB;KAE/D,aAAY,YAAY;;AAI5B,MAAM,wBAAwB,WAAqD;CACjF,gBAAgB,OAAO,aAAa,cAAc,SAAY,SAAS;CACvE,8BACG;EACC,QAAQ,MAAM;EACd,QAAQ;EACR,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc;EACd,KAAK,MAAM;EACX,OAAO;EACP,GAAG,MAAM;EACT,GAAG,MAAM;EACV;CACJ;AAED,MAAa,uBAAuB,SAAoC;AACtE,oBAAmB;EAAE,GAAG;EAAkB,GAAG;EAAM;AACnD,SAAQ;;AAGV,MAAa,mBAAmB,UAA6B;AAC3D,KAAI,OAAO,WAAW,YAAa;CAEnC,MAAM,gBAAgB;EAAE,GAAG,OAAO,aAAa;EAAG,GAAG,OAAO,cAAc;EAAG;AAG7E,qBAAoB;EAClB,QAAQ,qBAHI,YAAY,QAAQ;GAAE,GAAG,YAAY;GAAG,GAAG,YAAY;GAAG,GAAG,cAGtC;EACnC;EACA,MAAM;EACN,WAAW,YAAY,aAAa;EACrC,CAAC;;;;;;AAOJ,MAAa,0BAA0B,UAA6B;AAClE,KAAI,OAAO,WAAW,YAAa;AACnC,qBAAoB,EAAE,OAAO,CAAC;;AAGhC,MAAa,yBAAyB;AACpC,qBAAoB;EAAE,QAAQ;EAAM,OAAO,EAAE;EAAE,MAAM;EAAO,WAAW;EAAM,CAAC"}
+{"version":3,"file":"store.mjs","names":["emptyState: ContextMenuState","contextMenuState: ContextMenuState"],"sources":["../../src/ContextMenu/store.ts"],"sourcesContent":["import type { VirtualElement } from '@floating-ui/react';\n\nimport type { IconSpaceMode } from './renderItems';\nimport type { ContextMenuItem } from './type';\n\nexport type ContextMenuState = {\n  anchor: VirtualElement | null;\n  iconSpaceMode: IconSpaceMode;\n  items: ContextMenuItem[];\n  open: boolean;\n  triggerId: string | null;\n};\n\nconst emptyState: ContextMenuState = {\n  anchor: null,\n  iconSpaceMode: 'global',\n  items: [],\n  open: false,\n  triggerId: null,\n};\n\nlet contextMenuState: ContextMenuState = emptyState;\nconst listeners = new Set<() => void>();\nconst lastPointer = { ready: false, triggerId: null as string | null, x: 0, y: 0 };\n\nconst notify = () => {\n  listeners.forEach((listener) => listener());\n};\n\nexport const subscribe = (listener: () => void) => {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n};\n\nexport const getSnapshot = () => contextMenuState;\nexport const getServerSnapshot = () => emptyState;\n\nexport const updateLastPointer = (event: MouseEvent | PointerEvent) => {\n  lastPointer.x = event.clientX;\n  lastPointer.y = event.clientY;\n  lastPointer.ready = true;\n  if (event.target instanceof Element) {\n    const trigger = event.target.closest<HTMLElement>('[data-contextmenu-trigger]');\n    lastPointer.triggerId = trigger?.dataset.contextmenuTrigger ?? null;\n  } else {\n    lastPointer.triggerId = null;\n  }\n};\n\nconst createVirtualElement = (point: { x: number; y: number }): VirtualElement => ({\n  contextElement: typeof document === 'undefined' ? undefined : document.body,\n  getBoundingClientRect: () =>\n    ({\n      bottom: point.y,\n      height: 0,\n      left: point.x,\n      right: point.x,\n      toJSON: () => undefined,\n      top: point.y,\n      width: 0,\n      x: point.x,\n      y: point.y,\n    }) as DOMRect,\n});\n\nexport const setContextMenuState = (next: Partial<ContextMenuState>) => {\n  contextMenuState = { ...contextMenuState, ...next };\n  notify();\n};\n\nexport interface ShowContextMenuOptions {\n  iconSpaceMode?: IconSpaceMode;\n}\n\nexport const showContextMenu = (items: ContextMenuItem[], options?: ShowContextMenuOptions) => {\n  if (typeof window === 'undefined') return;\n\n  const fallbackPoint = { x: window.innerWidth / 2, y: window.innerHeight / 2 };\n  const point = lastPointer.ready ? { x: lastPointer.x, y: lastPointer.y } : fallbackPoint;\n\n  setContextMenuState({\n    anchor: createVirtualElement(point),\n    iconSpaceMode: options?.iconSpaceMode ?? 'global',\n    items,\n    open: true,\n    triggerId: lastPointer.triggerId ?? null,\n  });\n};\n\n/**\n * Update menu items while keeping current anchor/position.\n * Useful for interactive menu items (e.g. checkbox) to avoid re-positioning.\n */\nexport const updateContextMenuItems = (items: ContextMenuItem[]) => {\n  if (typeof window === 'undefined') return;\n  setContextMenuState({ items });\n};\n\nexport const closeContextMenu = () => {\n  setContextMenuState({\n    anchor: null,\n    iconSpaceMode: 'global',\n    items: [],\n    open: false,\n    triggerId: null,\n  });\n};\n"],"mappings":";AAaA,MAAMA,aAA+B;CACnC,QAAQ;CACR,eAAe;CACf,OAAO,EAAE;CACT,MAAM;CACN,WAAW;CACZ;AAED,IAAIC,mBAAqC;AACzC,MAAM,4BAAY,IAAI,KAAiB;AACvC,MAAM,cAAc;CAAE,OAAO;CAAO,WAAW;CAAuB,GAAG;CAAG,GAAG;CAAG;AAElF,MAAM,eAAe;AACnB,WAAU,SAAS,aAAa,UAAU,CAAC;;AAG7C,MAAa,aAAa,aAAyB;AACjD,WAAU,IAAI,SAAS;AACvB,cAAa,UAAU,OAAO,SAAS;;AAGzC,MAAa,oBAAoB;AACjC,MAAa,0BAA0B;AAEvC,MAAa,qBAAqB,UAAqC;AACrE,aAAY,IAAI,MAAM;AACtB,aAAY,IAAI,MAAM;AACtB,aAAY,QAAQ;AACpB,KAAI,MAAM,kBAAkB,QAE1B,aAAY,YADI,MAAM,OAAO,QAAqB,6BAA6B,EAC9C,QAAQ,sBAAsB;KAE/D,aAAY,YAAY;;AAI5B,MAAM,wBAAwB,WAAqD;CACjF,gBAAgB,OAAO,aAAa,cAAc,SAAY,SAAS;CACvE,8BACG;EACC,QAAQ,MAAM;EACd,QAAQ;EACR,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,cAAc;EACd,KAAK,MAAM;EACX,OAAO;EACP,GAAG,MAAM;EACT,GAAG,MAAM;EACV;CACJ;AAED,MAAa,uBAAuB,SAAoC;AACtE,oBAAmB;EAAE,GAAG;EAAkB,GAAG;EAAM;AACnD,SAAQ;;AAOV,MAAa,mBAAmB,OAA0B,YAAqC;AAC7F,KAAI,OAAO,WAAW,YAAa;CAEnC,MAAM,gBAAgB;EAAE,GAAG,OAAO,aAAa;EAAG,GAAG,OAAO,cAAc;EAAG;AAG7E,qBAAoB;EAClB,QAAQ,qBAHI,YAAY,QAAQ;GAAE,GAAG,YAAY;GAAG,GAAG,YAAY;GAAG,GAAG,cAGtC;EACnC,eAAe,SAAS,iBAAiB;EACzC;EACA,MAAM;EACN,WAAW,YAAY,aAAa;EACrC,CAAC;;;;;;AAOJ,MAAa,0BAA0B,UAA6B;AAClE,KAAI,OAAO,WAAW,YAAa;AACnC,qBAAoB,EAAE,OAAO,CAAC;;AAGhC,MAAa,yBAAyB;AACpC,qBAAoB;EAClB,QAAQ;EACR,eAAe;EACf,OAAO,EAAE;EACT,MAAM;EACN,WAAW;EACZ,CAAC"}

package/es/CopyButton/CopyButton.d.mts

@@ -1,8 +1,8 @@
 import { CopyButtonProps } from "./type.mjs";
-import * as react11 from "react";
+import * as react19 from "react";
 
 //#region src/CopyButton/CopyButton.d.ts
-declare const CopyButton: react11.NamedExoticComponent<CopyButtonProps>;
+declare const CopyButton: react19.NamedExoticComponent<CopyButtonProps>;
 //#endregion
 export { CopyButton };
 //# sourceMappingURL=CopyButton.d.mts.map

package/es/DatePicker/DatePicker.d.mts

@@ -1,8 +1,8 @@
 import { DatePickerProps } from "./type.mjs";
-import * as react12 from "react";
+import * as react76 from "react";
 
 //#region src/DatePicker/DatePicker.d.ts
-declare const DatePicker: react12.NamedExoticComponent<DatePickerProps>;
+declare const DatePicker: react76.NamedExoticComponent<DatePickerProps>;
 //#endregion
 export { DatePicker };
 //# sourceMappingURL=DatePicker.d.mts.map

package/es/DraggablePanel/DraggablePanel.mjs

@@ -8,7 +8,7 @@ import { memo, use, useCallback, useEffect, useMemo, useReducer, useRef, useTran
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ConfigProvider } from "antd";
 import { cx } from "antd-style";
-import useControlledState from "use-merge-value";
+import useMergeState from "use-merge-value";
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
 import { useHover } from "ahooks";
 import isEqual from "fast-deep-equal";
@@ -57,7 +57,7 @@ const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen,
 		"--draggable-panel-bg": backgroundColor || "",
 		"--draggable-panel-header-height": `${headerHeight}px`
 	}), [backgroundColor, headerHeight]);
-	const [isExpand, setIsExpand] = useControlledState(defaultExpand, {
+	const [isExpand, setIsExpand] = useMergeState(defaultExpand, {
 		onChange: onExpandChange,
 		value: expand
 	});

package/es/DraggablePanel/DraggablePanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggablePanel.mjs","names":["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            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            ...cssVariables,\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 (\n        <div className={cx(styles.fullscreen, className)} style={cssVariables}>\n          {children}\n        </div>\n      );\n    }\n\n    return (\n      <aside\n        className={cx(\n          panelVariants({\n            isExpand,\n            mode,\n            placement: internalPlacement,\n            showBorder,\n          }),\n          className,\n        )}\n        dir={dir}\n        ref={ref}\n        style={cssVariables}\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","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            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            ...cssVariables,\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 (\n        <div className={cx(styles.fullscreen, className)} style={cssVariables}>\n          {children}\n        </div>\n      );\n    }\n\n    return (\n      <aside\n        className={cx(\n          panelVariants({\n            isExpand,\n            mode,\n            placement: internalPlacement,\n            showBorder,\n          }),\n          className,\n        )}\n        dir={dir}\n        ref={ref}\n        style={cssVariables}\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 react21 from "react";
+import * as react81 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelBody.d.ts
 type DraggablePanelBodyProps = DivProps;
-declare const DraggablePanelBody: react21.NamedExoticComponent<DivProps>;
+declare const DraggablePanelBody: react81.NamedExoticComponent<DivProps>;
 //#endregion
 export { DraggablePanelBody, DraggablePanelBodyProps };
 //# sourceMappingURL=DraggablePanelBody.d.mts.map

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

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

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

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

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

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

package/es/DraggablePanel/components/DraggablePanelHeader.mjs

@@ -6,13 +6,13 @@ import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import useControlledState from "use-merge-value";
+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;
-	const [isPinned, setIsPinned] = useControlledState(false, {
+	const [isPinned, setIsPinned] = useMergeState(false, {
 		onChange: setPin,
 		value: pin
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"DraggablePanelHeader.mjs","names":["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} 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":";;;;;;;;;;;;AAqBA,MAAM,uBAAuB,MAAiC,UAAU;CACtE,MAAM,EAAE,KAAK,QAAQ,WAAW,WAAW,OAAO,WAAW,QAAQ,GAAG,SAAS;CAEjF,MAAM,CAAC,UAAU,eAAe,mBAAmB,OAAO;EACxD,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,YACJ,oBAACA;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"}
+{"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} 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":";;;;;;;;;;;;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,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/DraggableSideNav/DraggableSideNav.d.mts

@@ -1,8 +1,8 @@
 import { DraggableSideNavProps } from "./type.mjs";
-import * as react18 from "react";
+import * as react77 from "react";
 
 //#region src/DraggableSideNav/DraggableSideNav.d.ts
-declare const DraggableSideNav: react18.NamedExoticComponent<DraggableSideNavProps>;
+declare const DraggableSideNav: react77.NamedExoticComponent<DraggableSideNavProps>;
 //#endregion
 export { DraggableSideNav };
 //# sourceMappingURL=DraggableSideNav.d.mts.map

package/es/DraggableSideNav/DraggableSideNav.mjs

@@ -7,7 +7,7 @@ import { styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import useControlledState from "use-merge-value";
+import useMergeState from "use-merge-value";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useHover } from "ahooks";
 import { Resizable } from "re-resizable";
@@ -74,7 +74,7 @@ const DraggableSideNav = memo(({ body, className, classNames, defaultExpand = DE
 	const cssVariables = useMemo(() => ({ "--draggable-side-nav-bg": backgroundColor || "" }), [backgroundColor]);
 	const ref = useRef(null);
 	const isHovering = useHover(ref);
-	const [isExpand, setIsExpand] = useControlledState(defaultExpand, {
+	const [isExpand, setIsExpand] = useMergeState(defaultExpand, {
 		onChange: onExpandChange,
 		value: expand
 	});