pixelize-design-library 2.4.1 → 2.4.2-beta.1

package/dist/esm/Components/Table/settings/ManageColumns.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, useMemo, useState, useEffect } from "react";
+import { Box, Flex, IconButton, Input, List, ListItem, Text, } from "@chakra-ui/react";
+import Checkbox from "../../Checkbox/Checkbox.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
+const ManageColumns = ({ columns, items, setItems, childInputMethodsRef, }) => {
+    const theme = useCustomTheme();
+    const [searchTerm, setSearchTerm] = useState("");
+    const [draggedItemIndex, setDraggedItemIndex] = useState(null);
+    const [error, setError] = useState(null);
+    const visibleCount = useMemo(() => items.filter((i) => !i.isHidden).length, [items]);
+    useEffect(() => {
+        setItems(columns);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [columns]);
+    useImperativeHandle(childInputMethodsRef, () => ({ getManageColumnsData: () => items }), [items]);
+    const handleDragStart = (index) => setDraggedItemIndex(index);
+    const handleDragOver = (e, index) => {
+        e.preventDefault();
+        if (draggedItemIndex === null || draggedItemIndex === index)
+            return;
+        const newItems = [...items];
+        const draggedItem = newItems[draggedItemIndex];
+        newItems.splice(draggedItemIndex, 1);
+        newItems.splice(index, 0, draggedItem);
+        setDraggedItemIndex(index);
+        setItems(newItems);
+    };
+    const handleDragEnd = () => setDraggedItemIndex(null);
+    // Keyboard/single-pointer alternative to the drag reorder (WCAG 2.1.1, 2.5.7).
+    const moveItem = (itemId, offset) => {
+        const realIndex = items.findIndex((i) => i.id === itemId);
+        const target = realIndex + offset;
+        if (realIndex === -1 || target < 0 || target >= items.length)
+            return;
+        const newItems = [...items];
+        [newItems[realIndex], newItems[target]] = [newItems[target], newItems[realIndex]];
+        setItems(newItems);
+    };
+    // Fix: use the item's actual index in `items`, not the filtered list index
+    const toggleCheckbox = (itemId) => {
+        const realIndex = items.findIndex((i) => i.id === itemId);
+        if (realIndex === -1)
+            return;
+        const currentVisibleCount = items.filter((i) => !i.isHidden).length;
+        if (!items[realIndex].isHidden && currentVisibleCount === 2) {
+            setError("At least two columns must remain visible.");
+            return;
+        }
+        const newItems = [...items];
+        newItems[realIndex] = {
+            ...newItems[realIndex],
+            isHidden: !newItems[realIndex].isHidden,
+        };
+        setItems(newItems);
+        setError(null);
+    };
+    const filteredItems = items.filter((item) => item.label.toString().toLowerCase().includes(searchTerm.toLowerCase()));
+    const allChecked = items.every((item) => !item.isHidden);
+    const someChecked = items.some((item) => !item.isHidden) && !allChecked;
+    const handleSelectAll = () => {
+        if (allChecked) {
+            setItems(items.map((item, i) => ({ ...item, isHidden: i >= 2 })));
+            setError("At least two columns must remain visible.");
+        }
+        else {
+            setItems(items.map((item) => ({ ...item, isHidden: false })));
+            setError(null);
+        }
+    };
+    return (_jsxs(Box, { mt: 2, children: [error && (_jsx(Box, { mb: 2, px: 3, py: 2, bg: theme.colors.red[50], borderRadius: "md", border: "1px solid", borderColor: theme.colors.red[200], children: _jsx(Text, { color: theme.colors.red[600], fontSize: "xs", fontWeight: 500, children: error }) })), _jsx(Input, { placeholder: "Search columns...", mb: 2, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), size: "sm", borderRadius: "md" }), !searchTerm.length && (_jsx(Flex, { align: "center", mb: 1, bg: theme.colors.gray[100], px: 2, py: 1, borderRadius: "md", children: _jsx(Checkbox, { label: "Show all columns", isChecked: allChecked, isIndeterminate: someChecked, onChange: handleSelectAll }) })), _jsx(List, { spacing: 0, maxH: "300px", overflowY: "auto", sx: {
+                    "&::-webkit-scrollbar": { width: "3px", height: "3px" },
+                    "&::-webkit-scrollbar-track": {
+                        background: theme.colors.gray[100],
+                        borderRadius: "sm",
+                    },
+                    "&::-webkit-scrollbar-thumb": {
+                        background: theme.colors.gray[400],
+                        borderRadius: "sm",
+                    },
+                    "&::-webkit-scrollbar-thumb:hover": {
+                        background: theme.colors.gray[500],
+                    },
+                    scrollbarWidth: "thin",
+                    scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
+                }, children: filteredItems.length > 0 ? (filteredItems.map((item, index) => {
+                    const isDraggingThisItem = draggedItemIndex === index;
+                    const isDropZone = draggedItemIndex !== null && draggedItemIndex !== index;
+                    const realIndex = items.findIndex((i) => i.id === item.id);
+                    return (_jsxs(ListItem, { draggable: true, onDragStart: () => handleDragStart(index), onDragOver: (e) => handleDragOver(e, index), onDragEnd: handleDragEnd, bg: isDraggingThisItem
+                            ? theme.colors.primary[100]
+                            : isDropZone
+                                ? theme.colors.primary[50]
+                                : "transparent", display: "flex", alignItems: "center", borderRadius: "sm", border: "1px solid", borderColor: isDraggingThisItem
+                            ? theme.colors.primary[400]
+                            : "transparent", cursor: "grab", fontSize: "13px", px: 2, py: "3px", mb: "3px", transition: "all 0.15s ease", _hover: {
+                            bg: theme.colors.gray[50],
+                            borderColor: theme.colors.border[200],
+                        }, _active: { cursor: "grabbing" }, children: [_jsx(Box, { as: "span", "aria-hidden": "true", display: "inline-flex", cursor: "grab", mr: 1, _hover: { color: theme.colors.gray[500] }, children: _jsx(GripVertical, { size: 14 }) }), _jsx(Checkbox, { isChecked: !item.isHidden, label: String(item.label), onChange: () => toggleCheckbox(item.id), size: "sm", labelSx: {
+                                    color: item.isHidden ? theme.colors.gray[500] : theme.colors.gray[700],
+                                } }), _jsx(Text, { fontSize: "12px", color: theme.colors.gray[500], ml: 'auto', children: index + 1 }), _jsx(IconButton, { "aria-label": `Move ${item.label} up`, icon: _jsx(ChevronUp, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex <= 0, onClick: () => moveItem(item.id, -1) }), _jsx(IconButton, { "aria-label": `Move ${item.label} down`, icon: _jsx(ChevronDown, { size: 14 }), variant: "ghost", size: "xs", ml: 1, minW: "auto", h: "auto", p: 0, color: theme.colors.gray[500], isDisabled: realIndex === -1 || realIndex >= items.length - 1, onClick: () => moveItem(item.id, 1) })] }, item.id));
+                })) : (_jsx(Text, { color: theme.colors.textMuted, textAlign: "center", fontSize: "sm", py: 6, children: "No columns found" })) }), _jsxs(Text, { fontSize: "xs", color: theme.colors.gray[500], mt: 2, textAlign: "right", children: [visibleCount, " / ", items.length, " visible"] })] }));
+};
+export default ManageColumns;

package/dist/esm/Components/Table/settings/TableSettings.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, IconButton, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Tabs, TabList, TabPanels, Tab, TabPanel, Text, } from "@chakra-ui/react";
+import { useCallback, useRef, useState } from "react";
+import { motion } from "framer-motion";
+import ManageColumns from "./ManageColumns.js";
+import Button from "../../Button/Button.js";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { Settings, Check } from "lucide-react";
+import ToolTip from "../../ToolTip/ToolTip.js";
+const MotionModalContent = motion(ModalContent);
+const DENSITY_OPTIONS = [
+    { value: "compact", label: "Compact", desc: "Tight rows — fit more data on screen" },
+    { value: "normal", label: "Normal", desc: "Balanced default spacing" },
+    { value: "comfortable", label: "Comfortable", desc: "Roomy rows, easier scanning" },
+];
+const TableSettings = ({ columns, onSave, density = "normal", onDensityChange, groupBy, }) => {
+    const theme = useCustomTheme();
+    const childInputMethodsRef = useRef({});
+    const [settingsOpen, setSettingsOpen] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [items, setItems] = useState(columns);
+    // Group selection is applied on Save (not live), per "click Apply to group".
+    const [selectedGroup, setSelectedGroup] = useState(groupBy);
+    const handleSave = useCallback(() => {
+        onSave(items, selectedGroup);
+        setSettingsOpen(false);
+    }, [onSave, items, selectedGroup]);
+    const handleOpen = useCallback(() => {
+        setItems(columns);
+        setSelectedGroup(groupBy);
+        setSettingsOpen(true);
+    }, [columns, groupBy]);
+    const tabStyle = {
+        fontSize: "13px",
+        fontWeight: 500,
+        px: 4,
+        py: 2,
+        borderBottom: "2px solid transparent",
+        color: theme.colors.textMuted,
+        _selected: {
+            borderBottom: `2px solid ${theme.colors.accentText}`,
+            color: theme.colors.accentText,
+            fontWeight: 600,
+        },
+        _hover: { color: theme.colors.text[600] },
+    };
+    return (_jsxs(Box, { children: [_jsx(ToolTip, { label: "Table Settings", placement: "top", children: _jsx(IconButton, { "aria-label": "Table settings", icon: _jsx(Settings, { size: "1.25rem" }), onClick: handleOpen, variant: "unstyled", minW: "auto", h: "auto", display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
+                        transform: "scale(1.1)",
+                        color: theme.colors.accentText
+                    } }) }), _jsxs(Modal, { isOpen: settingsOpen, onClose: () => setSettingsOpen(false), size: "md", children: [_jsx(ModalOverlay, {}), _jsxs(MotionModalContent, { mt: "0", top: "0", position: "absolute", borderTopRadius: "none", initial: { y: "-100%", opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: "-100%", opacity: 0 }, transition: { duration: 0.4, ease: "easeOut" }, padding: "0", minW: "620px", minH: "520px", maxH: "90vh", display: "flex", flexDirection: "column", bg: theme.colors.background[50], overflow: "hidden", children: [_jsx(ModalCloseButton, { top: 3, right: 3, zIndex: 2 }), _jsxs(Tabs, { index: selectedIndex, onChange: setSelectedIndex, variant: "unstyled", display: "flex", flexDirection: "column", flex: "1", minH: 0, children: [_jsxs(Box, { pt: 4, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "md", mb: 3, children: "Table Settings" }), _jsxs(TabList, { gap: 0, borderBottom: "1px solid", borderColor: theme.colors.border[200], children: [_jsx(Tab, { ...tabStyle, children: "Density" }), _jsx(Tab, { ...tabStyle, children: "Manage Columns" }), _jsx(Tab, { ...tabStyle, children: "Group" })] })] }), _jsx(ModalBody, { px: 4, py: 3, flex: "1", overflowY: "auto", sx: {
+                                            "&::-webkit-scrollbar": { width: "3px", height: "3px" },
+                                            "&::-webkit-scrollbar-track": { background: theme.colors.gray[100], borderRadius: "sm" },
+                                            "&::-webkit-scrollbar-thumb": { background: theme.colors.gray[400], borderRadius: "sm" },
+                                            "&::-webkit-scrollbar-thumb:hover": { background: theme.colors.gray[500] },
+                                            scrollbarWidth: "thin",
+                                            scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
+                                        }, children: _jsxs(TabPanels, { children: [_jsx(TabPanel, { px: 0, py: 1, children: _jsx(Flex, { direction: "column", gap: 2, children: DENSITY_OPTIONS.map((opt) => {
+                                                            const selected = density === opt.value;
+                                                            return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[300], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => onDensityChange === null || onDensityChange === void 0 ? void 0 : onDensityChange(opt.value), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsxs(Box, { textAlign: "left", children: [_jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], children: opt.label }), _jsx(Text, { fontSize: "11px", color: theme.colors.textMuted, children: opt.desc })] })] }, opt.value));
+                                                        }) }) }), _jsx(TabPanel, { px: 0, py: 0, children: _jsx(Box, { sx: {
+                                                            "& [role='listitem'], & > div > div": {
+                                                                py: "4px !important",
+                                                                minHeight: "unset !important",
+                                                            },
+                                                            "& label": { fontSize: "13px !important" },
+                                                            "& .chakra-checkbox": { gap: "8px !important" },
+                                                            "& .chakra-checkbox__label": { fontSize: "13px !important" },
+                                                            "& [draggable]": { py: "5px !important" },
+                                                        }, children: _jsx(ManageColumns, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childInputMethodsRef }) }) }), _jsxs(TabPanel, { px: 0, py: 1, children: [_jsx(Text, { fontSize: "12px", color: theme.colors.textMuted, mb: 2, children: "Group rows by a column. Click Save to apply." }), _jsx(Flex, { direction: "column", gap: 2, children: [{ id: undefined, label: "None (no grouping)" },
+                                                                // Only columns that declare a `columnType` are groupable.
+                                                                ...columns
+                                                                    .filter((c) => !!c.columnType && !c.isHidden)
+                                                                    .map((c) => ({ id: c.id, label: String(c.label) }))]
+                                                                .map((opt) => {
+                                                                var _a;
+                                                                const selected = selectedGroup === opt.id;
+                                                                return (_jsxs(Flex, { as: "button", type: "button", align: "center", gap: 3, px: 3, py: 2.5, borderRadius: "lg", border: "1px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[300], bg: selected ? theme.colors.primary.opacity[8] : theme.colors.transparent, transition: "all 0.15s", _hover: { borderColor: theme.colors.accentText }, onClick: () => setSelectedGroup(opt.id), children: [_jsx(Box, { boxSize: "1.1rem", borderRadius: "full", border: "2px solid", borderColor: selected ? theme.colors.accentText : theme.colors.boxborder[500], display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, children: selected && _jsx(Check, { size: 11, color: theme.colors.accentText, strokeWidth: 3 }) }), _jsx(Text, { fontSize: "13px", fontWeight: 600, color: theme.colors.text[700], textAlign: "left", children: opt.label })] }, String((_a = opt.id) !== null && _a !== void 0 ? _a : "__none__")));
+                                                            }) })] })] }) })] }), _jsxs(ModalFooter, { gap: "0.5rem", borderTop: "1px solid", borderColor: theme.colors.border[200], pt: 3, pb: 3, px: 4, children: [_jsx(Button, { label: "Close", size: "sm", onClick: () => setSettingsOpen(false), variant: "outline", colorScheme: "red" }), _jsx(Button, { label: "Save", size: "sm", onClick: handleSave })] })] })] })] }));
+};
+export default TableSettings;

package/dist/esm/Components/Tag/Tag.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Icon, Tag as ChakraTag, TagLabel, TagRightIcon } from "@chakra-ui/react";
+// Icon size scales with the tag size so the right icon stays proportional.
+const ICON_SIZE = {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1em",
+    lg: "1.1em",
+};
+const Tag = ({ label, colorScheme = "primary", variant = "solid", size = "md", icon, onTagClick, onIconClick, }) => {
+    const isInteractive = !!onTagClick;
+    return (_jsxs(ChakraTag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", children: [isInteractive ? (_jsx(TagLabel, { as: "button", type: "button", cursor: "pointer", onClick: () => onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(), children: label })) : (_jsx(TagLabel, { children: label })), icon &&
+                (onIconClick ? (_jsx(Box, { as: "button", type: "button", "aria-label": `Remove ${label}`, onClick: (e) => {
+                        e.stopPropagation();
+                        onIconClick();
+                    }, display: "inline-flex", alignItems: "center", ml: "0.25rem", transition: "all 0.2s ease", _hover: { opacity: 0.8, transform: "scale(1.05)" }, children: _jsx(Icon, { as: icon, boxSize: ICON_SIZE[size] }) })) : (_jsx(TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], "aria-hidden": true })))] }));
+};
+export default Tag;

package/dist/esm/Components/Tag/Tag.styles.js

@@ -0,0 +1,93 @@
+import { accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+// Resolve a colorScheme key to a numeric swatch from the theme. All supported
+// colorScheme values (brand + global scales) expose a 50-900 scale; fall back to
+// gray so an unknown/missing key can never throw at render time.
+const SCALE_KEYS = [
+    "primary", "secondary", "tertiary", "gray", "red", "orange", "yellow",
+    "green", "teal", "blue", "cyan", "purple", "pink",
+];
+const isScaleKey = (key) => SCALE_KEYS.includes(key);
+const swatch = (theme, colorScheme = "primary") => isScaleKey(colorScheme) ? theme.colors[colorScheme] : theme.colors.gray;
+// Chakra Tag is a multipart component (container / label / closeButton); styling
+// is keyed under those parts, so it needs a multi-style config with `parts`.
+export const Tag = {
+    parts: ["container", "label", "closeButton"],
+    baseStyle: {
+        container: {
+            borderRadius: "full",
+            fontWeight: 600,
+            lineHeight: 1.2,
+            display: "inline-flex",
+            alignItems: "center",
+            transition: "background 0.15s ease, color 0.15s ease, border-color 0.15s ease",
+        },
+    },
+    sizes: {
+        xs: {
+            container: { fontSize: "0.6875rem", px: 2, py: 0.5, minH: "1.25rem" },
+        },
+        sm: {
+            container: { fontSize: "0.75rem", px: 2.5, py: 1, minH: "1.5rem" },
+        },
+        md: {
+            container: { fontSize: "0.8125rem", px: 3, py: 1, minH: "1.75rem" },
+        },
+        lg: {
+            container: { fontSize: "0.9375rem", px: 3.5, py: 1.5, minH: "2rem" },
+        },
+    },
+    variants: {
+        solid: ({ theme, colorScheme = "primary" }) => {
+            const c = swatch(theme, colorScheme);
+            const { white, black } = theme.colors;
+            const fill = c[500];
+            const hoverFill = c[600];
+            const activeFill = c[700];
+            return {
+                container: {
+                    bg: fill,
+                    color: onFilled(fill, white, black),
+                    _hover: { bg: hoverFill, color: onFilled(hoverFill, white, black) },
+                    _active: { bg: activeFill, color: onFilled(activeFill, white, black) },
+                },
+            };
+        },
+        subtle: ({ theme, colorScheme = "primary" }) => {
+            const c = swatch(theme, colorScheme);
+            const bg = c[50];
+            return {
+                container: {
+                    bg,
+                    // A fixed [700] fails AA against [50] for some hues (orange 3.89, borderline green
+                    // 4.39) — walk the scale's own rungs against this specific tint instead.
+                    color: accentTextOnCanvas(c, bg),
+                    border: "0.063rem solid",
+                    borderColor: c[100],
+                    _hover: { bg: c[100] },
+                    _active: { bg: c[200] },
+                },
+            };
+        },
+        outline: ({ theme, colorScheme = "primary" }) => {
+            const c = swatch(theme, colorScheme);
+            const canvas = theme.colors.backgroundColor.main;
+            return {
+                container: {
+                    border: "0.094rem solid",
+                    borderColor: c[500],
+                    // Text sits directly on the page canvas here — a fixed [600] failed AA for several
+                    // hues (orange 2.51, green 2.94, red 4.09); use the canvas-text helper instead.
+                    color: accentTextOnCanvas(c, canvas),
+                    bg: "transparent",
+                    _hover: { bg: c[50] },
+                    _active: { bg: c[100] },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        size: "md",
+        variant: "solid",
+        colorScheme: "primary",
+    },
+};

package/dist/esm/Components/Tag/TagProps.js

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

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

@@ -0,0 +1,237 @@
+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.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { toWords } from "../../Utils/functions.js";
+import NoteTextArea from "../NoteTextArea/NoteTextArea.js";
+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,
+});
+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) => {
+    switch ((title || "").toLowerCase()) {
+        case "created":
+            return colors.semantic.success;
+        case "updated":
+            return colors.semantic.warning;
+        case "delete":
+        case "deleted":
+            return colors.semantic.error;
+        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;
+    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: colors.gray[50], border: `0.063rem solid ${colors.boxborder[200]}`, borderRadius: "lg", 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: accentTextOnCanvas(colors.primary, colors.gray[50]), display: "inline-flex", children: _jsx(StickyNote, { size: 12 }) }), note.title && (_jsx(Text, { fontSize: "0.6875rem", fontWeight: 700, color: colors.text[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: colors.textMuted })) : (_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: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
+                                            bg: colors.primary[50],
+                                            color: accentTextOnCanvas(colors.primary, colors.primary[50]),
+                                        }, 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: "md", color: colors.textMuted, bg: "transparent", cursor: "pointer", _hover: {
+                                            bg: colors.semantic.error[50],
+                                            color: accentTextOnCanvas(colors.semantic.error, colors.semantic.error[50]),
+                                        }, 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: colors.text[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) => (_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: colors.primary[50], color: accentTextOnCanvas(colors.primary, colors.primary[50]), fontSize: "0.625rem", maxW: "100%", _hover: { bg: colors.primary[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: colors.textMuted, 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;
+    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: colors.background[50], border: `0.063rem solid ${colors.boxborder[300]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale[400] : undefined, borderRadius: "xl", px: 3.5, py: 2.5, transition: "all 0.15s ease", cursor: clickable ? "pointer" : "default", onClick: clickable ? () => onEventClick(event, index) : undefined, _hover: {
+                    borderColor: scale[300],
+                    boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.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: colors.text[800], noOfLines: 1, children: event.action_from }), _jsx(Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: accentTextOnCanvas(scale, scale[50]), bg: scale[50], border: `0.063rem solid ${scale[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), _jsx(Text, { fontSize: "0.6875rem", color: colors.textMuted, whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), changes.length > 0 && (_jsx(Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => (_jsxs(Flex, { align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap", children: [_jsx(Text, { fontWeight: 600, color: colors.text[700], children: toWords(c.field) }), c.from !== null && c.from !== undefined && (_jsxs(_Fragment, { children: [_jsx(Box, { as: "span", color: colors.textMuted, bg: colors.gray[50], borderRadius: "base", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), _jsx(Box, { as: "span", color: colors.textMuted, display: "inline-flex", children: _jsx(ArrowRight, { size: 11 }) })] })), _jsx(Box, { as: "span", color: accentTextOnCanvas(colors.semantic.success, colors.semantic.success[50]), bg: colors.semantic.success[50], borderRadius: "base", 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: colors.primary.opacity[16], color: accentTextOnCanvas(colors.primary, colors.background[50]), fontSize: "0.5625rem", fontWeight: 700, children: initials(toWords(event.action_by)) }) }), _jsxs(Text, { fontSize: "0.6875rem", color: colors.textMuted, children: ["by", " ", _jsx(Box, { as: "span", color: colors.text[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: "md", fontSize: "0.75rem", fontWeight: 600, color: accentTextOnCanvas(colors.primary, colors.background[50]), bg: "transparent", cursor: "pointer", _hover: {
+                                    bg: colors.primary[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 ${colors.gray[100]}`, 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, }) => {
+    const theme = useCustomTheme();
+    const colors = theme.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: colors.textMuted, children: [_jsx(Box, { boxSize: "2.75rem", borderRadius: "full", bg: colors.gray[100], display: "flex", alignItems: "center", justifyContent: "center", color: accentTextOnCanvas(colors.gray, colors.gray[100]), 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) => (_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: accentTextOnCanvas(colors.gray, colors.gray[50]), bg: colors.gray[50], border: `0.063rem solid ${colors.boxborder[200]}`, borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap", children: date }), _jsx(Box, { flex: "1", h: "0.063rem", bg: colors.boxborder[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: colors.gray[300], transform: "translateX(-50%)" }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+                                var _a;
+                                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[50], color: accentTextOnCanvas(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 0.063rem ${scale[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 }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : 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: colors.gray[300], transform: "translateX(-50%)" }), Object.keys(groupedEvents).map((date) => {
+                var _a;
+                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: colors.textMuted, bg: colors.background[50], border: `0.063rem solid ${colors.boxborder[300]}`, boxShadow: (_a = theme.shadows) === null || _a === void 0 ? void 0 : _a.xs, borderRadius: "full", px: 4, py: 1.5, whiteSpace: "nowrap", children: date }) }), groupedEvents[date].map(({ event, globalIndex }, index) => {
+                            var _a;
+                            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: scale[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[50], color: accentTextOnCanvas(scale, scale[50]), border: `0.125rem solid ${colors.background[50]}`, boxShadow: `0 0 0 0.063rem ${scale[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 }) })] }, `${(_a = event.logs_id) !== null && _a !== void 0 ? _a : date}-${index}`));
+                        })] }, date));
+            })] }));
+};
+export default Timeline;

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

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