@cwellt_software/cwellt-reactjs-lib 1.0.8 → 1.1.0

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import './cw-chip.css';
-export type ChipColorScheme = 'danger' | 'warning' | 'success' | 'info' | 'custom';
+export type ChipColorScheme = 'danger' | 'warning' | 'success' | 'info' | 'neutral' | 'custom';
 export type ChipVariant = 'soft' | 'solid' | 'outline';
 export interface CwChipProps {
     /*** Text content of the chip **/

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,QAAQ,CAAC;AACnF,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,CA0ExC,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,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,CA0ExC,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.d.ts

@@ -5,7 +5,6 @@ export interface CwTagProps {
     styleTag_description?: React.CSSProperties;
     closableTag?: boolean;
     className?: string;
-    classNameTag_description?: string;
     onClickTag?: (clickEvent: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
     onClickClosableTag?: (clickEvent: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
     idTag?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"CwTag.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/text/tag/CwTag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,UAAU;IAC1B,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/B,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACzF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC1C;AAED,wBAAgB,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,2CAkDlE"}
+{"version":3,"file":"CwTag.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/text/tag/CwTag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,UAAU;IAC1B,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/B,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACjF,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,eAAe,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACzF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,mBAAmB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC1C;AAED,wBAAgB,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,2CAyClE"}

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

@@ -1,18 +1,16 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 export interface SortOption<T> {
     key: string;
     label: string;
     sortFn: (a: T, b: T) => number;
 }
-export interface CwCardListProps<T> {
+export interface CwCardListProps<T> extends React.HTMLAttributes<HTMLDivElement> {
     /** Array of data items to display as cards */
     items: T[];
     /** Function that renders a CwCard for each item */
     renderCard: (item: T, index: number) => ReactNode;
     /** Number of cards per page */
     pageSize?: number;
-    /** CSS class name for the container */
-    className?: string;
     /** Layout style - grid or list */
     layout?: 'grid' | 'list';
     /** Default width for each card in the grid (in pixels) */
@@ -28,5 +26,5 @@ export interface CwCardListProps<T> {
     /** Default sort key */
     defaultSortKey?: string;
 }
-export declare function CwCardList<T>({ items, renderCard, pageSize, className, layout, defaultCardWidth, cardGap, isLoading, emptyState, sortOptions, defaultSortKey }: CwCardListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function CwCardList<T>({ items, renderCard, pageSize, layout, defaultCardWidth, cardGap, isLoading, emptyState, sortOptions, defaultSortKey, ...htmlProps }: CwCardListProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CwCardList.d.ts.map

package/dist/src/components/layout/card/CwCardList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwCardList.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/card/CwCardList.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAI5D,MAAM,WAAW,UAAU,CAAC,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe,CAAC,CAAC;IACjC,8CAA8C;IAC9C,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,mDAAmD;IACnD,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,uBAAuB;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,EAC7B,KAAK,EACL,UAAU,EACV,QAAa,EACb,SAAc,EACd,MAAe,EACf,gBAAsB,EACtB,OAAY,EACZ,SAAiB,EACjB,UAAU,EACV,WAAgB,EAChB,cAAc,EACd,EAAE,eAAe,CAAC,CAAC,CAAC,2CAsGpB"}
+{"version":3,"file":"CwCardList.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/card/CwCardList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAI5D,MAAM,WAAW,UAAU,CAAC,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;CAC/B;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E,8CAA8C;IAC9C,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,mDAAmD;IACnD,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9B,uBAAuB;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,EAC7B,KAAK,EACL,UAAU,EACV,QAAa,EACb,MAAe,EACf,gBAAsB,EACtB,OAAY,EACZ,SAAiB,EACjB,UAAU,EACV,WAAgB,EAChB,cAAc,EACd,GAAG,SAAS,EACZ,EAAE,eAAe,CAAC,CAAC,CAAC,2CAsGpB"}

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/confirmation-popup/CwConfirmationPopup.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+export interface Position {
+    top: number;
+    left: number;
+}
+export interface ConfirmationPopupProps {
+    isOpen: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    children: ReactNode;
+}
+export declare function CwConfirmationPopup(props: ConfirmationPopupProps): import("react/jsx-runtime").JSX.Element;
+export default CwConfirmationPopup;
+//# sourceMappingURL=CwConfirmationPopup.d.ts.map

package/dist/src/components/layout/confirmation-popup/CwConfirmationPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwConfirmationPopup.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/confirmation-popup/CwConfirmationPopup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAc,SAAS,EAA+B,MAAM,OAAO,CAAC;AAGlF,MAAM,WAAW,QAAQ;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,sBAAsB;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAChD,QAAQ,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,sBAAsB,2CA6HhE;AAED,eAAe,mBAAmB,CAAC"}

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

@@ -1,5 +1,5 @@
 import { FC, ReactElement, type HTMLProps, type PropsWithChildren } from "react";
-export interface CwDialogProps extends Omit<HTMLProps<PropsWithChildren<HTMLDialogElement>>, "className"> {
+export interface CwDialogProps extends HTMLProps<PropsWithChildren<HTMLDialogElement>> {
     /** Custom footer elements to replace the default footer */
     customFooter?: Array<ReactElement>;
     /** Custom header elements to replace the default header */
@@ -23,6 +23,8 @@ export interface CwDialogProps extends Omit<HTMLProps<PropsWithChildren<HTMLDial
     onClose?: () => void;
     /** If true, the footer will not be displayed */
     hideFooter?: boolean;
+    /*** Reposition the dialog when content size changes after opening. For modals with slow loading content. Default: false **/
+    autoReposition?: 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,EAAqD,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AA0C3I,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW,CAAC;IACxG,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;CACrB;AAWD,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA6RtC,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;AA2C5J,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,CA2TtC,CAAC"}