@bioturing/components 0.39.1 → 0.41.0

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

@@ -1,196 +1,186 @@
 "use client";
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { Popover as a } from "@base-ui-components/react/popover";
-import { mergeProps as S } from "@base-ui-components/react";
-import { X as re } from "@bioturing/assets";
-import { useMemo as te, useRef as A, useState as x, useEffect as ne, useCallback as oe } from "react";
-import { Stack as ie } from "../stack/index.js";
-import { PopupPanelSize as ae } from "./constants.js";
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { Popover as n } from "@base-ui/react/popover";
+import { mergeProps as y } from "@base-ui/react";
+import { X as Y } from "@bioturing/assets";
+import { useMemo as z, useState as Z, useCallback as _ } from "react";
+import { Stack as ee } from "../stack/index.js";
+import { PopupPanelSize as re } from "./constants.js";
 import './style.css';/* empty css          */
-import { anchorToResizeHandles as pe } from "./utils.js";
-import { parseAntdPlacement as se, buildAntdPlacement as le } from "../utils/placement.js";
-import { useDraggable as ce } from "../hooks/useDraggable.js";
-import { Resizable as ue } from "../resizable/component.js";
-import { useControlledState as de } from "../hooks/useControlledState.js";
-import { useCls as me } from "../utils/antdUtils.js";
-import { useTheme as fe } from "../theme-provider/context/themeStore.js";
+import { anchorToResizeHandles as oe } from "./utils.js";
+import { useDraggable as ne } from "../hooks/useDraggable.js";
+import { Resizable as pe } from "../resizable/component.js";
+import { useControlledState as ie } from "../hooks/useControlledState.js";
+import { useCls as te } from "../utils/antdUtils.js";
+import { useTheme as le } from "../theme-provider/context/themeStore.js";
+import { parseAntdPlacement as ae } from "../utils/placement.js";
+import { useBaseUIPlacement as se } from "../hooks/useBaseUIPlacement.js";
 import { clsx as p } from "../utils/cn.js";
-import { IconButton as ge } from "../icon-button/component.js";
-const Ie = ({
-  children: z,
-  placement: H,
-  openOnHover: k = !1,
-  open: E,
-  onOpenChange: I,
-  content: K,
-  title: h,
-  trigger: T = "click",
-  className: j,
-  anchor: M,
-  beforeCloseButton: N,
-  afterCloseButton: w,
-  afterTitle: b,
-  size: P = "medium",
-  footer: u,
-  defaultOpen: D = !1,
-  resizable: y = !1,
-  draggable: F = !1,
+import { IconButton as ce } from "../icon-button/component.js";
+const we = ({
+  children: H,
+  placement: I,
+  openOnHover: b = !1,
+  open: k,
+  onOpenChange: w,
+  content: f,
+  title: l,
+  trigger: A = "click",
+  className: h,
+  anchor: T,
+  beforeCloseButton: g,
+  afterCloseButton: P,
+  afterTitle: m,
+  size: a = "medium",
+  footer: i,
+  defaultOpen: j = !1,
+  resizable: v = !1,
+  draggable: K = !1,
   maintainAspectRatio: U = !1,
-  classNames: n,
-  modal: V = !1,
-  closeOnClickOutside: X = !0,
-  onPlacementChange: v,
-  positionerProps: $ = {},
-  triggerProps: q = {},
-  portalProps: G = {},
-  ...J
+  classNames: e,
+  modal: D = !1,
+  closeOnClickOutside: E = !0,
+  onPlacementChange: M,
+  positionerProps: X = {},
+  triggerProps: $ = {},
+  portalProps: q = {},
+  ...B
 }) => {
-  const [R, C] = de(
-    E,
-    I,
-    D
+  const [C, u] = ie(
+    k,
+    w,
+    j
     // Always provide a default value to prevent undefined
-  ), r = me(), { className: L } = fe(), d = se(H), O = te(() => /* @__PURE__ */ e(re, { size: 16 }), []), m = A(d.side), f = A(d.align), [Q, W] = x(0), [l, Y] = x(
+  ), o = te(), { className: F } = le(), s = ae(I), S = z(() => /* @__PURE__ */ r(Y, { size: 16 }), []), [G, J] = Z(
     null
-  );
-  ne(() => {
-    if (!l || !R) return;
-    const i = new MutationObserver((s) => {
-      let g = !1;
-      if (s.forEach((t) => {
-        if (t.type === "attributes" && t.attributeName === "data-side") {
-          const o = l.getAttribute(t.attributeName);
-          o && o !== m.current && (m.current = o, g = !0);
-        }
-        if (t.type === "attributes" && t.attributeName === "data-align") {
-          const o = l.getAttribute(t.attributeName);
-          o && o !== f.current && (f.current = o, g = !0);
-        }
-      }), g) {
-        const t = le({
-          side: m.current,
-          align: f.current
-        });
-        W((o) => o + 1), v && v(t);
-      }
-    });
-    return i.observe(l, {
-      attributes: !0,
-      attributeFilter: ["data-side", "data-align"],
-      attributeOldValue: !0
-    }), () => {
-      i.disconnect();
-    };
-  }, [v, R, l]);
-  const Z = oe(() => /* @__PURE__ */ c("div", { className: p(r("popup-panel-header"), n?.header), children: [
-    /* @__PURE__ */ c(
-      ie,
+  ), { currentSide: L, currentAlign: N, placementChangeKey: Q } = se({
+    positionerRef: G,
+    open: C,
+    initialSide: s.side,
+    initialAlign: s.align,
+    onPlacementChange: M
+  }), R = _(() => /* @__PURE__ */ t("div", { className: p(o("popup-panel-header"), e?.header), children: [
+    /* @__PURE__ */ t(
+      ee,
       {
         align: "center",
         gap: 8,
-        className: r("popup-panel-title-wrapper"),
+        className: o("popup-panel-title-wrapper"),
         children: [
-          /* @__PURE__ */ e(
-            a.Title,
+          /* @__PURE__ */ r(
+            n.Title,
             {
-              render: /* @__PURE__ */ e("div", { className: p(r("grow", "truncate"), n?.title), children: h })
+              render: /* @__PURE__ */ r("div", { className: p(o("grow", "truncate"), e?.title), children: l })
             }
           ),
-          /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
-            N,
-            /* @__PURE__ */ e(
-              a.Close,
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+            g,
+            /* @__PURE__ */ r(
+              n.Close,
               {
-                render: /* @__PURE__ */ e(ge, { children: O })
+                render: /* @__PURE__ */ r(ce, { children: S })
               }
             ),
-            w
+            P
           ] })
         ]
       }
     ),
-    b || null
+    m || null
   ] }), [
-    w,
-    b,
-    N,
-    r,
-    n?.header,
-    n?.title,
-    O,
-    h
-  ]), { ref: _ } = ce(F), B = /* @__PURE__ */ c(
-    a.Popup,
-    {
-      className: p(
-        r("popup-panel"),
-        r(`popup-panel-size-${P}`),
-        j,
-        n?.popup
-      ),
-      ref: _,
-      children: [
-        h && Z(),
-        /* @__PURE__ */ e("div", { className: p(r("popup-panel-content"), n?.content), children: /* @__PURE__ */ e("div", { className: r("popup-panel-content-inner"), children: K }) }),
-        u && /* @__PURE__ */ e("div", { className: p(r("popup-panel-footer"), n?.footer), children: typeof u == "function" ? u({ close: () => C(!1) }) : u })
-      ]
-    }
-  ), ee = {
-    ref: Y,
-    className: p(r("popup-panel-root"), L, n?.root),
-    side: d.side,
-    align: d.align,
+    P,
+    m,
+    g,
+    o,
+    e?.header,
+    e?.title,
+    S,
+    l
+  ]), { ref: x } = ne(K), V = z(
+    () => /* @__PURE__ */ t(
+      n.Popup,
+      {
+        className: p(
+          o("popup-panel"),
+          o(`popup-panel-size-${a}`),
+          h,
+          e?.popup
+        ),
+        ref: x,
+        children: [
+          l && R(),
+          /* @__PURE__ */ r("div", { className: p(o("popup-panel-content"), e?.content), children: /* @__PURE__ */ r("div", { className: o("popup-panel-content-inner"), children: f }) }),
+          i && /* @__PURE__ */ r("div", { className: p(o("popup-panel-footer"), e?.footer), children: typeof i == "function" ? i({ close: () => u(!1) }) : i })
+        ]
+      }
+    ),
+    [
+      h,
+      e?.content,
+      e?.footer,
+      e?.popup,
+      o,
+      f,
+      x,
+      i,
+      R,
+      u,
+      a,
+      l
+    ]
+  ), W = {
+    ref: J,
+    className: p(o("popup-panel-root"), F, e?.root),
+    side: s.side,
+    align: s.align,
     sideOffset: 4,
-    anchor: M,
+    anchor: T,
     style: {
-      "--size-width": P ? ae[P] : void 0
+      "--size-width": a ? re[a] : void 0
     },
-    render: ({ children: i, onDragEnd: s, onDragStart: g, ...t }) => y ? /* @__PURE__ */ e(
-      ue,
+    render: ({ children: c, onDragEnd: d, onDragStart: de, ...O }) => v ? /* @__PURE__ */ r(
+      pe,
       {
-        resizable: y,
+        resizable: v,
         resetKey: Q,
         maintainAspectRatio: U,
         classNames: {
-          resizeHandle: n?.resizeHandle
+          resizeHandle: e?.resizeHandle
         },
-        handles: pe(
-          m.current,
-          f.current
-        ),
-        ...t,
-        children: i
+        handles: oe(L, N),
+        ...O,
+        children: c
       }
-    ) : /* @__PURE__ */ e("div", { ...t, children: i })
+    ) : /* @__PURE__ */ r("div", { ...O, children: c })
   };
-  return /* @__PURE__ */ c(
-    a.Root,
+  return /* @__PURE__ */ t(
+    n.Root,
     {
-      open: R,
-      onOpenChange: (i, s) => {
-        (s.reason === "outside-press" || s.reason === "focus-out") && !X || C(i, s);
+      open: C,
+      onOpenChange: (c, d) => {
+        (d.reason === "outside-press" || d.reason === "focus-out") && !E || u(c, d);
       },
-      modal: V,
-      ...J,
+      modal: D,
+      ...B,
       children: [
-        /* @__PURE__ */ e(
-          a.Trigger,
+        /* @__PURE__ */ r(
+          n.Trigger,
           {
-            ...S(
+            ...y(
               {
-                render: z,
-                className: p(r("popup-panel-trigger"), n?.trigger),
-                openOnHover: T === "hover" ? !0 : k
+                render: H,
+                className: p(o("popup-panel-trigger"), e?.trigger),
+                openOnHover: A === "hover" ? !0 : b
               },
-              q
+              $
             )
           }
         ),
-        /* @__PURE__ */ e(a.Portal, { ...G, children: /* @__PURE__ */ e(
-          a.Positioner,
+        /* @__PURE__ */ r(n.Portal, { ...q, children: /* @__PURE__ */ r(
+          n.Positioner,
           {
-            ...S(ee, $),
-            children: B
+            ...y(W, X),
+            children: V
           }
         ) })
       ]
@@ -198,6 +188,6 @@ const Ie = ({
   );
 };
 export {
-  Ie as PopupPanel
+  we 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 { Popover } from \"@base-ui-components/react/popover\";\nimport {\n  BaseUIAlign,\n  BaseUISide,\n  buildAntdPlacement,\n  clsx,\n  parseAntdPlacement,\n  useCls,\n} from \"../utils\";\n\nimport { mergeProps } from \"@base-ui-components/react\";\nimport { X } from \"@bioturing/assets\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { useControlledState, useDraggable } from \"../hooks\";\nimport { IconButton } from \"../icon-button\";\nimport { Resizable } from \"../resizable\";\nimport { Stack } from \"../stack\";\nimport { PopupPanelSize } from \"./constants\";\n\n// Import component-specific styles\nimport { useRef } from \"react\";\nimport { useTheme } from \"../theme-provider\";\nimport \"./style.css\";\nimport { anchorToResizeHandles } from \"./utils\";\n\nexport interface PopupPanelProps\n  extends Omit<\n      React.ComponentPropsWithRef<\"div\">,\n      \"title\" | \"content\" | \"children\"\n    >,\n    Omit<Popover.Root.Props, \"children\"> {\n  /** The trigger element that opens the popup panel */\n  children?: React.ComponentProps<typeof Popover.Trigger>[\"render\"];\n  /** Placement of the popup panel relative to its trigger */\n  placement?: PopoverProps[\"placement\"];\n  /** Whether to open the popup panel on hover */\n  openOnHover?: boolean;\n  /** Controls the open state of the popup panel */\n  open?: boolean;\n  /** Callback fired when the open state changes */\n  onOpenChange?: Popover.Root.Props[\"onOpenChange\"];\n  /** Content to display inside the popup panel */\n  content?: React.ReactNode;\n  /** Title text or element to display in the panel header */\n  title?: React.ReactNode;\n  /** The event that triggers the popup panel */\n  /**\n   * @default \"click\"\n   */\n  trigger?: \"click\" | \"hover\";\n  /** Custom anchor element for positioning the panel */\n  anchor?: Popover.Positioner.Props[\"anchor\"];\n  /** Content to display before the close button */\n  beforeCloseButton?: React.ReactNode;\n  /** Content to display after the close button */\n  afterCloseButton?: React.ReactNode;\n  /** Content to display after the title */\n  afterTitle?: React.ReactNode;\n  /**\n   * Predefined sizes for the popup panel\n   * - xsmall: 320px\n   * - small: 400px\n   * - medium: 480px (default)\n   * - large: 640px\n   * - xlarge: 840px\n   * @default \"medium\" for default type, \"xsmall\" for other types\n   */\n  size?: keyof typeof PopupPanelSize;\n  /**\n   * Footer content for the popup panel\n   * Can be a React node or a function that returns a React node\n   */\n  footer?:\n    | React.ReactNode\n    | ((props: { close: () => void }) => React.ReactNode);\n  /**\n   * Whether the panel should be open by default when uncontrolled\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Whether the panel should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Whether the panel should be draggable\n   * @default false\n   */\n  draggable?: boolean;\n  /**\n   * Whether to maintain aspect ratio when resizing\n   * Only applies when resizable is true\n   * @default false\n   */\n  maintainAspectRatio?: boolean;\n  /**\n   * Custom class names for different parts of the popup panel\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    header?: string;\n    title?: string;\n    content?: string;\n    footer?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Whether to close the panel when clicking outside\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n  /**\n   * Whether to use modal mode\n   * @default false\n   */\n  modal?: Popover.Root.Props[\"modal\"];\n  /**\n   * Callback function when the placement changes\n   */\n  onPlacementChange?: (placement: PopoverProps[\"placement\"]) => void;\n  /**\n   * Props to pass to the positioner\n   */\n  positionerProps?: Popover.Positioner.Props;\n  /**\n   * Props to pass to the trigger\n   */\n  triggerProps?: Popover.Trigger.Props;\n  /**\n   * Props to pass to the portal\n   */\n  portalProps?: Popover.Portal.Props;\n}\n\nexport const PopupPanel = ({\n  children,\n  placement,\n  openOnHover = false,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  content,\n  title,\n  trigger = \"click\",\n  className,\n  anchor,\n  beforeCloseButton,\n  afterCloseButton,\n  afterTitle,\n  size = \"medium\",\n  footer,\n  defaultOpen = false,\n  resizable = false,\n  draggable = false,\n  maintainAspectRatio = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n  onPlacementChange,\n  positionerProps = {},\n  triggerProps = {},\n  portalProps = {},\n  ...rest\n}: PopupPanelProps) => {\n  // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n  const [open, setOpen] = useControlledState(\n    outsideOpen,\n    outsideOnOpenChange,\n    defaultOpen // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const { className: themeClassName } = useTheme();\n  const baseUIPlacement = parseAntdPlacement(placement);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n\n  // const positionerRef = useRef<HTMLDivElement>(null);\n\n  const currentSideRef = useRef<BaseUISide>(baseUIPlacement.side);\n  const currentAlignRef = useRef<BaseUIAlign>(baseUIPlacement.align);\n  const [placementChangeKey, setPlacementChangeKey] = useState(0);\n  const [positionerRef, setPositionerRef] = useState<HTMLDivElement | null>(\n    null\n  );\n\n  useEffect(() => {\n    if (!positionerRef || !open) return; // Only observe when popup is open\n\n    // Create MutationObserver to watch for data-side changes\n    const observer = new MutationObserver((mutations) => {\n      let hasPlacementChanged = false;\n      mutations.forEach((mutation) => {\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-side\"\n        ) {\n          const newSide = positionerRef.getAttribute(mutation.attributeName);\n          if (newSide && newSide !== currentSideRef.current) {\n            currentSideRef.current = newSide as BaseUISide;\n            hasPlacementChanged = true;\n          }\n        }\n        if (\n          mutation.type === \"attributes\" &&\n          mutation.attributeName === \"data-align\"\n        ) {\n          const newAlign = positionerRef.getAttribute(mutation.attributeName);\n          if (newAlign && newAlign !== currentAlignRef.current) {\n            currentAlignRef.current = newAlign as BaseUIAlign;\n            hasPlacementChanged = true;\n          }\n        }\n      });\n\n      // Only trigger callbacks if placement actually changed\n      if (hasPlacementChanged) {\n        const newPlacement = buildAntdPlacement({\n          side: currentSideRef.current,\n          align: currentAlignRef.current,\n        });\n\n        // Trigger resizable dimensions reset when placement changes\n        setPlacementChangeKey((prev) => prev + 1);\n\n        if (onPlacementChange) {\n          onPlacementChange(newPlacement);\n        }\n      }\n    });\n\n    // Start observing\n    observer.observe(positionerRef, {\n      attributes: true,\n      attributeFilter: [\"data-side\", \"data-align\"],\n      attributeOldValue: true,\n    });\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [onPlacementChange, open, positionerRef]);\n\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Stack\n          align=\"center\"\n          gap={8}\n          className={cls(\"popup-panel-title-wrapper\")}\n        >\n          <Popover.Title\n            render={\n              <div className={clsx(cls(\"grow\", \"truncate\"), classNames?.title)}>\n                {title}\n              </div>\n            }\n          ></Popover.Title>\n          <div className=\"flex items-center gap-2\">\n            {beforeCloseButton}\n            <Popover.Close\n              render={<IconButton>{defaultCloseIcon}</IconButton>}\n            />\n            {afterCloseButton}\n          </div>\n        </Stack>\n        {afterTitle ? afterTitle : null}\n      </div>\n    );\n  }, [\n    afterCloseButton,\n    afterTitle,\n    beforeCloseButton,\n    cls,\n    classNames?.header,\n    classNames?.title,\n    defaultCloseIcon,\n    title,\n  ]);\n\n  const { ref: draggableRef } = useDraggable(draggable);\n\n  const popup = (\n    <Popover.Popup\n      className={clsx(\n        cls(\"popup-panel\"),\n        cls(`popup-panel-size-${size}`),\n        className,\n        classNames?.popup\n      )}\n      ref={draggableRef}\n    >\n      {title && renderTitle()}\n      <div className={clsx(cls(\"popup-panel-content\"), classNames?.content)}>\n        <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n      </div>\n      {footer && (\n        <div className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}>\n          {typeof footer === \"function\"\n            ? footer({ close: () => setOpen(false) })\n            : footer}\n        </div>\n      )}\n    </Popover.Popup>\n  );\n\n  const defaultPositionerProps = {\n    ref: setPositionerRef,\n    className: clsx(cls(\"popup-panel-root\"), themeClassName, classNames?.root),\n    side: baseUIPlacement.side,\n    align: baseUIPlacement.align,\n    sideOffset: 4,\n    anchor,\n    style: {\n      \"--size-width\": size ? PopupPanelSize[size] : undefined,\n    } as React.CSSProperties,\n    render: ({ children, onDragEnd, onDragStart, ...props }) => {\n      return resizable ? (\n        <Resizable\n          resizable={resizable}\n          resetKey={placementChangeKey}\n          maintainAspectRatio={maintainAspectRatio}\n          classNames={{\n            resizeHandle: classNames?.resizeHandle,\n          }}\n          handles={anchorToResizeHandles(\n            currentSideRef.current,\n            currentAlignRef.current\n          )}\n          {...props}\n        >\n          {children}\n        </Resizable>\n      ) : (\n        <div {...props}>{children}</div>\n      );\n    },\n  };\n\n  return (\n    <Popover.Root\n      open={open}\n      onOpenChange={(open, eventDetails) => {\n        if (\n          (eventDetails.reason === \"outside-press\" ||\n            eventDetails.reason === \"focus-out\") &&\n          !closeOnClickOutside\n        )\n          return;\n        setOpen(open, eventDetails);\n      }}\n      modal={modal}\n      {...rest}\n    >\n      <Popover.Trigger\n        {...mergeProps(\n          {\n            render: children,\n            className: clsx(cls(\"popup-panel-trigger\"), classNames?.trigger),\n            openOnHover: trigger === \"hover\" ? true : openOnHover,\n          },\n          triggerProps\n        )}\n      ></Popover.Trigger>\n      <Popover.Portal {...portalProps}>\n        <Popover.Positioner\n          {...mergeProps(defaultPositionerProps, positionerProps)}\n        >\n          {popup}\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["PopupPanel","children","placement","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","draggable","maintainAspectRatio","classNames","modal","closeOnClickOutside","onPlacementChange","positionerProps","triggerProps","portalProps","rest","open","setOpen","useControlledState","cls","useCls","themeClassName","useTheme","baseUIPlacement","parseAntdPlacement","defaultCloseIcon","useMemo","jsx","X","currentSideRef","useRef","currentAlignRef","placementChangeKey","setPlacementChangeKey","useState","positionerRef","setPositionerRef","useEffect","observer","mutations","hasPlacementChanged","mutation","newSide","newAlign","newPlacement","buildAntdPlacement","prev","renderTitle","useCallback","jsxs","clsx","Stack","Popover","IconButton","draggableRef","useDraggable","popup","defaultPositionerProps","PopupPanelSize","onDragEnd","onDragStart","props","Resizable","anchorToResizeHandles","eventDetails","mergeProps"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport { Popover } from \"@base-ui/react/popover\";\nimport { clsx, parseAntdPlacement, useCls } from \"../utils\";\n\nimport { mergeProps } from \"@base-ui/react\";\nimport { X } from \"@bioturing/assets\";\nimport { useCallback, useMemo, useState } from \"react\";\nimport { useControlledState, useDraggable, useBaseUIPlacement } 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 { useTheme } from \"../theme-provider\";\nimport \"./style.css\";\nimport { anchorToResizeHandles } from \"./utils\";\n\nexport type PopupPanelPlacement =\n  | \"top\"\n  | \"left\"\n  | \"right\"\n  | \"bottom\"\n  | \"topLeft\"\n  | \"topRight\"\n  | \"bottomLeft\"\n  | \"bottomRight\"\n  | \"leftTop\"\n  | \"leftBottom\"\n  | \"rightTop\"\n  | \"rightBottom\";\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?: PopupPanelPlacement;\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: PopupPanelPlacement) => void;\n  /**\n   * Props to pass to the positioner\n   */\n  positionerProps?: Popover.Positioner.Props;\n  /**\n   * Props to pass to the trigger\n   */\n  triggerProps?: Popover.Trigger.Props;\n  /**\n   * Props to pass to the portal\n   */\n  portalProps?: Popover.Portal.Props;\n}\n\nexport const PopupPanel = ({\n  children,\n  placement,\n  openOnHover = false,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  content,\n  title,\n  trigger = \"click\",\n  className,\n  anchor,\n  beforeCloseButton,\n  afterCloseButton,\n  afterTitle,\n  size = \"medium\",\n  footer,\n  defaultOpen = false,\n  resizable = false,\n  draggable = false,\n  maintainAspectRatio = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n  onPlacementChange,\n  positionerProps = {},\n  triggerProps = {},\n  portalProps = {},\n  ...rest\n}: PopupPanelProps) => {\n  // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n  const [open, setOpen] = useControlledState(\n    outsideOpen,\n    outsideOnOpenChange,\n    defaultOpen // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const { className: themeClassName } = useTheme();\n  const baseUIPlacement = parseAntdPlacement(placement);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n\n  const [positionerRef, setPositionerRef] = useState<HTMLDivElement | null>(\n    null\n  );\n\n  // Track Base UI placement changes\n  const { currentSide, currentAlign, placementChangeKey } = useBaseUIPlacement({\n    positionerRef,\n    open,\n    initialSide: baseUIPlacement.side,\n    initialAlign: baseUIPlacement.align,\n    onPlacementChange,\n  });\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 = useMemo(\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={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      className,\n      classNames?.content,\n      classNames?.footer,\n      classNames?.popup,\n      cls,\n      content,\n      draggableRef,\n      footer,\n      renderTitle,\n      setOpen,\n      size,\n      title,\n    ]\n  );\n\n  const defaultPositionerProps = {\n    ref: setPositionerRef,\n    className: clsx(cls(\"popup-panel-root\"), themeClassName, classNames?.root),\n    side: baseUIPlacement.side,\n    align: baseUIPlacement.align,\n    sideOffset: 4,\n    anchor,\n    style: {\n      \"--size-width\": size ? PopupPanelSize[size] : undefined,\n    } as React.CSSProperties,\n    render: ({ children, onDragEnd, onDragStart, ...props }) => {\n      return resizable ? (\n        <Resizable\n          resizable={resizable}\n          resetKey={placementChangeKey}\n          maintainAspectRatio={maintainAspectRatio}\n          classNames={{\n            resizeHandle: classNames?.resizeHandle,\n          }}\n          handles={anchorToResizeHandles(currentSide, currentAlign)}\n          {...props}\n        >\n          {children}\n        </Resizable>\n      ) : (\n        <div {...props}>{children}</div>\n      );\n    },\n  };\n\n  return (\n    <Popover.Root\n      open={open}\n      onOpenChange={(open, eventDetails) => {\n        if (\n          (eventDetails.reason === \"outside-press\" ||\n            eventDetails.reason === \"focus-out\") &&\n          !closeOnClickOutside\n        )\n          return;\n        setOpen(open, eventDetails);\n      }}\n      modal={modal}\n      {...rest}\n    >\n      <Popover.Trigger\n        {...mergeProps(\n          {\n            render: children,\n            className: clsx(cls(\"popup-panel-trigger\"), classNames?.trigger),\n            openOnHover: trigger === \"hover\" ? true : openOnHover,\n          },\n          triggerProps\n        )}\n      ></Popover.Trigger>\n      <Popover.Portal {...portalProps}>\n        <Popover.Positioner\n          {...mergeProps(defaultPositionerProps, positionerProps)}\n        >\n          {popup}\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["PopupPanel","children","placement","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","draggable","maintainAspectRatio","classNames","modal","closeOnClickOutside","onPlacementChange","positionerProps","triggerProps","portalProps","rest","open","setOpen","useControlledState","cls","useCls","themeClassName","useTheme","baseUIPlacement","parseAntdPlacement","defaultCloseIcon","useMemo","jsx","X","positionerRef","setPositionerRef","useState","currentSide","currentAlign","placementChangeKey","useBaseUIPlacement","renderTitle","useCallback","jsxs","clsx","Stack","Popover","IconButton","draggableRef","useDraggable","popup","defaultPositionerProps","PopupPanelSize","onDragEnd","onDragStart","props","Resizable","anchorToResizeHandles","eventDetails","mergeProps"],"mappings":"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"}

package/dist/components/resizable/component.js

@@ -3,7 +3,7 @@ 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 { mergeProps as te } from "@base-ui/react";
 import './style.css';/* empty css          */
 import { getReactElementProp as v } from "../utils/reactElement.js";
 import { useCls as re } from "../utils/antdUtils.js";

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, {\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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"}
+{"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/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/scroll-area/component.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ScrollArea as BaseScrollArea } from '@base-ui-components/react';
+import { ScrollArea as BaseScrollArea } from '@base-ui/react';
 export interface ScrollAreaProps extends Omit<BaseScrollArea.Root.Props, "onScroll"> {
     children: ReactNode;
     /**

package/dist/components/scroll-area/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAIzE,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC/B;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B;;WAEG;QACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACjD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,GAAI,wFASxB,eAAe,4CAmJjB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/scroll-area/component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAI9D,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;IACnD,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE;QACX;;WAEG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB;;WAEG;QACH,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF;;OAEG;IACH,MAAM,CAAC,EAAE;QACP;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC/B;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B;;WAEG;QACH,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAC7B,CAAC;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACjD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,GAAI,wFASxB,eAAe,4CAmJjB,CAAC"}

package/dist/components/scroll-area/component.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as x, jsx as i } from "react/jsx-runtime";
 import { useRef as R, useState as E, useEffect as L } from "react";
-import { ScrollArea as e } from "@base-ui-components/react";
+import { ScrollArea as e } from "@base-ui/react";
 import './style.css';/* empty css          */
 import { useCls as j } from "../utils/antdUtils.js";
 import { clsx as c } from "../utils/cn.js";