pixelize-design-library 2.1.11 → 2.1.13

package/dist/Components/Table/TableToDo.js

@@ -0,0 +1,291 @@
+"use strict";
+// const [isPopoverOpen, setPopoverOpen] = useState(false);
+// const [activeHeader, setActiveHeader] = useState<string | null>(null);
+// const [searchTerms, setSearchTerms] = useState<Record<string, string>>({});
+// const [searchOperation, setSearchOperation] = useState<
+//   Record<string, string>
+// >({});
+// const [betweenValues, setBetweenValues] = useState<
+//   Record<string, { min: string; max: string }>
+// >({});
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchFeatures = void 0;
+// const sortedData = [...data].sort((a, b) => {
+//   if (!sortField) return 0;
+//   if (a[sortField] < b[sortField]) return sortDirection === "asc" ? -1 : 1;
+//   if (a[sortField] > b[sortField]) return sortDirection === "asc" ? 1 : -1;
+//   return 0;
+// });
+// const getValue = (header: string) => {
+//   const value = data.reduce((acc: (string | number)[], item: DataObject) => {
+//     const itemValue = item[header];
+//     if (
+//       itemValue !== undefined &&
+//       itemValue !== null &&
+//       !acc.includes(itemValue)
+//     ) {
+//       acc.push(itemValue);
+//     }
+//     return acc;
+//   }, []);
+//   return value;
+// };
+// const handleSearchOperation = (header: string, operation: string) => {
+//   // setSearchOperation((prev) => ({ ...prev, [header]: operation }));
+//   // const list_ofdata = getValue(header);
+//   // if (operation === "between") {
+//   //   const smallestValue = String(Math.min(Number(...list_ofdata)));
+//   //   const highestValue = String(Math.max(Number(...list_ofdata)));
+//   //   setBetweenValues((prev) => ({
+//   //     ...prev,
+//   //     [header]: { min: smallestValue, max: highestValue },
+//   //   }));
+//   //   setSearchTerms((prev) => ({ ...prev, [header]: "between" }));
+//   // } else {
+//   //   if (operation === "blank" || operation === "notBlank") {
+//   //     setSearchTerms((prev) => ({ ...prev, [header]: "" }));
+//   //   } else {
+//   //     setSearchTerms((prev) => ({
+//   //       ...prev,
+//   //       [header]: list_ofdata[0].toString(),
+//   //     }));
+//   //   }
+//   // }
+// };
+// const handleSearch = (field: string, term: string) => {
+//   // if (searchOperation[field] === "between") {
+//   //   setBetweenValues((prev) => ({
+//   //     ...prev,
+//   //     [field]: { min: term.split("-")[0], max: term.split("-")[1] },
+//   //   }));
+//   // } else {
+//   //   setSearchTerms((prev) => ({ ...prev, [field]: term }));
+//   // }
+// };
+// const handleHeaderClick = (header: string, search: boolean) => {
+//   // if (!search) {
+//   //   return;
+//   // }
+//   // setActiveHeader(header);
+//   // setPopoverOpen(true);
+// };
+// const closePopover = () => {
+//   // setPopoverOpen(false);
+// };
+// const filteredData = sortedData.filter((item) => {
+//   return Object.keys(searchTerms).every((key) => {
+//     const term = String(searchTerms[key]).toLowerCase();
+//     const value = String(item[key]).toLowerCase();
+//     const operation = searchOperation[key] || "notBlank";
+//     switch (operation) {
+//       case "contains":
+//         return value.includes(term);
+//       case "notContains":
+//         return !value.includes(term);
+//       case "equals":
+//         return value === term;
+//       case "notEquals":
+//         return value !== term;
+//       case "beginsWith":
+//         return value.startsWith(term);
+//       case "endsWith":
+//         return value.endsWith(term);
+//       case "greaterThan":
+//         return Number(value) > Number(term);
+//       case "greaterThanOrEqual":
+//         return Number(value) >= Number(term);
+//       case "lessThan":
+//         return Number(value) < Number(term);
+//       case "lessThanOrEqual":
+//         return Number(value) <= Number(term);
+//       case "between": {
+//         const { min, max } = betweenValues[key] || {};
+//         return Number(value) >= Number(min) && Number(value) <= Number(max);
+//       }
+//       case "blank":
+//         return value === "";
+//       case "notBlank":
+//         return value !== "";
+//       default:
+//         return true;
+//     }
+//   });
+// });
+var react_1 = __importDefault(require("react"));
+var searchFeatures = function (header) {
+    return react_1.default.createElement(react_1.default.Fragment, null, "hi");
+    // const fieldType = getFieldType(header, data);
+    // return (
+    //   <>
+    //     <Select
+    //       value={searchOperation[header] || "notBlank"}
+    //       onChange={(e) => handleSearchOperation(header, e.target.value)}
+    //       style={{ background: "#3182ce", color: "white" }}
+    //     >
+    //       <option value="equals">Equals</option>
+    //       <option value="notEquals">Does not equal</option>
+    //       {fieldType === "number" ? (
+    //         <>
+    //           <option value="greaterThan">Greater than</option>
+    //           <option value="greaterThanOrEqual">
+    //             Greater than or equal to
+    //           </option>
+    //           <option value="lessThan">Less than</option>
+    //           <option value="lessThanOrEqual">Less than or equal to</option>
+    //           <option value="between">Between</option>
+    //         </>
+    //       ) : (
+    //         <>
+    //           <option value="contains">Contains</option>
+    //           <option value="notContains">Does not contain</option>
+    //           <option value="beginsWith">Begins with</option>
+    //           <option value="endsWith">Ends with</option>
+    //         </>
+    //       )}
+    //       <option value="blank">Blank</option>
+    //       <option value="notBlank">Not blank</option>
+    //     </Select>
+    //     {searchOperation[header] !== undefined &&
+    //       searchOperation[header] === "between" &&
+    //       fieldType === "number" && (
+    //         <>
+    //           <br />
+    //           <Input
+    //             value={betweenValues[header]?.min || ""}
+    //             onChange={(e) => {
+    //               setBetweenValues((prev) => ({
+    //                 ...prev,
+    //                 [header]: { ...prev[header], min: e.target.value },
+    //               }));
+    //               setSearchTerms((prev) => ({ ...prev, [header]: "between" }));
+    //             }}
+    //             placeholder="Min..."
+    //             background="white"
+    //             color="black"
+    //           />
+    //           <br />
+    //           <br />
+    //           <Input
+    //             value={betweenValues[header]?.max || ""}
+    //             onChange={(e) => {
+    //               setBetweenValues((prev) => ({
+    //                 ...prev,
+    //                 [header]: { ...prev[header], max: e.target.value },
+    //               }));
+    //               setSearchTerms((prev) => ({ ...prev, [header]: "between" }));
+    //             }}
+    //             placeholder="Max..."
+    //             background="white"
+    //             color="black"
+    //           />
+    //         </>
+    //       )}
+    //     {searchOperation[header] !== undefined &&
+    //       searchOperation[header] !== "between" &&
+    //       searchOperation[header] !== "blank" &&
+    //       searchOperation[header] !== "notBlank" && (
+    //         <>
+    //           <br />
+    //           <Input
+    //             value={searchTerms[header] || ""}
+    //             onChange={(e) => handleSearch(header, e.target.value)}
+    //             placeholder="Search..."
+    //             background="white"
+    //             color="black"
+    //           />
+    //           {/* <br />
+    //                         <select onChange={(e) => console.log("option 1")} style={{ width: "100%", borderRadius: "2px", height: "30px" }}>
+    //                             <option value="">Select an option</option>
+    //                             <option value="option1">Option 1</option>
+    //                             <option value="option2">Option 2</option>
+    //                             <option value="option3">Option 3</option>
+    //                         </select> */}
+    //         </>
+    //       )}
+    //   </>
+    // );
+};
+exports.searchFeatures = searchFeatures;
+// const hasSelection = selection.length > 0;
+// const indeterminate = hasSelection && selection.length < data.length;
+// const handleMouseEnter = (index: number) => setHoveredHeaderIndex(index);
+// const handleMouseLeave = () => {
+//   setHoveredHeaderIndex(null);
+//   closePopover();
+// };
+// const removeSearchOptionTerm = (key: any) => {
+//   const newSearchTerms = { ...searchTerms };
+//   const newSearchOperation = { ...searchOperation };
+//   const newBetweenValues = { ...betweenValues };
+//   delete newSearchTerms[key];
+//   delete newSearchOperation[key];
+//   delete newBetweenValues[key];
+//   setSearchTerms(newSearchTerms);
+//   setSearchOperation(newSearchOperation);
+//   setBetweenValues(newBetweenValues);
+// };
+// const SearchOptions = () => {
+//   return (
+//     <Wrap>
+//       {searchOperation &&
+//         Object.keys(searchOperation).map((key, index) => {
+//           return (
+//             <Tag
+//               size="sm"
+//               key={index}
+//               borderRadius="full"
+//               variant="solid"
+//               colorScheme="gray"
+//               m={1}
+//             >
+//               <Box display="flex" alignItems="center">
+//                 <TagLabel>{key}</TagLabel>
+//                 <TagLabel mx={2}>{searchOperation[key]}</TagLabel>
+//                 {searchOperation[key] === "between" ? (
+//                   <TagLabel>
+//                     {betweenValues[key]?.min} - {betweenValues[key]?.max}
+//                   </TagLabel>
+//                 ) : (
+//                   <TagLabel>{searchTerms[key]}</TagLabel>
+//                 )}
+//               </Box>
+//               <TagCloseButton onClick={() => removeSearchOptionTerm(key)} />
+//             </Tag>
+//           );
+//         })}
+//     </Wrap>
+//   );
+// };
+// const Export = ({
+//   exportOptions,
+// }: {
+//   exportOptions: TableProps["exportOptions"];
+// }) => {
+//   return (
+//     <Select
+//       placeholder="Exports"
+//       width={160}
+//       onChange={(e) => {
+//         handleExportChange && handleExportChange(e.target.value);
+//       }}
+//       value={exportLabel}
+//       key={exportLabel}
+//     >
+//       {exportOptions?.map((option) => (
+//         <option key={option.id} value={option.id}>
+//           {option.label}
+//         </option>
+//       ))}
+//     </Select>
+//   );
+// };
+/* <Box display="flex" justifyContent="flex-end">
+        <SearchOptions />
+        {exportOptions && exportOptions.length > 0 && (
+          <Export exportOptions={exportOptions} />
+        )}
+      </Box> */
+//   <br />

package/dist/Components/Tag/Tag.d.ts

@@ -0,0 +1,12 @@
+import React, { ElementType } from "react";
+interface ChipProps {
+    label: string;
+    onIconClick?: () => void;
+    onTagClick?: () => void;
+    icon?: ElementType;
+    colorScheme?: "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+    size?: "sm" | "md" | "lg";
+    variant?: "solid" | "outline";
+}
+declare const Tag: React.FC<ChipProps>;
+export default Tag;

package/dist/Components/Tag/Tag.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var Tag = function (_a) {
+    var label = _a.label, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b, _c = _a.variant, variant = _c === void 0 ? "solid" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, icon = _a.icon, onTagClick = _a.onTagClick, onIconClick = _a.onIconClick;
+    return (react_1.default.createElement(react_2.Tag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", cursor: "pointer", onClick: function () { return onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(); } },
+        react_1.default.createElement(react_2.TagLabel, null, label),
+        icon && (react_1.default.createElement(react_2.TagRightIcon, { as: icon, boxSize: "1em", ml: 1.5, cursor: onIconClick ? "pointer" : "default", onClick: function (e) {
+                e.stopPropagation();
+                onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick();
+            }, transition: "all 0.2s ease", _hover: {
+                opacity: 0.8,
+                transform: "scale(1.05)",
+                cursor: onIconClick ? "pointer" : "default",
+            } }))));
+};
+exports.default = Tag;

package/dist/Components/Tag/Tag.styles.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStyleConfig } from "@chakra-ui/react";
+export declare const Tag: ComponentStyleConfig;

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

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+exports.Tag = {
+    baseStyle: {
+        borderRadius: "full",
+        fontWeight: "bold",
+        px: 3,
+        py: 1,
+    },
+    sizes: {
+        sm: {
+            fontSize: "0.75rem",
+            px: 2,
+            py: 1,
+        },
+        md: {
+            fontSize: "0.875rem",
+            px: 3,
+            py: 1.5,
+        },
+        lg: {
+            fontSize: "1rem",
+            px: 4,
+            py: 2,
+        },
+    },
+    variants: {
+        solid: function (_a) {
+            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
+            return ({
+                bg: theme.colors[colorScheme][500],
+                color: theme.colors.white,
+                _hover: {
+                    bg: theme.colors[colorScheme][600],
+                },
+                _active: {
+                    bg: theme.colors[colorScheme][700],
+                },
+            });
+        },
+        outline: function (_a) {
+            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
+            return ({
+                border: "0.125rem solid",
+                borderColor: theme.colors[colorScheme][500],
+                color: theme.colors[colorScheme][500],
+                bg: "transparent",
+                _hover: {
+                    bg: theme.colors[colorScheme][50],
+                },
+                _active: {
+                    bg: theme.colors[colorScheme][100],
+                },
+            });
+        },
+    },
+    defaultProps: {
+        size: "md",
+        variant: "solid",
+        colorScheme: "primary",
+    },
+};

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { TimelineProps } from "./TimelineProps";
+declare const Timeline: ({ timelineEvents }: TimelineProps) => React.JSX.Element;
+export default Timeline;

package/dist/Components/Timeline/Timeline.js

@@ -0,0 +1,166 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var TimelineContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  padding: 0px 24px;\n  margin: 0 auto;\n  width: 100%;\n  max-width: 800px;\n   @media (max-width: 768px) {\n    padding: 0px 16px;\n    max-width: 100%;\n  }\n"], ["\n  position: relative;\n  padding: 0px 24px;\n  margin: 0 auto;\n  width: 100%;\n  max-width: 800px;\n   @media (max-width: 768px) {\n    padding: 0px 16px;\n    max-width: 100%;\n  }\n"])));
+var Line = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background-color: #d2d9e0;\n  transform: translateX(-50%);\n  @media (max-width: 768px) {\n    left: 25px; /* Move the line towards the left */\n  }\n"], ["\n  position: absolute;\n  left: 50%;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background-color: #d2d9e0;\n  transform: translateX(-50%);\n  @media (max-width: 768px) {\n    left: 25px; /* Move the line towards the left */\n  }\n"])));
+var EventContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: ", ";\n  width: 100%;\n  // padding: 1rem 0 1rem 0;\n  box-sizing: border-box;\n  position: relative;\n  margin-bottom: 24px;\n  align-items: center; /* Center alignment for dot and event content */\n  text-align: ", ";\n  @media (max-width: 768px) {\n    flex-direction: column;\n    text-align: left;\n    align-items: flex-start;\n  }\n"], ["\n  display: flex;\n  justify-content: ", ";\n  width: 100%;\n  // padding: 1rem 0 1rem 0;\n  box-sizing: border-box;\n  position: relative;\n  margin-bottom: 24px;\n  align-items: center; /* Center alignment for dot and event content */\n  text-align: ", ";\n  @media (max-width: 768px) {\n    flex-direction: column;\n    text-align: left;\n    align-items: flex-start;\n  }\n"])), function (_a) {
+    var isLeft = _a.isLeft;
+    return (isLeft ? "flex-end" : "flex-start");
+}, function (_a) {
+    var isLeft = _a.isLeft;
+    return (isLeft ? "left" : "right");
+});
+var Event = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  // background: white;\n  // padding: 16px;\n  // border: 1px solid #007bff;\n  // border-radius: 8px;\n  // width: 40%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer; /* Indicates that the event is clickable */\n"], ["\n  // background: white;\n  // padding: 16px;\n  // border: 1px solid #007bff;\n  // border-radius: 8px;\n  // width: 40%;\n  position: relative;\n  display: flex;\n  align-items: center;\n  cursor: pointer; /* Indicates that the event is clickable */\n"])));
+var Dot = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  left: 50%;\n  width: 30px;\n  height: 30px;\n  background-color: #f4f7ff;\n  border-radius: 50%;\n  transform: translateX(-50%);\n  padding: 6px;\n  border: 1px solid #d2d9e0;\n   @media (max-width: 768px) {\n    left: 20px; /* Move dot closer to the left */\n    transform: translateX(0); /* Remove horizontal centering */\n  }\n"], ["\n  position: absolute;\n  left: 50%;\n  width: 30px;\n  height: 30px;\n  background-color: #f4f7ff;\n  border-radius: 50%;\n  transform: translateX(-50%);\n  padding: 6px;\n  border: 1px solid #d2d9e0;\n   @media (max-width: 768px) {\n    left: 20px; /* Move dot closer to the left */\n    transform: translateX(0); /* Remove horizontal centering */\n  }\n"])));
+// const Arrow = styled.div<{ isLeft: boolean }>`
+//   position: absolute;
+//   left: ${({ isLeft }) => (isLeft ? "-10px " : "100%")};
+//   width: 0;
+//   height: 0;
+//   border-style: solid;
+//   border-width: ${({ isLeft }) =>
+//     isLeft ? "10px 10px 10px 0" : "10px 10px 10px 10px"};
+//   border-color: transparent #007bff transparent transparent;
+//   transform: translateX(-50%);
+//   top: 50%;
+//   transform: translateY(-50%);
+//   transform: ${({ isLeft }) =>
+//     isLeft ? "translateY(-50%) " : "translateY(-50%) rotate(180deg)"};
+// `;
+var EventContent = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  // margin-left: 24px;\n"], ["\n  // margin-left: 24px;\n"])));
+var EventTitle = styled_1.default.h3(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+// const EventDescription = styled.p`
+//   margin: 0;
+// `;
+var EventDate = styled_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n  margin-top: 8px;\n  color: #6c757d;\n"], ["\n  display: block;\n  margin-top: 8px;\n  color: #6c757d;\n"])));
+var EventTime = styled_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  left: ", ";\n  position: absolute;\n  color: #6c757d;\n  @media (max-width: 768px) {\n    position: relative;\n    left: auto;\n    margin-left: 40px;\n  }\n"], ["\n  left: ", ";\n  position: absolute;\n  color: #6c757d;\n  @media (max-width: 768px) {\n    position: relative;\n    left: auto;\n    margin-left: 40px;\n  }\n"])), function (_a) {
+    var isLeft = _a.isLeft;
+    return (isLeft ? "38% " : "53%");
+});
+var EventGroupDate = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: 1rem;\n  font-weight: 400;\n  color: #464f62;\n  box-sizing: border-box;\n  width: 180px;\n  padding: 5px 25px;\n  text-align: center;\n  background-color: #f4f7ff;\n  border: 1px solid #d2d9e0;\n  border-radius: 5px;\n  margin: 0 auto; /* Center horizontally */\n  display: flex;\n  align-items: center; /* Center vertically */\n  justify-content: center; /* Center horizontally */\n  @media (max-width: 768px) {\n    width: auto;\n    padding: 5px 10px;\n  }\n"], ["\n  font-size: 1rem;\n  font-weight: 400;\n  color: #464f62;\n  box-sizing: border-box;\n  width: 180px;\n  padding: 5px 25px;\n  text-align: center;\n  background-color: #f4f7ff;\n  border: 1px solid #d2d9e0;\n  border-radius: 5px;\n  margin: 0 auto; /* Center horizontally */\n  display: flex;\n  align-items: center; /* Center vertically */\n  justify-content: center; /* Center horizontally */\n  @media (max-width: 768px) {\n    width: auto;\n    padding: 5px 10px;\n  }\n"])));
+var EventGroupSeparator = styled_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var EventGroupHeader = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: relative;\n  margin-bottom: 24px;\n"], ["\n  position: relative;\n  margin-bottom: 24px;\n"])));
+// const FlexContainer = styled.div`
+//   display: flex;
+//   align-items: center;
+// `;
+var Timeline = function (_a) {
+    var timelineEvents = _a.timelineEvents;
+    var formatTimestamp = function (timestamp, type) {
+        var parsedTimestamp = parseInt(timestamp, 10);
+        var date = new Date(parsedTimestamp);
+        if (isNaN(date.getTime())) {
+            return "Invalid Date";
+        }
+        if (type === "date") {
+            var monthNames = [
+                "January",
+                "February",
+                "March",
+                "April",
+                "May",
+                "June",
+                "July",
+                "August",
+                "September",
+                "October",
+                "November",
+                "December",
+            ];
+            var month = monthNames[date.getMonth()];
+            var day = date.getDate();
+            var year = date.getFullYear();
+            return "".concat(month, " ").concat(day, ", ").concat(year);
+        }
+        else if (type === "time") {
+            // Convert to IST (UTC+5:30)
+            var istOffset = 5.5 * 60 * 60 * 1000; // 5 hours 30 minutes in milliseconds
+            var istDate = new Date(date.getTime() + istOffset);
+            var hours = istDate.getUTCHours();
+            var minutes = istDate.getUTCMinutes();
+            var ampm = hours >= 12 ? "PM" : "AM";
+            // Convert hours to 12-hour format
+            hours = hours % 12;
+            hours = hours ? hours : 12; // the hour '0' should be '12'
+            // Pad minutes with leading zero if needed
+            var minutesStr = minutes < 10 ? "0" + minutes : minutes;
+            return "".concat(hours, ":").concat(minutesStr, " ").concat(ampm);
+        }
+        return date.toLocaleString();
+    };
+    var getIcon = function (event) {
+        switch (event.action_from) {
+            case "Accounts":
+                return react_1.default.createElement(lucide_react_1.IndianRupee, { size: 17 });
+            case "Notes":
+                return react_1.default.createElement(lucide_react_1.FileText, { size: 17 });
+            default:
+                return react_1.default.createElement(lucide_react_1.Volleyball, { size: 17 });
+        }
+    };
+    var groupEventsByDate = function (events) {
+        return events.reduce(function (groups, event) {
+            var date = formatTimestamp(event.created_at, "date");
+            if (!groups[date]) {
+                groups[date] = [];
+            }
+            groups[date].push(event);
+            return groups;
+        }, {});
+    };
+    var groupedEvents = groupEventsByDate(timelineEvents);
+    var formatChanges = function (changes) {
+        if (changes === null) {
+            return "No Changes";
+        }
+        var result = Object.entries(JSON.parse(changes))
+            .map(function (_a) {
+            var key = _a[0], value = _a[1];
+            var changeRecord = value;
+            if (changeRecord.original === null ||
+                changeRecord.original === undefined) {
+                return "".concat(key, " changed from null to ").concat(changeRecord.updated);
+            }
+            else {
+                return "".concat(key, " updated to ").concat(changeRecord.updated);
+            }
+        })
+            .join("\n");
+        return result;
+    };
+    // console.log("groupedEvents", groupedEvents);
+    return (react_1.default.createElement(TimelineContainer, null,
+        react_1.default.createElement(Line, null),
+        Object.keys(groupedEvents).map(function (date) { return (react_1.default.createElement(EventGroupSeparator, { key: date },
+            react_1.default.createElement(EventGroupHeader, null,
+                react_1.default.createElement(EventGroupDate, null, date)),
+            groupedEvents[date].map(function (event, index) { return (react_1.default.createElement(EventContainer, { key: index, isLeft: index % 2 === 0 },
+                react_1.default.createElement(Dot, null, getIcon(event)),
+                react_1.default.createElement(EventTime, { isLeft: index % 2 === 0 }, formatTimestamp(event.created_at, "time")),
+                react_1.default.createElement(Event, null,
+                    react_1.default.createElement(EventContent, null,
+                        react_1.default.createElement("div", { style: {
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: index % 2 === 0 ? "flex-start" : "flex-end",
+                            } },
+                            react_1.default.createElement(EventTitle, null, event.action_from + " " + event.title),
+                            react_1.default.createElement(react_2.Tooltip, { label: formatChanges(event.changes), shouldWrapChildren: true, placement: "top", hasArrow: true },
+                                react_1.default.createElement(lucide_react_1.Info, { style: { marginLeft: "5px" }, size: 17 }))),
+                        react_1.default.createElement(EventDate, null, " by " +
+                            event.action_by +
+                            " " +
+                            formatTimestamp(event.created_at, "date")))))); }))); })));
+};
+exports.default = Timeline;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

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

@@ -0,0 +1,20 @@
+export interface TimelineProps {
+    events?: TimelineEvent[];
+    timelineEvents: TimelineEvents[];
+    onEventClick?: (event: TimelineEvents, index: number) => void;
+}
+export interface TimelineEvent {
+    title: string;
+    description: string;
+    time: string;
+}
+export interface TimelineEvents {
+    logs_id: number;
+    title: string;
+    primary_id: number;
+    is_from: string;
+    action_from: string;
+    action_by: string;
+    created_at: number;
+    changes: any;
+}

package/dist/Components/Timeline/TimelineProps.js

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

package/dist/Components/Toaster/Toaster.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ToasterChildren, ToasterContextType } from "./ToasterProps";
+export default function ToasterProvider({ children }: ToasterChildren): React.JSX.Element;
+export declare const useToaster: () => ToasterContextType;