@paroicms/react-ui 0.5.0 → 0.5.1

package/dist/Dialog.d.ts

@@ -8,6 +8,6 @@ export interface DialogProps {
     children: ReactNode;
     className?: string;
     closable?: boolean;
-    modal?: boolean;
+    size?: "sm" | "md" | "lg";
 }
-export declare function Dialog({ visible, onHide, header, footer, children, className, closable, modal, }: DialogProps): import("react").ReactPortal | null;
+export declare function Dialog({ visible, onHide, header, footer, children, className, closable, size, }: DialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/Dialog.js

@@ -3,39 +3,38 @@ import "../styles/Dialog.css";
 import { clsx } from "clsx";
 import { X } from "lucide-react";
 import { useEffect, useRef } from "react";
-import { createPortal } from "react-dom";
-/** Track dialog stack for ESC key handling - only topmost dialog should respond */
-let dialogStackCounter = 0;
-export function Dialog({ visible, onHide, header, footer, children, className, closable = true, modal = true, }) {
-    // Track this dialog's position in the stack for ESC key handling
-    const dialogIdRef = useRef(undefined);
+export function Dialog({ visible, onHide, header, footer, children, className, closable = true, size, }) {
+    const dialogRef = useRef(null);
+    // Control open/close with native methods
     useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
         if (visible) {
-            dialogIdRef.current = ++dialogStackCounter;
+            if (!dialog.open) {
+                dialog.showModal();
+            }
         }
-        return () => {
-            if (dialogIdRef.current !== undefined) {
-                // Decrement only if this was the topmost dialog
-                if (dialogIdRef.current === dialogStackCounter) {
-                    dialogStackCounter--;
-                }
-                dialogIdRef.current = undefined;
+        else {
+            if (dialog.open) {
+                dialog.close();
             }
-        };
+        }
     }, [visible]);
-    // Handle escape key - only the topmost dialog should respond
+    // Handle ESC key via native cancel event
     useEffect(() => {
-        if (!visible || !closable)
+        const dialog = dialogRef.current;
+        if (!dialog)
             return;
-        const handleKeyDown = (e) => {
-            // Only handle ESC if this is the topmost dialog
-            if (e.key === "Escape" && dialogIdRef.current === dialogStackCounter) {
+        const handleCancel = (e) => {
+            e.preventDefault(); // Prevent default close
+            if (closable) {
                 onHide();
             }
         };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [visible, closable, onHide]);
+        dialog.addEventListener("cancel", handleCancel);
+        return () => dialog.removeEventListener("cancel", handleCancel);
+    }, [closable, onHide]);
     // Prevent body scroll when open
     useEffect(() => {
         if (visible) {
@@ -48,8 +47,5 @@ export function Dialog({ visible, onHide, header, footer, children, className, c
             document.body.style.overflow = "";
         };
     }, [visible]);
-    if (!visible)
-        return null;
-    const dialog = (_jsxs("div", { className: "PaDialog-overlay", children: [modal && _jsx("div", { className: "PaDialog-backdrop", onClick: closable ? onHide : undefined }), _jsxs("div", { className: clsx("PaDialog", className), role: "dialog", "aria-modal": modal, children: [(header || closable) && (_jsxs("div", { className: "PaDialog-header", children: [header && _jsx("div", { className: "PaDialog-title", children: header }), closable && (_jsx("button", { type: "button", className: "PaDialog-close", onClick: onHide, "aria-label": "Close", children: _jsx(X, { size: 18 }) }))] })), _jsx("div", { className: "PaDialog-content", children: children }), footer && _jsx("div", { className: "PaDialog-footer", children: footer })] })] }));
-    return createPortal(dialog, document.body);
+    return (_jsxs("dialog", { ref: dialogRef, className: clsx("PaDialog", size && `size-${size}`, className), children: [(header || closable) && (_jsxs("div", { className: "PaDialog-header", children: [header && _jsx("div", { className: "PaDialog-title", children: header }), closable && (_jsx("button", { type: "button", className: "PaDialog-close", onClick: onHide, "aria-label": "Close", children: _jsx(X, { size: 18 }) }))] })), _jsx("div", { className: "PaDialog-content", children: children }), footer && _jsx("div", { className: "PaDialog-footer", children: footer })] }));
 }

package/dist/MultiSelect.d.ts

@@ -13,5 +13,6 @@ export interface MultiSelectProps {
     className?: string;
     placeholder?: string;
     disabled?: boolean;
+    position?: "auto" | "top" | "bottom";
 }
-export declare function MultiSelect({ value, onChange, options, label, error, className, placeholder, disabled, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelect({ value, onChange, options, label, error, className, placeholder, disabled, position, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/MultiSelect.js

@@ -3,21 +3,31 @@ import "../styles/MultiSelect.css";
 import { clsx } from "clsx";
 import { ChevronDown, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-export function MultiSelect({ value, onChange, options, label, error, className, placeholder, disabled, }) {
+import { Checkbox } from "./Checkbox.js";
+import { computePopupPosition, setupPopoverPositioning } from "./popup-positioning.js";
+export function MultiSelect({ value, onChange, options, label, error, className, placeholder, disabled, position, }) {
     const [open, setOpen] = useState(false);
     const containerRef = useRef(null);
-    // Close dropdown when clicking outside
+    const dropdownRef = useRef(null);
+    const dropdownId = useRef(`pa-multiselect-${Math.random().toString(36).substring(2, 9)}`);
     useEffect(() => {
-        if (!open)
+        const dropdown = dropdownRef.current;
+        const container = containerRef.current;
+        if (!dropdown || !container)
             return;
-        const handleClickOutside = (e) => {
-            if (containerRef.current && !containerRef.current.contains(e.target)) {
-                setOpen(false);
-            }
+        const handleToggle = (e) => {
+            setOpen(e.newState === "open");
         };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [open]);
+        dropdown.addEventListener("toggle", handleToggle);
+        const cleanupPositioning = setupPopoverPositioning(dropdown, () => {
+            dropdown.style.width = `${container.offsetWidth}px`;
+            return computePopupPosition(container, dropdown, position ?? "auto", "vertical");
+        });
+        return () => {
+            dropdown.removeEventListener("toggle", handleToggle);
+            cleanupPositioning();
+        };
+    }, [position]);
     const toggleOption = (optionValue) => {
         if (value.includes(optionValue)) {
             onChange(value.filter((v) => v !== optionValue));
@@ -30,21 +40,14 @@ export function MultiSelect({ value, onChange, options, label, error, className,
         onChange(value.filter((v) => v !== optionValue));
     };
     const selectedOptions = options.filter((opt) => value.includes(opt.value));
-    const controlElement = (_jsxs(_Fragment, { children: [_jsxs("span", { className: clsx("PaMultiSelect-control", open && "open"), onClick: () => !disabled && setOpen(!open), onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
+    const controlElement = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "PaMultiSelect-control", onClick: () => !disabled && dropdownRef.current?.togglePopover(), onKeyDown: (e) => {
+                    if ((e.key === "Enter" || e.key === " ") && !disabled) {
                         e.preventDefault();
-                        if (!disabled)
-                            setOpen(!open);
+                        dropdownRef.current?.togglePopover();
                     }
                 }, tabIndex: disabled ? -1 : 0, role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", children: [_jsx("span", { className: "PaMultiSelect-values", children: selectedOptions.length > 0 ? (selectedOptions.map((opt) => (_jsxs("span", { className: "PaMultiSelect-chip", children: [opt.label, _jsx("button", { type: "button", className: "PaMultiSelect-chipRemove", onClick: (e) => {
                                         e.stopPropagation();
                                         removeValue(opt.value);
-                                    }, "aria-label": `Remove ${opt.label}`, children: _jsx(X, { size: 12 }) })] }, opt.value)))) : (_jsx("span", { className: "PaMultiSelect-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "PaMultiSelect-icon", size: 16 })] }), open && (_jsx("span", { className: "PaMultiSelect-dropdown", role: "listbox", children: options.map((option) => (_jsxs("span", { className: clsx("PaMultiSelect-option", value.includes(option.value) && "selected", option.disabled && "disabled"), onClick: () => !option.disabled && toggleOption(option.value), onKeyDown: (e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                            e.preventDefault();
-                            if (!option.disabled)
-                                toggleOption(option.value);
-                        }
-                    }, tabIndex: option.disabled ? -1 : 0, role: "option", "aria-selected": value.includes(option.value), children: [_jsx("span", { className: "PaMultiSelect-checkbox", children: value.includes(option.value) && "✓" }), option.label] }, option.value))) }))] }));
+                                    }, "aria-label": `Remove ${opt.label}`, children: _jsx(X, { size: 12 }) })] }, opt.value)))) : (_jsx("span", { className: "PaMultiSelect-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "PaMultiSelect-icon", size: 16 })] }), _jsx("span", { ref: dropdownRef, id: dropdownId.current, className: "PaMultiSelect-dropdown", role: "listbox", popover: "auto", children: options.map((option) => (_jsxs("label", { className: clsx("PaMultiSelect-option", value.includes(option.value) && "selected", option.disabled && "disabled"), children: [_jsx(Checkbox, { checked: value.includes(option.value), onChange: () => toggleOption(option.value), disabled: option.disabled }), option.label] }, option.value))) })] }));
     return (_jsxs("span", { ref: containerRef, className: clsx("PaMultiSelect", error && "error", disabled && "disabled", className), children: [label ? (_jsxs("label", { className: "PaMultiSelect-wrapper", children: [_jsx("span", { className: "PaMultiSelect-label", children: label }), controlElement] })) : (controlElement), error && _jsx("span", { className: "PaMultiSelect-error", children: error })] }));
 }

package/dist/PopupMenu.d.ts

@@ -5,9 +5,8 @@ export interface PopupMenuProps {
     items: MenuNode[];
     className?: string;
     id?: string;
-    autoPosition?: boolean;
-    /** Position of the popup relative to the trigger: 'bottom' (default) or 'top' */
-    position?: "bottom" | "top";
+    /** Position of the popup relative to the trigger. Default is 'auto'. */
+    position?: "auto" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
     /** Optional custom trigger element. If provided, it will be used instead of the default button. */
     children?: ReactNode;
     ref?: Ref<PopupMenuRef>;
@@ -17,4 +16,4 @@ export interface PopupMenuRef {
     show: (event: MouseEvent) => void;
     hide: () => void;
 }
-export declare function PopupMenu({ items, className, id, autoPosition, position, children, ref, }: PopupMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function PopupMenu({ items, className, id, position, children, ref, }: PopupMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/PopupMenu.js

@@ -5,28 +5,13 @@ import { ChevronRight, ChevronsDown } from "lucide-react";
 import { cloneElement, isValidElement, useEffect, useImperativeHandle, useRef, } from "react";
 import { Button } from "./Button.js";
 import { MenuItem } from "./MenuItem.js";
+import { computePopupPosition, setupPopoverPositioning } from "./popup-positioning.js";
 const isPopoverSupported = typeof HTMLElement !== "undefined" && "showPopover" in HTMLElement.prototype;
 if (!isPopoverSupported) {
     console?.error("PopupMenu: Popover API is not supported in this browser.");
 }
 let seq = 0;
-/**
- * Utility function to configure popup positioning
- */
-function setupPopoverPositioning(element, getPosition) {
-    const handleToggle = (e) => {
-        const newState = e.newState;
-        if (newState === "open") {
-            const position = getPosition();
-            element.style.position = "absolute";
-            element.style.top = `${position.top}px`;
-            element.style.left = `${position.left}px`;
-        }
-    };
-    element.addEventListener("toggle", handleToggle);
-    return () => element.removeEventListener("toggle", handleToggle);
-}
-export function PopupMenu({ items, className, id, autoPosition = true, position = "bottom", children, ref, }) {
+export function PopupMenu({ items, className, id, position = "auto", children, ref, }) {
     const menuRef = useRef(null);
     const triggerRef = useRef(null);
     const menuIdRef = useRef(undefined);
@@ -55,28 +40,12 @@ export function PopupMenu({ items, className, id, autoPosition = true, position
     }));
     // Position popover when it opens
     useEffect(() => {
-        if (!autoPosition || !menuRef.current || !triggerRef.current)
-            return;
         const menuEl = menuRef.current;
-        return setupPopoverPositioning(menuEl, () => {
-            const rect = triggerRef.current?.getBoundingClientRect();
-            if (!rect)
-                return { top: 0, left: 0 };
-            if (position === "top") {
-                // Position above the trigger
-                const menuHeight = menuEl.offsetHeight || 150; // Fallback height
-                return {
-                    top: rect.top + window.scrollY - menuHeight - 8,
-                    left: rect.left + window.scrollX,
-                };
-            }
-            // Default: position below
-            return {
-                top: rect.bottom + window.scrollY,
-                left: rect.left + window.scrollX,
-            };
-        });
-    }, [autoPosition, position]);
+        const triggerEl = triggerRef.current;
+        if (!menuEl || !triggerEl)
+            return;
+        return setupPopoverPositioning(menuEl, () => computePopupPosition(triggerEl, menuEl, position, "corner"));
+    }, [position]);
     const triggerProps = {
         popoverTarget: menuIdRef.current,
         popoverTargetAction: "toggle",
@@ -125,20 +94,13 @@ function PopupMenuItemWrapper({ item, onHide }) {
     }
     // Handle submenu positioning with Popover API
     useEffect(() => {
-        if (!subMenuRef.current || !item.subMenu)
-            return;
         const subMenuEl = subMenuRef.current;
-        return setupPopoverPositioning(subMenuEl, () => {
-            const parentEl = subMenuEl.parentElement;
-            if (parentEl) {
-                const rect = parentEl.getBoundingClientRect();
-                return {
-                    top: rect.top,
-                    left: rect.right + 5, // 5px gap
-                };
-            }
-            return { top: 0, left: 0 };
-        });
+        if (!subMenuEl || !item.subMenu)
+            return;
+        const parentEl = subMenuEl.parentElement;
+        if (!parentEl)
+            return;
+        return setupPopoverPositioning(subMenuEl, () => computePopupPosition(parentEl, subMenuEl, "right", "cardinal"));
     }, [item.subMenu]);
     return (_jsxs("div", { className: "PaPopupMenu-item", popoverTargetAction: "toggle", popoverTarget: subMenuId.current, children: [_jsx(MenuItem, { item: itemWithSubmenuHandling }), item.subMenu && (_jsx("div", { className: "PaPopupMenu-submenu", popover: "auto", id: subMenuId.current, ref: subMenuRef, children: item.subMenu.map((subItem) => (_jsx(PopupMenuItemWrapper, { item: subItem, onHide: onHide }, subItem.key))) }))] }));
 }

package/dist/SplitButton.d.ts

@@ -11,6 +11,7 @@ export interface SplitAnchorElProps extends SplitButtonBaseProps, Omit<AnchorElP
 interface SplitButtonBaseProps {
     items: SplitButtonItem[];
     className?: string;
+    position?: "auto" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
 }
 export interface SplitButtonItem {
     label: string;

package/dist/SplitButton.js

@@ -2,26 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "../styles/SplitButton.css";
 import { clsx } from "clsx";
 import { ChevronDown } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { Button, } from "./Button.js";
+import { computePopupPosition, setupPopoverPositioning } from "./popup-positioning.js";
 export function SplitButton(props) {
-    const { items, className, ...buttonProps } = props;
-    const [open, setOpen] = useState(false);
+    const { items, className, position, ...buttonProps } = props;
     const containerRef = useRef(null);
+    const menuRef = useRef(null);
+    const menuId = useRef(`pa-splitbtn-menu-${Math.random().toString(36).substring(2, 9)}`);
     const severity = props.severity ?? "primary";
     const disabled = props.disabled;
-    // Close dropdown when clicking outside
     useEffect(() => {
-        if (!open)
+        const menu = menuRef.current;
+        const container = containerRef.current;
+        if (!menu || !container)
             return;
-        const handleClickOutside = (e) => {
-            if (containerRef.current && !containerRef.current.contains(e.target)) {
-                setOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [open]);
+        return setupPopoverPositioning(menu, () => computePopupPosition(container, menu, position ?? "auto", "corner"));
+    }, [position]);
     const handleItemClick = async (item) => {
         try {
             await item.command();
@@ -35,8 +32,8 @@ export function SplitButton(props) {
             }
         }
         finally {
-            setOpen(false);
+            menuRef.current?.hidePopover();
         }
     };
-    return (_jsxs("div", { ref: containerRef, className: clsx("PaSplitBtn", severity, open && "open", disabled && "disabled", className), children: [_jsx(Button, { ...buttonProps, className: "PaSplitBtn-main" }), _jsx("button", { type: "button", className: "PaSplitBtn-toggle", onClick: () => setOpen(!open), "aria-haspopup": "menu", "aria-expanded": open, children: _jsx(ChevronDown, { className: "PaSplitBtn-toggleIcon" }) }), open && (_jsx("div", { className: "PaSplitBtn-menu", role: "menu", children: items.map((item) => (_jsxs("button", { type: "button", className: clsx("PaSplitBtn-menuItem", item.danger && "danger", item.disabled && "disabled"), onClick: () => void handleItemClick(item), role: "menuitem", disabled: item.disabled, children: [item.icon && _jsx("span", { className: "PaSplitBtn-menuIcon", children: item.icon }), item.label] }, item.label))) }))] }));
+    return (_jsxs("div", { ref: containerRef, className: clsx("PaSplitBtn", severity, disabled && "disabled", className), children: [_jsx(Button, { ...buttonProps, className: "PaSplitBtn-main" }), _jsx("button", { type: "button", className: "PaSplitBtn-toggle", popoverTarget: menuId.current, popoverTargetAction: "toggle", "aria-haspopup": "menu", children: _jsx(ChevronDown, { className: "PaSplitBtn-toggleIcon" }) }), _jsx("div", { ref: menuRef, id: menuId.current, className: "PaSplitBtn-menu", role: "menu", popover: "auto", children: items.map((item) => (_jsxs("button", { type: "button", className: clsx("PaSplitBtn-menuItem", item.danger && "danger", item.disabled && "disabled"), onClick: () => void handleItemClick(item), role: "menuitem", disabled: item.disabled, children: [item.icon && _jsx("span", { className: "PaSplitBtn-menuIcon", children: item.icon }), item.label] }, item.label))) })] }));
 }

package/dist/Tooltip.d.ts

@@ -2,7 +2,7 @@ import "../styles/Tooltip.css";
 import { type ReactNode } from "react";
 export interface TooltipProps {
     content: string;
-    position?: "top" | "bottom" | "left" | "right";
+    position?: "auto" | "top" | "bottom" | "left" | "right";
     children: ReactNode;
     className?: string;
     delay?: number;

package/dist/Tooltip.js

@@ -1,50 +1,29 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import "../styles/Tooltip.css";
 import { clsx } from "clsx";
-import { useEffect, useRef, useState } from "react";
-export function Tooltip({ content, position = "top", children, className, delay = 200, }) {
-    const [visible, setVisible] = useState(false);
-    const [coords, setCoords] = useState({ top: 0, left: 0 });
+import { useEffect, useRef } from "react";
+import { computePopupPosition, setupPopoverPositioning } from "./popup-positioning.js";
+export function Tooltip({ content, position = "auto", children, className, delay = 200, }) {
     const triggerRef = useRef(null);
     const tooltipRef = useRef(null);
     const timeoutRef = useRef(undefined);
     const showTooltip = () => {
         timeoutRef.current = window.setTimeout(() => {
-            setVisible(true);
+            tooltipRef.current?.showPopover();
         }, delay);
     };
     const hideTooltip = () => {
         if (timeoutRef.current) {
             clearTimeout(timeoutRef.current);
         }
-        setVisible(false);
+        tooltipRef.current?.hidePopover();
     };
     useEffect(() => {
-        if (!visible || !triggerRef.current)
+        if (!tooltipRef.current || !triggerRef.current)
             return;
-        const trigger = triggerRef.current;
-        const rect = trigger.getBoundingClientRect();
-        let top = 0;
-        let left = 0;
-        switch (position) {
-            case "top":
-                top = rect.top - 8;
-                left = rect.left + rect.width / 2;
-                break;
-            case "bottom":
-                top = rect.bottom + 8;
-                left = rect.left + rect.width / 2;
-                break;
-            case "left":
-                top = rect.top + rect.height / 2;
-                left = rect.left - 8;
-                break;
-            case "right":
-                top = rect.top + rect.height / 2;
-                left = rect.right + 8;
-                break;
-        }
-        setCoords({ top, left });
-    }, [visible, position]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: "PaTooltip-trigger", onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, children: children }), visible && (_jsx("div", { ref: tooltipRef, className: clsx("PaTooltip", position, className), style: { top: coords.top, left: coords.left }, role: "tooltip", children: content }))] }));
+        const triggerEl = triggerRef.current;
+        const popupEl = tooltipRef.current;
+        return setupPopoverPositioning(popupEl, () => computePopupPosition(triggerEl, popupEl, position, "cardinal"));
+    }, [position]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: triggerRef, className: "PaTooltip-trigger", onMouseEnter: showTooltip, onMouseLeave: hideTooltip, onFocus: showTooltip, onBlur: hideTooltip, children: children }), _jsx("div", { ref: tooltipRef, className: clsx("PaTooltip", className), role: "tooltip", popover: "hint", children: content })] }));
 }

package/dist/alert-stack.d.ts

@@ -14,5 +14,7 @@ interface AlertStackProviderProps {
 }
 export declare function AlertStackProvider({ children, ref }: AlertStackProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useAlertStack(): AlertStackHandle;
-export declare function AlertStack(): import("react/jsx-runtime").JSX.Element | null;
+export declare function AlertStack(props?: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/alert-stack.js

@@ -47,7 +47,7 @@ export function useAlertStack() {
     }, [context.showAlert]);
     return { showAlert: context.showAlert, showError };
 }
-export function AlertStack() {
+export function AlertStack(props) {
     const context = useContext(AlertStackContext);
     const config = useReactUIConfig();
     if (!context) {
@@ -68,5 +68,5 @@ export function AlertStack() {
     ]);
     if (!currentAlert)
         return null;
-    return (_jsx(Alert, { severity: currentAlert.severity, onClose: dismissCurrent, children: currentAlert.message }));
+    return (_jsx(Alert, { className: props?.className, severity: currentAlert.severity, onClose: dismissCurrent, children: currentAlert.message }));
 }

package/dist/popup-positioning.d.ts

@@ -0,0 +1,10 @@
+export type CornerPosition = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+export type VerticalPosition = "top" | "bottom";
+export type CardinalPosition = "top" | "bottom" | "left" | "right";
+export interface PositionResult {
+    top: number;
+    left: number;
+    position: string;
+}
+export declare function setupPopoverPositioning(popupEl: HTMLElement, getPosition: () => PositionResult): () => void;
+export declare function computePopupPosition(triggerEl: HTMLElement, popupEl: HTMLElement, preferredPosition: string, mode: "corner" | "vertical" | "cardinal"): PositionResult;

package/dist/popup-positioning.js

@@ -0,0 +1,160 @@
+export function setupPopoverPositioning(popupEl, getPosition) {
+    const handleToggle = (e) => {
+        const newState = e.newState;
+        if (newState === "open") {
+            const position = getPosition();
+            popupEl.style.position = "absolute";
+            popupEl.style.top = `${position.top}px`;
+            popupEl.style.left = `${position.left}px`;
+        }
+    };
+    popupEl.addEventListener("toggle", handleToggle);
+    return () => popupEl.removeEventListener("toggle", handleToggle);
+}
+export function computePopupPosition(triggerEl, popupEl, preferredPosition, mode) {
+    const triggerRect = triggerEl.getBoundingClientRect();
+    const popupWidth = popupEl.offsetWidth;
+    const popupHeight = popupEl.offsetHeight;
+    const bounds = getConstrainingBounds(triggerEl);
+    let result;
+    switch (mode) {
+        case "corner":
+            result = computeCornerPosition(triggerRect, popupWidth, popupHeight, bounds, preferredPosition);
+            break;
+        case "vertical":
+            result = computeVerticalPosition(triggerRect, popupWidth, popupHeight, bounds, preferredPosition);
+            break;
+        case "cardinal":
+            result = computeCardinalPosition(triggerRect, popupWidth, popupHeight, bounds, preferredPosition);
+            break;
+    }
+    return {
+        position: result.position,
+        top: result.top + window.scrollY,
+        left: result.left + window.scrollX,
+    };
+}
+function getConstrainingBounds(triggerEl) {
+    const dialog = triggerEl.closest("dialog");
+    if (dialog) {
+        const rect = dialog.getBoundingClientRect();
+        return {
+            top: rect.top,
+            left: rect.left,
+            right: rect.right,
+            bottom: rect.bottom,
+        };
+    }
+    return {
+        top: 0,
+        left: 0,
+        right: window.innerWidth,
+        bottom: window.innerHeight,
+    };
+}
+function computeCornerPosition(triggerRect, popupWidth, popupHeight, bounds, preferredPosition) {
+    const spaceTop = triggerRect.top - bounds.top;
+    const spaceBottom = bounds.bottom - triggerRect.bottom;
+    const spaceLeft = triggerRect.left - bounds.left;
+    const spaceRight = bounds.right - triggerRect.right;
+    let position;
+    if (preferredPosition !== "auto") {
+        position = preferredPosition;
+    }
+    else {
+        // Pick corner with most space, prefer bottom-right > bottom-left > top-right > top-left
+        const canBottom = spaceBottom >= popupHeight;
+        const canTop = spaceTop >= popupHeight;
+        const canRight = spaceRight + triggerRect.width >= popupWidth;
+        const canLeft = spaceLeft + triggerRect.width >= popupWidth;
+        if (canBottom && canRight) {
+            position = "bottomRight";
+        }
+        else if (canBottom && canLeft) {
+            position = "bottomLeft";
+        }
+        else if (canTop && canRight) {
+            position = "topRight";
+        }
+        else if (canTop && canLeft) {
+            position = "topLeft";
+        }
+        else {
+            // Fallback: choose based on available space
+            const vertical = spaceBottom >= spaceTop ? "bottom" : "top";
+            const horizontal = spaceRight >= spaceLeft ? "Right" : "Left";
+            position = `${vertical}${horizontal}`;
+        }
+    }
+    let top;
+    let left;
+    if (position.startsWith("bottom")) {
+        top = triggerRect.bottom;
+    }
+    else {
+        top = triggerRect.top - popupHeight;
+    }
+    if (position.endsWith("Right")) {
+        left = triggerRect.left;
+    }
+    else {
+        left = triggerRect.right - popupWidth;
+    }
+    return { position, top, left };
+}
+function computeVerticalPosition(triggerRect, _popupWidth, popupHeight, bounds, preferredPosition) {
+    const spaceTop = triggerRect.top - bounds.top;
+    const spaceBottom = bounds.bottom - triggerRect.bottom;
+    let position;
+    if (preferredPosition !== "auto") {
+        position = preferredPosition;
+    }
+    else {
+        position = spaceBottom >= popupHeight || spaceBottom >= spaceTop ? "bottom" : "top";
+    }
+    const top = position === "bottom" ? triggerRect.bottom : triggerRect.top - popupHeight;
+    const left = triggerRect.left;
+    return { position, top, left };
+}
+function computeCardinalPosition(triggerRect, popupWidth, popupHeight, bounds, preferredPosition) {
+    const spaceTop = triggerRect.top - bounds.top;
+    const spaceBottom = bounds.bottom - triggerRect.bottom;
+    const spaceLeft = triggerRect.left - bounds.left;
+    const spaceRight = bounds.right - triggerRect.right;
+    let position;
+    if (preferredPosition !== "auto") {
+        position = preferredPosition;
+    }
+    else {
+        // Pick direction with most space
+        const spaces = [
+            { dir: "bottom", space: spaceBottom },
+            { dir: "right", space: spaceRight },
+            { dir: "top", space: spaceTop },
+            { dir: "left", space: spaceLeft },
+        ];
+        spaces.sort((a, b) => b.space - a.space);
+        position = spaces[0].dir;
+    }
+    let top;
+    let left;
+    switch (position) {
+        case "top":
+            top = triggerRect.top - popupHeight;
+            left = triggerRect.left + (triggerRect.width - popupWidth) / 2;
+            break;
+        case "bottom":
+            top = triggerRect.bottom;
+            left = triggerRect.left + (triggerRect.width - popupWidth) / 2;
+            break;
+        case "left":
+            top = triggerRect.top + (triggerRect.height - popupHeight) / 2;
+            left = triggerRect.left - popupWidth;
+            break;
+        case "right":
+            top = triggerRect.top + (triggerRect.height - popupHeight) / 2;
+            left = triggerRect.right;
+            break;
+    }
+    return { position, top, left };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/react-ui",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "React UI toolkit for ParoiCMS.",
   "keywords": [
     "paroicms",

package/styles/Alert.css

@@ -4,6 +4,7 @@
 .PaAlert {
   position: relative;
   padding: var(--space-4) var(--space-5);
+  margin: var(--space-4) 0;
   border-left: 4px solid;
   border-radius: var(--radius);
 

package/styles/Dialog.css

@@ -1,32 +1,43 @@
 /* ========================================
    Dialog Component
    ======================================== */
-.PaDialog-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-modal);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.PaDialog-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-}
-
 .PaDialog {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 320px;
   max-width: 90vw;
-  max-height: 90vh;
+  padding: 0;
   background: var(--color-bg-elevated);
+  border: none;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
+
+  &[open] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &:modal {
+    max-height: 90vh;
+    margin: auto;
+  }
+
+  &::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  /* Size variants */
+  &.size-sm {
+    width: 320px;
+    max-width: 100%;
+  }
+
+  &.size-md {
+    width: 480px;
+    max-width: 100%;
+  }
+
+  &.size-lg {
+    width: 640px;
+    max-width: 100%;
+  }
 }
 
 .PaDialog-header {

package/styles/MultiSelect.css

@@ -45,7 +45,7 @@
     border-color: var(--color-primary);
   }
 
-  &.open {
+  &:has(+ .PaMultiSelect-dropdown:popover-open) {
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-light);
   }
@@ -77,7 +77,11 @@
 .PaMultiSelect-chipRemove {
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
   padding: 0;
+  margin: calc(-1 * var(--space-1));
   color: var(--color-text-muted);
   cursor: pointer;
   background: transparent;
@@ -96,12 +100,11 @@
 
 .PaMultiSelect-dropdown {
   position: absolute;
-  top: calc(100% + var(--space-1));
-  right: 0;
-  left: 0;
-  z-index: var(--z-dropdown);
+  inset: auto;
+  z-index: var(--z-popover);
   max-height: 250px;
   padding: var(--space-2);
+  margin: 0;
   overflow-y: auto;
   background: var(--color-bg-elevated);
   border: 1px solid var(--color-border);
@@ -134,24 +137,6 @@
   }
 }
 
-.PaMultiSelect-checkbox {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  font-size: var(--text-xs);
-  color: var(--color-primary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-
-  .PaMultiSelect-option.selected & {
-    color: var(--color-text-inverse);
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-  }
-}
-
 .PaMultiSelect-error {
   font-size: var(--text-xs);
   color: var(--color-danger);

package/styles/SplitButton.css

@@ -68,21 +68,15 @@
 }
 
 .PaSplitBtn-menu {
-  position: absolute;
-  top: calc(100% + var(--space-1));
-  right: 0;
+  inset: auto;
   z-index: var(--z-dropdown);
-  display: none;
   min-width: 180px;
   padding: var(--space-2);
+  margin: 0;
   background: var(--color-bg-elevated);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-md);
-
-  .PaSplitBtn.open & {
-    display: block;
-  }
 }
 
 .PaSplitBtn-menuItem {

package/styles/Tooltip.css

@@ -6,29 +6,15 @@
 }
 
 .PaTooltip {
-  position: fixed;
-  z-index: var(--z-tooltip);
+  inset: auto;
+  z-index: var(--z-popover);
   max-width: 200px;
   padding: var(--space-2) var(--space-3);
+  margin: 0;
   font-size: var(--text-xs);
   color: var(--color-text-inverse);
   pointer-events: none;
   background: var(--color-text);
+  border: none;
   border-radius: var(--radius);
-
-  &.top {
-    transform: translate(-50%, -100%);
-  }
-
-  &.bottom {
-    transform: translateX(-50%);
-  }
-
-  &.left {
-    transform: translate(-100%, -50%);
-  }
-
-  &.right {
-    transform: translateY(-50%);
-  }
 }

package/styles/Tree.css

@@ -16,6 +16,7 @@
 }
 
 .PaTree-node {
+  position: relative;
   padding: var(--space-1) 0;
   list-style: none;
 }
@@ -141,7 +142,7 @@
 .PaTree-children .PaTree-node::before {
   position: absolute;
   top: 0;
-  left: calc(-1 * var(--space-3));
+  left: calc(var(--space-2) + 11px - var(--space-6));
   height: 100%;
   content: "";
   border-left: 1.5px solid var(--color-border);
@@ -150,8 +151,8 @@
 .PaTree-children .PaTree-node::after {
   position: absolute;
   top: 1rem;
-  left: calc(-1 * var(--space-3));
-  width: var(--space-2);
+  left: calc(var(--space-2) + 11px - var(--space-6));
+  width: calc(var(--space-6));
   content: "";
   border-top: 1.5px solid var(--color-border);
 }