@lobehub/ui 5.9.2 → 5.9.3

package/es/Accordion/Accordion.mjs

@@ -6,12 +6,12 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Divider } from "antd";
 import { cx } from "antd-style";
 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 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":[],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { Divider } from 'antd';\nimport { cx } from 'antd-style';\nimport { LayoutGroup } from 'motion/react';\nimport { type Key } from 'react';\nimport { Children, Fragment, isValidElement, memo, useCallback } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { AccordionContext } from './context';\nimport { styles } 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    // 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 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>\n    );\n  },\n);\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;AAaA,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;CAEJ,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,IAAI;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,oBAAA,YAAA,EAAA,UACG,cAAc,KAAK,OAAO,UAAU;EAEnC,MAAM,WAAY,MAAM,MAAc,WAAW;AACjD,SACE,qBAAC,UAAD,EAAA,UAAA,CACG,OACA,eAAe,QAAQ,cAAc,SAAS,KAC7C,oBAAC,SAAD,EAAS,WAAW,OAAO,SAAW,CAAA,CAE/B,EAAA,EALI,SAKJ;GAEb,EACD,CAAA;AAGL,QACE,oBAAC,kBAAD;EAAkB,OAAO;YACvB,oBAAC,OAAD;GACE,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,cAAc;GACtD;GACL,OAAO;IACA;IACL,GAAG,cAAc;IACjB,GAAG;IACJ;GACD,GAAI;aAEH,mBAAmB,UAAU,oBAAC,aAAD,EAAA,UAAc,SAAsB,CAAA;GAC9D,CAAA;EACW,CAAA;EAGxB;AAED,UAAU,cAAc"}
+{"version":3,"file":"Accordion.mjs","names":["useMergeState"],"sources":["../../src/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { Divider } from 'antd';\nimport { cx } from 'antd-style';\nimport { LayoutGroup } from 'motion/react';\nimport { type Key } from 'react';\nimport { Children, Fragment, isValidElement, memo, useCallback } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { AccordionContext } from './context';\nimport { styles } 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    // 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 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>\n    );\n  },\n);\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;;;;;AAaA,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;CAEJ,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,IAAI;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,oBAAA,YAAA,EAAA,UACG,cAAc,KAAK,OAAO,UAAU;EAEnC,MAAM,WAAY,MAAM,MAAc,WAAW;AACjD,SACE,qBAAC,UAAD,EAAA,UAAA,CACG,OACA,eAAe,QAAQ,cAAc,SAAS,KAC7C,oBAAC,SAAD,EAAS,WAAW,OAAO,SAAW,CAAA,CAE/B,EAAA,EALI,SAKJ;GAEb,EACD,CAAA;AAGL,QACE,oBAAC,kBAAD;EAAkB,OAAO;YACvB,oBAAC,OAAD;GACE,WAAW,GAAG,OAAO,MAAM,YAAY,MAAM,cAAc;GACtD;GACL,OAAO;IACA;IACL,GAAG,cAAc;IACjB,GAAG;IACJ;GACD,GAAI;aAEH,mBAAmB,UAAU,oBAAC,aAAD,EAAA,UAAc,SAAsB,CAAA;GAC9D,CAAA;EACW,CAAA;EAGxB;AAED,UAAU,cAAc"}

package/es/Accordion/AccordionItem.mjs

@@ -11,7 +11,7 @@ import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { AnimatePresence } from "motion/react";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 //#region src/Accordion/AccordionItem.tsx
 const motionContainerStyle = { overflow: "hidden" };
 const AccordionStaticContent = memo(({ className, style, children, contentInnerClassName, isOpen, keepContentMounted }) => {
@@ -116,7 +116,7 @@ AccordionItemContent.displayName = "AccordionItemContent";
 const AccordionItem = memo(({ itemKey, title, children, action, alwaysShowAction = false, disabled = false, allowExpand = true, hideIndicator: itemHideIndicator, indicatorPlacement: itemIndicatorPlacement, indicator: customIndicator, classNames, paddingInline = 16, paddingBlock = 8, padding, ref, variant: customVariant, styles: customStyles, headerWrapper, defaultExpand, expand, onExpandChange }) => {
 	const context = useAccordionContext();
 	const isStandalone = expand !== void 0 || defaultExpand !== void 0;
-	const [isExpandedStandalone, setIsExpandedStandalone] = useMergeState(defaultExpand ?? false, {
+	const [isExpandedStandalone, setIsExpandedStandalone] = useControlledState(defaultExpand ?? false, {
 		onChange: onExpandChange,
 		value: expand
 	});

package/es/Accordion/AccordionItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.mjs","names":["Flexbox"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { AnimatePresence } from 'motion/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  memo,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport { type MotionComponentType, useMotionComponent } from '@/MotionProvider';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport ArrowIcon from './ArrowIcon';\nimport { useAccordionContext } from './context';\nimport { styles } from './style';\nimport { type AccordionItemProps } from './type';\n\ntype AccordionContentBaseProps = {\n  children?: ReactNode;\n  className?: string;\n  contentInnerClassName: string;\n  style?: CSSProperties;\n};\n\ntype AccordionStaticContentProps = AccordionContentBaseProps & {\n  isOpen: boolean;\n  keepContentMounted: boolean;\n};\n\ntype MotionDivProps = ComponentPropsWithoutRef<MotionComponentType['div']>;\n\ntype AccordionMotionContentProps = AccordionContentBaseProps & {\n  contextMotionProps?: MotionDivProps;\n  isOpen: boolean;\n  skipInitialAnimation: boolean;\n};\n\ntype AccordionItemContentProps = AccordionContentBaseProps & {\n  contextMotionProps?: MotionDivProps;\n  disableAnimation: boolean;\n  isOpen: boolean;\n  keepContentMounted: boolean;\n  skipInitialAnimation: boolean;\n};\n\nconst motionContainerStyle: CSSProperties = { overflow: 'hidden' };\n\nconst AccordionStaticContent = memo<AccordionStaticContentProps>(\n  ({ className, style, children, contentInnerClassName, isOpen, keepContentMounted }) => {\n    if (keepContentMounted) {\n      return (\n        <div\n          className={className}\n          role=\"region\"\n          style={{\n            display: isOpen ? 'block' : 'none',\n            ...style,\n          }}\n        >\n          <div className={contentInnerClassName}>{children}</div>\n        </div>\n      );\n    }\n\n    if (!isOpen) return null;\n\n    return (\n      <div className={className} role=\"region\" style={style}>\n        <div className={contentInnerClassName}>{children}</div>\n      </div>\n    );\n  },\n);\n\nAccordionStaticContent.displayName = 'AccordionStaticContent';\n\nconst AccordionMotionContent = memo<AccordionMotionContentProps>(\n  ({\n    contextMotionProps,\n    className,\n    style,\n    children,\n    contentInnerClassName,\n    isOpen,\n    skipInitialAnimation,\n  }) => {\n    const Motion = useMotionComponent();\n\n    const motionProps = useMemo(\n      () => ({\n        animate: 'enter',\n        exit: 'exit',\n        initial: skipInitialAnimation ? false : 'exit',\n        variants: {\n          enter: {\n            height: 'auto',\n            opacity: 1,\n            transition: {\n              duration: 0.2,\n              ease: [0.4, 0, 0.2, 1],\n            },\n          },\n          exit: {\n            height: 0,\n            opacity: 0,\n            transition: {\n              duration: 0.2,\n              ease: [0.4, 0, 0.2, 1],\n            },\n          },\n        },\n        ...contextMotionProps,\n      }),\n      [contextMotionProps, skipInitialAnimation],\n    );\n\n    return (\n      <AnimatePresence initial={false}>\n        {isOpen ? (\n          <Motion.div {...(motionProps as any)} style={motionContainerStyle}>\n            <div className={className} role=\"region\" style={style}>\n              <div className={contentInnerClassName}>{children}</div>\n            </div>\n          </Motion.div>\n        ) : null}\n      </AnimatePresence>\n    );\n  },\n);\n\nAccordionMotionContent.displayName = 'AccordionMotionContent';\n\nconst AccordionItemContent = memo<AccordionItemContentProps>(\n  ({\n    disableAnimation,\n    isOpen,\n    keepContentMounted,\n    className,\n    style,\n    children,\n    contentInnerClassName,\n    contextMotionProps,\n    skipInitialAnimation,\n  }) => {\n    if (disableAnimation || !keepContentMounted) {\n      return (\n        <AccordionStaticContent\n          className={className}\n          contentInnerClassName={contentInnerClassName}\n          isOpen={isOpen}\n          keepContentMounted={keepContentMounted}\n          style={style}\n        >\n          {children}\n        </AccordionStaticContent>\n      );\n    }\n\n    return (\n      <AccordionMotionContent\n        className={className}\n        contentInnerClassName={contentInnerClassName}\n        contextMotionProps={contextMotionProps}\n        isOpen={isOpen}\n        skipInitialAnimation={skipInitialAnimation}\n        style={style}\n      >\n        {children}\n      </AccordionMotionContent>\n    );\n  },\n);\n\nAccordionItemContent.displayName = 'AccordionItemContent';\n\nconst AccordionItem = memo<AccordionItemProps>(\n  ({\n    itemKey,\n    title,\n    children,\n    action,\n    alwaysShowAction = false,\n    disabled = false,\n    allowExpand = true,\n    hideIndicator: itemHideIndicator,\n    indicatorPlacement: itemIndicatorPlacement,\n    indicator: customIndicator,\n    classNames,\n    paddingInline = 16,\n    paddingBlock = 8,\n    padding,\n    ref,\n    variant: customVariant,\n    styles: customStyles,\n    headerWrapper,\n    defaultExpand,\n    expand,\n    onExpandChange,\n  }) => {\n    const context = useAccordionContext();\n\n    // Determine if using standalone mode (has expand or defaultExpand props)\n    const isStandalone = expand !== undefined || defaultExpand !== undefined;\n\n    // Standalone state management\n    const [isExpandedStandalone, setIsExpandedStandalone] = useMergeState<boolean>(\n      defaultExpand ?? false,\n      {\n        onChange: onExpandChange,\n        value: expand,\n      },\n    );\n\n    // Context values (may be null if used standalone)\n    const contextIsExpanded = context?.isExpanded;\n    const contextOnToggle = context?.onToggle;\n    const contextHideIndicator = context?.hideIndicator;\n    const contextIndicatorPlacement = context?.indicatorPlacement;\n    const contextKeepContentMounted = context?.keepContentMounted;\n    const contextDisableAnimation = context?.disableAnimation;\n    const contextMotionProps = context?.motionProps;\n    const contextVariant = context?.variant ?? 'borderless';\n\n    const isInitialRenderRef = useRef(true);\n\n    useEffect(() => {\n      isInitialRenderRef.current = false;\n    }, []);\n\n    // Determine expanded state\n    const isOpen = isStandalone\n      ? isExpandedStandalone\n      : contextIsExpanded\n        ? contextIsExpanded(itemKey)\n        : false;\n\n    // Determine other props with fallbacks\n    const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;\n    const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? 'start';\n    const keepContentMounted = contextKeepContentMounted ?? true;\n    const disableAnimation = contextDisableAnimation ?? false;\n    const variant = customVariant || contextVariant;\n\n    const handleToggle = useCallback(() => {\n      // If allowExpand is false, only allow controlled expansion via expand prop\n      if (!allowExpand) return;\n\n      if (!disabled) {\n        if (isStandalone) {\n          setIsExpandedStandalone(!isExpandedStandalone);\n        } else if (contextOnToggle) {\n          contextOnToggle(itemKey);\n        }\n      }\n    }, [\n      allowExpand,\n      disabled,\n      isStandalone,\n      setIsExpandedStandalone,\n      isExpandedStandalone,\n      contextOnToggle,\n      itemKey,\n    ]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        // If allowExpand is false, disable keyboard toggle\n        if (!allowExpand || disabled) return;\n\n        switch (e.key) {\n          case 'Enter':\n          case ' ': {\n            e.preventDefault();\n            handleToggle();\n            break;\n          }\n        }\n      },\n      [allowExpand, disabled, handleToggle],\n    );\n\n    const preventTitleTextSelection = useCallback((e: any) => {\n      // Prevent browser from creating a selection range on double/multi click,\n      // which can accidentally select the content region.\n      if (e?.detail > 1) e.preventDefault();\n    }, []);\n\n    // Build indicator\n    const indicator = useMemo(() => {\n      if (!allowExpand || hideIndicatorFinal) return null;\n\n      if (customIndicator) {\n        if (typeof customIndicator === 'function') {\n          return (\n            <span\n              aria-hidden=\"true\"\n              className={cx(styles.indicator, classNames?.indicator)}\n              style={customStyles?.indicator}\n            >\n              {customIndicator({ isDisabled: disabled, isOpen })}\n            </span>\n          );\n        }\n        return (\n          <span\n            aria-hidden=\"true\"\n            className={cx(styles.indicator, classNames?.indicator)}\n            style={customStyles?.indicator}\n          >\n            {customIndicator}\n          </span>\n        );\n      }\n\n      return (\n        <span\n          aria-hidden=\"true\"\n          className={cx(styles.indicator, classNames?.indicator)}\n          style={customStyles?.indicator}\n        >\n          <ArrowIcon className={cx(styles.icon, isOpen && styles.iconRotate)} />\n        </span>\n      );\n    }, [\n      allowExpand,\n      hideIndicatorFinal,\n      customIndicator,\n      disabled,\n      isOpen,\n      classNames,\n      customStyles,\n    ]);\n\n    const skipInitialAnimation = isInitialRenderRef.current && isOpen;\n\n    const contentClassName = useMemo(\n      () => cx('accordion-content', styles.content, classNames?.content),\n      [classNames?.content],\n    );\n\n    const titleNode = useMemo(\n      () =>\n        typeof title === 'string' ? (\n          <Text ellipsis className={classNames?.title} style={customStyles?.title}>\n            {title}\n          </Text>\n        ) : (\n          title\n        ),\n      [title, classNames?.title, customStyles?.title],\n    );\n\n    const actionNode = useMemo(\n      () =>\n        action && (\n          <Flexbox\n            horizontal\n            align={'center'}\n            flex={'none'}\n            gap={4}\n            style={customStyles?.action}\n            className={cx(\n              'accordion-action',\n              styles.action,\n              alwaysShowAction && styles.actionVisible,\n              classNames?.action,\n            )}\n            onClick={stopPropagation}\n          >\n            {action}\n          </Flexbox>\n        ),\n      [action, alwaysShowAction, cx, styles, classNames?.action, customStyles?.action],\n    );\n\n    const headerElement = useMemo(() => {\n      const header = (\n        <Block\n          horizontal\n          className={cx('accordion-header', styles.header, classNames?.header)}\n          clickable={!disabled && allowExpand}\n          gap={4}\n          justify={'space-between'}\n          padding={padding}\n          paddingBlock={paddingBlock}\n          paddingInline={paddingInline}\n          ref={ref}\n          variant={customVariant || variant}\n          style={{\n            alignItems: 'center',\n            cursor: disabled ? 'not-allowed' : allowExpand ? 'pointer' : 'default',\n            opacity: disabled ? 0.5 : undefined,\n            overflow: 'hidden',\n            width: '100%',\n            ...customStyles?.header,\n          }}\n          onClick={handleToggle}\n          onKeyDown={handleKeyDown}\n        >\n          {indicatorPlacementFinal === 'start' ? (\n            <>\n              <Flexbox\n                horizontal\n                align={'center'}\n                className={styles.titleWrapper}\n                flex={1}\n                gap={2}\n                style={{\n                  overflow: 'hidden',\n                }}\n                onDoubleClick={preventTitleTextSelection}\n                onMouseDown={preventTitleTextSelection}\n              >\n                {titleNode}\n                {indicator}\n              </Flexbox>\n              <Flexbox horizontal align={'center'} flex={'none'} gap={4}>\n                {actionNode}\n              </Flexbox>\n            </>\n          ) : (\n            <>\n              <Flexbox\n                horizontal\n                align={'center'}\n                className={styles.titleWrapper}\n                flex={1}\n                gap={2}\n                style={{\n                  overflow: 'hidden',\n                }}\n                onDoubleClick={preventTitleTextSelection}\n                onMouseDown={preventTitleTextSelection}\n              >\n                {titleNode}\n              </Flexbox>\n              <Flexbox horizontal align={'center'} flex={'none'} gap={4}>\n                {actionNode}\n                {indicator}\n              </Flexbox>\n            </>\n          )}\n        </Block>\n      );\n      if (headerWrapper) {\n        return headerWrapper(header);\n      }\n      return header;\n    }, [\n      classNames?.header,\n      disabled,\n      allowExpand,\n      padding,\n      paddingBlock,\n      paddingInline,\n      ref,\n      customVariant,\n      variant,\n      customStyles?.header,\n      handleToggle,\n      handleKeyDown,\n      indicatorPlacementFinal,\n      preventTitleTextSelection,\n      titleNode,\n      indicator,\n      actionNode,\n      headerWrapper,\n    ]);\n\n    return (\n      <div\n        className={cx('accordion-item', styles.item, classNames?.base)}\n        style={customStyles?.base}\n      >\n        {headerElement}\n        <AccordionItemContent\n          className={contentClassName}\n          contentInnerClassName={styles.contentInner}\n          contextMotionProps={contextMotionProps}\n          disableAnimation={!!disableAnimation}\n          isOpen={isOpen}\n          keepContentMounted={!!keepContentMounted}\n          skipInitialAnimation={skipInitialAnimation}\n          style={customStyles?.content}\n        >\n          {children}\n        </AccordionItemContent>\n      </div>\n    );\n  },\n);\n\nAccordionItem.displayName = 'AccordionItem';\n\nexport default AccordionItem;\n"],"mappings":"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"}
+{"version":3,"file":"AccordionItem.mjs","names":["useMergeState","Flexbox"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { AnimatePresence } from 'motion/react';\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  memo,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport { type MotionComponentType, useMotionComponent } from '@/MotionProvider';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport ArrowIcon from './ArrowIcon';\nimport { useAccordionContext } from './context';\nimport { styles } from './style';\nimport { type AccordionItemProps } from './type';\n\ntype AccordionContentBaseProps = {\n  children?: ReactNode;\n  className?: string;\n  contentInnerClassName: string;\n  style?: CSSProperties;\n};\n\ntype AccordionStaticContentProps = AccordionContentBaseProps & {\n  isOpen: boolean;\n  keepContentMounted: boolean;\n};\n\ntype MotionDivProps = ComponentPropsWithoutRef<MotionComponentType['div']>;\n\ntype AccordionMotionContentProps = AccordionContentBaseProps & {\n  contextMotionProps?: MotionDivProps;\n  isOpen: boolean;\n  skipInitialAnimation: boolean;\n};\n\ntype AccordionItemContentProps = AccordionContentBaseProps & {\n  contextMotionProps?: MotionDivProps;\n  disableAnimation: boolean;\n  isOpen: boolean;\n  keepContentMounted: boolean;\n  skipInitialAnimation: boolean;\n};\n\nconst motionContainerStyle: CSSProperties = { overflow: 'hidden' };\n\nconst AccordionStaticContent = memo<AccordionStaticContentProps>(\n  ({ className, style, children, contentInnerClassName, isOpen, keepContentMounted }) => {\n    if (keepContentMounted) {\n      return (\n        <div\n          className={className}\n          role=\"region\"\n          style={{\n            display: isOpen ? 'block' : 'none',\n            ...style,\n          }}\n        >\n          <div className={contentInnerClassName}>{children}</div>\n        </div>\n      );\n    }\n\n    if (!isOpen) return null;\n\n    return (\n      <div className={className} role=\"region\" style={style}>\n        <div className={contentInnerClassName}>{children}</div>\n      </div>\n    );\n  },\n);\n\nAccordionStaticContent.displayName = 'AccordionStaticContent';\n\nconst AccordionMotionContent = memo<AccordionMotionContentProps>(\n  ({\n    contextMotionProps,\n    className,\n    style,\n    children,\n    contentInnerClassName,\n    isOpen,\n    skipInitialAnimation,\n  }) => {\n    const Motion = useMotionComponent();\n\n    const motionProps = useMemo(\n      () => ({\n        animate: 'enter',\n        exit: 'exit',\n        initial: skipInitialAnimation ? false : 'exit',\n        variants: {\n          enter: {\n            height: 'auto',\n            opacity: 1,\n            transition: {\n              duration: 0.2,\n              ease: [0.4, 0, 0.2, 1],\n            },\n          },\n          exit: {\n            height: 0,\n            opacity: 0,\n            transition: {\n              duration: 0.2,\n              ease: [0.4, 0, 0.2, 1],\n            },\n          },\n        },\n        ...contextMotionProps,\n      }),\n      [contextMotionProps, skipInitialAnimation],\n    );\n\n    return (\n      <AnimatePresence initial={false}>\n        {isOpen ? (\n          <Motion.div {...(motionProps as any)} style={motionContainerStyle}>\n            <div className={className} role=\"region\" style={style}>\n              <div className={contentInnerClassName}>{children}</div>\n            </div>\n          </Motion.div>\n        ) : null}\n      </AnimatePresence>\n    );\n  },\n);\n\nAccordionMotionContent.displayName = 'AccordionMotionContent';\n\nconst AccordionItemContent = memo<AccordionItemContentProps>(\n  ({\n    disableAnimation,\n    isOpen,\n    keepContentMounted,\n    className,\n    style,\n    children,\n    contentInnerClassName,\n    contextMotionProps,\n    skipInitialAnimation,\n  }) => {\n    if (disableAnimation || !keepContentMounted) {\n      return (\n        <AccordionStaticContent\n          className={className}\n          contentInnerClassName={contentInnerClassName}\n          isOpen={isOpen}\n          keepContentMounted={keepContentMounted}\n          style={style}\n        >\n          {children}\n        </AccordionStaticContent>\n      );\n    }\n\n    return (\n      <AccordionMotionContent\n        className={className}\n        contentInnerClassName={contentInnerClassName}\n        contextMotionProps={contextMotionProps}\n        isOpen={isOpen}\n        skipInitialAnimation={skipInitialAnimation}\n        style={style}\n      >\n        {children}\n      </AccordionMotionContent>\n    );\n  },\n);\n\nAccordionItemContent.displayName = 'AccordionItemContent';\n\nconst AccordionItem = memo<AccordionItemProps>(\n  ({\n    itemKey,\n    title,\n    children,\n    action,\n    alwaysShowAction = false,\n    disabled = false,\n    allowExpand = true,\n    hideIndicator: itemHideIndicator,\n    indicatorPlacement: itemIndicatorPlacement,\n    indicator: customIndicator,\n    classNames,\n    paddingInline = 16,\n    paddingBlock = 8,\n    padding,\n    ref,\n    variant: customVariant,\n    styles: customStyles,\n    headerWrapper,\n    defaultExpand,\n    expand,\n    onExpandChange,\n  }) => {\n    const context = useAccordionContext();\n\n    // Determine if using standalone mode (has expand or defaultExpand props)\n    const isStandalone = expand !== undefined || defaultExpand !== undefined;\n\n    // Standalone state management\n    const [isExpandedStandalone, setIsExpandedStandalone] = useMergeState<boolean>(\n      defaultExpand ?? false,\n      {\n        onChange: onExpandChange,\n        value: expand,\n      },\n    );\n\n    // Context values (may be null if used standalone)\n    const contextIsExpanded = context?.isExpanded;\n    const contextOnToggle = context?.onToggle;\n    const contextHideIndicator = context?.hideIndicator;\n    const contextIndicatorPlacement = context?.indicatorPlacement;\n    const contextKeepContentMounted = context?.keepContentMounted;\n    const contextDisableAnimation = context?.disableAnimation;\n    const contextMotionProps = context?.motionProps;\n    const contextVariant = context?.variant ?? 'borderless';\n\n    const isInitialRenderRef = useRef(true);\n\n    useEffect(() => {\n      isInitialRenderRef.current = false;\n    }, []);\n\n    // Determine expanded state\n    const isOpen = isStandalone\n      ? isExpandedStandalone\n      : contextIsExpanded\n        ? contextIsExpanded(itemKey)\n        : false;\n\n    // Determine other props with fallbacks\n    const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;\n    const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? 'start';\n    const keepContentMounted = contextKeepContentMounted ?? true;\n    const disableAnimation = contextDisableAnimation ?? false;\n    const variant = customVariant || contextVariant;\n\n    const handleToggle = useCallback(() => {\n      // If allowExpand is false, only allow controlled expansion via expand prop\n      if (!allowExpand) return;\n\n      if (!disabled) {\n        if (isStandalone) {\n          setIsExpandedStandalone(!isExpandedStandalone);\n        } else if (contextOnToggle) {\n          contextOnToggle(itemKey);\n        }\n      }\n    }, [\n      allowExpand,\n      disabled,\n      isStandalone,\n      setIsExpandedStandalone,\n      isExpandedStandalone,\n      contextOnToggle,\n      itemKey,\n    ]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        // If allowExpand is false, disable keyboard toggle\n        if (!allowExpand || disabled) return;\n\n        switch (e.key) {\n          case 'Enter':\n          case ' ': {\n            e.preventDefault();\n            handleToggle();\n            break;\n          }\n        }\n      },\n      [allowExpand, disabled, handleToggle],\n    );\n\n    const preventTitleTextSelection = useCallback((e: any) => {\n      // Prevent browser from creating a selection range on double/multi click,\n      // which can accidentally select the content region.\n      if (e?.detail > 1) e.preventDefault();\n    }, []);\n\n    // Build indicator\n    const indicator = useMemo(() => {\n      if (!allowExpand || hideIndicatorFinal) return null;\n\n      if (customIndicator) {\n        if (typeof customIndicator === 'function') {\n          return (\n            <span\n              aria-hidden=\"true\"\n              className={cx(styles.indicator, classNames?.indicator)}\n              style={customStyles?.indicator}\n            >\n              {customIndicator({ isDisabled: disabled, isOpen })}\n            </span>\n          );\n        }\n        return (\n          <span\n            aria-hidden=\"true\"\n            className={cx(styles.indicator, classNames?.indicator)}\n            style={customStyles?.indicator}\n          >\n            {customIndicator}\n          </span>\n        );\n      }\n\n      return (\n        <span\n          aria-hidden=\"true\"\n          className={cx(styles.indicator, classNames?.indicator)}\n          style={customStyles?.indicator}\n        >\n          <ArrowIcon className={cx(styles.icon, isOpen && styles.iconRotate)} />\n        </span>\n      );\n    }, [\n      allowExpand,\n      hideIndicatorFinal,\n      customIndicator,\n      disabled,\n      isOpen,\n      classNames,\n      customStyles,\n    ]);\n\n    const skipInitialAnimation = isInitialRenderRef.current && isOpen;\n\n    const contentClassName = useMemo(\n      () => cx('accordion-content', styles.content, classNames?.content),\n      [classNames?.content],\n    );\n\n    const titleNode = useMemo(\n      () =>\n        typeof title === 'string' ? (\n          <Text ellipsis className={classNames?.title} style={customStyles?.title}>\n            {title}\n          </Text>\n        ) : (\n          title\n        ),\n      [title, classNames?.title, customStyles?.title],\n    );\n\n    const actionNode = useMemo(\n      () =>\n        action && (\n          <Flexbox\n            horizontal\n            align={'center'}\n            flex={'none'}\n            gap={4}\n            style={customStyles?.action}\n            className={cx(\n              'accordion-action',\n              styles.action,\n              alwaysShowAction && styles.actionVisible,\n              classNames?.action,\n            )}\n            onClick={stopPropagation}\n          >\n            {action}\n          </Flexbox>\n        ),\n      [action, alwaysShowAction, cx, styles, classNames?.action, customStyles?.action],\n    );\n\n    const headerElement = useMemo(() => {\n      const header = (\n        <Block\n          horizontal\n          className={cx('accordion-header', styles.header, classNames?.header)}\n          clickable={!disabled && allowExpand}\n          gap={4}\n          justify={'space-between'}\n          padding={padding}\n          paddingBlock={paddingBlock}\n          paddingInline={paddingInline}\n          ref={ref}\n          variant={customVariant || variant}\n          style={{\n            alignItems: 'center',\n            cursor: disabled ? 'not-allowed' : allowExpand ? 'pointer' : 'default',\n            opacity: disabled ? 0.5 : undefined,\n            overflow: 'hidden',\n            width: '100%',\n            ...customStyles?.header,\n          }}\n          onClick={handleToggle}\n          onKeyDown={handleKeyDown}\n        >\n          {indicatorPlacementFinal === 'start' ? (\n            <>\n              <Flexbox\n                horizontal\n                align={'center'}\n                className={styles.titleWrapper}\n                flex={1}\n                gap={2}\n                style={{\n                  overflow: 'hidden',\n                }}\n                onDoubleClick={preventTitleTextSelection}\n                onMouseDown={preventTitleTextSelection}\n              >\n                {titleNode}\n                {indicator}\n              </Flexbox>\n              <Flexbox horizontal align={'center'} flex={'none'} gap={4}>\n                {actionNode}\n              </Flexbox>\n            </>\n          ) : (\n            <>\n              <Flexbox\n                horizontal\n                align={'center'}\n                className={styles.titleWrapper}\n                flex={1}\n                gap={2}\n                style={{\n                  overflow: 'hidden',\n                }}\n                onDoubleClick={preventTitleTextSelection}\n                onMouseDown={preventTitleTextSelection}\n              >\n                {titleNode}\n              </Flexbox>\n              <Flexbox horizontal align={'center'} flex={'none'} gap={4}>\n                {actionNode}\n                {indicator}\n              </Flexbox>\n            </>\n          )}\n        </Block>\n      );\n      if (headerWrapper) {\n        return headerWrapper(header);\n      }\n      return header;\n    }, [\n      classNames?.header,\n      disabled,\n      allowExpand,\n      padding,\n      paddingBlock,\n      paddingInline,\n      ref,\n      customVariant,\n      variant,\n      customStyles?.header,\n      handleToggle,\n      handleKeyDown,\n      indicatorPlacementFinal,\n      preventTitleTextSelection,\n      titleNode,\n      indicator,\n      actionNode,\n      headerWrapper,\n    ]);\n\n    return (\n      <div\n        className={cx('accordion-item', styles.item, classNames?.base)}\n        style={customStyles?.base}\n      >\n        {headerElement}\n        <AccordionItemContent\n          className={contentClassName}\n          contentInnerClassName={styles.contentInner}\n          contextMotionProps={contextMotionProps}\n          disableAnimation={!!disableAnimation}\n          isOpen={isOpen}\n          keepContentMounted={!!keepContentMounted}\n          skipInitialAnimation={skipInitialAnimation}\n          style={customStyles?.content}\n        >\n          {children}\n        </AccordionItemContent>\n      </div>\n    );\n  },\n);\n\nAccordionItem.displayName = 'AccordionItem';\n\nexport default AccordionItem;\n"],"mappings":"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"}

package/es/Checkbox/Checkbox.mjs

@@ -4,11 +4,11 @@ import Text from "../Text/Text.mjs";
 import { styles } from "./style.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 import { CheckIcon, Minus } from "lucide-react";
 //#region src/Checkbox/Checkbox.tsx
 const Checkbox = ({ checked, defaultChecked, onChange, size = 16, className, style, children, textProps, backgroundColor, classNames, styles: customStyles, shape = "square", disabled, indeterminate, ...rest }) => {
-	const [value, setValue] = useMergeState(defaultChecked || false, {
+	const [value, setValue] = useControlledState(defaultChecked || false, {
 		defaultValue: defaultChecked,
 		onChange,
 		value: checked

package/es/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["Flexbox"],"sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["import { cx } from 'antd-style';\nimport { CheckIcon, Minus } from 'lucide-react';\nimport type { CSSProperties, FC, MouseEvent } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { CheckboxProps } from './type';\n\nconst Checkbox: FC<CheckboxProps> = ({\n  checked,\n  defaultChecked,\n  onChange,\n  size = 16,\n  className,\n  style,\n  children,\n  textProps,\n  backgroundColor,\n  classNames,\n  styles: customStyles,\n  shape = 'square',\n  disabled,\n  indeterminate,\n  ...rest\n}) => {\n  const [value, setValue] = useMergeState(defaultChecked || false, {\n    defaultValue: defaultChecked,\n    onChange,\n    value: checked,\n  });\n\n  const checkboxStyles: CSSProperties = {\n    borderRadius: shape === 'square' ? `max(4px, ${Math.round(size / 4)}px)` : '50%',\n    ...style,\n    ...customStyles?.checkbox,\n  };\n\n  const handleClick = (e?: MouseEvent) => {\n    if (!disabled) {\n      e?.preventDefault();\n      setValue(!value);\n    }\n  };\n\n  const isIndeterminate = indeterminate;\n  const isChecked = !isIndeterminate && value;\n\n  const checkIcon = (\n    <Block\n      align={'center'}\n      flex={'none'}\n      height={size}\n      justify={'center'}\n      variant={'outlined'}\n      width={size}\n      className={cx(\n        styles.root,\n        isChecked && styles.checked,\n        isIndeterminate && styles.indeterminate,\n        disabled && styles.disabled,\n        className,\n        classNames?.checkbox,\n      )}\n      style={\n        backgroundColor && (isChecked || isIndeterminate)\n          ? { backgroundColor, borderColor: backgroundColor, ...checkboxStyles }\n          : { ...checkboxStyles }\n      }\n      onClick={handleClick}\n      {...rest}\n    >\n      {isIndeterminate ? (\n        <Minus\n          size={size}\n          strokeWidth={3}\n          style={{\n            transform: `scale(${shape === 'square' ? 0.75 : 0.66})`,\n          }}\n        />\n      ) : isChecked ? (\n        <CheckIcon\n          size={size}\n          strokeWidth={3}\n          style={{\n            transform: `scale(${shape === 'square' ? 0.75 : 0.66})`,\n          }}\n        />\n      ) : null}\n    </Block>\n  );\n\n  if (!children) return checkIcon;\n\n  return (\n    <Flexbox\n      horizontal\n      align={'center'}\n      className={classNames?.wrapper}\n      gap={Math.floor(size / 2)}\n      style={{\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        userSelect: 'none',\n        ...customStyles?.wrapper,\n      }}\n      onClick={handleClick}\n    >\n      {checkIcon}\n      <Text\n        as={'span'}\n        className={cx(classNames?.text)}\n        style={customStyles?.text}\n        {...textProps}\n        type={disabled ? 'secondary' : textProps?.type}\n      >\n        {children}\n      </Text>\n    </Flexbox>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAYA,MAAM,YAA+B,EACnC,SACA,gBACA,UACA,OAAO,IACP,WACA,OACA,UACA,WACA,iBACA,YACA,QAAQ,cACR,QAAQ,UACR,UACA,eACA,GAAG,WACC;CACJ,MAAM,CAAC,OAAO,YAAY,cAAc,kBAAkB,OAAO;EAC/D,cAAc;EACd;EACA,OAAO;EACR,CAAC;CAEF,MAAM,iBAAgC;EACpC,cAAc,UAAU,WAAW,YAAY,KAAK,MAAM,OAAO,EAAE,CAAC,OAAO;EAC3E,GAAG;EACH,GAAG,cAAc;EAClB;CAED,MAAM,eAAe,MAAmB;AACtC,MAAI,CAAC,UAAU;AACb,MAAG,gBAAgB;AACnB,YAAS,CAAC,MAAM;;;CAIpB,MAAM,kBAAkB;CACxB,MAAM,YAAY,CAAC,mBAAmB;CAEtC,MAAM,YACJ,oBAAC,OAAD;EACE,OAAO;EACP,MAAM;EACN,QAAQ;EACR,SAAS;EACT,SAAS;EACT,OAAO;EACP,WAAW,GACT,OAAO,MACP,aAAa,OAAO,SACpB,mBAAmB,OAAO,eAC1B,YAAY,OAAO,UACnB,WACA,YAAY,SACb;EACD,OACE,oBAAoB,aAAa,mBAC7B;GAAE;GAAiB,aAAa;GAAiB,GAAG;GAAgB,GACpE,EAAE,GAAG,gBAAgB;EAE3B,SAAS;EACT,GAAI;YAEH,kBACC,oBAAC,OAAD;GACQ;GACN,aAAa;GACb,OAAO,EACL,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,IACtD;GACD,CAAA,GACA,YACF,oBAAC,WAAD;GACQ;GACN,aAAa;GACb,OAAO,EACL,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,IACtD;GACD,CAAA,GACA;EACE,CAAA;AAGV,KAAI,CAAC,SAAU,QAAO;AAEtB,QACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,YAAY;EACvB,KAAK,KAAK,MAAM,OAAO,EAAE;EACzB,OAAO;GACL,QAAQ,WAAW,gBAAgB;GACnC,YAAY;GACZ,GAAG,cAAc;GAClB;EACD,SAAS;YAVX,CAYG,WACD,oBAAC,MAAD;GACE,IAAI;GACJ,WAAW,GAAG,YAAY,KAAK;GAC/B,OAAO,cAAc;GACrB,GAAI;GACJ,MAAM,WAAW,cAAc,WAAW;GAEzC;GACI,CAAA,CACC;;;AAId,SAAS,cAAc"}
+{"version":3,"file":"Checkbox.mjs","names":["useMergeState","Flexbox"],"sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["import { cx } from 'antd-style';\nimport { CheckIcon, Minus } from 'lucide-react';\nimport type { CSSProperties, FC, MouseEvent } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport Text from '@/Text';\n\nimport { styles } from './style';\nimport type { CheckboxProps } from './type';\n\nconst Checkbox: FC<CheckboxProps> = ({\n  checked,\n  defaultChecked,\n  onChange,\n  size = 16,\n  className,\n  style,\n  children,\n  textProps,\n  backgroundColor,\n  classNames,\n  styles: customStyles,\n  shape = 'square',\n  disabled,\n  indeterminate,\n  ...rest\n}) => {\n  const [value, setValue] = useMergeState(defaultChecked || false, {\n    defaultValue: defaultChecked,\n    onChange,\n    value: checked,\n  });\n\n  const checkboxStyles: CSSProperties = {\n    borderRadius: shape === 'square' ? `max(4px, ${Math.round(size / 4)}px)` : '50%',\n    ...style,\n    ...customStyles?.checkbox,\n  };\n\n  const handleClick = (e?: MouseEvent) => {\n    if (!disabled) {\n      e?.preventDefault();\n      setValue(!value);\n    }\n  };\n\n  const isIndeterminate = indeterminate;\n  const isChecked = !isIndeterminate && value;\n\n  const checkIcon = (\n    <Block\n      align={'center'}\n      flex={'none'}\n      height={size}\n      justify={'center'}\n      variant={'outlined'}\n      width={size}\n      className={cx(\n        styles.root,\n        isChecked && styles.checked,\n        isIndeterminate && styles.indeterminate,\n        disabled && styles.disabled,\n        className,\n        classNames?.checkbox,\n      )}\n      style={\n        backgroundColor && (isChecked || isIndeterminate)\n          ? { backgroundColor, borderColor: backgroundColor, ...checkboxStyles }\n          : { ...checkboxStyles }\n      }\n      onClick={handleClick}\n      {...rest}\n    >\n      {isIndeterminate ? (\n        <Minus\n          size={size}\n          strokeWidth={3}\n          style={{\n            transform: `scale(${shape === 'square' ? 0.75 : 0.66})`,\n          }}\n        />\n      ) : isChecked ? (\n        <CheckIcon\n          size={size}\n          strokeWidth={3}\n          style={{\n            transform: `scale(${shape === 'square' ? 0.75 : 0.66})`,\n          }}\n        />\n      ) : null}\n    </Block>\n  );\n\n  if (!children) return checkIcon;\n\n  return (\n    <Flexbox\n      horizontal\n      align={'center'}\n      className={classNames?.wrapper}\n      gap={Math.floor(size / 2)}\n      style={{\n        cursor: disabled ? 'not-allowed' : 'pointer',\n        userSelect: 'none',\n        ...customStyles?.wrapper,\n      }}\n      onClick={handleClick}\n    >\n      {checkIcon}\n      <Text\n        as={'span'}\n        className={cx(classNames?.text)}\n        style={customStyles?.text}\n        {...textProps}\n        type={disabled ? 'secondary' : textProps?.type}\n      >\n        {children}\n      </Text>\n    </Flexbox>\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;AAYA,MAAM,YAA+B,EACnC,SACA,gBACA,UACA,OAAO,IACP,WACA,OACA,UACA,WACA,iBACA,YACA,QAAQ,cACR,QAAQ,UACR,UACA,eACA,GAAG,WACC;CACJ,MAAM,CAAC,OAAO,YAAYA,mBAAc,kBAAkB,OAAO;EAC/D,cAAc;EACd;EACA,OAAO;EACR,CAAC;CAEF,MAAM,iBAAgC;EACpC,cAAc,UAAU,WAAW,YAAY,KAAK,MAAM,OAAO,EAAE,CAAC,OAAO;EAC3E,GAAG;EACH,GAAG,cAAc;EAClB;CAED,MAAM,eAAe,MAAmB;AACtC,MAAI,CAAC,UAAU;AACb,MAAG,gBAAgB;AACnB,YAAS,CAAC,MAAM;;;CAIpB,MAAM,kBAAkB;CACxB,MAAM,YAAY,CAAC,mBAAmB;CAEtC,MAAM,YACJ,oBAAC,OAAD;EACE,OAAO;EACP,MAAM;EACN,QAAQ;EACR,SAAS;EACT,SAAS;EACT,OAAO;EACP,WAAW,GACT,OAAO,MACP,aAAa,OAAO,SACpB,mBAAmB,OAAO,eAC1B,YAAY,OAAO,UACnB,WACA,YAAY,SACb;EACD,OACE,oBAAoB,aAAa,mBAC7B;GAAE;GAAiB,aAAa;GAAiB,GAAG;GAAgB,GACpE,EAAE,GAAG,gBAAgB;EAE3B,SAAS;EACT,GAAI;YAEH,kBACC,oBAAC,OAAD;GACQ;GACN,aAAa;GACb,OAAO,EACL,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,IACtD;GACD,CAAA,GACA,YACF,oBAAC,WAAD;GACQ;GACN,aAAa;GACb,OAAO,EACL,WAAW,SAAS,UAAU,WAAW,MAAO,IAAK,IACtD;GACD,CAAA,GACA;EACE,CAAA;AAGV,KAAI,CAAC,SAAU,QAAO;AAEtB,QACE,qBAACC,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,YAAY;EACvB,KAAK,KAAK,MAAM,OAAO,EAAE;EACzB,OAAO;GACL,QAAQ,WAAW,gBAAgB;GACnC,YAAY;GACZ,GAAG,cAAc;GAClB;EACD,SAAS;YAVX,CAYG,WACD,oBAAC,MAAD;GACE,IAAI;GACJ,WAAW,GAAG,YAAY,KAAK;GAC/B,OAAO,cAAc;GACrB,GAAI;GACJ,MAAM,WAAW,cAAc,WAAW;GAEzC;GACI,CAAA,CACC;;;AAId,SAAS,cAAc"}

package/es/Checkbox/CheckboxGroup.mjs

@@ -1,10 +1,10 @@
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Checkbox from "./Checkbox.mjs";
 import { jsx } from "react/jsx-runtime";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 //#region src/Checkbox/CheckboxGroup.tsx
 const CheckboxGroup = ({ defaultValue, disabled, onChange, options, textProps, value, shape, size, ...rest }) => {
-	const [selectedValues, setSelectedValues] = useMergeState(defaultValue || [], {
+	const [selectedValues, setSelectedValues] = useControlledState(defaultValue || [], {
 		defaultValue,
 		onChange,
 		value

package/es/Checkbox/CheckboxGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.mjs","names":["Flexbox"],"sources":["../../src/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\n\nimport Checkbox from './Checkbox';\nimport type { CheckboxGroupProps } from './type';\n\nconst CheckboxGroup: FC<CheckboxGroupProps> = ({\n  defaultValue,\n  disabled,\n  onChange,\n  options,\n  textProps,\n  value,\n  shape,\n  size,\n  ...rest\n}) => {\n  const [selectedValues, setSelectedValues] = useMergeState<string[]>(defaultValue || [], {\n    defaultValue,\n    onChange,\n    value,\n  });\n\n  const handleChange = (optionValue: string, checked: boolean) => {\n    const newValues = checked\n      ? [...selectedValues, optionValue]\n      : selectedValues.filter((v) => v !== optionValue);\n\n    setSelectedValues(newValues);\n  };\n\n  const normalizedOptions = options.map((option) => {\n    if (typeof option === 'string') {\n      return {\n        disabled: false,\n        label: option,\n        value: option,\n      };\n    }\n    return option;\n  });\n\n  return (\n    <Flexbox horizontal align={'center'} gap={16} wrap={'wrap'} {...rest}>\n      {normalizedOptions.map((option) => {\n        const isChecked = selectedValues.includes(option.value);\n        const isDisabled = disabled || option.disabled;\n\n        return (\n          <Checkbox\n            checked={isChecked}\n            disabled={isDisabled}\n            key={String(option.value)}\n            shape={shape}\n            size={size}\n            textProps={textProps}\n            onChange={(checked) => handleChange(option.value, checked)}\n          >\n            {option.label}\n          </Checkbox>\n        );\n      })}\n    </Flexbox>\n  );\n};\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;AAQA,MAAM,iBAAyC,EAC7C,cACA,UACA,UACA,SACA,WACA,OACA,OACA,MACA,GAAG,WACC;CACJ,MAAM,CAAC,gBAAgB,qBAAqB,cAAwB,gBAAgB,EAAE,EAAE;EACtF;EACA;EACA;EACD,CAAC;CAEF,MAAM,gBAAgB,aAAqB,YAAqB;AAK9D,oBAJkB,UACd,CAAC,GAAG,gBAAgB,YAAY,GAChC,eAAe,QAAQ,MAAM,MAAM,YAAY,CAEvB;;CAG9B,MAAM,oBAAoB,QAAQ,KAAK,WAAW;AAChD,MAAI,OAAO,WAAW,SACpB,QAAO;GACL,UAAU;GACV,OAAO;GACP,OAAO;GACR;AAEH,SAAO;GACP;AAEF,QACE,oBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAAI,MAAM;EAAQ,GAAI;YAC7D,kBAAkB,KAAK,WAAW;AAIjC,UACE,oBAAC,UAAD;IACE,SALc,eAAe,SAAS,OAAO,MAAM;IAMnD,UALe,YAAY,OAAO;IAO3B;IACD;IACK;IACX,WAAW,YAAY,aAAa,OAAO,OAAO,QAAQ;cAEzD,OAAO;IACC,EAPJ,OAAO,OAAO,MAAM,CAOhB;IAEb;EACM,CAAA;;AAId,cAAc,cAAc"}
+{"version":3,"file":"CheckboxGroup.mjs","names":["useMergeState","Flexbox"],"sources":["../../src/Checkbox/CheckboxGroup.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { Flexbox } from '@/Flex';\n\nimport Checkbox from './Checkbox';\nimport type { CheckboxGroupProps } from './type';\n\nconst CheckboxGroup: FC<CheckboxGroupProps> = ({\n  defaultValue,\n  disabled,\n  onChange,\n  options,\n  textProps,\n  value,\n  shape,\n  size,\n  ...rest\n}) => {\n  const [selectedValues, setSelectedValues] = useMergeState<string[]>(defaultValue || [], {\n    defaultValue,\n    onChange,\n    value,\n  });\n\n  const handleChange = (optionValue: string, checked: boolean) => {\n    const newValues = checked\n      ? [...selectedValues, optionValue]\n      : selectedValues.filter((v) => v !== optionValue);\n\n    setSelectedValues(newValues);\n  };\n\n  const normalizedOptions = options.map((option) => {\n    if (typeof option === 'string') {\n      return {\n        disabled: false,\n        label: option,\n        value: option,\n      };\n    }\n    return option;\n  });\n\n  return (\n    <Flexbox horizontal align={'center'} gap={16} wrap={'wrap'} {...rest}>\n      {normalizedOptions.map((option) => {\n        const isChecked = selectedValues.includes(option.value);\n        const isDisabled = disabled || option.disabled;\n\n        return (\n          <Checkbox\n            checked={isChecked}\n            disabled={isDisabled}\n            key={String(option.value)}\n            shape={shape}\n            size={size}\n            textProps={textProps}\n            onChange={(checked) => handleChange(option.value, checked)}\n          >\n            {option.label}\n          </Checkbox>\n        );\n      })}\n    </Flexbox>\n  );\n};\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n\nexport default CheckboxGroup;\n"],"mappings":";;;;;AAQA,MAAM,iBAAyC,EAC7C,cACA,UACA,UACA,SACA,WACA,OACA,OACA,MACA,GAAG,WACC;CACJ,MAAM,CAAC,gBAAgB,qBAAqBA,mBAAwB,gBAAgB,EAAE,EAAE;EACtF;EACA;EACA;EACD,CAAC;CAEF,MAAM,gBAAgB,aAAqB,YAAqB;AAK9D,oBAJkB,UACd,CAAC,GAAG,gBAAgB,YAAY,GAChC,eAAe,QAAQ,MAAM,MAAM,YAAY,CAEvB;;CAG9B,MAAM,oBAAoB,QAAQ,KAAK,WAAW;AAChD,MAAI,OAAO,WAAW,SACpB,QAAO;GACL,UAAU;GACV,OAAO;GACP,OAAO;GACR;AAEH,SAAO;GACP;AAEF,QACE,oBAACC,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAU,KAAK;EAAI,MAAM;EAAQ,GAAI;YAC7D,kBAAkB,KAAK,WAAW;AAIjC,UACE,oBAAC,UAAD;IACE,SALc,eAAe,SAAS,OAAO,MAAM;IAMnD,UALe,YAAY,OAAO;IAO3B;IACD;IACK;IACX,WAAW,YAAY,aAAa,OAAO,OAAO,QAAQ;cAEzD,OAAO;IACC,EAPJ,OAAO,OAAO,MAAM,CAOhB;IAEb;EACM,CAAA;;AAId,cAAc,cAAc"}

package/es/CodeEditor/CodeEditor.mjs

@@ -5,10 +5,10 @@ import SyntaxHighlighter from "../Highlighter/SyntaxHighlighter/index.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cssVar, cx } from "antd-style";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 //#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 [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"],"sources":["../../src/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { styles, variants } from '@/CodeEditor/style';\nimport { Flexbox } from '@/Flex';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\n\nimport type { 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 [code, setCode] = useMergeState(defaultValue, {\n      defaultValue,\n      onChange: onValueChange,\n      value,\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: cssVar.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          ref={ref}\n          style={customStyles?.textarea}\n          value={code}\n          onChange={(e) => {\n            onChange?.(e);\n            setCode(e.target.value);\n          }}\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,CAAC,MAAM,WAAW,cAAc,cAAc;EAClD;EACA,UAAU;EACV;EACD,CAAC;AAEF,QACE,qBAACA,mBAAD;EACE,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EACzC;EACE;EACD;EACA;YALT,CAOG,QACC,oBAAC,mBAAD;GACE,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GAC5C;GACV,OAAO,cAAc;GACZ;aAER;GACiB,CAAA,GAEpB,oBAAC,OAAD;GACE,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GACtD,OAAO,EACL,OAAO,OAAO,sBACf;aAEA,eAAe;GACZ,CAAA,EAGR,oBAAC,YAAD;GACE,gBAAe;GACf,cAAa;GACb,aAAY;GACD;GACX,WAAW,GAAG,OAAO,UAAU,YAAY,SAAS;GACpD,cAAY;GACP;GACL,OAAO,cAAc;GACrB,OAAO;GACP,WAAW,MAAM;AACf,eAAW,EAAE;AACb,YAAQ,EAAE,OAAO,MAAM;;GAEzB,GAAI;GACJ,CAAA,CACM;;EAGf;AAED,WAAW,cAAc"}
+{"version":3,"file":"CodeEditor.mjs","names":["useMergeState","Flexbox"],"sources":["../../src/CodeEditor/CodeEditor.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { memo } from 'react';\nimport useMergeState from 'use-merge-value';\n\nimport { styles, variants } from '@/CodeEditor/style';\nimport { Flexbox } from '@/Flex';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\n\nimport type { 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 [code, setCode] = useMergeState(defaultValue, {\n      defaultValue,\n      onChange: onValueChange,\n      value,\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: cssVar.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          ref={ref}\n          style={customStyles?.textarea}\n          value={code}\n          onChange={(e) => {\n            onChange?.(e);\n            setCode(e.target.value);\n          }}\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,CAAC,MAAM,WAAWA,mBAAc,cAAc;EAClD;EACA,UAAU;EACV;EACD,CAAC;AAEF,QACE,qBAACC,mBAAD;EACE,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EACzC;EACE;EACD;EACA;YALT,CAOG,QACC,oBAAC,mBAAD;GACE,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GAC5C;GACV,OAAO,cAAc;GACZ;aAER;GACiB,CAAA,GAEpB,oBAAC,OAAD;GACE,WAAW,GAAG,OAAO,WAAW,YAAY,UAAU;GACtD,OAAO,EACL,OAAO,OAAO,sBACf;aAEA,eAAe;GACZ,CAAA,EAGR,oBAAC,YAAD;GACE,gBAAe;GACf,cAAa;GACb,aAAY;GACD;GACX,WAAW,GAAG,OAAO,UAAU,YAAY,SAAS;GACpD,cAAY;GACP;GACL,OAAO,cAAc;GACrB,OAAO;GACP,WAAW,MAAM;AACf,eAAW,EAAE;AACb,YAAQ,EAAE,OAAO,MAAM;;GAEzB,GAAI;GACJ,CAAA,CACM;;EAGf;AAED,WAAW,cAAc"}

package/es/ColorSwatches/ColorSwatches.mjs

@@ -9,13 +9,13 @@ import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ColorPicker } from "antd";
 import { cssVar, cx } from "antd-style";
-import useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 import { rgba } from "polished";
 import { CheckIcon } from "lucide-react";
 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":["Flexbox"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport { ColorPicker } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { 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';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles } 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\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--color-swatches-size': `${size}px`,\n    }),\n    [size],\n  );\n\n  const isCustomActive = useMemo(\n    () => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors],\n  );\n\n  return (\n    <Flexbox\n      horizontal\n      gap={6}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        flexWrap: 'wrap',\n        ...style,\n      }}\n      {...rest}\n    >\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || cssVar.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          // Check if color is transparent or CSS variable (which chroma can't parse)\n          const isTransparent =\n            c.color === 'transparent' ||\n            (c.color &&\n              !c.color.startsWith('var(') &&\n              (() => {\n                try {\n                  return chroma(c.color).alpha() === 0;\n                } catch {\n                  return false;\n                }\n              })());\n          // Get actual color value for readableColor (CSS variables can't be parsed)\n          const actualColorForReadable = c.color?.startsWith('var(') ? cssVar.colorPrimary : color;\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                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n                onClick={() => setActive(c.color || undefined)}\n              >\n                {isActive && (\n                  <Icon\n                    color={rgba(safeReadableColor(actualColorForReadable), 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            disabledAlpha\n            arrow={false}\n            defaultValue={cssVar.colorPrimary}\n            format={'hex'}\n            value={enableColorSwatches ? undefined : active}\n            className={cx(\n              styles.picker,\n              enableColorSwatches && styles.conic,\n              isCustomActive && styles.active,\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%' : cssVar.borderRadius,\n            }}\n            onChangeComplete={(c) => {\n              if (c.toHexString() === cssVar.colorPrimary) {\n                setActive('');\n              } else {\n                setActive(c.toHexString());\n              }\n            }}\n          />\n        </Tooltip>\n      )}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,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;CAGF,MAAM,eAAe,eACZ,EACL,yBAAyB,GAAG,KAAK,KAClC,GACD,CAAC,KAAK,CACP;CAED,MAAM,iBAAiB,cACf,UAAU,WAAW,OAAO,gBAAgB,CAAC,OAAO,MAAM,MAAM,EAAE,UAAU,OAAO,EACzF,CAAC,QAAQ,OAAO,CACjB;AAED,QACE,qBAACA,mBAAD;EACE,YAAA;EACA,KAAK;EACA;EACL,OAAO;GACL,GAAG;GACH,UAAU;GACV,GAAG;GACJ;EACD,GAAI;YATN,CAWG,uBACC,OAAO,KAAK,GAAG,MAAM;GACnB,MAAM,QAAQ,EAAE,SAAS,OAAO;GAChC,MAAM,WAAY,CAAC,UAAU,CAAC,EAAE,SAAU,UAAU;GAEpD,MAAM,gBACJ,EAAE,UAAU,iBACX,EAAE,SACD,CAAC,EAAE,MAAM,WAAW,OAAO,WACpB;AACL,QAAI;AACF,YAAO,OAAO,EAAE,MAAM,CAAC,OAAO,KAAK;YAC7B;AACN,YAAO;;OAEP;GAER,MAAM,yBAAyB,EAAE,OAAO,WAAW,OAAO,GAAG,OAAO,eAAe;AACnF,UACE,oBAAC,SAAD;IAA2B,OAAO,EAAE;cAClC,oBAAC,QAAD;KACE,WAAW,GACT,OAAO,WACP,iBAAiB,OAAO,aACxB,YAAY,OAAO,OACpB;KACD,OAAO;MACL,YAAY,gBAAgB,KAAA,IAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,OAAO;MACnD;KACD,eAAe,UAAU,EAAE,SAAS,KAAA,EAAU;eAE7C,YACC,oBAAC,MAAD;MACE,OAAO,KAAK,kBAAkB,uBAAuB,EAAE,IAAK;MAC5D,MAAM;MACN,MAAM;OAAE,MAAM;OAAI,aAAa;OAAG;MAClC,OAAO,EACL,eAAe,QAChB;MACD,CAAA;KAEG,CAAA;IACD,EAxBI,GAAG,OAAO,EAwBd;IAEZ,EACH,qBACC,oBAAC,SAAD;GAAS,OAAO,OAAO,UAAU;aAC/B,oBAAC,aAAD;IACE,eAAA;IACA,OAAO;IACP,cAAc,OAAO;IACrB,QAAQ;IACR,OAAO,sBAAsB,KAAA,IAAY;IACzC,WAAW,GACT,OAAO,QACP,uBAAuB,OAAO,OAC9B,kBAAkB,OAAO,OAC1B;IACD,SACE,sBACI,KAAA,IACA,CACE;KACE,QAAQ,OAAO,KAAK,MAAM,EAAE,MAAM;KAClC,OAAO,OAAO,WAAW;KAC1B,CACF;IAEP,OAAO,EACL,cAAc,UAAU,WAAW,QAAQ,OAAO,cACnD;IACD,mBAAmB,MAAM;AACvB,SAAI,EAAE,aAAa,KAAK,OAAO,aAC7B,WAAU,GAAG;SAEb,WAAU,EAAE,aAAa,CAAC;;IAG9B,CAAA;GACM,CAAA,CAEJ;;;AAId,cAAc,cAAc"}
+{"version":3,"file":"ColorSwatches.mjs","names":["useMergeState","Flexbox"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport { ColorPicker } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { 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';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles } 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\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--color-swatches-size': `${size}px`,\n    }),\n    [size],\n  );\n\n  const isCustomActive = useMemo(\n    () => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors],\n  );\n\n  return (\n    <Flexbox\n      horizontal\n      gap={6}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        flexWrap: 'wrap',\n        ...style,\n      }}\n      {...rest}\n    >\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || cssVar.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          // Check if color is transparent or CSS variable (which chroma can't parse)\n          const isTransparent =\n            c.color === 'transparent' ||\n            (c.color &&\n              !c.color.startsWith('var(') &&\n              (() => {\n                try {\n                  return chroma(c.color).alpha() === 0;\n                } catch {\n                  return false;\n                }\n              })());\n          // Get actual color value for readableColor (CSS variables can't be parsed)\n          const actualColorForReadable = c.color?.startsWith('var(') ? cssVar.colorPrimary : color;\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                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n                onClick={() => setActive(c.color || undefined)}\n              >\n                {isActive && (\n                  <Icon\n                    color={rgba(safeReadableColor(actualColorForReadable), 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            disabledAlpha\n            arrow={false}\n            defaultValue={cssVar.colorPrimary}\n            format={'hex'}\n            value={enableColorSwatches ? undefined : active}\n            className={cx(\n              styles.picker,\n              enableColorSwatches && styles.conic,\n              isCustomActive && styles.active,\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%' : cssVar.borderRadius,\n            }}\n            onChangeComplete={(c) => {\n              if (c.toHexString() === cssVar.colorPrimary) {\n                setActive('');\n              } else {\n                setActive(c.toHexString());\n              }\n            }}\n          />\n        </Tooltip>\n      )}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAaA,mBAAc,cAAc;EACtD;EACA;EACA;EACD,CAAC;CAGF,MAAM,eAAe,eACZ,EACL,yBAAyB,GAAG,KAAK,KAClC,GACD,CAAC,KAAK,CACP;CAED,MAAM,iBAAiB,cACf,UAAU,WAAW,OAAO,gBAAgB,CAAC,OAAO,MAAM,MAAM,EAAE,UAAU,OAAO,EACzF,CAAC,QAAQ,OAAO,CACjB;AAED,QACE,qBAACC,mBAAD;EACE,YAAA;EACA,KAAK;EACA;EACL,OAAO;GACL,GAAG;GACH,UAAU;GACV,GAAG;GACJ;EACD,GAAI;YATN,CAWG,uBACC,OAAO,KAAK,GAAG,MAAM;GACnB,MAAM,QAAQ,EAAE,SAAS,OAAO;GAChC,MAAM,WAAY,CAAC,UAAU,CAAC,EAAE,SAAU,UAAU;GAEpD,MAAM,gBACJ,EAAE,UAAU,iBACX,EAAE,SACD,CAAC,EAAE,MAAM,WAAW,OAAO,WACpB;AACL,QAAI;AACF,YAAO,OAAO,EAAE,MAAM,CAAC,OAAO,KAAK;YAC7B;AACN,YAAO;;OAEP;GAER,MAAM,yBAAyB,EAAE,OAAO,WAAW,OAAO,GAAG,OAAO,eAAe;AACnF,UACE,oBAAC,SAAD;IAA2B,OAAO,EAAE;cAClC,oBAAC,QAAD;KACE,WAAW,GACT,OAAO,WACP,iBAAiB,OAAO,aACxB,YAAY,OAAO,OACpB;KACD,OAAO;MACL,YAAY,gBAAgB,KAAA,IAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,OAAO;MACnD;KACD,eAAe,UAAU,EAAE,SAAS,KAAA,EAAU;eAE7C,YACC,oBAAC,MAAD;MACE,OAAO,KAAK,kBAAkB,uBAAuB,EAAE,IAAK;MAC5D,MAAM;MACN,MAAM;OAAE,MAAM;OAAI,aAAa;OAAG;MAClC,OAAO,EACL,eAAe,QAChB;MACD,CAAA;KAEG,CAAA;IACD,EAxBI,GAAG,OAAO,EAwBd;IAEZ,EACH,qBACC,oBAAC,SAAD;GAAS,OAAO,OAAO,UAAU;aAC/B,oBAAC,aAAD;IACE,eAAA;IACA,OAAO;IACP,cAAc,OAAO;IACrB,QAAQ;IACR,OAAO,sBAAsB,KAAA,IAAY;IACzC,WAAW,GACT,OAAO,QACP,uBAAuB,OAAO,OAC9B,kBAAkB,OAAO,OAC1B;IACD,SACE,sBACI,KAAA,IACA,CACE;KACE,QAAQ,OAAO,KAAK,MAAM,EAAE,MAAM;KAClC,OAAO,OAAO,WAAW;KAC1B,CACF;IAEP,OAAO,EACL,cAAc,UAAU,WAAW,QAAQ,OAAO,cACnD;IACD,mBAAmB,MAAM;AACvB,SAAI,EAAE,aAAa,KAAK,OAAO,aAC7B,WAAU,GAAG;SAEb,WAAU,EAAE,aAAa,CAAC;;IAG9B,CAAA;GACM,CAAA,CAEJ;;;AAId,cAAc,cAAc"}

package/es/DraggablePanel/DraggablePanel.mjs

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

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

package/es/DraggableSideNav/DraggableSideNav.mjs

@@ -6,7 +6,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 useMergeState from "use-merge-value";
+import useControlledState from "use-merge-value";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useHover } from "ahooks";
 import { Resizable } from "re-resizable";
@@ -72,7 +72,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] = useMergeState(defaultExpand, {
+	const [isExpand, setIsExpand] = useControlledState(defaultExpand, {
 		onChange: onExpandChange,
 		value: expand
 	});