pixelize-design-library 2.1.73 → 2.1.75

package/dist/Components/KaTable/ka-table.css

@@ -0,0 +1,27 @@
+.ka-thead-cell {
+  padding: 7px 7px;
+}
+.ka-cell {
+  padding: 7px 0px;
+}
+
+.ka-thead-background {
+  background-color: #bfbcbc;
+  z-index: 1;
+}
+
+.ka-cell-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 5%;
+}
+.ka-row {
+  box-sizing: unset;
+  border-bottom: none;
+  border-top: none;
+}
+.ka-table-wrapper {
+  border-bottom: 2px solid #d8d9db;
+  border-right: 2px solid #d8d9db;
+}

package/dist/Components/KaTable/useMergedChildComponents.d.ts

@@ -0,0 +1,14 @@
+import { KaTableProps } from "./KaTableProps";
+type MergedChildComponentsProps = Pick<KaTableProps, "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor"> & {
+    childComponents: any;
+    onSortChange: any;
+    handleSelection: any;
+    rowKey: any;
+    onRowClick: any;
+    selected: any;
+    dataLength: number;
+    columns: any;
+    sortState: any;
+};
+declare const useMergedChildComponents: ({ childComponents, onSortChange, handleSelection, rowKey, onRowClick, selected, dataLength, columns, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, sortState, }: MergedChildComponentsProps) => any;
+export default useMergedChildComponents;

package/dist/Components/KaTable/useMergedChildComponents.js

@@ -0,0 +1,224 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var CustomHeader_1 = __importDefault(require("./CustomHeader"));
+var SelectionHeader_1 = __importDefault(require("./SelectionHeader"));
+var SelectionCell_1 = __importDefault(require("./SelectionCell"));
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var table_1 = require("../../Utils/table");
+var useMergedChildComponents = function (_a) {
+    var childComponents = _a.childComponents, onSortChange = _a.onSortChange, handleSelection = _a.handleSelection, rowKey = _a.rowKey, onRowClick = _a.onRowClick, selected = _a.selected, dataLength = _a.dataLength, columns = _a.columns, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, sortState = _a.sortState;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var handleSortChange = (0, react_1.useCallback)(function (newState, columnKey) {
+        var newSortState = __spreadArray([], sortState, true);
+        var existingIndex = newSortState.findIndex(function (sort) { return sort.column === columnKey; });
+        if (existingIndex === -1) {
+            newSortState.push({
+                column: columnKey,
+                direction: newState, // Default to ascending when adding a column
+            });
+        }
+        else {
+            var existingSort = newSortState[existingIndex];
+            existingSort.direction = newState;
+        }
+        var column = columns.find(function (col) { return col.key === columnKey; });
+        column.sortDirection = newState;
+        onSortChange(newSortState);
+    }, [sortState, onSortChange, columns]);
+    var _b = react_1.default.useState(selected), selections = _b[0], setSelections = _b[1];
+    (0, react_1.useEffect)(function () {
+        setSelections(selected);
+    }, [selected]);
+    var isAllSelected = (0, react_1.useMemo)(function () {
+        return {
+            checked: (selections === null || selections === void 0 ? void 0 : selections.length) === (dataLength || -1),
+            intederminate: (selections === null || selections === void 0 ? void 0 : selections.length) > 0 && (selections === null || selections === void 0 ? void 0 : selections.length) < dataLength,
+        };
+    }, [selections, dataLength]);
+    var cellSelectionHandle = (0, react_1.useCallback)(function (values, type) {
+        if (type === "add") {
+            setSelections(__spreadArray(__spreadArray([], selections, true), [values], false));
+            handleSelection(__spreadArray(__spreadArray([], selections, true), [values], false));
+        }
+        else if (type === "remove") {
+            setSelections(selections.filter(function (value) { return value !== values; }));
+            handleSelection(selections.filter(function (value) { return value !== values; }));
+        }
+        else {
+            handleSelection(selections.filter(function (value) { return value !== values; }));
+        }
+    }, [selections, handleSelection]);
+    var headerSelectionHandle = (0, react_1.useCallback)(function (values) {
+        setSelections(values);
+        handleSelection(values);
+    }, [handleSelection]);
+    return (0, react_1.useMemo)(function () {
+        return __assign(__assign({}, childComponents), { dataRow: {
+                elementAttributes: function (props) {
+                    var _a, _b;
+                    var existingElementAttributes = (_a = childComponents.dataRow) === null || _a === void 0 ? void 0 : _a.elementAttributes;
+                    var attributes = existingElementAttributes
+                        ? existingElementAttributes(props)
+                        : {};
+                    var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
+                    var className = "".concat(attributes.className || "", " ").concat(isSelected ? "ka-row-selected" : "", " ka-row-hover").trim();
+                    // const className =
+                    //   `${attributes.className || ""} ${isSelected ? "ka-row-selected" : ""}`.trim();
+                    return __assign(__assign({}, attributes), { className: className, style: __assign(__assign({}, (attributes.style || {})), { backgroundColor: isSelected
+                                ? theme.colors.backgroundColor.subtle
+                                : undefined, border: "1px solid ".concat((_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray[200]) }) });
+                },
+            }, headCell: {
+                content: function (props) {
+                    var _a, _b, _c;
+                    var existingContent = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.content;
+                    if (existingContent) {
+                        var result = existingContent(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    var column = props.column;
+                    if (column.sortable || column.filter) {
+                        return (react_1.default.createElement(CustomHeader_1.default, __assign({}, props, { onSortChange: handleSortChange, menuItems: (_b = column === null || column === void 0 ? void 0 : column.menu) !== null && _b !== void 0 ? _b : [], isSort: props.column.sortable, sortDirection: (_c = props.column.sortDirection) !== null && _c !== void 0 ? _c : "none" })));
+                    }
+                    if (props.column.key === "select-cell") {
+                        return (react_1.default.createElement(SelectionHeader_1.default, { onSelectionChange: headerSelectionHandle, rowKey: rowKey, selected: isAllSelected }));
+                    }
+                    return null;
+                },
+                elementAttributes: function (props) {
+                    var _a, _b, _c, _d, _e, _f;
+                    var existingElementAttributes = (_a = childComponents.headCell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
+                    if (existingElementAttributes) {
+                        var result = existingElementAttributes(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    if (props.column.columnFreeze) {
+                        var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
+                        return {
+                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 3, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600] }),
+                        };
+                    }
+                    return {
+                        style: {
+                            backgroundColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : (_d = theme.colors.backgroundColor) === null || _d === void 0 ? void 0 : _d.subtle,
+                            color: headerTextColor !== null && headerTextColor !== void 0 ? headerTextColor : (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[600],
+                            border: "1px solid ".concat((_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[200]),
+                        },
+                    };
+                },
+            }, cell: {
+                elementAttributes: function (props) {
+                    var _a, _b, _c, _d, _e;
+                    var existingElementAttributes = (_a = childComponents.cell) === null || _a === void 0 ? void 0 : _a.elementAttributes;
+                    if (existingElementAttributes) {
+                        var result = existingElementAttributes(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    if (props.column.columnFreeze) {
+                        var stickyLeft = (0, table_1.getPreviousColumnWidth)(columns, props.column.key);
+                        return {
+                            style: __assign(__assign({}, props.column.style), { position: "sticky", left: stickyLeft, zIndex: 2, backgroundColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.backgroundColor.subtle, color: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[600], fontWeight: 600 }),
+                        };
+                    }
+                    return {
+                        style: {
+                            color: (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[600],
+                            fontWeight: 500,
+                            border: "1px solid ".concat((_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray[200]),
+                        },
+                        onClick: function () {
+                            if (onRowClick) {
+                                onRowClick(props.rowData, props.column.key);
+                            }
+                        },
+                    };
+                },
+            }, tableWrapper: {
+                elementAttributes: function () { return ({ style: { maxHeight: 600 } }); },
+            }, cellText: {
+                content: function (props) {
+                    var _a;
+                    var existingContent = (_a = childComponents.cellText) === null || _a === void 0 ? void 0 : _a.content;
+                    if (existingContent) {
+                        var result = existingContent(props);
+                        if (result) {
+                            return result;
+                        }
+                    }
+                    if (props.column.key === "select-cell") {
+                        var isSelected = selections === null || selections === void 0 ? void 0 : selections.includes(props.rowData[rowKey]);
+                        return (react_1.default.createElement(SelectionCell_1.default, __assign({}, props, { selected: isSelected, onSelectionChange: cellSelectionHandle })));
+                    }
+                },
+            } });
+    }, [
+        childComponents,
+        rowKey,
+        onRowClick,
+        selections,
+        columns,
+        cellSelectionHandle,
+        headerSelectionHandle,
+        isAllSelected,
+        theme.colors,
+        headerBgColor,
+        headerTextColor,
+        freezedBgColor,
+        freezedTextColor,
+        handleSortChange,
+    ]);
+};
+exports.default = useMergedChildComponents;

package/dist/Components/NoteTextArea/NoteTextArea.js

@@ -1,11 +1,4 @@
 "use strict";
-// import React, { useEffect, useRef, useState } from "react";
-// import { NoteTextAreaProps } from "./NoteTextAreaProps";
-// import styled from "@emotion/styled";
-// import { Spinner } from "@chakra-ui/react";
-// import { CustomThemeProps } from "../../Theme/themeProps";
-// import { useCustomTheme } from "../../Theme/useCustomTheme";
-// import { Paperclip, X } from "lucide-react";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -39,380 +32,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-// const Container = styled.div<{ isActive: boolean }>`
-//   border: ${({ isActive }) =>
-//     isActive ? "1px solid #3182ce" : "1px solid #c0c6cc"};
-//   border-radius: 5px;
-//   box-shadow: ${({ isActive }) =>
-//     isActive
-//       ? "-1px 1px 8px 4px rgb(49 130 206 / 24%), 0px 2px 6px 0 rgb(49 130 206 / 19%)"
-//       : "none"};
-// `;
-// const TextAreaContainer = styled.div<{ isActive: boolean }>`
-//   width: 100%;
-//   cursor: text;
-//   padding: 12px 15px;
-//   display: ${({ isActive }) => (isActive ? "block" : "none")};
-// `;
-// const PlaceholderText = styled.div<{ isActive: boolean }>`
-//   color: #c0c6cc;
-//   width: 100%;
-//   cursor: text;
-//   display: ${({ isActive }) => (isActive ? "block" : "none")};
-//   padding: 12px 15px;
-// `;
-// const InputTitle = styled.input`
-//   width: 100%;
-//   height: auto;
-//   border: none;
-//   outline: none;
-//   background: none;
-//   color: black;
-//   fontsize: 1rem;
-//   fontweight: 500;
-//   marginbottom: 2px;
-// `;
-// const NotesTextArea = styled.textarea<{ isActive: boolean; noteValue: string }>`
-//   color: ${({ isActive, noteValue }) =>
-//     isActive && noteValue ? "#000000" : "#c0c6cc"};
-//   width: 100%;
-//   height: auto;
-//   border: none;
-//   outline: none;
-//   background: none;
-//   fontweight: 300;
-// `;
-// const FileUploadLabel = styled.label`
-//   cursor: pointer;
-// `;
-// const AddTitleButton = styled.div`
-//   color: #616e88;
-//   cursor: pointer;
-//   fontsize: 0.8rem;
-// `;
-// const Button = styled.button<{
-//   noteValue: string;
-//   isSaveButton: boolean;
-//   isLoading: boolean;
-//   theme: CustomThemeProps;
-//   disabled: boolean;
-// }>`
-//   border: none;
-//   padding: 3px 15px;
-//   text-align: center;
-//   text-decoration: none;
-//   background: ${({ isSaveButton, noteValue, isLoading, theme }) =>
-//     isSaveButton
-//       ? noteValue && !isLoading
-//         ? theme.colors.primary[500]
-//         : theme.colors.primary[500]
-//       : "white"};
-//   color: ${({ isSaveButton, isLoading }) =>
-//     isSaveButton && !isLoading ? "white" : "white"};
-//   font-size: 1rem;
-//   margin-right: 5px;
-//   border-radius: 5px;
-//   opacity: ${({ isSaveButton, noteValue, isLoading, disabled }) =>
-//     isSaveButton && (!noteValue || isLoading || disabled) ? "0.5" : "1"};
-//   cursor: ${({ isSaveButton, noteValue, isLoading, disabled }) =>
-//     isSaveButton && (!noteValue || isLoading || disabled)
-//       ? "initial"
-//       : "pointer"};
-//   pointer-events: ${({ isLoading }) => (isLoading ? "none" : "auto")};
-// `;
-// const CancelButton = styled.button`
-//   border: none;
-//   color: #5e5c5c;
-//   padding: 3px 15px;
-//   text-align: center;
-//   text-decoration: none;
-//   background: white;
-//   font-size: 1rem;
-//   margin-right: 5px;
-//   border-radius: 5px;
-// `;
-// const FileViewer = styled.div`
-//   display: flex;
-//   align-items: center;
-//   justify-content: space-between;
-//   width: 300px;
-// `;
-// const FileEdit = styled(X)`
-//   cursor: pointer;
-//   color: #ff0000;
-// `;
-// const ErrorText = styled.div`
-//   color: #ff0000;
-//   font-size: 0.8rem;
-//   margin-top: 8px;
-// `;
-// const countWords = (text: string) => {
-//   return text.trim().split(/\s+/).length;
-// };
-// export default function NoteTextArea({
-//   width = "100%",
-//   handleSubmit,
-//   handleCancel,
-//   value,
-//   title,
-//   file,
-//   isEditable = false,
-//   saveButtonLoading,
-//   maxFileSize = 1 * 1024 * 1024,
-//   maxFilesSizeError = "Some files are too large. Maximum allowed size is",
-//   maxNoteWordCount = 15,
-//   onChange,
-//   ref,
-// }: NoteTextAreaProps) {
-//   const theme = useCustomTheme();
-//   const noteAreaRef = useRef<HTMLTextAreaElement>(null);
-//   const [isActive, setIsActive] = useState<boolean>(false);
-//   const [noteValue, setNoteValue] = useState<string>("");
-//   const [titleValue, setTitleValue] = useState<string>("");
-//   const [titleShow, setTitleShow] = useState<boolean>(false);
-//   const [files, setFiles] = useState<File[]>([]);
-//   const [fileError, setFileError] = useState<string>("");
-//   const [isSaveDisabled, setIsSaveDisabled] = useState(false);
-//   useEffect(() => {
-//     const titleWordCount = countWords(titleValue);
-//     setIsSaveDisabled(titleWordCount > maxNoteWordCount);
-//   }, [titleValue, maxNoteWordCount]);
-//   useEffect(() => {
-//     const noteWordCount = countWords(noteValue);
-//     setIsSaveDisabled(noteWordCount > maxNoteWordCount);
-//   }, [noteValue, maxNoteWordCount]);
-//   useEffect(() => {
-//     if (isEditable) {
-//       setIsActive(true);
-//       if (value) {
-//         setNoteValue(value);
-//       }
-//       if (title) {
-//         setTitleValue(title);
-//         setTitleShow(true);
-//       }
-//       if (file) {
-//         setFiles(file);
-//       }
-//     }
-//   }, [value, title, file, isEditable]);
-//   useEffect(() => {
-//     if (!saveButtonLoading) {
-//       setIsActive(false);
-//       if (!isEditable) {
-//         setNoteValue("");
-//         setTitleValue("");
-//         setTitleShow(false);
-//         setFiles([]);
-//       }
-//     }
-//     if (isEditable) {
-//       setIsActive(true);
-//     }
-//   }, [saveButtonLoading, isEditable]);
-//   const handleTextArea = () => {
-//     setIsActive(true);
-//     if (!isEditable) {
-//       setNoteValue("");
-//       setTitleValue("");
-//       setTitleShow(false);
-//       setFiles([]);
-//     }
-//   };
-//   const handleCloseTextArea = () => {
-//     setIsActive(false);
-//     if (handleCancel) {
-//       handleCancel(!isActive);
-//     }
-//     if (!isEditable) {
-//       setNoteValue("");
-//       setTitleValue("");
-//       setTitleShow(false);
-//       setFiles([]);
-//     }
-//     setFileError("");
-//   };
-//   const handleNoteChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-//     setNoteValue(event.target.value);
-//     onChange?.(event.target.value);
-//     adjustHeight();
-//   };
-//   useEffect(() => {
-//     if (isActive && noteAreaRef.current) {
-//       noteAreaRef.current.focus();
-//     }
-//   }, [isActive]);
-//   const adjustHeight = () => {
-//     const textarea = noteAreaRef.current;
-//     if (!textarea) return;
-//     textarea.style.height = "auto";
-//     textarea.style.height = `${textarea.scrollHeight}px`;
-//   };
-//   const handleSetTitle = () => {
-//     setTitleShow(true);
-//   };
-//   const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-//     event.target.value.length === 0 && setTitleShow(false);
-//     setTitleValue(event.target.value);
-//   };
-//   const formatBytes = (bytes: any, decimals = 2) => {
-//     if (bytes === 0) return "0 Bytes";
-//     const k = 1024;
-//     const dm = decimals < 0 ? 0 : decimals;
-//     const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
-//     const i = Math.floor(Math.log(bytes) / Math.log(k));
-//     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
-//   };
-//   const shortenFileName = (name: string, maxLength = 20) => {
-//     const extension = name.substring(name.lastIndexOf("."));
-//     if (name.length <= maxLength) return name;
-//     const nameWithoutExtension = name.replace(extension, "");
-//     const start = nameWithoutExtension.substring(
-//       0,
-//       maxLength - extension.length - 3
-//     );
-//     return `${start}...${extension} `;
-//   };
-//   return (
-//     <Container style={{ width }} isActive={isActive}>
-//       <PlaceholderText isActive={!isActive} onClick={handleTextArea}>
-//         <span>Add a note...</span>
-//       </PlaceholderText>
-//       <TextAreaContainer isActive={isActive}>
-//         {titleShow && (
-//           <InputTitle
-//             value={titleValue}
-//             onChange={handleTitleChange}
-//             placeholder="Add a title..."
-//             ref={ref}
-//           />
-//         )}
-//         <NotesTextArea
-//           ref={noteAreaRef}
-//           isActive={isActive}
-//           noteValue={noteValue}
-//           value={noteValue}
-//           onChange={handleNoteChange}
-//           placeholder="Add a note..."
-//         />
-//       </TextAreaContainer>
-//       {isActive && (
-//         <>
-//           <hr style={{ margin: 0 }} />
-//           <div style={{ padding: "12px 15px" }}>
-//             <div style={{ display: "flex", alignItems: "center" }}>
-//               <FileUploadLabel htmlFor="file-upload">
-//                 <Paperclip size={17} />
-//                 <input
-//                   id="file-upload"
-//                   type="file"
-//                   style={{ display: "none" }}
-//                   onChange={(e) => {
-//                     const newFiles = Array.from(e.target.files || []);
-//                     const validFiles = newFiles.filter(
-//                       (file) => file.size <= maxFileSize
-//                     );
-//                     const invalidFiles = newFiles.filter(
-//                       (file) => file.size > maxFileSize
-//                     );
-//                     if (invalidFiles.length > 0) {
-//                       setFileError(
-//                         `${maxFilesSizeError} ${formatBytes(maxFileSize)}.`
-//                       );
-//                     } else {
-//                       setFileError("");
-//                     }
-//                     if (validFiles.length > 0) {
-//                       setFiles((prevFiles) => [...prevFiles, ...validFiles]);
-//                     }
-//                   }}
-//                   multiple
-//                   // onChange={(event) => {
-//                   //   if (event.target.files && event.target.files.length > 0) {
-//                   //     const filesArray = Array.from(event.target.files);
-//                   //     const validFiles = filesArray.filter(
-//                   //       (file) => file.size <= maxFileSize
-//                   //     );
-//                   //     setFiles([...files, ...validFiles]);
-//                   //   }
-//                   // }}
-//                 />
-//               </FileUploadLabel>
-//               {!titleShow && (
-//                 <>
-//                   <div
-//                     style={{
-//                       height: "15px",
-//                       width: "1px",
-//                       backgroundColor: "#c0c6cc",
-//                       marginRight: "5px",
-//                       marginLeft: "5px",
-//                     }}
-//                   ></div>
-//                   <AddTitleButton onClick={handleSetTitle}>
-//                     Add a Title
-//                   </AddTitleButton>
-//                 </>
-//               )}
-//               <div style={{ marginLeft: "auto" }}>
-//                 <CancelButton onClick={handleCloseTextArea}>
-//                   Cancel
-//                 </CancelButton>
-//                 <Button
-//                   isSaveButton={true}
-//                   noteValue={noteValue}
-//                   isLoading={saveButtonLoading}
-//                   disabled={!noteValue || isSaveDisabled}
-//                   theme={theme}
-//                   onClick={() => {
-//                     handleSubmit(noteValue, titleValue, files);
-//                     // handleCloseTextArea();
-//                   }}
-//                 >
-//                   {saveButtonLoading && (
-//                     <span style={{ marginRight: "6px" }}>
-//                       <Spinner
-//                         thickness="2px"
-//                         speed="0.75s"
-//                         emptyColor="gray.200"
-//                         color="blue.500"
-//                         size="xs"
-//                       />
-//                     </span>
-//                   )}
-//                   Save
-//                 </Button>
-//               </div>
-//             </div>
-//             <div style={{ display: "flex", gap: "10px" }}>
-//               <div>Note:</div>
-//               <div>You can add up to {maxNoteWordCount} words only</div>
-//             </div>
-//             {fileError && <ErrorText>{fileError}</ErrorText>}{" "}
-//             {/* Display file error */}
-//             {files.length > 0 && (
-//               <div>
-//                 {files.map((item, index) => (
-//                   <FileViewer key={index}>
-//                     <>
-//                       <span>{shortenFileName(item.name)}</span>
-//                       <span>{formatBytes(item.size)}</span>
-//                     </>
-//                     <FileEdit
-//                       onClick={() =>
-//                         setFiles(files.filter((fileItem) => fileItem !== item))
-//                       }
-//                     />
-//                   </FileViewer>
-//                 ))}
-//               </div>
-//             )}
-//           </div>
-//         </>
-//       )}
-//     </Container>
-//   );
-// }
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
 var lucide_react_1 = require("lucide-react");

package/dist/Components/Table/Table.css

@@ -0,0 +1,16 @@
+.table_wrapper {
+  width: 100%;
+  border-collapse: collapse;
+  /* table-layout: fixed; */
+}
+
+.table_wrapper th .resize-handle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 8px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: transparent;
+  z-index: 999;
+}

package/dist/Pages/KaTableExample.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const KaTableExample: () => React.JSX.Element;
+export default KaTableExample;