pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

package/dist/esm/Components/Timeline/Timeline.js

@@ -0,0 +1,250 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Spinner, Text, Tooltip, useBreakpointValue, } from "@chakra-ui/react";
+import { ArrowRight, FileText, IndianRupee, Paperclip, Pencil, PencilLine, Plus, StickyNote, Trash2, Volleyball, } from "lucide-react";
+import React from "react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText";
+import { toWords } from "../../Utils/functions";
+import NoteTextArea from "../NoteTextArea/NoteTextArea";
+import { useEffect, useMemo, useRef, useState } from "react";
+// Building an Intl formatter costs ~50-200µs on a low-end phone; one per format, not per event.
+const DATE_FMT = new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+});
+const TIME_FMT = new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+});
+// Stable identity, so a theme without a palette does not invalidate every memoised card.
+const EMPTY_COLORS = {};
+const formatTimestamp = (timestamp, type) => {
+    if (typeof timestamp === "string" && !timestamp.match(/^\d+$/)) {
+        const date = new Date(timestamp);
+        if (!isNaN(date.getTime())) {
+            if (type === "date") {
+                return DATE_FMT.format(date);
+            }
+            else if (type === "time") {
+                return TIME_FMT.format(date);
+            }
+            return date.toLocaleString();
+        }
+    }
+    const parsedTimestamp = parseInt(String(timestamp), 10);
+    const date = new Date(parsedTimestamp);
+    if (isNaN(date.getTime())) {
+        console.warn("Invalid timestamp:", timestamp);
+        return "Invalid Date";
+    }
+    if (type === "date") {
+        return DATE_FMT.format(date);
+    }
+    else if (type === "time") {
+        return TIME_FMT.format(date);
+    }
+    return date.toLocaleString();
+};
+// A semantic color scale chosen by the action title (created / updated / delete).
+const getEventScale = (colors, 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.
+const getActionIcon = (title, size) => {
+    switch ((title || "").toLowerCase()) {
+        case "created":
+            return _jsx(Plus, { size: size });
+        case "updated":
+            return _jsx(PencilLine, { size: size });
+        case "delete":
+        case "deleted":
+            return _jsx(Trash2, { size: size });
+        default:
+            return null;
+    }
+};
+// Source icon (where it came from) — preserves the original mapping.
+const getSourceIcon = (event, size) => {
+    switch (event.action_from) {
+        case "Accounts":
+            return _jsx(IndianRupee, { size: size });
+        case "Notes":
+            return _jsx(FileText, { size: size });
+        default:
+            return _jsx(Volleyball, { size: size });
+    }
+};
+const getIcon = (event, size) => { var _a; return (_a = getActionIcon(event.title, size)) !== null && _a !== void 0 ? _a : getSourceIcon(event, size); };
+const groupEventsByDate = (events) => events.reduce((groups, event, globalIndex) => {
+    const date = formatTimestamp(event.created_at, "date");
+    if (date !== "Invalid Date") {
+        if (!groups[date])
+            groups[date] = [];
+        groups[date].push({ event, globalIndex });
+    }
+    return groups;
+}, {});
+const parseChanges = (changes) => {
+    if (!changes || changes === "null")
+        return [];
+    try {
+        const parsed = typeof changes === "string" ? JSON.parse(changes) : changes;
+        if (typeof parsed !== "object" || parsed === null)
+            return [];
+        return Object.entries(parsed).map(([key, value]) => {
+            var _a;
+            const record = value;
+            return {
+                field: key,
+                from: (_a = record === null || record === void 0 ? void 0 : record.original) !== null && _a !== void 0 ? _a : null,
+                to: record === null || record === void 0 ? void 0 : record.updated,
+            };
+        });
+    }
+    catch (error) {
+        console.error("Error parsing changes:", error);
+        return [];
+    }
+};
+const initials = (name) => (name || "")
+    .trim()
+    .split(/\s+/)
+    .map((p) => p[0])
+    .slice(0, 2)
+    .join("")
+    .toUpperCase() || "?";
+const NODE = "1.875rem"; // 30px node, centered on the spine
+const NODE_RADIUS = "0.9375rem";
+const SPINE_GAP = "1.75rem"; // gap between spine and card edge
+// Cheap alternative to windowing: off-screen cards skip layout and paint.
+const OFFSCREEN_SKIP = {
+    contentVisibility: "auto",
+    containIntrinsicSize: "0 96px",
+};
+// A single manual note attached to a log — read view + edit/delete on hover or focus,
+// swapping to an inline NoteTextArea while editing.
+// Declared at module scope: inside Timeline's body it remounts every note on each render.
+const NoteItem = React.memo(function NoteItem({ note, event, index, colors, activeEditNoteId, setActiveEditNoteId, editNoteLoading, deletingNoteId, onEditNote, onDeleteNote, }) {
+    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, _1, _2;
+    const isEditing = activeEditNoteId === note.log_note_id;
+    const isDeleting = deletingNoteId != null && deletingNoteId === note.log_note_id;
+    if (isEditing) {
+        return (_jsx(Box, { children: _jsx(NoteTextArea, { isEditable: true, value: (_a = note.note) !== null && _a !== void 0 ? _a : "", title: (_b = note.title) !== null && _b !== void 0 ? _b : "", saveButtonLoading: editNoteLoading, handleSubmit: (n, t, f) => onEditNote === null || onEditNote === void 0 ? void 0 : onEditNote(note.log_note_id, n, t, f, event, index), handleCancel: () => setActiveEditNoteId(null) }) }));
+    }
+    return (_jsxs(Box, { position: "relative", bg: (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[50], border: `0.063rem solid ${(_e = (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]}`, borderRadius: "0.5rem", px: 2.5, py: 2, opacity: isDeleting ? 0.6 : 1, _hover: { ".timeline-note-actions": { opacity: 1 } }, _focusWithin: { ".timeline-note-actions": { opacity: 1 } }, children: [_jsxs(Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [_jsx(Box, { as: "span", color: (_g = colors.primary) === null || _g === void 0 ? void 0 : _g[500], display: "inline-flex", children: _jsx(StickyNote, { size: 12 }) }), note.title && (_jsx(Text, { fontSize: "0.6875rem", fontWeight: 700, 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: note.title })), (onEditNote || onDeleteNote) && (_jsx(Flex, { className: "timeline-note-actions", align: "center", gap: 0.5, ml: "auto", flexShrink: 0, opacity: isDeleting ? 1 : 0, transition: "opacity 0.15s ease", children: isDeleting ? (_jsx(Spinner, { size: "xs", color: (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[500] })) : (_jsxs(_Fragment, { children: [onEditNote && (_jsx(Tooltip, { label: "Edit", placement: "top", hasArrow: true, children: _jsx(Box, { as: "button", type: "button", "aria-label": "Edit note", display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "0.375rem", color: (_m = colors.gray) === null || _m === void 0 ? void 0 : _m[500], bg: "transparent", cursor: "pointer", _hover: {
+                                            bg: (_o = colors.primary) === null || _o === void 0 ? void 0 : _o[50],
+                                            color: (_p = colors.primary) === null || _p === void 0 ? void 0 : _p[600],
+                                        }, onClick: (e) => {
+                                            e.stopPropagation();
+                                            setActiveEditNoteId(note.log_note_id);
+                                        }, children: _jsx(Pencil, { size: 12 }) }) })), onDeleteNote && (_jsx(Tooltip, { label: "Delete", placement: "top", hasArrow: true, children: _jsx(Box, { as: "button", type: "button", "aria-label": "Delete note", display: "inline-flex", alignItems: "center", justifyContent: "center", p: 1, borderRadius: "0.375rem", color: (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[500], bg: "transparent", cursor: "pointer", _hover: {
+                                            bg: (_t = (_s = (_r = colors.semantic) === null || _r === void 0 ? void 0 : _r.error) === null || _s === void 0 ? void 0 : _s[50]) !== null && _t !== void 0 ? _t : (_u = colors.red) === null || _u === void 0 ? void 0 : _u[50],
+                                            color: (_x = (_w = (_v = colors.semantic) === null || _v === void 0 ? void 0 : _v.error) === null || _w === void 0 ? void 0 : _w[600]) !== null && _x !== void 0 ? _x : (_y = colors.red) === null || _y === void 0 ? void 0 : _y[600],
+                                        }, onClick: (e) => {
+                                            e.stopPropagation();
+                                            onDeleteNote === null || onDeleteNote === void 0 ? void 0 : onDeleteNote(note.log_note_id, event, index);
+                                        }, children: _jsx(Trash2, { size: 12 }) }) }))] })) }))] }), note.note && (_jsx(Text, { fontSize: "0.6875rem", color: (_0 = (_z = colors.text) === null || _z === void 0 ? void 0 : _z[700]) !== null && _0 !== void 0 ? _0 : (_1 = colors.gray) === null || _1 === void 0 ? void 0 : _1[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && (_jsx(Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => {
+                    var _a, _b, _c;
+                    return (_jsxs(Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: (_a = colors.primary) === null || _a === void 0 ? void 0 : _a[50], color: (_b = colors.primary) === null || _b === void 0 ? void 0 : _b[700], fontSize: "0.625rem", maxW: "100%", _hover: { bg: (_c = colors.primary) === null || _c === void 0 ? void 0 : _c[100] }, children: [_jsx(Paperclip, { size: 10 }), _jsx(Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex));
+                }) })), (note.created_by || note.created_at) && (_jsxs(Text, { fontSize: "0.625rem", color: (_2 = colors.gray) === null || _2 === void 0 ? void 0 : _2[500], mt: 1, children: [note.created_by ? toWords(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at ? formatTimestamp(note.created_at, "time") : ""] }))] }));
+});
+// 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).
+// Declared at module scope: inside Timeline's body it remounts every card on each render.
+const EventCard = React.memo(function EventCard({ event, index, accent, colors, theme, isActiveNote, setActiveNoteEventIndex, activeEditNoteId, setActiveEditNoteId, showAddNote, addNoteLoading, editNoteLoading, deletingNoteId, onEventClick, onAddNote, onEditNote, onDeleteNote, }) {
+    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, _1, _2, _3, _4;
+    const scale = getEventScale(colors, event.title);
+    const changes = useMemo(() => parseChanges(event.changes), [event.changes]);
+    const clickable = typeof onEventClick === "function";
+    return (_jsxs(Box, { _hover: { ".timeline-add-note": { opacity: 1 } }, _focusWithin: { ".timeline-add-note": { opacity: 1 } }, children: [_jsxs(Box, { as: clickable ? "button" : undefined, type: clickable ? "button" : undefined, display: clickable ? "block" : undefined, w: clickable ? "100%" : undefined, textAlign: clickable ? "start" : undefined, position: "relative", zIndex: 1, bg: (_b = (_a = colors.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#fff", border: `0.063rem solid ${(_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 ? () => 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,
+                }, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(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, children: event.action_from }), _jsx(Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: accentTextOnCanvas(scale, (_m = scale === null || scale === void 0 ? void 0 : scale[50]) !== null && _m !== void 0 ? _m : "#ffffff"), bg: scale === null || scale === void 0 ? void 0 : scale[50], border: `0.063rem solid ${(_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, children: event.title })] }), _jsx(Text, { fontSize: "0.6875rem", color: (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[500], whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), changes.length > 0 && (_jsx(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, _q, _r;
+                            return (_jsxs(Flex, { align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap", children: [_jsx(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: toWords(c.field) }), c.from !== null && c.from !== undefined && (_jsxs(_Fragment, { children: [_jsx(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) }), _jsx(Box, { as: "span", color: (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[400], display: "inline-flex", children: _jsx(ArrowRight, { size: 11 }) })] })), _jsx(Box, { as: "span", color: accentTextOnCanvas(((_h = (_g = colors.semantic) === null || _g === void 0 ? void 0 : _g.success) !== null && _h !== void 0 ? _h : colors.green), ((_l = (_k = (_j = colors.semantic) === null || _j === void 0 ? void 0 : _j.success) === null || _k === void 0 ? void 0 : _k[50]) !== null && _l !== void 0 ? _l : (_m = colors.green) === null || _m === void 0 ? void 0 : _m[50])), bg: (_q = (_p = (_o = colors.semantic) === null || _o === void 0 ? void 0 : _o.success) === null || _p === void 0 ? void 0 : _p[50]) !== null && _q !== void 0 ? _q : (_r = colors.green) === null || _r === void 0 ? void 0 : _r[50], borderRadius: "0.25rem", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`));
+                        }) })), _jsxs(Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [_jsxs(Flex, { align: "center", gap: 2, children: [_jsx(Tooltip, { label: toWords(event.action_by), placement: "top", hasArrow: true, children: _jsx(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, children: initials(toWords(event.action_by)) }) }), _jsxs(Text, { fontSize: "0.6875rem", color: (_w = colors.gray) === null || _w === void 0 ? void 0 : _w[500], children: ["by", " ", _jsx(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, children: toWords(event.action_by) })] })] }), showAddNote && (_jsx(Box, { className: "timeline-add-note", as: "button", type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    setActiveNoteEventIndex(isActiveNote ? null : index);
+                                }, opacity: isActiveNote ? 1 : 0, transition: "opacity 0.15s ease", px: 2, py: 1, borderRadius: "0.375rem", fontSize: "0.75rem", fontWeight: 600, color: (_0 = colors.primary) === null || _0 === void 0 ? void 0 : _0[700], bg: "transparent", cursor: "pointer", _hover: {
+                                    bg: (_1 = colors.primary) === null || _1 === void 0 ? void 0 : _1[50],
+                                }, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && (_jsx(Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `0.063rem solid ${(_3 = (_2 = colors.gray) === null || _2 === void 0 ? void 0 : _2[100]) !== null && _3 !== void 0 ? _3 : (_4 = colors.boxborder) === null || _4 === void 0 ? void 0 : _4[200]}`, children: event.notes.map((note, noteIndex) => {
+                            var _a;
+                            return (_jsx(NoteItem, { note: note, event: event, index: index, colors: colors, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEditNote: onEditNote, onDeleteNote: onDeleteNote }, (_a = note.log_note_id) !== null && _a !== void 0 ? _a : noteIndex));
+                        }) }))] }), isActiveNote && (_jsx(Box, { mt: 2, children: _jsx(NoteTextArea, { saveButtonLoading: addNoteLoading, handleSubmit: (note, title, files) => {
+                        onAddNote === null || onAddNote === void 0 ? void 0 : onAddNote(note, title, files, event, index);
+                        // When the consumer wires addNoteLoading, the effect closes the
+                        // editor on completion; otherwise close immediately.
+                        if (addNoteLoading === undefined)
+                            setActiveNoteEventIndex(null);
+                    }, handleCancel: () => setActiveNoteEventIndex(null) }) }))] }));
+});
+const Timeline = ({ timelineEvents, onEventClick, onAddNote, onEditNote, onDeleteNote, showAddNote = false, addNoteLoading, editNoteLoading, deletingNoteId, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const theme = useCustomTheme();
+    const colors = (_a = theme.colors) !== null && _a !== void 0 ? _a : EMPTY_COLORS;
+    const isMobile = useBreakpointValue({ base: true, md: false });
+    const [activeNoteEventIndex, setActiveNoteEventIndex] = useState(null);
+    const [activeEditNoteId, setActiveEditNoteId] = useState(null);
+    // Auto-close the add editor once the create request finishes (true -> false).
+    const prevAddLoading = useRef(addNoteLoading);
+    useEffect(() => {
+        if (prevAddLoading.current && !addNoteLoading) {
+            setActiveNoteEventIndex(null);
+        }
+        prevAddLoading.current = addNoteLoading;
+    }, [addNoteLoading]);
+    // Auto-close the edit editor once the update request finishes.
+    const prevEditLoading = useRef(editNoteLoading);
+    useEffect(() => {
+        if (prevEditLoading.current && !editNoteLoading) {
+            setActiveEditNoteId(null);
+        }
+        prevEditLoading.current = editNoteLoading;
+    }, [editNoteLoading]);
+    const groupedEvents = useMemo(() => groupEventsByDate(timelineEvents !== null && timelineEvents !== void 0 ? timelineEvents : []), [timelineEvents]);
+    if (!timelineEvents || timelineEvents.length === 0) {
+        return (_jsxs(Flex, { direction: "column", align: "center", justify: "center", py: 12, gap: 2, color: (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[500], children: [_jsx(Box, { boxSize: "2.75rem", borderRadius: "full", bg: (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[100], display: "flex", alignItems: "center", justifyContent: "center", color: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[400], children: _jsx(Volleyball, { size: 20 }) }), _jsx(Text, { fontSize: "0.875rem", fontWeight: 500, children: "No timeline events to display" })] }));
+    }
+    // -------------------------------------------------------------------------
+    // Mobile: single left rail (alternating doesn't read well on narrow widths)
+    // -------------------------------------------------------------------------
+    if (isMobile) {
+        return (_jsx(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 (_jsxs(Box, { mb: 2, children: [_jsxs(Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [_jsx(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 }), _jsx(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] })] }), _jsxs(Box, { position: "relative", children: [_jsx(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, globalIndex }, index) => {
+                                    var _a, _b, _c, _d, _e;
+                                    const scale = getEventScale(colors, event.title);
+                                    return (_jsxs(Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, sx: OFFSCREEN_SKIP, children: [_jsx(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 ${(_b = (_a = colors.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_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, children: getIcon(event, 14) }), _jsx(Box, { flex: "1", minW: 0, children: _jsx(EventCard, { event: event, index: globalIndex, accent: "left", colors: colors, theme: theme, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_e = event.logs_id) !== null && _e !== void 0 ? _e : date}-${index}`));
+                                })] })] }, date));
+            }) }));
+    }
+    // -------------------------------------------------------------------------
+    // Desktop: center spine with cards alternating left / right (the "tree")
+    // -------------------------------------------------------------------------
+    return (_jsxs(Box, { position: "relative", maxW: "60rem", mx: "auto", px: 4, py: 2, children: [_jsx(Box, { position: "absolute", left: "50%", top: "0.5rem", bottom: "0.5rem", w: "0.015rem", borderRadius: "full", bg: (_f = (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[300]) !== null && _f !== void 0 ? _f : (_g = colors.boxborder) === null || _g === void 0 ? void 0 : _g[400], transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                return (_jsxs(Box, { mb: 2, children: [_jsx(Flex, { justify: "center", mb: 5, mt: 3, position: "relative", zIndex: 2, children: _jsx(Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[600], bg: (_c = (_b = colors.background) === null || _b === void 0 ? void 0 : _b[50]) !== null && _c !== void 0 ? _c : "#fff", border: `0.063rem solid ${(_e = (_d = colors.boxborder) === null || _d === void 0 ? void 0 : _d[300]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]}`, boxShadow: (_g = theme.shadows) === null || _g === void 0 ? void 0 : _g.xs, borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+                            var _a, _b, _c, _d, _e, _f, _g;
+                            const isLeft = index % 2 === 0;
+                            const scale = getEventScale(colors, event.title);
+                            return (_jsxs(Box, { position: "relative", mb: index === groupedEvents[date].length - 1 ? 0 : 5, minH: NODE, sx: OFFSCREEN_SKIP, children: [_jsx(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 }), _jsx(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 ${(_d = (_c = colors.background) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_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, children: getIcon(event, 15) }), _jsx(Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: _jsx(EventCard, { event: event, index: globalIndex, accent: isLeft ? "right" : "left", colors: colors, theme: theme, isActiveNote: activeNoteEventIndex === globalIndex, setActiveNoteEventIndex: setActiveNoteEventIndex, activeEditNoteId: activeEditNoteId, setActiveEditNoteId: setActiveEditNoteId, showAddNote: showAddNote, addNoteLoading: addNoteLoading, editNoteLoading: editNoteLoading, deletingNoteId: deletingNoteId, onEventClick: onEventClick, onAddNote: onAddNote, onEditNote: onEditNote, onDeleteNote: onDeleteNote }) })] }, `${(_g = event.logs_id) !== null && _g !== void 0 ? _g : date}-${index}`));
+                        })] }, date));
+            })] }));
+};
+export default Timeline;

package/dist/esm/Components/Timeline/TimelineProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Toaster/Toaster.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+import { Box, CloseButton, Flex, Spinner, Text, useToast, useTheme, } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import { motion } from "framer-motion";
+import { CheckCircle2, AlertTriangle, Info, XCircle, } from "lucide-react";
+const ToasterContext = createContext(undefined);
+const shrink = keyframes `
+  from { transform: scaleX(1); }
+  to { transform: scaleX(0); }
+`;
+// One-shot ring pulse on the status icon — a subtle "just happened" beat.
+const iconPulse = keyframes `
+  0%   { box-shadow: 0 0 0 0 var(--toast-pulse-color); }
+  70%  { box-shadow: 0 0 0 0.5rem transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+`;
+const MotionBox = motion(Box);
+/**
+ * Presentational toast card. Owns hover state so the auto-dismiss countdown
+ * pauses while the pointer is over the toast — the user can read and click an
+ * action without the toast vanishing mid-reach.
+ */
+function ToastCard({ onClose, title, description, actions, isClosable, duration, meta, colors: c, shadowLg, }) {
+    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, _1, _2, _3, _4, _5, _6, _7;
+    const [paused, setPaused] = useState(false);
+    const solid = (_d = (_b = (_a = meta.scale) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = c === null || c === void 0 ? void 0 : c.gray) === null || _c === void 0 ? void 0 : _c[500]) !== null && _d !== void 0 ? _d : "#718096";
+    const soft = (_h = (_f = (_e = meta.scale) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : (_g = c === null || c === void 0 ? void 0 : c.gray) === null || _g === void 0 ? void 0 : _g[50]) !== null && _h !== void 0 ? _h : "#f7fafc";
+    const accent = (_k = (_j = meta.scale) === null || _j === void 0 ? void 0 : _j[600]) !== null && _k !== void 0 ? _k : solid;
+    const ringTint = (_m = (_l = meta.scale) === null || _l === void 0 ? void 0 : _l[200]) !== null && _m !== void 0 ? _m : soft;
+    const showProgress = typeof duration === "number" && duration > 0;
+    return (_jsxs(MotionBox
+    // Refined entrance — slides in from the right and settles, never a hard pop.
+    // framer owns ALL transform animation; the CSS transition below is limited to
+    // box-shadow so it never tweens the same `transform` framer is driving frame
+    // by frame (that double-drive is what caused the ~200ms entry flicker). A
+    // tween (not spring) lands on an exact end transform, so there's no residual
+    // sub-pixel settle to shimmer.
+    , { 
+        // Refined entrance — slides in from the right and settles, never a hard pop.
+        // framer owns ALL transform animation; the CSS transition below is limited to
+        // box-shadow so it never tweens the same `transform` framer is driving frame
+        // by frame (that double-drive is what caused the ~200ms entry flicker). A
+        // tween (not spring) lands on an exact end transform, so there's no residual
+        // sub-pixel settle to shimmer.
+        initial: { opacity: 0, x: 24 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 24 }, transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] }, onHoverStart: () => setPaused(true), onHoverEnd: () => setPaused(false), position: "relative", 
+        // Surface token, not `colors.white`: `white` is a foreground token and stays
+        // white in dark mode. `background[50]` is #ffffff in light, near-black in dark.
+        bg: (_p = (_o = c === null || c === void 0 ? void 0 : c.background) === null || _o === void 0 ? void 0 : _o[50]) !== null && _p !== void 0 ? _p : "#fff", border: `0.063rem solid ${(_t = (_r = (_q = c === null || c === void 0 ? void 0 : c.boxborder) === null || _q === void 0 ? void 0 : _q[300]) !== null && _r !== void 0 ? _r : (_s = c === null || c === void 0 ? void 0 : c.gray) === null || _s === void 0 ? void 0 : _s[200]) !== null && _t !== void 0 ? _t : "#e2e8f0"}`, boxShadow: shadowLg !== null && shadowLg !== void 0 ? shadowLg : "lg", borderRadius: "0.875rem", overflow: "hidden", minW: "22.5rem", maxW: "26rem", willChange: "transform, opacity", sx: {
+            transition: "box-shadow 0.18s ease",
+            _hover: { boxShadow: "xl" },
+        }, children: [_jsxs(Flex, { p: 3.5, gap: 3, align: actions ? "flex-start" : "center", children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "2rem", minW: "2rem", borderRadius: "full", bg: soft, color: accent, sx: {
+                            ["--toast-pulse-color"]: ringTint,
+                            animation: `${iconPulse} 900ms ease-out 1`,
+                        }, children: meta.icon }), _jsxs(Box, { flex: "1", minW: 0, children: [title && (_jsx(Text, { fontWeight: 600, fontSize: "0.875rem", lineHeight: "1.3", color: (_x = (_v = (_u = c === null || c === void 0 ? void 0 : c.text) === null || _u === void 0 ? void 0 : _u[800]) !== null && _v !== void 0 ? _v : (_w = c === null || c === void 0 ? void 0 : c.gray) === null || _w === void 0 ? void 0 : _w[800]) !== null && _x !== void 0 ? _x : "#2d3748", children: title })), description && (_jsx(Text, { fontSize: "0.8125rem", lineHeight: "1.45", color: (_1 = (_z = (_y = c === null || c === void 0 ? void 0 : c.gray) === null || _y === void 0 ? void 0 : _y[600]) !== null && _z !== void 0 ? _z : (_0 = c === null || c === void 0 ? void 0 : c.text) === null || _0 === void 0 ? void 0 : _0[600]) !== null && _1 !== void 0 ? _1 : "#718096", mt: title ? "0.125rem" : 0, children: description })), actions && (_jsx(Flex, { gap: 2, mt: 2.5, align: "center", wrap: "wrap", children: actions(onClose) }))] }), isClosable && (_jsx(CloseButton, { onClick: onClose, size: "sm", color: (_3 = (_2 = c === null || c === void 0 ? void 0 : c.gray) === null || _2 === void 0 ? void 0 : _2[400]) !== null && _3 !== void 0 ? _3 : "#a0aec0", borderRadius: "md", alignSelf: "flex-start", _hover: {
+                            bg: (_5 = (_4 = c === null || c === void 0 ? void 0 : c.gray) === null || _4 === void 0 ? void 0 : _4[100]) !== null && _5 !== void 0 ? _5 : "#edf2f7",
+                            color: (_7 = (_6 = c === null || c === void 0 ? void 0 : c.gray) === null || _6 === void 0 ? void 0 : _6[700]) !== null && _7 !== void 0 ? _7 : "#4a5568",
+                        } }))] }), showProgress && (_jsx(Box, { position: "absolute", bottom: 0, left: 0, right: 0, h: "0.1875rem", bg: solid, opacity: 0.85, transformOrigin: "left", sx: {
+                    animation: `${shrink} ${duration}ms linear forwards`,
+                    animationPlayState: paused ? "paused" : "running",
+                } }))] }));
+}
+export default function ToasterProvider({ children }) {
+    var _a;
+    const toast = useToast();
+    const theme = useTheme();
+    const colors = theme.colors;
+    const shadowLg = (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.lg;
+    // Keyed off `theme.colors`, not the `?? {}` fallback: dark mode swaps the palette object, so
+    // this must re-derive per mode or a toast fired after a switch paints the old mode's colors.
+    const statusConfig = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const c = colors !== null && colors !== void 0 ? colors : {};
+        return {
+            success: {
+                scale: (_b = (_a = c.semantic) === null || _a === void 0 ? void 0 : _a.success) !== null && _b !== void 0 ? _b : c.green,
+                icon: _jsx(CheckCircle2, { size: 18 }),
+            },
+            error: {
+                scale: (_d = (_c = c.semantic) === null || _c === void 0 ? void 0 : _c.error) !== null && _d !== void 0 ? _d : c.red,
+                icon: _jsx(XCircle, { size: 18 }),
+            },
+            warning: {
+                scale: (_g = (_f = (_e = c.semantic) === null || _e === void 0 ? void 0 : _e.warning) !== null && _f !== void 0 ? _f : c.yellow) !== null && _g !== void 0 ? _g : c.orange,
+                icon: _jsx(AlertTriangle, { size: 18 }),
+            },
+            info: {
+                scale: (_j = (_h = c.semantic) === null || _h === void 0 ? void 0 : _h.info) !== null && _j !== void 0 ? _j : c.blue,
+                icon: _jsx(Info, { size: 18 }),
+            },
+            loading: {
+                scale: ((_k = c.primary) !== null && _k !== void 0 ? _k : c.gray),
+                icon: _jsx(Spinner, { size: "sm", thickness: "0.125rem", speed: "0.7s" }),
+            },
+        };
+    }, [colors]);
+    const showToast = useCallback(({ title, description, status = "info", duration = 5000, isClosable = true, position = "top-right", onClose, actions, }) => {
+        var _a;
+        const meta = (_a = statusConfig[status]) !== null && _a !== void 0 ? _a : statusConfig.info;
+        toast({
+            duration,
+            isClosable,
+            position,
+            onCloseComplete: onClose,
+            render: ({ onClose }) => (_jsx(ToastCard, { onClose: onClose, title: title, description: description, actions: actions, isClosable: isClosable, duration: duration, meta: meta, colors: colors !== null && colors !== void 0 ? colors : {}, shadowLg: shadowLg })),
+        });
+    }, [toast, statusConfig, colors, shadowLg]);
+    // Memoized because this provider wraps the whole app: an unstable value re-renders every
+    // `useToaster()` consumer (92 files in crm-frontend) on each provider render, defeating the
+    // stable-children bail-out the consuming apps rely on.
+    const value = useMemo(() => ({ showToast }), [showToast]);
+    return (_jsx(ToasterContext.Provider, { value: value, children: children }));
+}
+export const useToaster = () => {
+    const context = useContext(ToasterContext);
+    if (!context) {
+        throw new Error("useToaster must be used within a ToasterProvider");
+    }
+    return context;
+};

package/dist/esm/Components/Toaster/Toaster.stories.js

@@ -0,0 +1,7 @@
+// // Toaster.stories.tsx
+// import React from 'react';
+// import { Meta, StoryFn } from '@storybook/react';
+// import ToasterProvider, { useToaster } from './Toaster';
+// import { Button, ChakraProvider } from '@chakra-ui/react';
+// import { ToasterToastProps } from './ToasterProps';
+export {};

package/dist/esm/Components/Toaster/ToasterProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Toggle/TableToggle.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconButton } from "@chakra-ui/react";
+import { Columns3, Table2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import ToolTip from "../ToolTip/ToolTip";
+const TableToggle = ({ value, onChange }) => {
+    const theme = useCustomTheme();
+    const styles = {
+        container: {
+            display: "flex",
+            alignItems: "center",
+            bg: theme.colors.background[600],
+            p: "0.125rem",
+            borderRadius: "0.375rem",
+            height: "2rem",
+            gap: "0.125rem",
+            width: "6.3rem",
+        },
+        button: (mode) => ({
+            bg: value === mode ? theme.colors.background[50] : "transparent",
+            boxShadow: value === mode ? "md" : "none",
+            color: value === mode ? theme.colors.text[900] : theme.colors.background[800],
+            borderRadius: "0.313rem",
+            height: "1.75rem",
+            border: "0.031rem solid",
+            borderColor: value === mode ? theme.colors.background[400] : "transparent",
+            padding: "0.313rem 0.813rem",
+            _hover: {
+                bg: value === mode
+                    ? theme.colors.background[50]
+                    : theme.colors.background[400],
+                color: value === mode ? theme.colors.text[900] : theme.colors.background[900],
+            },
+            transition: "all 0.3s ease-in-out",
+        }),
+    };
+    return (_jsxs(Box, { ...styles.container, children: [_jsx(ToolTip, { label: "Table View", placement: "top", fontSize: 12, hasArrow: true, children: _jsx(IconButton, { "aria-label": "Grid View", icon: _jsx(Table2, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("grid"), ...styles.button("grid") }) }), _jsx(ToolTip, { label: "Kanban View", placement: "top", fontSize: 12, hasArrow: true, children: _jsx(IconButton, { "aria-label": "List View", icon: _jsx(Columns3, { size: "1.25rem" }), variant: "ghost", onClick: () => onChange("list"), ...styles.button("list") }) })] }));
+};
+export default TableToggle;

package/dist/esm/Components/Toggle/TableToggleProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/ToolTip/OverflowToolTip.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ToolTip from "./ToolTip";
+/**
+ * A tooltip that only appears when its child text is actually truncated
+ * (ellipsis active) — no tooltip when the text fully fits. Thin sugar over
+ * `<ToolTip overflowOnly>`; use it wherever you clamp text with `noOfLines` /
+ * ellipsis and want the full text revealed only when it's cut off.
+ *
+ * The child must be the single element that clamps the text (e.g. a Chakra
+ * `Text` with `noOfLines`); its ref is managed internally. Works for both
+ * single-line and multi-line clamps.
+ *
+ * @example
+ * <OverflowToolTip label={title}>
+ *   <Text noOfLines={1}>{title}</Text>
+ * </OverflowToolTip>
+ */
+export default function OverflowToolTip(props) {
+    return _jsx(ToolTip, { ...props, overflowOnly: true });
+}

package/dist/esm/Components/ToolTip/ToolTip.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
+import { Tooltip as ChakraTooltip } from "@chakra-ui/react";
+import { useIsTruncated } from "../../Hooks/useIsTruncated";
+import { mergeRefs } from "../../Utils/mergeRefs";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+// Surface used when no Pixelize palette is in context — a bare `ChakraProvider`, or no
+// provider at all (Chakra's `useTheme()` yields `{}` there rather than throwing). Keeps
+// tooltips outside the Pixelize theme rendering exactly as they did before theming.
+const FALLBACK_SURFACE = "#12161B";
+export default function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize = "14px", bg, color = "white", isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = 0, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
+    var _a, _b, _c, _d;
+    // Measure the child for `overflowOnly`. The hook is always called (Rules of
+    // Hooks) but is fully inert unless `overflowOnly` is set — no layout reads,
+    // no ResizeObserver, no re-renders for ordinary tooltips. Measurement never
+    // runs on hover/scroll, so showing the tooltip stays as cheap as before.
+    const { ref, isTruncated } = useIsTruncated(label, overflowOnly && isValidElement(children));
+    // A tooltip is an INVERTED surface: near-black under a light canvas, carrying a white
+    // label. `sidebar.background` is the only ramp `buildDarkPalette` deliberately leaves
+    // un-inverted, so it stays near-black in dark mode and the white label stays legible —
+    // every other surface ramp flips light and would render the label invisible.
+    const theme = useCustomTheme();
+    const surface = (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.sidebar) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[500]) !== null && _d !== void 0 ? _d : FALLBACK_SURFACE;
+    let content = children;
+    let effectiveDisabled = isDisabled;
+    if (overflowOnly && isValidElement(children)) {
+        const child = children;
+        const childRef = child.ref;
+        content = cloneElement(child, {
+            ref: mergeRefs(ref, childRef),
+        });
+        effectiveDisabled = Boolean(isDisabled) || !isTruncated;
+    }
+    return (_jsx(ChakraTooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg !== null && bg !== void 0 ? bg : surface, color: color, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles, px: 3, py: 2, borderRadius: "8px", fontWeight: "400", lineHeight: "1.5", maxW: "300px", children: content }));
+}

package/dist/esm/Components/ToolTip/ToolTip.stories.js

@@ -0,0 +1,6 @@
+// import React from 'react';
+// import ToolTip from './ToolTip';
+// import { ToolTipProps } from "./ToolTipProps";
+// import { StoryFn, Meta } from '@storybook/react';
+// import { Box } from '@chakra-ui/react';
+export {};

package/dist/esm/Components/ToolTip/ToolTipProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/Trail/EditableCell.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Box, Input, Button, Menu, MenuButton, MenuList, MenuItem, useOutsideClick, } from "@chakra-ui/react";
+import { ChevronDown } from "lucide-react";
+export const EditableCell = ({ row, column, isEditable, handleCellClick, handleCellChange, }) => {
+    const cellRef = useRef(null);
+    useOutsideClick({
+        ref: cellRef,
+        handler: () => {
+            var _a;
+            return handleCellChange(row.id, column.label, String((_a = row[column.label]) !== null && _a !== void 0 ? _a : ""));
+        },
+    });
+    const value = row[column.label] || "-";
+    if (isEditable) {
+        if (column.label === "dueDate") {
+            return (_jsx(Box, { width: "50%", ref: cellRef, children: _jsx(Input, { type: "date", value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
+        }
+        else if (column.label === "priority") {
+            return (_jsx(Box, { width: "100%", ref: cellRef, children: _jsxs(Menu, { isOpen: true, children: [_jsx(MenuButton, { as: Button, rightIcon: _jsx(ChevronDown, {}), bg: "teal.50", color: "teal.900", _hover: { bg: "teal.100" }, _active: { bg: "teal.200" }, children: value }), _jsxs(MenuList, { children: [_jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Low"), _hover: { bg: "teal.100" }, children: "Low" }), _jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "Medium"), _hover: { bg: "teal.100" }, children: "Medium" }), _jsx(MenuItem, { onClick: () => handleCellChange(row.id, column.label, "High"), _hover: { bg: "teal.100" }, children: "High" })] })] }) }));
+        }
+        else {
+            return (_jsx(Box, { width: "100%", ref: cellRef, children: _jsx(Input, { value: value, onChange: (e) => handleCellChange(row.id, column.label, e.target.value) }) }));
+        }
+    }
+    return (_jsx("span", { onClick: () => handleCellClick(row.id, column.id), children: value }));
+};

package/dist/esm/Components/Trail/SelectAllCheckbox.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from "@chakra-ui/react";
+export const SelectAllCheckbox = ({ isAllSelected, isIndeterminate, handleSelectAll, }) => {
+    return (_jsx(Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: handleSelectAll }));
+};

package/dist/esm/Components/Trail/TrailWorks.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Thead, Table, Tr, Th, Tbody, Td, Checkbox, useTheme, } from "@chakra-ui/react";
+const TrailWorks = () => {
+    var _a, _b, _c;
+    const theme = useTheme();
+    const cellBorder = (_b = (_a = theme.colors.border) === null || _a === void 0 ? void 0 : _a[500]) !== null && _b !== void 0 ? _b : (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[300];
+    const data = [
+        {
+            contact: "John Doe",
+            type: "Customer",
+            deals: 5,
+            phone: "555-555-5555",
+            email: "hhhhh@gmail.com",
+        },
+        {
+            contact: "John Doe",
+            type: "Customer",
+            deals: 5,
+            phone: "555-555-5555",
+            email: "hhhhh@gmail.com",
+        },
+    ];
+    const columns = [
+        {
+            Header: "Contact",
+            accessor: "contact",
+        },
+        {
+            Header: "Type",
+            accessor: "type",
+        },
+        {
+            Header: "Deals",
+            accessor: "deals",
+        },
+        {
+            Header: "Phone",
+            accessor: "phone",
+        },
+        {
+            Header: "Email",
+            accessor: "email",
+        },
+    ];
+    const renderRow = (row, index) => {
+        return (_jsxs(Tr, { border: "1px solid", borderColor: cellBorder, children: [_jsx(Td, { border: "1px solid", borderColor: cellBorder, padding: "5px", children: _jsx(Checkbox, {}) }), columns.map((column, colIndex) => {
+                    return (_jsx(Td, { border: "1px solid", borderColor: cellBorder, children: row[column.accessor] }, colIndex));
+                })] }, index));
+    };
+    return (_jsx(Box, { width: "100%", overflowX: "auto", children: _jsxs(Table, { variant: "simple", size: "md", border: "1px solid", borderColor: cellBorder, children: [_jsx(Thead, { border: "1px solid", borderColor: cellBorder, children: _jsxs(Tr, { border: "1px solid", borderColor: cellBorder, children: [_jsx(Th, { border: "1px solid", borderColor: cellBorder, padding: "5px", children: _jsx(Checkbox, {}) }), columns.map((column, index) => {
+                                return (_jsx(Th, { border: "1px solid", borderColor: cellBorder, children: column.Header }, index));
+                            })] }) }), _jsx(Tbody, { border: "1px solid", borderColor: cellBorder, children: data.map((row, index) => renderRow(row, index)) })] }) }));
+};
+export default TrailWorks;