@lobehub/ui 4.1.7 → 4.1.9

package/es/Accordion/Accordion.d.mts

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

package/es/Accordion/Accordion.mjs

@@ -6,14 +6,14 @@ import { Children, Fragment, isValidElement, memo, useCallback } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Divider } from "antd";
 import { LayoutGroup } from "motion/react";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 
 //#region src/Accordion/Accordion.tsx
 const Accordion = memo(({ children, className: userClassName, style: userStyle, accordion = false, defaultExpandedKeys, expandedKeys: expandedKeysProp, onExpandedChange, variant = "borderless", gap, showDivider = false, disableAnimation = false, hideIndicator = false, indicatorPlacement = "start", keepContentMounted = true, classNames, styles: customStyles, motionProps, ref, ...rest }) => {
 	const { cx, styles } = useStyles();
 	const validChildren = Children.toArray(children).filter(isValidElement);
 	const allItemKeys = validChildren.map((child, index) => child.props.itemKey || index);
-	const [expandedKeys, setExpandedKeys] = useMergeState(defaultExpandedKeys ?? allItemKeys, {
+	const [expandedKeys, setExpandedKeys] = useControlledState(defaultExpandedKeys ?? allItemKeys, {
 		onChange: onExpandedChange,
 		value: expandedKeysProp
 	});

package/es/Accordion/Accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":["newKeys: Key[]"],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { Divider } from 'antd';\nimport { LayoutGroup } from 'motion/react';\nimport { Children, Fragment, isValidElement, memo, useCallback } from 'react';\nimport type { Key } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { AccordionContext } from './context';\nimport { useStyles } from './style';\nimport type { AccordionProps } from './type';\n\nconst Accordion = memo<AccordionProps>(\n  ({\n    children,\n    className: userClassName,\n    style: userStyle,\n    accordion = false,\n    defaultExpandedKeys,\n    expandedKeys: expandedKeysProp,\n    onExpandedChange,\n    variant = 'borderless',\n    gap,\n    showDivider = false,\n    disableAnimation = false,\n    hideIndicator = false,\n    indicatorPlacement = 'start',\n    keepContentMounted = true,\n    classNames,\n    styles: customStyles,\n    motionProps,\n    ref,\n    ...rest\n  }) => {\n    const { cx, styles } = useStyles();\n\n    // Convert children to array and filter valid elements\n    const validChildren = Children.toArray(children).filter(isValidElement);\n\n    // Collect all item keys\n    const allItemKeys = validChildren.map((child, index) => (child.props as any).itemKey || index);\n\n    // If defaultExpandedKeys or expandedKeys is undefined, expand all items by default\n    const initialExpandedKeys = defaultExpandedKeys ?? allItemKeys;\n\n    const [expandedKeys, setExpandedKeys] = useMergeState<Key[]>(initialExpandedKeys, {\n      onChange: onExpandedChange,\n      value: expandedKeysProp,\n    });\n\n    const toggleExpand = useCallback(\n      (key: Key) => {\n        const prev = expandedKeys;\n        let newKeys: Key[];\n\n        if (accordion) {\n          newKeys = prev.includes(key) ? [] : [key];\n        } else {\n          newKeys = prev.includes(key) ? prev.filter((k: Key) => k !== key) : [...prev, key];\n        }\n\n        setExpandedKeys(newKeys);\n      },\n      [accordion, expandedKeys, setExpandedKeys],\n    );\n\n    const isExpanded = useCallback(\n      (key: Key) => {\n        return expandedKeys.includes(key);\n      },\n      [expandedKeys],\n    );\n\n    const contextValue = {\n      disableAnimation,\n      expandedKeys,\n      hideIndicator,\n      indicatorPlacement,\n      isExpanded,\n      keepContentMounted,\n      motionProps,\n      onToggle: toggleExpand,\n      showDivider,\n      variant,\n    };\n\n    const content = (\n      <>\n        {validChildren.map((child, index) => {\n          // Extract itemKey from child props to use as React key\n          const childKey = (child.props as any).itemKey || index;\n          return (\n            <Fragment key={childKey}>\n              {child}\n              {showDivider && index < validChildren.length - 1 && (\n                <Divider className={styles.divider} />\n              )}\n            </Fragment>\n          );\n        })}\n      </>\n    );\n\n    return (\n      <AccordionContext.Provider value={contextValue}>\n        <div\n          className={cx(styles.base, classNames?.base, userClassName)}\n          ref={ref}\n          style={{\n            gap: gap,\n            ...customStyles?.base,\n            ...userStyle,\n          }}\n          {...rest}\n        >\n          {disableAnimation ? content : <LayoutGroup>{content}</LayoutGroup>}\n        </div>\n      </AccordionContext.Provider>\n    );\n  },\n);\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAY,MACf,EACC,UACA,WAAW,eACX,OAAO,WACP,YAAY,OACZ,qBACA,cAAc,kBACd,kBACA,UAAU,cACV,KACA,cAAc,OACd,mBAAmB,OACnB,gBAAgB,OAChB,qBAAqB,SACrB,qBAAqB,MACrB,YACA,QAAQ,cACR,aACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAGlC,MAAM,gBAAgB,SAAS,QAAQ,SAAS,CAAC,OAAO,eAAe;CAGvE,MAAM,cAAc,cAAc,KAAK,OAAO,UAAW,MAAM,MAAc,WAAW,MAAM;CAK9F,MAAM,CAAC,cAAc,mBAAmB,cAFZ,uBAAuB,aAE+B;EAChF,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,eAAe,aAClB,QAAa;EACZ,MAAM,OAAO;EACb,IAAIA;AAEJ,MAAI,UACF,WAAU,KAAK,SAAS,IAAI,GAAG,EAAE,GAAG,CAAC,IAAI;MAEzC,WAAU,KAAK,SAAS,IAAI,GAAG,KAAK,QAAQ,MAAW,MAAM,IAAI,GAAG,CAAC,GAAG,MAAM,IAAI;AAGpF,kBAAgB,QAAQ;IAE1B;EAAC;EAAW;EAAc;EAAgB,CAC3C;CASD,MAAM,eAAe;EACnB;EACA;EACA;EACA;EACA,YAZiB,aAChB,QAAa;AACZ,UAAO,aAAa,SAAS,IAAI;KAEnC,CAAC,aAAa,CACf;EAQC;EACA;EACA,UAAU;EACV;EACA;EACD;CAED,MAAM,UACJ,4CACG,cAAc,KAAK,OAAO,UAAU;EAEnC,MAAM,WAAY,MAAM,MAAc,WAAW;AACjD,SACE,qBAAC,uBACE,OACA,eAAe,QAAQ,cAAc,SAAS,KAC7C,oBAAC,WAAQ,WAAW,OAAO,UAAW,KAH3B,SAKJ;GAEb,GACD;AAGL,QACE,oBAAC,iBAAiB;EAAS,OAAO;YAChC,oBAAC;GACC,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,cAAc;GACtD;GACL,OAAO;IACA;IACL,GAAG,cAAc;IACjB,GAAG;IACJ;GACD,GAAI;aAEH,mBAAmB,UAAU,oBAAC,yBAAa,UAAsB;IAC9D;GACoB;EAGjC;AAED,UAAU,cAAc;AAExB,wBAAe"}
+{"version":3,"file":"Accordion.mjs","names":["useMergeState","newKeys: Key[]"],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { Divider } from 'antd';\nimport { LayoutGroup } from 'motion/react';\nimport { Children, Fragment, isValidElement, memo, useCallback } from 'react';\nimport type { Key } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { AccordionContext } from './context';\nimport { useStyles } from './style';\nimport type { AccordionProps } from './type';\n\nconst Accordion = memo<AccordionProps>(\n  ({\n    children,\n    className: userClassName,\n    style: userStyle,\n    accordion = false,\n    defaultExpandedKeys,\n    expandedKeys: expandedKeysProp,\n    onExpandedChange,\n    variant = 'borderless',\n    gap,\n    showDivider = false,\n    disableAnimation = false,\n    hideIndicator = false,\n    indicatorPlacement = 'start',\n    keepContentMounted = true,\n    classNames,\n    styles: customStyles,\n    motionProps,\n    ref,\n    ...rest\n  }) => {\n    const { cx, styles } = useStyles();\n\n    // Convert children to array and filter valid elements\n    const validChildren = Children.toArray(children).filter(isValidElement);\n\n    // Collect all item keys\n    const allItemKeys = validChildren.map((child, index) => (child.props as any).itemKey || index);\n\n    // If defaultExpandedKeys or expandedKeys is undefined, expand all items by default\n    const initialExpandedKeys = defaultExpandedKeys ?? allItemKeys;\n\n    const [expandedKeys, setExpandedKeys] = useMergeState<Key[]>(initialExpandedKeys, {\n      onChange: onExpandedChange,\n      value: expandedKeysProp,\n    });\n\n    const toggleExpand = useCallback(\n      (key: Key) => {\n        const prev = expandedKeys;\n        let newKeys: Key[];\n\n        if (accordion) {\n          newKeys = prev.includes(key) ? [] : [key];\n        } else {\n          newKeys = prev.includes(key) ? prev.filter((k: Key) => k !== key) : [...prev, key];\n        }\n\n        setExpandedKeys(newKeys);\n      },\n      [accordion, expandedKeys, setExpandedKeys],\n    );\n\n    const isExpanded = useCallback(\n      (key: Key) => {\n        return expandedKeys.includes(key);\n      },\n      [expandedKeys],\n    );\n\n    const contextValue = {\n      disableAnimation,\n      expandedKeys,\n      hideIndicator,\n      indicatorPlacement,\n      isExpanded,\n      keepContentMounted,\n      motionProps,\n      onToggle: toggleExpand,\n      showDivider,\n      variant,\n    };\n\n    const content = (\n      <>\n        {validChildren.map((child, index) => {\n          // Extract itemKey from child props to use as React key\n          const childKey = (child.props as any).itemKey || index;\n          return (\n            <Fragment key={childKey}>\n              {child}\n              {showDivider && index < validChildren.length - 1 && (\n                <Divider className={styles.divider} />\n              )}\n            </Fragment>\n          );\n        })}\n      </>\n    );\n\n    return (\n      <AccordionContext.Provider value={contextValue}>\n        <div\n          className={cx(styles.base, classNames?.base, userClassName)}\n          ref={ref}\n          style={{\n            gap: gap,\n            ...customStyles?.base,\n            ...userStyle,\n          }}\n          {...rest}\n        >\n          {disableAnimation ? content : <LayoutGroup>{content}</LayoutGroup>}\n        </div>\n      </AccordionContext.Provider>\n    );\n  },\n);\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAY,MACf,EACC,UACA,WAAW,eACX,OAAO,WACP,YAAY,OACZ,qBACA,cAAc,kBACd,kBACA,UAAU,cACV,KACA,cAAc,OACd,mBAAmB,OACnB,gBAAgB,OAChB,qBAAqB,SACrB,qBAAqB,MACrB,YACA,QAAQ,cACR,aACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,IAAI,WAAW,WAAW;CAGlC,MAAM,gBAAgB,SAAS,QAAQ,SAAS,CAAC,OAAO,eAAe;CAGvE,MAAM,cAAc,cAAc,KAAK,OAAO,UAAW,MAAM,MAAc,WAAW,MAAM;CAK9F,MAAM,CAAC,cAAc,mBAAmBA,mBAFZ,uBAAuB,aAE+B;EAChF,UAAU;EACV,OAAO;EACR,CAAC;CAEF,MAAM,eAAe,aAClB,QAAa;EACZ,MAAM,OAAO;EACb,IAAIC;AAEJ,MAAI,UACF,WAAU,KAAK,SAAS,IAAI,GAAG,EAAE,GAAG,CAAC,IAAI;MAEzC,WAAU,KAAK,SAAS,IAAI,GAAG,KAAK,QAAQ,MAAW,MAAM,IAAI,GAAG,CAAC,GAAG,MAAM,IAAI;AAGpF,kBAAgB,QAAQ;IAE1B;EAAC;EAAW;EAAc;EAAgB,CAC3C;CASD,MAAM,eAAe;EACnB;EACA;EACA;EACA;EACA,YAZiB,aAChB,QAAa;AACZ,UAAO,aAAa,SAAS,IAAI;KAEnC,CAAC,aAAa,CACf;EAQC;EACA;EACA,UAAU;EACV;EACA;EACD;CAED,MAAM,UACJ,4CACG,cAAc,KAAK,OAAO,UAAU;EAEnC,MAAM,WAAY,MAAM,MAAc,WAAW;AACjD,SACE,qBAAC,uBACE,OACA,eAAe,QAAQ,cAAc,SAAS,KAC7C,oBAAC,WAAQ,WAAW,OAAO,UAAW,KAH3B,SAKJ;GAEb,GACD;AAGL,QACE,oBAAC,iBAAiB;EAAS,OAAO;YAChC,oBAAC;GACC,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,cAAc;GACtD;GACL,OAAO;IACA;IACL,GAAG,cAAc;IACjB,GAAG;IACJ;GACD,GAAI;aAEH,mBAAmB,UAAU,oBAAC,yBAAa,UAAsB;IAC9D;GACoB;EAGjC;AAED,UAAU,cAAc;AAExB,wBAAe"}

package/es/Accordion/AccordionItem.d.mts

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

package/es/ActionIcon/ActionIcon.d.mts

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

package/es/Alert/Alert.d.mts

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

package/es/AutoComplete/Select.d.mts

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

package/es/Avatar/AvatarGroup/index.d.mts

@@ -1,8 +1,8 @@
 import { AvatarGroupProps } from "../type.mjs";
-import * as react28 from "react";
+import * as react69 from "react";
 
 //#region src/Avatar/AvatarGroup/index.d.ts
-declare const AvatarGroup: react28.NamedExoticComponent<AvatarGroupProps>;
+declare const AvatarGroup: react69.NamedExoticComponent<AvatarGroupProps>;
 //#endregion
 export { AvatarGroup };
 //# sourceMappingURL=index.d.mts.map

package/es/Burger/Burger.d.mts

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

package/es/CodeEditor/CodeEditor.d.mts

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

package/es/CodeEditor/CodeEditor.mjs

@@ -5,13 +5,13 @@ import { useStyles } from "./style.mjs";
 import SyntaxHighlighter_default from "../Highlighter/SyntaxHighlighter/index.mjs";
 import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 import { cva } from "class-variance-authority";
 
 //#region src/CodeEditor/CodeEditor.tsx
 const CodeEditor = memo(({ autoFocus, classNames, styles: customStyles, defaultValue = "", onChange, placeholder = "", style, className, onValueChange, value, language = "markdown", variant = "borderless", width, height, flex, ref, ...rest }) => {
 	const { styles, cx, theme } = useStyles();
-	const [code, setCode] = useMergeState(defaultValue, {
+	const [code, setCode] = useControlledState(defaultValue, {
 		defaultValue,
 		onChange: onValueChange,
 		value

package/es/CodeEditor/CodeEditor.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor.mjs","names":["Flexbox","SyntaxHighlighter"],"sources":["../../src/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { useStyles } from '@/CodeEditor/style';\nimport { Flexbox } from '@/Flex';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\n\nimport { CodeEditorProps } from './type';\n\nconst CodeEditor = memo<CodeEditorProps>(\n  ({\n    autoFocus,\n    classNames,\n    styles: customStyles,\n    defaultValue = '',\n    onChange,\n    placeholder = '',\n    style,\n    className,\n    onValueChange,\n    value,\n    language = 'markdown',\n    variant = 'borderless',\n    width,\n    height,\n    flex,\n    ref,\n    ...rest\n  }) => {\n    const { styles, cx, theme } = useStyles();\n    const [code, setCode] = useMergeState(defaultValue, {\n      defaultValue,\n      onChange: onValueChange,\n      value,\n    });\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            variant: 'borderless',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    return (\n      <Flexbox\n        className={cx(variants({ variant }), className)}\n        flex={flex}\n        height={height}\n        style={style}\n        width={width}\n      >\n        {value ? (\n          <SyntaxHighlighter\n            className={cx(styles.highlight, classNames?.highlight)}\n            language={language}\n            style={customStyles?.highlight}\n            variant={variant}\n          >\n            {value}\n          </SyntaxHighlighter>\n        ) : (\n          <pre\n            className={cx(styles.highlight, classNames?.highlight)}\n            style={{\n              color: theme.colorTextDescription,\n            }}\n          >\n            {placeholder || ' '}\n          </pre>\n        )}\n\n        <textarea\n          autoCapitalize=\"off\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoFocus={autoFocus}\n          className={cx(styles.textarea, classNames?.textarea)}\n          data-gramm={false}\n          onChange={(e) => {\n            onChange?.(e);\n            setCode(e.target.value);\n          }}\n          ref={ref}\n          style={customStyles?.textarea}\n          value={code}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nCodeEditor.displayName = 'CodeEditor';\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,aAAa,MAChB,EACC,WACA,YACA,QAAQ,cACR,eAAe,IACf,UACA,cAAc,IACd,OACA,WACA,eACA,OACA,WAAW,YACX,UAAU,cACV,OACA,QACA,MACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;CACzC,MAAM,CAAC,MAAM,WAAW,cAAc,cAAc;EAClD;EACA,UAAU;EACV;EACD,CAAC;AAqBF,QACE,qBAACA;EACC,WAAW,GArBE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB,EACf,SAAS,cACV;GAED,UAAU,EACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB,EACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAI0B,EAAE,SAAS,CAAC,EAAE,UAAU;EACzC;EACE;EACD;EACA;aAEN,QACC,oBAACC;GACC,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GAC5C;GACV,OAAO,cAAc;GACZ;aAER;IACiB,GAEpB,oBAAC;GACC,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GACtD,OAAO,EACL,OAAO,MAAM,sBACd;aAEA,eAAe;IACZ,EAGR,oBAAC;GACC,gBAAe;GACf,cAAa;GACb,aAAY;GACD;GACX,WAAW,GAAG,OAAO,UAAU,YAAY,SAAS;GACpD,cAAY;GACZ,WAAW,MAAM;AACf,eAAW,EAAE;AACb,YAAQ,EAAE,OAAO,MAAM;;GAEpB;GACL,OAAO,cAAc;GACrB,OAAO;GACP,GAAI;IACJ;GACM;EAGf;AAED,WAAW,cAAc;AAEzB,yBAAe"}
+{"version":3,"file":"CodeEditor.mjs","names":["useMergeState","Flexbox","SyntaxHighlighter"],"sources":["../../src/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { useStyles } from '@/CodeEditor/style';\nimport { Flexbox } from '@/Flex';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\n\nimport { CodeEditorProps } from './type';\n\nconst CodeEditor = memo<CodeEditorProps>(\n  ({\n    autoFocus,\n    classNames,\n    styles: customStyles,\n    defaultValue = '',\n    onChange,\n    placeholder = '',\n    style,\n    className,\n    onValueChange,\n    value,\n    language = 'markdown',\n    variant = 'borderless',\n    width,\n    height,\n    flex,\n    ref,\n    ...rest\n  }) => {\n    const { styles, cx, theme } = useStyles();\n    const [code, setCode] = useMergeState(defaultValue, {\n      defaultValue,\n      onChange: onValueChange,\n      value,\n    });\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            variant: 'borderless',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    return (\n      <Flexbox\n        className={cx(variants({ variant }), className)}\n        flex={flex}\n        height={height}\n        style={style}\n        width={width}\n      >\n        {value ? (\n          <SyntaxHighlighter\n            className={cx(styles.highlight, classNames?.highlight)}\n            language={language}\n            style={customStyles?.highlight}\n            variant={variant}\n          >\n            {value}\n          </SyntaxHighlighter>\n        ) : (\n          <pre\n            className={cx(styles.highlight, classNames?.highlight)}\n            style={{\n              color: theme.colorTextDescription,\n            }}\n          >\n            {placeholder || ' '}\n          </pre>\n        )}\n\n        <textarea\n          autoCapitalize=\"off\"\n          autoComplete=\"off\"\n          autoCorrect=\"off\"\n          autoFocus={autoFocus}\n          className={cx(styles.textarea, classNames?.textarea)}\n          data-gramm={false}\n          onChange={(e) => {\n            onChange?.(e);\n            setCode(e.target.value);\n          }}\n          ref={ref}\n          style={customStyles?.textarea}\n          value={code}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nCodeEditor.displayName = 'CodeEditor';\n\nexport default CodeEditor;\n"],"mappings":";;;;;;;;;;;AAYA,MAAM,aAAa,MAChB,EACC,WACA,YACA,QAAQ,cACR,eAAe,IACf,UACA,cAAc,IACd,OACA,WACA,eACA,OACA,WAAW,YACX,UAAU,cACV,OACA,QACA,MACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,IAAI,UAAU,WAAW;CACzC,MAAM,CAAC,MAAM,WAAWA,mBAAc,cAAc;EAClD;EACA,UAAU;EACV;EACD,CAAC;AAqBF,QACE,qBAACC;EACC,WAAW,GArBE,cAEb,IAAI,OAAO,MAAM;GACf,iBAAiB,EACf,SAAS,cACV;GAED,UAAU,EACR,SAAS;IACP,QAAQ,OAAO;IACf,UAAU,OAAO;IACjB,YAAY,OAAO;IACpB,EACF;GAEF,CAAC,EACJ,CAAC,OAAO,CACT,CAI0B,EAAE,SAAS,CAAC,EAAE,UAAU;EACzC;EACE;EACD;EACA;aAEN,QACC,oBAACC;GACC,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GAC5C;GACV,OAAO,cAAc;GACZ;aAER;IACiB,GAEpB,oBAAC;GACC,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GACtD,OAAO,EACL,OAAO,MAAM,sBACd;aAEA,eAAe;IACZ,EAGR,oBAAC;GACC,gBAAe;GACf,cAAa;GACb,aAAY;GACD;GACX,WAAW,GAAG,OAAO,UAAU,YAAY,SAAS;GACpD,cAAY;GACZ,WAAW,MAAM;AACf,eAAW,EAAE;AACb,YAAQ,EAAE,OAAO,MAAM;;GAEpB;GACL,OAAO,cAAc;GACrB,OAAO;GACP,GAAI;IACJ;GACM;EAGf;AAED,WAAW,cAAc;AAEzB,yBAAe"}

package/es/Collapse/Collapse.d.mts

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

package/es/ColorSwatches/ColorSwatches.mjs

@@ -8,14 +8,14 @@ import { useStyles } from "./style.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ColorPicker } from "antd";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 import { CheckIcon } from "lucide-react";
 import { readableColor, rgba } from "polished";
 import chroma from "chroma-js";
 
 //#region src/ColorSwatches/ColorSwatches.tsx
 const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultValue, value, style, colors, onChange, size = 24, shape = "circle", texts, ref, ...rest }) => {
-	const [active, setActive] = useMergeState(defaultValue, {
+	const [active, setActive] = useControlledState(defaultValue, {
 		defaultValue,
 		onChange,
 		value

package/es/ColorSwatches/ColorSwatches.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatches.mjs","names":["ColorSwatches: FC<ColorSwatchesProps>","Flexbox","Tooltip","Center","Icon"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport { ColorPicker } from 'antd';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { readableColor, rgba } from 'polished';\nimport { type FC, useMemo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Tooltip from '@/Tooltip';\n\nimport { useStyles } from './style';\nimport type { ColorSwatchesProps } from './type';\n\nconst ColorSwatches: FC<ColorSwatchesProps> = ({\n  enableColorPicker,\n  enableColorSwatches = true,\n  defaultValue,\n  value,\n  style,\n  colors,\n  onChange,\n  size = 24,\n  shape = 'circle',\n  texts,\n  ref,\n  ...rest\n}) => {\n  const [active, setActive] = useMergeState(defaultValue, {\n    defaultValue,\n    onChange,\n    value,\n  });\n  const { cx, styles, theme } = useStyles(size);\n\n  const isCustomActive = useMemo(\n    () => active && active !== theme.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors, theme.colorPrimary],\n  );\n\n  return (\n    <Flexbox gap={6} horizontal ref={ref} style={{ flexWrap: 'wrap', ...style }} {...rest}>\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || theme.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          const isTransparent = c.color === 'transparent' || chroma(c.color).alpha() === 0;\n          return (\n            <Tooltip key={c?.key || i} title={c.title}>\n              <Center\n                className={cx(\n                  styles.container,\n                  isTransparent && styles.transparent,\n                  isActive && styles.active,\n                )}\n                onClick={() => setActive(c.color || undefined)}\n                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : theme.borderRadius,\n                }}\n              >\n                {isActive && (\n                  <Icon\n                    color={rgba(readableColor(color), 0.33)}\n                    icon={CheckIcon}\n                    size={{ size: 14, strokeWidth: 4 }}\n                    style={{\n                      pointerEvents: 'none',\n                    }}\n                  />\n                )}\n              </Center>\n            </Tooltip>\n          );\n        })}\n      {enableColorPicker && (\n        <Tooltip title={texts?.custom || 'Custom'}>\n          <ColorPicker\n            arrow={false}\n            className={cx(\n              styles.picker,\n              enableColorSwatches && styles.conic,\n              isCustomActive && styles.active,\n            )}\n            defaultValue={theme.colorPrimary}\n            disabledAlpha\n            format={'hex'}\n            onChangeComplete={(c) => {\n              if (c.toHexString() === theme.colorPrimary) {\n                setActive('');\n              } else {\n                setActive(c.toHexString());\n              }\n            }}\n            presets={\n              enableColorSwatches\n                ? undefined\n                : [\n                    {\n                      colors: colors.map((c) => c.color),\n                      label: texts?.presets || 'Presets',\n                    },\n                  ]\n            }\n            style={{\n              borderRadius: shape === 'circle' ? '50%' : theme.borderRadius,\n            }}\n            value={enableColorSwatches ? undefined : active}\n          />\n        </Tooltip>\n      )}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAMA,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,cAAc,cAAc;EACtD;EACA;EACA;EACD,CAAC;CACF,MAAM,EAAE,IAAI,QAAQ,UAAU,UAAU,KAAK;CAE7C,MAAM,iBAAiB,cACf,UAAU,WAAW,MAAM,gBAAgB,CAAC,OAAO,MAAM,MAAM,EAAE,UAAU,OAAO,EACxF;EAAC;EAAQ;EAAQ,MAAM;EAAa,CACrC;AAED,QACE,qBAACC;EAAQ,KAAK;EAAG;EAAgB;EAAK,OAAO;GAAE,UAAU;GAAQ,GAAG;GAAO;EAAE,GAAI;aAC9E,uBACC,OAAO,KAAK,GAAG,MAAM;GACnB,MAAM,QAAQ,EAAE,SAAS,MAAM;GAC/B,MAAM,WAAY,CAAC,UAAU,CAAC,EAAE,SAAU,UAAU;GACpD,MAAM,gBAAgB,EAAE,UAAU,iBAAiB,OAAO,EAAE,MAAM,CAAC,OAAO,KAAK;AAC/E,UACE,oBAACC;IAA0B,OAAO,EAAE;cAClC,oBAACC;KACC,WAAW,GACT,OAAO,WACP,iBAAiB,OAAO,aACxB,YAAY,OAAO,OACpB;KACD,eAAe,UAAU,EAAE,SAAS,OAAU;KAC9C,OAAO;MACL,YAAY,gBAAgB,SAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,MAAM;MAClD;eAEA,YACC,oBAACC;MACC,OAAO,KAAK,cAAc,MAAM,EAAE,IAAK;MACvC,MAAM;MACN,MAAM;OAAE,MAAM;OAAI,aAAa;OAAG;MAClC,OAAO,EACL,eAAe,QAChB;OACD;MAEG;MAvBG,GAAG,OAAO,EAwBd;IAEZ,EACH,qBACC,oBAACF;GAAQ,OAAO,OAAO,UAAU;aAC/B,oBAAC;IACC,OAAO;IACP,WAAW,GACT,OAAO,QACP,uBAAuB,OAAO,OAC9B,kBAAkB,OAAO,OAC1B;IACD,cAAc,MAAM;IACpB;IACA,QAAQ;IACR,mBAAmB,MAAM;AACvB,SAAI,EAAE,aAAa,KAAK,MAAM,aAC5B,WAAU,GAAG;SAEb,WAAU,EAAE,aAAa,CAAC;;IAG9B,SACE,sBACI,SACA,CACE;KACE,QAAQ,OAAO,KAAK,MAAM,EAAE,MAAM;KAClC,OAAO,OAAO,WAAW;KAC1B,CACF;IAEP,OAAO,EACL,cAAc,UAAU,WAAW,QAAQ,MAAM,cAClD;IACD,OAAO,sBAAsB,SAAY;KACzC;IACM;GAEJ;;AAId,cAAc,cAAc;AAE5B,4BAAe"}
+{"version":3,"file":"ColorSwatches.mjs","names":["ColorSwatches: FC<ColorSwatchesProps>","useMergeState","Flexbox","Tooltip","Center","Icon"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport { ColorPicker } from 'antd';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { readableColor, rgba } from 'polished';\nimport { type FC, useMemo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Tooltip from '@/Tooltip';\n\nimport { useStyles } from './style';\nimport type { ColorSwatchesProps } from './type';\n\nconst ColorSwatches: FC<ColorSwatchesProps> = ({\n  enableColorPicker,\n  enableColorSwatches = true,\n  defaultValue,\n  value,\n  style,\n  colors,\n  onChange,\n  size = 24,\n  shape = 'circle',\n  texts,\n  ref,\n  ...rest\n}) => {\n  const [active, setActive] = useMergeState(defaultValue, {\n    defaultValue,\n    onChange,\n    value,\n  });\n  const { cx, styles, theme } = useStyles(size);\n\n  const isCustomActive = useMemo(\n    () => active && active !== theme.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors, theme.colorPrimary],\n  );\n\n  return (\n    <Flexbox gap={6} horizontal ref={ref} style={{ flexWrap: 'wrap', ...style }} {...rest}>\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || theme.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          const isTransparent = c.color === 'transparent' || chroma(c.color).alpha() === 0;\n          return (\n            <Tooltip key={c?.key || i} title={c.title}>\n              <Center\n                className={cx(\n                  styles.container,\n                  isTransparent && styles.transparent,\n                  isActive && styles.active,\n                )}\n                onClick={() => setActive(c.color || undefined)}\n                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : theme.borderRadius,\n                }}\n              >\n                {isActive && (\n                  <Icon\n                    color={rgba(readableColor(color), 0.33)}\n                    icon={CheckIcon}\n                    size={{ size: 14, strokeWidth: 4 }}\n                    style={{\n                      pointerEvents: 'none',\n                    }}\n                  />\n                )}\n              </Center>\n            </Tooltip>\n          );\n        })}\n      {enableColorPicker && (\n        <Tooltip title={texts?.custom || 'Custom'}>\n          <ColorPicker\n            arrow={false}\n            className={cx(\n              styles.picker,\n              enableColorSwatches && styles.conic,\n              isCustomActive && styles.active,\n            )}\n            defaultValue={theme.colorPrimary}\n            disabledAlpha\n            format={'hex'}\n            onChangeComplete={(c) => {\n              if (c.toHexString() === theme.colorPrimary) {\n                setActive('');\n              } else {\n                setActive(c.toHexString());\n              }\n            }}\n            presets={\n              enableColorSwatches\n                ? undefined\n                : [\n                    {\n                      colors: colors.map((c) => c.color),\n                      label: texts?.presets || 'Presets',\n                    },\n                  ]\n            }\n            style={{\n              borderRadius: shape === 'circle' ? '50%' : theme.borderRadius,\n            }}\n            value={enableColorSwatches ? undefined : active}\n          />\n        </Tooltip>\n      )}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAMA,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAaC,mBAAc,cAAc;EACtD;EACA;EACA;EACD,CAAC;CACF,MAAM,EAAE,IAAI,QAAQ,UAAU,UAAU,KAAK;CAE7C,MAAM,iBAAiB,cACf,UAAU,WAAW,MAAM,gBAAgB,CAAC,OAAO,MAAM,MAAM,EAAE,UAAU,OAAO,EACxF;EAAC;EAAQ;EAAQ,MAAM;EAAa,CACrC;AAED,QACE,qBAACC;EAAQ,KAAK;EAAG;EAAgB;EAAK,OAAO;GAAE,UAAU;GAAQ,GAAG;GAAO;EAAE,GAAI;aAC9E,uBACC,OAAO,KAAK,GAAG,MAAM;GACnB,MAAM,QAAQ,EAAE,SAAS,MAAM;GAC/B,MAAM,WAAY,CAAC,UAAU,CAAC,EAAE,SAAU,UAAU;GACpD,MAAM,gBAAgB,EAAE,UAAU,iBAAiB,OAAO,EAAE,MAAM,CAAC,OAAO,KAAK;AAC/E,UACE,oBAACC;IAA0B,OAAO,EAAE;cAClC,oBAACC;KACC,WAAW,GACT,OAAO,WACP,iBAAiB,OAAO,aACxB,YAAY,OAAO,OACpB;KACD,eAAe,UAAU,EAAE,SAAS,OAAU;KAC9C,OAAO;MACL,YAAY,gBAAgB,SAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,MAAM;MAClD;eAEA,YACC,oBAACC;MACC,OAAO,KAAK,cAAc,MAAM,EAAE,IAAK;MACvC,MAAM;MACN,MAAM;OAAE,MAAM;OAAI,aAAa;OAAG;MAClC,OAAO,EACL,eAAe,QAChB;OACD;MAEG;MAvBG,GAAG,OAAO,EAwBd;IAEZ,EACH,qBACC,oBAACF;GAAQ,OAAO,OAAO,UAAU;aAC/B,oBAAC;IACC,OAAO;IACP,WAAW,GACT,OAAO,QACP,uBAAuB,OAAO,OAC9B,kBAAkB,OAAO,OAC1B;IACD,cAAc,MAAM;IACpB;IACA,QAAQ;IACR,mBAAmB,MAAM;AACvB,SAAI,EAAE,aAAa,KAAK,MAAM,aAC5B,WAAU,GAAG;SAEb,WAAU,EAAE,aAAa,CAAC;;IAG9B,SACE,sBACI,SACA,CACE;KACE,QAAQ,OAAO,KAAK,MAAM,EAAE,MAAM;KAClC,OAAO,OAAO,WAAW;KAC1B,CACF;IAEP,OAAO,EACL,cAAc,UAAU,WAAW,QAAQ,MAAM,cAClD;IACD,OAAO,sBAAsB,SAAY;KACzC;IACM;GAEJ;;AAId,cAAc,cAAc;AAE5B,4BAAe"}

package/es/CopyButton/CopyButton.d.mts

@@ -1,8 +1,8 @@
 import { CopyButtonProps } from "./type.mjs";
-import * as react1 from "react";
+import * as react15 from "react";
 
 //#region src/CopyButton/CopyButton.d.ts
-declare const CopyButton: react1.NamedExoticComponent<CopyButtonProps>;
+declare const CopyButton: react15.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 react4 from "react";
+import * as react22 from "react";
 
 //#region src/DatePicker/DatePicker.d.ts
-declare const DatePicker: react4.NamedExoticComponent<DatePickerProps>;
+declare const DatePicker: react22.NamedExoticComponent<DatePickerProps>;
 //#endregion
 export { DatePicker };
 //# sourceMappingURL=DatePicker.d.mts.map

package/es/DraggablePanel/DraggablePanel.mjs

@@ -7,7 +7,7 @@ import { reversePlacement } from "./utils.mjs";
 import { memo, use, useCallback, useEffect, useMemo, useReducer, useRef, useTransition } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ConfigProvider } from "antd";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 import { cva } from "class-variance-authority";
 import { useHover } from "ahooks";
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
@@ -58,7 +58,7 @@ const DraggablePanel = memo(({ headerHeight = DEFAULT_HEADER_HEIGHT, fullscreen,
 		showBorder,
 		showHandleWideArea
 	});
-	const [isExpand, setIsExpand] = useMergeState(defaultExpand, {
+	const [isExpand, setIsExpand] = useControlledState(defaultExpand, {
 		onChange: onExpandChange,
 		value: expand
 	});

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

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

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react50 from "react";
+import * as react16 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelBody.d.ts
 type DraggablePanelBodyProps = DivProps;
-declare const DraggablePanelBody: react50.NamedExoticComponent<DivProps>;
+declare const DraggablePanelBody: react16.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 react51 from "react";
+import * as react17 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelContainer.d.ts
 type DraggablePanelContainerProps = DivProps;
-declare const DraggablePanelContainer: react51.NamedExoticComponent<DivProps>;
+declare const DraggablePanelContainer: react17.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 react52 from "react";
+import * as react18 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelFooter.d.ts
 type DraggablePanelFooterProps = DivProps;
-declare const DraggablePanelFooter: react52.NamedExoticComponent<DivProps>;
+declare const DraggablePanelFooter: react18.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 react53 from "react";
+import * as react19 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: react53.NamedExoticComponent<DraggablePanelHeaderProps>;
+declare const DraggablePanelHeader: react19.NamedExoticComponent<DraggablePanelHeaderProps>;
 //#endregion
 export { DraggablePanelHeader, DraggablePanelHeaderProps };
 //# sourceMappingURL=DraggablePanelHeader.d.mts.map

package/es/DraggablePanel/components/DraggablePanelHeader.mjs

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

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

package/es/DraggableSideNav/DraggableSideNav.d.mts

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

package/es/DraggableSideNav/DraggableSideNav.mjs

@@ -6,7 +6,7 @@ import Icon_default from "../Icon/Icon.mjs";
 import { useStyles } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 import { useHover } from "ahooks";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Resizable } from "re-resizable";
@@ -76,7 +76,7 @@ const DraggableSideNav = memo(({ body, className, classNames, defaultExpand = DE
 	});
 	const ref = useRef(null);
 	const isHovering = useHover(ref);
-	const [isExpand, setIsExpand] = useMergeState(defaultExpand, {
+	const [isExpand, setIsExpand] = useControlledState(defaultExpand, {
 		onChange: onExpandChange,
 		value: expand
 	});