pixelize-design-library 2.2.143 → 2.2.144

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 (18) hide show
  1. package/dist/Components/KanbanBoard/KanbanBoard.js +14 -10
  2. package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts +8 -1
  3. package/dist/Components/Table/Components/TableFilters.js +4 -2
  4. package/dist/Constants/Sidebar.js +1 -1
  5. package/dist/Theme/Default/palette.js +5 -5
  6. package/dist/Theme/Meadow/palette.d.ts +97 -95
  7. package/dist/Theme/Meadow/palette.js +97 -332
  8. package/dist/Theme/Radiant/palette.d.ts +95 -93
  9. package/dist/Theme/Radiant/palette.js +97 -332
  10. package/dist/Theme/Skyline/palette.d.ts +97 -95
  11. package/dist/Theme/Skyline/palette.js +97 -332
  12. package/dist/Theme/buildBrandTokens.d.ts +15 -0
  13. package/dist/Theme/buildBrandTokens.js +33 -0
  14. package/dist/Theme/buildBrandTokens.test.d.ts +1 -0
  15. package/dist/Theme/buildBrandTokens.test.js +31 -0
  16. package/dist/Theme/themeProps.d.ts +2 -0
  17. package/dist/global.css +31 -17
  18. package/package.json +1 -1
package/dist/Components/KanbanBoard/KanbanBoard.js CHANGED
@@ -180,10 +180,12 @@ var KanbanBoard = function (_a) {
180
180
  return (react_1.default.createElement("div", { style: style },
181
181
  react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
182
182
  react_1.default.createElement("div", { style: { marginBottom: 12 } },
183
- react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
184
- react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
183
+ react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
184
+ var _a;
185
+ return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
185
186
  return toggleExpand(account.id, colId, index);
186
- }, isDeletable: canDelete }))); }))),
187
+ }, isDeletable: canDelete }))));
188
+ }))),
187
189
  index === items.length - 1 && placeholder));
188
190
  };
189
191
  var NoItemsTemplate = function (_a) {
@@ -239,11 +241,11 @@ var KanbanBoard = function (_a) {
239
241
  : Object.entries(columns).map(function (_a) {
240
242
  var colId = _a[0], column = _a[1];
241
243
  return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
244
+ var _a;
242
245
  var item = column.items[rubric.source.index];
243
- return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }),
244
- 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 () {
245
- return toggleExpand(item.id, colId, rubric.source.index);
246
- } })));
246
+ return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }), (item === null || item === void 0 ? void 0 : item.customNode) ? (_a = item === null || item === void 0 ? void 0 : item.customNode) === null || _a === void 0 ? void 0 : _a.call(item) : (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 () {
247
+ return toggleExpand(item.id, colId, rubric.source.index);
248
+ } }))));
247
249
  } }, function (provided, snapshot) {
248
250
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
249
251
  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
@@ -310,10 +312,12 @@ var KanbanBoard = function (_a) {
310
312
  placeholder: provided.placeholder,
311
313
  } }, Row)) : (react_1.default.createElement(react_2.Box, null,
312
314
  column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
313
- react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
314
- react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
315
+ react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
316
+ var _a;
317
+ return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }), (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : (react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
315
318
  return toggleExpand(account.id, colId, index);
316
- }, isDeletable: canDelete }))); }))); }),
319
+ }, isDeletable: canDelete }))));
320
+ }))); }),
317
321
  provided.placeholder)))));
318
322
  }));
319
323
  }),
package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts CHANGED
@@ -1,7 +1,14 @@
1
+ import type { ReactNode } from "react";
1
2
  import { OptionProp } from "../Select/SelectProps";
3
+ /** Index allows extra scalar fields; known string fields are explicit so they do not widen to `() => ReactNode`. */
2
4
  export type Account = {
3
5
  id: string;
4
- [key: string]: string | number | null | undefined;
6
+ customNode?: () => ReactNode;
7
+ details?: string;
8
+ name?: string;
9
+ email?: string;
10
+ rating?: string;
11
+ [key: string]: string | number | null | undefined | (() => ReactNode);
5
12
  };
6
13
  export type ColumnType = {
7
14
  id: string;
package/dist/Components/Table/Components/TableFilters.js CHANGED
@@ -38,9 +38,11 @@ var react_2 = require("@chakra-ui/react");
38
38
  var table_1 = require("../../../Utils/table");
39
39
  var lucide_react_1 = require("lucide-react");
40
40
  var TableFilters = (0, react_1.memo)(function (_a) {
41
+ var _b, _c;
41
42
  var header = _a.header, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, onClose = _a.onClose, isOpen = _a.isOpen, onOpen = _a.onOpen;
43
+ var theme = (0, react_2.useTheme)();
42
44
  var searchRef = (0, react_1.useRef)(null);
43
- var _b = (0, react_1.useState)(false), refreshDataOnOpen = _b[0], setRefreshDataOnOpen = _b[1];
45
+ var _d = (0, react_1.useState)(false), refreshDataOnOpen = _d[0], setRefreshDataOnOpen = _d[1];
44
46
  var debounceRef = (0, table_1.debounce)(function (value) {
45
47
  setColumnsSearch(value);
46
48
  }, 700);
@@ -66,7 +68,7 @@ var TableFilters = (0, react_1.memo)(function (_a) {
66
68
  };
67
69
  return (react_1.default.createElement(react_2.Popover, { isOpen: isOpen, onClose: onClose, onOpen: handleOpen },
68
70
  react_1.default.createElement(react_2.PopoverTrigger, null,
69
- react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17 }), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
71
+ react_1.default.createElement(react_2.IconButton, { "aria-label": "Search", icon: react_1.default.createElement(lucide_react_1.EllipsisVertical, { size: 17, color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.primary) === null || _c === void 0 ? void 0 : _c[900] }), size: "xs", variant: "ghost", _hover: { bg: "none" } })),
70
72
  react_1.default.createElement(react_2.Portal, null,
71
73
  react_1.default.createElement(react_2.PopoverContent, { width: "200px" },
72
74
  react_1.default.createElement(react_2.PopoverBody, { p: 2 },
package/dist/Constants/Sidebar.js CHANGED
@@ -14,7 +14,7 @@ exports.FlexCss = {
14
14
  transition: "background 0.5s",
15
15
  },
16
16
  "&:hover::-webkit-scrollbar-thumb": {
17
- background: "#9A4FE5",
17
+ background: "var(--chakra-colors-primary-500, #718096)",
18
18
  },
19
19
  };
20
20
  var cssForScrollBar = function (theme) { return ({
package/dist/Theme/Default/palette.js CHANGED
@@ -10,7 +10,7 @@ var palette = {
10
10
  500: "#9A4FE5", // primary shade
11
11
  600: "#8c48d0",
12
12
  700: "#6d38a3",
13
- 800: "#552v7e",
13
+ 800: "#55277e",
14
14
  900: "#412160",
15
15
  opacity: {
16
16
  4: "#9A4FE50a",
@@ -98,7 +98,7 @@ var palette = {
98
98
  200: "#ffccb7",
99
99
  300: "#ffb596",
100
100
  400: "#ffa781",
101
- 500: "#Ff9162", // Main warning color
101
+ 500: "#ff9162", // Main warning color
102
102
  600: "#e88459",
103
103
  700: "#b56746",
104
104
  800: "#8c5036",
@@ -110,7 +110,7 @@ var palette = {
110
110
  200: "#b5e4f0",
111
111
  300: "#94d7e9",
112
112
  400: "#7fd0e5",
113
- 500: "#5FC4de", // Main info color
113
+ 500: "#5fc4de", // Main info color
114
114
  600: "#56b2ea",
115
115
  700: "#438b9e",
116
116
  800: "#346c78",
@@ -147,7 +147,7 @@ var palette = {
147
147
  200: "#ffccb7",
148
148
  300: "#ffb596",
149
149
  400: "#ffa781",
150
- 500: "#Ff9162", // Main warning color
150
+ 500: "#ff9162", // Main warning color
151
151
  600: "#e88459",
152
152
  700: "#b56746",
153
153
  800: "#8c5036",
@@ -183,7 +183,7 @@ var palette = {
183
183
  200: "#b5e4f0",
184
184
  300: "#94d7e9",
185
185
  400: "#7fd0e5",
186
- 500: "#5FC4de", // Main info color
186
+ 500: "#5fc4de", // Main info color
187
187
  600: "#56b2ea",
188
188
  700: "#438b9e",
189
189
  800: "#346c78",
package/dist/Theme/Meadow/palette.d.ts CHANGED
@@ -20,7 +20,7 @@ declare const palette: {
20
20
  48: string;
21
21
  };
22
22
  };
23
- secondary: {
23
+ tertiary: {
24
24
  50: string;
25
25
  100: string;
26
26
  200: string;
@@ -41,7 +41,102 @@ declare const palette: {
41
41
  48: string;
42
42
  };
43
43
  };
44
- tertiary: {
44
+ gray: {
45
+ 50: string;
46
+ 100: string;
47
+ 200: string;
48
+ 300: string;
49
+ 400: string;
50
+ 500: string;
51
+ 600: string;
52
+ 700: string;
53
+ 800: string;
54
+ 900: string;
55
+ };
56
+ backgroundColor: {
57
+ main: string;
58
+ secondary: string;
59
+ tertiary: string;
60
+ quaternary: string;
61
+ light: string;
62
+ medium: string;
63
+ accent: string;
64
+ subtle: string;
65
+ muted: string;
66
+ neutral: string;
67
+ base: string;
68
+ tableHeader: string;
69
+ };
70
+ background: {
71
+ 50: string;
72
+ 100: string;
73
+ 200: string;
74
+ 300: string;
75
+ 400: string;
76
+ 500: string;
77
+ 600: string;
78
+ 700: string;
79
+ 800: string;
80
+ 900: string;
81
+ };
82
+ border: {
83
+ 50: string;
84
+ 100: string;
85
+ 200: string;
86
+ 300: string;
87
+ 400: string;
88
+ 500: string;
89
+ 600: string;
90
+ 700: string;
91
+ 800: string;
92
+ 900: string;
93
+ };
94
+ boxborder: {
95
+ 50: string;
96
+ 100: string;
97
+ 200: string;
98
+ 300: string;
99
+ 400: string;
100
+ 500: string;
101
+ 600: string;
102
+ 700: string;
103
+ 800: string;
104
+ 900: string;
105
+ };
106
+ table: {
107
+ hover: {
108
+ 50: string;
109
+ 100: string;
110
+ 200: string;
111
+ 300: string;
112
+ 400: string;
113
+ 500: string;
114
+ 600: string;
115
+ 700: string;
116
+ 800: string;
117
+ 900: string;
118
+ };
119
+ };
120
+ sidebar: {
121
+ background: {
122
+ 50: string;
123
+ 100: string;
124
+ 200: string;
125
+ 300: string;
126
+ 400: string;
127
+ 500: string;
128
+ 600: string;
129
+ 700: string;
130
+ 800: string;
131
+ 900: string;
132
+ };
133
+ };
134
+ boxShadow: {
135
+ primary: string;
136
+ error: string;
137
+ default: string;
138
+ };
139
+ secondary: {
45
140
  50: string;
46
141
  100: string;
47
142
  200: string;
@@ -115,18 +210,6 @@ declare const palette: {
115
210
  900: string;
116
211
  };
117
212
  };
118
- gray: {
119
- 50: string;
120
- 100: string;
121
- 200: string;
122
- 300: string;
123
- 400: string;
124
- 500: string;
125
- 600: string;
126
- 700: string;
127
- 800: string;
128
- 900: string;
129
- };
130
213
  red: {
131
214
  50: string;
132
215
  100: string;
@@ -235,30 +318,6 @@ declare const palette: {
235
318
  800: string;
236
319
  900: string;
237
320
  };
238
- background: {
239
- 50: string;
240
- 100: string;
241
- 200: string;
242
- 300: string;
243
- 400: string;
244
- 500: string;
245
- 600: string;
246
- 700: string;
247
- 800: string;
248
- 900: string;
249
- };
250
- backgroundColor: {
251
- main: string;
252
- secondary: string;
253
- tertiary: string;
254
- quaternary: string;
255
- light: string;
256
- medium: string;
257
- accent: string;
258
- subtle: string;
259
- muted: string;
260
- neutral: string;
261
- };
262
321
  text: {
263
322
  50: string;
264
323
  100: string;
@@ -295,63 +354,6 @@ declare const palette: {
295
354
  800: string;
296
355
  900: string;
297
356
  };
298
- boxShadow: {
299
- primary: string;
300
- error: string;
301
- default: string;
302
- };
303
- sidebar: {
304
- background: {
305
- 50: string;
306
- 100: string;
307
- 200: string;
308
- 300: string;
309
- 400: string;
310
- 500: string;
311
- 600: string;
312
- 700: string;
313
- 800: string;
314
- 900: string;
315
- };
316
- };
317
- boxborder: {
318
- 50: string;
319
- 100: string;
320
- 200: string;
321
- 300: string;
322
- 400: string;
323
- 500: string;
324
- 600: string;
325
- 700: string;
326
- 800: string;
327
- 900: string;
328
- };
329
- border: {
330
- 50: string;
331
- 100: string;
332
- 200: string;
333
- 300: string;
334
- 400: string;
335
- 500: string;
336
- 600: string;
337
- 700: string;
338
- 800: string;
339
- 900: string;
340
- };
341
- table: {
342
- hover: {
343
- 50: string;
344
- 100: string;
345
- 200: string;
346
- 300: string;
347
- 400: string;
348
- 500: string;
349
- 600: string;
350
- 700: string;
351
- 800: string;
352
- 900: string;
353
- };
354
- };
355
357
  disabled: {
356
358
  50: string;
357
359
  100: string;