pixelize-design-library 2.3.1-beta.12 → 2.3.1-beta.14

package/dist/Components/FilePreview/FilePreviewProps.js

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

package/dist/Components/LazyWrapper/LazyWrapper.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface LazyWrapperProps {
+    children: React.ReactNode;
+    /** Custom fallback node. Overrides the default spinner. */
+    fallback?: React.ReactNode;
+    /** Min height of the default fallback container. */
+    minHeight?: string;
+}
+declare const LazyWrapper: React.FC<LazyWrapperProps>;
+export default LazyWrapper;

package/dist/Components/LazyWrapper/LazyWrapper.js

@@ -0,0 +1,50 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var DefaultFallback = function (_a) {
+    var _b, _c;
+    var minHeight = _a.minHeight;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: minHeight, width: "100%", p: "2rem" },
+        react_1.default.createElement(react_2.Spinner, { thickness: "3px", speed: "0.65s", size: "lg", emptyColor: (_c = (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[100]) !== null && _c !== void 0 ? _c : "#EDF2F7", color: theme.colors.primary[500] })));
+};
+var LazyWrapper = function (_a) {
+    var children = _a.children, fallback = _a.fallback, _b = _a.minHeight, minHeight = _b === void 0 ? "400px" : _b;
+    return (react_1.default.createElement(react_1.Suspense, { fallback: fallback !== null && fallback !== void 0 ? fallback : react_1.default.createElement(DefaultFallback, { minHeight: minHeight }) }, children));
+};
+exports.default = LazyWrapper;

package/dist/Components/MoreItems/MoreItems.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { MoreItemsProps } from "./MoreItemsProps";
+declare const MoreItems: React.FC<MoreItemsProps>;
+export default MoreItems;

package/dist/Components/MoreItems/MoreItems.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var MoreItems = function (_a) {
+    var _b, _c;
+    var items = _a.items, moreCount = _a.moreCount, triggerText = _a.triggerText, colorResolver = _a.colorResolver, _d = _a.hideDots, hideDots = _d === void 0 ? false : _d, _e = _a.columns, columns = _e === void 0 ? 2 : _e, _f = _a.minWidth, minWidth = _f === void 0 ? "260px" : _f, _g = _a.triggerMaxWidth, triggerMaxWidth = _g === void 0 ? "250px" : _g, _h = _a.trigger, trigger = _h === void 0 ? "hover" : _h, _j = _a.placement, placement = _j === void 0 ? "bottom-start" : _j;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var count = moreCount !== null && moreCount !== void 0 ? moreCount : items.length;
+    if (count <= 0)
+        return triggerText ? react_1.default.createElement(react_1.default.Fragment, null, triggerText) : null;
+    return (react_1.default.createElement(react_2.Popover, { trigger: trigger, placement: placement, isLazy: true },
+        react_1.default.createElement(react_2.PopoverTrigger, null,
+            react_1.default.createElement(react_2.Box, { display: "inline-flex", alignItems: "center", maxW: triggerMaxWidth, cursor: "pointer" },
+                triggerText !== undefined && (react_1.default.createElement(react_2.Box, { as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, triggerText)),
+                react_1.default.createElement(react_2.Box, { as: "span", ml: "6px", px: "8px", py: "1px", fontSize: "12px", fontWeight: 600, lineHeight: "1.4", borderRadius: "full", color: (_b = theme.colors.primary[600]) !== null && _b !== void 0 ? _b : theme.colors.primary[500], bg: theme.colors.primary[50], transition: "all 0.15s ease", _hover: { bg: (_c = theme.colors.primary[100]) !== null && _c !== void 0 ? _c : theme.colors.primary[50] } },
+                    "+",
+                    count,
+                    " more"))),
+        react_1.default.createElement(react_2.PopoverContent, { width: "auto", minWidth: minWidth, maxH: "280px", overflowY: "auto", borderRadius: "12px", boxShadow: "0 8px 24px rgba(0,0,0,0.12)", _focus: { outline: "none", boxShadow: "0 8px 24px rgba(0,0,0,0.12)" } },
+            react_1.default.createElement(react_2.PopoverArrow, null),
+            react_1.default.createElement(react_2.PopoverBody, { p: 3 },
+                react_1.default.createElement(react_2.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 2 }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+                    var _a, _b, _c, _d, _e, _f, _g;
+                    var color = (_b = (_a = item.color) !== null && _a !== void 0 ? _a : colorResolver === null || colorResolver === void 0 ? void 0 : colorResolver(item)) !== null && _b !== void 0 ? _b : ((_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[400]) !== null && _d !== void 0 ? _d : "#A0AEC0");
+                    return (react_1.default.createElement(react_2.Box, { key: (_e = item.id) !== null && _e !== void 0 ? _e : index, display: "flex", alignItems: "center", gap: "8px", minW: 0 },
+                        !hideDots && (react_1.default.createElement(react_2.Box, { flexShrink: 0, width: "8px", height: "8px", borderRadius: "full", bg: color })),
+                        react_1.default.createElement(react_2.Text, { fontSize: "13px", color: (_g = (_f = theme.colors.gray) === null || _f === void 0 ? void 0 : _f[700]) !== null && _g !== void 0 ? _g : "#2D3748", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, item.label)));
+                }))))));
+};
+exports.default = MoreItems;

package/dist/Components/MoreItems/MoreItemsProps.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+export interface MoreItem {
+    id: string | number;
+    label: string;
+    /** Optional leading dot color. Falls back to colorResolver or a neutral gray. */
+    color?: string;
+}
+export interface MoreItemsProps {
+    /** Items shown inside the popover. */
+    items: MoreItem[];
+    /** Number rendered in the "+N more" trigger. Defaults to items.length. */
+    moreCount?: number;
+    /** Text shown before the "+N more" pill (e.g. the first visible value). */
+    triggerText?: ReactNode;
+    /** Derive a dot color per item; takes precedence is given to item.color. */
+    colorResolver?: (item: MoreItem) => string | undefined;
+    /** Hide the colored leading dot entirely. */
+    hideDots?: boolean;
+    /** Columns inside the popover grid. */
+    columns?: number;
+    /** Min width of the popover panel. */
+    minWidth?: string;
+    /** Max width of the trigger before truncation. */
+    triggerMaxWidth?: string;
+    /** Open on "hover" (default) or "click". */
+    trigger?: "hover" | "click";
+    /** Popover placement. */
+    placement?: "bottom-start" | "bottom-end" | "bottom" | "top" | "right" | "left";
+}

package/dist/Components/MoreItems/MoreItemsProps.js

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

package/dist/Components/OrgSwitcher/OrgSwitcher.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { OrgSwitcherProps } from "./OrgSwitcherProps";
+declare const OrgSwitcher: React.FC<OrgSwitcherProps>;
+export default OrgSwitcher;

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -0,0 +1,121 @@
+"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 __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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var OrgSwitcherProps_1 = require("./OrgSwitcherProps");
+var sizeMap = {
+    sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
+    md: { h: "40px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
+    lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
+};
+var Avatar = function (_a) {
+    var org = _a.org, boxSize = _a.boxSize, fontSize = _a.fontSize;
+    if (org.logoUrl) {
+        return (react_1.default.createElement(react_2.Image, { src: org.logoUrl, alt: org.name, boxSize: boxSize, borderRadius: "8px", objectFit: "cover", flexShrink: 0 }));
+    }
+    return (react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "8px", flexShrink: 0, bg: (0, OrgSwitcherProps_1.avatarColor)(org.name), color: "white", fontSize: fontSize, fontWeight: 700 }, (0, OrgSwitcherProps_1.orgInitial)(org.name)));
+};
+var OrgSwitcher = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+    var organizations = _a.organizations, value = _a.value, onChange = _a.onChange, _y = _a.isLoading, isLoading = _y === void 0 ? false : _y, isSearchable = _a.isSearchable, _z = _a.searchThreshold, searchThreshold = _z === void 0 ? 6 : _z, _0 = _a.triggerVariant, triggerVariant = _0 === void 0 ? "ghost" : _0, _1 = _a.size, size = _1 === void 0 ? "md" : _1, _2 = _a.maxWidth, maxWidth = _2 === void 0 ? "200px" : _2, _3 = _a.menuMinWidth, menuMinWidth = _3 === void 0 ? "280px" : _3, _4 = _a.placeholder, placeholder = _4 === void 0 ? "Select organization" : _4, _5 = _a.ariaLabel, ariaLabel = _5 === void 0 ? "Switch organization" : _5, _6 = _a.showRole, showRole = _6 === void 0 ? true : _6;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var s = sizeMap[size];
+    var _7 = (0, react_2.useDisclosure)(), isOpen = _7.isOpen, onOpen = _7.onOpen, onClose = _7.onClose;
+    var _8 = (0, react_1.useState)(""), query = _8[0], setQuery = _8[1];
+    var searchRef = (0, react_1.useRef)(null);
+    var selected = (0, react_1.useMemo)(function () { return organizations.find(function (o) { return o.id === value; }); }, [organizations, value]);
+    var showSearch = isSearchable !== null && isSearchable !== void 0 ? isSearchable : organizations.length >= searchThreshold;
+    var filtered = (0, react_1.useMemo)(function () {
+        if (!query.trim())
+            return organizations;
+        var q = query.toLowerCase();
+        return organizations.filter(function (o) { return o.name.toLowerCase().includes(q); });
+    }, [organizations, query]);
+    var triggerStyles = triggerVariant === "outline"
+        ? { border: "1px solid", borderColor: (_c = (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : "#E2E8F0", bg: theme.colors.white }
+        : triggerVariant === "subtle"
+            ? { bg: (_e = (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#F8FAFC" }
+            : { bg: "transparent" };
+    var handleSelect = function (org) {
+        onClose();
+        setQuery("");
+        if (org.id !== value)
+            onChange(org.id, org);
+    };
+    return (react_1.default.createElement(react_2.Popover, { isOpen: isOpen, onOpen: onOpen, onClose: function () {
+            onClose();
+            setQuery("");
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true },
+        react_1.default.createElement(react_2.PopoverTrigger, null,
+            react_1.default.createElement(react_2.Flex, __assign({ as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "10px", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? (_g = (_f = theme.colors.gray) === null || _f === void 0 ? void 0 : _f[100]) !== null && _g !== void 0 ? _g : "#F1F5F9" : undefined } }, triggerStyles),
+                selected ? (react_1.default.createElement(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : (react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "8px", bg: (_j = (_h = theme.colors.gray) === null || _h === void 0 ? void 0 : _h[100]) !== null && _j !== void 0 ? _j : "#F1F5F9", color: (_l = (_k = theme.colors.gray) === null || _k === void 0 ? void 0 : _k[400]) !== null && _l !== void 0 ? _l : "#A0AEC0", flexShrink: 0 },
+                    react_1.default.createElement(lucide_react_1.Building2, { size: 14 }))),
+                react_1.default.createElement(react_2.Text, { fontSize: s.font, fontWeight: 600, color: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[700]) !== null && _o !== void 0 ? _o : "#2D3748", maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left" }, (_p = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _p !== void 0 ? _p : placeholder),
+                isLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.primary[500], flexShrink: 0 })) : (react_1.default.createElement(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: (_r = (_q = theme.colors.gray) === null || _q === void 0 ? void 0 : _q[400]) !== null && _r !== void 0 ? _r : "#A0AEC0", flexShrink: 0 })))),
+        react_1.default.createElement(react_2.PopoverContent, { minW: menuMinWidth, w: "auto", borderRadius: "12px", overflow: "hidden", boxShadow: "0 10px 30px rgba(0,0,0,0.14)", _focus: { outline: "none", boxShadow: "0 10px 30px rgba(0,0,0,0.14)" } },
+            react_1.default.createElement(react_2.PopoverBody, { p: 0 },
+                showSearch && (react_1.default.createElement(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: (_t = (_s = theme.colors.gray) === null || _s === void 0 ? void 0 : _s[100]) !== null && _t !== void 0 ? _t : "#EDF2F7" },
+                    react_1.default.createElement(react_2.InputGroup, { size: "sm" },
+                        react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
+                            react_1.default.createElement(lucide_react_1.Search, { size: 15, color: (_v = (_u = theme.colors.gray) === null || _u === void 0 ? void 0 : _u[400]) !== null && _v !== void 0 ? _v : "#A0AEC0" })),
+                        react_1.default.createElement(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: function (e) { return setQuery(e.target.value); }, borderRadius: "8px" })))),
+                react_1.default.createElement(react_2.Box, { maxH: "320px", overflowY: "auto", py: 1 },
+                    filtered.map(function (org) {
+                        var _a, _b, _c, _d, _e, _f;
+                        var isActive = org.id === value;
+                        return (react_1.default.createElement(react_2.Flex, { key: org.id, align: "center", gap: "10px", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: isActive ? theme.colors.primary[50] : (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : "#F8FAFC" }, onClick: function () { return handleSelect(org); } },
+                            react_1.default.createElement(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }),
+                            react_1.default.createElement(react_2.Box, { flex: "1", minW: 0 },
+                                react_1.default.createElement(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: (_d = (_c = theme.colors.gray) === null || _c === void 0 ? void 0 : _c[800]) !== null && _d !== void 0 ? _d : "#1A202C", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, org.name),
+                                showRole && org.role && (react_1.default.createElement(react_2.Text, { fontSize: s.sub, color: (_f = (_e = theme.colors.gray) === null || _e === void 0 ? void 0 : _e[500]) !== null && _f !== void 0 ? _f : "#718096", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, org.role))),
+                            isActive && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.primary[500], flexShrink: 0 }))));
+                    }),
+                    filtered.length === 0 && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_x = (_w = theme.colors.gray) === null || _w === void 0 ? void 0 : _w[500]) !== null && _x !== void 0 ? _x : "#718096", textAlign: "center", py: 6 }, "No organizations found")))))));
+};
+exports.default = OrgSwitcher;

package/dist/Components/OrgSwitcher/OrgSwitcherProps.d.ts

@@ -0,0 +1,41 @@
+export interface OrgOption {
+    id: string | number;
+    /** Organization display name. */
+    name: string;
+    /** Optional subtitle, e.g. the user's role/designation in that org. */
+    role?: string;
+    /** Optional logo image URL. Falls back to an initial-based avatar. */
+    logoUrl?: string;
+}
+export type OrgSwitcherSize = "sm" | "md" | "lg";
+export interface OrgSwitcherProps {
+    /** Organizations to choose from. */
+    organizations: OrgOption[];
+    /** id of the currently active organization. */
+    value?: string | number;
+    /** Fired when a different organization is picked. */
+    onChange: (id: string | number, org: OrgOption) => void;
+    /** Shows an inline spinner and disables interaction (e.g. while switching). */
+    isLoading?: boolean;
+    /** Force the search box on/off. Auto-enabled when there are many orgs. */
+    isSearchable?: boolean;
+    /** Org count at/above which search auto-appears. Default 6. */
+    searchThreshold?: number;
+    /** Trigger styling. "ghost" suits a navbar; "outline"/"subtle" for forms. */
+    triggerVariant?: "ghost" | "outline" | "subtle";
+    size?: OrgSwitcherSize;
+    /** Max width of the trigger label before truncation. */
+    maxWidth?: string;
+    /** Min width of the dropdown panel. */
+    menuMinWidth?: string;
+    /** Shown when no org is selected. */
+    placeholder?: string;
+    /** Accessible label for the trigger. */
+    ariaLabel?: string;
+    /** Show the role subtitle inside the dropdown rows. Default true. */
+    showRole?: boolean;
+}
+/** Deterministically pick an avatar color from an org name. */
+export declare const avatarColor: (seed: string) => string;
+/** First letter (uppercased) of an org name, for the fallback avatar. */
+export declare const orgInitial: (name: string) => string;

package/dist/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.orgInitial = exports.avatarColor = void 0;
+var AVATAR_COLORS = [
+    "#6366F1",
+    "#0EA5E9",
+    "#10B981",
+    "#F59E0B",
+    "#EF4444",
+    "#EC4899",
+    "#8B5CF6",
+    "#14B8A6",
+];
+/** Deterministically pick an avatar color from an org name. */
+var avatarColor = function (seed) {
+    var hash = 0;
+    for (var i = 0; i < seed.length; i += 1) {
+        hash = seed.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+};
+exports.avatarColor = avatarColor;
+/** First letter (uppercased) of an org name, for the fallback avatar. */
+var orgInitial = function (name) { var _a, _b; return ((_b = (_a = name === null || name === void 0 ? void 0 : name.trim()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "?").toUpperCase(); };
+exports.orgInitial = orgInitial;

package/dist/Components/PdfViewer/PdfViewer.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export interface PdfViewerProps {
+    /** URL of the PDF to embed. */
+    pdfUrl: string;
+    /** File name shown in the toolbar. */
+    fileName?: string;
+    /** Height of the embed. */
+    height?: string;
+    /** Show the toolbar (name + open + download). */
+    showToolbar?: boolean;
+    /** Border radius of the frame. */
+    borderRadius?: string;
+}
+declare const PdfViewer: React.FC<PdfViewerProps>;
+export default PdfViewer;

package/dist/Components/PdfViewer/PdfViewer.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var PdfViewer = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var pdfUrl = _a.pdfUrl, _p = _a.fileName, fileName = _p === void 0 ? "Document.pdf" : _p, _q = _a.height, height = _q === void 0 ? "480px" : _q, _r = _a.showToolbar, showToolbar = _r === void 0 ? true : _r, _s = _a.borderRadius, borderRadius = _s === void 0 ? "12px" : _s;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    return (react_1.default.createElement(react_2.Box, { border: "1px solid", borderColor: (_c = (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : "#E2E8F0", borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.white },
+        showToolbar && (react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: (_e = (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[100]) !== null && _e !== void 0 ? _e : "#EDF2F7", bg: (_g = (_f = theme.colors.gray) === null || _f === void 0 ? void 0 : _f[50]) !== null && _g !== void 0 ? _g : "#F8FAFC" },
+            react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, minW: 0 },
+                react_1.default.createElement(lucide_react_1.FileText, { size: 18, color: theme.colors.primary[500] }),
+                react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: 500, color: (_j = (_h = theme.colors.gray) === null || _h === void 0 ? void 0 : _h[700]) !== null && _j !== void 0 ? _j : "#2D3748", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, fileName)),
+            react_1.default.createElement(react_2.Flex, { align: "center", gap: 1 },
+                react_1.default.createElement(ToolTip_1.default, { label: "Open in new tab", placement: "top" },
+                    react_1.default.createElement(react_2.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "8px", color: (_l = (_k = theme.colors.gray) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : "#4A5568", _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] } },
+                        react_1.default.createElement(lucide_react_1.ExternalLink, { size: 16 }))),
+                react_1.default.createElement(ToolTip_1.default, { label: "Download", placement: "top" },
+                    react_1.default.createElement(react_2.Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "8px", color: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[600]) !== null && _o !== void 0 ? _o : "#4A5568", _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] } },
+                        react_1.default.createElement(lucide_react_1.Download, { size: 16 })))))),
+        react_1.default.createElement(react_2.Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })));
+};
+exports.default = PdfViewer;

package/dist/Components/ScrollToTop/ScrollToTop.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface ScrollToTopProps {
+    /** Content to wrap. The button watches the nearest scrollable ancestor. */
+    children: React.ReactNode;
+    /** Tooltip label on the button. */
+    tooltipLabel?: string;
+    /** Scroll distance (px) after which the button appears. */
+    threshold?: number;
+    /** Smooth-scroll duration in ms. */
+    duration?: number;
+    /** Pin to a window-level scroll instead of the wrapped parent. */
+    useWindow?: boolean;
+    /** Distance from the bottom edge. */
+    bottom?: string;
+    /** Distance from the right edge. */
+    right?: string;
+}
+declare const ScrollToTop: React.FC<ScrollToTopProps>;
+export default ScrollToTop;

package/dist/Components/ScrollToTop/ScrollToTop.js

@@ -0,0 +1,104 @@
+"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("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+var ScrollToTop = function (_a) {
+    var _b;
+    var children = _a.children, _c = _a.tooltipLabel, tooltipLabel = _c === void 0 ? "Scroll to top" : _c, _d = _a.threshold, threshold = _d === void 0 ? 300 : _d, _e = _a.duration, duration = _e === void 0 ? 600 : _e, _f = _a.useWindow, useWindow = _f === void 0 ? false : _f, _g = _a.bottom, bottom = _g === void 0 ? "2rem" : _g, _h = _a.right, right = _h === void 0 ? "2rem" : _h;
+    var _j = (0, react_1.useState)(false), visible = _j[0], setVisible = _j[1];
+    var anchorRef = (0, react_1.useRef)(null);
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var getScroller = function () {
+        var _a, _b;
+        if (useWindow)
+            return window;
+        return (_b = (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.parentElement) !== null && _b !== void 0 ? _b : null;
+    };
+    var handleScroll = function () {
+        var _a;
+        var scroller = getScroller();
+        var top = scroller === window
+            ? window.scrollY
+            : (_a = scroller === null || scroller === void 0 ? void 0 : scroller.scrollTop) !== null && _a !== void 0 ? _a : 0;
+        setVisible(top >= threshold);
+    };
+    var scrollToTop = function () {
+        var scroller = getScroller();
+        if (!scroller)
+            return;
+        var start = scroller === window ? window.scrollY : scroller.scrollTop;
+        var startTime = performance.now();
+        var step = function (now) {
+            var progress = Math.min((now - startTime) / duration, 1);
+            var eased = progress < 0.5
+                ? 2 * progress * progress
+                : -1 + (4 - 2 * progress) * progress;
+            var next = start * (1 - eased);
+            if (scroller === window)
+                window.scrollTo(0, next);
+            else
+                scroller.scrollTop = next;
+            if (progress < 1)
+                requestAnimationFrame(step);
+        };
+        requestAnimationFrame(step);
+    };
+    (0, react_1.useEffect)(function () {
+        var scroller = getScroller();
+        if (!scroller)
+            return;
+        scroller.addEventListener("scroll", handleScroll);
+        handleScroll();
+        return function () { return scroller.removeEventListener("scroll", handleScroll); };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [useWindow, threshold]);
+    return (react_1.default.createElement(react_2.Box, { ref: anchorRef, position: "relative" },
+        children,
+        react_1.default.createElement(ToolTip_1.default, { label: tooltipLabel, placement: "left" },
+            react_1.default.createElement(react_2.Box, { onClick: scrollToTop, role: "button", "aria-label": tooltipLabel, position: "fixed", bottom: bottom, right: right, zIndex: 1000, display: "flex", alignItems: "center", justifyContent: "center", boxSize: "44px", borderRadius: "full", cursor: "pointer", bg: theme.colors.primary[500], color: theme.colors.white, boxShadow: "0 4px 14px rgba(0,0,0,0.25)", opacity: visible ? 1 : 0, transform: visible ? "translateY(0) scale(1)" : "translateY(16px) scale(0.85)", pointerEvents: visible ? "auto" : "none", transition: "all 0.25s cubic-bezier(0.16, 1, 0.3, 1)", _hover: {
+                    bg: (_b = theme.colors.primary[600]) !== null && _b !== void 0 ? _b : theme.colors.primary[500],
+                    transform: "translateY(-2px) scale(1.05)",
+                    boxShadow: "0 6px 20px rgba(0,0,0,0.3)",
+                }, _active: { transform: "scale(0.95)" } },
+                react_1.default.createElement(lucide_react_1.ChevronUp, { size: 24, strokeWidth: 2.5 })))));
+};
+exports.default = ScrollToTop;

package/dist/Components/StageProgress/StageItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { StageItemProps } from "./StageProgressProps";
+declare const StageItem: React.FC<StageItemProps>;
+export default StageItem;