pixelize-design-library 2.3.1-beta.9 → 2.3.3

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

@@ -70,19 +70,29 @@ var Harness = function (_a) {
                 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 }))))));
 };
+// Windowing math (normal density): ROW_HEIGHT=40, OVERSCAN=6, viewport falls
+// back to 500px (jsdom clientHeight=0). Rows are unmeasured in jsdom, so every
+// row is estimated at 40px. bottom = 0 + 500 + 6*40 = 740 -> last rendered row
+// is the highest index with offset < 740 -> index 18 (offsets[18]=720). So rows
+// 0..18 (19 rows) render and the trailing spacer reserves (100-19)*40 px.
+var ROW_HEIGHT = 40;
+var VISIBLE_COUNT = 19;
+var LAST_VISIBLE = VISIBLE_COUNT - 1;
 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();
+        expect(queryByText("Row ".concat(LAST_VISIBLE))).toBeInTheDocument();
         // Rows beyond the window are not mounted.
+        expect(queryByText("Row ".concat(LAST_VISIBLE + 1))).not.toBeInTheDocument();
         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") });
+        expect(spacers[0]).toHaveStyle({
+            height: "".concat((100 - VISIBLE_COUNT) * ROW_HEIGHT, "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;

package/dist/Components/Table/components/TableHeader.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { TableHeaderPageProps } from "../TableProps";
-declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, headerTextColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ columns, isCheckbox, handleSort, headerRefs, columnWidths, columnsSort, headerBgColor, freezedBgColor, freezedTextColor, noBorders, handleCheckbox, checked, isLoading, isContent, isLink, isActionFreeze, setColumnsSearch, columnsSearch, isSelecting, }: TableHeaderPageProps) => React.JSX.Element>;
 export default _default;

package/dist/Components/Table/components/TableHeader.js

@@ -55,12 +55,12 @@ var TableFilters_1 = __importDefault(require("../filters/TableFilters"));
 var lucide_react_1 = require("lucide-react");
 var Checkbox_1 = __importDefault(require("../../Checkbox/Checkbox"));
 var TableHeader = function (_a) {
-    var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, headerTextColor = _a.headerTextColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, isSelecting = _a.isSelecting;
+    var columns = _a.columns, isCheckbox = _a.isCheckbox, handleSort = _a.handleSort, headerRefs = _a.headerRefs, columnWidths = _a.columnWidths, columnsSort = _a.columnsSort, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, handleCheckbox = _a.handleCheckbox, checked = _a.checked, isLoading = _a.isLoading, isContent = _a.isContent, isLink = _a.isLink, isActionFreeze = _a.isActionFreeze, setColumnsSearch = _a.setColumnsSearch, columnsSearch = _a.columnsSearch, isSelecting = _a.isSelecting;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _b = (0, react_2.useState)(null), openFilterId = _b[0], setOpenFilterId = _b[1];
     var RenderCheckbox = (0, react_2.useCallback)(function () {
-        var _a, _b, _c, _d, _e;
-        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]) }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.primary) === null || _e === void 0 ? void 0 : _e[500] })) : (react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))));
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        return (react_2.default.createElement(react_1.Th, { w: 6, fontSize: 14, fontWeight: 600, color: freezedTextColor, textTransform: "capitalize", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 9, borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]) }, isSelecting ? (react_2.default.createElement(react_1.Spinner, { size: "sm", color: (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j[500] })) : (react_2.default.createElement(Checkbox_1.default, { "aria-label": "Select all rows", variant: "outline", onChange: function () { return handleCheckbox(0); }, isChecked: isLoading ? false : checked === true, isIndeterminate: checked === "indeterminate" }))));
     }, [
         checked,
         freezedTextColor,
@@ -71,12 +71,12 @@ var TableHeader = function (_a) {
         theme.colors,
     ]);
     var RenderConent = (0, react_2.useCallback)(function () {
-        var _a, _b, _c;
-        return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1 }));
+        var _a, _b, _c, _d, _e, _f, _g;
+        return (react_2.default.createElement(react_1.Th, { w: 6, minW: "35px", p: 0, backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]), position: "sticky", className: "columns sticky-columns", left: "0px", zIndex: 1 }));
     }, [noBorders, theme.colors]);
     var RenderView = (0, react_2.useCallback)(function () {
-        var _a, _b, _c;
-        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.secondary) === null || _b === void 0 ? void 0 : _b[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1 }));
+        var _a, _b, _c, _d, _e, _f, _g;
+        return (react_2.default.createElement(react_1.Th, { w: 2, p: 0, minW: "2.065rem", backgroundColor: (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.hover) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.secondary) === null || _f === void 0 ? void 0 : _f[50], borderBottom: noBorders ? "none" : "0.063rem solid ".concat((_g = theme.colors) === null || _g === void 0 ? void 0 : _g.gray[300]), position: isActionFreeze ? "sticky" : "relative", className: "columns sticky-columns", right: "0px", zIndex: 1 }));
     }, [noBorders, theme.colors, isActionFreeze]);
     return (react_2.default.createElement(react_1.Tr, { pr: 0 },
         isContent && react_2.default.createElement(RenderConent, null),
@@ -84,7 +84,7 @@ var TableHeader = function (_a) {
         columns.map(function (header, index) {
             if (header === null || header === void 0 ? void 0 : header.isHidden)
                 return null;
-            return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, headerTextColor: headerTextColor, freezedBgColor: freezedBgColor, freezedTextColor: freezedTextColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }));
+            return (react_2.default.createElement(ColumnHeader, { header: header, index: index, key: header.label, columnWidths: columnWidths, handleSort: handleSort, isCheckbox: isCheckbox, headerBgColor: headerBgColor, freezedBgColor: freezedBgColor, noBorders: noBorders, columnsSort: columnsSort, headerRefs: headerRefs, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch, openFilterId: openFilterId, setOpenFilterId: setOpenFilterId }));
         }),
         isLink && react_2.default.createElement(RenderView, null)));
 };
@@ -100,7 +100,7 @@ var SortingIcon = (0, react_2.memo)(function (_a) {
 });
 var ColumnHeader = (0, react_2.memo)(function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-    var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort, openFilterId = _a.openFilterId, setOpenFilterId = _a.setOpenFilterId;
+    var header = _a.header, index = _a.index, columnWidths = _a.columnWidths, isCheckbox = _a.isCheckbox, noBorders = _a.noBorders, columnsSort = _a.columnsSort, headerRefs = _a.headerRefs, columnsSearch = _a.columnsSearch, setColumnsSearch = _a.setColumnsSearch, handleSort = _a.handleSort, openFilterId = _a.openFilterId, setOpenFilterId = _a.setOpenFilterId;
     var _v = (0, react_2.useState)(false), isHovered = _v[0], setIsHovered = _v[1];
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var isFrozen = header.isFreeze;

package/dist/Components/Table/hooks/useTable.d.ts

@@ -43,5 +43,6 @@ declare const useTable: ({ tableBorderColor, data, isPagination, selections, onS
     columnsList: TableHeaderProps[];
     handleColumnPreferences: (columns: any, extra?: Record<string, any>) => void;
     isSelecting: boolean;
+    selectAllRowsRef: import("react").MutableRefObject<DataObject[] | null>;
 };
 export default useTable;

package/dist/Components/Table/hooks/useTable.js

@@ -47,13 +47,13 @@ var useTable = function (_a) {
     var _f = (0, react_1.useState)([]), columnsSort = _f[0], setColumnsSort = _f[1];
     var _g = (0, react_1.useState)(0), currentPage = _g[0], setCurrentPage = _g[1];
     var _h = (0, react_1.useState)(noOfRowsPerPage !== null && noOfRowsPerPage !== void 0 ? noOfRowsPerPage : defaultPageSize), rowsPerPage = _h[0], setRowsPerPage = _h[1];
-    var prevRowsPerPageProp = (0, react_1.useRef)(noOfRowsPerPage);
-    if (noOfRowsPerPage !== prevRowsPerPageProp.current) {
-        prevRowsPerPageProp.current = noOfRowsPerPage;
-        if (noOfRowsPerPage !== undefined && noOfRowsPerPage !== rowsPerPage) {
+    // Keep the internal page size in sync with the `noOfRowsPerPage` prop when the
+    // consumer changes it (e.g. a page-size control outside the table).
+    (0, react_1.useEffect)(function () {
+        if (noOfRowsPerPage !== undefined) {
             setRowsPerPage(noOfRowsPerPage);
         }
-    }
+    }, [noOfRowsPerPage]);
     var tableData = data;
     var _j = (0, react_1.useState)(function () {
         return columns.map(function (col, i) {
@@ -162,14 +162,26 @@ var useTable = function (_a) {
     selectionRef.current = selection;
     var onSelectionRef = (0, react_1.useRef)(onSelection);
     onSelectionRef.current = onSelection;
+    // Rows that "select all" should toggle. Defaults to `tableData`, but in grouped
+    // "load more" mode the parent points this at the accumulated/rendered rows so
+    // select-all covers everything on screen (not just the latest page).
+    var selectAllRowsRef = (0, react_1.useRef)(null);
     var handleCheckbox = (0, react_1.useCallback)(function (id) {
-        var _a;
+        var _a, _b;
         var current = selectionRef.current;
         if (id === 0) {
+            var rows = (_a = selectAllRowsRef.current) !== null && _a !== void 0 ? _a : tableData;
+            var ids_1 = rows.map(function (item) { return item.id; });
+            var idSet_1 = new Set(ids_1);
+            var currentSet_1 = new Set(current);
+            var allSelected_1 = ids_1.length > 0 && ids_1.every(function (i) { return currentSet_1.has(i); });
             setIsSelecting(true);
             setTimeout(function () {
                 var _a;
-                var selectedItems = current.length === tableData.length ? [] : tableData.map(function (item) { return item.id; });
+                // Toggle the rendered rows while preserving any selection outside them.
+                var selectedItems = allSelected_1
+                    ? current.filter(function (i) { return !idSet_1.has(i); })
+                    : Array.from(new Set(__spreadArray(__spreadArray([], current, true), ids_1, true)));
                 setSelection(selectedItems);
                 (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
                 setIsSelecting(false);
@@ -184,7 +196,7 @@ var useTable = function (_a) {
                 selectedItems = __spreadArray(__spreadArray([], current, true), [id], false);
             }
             setSelection(selectedItems);
-            (_a = onSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionRef, selectedItems);
+            (_b = onSelectionRef.current) === null || _b === void 0 ? void 0 : _b.call(onSelectionRef, selectedItems);
         }
     }, [tableData]);
     var handleColumnPreferences = function (columns, extra) {
@@ -215,6 +227,7 @@ var useTable = function (_a) {
         columnsList: columnsList,
         handleColumnPreferences: handleColumnPreferences,
         isSelecting: isSelecting,
+        selectAllRowsRef: selectAllRowsRef,
     };
 };
 exports.default = useTable;

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

@@ -97,6 +97,7 @@ jest.mock("../../../Theme/useCustomTheme", function () { return ({
             },
             red: { 50: "#fee", 200: "#fcc", 600: "#c00" },
             border: { 200: "#e2e8f0" },
+            text: { 500: "#555", 700: "#333" },
             white: "#fff",
         },
         shadows: { sm: "0 1px 2px rgba(0,0,0,0.05)" },

package/dist/Components/Tag/Tag.d.ts

@@ -1,12 +1,4 @@
-import React, { ElementType } from "react";
-interface ChipProps {
-    label: string;
-    onIconClick?: () => void;
-    onTagClick?: () => void;
-    icon?: ElementType;
-    colorScheme?: "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
-    size?: "sm" | "md" | "lg";
-    variant?: "solid" | "outline";
-}
-declare const Tag: React.FC<ChipProps>;
+import React from "react";
+import { TagProps } from "./TagProps";
+declare const Tag: React.FC<TagProps>;
 export default Tag;

package/dist/Components/Tag/Tag.js

@@ -5,11 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@chakra-ui/react");
+// Icon size scales with the tag size so the right icon stays proportional.
+var ICON_SIZE = {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1em",
+    lg: "1.1em",
+};
 var Tag = function (_a) {
     var label = _a.label, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b, _c = _a.variant, variant = _c === void 0 ? "solid" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, icon = _a.icon, onTagClick = _a.onTagClick, onIconClick = _a.onIconClick;
-    return (react_1.default.createElement(react_2.Tag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", cursor: "pointer", onClick: function () { return onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(); } },
+    var isInteractive = !!onTagClick;
+    return (react_1.default.createElement(react_2.Tag, { size: size, variant: variant, colorScheme: colorScheme, borderRadius: "full", cursor: isInteractive ? "pointer" : "default", role: isInteractive ? "button" : undefined, "aria-label": isInteractive ? label : undefined, onClick: function () { return onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(); } },
         react_1.default.createElement(react_2.TagLabel, null, label),
-        icon && (react_1.default.createElement(react_2.TagRightIcon, { as: icon, boxSize: "1em", cursor: onIconClick ? "pointer" : "default", onClick: function (e) {
+        icon && (react_1.default.createElement(react_2.TagRightIcon, { as: icon, boxSize: ICON_SIZE[size], cursor: onIconClick ? "pointer" : "default", onClick: function (e) {
                 e.stopPropagation();
                 onIconClick === null || onIconClick === void 0 ? void 0 : onIconClick();
             }, transition: "all 0.2s ease", _hover: {

package/dist/Components/Tag/Tag.styles.d.ts

@@ -1,2 +1,2 @@
-import { ComponentStyleConfig } from "@chakra-ui/react";
-export declare const Tag: ComponentStyleConfig;
+import { ComponentMultiStyleConfig } from "@chakra-ui/react";
+export declare const Tag: ComponentMultiStyleConfig;

package/dist/Components/Tag/Tag.styles.js

@@ -1,58 +1,83 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
+// Resolve a colorScheme key to a numeric swatch from the theme. All supported
+// colorScheme values (brand + global scales) expose a 50-900 scale; fall back to
+// gray so an unknown/missing key can never throw at render time.
+var swatch = function (theme, colorScheme) {
+    var _a, _b, _c, _d;
+    if (colorScheme === void 0) { colorScheme = "primary"; }
+    return (_d = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a[colorScheme]) !== null && _b !== void 0 ? _b : (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray) !== null && _d !== void 0 ? _d : {};
+};
+// Chakra Tag is a multipart component (container / label / closeButton); styling
+// is keyed under those parts, so it needs a multi-style config with `parts`.
 exports.Tag = {
+    parts: ["container", "label", "closeButton"],
     baseStyle: {
-        borderRadius: "full",
-        fontWeight: "bold",
-        px: 3,
-        py: 1,
+        container: {
+            borderRadius: "full",
+            fontWeight: 600,
+            lineHeight: 1.2,
+            display: "inline-flex",
+            alignItems: "center",
+            transition: "background 0.15s ease, color 0.15s ease, border-color 0.15s ease",
+        },
     },
     sizes: {
+        xs: {
+            container: { fontSize: "0.6875rem", px: 2, py: 0.5, minH: "1.25rem" },
+        },
         sm: {
-            fontSize: "0.75rem",
-            px: 2,
-            py: 1,
+            container: { fontSize: "0.75rem", px: 2.5, py: 1, minH: "1.5rem" },
         },
         md: {
-            fontSize: "0.875rem",
-            px: 3,
-            py: 1.5,
+            container: { fontSize: "0.8125rem", px: 3, py: 1, minH: "1.75rem" },
         },
         lg: {
-            fontSize: "1rem",
-            px: 4,
-            py: 2,
+            container: { fontSize: "0.9375rem", px: 3.5, py: 1.5, minH: "2rem" },
         },
     },
     variants: {
         solid: function (_a) {
-            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
-            return ({
-                bg: theme.colors[colorScheme][500],
-                color: theme.colors.white,
-                _hover: {
-                    bg: theme.colors[colorScheme][600],
+            var _b, _c;
+            var theme = _a.theme, _d = _a.colorScheme, colorScheme = _d === void 0 ? "primary" : _d;
+            var c = swatch(theme, colorScheme);
+            return {
+                container: {
+                    bg: c[500],
+                    color: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white) !== null && _c !== void 0 ? _c : "#fff",
+                    _hover: { bg: c[600] },
+                    _active: { bg: c[700] },
                 },
-                _active: {
-                    bg: theme.colors[colorScheme][700],
+            };
+        },
+        subtle: function (_a) {
+            var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
+            var c = swatch(theme, colorScheme);
+            return {
+                container: {
+                    bg: c[50],
+                    color: c[700],
+                    border: "0.063rem solid",
+                    borderColor: c[100],
+                    _hover: { bg: c[100] },
+                    _active: { bg: c[200] },
                 },
-            });
+            };
         },
         outline: function (_a) {
             var theme = _a.theme, _b = _a.colorScheme, colorScheme = _b === void 0 ? "primary" : _b;
-            return ({
-                border: "0.125rem solid",
-                borderColor: theme.colors[colorScheme][500],
-                color: theme.colors[colorScheme][500],
-                bg: "transparent",
-                _hover: {
-                    bg: theme.colors[colorScheme][50],
-                },
-                _active: {
-                    bg: theme.colors[colorScheme][100],
+            var c = swatch(theme, colorScheme);
+            return {
+                container: {
+                    border: "0.094rem solid",
+                    borderColor: c[500],
+                    color: c[600],
+                    bg: "transparent",
+                    _hover: { bg: c[50] },
+                    _active: { bg: c[100] },
                 },
-            });
+            };
         },
     },
     defaultProps: {

package/dist/Components/Tag/Tag.test.d.ts

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

package/dist/Components/Tag/Tag.test.js

@@ -0,0 +1,68 @@
+"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 lucide_react_1 = require("lucide-react");
+var Tag_1 = __importDefault(require("./Tag"));
+var Tag_styles_1 = require("./Tag.styles");
+// Register the Tag component theme + the color scales the variants read, so the
+// token-driven styles resolve exactly as they do inside the design library.
+var theme = (0, react_3.extendTheme)({
+    colors: {
+        primary: { 50: "#f7edfc", 100: "#eacff7", 200: "#d4a0ef", 500: "#8B3FC8", 600: "#7632b0", 700: "#5e2789" },
+        green: { 50: "#e9f8ef", 100: "#bbe9cc", 200: "#9adeb4", 500: "#23b85c", 600: "#20a754", 700: "#198341" },
+        gray: { 50: "#f9f7fb", 100: "#f0eaf6", 200: "#e4d9f0", 500: "#7d6ea0", 600: "#5e527a", 700: "#4a4060" },
+        white: "#fff",
+    },
+    components: { Tag: Tag_styles_1.Tag },
+});
+var renderWithChakra = function (ui) {
+    return (0, react_2.render)(react_1.default.createElement(react_3.ChakraProvider, { theme: theme }, ui));
+};
+describe("Tag", function () {
+    it("renders its label", function () {
+        renderWithChakra(react_1.default.createElement(Tag_1.default, { label: "Active" }));
+        expect(react_2.screen.getByText("Active")).toBeInTheDocument();
+    });
+    it("fires onTagClick when the tag is clicked", function () {
+        var onTagClick = jest.fn();
+        renderWithChakra(react_1.default.createElement(Tag_1.default, { label: "Click me", onTagClick: onTagClick }));
+        react_2.fireEvent.click(react_2.screen.getByText("Click me"));
+        expect(onTagClick).toHaveBeenCalledTimes(1);
+    });
+    it("exposes a button role and aria-label when interactive", function () {
+        renderWithChakra(react_1.default.createElement(Tag_1.default, { label: "Filter", onTagClick: function () { } }));
+        expect(react_2.screen.getByRole("button", { name: "Filter" })).toBeInTheDocument();
+    });
+    it("is not a button when no onTagClick is provided", function () {
+        renderWithChakra(react_1.default.createElement(Tag_1.default, { label: "Static" }));
+        expect(react_2.screen.queryByRole("button")).not.toBeInTheDocument();
+    });
+    it("renders the icon and fires onIconClick without bubbling to onTagClick", function () {
+        var onTagClick = jest.fn();
+        var onIconClick = jest.fn();
+        var container = renderWithChakra(react_1.default.createElement(Tag_1.default, { label: "Removable", icon: lucide_react_1.X, onTagClick: onTagClick, onIconClick: onIconClick })).container;
+        var svg = container.querySelector("svg");
+        expect(svg).toBeTruthy();
+        react_2.fireEvent.click(svg);
+        expect(onIconClick).toHaveBeenCalledTimes(1);
+        // stopPropagation must prevent the icon click from triggering the tag click.
+        expect(onTagClick).not.toHaveBeenCalled();
+    });
+    it("renders across all sizes and variants without throwing", function () {
+        var sizes = ["xs", "sm", "md", "lg"];
+        var variants = ["solid", "subtle", "outline"];
+        sizes.forEach(function (size) {
+            return variants.forEach(function (variant) {
+                var unmount = renderWithChakra(react_1.default.createElement(Tag_1.default, { label: "".concat(size, "-").concat(variant), size: size, variant: variant })).unmount;
+                expect(react_2.screen.getByText("".concat(size, "-").concat(variant))).toBeInTheDocument();
+                unmount();
+            });
+        });
+    });
+});

package/dist/Components/Tag/TagProps.d.ts

@@ -0,0 +1,13 @@
+import { ElementType } from "react";
+export type TagColorScheme = "primary" | "secondary" | "tertiary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+export type TagSize = "xs" | "sm" | "md" | "lg";
+export type TagVariant = "solid" | "outline" | "subtle";
+export interface TagProps {
+    label: string;
+    onIconClick?: () => void;
+    onTagClick?: () => void;
+    icon?: ElementType;
+    colorScheme?: TagColorScheme;
+    size?: TagSize;
+    variant?: TagVariant;
+}

package/dist/Components/Tag/TagProps.js

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

package/dist/Components/UpgradeButton/UpgradeButton.d.ts

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

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -0,0 +1,73 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@chakra-ui/react");
+var lucide_react_1 = require("lucide-react");
+var useCustomTheme_1 = require("../../Theme/useCustomTheme");
+var sizeMap = {
+    sm: { px: "12px", py: "4px", font: "12px", sub: "8px", icon: 11, radius: "40px" },
+    md: { px: "20px", py: "5px", font: "14px", sub: "10px", icon: 13, radius: "50px" },
+    lg: { px: "26px", py: "8px", font: "16px", sub: "11px", icon: 16, radius: "60px" },
+};
+var FALLBACK_GRADIENT = { from: "#667eea", to: "#764ba2" };
+var UpgradeButton = function (_a) {
+    var _b, _c;
+    var label = _a.label, mobileLabel = _a.mobileLabel, subtitle = _a.subtitle, _d = _a.icon, icon = _d === void 0 ? lucide_react_1.Sparkles : _d, _e = _a.iconColor, iconColor = _e === void 0 ? "#FFD66B" : _e, _f = _a.variant, variant = _f === void 0 ? "brand" : _f, gradient = _a.gradient, _g = _a.size, size = _g === void 0 ? "md" : _g, _h = _a.shimmer, shimmer = _h === void 0 ? true : _h, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, _k = _a.isDisabled, isDisabled = _k === void 0 ? false : _k, _l = _a.maxLabelWidth, maxLabelWidth = _l === void 0 ? "160px" : _l, ariaLabel = _a.ariaLabel, onClick = _a.onClick;
+    var theme = (0, useCustomTheme_1.useCustomTheme)();
+    var c = theme.colors;
+    var themeGradient = (_b = c.gradient) !== null && _b !== void 0 ? _b : FALLBACK_GRADIENT;
+    var variantGradient = {
+        brand: themeGradient,
+        primary: { from: c.primary[500], to: c.primary[700] },
+        secondary: { from: c.secondary[400], to: c.secondary[600] },
+        success: { from: c.semantic.success[400], to: c.semantic.success[600] },
+        warning: { from: c.semantic.warning[400], to: c.semantic.warning[600] },
+        danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
+        info: { from: c.semantic.info[400], to: c.semantic.info[600] },
+    };
+    var resolved = (_c = gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant]) !== null && _c !== void 0 ? _c : themeGradient;
+    var s = sizeMap[size];
+    var Icon = icon;
+    var blocked = isLoading || isDisabled;
+    var g = "linear-gradient(135deg, ".concat(resolved.from, " 0%, ").concat(resolved.to, " 100%)");
+    var gReversed = "linear-gradient(135deg, ".concat(resolved.to, " 0%, ").concat(resolved.from, " 100%)");
+    var hasMobile = !!mobileLabel && mobileLabel !== label;
+    return (react_1.default.createElement(react_2.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: "white", borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _focusVisible: { outline: "none", boxShadow: "0 0 0 3px ".concat(resolved.from, "55") }, _hover: blocked
+            ? undefined
+            : __assign({ transform: "translateY(-2px)", bgImage: gReversed, boxShadow: "0 10px 30px ".concat(resolved.from, "66") }, (shimmer ? { _before: { left: "130%" } } : {})), sx: shimmer
+            ? {
+                _before: {
+                    content: '""',
+                    position: "absolute",
+                    top: 0,
+                    left: "-75%",
+                    width: "55%",
+                    height: "100%",
+                    background: "linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent)",
+                    transform: "skewX(-20deg)",
+                    transition: "left 0.7s ease",
+                    pointerEvents: "none",
+                },
+            }
+            : undefined },
+        react_1.default.createElement(react_2.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1 },
+            react_1.default.createElement(react_2.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block" }, label),
+            hasMobile && (react_1.default.createElement(react_2.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" } }, mobileLabel)),
+            isLoading ? (react_1.default.createElement(react_2.Spinner, { size: "xs", thickness: "1.5px", color: iconColor })) : (Icon && react_1.default.createElement(Icon, { size: s.icon, color: iconColor, style: { flexShrink: 0 } }))),
+        subtitle && (react_1.default.createElement(react_2.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: iconColor, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1 }, subtitle))));
+};
+exports.default = UpgradeButton;

package/dist/Components/UpgradeButton/UpgradeButtonProps.d.ts

@@ -0,0 +1,43 @@
+import { ElementType } from "react";
+export type UpgradeButtonSize = "sm" | "md" | "lg";
+/**
+ * Theme-aware color variants. Each resolves to a gradient built from the
+ * active theme's tokens, so the button blends with whichever theme is active.
+ */
+export type UpgradeButtonVariant = "brand" | "primary" | "secondary" | "success" | "warning" | "danger" | "info";
+export interface UpgradeButtonProps {
+    /** Primary label (shown on md+ screens). */
+    label: string;
+    /** Compact label for small screens. Defaults to `label`. */
+    mobileLabel?: string;
+    /** Optional small second line, e.g. a plan-expiry message. */
+    subtitle?: string;
+    /** Leading icon. Defaults to lucide `Sparkles`. Pass null to hide. */
+    icon?: ElementType | null;
+    /** Icon color. Defaults to a gold tone. */
+    iconColor?: string;
+    /**
+     * Theme-aware color variant. Defaults to `brand` (the active theme's
+     * gradient). Ignored when an explicit `gradient` is provided.
+     */
+    variant?: UpgradeButtonVariant;
+    /**
+     * Explicit gradient stops. Overrides `variant` and the theme gradient when
+     * provided.
+     */
+    gradient?: {
+        from: string;
+        to: string;
+    };
+    size?: UpgradeButtonSize;
+    /** Animated light sweep on hover. Default true. */
+    shimmer?: boolean;
+    /** Show a spinner and block interaction. */
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    /** Truncate the label beyond this width. */
+    maxLabelWidth?: string;
+    /** Accessible label (falls back to `label`). */
+    ariaLabel?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}

package/dist/Components/UpgradeButton/UpgradeButtonProps.js

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

package/dist/Components/UserDetails/AddUserModal.d.ts

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