npm - pixelize-design-library - Versions diffs - 2.3.1-beta.2 → 2.3.1-beta.20 - Mend

pixelize-design-library 2.3.1-beta.2 → 2.3.1-beta.20

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 (165) hide show

package/dist/Components/Dropdown/DropDown.js CHANGED Viewed

@@ -50,58 +50,140 @@ var framer_motion_1 = require("framer-motion");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var lucide_react_1 = require("lucide-react");
 var MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(react_2.Box, __assign({ ref: ref }, props))); }));
+// Size scale (mirrors the Button sizes). `btn` is the Chakra Button size.
+var SIZE_MAP = {
+    xs: { btn: "xs", fontSize: "0.75rem", py: 1, px: 2.5, img: "1rem", chevron: 13, minW: "8rem", gap: 1.5 },
+    sm: { btn: "sm", fontSize: "0.8125rem", py: 1.5, px: 3, img: "1.05rem", chevron: 14, minW: "9rem", gap: 2 },
+    md: { btn: "md", fontSize: "0.875rem", py: 2, px: 3, img: "1.15rem", chevron: 16, minW: "11rem", gap: 2 },
+    lg: { btn: "lg", fontSize: "0.9375rem", py: 2.5, px: 3.5, img: "1.25rem", chevron: 18, minW: "12rem", gap: 2.5 },
+    xl: { btn: "lg", fontSize: "1.0625rem", py: 3, px: 4, img: "1.4rem", chevron: 20, minW: "13rem", gap: 3 },
+};
 var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
-    var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle, _d = _a.optionsSize, optionsSize = _d === void 0 ? "lg" : _d, _e = _a.divider, divider = _e === void 0 ? false : _e;
+    var _b, _c;
+    var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _d = _a.dropdownType, dropdownType = _d === void 0 ? "button" : _d, text = _a.text, DropdownIcon = _a.DropdownIcon, _e = _a.isVisibleIconShow, isVisibleIconShow = _e === void 0 ? true : _e, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle, size = _a.size, optionsSize = _a.optionsSize, _f = _a.divider, divider = _f === void 0 ? false : _f;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _f = (0, react_2.useDisclosure)(), isOpen = _f.isOpen, onToggle = _f.onToggle, onClose = _f.onClose;
+    var _g = (0, react_2.useDisclosure)(), isOpen = _g.isOpen, onToggle = _g.onToggle, onClose = _g.onClose;
     var dropdownRef = (0, react_1.useRef)(null);
+    var menuRef = (0, react_1.useRef)(null);
+    var _h = (0, react_1.useState)({ top: 0, left: 0, width: 0 }), menuPos = _h[0], setMenuPos = _h[1];
+    var s = (_c = SIZE_MAP[(_b = size !== null && size !== void 0 ? size : optionsSize) !== null && _b !== void 0 ? _b : "md"]) !== null && _c !== void 0 ? _c : SIZE_MAP.md;
     var handleListItemClick = function (optionId, optionLabel) {
         onClose();
         handleOptionSelect(optionId, optionLabel);
     };
+    // The menu is portaled to <body> (so it sits above everything). Anchor it to
+    // the trigger, then clamp to the viewport so it never overflows off-screen
+    // (e.g. when the trigger sits near the right or bottom edge).
+    var updateMenuPos = (0, react_1.useCallback)(function () {
+        var _a, _b;
+        if (!dropdownRef.current)
+            return;
+        var r = dropdownRef.current.getBoundingClientRect();
+        var gutter = 8;
+        var vw = window.innerWidth;
+        var vh = window.innerHeight;
+        // Use the rendered menu size when available; fall back to trigger width.
+        var menuW = ((_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || r.width;
+        var menuH = ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
+        // Horizontal: prefer left-aligned to trigger; if it overflows the right
+        // edge, right-align to the trigger, then clamp within [gutter, vw-gutter].
+        var left = r.left;
+        if (left + menuW > vw - gutter)
+            left = r.right - menuW;
+        left = Math.min(Math.max(left, gutter), Math.max(gutter, vw - menuW - gutter));
+        // Vertical: prefer below the trigger; flip above when it would overflow the
+        // bottom and there is more room above. Clamp within the viewport.
+        var top = r.bottom;
+        var spaceBelow = vh - r.bottom;
+        var spaceAbove = r.top;
+        if (menuH && top + menuH > vh - gutter && spaceAbove > spaceBelow) {
+            top = r.top - menuH;
+        }
+        top = Math.min(Math.max(top, gutter), Math.max(gutter, vh - menuH - gutter));
+        setMenuPos({ top: top, left: left, width: r.width });
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (!isOpen)
+            return;
+        updateMenuPos();
+        window.addEventListener("scroll", updateMenuPos, true);
+        window.addEventListener("resize", updateMenuPos);
+        return function () {
+            window.removeEventListener("scroll", updateMenuPos, true);
+            window.removeEventListener("resize", updateMenuPos);
+        };
+    }, [isOpen, updateMenuPos]);
     (0, react_1.useEffect)(function () {
         var handleClickOutside = function (event) {
-            if (dropdownRef.current &&
-                !dropdownRef.current.contains(event.target)) {
-                onClose();
-            }
+            var _a, _b;
+            var target = event.target;
+            // Ignore clicks on the trigger or inside the (portaled) menu.
+            if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))
+                return;
+            if ((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.contains(target))
+                return;
+            onClose();
         };
         document.addEventListener("mousedown", handleClickOutside);
         return function () {
             document.removeEventListener("mousedown", handleClickOutside);
         };
-    }, [dropdownRef, onClose]);
+    }, [onClose]);
+    var setMenuRef = function (node) {
+        menuRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+        // Recompute once the menu has mounted so clamping uses its real size.
+        if (node)
+            updateMenuPos();
+    };
+    var Chevron = isVisibleIconShow ? (react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", transition: "transform 0.2s ease", transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" },
+        react_1.default.createElement(lucide_react_1.ChevronDown, { size: s.chevron }))) : undefined;
     var dropDownToggleOption = function () {
-        var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, style: __assign({ backgroundColor: theme.colors.primary[500] }, dropDownButtonStyle), rightIcon: isVisibleIconShow ? (react_1.default.createElement(react_2.Icon, { as: lucide_react_1.ChevronDown, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)" })) : undefined }, buttonProps),
-            DropdownIcon,
-            " \u00A0 ",
-            ButtonText));
-        var TextToggle = (react_1.default.createElement(react_2.Flex, { onClick: onToggle, align: "center", style: dropDownButtonStyle, cursor: "pointer" },
+        var _a, _b, _c, _d;
+        var ButtonToggle = (react_1.default.createElement(react_2.Button, __assign({ onClick: onToggle, size: s.btn, colorScheme: "primary", borderRadius: "0.5rem", fontWeight: 600, "aria-haspopup": "menu", "aria-expanded": isOpen, rightIcon: Chevron, sx: __assign({ transition: "all 0.15s ease" }, dropDownButtonStyle) }, buttonProps),
+            react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: DropdownIcon && ButtonText ? s.gap : 0 },
+                DropdownIcon,
+                ButtonText)));
+        var TextToggle = (react_1.default.createElement(react_2.Flex, { onClick: onToggle, align: "center", gap: 1.5, cursor: "pointer", fontSize: s.fontSize, fontWeight: 500, color: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700], transition: "color 0.15s ease", _hover: { color: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[600] }, style: dropDownButtonStyle, role: "button", "aria-haspopup": "menu", "aria-expanded": isOpen },
             DropdownIcon,
-            " ",
             text,
-            isVisibleIconShow && react_1.default.createElement(react_2.Icon, { as: lucide_react_1.ChevronDown })));
+            Chevron));
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     var DropdownContentRender = function () {
-        var _a, _b, _c;
-        return (react_1.default.createElement(react_2.List, { bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light, border: "1px solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), borderRadius: theme.radii.md, shadow: theme.shadows.lg, py: 2, mt: "0.2rem", minWidth: "200px", style: ListStyle }, options.map(function (option) {
-            var _a;
-            return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, p: optionsSize === "sm" ? 1 : 2, px: 2, _hover: {
-                    bg: theme.colors.gray[100],
-                    color: theme.colors.primary[500],
-                }, display: "flex", alignItems: "center", cursor: "pointer", style: ItemStyle, borderBottom: divider ? "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]) : undefined, sx: {
-                    "&:last-child": {
-                        borderBottom: "none",
-                    },
-                } },
-                (option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Icon, { as: option.image, boxSize: optionsSize === "sm" ? "1.1rem" : "1.5rem", mr: 2, style: ImageStyle })),
-                react_1.default.createElement(react_2.Box, { as: "span", fontSize: optionsSize === "sm" ? "14px" : "16px", isTruncated: true, style: LabelStyle }, option.label)));
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        return (react_1.default.createElement(react_2.List, { bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.white) !== null && _b !== void 0 ? _b : "#fff", border: "0.063rem solid ".concat((_e = (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.boxborder) === null || _d === void 0 ? void 0 : _d[200]) !== null && _e !== void 0 ? _e : (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.gray[200]), borderRadius: "0.625rem", boxShadow: (_g = theme.shadows) === null || _g === void 0 ? void 0 : _g.lg, py: 1.5, mt: "0.375rem", minWidth: s.minW, maxH: "18rem", overflowY: "auto", overflowX: "hidden", sx: {
+                scrollbarWidth: "thin",
+                scrollbarColor: "".concat((_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.gray) === null || _j === void 0 ? void 0 : _j[300], " transparent"),
+                "&::-webkit-scrollbar": { width: "6px" },
+                "&::-webkit-scrollbar-thumb": {
+                    background: (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray) === null || _l === void 0 ? void 0 : _l[300],
+                    borderRadius: "3px",
+                },
+                "&::-webkit-scrollbar-thumb:hover": {
+                    background: (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[400],
+                },
+            }, style: ListStyle }, options.map(function (option) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+            return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, mx: 1.5, px: s.px, py: s.py, borderRadius: "0.375rem", display: "flex", alignItems: "center", gap: 2, cursor: "pointer", color: (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[700]) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.gray) === null || _e === void 0 ? void 0 : _e[700], transition: "background 0.12s ease, color 0.12s ease", _hover: {
+                    bg: (_j = (_h = (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.primary) === null || _g === void 0 ? void 0 : _g.opacity) === null || _h === void 0 ? void 0 : _h[8]) !== null && _j !== void 0 ? _j : (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray[100],
+                    color: (_o = (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.primary) === null || _m === void 0 ? void 0 : _m[700]) !== null && _o !== void 0 ? _o : (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q[600],
+                }, borderBottom: divider
+                    ? "0.063rem solid ".concat((_t = (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.boxborder) === null || _s === void 0 ? void 0 : _s[100]) !== null && _t !== void 0 ? _t : (_u = theme.colors) === null || _u === void 0 ? void 0 : _u.gray[200])
+                    : undefined, sx: { "&:last-child": { borderBottom: "none" } }, style: ItemStyle, fontWeight: 500 },
+                (option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Box, { as: option.image, boxSize: s.img, flexShrink: 0, color: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.gray) === null || _w === void 0 ? void 0 : _w[500], style: ImageStyle })),
+                react_1.default.createElement(react_2.Box, { as: "span", fontSize: s.fontSize, isTruncated: true,
+                    // fontWeight={400}
+                    style: LabelStyle }, option.label)));
         })));
     };
     return (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block" },
         dropDownToggleOption(),
-        isOpen && (react_1.default.createElement(MotionBox, { ref: ref, position: "absolute", zIndex: 5, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, style: headStyle }, DropdownContentRender()))));
+        isOpen && (react_1.default.createElement(react_2.Portal, null,
+            react_1.default.createElement(MotionBox, { ref: setMenuRef, position: "fixed", top: "".concat(menuPos.top, "px"), left: "".concat(menuPos.left, "px"), minW: "".concat(menuPos.width, "px"), zIndex: 1500, initial: { opacity: 0, y: -6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, style: headStyle }, DropdownContentRender())))));
 });
 Dropdown.displayName = "Dropdown";
 exports.default = Dropdown;

package/dist/Components/Dropdown/Dropdown.test.d.ts ADDED Viewed

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

package/dist/Components/Dropdown/Dropdown.test.js ADDED Viewed

@@ -0,0 +1,102 @@
+"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("@testing-library/react");
+require("@testing-library/jest-dom");
+var react_3 = require("@chakra-ui/react");
+var DropDown_1 = __importDefault(require("./DropDown"));
+jest.mock("../../Theme/useCustomTheme", function () { return ({
+    useCustomTheme: function () { return ({
+        colors: {
+            white: "#ffffff",
+            gray: { 100: "#f0f0f0", 200: "#e2e8f0", 300: "#cbd5e1", 400: "#94a3b8", 500: "#64748b", 700: "#334155" },
+            primary: { 600: "#4f46e5", 700: "#4338ca", opacity: { 8: "rgba(99,102,241,0.08)" } },
+            boxborder: { 100: "#eef2f6", 200: "#e2e8f0" },
+            text: { 700: "#334155" },
+        },
+        shadows: { lg: "0 10px 15px rgba(0,0,0,0.1)" },
+    }); },
+}); });
+beforeAll(function () {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        configurable: true,
+        value: jest.fn().mockImplementation(function (query) { return ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(),
+            removeListener: jest.fn(),
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        }); }),
+    });
+    Object.defineProperty(window, "innerWidth", { writable: true, configurable: true, value: 1000 });
+    Object.defineProperty(window, "innerHeight", { writable: true, configurable: true, value: 800 });
+});
+var options = [
+    { id: 1, label: "Upload file" },
+    { id: 2, label: "Documents" },
+];
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, null, ui));
+};
+describe("Dropdown", function () {
+    it("renders the trigger and opens the menu on click", function () {
+        var onSelect = jest.fn();
+        renderWithChakra(react_1.default.createElement(DropDown_1.default, { ButtonText: "Actions", options: options, handleOptionSelect: onSelect }));
+        var trigger = react_2.screen.getByRole("button", { name: /actions/i });
+        expect(trigger).toBeInTheDocument();
+        expect(react_2.screen.queryByText("Upload file")).not.toBeInTheDocument();
+        react_2.fireEvent.click(trigger);
+        expect(react_2.screen.getByText("Upload file")).toBeInTheDocument();
+        expect(react_2.screen.getByText("Documents")).toBeInTheDocument();
+    });
+    it("calls handleOptionSelect with the chosen option", function () {
+        var onSelect = jest.fn();
+        renderWithChakra(react_1.default.createElement(DropDown_1.default, { ButtonText: "Actions", options: options, handleOptionSelect: onSelect }));
+        react_2.fireEvent.click(react_2.screen.getByRole("button", { name: /actions/i }));
+        react_2.fireEvent.click(react_2.screen.getByText("Documents"));
+        expect(onSelect).toHaveBeenCalledWith(2, "Documents");
+    });
+    it("clamps the menu within the viewport when the trigger is near the right edge", function () {
+        var onSelect = jest.fn();
+        var container = renderWithChakra(react_1.default.createElement(DropDown_1.default, { ButtonText: "Actions", options: options, handleOptionSelect: onSelect })).container;
+        var trigger = react_2.screen.getByRole("button", { name: /actions/i });
+        var anchor = container.querySelector("div");
+        // Trigger sits flush against the right edge (viewport width = 1000).
+        jest
+            .spyOn(anchor, "getBoundingClientRect")
+            .mockReturnValue({
+            top: 100,
+            bottom: 140,
+            left: 960,
+            right: 1000,
+            width: 40,
+            height: 40,
+            x: 960,
+            y: 100,
+            toJSON: function () { return ({}); },
+        });
+        react_2.fireEvent.click(trigger);
+        // Walk up from the rendered option to the fixed-position menu container.
+        var node = react_2.screen.getByText("Upload file");
+        var menu = null;
+        while (node) {
+            if (getComputedStyle(node).position === "fixed") {
+                menu = node;
+                break;
+            }
+            node = node.parentElement;
+        }
+        expect(menu).toBeTruthy();
+        var left = parseFloat(getComputedStyle(menu).left);
+        // Must be pulled left of the trigger so it does not overflow the right edge.
+        expect(left).toBeLessThan(960);
+        expect(left).toBeGreaterThanOrEqual(8);
+    });
+});

package/dist/Components/Dropdown/DropdownProps.d.ts CHANGED Viewed

@@ -14,7 +14,10 @@ export type DropdownProps = {
     ItemStyle?: React.CSSProperties;
     LabelStyle?: React.CSSProperties;
     ImageStyle?: React.CSSProperties;
-    optionsSize?: "sm" | "md";
+    /** Overall size of the trigger + options (like Button sizes). */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    /** @deprecated Use `size` instead. Kept for backward compatibility. */
+    optionsSize?: "sm" | "md" | "lg";
     divider?: boolean;
 };
 type Option = {

package/dist/Components/EmptyState/EmptyState.d.ts ADDED Viewed

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

package/dist/Components/EmptyState/EmptyState.js ADDED Viewed

@@ -0,0 +1,65 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var react_3 = require("@emotion/react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var float = (0, react_3.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-8px); }\n"], ["\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-8px); }\n"])));
+var sizeMap = {
+    sm: { badge: "48px", icon: 20, title: "0.95rem", desc: "0.8rem", gap: 2, pad: 6 },
+    md: { badge: "72px", icon: 30, title: "1.1rem", desc: "0.9rem", gap: 3, pad: 10 },
+    lg: { badge: "96px", icon: 40, title: "1.35rem", desc: "1rem", gap: 4, pad: 14 },
+};
+var EmptyState = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _m = _a.title, title = _m === void 0 ? "No data found" : _m, description = _a.description, _o = _a.icon, IconComp = _o === void 0 ? lucide_react_1.Inbox : _o, image = _a.image, _p = _a.size, size = _p === void 0 ? "md" : _p, _q = _a.colorScheme, colorScheme = _q === void 0 ? "primary" : _q, _r = _a.variant, variant = _r === void 0 ? "default" : _r, action = _a.action, _s = _a.animate, animate = _s === void 0 ? false : _s, _t = _a.minH, minH = _t === void 0 ? "240px" : _t, sx = _a.sx;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var s = sizeMap[size];
+    // Resolve accent palette: theme.colors[colorScheme] or theme.colors.semantic[*]
+    var semantic = ["success", "error", "warning", "info"];
+    var palette = semantic.includes(colorScheme)
+        ? theme.colors.semantic[colorScheme]
+        : theme.colors[colorScheme];
+    var accent = (_b = palette === null || palette === void 0 ? void 0 : palette[500]) !== null && _b !== void 0 ? _b : theme.colors.primary[500];
+    var accentSoft = (_c = palette === null || palette === void 0 ? void 0 : palette[50]) !== null && _c !== void 0 ? _c : theme.colors.primary[50];
+    var containerStyles = variant === "subtle"
+        ? { bg: (_e = (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#F8FAFC", borderRadius: "16px" }
+        : variant === "dashed"
+            ? {
+                border: "2px dashed",
+                borderColor: (_g = (_f = theme.colors.gray) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : "#E2E8F0",
+                borderRadius: "16px",
+                bg: "transparent",
+            }
+            : {};
+    return (react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", justify: "center", textAlign: "center", minH: minH, px: s.pad, py: s.pad, gap: s.gap, width: "100%", sx: __assign(__assign({}, containerStyles), sx) },
+        image ? (react_1.default.createElement(react_2.Image, { src: image, alt: title, boxSize: s.badge, objectFit: "contain", animation: animate ? "".concat(float, " 3s ease-in-out infinite") : undefined })) : (react_1.default.createElement(react_2.Flex, { align: "center", justify: "center", boxSize: s.badge, borderRadius: "full", bg: accentSoft, color: accent, animation: animate ? "".concat(float, " 3s ease-in-out infinite") : undefined, sx: {
+                boxShadow: "0 0 0 8px ".concat(accentSoft, "55"),
+            } },
+            react_1.default.createElement(IconComp, { size: s.icon, strokeWidth: 1.75 }))),
+        react_1.default.createElement(react_2.Box, null,
+            react_1.default.createElement(react_2.Text, { fontSize: s.title, fontWeight: 600, color: (_j = (_h = theme.colors.gray) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : "#1A202C", mt: 1 }, title),
+            description && (react_1.default.createElement(react_2.Text, { fontSize: s.desc, color: (_l = (_k = theme.colors.gray) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "#718096", mt: 1, maxW: "380px" }, description))),
+        action && (react_1.default.createElement(react_2.Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center" }, action))));
+};
+exports.default = EmptyState;
+var templateObject_1;

package/dist/Components/EmptyState/EmptyStateProps.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import { ElementType, ReactNode } from "react";
+import { BoxProps } from "@chakra-ui/react";
+export type EmptyStateSize = "sm" | "md" | "lg";
+export type EmptyStateColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "success" | "error" | "warning" | "info";
+export interface EmptyStateProps {
+    /** Heading text. Defaults to "No data found". */
+    title?: string;
+    /** Supporting line under the title. */
+    description?: string;
+    /** A lucide-react (or any) icon component rendered inside the badge. */
+    icon?: ElementType;
+    /** Illustration image URL. When provided it replaces the icon badge. */
+    image?: string;
+    /** Controls spacing, icon and font sizes. */
+    size?: EmptyStateSize;
+    /** Accent color for the icon badge. */
+    colorScheme?: EmptyStateColorScheme;
+    /** "default" plain, "subtle" tinted card, "dashed" dashed-border drop zone. */
+    variant?: "default" | "subtle" | "dashed";
+    /** Action node(s) — usually a Button or a pair of buttons. */
+    action?: ReactNode;
+    /** Float the icon gently to draw attention. */
+    animate?: boolean;
+    /** Minimum height of the container. */
+    minH?: BoxProps["minH"];
+    /** Escape hatch for extra Chakra styles on the outer container. */
+    sx?: BoxProps["sx"];
+}

package/dist/Components/EmptyState/EmptyStateProps.js ADDED Viewed

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

package/dist/Components/FieldSelectModal/FieldSelectModal.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import React from "react";
+export interface SelectableField {
+    /** Unique value committed on confirm. */
+    field_name: string;
+    /** Human-readable label. */
+    field_label: string;
+}
+export interface FieldSelectModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    fields: SelectableField[];
+    /** Called with the chosen field_name values. */
+    onConfirm: (selected: string[]) => void;
+    title?: string;
+    confirmText?: string;
+    loadingText?: string;
+    isLoading?: boolean;
+    /** Pre-selected field_name values. Defaults to all selected. */
+    defaultSelected?: string[];
+    /** Columns in the field grid. */
+    columns?: number;
+    /** Show the search box (auto-hidden under 8 fields by default). */
+    searchable?: boolean;
+}
+declare const FieldSelectModal: React.FC<FieldSelectModalProps>;
+export default FieldSelectModal;

package/dist/Components/FieldSelectModal/FieldSelectModal.js ADDED Viewed

@@ -0,0 +1,107 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
+var framer_motion_1 = require("framer-motion");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var MotionModalContent = (0, framer_motion_1.motion)(react_2.ModalContent);
+var FieldSelectModal = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var isOpen = _a.isOpen, onClose = _a.onClose, fields = _a.fields, onConfirm = _a.onConfirm, _h = _a.title, title = _h === void 0 ? "Select Fields" : _h, _j = _a.confirmText, confirmText = _j === void 0 ? "Apply" : _j, _k = _a.loadingText, loadingText = _k === void 0 ? "Applying..." : _k, _l = _a.isLoading, isLoading = _l === void 0 ? false : _l, defaultSelected = _a.defaultSelected, _m = _a.columns, columns = _m === void 0 ? 2 : _m, searchable = _a.searchable;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var _o = (0, react_1.useState)([]), selected = _o[0], setSelected = _o[1];
+    var _p = (0, react_1.useState)(""), query = _p[0], setQuery = _p[1];
+    (0, react_1.useEffect)(function () {
+        if (isOpen) {
+            setSelected(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : fields.map(function (f) { return f.field_name; }));
+            setQuery("");
+        }
+    }, [isOpen, fields, defaultSelected]);
+    var showSearch = searchable !== null && searchable !== void 0 ? searchable : fields.length >= 8;
+    var visibleFields = (0, react_1.useMemo)(function () {
+        if (!query.trim())
+            return fields;
+        var q = query.toLowerCase();
+        return fields.filter(function (f) { return f.field_label.toLowerCase().includes(q); });
+    }, [fields, query]);
+    var toggle = function (name) {
+        return setSelected(function (prev) {
+            return prev.includes(name) ? prev.filter(function (f) { return f !== name; }) : __spreadArray(__spreadArray([], prev, true), [name], false);
+        });
+    };
+    var isAllSelected = selected.length === fields.length && fields.length > 0;
+    var isIndeterminate = selected.length > 0 && selected.length < fields.length;
+    return (react_1.default.createElement(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: "xl", isCentered: true },
+        react_1.default.createElement(react_2.ModalOverlay, { bg: "blackAlpha.400", backdropFilter: "blur(4px)" }),
+        react_1.default.createElement(MotionModalContent, { borderRadius: "16px", overflow: "hidden", maxH: "85vh", initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.2, ease: "easeOut" } },
+            react_1.default.createElement(react_2.ModalHeader, { pb: 2 },
+                react_1.default.createElement(react_2.Text, { fontSize: "lg", fontWeight: 600 }, title),
+                react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_c = (_b = theme.colors.gray) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "#718096", fontWeight: 400 },
+                    selected.length,
+                    " of ",
+                    fields.length,
+                    " selected")),
+            react_1.default.createElement(react_2.ModalCloseButton, null),
+            react_1.default.createElement(react_2.ModalBody, { overflowY: "auto" },
+                react_1.default.createElement(react_2.Flex, { align: "center", justify: "space-between", mb: 3, gap: 3, wrap: "wrap" },
+                    react_1.default.createElement(react_2.Checkbox, { isChecked: isAllSelected, isIndeterminate: isIndeterminate, onChange: function (e) {
+                            return setSelected(e.target.checked ? fields.map(function (f) { return f.field_name; }) : []);
+                        }, fontWeight: 500 }, "Select all"),
+                    showSearch && (react_1.default.createElement(react_2.InputGroup, { size: "sm", maxW: "220px" },
+                        react_1.default.createElement(react_2.InputLeftElement, { pointerEvents: "none" },
+                            react_1.default.createElement(lucide_react_1.Search, { size: 15, color: (_e = (_d = theme.colors.gray) === null || _d === void 0 ? void 0 : _d[400]) !== null && _e !== void 0 ? _e : "#A0AEC0" })),
+                        react_1.default.createElement(react_2.Input, { placeholder: "Search fields", value: query, onChange: function (e) { return setQuery(e.target.value); }, borderRadius: "8px" })))),
+                react_1.default.createElement(react_2.SimpleGrid, { columns: columns, spacingX: 4, spacingY: 3 }, visibleFields.map(function (field) { return (react_1.default.createElement(react_2.Checkbox, { key: field.field_name, isChecked: selected.includes(field.field_name), onChange: function () { return toggle(field.field_name); } },
+                    react_1.default.createElement(react_2.Text, { fontSize: "sm" }, field.field_label))); })),
+                visibleFields.length === 0 && (react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_g = (_f = theme.colors.gray) === null || _f === void 0 ? void 0 : _f[500]) !== null && _g !== void 0 ? _g : "#718096", textAlign: "center", py: 6 },
+                    "No fields match \"",
+                    query,
+                    "\""))),
+            react_1.default.createElement(react_2.ModalFooter, { gap: 3 },
+                react_1.default.createElement(react_2.Button, { variant: "outline", colorScheme: "gray", size: "sm", onClick: onClose }, "Cancel"),
+                react_1.default.createElement(react_2.Button, { colorScheme: "primary", size: "sm", isLoading: isLoading, loadingText: loadingText, isDisabled: selected.length === 0, onClick: function () { return onConfirm(selected); } }, confirmText)))));
+};
+exports.default = FieldSelectModal;

package/dist/Components/FilePreview/FilePreview.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import React from "react";
+import { FilePreviewProps, FilePreviewTriggerProps } from "./FilePreviewProps";
+export declare const FilePreview: React.FC<FilePreviewProps>;
+/** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
+export declare const FilePreviewTrigger: React.FC<FilePreviewTriggerProps>;
+export default FilePreview;