pixelize-design-library 2.2.144 → 2.2.146

package/dist/Components/SideBar/SideBar.js

@@ -57,6 +57,7 @@ var MenuItems_1 = __importDefault(require("./components/MenuItems"));
 var defaultLogo_1 = __importDefault(require("../../Assets/defaultLogo"));
 var OverflowTooltipText_1 = __importDefault(require("./components/OverflowTooltipText"));
 var SecondaryBar_1 = __importDefault(require("./SecondaryBar"));
+var OtherApps_1 = __importDefault(require("./components/OtherApps"));
 var SidebarHeader = function (_a) {
     var logo = _a.logo, companyName = _a.companyName, toggle = _a.toggle, isLoading = _a.isLoading;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -107,7 +108,7 @@ var CollapseButton = function (_a) {
 // --- Main Sidebar component ---
 function Sidebar(_a) {
     var _b;
-    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, handleSecondaryNavClick = _a.handleSecondaryNavClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines, _d = _a.open, open = _d === void 0 ? true : _d;
+    var menus = _a.menus, activeMenu = _a.activeMenu, handleMenuClick = _a.handleMenuClick, handleSecondaryNavClick = _a.handleSecondaryNavClick, toggle = _a.toggle, changeToggle = _a.changeToggle, logo = _a.logo, companyName = _a.companyName, _c = _a.isDisableAddNew, isDisableAddNew = _c === void 0 ? false : _c, onAddNewClick = _a.onAddNewClick, selectedSubMenu = _a.selectedSubMenu, selectedSecondaryItem = _a.selectedSecondaryItem, isLoading = _a.isLoading, loadingLines = _a.loadingLines, _d = _a.open, open = _d === void 0 ? true : _d, otherApps = _a.otherApps;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     // Refs let the effects read the latest values without adding them to dep arrays,
     // which would cause infinite toggle loops since changeToggle flips state.
@@ -143,6 +144,7 @@ function Sidebar(_a) {
                         : (react_1.default.createElement(MenuItems_1.default, { activeMenu: activeMenu, menus: menus, handleMenuClick: handleMenuClick !== null && handleMenuClick !== void 0 ? handleMenuClick : (function () { }), toggle: toggle, selectedSubMenu: selectedSubMenu }))),
                     react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
                     !isDisableAddNew && (react_1.default.createElement(AddNewButton, { toggle: toggle, isLoading: isLoading, onClick: onAddNewClick })),
+                    react_1.default.createElement(OtherApps_1.default, { toggle: toggle, otherApps: otherApps !== null && otherApps !== void 0 ? otherApps : [] }),
                     react_1.default.createElement(CollapseButton, { toggle: toggle, onToggle: changeToggle })))),
         secondaryItems.length > 0 && (react_1.default.createElement(SecondaryBar_1.default, { items: secondaryItems, defaultCollapsed: toggle, collapsedWidth: "3.5rem", expandedWidth: "10rem", selected: selectedSecondaryItem, onItemClick: handleSecondaryNavClick, title: activeTop === null || activeTop === void 0 ? void 0 : activeTop.title }))));
 }

package/dist/Components/SideBar/SideBarProps.d.ts

@@ -14,6 +14,7 @@ export type SidebarProps = {
     isLoading?: boolean;
     loadingLines?: number;
     open?: boolean;
+    otherApps?: OtherAppsProps['otherApps'];
 };
 export type MenuProps = {
     id: string | number;
@@ -50,3 +51,13 @@ export type SecondaryBarProps = {
     onItemClick?: (item: MenuProps) => void;
     title?: string;
 };
+export type OtherAppsProps = {
+    toggle: boolean;
+    otherApps: {
+        name: string;
+        color: string;
+        description?: string;
+        onClick: () => void;
+        icon?: React.ReactNode;
+    }[];
+};

package/dist/Components/SideBar/components/OtherApps.d.ts

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

package/dist/Components/SideBar/components/OtherApps.js

@@ -0,0 +1,38 @@
+"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");
+var useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+var OtherApps = function (_a) {
+    var toggle = _a.toggle, otherApps = _a.otherApps;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    if (!otherApps || otherApps.length === 0)
+        return null;
+    var row = function (app) { return (react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.625rem", px: "0.625rem", py: "0.5rem", w: "100%", cursor: "pointer", justifyContent: toggle ? "center" : "flex-start", _hover: { backgroundColor: theme.colors.primary[500] }, transition: "background 0.15s", onClick: app.onClick, as: "button", type: "button", border: "none", bg: "transparent", color: "inherit" },
+        react_1.default.createElement(react_2.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, flexShrink: 0, boxShadow: "0 0 5px ".concat(app.color) }),
+        !toggle && (react_1.default.createElement(react_2.Box, { flex: "1", minW: 0, textAlign: "left" },
+            react_1.default.createElement(react_2.Text, { fontSize: "0.8125rem", fontWeight: 500, color: theme.colors.white, isTruncated: true }, app.name),
+            app.description && (react_1.default.createElement(react_2.Text, { fontSize: "0.6875rem", color: theme.colors.gray[400], isTruncated: true }, app.description)))))); };
+    var flyoutBody = function (app) {
+        var _a;
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(react_2.Flex, { alignItems: "center", gap: "0.5rem", mb: "0.25rem", onClick: app.onClick }, (_a = app.icon) !== null && _a !== void 0 ? _a : (react_1.default.createElement(react_2.Box, { w: "0.5rem", h: "0.5rem", borderRadius: "full", bg: app.color, boxShadow: "0 0 5px ".concat(app.color), flexShrink: 0 })),
+                react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", fontWeight: 700, color: theme.colors.white }, app.name)),
+            app.description && (react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: theme.colors.gray[400] }, app.description))));
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_2.Box, { w: "100%", h: "0.063rem", bg: theme.colors.sidebar.background[200], mb: "0.125rem" }),
+        !toggle && (react_1.default.createElement(react_2.Text, { fontSize: "0.625rem", fontWeight: 600, color: theme.colors.gray[400], letterSpacing: "0.08em", textTransform: "uppercase", px: "0.625rem", pt: "0.5rem", pb: "0.25rem", w: "100%" }, "Other Apps")),
+        otherApps.map(function (app) {
+            return toggle ? (react_1.default.createElement(react_2.Popover, { key: app.name, trigger: "hover", placement: "right-start", closeOnBlur: false, isLazy: true },
+                react_1.default.createElement(react_2.PopoverTrigger, null,
+                    react_1.default.createElement(react_2.Box, { w: "100%" }, row(app))),
+                react_1.default.createElement(react_2.Portal, null,
+                    react_1.default.createElement(react_2.PopoverContent, { borderRadius: "0.063rem", bg: theme.colors.primary[700], boxShadow: "lg", minW: "10rem", maxW: "14rem", py: "0.125rem", ml: "-0.5rem", border: "none", cursor: "pointer", zIndex: 1500, color: "white" },
+                        react_1.default.createElement(react_2.PopoverBody, { p: "0.75rem" }, flyoutBody(app)))))) : (react_1.default.createElement(react_2.Box, { key: app.name, w: "100%" }, row(app)));
+        })));
+};
+exports.default = OtherApps;

package/dist/Components/SideBar/components/OtherApps.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/SideBar/components/OtherApps.test.js

@@ -0,0 +1,112 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var OtherApps_1 = __importDefault(require("./OtherApps"));
+jest.mock("../../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            white: "#fff",
+            gray: { 400: "#a0aec0" },
+            primary: { 500: "#3182ce", 700: "#2c5282" },
+            sidebar: {
+                background: {
+                    200: "#2d3748",
+                    500: "#1a202c",
+                },
+            },
+        },
+    }); },
+}); });
+var sampleApps = [
+    {
+        name: "Billing",
+        color: "#3182ce",
+        description: "Billing app",
+        onClick: jest.fn(),
+    },
+    {
+        name: "Tickets",
+        color: "#38a169",
+        onClick: jest.fn(),
+    },
+];
+var renderWithChakra = function (ui) { return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui)); };
+describe("OtherApps", function () {
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    it("does not render flyout copy when expanded", function () {
+        renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: false, otherApps: sampleApps }));
+        expect(react_2.screen.getByText("Other Apps")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Billing")).toBeInTheDocument();
+        expect(react_2.screen.queryByText(/Open Billing/)).not.toBeInTheDocument();
+    });
+    it("shows flyout with Open label on hover when collapsed", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var buttons;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: true, otherApps: sampleApps }));
+                    buttons = react_2.screen.getAllByRole("button");
+                    expect(buttons).toHaveLength(2);
+                    return [4 /*yield*/, user_event_1.default.hover(buttons[0])];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                            expect(react_2.screen.getByText(/Open Billing/)).toBeInTheDocument();
+                        })];
+                case 2:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("renders no app rows when otherApps is empty", function () {
+        renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: true, otherApps: [] }));
+        expect(react_2.screen.queryByRole("button")).not.toBeInTheDocument();
+        expect(react_2.screen.queryByText("Billing")).not.toBeInTheDocument();
+    });
+});

package/dist/Components/Table/Components/TableHeader.js

@@ -60,7 +60,7 @@ var TableHeader = function (_a) {
     var _b = (0, react_2.useState)(null), openFilterId = _b[0], setOpenFilterId = _b[1];
     var RenderCheckbox = (0, react_2.useCallback)(function () {
         var _a, _b, _c, _d;
-        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" },
+        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, boxShadow: theme.shadows.md },
             react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" })));
     }, [
         checked,
@@ -72,11 +72,11 @@ var TableHeader = function (_a) {
     ]);
     var RenderConent = (0, react_2.useCallback)(function () {
         var _a, _b, _c, _d;
-        return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" }));
+        return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1, boxShadow: theme.shadows.md }));
     }, [noBorders, theme.colors]);
     var RenderView = (0, react_2.useCallback)(function () {
         var _a, _b, _c, _d;
-        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: "2px 0 5px rgba(0, 0, 0, 0.1)" }));
+        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[600], borderY: noBorders ? "none" : "0.063rem solid ".concat((_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1, boxShadow: theme.shadows.md }));
     }, [noBorders, theme.colors, isActionFreeze]);
     return (react_2.default.createElement(react_1.Tr, { pr: 0 },
         isContent && react_2.default.createElement(RenderConent, null),

package/dist/Components/Table/LeftFilterPane.js

@@ -150,10 +150,10 @@ var SectionContent = function (_a) {
 };
 // ─── Main Component ───────────────────────────────────────────────────────────
 var LeftFilterPane = function (_a) {
-    var _b, _c;
-    var _d = _a.title, title = _d === void 0 ? "Filter" : _d, _e = _a.height, height = _e === void 0 ? 300 : _e, sections = _a.sections, selectedProp = _a.selected, onApply = _a.onApply, onClear = _a.onClear, theme = _a.theme, _f = _a.isApplyLoading, isApplyLoading = _f === void 0 ? false : _f, _g = _a.filterMode, filterMode = _g === void 0 ? "sidebar" : _g;
-    var _h = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)), isSearching = _h[0], setIsSearching = _h[1];
-    var _j = (0, react_1.useState)({}), localSelected = _j[0], setLocalSelected = _j[1];
+    var _b, _c, _d, _e;
+    var _f = _a.title, title = _f === void 0 ? "Filter" : _f, _g = _a.height, height = _g === void 0 ? 300 : _g, sections = _a.sections, selectedProp = _a.selected, onApply = _a.onApply, onClear = _a.onClear, theme = _a.theme, _h = _a.isApplyLoading, isApplyLoading = _h === void 0 ? false : _h, _j = _a.filterMode, filterMode = _j === void 0 ? "sidebar" : _j;
+    var _k = (0, react_1.useState)(!!(selectedProp === null || selectedProp === void 0 ? void 0 : selectedProp.search)), isSearching = _k[0], setIsSearching = _k[1];
+    var _l = (0, react_1.useState)({}), localSelected = _l[0], setLocalSelected = _l[1];
     var searchRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         setLocalSelected(selectedProp || {});
@@ -256,7 +256,7 @@ var LeftFilterPane = function (_a) {
             react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Search, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c[500], onClick: function () { return setIsSearching(true); }, mr: filterMode === "modal" ? 8 : 2, mt: filterMode === "modal" ? -1 : 0 }))) : (react_1.default.createElement(framer_motion_1.motion.div, { ref: searchRef, initial: { opacity: 0, x: 40 }, animate: { opacity: 1, x: 0 }, transition: { type: "tween", duration: 0.2 } },
             react_1.default.createElement(react_2.InputGroup, { size: "sm" },
                 react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
-                    react_1.default.createElement(lucide_react_1.Search, { size: 16, color: "#555a64" })),
+                    react_1.default.createElement(lucide_react_1.Search, { size: 16, color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e[500] })),
                 react_1.default.createElement(react_2.Input, { placeholder: "Search", value: search, onChange: function (e) { return setSearch(e.target.value); }, autoFocus: true }),
                 search.length > 0 && (react_1.default.createElement(react_2.InputRightElement, null,
                     react_1.default.createElement(react_2.IconButton, { "aria-label": "Clear", size: "xs", variant: "ghost", icon: react_1.default.createElement(lucide_react_1.X, { size: 14 }), onClick: function () { setSearch(""); setIsSearching(false); } }))))))),

package/dist/Components/Timeline/Timeline.js

@@ -109,13 +109,13 @@ var Timeline = function (_a) {
         var _a, _b, _c, _d, _e, _f, _g;
         switch (title.toLowerCase()) {
             case "created":
-                return ((_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.green) === null || _b === void 0 ? void 0 : _b[50]) || "#f0fff4";
+                return (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.green) === null || _b === void 0 ? void 0 : _b[50];
             case "updated":
-                return ((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.yellow) === null || _d === void 0 ? void 0 : _d[50]) || "#fffbeb";
+                return (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.yellow) === null || _d === void 0 ? void 0 : _d[50];
             case "delete":
-                return ((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.red) === null || _f === void 0 ? void 0 : _f[50]) || "#fff5f5";
+                return (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.red) === null || _f === void 0 ? void 0 : _f[50];
             default:
-                return ((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.white) || "#ffffff";
+                return (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.white;
         }
     };
     if (!timelineEvents || timelineEvents.length === 0) {
@@ -123,35 +123,35 @@ var Timeline = function (_a) {
             react_1.default.createElement(react_2.Text, null, "No timeline events to display")));
     }
     return (react_1.default.createElement(react_2.Box, { position: "relative", px: { base: 3, md: 6 }, maxW: { base: "100%", md: "50rem" }, mx: "auto" },
-        react_1.default.createElement(react_2.Box, { position: "absolute", left: { base: "1.5rem", md: "50%" }, top: 0, bottom: 0, w: "0.125rem", bg: ((_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[300]) || "#e2e8f0", transform: { md: "translateX(-50%)" } }),
+        react_1.default.createElement(react_2.Box, { position: "absolute", left: { base: "1.5rem", md: "50%" }, top: 0, bottom: 0, w: "0.125rem", bg: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[300], transform: { md: "translateX(-50%)" } }),
         Object.keys(groupedEvents).map(function (date) {
             var _a, _b, _c, _d, _e;
             return (react_1.default.createElement(react_2.Box, { key: date, mb: 4 },
                 react_1.default.createElement(react_2.Flex, { justify: "center", mb: 4 },
-                    react_1.default.createElement(react_2.Box, { fontSize: { base: "0.875rem", md: "1rem" }, fontWeight: "400", color: ((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.black) || "#000000", bg: ((_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray) === null || _c === void 0 ? void 0 : _c[50]) || "#f7fafc", border: "0.063rem solid ".concat(((_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[300]) || "#e2e8f0"), borderRadius: "0.313rem", px: { base: 2, md: 6 }, py: 1, textAlign: "center", zIndex: 1 }, date)),
+                    react_1.default.createElement(react_2.Box, { fontSize: { base: "0.875rem", md: "1rem" }, fontWeight: "400", color: (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.black, bg: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray) === null || _c === void 0 ? void 0 : _c[50], border: "0.063rem solid ".concat((_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[300]), borderRadius: "0.313rem", px: { base: 2, md: 6 }, py: 1, textAlign: "center", zIndex: 1 }, date)),
                 groupedEvents[date].map(function (event, index) {
                     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
                     var isLeft = index % 2 === 0;
                     return (react_1.default.createElement(react_2.Box, { key: "".concat(date, "-").concat(index), mb: 4, position: "relative" }, isMobile ? (react_1.default.createElement(react_2.Flex, { align: "flex-start", gap: 3 },
-                        react_1.default.createElement(react_2.Box, { w: "1.5rem", h: "1.5rem", bg: ((_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray) === null || _b === void 0 ? void 0 : _b[50]) || "#f7fafc", borderRadius: "full", border: "0.063rem solid ".concat(((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) === null || _d === void 0 ? void 0 : _d[300]) || "#e2e8f0"), display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, mt: 0.5 }, getIcon(event)),
+                        react_1.default.createElement(react_2.Box, { w: "1.5rem", h: "1.5rem", bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray) === null || _b === void 0 ? void 0 : _b[50], borderRadius: "full", border: "0.063rem solid ".concat((_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) === null || _d === void 0 ? void 0 : _d[300]), display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, mt: 0.5 }, getIcon(event)),
                         react_1.default.createElement(react_2.Box, { flex: "1" },
                             react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: 1 },
-                                react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: ((_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f[500]) || "#718096", minW: "3.5rem" }, formatTimestamp(event.created_at, "time")),
-                                react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", fontWeight: "medium", color: ((_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray) === null || _h === void 0 ? void 0 : _h[700]) || "#2d3748" },
+                                react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f[500], minW: "3.5rem" }, formatTimestamp(event.created_at, "time")),
+                                react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", fontWeight: "medium", color: (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray) === null || _h === void 0 ? void 0 : _h[700] },
                                     event.action_from,
                                     " ",
                                     event.title),
                                 react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), placement: "top", hasArrow: true },
                                     react_1.default.createElement(react_2.Box, { cursor: "pointer" },
                                         react_1.default.createElement(lucide_react_1.Info, { size: 12 })))),
-                            react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", color: ((_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[500]) || "#718096" },
+                            react_1.default.createElement(react_2.Text, { fontSize: "0.7rem", color: (_k = (_j = theme.colors) === null || _j === void 0 ? void 0 : _j.gray) === null || _k === void 0 ? void 0 : _k[500] },
                                 "by ",
                                 (0, functions_1.toWords)(event.action_by))))) : (
                     // Desktop Layout
                     react_1.default.createElement(react_2.Flex, { justify: isLeft ? "flex-start" : "flex-end", align: "flex-start", position: "relative" },
-                        react_1.default.createElement(react_2.Box, { position: "absolute", left: isLeft ? "auto" : "calc(50% + 0.938rem)", right: isLeft ? "calc(50% + 0.938rem)" : "auto", top: "0.938rem", width: isLeft ? "calc(50% - 4rem)" : "calc(50% - 4rem)", height: "0.125rem", bg: ((_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray) === null || _m === void 0 ? void 0 : _m[300]) || "#e2e8f0", zIndex: 0 }),
-                        react_1.default.createElement(react_2.Box, { position: "absolute", left: "50%", transform: "translateX(-50%)", w: "1.875rem", h: "1.875rem", bg: ((_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[50]) || "#f7fafc", borderRadius: "full", border: "0.063rem solid ".concat(((_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.gray) === null || _r === void 0 ? void 0 : _r[300]) || "#e2e8f0"), display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 }, getIcon(event)),
-                        react_1.default.createElement(react_2.Box, { bg: getEventBgColor(event.title), border: "0.063rem solid ".concat(((_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.gray) === null || _t === void 0 ? void 0 : _t[300]) || "#e2e8f0"), borderRadius: "0.5rem", px: 4, py: 2, maxW: "16rem", boxShadow: "sm", zIndex: 1, ml: isLeft ? 0 : "50%", mr: isLeft ? "50%" : 0, width: "calc(50% - 2rem)", position: "relative" },
+                        react_1.default.createElement(react_2.Box, { position: "absolute", left: isLeft ? "auto" : "calc(50% + 0.938rem)", right: isLeft ? "calc(50% + 0.938rem)" : "auto", top: "0.938rem", width: isLeft ? "calc(50% - 4rem)" : "calc(50% - 4rem)", height: "0.125rem", bg: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.gray) === null || _m === void 0 ? void 0 : _m[300], zIndex: 0 }),
+                        react_1.default.createElement(react_2.Box, { position: "absolute", left: "50%", transform: "translateX(-50%)", w: "1.875rem", h: "1.875rem", bg: (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.gray) === null || _p === void 0 ? void 0 : _p[50], borderRadius: "full", border: "0.063rem solid ".concat((_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.gray) === null || _r === void 0 ? void 0 : _r[300]), display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2 }, getIcon(event)),
+                        react_1.default.createElement(react_2.Box, { bg: getEventBgColor(event.title), border: "0.063rem solid ".concat((_t = (_s = theme.colors) === null || _s === void 0 ? void 0 : _s.gray) === null || _t === void 0 ? void 0 : _t[300]), borderRadius: "0.5rem", px: 4, py: 2, maxW: "16rem", boxShadow: "sm", zIndex: 1, ml: isLeft ? 0 : "50%", mr: isLeft ? "50%" : 0, width: "calc(50% - 2rem)", position: "relative" },
                             react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", mb: 1 },
                                 react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", fontWeight: "medium" },
                                     event.action_from,
@@ -160,10 +160,10 @@ var Timeline = function (_a) {
                                 react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), placement: "top", hasArrow: true },
                                     react_1.default.createElement(react_2.Box, { ml: 1, cursor: "pointer" },
                                         react_1.default.createElement(lucide_react_1.Info, { size: 14 })))),
-                            react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: ((_v = (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.gray) === null || _v === void 0 ? void 0 : _v[500]) || "#718096" },
+                            react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: (_v = (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.gray) === null || _v === void 0 ? void 0 : _v[500] },
                                 "by ",
                                 (0, functions_1.toWords)(event.action_by)),
-                            react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: ((_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.gray) === null || _x === void 0 ? void 0 : _x[500]) || "#718096" }, formatTimestamp(event.created_at, "time")))))));
+                            react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", color: (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.gray) === null || _x === void 0 ? void 0 : _x[500] }, formatTimestamp(event.created_at, "time")))))));
                 })));
         })));
 };

package/dist/Components/Trail/TrailWorks.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("@chakra-ui/react");
 var react_2 = __importDefault(require("react"));
 var TrailWorks = function () {
+    var _a, _b, _c;
+    var theme = (0, react_1.useTheme)();
+    var cellBorder = (_b = (_a = theme.colors.border) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[300];
     var data = [
         {
             contact: "John Doe",
@@ -45,218 +48,22 @@ var TrailWorks = function () {
         },
     ];
     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" },
+        return (react_2.default.createElement(react_1.Tr, { key: index, border: "1px solid", borderColor: cellBorder },
+            react_2.default.createElement(react_1.Td, { border: "1px solid", borderColor: cellBorder, 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]));
+            columns.map(function (column, colIndex) {
+                return (react_2.default.createElement(react_1.Td, { key: colIndex, border: "1px solid", borderColor: cellBorder }, 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.Table, { variant: "simple", size: "md", border: "1px solid", borderColor: cellBorder },
+            react_2.default.createElement(react_1.Thead, { border: "1px solid", borderColor: cellBorder },
+                react_2.default.createElement(react_1.Tr, { border: "1px solid", borderColor: cellBorder },
+                    react_2.default.createElement(react_1.Th, { border: "1px solid", borderColor: cellBorder, 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));
+                        return (react_2.default.createElement(react_1.Th, { key: index, border: "1px solid", borderColor: cellBorder }, column.Header));
                     }))),
-            react_2.default.createElement(react_1.Tbody, { border: "1px solid #bbbbbb" }, data.map(function (row, index) { return renderRow(row, index); })))));
+            react_2.default.createElement(react_1.Tbody, { border: "1px solid", borderColor: cellBorder }, 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/Theme/chartColorsFromTheme.d.ts

@@ -0,0 +1,18 @@
+import type { CustomThemeProps } from "./themeProps";
+export type ThemeColorPalette = CustomThemeProps["colors"];
+/** Default multi-series palette for Apex charts (strings required by ApexCharts). */
+export declare function getDefaultSeriesColors(colors: ThemeColorPalette): string[];
+export declare function mergeChartTitleStyle(colors: ThemeColorPalette, titleStyle?: {
+    color?: string;
+    fontSize?: string;
+    fontWeight?: number | string;
+    fontFamily?: string;
+}): {
+    color: string;
+    fontSize: string;
+    fontWeight: number | string;
+    fontFamily: string;
+};
+export declare function chartAxisLabelColor(colors: ThemeColorPalette): string;
+export declare function chartTooltipBackground(colors: ThemeColorPalette): string;
+export declare function chartTooltipForeground(colors: ThemeColorPalette): string;