pixelize-design-library 2.2.34 → 2.2.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/Components/KanbanBoard/KanbanBoard.d.ts +1 -1
  2. package/dist/Components/KanbanBoard/KanbanBoard.js +102 -99
  3. package/dist/Components/Notification/Notification.d.ts +4 -1
  4. package/dist/Components/Notification/Notification.js +45 -22
  5. package/dist/Components/Notification/NotificationProps.d.ts +4 -3
  6. package/package.json +1 -1
package/dist/Components/KanbanBoard/KanbanBoard.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { KanbanBoardProps } from "./KanbanBoardProps";
3
- declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, virtualization, }: KanbanBoardProps) => React.JSX.Element;
3
+ declare const KanbanBoard: ({ data, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, }: KanbanBoardProps) => React.JSX.Element;
4
4
  export default KanbanBoard;
package/dist/Components/KanbanBoard/KanbanBoard.js CHANGED
@@ -53,10 +53,11 @@ var lucide_react_1 = require("lucide-react");
53
53
  var react_window_1 = require("react-window");
54
54
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
55
55
  var AccountCard_1 = __importDefault(require("./AccountCard"));
56
+ var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
56
57
  var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
57
58
  var KanbanBoard = function (_a) {
58
59
  var _b, _c, _d, _e, _f, _g, _h;
59
- var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, virtualization = _a.virtualization;
60
+ var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization;
60
61
  var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
61
62
  var _k = (0, react_1.useState)(data), columns = _k[0], setColumns = _k[1];
62
63
  var _l = (0, react_1.useState)(600), containerHeight = _l[0], setContainerHeight = _l[1];
@@ -163,103 +164,105 @@ var KanbanBoard = function (_a) {
163
164
  react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () { return toggleExpand(account.id, colId, index); } }))); }))),
164
165
  index === items.length - 1 && placeholder));
165
166
  };
166
- return (react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
167
- react_1.default.createElement(react_2.Box, { ref: containerRef, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "".concat(containerHeight, "px"), position: "relative", overflow: "hidden" },
168
- react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%",
169
- ///////////////////////////////////////////////////////////////////////////////
170
- sx: {
171
- "&::-webkit-scrollbar": {
172
- height: "6px", // Consistent size - 6px
173
- },
174
- "&::-webkit-scrollbar-track": {
175
- background: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100],
176
- borderRadius: "3px",
177
- margin: "0 4px", // Add gap on sides
178
- },
179
- "&::-webkit-scrollbar-thumb": {
180
- background: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[400],
181
- borderRadius: "3px",
182
- border: "1px solid ".concat((_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[100]),
183
- },
184
- "&::-webkit-scrollbar-thumb:hover": {
185
- background: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500],
186
- },
187
- // For Firefox
188
- scrollbarWidth: "thin",
189
- scrollbarColor: "".concat((_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[400], " ").concat((_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[100]),
190
- } }, isLoading
191
- ? Array.from({ length: 5 }).map(function (_, idx) {
192
- var _a, _b;
193
- return (react_1.default.createElement(react_2.Box, { key: idx, width: columnWidth, p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
194
- react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
195
- react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
196
- })
197
- : Object.entries(columns).map(function (_a) {
198
- var colId = _a[0], column = _a[1];
199
- return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
200
- var item = column.items[rubric.source.index];
201
- return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }),
202
- react_1.default.createElement(AccountCard_1.default, { key: item.id, account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: function () {
203
- return toggleExpand(item.id, colId, rubric.source.index);
204
- } })));
205
- } }, function (provided, snapshot) {
206
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
207
- return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
208
- ? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
209
- : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
210
- ? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
211
- : "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: "hidden", height: "".concat(containerHeight - 60, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
212
- react_1.default.createElement(react_2.Flex, { width: "95%", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative" },
213
- react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
214
- hoveredColumn === colId && column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease" })),
215
- !(hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
216
- react_1.default.createElement(react_2.Box, { px: 2, pb: 2, flex: "1", overflowY: "auto", width: "100%", mr: 1,
217
- /////LIST/////////////////////////////
218
- sx: {
219
- overflowY: "auto",
220
- overflowX: "hidden",
221
- /* === Firefox === */
222
- scrollbarWidth: "thin",
223
- scrollbarColor: "var(--chakra-colors-gray-300) transparent",
224
- /* === Chrome, Edge, Safari === */
225
- "&::-webkit-scrollbar": {
226
- width: "6px !important",
227
- height: "6px !important", // for horizontal scrollbar if any
228
- },
229
- "&::-webkit-scrollbar-track": {
230
- background: "gray.100",
231
- borderRadius: "3px",
232
- marginTop: "4px",
233
- marginBottom: "4px",
234
- },
235
- "&::-webkit-scrollbar-thumb": {
236
- background: "gray.300",
237
- borderRadius: "3px",
238
- border: "1px solid",
239
- borderColor: "gray.100",
240
- },
241
- "&::-webkit-scrollbar-thumb:hover": {
242
- background: "gray.400",
243
- },
244
- /* === Prevent scrollbar expansion in Chrome === */
245
- "&": {
246
- scrollbarGutter: "stable both-edges",
247
- },
248
- } }, virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
249
- if (el)
250
- listRefs.current[colId] = el;
251
- }, height: containerHeight - 150, itemCount: column.items.length, itemSize: function (index) { return getItemSize(index, column.items, colId); }, width: "100%", itemData: {
252
- items: column.items,
253
- colId: colId,
254
- placeholder: provided.placeholder,
255
- } }, Row)) : (react_1.default.createElement(react_2.Box, null,
256
- column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
257
- react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
258
- react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
259
- return toggleExpand(account.id, colId, index);
260
- } }))); }))); }),
261
- provided.placeholder)))));
262
- }));
263
- })))));
167
+ return (react_1.default.createElement(react_1.default.Fragment, null,
168
+ react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: kanbanEdit, create: kanbanCreate }),
169
+ react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
170
+ react_1.default.createElement(react_2.Box, { ref: containerRef, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "".concat(containerHeight, "px"), position: "relative", overflow: "hidden", mt: 2 },
171
+ react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%",
172
+ ///////////////////////////////////////////////////////////////////////////////
173
+ sx: {
174
+ "&::-webkit-scrollbar": {
175
+ height: "6px", // Consistent size - 6px
176
+ },
177
+ "&::-webkit-scrollbar-track": {
178
+ background: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100],
179
+ borderRadius: "3px",
180
+ margin: "0 4px", // Add gap on sides
181
+ },
182
+ "&::-webkit-scrollbar-thumb": {
183
+ background: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[400],
184
+ borderRadius: "3px",
185
+ border: "1px solid ".concat((_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[100]),
186
+ },
187
+ "&::-webkit-scrollbar-thumb:hover": {
188
+ background: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500],
189
+ },
190
+ // For Firefox
191
+ scrollbarWidth: "thin",
192
+ scrollbarColor: "".concat((_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[400], " ").concat((_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[100]),
193
+ } }, isLoading
194
+ ? Array.from({ length: 5 }).map(function (_, idx) {
195
+ var _a, _b;
196
+ return (react_1.default.createElement(react_2.Box, { key: idx, width: columnWidth, p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
197
+ react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
198
+ react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
199
+ })
200
+ : Object.entries(columns).map(function (_a) {
201
+ var colId = _a[0], column = _a[1];
202
+ return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
203
+ var item = column.items[rubric.source.index];
204
+ return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }),
205
+ react_1.default.createElement(AccountCard_1.default, { key: item.id, account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: function () {
206
+ return toggleExpand(item.id, colId, rubric.source.index);
207
+ } })));
208
+ } }, function (provided, snapshot) {
209
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
210
+ return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
211
+ ? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
212
+ : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
213
+ ? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
214
+ : "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: "hidden", height: "".concat(containerHeight - 60, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
215
+ react_1.default.createElement(react_2.Flex, { width: "95%", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative" },
216
+ react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700] }, column.title),
217
+ hoveredColumn === colId && column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease" })),
218
+ !(hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
219
+ react_1.default.createElement(react_2.Box, { px: 2, pb: 2, flex: "1", overflowY: "auto", width: "100%", mr: 1,
220
+ /////LIST/////////////////////////////
221
+ sx: {
222
+ overflowY: "auto",
223
+ overflowX: "hidden",
224
+ /* === Firefox === */
225
+ scrollbarWidth: "thin",
226
+ scrollbarColor: "var(--chakra-colors-gray-300) transparent",
227
+ /* === Chrome, Edge, Safari === */
228
+ "&::-webkit-scrollbar": {
229
+ width: "6px !important",
230
+ height: "6px !important", // for horizontal scrollbar if any
231
+ },
232
+ "&::-webkit-scrollbar-track": {
233
+ background: "gray.100",
234
+ borderRadius: "3px",
235
+ marginTop: "4px",
236
+ marginBottom: "4px",
237
+ },
238
+ "&::-webkit-scrollbar-thumb": {
239
+ background: "gray.300",
240
+ borderRadius: "3px",
241
+ border: "1px solid",
242
+ borderColor: "gray.100",
243
+ },
244
+ "&::-webkit-scrollbar-thumb:hover": {
245
+ background: "gray.400",
246
+ },
247
+ /* === Prevent scrollbar expansion in Chrome === */
248
+ "&": {
249
+ scrollbarGutter: "stable both-edges",
250
+ },
251
+ } }, virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
252
+ if (el)
253
+ listRefs.current[colId] = el;
254
+ }, height: containerHeight - 150, itemCount: column.items.length, itemSize: function (index) { return getItemSize(index, column.items, colId); }, width: "100%", itemData: {
255
+ items: column.items,
256
+ colId: colId,
257
+ placeholder: provided.placeholder,
258
+ } }, Row)) : (react_1.default.createElement(react_2.Box, null,
259
+ column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
260
+ react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
261
+ react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
262
+ return toggleExpand(account.id, colId, index);
263
+ } }))); }))); }),
264
+ provided.placeholder)))));
265
+ }));
266
+ }))))));
264
267
  };
265
268
  exports.default = KanbanBoard;
package/dist/Components/Notification/Notification.d.ts CHANGED
@@ -1,4 +1,7 @@
1
1
  import React from "react";
2
2
  import { NotificationProps } from "./NotificationProps";
3
- declare const Notification: React.FC<NotificationProps>;
3
+ interface ExtendedNotificationProps extends NotificationProps {
4
+ isLoading?: boolean;
5
+ }
6
+ declare const Notification: ({ notification, onClose, showStatus, onClick, isLoading, }: ExtendedNotificationProps) => React.JSX.Element;
4
7
  export default Notification;
package/dist/Components/Notification/Notification.js CHANGED
@@ -28,7 +28,7 @@ var react_2 = require("@chakra-ui/react");
28
28
  var lucide_react_1 = require("lucide-react");
29
29
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
30
30
  var Notification = function (_a) {
31
- var notification = _a.notification, onClose = _a.onClose, showStatus = _a.showStatus, onClick = _a.onClick;
31
+ var notification = _a.notification, onClose = _a.onClose, showStatus = _a.showStatus, onClick = _a.onClick, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b;
32
32
  var theme = (0, useCustomTheme_1.useCustomTheme)();
33
33
  var bgColor = theme.colors.white;
34
34
  var borderColor = theme.colors.gray[200];
@@ -40,8 +40,7 @@ var Notification = function (_a) {
40
40
  var startDate = notification.startDate
41
41
  ? new Date(notification.startDate)
42
42
  : null;
43
- // 🧮 Calculate time difference
44
- var _b = (0, react_1.useMemo)(function () {
43
+ var _c = (0, react_1.useMemo)(function () {
45
44
  var targetDate = notification.dueDate
46
45
  ? new Date(notification.dueDate)
47
46
  : notification.endDate
@@ -62,7 +61,6 @@ var Notification = function (_a) {
62
61
  var typeLabel = toTitle(notification.type);
63
62
  var label = "";
64
63
  if (diffMs < 0) {
65
- // 🔴 Overdue / Ended
66
64
  var overdueMinutes = Math.abs(diffMinutes);
67
65
  if (overdueMinutes < 60)
68
66
  label = "".concat(typeLabel, " overdue by ").concat(overdueMinutes, " minute").concat(overdueMinutes === 1 ? "" : "s", " ago");
@@ -72,7 +70,6 @@ var Notification = function (_a) {
72
70
  label = "".concat(typeLabel, " overdue by ").concat(Math.floor(overdueMinutes / 1440), " day").concat(Math.floor(overdueMinutes / 1440) === 1 ? "" : "s", " ago");
73
71
  }
74
72
  else {
75
- // 🟢 Upcoming
76
73
  if (diffMinutes < 60)
77
74
  label = "".concat(typeLabel, " due in ").concat(diffMinutes, " minute").concat(diffMinutes === 1 ? "" : "s");
78
75
  else if (diffHours < 24)
@@ -81,27 +78,54 @@ var Notification = function (_a) {
81
78
  label = "".concat(typeLabel, " due in ").concat(Math.ceil(diffDays), " day").concat(Math.ceil(diffDays) === 1 ? "" : "s");
82
79
  }
83
80
  return { timeLabel: label, diffDays: diffDays };
84
- }, [notification.dueDate, notification.endDate, notification.type]), timeLabel = _b.timeLabel, diffDays = _b.diffDays;
85
- // 🟡 Status color indicator
81
+ }, [notification.dueDate, notification.endDate, notification.type]), timeLabel = _c.timeLabel, diffDays = _c.diffDays;
86
82
  var getStatusColor = function () {
87
83
  if (diffDays === null)
88
84
  return theme.colors.gray[400];
89
85
  if (diffDays < 0)
90
- return errorColor; // Overdue
86
+ return errorColor;
91
87
  if (diffDays <= 0.04)
92
- return warningColor; // Less than 1 hour
88
+ return warningColor;
93
89
  if (diffDays <= 1)
94
- return theme.colors.yellow[400]; // Within a day
95
- return successColor; // Future
90
+ return theme.colors.yellow[400];
91
+ return successColor;
96
92
  };
97
93
  var TimeIcon = diffDays !== null && diffDays < 0 ? lucide_react_1.AlertCircle : lucide_react_1.Clock;
98
- // const formattedStart =
99
- // startDate?.toLocaleString("en-US", {
100
- // day: "2-digit",
101
- // month: "short",
102
- // hour: "2-digit",
103
- // minute: "2-digit",
104
- // }) || "";
94
+ var formattedStartDateTime = (0, react_1.useMemo)(function () {
95
+ if (!startDate)
96
+ return "";
97
+ var options = notification.type === "meeting"
98
+ ? {
99
+ day: "2-digit",
100
+ month: "short",
101
+ hour: "2-digit",
102
+ minute: "2-digit",
103
+ }
104
+ : {
105
+ day: "2-digit",
106
+ month: "short",
107
+ year: "numeric",
108
+ };
109
+ return startDate.toLocaleString("en-US", options);
110
+ }, [startDate, notification.type]);
111
+ // 🔄 If loading, show skeleton
112
+ if (isLoading) {
113
+ return (react_1.default.createElement(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm" },
114
+ react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, w: "100%" },
115
+ react_1.default.createElement(react_2.HStack, { spacing: 2 },
116
+ react_1.default.createElement(react_2.SkeletonCircle, { size: "4" }),
117
+ react_1.default.createElement(react_2.Skeleton, { height: "14px", width: "60%" })),
118
+ react_1.default.createElement(react_2.HStack, { align: "center", spacing: 3, w: "100%" },
119
+ react_1.default.createElement(react_2.SkeletonCircle, { size: "8" }),
120
+ react_1.default.createElement(react_2.VStack, { align: "start", spacing: 1, flex: "1" },
121
+ react_1.default.createElement(react_2.Skeleton, { height: "16px", width: "70%" }),
122
+ react_1.default.createElement(react_2.Skeleton, { height: "12px", width: "50%" }))),
123
+ react_1.default.createElement(react_2.Divider, { borderColor: borderColor }),
124
+ react_1.default.createElement(react_2.HStack, { justify: "space-between", w: "100%" },
125
+ react_1.default.createElement(react_2.Skeleton, { height: "12px", width: "40%" }),
126
+ react_1.default.createElement(react_2.Skeleton, { height: "12px", width: "30%" })))));
127
+ }
128
+ // 🧩 Normal render
105
129
  return (react_1.default.createElement(react_2.Box, { bg: bgColor, border: "1px solid", borderColor: borderColor, borderRadius: "xl", p: 4, w: "100%", maxW: "400px", boxShadow: "sm", _hover: { boxShadow: "md", transform: "translateY(-2px)" }, transition: "all 0.2s ease", position: "relative" },
106
130
  onClose && (react_1.default.createElement(react_2.Box, { position: "absolute", top: "2", right: "2", cursor: "pointer", onClick: onClose, onKeyDown: function (e) {
107
131
  if (e.key === "Enter" || e.key === " ") {
@@ -121,17 +145,16 @@ var Notification = function (_a) {
121
145
  react_1.default.createElement(react_2.HStack, { align: "center", spacing: 3, w: "100%" },
122
146
  react_1.default.createElement(react_2.Avatar, { size: "sm", name: notification.host || notification.title, src: notification.avatarUrl || "" }),
123
147
  react_1.default.createElement(react_2.VStack, { align: "start", spacing: 0, flex: "1" },
124
- react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: titleColor, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(); } }, notification.title),
148
+ react_1.default.createElement(react_2.Text, { fontWeight: "bold", fontSize: "md", color: titleColor, onClick: function () { return onClick === null || onClick === void 0 ? void 0 : onClick(notification.id); } }, notification.title),
125
149
  notification.description && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: textColor }, notification.description)))),
126
150
  react_1.default.createElement(react_2.Divider, { borderColor: borderColor }),
127
151
  react_1.default.createElement(react_2.HStack, { justify: "space-between", w: "100%" },
128
152
  react_1.default.createElement(react_2.HStack, { spacing: 2 },
129
153
  react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Calendar, color: theme.colors.gray[400], boxSize: 4 }),
130
- react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, notification.dueDate)),
154
+ react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, formattedStartDateTime)),
131
155
  react_1.default.createElement(react_2.HStack, { spacing: 2 },
132
156
  react_1.default.createElement(react_2.Icon, { as: lucide_react_1.User, color: theme.colors.gray[400], boxSize: 4 }),
133
157
  notification.host && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500] }, notification.host))),
134
- showStatus &&
135
- react_1.default.createElement(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" })))));
158
+ showStatus && (react_1.default.createElement(react_2.Box, { boxSize: "3", bg: getStatusColor(), borderRadius: "full" }))))));
136
159
  };
137
160
  exports.default = Notification;
package/dist/Components/Notification/NotificationProps.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export type NotificationData = {
2
- id: string;
2
+ id: number;
3
3
  title: string;
4
4
  startDate: string;
5
5
  dueDate?: string;
@@ -7,11 +7,12 @@ export type NotificationData = {
7
7
  host?: string;
8
8
  description?: string;
9
9
  status?: string;
10
- type?: string;
10
+ type: "task" | "meeting" | "call";
11
11
  };
12
12
  export type NotificationProps = {
13
13
  notification: NotificationData;
14
14
  onClose?: () => void;
15
15
  showStatus?: boolean;
16
- onClick?: () => void;
16
+ onClick?: (id: number) => void;
17
+ isLoading?: boolean;
17
18
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.34",
3
+ "version": "2.2.35",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",