pixelize-design-library 2.3.1-beta.1 → 2.3.1-beta.10

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/Utils/table.d.ts

@@ -23,7 +23,12 @@ export type TableGroup = {
     label: string;
     rows: DataObject[];
 };
-/** Partition rows by a column key, preserving first-seen group order. */
+/**
+ * Partition rows by a column, preserving first-seen group order. The group key is
+ * a normalized string so object/array values (e.g. a `user` field that is an object
+ * or an array of users) group together by their readable text instead of by object
+ * identity.
+ */
 export declare function groupRows(data: DataObject[], groupBy: string | number): TableGroup[];
 export declare const calculateLeftOffset: (columns: number[], index: number) => number;
 /**

package/dist/Utils/table.js

@@ -137,14 +137,19 @@ function pickTableColor(value, palette, override) {
         return { solid: "#8B3FC8", soft: "#8B3FC822", text: "#8B3FC8" };
     return palette[hashKey(value) % palette.length];
 }
-/** Partition rows by a column key, preserving first-seen group order. */
+/**
+ * Partition rows by a column, preserving first-seen group order. The group key is
+ * a normalized string so object/array values (e.g. a `user` field that is an object
+ * or an array of users) group together by their readable text instead of by object
+ * identity.
+ */
 function groupRows(data, groupBy) {
     var order = [];
     var map = new Map();
     for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
         var row = data_1[_i];
-        var raw = row[groupBy];
-        var key = raw === undefined || raw === null || raw === "" ? "—" : raw;
+        var text = getStringValue(row[groupBy]);
+        var key = text === "" ? "—" : text;
         if (!map.has(key)) {
             map.set(key, []);
             order.push(key);
@@ -170,21 +175,49 @@ var extractTextFromReactNode = function (node) {
     }
     return "";
 };
+/** Best-effort readable text for an entity object (user/relation/option/etc.). */
+var objectToText = function (o) {
+    var _a, _b;
+    if (typeof o.label === "string" || typeof o.label === "number")
+        return String(o.label);
+    if (typeof o.name === "string" || typeof o.name === "number")
+        return String(o.name);
+    var first = (_a = o.first_name) !== null && _a !== void 0 ? _a : o.firstName;
+    var last = (_b = o.last_name) !== null && _b !== void 0 ? _b : o.lastName;
+    if (typeof first === "string" || typeof last === "string") {
+        return "".concat(first !== null && first !== void 0 ? first : "", " ").concat(last !== null && last !== void 0 ? last : "").trim();
+    }
+    if (typeof o.full_name === "string")
+        return o.full_name;
+    if (typeof o.title === "string")
+        return o.title;
+    if (typeof o.company_name === "string")
+        return o.company_name;
+    if (typeof o.email === "string")
+        return o.email;
+    if (typeof o.value === "string" || typeof o.value === "number")
+        return String(o.value);
+    return "";
+};
+/**
+ * Readable string for any cell value. Handles primitives, React elements, entity
+ * objects (e.g. `user`: `{ name }` / `{ first_name, last_name }`), and arrays of
+ * any of those (e.g. a multi-user field) by joining their texts.
+ */
 var getStringValue = function (value) {
-    if (typeof value === "string" || typeof value === "number") {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
         return String(value);
     }
     if (react_1.default.isValidElement(value)) {
         return extractTextFromReactNode(value);
     }
-    if (value && typeof value === "object") {
-        var o = value;
-        if (typeof o.label === "string" || typeof o.label === "number") {
-            return String(o.label);
-        }
-        if (typeof o.name === "string" || typeof o.name === "number") {
-            return String(o.name);
-        }
+    if (Array.isArray(value)) {
+        return value.map(getStringValue).filter(function (s) { return s !== ""; }).join(", ");
+    }
+    if (typeof value === "object") {
+        return objectToText(value);
     }
     return "";
 };
@@ -203,21 +236,8 @@ function normalizeTableCellValue(value) {
     if (react_1.default.isValidElement(value)) {
         return value;
     }
-    if (typeof value === "object") {
-        var o = value;
-        if (typeof o.label === "string" || typeof o.label === "number") {
-            return String(o.label);
-        }
-        if (typeof o.name === "string" || typeof o.name === "number") {
-            return String(o.name);
-        }
-        if (typeof o.title === "string")
-            return o.title;
-        if (typeof o.company_name === "string")
-            return o.company_name;
-        return "";
-    }
-    return String(value);
+    // Objects (relation/user) and arrays (multi-user / multi-select) → readable text.
+    return getStringValue(value);
 }
 var searchAndSortData = function (data, searchValues) {
     var filteredData = data.filter(function (item) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.3.1-beta.1",
+  "version": "2.3.1-beta.10",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/App.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import "./global.css";
-declare function App(): React.JSX.Element;
-export default App;