pixelize-design-library 2.3.1-beta.2 → 2.3.1-beta.20

package/dist/Components/Timeline/Timeline.js

@@ -9,13 +9,14 @@ var lucide_react_1 = require("lucide-react");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var functions_1 = require("../../Utils/functions");
 var Timeline = function (_a) {
-    var _b, _c, _d, _e;
-    var timelineEvents = _a.timelineEvents;
+    var _b, _c, _d, _e, _f, _g, _h;
+    var timelineEvents = _a.timelineEvents, onEventClick = _a.onEventClick;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var colors = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
     var isMobile = (0, react_2.useBreakpointValue)({ base: true, md: false });
     var formatTimestamp = function (timestamp, type) {
         var parsedTimestamp;
-        if (typeof timestamp === 'string' && !timestamp.match(/^\d+$/)) {
+        if (typeof timestamp === "string" && !timestamp.match(/^\d+$/)) {
             var date_1 = new Date(timestamp);
             if (!isNaN(date_1.getTime())) {
                 if (type === "date") {
@@ -57,16 +58,47 @@ var Timeline = function (_a) {
         }
         return date.toLocaleString();
     };
-    var getIcon = function (event) {
+    // A semantic color scale chosen by the action title (created / updated / delete).
+    var getEventScale = function (title) {
+        var _a, _b, _c, _d, _e, _f;
+        switch ((title || "").toLowerCase()) {
+            case "created":
+                return (_b = (_a = colors.semantic) === null || _a === void 0 ? void 0 : _a.success) !== null && _b !== void 0 ? _b : colors.green;
+            case "updated":
+                return (_d = (_c = colors.semantic) === null || _c === void 0 ? void 0 : _c.warning) !== null && _d !== void 0 ? _d : colors.orange;
+            case "delete":
+            case "deleted":
+                return (_f = (_e = colors.semantic) === null || _e === void 0 ? void 0 : _e.error) !== null && _f !== void 0 ? _f : colors.red;
+            default:
+                return colors.primary;
+        }
+    };
+    // Action-title icon (what happened); falls back to the source icon below.
+    var getActionIcon = function (title, size) {
+        switch ((title || "").toLowerCase()) {
+            case "created":
+                return react_1.default.createElement(lucide_react_1.Plus, { size: size });
+            case "updated":
+                return react_1.default.createElement(lucide_react_1.PencilLine, { size: size });
+            case "delete":
+            case "deleted":
+                return react_1.default.createElement(lucide_react_1.Trash2, { size: size });
+            default:
+                return null;
+        }
+    };
+    // Source icon (where it came from) — preserves the original mapping.
+    var getSourceIcon = function (event, size) {
         switch (event.action_from) {
             case "Accounts":
-                return react_1.default.createElement(lucide_react_1.IndianRupee, { size: isMobile ? 14 : 17 });
+                return react_1.default.createElement(lucide_react_1.IndianRupee, { size: size });
             case "Notes":
-                return react_1.default.createElement(lucide_react_1.FileText, { size: isMobile ? 14 : 17 });
+                return react_1.default.createElement(lucide_react_1.FileText, { size: size });
             default:
-                return react_1.default.createElement(lucide_react_1.Volleyball, { size: isMobile ? 14 : 17 });
+                return react_1.default.createElement(lucide_react_1.Volleyball, { size: size });
         }
     };
+    var getIcon = function (event, size) { var _a; return (_a = getActionIcon(event.title, size)) !== null && _a !== void 0 ? _a : getSourceIcon(event, size); };
     var groupEventsByDate = function (events) {
         return events.reduce(function (groups, event) {
             var date = formatTimestamp(event.created_at, "date");
@@ -79,91 +111,126 @@ var Timeline = function (_a) {
         }, {});
     };
     var groupedEvents = groupEventsByDate(timelineEvents);
-    var formatChanges = function (changes) {
+    var parseChanges = function (changes) {
         if (!changes || changes === "null")
-            return "No Changes";
+            return [];
         try {
-            var parsedChanges = JSON.parse(changes);
-            if (typeof parsedChanges !== 'object' || parsedChanges === null) {
-                return "No Changes";
-            }
-            return Object.entries(parsedChanges)
-                .map(function (_a) {
+            var parsed = typeof changes === "string" ? JSON.parse(changes) : changes;
+            if (typeof parsed !== "object" || parsed === null)
+                return [];
+            return Object.entries(parsed).map(function (_a) {
+                var _b;
                 var key = _a[0], value = _a[1];
-                var changeRecord = value;
-                if (changeRecord.original === null || changeRecord.original === undefined) {
-                    return "".concat(key, " changed from null to ").concat(changeRecord.updated);
-                }
-                else {
-                    return "".concat(key, " updated from ").concat(changeRecord.original, " to ").concat(changeRecord.updated);
-                }
-            })
-                .join("\n");
+                var record = value;
+                return {
+                    field: key,
+                    from: (_b = record === null || record === void 0 ? void 0 : record.original) !== null && _b !== void 0 ? _b : null,
+                    to: record === null || record === void 0 ? void 0 : record.updated,
+                };
+            });
         }
         catch (error) {
             console.error("Error parsing changes:", error);
-            return "Error parsing changes";
+            return [];
         }
     };
-    var getEventBgColor = function (title) {
-        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];
-            case "updated":
-                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];
-            default:
-                return (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.white;
-        }
+    var initials = function (name) {
+        return (name || "")
+            .trim()
+            .split(/\s+/)
+            .map(function (p) { return p[0]; })
+            .slice(0, 2)
+            .join("")
+            .toUpperCase() || "?";
     };
     if (!timelineEvents || timelineEvents.length === 0) {
-        return (react_1.default.createElement(react_2.Box, { textAlign: "center", py: 8, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.gray) === null || _c === void 0 ? void 0 : _c[500] },
-            react_1.default.createElement(react_2.Text, null, "No timeline events to display")));
+        return (react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[500] },
+            react_1.default.createElement(react_2.Box, { boxSize: "2.75rem", borderRadius: "full", bg: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[100], display: "flex", alignItems: "center", justifyContent: "center", color: (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[400] },
+                react_1.default.createElement(lucide_react_1.Volleyball, { size: 20 })),
+            react_1.default.createElement(react_2.Text, { fontSize: "0.875rem", fontWeight: 500 }, "No timeline events to display")));
+    }
+    // The colored event card (shared by both the desktop "tree" and mobile rail).
+    // `accent` decides which edge carries the colored bar (pointing toward the spine).
+    var EventCard = function (_a) {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
+        var event = _a.event, index = _a.index, accent = _a.accent;
+        var scale = getEventScale(event.title);
+        var changes = parseChanges(event.changes);
+        var clickable = typeof onEventClick === "function";
+        return (react_1.default.createElement(react_2.Box, { position: "relative", zIndex: 1, bg: (_b = colors.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]), borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderRadius: "0.625rem", px: 3.5, py: 2.5, transition: "all 0.15s ease", cursor: clickable ? "pointer" : "default", onClick: clickable ? function () { return onEventClick(event, index); } : undefined, _hover: {
+                borderColor: (_f = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _f !== void 0 ? _f : (_g = colors.gray) === null || _g === void 0 ? void 0 : _g[300],
+                boxShadow: (_h = theme.shadows) === null || _h === void 0 ? void 0 : _h.md,
+                transform: clickable ? "translateY(-1px)" : undefined,
+            } },
+            react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap" },
+                react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, minW: 0 },
+                    react_1.default.createElement(react_2.Text, { fontSize: "0.8125rem", fontWeight: 600, color: (_k = (_j = colors.text) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[800], noOfLines: 1 }, event.action_from),
+                    react_1.default.createElement(react_2.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (_m = scale === null || scale === void 0 ? void 0 : scale[700]) !== null && _m !== void 0 ? _m : scale === null || scale === void 0 ? void 0 : scale[600], bg: scale === null || scale === void 0 ? void 0 : scale[50], border: "0.063rem solid ".concat((_o = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _o !== void 0 ? _o : (_p = colors.gray) === null || _p === void 0 ? void 0 : _p[200]), borderRadius: "full", px: 2, py: 1 }, event.title)),
+                react_1.default.createElement(react_2.Text, { fontSize: "0.6875rem", color: (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[500], whiteSpace: "nowrap" }, formatTimestamp(event.created_at, "time"))),
+            changes.length > 0 && (react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, mt: 2 }, changes.map(function (c, i) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                return (react_1.default.createElement(react_2.Flex, { key: "".concat(c.field, "-").concat(i), align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap" },
+                    react_1.default.createElement(react_2.Text, { fontWeight: 600, color: (_b = (_a = colors.text) === null || _a === void 0 ? void 0 : _a[700]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[700] }, (0, functions_1.toWords)(c.field)),
+                    c.from !== null && c.from !== undefined && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(react_2.Box, { as: "span", color: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[500], bg: (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50], borderRadius: "0.25rem", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, String(c.from)),
+                        react_1.default.createElement(react_2.Box, { as: "span", color: (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[400], display: "inline-flex" },
+                            react_1.default.createElement(lucide_react_1.ArrowRight, { size: 11 })))),
+                    react_1.default.createElement(react_2.Box, { as: "span", color: (_j = (_h = (_g = colors.semantic) === null || _g === void 0 ? void 0 : _g.success) === null || _h === void 0 ? void 0 : _h[700]) !== null && _j !== void 0 ? _j : (_k = colors.green) === null || _k === void 0 ? void 0 : _k[700], bg: (_o = (_m = (_l = colors.semantic) === null || _l === void 0 ? void 0 : _l.success) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : (_p = colors.green) === null || _p === void 0 ? void 0 : _p[50], borderRadius: "0.25rem", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, String(c.to))));
+            }))),
+            react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mt: 2 },
+                react_1.default.createElement(react_2.Tooltip, { label: (0, functions_1.toWords)(event.action_by), placement: "top", hasArrow: true },
+                    react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "1.25rem", minW: "1.25rem", borderRadius: "full", bg: (_t = (_s = (_r = colors.primary) === null || _r === void 0 ? void 0 : _r.opacity) === null || _s === void 0 ? void 0 : _s[16]) !== null && _t !== void 0 ? _t : (_u = colors.primary) === null || _u === void 0 ? void 0 : _u[50], color: (_v = colors.primary) === null || _v === void 0 ? void 0 : _v[600], fontSize: "0.5625rem", fontWeight: 700 }, initials((0, functions_1.toWords)(event.action_by)))),
+                react_1.default.createElement(react_2.Text, { fontSize: "0.6875rem", color: (_w = colors.gray) === null || _w === void 0 ? void 0 : _w[500] },
+                    "by",
+                    " ",
+                    react_1.default.createElement(react_2.Box, { as: "span", color: (_y = (_x = colors.text) === null || _x === void 0 ? void 0 : _x[700]) !== null && _y !== void 0 ? _y : (_z = colors.gray) === null || _z === void 0 ? void 0 : _z[700], fontWeight: 500 }, (0, functions_1.toWords)(event.action_by))))));
+    };
+    var NODE = "1.875rem"; // 30px node, centered on the spine
+    var NODE_RADIUS = "0.9375rem";
+    var SPINE_GAP = "1.75rem"; // gap between spine and card edge
+    // -------------------------------------------------------------------------
+    // Mobile: single left rail (alternating doesn't read well on narrow widths)
+    // -------------------------------------------------------------------------
+    if (isMobile) {
+        return (react_1.default.createElement(react_2.Box, { maxW: "100%", px: 2, py: 2 }, Object.keys(groupedEvents).map(function (date) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+            return (react_1.default.createElement(react_2.Box, { key: date, mb: 2 },
+                react_1.default.createElement(react_2.Flex, { align: "center", gap: 3, mb: 4, mt: 2 },
+                    react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[500], bg: (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[50], border: "0.063rem solid ".concat((_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]), borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap" }, date),
+                    react_1.default.createElement(react_2.Box, { flex: "1", h: "0.063rem", bg: (_g = (_f = colors.boxborder) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[200] })),
+                react_1.default.createElement(react_2.Box, { position: "relative" },
+                    react_1.default.createElement(react_2.Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: (_k = (_j = colors.gray) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = colors.boxborder) === null || _l === void 0 ? void 0 : _l[400], transform: "translateX(-50%)" }),
+                    groupedEvents[date].map(function (event, index) {
+                        var _a, _b, _c, _d;
+                        var scale = getEventScale(event.title);
+                        return (react_1.default.createElement(react_2.Flex, { key: "".concat((_a = event.logs_id) !== null && _a !== void 0 ? _a : date, "-").concat(index), align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3 },
+                            react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: "0.125rem solid ".concat((_b = colors.white) !== null && _b !== void 0 ? _b : "#fff"), boxShadow: "0 0 0 0.063rem ".concat((_c = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _c !== void 0 ? _c : (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200]), zIndex: 1 }, getIcon(event, 14)),
+                            react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
+                                react_1.default.createElement(EventCard, { event: event, index: index, accent: "left" }))));
+                    }))));
+        })));
     }
-    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], transform: { md: "translateX(-50%)" } }),
+    // -------------------------------------------------------------------------
+    // Desktop: center spine with cards alternating left / right (the "tree")
+    // -------------------------------------------------------------------------
+    return (react_1.default.createElement(react_2.Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2 },
+        react_1.default.createElement(react_2.Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[300]) !== null && _g !== void 0 ? _g : (_h = colors.boxborder) === null || _h === void 0 ? void 0 : _h[400], transform: "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, 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)),
+            var _a, _b, _c, _d, _e, _f;
+            return (react_1.default.createElement(react_2.Box, { key: date, mb: 2 },
+                react_1.default.createElement(react_2.Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2 },
+                    react_1.default.createElement(react_2.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[600], bg: (_b = colors.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]), boxShadow: (_f = theme.shadows) === null || _f === void 0 ? void 0 : _f.xs, borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap" }, 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 _a, _b, _c, _d, _e, _f;
                     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], 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], 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] },
-                                "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], 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,
-                                    " ",
-                                    event.title),
-                                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] },
-                                "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] }, formatTimestamp(event.created_at, "time")))))));
+                    var scale = getEventScale(event.title);
+                    return (react_1.default.createElement(react_2.Box, { key: "".concat((_a = event.logs_id) !== null && _a !== void 0 ? _a : date, "-").concat(index), position: "relative", mb: index === groupedEvents[date].length - 1 ? 0 : 5, minH: NODE },
+                        react_1.default.createElement(react_2.Box, { position: "absolute", top: "1.375rem", h: "0.125rem", w: "0.8125rem", bg: (_b = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300], left: isLeft
+                                ? "calc(50% - ".concat(SPINE_GAP, ")")
+                                : "calc(50% + ".concat(NODE_RADIUS, ")"), zIndex: 0 }),
+                        react_1.default.createElement(react_2.Flex, { position: "absolute", left: "50%", top: "0.5rem", transform: "translateX(-50%)", align: "center", justify: "center", boxSize: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: "0.125rem solid ".concat((_d = colors.white) !== null && _d !== void 0 ? _d : "#fff"), boxShadow: "0 0 0 0.063rem ".concat((_e = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]), zIndex: 2 }, getIcon(event, 15)),
+                        react_1.default.createElement(react_2.Box, { position: "relative", zIndex: 1, w: "calc(50% - ".concat(SPINE_GAP, ")"), ml: isLeft ? 0 : "calc(50% + ".concat(SPINE_GAP, ")") },
+                            react_1.default.createElement(EventCard, { event: event, index: index, accent: isLeft ? "right" : "left" }))));
                 })));
         })));
 };

package/dist/Components/Toaster/Toaster.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -37,50 +41,65 @@ exports.useToaster = void 0;
 exports.default = ToasterProvider;
 var react_1 = __importStar(require("react"));
 var react_2 = require("@chakra-ui/react");
+var react_3 = require("@emotion/react");
+var lucide_react_1 = require("lucide-react");
 var ToasterContext = (0, react_1.createContext)(undefined);
+var shrink = (0, react_3.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { transform: scaleX(1); }\n  to { transform: scaleX(0); }\n"], ["\n  from { transform: scaleX(1); }\n  to { transform: scaleX(0); }\n"])));
 function ToasterProvider(_a) {
+    var _b;
     var children = _a.children;
     var toast = (0, react_2.useToast)();
     var theme = (0, react_2.useTheme)();
+    var c = (_b = theme.colors) !== null && _b !== void 0 ? _b : {};
     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 = {
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var title = _a.title, description = _a.description, _t = _a.status, status = _t === void 0 ? "info" : _t, _u = _a.duration, duration = _u === void 0 ? 5000 : _u, _v = _a.isClosable, isClosable = _v === void 0 ? true : _v, _w = _a.position, position = _w === void 0 ? "top-right" : _w, onClose = _a.onClose;
+        // Status → semantic color scale + icon (falls back to legacy palettes).
+        var statusConfig = {
             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],
+                scale: (_c = (_b = c.semantic) === null || _b === void 0 ? void 0 : _b.success) !== null && _c !== void 0 ? _c : c.green,
+                icon: react_1.default.createElement(lucide_react_1.CheckCircle2, { size: 18 }),
             },
             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],
+                scale: (_e = (_d = c.semantic) === null || _d === void 0 ? void 0 : _d.error) !== null && _e !== void 0 ? _e : c.red,
+                icon: react_1.default.createElement(lucide_react_1.XCircle, { size: 18 }),
             },
             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],
+                scale: (_h = (_g = (_f = c.semantic) === null || _f === void 0 ? void 0 : _f.warning) !== null && _g !== void 0 ? _g : c.yellow) !== null && _h !== void 0 ? _h : c.orange,
+                icon: react_1.default.createElement(lucide_react_1.AlertTriangle, { size: 18 }),
             },
             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],
+                scale: (_k = (_j = c.semantic) === null || _j === void 0 ? void 0 : _j.info) !== null && _k !== void 0 ? _k : c.blue,
+                icon: react_1.default.createElement(lucide_react_1.Info, { size: 18 }),
             },
             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],
+                scale: (_l = c.primary) !== null && _l !== void 0 ? _l : c.gray,
+                icon: react_1.default.createElement(react_2.Spinner, { size: "sm", thickness: "0.125rem", speed: "0.7s" }),
             },
         };
-        var colors = statusColors[status];
+        var _x = (_m = statusConfig[status]) !== null && _m !== void 0 ? _m : statusConfig.info, scale = _x.scale, icon = _x.icon;
+        var solid = (_o = scale === null || scale === void 0 ? void 0 : scale[500]) !== null && _o !== void 0 ? _o : (_p = c.gray) === null || _p === void 0 ? void 0 : _p[500];
+        var soft = (_q = scale === null || scale === void 0 ? void 0 : scale[50]) !== null && _q !== void 0 ? _q : (_r = c.gray) === null || _r === void 0 ? void 0 : _r[50];
+        var accent = (_s = scale === null || scale === void 0 ? void 0 : scale[600]) !== null && _s !== void 0 ? _s : solid;
+        var showProgress = typeof duration === "number" && duration > 0;
         toast({
             duration: duration,
             isClosable: isClosable,
             position: position,
             onCloseComplete: onClose,
             render: function (_a) {
+                var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
                 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(react_2.Box, { position: "relative", bg: (_b = c.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_d = (_c = c.boxborder) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = c.gray) === null || _e === void 0 ? void 0 : _e[200]), boxShadow: (_g = (_f = theme.shadows) === null || _f === void 0 ? void 0 : _f.lg) !== null && _g !== void 0 ? _g : "lg", borderRadius: "0.75rem", overflow: "hidden", minW: "22.5rem", maxW: "26rem" },
+                    react_1.default.createElement(react_2.Flex, { p: 3.5, gap: 3, align: "center" },
+                        react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: soft, color: accent }, icon),
+                        react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
+                            title && (react_1.default.createElement(react_2.Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: (_j = (_h = c.text) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : (_k = c.gray) === null || _k === void 0 ? void 0 : _k[800] }, title)),
+                            description && (react_1.default.createElement(react_2.Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: (_m = (_l = c.gray) === null || _l === void 0 ? void 0 : _l[600]) !== null && _m !== void 0 ? _m : (_o = c.text) === null || _o === void 0 ? void 0 : _o[600], mt: title ? "0.125rem" : 0 }, description))),
+                        isClosable && (react_1.default.createElement(react_2.CloseButton, { onClick: onClose, size: "sm", color: (_p = c.gray) === null || _p === void 0 ? void 0 : _p[500], borderRadius: "md", _hover: { bg: (_q = c.gray) === null || _q === void 0 ? void 0 : _q[100], color: (_r = c.gray) === null || _r === void 0 ? void 0 : _r[700] } }))),
+                    showProgress && (react_1.default.createElement(react_2.Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: solid, transformOrigin: "left", sx: {
+                            animation: "".concat(shrink, " ").concat(duration, "ms linear forwards"),
+                        } }))));
             },
         });
     };
@@ -94,3 +113,4 @@ var useToaster = function () {
     return context;
 };
 exports.useToaster = useToaster;
+var templateObject_1;

package/dist/Components/UpgradeButton/UpgradeButton.d.ts

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

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -0,0 +1,73 @@
+"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 sizeMap = {
+    sm: { px: "12px", py: "4px", font: "12px", sub: "8px", icon: 11, radius: "40px" },
+    md: { px: "20px", py: "5px", font: "14px", sub: "10px", icon: 13, radius: "50px" },
+    lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "60px" },
+};
+var FALLBACK_GRADIENT = { from: "#667eea", to: "#764ba2" };
+var UpgradeButton = function (_a) {
+    var _b, _c;
+    var label = _a.label, mobileLabel = _a.mobileLabel, subtitle = _a.subtitle, _d = _a.icon, icon = _d === void 0 ? lucide_react_1.Sparkles : _d, _e = _a.iconColor, iconColor = _e === void 0 ? "#FFD66B" : _e, _f = _a.variant, variant = _f === void 0 ? "brand" : _f, gradient = _a.gradient, _g = _a.size, size = _g === void 0 ? "md" : _g, _h = _a.shimmer, shimmer = _h === void 0 ? true : _h, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, _k = _a.isDisabled, isDisabled = _k === void 0 ? false : _k, _l = _a.maxLabelWidth, maxLabelWidth = _l === void 0 ? "160px" : _l, ariaLabel = _a.ariaLabel, onClick = _a.onClick;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var c = theme.colors;
+    var themeGradient = (_b = c.gradient) !== null && _b !== void 0 ? _b : FALLBACK_GRADIENT;
+    var variantGradient = {
+        brand: themeGradient,
+        primary: { from: c.primary[500], to: c.primary[700] },
+        secondary: { from: c.secondary[400], to: c.secondary[600] },
+        success: { from: c.semantic.success[400], to: c.semantic.success[600] },
+        warning: { from: c.semantic.warning[400], to: c.semantic.warning[600] },
+        danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
+        info: { from: c.semantic.info[400], to: c.semantic.info[600] },
+    };
+    var resolved = (_c = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant]) !== null && _c !== void 0 ? _c : themeGradient;
+    var s = sizeMap[size];
+    var Icon = icon;
+    var blocked = isLoading || isDisabled;
+    var g = "linear-gradient(135deg, ".concat(resolved.from, " 0%, ").concat(resolved.to, " 100%)");
+    var gReversed = "linear-gradient(135deg, ".concat(resolved.to, " 0%, ").concat(resolved.from, " 100%)");
+    var hasMobile = !!mobileLabel && mobileLabel !== label;
+    return (react_1.default.createElement(react_2.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: "white", borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _focusVisible: { outline: "none", boxShadow: "0 0 0 3px ".concat(resolved.from, "55") }, _hover: blocked
+            ? undefined
+            : __assign({ transform: "translateY(-2px)", bgImage: gReversed, boxShadow: "0 10px 30px ".concat(resolved.from, "66") }, (shimmer ? { _before: { left: "130%" } } : {})), sx: shimmer
+            ? {
+                _before: {
+                    content: '""',
+                    position: "absolute",
+                    top: 0,
+                    left: "-75%",
+                    width: "55%",
+                    height: "100%",
+                    background: "linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent)",
+                    transform: "skewX(-20deg)",
+                    transition: "left 0.7s ease",
+                    pointerEvents: "none",
+                },
+            }
+            : undefined },
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1 },
+            react_1.default.createElement(react_2.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block" }, label),
+            hasMobile && (react_1.default.createElement(react_2.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" } }, mobileLabel)),
+            isLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "1.5px", color: iconColor })) : (Icon && react_1.default.createElement(Icon, { size: s.icon, color: iconColor, style: { flexShrink: 0 } }))),
+        subtitle && (react_1.default.createElement(react_2.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: iconColor, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1 }, subtitle))));
+};
+exports.default = UpgradeButton;

package/dist/Components/UpgradeButton/UpgradeButtonProps.d.ts

@@ -0,0 +1,43 @@
+import { ElementType } from "react";
+export type UpgradeButtonSize = "sm" | "md" | "lg";
+/**
+ * Theme-aware color variants. Each resolves to a gradient built from the
+ * active theme's tokens, so the button blends with whichever theme is active.
+ */
+export type UpgradeButtonVariant = "brand" | "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+export interface UpgradeButtonProps {
+    /** Primary label (shown on md+ screens). */
+    label: string;
+    /** Compact label for small screens. Defaults to `label`. */
+    mobileLabel?: string;
+    /** Optional small second line, e.g. a plan-expiry message. */
+    subtitle?: string;
+    /** Leading icon. Defaults to lucide `Sparkles`. Pass null to hide. */
+    icon?: ElementType | null;
+    /** Icon color. Defaults to a gold tone. */
+    iconColor?: string;
+    /**
+     * Theme-aware color variant. Defaults to `brand` (the active theme's
+     * gradient). Ignored when an explicit `gradient` is provided.
+     */
+    variant?: UpgradeButtonVariant;
+    /**
+     * Explicit gradient stops. Overrides `variant` and the theme gradient when
+     * provided.
+     */
+    gradient?: {
+        from: string;
+        to: string;
+    };
+    size?: UpgradeButtonSize;
+    /** Animated light sweep on hover. Default true. */
+    shimmer?: boolean;
+    /** Show a spinner and block interaction. */
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    /** Truncate the label beyond this width. */
+    maxLabelWidth?: string;
+    /** Accessible label (falls back to `label`). */
+    ariaLabel?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

package/dist/Components/UpgradeButton/UpgradeButtonProps.js

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

package/dist/Components/UserDetails/AddUserModal.d.ts

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