pixelize-design-library 2.4.1 → 2.4.2-beta.1

package/dist/Components/SideBar/sidebarAccentColors.d.ts

@@ -1,21 +1,7 @@
-import type { PaletteProps, ThemeName } from "../../Theme/tokens/types";
-export declare const getSidebarActiveAccent: (colors: PaletteProps, brand: ThemeName | undefined, isDark: boolean) => {
+import type { PaletteProps } from "../../Theme/tokens/types";
+export type SidebarActiveAccent = {
     icon: string;
     label: string;
 };
-/**
- * `sidebar.background` never inverts across modes (`buildDarkPalette.ts`), but `primary`
- * does — so `primary[300]`/`primary[100]` correctly read as a light accent/label against a
- * dark canvas in light mode, then invert to near-black in dark mode against that SAME
- * permanently-dark canvas. Reusing each rung's own light-mode value in dark mode is the
- * exact pairing already proven legible today.
- *
- * `brand` comes from `PixelizeThemeProvider`'s context, read directly (not via the throwing
- * `useThemeMode()`) so a consumer on a plain `ChakraProvider` — dark mode is opt-in per
- * CLAUDE.md — degrades to the current-mode value instead of crashing.
- */
-export declare const useSidebarActiveAccent: (colors: PaletteProps, isDark: boolean) => {
-    icon: string;
-    label: string;
-};
-//# sourceMappingURL=sidebarAccentColors.d.ts.map
+/** Resolved per brand at palette-build time, so the rail needs no mode or brand lookup. */
+export declare const getSidebarActiveAccent: (colors: PaletteProps) => SidebarActiveAccent;

package/dist/Components/SideBar/sidebarAccentColors.js

@@ -1,36 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSidebarActiveAccent = exports.getSidebarActiveAccent = void 0;
-const react_1 = require("react");
-const brands_1 = require("../../Theme/tokens/brands");
-const PixelizeThemeProvider_1 = require("../../Theme/provider/PixelizeThemeProvider");
-const getSidebarActiveAccent = (colors, brand, isDark) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    const fallbackIcon = (_d = (_b = (_a = colors.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : "#ffffff";
-    const fallbackLabel = (_h = (_f = (_e = colors.primary) === null || _e === void 0 ? void 0 : _e[100]) !== null && _f !== void 0 ? _f : (_g = colors.gray) === null || _g === void 0 ? void 0 : _g[100]) !== null && _h !== void 0 ? _h : "#ffffff";
-    if (!isDark)
-        return { icon: fallbackIcon, label: fallbackLabel };
-    const lightPrimary = brand ? (_j = brands_1.lightPalettes[brand]) === null || _j === void 0 ? void 0 : _j.primary : undefined;
-    return {
-        icon: (_k = lightPrimary === null || lightPrimary === void 0 ? void 0 : lightPrimary[300]) !== null && _k !== void 0 ? _k : fallbackIcon,
-        label: (_l = lightPrimary === null || lightPrimary === void 0 ? void 0 : lightPrimary[100]) !== null && _l !== void 0 ? _l : fallbackLabel,
-    };
-};
+exports.getSidebarActiveAccent = void 0;
+/** Resolved per brand at palette-build time, so the rail needs no mode or brand lookup. */
+const getSidebarActiveAccent = (colors) => ({
+    icon: colors.sidebar.activeIcon,
+    label: colors.sidebar.activeLabel,
+});
 exports.getSidebarActiveAccent = getSidebarActiveAccent;
-/**
- * `sidebar.background` never inverts across modes (`buildDarkPalette.ts`), but `primary`
- * does — so `primary[300]`/`primary[100]` correctly read as a light accent/label against a
- * dark canvas in light mode, then invert to near-black in dark mode against that SAME
- * permanently-dark canvas. Reusing each rung's own light-mode value in dark mode is the
- * exact pairing already proven legible today.
- *
- * `brand` comes from `PixelizeThemeProvider`'s context, read directly (not via the throwing
- * `useThemeMode()`) so a consumer on a plain `ChakraProvider` — dark mode is opt-in per
- * CLAUDE.md — degrades to the current-mode value instead of crashing.
- */
-const useSidebarActiveAccent = (colors, isDark) => {
-    const themeMode = (0, react_1.useContext)(PixelizeThemeProvider_1.ThemeModeContext);
-    const brand = themeMode === null || themeMode === void 0 ? void 0 : themeMode.brand;
-    return (0, react_1.useMemo)(() => (0, exports.getSidebarActiveAccent)(colors, brand, isDark), [colors, brand, isDark]);
-};
-exports.useSidebarActiveAccent = useSidebarActiveAccent;

package/dist/Components/SignInActivityTable/SignInActivityTable.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import { SignInActivityTableProps } from "./SignInActivityTableProps";
 declare const SignInActivityTable: React.FC<SignInActivityTableProps>;
 export default SignInActivityTable;
-//# sourceMappingURL=SignInActivityTable.d.ts.map

package/dist/Components/SignInActivityTable/SignInActivityTable.js

@@ -17,15 +17,14 @@ const DEFAULT_LABELS = {
     noActivity: "No recent sign-in activity",
 };
 const SignInActivityTable = ({ devices, isLoading = false, labels: labelOverrides, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
-    const border = (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : "#E2E8F0";
-    const surface = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FFFFFF";
-    const muted = (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#64748B";
-    const heading = (_k = (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[800]) !== null && _k !== void 0 ? _k : "#1E293B";
-    const headBg = (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#F8FAFC";
-    const shadow = (_p = (_o = colors === null || colors === void 0 ? void 0 : colors.boxShadow) === null || _o === void 0 ? void 0 : _o.default) !== null && _p !== void 0 ? _p : "#0000000D";
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    const muted = colors.textMuted;
+    const heading = colors.header[500];
+    const headBg = colors.backgroundColor.tableHeader;
+    const shadow = colors.boxShadow.default;
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",

package/dist/Components/SignInActivityTable/SignInActivityTableProps.d.ts

@@ -19,4 +19,3 @@ export interface SignInActivityTableProps {
     isLoading?: boolean;
     labels?: SignInActivityLabels;
 }
-//# sourceMappingURL=SignInActivityTableProps.d.ts.map

package/dist/Components/Skeletons/SkeletonProps.d.ts

@@ -2,4 +2,3 @@ import { SkeletonProps as ChakraSkeleton, SkeletonTextProps } from "@chakra-ui/r
 export type SkeletonProps = Pick<ChakraSkeleton, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "noOfLines" | "width"> & {
     type: "skeleton" | "circle" | "text";
 } & Partial<Pick<SkeletonTextProps, "spacing" | "skeletonHeight">>;
-//# sourceMappingURL=SkeletonProps.d.ts.map

package/dist/Components/Skeletons/Skeletons.d.ts

@@ -1,3 +1,2 @@
 import { SkeletonProps } from "./SkeletonProps";
 export default function Skeletons({ startColor, endColor, height, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Skeletons.d.ts.map

package/dist/Components/Slider/Slider.d.ts

@@ -15,4 +15,3 @@ type SliderImage = {
 };
 declare const Slider: React.FC<ImageSliderProps>;
 export default Slider;
-//# sourceMappingURL=Slider.d.ts.map

package/dist/Components/Slider/Slider.js

@@ -6,7 +6,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
     const timeoutRef = (0, react_1.useRef)(null);
@@ -38,6 +38,6 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
                     .sort((a, b) => a.order - b.order)
                     .map((image, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: `${100 / slides.length}%`, h: "auto", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.AspectRatio, { ratio: ratio, w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: isMobile && image.mobilePreviewUrl
                                 ? image.mobilePreviewUrl
-                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { color: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200] } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { color: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[200] } })] })), slides.length > 1 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, children: slides.map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, bg: idx === currentIndex ? "white" : "whiteAlpha.600", borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), transition: "all 0.3s" }, idx))) }))] }));
+                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { color: colors.gray[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: colors.gray[200] } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { color: colors.gray[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: colors.gray[200] } })] })), slides.length > 1 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, children: slides.map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, bg: idx === currentIndex ? "white" : "whiteAlpha.600", borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), transition: "all 0.3s" }, idx))) }))] }));
 };
 exports.default = Slider;

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

@@ -2,4 +2,3 @@ import React from "react";
 import { StageItemProps } from "./StageProgressProps";
 declare const StageItem: React.FC<StageItemProps>;
 export default StageItem;
-//# sourceMappingURL=StageItem.d.ts.map

package/dist/Components/StageProgress/StageItem.js

@@ -62,17 +62,18 @@ const StageItem = ({ label, index, total, state, variant = "chevron", size = "md
     // Chevron overlaps into the previous point, leaving a thin 2px divider.
     const overlap = isChevron && !isFirst ? -(s.arrow - 2) : 0;
     const clipPath = isChevron ? clipFor(index, total, s.arrow) : "none";
+    const r = theme.radii;
     const borderRadius = variant === "pills"
         ? "full"
         : variant === "bar"
             ? isFirst && isLast
-                ? "8px"
+                ? "lg"
                 : isFirst
-                    ? "8px 2px 2px 8px"
+                    ? `${r.lg} ${r.sm} ${r.sm} ${r.lg}`
                     : isLast
-                        ? "2px 8px 8px 2px"
-                        : "2px"
-            : "0";
+                        ? `${r.sm} ${r.lg} ${r.lg} ${r.sm}`
+                        : "sm"
+            : "none";
     // Upcoming pills read as outlined; other states stay filled.
     const isOutlinePill = variant === "pills" && state === "upcoming";
     const hoverStyles = interactive
@@ -81,7 +82,7 @@ const StageItem = ({ label, index, total, state, variant = "chevron", size = "md
             : { bg: palette.strong, color: palette.onStrong, borderColor: palette.strong }
         : undefined;
     const showTooltip = ((_a = label === null || label === void 0 ? void 0 : label.length) !== null && _a !== void 0 ? _a : 0) > tooltipThreshold;
-    const content = ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, role: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, onClick: interactive ? onClick : undefined, flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, pl: `${leftPad}px`, pr: `${rightPad}px`, bg: isOutlinePill ? "transparent" : bg, color: isOutlinePill ? palette.mutedText : color, border: isOutlinePill ? "1px solid" : undefined, borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "background 0.18s ease, color 0.18s ease, filter 0.18s ease, border-color 0.18s ease", sx: { clipPath }, _hover: interactive ? { ...hoverStyles, filter: "brightness(0.97)" } : undefined, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, children: [showCheck && state === "completed" && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] }) }));
+    const content = ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: ref, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "aria-current": state === "active" ? "step" : undefined, onClick: interactive ? onClick : undefined, flexShrink: 0, minWidth: minWidth || s.minW, height: s.h, ml: `${overlap}px`, pl: `${leftPad}px`, pr: `${rightPad}px`, bg: isOutlinePill ? "transparent" : bg, color: isOutlinePill ? palette.mutedText : color, border: isOutlinePill ? "1px solid" : "none", borderColor: isOutlinePill ? palette.muted : undefined, borderRadius: borderRadius, fontSize: s.font, fontWeight: state === "active" ? 600 : 500, display: "flex", alignItems: "center", justifyContent: isChevron ? "flex-start" : "center", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, transition: "background 0.18s ease, color 0.18s ease, filter 0.18s ease, border-color 0.18s ease", sx: { clipPath }, _hover: interactive ? { ...hoverStyles, filter: "brightness(0.97)" } : undefined, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: isChevron ? "flex-start" : "center", gap: "6px", width: "100%", minW: 0, children: [showCheck && state === "completed" && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: s.icon, style: { flexShrink: 0 } })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", textAlign: "center", flex: "1", children: label })] }) }));
     if (showTooltip) {
         return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: label, placement: "top", openDelay: 300, children: content }));
     }

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

@@ -2,4 +2,3 @@ import React from "react";
 import { StageProgressProps } from "./StageProgressProps";
 declare const StageProgress: React.FC<StageProgressProps>;
 export default StageProgress;
-//# sourceMappingURL=StageProgress.d.ts.map

package/dist/Components/StageProgress/StageProgress.js

@@ -11,7 +11,7 @@ const StepperStage_1 = __importDefault(require("./StepperStage"));
 const scrollSxFor = (thumb) => ({
     "&::-webkit-scrollbar": { height: "4px" },
     "&::-webkit-scrollbar-thumb": {
-        borderRadius: "10px",
+        borderRadius: "full",
         backgroundColor: thumb,
     },
     "&::-webkit-scrollbar-track": { background: "transparent" },
@@ -27,7 +27,7 @@ const StageProgress = ({ stages, variant = "chevron", value, onChange, size = "m
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (isLoading) {
         const skeletonH = size === "sm" ? "28px" : size === "lg" ? "44px" : "36px";
-        return ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem", children: Array.from({ length: 6 }).map((_, i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: skeletonH, minWidth: minStageWidth || "160px", borderRadius: "6px", flexShrink: 0 }, i))) }));
+        return ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: "6px", width: "100%", overflowX: "hidden", p: "0.1rem", children: Array.from({ length: 6 }).map((_, i) => ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: skeletonH, minWidth: minStageWidth || "160px", borderRadius: "md", flexShrink: 0 }, i))) }));
     }
     const activeIndex = stages.findIndex((st) => st.id === value);
     const stateFor = (index) => {

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

@@ -83,4 +83,3 @@ export interface StagePalette {
 }
 /** Resolve a chevron palette for a given color scheme from the theme. */
 export declare const resolveStagePalette: (theme: CustomThemeProps, colorScheme?: StageColorScheme) => StagePalette;
-//# sourceMappingURL=StageProgressProps.d.ts.map

package/dist/Components/StageProgress/StageProgressProps.js

@@ -2,21 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveStagePalette = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-const SEMANTIC = ["success", "error", "warning", "info"];
+/** Exhaustive by construction: a new scheme that maps nowhere is a compile error. */
+const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "secondary" || scheme === "tertiary"
+    ? colors[scheme]
+    : colors.semantic[scheme];
 /** Resolve a chevron palette for a given color scheme from the theme. */
 const resolveStagePalette = (theme, colorScheme = "primary") => {
-    var _a;
-    const colors = theme.colors;
-    const scale = SEMANTIC.includes(colorScheme)
-        ? theme.colors.semantic[colorScheme]
-        : colors[colorScheme];
-    const gray = (_a = colors.gray) !== null && _a !== void 0 ? _a : {};
-    const get = (s, k, fb) => (s && s[k]) || fb;
-    const strong = get(scale, 500, "#3B82F6");
-    const white = theme.colors.white || "#FFFFFF";
-    const black = theme.colors.black || "#000000";
+    const { gray, white, black } = theme.colors;
+    const scale = scaleFor(theme.colors, colorScheme);
+    const strong = scale[500];
     const onStrong = (0, accentText_1.onFilled)(strong, white, black);
-    const soft = get(scale, 100, "#E6F0FF");
+    const soft = scale[100];
     // A fixed [700] fails AA against [100] for some hues (orange 3.30, borderline green 3.58) —
     // walk the scale's own rungs against this specific tint instead.
     const softText = (0, accentText_1.accentTextOnCanvas)(scale, soft);
@@ -25,9 +21,9 @@ const resolveStagePalette = (theme, colorScheme = "primary") => {
         softText,
         strong,
         onStrong,
-        hover: get(scale, 600, "#2563EB"),
-        muted: get(gray, 100, "#F1F5F9"),
-        mutedText: get(gray, 500, "#64748B"),
+        hover: scale[600],
+        muted: gray[100],
+        mutedText: gray[500],
     };
 };
 exports.resolveStagePalette = resolveStagePalette;

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

@@ -2,4 +2,3 @@ import React from "react";
 import { StepperStageProps } from "./StageProgressProps";
 declare const StepperStage: React.FC<StepperStageProps>;
 export default StepperStage;
-//# sourceMappingURL=StepperStage.d.ts.map

package/dist/Components/StageProgress/StepperStage.js

@@ -31,7 +31,7 @@ const StepperStage = ({ label, number, state, size = "md", colorScheme = "primar
     const circleColor = filled ? palette.onStrong : palette.mutedText;
     const circleBorder = filled ? palette.strong : palette.muted;
     const line = (done, hidden) => ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", height: "2px", bg: done ? palette.strong : palette.muted, visibility: hidden ? "hidden" : "visible", transition: "background 0.18s ease" }));
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, role: "group", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: "all 0.18s ease", "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: ref, direction: "column", align: "center", flex: "1", minWidth: s.minW, flexShrink: 0, as: (interactive ? "button" : "div"), type: interactive ? "button" : undefined, "data-group": "", border: "none", bg: "transparent", cursor: interactive ? "pointer" : "default", opacity: disabled ? 0.55 : 1, onClick: interactive ? onClick : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", width: "100%", children: [line(leftDone, isFirst), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.circle, borderRadius: "full", flexShrink: 0, bg: circleBg, color: circleColor, border: "2px solid", borderColor: circleBorder, fontSize: s.font, fontWeight: 600, transition: "all 0.18s ease", "aria-current": state === "active" ? "step" : undefined, sx: state === "active"
                             ? { boxShadow: `0 0 0 4px ${palette.soft}` }
                             : undefined, _groupHover: interactive
                             ? { borderColor: palette.strong, color: filled ? palette.onStrong : palette.strong }

package/dist/Components/Switch/Switch.d.ts

@@ -1,3 +1,2 @@
 import { SwitchProps } from "./SwitchProps";
 export default function Switch({ leftText, rightText, leftIcon, rightIcon, onSwitchToggle, switchActive, }: SwitchProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Switch.d.ts.map

package/dist/Components/Switch/SwitchProps.d.ts

@@ -6,4 +6,3 @@ export type SwitchProps = {
     onSwitchToggle: (value: "left" | "right") => void;
     switchActive: "left" | "right";
 };
-//# sourceMappingURL=SwitchProps.d.ts.map

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

@@ -1,3 +1,2 @@
 import { TableProps } from "./TableProps";
 export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferences, paginationMode, infiniteScroll, hasMore, isLoadingMore, groupLoadMore, loadMoreText, loadMorePosition, loadMoreChunkSize, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density, stripe, groupColors, onAddItem, emptyState, onRefresh, }: TableProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Table.d.ts.map

package/dist/Components/Table/Table.js

@@ -36,7 +36,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
 }, paginationMode = "client", infiniteScroll = false, hasMore, isLoadingMore = false, groupLoadMore = false, loadMoreText = "Load more", loadMorePosition = "top", loadMoreChunkSize, noOfRowsPerPage = 50, totalRecords = 0, onPagination, isTableSettings = false, headerActions, onGlobalSearch, onNoOfRowsPerPageChange, paginationSelectOptions, tableMaxHeight, minVisibleRows, maxVisibleRows, autoFitViewport, tableSettings, filterSidebar, loadingSkeletonRows, defaultVisibleColumns, density = "normal", stripe, groupColors, onAddItem, emptyState, onRefresh,
 // onColumnFilter
  }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
+    var _a, _b, _c, _d;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [columnsSearch, setColumnsSearch] = (0, react_1.useState)({});
     const tableContainerRef = (0, react_1.useRef)(null);
@@ -361,9 +361,9 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
-      ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: (_d = (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.background) === null || _d === void 0 ? void 0 : _d[50], border: `0.063rem solid ${(_e = theme.colors.border) === null || _e === void 0 ? void 0 : _e[500]}`, borderRadius: 3, children: [filterSidebar && filterMode === "modal" && ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: (_g = (_f = theme.colors) === null || _f === void 0 ? void 0 : _f.background) === null || _g === void 0 ? void 0 : _g[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [(0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 0, children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { theme: theme, sections: (_h = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _h !== void 0 ? _h : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "start", children: [filterMode === "sidebar" && ((0, jsx_runtime_1.jsx)(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: (_j = theme.colors.border) === null || _j === void 0 ? void 0 : _j[500], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_k = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _k !== void 0 ? _k : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: (_m = (_l = theme.colors) === null || _l === void 0 ? void 0 : _l.background) === null || _m === void 0 ? void 0 : _m[50], borderBottom: `0.063rem solid ${(_o = theme.colors.border) === null || _o === void 0 ? void 0 : _o[500]}`, children: [filterSidebar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Filter", placement: "top", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-block", children: [(0, jsx_runtime_1.jsx)(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? (_q = (_p = theme.colors) === null || _p === void 0 ? void 0 : _p.primary) === null || _q === void 0 ? void 0 : _q[500] : (_s = (_r = theme.colors) === null || _r === void 0 ? void 0 : _r.text) === null || _s === void 0 ? void 0 : _s[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
-                                                                        color: (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.primary) === null || _u === void 0 ? void 0 : _u[500],
-                                                                    } }), sidebarActiveCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: (_w = (_v = theme.colors) === null || _v === void 0 ? void 0 : _v.primary) === null || _w === void 0 ? void 0 : _w[500], color: "white", borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
+      ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: theme.colors.background[50], border: `0.063rem solid ${theme.colors.border[500]}`, borderRadius: "base", children: [filterSidebar && filterMode === "modal" && ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isFilterModalOpen, onClose: onFilterModalClose, size: "4xl", scrollBehavior: "inside", children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: theme.colors.background[50], my: 0, top: "10%", position: "fixed", left: "auto", right: "auto", children: [(0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { p: 0, children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { theme: theme, sections: (_c = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _c !== void 0 ? _c : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: (sel) => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, sel); onFilterModalClose(); }, onClear: () => { var _a; (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) === null || _a === void 0 ? void 0 : _a.call(filterSidebar); }, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })] })] })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "start", children: [filterMode === "sidebar" && ((0, jsx_runtime_1.jsx)(MotionBox, { initial: { width: 0 }, animate: { width: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? 180 : 0 }, transition: { type: "tween", duration: 0.5 }, overflow: "hidden", flexShrink: 0, borderRight: "1px solid", borderColor: theme.colors.border[500], style: { height: controlsHeight + tableMaxH }, minHeight: (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isFilterSidebar) ? "32rem" : "auto", children: (0, jsx_runtime_1.jsx)(LeftFilterPane_1.default, { height: controlsHeight + tableMaxH, theme: theme, sections: (_d = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.sidebarOptions) !== null && _d !== void 0 ? _d : [], selected: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.selected, onApply: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply, onClear: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler, isApplyLoading: filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.isApplyLoading, filterMode: filterMode }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: controlsHeight, gap: 3, flexWrap: "nowrap", bg: theme.colors.background[50], borderBottom: `0.063rem solid ${theme.colors.border[500]}`, children: [filterSidebar && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Filter", placement: "top", children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-block", children: [(0, jsx_runtime_1.jsx)(react_3.Icon, { as: lucide_react_1.Filter, transform: "scaleX(-1)", cursor: "pointer", boxSize: 4, color: sidebarActiveCount > 0 ? theme.colors.accentText : theme.colors.text[500], onClick: filterMode === "modal" ? onFilterModalOpen : filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.filterSidebarToggle, _hover: {
+                                                                        color: theme.colors.accentText,
+                                                                    } }), sidebarActiveCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "-6px", right: "-10px", bg: theme.colors.primary[500], color: theme.colors.onPrimary, borderRadius: "full", p: "1px", cursor: "pointer", onClick: (e) => {
                                                                         var _a;
                                                                         e.stopPropagation();
                                                                         if (filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onClearAllHandler) {
@@ -372,8 +372,8 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                                                                         else {
                                                                             (_a = filterSidebar === null || filterSidebar === void 0 ? void 0 : filterSidebar.onApply) === null || _a === void 0 ? void 0 : _a.call(filterSidebar, {});
                                                                         }
-                                                                    }, _hover: { bg: (_y = (_x = theme.colors) === null || _x === void 0 ? void 0 : _x.red) === null || _y === void 0 ? void 0 : _y[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 10, strokeWidth: 3 }) }))] }) }), (0, jsx_runtime_1.jsx)(Divider_1.default, {})] })), (0, jsx_runtime_1.jsx)(TableSearch_1.default, { onSearch: onGlobalSearch }), isTableSettings && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(TableSettings_1.default, { columns: columnsList, onSave: (cols, group) => handleSettingsSave(cols, group), tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState })] })), onRefresh && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Refresh", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
-                                                                color: theme.colors.primary[500],
+                                                                    }, _hover: { bg: theme.colors.red[600] }, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 10, strokeWidth: 3 }) }))] }) }), (0, jsx_runtime_1.jsx)(Divider_1.default, {})] })), (0, jsx_runtime_1.jsx)(TableSearch_1.default, { onSearch: onGlobalSearch }), isTableSettings && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(TableSettings_1.default, { columns: columnsList, onSave: (cols, group) => handleSettingsSave(cols, group), tableSettings: tableSettings, density: densityState, onDensityChange: handleDensityChange, groupBy: groupByState })] })), onRefresh && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Refresh", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", justifyContent: "flex-end", cursor: "pointer", transition: "all 0.2s ease", color: theme.colors.text[500], _hover: {
+                                                                color: theme.colors.accentText,
                                                                 transform: "scale(1.1)"
                                                             }, onClick: async () => {
                                                                 if (!isRefreshing) {
@@ -389,9 +389,9 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                                                                 animation: isRefreshing
                                                                     ? "pixelize-table-spin 1s linear infinite"
                                                                     : "none"
-                                                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16 }) }) })] })), headerActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(HeaderActions_1.default, { actions: headerActions, selections: selection })] })), (0, jsx_runtime_1.jsx)(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: (_0 = (_z = theme.colors) === null || _z === void 0 ? void 0 : _z.text) === null || _0 === void 0 ? void 0 : _0[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 18 }), color: (_2 = (_1 = theme.colors) === null || _1 === void 0 ? void 0 : _1.text) === null || _2 === void 0 ? void 0 : _2[500], _hover: {
-                                                                        color: (_4 = (_3 = theme.colors) === null || _3 === void 0 ? void 0 : _3.primary) === null || _4 === void 0 ? void 0 : _4[500],
-                                                                    }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: (_5 = theme.colors.background) === null || _5 === void 0 ? void 0 : _5[50], boxShadow: "lg", children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
+                                                            }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 16 }) }) })] })), headerActions && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(HeaderActions_1.default, { actions: headerActions, selections: selection })] })), (0, jsx_runtime_1.jsx)(ActiveFilters_1.default, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
+                                                                        color: theme.colors.accentText,
+                                                                    }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.background[50], boxShadow: "lg", children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, children: (0, jsx_runtime_1.jsx)(Pagination_1.default, { columns: columns, currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions, isVisiblity: true }) }) }) })] }))] })] }), (0, jsx_runtime_1.jsxs)(react_2.TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
                                             '&::-webkit-scrollbar': {
                                                 width: '6px',
                                                 height: isCompactRows ? '0px' : '6px',
@@ -401,11 +401,11 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                                             },
                                             '&::-webkit-scrollbar-track': {
                                                 background: theme.colors.gray[100],
-                                                borderRadius: '3px',
+                                                borderRadius: 'base',
                                             },
                                             '&::-webkit-scrollbar-thumb': {
                                                 background: theme.colors.gray[400],
-                                                borderRadius: '3px',
+                                                borderRadius: 'base',
                                             },
                                             '&::-webkit-scrollbar-thumb:hover': {
                                                 background: theme.colors.gray[500],
@@ -415,7 +415,7 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                                                 scrollbarWidth: 'thin',
                                             },
                                             scrollbarColor: `${theme.colors.gray[400]} ${theme.colors.gray[100]}`,
-                                        }, children: [(0, jsx_runtime_1.jsxs)(react_3.Table, { variant: "simple", size: "sm", minW: "100%", className: "table_wrapper", sx: {
+                                        }, children: [(0, jsx_runtime_1.jsxs)(react_3.Table, { variant: "simple", size: "sm", minW: "100%", role: "grid", "aria-rowcount": isGrouped ? undefined : _filteredData.length + 1, className: "table_wrapper", sx: {
                                                     width: "100%",
                                                     // `separate` (not `collapse`) so sticky header cells paint an opaque
                                                     // background over their borders — collapsed borders bleed scrolling
@@ -432,5 +432,5 @@ function Table({ data, columns, onSelection, isLoading, isCheckbox = false, head
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: (_8 = (_7 = (_6 = theme.colors.table) === null || _6 === void 0 ? void 0 : _6.hover) === null || _7 === void 0 ? void 0 : _7[200]) !== null && _8 !== void 0 ? _8 : (_9 = theme.colors.secondary) === null || _9 === void 0 ? void 0 : _9[50], children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_10 = theme.colors) === null || _10 === void 0 ? void 0 : _10.gray[600], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : (_11 = theme.colors) === null || _11 === void 0 ? void 0 : _11.gray[600], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: (_13 = (_12 = theme.colors) === null || _12 === void 0 ? void 0 : _12.primary) === null || _13 === void 0 ? void 0 : _13[500] }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: (_15 = (_14 = theme.colors) === null || _14 === void 0 ? void 0 : _14.text) === null || _15 === void 0 ? void 0 : _15[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${(_16 = theme.colors.border) === null || _16 === void 0 ? void 0 : _16[500]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: (_18 = (_17 = theme.colors) === null || _17 === void 0 ? void 0 : _17.text) === null || _18 === void 0 ? void 0 : _18[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [(0, jsx_runtime_1.jsx)(react_3.Thead, { position: "sticky", top: 0, zIndex: 4, bg: theme.colors.table.hover[200], children: (0, jsx_runtime_1.jsx)(TableHeader_1.default, { columns: columnsList, isCheckbox: isCheckbox, headerBgColor: headerBgColor !== null && headerBgColor !== void 0 ? headerBgColor : theme.colors.backgroundColor.muted, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), (0, jsx_runtime_1.jsx)(react_3.Tbody, { children: (0, jsx_runtime_1.jsx)(TableBody_1.default, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, endRow: endRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.border[500]}`, children: [groupLoadMoreCaption && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && ((0, jsx_runtime_1.jsx)(Button_1.default, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

package/dist/Components/Table/TableProps.d.ts

@@ -186,4 +186,3 @@ export type SortingProps = {
     isSorting: ColumnSortingProps | undefined;
     header: TableHeaderProps;
 };
-//# sourceMappingURL=TableProps.d.ts.map

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

@@ -4,4 +4,3 @@ declare const HeaderActions: ({ actions, selections, }: {
     selections: (string | number)[];
 }) => import("react/jsx-runtime").JSX.Element;
 export default HeaderActions;
-//# sourceMappingURL=HeaderActions.d.ts.map

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

@@ -11,24 +11,25 @@ const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const accentText_1 = require("../../../Theme/tokens/builders/accentText");
 const Divider_1 = __importDefault(require("../../Divider/Divider"));
 const ListItem = ({ icon, name, onClick, selections, isHoverEnabled = false, hoverColor, customComponent, }) => {
-    var _a, _b, _c;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const styledIcon = icon ? react_2.default.cloneElement(icon, {
         color: "currentColor",
         size: "1.25rem",
     }) : null;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color: (_a = colors === null || colors === void 0 ? void 0 : colors.text) === null || _a === void 0 ? void 0 : _a[500], px: 2, py: 1, borderRadius: "md", _hover: isHoverEnabled
+    // A `customComponent` may itself be focusable, and a button must never wrap one.
+    const isButton = !!onClick && !customComponent;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: isButton ? "button" : undefined, type: isButton ? "button" : undefined, bg: "transparent", textAlign: "left", fontSize: "inherit", fontWeight: "inherit", fontFamily: "inherit", display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", onClick: () => onClick && onClick(selections), color: colors.text[500], px: 2, py: 1, borderRadius: "md", _hover: isHoverEnabled
             ? {
-                color: hoverColor ? hoverColor : (_b = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _b === void 0 ? void 0 : _b[500],
-                bg: ((_c = colors === null || colors === void 0 ? void 0 : colors.background) === null || _c === void 0 ? void 0 : _c[100]) || "gray.50",
+                color: hoverColor ? hoverColor : (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[100]),
+                bg: colors.background[100],
             }
             : {}, transition: "all 0.2s ease", children: [customComponent, styledIcon, " ", name] }));
 };
 const HeaderActions = ({ actions, selections, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const hasSelections = selections.length > 0;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 2, fontSize: "0.875rem", fontWeight: 400, color: (0, accentText_1.accentTextOnCanvas)(colors === null || colors === void 0 ? void 0 : colors.secondary, (_a = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main), alignItems: "center", children: [(_b = actions === null || actions === void 0 ? void 0 : actions.items) === null || _b === void 0 ? void 0 : _b.map((item, index) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 2, fontSize: "0.875rem", fontWeight: 400, color: (0, accentText_1.accentTextOnCanvas)(colors.secondary, colors.backgroundColor.main), alignItems: "center", children: [(_a = actions === null || actions === void 0 ? void 0 : actions.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
                 if ("type" in item)
                     return null;
                 const actionItem = item;
@@ -36,7 +37,7 @@ const HeaderActions = ({ actions, selections, }) => {
                     return ((0, jsx_runtime_1.jsx)(ListItem, { ...actionItem, selections: selections }, `static-${index}`));
                 }
                 return null;
-            }), hasSelections && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_d = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _d === void 0 ? void 0 : _d.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[500] })), ((_f = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _f === void 0 ? void 0 : _f.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_g = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _g === void 0 ? void 0 : _g.onClick, selections: selections, isHoverEnabled: true, hoverColor: (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[500] })), (_j = actions === null || actions === void 0 ? void 0 : actions.items) === null || _j === void 0 ? void 0 : _j.map((item, index) => {
+            }), hasSelections && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((_b = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _b === void 0 ? void 0 : _b.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "w-4 h-4" }), name: "Delete", onClick: (_c = actions === null || actions === void 0 ? void 0 : actions.isDelete) === null || _c === void 0 ? void 0 : _c.onClick, selections: selections, isHoverEnabled: true, hoverColor: colors.semanticText.error })), ((_d = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _d === void 0 ? void 0 : _d.enabled) && ((0, jsx_runtime_1.jsx)(ListItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { className: "w-4 h-4" }), name: "Mass Update", onClick: (_e = actions === null || actions === void 0 ? void 0 : actions.isUpdate) === null || _e === void 0 ? void 0 : _e.onClick, selections: selections, isHoverEnabled: true, hoverColor: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.background[100]) })), (_f = actions === null || actions === void 0 ? void 0 : actions.items) === null || _f === void 0 ? void 0 : _f.map((item, index) => {
                         if ("type" in item && item.type === "divider") {
                             return (0, jsx_runtime_1.jsx)(Divider_1.default, {}, index);
                         }

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

@@ -12,4 +12,3 @@ type PaginationProps = Pick<TableProps, "isVisiblity" | "columns" | "paginationS
 };
 declare const Pagination: React.MemoExoticComponent<({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;
 export default Pagination;
-//# sourceMappingURL=Pagination.d.ts.map

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

@@ -52,6 +52,6 @@ const Pagination = react_1.default.memo(({ paginationText, handlePageSizeChange,
     // const isRightDisabled = currentPage >= pages - 1;
     const isLeftDisabled = dataLength === 0 || currentPage === 0;
     const isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && ((0, jsx_runtime_1.jsxs)(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: 3, width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? (0, jsx_runtime_1.jsx)("option", { value: 0 }) : null, computedOptions.map((size, index) => ((0, jsx_runtime_1.jsx)("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "First", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.primary[500] } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsLeft, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Previous", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.primary[500] } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, {}) }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Next", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.primary[500] } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Last", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.gray[400] : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.primary[500] } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsRight, {}) }) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && ((0, jsx_runtime_1.jsxs)(react_2.Select, { onChange: handlePageSizeChange, value: rowsPerPage, size: "xs", borderRadius: "base", width: "auto", minW: "4.5rem", isDisabled: dataLength === 0, children: [!paginationSelectOptions && dataLength < 100 ? (0, jsx_runtime_1.jsx)("option", { value: 0 }) : null, computedOptions.map((size, index) => ((0, jsx_runtime_1.jsx)("option", { value: String(size), children: String(size) }, index)))] })), dataLength > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "First", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsLeft, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Previous", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, {}) }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Next", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {}) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Last", placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsRight, {}) }) })] }))] }));
 });
 exports.default = Pagination;

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

@@ -10,4 +10,3 @@ declare const TableActions: React.MemoExoticComponent<({ row }: {
     row?: TableRowActions;
 }) => import("react/jsx-runtime").JSX.Element | null>;
 export default TableActions;
-//# sourceMappingURL=TableActions.d.ts.map

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

@@ -39,7 +39,7 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
 const TableActions = react_1.default.memo(({ row }) => {
-    var _a, _b, _c;
+    var _a;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -72,18 +72,18 @@ const TableActions = react_1.default.memo(({ row }) => {
     // ✅ if row itself is missing, render nothing
     if (!row)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_2.Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${(_a = theme.colors) === null || _a === void 0 ? void 0 : _a.border[500]}`, borderRadius: 0, gap: 2, onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(react_2.Popover, { placement: "bottom-start", isOpen: isOpen, onClose: handleClose, closeOnBlur: false, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Actions", color: theme.colors.text[900], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.EllipsisVertical, { size: 17 }), size: "sm", p: 0, variant: "ghost", _hover: { transform: "scale(1.2)" }, onClick: () => (isOpen ? handleClose() : handleOpen()) }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: "auto", minW: "100px", boxShadow: "lg", p: 0, zIndex: 999, bg: theme.colors.background[50], children: (0, jsx_runtime_1.jsx)(react_2.PopoverBody, { p: 0, m: 0, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 1, p: 0, m: 0, children: [row.onLink && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", borderBottom: `1px solid ${theme.colors.border[500]}`, borderRadius: 0, gap: 2, onClick: () => {
                                             var _a;
                                             (_a = row.onLink) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            // handleClose();
-                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 17 }), " View"] })), row.onEdit && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${(_b = theme.colors) === null || _b === void 0 ? void 0 : _b.border[500]}`, borderRadius: 0, onClick: () => {
+                                            handleClose();
+                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 17 }), " View"] })), row.onEdit && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", gap: 2, borderBottom: `1px solid ${theme.colors.border[500]}`, borderRadius: 0, onClick: () => {
                                             var _a;
                                             (_a = row.onEdit) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            // handleClose();
-                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 17 }), " Edit"] })), row.actions && ((_c = row === null || row === void 0 ? void 0 : row.actions) === null || _c === void 0 ? void 0 : _c.call(row)), row.onDelete && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, borderRadius: 0, onClick: () => {
+                                            handleClose();
+                                        }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 17 }), " Edit"] })), row.actions && ((_a = row === null || row === void 0 ? void 0 : row.actions) === null || _a === void 0 ? void 0 : _a.call(row)), row.onDelete && ((0, jsx_runtime_1.jsxs)(react_2.Button, { size: "sm", variant: "ghost", justifyContent: "flex-start", colorScheme: "red", gap: 2, borderRadius: 0, onClick: () => {
                                             var _a;
                                             (_a = row.onDelete) === null || _a === void 0 ? void 0 : _a.call(row, row);
-                                            // handleClose();
+                                            handleClose();
                                         }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 17 }), " Delete"] })), !row.onLink && !row.onEdit && !row.onDelete && !row.actions && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", variant: "ghost", isDisabled: true, justifyContent: "center", children: "No actions" }))] }) }) }) }))] }) }));
 });
 TableActions.displayName = "TableActions";