@cwellt_software/cwellt-reactjs-lib 1.1.5 → 1.1.7

package/dist/src/components/display/text/message/CwMessage.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client"; // Import createRoot
+import { CwIcon } from "../../../../components/display/graphics/icon/CwIcon";
+import { CwAlign } from "../../../../components/layout/align/CwAlign";
+export const CW_DEFAULT_MESSAGE_DURATION = 2000;
+export var CwMessageType;
+(function (CwMessageType) {
+    CwMessageType["ERROR"] = "close-circle";
+    CwMessageType["WARN"] = "warning";
+    CwMessageType["INFO"] = "info-bubble";
+    CwMessageType["SUCCESS"] = "check-circle";
+})(CwMessageType || (CwMessageType = {}));
+export const CwMessage = props => {
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            props.onClose?.();
+        }, props.duration ?? CW_DEFAULT_MESSAGE_DURATION);
+        return () => clearTimeout(timer);
+    }, [props]);
+    return (_jsx("div", { className: "cw-message", "data-message-type": Object.keys(CwMessageType).find(key => CwMessageType[key] === props.messageType), children: _jsxs(CwAlign, { justifyContent: "center", alignItems: "center", children: [props.messageType && _jsx(CwIcon, { iconId: props.messageType.toString() }), props.message] }) }));
+};
+export const useCwMessage = () => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [message, setMessage] = useState("");
+    const [duration, setDuration] = useState();
+    const [type, setType] = useState();
+    const showMessage = (props) => {
+        setMessage(props.message);
+        setDuration(props.duration);
+        setType(props.messageType);
+        setIsVisible(true);
+    };
+    const closeMessage = () => {
+        setIsVisible(false);
+    };
+    const RenderMessage = isVisible ? (_jsx(CwMessage, { message: message, duration: duration, messageType: type, onClose: closeMessage })) : null;
+    return { showMessage, RenderMessage };
+};
+export class CwMessageManager {
+    static instance;
+    messageContainer = null;
+    root;
+    constructor() {
+        this.init();
+    }
+    static getInstance() {
+        if (!CwMessageManager.instance) {
+            CwMessageManager.instance = new CwMessageManager();
+        }
+        return CwMessageManager.instance;
+    }
+    init() {
+        this.messageContainer = document.createElement("div");
+        this.messageContainer.style.setProperty("position", "fixed");
+        this.messageContainer.style.setProperty("pointer-events", "none");
+        this.messageContainer.style.setProperty("width", "100%");
+        this.messageContainer.style.setProperty("top", "0");
+        this.messageContainer.style.setProperty("z-index", "999999");
+        document.body.prepend(this.messageContainer);
+        this.root = createRoot(this.messageContainer); // Create a root at the messageContainer
+    }
+    showMessage(message, type, duration) {
+        const msg = document.createElement("div");
+        this.messageContainer?.prepend(msg);
+        const msgRoot = createRoot(msg); // Create a root for the new message
+        msgRoot.render(_jsx(CwMessage, { message: message, messageType: type, duration: duration, onClose: () => this.closeMessage(msgRoot) }));
+    }
+    closeMessage(msgRoot) {
+        msgRoot.unmount(); // Unmount the message root
+    }
+}
+export function CwDisplayMessage(message, type, duration) {
+    CwMessageManager.getInstance().showMessage(message, type, duration);
+}

package/dist/src/components/display/text/note/CwNote.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { getContrastColor } from '../../../../common/functions/colorManipulation';
+import { CwIcon } from '../../graphics/icon/CwIcon';
+import './cw-note.css';
+/**
+ * CwNote - Inline note component for instructions and contextual content
+ *
+ * @example
+ * <CwNote content="Use the search box to filter results" color="neutral" icon="search" />
+ * <CwNote
+ *   content="Failed to load data"
+ *   variant="solid"
+ *   color="danger"
+ *   icon="warning"
+ *   onDismiss={() => console.log('dismissed')}
+ * />
+ * <CwNote variant="outline" color="success" icon="check">
+ *   <p>Step 1: Configure your project settings</p>
+ *   <p>Step 2: Validate configuration before proceeding</p>
+ * </CwNote>
+ * <CwNote className="custom-class" icon="lightbulb">
+ *   <strong>Important information here</strong>
+ * </CwNote>
+ */
+export const CwNote = ({ content, variant = 'soft', color = 'primary', customColor, fontSize = 'regular', icon, dismissible = false, autoCloseSeconds, className = '', style = {}, children, }) => {
+    const [isVisible, setIsVisible] = useState(true);
+    // Auto-close functionality
+    useEffect(() => {
+        if (autoCloseSeconds && autoCloseSeconds > 0) {
+            const timer = setTimeout(() => {
+                setIsVisible(false);
+            }, autoCloseSeconds * 1000);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [autoCloseSeconds]);
+    // Handle manual dismiss
+    const handleDismiss = (e) => {
+        e.stopPropagation();
+        setIsVisible(false);
+    };
+    // Calculate styles for custom color
+    const messageStyle = React.useMemo(() => {
+        if (customColor) {
+            if (variant === 'outline') {
+                // For outline, customColor is used for border and text
+                return {
+                    color: customColor,
+                    borderColor: customColor,
+                    ...style
+                };
+            }
+            else {
+                // For soft/solid, customColor is used for background and we calculate contrast
+                return {
+                    backgroundColor: customColor,
+                    color: getContrastColor(customColor),
+                    ...style
+                };
+            }
+        }
+        return style;
+    }, [customColor, variant, style]);
+    // Build CSS classes
+    let noteClass = `cw-note cw-note-${fontSize}`;
+    if (dismissible) {
+        noteClass += ' cw-note-dismissible';
+    }
+    if (className) {
+        noteClass += ` ${className}`;
+    }
+    // Don't render if not visible
+    if (!isVisible) {
+        return null;
+    }
+    return (_jsxs("div", { className: noteClass, "data-color": customColor ? undefined : color, "data-variant": variant, style: messageStyle, children: [icon && _jsx(CwIcon, { iconId: icon }), _jsx("div", { className: "cw-note-content", children: children ?? content }), dismissible && (_jsx("button", { className: "cw-note-dismiss-button", onClick: handleDismiss, "aria-label": "Dismiss note", type: "button", children: _jsx(CwIcon, { iconId: "close" }) }))] }));
+};

package/dist/src/components/display/text/tag/CwChip.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { getContrastColor } from '../../../../common/functions/colorManipulation';
+import { CwIcon } from '../../graphics/icon/CwIcon';
+import './cw-chip.css';
+/**
+* CwChip - A simple chip/tag component for displaying labels or categories
+*
+* @example
+* <CwChip label="Active" colorScheme="success" />
+* <CwChip label="High Priority" colorScheme="danger" variant="solid" />
+* <CwChip label="Custom" colorScheme="custom" customColor="#8a2be2" />
+* <CwChip label="Outlined" colorScheme="info" variant="outline" />
+* <CwChip label="Removable" closable onClose={() => console.log('closed')} />
+**/
+export const CwChip = ({ label, colorScheme = 'info', customColor, variant = 'soft', className = '', closable = false, onClose, icon, style = {}, }) => {
+    // Basic validation
+    if (closable && !onClose) {
+        console.warn('CwChip: onClose prop is required when closable is true');
+    }
+    // Calculate styles based on colorScheme, customColor and variant
+    const chipStyle = React.useMemo(() => {
+        if (customColor) {
+            if (variant === 'outline') {
+                // For outline, customColor is used for border and text
+                return {
+                    color: customColor,
+                    borderColor: customColor,
+                    ...style
+                };
+            }
+            else {
+                // For soft/solid, customColor is used for background and we calculate contrast
+                return {
+                    backgroundColor: customColor,
+                    color: getContrastColor(customColor),
+                    ...style
+                };
+            }
+        }
+        return style;
+    }, [colorScheme, customColor, variant, style]);
+    // Handle click on close icon
+    const handleClose = (e) => {
+        e.stopPropagation();
+        if (onClose) {
+            onClose();
+        }
+    };
+    // CSS classes
+    const chipClassNames = [
+        'cw-chip',
+        className,
+        closable ? 'cw-chip-closable' : '',
+    ].filter(Boolean).join(' ');
+    return (_jsxs("span", { className: chipClassNames, "data-color-scheme": colorScheme, "data-variant": variant, style: chipStyle, children: [icon && _jsx(CwIcon, { iconId: icon }), label, closable && (_jsx("button", { className: "cw-chip-close-button", onClick: handleClose, "aria-label": "Remove", type: "button", children: _jsx("span", { className: "cwi-icons cwi-close" }) }))] }));
+};

package/dist/src/components/display/text/tag/CwTag.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CwIcon } from "../../graphics/icon/CwIcon";
+export function CwTag(tagProps) {
+    const hideTag = (event_clickTag) => {
+        const tag = event_clickTag.currentTarget.parentElement;
+        tag?.classList.add("tag-hidden");
+    };
+    const onClickClosableCustomTag = (event_clickClosableT) => {
+        hideTag(event_clickClosableT);
+        if (tagProps.onClickClosableTag != undefined) {
+            tagProps.onClickClosableTag(event_clickClosableT);
+        }
+    };
+    const onClickCustomTag = (event_clickTag) => {
+        // click option interface
+        if (tagProps.onClickTag !== undefined) {
+            tagProps.onClickTag(event_clickTag);
+        }
+    };
+    return (_jsxs("div", { className: "cw-tag", style: tagProps.styleTag, onClick: event_clickTag => onClickCustomTag(event_clickTag), id: tagProps.idTag, ref: tagProps.ref, children: [_jsx("strong", { style: tagProps.styleTag_description, children: tagProps.children }), tagProps.closableTag && (_jsx(CwIcon, { iconId: "close", onClick: event_clickClosableT => onClickClosableCustomTag(event_clickClosableT) }))] }));
+}

package/dist/src/components/display/text/tooltip/CwTooltip.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function CwTooltip(CwelltTooltipProps) {
+    return (_jsxs("div", { className: "cwelltTooltip", children: [_jsx("div", { className: "cwelltTooltipTitle", style: CwelltTooltipProps.tooltipTitleStyle, children: _jsx("span", { children: CwelltTooltipProps.tooltipTitle }) }), CwelltTooltipProps.children] }));
+}

package/dist/src/components/layout/align/CwAlign.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * General purpose aligner flex container, useful for column or row view.
+ * @remarks
+ * ```txt
+ * flexDirection="row" (default):
+ *
+ * <Row A> | - item 1 - item 2 - item 3 |
+ * <Row B> | - item 1 - item 2 - item 3 |
+ *
+ * flexDirection="column":
+ *
+ *   <Col A>    <Col B>
+ * | - item 1 | - item 1 |
+ * | - item 2 | - item 2 |
+ * | - item 3 | - item 3 |
+ *
+ * ```
+ * @example
+ * <CwAlign flexDirection="column">
+ *   <div>
+ *     <h2>ColumnA</h2>
+ *   </div>
+ *   <div>
+ *     <h2>ColumnB</h2>
+ *   </div>
+ * </CwAlign>
+ */
+export function CwAlign(props) {
+    const { alignContent, alignItems, alignSelf, bottom, display, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, cssHeight, justifyContent, left, margin, order, padding, position, right, top, cssWidth, gap, ...divProps } = props;
+    return (_jsx("div", { className: "cw-align", ...divProps, style: {
+            alignContent: alignContent,
+            alignItems: alignItems,
+            alignSelf: alignSelf,
+            bottom: bottom,
+            display: display ?? "flex",
+            flexBasis: flexBasis,
+            flexDirection: flexDirection,
+            flexGrow: flexGrow,
+            flexShrink: flexShrink,
+            flexWrap: flexWrap,
+            height: cssHeight,
+            justifyContent: justifyContent,
+            left: left,
+            margin: margin,
+            order: order,
+            padding: padding,
+            position: position,
+            right: right,
+            top: top,
+            width: cssWidth,
+            gap: gap
+        }, children: props.children }));
+}

package/dist/src/components/layout/card/CwCard.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CwButton } from '../../control/action/button/CwButton';
+import { CwLoading } from '../../display/graphics/loading/CwLoading';
+import { CwChip } from '../../display/text/tag/CwChip';
+import styles from './cw-card.module.css';
+/**
+* CwCard - A simple card component for displaying content in a contained format
+*
+* @example
+* <CwCard
+*   title="Card Title"
+*   subtitle="Card Subtitle"
+*   onEdit={handleEdit}
+*   onDelete={confirmDeletion}
+*   footer="Last updated: 2 days ago"
+*   chips={[
+*     { label: 'Important', colorScheme: 'danger' },
+*     { label: 'Custom', colorScheme: 'custom', customColor: '#8a2be2' }
+*   ]}
+* >
+*   <p>This is the main content of the card.</p>
+* </CwCard>
+**/
+export const CwCard = ({ id, title, subtitle, alignment = 'center', children, footer, onEdit, onDelete, extraActions, className = '', clickable = false, onClick, isLoading = false, disabled = false, style, chips = [], variant = "border", direction = "column", }) => {
+    // Construct class names using CSS modules
+    const cardClassNames = [
+        'cw-card',
+        styles.card,
+        className,
+        clickable ? styles.clickable : '',
+        disabled ? styles.disabled : '',
+        isLoading ? styles.loading : '',
+    ].filter(Boolean).join(' ');
+    // Handle click event when card is clickable
+    const handleClick = () => {
+        if (clickable && onClick && !disabled && !isLoading) {
+            onClick();
+        }
+    };
+    // Determine if actions should be rendered
+    const hasActions = onEdit || onDelete || extraActions;
+    // Determine if header should be rendered
+    const hasHeader = title || subtitle || (hasActions && direction === "column");
+    // Determine if chips should be rendered
+    const hasChips = chips.length > 0;
+    // Determine if footer should be rendered
+    const hasFooter = hasChips || footer || (hasActions && direction === "row");
+    // Actions component to reuse
+    const ActionsComponent = hasActions && !disabled ? (_jsxs("div", { className: styles.actions, children: [extraActions ?? null, onEdit && _jsx(CwButton, { variant: "icon", icon: "edit", onClick: onEdit }), onDelete && _jsx(CwButton, { variant: "icon", icon: "delete", color: "danger", onClick: onDelete })] })) : null;
+    return (_jsxs("div", { ...(id && { id }), className: cardClassNames, ...(style && { style }), ...(clickable && {
+            role: 'button',
+            tabIndex: 0,
+            onClick: handleClick,
+        }), "data-variant": variant, "data-direction": direction, children: [hasHeader && (_jsxs("header", { children: [(title || subtitle) && (_jsxs("div", { className: styles.headerContent, "data-alignment": alignment, children: [title && _jsx("h5", { children: title }), subtitle && _jsx("strong", { children: subtitle })] })), direction === "column" && ActionsComponent] })), _jsx("div", { className: styles.content, children: children }), hasFooter && (_jsxs("footer", { children: [hasChips && (_jsx("div", { className: styles.footerTags, children: chips.map((chip, index) => (_jsx(CwChip, { label: chip.label, colorScheme: chip.colorScheme, className: styles.chip, ...(chip.customColor && { customColor: chip.customColor }), ...(chip.variant && { variant: chip.variant }), ...(chip.icon && { icon: chip.icon }) }, index))) })), footer && (_jsx("div", { className: styles.footerContent, children: footer }))] })), direction === "row" && ActionsComponent, isLoading && (_jsx("div", { className: styles.loadingOverlay, children: _jsx(CwLoading, { isLoading: isLoading, size: "small" }) }))] }));
+};

package/dist/src/components/layout/card/CwCardList.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { CwLoading } from '../../display/graphics/loading/CwLoading';
+import styles from './cw-card-list.module.css';
+export function CwCardList({ items, renderCard, pageSize = 10, className = '', layout = 'grid', defaultCardWidth = 320, cardGap = 16, isLoading = false, emptyState, sortOptions = [], defaultSortKey }) {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [sortKey, setSortKey] = useState(defaultSortKey || sortOptions[0]?.key || '');
+    const [sortDirection, setSortDirection] = useState('asc');
+    // Sort items based on selected criteria
+    const sortedItems = useMemo(() => {
+        if (!sortKey || sortOptions.length === 0)
+            return items;
+        const sortOption = sortOptions.find(option => option.key === sortKey);
+        if (!sortOption)
+            return items;
+        const sorted = [...items].sort(sortOption.sortFn);
+        return sortDirection === 'desc' ? sorted.reverse() : sorted;
+    }, [items, sortKey, sortDirection, sortOptions]);
+    const totalPages = Math.ceil(sortedItems.length / pageSize);
+    const startIndex = (currentPage - 1) * pageSize;
+    const visibleItems = sortedItems.slice(startIndex, startIndex + pageSize);
+    // Reset to first page when sorting changes
+    const handleSortChange = (newSortKey) => {
+        if (newSortKey === sortKey) {
+            setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
+        }
+        else {
+            setSortKey(newSortKey);
+            setSortDirection('asc');
+        }
+        setCurrentPage(1);
+    };
+    const gridStyle = {
+        '--card-width': `${defaultCardWidth}px`,
+        '--card-gap': `${cardGap}px`
+    };
+    return (_jsxs("div", { className: `${className}`, children: [sortOptions.length > 0 && (_jsxs("div", { className: styles.sortControls, children: [_jsx("label", { htmlFor: "cardlist-sort-select", children: "Sort by:" }), _jsx("select", { id: "cardlist-sort-select", value: sortKey, onChange: (e) => handleSortChange(e.target.value), className: styles.sortSelect, children: sortOptions.map(option => (_jsx("option", { value: option.key, children: option.label }, option.key))) }), _jsx("button", { onClick: () => setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc'), className: `cw-button-icon ${sortDirection === 'asc' ? 'cwi-arrow-up' : 'cwi-arrow-down'}`, title: `Sort ${sortDirection === 'asc' ? 'descending' : 'ascending'}` })] })), isLoading ? (_jsx("div", { className: styles.loading, children: _jsx(CwLoading, { isLoading: isLoading }) })) : sortedItems.length === 0 ? (_jsx("div", { className: styles.emptyState, children: emptyState || _jsx("p", { children: "No items to display" }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: `${styles.cardContainer}`, "data-layout": layout, style: gridStyle, children: visibleItems.map((item, index) => (_jsx("div", { className: styles.cardWrapper, children: renderCard(item, index) }, index))) }), totalPages > 1 && (_jsxs("div", { className: styles.pagination, children: [_jsx("button", { disabled: currentPage === 1, onClick: () => setCurrentPage(p => Math.max(1, p - 1)), className: "cw-button-icon cwi-chevron-left" }), _jsxs("span", { className: styles.pageInfo, children: [currentPage, " of ", totalPages] }), _jsx("button", { disabled: currentPage === totalPages, onClick: () => setCurrentPage(p => Math.min(totalPages, p + 1)), className: "cw-button-icon cwi-chevron-right" })] }))] }))] }));
+}

package/dist/src/components/layout/dialog/CwDialog.js

@@ -0,0 +1,255 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import styles from "./cw-dialog.module.css";
+// Helper function to parse size values
+const parseSize = (size) => {
+    if (typeof size === 'number')
+        return { value: size, unit: 'px' };
+    // Match numeric value and unit
+    const match = String(size).match(/^([\d.]+)(\D+)$/);
+    if (match) {
+        const unit = match[2];
+        // Only allow px, rem, vw, vh
+        if (['px', 'rem', 'vw', 'vh'].includes(unit)) {
+            return { value: parseFloat(match[1]), unit };
+        }
+    }
+    // Default to pixels if no unit specified or unit not supported
+    return { value: parseFloat(String(size)), unit: 'px' };
+};
+// Helper to convert size to px for calculations
+const convertToPx = (size) => {
+    switch (size.unit) {
+        case 'px': return size.value;
+        case 'rem': return size.value * 16; // Assuming 1rem = 16px
+        case 'vh': return (window.innerHeight * size.value) / 100;
+        case 'vw': return (window.innerWidth * size.value) / 100;
+        default: return size.value; // Default fallback
+    }
+};
+// Function to convert from px back to original unit
+const convertFromPx = (px, unit) => {
+    switch (unit) {
+        case 'px': return px;
+        case 'rem': return px / 16;
+        case 'vh': return (px * 100) / window.innerHeight;
+        case 'vw': return (px * 100) / window.innerWidth;
+        default: return px;
+    }
+};
+export const CwDialog = props => {
+    const { customFooter, customHeader, headline, width, height, dialogSize, scrim, onSave, onClose, hideFooter, children, open, autoReposition = false, ...domProps } = props;
+    const dialogRef = useRef(null);
+    const initialSetup = useMemo(() => {
+        // Default width and height with units
+        const defaultWidth = 800;
+        // Priority: direct props > dialogSize > default values
+        const initialWidth = width !== undefined
+            ? width
+            : dialogSize?.width !== undefined
+                ? dialogSize.width
+                : defaultWidth;
+        const initialHeight = height !== undefined
+            ? height
+            : dialogSize?.height !== undefined
+                ? dialogSize.height
+                : undefined; // Undefined for autoHeight
+        // Determine if height is automatic when height is not provided
+        const isAutoHeight = initialHeight === undefined;
+        // Parse the sizes to separate value and unit
+        const parsedWidth = parseSize(initialWidth);
+        const parsedHeight = isAutoHeight
+            ? { value: 0, unit: 'auto' }
+            : parseSize(initialHeight);
+        // Convert to px for internal calculations
+        const initialWidthPx = convertToPx(parsedWidth);
+        const initialHeightPx = isAutoHeight ? 0 : convertToPx(parsedHeight);
+        // Use estimated height for initial positioning when autoHeight is true
+        const initialEstimatedHeight = isAutoHeight ? 300 : initialHeightPx;
+        const initialDialogSize = {
+            width: initialWidthPx,
+            height: initialHeightPx,
+            widthUnit: parsedWidth.unit,
+            heightUnit: parsedHeight.unit,
+            autoHeight: isAutoHeight
+        };
+        const initialPosition = {
+            x: window.document.body.clientWidth / 2 - initialWidthPx / 2,
+            y: window.document.body.clientHeight / 2 - initialEstimatedHeight / 2
+        };
+        return { initialDialogSize, initialPosition };
+    }, [width, height, dialogSize]); // Only recalculate when these props change
+    const [isDragging, setIsDragging] = useState(false);
+    const [resizeDirection, setResizeDirection] = useState(null);
+    const [position, setPosition] = useState(initialSetup.initialPosition);
+    const [size, setSize] = useState(initialSetup.initialDialogSize);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    // scrim is true by default
+    const hasScrim = scrim !== false;
+    // Adjust position after the dialog is rendered when using autoHeight
+    useLayoutEffect(() => {
+        let resizeObserver = null;
+        if (size.autoHeight && dialogRef.current && open) {
+            const recalculatePosition = () => {
+                const actualHeight = dialogRef.current?.offsetHeight;
+                if (actualHeight && actualHeight > 0) {
+                    setPosition({
+                        x: Math.max(0, window.document.body.clientWidth / 2 - size.width / 2),
+                        y: Math.max(0, window.document.body.clientHeight / 2 - actualHeight / 2)
+                    });
+                }
+            };
+            setTimeout(recalculatePosition, 0);
+            // For modals with delayed loading content (inner fetchs and similar)
+            if (autoReposition) {
+                resizeObserver = new ResizeObserver(() => {
+                    const dialog = dialogRef.current;
+                    if (!dialog)
+                        return;
+                    const dialogRect = dialog.getBoundingClientRect();
+                    const viewportHeight = window.innerHeight;
+                    const margin = 50;
+                    // Only reposition if modal tries to grow over window limits
+                    const isOverflowingTop = dialogRect.top < margin;
+                    const isOverflowingBottom = dialogRect.bottom > viewportHeight - margin;
+                    if (isOverflowingTop || isOverflowingBottom) {
+                        recalculatePosition();
+                    }
+                });
+                resizeObserver.observe(dialogRef.current);
+            }
+        }
+        return () => {
+            resizeObserver?.disconnect();
+        };
+    }, [size.autoHeight, open, autoReposition]);
+    useEffect(() => {
+        const handleMouseMove = (e) => {
+            if (isDragging) {
+                const parent = dialogRef.current?.parentElement;
+                if (parent) {
+                    const parentRect = parent.getBoundingClientRect();
+                    const dialogRect = dialogRef.current?.getBoundingClientRect();
+                    if (dialogRect) {
+                        const minVisiblePx = 48;
+                        const newX = e.clientX - dragStart.x;
+                        const newY = e.clientY - dragStart.y;
+                        const clampedX = Math.min(Math.max(newX, minVisiblePx - dialogRect.width), parentRect.width - minVisiblePx);
+                        const clampedY = Math.min(Math.max(newY, minVisiblePx - dialogRect.height), parentRect.height - minVisiblePx);
+                        setPosition({ x: clampedX, y: clampedY });
+                    }
+                }
+            }
+            else if (resizeDirection) {
+                const parent = dialogRef.current?.parentElement;
+                if (parent) {
+                    const parentRect = parent.getBoundingClientRect();
+                    const dialogRect = dialogRef.current?.getBoundingClientRect();
+                    if (dialogRect) {
+                        let newWidth = size.width;
+                        let newHeight = size.height;
+                        let newX = position.x;
+                        let newY = position.y;
+                        const minVisiblePx = 64;
+                        const minSize = 100;
+                        // Only allow horizontal resizing if autoHeight is true
+                        if (!size.autoHeight || (!resizeDirection.includes("n") && !resizeDirection.includes("s"))) {
+                            // Logic for horizontal resizing
+                            if (resizeDirection.includes("w")) {
+                                const dx = e.clientX - position.x;
+                                newWidth = Math.max(size.width - dx, minSize);
+                                newX = Math.min(Math.max(position.x + dx, minVisiblePx - newWidth), position.x + size.width - minSize);
+                            }
+                            if (resizeDirection.includes("e")) {
+                                newWidth = Math.min(Math.max(e.clientX - position.x, minSize), parentRect.width - position.x + dialogRect.width - minVisiblePx);
+                            }
+                        }
+                        // Only apply vertical resizing if autoHeight is false
+                        if (!size.autoHeight) {
+                            if (resizeDirection.includes("n")) {
+                                const dy = e.clientY - position.y;
+                                newHeight = Math.max(size.height - dy, minSize);
+                                newY = Math.min(Math.max(position.y + dy, minVisiblePx - newHeight), position.y + size.height - minSize);
+                            }
+                            if (resizeDirection.includes("s")) {
+                                newHeight = Math.min(Math.max(e.clientY - position.y, minSize), parentRect.height - position.y + dialogRect.height - minVisiblePx);
+                            }
+                        }
+                        // Ensure the modal stays within bounds after resizing
+                        newX = Math.min(Math.max(newX, minVisiblePx - newWidth), parentRect.width - minVisiblePx);
+                        newY = Math.min(Math.max(newY, minVisiblePx - newHeight), parentRect.height - minVisiblePx);
+                        // Update state maintaining original units
+                        setSize({
+                            width: newWidth,
+                            height: newHeight,
+                            widthUnit: size.widthUnit,
+                            heightUnit: size.heightUnit,
+                            autoHeight: size.autoHeight
+                        });
+                        setPosition({ x: newX, y: newY });
+                    }
+                }
+            }
+        };
+        const handleMouseUp = () => {
+            setIsDragging(false);
+            setResizeDirection(null);
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [isDragging, resizeDirection, dragStart, position, size]);
+    const handleMouseDown = useCallback((e) => {
+        setIsDragging(true);
+        setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+    }, [position]);
+    const handleResizeMouseDown = useCallback((direction) => (e) => {
+        e.stopPropagation();
+        setResizeDirection(direction);
+    }, []);
+    const handleScrimClick = useCallback((e) => {
+        if (e.target === e.currentTarget && onClose) {
+            onClose();
+        }
+    }, [onClose]);
+    const header = useMemo(() => (_jsxs("header", { onMouseDown: handleMouseDown, children: [_jsx("span", { children: headline }), customHeader || (_jsx("button", { className: styles["cw-dialog-button-close"], onClick: onClose }))] })), [handleMouseDown, headline, customHeader, onClose]);
+    const content = useMemo(() => (_jsx("section", { children: children })), [children]);
+    const footer = useMemo(() => (_jsx("footer", { children: customFooter || (_jsx("button", { className: "cw-button-icon cwi-save", onClick: onSave })) })), [customFooter, onSave]);
+    const resizeHandles = useMemo(() => size.autoHeight
+        ? [
+            // Only horizontal handles if autoHeight is true
+            _jsx("div", { "data-handle-e": true, onMouseDown: handleResizeMouseDown("e") }, "handle-e"),
+            _jsx("div", { "data-handle-w": true, onMouseDown: handleResizeMouseDown("w") }, "handle-w")
+        ]
+        : [
+            // All handles if autoHeight is false
+            _jsx("div", { "data-handle-n": true, onMouseDown: handleResizeMouseDown("n") }, "handle-n"),
+            _jsx("div", { "data-handle-s": true, onMouseDown: handleResizeMouseDown("s") }, "handle-s"),
+            _jsx("div", { "data-handle-e": true, onMouseDown: handleResizeMouseDown("e") }, "handle-e"),
+            _jsx("div", { "data-handle-w": true, onMouseDown: handleResizeMouseDown("w") }, "handle-w"),
+            _jsx("div", { "data-handle-ne": true, onMouseDown: handleResizeMouseDown("ne") }, "handle-ne"),
+            _jsx("div", { "data-handle-nw": true, onMouseDown: handleResizeMouseDown("nw") }, "handle-nw"),
+            _jsx("div", { "data-handle-se": true, onMouseDown: handleResizeMouseDown("se") }, "handle-se"),
+            _jsx("div", { "data-handle-sw": true, onMouseDown: handleResizeMouseDown("sw") }, "handle-sw")
+        ], [size.autoHeight, handleResizeMouseDown]);
+    const displayDimensions = useMemo(() => {
+        // Prepare width and height with original units for display
+        const displayWidth = `${convertFromPx(size.width, size.widthUnit)}${size.widthUnit}`;
+        // If autoHeight, don't specify height and let it adapt to content
+        const displayHeight = size.autoHeight
+            ? 'auto'
+            : `${convertFromPx(size.height, size.heightUnit)}${size.heightUnit}`;
+        return { displayWidth, displayHeight };
+    }, [size.width, size.height, size.widthUnit, size.heightUnit, size.autoHeight]);
+    const dialogContent = (_jsx("div", { "data-has-scrim": hasScrim, className: styles["cw-dialog-main"], onClick: handleScrimClick, children: _jsxs("dialog", { ...domProps, ref: dialogRef, style: {
+                left: `${position.x}px`,
+                top: `${position.y}px`,
+                width: displayDimensions.displayWidth,
+                height: displayDimensions.displayHeight
+            }, children: [header, content, hideFooter !== true && footer, resizeHandles] }) }));
+    return open ? createPortal(dialogContent, document.body) : null;
+};