@bioturing/components 0.37.0 → 0.38.0

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

package/dist/components/resizable/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/resizable/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useEffect, useState, isValidElement } from \"react\";\nimport {\n  useResizable,\n  type MoveValues,\n  ResizableProps as UseResizableProps,\n} from \"react-use-resizable\";\nimport mergeRefs from \"merge-refs\";\nimport {\n  useCls,\n  clsx,\n  WithRenderProp,\n  WithRenderPropProps,\n  cn,\n  getReactElementProp,\n} from \"../utils\";\nimport { mergeProps } from \"@base-ui-components/react\";\n\nimport \"./style.css\";\nimport { on } from \"node:stream\";\n\nexport interface ResizableProps\n  extends Omit<WithRenderPropProps, keyof UseResizableProps>,\n    UseResizableProps {\n  /**\n   * Single React element child that will be enhanced with resize handles\n   */\n  children: React.ReactNode;\n  /**\n   * Whether the component should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Configure which resize handles to show\n   * @default { bottom: true, right: true, left: true, top: true }\n   */\n  handles?: {\n    bottom?: boolean;\n    right?: boolean;\n    left?: boolean;\n    top?: boolean;\n  };\n  /**\n   * Whether to use absolute positioning for left handle resizing\n   * Set to true when used in absolutely positioned containers like PopupPanel\n   * @default false\n   */\n  absolutePositioning?: boolean;\n  /**\n   * Custom class names for different parts of the resizable component\n   */\n  classNames?: {\n    root?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Key to reset dimensions to current element size\n   * When this value changes, the component will recalculate its dimensions\n   * Similar to React's key prop pattern for forcing component resets\n   */\n  resetKey?: React.Key;\n  /**\n   * Maximum width the component can be resized to\n   */\n  maxWidth?: number;\n  /**\n   * Maximum height the component can be resized to\n   */\n  maxHeight?: number;\n  /**\n   * Minimum width the component can be resized to\n   */\n  minWidth?: number;\n  /**\n   * Minimum height the component can be resized to\n   */\n  minHeight?: number;\n  /**\n   * Callback fired during resize operations\n   */\n  onResize?: (values: MoveValues) => void;\n  /**\n   * Whether to maintain aspect ratio during resize\n   * @default false\n   */\n  maintainAspectRatio?: boolean;\n}\n\nexport const Resizable = ({\n  children,\n  resizable = false,\n  handles = { bottom: true, right: true, left: true, top: true },\n  absolutePositioning = false,\n  classNames,\n  className: containerClassName,\n  style: containerStyle,\n  resetKey,\n\n  // Use Resizable Props\n  maxHeight,\n  maxWidth,\n  minHeight,\n  minWidth,\n  lockHorizontal,\n  lockVertical,\n  onResize,\n  onDragEnd: onDragEndProp,\n  onDragStart: onDragStartProp,\n  disabled,\n  maintainAspectRatio = false,\n  interval,\n  initialHeight: initialHeightProp,\n  initialWidth: initialWidthProp,\n  // other With Render Props\n  ...rest\n}: ResizableProps) => {\n  // Validate that children is a single React element\n  // if (!isValidElement(children)) {\n  //   throw new Error(\n  //     \"Resizable component expects a single React element as children\"\n  //   );\n  // }\n\n  const cls = useCls();\n  const [panelRef, setPanelRef] = useState<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState<number>();\n  const [height, setHeight] = useState<number>();\n  const [resizing, setResizing] = useState(false);\n\n  const callbackRef = useCallback(\n    (node: HTMLDivElement) => {\n      setPanelRef(node);\n\n      // Get initial dimensions only once when ref is set\n      // For aspect ratio maintenance, we need initial dimensions immediately\n      // Otherwise, preserve natural width/height behavior\n      if (node && !width && !height) {\n        const rect = node.getBoundingClientRect();\n        if (rect.width > 0 && rect.height > 0) {\n          if (maintainAspectRatio) {\n            // Need dimensions for aspect ratio calculation\n            setWidth(rect.width);\n            setHeight(rect.height);\n          }\n          // For non-aspect-ratio cases, don't set dimensions to preserve natural behavior\n        }\n      }\n    },\n    [width, height, maintainAspectRatio],\n  );\n\n  // Reset dimensions when resetKey changes\n  useEffect(() => {\n    if (resetKey !== undefined && panelRef) {\n      // Clear the hook's inline styles to reset to natural size\n      panelRef.style.width = \"\";\n      panelRef.style.height = \"\";\n\n      // Force a reflow to get natural dimensions\n      const rect = panelRef.getBoundingClientRect();\n\n      if (rect.width > 0 && rect.height > 0) {\n        if (maintainAspectRatio) {\n          // For aspect ratio maintenance, re-measure and set dimensions\n          setWidth(rect.width);\n          setHeight(rect.height);\n        } else {\n          // Reset state to allow natural dimensions again\n          setWidth(undefined);\n          setHeight(undefined);\n        }\n\n        // Don't apply any explicit dimensions - let them remain natural\n        // panelRef.style.width = `${rect.width}px`;\n        // panelRef.style.height = `${rect.height}px`;\n      }\n    }\n  }, [resetKey, panelRef, maintainAspectRatio]);\n\n  // Initialize useResizable with current dimensions (or undefined if not ready)\n  // For aspect ratio maintenance, we need initial dimensions\n  // Otherwise, preserve natural width/height behavior until user starts resizing\n  const resizableHook = useResizable({\n    initialWidth: maintainAspectRatio ? width : initialWidthProp,\n    initialHeight: maintainAspectRatio ? height : initialHeightProp,\n    maxHeight,\n    maxWidth,\n    minHeight,\n    minWidth,\n    lockHorizontal,\n    lockVertical,\n    onResize,\n    disabled,\n    maintainAspectRatio,\n    interval,\n    onDragStart: (values) => {\n      setResizing(true);\n      // Capture natural dimensions when user starts resizing\n      if (panelRef) {\n        const rect = panelRef.getBoundingClientRect();\n        if (rect.width > 0 && !width) {\n          setWidth(rect.width);\n        }\n        if (rect.height > 0 && !height) {\n          setHeight(rect.height);\n        }\n      }\n      if (onDragStartProp) onDragStartProp(values);\n    },\n    onDragEnd: (values) => {\n      setResizing(false);\n      if (onDragEndProp) onDragEndProp(values);\n    },\n  });\n\n  const isChildrenValidElement = isValidElement(children);\n\n  useEffect(() => {\n    if (resizing) {\n      document.body.style.userSelect = \"none\";\n    } else {\n      document.body.style.userSelect = \"\";\n    }\n  }, [resizing]);\n\n  // Get resizable props - useResizable hook handles cases where dimensions aren't ready\n  const { ref: rootRefProp, ...rootPropsWithoutRef } =\n    resizableHook.getRootProps();\n  const getHandleProps = resizableHook.getHandleProps;\n  const rootRef = resizableHook.rootRef;\n\n  // Handle reverse handle change for horizontal resizing (only for absolute positioning)\n  const onReverseHandleChangeHorizontal = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues,\n  ) => {\n    if (!parent.current || !absolutePositioning) return;\n    const { widthDiff } = values;\n    parent.current.style.left = `${\n      parseInt(parent.current.style.left || \"0\") - widthDiff\n    }px`;\n  };\n\n  // Handle reverse handle change for vertical resizing (only for absolute positioning)\n  const onReverseHandleChangeVertical = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues,\n  ) => {\n    if (!parent.current || !absolutePositioning) return;\n    const { heightDiff } = values;\n    parent.current.style.top = `${\n      parseInt(parent.current.style.top || \"0\") - heightDiff\n    }px`;\n  };\n\n  const resizeHandles = resizable\n    ? [\n        handles.top && !maintainAspectRatio && (\n          <div\n            key=\"top\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"top-center\"\n            {...getHandleProps({\n              reverse: true,\n              lockHorizontal: true,\n              onResize: (values) =>\n                onReverseHandleChangeVertical(rootRef, values),\n            })}\n          />\n        ),\n        handles.bottom && !maintainAspectRatio && (\n          <div\n            key=\"bottom\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"bottom-left\"\n            {...getHandleProps({\n              lockHorizontal: true,\n            })}\n          />\n        ),\n        handles.left && !maintainAspectRatio && (\n          <div\n            key=\"left\"\n            className={clsx(\n              cls(\"resizable-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        ),\n        handles.right && !maintainAspectRatio && (\n          <div\n            key=\"right\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"top-right\"\n            {...getHandleProps({\n              lockVertical: true,\n            })}\n          />\n        ),\n        // For aspect ratio maintenance, add corner handles that can resize both dimensions\n        handles.right && handles.bottom && (\n          <div\n            key=\"bottom-right-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"bottom-right-corner\"\n            {...getHandleProps({\n              // No locks - allow both horizontal and vertical resizing\n            })}\n          />\n        ),\n        maintainAspectRatio && handles.left && handles.bottom && (\n          <div\n            key=\"bottom-left-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"bottom-left-corner\"\n            {...getHandleProps({\n              reverse: true,\n              onResize: (values) =>\n                onReverseHandleChangeHorizontal(rootRef, values),\n            })}\n          />\n        ),\n        maintainAspectRatio && handles.right && handles.top && (\n          <div\n            key=\"top-right-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"top-right-corner\"\n            {...getHandleProps({\n              reverse: true,\n              onResize: (values) =>\n                onReverseHandleChangeVertical(rootRef, values),\n            })}\n          />\n        ),\n        handles.left && handles.top && (\n          <div\n            key=\"top-left-corner\"\n            className={clsx(\n              cls(\"resizable-resize-handle\"),\n              classNames?.resizeHandle,\n            )}\n            data-placement=\"top-left-corner\"\n            {...getHandleProps({\n              reverse: true,\n              onResize: (values) => {\n                onReverseHandleChangeHorizontal(rootRef, values);\n                onReverseHandleChangeVertical(rootRef, values);\n              },\n            })}\n          />\n        ),\n      ]\n    : [];\n\n  const childElement = children as React.ReactElement & {\n    ref?: React.Ref<HTMLDivElement>;\n  };\n\n  const childElementProps = {\n    className: getReactElementProp<string>(childElement, \"className\"),\n    style: getReactElementProp<React.CSSProperties>(childElement, \"style\"),\n    children: getReactElementProp<React.ReactNode>(childElement, \"children\"),\n    ref: childElement.ref,\n  };\n\n  const childProps = {\n    className: cn(\n      resizable && cls(\"resizable\"),\n      classNames?.root,\n      childElementProps.className,\n      containerClassName,\n    ),\n    ref: mergeRefs(\n      resizable ? rootRefProp : undefined,\n      callbackRef, // Always need this for dimension measurement\n      childElement?.ref,\n    ),\n    style: { ...childElementProps.style, ...containerStyle },\n    ...(resizing ? { \"data-resizing\": true } : {}),\n    ...(resizable ? { \"data-resizable\": true } : {}),\n    children: isChildrenValidElement\n      ? [\n          ...(Array.isArray(childElementProps.children)\n            ? childElementProps.children\n            : [childElementProps.children]),\n          ...resizeHandles.filter(Boolean),\n        ]\n      : children,\n  };\n\n  return (\n    <WithRenderProp\n      render={(props) => {\n        // Merge the props from WithRenderProp with our childProps\n        const mergedProps = mergeProps(\n          props,\n          childProps,\n          resizable ? rootPropsWithoutRef : {},\n        );\n        if (isChildrenValidElement) {\n          return React.cloneElement(childElement, mergedProps);\n        } else {\n          return <div {...mergedProps}>{children}</div>;\n        }\n      }}\n      {...rest}\n    />\n  );\n};\n"],"names":["Resizable","children","resizable","handles","absolutePositioning","classNames","containerClassName","containerStyle","resetKey","maxHeight","maxWidth","minHeight","minWidth","lockHorizontal","lockVertical","onResize","onDragEndProp","onDragStartProp","disabled","maintainAspectRatio","interval","initialHeightProp","initialWidthProp","rest","cls","useCls","panelRef","setPanelRef","useState","width","setWidth","height","setHeight","resizing","setResizing","callbackRef","useCallback","node","rect","useEffect","resizableHook","useResizable","values","isChildrenValidElement","isValidElement","rootRefProp","rootPropsWithoutRef","getHandleProps","rootRef","onReverseHandleChangeHorizontal","parent","widthDiff","onReverseHandleChangeVertical","heightDiff","resizeHandles","jsx","clsx","childElement","childElementProps","getReactElementProp","childProps","cn","mergeRefs","WithRenderProp","props","mergedProps","mergeProps","React"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/resizable/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  useCallback,\n  useEffect,\n  useState,\n  isValidElement,\n  forwardRef,\n} from \"react\";\nimport {\n  useResizable,\n  type MoveValues,\n  ResizableProps as UseResizableProps,\n} from \"../hooks/useResizable\";\nimport mergeRefs from \"merge-refs\";\nimport {\n  useCls,\n  clsx,\n  WithRenderProp,\n  WithRenderPropProps,\n  cn,\n  getReactElementProp,\n} from \"../utils\";\nimport { mergeProps } from \"@base-ui-components/react\";\n\nimport \"./style.css\";\n// import { on } from \"node:stream\";\n\nexport interface ResizableProps\n  extends Omit<WithRenderPropProps, keyof UseResizableProps>,\n    UseResizableProps {\n  /**\n   * Single React element child that will be enhanced with resize handles\n   */\n  children: React.ReactNode;\n  /**\n   * Whether the component should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Configure which resize handles to show\n   * @default { bottom: true, right: true, left: true, top: true }\n   */\n  handles?: {\n    bottom?: boolean;\n    right?: boolean;\n    left?: boolean;\n    top?: boolean;\n  };\n  // /**\n  //  * Whether to use absolute positioning for left handle resizing\n  //  * Set to true when used in absolutely positioned containers like PopupPanel\n  //  * @default false\n  //  */\n  // absolutePositioning?: boolean;\n  /**\n   * Custom class names for different parts of the resizable component\n   */\n  classNames?: {\n    root?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Key to reset dimensions to current element size\n   * When this value changes, the component will recalculate its dimensions\n   * Similar to React's key prop pattern for forcing component resets\n   */\n  resetKey?: React.Key;\n  /**\n   * Maximum width the component can be resized to\n   */\n  maxWidth?: number;\n  /**\n   * Maximum height the component can be resized to\n   */\n  maxHeight?: number;\n  /**\n   * Minimum width the component can be resized to\n   */\n  minWidth?: number;\n  /**\n   * Minimum height the component can be resized to\n   */\n  minHeight?: number;\n  /**\n   * Callback fired during resize operations\n   */\n  onResize?: (values: MoveValues) => void;\n  /**\n   * Whether to maintain aspect ratio during resize\n   * @default false\n   */\n  maintainAspectRatio?: boolean;\n}\n\nexport const Resizable = forwardRef<HTMLDivElement, ResizableProps>(\n  (\n    {\n      children,\n      resizable = false,\n      handles = { bottom: true, right: true, left: true, top: true },\n      classNames,\n      className: containerClassName,\n      style: containerStyle,\n      resetKey,\n\n      // Use Resizable Props\n      maxHeight,\n      maxWidth,\n      minHeight,\n      minWidth,\n      lockHorizontal,\n      lockVertical,\n      onResize,\n      onDragEnd: onDragEndProp,\n      onDragStart: onDragStartProp,\n      disabled,\n      maintainAspectRatio = false,\n      interval,\n      initialHeight: initialHeightProp,\n      initialWidth: initialWidthProp,\n      // other With Render Props\n      ...rest\n    },\n    ref\n  ) => {\n    // Validate that children is a single React element\n    // if (!isValidElement(children)) {\n    //   throw new Error(\n    //     \"Resizable component expects a single React element as children\"\n    //   );\n    // }\n\n    const cls = useCls();\n    const [panelRef, setPanelRef] = useState<HTMLDivElement | null>(null);\n    const [width, setWidth] = useState<number>();\n    const [height, setHeight] = useState<number>();\n    const [resizing, setResizing] = useState(false);\n\n    const callbackRef = useCallback(\n      (node: HTMLDivElement) => {\n        setPanelRef(node);\n\n        // Get initial dimensions only once when ref is set\n        // For aspect ratio maintenance, we need initial dimensions immediately\n        // Otherwise, preserve natural width/height behavior\n        if (node && !width && !height) {\n          const rect = node.getBoundingClientRect();\n          if (rect.width > 0 && rect.height > 0) {\n            if (maintainAspectRatio) {\n              // Need dimensions for aspect ratio calculation\n              setWidth(rect.width);\n              setHeight(rect.height);\n            }\n            // For non-aspect-ratio cases, don't set dimensions to preserve natural behavior\n          }\n        }\n      },\n      [width, height, maintainAspectRatio]\n    );\n\n    // Reset dimensions when resetKey changes\n    useEffect(() => {\n      if (resetKey !== undefined && panelRef) {\n        // Clear the hook's inline styles to reset to natural size\n        panelRef.style.width = \"\";\n        panelRef.style.height = \"\";\n\n        // Force a reflow to get natural dimensions\n        const rect = panelRef.getBoundingClientRect();\n\n        if (rect.width > 0 && rect.height > 0) {\n          if (maintainAspectRatio) {\n            // For aspect ratio maintenance, re-measure and set dimensions\n            setWidth(rect.width);\n            setHeight(rect.height);\n          } else {\n            // Reset state to allow natural dimensions again\n            setWidth(undefined);\n            setHeight(undefined);\n          }\n\n          // Don't apply any explicit dimensions - let them remain natural\n          // panelRef.style.width = `${rect.width}px`;\n          // panelRef.style.height = `${rect.height}px`;\n        }\n      }\n    }, [resetKey, panelRef, maintainAspectRatio]);\n\n    // Initialize useResizable with current dimensions (or undefined if not ready)\n    // For aspect ratio maintenance, we need initial dimensions\n    // Otherwise, preserve natural width/height behavior until user starts resizing\n    const resizableHook = useResizable({\n      initialWidth: maintainAspectRatio ? width : initialWidthProp,\n      initialHeight: maintainAspectRatio ? height : initialHeightProp,\n      maxHeight,\n      maxWidth,\n      minHeight,\n      minWidth,\n      lockHorizontal,\n      lockVertical,\n      onResize,\n      disabled,\n      maintainAspectRatio,\n      interval,\n      onDragStart: (values) => {\n        setResizing(true);\n        // Capture natural dimensions when user starts resizing\n        if (panelRef) {\n          const rect = panelRef.getBoundingClientRect();\n          if (rect.width > 0 && !width) {\n            setWidth(rect.width);\n          }\n          if (rect.height > 0 && !height) {\n            setHeight(rect.height);\n          }\n        }\n        if (onDragStartProp) onDragStartProp(values);\n      },\n      onDragEnd: (values) => {\n        setResizing(false);\n        if (onDragEndProp) onDragEndProp(values);\n      },\n    });\n\n    const isChildrenValidElement = isValidElement(children);\n\n    useEffect(() => {\n      if (resizing) {\n        document.body.style.userSelect = \"none\";\n      } else {\n        document.body.style.userSelect = \"\";\n      }\n    }, [resizing]);\n\n    // Get resizable props - useResizable hook handles cases where dimensions aren't ready\n    const { ref: rootRefProp, ...rootPropsWithoutRef } =\n      resizableHook.getRootProps();\n    const getHandleProps = resizableHook.getHandleProps;\n\n    // // Handle reverse handle change for horizontal resizing (only for absolute positioning)\n    // const onReverseHandleChangeHorizontal = (\n    //   parent: React.RefObject<HTMLDivElement>,\n    //   values: MoveValues\n    // ) => {\n    //   if (!parent.current || !absolutePositioning) return;\n    //   const { widthDiff } = values;\n    //   parent.current.style.left = `${\n    //     parseInt(parent.current.style.left || \"0\") - widthDiff\n    //   }px`;\n    // };\n\n    // // Handle reverse handle change for vertical resizing (only for absolute positioning)\n    // const onReverseHandleChangeVertical = (\n    //   parent: React.RefObject<HTMLDivElement>,\n    //   values: MoveValues\n    // ) => {\n    //   if (!parent.current || !absolutePositioning) return;\n    //   const { heightDiff } = values;\n    //   console.log({\n    //     parentStyleTop: parent.current.style.top,\n    //     computedStyleTop: window.getComputedStyle(parent.current).top,\n    //   });\n    //   parent.current.style.top = `${\n    //     parseInt(parent.current.style.top || \"0\") - heightDiff\n    //   }px`;\n    // };\n\n    const resizeHandles = resizable\n      ? [\n          handles.top && !maintainAspectRatio && (\n            <div\n              key=\"top\"\n              className={clsx(\n                cls(\"resizable-resize-handle\"),\n                classNames?.resizeHandle\n              )}\n              data-placement=\"top-center\"\n              {...getHandleProps({\n                reverse: true,\n                lockHorizontal: true,\n                // onResize: (values) =>\n                //   onReverseHandleChangeVertical(rootRef, values),\n              })}\n            />\n          ),\n          handles.bottom && !maintainAspectRatio && (\n            <div\n              key=\"bottom\"\n              className={clsx(\n                cls(\"resizable-resize-handle\"),\n                classNames?.resizeHandle\n              )}\n              data-placement=\"bottom-left\"\n              {...getHandleProps({\n                lockHorizontal: true,\n              })}\n            />\n          ),\n          handles.left && !maintainAspectRatio && (\n            <div\n              key=\"left\"\n              className={clsx(\n                cls(\"resizable-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          ),\n          handles.right && !maintainAspectRatio && (\n            <div\n              key=\"right\"\n              className={clsx(\n                cls(\"resizable-resize-handle\"),\n                classNames?.resizeHandle\n              )}\n              data-placement=\"top-right\"\n              {...getHandleProps({\n                lockVertical: true,\n              })}\n            />\n          ),\n          handles.right && handles.bottom && (\n            <div\n              key=\"bottom-right-corner\"\n              className={clsx(\n                cls(\"resizable-resize-handle\"),\n                classNames?.resizeHandle\n              )}\n              data-placement=\"bottom-right-corner\"\n              {...getHandleProps({\n                // No locks - allow both horizontal and vertical resizing\n                corner: \"bottom-right\",\n              })}\n            />\n          ),\n          handles.left && handles.top && (\n            <div\n              key=\"top-left-corner\"\n              className={clsx(\n                cls(\"resizable-resize-handle\"),\n                classNames?.resizeHandle\n              )}\n              data-placement=\"top-left-corner\"\n              {...getHandleProps({\n                corner: \"top-left\",\n                // onResize: (values) => {\n                //   onReverseHandleChangeHorizontal(rootRef, values);\n                //   onReverseHandleChangeVertical(rootRef, values);\n                // },\n              })}\n            />\n          ),\n          handles.right && handles.top && (\n            <div\n              key=\"top-right-corner\"\n              className={clsx(\n                cls(\"resizable-resize-handle\"),\n                classNames?.resizeHandle\n              )}\n              data-placement=\"top-right-corner\"\n              {...getHandleProps({\n                corner: \"top-right\",\n                // onResize: (values) => {\n                //   onReverseHandleChangeVertical(rootRef, values);\n                // },\n              })}\n            />\n          ),\n          handles.left && handles.bottom && (\n            <div\n              key=\"bottom-left-corner\"\n              className={clsx(\n                cls(\"resizable-resize-handle\"),\n                classNames?.resizeHandle\n              )}\n              data-placement=\"bottom-left-corner\"\n              {...getHandleProps({\n                corner: \"bottom-left\",\n                // onResize: (values) => {\n                //   onReverseHandleChangeHorizontal(rootRef, values);\n                //   onReverseHandleChangeVertical(rootRef, values);\n                // },\n              })}\n            />\n          ),\n        ]\n      : [];\n\n    const childElement = children as React.ReactElement & {\n      ref?: React.Ref<HTMLDivElement>;\n    };\n\n    const childElementProps = {\n      className: getReactElementProp<string>(childElement, \"className\"),\n      style: getReactElementProp<React.CSSProperties>(childElement, \"style\"),\n      children: getReactElementProp<React.ReactNode>(childElement, \"children\"),\n      ref: childElement.ref,\n    };\n\n    const childProps = {\n      className: cn(\n        resizable && cls(\"resizable\"),\n        classNames?.root,\n        childElementProps.className,\n        containerClassName\n      ),\n      ref: mergeRefs(\n        resizable ? rootRefProp : undefined,\n        callbackRef, // Always need this for dimension measurement\n        childElement?.ref,\n        ref\n      ),\n      style: { ...childElementProps.style, ...containerStyle },\n      ...(resizing ? { \"data-resizing\": true } : {}),\n      ...(resizable ? { \"data-resizable\": true } : {}),\n      children: isChildrenValidElement\n        ? [\n            ...(Array.isArray(childElementProps.children)\n              ? childElementProps.children\n              : [childElementProps.children]),\n            ...resizeHandles.filter(Boolean),\n          ]\n        : children,\n    };\n\n    return (\n      <WithRenderProp\n        render={(props) => {\n          // Merge the props from WithRenderProp with our childProps\n          const mergedProps = mergeProps(\n            props,\n            childProps,\n            resizable ? rootPropsWithoutRef : {}\n          );\n          if (isChildrenValidElement) {\n            return React.cloneElement(childElement, mergedProps);\n          } else {\n            return <div {...mergedProps}>{children}</div>;\n          }\n        }}\n        {...rest}\n      />\n    );\n  }\n);\n"],"names":["Resizable","forwardRef","children","resizable","handles","classNames","containerClassName","containerStyle","resetKey","maxHeight","maxWidth","minHeight","minWidth","lockHorizontal","lockVertical","onResize","onDragEndProp","onDragStartProp","disabled","maintainAspectRatio","interval","initialHeightProp","initialWidthProp","rest","ref","cls","useCls","panelRef","setPanelRef","useState","width","setWidth","height","setHeight","resizing","setResizing","callbackRef","useCallback","node","rect","useEffect","resizableHook","useResizable","values","isChildrenValidElement","isValidElement","rootRefProp","rootPropsWithoutRef","getHandleProps","resizeHandles","jsx","clsx","childElement","childElementProps","getReactElementProp","childProps","cn","mergeRefs","WithRenderProp","props","mergedProps","mergeProps","React"],"mappings":"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"}

package/dist/components/window-portal/component.d.ts

@@ -0,0 +1,24 @@
+import { WindowPortalProps } from './types';
+/**
+ * WindowPortal - Renders content in a separate browser window
+ *
+ * This component creates a new browser window and renders its children inside it.
+ * It automatically copies parent window styles for consistent theming and handles
+ * cleanup when the component unmounts or the window is closed.
+ *
+ * **Performance Note**: Rapid state updates (e.g., text input) may have slight latency
+ * due to React reconciliation across different window contexts. This is expected behavior
+ * when using portals across window boundaries.
+ *
+ * **Theme Synchronization**: The component automatically syncs theme changes (light/dark mode)
+ * from the parent window to the popup window using a MutationObserver.
+ *
+ * @example
+ * ```tsx
+ * <WindowPortal width={800} height={600} title="My Window">
+ *   <div>Content rendered in separate window</div>
+ * </WindowPortal>
+ * ```
+ */
+export declare function WindowPortal({ children, width, height, left, top, title, copyStyles, onClose, windowFeatures, }: WindowPortalProps): import('react').ReactPortal;
+//# sourceMappingURL=component.d.ts.map

package/dist/components/window-portal/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/window-portal/component.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAW,EACX,MAAY,EACZ,IAAU,EACV,GAAS,EACT,KAAU,EACV,UAAiB,EACjB,OAAO,EACP,cAAmB,GACpB,EAAE,iBAAiB,+BAiOnB"}