pixelize-design-library 2.3.10 → 2.3.12

package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts

@@ -1,13 +1,13 @@
 import { LegacyRef } from "react";
 export type NoteTextAreaProps = {
-    width: number | string;
+    width?: number | string;
     handleSubmit: (noteValue: string, titleValue: string, file: File[], resetState: void) => void;
     value?: string;
     title?: string;
     file?: File[];
     isEditable?: boolean;
     handleCancel?: (isActive: boolean) => void;
-    saveButtonLoading: boolean;
+    saveButtonLoading?: boolean;
     maxFileSize?: number;
     maxFilesSizeError?: string;
     maxNoteWordCount?: number;

package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NoteTextAreaProps.d.ts","sourceRoot":"","sources":["../../../src/Components/NoteTextArea/NoteTextAreaProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,YAAY,EAAE,CACZ,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,IAAI,EAAE,EACZ,UAAU,EAAE,IAAI,KACb,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,iBAAiB,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC"}
+{"version":3,"file":"NoteTextAreaProps.d.ts","sourceRoot":"","sources":["../../../src/Components/NoteTextArea/NoteTextAreaProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,EAAE,CACZ,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,IAAI,EAAE,EACZ,UAAU,EAAE,IAAI,KACb,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC"}

package/dist/Components/Timeline/Timeline.d.ts

@@ -1,4 +1,4 @@
 import { TimelineProps } from "./TimelineProps";
-declare const Timeline: ({ timelineEvents, onEventClick }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
+declare const Timeline: ({ timelineEvents, onEventClick, onAddNote, showAddNote }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
 export default Timeline;
 //# sourceMappingURL=Timeline.d.ts.map

package/dist/Components/Timeline/Timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAkB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhE,QAAA,MAAM,QAAQ,GAAI,kCAAkC,aAAa,4CAmgBhE,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAkB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhE,QAAA,MAAM,QAAQ,GAAI,0DAAkE,aAAa,4CAijBhG,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/Components/Timeline/Timeline.js

@@ -1,15 +1,21 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const functions_1 = require("../../Utils/functions");
-const Timeline = ({ timelineEvents, onEventClick }) => {
+const NoteTextArea_1 = __importDefault(require("../NoteTextArea/NoteTextArea"));
+const react_2 = require("react");
+const Timeline = ({ timelineEvents, onEventClick, onAddNote, showAddNote = false }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const colors = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
     const isMobile = (0, react_1.useBreakpointValue)({ base: true, md: false });
+    const [activeNoteEventIndex, setActiveNoteEventIndex] = (0, react_2.useState)(null);
     const formatTimestamp = (timestamp, type) => {
         if (typeof timestamp === "string" && !timestamp.match(/^\d+$/)) {
             const date = new Date(timestamp);
@@ -139,18 +145,28 @@ const Timeline = ({ timelineEvents, onEventClick }) => {
     // 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).
     const EventCard = ({ event, index, accent, }) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
         const scale = getEventScale(event.title);
         const changes = parseChanges(event.changes);
         const clickable = typeof onEventClick === "function";
-        return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", zIndex: 1, bg: (_a = colors.white) !== null && _a !== void 0 ? _a : "#fff", border: `0.063rem solid ${(_c = (_b = colors.boxborder) === null || _b === void 0 ? void 0 : _b[300]) !== null && _c !== void 0 ? _c : (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[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 ? () => onEventClick(event, index) : undefined, _hover: {
-                borderColor: (_e = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[300],
-                boxShadow: (_g = theme.shadows) === null || _g === void 0 ? void 0 : _g.md,
-                transform: clickable ? "translateY(-1px)" : undefined,
-            }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 600, color: (_j = (_h = colors.text) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[800], noOfLines: 1, children: event.action_from }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (_l = scale === null || scale === void 0 ? void 0 : scale[700]) !== null && _l !== void 0 ? _l : scale === null || scale === void 0 ? void 0 : scale[600], bg: scale === null || scale === void 0 ? void 0 : scale[50], border: `0.063rem solid ${(_m = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _m !== void 0 ? _m : (_o = colors.gray) === null || _o === void 0 ? void 0 : _o[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: (_p = colors.gray) === null || _p === void 0 ? void 0 : _p[500], whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), changes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => {
-                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-                        return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.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], children: (0, functions_1.toWords)(c.field) }), c.from !== null && c.from !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.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", children: String(c.from) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[400], display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 11 }) })] })), (0, jsx_runtime_1.jsx)(react_1.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", children: String(c.to) })] }, `${c.field}-${i}`));
-                    }) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, mt: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: (0, functions_1.toWords)(event.action_by), placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.25rem", minW: "1.25rem", borderRadius: "full", bg: (_s = (_r = (_q = colors.primary) === null || _q === void 0 ? void 0 : _q.opacity) === null || _r === void 0 ? void 0 : _r[16]) !== null && _s !== void 0 ? _s : (_t = colors.primary) === null || _t === void 0 ? void 0 : _t[50], color: (_u = colors.primary) === null || _u === void 0 ? void 0 : _u[600], fontSize: "0.5625rem", fontWeight: 700, children: initials((0, functions_1.toWords)(event.action_by)) }) }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.6875rem", color: (_v = colors.gray) === null || _v === void 0 ? void 0 : _v[500], children: ["by", " ", (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_x = (_w = colors.text) === null || _w === void 0 ? void 0 : _w[700]) !== null && _x !== void 0 ? _x : (_y = colors.gray) === null || _y === void 0 ? void 0 : _y[700], fontWeight: 500, children: (0, functions_1.toWords)(event.action_by) })] })] })] }));
+        const isActiveNote = activeNoteEventIndex === index;
+        const [isHovered, setIsHovered] = (0, react_2.useState)(false);
+        return ((0, jsx_runtime_1.jsxs)(react_1.Box, { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", zIndex: 1, bg: (_a = colors.white) !== null && _a !== void 0 ? _a : "#fff", border: `0.063rem solid ${(_c = (_b = colors.boxborder) === null || _b === void 0 ? void 0 : _b[300]) !== null && _c !== void 0 ? _c : (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[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 ? () => onEventClick(event, index) : undefined, _hover: {
+                        borderColor: (_e = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[300],
+                        boxShadow: (_g = theme.shadows) === null || _g === void 0 ? void 0 : _g.md,
+                        transform: clickable ? "translateY(-1px)" : undefined,
+                    }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 600, color: (_j = (_h = colors.text) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[800], noOfLines: 1, children: event.action_from }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (_l = scale === null || scale === void 0 ? void 0 : scale[700]) !== null && _l !== void 0 ? _l : scale === null || scale === void 0 ? void 0 : scale[600], bg: scale === null || scale === void 0 ? void 0 : scale[50], border: `0.063rem solid ${(_m = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _m !== void 0 ? _m : (_o = colors.gray) === null || _o === void 0 ? void 0 : _o[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: (_p = colors.gray) === null || _p === void 0 ? void 0 : _p[500], whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), changes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => {
+                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                                return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.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], children: (0, functions_1.toWords)(c.field) }), c.from !== null && c.from !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.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", children: String(c.from) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[400], display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 11 }) })] })), (0, jsx_runtime_1.jsx)(react_1.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", children: String(c.to) })] }, `${c.field}-${i}`));
+                            }) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: (0, functions_1.toWords)(event.action_by), placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.25rem", minW: "1.25rem", borderRadius: "full", bg: (_s = (_r = (_q = colors.primary) === null || _q === void 0 ? void 0 : _q.opacity) === null || _r === void 0 ? void 0 : _r[16]) !== null && _s !== void 0 ? _s : (_t = colors.primary) === null || _t === void 0 ? void 0 : _t[50], color: (_u = colors.primary) === null || _u === void 0 ? void 0 : _u[600], fontSize: "0.5625rem", fontWeight: 700, children: initials((0, functions_1.toWords)(event.action_by)) }) }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.6875rem", color: (_v = colors.gray) === null || _v === void 0 ? void 0 : _v[500], children: ["by", " ", (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_x = (_w = colors.text) === null || _w === void 0 ? void 0 : _w[700]) !== null && _x !== void 0 ? _x : (_y = colors.gray) === null || _y === void 0 ? void 0 : _y[700], fontWeight: 500, children: (0, functions_1.toWords)(event.action_by) })] })] }), showAddNote && (isHovered || isActiveNote) && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: (e) => {
+                                        e.stopPropagation();
+                                        setActiveNoteEventIndex(isActiveNote ? null : index);
+                                    }, px: 2, py: 1, borderRadius: "0.375rem", fontSize: "0.75rem", fontWeight: 600, color: (_z = colors.primary) === null || _z === void 0 ? void 0 : _z[700], bg: "transparent", cursor: "pointer", _hover: {
+                                        bg: (_0 = colors.primary) === null || _0 === void 0 ? void 0 : _0[50],
+                                    }, children: isActiveNote ? "Hide note" : "Add note" }))] })] }), isActiveNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { handleSubmit: (note, title, files) => {
+                            onAddNote === null || onAddNote === void 0 ? void 0 : onAddNote(note, title, files, event, index);
+                            setActiveNoteEventIndex(null);
+                        }, handleCancel: () => setActiveNoteEventIndex(null) }) }))] }));
     };
     const NODE = "1.875rem"; // 30px node, centered on the spine
     const NODE_RADIUS = "0.9375rem";
@@ -159,12 +175,13 @@ const Timeline = ({ timelineEvents, onEventClick }) => {
     // Mobile: single left rail (alternating doesn't read well on narrow widths)
     // -------------------------------------------------------------------------
     if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(react_1.Box, { maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => {
+        return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
                 return ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [(0, jsx_runtime_1.jsx)(react_1.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 ${(_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", children: date }), (0, jsx_runtime_1.jsx)(react_1.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] })] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.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((event, index) => {
                                     var _a, _b, _c, _d;
                                     const scale = getEventScale(event.title);
-                                    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, children: [(0, jsx_runtime_1.jsx)(react_1.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 ${(_a = colors.white) !== null && _a !== void 0 ? _a : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_b = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[200]}`, zIndex: 1, children: getIcon(event, 14) }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: index, accent: "left" }) })] }, `${(_d = event.logs_id) !== null && _d !== void 0 ? _d : date}-${index}`));
+                                    const globalIndex = timelineEvents.indexOf(event);
+                                    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, children: [(0, jsx_runtime_1.jsx)(react_1.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 ${(_a = colors.white) !== null && _a !== void 0 ? _a : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_b = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[200]}`, zIndex: 1, children: getIcon(event, 14) }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: "left" }) })] }, `${(_d = event.logs_id) !== null && _d !== void 0 ? _d : date}-${index}`));
                                 })] })] }, date));
             }) }));
     }
@@ -177,9 +194,10 @@ const Timeline = ({ timelineEvents, onEventClick }) => {
                             var _a, _b, _c, _d, _e, _f;
                             const isLeft = index % 2 === 0;
                             const scale = getEventScale(event.title);
+                            const globalIndex = timelineEvents.indexOf(event);
                             return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", mb: index === groupedEvents[date].length - 1 ? 0 : 5, minH: NODE, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "1.375rem", h: "0.125rem", w: "0.8125rem", bg: (_a = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _a !== void 0 ? _a : (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[300], left: isLeft
                                             ? `calc(50% - ${SPINE_GAP})`
-                                            : `calc(50% + ${NODE_RADIUS})`, zIndex: 0 }), (0, jsx_runtime_1.jsx)(react_1.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 ${(_c = colors.white) !== null && _c !== void 0 ? _c : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_d = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, zIndex: 2, children: getIcon(event, 15) }), (0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: index, accent: isLeft ? "right" : "left" }) })] }, `${(_f = event.logs_id) !== null && _f !== void 0 ? _f : date}-${index}`));
+                                            : `calc(50% + ${NODE_RADIUS})`, zIndex: 0 }), (0, jsx_runtime_1.jsx)(react_1.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 ${(_c = colors.white) !== null && _c !== void 0 ? _c : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_d = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, zIndex: 2, children: getIcon(event, 15) }), (0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: isLeft ? "right" : "left" }) })] }, `${(_f = event.logs_id) !== null && _f !== void 0 ? _f : date}-${index}`));
                         })] }, date));
             })] }));
 };

package/dist/Components/Timeline/TimelineProps.d.ts

@@ -2,6 +2,8 @@ export interface TimelineProps {
     events?: TimelineEvent[];
     timelineEvents: TimelineEvents[];
     onEventClick?: (event: TimelineEvents, index: number) => void;
+    onAddNote?: (note: string, title: string, files: File[], event: TimelineEvents, index: number) => void;
+    showAddNote?: boolean;
 }
 export interface TimelineEvent {
     title: string;

package/dist/Components/Timeline/TimelineProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/TimelineProps.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/D;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB"}
+{"version":3,"file":"TimelineProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/TimelineProps.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvG,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB"}

package/package.json

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

package/.claude/settings.local.json

@@ -1,51 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(git ls-tree *)",
-      "Bash(npx --no-install tsc --noEmit)",
-      "Bash(git fsck *)",
-      "Bash(npx tsc *)",
-      "Bash(curl -s http://localhost:5174/ -o /dev/null -w \"HTTP %{http_code}\\\\n\")",
-      "Bash(curl -s \"http://localhost:5174/src/Components/Table/Components/TableBody.tsx\" -o /dev/null -w \"transform TableBody: HTTP %{http_code}\\\\n\")",
-      "Read(//private/tmp/**)",
-      "Bash(npx jest *)",
-      "Bash(pkill -f \"vite\")",
-      "Bash(grep -rln -E \"import\\\\s+\\\\w+\\\\s*\\(,\\\\s*\\\\{[^}]*\\\\}\\)?\\\\s*from\\\\s+['\\\\\"]pixelize-design-library['\\\\\"]\" src)",
-      "Bash(ps -p 44521 60411 -o pid,command)",
-      "Bash(node -e \"const p=require\\('./package.json'\\); console.log\\(JSON.stringify\\(p.scripts,null,2\\)\\)\")",
-      "Bash(echo \"=== total errors: $\\(npx tsc --noEmit -p tsconfig.json 2>&1)",
-      "Bash(echo \"=== total: $\\(npx tsc --noEmit -p tsconfig.json 2>&1)",
-      "Bash(echo \"exit=$?\")",
-      "Read(//tmp/**)",
-      "Bash(git mv *)",
-      "Bash(git rm *)",
-      "Bash(node -e \"console.log\\(require\\('@emotion/react/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\('jodit-react', require\\('jodit-react/package.json'\\).version\\); try{console.log\\('jodit', require\\('jodit/package.json'\\).version\\)}catch\\(e\\){}\")",
-      "Bash(node -e \"console.log\\('playwright', require\\('playwright/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\('puppeteer', require\\('puppeteer/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\('ws', require\\('ws/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\('node', process.version\\)\")",
-      "Bash(grep -E \"\\\\.tsx?$\")",
-      "Bash(node -e \"console.log\\(require.resolve\\('@chakra-ui/styled-system'\\)\\)\")",
-      "Bash(node -e \"const p=require.resolve\\('@chakra-ui/react'\\);console.log\\(p\\)\")",
-      "Bash(sed -n '31,45p' src/Pages/table.tsx)",
-      "Bash(perl -0pi -e 's/\\\\n\\\\s*content: \\\\\\(\\\\\\) => <>Hello<\\\\/>,?//' src/Pages/table.tsx)",
-      "Bash(cd /Users/mahesh/Applications/Pixelize/CRM/Micro-Components *)",
-      "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-design-library/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\(JSON.stringify\\(require\\('./node_modules/pixelize-authenticator/package.json'\\).dependencies\\)\\)\")",
-      "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-authenticator/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-authenticator/node_modules/pixelize-design-library/package.json'\\).version\\)\")",
-      "Bash(echo \"tsc exit code: $?\")",
-      "Bash(./node_modules/.bin/tsc --noEmit --skipLibCheck)",
-      "Bash(./node_modules/.bin/tsc --noEmit)",
-      "Bash(echo \"tsc exit: $?\")",
-      "Bash(echo \"local tsc exit: $?\")",
-      "Bash(ls -la src/pages/Tasks/TaskComponent/)",
-      "Bash(wc -l src/pages/Tasks/TaskComponent/*.tsx)"
-    ],
-    "additionalDirectories": [
-      "/private/tmp",
-      "/tmp"
-    ]
-  }
-}