pixelize-design-library 2.1.20 → 2.1.22

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/{src/Components/Toaster/ToasterProps.tsx → dist/Components/Toaster/ToasterProps.d.ts}

@@ -1,15 +1,12 @@
 import { ToastProps } from "@chakra-ui/react";
-import React, { ReactNode } from "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"
-}
-
+    position?: "top" | "bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left";
+    status?: "success" | "error" | "warning" | "info" | "loading";
+};
 export interface ToasterContextType {
-    showToast: (children: ToasterToastProps) => void
+    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/{src/Components/Toggle/TableToggleProps.ts → dist/Components/Toggle/TableToggleProps.d.ts}

@@ -1,6 +1,5 @@
 export type ViewMode = "grid" | "list";
-
 export type ViewToggleProps = {
-  value: ViewMode;
-  onChange: (val: ViewMode) => void;
+    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/{src/Components/Trail/TrailWorks.tsx → dist/Components/Trail/TrailWorks.js}

@@ -1,100 +1,69 @@
-import {
-  Box,
-  Thead,
-  Table,
-  Tr,
-  Th,
-  Tbody,
-  Td,
-  Checkbox,
-} from "@chakra-ui/react";
-import React from "react";
-
-const TrailWorks = () => {
-  const 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",
-    },
-  ];
-
-  const columns = [
-    {
-      Header: "Contact",
-      accessor: "contact",
-    },
-    {
-      Header: "Type",
-      accessor: "type",
-    },
-    {
-      Header: "Deals",
-      accessor: "deals",
-    },
-    {
-      Header: "Phone",
-      accessor: "phone",
-    },
-    {
-      Header: "Email",
-      accessor: "email",
-    },
-  ];
-
-  const renderRow = (row: any, index: any) => {
-    return (
-      <Tr key={index} border="1px solid #bbbbbb">
-        <Td border="1px solid #bbbbbb" padding={"5px"}>
-          <Checkbox />
-        </Td>
-        {columns.map((column, index) => {
-          return (
-            <Td key={index} border="1px solid #bbbbbb">
-              {row[column.accessor]}
-            </Td>
-          );
-        })}
-      </Tr>
-    );
-  };
-
-  return (
-    <Box width="100%" overflowX="auto">
-      <Table variant="simple" size="md" border="1px solid #bbbbbb">
-        <Thead border="1px solid #bbbbbb">
-          <Tr border="1px solid #bbbbbb">
-            <Th border="1px solid #bbbbbb" padding={"5px"}>
-              <Checkbox />
-            </Th>
-            {columns.map((column, index) => {
-              return (
-                <Th key={index} border="1px solid #bbbbbb">
-                  {column.Header}
-                </Th>
-              );
-            })}
-          </Tr>
-        </Thead>
-        <Tbody border="1px solid #bbbbbb">
-          {data.map((row, index) => renderRow(row, index))}
-        </Tbody>
-      </Table>
-    </Box>
-  );
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-
-export default TrailWorks;
-
+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,
@@ -116,7 +85,6 @@ export default TrailWorks;
 // 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);
@@ -127,7 +95,6 @@ export default TrailWorks;
 //     columnId: number;
 //   } | null>(null);
 //   const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
-
 //   const addRow = () => {
 //     const newRow: Row = {
 //       id: rows.length + 1,
@@ -139,7 +106,6 @@ export default TrailWorks;
 //     };
 //     setRows([...rows, newRow]);
 //   };
-
 //   const addColumn = () => {
 //     if (newColumnName) {
 //       const newColumn = { id: columns.length + 1, label: newColumnName };
@@ -151,11 +117,9 @@ export default TrailWorks;
 //       setIsAddingColumn(false);
 //     }
 //   };
-
 //   const handleCellClick = (rowId: number, columnId: number) => {
 //     setEditableCell({ rowId, columnId });
 //   };
-
 //   const handleCellChange = (rowId: number, columnLabel: string, value: any) => {
 //     setRows(
 //       rows.map((row) =>
@@ -164,7 +128,6 @@ export default TrailWorks;
 //     );
 //     setEditableCell(null);
 //   };
-
 //   const handleRowSelect = (rowId: number) => {
 //     const newSelectedRows = new Set(selectedRows);
 //     if (newSelectedRows.has(rowId)) {
@@ -174,7 +137,6 @@ export default TrailWorks;
 //     }
 //     setSelectedRows(newSelectedRows);
 //   };
-
 //   const handleSelectAll = () => {
 //     if (selectedRows.size === rows.length) {
 //       setSelectedRows(new Set());
@@ -182,20 +144,16 @@ export default TrailWorks;
 //       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">
@@ -301,5 +259,4 @@ export default TrailWorks;
 //     </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[];

package/dist/Components/Trail/data.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initialRows = exports.initialColumns = void 0;
+exports.initialColumns = [
+    { id: 1, label: "project" },
+    { id: 2, label: "owner" },
+    { id: 3, label: "status" },
+    { id: 4, label: "priority" },
+    { id: 5, label: "dueDate" },
+];
+exports.initialRows = [
+    {
+        id: 1,
+        project: "Project A",
+        owner: "Owner A",
+        status: "In Progress",
+        priority: "High",
+        dueDate: "2023-12-31",
+    },
+    {
+        id: 2,
+        project: "Project B",
+        owner: "Owner B",
+        status: "Completed",
+        priority: "Medium",
+        dueDate: "2023-11-30",
+    },
+    // Add more initial rows as needed
+];