pixelize-design-library 2.1.16 → 2.1.17

package/dist/Components/Toaster/Toaster.js

@@ -0,0 +1,86 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToaster = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var ToasterContext = (0, react_1.createContext)(undefined);
+function ToasterProvider(_a) {
+    var children = _a.children;
+    var toast = (0, react_2.useToast)();
+    var theme = (0, react_2.useTheme)();
+    var showToast = function (_a) {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var title = _a.title, description = _a.description, _m = _a.status, status = _m === void 0 ? "info" : _m, _o = _a.duration, duration = _o === void 0 ? 5000 : _o, _p = _a.isClosable, isClosable = _p === void 0 ? true : _p, _q = _a.position, position = _q === void 0 ? "top-right" : _q, onClose = _a.onClose;
+        var statusColors = {
+            success: {
+                bg: (_b = theme.colors.green) === null || _b === void 0 ? void 0 : _b[50],
+                border: (_c = theme.colors.green) === null || _c === void 0 ? void 0 : _c[300],
+            },
+            error: {
+                bg: (_d = theme.colors.red) === null || _d === void 0 ? void 0 : _d[50],
+                border: (_e = theme.colors.red) === null || _e === void 0 ? void 0 : _e[300],
+            },
+            warning: {
+                bg: (_f = theme.colors.yellow) === null || _f === void 0 ? void 0 : _f[50],
+                border: (_g = theme.colors.yellow) === null || _g === void 0 ? void 0 : _g[300],
+            },
+            info: {
+                bg: (_h = theme.colors.blue) === null || _h === void 0 ? void 0 : _h[50],
+                border: (_j = theme.colors.blue) === null || _j === void 0 ? void 0 : _j[300],
+            },
+            loading: {
+                bg: (_k = theme.colors.gray) === null || _k === void 0 ? void 0 : _k[50],
+                border: (_l = theme.colors.gray) === null || _l === void 0 ? void 0 : _l[300],
+            },
+        };
+        var colors = statusColors[status];
+        toast({
+            duration: duration,
+            isClosable: isClosable,
+            position: position,
+            onCloseComplete: onClose,
+            render: function (_a) {
+                var onClose = _a.onClose;
+                return (react_1.default.createElement(react_2.Box, { bg: colors.bg, border: "0.063rem solid", borderColor: colors.border, boxShadow: "md", borderRadius: "md", p: 4, minW: "22.5rem" },
+                    react_1.default.createElement(react_2.Flex, { justify: "space-between", align: "flex-start" },
+                        react_1.default.createElement(react_2.Box, null,
+                            react_1.default.createElement(react_2.Text, { fontWeight: "semibold", mb: "0.25rem" }, title),
+                            react_1.default.createElement(react_2.Text, { fontSize: "sm" }, description)),
+                        isClosable && (react_1.default.createElement(react_2.CloseButton, { onClick: onClose, size: "sm", mt: 1, ml: 4 })))));
+            },
+        });
+    };
+    return (react_1.default.createElement(ToasterContext.Provider, { value: { showToast: showToast } }, children));
+}
+exports.default = ToasterProvider;
+var useToaster = function () {
+    var context = (0, react_1.useContext)(ToasterContext);
+    if (!context) {
+        throw new Error("useToaster must be used within a ToasterProvider");
+    }
+    return context;
+};
+exports.useToaster = useToaster;

package/dist/Components/Toaster/Toaster.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/Toaster/Toaster.stories.js

@@ -0,0 +1,8 @@
+"use strict";
+// // Toaster.stories.tsx
+// import React from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import ToasterProvider, { useToaster } from './Toaster';
+// import { Button, ChakraProvider } from '@chakra-ui/react';
+// import { ToasterToastProps } from './ToasterProps';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Toaster/ToasterProps.d.ts

@@ -0,0 +1,12 @@
+import { ToastProps } from "@chakra-ui/react";
+import { ReactNode } from "react";
+export type ToasterToastProps = Pick<ToastProps, 'description' | 'title' | 'isClosable' | 'duration' | 'children' | 'onClose'> & {
+    position?: "top" | "bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    status?: "success" | "error" | "warning" | "info" | "loading";
+};
+export interface ToasterContextType {
+    showToast: (children: ToasterToastProps) => void;
+}
+export interface ToasterChildren {
+    children: ReactNode;
+}

package/dist/Components/Toaster/ToasterProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Toggle/TableToggle.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ViewToggleProps } from "./TableToggleProps";
+declare const TableToggle: React.FC<ViewToggleProps>;
+export default TableToggle;

package/dist/Components/Toggle/TableToggle.js

@@ -0,0 +1,60 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var TableToggle = function (_a) {
+    var value = _a.value, onChange = _a.onChange;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var styles = {
+        container: {
+            display: "flex",
+            alignItems: "center",
+            bg: theme.colors.background[600],
+            p: "0.125rem",
+            borderRadius: "0.375rem",
+            height: "2rem",
+            gap: "0.125rem",
+            width: "6.3rem",
+        },
+        button: function (mode) { return ({
+            bg: value === mode ? theme.colors.background[50] : "transparent",
+            boxShadow: value === mode ? "md" : "none",
+            color: value === mode ? theme.colors.black : theme.colors.background[800],
+            borderRadius: "0.313rem",
+            height: "1.75rem",
+            border: "0.031rem solid",
+            borderColor: value === mode ? theme.colors.background[400] : "transparent",
+            padding: "0.313rem 0.813rem",
+            _hover: {
+                bg: value === mode
+                    ? theme.colors.background[50]
+                    : theme.colors.background[400],
+                color: value === mode ? theme.colors.black : theme.colors.background[900],
+            },
+            transition: "all 0.3s ease-in-out",
+        }); },
+    };
+    return (react_1.default.createElement(react_2.Box, __assign({}, styles.container),
+        react_1.default.createElement(ToolTip_1.default, { label: "Table View", placement: "top", fontSize: 12, hasArrow: true },
+            react_1.default.createElement(react_2.IconButton, __assign({ "aria-label": "Grid View", icon: react_1.default.createElement(lucide_react_1.Table2, { size: "1.25rem" }), variant: "ghost", onClick: function () { return onChange("grid"); } }, styles.button("grid")))),
+        react_1.default.createElement(ToolTip_1.default, { label: "Kanban View", placement: "top", fontSize: 12, hasArrow: true },
+            react_1.default.createElement(react_2.IconButton, __assign({ "aria-label": "List View", icon: react_1.default.createElement(lucide_react_1.Columns3, { size: "1.25rem" }), variant: "ghost", onClick: function () { return onChange("list"); } }, styles.button("list"))))));
+};
+exports.default = TableToggle;

package/dist/Components/Toggle/TableToggleProps.d.ts

@@ -0,0 +1,5 @@
+export type ViewMode = "grid" | "list";
+export type ViewToggleProps = {
+    value: ViewMode;
+    onChange: (val: ViewMode) => void;
+};

package/dist/Components/Toggle/TableToggleProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ToolTip/ToolTip.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ToolTipProps } from "./ToolTipProps";
+export default function ToolTip({ placement, label, children, hasArrow, fontSize, bg, color, isDisabled, isOpen, defaultIsOpen, openDelay, closeDelay, arrowSize, closeOnClick, size, width, height, arrowPadding, arrowShadowColor, direction, gutter, onClose, modifiers, closeOnPointerDown, styles, }: ToolTipProps): React.JSX.Element;

package/dist/Components/ToolTip/ToolTip.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+function ToolTip(_a) {
+    var placement = _a.placement, label = _a.label, children = _a.children, hasArrow = _a.hasArrow, fontSize = _a.fontSize, bg = _a.bg, color = _a.color, isDisabled = _a.isDisabled, isOpen = _a.isOpen, defaultIsOpen = _a.defaultIsOpen, openDelay = _a.openDelay, closeDelay = _a.closeDelay, arrowSize = _a.arrowSize, closeOnClick = _a.closeOnClick, size = _a.size, width = _a.width, height = _a.height, arrowPadding = _a.arrowPadding, arrowShadowColor = _a.arrowShadowColor, direction = _a.direction, gutter = _a.gutter, onClose = _a.onClose, modifiers = _a.modifiers, closeOnPointerDown = _a.closeOnPointerDown, styles = _a.styles;
+    return (react_1.default.createElement(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg, color: color, isDisabled: isDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles }, children));
+}
+exports.default = ToolTip;

package/dist/Components/ToolTip/ToolTip.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/ToolTip/ToolTip.stories.js

@@ -0,0 +1,7 @@
+"use strict";
+// import React from 'react';
+// import ToolTip from './ToolTip';
+// import { ToolTipProps } from "./ToolTipProps";
+// import { StoryFn, Meta } from '@storybook/react';
+// import { Box } from '@chakra-ui/react';
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/ToolTip/ToolTipProps.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TooltipProps as ChakraTooltip } from "@chakra-ui/react";
+export type ToolTipProps = Pick<ChakraTooltip, "placement" | "label" | "hasArrow" | "fontSize" | "bg" | "color" | "isDisabled" | "isOpen" | "defaultIsOpen" | "openDelay" | "closeDelay" | "arrowSize" | "closeOnClick" | "size" | "width" | "height" | "arrowPadding" | "arrowShadowColor" | "direction" | "gutter" | "onClose" | "modifiers" | "closeOnPointerDown"> & {
+    children: React.ReactNode;
+    styles?: React.CSSProperties;
+    placement: "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+};

package/dist/Components/ToolTip/ToolTipProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Trail/EditableCell.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Row, Column } from "./data";
+interface EditableCellProps {
+    row: Row;
+    column: Column;
+    isEditable: boolean;
+    handleCellClick: (rowId: number, columnId: number) => void;
+    handleCellChange: (rowId: number, columnLabel: string, value: any) => void;
+}
+export declare const EditableCell: React.FC<EditableCellProps>;
+export {};

package/dist/Components/Trail/EditableCell.js

@@ -0,0 +1,71 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditableCell = void 0;
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var EditableCell = function (_a) {
+    var row = _a.row, column = _a.column, isEditable = _a.isEditable, handleCellClick = _a.handleCellClick, handleCellChange = _a.handleCellChange;
+    var cellRef = (0, react_1.useRef)(null);
+    (0, react_2.useOutsideClick)({
+        ref: cellRef,
+        handler: function () {
+            return handleCellChange(row.id, column.label, row[column.label]);
+        },
+    });
+    var value = row[column.label] || "-";
+    if (isEditable) {
+        if (column.label === "dueDate") {
+            return (react_1.default.createElement(react_2.Box, { width: "50%", ref: cellRef },
+                react_1.default.createElement(react_2.Input, { type: "date", value: value, onChange: function (e) {
+                        return handleCellChange(row.id, column.label, e.target.value);
+                    } })));
+        }
+        else if (column.label === "priority") {
+            return (react_1.default.createElement(react_2.Box, { width: "100%", ref: cellRef },
+                react_1.default.createElement(react_2.Menu, { isOpen: true },
+                    react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rightIcon: react_1.default.createElement(lucide_react_1.ChevronDown, null), bg: "teal.500", color: "white", _hover: { bg: "teal.600" }, _active: { bg: "teal.700" } }, value),
+                    react_1.default.createElement(react_2.MenuList, null,
+                        react_1.default.createElement(react_2.MenuItem, { onClick: function () {
+                                return handleCellChange(row.id, column.label, "Low");
+                            }, _hover: { bg: "teal.100" } }, "Low"),
+                        react_1.default.createElement(react_2.MenuItem, { onClick: function () {
+                                return handleCellChange(row.id, column.label, "Medium");
+                            }, _hover: { bg: "teal.100" } }, "Medium"),
+                        react_1.default.createElement(react_2.MenuItem, { onClick: function () {
+                                return handleCellChange(row.id, column.label, "High");
+                            }, _hover: { bg: "teal.100" } }, "High")))));
+        }
+        else {
+            return (react_1.default.createElement(react_2.Box, { width: "100%", ref: cellRef },
+                react_1.default.createElement(react_2.Input, { value: value, onChange: function (e) {
+                        return handleCellChange(row.id, column.label, e.target.value);
+                    } })));
+        }
+    }
+    return (react_1.default.createElement("span", { onClick: function () { return handleCellClick(row.id, column.id); } }, value));
+};
+exports.EditableCell = EditableCell;

package/dist/Components/Trail/SelectAllCheckbox.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface SelectAllCheckboxProps {
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+    handleSelectAll: () => void;
+}
+export declare const SelectAllCheckbox: React.FC<SelectAllCheckboxProps>;
+export {};

package/dist/Components/Trail/SelectAllCheckbox.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectAllCheckbox = void 0;
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var SelectAllCheckbox = function (_a) {
+    var isAllSelected = _a.isAllSelected, isIndeterminate = _a.isIndeterminate, handleSelectAll = _a.handleSelectAll;
+    return (react_1.default.createElement(react_2.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: handleSelectAll }));
+};
+exports.SelectAllCheckbox = SelectAllCheckbox;

package/dist/Components/Trail/TrailWorks.d.ts

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

package/dist/Components/Trail/TrailWorks.js

@@ -0,0 +1,262 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@chakra-ui/react");
+var react_2 = __importDefault(require("react"));
+var TrailWorks = function () {
+    var data = [
+        {
+            contact: "John Doe",
+            type: "Customer",
+            deals: 5,
+            phone: "555-555-5555",
+            email: "hhhhh@gmail.com",
+        },
+        {
+            contact: "John Doe",
+            type: "Customer",
+            deals: 5,
+            phone: "555-555-5555",
+            email: "hhhhh@gmail.com",
+        },
+    ];
+    var columns = [
+        {
+            Header: "Contact",
+            accessor: "contact",
+        },
+        {
+            Header: "Type",
+            accessor: "type",
+        },
+        {
+            Header: "Deals",
+            accessor: "deals",
+        },
+        {
+            Header: "Phone",
+            accessor: "phone",
+        },
+        {
+            Header: "Email",
+            accessor: "email",
+        },
+    ];
+    var renderRow = function (row, index) {
+        return (react_2.default.createElement(react_1.Tr, { key: index, border: "1px solid #bbbbbb" },
+            react_2.default.createElement(react_1.Td, { border: "1px solid #bbbbbb", padding: "5px" },
+                react_2.default.createElement(react_1.Checkbox, null)),
+            columns.map(function (column, index) {
+                return (react_2.default.createElement(react_1.Td, { key: index, border: "1px solid #bbbbbb" }, row[column.accessor]));
+            })));
+    };
+    return (react_2.default.createElement(react_1.Box, { width: "100%", overflowX: "auto" },
+        react_2.default.createElement(react_1.Table, { variant: "simple", size: "md", border: "1px solid #bbbbbb" },
+            react_2.default.createElement(react_1.Thead, { border: "1px solid #bbbbbb" },
+                react_2.default.createElement(react_1.Tr, { border: "1px solid #bbbbbb" },
+                    react_2.default.createElement(react_1.Th, { border: "1px solid #bbbbbb", padding: "5px" },
+                        react_2.default.createElement(react_1.Checkbox, null)),
+                    columns.map(function (column, index) {
+                        return (react_2.default.createElement(react_1.Th, { key: index, border: "1px solid #bbbbbb" }, column.Header));
+                    }))),
+            react_2.default.createElement(react_1.Tbody, { border: "1px solid #bbbbbb" }, data.map(function (row, index) { return renderRow(row, index); })))));
+};
+exports.default = TrailWorks;
+// import React, { useState } from "react";
+// import {
+//   Box,
+//   Table,
+//   Thead,
+//   Tr,
+//   Th,
+//   Tbody,
+//   Td,
+//   Checkbox,
+//   IconButton,
+//   Input,
+//   Button,
+//   HStack,
+//   Flex,
+//   Text,
+// } from "@chakra-ui/react";
+// import { DeleteIcon, AddIcon, CloseIcon } from "@chakra-ui/icons";
+// import { Row, Column, initialColumns, initialRows } from "./data";
+// import { EditableCell } from "./EditableCell";
+// import { SelectAllCheckbox } from "./SelectAllCheckbox";
+// const TrailWorks: React.FC = () => {
+//   const [rows, setRows] = useState<Row[]>(initialRows);
+//   const [columns, setColumns] = useState<Column[]>(initialColumns);
+//   const [newColumnName, setNewColumnName] = useState<string>("");
+//   const [isAddingColumn, setIsAddingColumn] = useState<boolean>(false);
+//   const [editableCell, setEditableCell] = useState<{
+//     rowId: number;
+//     columnId: number;
+//   } | null>(null);
+//   const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+//   const addRow = () => {
+//     const newRow: Row = {
+//       id: rows.length + 1,
+//       project: `Project ${String.fromCharCode(65 + rows.length)}`,
+//       owner: `Owner ${String.fromCharCode(65 + rows.length)}`,
+//       status: "New",
+//       priority: "Low",
+//       dueDate: "2023-12-31",
+//     };
+//     setRows([...rows, newRow]);
+//   };
+//   const addColumn = () => {
+//     if (newColumnName) {
+//       const newColumn = { id: columns.length + 1, label: newColumnName };
+//       setColumns([...columns, newColumn]);
+//       setRows(
+//         rows.map((row) => ({ ...row, [newColumnName]: "Default Value" }))
+//       );
+//       setNewColumnName("");
+//       setIsAddingColumn(false);
+//     }
+//   };
+//   const handleCellClick = (rowId: number, columnId: number) => {
+//     setEditableCell({ rowId, columnId });
+//   };
+//   const handleCellChange = (rowId: number, columnLabel: string, value: any) => {
+//     setRows(
+//       rows.map((row) =>
+//         row.id === rowId ? { ...row, [columnLabel]: value } : row
+//       )
+//     );
+//     setEditableCell(null);
+//   };
+//   const handleRowSelect = (rowId: number) => {
+//     const newSelectedRows = new Set(selectedRows);
+//     if (newSelectedRows.has(rowId)) {
+//       newSelectedRows.delete(rowId);
+//     } else {
+//       newSelectedRows.add(rowId);
+//     }
+//     setSelectedRows(newSelectedRows);
+//   };
+//   const handleSelectAll = () => {
+//     if (selectedRows.size === rows.length) {
+//       setSelectedRows(new Set());
+//     } else {
+//       setSelectedRows(new Set(rows.map((row) => row.id)));
+//     }
+//   };
+//   const handleDeleteSelected = () => {
+//     setRows(rows.filter((row) => !selectedRows.has(row.id)));
+//     setSelectedRows(new Set());
+//   };
+//   const handleCloseFooter = () => {
+//     setSelectedRows(new Set());
+//   };
+//   const isAllSelected = selectedRows.size === rows.length;
+//   const isIndeterminate =
+//     selectedRows.size > 0 && selectedRows.size < rows.length;
+//   return (
+//     <Box width="100%" overflowX="auto" p={5}>
+//       <Table variant="simple" size="md">
+//         <Thead>
+//           <Tr>
+//             <Th>
+//               <SelectAllCheckbox
+//                 isAllSelected={isAllSelected}
+//                 isIndeterminate={isIndeterminate}
+//                 handleSelectAll={handleSelectAll}
+//               />
+//             </Th>
+//             {columns.map((column) => (
+//               <Th key={column.id}>{column.label}</Th>
+//             ))}
+//             <Th>
+//               {isAddingColumn ? (
+//                 <HStack>
+//                   <Input
+//                     placeholder="New column name"
+//                     value={newColumnName}
+//                     onChange={(e) => setNewColumnName(e.target.value)}
+//                   />
+//                   <Button onClick={addColumn}>Add</Button>
+//                 </HStack>
+//               ) : (
+//                 <IconButton
+//                   aria-label="Add column"
+//                   icon={<AddIcon />}
+//                   size="sm"
+//                   onClick={() => setIsAddingColumn(true)}
+//                 />
+//               )}
+//             </Th>
+//           </Tr>
+//         </Thead>
+//         <Tbody>
+//           {rows.map((row) => (
+//             <Tr key={row.id}>
+//               <Td>
+//                 <Checkbox
+//                   isChecked={selectedRows.has(row.id)}
+//                   onChange={() => handleRowSelect(row.id)}
+//                 />
+//               </Td>
+//               {columns.map((column) => (
+//                 <Td key={column.id}>
+//                   <EditableCell
+//                     row={row}
+//                     column={column}
+//                     isEditable={Boolean(
+//                       editableCell &&
+//                         editableCell.rowId === row.id &&
+//                         editableCell.columnId === column.id
+//                     )}
+//                     handleCellClick={handleCellClick}
+//                     handleCellChange={handleCellChange}
+//                   />
+//                 </Td>
+//               ))}
+//             </Tr>
+//           ))}
+//         </Tbody>
+//       </Table>
+//       <Button
+//         leftIcon={<AddIcon />}
+//         colorScheme="teal"
+//         variant="solid"
+//         onClick={addRow}
+//         mt={4}
+//       >
+//         Add Row
+//       </Button>
+//       {selectedRows.size > 0 && (
+//         <Flex
+//           position="fixed"
+//           bottom="0"
+//           left="10%"
+//           width="80%"
+//           p={4}
+//           justifyContent="space-between"
+//           alignItems="center"
+//           boxShadow="md"
+//         >
+//           <Text>{selectedRows.size} row(s) selected</Text>
+//           <HStack>
+//             <Button
+//               leftIcon={<DeleteIcon />}
+//               colorScheme="red"
+//               variant="solid"
+//               onClick={handleDeleteSelected}
+//             >
+//               Delete Selected
+//             </Button>
+//             <IconButton
+//               aria-label="Close"
+//               icon={<CloseIcon />}
+//               onClick={handleCloseFooter}
+//             />
+//           </HStack>
+//         </Flex>
+//       )}
+//     </Box>
+//   );
+// };
+// export default TrailWorks;

package/dist/Components/Trail/data.d.ts

@@ -0,0 +1,15 @@
+export type Row = {
+    id: number;
+    project: string;
+    owner: string;
+    status: string;
+    priority: string;
+    dueDate: string;
+    [key: string]: any;
+};
+export type Column = {
+    id: number;
+    label: keyof Row | string;
+};
+export declare const initialColumns: Column[];
+export declare const initialRows: Row[];