pixelize-design-library 2.3.16 → 2.3.19

package/dist/Components/SideBar/components/OtherApps.test.js

@@ -0,0 +1,111 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var OtherApps_1 = __importDefault(require("./OtherApps"));
+jest.mock("../../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            white: "#fff",
+            gray: { 400: "#a0aec0" },
+            primary: { 500: "#3182ce", 700: "#2c5282" },
+            sidebar: {
+                background: {
+                    200: "#2d3748",
+                    500: "#1a202c",
+                },
+            },
+        },
+    }); },
+}); });
+var sampleApps = [
+    {
+        name: "Billing",
+        color: "#3182ce",
+        description: "Billing app",
+        onClick: jest.fn(),
+    },
+    {
+        name: "Tickets",
+        color: "#38a169",
+        onClick: jest.fn(),
+    },
+];
+var renderWithChakra = function (ui) { return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui)); };
+describe("OtherApps", function () {
+    beforeEach(function () {
+        jest.clearAllMocks();
+    });
+    it("does not render flyout copy when expanded", function () {
+        renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: false, otherApps: sampleApps }));
+        expect(react_2.screen.getByText("Other Apps")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Billing")).toBeInTheDocument();
+        expect(react_2.screen.queryAllByRole("tooltip")).toHaveLength(0);
+    });
+    it("shows flyout with Open label on hover when collapsed", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var buttons, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: true, otherApps: sampleApps }));
+                    buttons = react_2.screen.getAllByRole("button");
+                    expect(buttons).toHaveLength(2);
+                    return [4 /*yield*/, user_event_1.default.hover(buttons[0])];
+                case 1:
+                    _b.sent();
+                    _a = expect;
+                    return [4 /*yield*/, react_2.screen.findByText("Billing app")];
+                case 2:
+                    _a.apply(void 0, [_b.sent()]).toBeInTheDocument();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it("renders no app rows when otherApps is empty", function () {
+        renderWithChakra(react_1.default.createElement(OtherApps_1.default, { toggle: true, otherApps: [] }));
+        expect(react_2.screen.queryByRole("button")).not.toBeInTheDocument();
+        expect(react_2.screen.queryByText("Billing")).not.toBeInTheDocument();
+    });
+});

package/dist/Components/Table/components/TableBody.virtualize.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/Components/Table/components/TableBody.virtualize.test.js

@@ -0,0 +1,93 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var TableBody_1 = __importDefault(require("./TableBody"));
+jest.mock("../../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            background: { 50: "#fff", 100: "#f9f9f9" },
+            backgroundColor: { light: "#fafafa", secondary: "#eee", muted: "#f3f3f3" },
+            disabled: { 100: "#eee" },
+            gray: { 100: "#f0f0f0", 200: "#eee", 300: "#ddd", 400: "#ccc", 500: "#bbb", 600: "#666" },
+            border: { 500: "#ddd" },
+            primary: { 500: "#3182ce" },
+            text: { 500: "#555" },
+            secondary: { opacity: { 4: "rgba(0,0,0,0.04)" } },
+            white: "#fff",
+        },
+        shadows: { lg: "0 0 0" },
+    }); },
+}); });
+var columns = [{ id: "name", label: "Name" }];
+var makeData = function (n) {
+    return Array.from({ length: n }, function (_, i) { return ({ id: i, name: "Row ".concat(i) }); });
+};
+var Harness = function (_a) {
+    var count = _a.count;
+    var ref = (0, react_1.useRef)(null);
+    return (react_1.default.createElement(react_3.ChakraProvider, null,
+        react_1.default.createElement("div", { ref: ref },
+            react_1.default.createElement(react_3.Table, null,
+                react_1.default.createElement(react_3.Tbody, null,
+                    react_1.default.createElement(TableBody_1.default, { data: makeData(count), columns: columns, startRow: 0, endRow: count, columnWidths: [120], isCheckbox: false, isContent: false, isLink: false, isActionFreeze: false, noBorders: false, selections: [], handleCheckbox: function () { }, scrollContainerRef: ref }))))));
+};
+describe("TableBody virtualization", function () {
+    it("windows large pages and reserves height with spacer rows", function () {
+        var _a = (0, react_2.render)(react_1.default.createElement(Harness, { count: 100 })), container = _a.container, queryByText = _a.queryByText;
+        // jsdom clientHeight=0 -> 500px fallback -> ceil(500/45)+12 = 24 rows
+        expect(queryByText("Row 0")).toBeInTheDocument();
+        expect(queryByText("Row 23")).toBeInTheDocument();
+        // Rows beyond the window are not mounted.
+        expect(queryByText("Row 50")).not.toBeInTheDocument();
+        expect(queryByText("Row 99")).not.toBeInTheDocument();
+        // A trailing spacer reserves the height of the unrendered rows.
+        var spacers = container.querySelectorAll('tr[aria-hidden="true"]');
+        expect(spacers.length).toBe(1);
+        expect(spacers[0]).toHaveStyle({ height: "".concat((100 - 24) * 45, "px") });
+    });
+    it("renders every row and no spacers below the threshold", function () {
+        var _a = (0, react_2.render)(react_1.default.createElement(Harness, { count: 30 })), container = _a.container, queryByText = _a.queryByText;
+        expect(queryByText("Row 0")).toBeInTheDocument();
+        expect(queryByText("Row 29")).toBeInTheDocument();
+        expect(container.querySelectorAll('tr[aria-hidden="true"]').length).toBe(0);
+    });
+});

package/dist/Components/Table/settings/ManageColumns.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

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

@@ -0,0 +1,146 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var ManageColumns_1 = __importDefault(require("./ManageColumns"));
+jest.mock("../../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            gray: {
+                50: "#fafafa",
+                100: "#f5f5f5",
+                200: "#eee",
+                400: "#ccc",
+                500: "#999",
+                600: "#666",
+            },
+            primary: {
+                50: "#eef",
+                100: "#ddf",
+                300: "#99c",
+                400: "#66a",
+                500: "#338",
+            },
+            red: { 50: "#fee", 200: "#fcc", 600: "#c00" },
+            border: { 200: "#e2e8f0" },
+            white: "#fff",
+        },
+        shadows: { sm: "0 1px 2px rgba(0,0,0,0.05)" },
+    }); },
+}); });
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+function ManageColumnsHarness(_a) {
+    var columns = _a.columns, childRef = _a.childRef;
+    var _b = (0, react_1.useState)(columns), items = _b[0], setItems = _b[1];
+    return (react_1.default.createElement(ManageColumns_1.default, { columns: columns, items: items, setItems: setItems, childInputMethodsRef: childRef }));
+}
+describe("ManageColumns", function () {
+    it("syncs local column state when the columns prop changes", function () { return __awaiter(void 0, void 0, void 0, function () {
+        var childRef, columnsA, columnsB, rerender;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    childRef = (0, react_1.createRef)();
+                    columnsA = [
+                        { id: "a", label: "Alpha", isHidden: false },
+                        { id: "b", label: "Beta", isHidden: true },
+                    ];
+                    columnsB = [
+                        { id: "a", label: "Alpha", isHidden: true },
+                        { id: "b", label: "Beta", isHidden: false },
+                    ];
+                    rerender = renderWithChakra(react_1.default.createElement(ManageColumnsHarness, { columns: columnsA, childRef: childRef })).rerender;
+                    expect(react_2.screen.getByRole("checkbox", { name: "Alpha" })).toBeChecked();
+                    expect(react_2.screen.getByRole("checkbox", { name: "Beta" })).not.toBeChecked();
+                    expect((_a = childRef.current) === null || _a === void 0 ? void 0 : _a.getManageColumnsData()).toEqual(columnsA);
+                    rerender(react_1.default.createElement(react_3.ChakraProvider, null,
+                        react_1.default.createElement(ManageColumnsHarness, { columns: columnsB, childRef: childRef })));
+                    return [4 /*yield*/, (0, react_2.waitFor)(function () {
+                            expect(react_2.screen.getByRole("checkbox", { name: "Alpha" })).not.toBeChecked();
+                            expect(react_2.screen.getByRole("checkbox", { name: "Beta" })).toBeChecked();
+                        })];
+                case 1:
+                    _c.sent();
+                    expect((_b = childRef.current) === null || _b === void 0 ? void 0 : _b.getManageColumnsData()).toEqual(columnsB);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

package/dist/Hooks/useSidebarPrefs.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Persisted sidebar preferences (localStorage-backed, opt-in).
+ *
+ * Persists the user's explicit layout choices so they survive reloads and browser
+ * restarts (restoring the sidebar to exactly the same state):
+ *  - `mobileNav`   — "navbar mode" forced on a large screen via the Hide/Show toggle
+ *  - `collapsed`   — the mini-rail (collapse) state
+ *  - `mobileOpen`  — whether the overlay drawer is currently open
+ *
+ * It deliberately does NOT persist viewport-driven state (the `lg` breakpoint /
+ * `belowLg`) — that must always reflect the live screen size, not a saved value.
+ *
+ * SSR-safe: reads/writes are guarded with `typeof window` so it no-ops during
+ * server render and hydrates from storage on the client.
+ *
+ * Adoption — wire the returned values straight onto the library's `SideBar` +
+ * `NavigationBar`; the composed handlers (`onToggleMobileNav`, `closeMobile`) mean
+ * a consuming app does not re-implement the "entering navbar mode opens the drawer"
+ * behavior itself:
+ *
+ * @example
+ * const sb = useSidebarPrefs();
+ * <SideBar
+ *   toggle={sb.collapsed}
+ *   changeToggle={sb.toggleCollapsed}
+ *   mobileNav={sb.mobileNav}
+ *   onToggleMobileNav={sb.onToggleMobileNav}
+ *   mobileOpen={sb.mobileOpen}
+ *   onMobileClose={sb.closeMobile}
+ *   // ...your menus, user, etc.
+ * />
+ * <NavBar
+ *   sideBarToggole={sb.mobileOpen}
+ *   onSideBarToggole={sb.toggleMobileOpen}
+ *   forceSideBarToggle={sb.mobileNav}
+ *   // ...your nav props
+ * />
+ */
+export type SidebarPrefs = {
+    mobileNav: boolean;
+    collapsed: boolean;
+    mobileOpen: boolean;
+};
+export type UseSidebarPrefsOptions = {
+    /** localStorage key. Versioned so a future shape change can bump it. */
+    storageKey?: string;
+    /** Defaults used on first visit / when nothing is stored. */
+    defaults?: Partial<SidebarPrefs>;
+};
+export type UseSidebarPrefsResult = SidebarPrefs & {
+    setMobileNav: (next: boolean) => void;
+    setCollapsed: (next: boolean) => void;
+    setMobileOpen: (next: boolean) => void;
+    toggleMobileNav: () => void;
+    toggleCollapsed: () => void;
+    toggleMobileOpen: () => void;
+    /**
+     * Ready handler for SideBar's `onToggleMobileNav`. Flips navbar mode AND syncs
+     * the drawer (entering → open, leaving → docked) so apps get this right for free.
+     */
+    onToggleMobileNav: () => void;
+    /** Ready handler for SideBar's `onMobileClose` — closes the overlay drawer. */
+    closeMobile: () => void;
+};
+export declare const useSidebarPrefs: (options?: UseSidebarPrefsOptions) => UseSidebarPrefsResult;
+export default useSidebarPrefs;
+//# sourceMappingURL=useSidebarPrefs.d.ts.map

package/dist/Hooks/useSidebarPrefs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidebarPrefs.d.ts","sourceRoot":"","sources":["../../src/Hooks/useSidebarPrefs.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG;IACjD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B;;;OAGG;IACH,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,+EAA+E;IAC/E,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAwBF,eAAO,MAAM,eAAe,GAC1B,UAAS,sBAA2B,KACnC,qBA0EF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/Hooks/useSidebarPrefs.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSidebarPrefs = void 0;
+const react_1 = require("react");
+const DEFAULT_KEY = "pixelize:sidebar-prefs:v1";
+const readPrefs = (key, defaults) => {
+    if (typeof window === "undefined" || !window.localStorage)
+        return defaults;
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return defaults;
+        const parsed = JSON.parse(raw);
+        return {
+            mobileNav: typeof parsed.mobileNav === "boolean" ? parsed.mobileNav : defaults.mobileNav,
+            collapsed: typeof parsed.collapsed === "boolean" ? parsed.collapsed : defaults.collapsed,
+            mobileOpen: typeof parsed.mobileOpen === "boolean" ? parsed.mobileOpen : defaults.mobileOpen,
+        };
+    }
+    catch {
+        // Corrupt / unreadable value — fall back to defaults rather than throwing.
+        return defaults;
+    }
+};
+const useSidebarPrefs = (options = {}) => {
+    var _a, _b, _c;
+    const { storageKey = DEFAULT_KEY, defaults } = options;
+    const resolvedDefaults = {
+        mobileNav: (_a = defaults === null || defaults === void 0 ? void 0 : defaults.mobileNav) !== null && _a !== void 0 ? _a : false,
+        collapsed: (_b = defaults === null || defaults === void 0 ? void 0 : defaults.collapsed) !== null && _b !== void 0 ? _b : false,
+        mobileOpen: (_c = defaults === null || defaults === void 0 ? void 0 : defaults.mobileOpen) !== null && _c !== void 0 ? _c : false,
+    };
+    // Lazy initializer so the synchronous read happens once, on the client.
+    const [prefs, setPrefs] = (0, react_1.useState)(() => readPrefs(storageKey, resolvedDefaults));
+    (0, react_1.useEffect)(() => {
+        if (typeof window === "undefined" || !window.localStorage)
+            return;
+        try {
+            window.localStorage.setItem(storageKey, JSON.stringify(prefs));
+        }
+        catch {
+            // Storage full / disabled (private mode) — preference simply won't persist.
+        }
+    }, [storageKey, prefs]);
+    const setMobileNav = (0, react_1.useCallback)((next) => setPrefs((p) => ({ ...p, mobileNav: next })), []);
+    const setCollapsed = (0, react_1.useCallback)((next) => setPrefs((p) => ({ ...p, collapsed: next })), []);
+    const setMobileOpen = (0, react_1.useCallback)((next) => setPrefs((p) => ({ ...p, mobileOpen: next })), []);
+    const toggleMobileNav = (0, react_1.useCallback)(() => setPrefs((p) => ({ ...p, mobileNav: !p.mobileNav })), []);
+    const toggleCollapsed = (0, react_1.useCallback)(() => setPrefs((p) => ({ ...p, collapsed: !p.collapsed })), []);
+    const toggleMobileOpen = (0, react_1.useCallback)(() => setPrefs((p) => ({ ...p, mobileOpen: !p.mobileOpen })), []);
+    // Composed handlers — map directly onto SideBar props so apps don't re-implement
+    // the navbar-mode/drawer behavior (the part that's easy to get wrong per app).
+    const onToggleMobileNav = (0, react_1.useCallback)(() => setPrefs((p) => {
+        const next = !p.mobileNav;
+        // Entering navbar mode opens the drawer; leaving docks it.
+        return { ...p, mobileNav: next, mobileOpen: next };
+    }), []);
+    const closeMobile = (0, react_1.useCallback)(() => setPrefs((p) => ({ ...p, mobileOpen: false })), []);
+    return {
+        ...prefs,
+        setMobileNav,
+        setCollapsed,
+        setMobileOpen,
+        toggleMobileNav,
+        toggleCollapsed,
+        toggleMobileOpen,
+        onToggleMobileNav,
+        closeMobile,
+    };
+};
+exports.useSidebarPrefs = useSidebarPrefs;
+exports.default = exports.useSidebarPrefs;

package/dist/Theme/buildBrandTokens.test.d.ts

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

package/dist/Theme/buildBrandTokens.test.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var buildBrandTokens_1 = require("./buildBrandTokens");
+describe("normalizeHex", function () {
+    it("adds hash and lowercases", function () {
+        expect((0, buildBrandTokens_1.normalizeHex)("9A4FE5")).toBe("#9a4fe5");
+        expect((0, buildBrandTokens_1.normalizeHex)("#2CAA3D")).toBe("#2caa3d");
+    });
+    it("rejects invalid hex", function () {
+        expect(function () { return (0, buildBrandTokens_1.normalizeHex)("gggggg"); }).toThrow(/Invalid hex/);
+        expect(function () { return (0, buildBrandTokens_1.normalizeHex)("#fff"); }).toThrow(/Invalid hex/);
+    });
+});
+describe("buildPrimaryOpacity", function () {
+    it("appends alpha steps to brand hex", function () {
+        expect((0, buildBrandTokens_1.buildPrimaryOpacity)("#2caa3d")).toEqual({
+            4: "#2caa3d0a",
+            8: "#2caa3d14",
+            16: "#2caa3d29",
+            24: "#2caa3d3d",
+            32: "#2caa3d52",
+            40: "#2caa3d66",
+            48: "#2caa3d7a",
+        });
+    });
+});
+describe("buildPrimaryShadowTint", function () {
+    it("returns 8-digit hex with shadow alpha", function () {
+        expect((0, buildBrandTokens_1.buildPrimaryShadowTint)("#0088cc")).toBe("#0088cc47");
+    });
+});

package/dist/Theme/chartColorsFromTheme.test.d.ts

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

package/dist/Theme/chartColorsFromTheme.test.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var chartColorsFromTheme_1 = require("./chartColorsFromTheme");
+var mockColors = {
+    primary: { 500: "#111111" },
+    semantic: {
+        error: { 500: "#222222" },
+        success: { 500: "#333333" },
+    },
+    orange: { 500: "#444444" },
+    gray: { 700: "#555555" },
+    white: "#ffffff",
+};
+describe("chartColorsFromTheme", function () {
+    it("getDefaultSeriesColors returns four theme hues", function () {
+        expect((0, chartColorsFromTheme_1.getDefaultSeriesColors)(mockColors)).toEqual([
+            "#111111",
+            "#222222",
+            "#333333",
+            "#444444",
+        ]);
+    });
+    it("mergeChartTitleStyle applies primary then overrides", function () {
+        expect((0, chartColorsFromTheme_1.mergeChartTitleStyle)(mockColors, { fontSize: "20px" })).toMatchObject({
+            color: "#111111",
+            fontSize: "20px",
+            fontWeight: 600,
+            fontFamily: "Arial",
+        });
+        expect((0, chartColorsFromTheme_1.mergeChartTitleStyle)(mockColors, { color: "#999999" }).color).toBe("#999999");
+    });
+    it("chartAxisLabelColor reads gray scale", function () {
+        expect((0, chartColorsFromTheme_1.chartAxisLabelColor)(mockColors)).toBe("#555555");
+    });
+});

package/dist/Utils/tableNormalizeCellValue.test.d.ts

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

package/dist/Utils/tableNormalizeCellValue.test.js

@@ -0,0 +1,41 @@
+"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 table_1 = require("./table");
+describe("normalizeTableCellValue", function () {
+    it("returns primitives as-is (string/number/boolean)", function () {
+        expect((0, table_1.normalizeTableCellValue)("x")).toBe("x");
+        expect((0, table_1.normalizeTableCellValue)(42)).toBe(42);
+        expect((0, table_1.normalizeTableCellValue)(false)).toBe(false);
+    });
+    it("returns empty string for null and undefined", function () {
+        expect((0, table_1.normalizeTableCellValue)(null)).toBe("");
+        expect((0, table_1.normalizeTableCellValue)(undefined)).toBe("");
+    });
+    it("returns React elements unchanged", function () {
+        var el = react_1.default.createElement("span", null, "hi");
+        expect((0, table_1.normalizeTableCellValue)(el)).toBe(el);
+    });
+    it("uses label or name on plain objects (relation fields)", function () {
+        expect((0, table_1.normalizeTableCellValue)({
+            id: 1,
+            label: "Owner Name",
+            email: "a@b.com",
+            role: "admin",
+            company_name: "Acme",
+        })).toBe("Owner Name");
+        expect((0, table_1.normalizeTableCellValue)({ id: 2, name: "Jane", email: "j@b.com" })).toBe("Jane");
+    });
+    it("returns company_name when label/name missing", function () {
+        expect((0, table_1.normalizeTableCellValue)({
+            id: 3,
+            company_name: "Solo Co",
+        })).toBe("Solo Co");
+    });
+    it("returns empty string for unrecognized objects", function () {
+        expect((0, table_1.normalizeTableCellValue)({ a: 1, b: 2 })).toBe("");
+    });
+});

package/dist/index.d.ts

@@ -49,6 +49,7 @@ import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOt
 import TableToggle from "./Components/Toggle/TableToggle";
 import withTheme from "./withTheme";
 import { useCustomTheme } from "./Theme/useCustomTheme";
+import { useSidebarPrefs } from "./Hooks/useSidebarPrefs";
 import { ThemesList } from "./Theme";
 import { debounce } from "./Utils/table";
 import ProductCard from "./Components/ProductCard/ProductCard";
@@ -77,11 +78,12 @@ import RolesPermission from "./Components/RolesPermission/RolesPermission";
 import CustomModulesTable from "./Components/CustomModulesTable/CustomModulesTable";
 import SignInActivityTable from "./Components/SignInActivityTable/SignInActivityTable";
 import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDetails";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, UpgradeButton, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useCustomTheme, ThemesList, debounce, };
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, UpgradeButton, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, useToaster, VerifyEmailOtp, useSidebarPrefs, useCustomTheme, ThemesList, debounce, };
 export default withTheme;
 export type { UserDetailsProps, UserDetailsLabels, UserListItem, SelectedUserDetail, UserDetailRow, RoleOption, AddUserFormValues, ChangeRoleSubmitPayload, } from "./Components/UserDetails/UserDetailsProps";
 export type { RolesPermissionProps, RolesPermissionLabels, RolesPermissionView, RolesPermissionMode, Permission, PermissionKey, RoleData, } from "./Components/RolesPermission/RolesPermissionProps";
 export type { CustomModulesTableProps, CustomModulesTableLabels, ModuleItem, UpdateModulePayload, } from "./Components/CustomModulesTable/CustomModulesTableProps";
 export type { SignInActivityTableProps, SignInActivityLabels, SignInDevice, } from "./Components/SignInActivityTable/SignInActivityTableProps";
 export type { OrganizationDetailsProps, OrganizationDetailsLabels, OrganizationItem, CreateOrgFormValues, } from "./Components/OrganizationDetails/OrganizationDetailsProps";
+export type { SidebarPrefs, UseSidebarPrefsOptions, UseSidebarPrefsResult, } from "./Hooks/useSidebarPrefs";
 //# sourceMappingURL=index.d.ts.map