@bioturing/components 0.26.2 → 0.27.0

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

@@ -1,208 +1,186 @@
 "use client";
-import { jsx as o, jsxs as d, Fragment as a } from "react/jsx-runtime";
-import { Popover as i } from "@base-ui-components/react/popover";
-import { useState as f, useCallback as C, useEffect as O, useMemo as N } from "react";
-import s from "antd/es/flex";
-import { X as ee } from "@bioturing/assets";
-import { PopupPanelSize as te } from "./constants.js";
-import { useResizable as oe } from "react-use-resizable";
-import ne from "merge-refs";
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { Popover as o } from "@base-ui-components/react/popover";
+import { useMemo as L, useRef as C, useState as Q, useEffect as W, useCallback as Y } from "react";
+import { X as Z } from "@bioturing/assets";
+import { PopupPanelSize as _ } from "./constants.js";
+import { Stack as B } from "../stack/index.js";
 import './style.css';/* empty css          */
-import { useControlledState as re } from "../hooks/useControlledState.js";
-import { useCls as pe, parseAntdPlacement as ie } from "../utils/antdUtils.js";
-import { clsx as r } from "../utils/cn.js";
-import { IconButton as de } from "../icon-button/component.js";
-const we = ({
-  children: S,
+import { parseAntdPlacement as m, buildAntdPlacement as a } from "../utils/placement.js";
+import { Resizable as N } from "../resizable/component.js";
+import { useControlledState as s } from "../hooks/useControlledState.js";
+import { useCls as ee } from "../utils/antdUtils.js";
+import { clsx as p } from "../utils/cn.js";
+import { IconButton as te } from "../icon-button/component.js";
+const ve = ({
+  children: H,
   placement: I,
-  openOnHover: D = !1,
-  open: W,
-  onOpenChange: j,
-  content: E,
+  openOnHover: K = !1,
+  open: j,
+  onOpenChange: E,
+  content: M,
   title: h,
   trigger: F = "click",
-  className: V,
-  anchor: $,
-  beforeCloseButton: P,
-  afterCloseButton: H,
-  afterTitle: c,
-  size: g = "medium",
+  className: T,
+  anchor: U,
+  beforeCloseButton: R,
+  afterCloseButton: S,
+  afterTitle: b,
+  size: v = "medium",
   footer: l,
-  defaultOpen: A,
-  resizable: y = !1,
+  defaultOpen: V,
+  resizable: X = !1,
   classNames: e,
-  modal: M = !1,
-  closeOnClickOutside: T = !0
+  modal: $ = !1,
+  closeOnClickOutside: q = !0,
+  onPlacementChange: P
 }) => {
-  const [U, b] = re(
-    W,
+  const [w, x] = s(
     j,
-    A ?? !1
+    E,
+    V ?? !1
     // Always provide a default value to prevent undefined
-  ), t = pe(), w = ie(I), [v, X] = f(null), [q, G] = f(), [J, K] = f(), L = C((n) => {
-    X(n);
-  }, []);
-  O(() => {
-    if (!v) return;
-    const n = new ResizeObserver((u) => {
-      for (const p of u)
-        G(p.contentRect.width), K(p.contentRect.height);
+  ), r = ee(), c = m(I), z = L(() => /* @__PURE__ */ t(Z, { size: 16 }), []), k = C(null), y = C(c.side), O = C(c.align), [D, G] = Q(0);
+  W(() => {
+    const u = k.current;
+    if (!u || !w) return;
+    const g = new MutationObserver((d) => {
+      let A = !1;
+      if (d.forEach((i) => {
+        if (i.type === "attributes" && i.attributeName === "data-side") {
+          const n = u.getAttribute(i.attributeName);
+          n && n !== y.current && (y.current = n, A = !0);
+        }
+        if (i.type === "attributes" && i.attributeName === "data-align") {
+          const n = u.getAttribute(i.attributeName);
+          n && n !== O.current && (O.current = n, A = !0);
+        }
+      }), A) {
+        const i = a({
+          side: y.current,
+          align: O.current
+        });
+        G((n) => n + 1), P && P(i);
+      }
     });
-    return n.observe(v), () => {
-      n.disconnect();
+    return g.observe(u, {
+      attributes: !0,
+      attributeFilter: ["data-side", "data-align"],
+      attributeOldValue: !0
+    }), () => {
+      g.disconnect();
     };
-  }, [v]);
-  const x = N(() => /* @__PURE__ */ o(ee, { size: 16 }), []), Q = C(() => /* @__PURE__ */ d("div", { className: r(t("popup-panel-header"), e == null ? void 0 : e.header), children: [
-    /* @__PURE__ */ d(
-      s,
+  }, [P, w]);
+  const J = Y(() => /* @__PURE__ */ f("div", { className: p(r("popup-panel-header"), e == null ? void 0 : e.header), children: [
+    /* @__PURE__ */ f(
+      B,
       {
         align: "center",
         gap: 8,
-        className: t("popup-panel-title-wrapper"),
+        className: r("popup-panel-title-wrapper"),
         children: [
-          /* @__PURE__ */ o(
-            i.Title,
+          /* @__PURE__ */ t(
+            o.Title,
             {
-              render: /* @__PURE__ */ o("div", { className: r(t("grow", "truncate"), e == null ? void 0 : e.title), children: h })
+              render: /* @__PURE__ */ t("div", { className: p(r("grow", "truncate"), e == null ? void 0 : e.title), children: h })
             }
           ),
-          /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
-            P,
-            /* @__PURE__ */ o(
-              i.Close,
+          /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
+            R,
+            /* @__PURE__ */ t(
+              o.Close,
               {
-                render: /* @__PURE__ */ o(de, { children: x })
+                render: /* @__PURE__ */ t(te, { children: z })
               }
             ),
-            H
+            S
           ] })
         ]
       }
     ),
-    c || null
+    b || null
   ] }), [
-    H,
-    c,
-    P,
-    t,
+    S,
+    b,
+    R,
+    r,
     e == null ? void 0 : e.header,
     e == null ? void 0 : e.title,
-    x,
+    z,
     h
-  ]), [R, k] = f(!1), { getRootProps: Y, getHandleProps: z, rootRef: Z } = oe({
-    initialWidth: q,
-    initialHeight: J,
-    onDragStart: () => k(!0),
-    onDragEnd: () => k(!1)
-  });
-  O(() => {
-    R ? document.body.style.userSelect = "none" : document.body.style.userSelect = "";
-  }, [R]);
-  const { ref: _, ...B } = Y(), m = (n, u) => {
-    if (!n.current) return;
-    const { widthDiff: p } = u;
-    n.current.style.left = `${parseInt(n.current.style.left || "0") - p}px`;
-  };
-  return /* @__PURE__ */ d(
-    i.Root,
+  ]);
+  return /* @__PURE__ */ f(
+    o.Root,
     {
-      openOnHover: F === "hover" ? !0 : D,
-      open: U,
-      onOpenChange: (n, u, p) => {
-        (p === "outside-press" || p === "focus-out") && !T || b(n, u, p);
+      openOnHover: F === "hover" ? !0 : K,
+      open: w,
+      onOpenChange: (u, g, d) => {
+        (d === "outside-press" || d === "focus-out") && !q || x(u, g, d);
       },
-      modal: M,
+      modal: $,
       children: [
-        /* @__PURE__ */ o(
-          i.Trigger,
+        /* @__PURE__ */ t(
+          o.Trigger,
           {
-            render: S,
-            className: r(t("popup-panel-trigger"), e == null ? void 0 : e.trigger)
+            render: H,
+            className: p(r("popup-panel-trigger"), e == null ? void 0 : e.trigger)
           }
         ),
-        /* @__PURE__ */ o(i.Portal, { children: /* @__PURE__ */ o(
-          i.Positioner,
+        /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
+          o.Positioner,
           {
-            className: r(t("popup-panel-root"), e == null ? void 0 : e.root),
-            side: w.placement,
-            align: w.align,
+            ref: k,
+            className: p(r("popup-panel-root"), e == null ? void 0 : e.root),
+            side: c.side,
+            align: c.align,
             sideOffset: 4,
-            anchor: $,
+            anchor: U,
             style: {
-              "--size-width": g ? te[g] : void 0
+              "--size-width": v ? _[v] : void 0
             },
-            children: /* @__PURE__ */ d(
-              i.Popup,
+            children: /* @__PURE__ */ t(
+              N,
               {
-                className: r(
-                  t("popup-panel"),
-                  t(`popup-panel-size-${g}`),
-                  V,
-                  e == null ? void 0 : e.popup
-                ),
-                ref: ne(_, L),
-                ...y ? B : {},
-                ...R ? { "data-resizing": !0 } : {},
-                children: [
-                  h && Q(),
-                  /* @__PURE__ */ o(
-                    "div",
-                    {
-                      className: r(t("popup-panel-content"), e == null ? void 0 : e.content),
-                      children: /* @__PURE__ */ o("div", { className: t("popup-panel-content-inner"), children: E })
-                    }
-                  ),
-                  l && /* @__PURE__ */ o(
-                    "div",
-                    {
-                      className: r(t("popup-panel-footer"), e == null ? void 0 : e.footer),
-                      children: typeof l == "function" ? l({ close: () => b(!1) }) : l
-                    }
-                  ),
-                  y && /* @__PURE__ */ d(a, { children: [
-                    /* @__PURE__ */ o(
-                      "div",
-                      {
-                        className: r(
-                          t("popup-panel-resize-handle"),
-                          e == null ? void 0 : e.resizeHandle
-                        ),
-                        "data-placement": "bottom-left",
-                        ...z({
-                          lockHorizontal: !0
-                        })
-                      }
-                    ),
-                    /* @__PURE__ */ o(
-                      "div",
-                      {
-                        className: r(
-                          t("popup-panel-resize-handle"),
-                          e == null ? void 0 : e.resizeHandle
-                        ),
-                        "data-placement": "top-left",
-                        ...z({
-                          reverse: !0,
-                          lockVertical: !0,
-                          onResize: (n) => m(Z, n)
-                        })
-                      }
+                resizable: X,
+                absolutePositioning: !0,
+                resetKey: D,
+                classNames: {
+                  resizeHandle: e == null ? void 0 : e.resizeHandle
+                },
+                children: /* @__PURE__ */ f(
+                  o.Popup,
+                  {
+                    className: p(
+                      r("popup-panel"),
+                      r(`popup-panel-size-${v}`),
+                      T,
+                      e == null ? void 0 : e.popup
                     ),
-                    /* @__PURE__ */ o(
-                      "div",
-                      {
-                        className: r(
-                          t("popup-panel-resize-handle"),
-                          e == null ? void 0 : e.resizeHandle
-                        ),
-                        "data-placement": "top-right",
-                        ...z({
-                          lockVertical: !0
-                        })
-                      }
-                    )
-                  ] })
-                ]
+                    children: [
+                      h && J(),
+                      /* @__PURE__ */ t(
+                        "div",
+                        {
+                          className: p(
+                            r("popup-panel-content"),
+                            e == null ? void 0 : e.content
+                          ),
+                          children: /* @__PURE__ */ t("div", { className: r("popup-panel-content-inner"), children: M })
+                        }
+                      ),
+                      l && /* @__PURE__ */ t(
+                        "div",
+                        {
+                          className: p(
+                            r("popup-panel-footer"),
+                            e == null ? void 0 : e.footer
+                          ),
+                          children: typeof l == "function" ? l({ close: () => x(!1) }) : l
+                        }
+                      )
+                    ]
+                  }
+                )
               }
             )
           }
@@ -212,6 +190,6 @@ const we = ({
   );
 };
 export {
-  we as PopupPanel
+  ve as PopupPanel
 };
 //# sourceMappingURL=component.js.map

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 { useCls, clsx, parseAntdPlacement } 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 Flex from \"antd/es/flex\";\nimport { IconButton } from \"../icon-button\";\nimport { X } from \"@bioturing/assets\";\nimport { PopupPanelSize } from \"./constants\";\nimport { useControlledState } from \"../hooks\";\nimport { useResizable, type MoveValues } from \"react-use-resizable\";\nimport mergeRefs from \"merge-refs\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface PopupPanelProps\n  extends Omit<\n    React.ComponentPropsWithRef<\"div\">,\n    \"title\" | \"content\" | \"children\"\n  > {\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   * 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\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,\n  resizable = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\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 ?? false // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  // We don't need triggerRef since we're using callbackRef for the popup\n  const [popupRef, setPopupRef] = useState<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState<number>();\n  const [height, setHeight] = useState<number>();\n  const callbackRef = useCallback((node: HTMLDivElement) => {\n    setPopupRef(node);\n  }, []);\n  useEffect(() => {\n    if (!popupRef) return;\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setWidth(entry.contentRect.width);\n        setHeight(entry.contentRect.height);\n      }\n    });\n    observer.observe(popupRef);\n    return () => {\n      observer.disconnect();\n    };\n  }, [popupRef]);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Flex\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        </Flex>\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  const [resizing, setResizing] = useState(false);\n  const { getRootProps, getHandleProps, rootRef } = useResizable({\n    initialWidth: width,\n    initialHeight: height,\n    onDragStart: () => setResizing(true),\n    onDragEnd: () => setResizing(false),\n  });\n  useEffect(() => {\n    if (resizing) {\n      document.body.style.userSelect = \"none\";\n    } else {\n      document.body.style.userSelect = \"\";\n    }\n  }, [resizing]);\n  const { ref: rootRefProp, ...rootPropsWithoutRef } = getRootProps();\n  // Handle reverse handle change for vertical resizing\n  // Currently not used but kept for future implementation\n  // const _onReverseHandleChangeVertical = (\n  //   parent: React.RefObject<HTMLDivElement>,\n  //   values: MoveValues\n  // ) => {\n  //   if (!parent.current) return;\n  //   const { heightDiff } = values;\n  //   parent.current.style.top = `${\n  //     parseInt(parent.current.style.top || \"0\") - heightDiff\n  //   }px`;\n  // };\n\n  // Handle reverse handle change\n  const onReverseHandleChangeHorizontal = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current) return;\n    const { widthDiff } = values;\n    parent.current.style.left = `${\n      parseInt(parent.current.style.left || \"0\") - widthDiff\n    }px`;\n  };\n\n  return (\n    <Popover.Root\n      openOnHover={trigger === \"hover\" ? true : openOnHover}\n      open={open}\n      onOpenChange={(open, event, reason) => {\n        if (\n          (reason === \"outside-press\" || reason === \"focus-out\") &&\n          !closeOnClickOutside\n        )\n          return;\n        setOpen(open, event, reason);\n      }}\n      modal={modal}\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          className={clsx(cls(\"popup-panel-root\"), classNames?.root)}\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          anchor={anchor}\n          style={\n            {\n              \"--size-width\": size ? PopupPanelSize[size] : undefined,\n            } as React.CSSProperties\n          }\n        >\n          <Popover.Popup\n            className={clsx(\n              cls(\"popup-panel\"),\n              cls(`popup-panel-size-${size}`),\n              className,\n              classNames?.popup\n            )}\n            ref={mergeRefs(rootRefProp, callbackRef)}\n            // resizable props\n            {...(resizable ? rootPropsWithoutRef : {})}\n            {...(resizing ? { \"data-resizing\": true } : {})}\n          >\n            {/* <div ref={popupRef}> */}\n            {title && renderTitle()}\n            <div\n              className={clsx(cls(\"popup-panel-content\"), classNames?.content)}\n            >\n              <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n            </div>\n            {footer && (\n              <div\n                className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}\n              >\n                {typeof footer === \"function\"\n                  ? footer({ close: () => setOpen(false) })\n                  : footer}\n              </div>\n            )}\n            {resizable && (\n              <>\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"bottom-left\"\n                  {...getHandleProps({\n                    lockHorizontal: true,\n                  })}\n                />\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"top-left\"\n                  {...getHandleProps({\n                    reverse: true,\n                    lockVertical: true,\n                    onResize: (values) =>\n                      onReverseHandleChangeHorizontal(rootRef, values),\n                  })}\n                />\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"top-right\"\n                  {...getHandleProps({\n                    lockVertical: true,\n                  })}\n                />\n              </>\n            )}\n          </Popover.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","classNames","modal","closeOnClickOutside","open","setOpen","useControlledState","cls","useCls","headlessUIPlacement","parseAntdPlacement","popupRef","setPopupRef","useState","width","setWidth","height","setHeight","callbackRef","useCallback","node","useEffect","observer","entries","entry","defaultCloseIcon","useMemo","jsx","X","renderTitle","jsxs","clsx","Flex","Popover","IconButton","resizing","setResizing","getRootProps","getHandleProps","rootRef","useResizable","rootRefProp","rootPropsWithoutRef","onReverseHandleChangeHorizontal","parent","values","widthDiff","event","reason","PopupPanelSize","mergeRefs","Fragment"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport { useCls, clsx, parseAntdPlacement, buildAntdPlacement, BaseUIPlacement, BaseUISide, BaseUIAlign } 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 } from \"../hooks\";\nimport { Resizable } from \"../resizable\";\nimport { Stack } from \"../stack\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { useRef } from \"react\";\n\nexport interface PopupPanelProps\n  extends Omit<\n    React.ComponentPropsWithRef<\"div\">,\n    \"title\" | \"content\" | \"children\"\n  > {\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   * 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,\n  resizable = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n  onPlacementChange,\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 ?? false // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\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  return (\n    <Popover.Root\n      openOnHover={trigger === \"hover\" ? true : openOnHover}\n      open={open}\n      onOpenChange={(open, event, reason) => {\n        if (\n          (reason === \"outside-press\" || reason === \"focus-out\") &&\n          !closeOnClickOutside\n        )\n          return;\n        setOpen(open, event, reason);\n      }}\n      modal={modal}\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(cls(\"popup-panel-root\"), classNames?.root)}\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={resizable}\n            absolutePositioning={true}\n            resetKey={placementChangeKey}\n            classNames={{\n              resizeHandle: classNames?.resizeHandle,\n            }}\n          >\n            <Popover.Popup\n              className={clsx(\n                cls(\"popup-panel\"),\n                cls(`popup-panel-size-${size}`),\n                className,\n                classNames?.popup\n              )}\n            >\n              {title && renderTitle()}\n              <div\n                className={clsx(\n                  cls(\"popup-panel-content\"),\n                  classNames?.content\n                )}\n              >\n                <div className={cls(\"popup-panel-content-inner\")}>\n                  {content}\n                </div>\n              </div>\n              {footer && (\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-footer\"),\n                    classNames?.footer\n                  )}\n                >\n                  {typeof footer === \"function\"\n                    ? footer({ close: () => setOpen(false) })\n                    : footer}\n                </div>\n              )}\n            </Popover.Popup>\n          </Resizable>\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","classNames","modal","closeOnClickOutside","onPlacementChange","open","setOpen","useControlledState","cls","useCls","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","event","reason","PopupPanelSize","Resizable"],"mappings":";;;;;;;;;;;;;;AA0GO,MAAMA,KAAa,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,MAAMC;AAAA,EACN,cAAcC;AAAA,EACd,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,qBAAAC,IAAsB;AAAA,EACtB,mBAAAC;AACF,MAAuB;AAEf,QAAA,CAACC,GAAMC,CAAO,IAAIC;AAAA,IACtBpB;AAAA,IACAC;AAAA,IACAW,KAAe;AAAA;AAAA,EACjB,GAEMS,IAAMC,GAAO,GACbC,IAAkBC,EAAmB1B,CAAS,GAE9C2B,IAAmBC,EAAQ,MAAM,gBAAAC,EAACC,KAAE,MAAM,IAAI,GAAI,EAAE,GAEpDC,IAAgBC,EAAuB,IAAI,GAC3CC,IAAiBD,EAAmBP,EAAgB,IAAI,GACxDS,IAAkBF,EAAoBP,EAAgB,KAAK,GAC3D,CAACU,GAAoBC,CAAqB,IAAIC,EAAS,CAAC;AAE9D,EAAAC,EAAU,MAAM;AACd,UAAMC,IAAaR,EAAc;AAC7B,QAAA,CAACQ,KAAc,CAACnB,EAAM;AAG1B,UAAMoB,IAAW,IAAI,iBAAiB,CAACC,MAAc;AACnD,UAAIC,IAAsB;AA0B1B,UAxBUD,EAAA,QAAQ,CAACE,MAAa;AAC9B,YACEA,EAAS,SAAS,gBAClBA,EAAS,kBAAkB,aAC3B;AACA,gBAAMC,IAAUL,EAAW,aAAaI,EAAS,aAAa;AAC1D,UAAAC,KAAWA,MAAYX,EAAe,YACxCA,EAAe,UAAUW,GACHF,IAAA;AAAA,QACxB;AAEF,YACEC,EAAS,SAAS,gBAClBA,EAAS,kBAAkB,cAC3B;AACA,gBAAME,IAAWN,EAAW,aAAaI,EAAS,aAAa;AAC3D,UAAAE,KAAYA,MAAaX,EAAgB,YAC3CA,EAAgB,UAAUW,GACJH,IAAA;AAAA,QACxB;AAAA,MACF,CACD,GAGGA,GAAqB;AACvB,cAAMI,IAAeC,EAAmB;AAAA,UACtC,MAAMd,EAAe;AAAA,UACrB,OAAOC,EAAgB;AAAA,QAAA,CACxB;AAGqB,QAAAE,EAAA,CAAAY,MAAQA,IAAO,CAAC,GAElC7B,KACFA,EAAkB2B,CAAY;AAAA,MAChC;AAAA,IACF,CACD;AAGD,WAAAN,EAAS,QAAQD,GAAY;AAAA,MAC3B,YAAY;AAAA,MACZ,iBAAiB,CAAC,aAAa,YAAY;AAAA,MAC3C,mBAAmB;AAAA,IAAA,CACpB,GAEM,MAAM;AACX,MAAAC,EAAS,WAAW;AAAA,IACtB;AAAA,EAAA,GACC,CAACrB,GAAmBC,CAAI,CAAC;AAEtB,QAAA6B,IAAcC,EAAY,MAE5B,gBAAAC,EAAC,SAAI,WAAWC,EAAK7B,EAAI,oBAAoB,GAAGP,KAAA,gBAAAA,EAAY,MAAM,GAChE,UAAA;AAAA,IAAA,gBAAAmC;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,KAAK;AAAA,QACL,WAAW9B,EAAI,2BAA2B;AAAA,QAE1C,UAAA;AAAA,UAAA,gBAAAM;AAAA,YAACyB,EAAQ;AAAA,YAAR;AAAA,cACC,QACE,gBAAAzB,EAAC,OAAI,EAAA,WAAWuB,EAAK7B,EAAI,QAAQ,UAAU,GAAGP,KAAA,gBAAAA,EAAY,KAAK,GAC5D,UACHX,EAAA,CAAA;AAAA,YAAA;AAAA,UAEH;AAAA,UACD,gBAAA8C,EAAC,OAAI,EAAA,WAAU,2BACZ,UAAA;AAAA,YAAA1C;AAAA,YACD,gBAAAoB;AAAA,cAACyB,EAAQ;AAAA,cAAR;AAAA,gBACC,QAAS,gBAAAzB,EAAA0B,IAAA,EAAY,UAAiB5B,EAAA,CAAA;AAAA,cAAA;AAAA,YACxC;AAAA,YACCjB;AAAA,UAAA,EACH,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACCC,KAA0B;AAAA,EAAA,GAC7B,GAED;AAAA,IACDD;AAAA,IACAC;AAAA,IACAF;AAAA,IACAc;AAAA,IACAP,KAAA,gBAAAA,EAAY;AAAA,IACZA,KAAA,gBAAAA,EAAY;AAAA,IACZW;AAAA,IACAtB;AAAA,EAAA,CACD;AAGC,SAAA,gBAAA8C;AAAA,IAACG,EAAQ;AAAA,IAAR;AAAA,MACC,aAAahD,MAAY,UAAU,KAAOL;AAAA,MAC1C,MAAAmB;AAAA,MACA,cAAc,CAACA,GAAMoC,GAAOC,MAAW;AACrC,SACGA,MAAW,mBAAmBA,MAAW,gBAC1C,CAACvC,KAGKE,EAAAA,GAAMoC,GAAOC,CAAM;AAAA,MAC7B;AAAA,MACA,OAAAxC;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACyB,EAAQ;AAAA,UAAR;AAAA,YACC,QAAQvD;AAAA,YACR,WAAWqD,EAAK7B,EAAI,qBAAqB,GAAGP,KAAA,gBAAAA,EAAY,OAAO;AAAA,UAAA;AAAA,QAChE;AAAA,QACD,gBAAAa,EAACyB,EAAQ,QAAR,EACC,UAAA,gBAAAzB;AAAA,UAACyB,EAAQ;AAAA,UAAR;AAAA,YACC,KAAKvB;AAAA,YACL,WAAWqB,EAAK7B,EAAI,kBAAkB,GAAGP,KAAA,gBAAAA,EAAY,IAAI;AAAA,YACzD,MAAMS,EAAgB;AAAA,YACtB,OAAOA,EAAgB;AAAA,YACvB,YAAY;AAAA,YACZ,QAAAjB;AAAA,YACA,OACE;AAAA,cACE,gBAAgBI,IAAO8C,EAAe9C,CAAI,IAAI;AAAA,YAChD;AAAA,YAGF,UAAA,gBAAAiB;AAAA,cAAC8B;AAAA,cAAA;AAAA,gBACC,WAAA5C;AAAA,gBACA,qBAAqB;AAAA,gBACrB,UAAUoB;AAAA,gBACV,YAAY;AAAA,kBACV,cAAcnB,KAAA,gBAAAA,EAAY;AAAA,gBAC5B;AAAA,gBAEA,UAAA,gBAAAmC;AAAA,kBAACG,EAAQ;AAAA,kBAAR;AAAA,oBACC,WAAWF;AAAA,sBACT7B,EAAI,aAAa;AAAA,sBACjBA,EAAI,oBAAoBX,CAAI,EAAE;AAAA,sBAC9BL;AAAA,sBACAS,KAAA,gBAAAA,EAAY;AAAA,oBACd;AAAA,oBAEC,UAAA;AAAA,sBAAAX,KAAS4C,EAAY;AAAA,sBACtB,gBAAApB;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,WAAWuB;AAAA,4BACT7B,EAAI,qBAAqB;AAAA,4BACzBP,KAAA,gBAAAA,EAAY;AAAA,0BACd;AAAA,0BAEA,4BAAC,OAAI,EAAA,WAAWO,EAAI,2BAA2B,GAC5C,UACHnB,EAAA,CAAA;AAAA,wBAAA;AAAA,sBACF;AAAA,sBACCS,KACC,gBAAAgB;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,WAAWuB;AAAA,4BACT7B,EAAI,oBAAoB;AAAA,4BACxBP,KAAA,gBAAAA,EAAY;AAAA,0BACd;AAAA,0BAEC,UAAA,OAAOH,KAAW,aACfA,EAAO,EAAE,OAAO,MAAMQ,EAAQ,EAAK,EAAE,CAAC,IACtCR;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACN;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAEJ;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,EAEJ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/popup-panel/style.css

@@ -1 +1 @@
-@layer components{.ds-popup-panel-root{z-index:1030}.ds-popup-panel{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);width:min(var(--size-width),var(--available-width));max-width:var(--available-width);max-height:var(--available-height);height:max-content;display:flex;flex-direction:column}.ds-popup-panel[data-ending-style],.ds-popup-panel[data-starting-style]{transform:scale(.9);opacity:0}.ds-popup-panel:focus{outline:none}.ds-popup-panel-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);flex:0}.ds-popup-panel-title-wrapper{font-weight:500;font-size:var(--ds-font-size);line-height:var(--ds-line-height);color:var(--ds-color-text)}.ds-popup-panel-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);flex:0}.ds-popup-panel-content{display:flex;flex-direction:column;flex:1;overflow:auto}.ds-popup-panel-content .ds-popup-panel-content-inner{flex:1;padding:var(--ds-popup-panel-padding)}.ds-popup-panel-resize-handle{position:absolute;padding:.5rem;color:#fff;display:block}.ds-popup-panel-resize-handle[data-placement=top-left]{left:0;top:0;width:4px;height:100%;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;align-items:center}.ds-popup-panel-resize-handle[data-placement=top-right]{right:0;top:0;width:4px;height:100%;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;align-items:center}.ds-popup-panel-resize-handle[data-placement=bottom-left]{bottom:0;width:100%;height:4px;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;justify-content:center}}
+@layer components{.ds-popup-panel-root{z-index:1030}.ds-popup-panel{box-shadow:var(--ds-box-shadow-secondary);border-radius:var(--ds-border-radius);background:var(--ds-color-bg-elevated);list-style:none;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);transition-property:transform,scale,opacity;transition-duration:.2s;transition-timing-function:var(--ds-motion-ease-out);transform-origin:var(--transform-origin);width:min(var(--size-width),var(--available-width));max-width:var(--available-width);max-height:var(--available-height);height:max-content;display:flex;flex-direction:column}.ds-popup-panel[data-ending-style],.ds-popup-panel[data-starting-style]{transform:scale(.9);opacity:0}.ds-popup-panel:focus{outline:none}.ds-popup-panel-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);flex:0}.ds-popup-panel-title-wrapper{font-weight:500;font-size:var(--ds-font-size);line-height:var(--ds-line-height);color:var(--ds-color-text)}.ds-popup-panel-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-popup-panel-padding) / 2) var(--ds-popup-panel-padding);flex:0}.ds-popup-panel-content{display:flex;flex-direction:column;flex:1;overflow:auto}.ds-popup-panel-content .ds-popup-panel-content-inner{flex:1;padding:var(--ds-popup-panel-padding)}}

package/dist/components/resizable/component.js

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