@bioturing/components 0.13.2 → 0.14.0

package/dist/Input.js

@@ -1,9 +1,8 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import "antd/es/input/style/css";
-import * as __WEBPACK_EXTERNAL_MODULE_antd_es_input_416a332a__ from "antd/es/input";
 import * as __WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__ from "@bioturing/assets";
+import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-const MainInputInner = (props, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_input_416a332a__["default"], {
+const MainInputInner = (props, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Input, {
         ref: ref,
         ...props
     });
@@ -16,7 +15,7 @@ const PasswordInner = (props, ref)=>{
             }),
         ...props
     };
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_input_416a332a__["default"].Password, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Input.Password, {
         ref: ref,
         ...mergedProps
     });
@@ -28,12 +27,12 @@ const SearchInner = (props, ref)=>{
         }) : props.enterButton,
         ...props
     };
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_input_416a332a__["default"].Search, {
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Input.Search, {
         ref: ref,
         ...mergedProps
     });
 };
-const TextAreaInner = (props, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_input_416a332a__["default"].TextArea, {
+const TextAreaInner = (props, ref)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Input.TextArea, {
         ref: ref,
         ...props
     });

package/dist/Modal.js

@@ -1,8 +1,6 @@
 "use client";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_app_useApp_90d95086__ from "antd/es/app/useApp";
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
-import "antd/es/flex/style/css";
-import * as __WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__ from "antd/es/flex";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_52965d33__ from "antd/es/modal";
 import * as __WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__ from "@bioturing/assets";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
@@ -14,8 +12,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_components_NormalCancelBtn_5
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_components_NormalOkBtn_897b50c4__ from "antd/es/modal/components/NormalOkBtn";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_locale_f16c0933__ from "antd/es/modal/locale";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_locale_31079002__ from "antd/es/locale";
-import "antd/es/tooltip/style/css";
-import * as __WEBPACK_EXTERNAL_MODULE_antd_es_tooltip_1091cc47__ from "antd/es/tooltip";
+import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
 function cx(...args) {
     const classes = [];
     for (const arg of args)if (arg) {
@@ -83,7 +80,7 @@ const IconButtonImpl = (props, ref)=>{
         ...elementProps,
         children: children
     });
-    return label ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_tooltip_1091cc47__["default"], {
+    return label ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Tooltip, {
         title: label,
         arrow: false,
         ...tooltipProps,
@@ -102,14 +99,17 @@ var constants_ModalSize = /*#__PURE__*/ function(ModalSize) {
     return ModalSize;
 }({});
 "use client";
-const Modal = ({ open: externalOpen, closeIcon, children, size, footer, width, style, styles, classNames, okButtonProps, cancelButtonProps, loading, onOk, onCancel, onClose, okText, okType = "primary", confirmLoading, cancelText = "Close", hideOkButton = false, hideCancelButton = false, contentPadding, title, afterTitle, beforeCloseButton, afterCloseButton, defaultFixedHeaderFooter = false, centered = true, type = "default", defaultOpen = true, ...rest })=>{
+const Modal = ({ open: externalOpen, closeIcon, children, size: sizeProp, footer, width, style, styles, classNames, okButtonProps, cancelButtonProps, loading, onOk, onCancel, okText, okType = "primary", confirmLoading, cancelText = "Close", hideOkButton = false, hideCancelButton = false, contentPadding, title, afterTitle, beforeCloseButton, afterCloseButton, defaultFixedHeaderFooter = false, centered = true, type = "default", defaultOpen = true, background: backgroundProp, bodyScrollable = true, ...rest })=>{
     const defaultCloseIcon = void 0 === closeIcon ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.X, {
         size: 16,
         weight: "bold"
     }) : closeIcon;
     const defaultModalSize = "default" === type ? "medium" : "xsmall";
-    const modalWidth = width || size && size in constants_ModalSize ? constants_ModalSize[size] : constants_ModalSize[defaultModalSize];
+    const size = sizeProp || defaultModalSize;
+    const modalWidth = width || constants_ModalSize[size];
+    const background = backgroundProp || (size && size in constants_ModalSize && parseInt(constants_ModalSize[size]) <= parseInt(constants_ModalSize.medium) ? "elevated" : "container");
     const modalStyle = {
+        "--ds-modal-bg": `var(--ds-color-bg-${background})`,
         ...style,
         ..."fullscreen" === size ? {
             top: 0,
@@ -126,7 +126,7 @@ const Modal = ({ open: externalOpen, closeIcon, children, size, footer, width, s
             ...null == styles ? void 0 : styles.body
         }
     };
-    const [scrollable, setScrollable] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [isContentOverflow, setIsContentOverflow] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
     const cls = useCls();
     const resizeObserverRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
     const modalInnerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((node)=>{
@@ -135,12 +135,12 @@ const Modal = ({ open: externalOpen, closeIcon, children, size, footer, width, s
         if (!(modalBody instanceof HTMLElement)) return;
         const resizeObserver = new ResizeObserver(()=>{
             const hasOverflow = modalBody.scrollHeight > modalBody.clientHeight;
-            setScrollable(hasOverflow);
+            setIsContentOverflow(hasOverflow);
         });
         resizeObserverRef.current = resizeObserver;
         resizeObserver.observe(modalBody);
         const hasOverflow = modalBody.scrollHeight > modalBody.clientHeight;
-        setScrollable(hasOverflow);
+        setIsContentOverflow(hasOverflow);
     }, [
         cls
     ]);
@@ -183,7 +183,7 @@ const Modal = ({ open: externalOpen, closeIcon, children, size, footer, width, s
     });
     const renderTitle = ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
             children: [
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__["default"], {
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Flex, {
                     align: "center",
                     gap: 8,
                     className: cls("modal-title-wrapper"),
@@ -216,7 +216,7 @@ const Modal = ({ open: externalOpen, closeIcon, children, size, footer, width, s
         title: renderTitle(),
         classNames: {
             ...classNames,
-            wrapper: cls("modal-wrap", "fullscreen" == size && "modal-fullscreen", scrollable && "modal-scrollable", (defaultFixedHeaderFooter || scrollable || "fullscreen" == size) && "modal-fixed")
+            wrapper: cls("modal-wrap", "fullscreen" == size && "modal-fullscreen", isContentOverflow && "modal-content-overflow", false === bodyScrollable && "modal-no-body-scroll", (defaultFixedHeaderFooter || isContentOverflow || "fullscreen" == size) && "modal-fixed")
         },
         styles: modalStyles,
         modalRender: (modal)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {

package/dist/PopupPanel.css

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

package/dist/PopupPanel.js

@@ -0,0 +1,333 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__ from "antd/es/config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__ from "antd/es/theme/useToken";
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__ from "@base-ui-components/react/popover";
+import * as __WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__ from "antd/es/flex";
+import * as __WEBPACK_EXTERNAL_MODULE_antd__ from "antd";
+import * as __WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__ from "@bioturing/assets";
+import * as __WEBPACK_EXTERNAL_MODULE_react_use_resizable_ad29d4b1__ from "react-use-resizable";
+function cx(...args) {
+    const classes = [];
+    for (const arg of args)if (arg) {
+        if ("string" == typeof arg || "number" == typeof arg) classes.push(String(arg));
+        else if (Array.isArray(arg)) classes.push(...cx(...arg));
+        else if ("object" == typeof arg) {
+            for (const [key, value] of Object.entries(arg))if (value) classes.push(key);
+        }
+    }
+    return classes;
+}
+function clsx(...args) {
+    return cx(...args).join(" ");
+}
+"use client";
+const useAntdCssVarClassname = ()=>{
+    var _token_;
+    const token = (0, __WEBPACK_EXTERNAL_MODULE_antd_es_theme_useToken_e8911485__["default"])();
+    return null == (_token_ = token[4]) ? void 0 : _token_.key;
+};
+const useCls = ()=>{
+    const { getPrefixCls } = (0, __WEBPACK_EXTERNAL_MODULE_react__.useContext)(__WEBPACK_EXTERNAL_MODULE_antd_es_config_provider_6a57beb3__["default"].ConfigContext);
+    return (...args)=>cx(...args).map((cls)=>getPrefixCls(cls)).join(" ");
+};
+function splitCamelCase(text) {
+    const result = [];
+    let currentWord = "";
+    for (const char of text)if (char >= "A" && char <= "Z") {
+        if (currentWord) result.push(currentWord);
+        currentWord = char.toLowerCase();
+    } else currentWord += char;
+    if (currentWord) result.push(currentWord);
+    return result.length > 0 ? result : [
+        text
+    ];
+}
+const parseAntdPlacement = (placement = "bottomLeft")=>{
+    const [position1, position2] = splitCamelCase(placement);
+    let primaryPlacement;
+    let align = "center";
+    if ("top" === position1 || "bottom" === position1) {
+        primaryPlacement = position1;
+        if (position2) switch(position2){
+            case "left":
+                align = "start";
+                break;
+            case "right":
+                align = "end";
+                break;
+        }
+    } else if ("left" === position1 || "right" === position1) {
+        primaryPlacement = position1;
+        if (position2) switch(position2){
+            case "top":
+                align = "start";
+                break;
+            case "bottom":
+                align = "end";
+                break;
+        }
+    } else primaryPlacement = "bottom";
+    return {
+        placement: primaryPlacement,
+        align
+    };
+};
+"use client";
+const IconButtonImpl = (props, ref)=>{
+    const { label, size = "medium", negativeMargin = true, children, className, tooltipProps = {}, as, href, target, rel, download, hrefLang, referrerPolicy, ...rest } = props;
+    const cls = useCls();
+    const antdCssVarClassname = useAntdCssVarClassname();
+    const buttonClasses = [
+        cls("icon-button"),
+        cls(`icon-button-${size}`),
+        cls(negativeMargin ? "icon-button-negative-margin" : ""),
+        antdCssVarClassname,
+        className
+    ].filter(Boolean).join(" ");
+    const Component = as || (href ? "a" : "button");
+    const anchorProps = "a" === Component ? {
+        ...void 0 !== target && {
+            target
+        },
+        ...void 0 !== rel && {
+            rel
+        },
+        ...void 0 !== download && {
+            download
+        },
+        ...void 0 !== hrefLang && {
+            hrefLang
+        },
+        ...void 0 !== referrerPolicy && {
+            referrerPolicy
+        }
+    } : {};
+    const elementProps = {
+        ref,
+        className: buttonClasses,
+        ..."button" === Component && {
+            type: "button"
+        },
+        ...href && {
+            href
+        },
+        ...anchorProps,
+        ...rest
+    };
+    const element = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Component, {
+        ...elementProps,
+        children: children
+    });
+    return label ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd__.Tooltip, {
+        title: label,
+        arrow: false,
+        ...tooltipProps,
+        children: element
+    }) : element;
+};
+const IconButton = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(IconButtonImpl);
+var constants_PopupPanelSize = /*#__PURE__*/ function(PopupPanelSize) {
+    PopupPanelSize["xsmall"] = "320px";
+    PopupPanelSize["small"] = "400px";
+    PopupPanelSize["medium"] = "480px";
+    PopupPanelSize["large"] = "640px";
+    PopupPanelSize["xlarge"] = "840px";
+    return PopupPanelSize;
+}({});
+"use client";
+function useControlledState(value, onChange, defaultValue) {
+    const [internalState, setInternalState] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(defaultValue);
+    const isControlled = void 0 !== value;
+    const setState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((next)=>{
+        const nextValue = "function" == typeof next ? next(value) : next;
+        if ("function" == typeof onChange) onChange(nextValue);
+        if (!isControlled) setInternalState(next);
+    }, [
+        value,
+        onChange,
+        isControlled
+    ]);
+    const state = isControlled ? value : internalState;
+    return [
+        state,
+        setState
+    ];
+}
+"use client";
+const PopupPanel = ({ children, placement, openOnHover = false, open: outsideOpen, onOpenChange: outsideOnOpenChange, content, title, trigger = "click", className, anchor, beforeCloseButton, afterCloseButton, afterTitle, size = "medium", footer, defaultOpen, resizable = false })=>{
+    const [open, setOpen] = useControlledState(outsideOpen, outsideOnOpenChange, defaultOpen ?? false);
+    const cls = useCls();
+    const antdCssVarClassname = useAntdCssVarClassname();
+    const headlessUIPlacement = parseAntdPlacement(placement);
+    const triggerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [popupRef, setPopupRef] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(null);
+    const [width, setWidth] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
+    const [height, setHeight] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)();
+    const callbackRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((node)=>{
+        setPopupRef(node);
+    }, []);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (!popupRef) return;
+        const observer = new ResizeObserver((entries)=>{
+            for (const entry of entries){
+                setWidth(entry.contentRect.width);
+                setHeight(entry.contentRect.height);
+            }
+        });
+        observer.observe(popupRef);
+        return ()=>{
+            observer.disconnect();
+        };
+    }, [
+        popupRef
+    ]);
+    const defaultCloseIcon = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.X, {
+            size: 16
+        }), []);
+    const renderTitle = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+            className: cls("popup-panel-header"),
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd_es_flex_86593150__["default"], {
+                    align: "center",
+                    gap: 8,
+                    className: cls("popup-panel-title-wrapper"),
+                    children: [
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Title, {
+                            render: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: cls("grow", "truncate"),
+                                children: title
+                            })
+                        }),
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
+                            className: "flex items-center gap-2",
+                            children: [
+                                beforeCloseButton,
+                                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Close, {
+                                    render: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(IconButton, {
+                                        children: defaultCloseIcon
+                                    })
+                                }),
+                                afterCloseButton
+                            ]
+                        })
+                    ]
+                }),
+                afterTitle ? afterTitle : null
+            ]
+        }), [
+        afterCloseButton,
+        afterTitle,
+        beforeCloseButton,
+        cls,
+        defaultCloseIcon,
+        title
+    ]);
+    const [resizing, setResizing] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const { getRootProps, getHandleProps, rootRef } = (0, __WEBPACK_EXTERNAL_MODULE_react_use_resizable_ad29d4b1__.useResizable)({
+        initialWidth: width,
+        initialHeight: height,
+        onDragStart: ()=>setResizing(true),
+        onDragEnd: ()=>setResizing(false)
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
+        if (resizing) document.body.style.userSelect = "none";
+        else document.body.style.userSelect = "";
+    }, [
+        resizing
+    ]);
+    const onReverseHandleChangeVertical = (parent, values)=>{
+        if (!parent.current) return;
+        const { heightDiff } = values;
+        parent.current.style.top = `${parseInt(parent.current.style.top || "0") - heightDiff}px`;
+    };
+    const onReverseHandleChangeHorizontal = (parent, values)=>{
+        if (!parent.current) return;
+        const { widthDiff } = values;
+        parent.current.style.left = `${parseInt(parent.current.style.left || "0") - widthDiff}px`;
+    };
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Root, {
+        openOnHover: "hover" === trigger ? true : openOnHover,
+        open: open,
+        onOpenChange: (newOpen)=>{
+            setOpen(newOpen);
+        },
+        delay: 100,
+        children: [
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Trigger, {
+                render: children,
+                ref: triggerRef
+            }),
+            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Portal, {
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Positioner, {
+                    className: cls("popup-panel-root"),
+                    side: headlessUIPlacement.placement,
+                    align: headlessUIPlacement.align,
+                    sideOffset: 4,
+                    anchor: anchor,
+                    style: {
+                        "--size-width": size ? constants_PopupPanelSize[size] : void 0
+                    },
+                    ref: callbackRef,
+                    children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_popover_cdb87929__.Popover.Popup, {
+                        className: clsx(cls("popup-panel"), antdCssVarClassname, className),
+                        ...getRootProps(),
+                        ...resizing ? {
+                            "data-resizing": true
+                        } : {},
+                        children: [
+                            title && renderTitle(),
+                            /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: cls("popup-panel-content"),
+                                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                    className: cls("popup-panel-content-inner"),
+                                    children: content
+                                })
+                            }),
+                            footer && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                className: cls("popup-panel-footer"),
+                                children: "function" == typeof footer ? footer({
+                                    close: ()=>setOpen(false)
+                                }) : footer
+                            }),
+                            resizable && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                                children: [
+                                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: cls("resize-handle-top"),
+                                        ...getHandleProps({
+                                            reverse: true,
+                                            lockHorizontal: true,
+                                            onResize: (values)=>onReverseHandleChangeVertical(rootRef, values)
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: cls("resize-handle-bottom"),
+                                        ...getHandleProps({
+                                            lockHorizontal: true
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: cls("resize-handle-left"),
+                                        ...getHandleProps({
+                                            reverse: true,
+                                            lockVertical: true,
+                                            onResize: (values)=>onReverseHandleChangeHorizontal(rootRef, values)
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                                        className: cls("resize-handle-right"),
+                                        ...getHandleProps({
+                                            lockVertical: true
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+};
+export { PopupPanel };

package/dist/ScrollArea.js

@@ -31,7 +31,10 @@ const ScrollArea = ({ children, className, viewportClassName, thumbClassName, sc
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Viewport, {
                 className: clsx(cls("scroll-area-viewport"), viewportClassName),
-                children: children
+                children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Content, {
+                    className: clsx(cls("scroll-area-content")),
+                    children: children
+                })
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Scrollbar, {
                 className: clsx(cls("scroll-area-scrollbar"), scrollbarClassName),