@cwellt_software/cwellt-reactjs-lib 1.2.0 → 1.2.2

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

@@ -1,203 +0,0 @@
-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.js

@@ -1,23 +0,0 @@
-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/loading/CwLoading.js

@@ -1,27 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

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

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

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

@@ -1,57 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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 }));
-}