pixelize-design-library 2.2.152 → 2.2.154

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -152,18 +152,31 @@ var KanbanBoard = function (_a) {
             var copiedItems = __spreadArray([], sourceCol.items, true);
             copiedItems.splice(source.index, 1);
             copiedItems.splice(destination.index, 0, draggedItem);
-            setColumns(__assign(__assign({}, columns), (_a = {}, _a[source.droppableId] = __assign(__assign({}, sourceCol), { items: copiedItems }), _a)));
+            var nextColumns = __assign(__assign({}, columns), (_a = {}, _a[source.droppableId] = __assign(__assign({}, sourceCol), { items: copiedItems }), _a));
+            setColumns(nextColumns);
+            onDrag === null || onDrag === void 0 ? void 0 : onDrag({
+                from: source.droppableId,
+                to: destination.droppableId,
+                item: draggedItem,
+                columns: nextColumns,
+                fromIndex: source.index,
+                toIndex: destination.index,
+            });
         }
         else {
             var sourceItems = __spreadArray([], sourceCol.items, true);
             var destItems = __spreadArray([], destCol.items, true);
             sourceItems.splice(source.index, 1);
             destItems.splice(destination.index, 0, draggedItem);
-            setColumns(__assign(__assign({}, columns), (_b = {}, _b[source.droppableId] = __assign(__assign({}, sourceCol), { items: sourceItems }), _b[destination.droppableId] = __assign(__assign({}, destCol), { items: destItems }), _b)));
+            var nextColumns = __assign(__assign({}, columns), (_b = {}, _b[source.droppableId] = __assign(__assign({}, sourceCol), { items: sourceItems }), _b[destination.droppableId] = __assign(__assign({}, destCol), { items: destItems }), _b));
+            setColumns(nextColumns);
             onDrag === null || onDrag === void 0 ? void 0 : onDrag({
                 from: source.droppableId,
                 to: destination.droppableId,
                 item: draggedItem,
+                columns: nextColumns,
+                fromIndex: source.index,
+                toIndex: destination.index,
             });
         }
     };
@@ -175,8 +188,11 @@ var KanbanBoard = function (_a) {
     // row renderer
     var Row = function (_a) {
         var index = _a.index, style = _a.style, data = _a.data;
-        var items = data.items, colId = data.colId, placeholder = data.placeholder;
+        var items = data.items, colId = data.colId;
         var account = items[index];
+        if (!account) {
+            return react_1.default.createElement("div", { style: style });
+        }
         return (react_1.default.createElement("div", { style: style },
             react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
                 react_1.default.createElement("div", { style: { marginBottom: 12 } },
@@ -185,8 +201,7 @@ var KanbanBoard = function (_a) {
                         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 () {
                                 return toggleExpand(account.id, colId, index);
                             }, isDeletable: canDelete }))));
-                    }))),
-            index === items.length - 1 && placeholder));
+                    })))));
     };
     var NoItemsTemplate = function (_a) {
         var _b;
@@ -304,12 +319,12 @@ var KanbanBoard = function (_a) {
                                         virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
                                                 if (el)
                                                     listRefs.current[colId] = el;
-                                            }, height: containerHeight - 150, itemCount: column.items.length, itemSize: function (index) {
+                                            }, height: containerHeight - 150, itemCount: column.items.length +
+                                                (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: function (index) {
                                                 return getItemSize(index, column.items, colId);
                                             }, width: "100%", itemData: {
                                                 items: column.items,
                                                 colId: colId,
-                                                placeholder: provided.placeholder,
                                             } }, Row)) : (react_1.default.createElement(react_2.Box, null,
                                             column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
                                                 react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -27,10 +27,13 @@ export type KanbanBoardProps = {
     onDelete?: (account: Account) => void;
     onOpen?: (account: Account) => void;
     onColumnDelete?: (colId: (string | number)[]) => void;
-    onDrag?: ({ from, to, item, }: {
+    onDrag?: ({ from, to, item, columns, fromIndex, toIndex, }: {
         from: string;
         to: string;
         item: Account;
+        columns: Record<string, ColumnType>;
+        fromIndex: number;
+        toIndex: number;
     }) => void;
     isLoading?: boolean;
     kanbanSelect?: {

package/dist/Theme/Emerald/palette.d.ts

@@ -0,0 +1,370 @@
+declare const palette: {
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    backgroundColor: {
+        main: string;
+        secondary: string;
+        tertiary: string;
+        quaternary: string;
+        light: string;
+        medium: string;
+        accent: string;
+        subtle: string;
+        muted: string;
+        neutral: string;
+        base: string;
+        tableHeader: string;
+    };
+    background: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    border: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    boxborder: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    table: {
+        hover: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    sidebar: {
+        background: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    boxShadow: {
+        primary: string;
+        error: string;
+        default: string;
+    };
+    secondary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    tertiary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        opacity: {
+            4: string;
+            8: string;
+            16: string;
+            24: string;
+            32: string;
+            40: string;
+            48: string;
+        };
+    };
+    transparent: string;
+    black: string;
+    white: string;
+    semantic: {
+        success: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        error: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        warning: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+        info: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+        };
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    orange: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    yellow: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    teal: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    blue: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    cyan: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    purple: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    pink: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    text: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    header: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    placeholder: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    disabled: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+};
+export default palette;

package/dist/Theme/Emerald/palette.js

@@ -0,0 +1,127 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var palette_1 = __importDefault(require("../Default/palette"));
+var buildBrandTokens_1 = require("../buildBrandTokens");
+var PRIMARY_500 = "#0f9d8a"; // teal-emerald core (balanced, not too green/blue)
+var primary = {
+    50: "#e6f7f5",
+    100: "#c2ebe6",
+    200: "#8eddd4",
+    300: "#5acfc2",
+    400: "#2fb7a9",
+    500: PRIMARY_500,
+    600: "#0c8575",
+    700: "#096b5e",
+    800: "#065248",
+    900: "#043b35",
+    opacity: (0, buildBrandTokens_1.buildPrimaryOpacity)(PRIMARY_500),
+};
+var palette = __assign(__assign({}, palette_1.default), { primary: primary, 
+    // 🌫️ Neutral gray (slightly cool to match teal)
+    gray: {
+        50: "#f6f8f8",
+        100: "#edf2f2",
+        200: "#dce5e5",
+        300: "#c3d2d2",
+        400: "#9fb3b3",
+        500: "#7c9191",
+        600: "#5e7070",
+        700: "#475555",
+        800: "#2f3a3a",
+        900: "#1f2626",
+    }, 
+    // 🌊 Background system (very subtle teal tint)
+    backgroundColor: {
+        main: "#f7fbfb",
+        secondary: "#eef7f6",
+        tertiary: "#e5f1ef",
+        quaternary: "#dcebea",
+        light: "#fcfefe",
+        medium: "#e2efee",
+        accent: "#d5e7e5",
+        subtle: "#f4f9f9",
+        muted: "#cfe2e0",
+        neutral: "#e2efee",
+        base: "#fafdfd",
+        tableHeader: "#eef7f6",
+    }, background: {
+        50: "#ffffff",
+        100: "#fbfefe",
+        200: "#eef7f6",
+        300: "#e5f1ef",
+        400: "#dcebea",
+        500: "#d2e4e2",
+        600: "#bdd1cf",
+        700: "#96a9a7",
+        800: "#707f7e",
+        900: "#545f5f",
+    }, border: {
+        50: "#fafeff",
+        100: "#edf5f4",
+        200: "#ddebea",
+        300: "#cde1df",
+        400: "#bdd6d4",
+        500: "#accbc9",
+        600: "#99b7b5",
+        700: "#788f8e",
+        800: "#5b6e6d",
+        900: "#455454",
+    }, boxborder: {
+        50: "#fafeff",
+        100: "#ecf4f3",
+        200: "#d9e7e5",
+        300: "#c6dad8",
+        400: "#b3cdcb",
+        500: "#a0c0be",
+        600: "#8dadab",
+        700: "#6e8786",
+        800: "#546868",
+        900: "#3f5050",
+    }, table: {
+        hover: {
+            50: "#fbfefe",
+            100: "#f0f7f7",
+            200: "#e6f1f1",
+            300: "#dceaea",
+            400: "#d2e3e3",
+            500: "#c8dcdc",
+            600: "#b4c7c7",
+            700: "#909f9f",
+            800: "#6c7777",
+            900: "#525b5b",
+        },
+    }, 
+    // 🌑 Sidebar (deep teal-black)
+    sidebar: {
+        background: {
+            50: "#eaf4f3",
+            100: "#cfe3e1",
+            200: "#3e6f6a",
+            300: "#5a8c86",
+            400: "#2f5a55",
+            500: "#0e1f1e", // charcoal teal (instead of near-black)
+            600: "#0b1918",
+            700: "#081312",
+            800: "#060e0d",
+            900: "#040908",
+        },
+    }, boxShadow: {
+        primary: (0, buildBrandTokens_1.buildPrimaryShadowTint)(PRIMARY_500),
+        error: palette_1.default.boxShadow.error,
+        default: palette_1.default.boxShadow.default,
+    } });
+exports.default = palette;

package/dist/Theme/Emerald/theme.d.ts

@@ -0,0 +1,2 @@
+declare const _default: Record<string, any>;
+export default _default;

package/dist/Theme/Emerald/theme.js

@@ -0,0 +1,23 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("@chakra-ui/react");
+var palette_1 = __importDefault(require("./palette"));
+var fonts_1 = __importDefault(require("../fonts"));
+var common_1 = __importDefault(require("../common"));
+var componentStyles_1 = require("../componentStyles");
+var emerald = __assign(__assign(__assign({}, fonts_1.default), { colors: palette_1.default }), common_1.default);
+exports.default = (0, react_1.extendTheme)(__assign(__assign({}, emerald), { components: componentStyles_1.componentStyles }));