@bioturing/components 0.37.1 → 0.39.0

package/dist/components/popup-panel/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  parseAntdPlacement,\n  buildAntdPlacement,\n  BaseUIPlacement,\n  BaseUISide,\n  BaseUIAlign,\n} from \"../utils\";\nimport { Popover } from \"@base-ui-components/react/popover\";\n\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport { X } from \"@bioturing/assets\";\nimport { PopupPanelSize } from \"./constants\";\nimport { useControlledState, useDraggable } from \"../hooks\";\nimport { Resizable } from \"../resizable\";\nimport { Stack } from \"../stack\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { useRef } from \"react\";\nimport { useTheme } from \"../theme-provider\";\n\nexport interface PopupPanelProps\n  extends Omit<\n      React.ComponentPropsWithRef<\"div\">,\n      \"title\" | \"content\" | \"children\"\n    >,\n    Omit<Popover.Root.Props, \"children\"> {\n  /** The trigger element that opens the popup panel */\n  children?: React.ComponentProps<typeof Popover.Trigger>[\"render\"];\n  /** Placement of the popup panel relative to its trigger */\n  placement?: PopoverProps[\"placement\"];\n  /** Whether to open the popup panel on hover */\n  openOnHover?: boolean;\n  /** Controls the open state of the popup panel */\n  open?: boolean;\n  /** Callback fired when the open state changes */\n  onOpenChange?: Popover.Root.Props[\"onOpenChange\"];\n  /** Content to display inside the popup panel */\n  content?: React.ReactNode;\n  /** Title text or element to display in the panel header */\n  title?: React.ReactNode;\n  /** The event that triggers the popup panel */\n  /**\n   * @default \"click\"\n   */\n  trigger?: \"click\" | \"hover\";\n  /** Custom anchor element for positioning the panel */\n  anchor?: Popover.Positioner.Props[\"anchor\"];\n  /** Content to display before the close button */\n  beforeCloseButton?: React.ReactNode;\n  /** Content to display after the close button */\n  afterCloseButton?: React.ReactNode;\n  /** Content to display after the title */\n  afterTitle?: React.ReactNode;\n  /**\n   * Predefined sizes for the popup panel\n   * - xsmall: 320px\n   * - small: 400px\n   * - medium: 480px (default)\n   * - large: 640px\n   * - xlarge: 840px\n   * @default \"medium\" for default type, \"xsmall\" for other types\n   */\n  size?: keyof typeof PopupPanelSize;\n  /**\n   * Footer content for the popup panel\n   * Can be a React node or a function that returns a React node\n   */\n  footer?:\n    | React.ReactNode\n    | ((props: { close: () => void }) => React.ReactNode);\n  /**\n   * Whether the panel should be open by default when uncontrolled\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Whether the panel should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Whether the panel should be draggable\n   * @default false\n   */\n  draggable?: boolean;\n  /**\n   * Whether to maintain aspect ratio when resizing\n   * Only applies when resizable is true\n   * @default false\n   */\n  maintainAspectRatio?: boolean;\n  /**\n   * Custom class names for different parts of the popup panel\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    header?: string;\n    title?: string;\n    content?: string;\n    footer?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Whether to close the panel when clicking outside\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n  /**\n   * Whether to use modal mode\n   * @default false\n   */\n  modal?: Popover.Root.Props[\"modal\"];\n  /**\n   * Callback function when the placement changes\n   */\n  onPlacementChange?: (placement: PopoverProps[\"placement\"]) => void;\n}\n\nexport const PopupPanel = ({\n  children,\n  placement,\n  openOnHover = false,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  content,\n  title,\n  trigger = \"click\",\n  className,\n  anchor,\n  beforeCloseButton,\n  afterCloseButton,\n  afterTitle,\n  size = \"medium\",\n  footer,\n  defaultOpen = false,\n  resizable = false,\n  draggable = false,\n  maintainAspectRatio = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n  onPlacementChange,\n  ...rest\n}: PopupPanelProps) => {\n  // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n  const [open, setOpen] = useControlledState(\n    outsideOpen,\n    outsideOnOpenChange,\n    defaultOpen // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const { className: themeClassName } = useTheme();\n  const baseUIPlacement = parseAntdPlacement(placement);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n\n  const positionerRef = useRef<HTMLDivElement>(null);\n  const currentSideRef = useRef<BaseUISide>(baseUIPlacement.side);\n  const currentAlignRef = useRef<BaseUIAlign>(baseUIPlacement.align);\n  const [placementChangeKey, setPlacementChangeKey] = useState(0);\n\n  useEffect(() => {\n    const positioner = positionerRef.current;\n    if (!positioner || !open) return; // Only observe when popup is open\n\n    // Create MutationObserver to watch for data-side changes\n    const observer = new MutationObserver((mutations) => {\n      let hasPlacementChanged = false;\n\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-side\"\n        ) {\n          const newSide = positioner.getAttribute(mutation.attributeName);\n          if (newSide && newSide !== currentSideRef.current) {\n            currentSideRef.current = newSide as BaseUISide;\n            hasPlacementChanged = true;\n          }\n        }\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-align\"\n        ) {\n          const newAlign = positioner.getAttribute(mutation.attributeName);\n          if (newAlign && newAlign !== currentAlignRef.current) {\n            currentAlignRef.current = newAlign as BaseUIAlign;\n            hasPlacementChanged = true;\n          }\n        }\n      });\n\n      // Only trigger callbacks if placement actually changed\n      if (hasPlacementChanged) {\n        const newPlacement = buildAntdPlacement({\n          side: currentSideRef.current,\n          align: currentAlignRef.current,\n        });\n\n        // Trigger resizable dimensions reset when placement changes\n        setPlacementChangeKey((prev) => prev + 1);\n\n        if (onPlacementChange) {\n          onPlacementChange(newPlacement);\n        }\n      }\n    });\n\n    // Start observing\n    observer.observe(positioner, {\n      attributes: true,\n      attributeFilter: [\"data-side\", \"data-align\"],\n      attributeOldValue: true,\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [onPlacementChange, open]);\n\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Stack\n          align=\"center\"\n          gap={8}\n          className={cls(\"popup-panel-title-wrapper\")}\n        >\n          <Popover.Title\n            render={\n              <div className={clsx(cls(\"grow\", \"truncate\"), classNames?.title)}>\n                {title}\n              </div>\n            }\n          ></Popover.Title>\n          <div className=\"flex items-center gap-2\">\n            {beforeCloseButton}\n            <Popover.Close\n              render={<IconButton>{defaultCloseIcon}</IconButton>}\n            />\n            {afterCloseButton}\n          </div>\n        </Stack>\n        {afterTitle ? afterTitle : null}\n      </div>\n    );\n  }, [\n    afterCloseButton,\n    afterTitle,\n    beforeCloseButton,\n    cls,\n    classNames?.header,\n    classNames?.title,\n    defaultCloseIcon,\n    title,\n  ]);\n\n  const { ref: draggableRef } = useDraggable(draggable);\n\n  const popup = (\n    <Popover.Popup\n      className={clsx(\n        cls(\"popup-panel\"),\n        cls(`popup-panel-size-${size}`),\n        className,\n        classNames?.popup\n      )}\n      ref={draggableRef}\n    >\n      {title && renderTitle()}\n      <div className={clsx(cls(\"popup-panel-content\"), classNames?.content)}>\n        <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n      </div>\n      {footer && (\n        <div className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}>\n          {typeof footer === \"function\"\n            ? footer({ close: () => setOpen(false) })\n            : footer}\n        </div>\n      )}\n    </Popover.Popup>\n  );\n\n  return (\n    <Popover.Root\n      openOnHover={trigger === \"hover\" ? true : openOnHover}\n      open={open}\n      onOpenChange={(open, eventDetails) => {\n        if (\n          (eventDetails.reason === \"outside-press\" ||\n            eventDetails.reason === \"focus-out\") &&\n          !closeOnClickOutside\n        )\n          return;\n        setOpen(open, eventDetails);\n      }}\n      modal={modal}\n      {...rest}\n    >\n      <Popover.Trigger\n        render={children}\n        className={clsx(cls(\"popup-panel-trigger\"), classNames?.trigger)}\n      ></Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner\n          ref={positionerRef}\n          className={clsx(\n            cls(\"popup-panel-root\"),\n            themeClassName,\n            classNames?.root\n          )}\n          side={baseUIPlacement.side}\n          align={baseUIPlacement.align}\n          sideOffset={4}\n          anchor={anchor}\n          style={\n            {\n              \"--size-width\": size ? PopupPanelSize[size] : undefined,\n            } as React.CSSProperties\n          }\n        >\n          {resizable ? (\n            <Resizable\n              resizable={resizable}\n              absolutePositioning={true}\n              resetKey={placementChangeKey}\n              maintainAspectRatio={maintainAspectRatio}\n              classNames={{\n                resizeHandle: classNames?.resizeHandle,\n              }}\n            >\n              {popup}\n            </Resizable>\n          ) : (\n            popup\n          )}\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["PopupPanel","children","placement","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","draggable","maintainAspectRatio","classNames","modal","closeOnClickOutside","onPlacementChange","rest","open","setOpen","useControlledState","cls","useCls","themeClassName","useTheme","baseUIPlacement","parseAntdPlacement","defaultCloseIcon","useMemo","jsx","X","positionerRef","useRef","currentSideRef","currentAlignRef","placementChangeKey","setPlacementChangeKey","useState","useEffect","positioner","observer","mutations","hasPlacementChanged","mutation","newSide","newAlign","newPlacement","buildAntdPlacement","prev","renderTitle","useCallback","jsxs","clsx","Stack","Popover","IconButton","draggableRef","useDraggable","popup","eventDetails","PopupPanelSize","Resizable"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport { Popover } from \"@base-ui-components/react/popover\";\nimport {\n  BaseUIAlign,\n  BaseUISide,\n  buildAntdPlacement,\n  clsx,\n  parseAntdPlacement,\n  useCls,\n} from \"../utils\";\n\nimport { mergeProps } from \"@base-ui-components/react\";\nimport { X } from \"@bioturing/assets\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useControlledState, useDraggable } from \"../hooks\";\nimport { IconButton } from \"../icon-button\";\nimport { Resizable } from \"../resizable\";\nimport { Stack } from \"../stack\";\nimport { PopupPanelSize } from \"./constants\";\n\n// Import component-specific styles\nimport { useRef } from \"react\";\nimport { useTheme } from \"../theme-provider\";\nimport \"./style.css\";\nimport { anchorToResizeHandles } from \"./utils\";\n\nexport interface PopupPanelProps\n  extends Omit<\n      React.ComponentPropsWithRef<\"div\">,\n      \"title\" | \"content\" | \"children\"\n    >,\n    Omit<Popover.Root.Props, \"children\"> {\n  /** The trigger element that opens the popup panel */\n  children?: React.ComponentProps<typeof Popover.Trigger>[\"render\"];\n  /** Placement of the popup panel relative to its trigger */\n  placement?: PopoverProps[\"placement\"];\n  /** Whether to open the popup panel on hover */\n  openOnHover?: boolean;\n  /** Controls the open state of the popup panel */\n  open?: boolean;\n  /** Callback fired when the open state changes */\n  onOpenChange?: Popover.Root.Props[\"onOpenChange\"];\n  /** Content to display inside the popup panel */\n  content?: React.ReactNode;\n  /** Title text or element to display in the panel header */\n  title?: React.ReactNode;\n  /** The event that triggers the popup panel */\n  /**\n   * @default \"click\"\n   */\n  trigger?: \"click\" | \"hover\";\n  /** Custom anchor element for positioning the panel */\n  anchor?: Popover.Positioner.Props[\"anchor\"];\n  /** Content to display before the close button */\n  beforeCloseButton?: React.ReactNode;\n  /** Content to display after the close button */\n  afterCloseButton?: React.ReactNode;\n  /** Content to display after the title */\n  afterTitle?: React.ReactNode;\n  /**\n   * Predefined sizes for the popup panel\n   * - xsmall: 320px\n   * - small: 400px\n   * - medium: 480px (default)\n   * - large: 640px\n   * - xlarge: 840px\n   * @default \"medium\" for default type, \"xsmall\" for other types\n   */\n  size?: keyof typeof PopupPanelSize;\n  /**\n   * Footer content for the popup panel\n   * Can be a React node or a function that returns a React node\n   */\n  footer?:\n    | React.ReactNode\n    | ((props: { close: () => void }) => React.ReactNode);\n  /**\n   * Whether the panel should be open by default when uncontrolled\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Whether the panel should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Whether the panel should be draggable\n   * @default false\n   */\n  draggable?: boolean;\n  /**\n   * Whether to maintain aspect ratio when resizing\n   * Only applies when resizable is true\n   * @default false\n   */\n  maintainAspectRatio?: boolean;\n  /**\n   * Custom class names for different parts of the popup panel\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    header?: string;\n    title?: string;\n    content?: string;\n    footer?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Whether to close the panel when clicking outside\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n  /**\n   * Whether to use modal mode\n   * @default false\n   */\n  modal?: Popover.Root.Props[\"modal\"];\n  /**\n   * Callback function when the placement changes\n   */\n  onPlacementChange?: (placement: PopoverProps[\"placement\"]) => void;\n  /**\n   * Props to pass to the positioner\n   */\n  positionerProps?: Popover.Positioner.Props;\n  /**\n   * Props to pass to the trigger\n   */\n  triggerProps?: Popover.Trigger.Props;\n  /**\n   * Props to pass to the portal\n   */\n  portalProps?: Popover.Portal.Props;\n}\n\nexport const PopupPanel = ({\n  children,\n  placement,\n  openOnHover = false,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  content,\n  title,\n  trigger = \"click\",\n  className,\n  anchor,\n  beforeCloseButton,\n  afterCloseButton,\n  afterTitle,\n  size = \"medium\",\n  footer,\n  defaultOpen = false,\n  resizable = false,\n  draggable = false,\n  maintainAspectRatio = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n  onPlacementChange,\n  positionerProps = {},\n  triggerProps = {},\n  portalProps = {},\n  ...rest\n}: PopupPanelProps) => {\n  // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n  const [open, setOpen] = useControlledState(\n    outsideOpen,\n    outsideOnOpenChange,\n    defaultOpen // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const { className: themeClassName } = useTheme();\n  const baseUIPlacement = parseAntdPlacement(placement);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n\n  // const positionerRef = useRef<HTMLDivElement>(null);\n\n  const currentSideRef = useRef<BaseUISide>(baseUIPlacement.side);\n  const currentAlignRef = useRef<BaseUIAlign>(baseUIPlacement.align);\n  const [placementChangeKey, setPlacementChangeKey] = useState(0);\n  const [positionerRef, setPositionerRef] = useState<HTMLDivElement | null>(\n    null\n  );\n\n  useEffect(() => {\n    if (!positionerRef || !open) return; // Only observe when popup is open\n\n    // Create MutationObserver to watch for data-side changes\n    const observer = new MutationObserver((mutations) => {\n      let hasPlacementChanged = false;\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-side\"\n        ) {\n          const newSide = positionerRef.getAttribute(mutation.attributeName);\n          if (newSide && newSide !== currentSideRef.current) {\n            currentSideRef.current = newSide as BaseUISide;\n            hasPlacementChanged = true;\n          }\n        }\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-align\"\n        ) {\n          const newAlign = positionerRef.getAttribute(mutation.attributeName);\n          if (newAlign && newAlign !== currentAlignRef.current) {\n            currentAlignRef.current = newAlign as BaseUIAlign;\n            hasPlacementChanged = true;\n          }\n        }\n      });\n\n      // Only trigger callbacks if placement actually changed\n      if (hasPlacementChanged) {\n        const newPlacement = buildAntdPlacement({\n          side: currentSideRef.current,\n          align: currentAlignRef.current,\n        });\n\n        // Trigger resizable dimensions reset when placement changes\n        setPlacementChangeKey((prev) => prev + 1);\n\n        if (onPlacementChange) {\n          onPlacementChange(newPlacement);\n        }\n      }\n    });\n\n    // Start observing\n    observer.observe(positionerRef, {\n      attributes: true,\n      attributeFilter: [\"data-side\", \"data-align\"],\n      attributeOldValue: true,\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [onPlacementChange, open, positionerRef]);\n\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Stack\n          align=\"center\"\n          gap={8}\n          className={cls(\"popup-panel-title-wrapper\")}\n        >\n          <Popover.Title\n            render={\n              <div className={clsx(cls(\"grow\", \"truncate\"), classNames?.title)}>\n                {title}\n              </div>\n            }\n          ></Popover.Title>\n          <div className=\"flex items-center gap-2\">\n            {beforeCloseButton}\n            <Popover.Close\n              render={<IconButton>{defaultCloseIcon}</IconButton>}\n            />\n            {afterCloseButton}\n          </div>\n        </Stack>\n        {afterTitle ? afterTitle : null}\n      </div>\n    );\n  }, [\n    afterCloseButton,\n    afterTitle,\n    beforeCloseButton,\n    cls,\n    classNames?.header,\n    classNames?.title,\n    defaultCloseIcon,\n    title,\n  ]);\n\n  const { ref: draggableRef } = useDraggable(draggable);\n\n  const popup = (\n    <Popover.Popup\n      className={clsx(\n        cls(\"popup-panel\"),\n        cls(`popup-panel-size-${size}`),\n        className,\n        classNames?.popup\n      )}\n      ref={draggableRef}\n    >\n      {title && renderTitle()}\n      <div className={clsx(cls(\"popup-panel-content\"), classNames?.content)}>\n        <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n      </div>\n      {footer && (\n        <div className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}>\n          {typeof footer === \"function\"\n            ? footer({ close: () => setOpen(false) })\n            : footer}\n        </div>\n      )}\n    </Popover.Popup>\n  );\n\n  const defaultPositionerProps = {\n    ref: setPositionerRef,\n    className: clsx(cls(\"popup-panel-root\"), themeClassName, classNames?.root),\n    side: baseUIPlacement.side,\n    align: baseUIPlacement.align,\n    sideOffset: 4,\n    anchor,\n    style: {\n      \"--size-width\": size ? PopupPanelSize[size] : undefined,\n    } as React.CSSProperties,\n    render: ({ children, onDragEnd, onDragStart, ...props }) => {\n      return resizable ? (\n        <Resizable\n          resizable={resizable}\n          resetKey={placementChangeKey}\n          maintainAspectRatio={maintainAspectRatio}\n          classNames={{\n            resizeHandle: classNames?.resizeHandle,\n          }}\n          handles={anchorToResizeHandles(\n            currentSideRef.current,\n            currentAlignRef.current\n          )}\n          {...props}\n        >\n          {children}\n        </Resizable>\n      ) : (\n        <div {...props}>{children}</div>\n      );\n    },\n  };\n\n  return (\n    <Popover.Root\n      open={open}\n      onOpenChange={(open, eventDetails) => {\n        if (\n          (eventDetails.reason === \"outside-press\" ||\n            eventDetails.reason === \"focus-out\") &&\n          !closeOnClickOutside\n        )\n          return;\n        setOpen(open, eventDetails);\n      }}\n      modal={modal}\n      {...rest}\n    >\n      <Popover.Trigger\n        {...mergeProps(\n          {\n            render: children,\n            className: clsx(cls(\"popup-panel-trigger\"), classNames?.trigger),\n            openOnHover: trigger === \"hover\" ? true : openOnHover,\n          },\n          triggerProps\n        )}\n      ></Popover.Trigger>\n      <Popover.Portal {...portalProps}>\n        <Popover.Positioner\n          {...mergeProps(defaultPositionerProps, positionerProps)}\n        >\n          {popup}\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["PopupPanel","children","placement","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","draggable","maintainAspectRatio","classNames","modal","closeOnClickOutside","onPlacementChange","positionerProps","triggerProps","portalProps","rest","open","setOpen","useControlledState","cls","useCls","themeClassName","useTheme","baseUIPlacement","parseAntdPlacement","defaultCloseIcon","useMemo","jsx","X","currentSideRef","useRef","currentAlignRef","placementChangeKey","setPlacementChangeKey","useState","positionerRef","setPositionerRef","useEffect","observer","mutations","hasPlacementChanged","mutation","newSide","newAlign","newPlacement","buildAntdPlacement","prev","renderTitle","useCallback","jsxs","clsx","Stack","Popover","IconButton","draggableRef","useDraggable","popup","defaultPositionerProps","PopupPanelSize","onDragEnd","onDragStart","props","Resizable","anchorToResizeHandles","eventDetails","mergeProps"],"mappings":"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"}

package/dist/components/popup-panel/utils.d.ts

@@ -0,0 +1,10 @@
+import { BaseUISide, BaseUIAlign } from '../utils/placement';
+import { ResizableProps } from '../resizable';
+/**
+ * Convert anchor position (side + align) to resize handles
+ * @param side - The side of the anchor (top, bottom, left, right)
+ * @param align - The alignment on that side (start, end, center)
+ * @returns Object with boolean flags for each resize handle
+ */
+export declare function anchorToResizeHandles(side: BaseUISide, align: BaseUIAlign): ResizableProps["handles"];
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/popup-panel/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/popup-panel/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;GAKG;AACH,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,UAAU,EAChB,KAAK,EAAE,WAAW,GACjB,cAAc,CAAC,SAAS,CAAC,CAwB3B"}

package/dist/components/popup-panel/utils.js

@@ -0,0 +1,13 @@
+function r(t, e) {
+  const o = {
+    top: !1,
+    bottom: !1,
+    left: !1,
+    right: !1
+  };
+  return o[t] = !0, (e === "start" || e === "end") && (t === "top" || t === "bottom" ? o[e === "start" ? "right" : "left"] = !0 : (t === "left" || t === "right") && (o[e === "start" ? "bottom" : "top"] = !0)), o;
+}
+export {
+  r as anchorToResizeHandles
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/popup-panel/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/popup-panel/utils.ts"],"sourcesContent":["import { BaseUISide, BaseUIAlign } from \"../utils/placement\";\nimport { ResizableProps } from \"../resizable\";\n\n/**\n * Convert anchor position (side + align) to resize handles\n * @param side - The side of the anchor (top, bottom, left, right)\n * @param align - The alignment on that side (start, end, center)\n * @returns Object with boolean flags for each resize handle\n */\nexport function anchorToResizeHandles(\n  side: BaseUISide,\n  align: BaseUIAlign\n): ResizableProps[\"handles\"] {\n  const handles: ResizableProps[\"handles\"] = {\n    top: false,\n    bottom: false,\n    left: false,\n    right: false,\n  };\n\n  // Set the opposite side to true (this is where resizing happens from)\n  // Set the side to true\n  handles[side] = true;\n\n  // Set horizontal handles based on alignment\n  if (align === \"start\" || align === \"end\") {\n    if (side === \"top\" || side === \"bottom\") {\n      // For top/bottom, start maps to right, end maps to left\n      handles[align === \"start\" ? \"right\" : \"left\"] = true;\n    } else if (side === \"left\" || side === \"right\") {\n      // For left/right, start maps to bottom, end maps to top\n      handles[align === \"start\" ? \"bottom\" : \"top\"] = true;\n    }\n  }\n\n  return handles;\n}\n"],"names":["anchorToResizeHandles","side","align","handles"],"mappings":"AASO,SAASA,EACdC,GACAC,GAC2B;AAC3B,QAAMC,IAAqC;AAAA,IACzC,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAKT,SAAAA,EAAQF,CAAI,IAAI,KAGZC,MAAU,WAAWA,MAAU,WAC7BD,MAAS,SAASA,MAAS,WAE7BE,EAAQD,MAAU,UAAU,UAAU,MAAM,IAAI,MACvCD,MAAS,UAAUA,MAAS,aAErCE,EAAQD,MAAU,UAAU,WAAW,KAAK,IAAI,MAI7CC;AACT;"}

package/dist/components/resizable/component.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { MoveValues, ResizableProps as UseResizableProps } from 'react-use-resizable';
+import { MoveValues, ResizableProps as UseResizableProps } from '../hooks/useResizable';
 import { WithRenderPropProps } from '../utils';
 export interface ResizableProps extends Omit<WithRenderPropProps, keyof UseResizableProps>, UseResizableProps {
     /**
@@ -21,12 +21,6 @@ export interface ResizableProps extends Omit<WithRenderPropProps, keyof UseResiz
         left?: boolean;
         top?: boolean;
     };
-    /**
-     * Whether to use absolute positioning for left handle resizing
-     * Set to true when used in absolutely positioned containers like PopupPanel
-     * @default false
-     */
-    absolutePositioning?: boolean;
     /**
      * Custom class names for different parts of the resizable component
      */
@@ -66,5 +60,5 @@ export interface ResizableProps extends Omit<WithRenderPropProps, keyof UseResiz
      */
     maintainAspectRatio?: boolean;
 }
-export declare const Resizable: ({ children, resizable, handles, absolutePositioning, classNames, className: containerClassName, style: containerStyle, resetKey, maxHeight, maxWidth, minHeight, minWidth, lockHorizontal, lockVertical, onResize, onDragEnd: onDragEndProp, onDragStart: onDragStartProp, disabled, maintainAspectRatio, interval, initialHeight: initialHeightProp, initialWidth: initialWidthProp, ...rest }: ResizableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Resizable: React.ForwardRefExoticComponent<ResizableProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=component.d.ts.map

package/dist/components/resizable/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/resizable/component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAChF,OAAO,EAEL,KAAK,UAAU,EACf,cAAc,IAAI,iBAAiB,EACpC,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAIL,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AAGlB,OAAO,aAAa,CAAC;AAGrB,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,iBAAiB,CAAC,EACxD,iBAAiB;IACnB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,IAAI,CAAC,EAAE,OAAO,CAAC;QACf,GAAG,CAAC,EAAE,OAAO,CAAC;KACf,CAAC;IACF;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,SAAS,GAAI,iYA2BvB,cAAc,4CA8ThB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/resizable/component.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,UAAU,EACf,cAAc,IAAI,iBAAiB,EACpC,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAIL,mBAAmB,EAGpB,MAAM,UAAU,CAAC;AAGlB,OAAO,aAAa,CAAC;AAGrB,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,MAAM,iBAAiB,CAAC,EACxD,iBAAiB;IACnB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,IAAI,CAAC,EAAE,OAAO,CAAC;QACf,GAAG,CAAC,EAAE,OAAO,CAAC;KACf,CAAC;IAOF;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,SAAS,uFAoWrB,CAAC"}

package/dist/components/resizable/component.js

@@ -1,256 +1,258 @@
 "use client";
-import { jsx as l } from "react/jsx-runtime";
-import A, { useState as H, useCallback as ee, useEffect as B, isValidElement as te } from "react";
-import { useResizable as re } from "react-use-resizable";
-import oe from "merge-refs";
-import { mergeProps as le } from "@base-ui-components/react";
+import { jsx as i } from "react/jsx-runtime";
+import Y, { forwardRef as Z, useState as b, useCallback as $, useEffect as C, isValidElement as K } from "react";
+import { useResizable as A } from "../hooks/useResizable.js";
+import ee from "merge-refs";
+import { mergeProps as te } from "@base-ui-components/react";
 import './style.css';/* empty css          */
-import { getReactElementProp as C } from "../utils/reactElement.js";
-import { useCls as ie } from "../utils/antdUtils.js";
-import { clsx as c, cn as se } from "../utils/cn.js";
-import { WithRenderProp as ne } from "../utils/WithRenderProp.js";
-const be = ({
-  children: u,
-  resizable: a = !1,
-  handles: o = { bottom: !0, right: !0, left: !0, top: !0 },
-  absolutePositioning: E = !1,
-  classNames: i,
-  className: D,
-  style: S,
-  resetKey: k,
-  // Use Resizable Props
-  maxHeight: I,
-  maxWidth: _,
-  minHeight: $,
-  minWidth: j,
-  lockHorizontal: q,
-  lockVertical: F,
-  onResize: G,
-  onDragEnd: x,
-  onDragStart: N,
-  disabled: J,
-  maintainAspectRatio: r = !1,
-  interval: L,
-  initialHeight: M,
-  initialWidth: O,
-  // other With Render Props
-  ...Q
-}) => {
-  const s = ie(), [d, T] = H(null), [g, z] = H(), [p, b] = H(), [v, V] = H(!1), U = ee(
-    (e) => {
-      if (T(e), e && !g && !p) {
-        const t = e.getBoundingClientRect();
-        t.width > 0 && t.height > 0 && r && (z(t.width), b(t.height));
-      }
-    },
-    [g, p, r]
-  );
-  B(() => {
-    if (k !== void 0 && d) {
-      d.style.width = "", d.style.height = "";
-      const e = d.getBoundingClientRect();
-      e.width > 0 && e.height > 0 && (r ? (z(e.width), b(e.height)) : (z(void 0), b(void 0)));
-    }
-  }, [k, d, r]);
-  const y = re({
-    initialWidth: r ? g : O,
-    initialHeight: r ? p : M,
-    maxHeight: I,
-    maxWidth: _,
-    minHeight: $,
-    minWidth: j,
-    lockHorizontal: q,
-    lockVertical: F,
-    onResize: G,
-    disabled: J,
-    maintainAspectRatio: r,
-    interval: L,
-    onDragStart: (e) => {
-      if (V(!0), d) {
-        const t = d.getBoundingClientRect();
-        t.width > 0 && !g && z(t.width), t.height > 0 && !p && b(t.height);
-      }
-      N && N(e);
-    },
-    onDragEnd: (e) => {
-      V(!1), x && x(e);
-    }
-  }), W = te(u);
-  B(() => {
-    v ? document.body.style.userSelect = "none" : document.body.style.userSelect = "";
-  }, [v]);
-  const { ref: X, ...Y } = y.getRootProps(), n = y.getHandleProps, f = y.rootRef, R = (e, t) => {
-    if (!e.current || !E) return;
-    const { widthDiff: P } = t;
-    e.current.style.left = `${parseInt(e.current.style.left || "0") - P}px`;
-  }, w = (e, t) => {
-    if (!e.current || !E) return;
-    const { heightDiff: P } = t;
-    e.current.style.top = `${parseInt(e.current.style.top || "0") - P}px`;
-  }, Z = a ? [
-    o.top && !r && /* @__PURE__ */ l(
-      "div",
-      {
-        className: c(
-          s("resizable-resize-handle"),
-          i?.resizeHandle
-        ),
-        "data-placement": "top-center",
-        ...n({
-          reverse: !0,
-          lockHorizontal: !0,
-          onResize: (e) => w(f, e)
-        })
-      },
-      "top"
-    ),
-    o.bottom && !r && /* @__PURE__ */ l(
-      "div",
-      {
-        className: c(
-          s("resizable-resize-handle"),
-          i?.resizeHandle
-        ),
-        "data-placement": "bottom-left",
-        ...n({
-          lockHorizontal: !0
-        })
-      },
-      "bottom"
-    ),
-    o.left && !r && /* @__PURE__ */ l(
-      "div",
-      {
-        className: c(
-          s("resizable-resize-handle"),
-          i?.resizeHandle
-        ),
-        "data-placement": "top-left",
-        ...n({
-          reverse: !0,
-          lockVertical: !0,
-          onResize: (e) => R(f, e)
-        })
-      },
-      "left"
-    ),
-    o.right && !r && /* @__PURE__ */ l(
-      "div",
-      {
-        className: c(
-          s("resizable-resize-handle"),
-          i?.resizeHandle
-        ),
-        "data-placement": "top-right",
-        ...n({
-          lockVertical: !0
-        })
-      },
-      "right"
-    ),
-    // For aspect ratio maintenance, add corner handles that can resize both dimensions
-    o.right && o.bottom && /* @__PURE__ */ l(
-      "div",
-      {
-        className: c(
-          s("resizable-resize-handle"),
-          i?.resizeHandle
-        ),
-        "data-placement": "bottom-right-corner",
-        ...n({
-          // No locks - allow both horizontal and vertical resizing
-        })
-      },
-      "bottom-right-corner"
-    ),
-    r && o.left && o.bottom && /* @__PURE__ */ l(
-      "div",
-      {
-        className: c(
-          s("resizable-resize-handle"),
-          i?.resizeHandle
-        ),
-        "data-placement": "bottom-left-corner",
-        ...n({
-          reverse: !0,
-          onResize: (e) => R(f, e)
-        })
+import { getReactElementProp as v } from "../utils/reactElement.js";
+import { useCls as re } from "../utils/antdUtils.js";
+import { clsx as c, cn as oe } from "../utils/cn.js";
+import { WithRenderProp as ie } from "../utils/WithRenderProp.js";
+const pe = Z(
+  ({
+    children: m,
+    resizable: a = !1,
+    handles: t = { bottom: !0, right: !0, left: !0, top: !0 },
+    classNames: l,
+    className: N,
+    style: W,
+    resetKey: y,
+    // Use Resizable Props
+    maxHeight: B,
+    maxWidth: S,
+    minHeight: V,
+    minWidth: x,
+    lockHorizontal: D,
+    lockVertical: _,
+    onResize: j,
+    onDragEnd: P,
+    onDragStart: w,
+    disabled: q,
+    maintainAspectRatio: o = !1,
+    interval: F,
+    initialHeight: G,
+    initialWidth: I,
+    // other With Render Props
+    ...J
+  }, L) => {
+    const s = re(), [d, M] = b(null), [g, p] = b(), [u, z] = b(), [H, E] = b(!1), O = $(
+      (e) => {
+        if (M(e), e && !g && !u) {
+          const r = e.getBoundingClientRect();
+          r.width > 0 && r.height > 0 && o && (p(r.width), z(r.height));
+        }
       },
-      "bottom-left-corner"
-    ),
-    r && o.right && o.top && /* @__PURE__ */ l(
-      "div",
-      {
-        className: c(
-          s("resizable-resize-handle"),
-          i?.resizeHandle
-        ),
-        "data-placement": "top-right-corner",
-        ...n({
-          reverse: !0,
-          onResize: (e) => w(f, e)
-        })
+      [g, u, o]
+    );
+    C(() => {
+      if (y !== void 0 && d) {
+        d.style.width = "", d.style.height = "";
+        const e = d.getBoundingClientRect();
+        e.width > 0 && e.height > 0 && (o ? (p(e.width), z(e.height)) : (p(void 0), z(void 0)));
+      }
+    }, [y, d, o]);
+    const k = A({
+      initialWidth: o ? g : I,
+      initialHeight: o ? u : G,
+      maxHeight: B,
+      maxWidth: S,
+      minHeight: V,
+      minWidth: x,
+      lockHorizontal: D,
+      lockVertical: _,
+      onResize: j,
+      disabled: q,
+      maintainAspectRatio: o,
+      interval: F,
+      onDragStart: (e) => {
+        if (E(!0), d) {
+          const r = d.getBoundingClientRect();
+          r.width > 0 && !g && p(r.width), r.height > 0 && !u && z(r.height);
+        }
+        w && w(e);
       },
-      "top-right-corner"
-    ),
-    o.left && o.top && /* @__PURE__ */ l(
-      "div",
+      onDragEnd: (e) => {
+        E(!1), P && P(e);
+      }
+    }), R = K(m);
+    C(() => {
+      H ? document.body.style.userSelect = "none" : document.body.style.userSelect = "";
+    }, [H]);
+    const { ref: Q, ...T } = k.getRootProps(), n = k.getHandleProps, U = a ? [
+      t.top && !o && /* @__PURE__ */ i(
+        "div",
+        {
+          className: c(
+            s("resizable-resize-handle"),
+            l?.resizeHandle
+          ),
+          "data-placement": "top-center",
+          ...n({
+            reverse: !0,
+            lockHorizontal: !0
+            // onResize: (values) =>
+            //   onReverseHandleChangeVertical(rootRef, values),
+          })
+        },
+        "top"
+      ),
+      t.bottom && !o && /* @__PURE__ */ i(
+        "div",
+        {
+          className: c(
+            s("resizable-resize-handle"),
+            l?.resizeHandle
+          ),
+          "data-placement": "bottom-left",
+          ...n({
+            lockHorizontal: !0
+          })
+        },
+        "bottom"
+      ),
+      t.left && !o && /* @__PURE__ */ i(
+        "div",
+        {
+          className: c(
+            s("resizable-resize-handle"),
+            l?.resizeHandle
+          ),
+          "data-placement": "top-left",
+          ...n({
+            reverse: !0,
+            lockVertical: !0
+            // onResize: (values) =>
+            //   onReverseHandleChangeHorizontal(rootRef, values),
+          })
+        },
+        "left"
+      ),
+      t.right && !o && /* @__PURE__ */ i(
+        "div",
+        {
+          className: c(
+            s("resizable-resize-handle"),
+            l?.resizeHandle
+          ),
+          "data-placement": "top-right",
+          ...n({
+            lockVertical: !0
+          })
+        },
+        "right"
+      ),
+      t.right && t.bottom && /* @__PURE__ */ i(
+        "div",
+        {
+          className: c(
+            s("resizable-resize-handle"),
+            l?.resizeHandle
+          ),
+          "data-placement": "bottom-right-corner",
+          ...n({
+            // No locks - allow both horizontal and vertical resizing
+            corner: "bottom-right"
+          })
+        },
+        "bottom-right-corner"
+      ),
+      t.left && t.top && /* @__PURE__ */ i(
+        "div",
+        {
+          className: c(
+            s("resizable-resize-handle"),
+            l?.resizeHandle
+          ),
+          "data-placement": "top-left-corner",
+          ...n({
+            corner: "top-left"
+            // onResize: (values) => {
+            //   onReverseHandleChangeHorizontal(rootRef, values);
+            //   onReverseHandleChangeVertical(rootRef, values);
+            // },
+          })
+        },
+        "top-left-corner"
+      ),
+      t.right && t.top && /* @__PURE__ */ i(
+        "div",
+        {
+          className: c(
+            s("resizable-resize-handle"),
+            l?.resizeHandle
+          ),
+          "data-placement": "top-right-corner",
+          ...n({
+            corner: "top-right"
+            // onResize: (values) => {
+            //   onReverseHandleChangeVertical(rootRef, values);
+            // },
+          })
+        },
+        "top-right-corner"
+      ),
+      t.left && t.bottom && /* @__PURE__ */ i(
+        "div",
+        {
+          className: c(
+            s("resizable-resize-handle"),
+            l?.resizeHandle
+          ),
+          "data-placement": "bottom-left-corner",
+          ...n({
+            corner: "bottom-left"
+            // onResize: (values) => {
+            //   onReverseHandleChangeHorizontal(rootRef, values);
+            //   onReverseHandleChangeVertical(rootRef, values);
+            // },
+          })
+        },
+        "bottom-left-corner"
+      )
+    ] : [], f = m, h = {
+      className: v(f, "className"),
+      style: v(f, "style"),
+      children: v(f, "children")
+    }, X = {
+      className: oe(
+        a && s("resizable"),
+        l?.root,
+        h.className,
+        N
+      ),
+      ref: ee(
+        a ? Q : void 0,
+        O,
+        // Always need this for dimension measurement
+        f?.ref,
+        L
+      ),
+      style: { ...h.style, ...W },
+      ...H ? { "data-resizing": !0 } : {},
+      ...a ? { "data-resizable": !0 } : {},
+      children: R ? [
+        ...Array.isArray(h.children) ? h.children : [h.children],
+        ...U.filter(Boolean)
+      ] : m
+    };
+    return /* @__PURE__ */ i(
+      ie,
       {
-        className: c(
-          s("resizable-resize-handle"),
-          i?.resizeHandle
-        ),
-        "data-placement": "top-left-corner",
-        ...n({
-          reverse: !0,
-          onResize: (e) => {
-            R(f, e), w(f, e);
-          }
-        })
-      },
-      "top-left-corner"
-    )
-  ] : [], h = u, m = {
-    className: C(h, "className"),
-    style: C(h, "style"),
-    children: C(h, "children")
-  }, K = {
-    className: se(
-      a && s("resizable"),
-      i?.root,
-      m.className,
-      D
-    ),
-    ref: oe(
-      a ? X : void 0,
-      U,
-      // Always need this for dimension measurement
-      h?.ref
-    ),
-    style: { ...m.style, ...S },
-    ...v ? { "data-resizing": !0 } : {},
-    ...a ? { "data-resizable": !0 } : {},
-    children: W ? [
-      ...Array.isArray(m.children) ? m.children : [m.children],
-      ...Z.filter(Boolean)
-    ] : u
-  };
-  return /* @__PURE__ */ l(
-    ne,
-    {
-      render: (e) => {
-        const t = le(
-          e,
-          K,
-          a ? Y : {}
-        );
-        return W ? A.cloneElement(h, t) : /* @__PURE__ */ l("div", { ...t, children: u });
-      },
-      ...Q
-    }
-  );
-};
+        render: (e) => {
+          const r = te(
+            e,
+            X,
+            a ? T : {}
+          );
+          return R ? Y.cloneElement(f, r) : /* @__PURE__ */ i("div", { ...r, children: m });
+        },
+        ...J
+      }
+    );
+  }
+);
 export {
-  be as Resizable
+  pe as Resizable
 };
 //# sourceMappingURL=component.js.map