@bioturing/components 0.37.0 → 0.38.0

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

@@ -1,182 +1,189 @@
 "use client";
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { Popover as i } from "@base-ui-components/react/popover";
-import { useMemo as Y, useRef as N, useState as Z, useEffect as _, useCallback as B } from "react";
-import { X as D } from "@bioturing/assets";
-import { PopupPanelSize as ee } from "./constants.js";
-import { Stack as re } from "../stack/index.js";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { Popover as a } from "@base-ui-components/react/popover";
+import { X as Y } from "@bioturing/assets";
+import { useMemo as Z, useRef as S, useState as A, useEffect as _, useCallback as B } from "react";
+import { Stack as ee } from "../stack/index.js";
+import { PopupPanelSize as re } from "./constants.js";
 import './style.css';/* empty css          */
-import { parseAntdPlacement as te, buildAntdPlacement as ne } from "../utils/placement.js";
-import { useDraggable as oe } from "../hooks/useDraggable.js";
-import { Resizable as ie } from "../resizable/component.js";
+import { anchorToResizeHandles as te } from "./utils.js";
+import { parseAntdPlacement as ne, buildAntdPlacement as oe } from "../utils/placement.js";
+import { useDraggable as ie } from "../hooks/useDraggable.js";
+import { Resizable as ae } from "../resizable/component.js";
 import { useControlledState as pe } from "../hooks/useControlledState.js";
-import { useCls as ae } from "../utils/antdUtils.js";
+import { useCls as le } from "../utils/antdUtils.js";
 import { useTheme as se } from "../theme-provider/context/themeStore.js";
 import { clsx as p } from "../utils/cn.js";
-import { IconButton as le } from "../icon-button/component.js";
-const Re = ({
+import { IconButton as ce } from "../icon-button/component.js";
+const Ae = ({
   children: x,
   placement: z,
-  openOnHover: k = !1,
-  open: H,
-  onOpenChange: I,
-  content: K,
-  title: d,
-  trigger: j = "click",
-  className: E,
-  anchor: M,
-  beforeCloseButton: w,
-  afterCloseButton: y,
-  afterTitle: f,
-  size: m = "medium",
-  footer: c,
-  defaultOpen: T = !1,
-  resizable: C = !1,
-  draggable: F = !1,
-  maintainAspectRatio: U = !1,
-  classNames: t,
-  modal: V = !1,
-  closeOnClickOutside: X = !0,
-  onPlacementChange: g,
-  ...$
+  openOnHover: H = !1,
+  open: k,
+  onOpenChange: E,
+  content: I,
+  title: h,
+  trigger: K = "click",
+  className: T,
+  anchor: j,
+  beforeCloseButton: N,
+  afterCloseButton: w,
+  afterTitle: b,
+  size: P = "medium",
+  footer: u,
+  defaultOpen: M = !1,
+  resizable: y = !1,
+  draggable: D = !1,
+  maintainAspectRatio: F = !1,
+  classNames: n,
+  modal: U = !1,
+  closeOnClickOutside: V = !0,
+  onPlacementChange: v,
+  ...X
 }) => {
-  const [h, O] = pe(
-    H,
-    I,
-    T
+  const [R, C] = pe(
+    k,
+    E,
+    M
     // Always provide a default value to prevent undefined
-  ), r = ae(), { className: q } = se(), u = te(z), R = Y(() => /* @__PURE__ */ e(D, { size: 16 }), []), A = N(null), b = N(u.side), P = N(u.align), [G, J] = Z(0);
+  ), r = le(), { className: $ } = se(), d = ne(z), O = Z(() => /* @__PURE__ */ e(Y, { size: 16 }), []), f = S(d.side), m = S(d.align), [q, G] = A(0), [s, J] = A(
+    null
+  );
   _(() => {
-    const a = A.current;
-    if (!a || !h) return;
-    const s = new MutationObserver((W) => {
-      let v = !1;
-      if (W.forEach((o) => {
-        if (o.type === "attributes" && o.attributeName === "data-side") {
-          const n = a.getAttribute(o.attributeName);
-          n && n !== b.current && (b.current = n, v = !0);
+    if (!s || !R) return;
+    const i = new MutationObserver((l) => {
+      let g = !1;
+      if (l.forEach((t) => {
+        if (t.type === "attributes" && t.attributeName === "data-side") {
+          const o = s.getAttribute(t.attributeName);
+          o && o !== f.current && (f.current = o, g = !0);
         }
-        if (o.type === "attributes" && o.attributeName === "data-align") {
-          const n = a.getAttribute(o.attributeName);
-          n && n !== P.current && (P.current = n, v = !0);
+        if (t.type === "attributes" && t.attributeName === "data-align") {
+          const o = s.getAttribute(t.attributeName);
+          o && o !== m.current && (m.current = o, g = !0);
         }
-      }), v) {
-        const o = ne({
-          side: b.current,
-          align: P.current
+      }), g) {
+        const t = oe({
+          side: f.current,
+          align: m.current
         });
-        J((n) => n + 1), g && g(o);
+        G((o) => o + 1), v && v(t);
       }
     });
-    return s.observe(a, {
+    return i.observe(s, {
       attributes: !0,
       attributeFilter: ["data-side", "data-align"],
       attributeOldValue: !0
     }), () => {
-      s.disconnect();
+      i.disconnect();
     };
-  }, [g, h]);
-  const L = B(() => /* @__PURE__ */ l("div", { className: p(r("popup-panel-header"), t?.header), children: [
-    /* @__PURE__ */ l(
-      re,
+  }, [v, R, s]);
+  const L = B(() => /* @__PURE__ */ c("div", { className: p(r("popup-panel-header"), n?.header), children: [
+    /* @__PURE__ */ c(
+      ee,
       {
         align: "center",
         gap: 8,
         className: r("popup-panel-title-wrapper"),
         children: [
           /* @__PURE__ */ e(
-            i.Title,
+            a.Title,
             {
-              render: /* @__PURE__ */ e("div", { className: p(r("grow", "truncate"), t?.title), children: d })
+              render: /* @__PURE__ */ e("div", { className: p(r("grow", "truncate"), n?.title), children: h })
             }
           ),
-          /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
-            w,
+          /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+            N,
             /* @__PURE__ */ e(
-              i.Close,
+              a.Close,
               {
-                render: /* @__PURE__ */ e(le, { children: R })
+                render: /* @__PURE__ */ e(ce, { children: O })
               }
             ),
-            y
+            w
           ] })
         ]
       }
     ),
-    f || null
+    b || null
   ] }), [
-    y,
-    f,
     w,
+    b,
+    N,
     r,
-    t?.header,
-    t?.title,
-    R,
-    d
-  ]), { ref: Q } = oe(F), S = /* @__PURE__ */ l(
-    i.Popup,
+    n?.header,
+    n?.title,
+    O,
+    h
+  ]), { ref: Q } = ie(D), W = /* @__PURE__ */ c(
+    a.Popup,
     {
       className: p(
         r("popup-panel"),
-        r(`popup-panel-size-${m}`),
-        E,
-        t?.popup
+        r(`popup-panel-size-${P}`),
+        T,
+        n?.popup
       ),
       ref: Q,
       children: [
-        d && L(),
-        /* @__PURE__ */ e("div", { className: p(r("popup-panel-content"), t?.content), children: /* @__PURE__ */ e("div", { className: r("popup-panel-content-inner"), children: K }) }),
-        c && /* @__PURE__ */ e("div", { className: p(r("popup-panel-footer"), t?.footer), children: typeof c == "function" ? c({ close: () => O(!1) }) : c })
+        h && L(),
+        /* @__PURE__ */ e("div", { className: p(r("popup-panel-content"), n?.content), children: /* @__PURE__ */ e("div", { className: r("popup-panel-content-inner"), children: I }) }),
+        u && /* @__PURE__ */ e("div", { className: p(r("popup-panel-footer"), n?.footer), children: typeof u == "function" ? u({ close: () => C(!1) }) : u })
       ]
     }
   );
-  return /* @__PURE__ */ l(
-    i.Root,
+  return /* @__PURE__ */ c(
+    a.Root,
     {
-      openOnHover: j === "hover" ? !0 : k,
-      open: h,
-      onOpenChange: (a, s) => {
-        (s.reason === "outside-press" || s.reason === "focus-out") && !X || O(a, s);
+      openOnHover: K === "hover" ? !0 : H,
+      open: R,
+      onOpenChange: (i, l) => {
+        (l.reason === "outside-press" || l.reason === "focus-out") && !V || C(i, l);
       },
-      modal: V,
-      ...$,
+      modal: U,
+      ...X,
       children: [
         /* @__PURE__ */ e(
-          i.Trigger,
+          a.Trigger,
           {
             render: x,
-            className: p(r("popup-panel-trigger"), t?.trigger)
+            className: p(r("popup-panel-trigger"), n?.trigger)
           }
         ),
-        /* @__PURE__ */ e(i.Portal, { children: /* @__PURE__ */ e(
-          i.Positioner,
+        /* @__PURE__ */ e(a.Portal, { children: /* @__PURE__ */ e(
+          a.Positioner,
           {
-            ref: A,
+            ref: J,
             className: p(
               r("popup-panel-root"),
-              q,
-              t?.root
+              $,
+              n?.root
             ),
-            side: u.side,
-            align: u.align,
+            side: d.side,
+            align: d.align,
             sideOffset: 4,
-            anchor: M,
+            anchor: j,
             style: {
-              "--size-width": m ? ee[m] : void 0
+              "--size-width": P ? re[P] : void 0
             },
-            children: C ? /* @__PURE__ */ e(
-              ie,
+            render: ({ children: i, onDragEnd: l, onDragStart: g, ...t }) => y ? /* @__PURE__ */ e(
+              ae,
               {
-                resizable: C,
-                absolutePositioning: !0,
-                resetKey: G,
-                maintainAspectRatio: U,
+                resizable: y,
+                resetKey: q,
+                maintainAspectRatio: F,
                 classNames: {
-                  resizeHandle: t?.resizeHandle
+                  resizeHandle: n?.resizeHandle
                 },
-                children: S
+                handles: te(
+                  f.current,
+                  m.current
+                ),
+                ...t,
+                children: i
               }
-            ) : S
+            ) : /* @__PURE__ */ e("div", { ...t, children: i }),
+            children: W
           }
         ) })
       ]
@@ -184,6 +191,6 @@ const Re = ({
   );
 };
 export {
-  Re as PopupPanel
+  Ae 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 {\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 { 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\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\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  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={setPositionerRef}\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          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          {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","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","eventDetails","PopupPanelSize","onDragEnd","onDragStart","props","Resizable","anchorToResizeHandles"],"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"}