@cwellt_software/cwellt-reactjs-lib 1.0.9 → 1.1.1

package/dist/src/components/display/data/table/CwTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/data/table/CwTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,MAAM,CAAC,CAAC,GAAG,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,QAAQ;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CAEnB;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,wBAAgB,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,EAChC,OAAO,EACP,IAAI,EACJ,UAAkB,EAClB,eAAiC,EACjC,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,KAAK,EACL,kBAAkB,EAClB,EAAE,EACF,UAA8C,EAC9C,MAAyB,EACzB,OAAe,EACf,YAAY,EACZ,YAAoB,GACpB,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,2CA+Q3B"}
+{"version":3,"file":"CwTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/data/table/CwTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,MAAM,CAAC,CAAC,GAAG,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,QAAQ;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CAEnB;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,wBAAgB,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,EAChC,OAAO,EACP,IAAI,EACJ,UAAkB,EAClB,eAAiC,EACjC,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,KAAK,EACL,kBAAkB,EAClB,EAAE,EACF,UAA8C,EAC9C,MAAyB,EACzB,OAAe,EACf,YAAY,EACZ,YAAoB,GACpB,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,2CA0Q3B"}

package/dist/src/components/display/data/table/CwTable.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useState } from "react";
+/**
+ * A reusable and customizable table component.
+ *
+ * @param props - Component props to configure columns, data, styles, pagination, expanded rows, and more.
+ *
+ * @example
+ * const columns: Column<User>[] = [
+ *   {
+ *     title: 'Name',
+ *     dataIndex: 'name',
+ *     key: 'name',
+ *     sortable: true, // Column is sortable
+ *     width: 100 // You can define the width of the column
+ *   },
+ *   {
+ *     title: 'Age',
+ *     dataIndex: 'age',
+ *     key: 'age',
+ *     sortable: true,
+ *     render: (item) => <span>{item.age} years</span> // Custom rendering
+ *   },
+ *   {
+ *     title: 'Address',
+ *     dataIndex: 'address',
+ *     key: 'address',
+ *     render: (item) => (
+ *       <a href={`https://maps.google.com/?q=${encodeURIComponent(item.address)}`} target="_blank" rel="noreferrer">
+ *         {item.address}
+ *       </a>
+ *     ) // Link rendering
+ *   }
+ * ];
+ *
+ * const data:User[] = [
+ *   { key: '1', name: 'Mike', age: 32, address: '10 Downing Street' },
+ *   { key: '2', name: 'John', age: 42, address: '11 Downing Street' },
+ *   { key: '3', name: 'Andres', age: 33, address: '12 Downing Street' },
+ *   { key: '4', name: 'Gabriel', age: 22, address: '13 Downing Street' },
+ *   { key: '5', name: 'Sergio', age: 47, address: '14 Downing Street' },
+ *   { key: '6', name: 'Zacarias', age: 61, address: '15 Downing Street' }
+ * ];
+ *
+ * const generateExpandedContent = (record) => (
+ *   <div>
+ *     Custom expanded content for {record.name}
+ *   </div>
+ * );
+ *
+ * <CwTable<User>
+ *   columns={columns}
+ *   data={data}
+ *   pagination={true}
+ *   pageSizeOptions={[3, 5, 10]} // Optional, defaults to [5, 10, 20, 50]
+ *   expandedRowRender={generateExpandedContent}
+ *   onExpand={(item) => console.log('Expanded:', item)}
+ *   rowKey="key" // Optional, defaults to 'key'
+ *   textNoData="No data available" // Optional message when no data
+ *   loading={false} // Optional, shows loading indicator
+ *   scrollHeight={300} // Optional scroll height, defaults to 300
+ *   stickyHeader={true} // Optional, makes header sticky on scroll
+ *   classNameContainer="my-table-wrapper" // Optional wrapper class
+ *   className="my-table" // Optional table class
+ *   classNameRow="my-table-row" // Optional class for each row
+ *   id="custom-table-id" // Optional ID for the container
+ *   style={{ border: '1px solid #ccc' }} // Optional inline styles
+ * />
+ *
+ * @returns React component
+ */
+export function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, }) {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [expandedRowKey, setExpandedRowKey] = useState(null);
+    const [sortConfig, setSortConfig] = useState({
+        key: null,
+        direction: "asc"
+    });
+    const [localItemsPerPage, setLocalItemsPerPage] = useState(pageSizeOptions[0]);
+    const [columnWidths, setColumnWidths] = useState(() => columns.reduce((acc, col) => {
+        if (col.width)
+            acc[col.key] = col.width;
+        return acc;
+    }, {}));
+    const handleItemsPerPageChange = useCallback((e) => {
+        setLocalItemsPerPage(parseInt(e.target.value, 10));
+        setCurrentPage(1);
+    }, []);
+    const handleRowExpand = useCallback((item) => {
+        const itemKey = item[rowKey];
+        setExpandedRowKey((prev) => (prev === itemKey ? null : itemKey));
+        onExpand?.(item);
+    }, [rowKey, onExpand]);
+    const handleSort = useCallback((columnKey) => {
+        setSortConfig(prev => {
+            if (prev.key !== columnKey)
+                return { key: columnKey, direction: "asc" };
+            if (prev.direction === "asc")
+                return { key: columnKey, direction: "desc" };
+            return { key: null, direction: "asc" };
+        });
+    }, []);
+    const sortedData = useMemo(() => {
+        if (!data || data.length === 0)
+            return [];
+        const dataCopy = [...data];
+        if (sortConfig.key) {
+            dataCopy.sort((a, b) => {
+                const aVal = a[sortConfig.key];
+                const bVal = b[sortConfig.key];
+                return (aVal < bVal ? -1 : aVal > bVal ? 1 : 0) * (sortConfig.direction === "asc" ? 1 : -1);
+            });
+        }
+        return dataCopy;
+    }, [data, sortConfig]);
+    const paginatedData = useMemo(() => {
+        if (!sortedData)
+            return [];
+        if (!pagination)
+            return sortedData;
+        const start = (currentPage - 1) * localItemsPerPage;
+        return sortedData.slice(start, start + localItemsPerPage);
+    }, [sortedData, currentPage, localItemsPerPage, pagination]);
+    const totalPages = useMemo(() => {
+        return pagination ? Math.ceil(sortedData.length / localItemsPerPage) : 1;
+    }, [sortedData, localItemsPerPage, pagination]);
+    const handlePageChange = (page) => {
+        if (page >= 1 && page <= totalPages)
+            setCurrentPage(page);
+    };
+    const startResize = (e, key) => {
+        e.preventDefault();
+        const startX = e.clientX;
+        const startWidth = e.target.parentElement?.offsetWidth || 0;
+        const onMouseMove = (moveEvent) => {
+            const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50); // mínimo 50px
+            setColumnWidths(prev => ({ ...prev, [key]: newWidth }));
+        };
+        const onMouseUp = () => {
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", onMouseUp);
+        };
+        window.addEventListener("mousemove", onMouseMove);
+        window.addEventListener("mouseup", onMouseUp);
+    };
+    const scrollContainerStyle = useMemo(() => {
+        if (stickyHeader || scrollHeight) {
+            return {
+                maxHeight: scrollHeight ?? 300,
+                overflowY: "auto"
+            };
+        }
+        return {}; // sin altura ni scroll
+    }, [stickyHeader, scrollHeight]);
+    const getColSpan = () => columns.length + (expandedRowRender ? 1 : 0);
+    const hasClassNameRow = (item) => {
+        return typeof item === 'object' && item !== null && 'classNameRow' in item;
+    };
+    const renderTableBody = () => {
+        if (loading) {
+            return (_jsx("tr", { children: _jsx("td", { colSpan: getColSpan(), children: _jsx("div", { children: "Loading data..." }) }) }));
+        }
+        if (!paginatedData || paginatedData.length === 0) {
+            return (_jsx("tr", { children: _jsx("td", { colSpan: getColSpan(), className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
+        }
+        return paginatedData.map(item => {
+            const itemKey = item[rowKey];
+            if (!itemKey)
+                console.warn("Missing row key for item", item);
+            return (_jsxs(React.Fragment, { children: [_jsxs("tr", { className: `${classNameRow ?? ""} ${hasClassNameRow(item) ? item.classNameRow : ""}`, children: [expandedRowRender && (_jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: _jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey
+                                        ? "cwi-chevron-down"
+                                        : "cwi-chevron-right"}` }) })), columns.map(col => (_jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex]) : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (_jsx("tr", { className: "cw-table-row-expanded", children: _jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
+        });
+    };
+    return (_jsxs("div", { id: id, className: `cw-table-container ${classNameContainer ?? ""}`, style: style, children: [_jsx("div", { style: scrollContainerStyle, children: _jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [_jsx("thead", { style: stickyHeader
+                                ? { position: "sticky", top: 0, background: "white", zIndex: 2 }
+                                : undefined, children: _jsxs("tr", { children: [expandedRowRender && _jsx("th", {}), columns.map(col => (_jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${sortConfig.key === col.dataIndex
+                                            ? sortConfig.direction
+                                            : ""}`.trim(), style: {
+                                            cursor: col.sortable ? "pointer" : "default",
+                                            userSelect: "none",
+                                            width: columnWidths[col.key] ?? col.width,
+                                            ...((col.width || columnWidths[col.key]) && {
+                                                minWidth: 50,
+                                                maxWidth: columnWidths[col.key] ?? col.width
+                                            }),
+                                        }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [_jsx("span", { children: col.title }), col.sortable && col.dataIndex && (_jsx("span", { style: { fontSize: "12px", marginLeft: "6px" }, children: sortConfig.key !== col.dataIndex ? "↕" : sortConfig.direction === "asc"
+                                                            ? "↑"
+                                                            : "↓" }))] }), _jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), _jsx("tbody", { children: renderTableBody() })] }) }), pagination && totalPages > 1 && (_jsxs("footer", { className: "cw-table-pagination", children: [_jsx("button", { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left-double", title: "First" }), _jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left", title: "Previous" }), _jsx("input", { type: "number", value: currentPage, onChange: (e) => {
+                            const value = parseInt(e.target.value, 10);
+                            if (!isNaN(value))
+                                handlePageChange(value);
+                        }, onBlur: (e) => {
+                            const value = parseInt(e.target.value, 10);
+                            if (isNaN(value) || value < 1 || value > totalPages) {
+                                handlePageChange(1);
+                            }
+                        }, min: 1, max: totalPages, style: {
+                            width: "4rem",
+                            textAlign: "center",
+                            marginRight: "0.5rem"
+                        } }), "of ", totalPages, _jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), _jsx("button", { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), _jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, style: { marginLeft: "1rem" }, children: pageSizeOptions.map(size => (_jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
+}

package/dist/src/components/display/graphics/icon/CwIcon.d.ts

@@ -1,9 +1,13 @@
 import { HTMLProps } from "react";
-export interface CwIconProps extends Omit<HTMLProps<HTMLDivElement>, "className"> {
+export interface CwIconProps extends Omit<HTMLProps<HTMLSpanElement>, "className" | "size"> {
     /** Icon identifier */
     iconId: string;
     /** Source of the icon: 'fontawesome' or 'cwellt'. Defaults to 'cwellt' */
     source?: 'fontawesome' | 'cwellt';
+    /** Color variant **/
+    color?: 'primary' | 'danger' | 'success' | 'neutral';
+    /** Size options **/
+    size?: 'small' | 'regular' | 'medium' | 'large';
 }
 /**
  * Icon component that supports both FontAwesome 4 and cwellt icon font

package/dist/src/components/display/graphics/icon/CwIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwIcon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/graphics/icon/CwIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IAChF,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,MAAM,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAC;CAClC;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CAUxC"}
+{"version":3,"file":"CwIcon.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/graphics/icon/CwIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC1F,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,MAAM,CAAC,EAAE,aAAa,GAAG,QAAQ,CAAC;IAClC,qBAAqB;IACrB,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC;IACrD,oBAAoB;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;CAChD;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CAkBxC"}

package/dist/src/components/display/graphics/icon/CwIcon.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Icon component that supports both FontAwesome 4 and cwellt icon font
+ * @example
+ * <CwIcon iconId="house" /> // Uses cwellt icon font
+ * <CwIcon iconId="house" source="fontawesome" /> // Uses FontAwesome
+ */
+export function CwIcon(props) {
+    const { iconId, source = 'cwellt', color, size, ...iconProps } = props;
+    const getClassName = (baseClass) => {
+        return [
+            baseClass,
+            color && `cw-color-${color}`,
+            size && `cw-font-size-${size}`
+        ].filter(Boolean).join(' ');
+    };
+    // Return appropriate icon based on source
+    if (source === 'fontawesome') {
+        return _jsx("span", { ...iconProps, className: getClassName(`fa fa-${iconId}`) });
+    }
+    // Use custom icon font
+    return _jsx("span", { ...iconProps, className: getClassName(`cwi-icons cwi-${iconId}`) });
+}

package/dist/src/components/display/graphics/image-gallery/CwImageGallery.d.ts

@@ -0,0 +1,30 @@
+export type ImageItem = {
+    src: string;
+    alt: string;
+    filename?: string;
+};
+/**
+ * CwImageGallery
+ *
+ * A versatile image gallery component that displays a grid of images
+ * and allows users to click on an image to view it in a larger format.
+ *
+ * @example
+ * // Basic usage
+ *	<ImageGallery
+ *		images={photos.map(p => {
+ *			return (
+ *				{
+ *					src: "base64ImageString",
+ *					alt: "Alternative text",
+ *					filename: "Filename"
+ *				}
+ *			)
+ *		})}
+ *	/>
+ */
+export declare function CwImageGallery({ images }: {
+    images: ImageItem[];
+}): import("react/jsx-runtime").JSX.Element;
+export default CwImageGallery;
+//# sourceMappingURL=CwImageGallery.d.ts.map

package/dist/src/components/display/graphics/image-gallery/CwImageGallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwImageGallery.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/graphics/image-gallery/CwImageGallery.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,SAAS,EAAE,CAAA;CAAE,2CAgJjE;AAED,eAAe,cAAc,CAAC"}

package/dist/src/components/display/graphics/image-zoom/CwImageZoom.d.ts

@@ -0,0 +1,21 @@
+export type ZoomImageItem = {
+    src: string;
+    alt: string;
+    filename?: string;
+    width?: string | number;
+    height?: string | number;
+};
+/**
+ * CwImageGallery
+ *
+ * A image zoom component that displays an image
+ * and allows users to click to view it in a larger format.
+ *
+ * @example
+ * // Basic usage
+ *	<ImageZoom src={'base64ImageString'}
+ *		alt={'Alternative text'}/>
+ */
+export declare function CwImageZoom(image: ZoomImageItem): import("react/jsx-runtime").JSX.Element;
+export default CwImageZoom;
+//# sourceMappingURL=CwImageZoom.d.ts.map

package/dist/src/components/display/graphics/image-zoom/CwImageZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwImageZoom.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/graphics/image-zoom/CwImageZoom.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;GAUG;AAEH,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,2CA4E/C;AAED,eAAe,WAAW,CAAC"}

package/dist/src/components/display/graphics/loading/CwLoading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwLoading.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/graphics/loading/CwLoading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAG1B,KAAK,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAGjD,KAAK,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC;AAGzC,UAAU,cAAc;IACvB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,wBAAgB,SAAS,CAAC,EACzB,SAAiB,EACjB,IAAS,EACT,IAAgB,EAChB,YAAwB,EACxB,QAA4B,EAC5B,SAAkB,EAClB,QAAQ,EACR,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,2CAiCzC"}
+{"version":3,"file":"CwLoading.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/graphics/loading/CwLoading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAG1B,KAAK,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAGjD,KAAK,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC;AAGzC,UAAU,cAAc;IACvB,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uEAAuE;IACvE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,wBAAgB,SAAS,CAAC,EACzB,SAAiB,EACjB,IAAS,EACT,IAAgB,EAChB,YAAwB,EACxB,QAA4B,EAC5B,SAAkB,EAClB,QAAQ,EACR,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,2CAkCzC"}

package/dist/src/components/display/graphics/loading/CwLoading.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './cw-loading.css';
+/**
+ * CwLoading
+ *
+ * A versatile loading component that shows a spinner with optional text
+ * and disables the wrapped content while in loading state.
+ *
+ * @example
+ * // Basic usage
+ * <CwLoading isLoading={isSubmitting}>
+ *   <form>...</form>
+ * </CwLoading>
+ *
+ * // With custom text and size
+ * <CwLoading
+ *   isLoading={isLoading}
+ *   text="Please wait..."
+ *   size="large"
+ * >
+ *   <UserProfile />
+ * </CwLoading>
+ */
+export function CwLoading({ isLoading = false, text = '', size = 'regular', iconPosition = 'outside', iconName = 'cwi-plane-solid', animation = 'spin', children }) {
+    const iconClasses = `cwi-icons ${iconName || ''}`;
+    return (_jsxs("div", { "aria-busy": isLoading, className: isLoading ? 'cw-loading-container' : '', "data-children": !!children, children: [isLoading && (_jsxs("div", { className: "cw-loading-content", "data-size": size, "data-animation": animation, children: [_jsx("div", { className: "cw-loading", "data-icon-position": iconPosition, children: _jsx("span", { className: iconClasses }) }), text && (_jsx("p", { children: text }))] })), _jsx("div", { className: isLoading ? 'cw-loading-disabled-content' : '', children: children })] }));
+}

package/dist/src/components/display/graphics/loading-small/CwLoadingSmall.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated since may 2025. Use <CwLoading size="small"> instead.
+ *
+ * This component will be removed in a future release.
+ *
+ * @example
+ * // Instead of:
+ * <CwLoadingSmall />
+ *
+ * // Use:
+ * <CwLoading size="small" />
+ */
+export function CwLoadingSmall(CwelltLoadingAppointements) {
+    return (_jsx("div", { children: CwelltLoadingAppointements.isLoading === true ? (
+        // * Show loading appointment
+        _jsx("div", { className: "cw-loading-container", children: _jsx("div", { className: "cw-loading" }) })) : (
+        // Show empty div
+        _jsx("div", {})) }));
+}

package/dist/src/components/display/text/heading/CwHeadingMain.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CwHeadingMain(props) {
+    const { children, ...headingProps } = props;
+    return (_jsx("div", { className: "cw-heading", children: _jsx("h2", { className: "cwHeading_desc", ...headingProps, children: children }) }));
+}

package/dist/src/components/display/text/heading/CwHeadingSecond.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CwHeadingSecond(props) {
+    const { children, ...headingProps } = props;
+    return (_jsx("div", { className: "cw-heading", children: _jsx("h3", { className: "cwHeading_desc", ...headingProps, children: children }) }));
+}

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

@@ -6,6 +6,11 @@ export declare enum CwMessageType {
     INFO = "info-bubble",
     SUCCESS = "check-circle"
 }
+/**
+ * CwMessage Component - Toast and Inline Message System
+ *
+ * A flexible notification system that supports both global toast messages and inline component messages.
+ */
 export interface CwMessageProps {
     message: string;
     messageType?: CwMessageType;
@@ -13,19 +18,61 @@ export interface CwMessageProps {
     onClose?: () => void;
 }
 export declare const CwMessage: FC<CwMessageProps>;
+/**
+ * Hook for displaying inline messages within specific components.
+ * Messages appear where you place the RenderMessage component, perfect for form validation
+ * and contextual feedback.
+ *
+ * @returns Object with showMessage function and RenderMessage component
+ *
+ * @example
+ * ```typescript
+ * const { showMessage, RenderMessage } = useCwMessage();
+ *
+ * const handleValidation = () => {
+ *   showMessage({
+ *     message: "Please fill all required fields",
+ *     messageType: CwMessageType.ERROR,
+ *     duration: 3000
+ *   });
+ * };
+ *
+ * return (
+ *   <div>
+ *     {RenderMessage}
+ *     <button onClick={handleValidation}>Submit</button>
+ *   </div>
+ * );
+ * ```
+ */
 export declare const useCwMessage: () => {
     showMessage: (props: CwMessageProps) => void;
     RenderMessage: import("react/jsx-runtime").JSX.Element | null;
 };
 export declare class CwMessageManager {
     private static instance;
-    private messageContainer;
+    private messageWrapper;
     root: any;
-    private constructor();
     static getInstance(): CwMessageManager;
     private init;
     showMessage(message: string, type?: CwMessageType, duration?: number): void;
     private closeMessage;
 }
+/**
+ * Display a global TOAST message that appears floating at the top right of the screen.
+ * Perfect for system-wide notifications and cross-component alerts.
+ *
+ * @param message - Text to display in the message
+ * @param type - Message type for styling and icon (SUCCESS, ERROR, WARN, INFO)
+ * @param duration - Auto-close duration in milliseconds (default: 2000)
+ *
+ * @example
+ * ```typescript
+ * CwDisplayMessage("Data saved successfully!", CwMessageType.SUCCESS);
+ * CwDisplayMessage("Connection failed", CwMessageType.ERROR, 5000);
+ * ```
+ *
+ * @note For inline messages within components, use `CwNote` or `useCwMessage` hook instead
+ */
 export declare function CwDisplayMessage(message: string, type?: CwMessageType, duration?: number): void;
 //# sourceMappingURL=CwMessage.d.ts.map

package/dist/src/components/display/text/message/CwMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwMessage.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/text/message/CwMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAKrD,eAAO,MAAM,2BAA2B,EAAE,MAAa,CAAC;AAExD,oBAAY,aAAa;IACxB,KAAK,iBAAiB;IACtB,IAAI,YAAY;IAChB,IAAI,gBAAgB;IACpB,OAAO,iBAAiB;CACxB;AAED,MAAM,WAAW,cAAc;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAqBxC,CAAC;AAEF,eAAO,MAAM,YAAY;yBAMI,cAAc;;CAgB1C,CAAC;AAEF,qBAAa,gBAAgB;IAC5B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAmB;IAC1C,OAAO,CAAC,gBAAgB,CAA+B;IACvD,IAAI,EAAE,GAAG,CAAC;IAEV,OAAO;WAIO,WAAW,IAAI,gBAAgB;IAO7C,OAAO,CAAC,IAAI;IAWL,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,MAAM;IAS3E,OAAO,CAAC,YAAY;CAGpB;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,MAAM,QAExF"}
+{"version":3,"file":"CwMessage.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/text/message/CwMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAIrD,eAAO,MAAM,2BAA2B,EAAE,MAAa,CAAC;AAExD,oBAAY,aAAa;IACxB,KAAK,iBAAiB;IACtB,IAAI,YAAY;IAChB,IAAI,gBAAgB;IACpB,OAAO,iBAAiB;CACxB;AAED;;;;GAIG;AAEH,MAAM,WAAW,cAAc;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAoBxC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,YAAY;yBAMI,cAAc;;CAgB1C,CAAC;AAEF,qBAAa,gBAAgB;IAC5B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAmB;IAC1C,OAAO,CAAC,cAAc,CAA+B;IACrD,IAAI,EAAE,GAAG,CAAC;WAGI,WAAW,IAAI,gBAAgB;IAQ7C,OAAO,CAAC,IAAI;IAOL,WAAW,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,MAAM;IAS3E,OAAO,CAAC,YAAY;CAGpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,aAAa,EAAE,QAAQ,CAAC,EAAE,MAAM,QAExF"}

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import './cw-note.css';
+export interface CwNoteProps {
+    /** Message content (used when no children provided) */
+    content?: React.ReactNode;
+    /** Visual variant of the message */
+    variant?: 'soft' | 'solid' | 'outline';
+    /** Color theme - ignored if customColor is provided */
+    color?: 'primary' | 'danger' | 'neutral' | 'success' | 'warning' | 'info';
+    /** Custom color - if provided, overrides color prop */
+    customColor?: string;
+    /** Size of the message */
+    fontSize?: 'small' | 'regular' | 'large';
+    /** Optional icon from your custom font (always rendered if provided) */
+    icon?: string;
+    /** Whether the note can be dismissed manually (default: false) */
+    dismissible?: boolean;
+    /** Auto-close after X seconds (if provided, note will auto-dismiss) */
+    autoCloseSeconds?: number;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+    /** Custom message content (overrides content but not icon) */
+    children?: React.ReactNode;
+}
+/**
+ * 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 declare const CwNote: React.FC<CwNoteProps>;
+//# sourceMappingURL=CwNote.d.ts.map

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

@@ -0,0 +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"}