@cwellt_software/cwellt-reactjs-lib 1.2.13 → 1.2.14

package/dist/src/components/display/text/label/CwLabel.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CwAlign } from "../../../../components/layout/align/CwAlign";
+/**
+ * Label for form controls.
+ * @example
+ * ```tsx
+ * <CwLabelForm justify="right" >Username:</CwLabelForm>
+ * ```
+ */
+export function CwLabel(props) {
+    const { justify, text, labelHeight, labelWidth, alignProps, margin, ...labelProps } = props;
+    return (_jsx("span", { className: "cw-label", children: _jsx(CwAlign, { ...alignProps, children: _jsx("label", { style: { textAlign: justify, width: labelWidth, height: labelHeight, margin: margin ?? "1px 0 0 0" }, ...labelProps, children: labelProps.children ?? text }) }) }));
+}

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.d.ts

@@ -10,7 +10,7 @@ export interface CwNoteProps {
     /** Custom color - if provided, overrides color prop */
     customColor?: string;
     /** Size of the message */
-    fontSize?: 'small' | 'regular' | 'large';
+    fontSize?: 'small' | 'regular' | 'medium' | 'large' | 'huge';
     /** Optional icon from your custom font (always rendered if provided) */
     icon?: string;
     /** Whether the note can be dismissed manually (default: false) */

package/dist/src/components/display/text/note/CwNote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwNote.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/text/note/CwNote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,WAAW;IAC3B,uDAAuD;IACvD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACvC,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC1E,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IACzC,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmGxC,CAAC"}
+{"version":3,"file":"CwNote.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/text/note/CwNote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,WAAW;IAC3B,uDAAuD;IACvD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACvC,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC1E,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7D,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmGxC,CAAC"}

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.d.ts

@@ -4,7 +4,7 @@ export type ChipColorScheme = 'danger' | 'warning' | 'success' | 'info' | 'neutr
 export type ChipVariant = 'soft' | 'solid' | 'outline';
 export interface CwChipProps {
     /*** Text content of the chip **/
-    label: string;
+    label?: string;
     /*** Predefined color scheme of the chip **/
     colorScheme?: ChipColorScheme;
     /*** Custom color (only used when colorScheme is 'custom') **/

package/dist/src/components/display/text/tag/CwChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwChip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/text/tag/CwChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/F,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvD,MAAM,WAAW,WAAW;IAC3B,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiExC,CAAC"}
+{"version":3,"file":"CwChip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/text/tag/CwChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/F,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEvD,MAAM,WAAW,WAAW;IAC3B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAiExC,CAAC"}

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.d.ts

@@ -4,5 +4,8 @@ export interface CwTooltipProps {
     tooltipTitle?: any;
     tooltipTitleStyle?: React.CSSProperties;
 }
-export declare function CwTooltip(CwelltTooltipProps: React.PropsWithChildren<CwTooltipProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Use CwTooltipNew instead.
+ * @see CwTooltipNew
+ */ export declare function CwTooltip(CwelltTooltipProps: React.PropsWithChildren<CwTooltipProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CwTooltip.d.ts.map

package/dist/src/components/display/text/tooltip/CwTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwTooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/text/tooltip/CwTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAE9B,QAAQ,CAAC,EAAE,GAAG,CAAC;IAEf,YAAY,CAAC,EAAE,GAAG,CAAC;IAEnB,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACxC;AAED,wBAAgB,SAAS,CAAC,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,2CASpF"}
+{"version":3,"file":"CwTooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/text/tooltip/CwTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAc;IAE9B,QAAQ,CAAC,EAAE,GAAG,CAAC;IAEf,YAAY,CAAC,EAAE,GAAG,CAAC;IAEnB,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACxC;AACD;;;GAGG,CAAA,wBAAgB,SAAS,CAAC,kBAAkB,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,2CASvF"}

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.d.ts

@@ -25,6 +25,8 @@ export interface CwDialogProps extends HTMLProps<PropsWithChildren<HTMLDialogEle
     hideFooter?: boolean;
     /*** Reposition the dialog when content size changes after opening. For modals with slow loading content. Default: false **/
     autoReposition?: boolean;
+    /** If true, the save button will be disabled */
+    disableSave?: boolean;
 }
 export declare const CwDialog: FC<CwDialogProps>;
 //# sourceMappingURL=CwDialog.d.ts.map

package/dist/src/components/layout/dialog/CwDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwDialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/dialog/CwDialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAsE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AA4C5J,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrF,2DAA2D;IAC3D,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACnC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACnC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,kIAAkI;IAClI,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,uEAAuE;IACvE,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACnE,uFAAuF;IACvF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4HAA4H;IAC5H,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB;AAWD,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAkWtC,CAAC"}
+{"version":3,"file":"CwDialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/dialog/CwDialog.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAsE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AA4C5J,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrF,2DAA2D;IAC3D,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACnC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IACnC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,kIAAkI;IAClI,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,uEAAuE;IACvE,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IACnE,uFAAuF;IACvF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4HAA4H;IAC5H,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAWD,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAsYtC,CAAC"}