@eztrak/shared 0.15.1 → 0.16.0

package/dist/{chunk-HQPQ6TOE.mjs → chunk-PE7NNAX6.mjs}

@@ -1080,8 +1080,473 @@ function Modal({
   return createPortal(modalContent, modalRoot);
 }
 
+// src/components/button/Button.tsx
+import { forwardRef } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var BASE_STYLES2 = "flex gap-1 items-center font-medium text-sm px-5 py-3 rounded-md transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
+var VARIANTS2 = {
+  primary: "bg-white text-secondary border-secondary hover:bg-lightGray hover:text-black",
+  "primary-outline": "bg-white text-primary-150 border-primary-150 hover:bg-primary-100 hover:text-white font-bold",
+  "primary-fill": "bg-primary-150 text-white border-primary hover:bg-primary/90",
+  secondary: "bg-primary-150 text-white border-primary hover:bg-primary/90",
+  danger: "bg-red-600 text-white border-red-600 hover:bg-red-700",
+  outline: "bg-white text-primary border-primary hover:bg-primary/10",
+  ghost: "bg-transparent text-secondary border-transparent hover:bg-primary/10 p-2",
+  inline: "bg-transparent text-gray-500 border-none hover:text-gray-600 underline shadow-none p-0 m-0"
+};
+var SIZES = {
+  sm: "px-3 py-2 text-xs",
+  md: "px-5 py-3 text-sm",
+  lg: "px-6 py-4 text-base"
+};
+var Button = forwardRef(
+  ({
+    children,
+    className = "",
+    type = "button",
+    onClick,
+    disabled = false,
+    variant = "primary",
+    size = "md",
+    ...props
+  }, ref) => {
+    const variantStyles = VARIANTS2[variant] || VARIANTS2.primary;
+    const sizeStyles = SIZES[size];
+    return /* @__PURE__ */ jsx8(
+      "button",
+      {
+        ref,
+        type,
+        className: cn(
+          BASE_STYLES2,
+          variantStyles,
+          size !== "md" && sizeStyles,
+          className
+        ),
+        onClick,
+        disabled,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/card/Card.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function Card({
+  title,
+  content,
+  icon,
+  onClick,
+  containerClassName = "shadow p-6",
+  iconClassName = "",
+  titleClassName = "",
+  contentClassName = "",
+  cardBodyClassName = ""
+}) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: cn(
+        "transform transition duration-300 cursor-pointer select-none",
+        containerClassName
+      ),
+      onClick,
+      children: /* @__PURE__ */ jsxs6("div", { className: cn("flex space-x-4", cardBodyClassName), children: [
+        /* @__PURE__ */ jsx9("span", { className: cn("text-primary text-3xl", iconClassName), children: icon }),
+        /* @__PURE__ */ jsxs6("div", { children: [
+          /* @__PURE__ */ jsx9("h3", { className: cn("font-semibold text-lg text-primary", titleClassName), children: title }),
+          content != null && /* @__PURE__ */ jsx9("p", { className: cn("text-sm text-secondary", contentClassName), children: content })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/components/header/Header.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function Header({
+  title = "Header",
+  className = "p-2 gap-2 flex-col",
+  containerClass = "",
+  breadcrumbs = "",
+  titleStyle = "text-4xl h-fit font-bold",
+  breadcrumbsStyle = "text-sm",
+  children
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: `flex ${className}`, children: [
+    /* @__PURE__ */ jsxs7("div", { className: "title-wrapper", children: [
+      /* @__PURE__ */ jsx10("h1", { className: titleStyle, children: title }),
+      breadcrumbs && /* @__PURE__ */ jsx10("div", { className: `breadcrumbs-wraper ${breadcrumbsStyle}`, children: breadcrumbs })
+    ] }),
+    /* @__PURE__ */ jsx10("div", { className: `flex flex-row justify-between items-center ${containerClass}`, children })
+  ] });
+}
+
+// src/components/breadcrumbs/Breadcrumbs.tsx
+import { Fragment } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var INACTIVE_LINK_CLASS = "inline-flex items-center justify-center text-[#5D6D7F] bg-white px-4 py-2 rounded-lg transition-colors duration-300 hover:text-[#516378]";
+function asTitleMap(customTitles) {
+  if (Object.prototype.toString.call(customTitles) !== "[object Object]") {
+    return {};
+  }
+  return customTitles;
+}
+function findRoute(pathname, routes, parentPath = "") {
+  for (const route of routes) {
+    const fullPath = `${parentPath}/${route.path}`.replace(/\/+/g, "/");
+    if (fullPath === pathname) {
+      return route;
+    }
+    if (route.children) {
+      const childRoute = findRoute(pathname, route.children, fullPath);
+      if (childRoute) {
+        return childRoute;
+      }
+    }
+  }
+  return null;
+}
+function getLastParam(str) {
+  return str.endsWith("/") ? str.slice(0, -1).split("/").pop() : str.split("/").pop();
+}
+function Breadcrumbs({
+  routes = [],
+  containerClassName,
+  linkClassName = "",
+  separatorClassName = "",
+  separator = "/",
+  activeClassName = "font-bold whitespace-pre",
+  customTitles = {},
+  customIcons = {},
+  prefix,
+  suffix,
+  nonClickablePaths = []
+}) {
+  const location = useLocation();
+  const pathnames = location.pathname.split("/").filter((segment) => segment);
+  const titles = asTitleMap(customTitles);
+  const inactiveLinkClassName = cn(INACTIVE_LINK_CLASS, linkClassName);
+  const getTitle = (pathname) => {
+    const match = findRoute(pathname, routes);
+    if (match && match.title) {
+      return match.title;
+    }
+    const titleKeys = Object.keys(titles);
+    const paramMatch = pathname.split("/").find((segment) => titleKeys.includes(segment)) || "";
+    if (paramMatch && titles[paramMatch]) {
+      return titles[paramMatch];
+    }
+    const lastParamPath = getLastParam(pathname);
+    if (lastParamPath) {
+      return lastParamPath;
+    }
+    return pathname;
+  };
+  const getIcon = (pathname) => {
+    const iconKeys = Object.keys(customIcons);
+    const matchedSegment = pathname.split("/").find((segment) => iconKeys.includes(segment));
+    if (matchedSegment && customIcons[matchedSegment]) {
+      return customIcons[matchedSegment];
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cn(
+        "flex flex-row gap-2 items-center text-sm text-secondary",
+        containerClassName
+      ),
+      children: [
+        prefix && /* @__PURE__ */ jsx11("div", { className: "breadcrumb-prefix", children: prefix }),
+        /* @__PURE__ */ jsxs8(Link, { to: "/", className: inactiveLinkClassName, children: [
+          customIcons.home && /* @__PURE__ */ jsx11("span", { className: "mr-1", children: customIcons.home }),
+          titles.home || "Home"
+        ] }),
+        pathnames.map((segment, index) => {
+          const to = `/${pathnames.slice(0, index + 1).join("/")}`;
+          const isLast = index === pathnames.length - 1;
+          const title = getTitle(to);
+          const icon = getIcon(to);
+          const isNonClickable = nonClickablePaths.some(
+            (token) => to.includes(token) || segment === token
+          );
+          const crumb = /* @__PURE__ */ jsxs8(Fragment2, { children: [
+            icon && /* @__PURE__ */ jsx11("span", { className: "mr-1", children: icon }),
+            title
+          ] });
+          return /* @__PURE__ */ jsxs8(Fragment, { children: [
+            /* @__PURE__ */ jsx11("span", { className: separatorClassName, children: separator }),
+            isLast || isNonClickable ? /* @__PURE__ */ jsx11("span", { className: isLast ? activeClassName : linkClassName, children: crumb }) : /* @__PURE__ */ jsx11(Link, { to, className: inactiveLinkClassName, children: crumb })
+          ] }, to);
+        }),
+        suffix && /* @__PURE__ */ jsx11("div", { className: "breadcrumb-suffix", children: suffix })
+      ]
+    }
+  );
+}
+
+// src/components/sidebar/Sidebar.tsx
+import { useEffect as useEffect5, useState as useState3 } from "react";
+import { Link as Link2, useLocation as useLocation2 } from "react-router-dom";
+
+// src/components/tooltip/ToolTip.tsx
+import { useId as useId2 } from "react";
+import { Tooltip } from "react-tooltip";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var defaultTooltipStyle = {
+  color: "#fff",
+  borderRadius: "5px",
+  zIndex: 999,
+  textAlign: "justify",
+  maxWidth: "300px",
+  whiteSpace: "pre-wrap",
+  wordWrap: "break-word",
+  overflowWrap: "break-word"
+};
+function ToolTip({
+  text = "tool tip",
+  placement = "top",
+  delayShow,
+  delayHide,
+  className,
+  tooltipClassName,
+  tooltipStyle,
+  wrapperTabIndex,
+  disabled = false,
+  children
+}) {
+  const generatedId = useId2();
+  const tooltipId = `eztrak-tooltip-${generatedId.replace(/:/g, "")}`;
+  const tooltipText = String(text ?? "");
+  if (disabled || !tooltipText) {
+    return /* @__PURE__ */ jsx12("span", { className, children });
+  }
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    /* @__PURE__ */ jsx12(
+      "span",
+      {
+        className,
+        "data-tooltip-id": tooltipId,
+        "data-tooltip-content": tooltipText,
+        tabIndex: wrapperTabIndex,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      Tooltip,
+      {
+        id: tooltipId,
+        place: placement,
+        positionStrategy: "fixed",
+        delayShow,
+        delayHide,
+        className: tooltipClassName,
+        style: { ...defaultTooltipStyle, ...tooltipStyle }
+      }
+    )
+  ] });
+}
+
+// src/components/sidebar/Sidebar.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function Sidebar({
+  className,
+  sideCollapseWidth = "w-20",
+  sidebarWidth = "w-48",
+  header,
+  children,
+  footer,
+  items = [],
+  logoUrl = "",
+  logoAltText = "Logo",
+  collapseButtonText = "\u2B05\uFE0F Collapse",
+  expandButtonText = "\u27A1\uFE0F",
+  location: _location,
+  classNames = {},
+  onCollapseChange,
+  isCollapsed = false,
+  itemDropdownIcon = /* @__PURE__ */ jsx13("span", { children: "\u25BC" }),
+  ...rest
+}) {
+  const location = useLocation2();
+  const [collapsed, setCollapsed] = useState3(isCollapsed);
+  const [, setActiveLink] = useState3(location.pathname);
+  const [subItemsCollapsed, setSubItemsCollapsed] = useState3({});
+  useEffect5(() => {
+    if (onCollapseChange) {
+      onCollapseChange(collapsed);
+    }
+  }, [collapsed, onCollapseChange]);
+  useEffect5(() => {
+    setActiveLink(location.pathname);
+  }, [location]);
+  const toggleGroup = (group) => {
+    setSubItemsCollapsed((prevState) => ({
+      ...prevState,
+      [group]: !prevState[group]
+    }));
+  };
+  const isActive = (link) => {
+    return location.pathname.startsWith(link);
+  };
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: `flex flex-col h-screen overflow-hidden ${collapsed ? `${sideCollapseWidth} justify-center items-center collapsed` : `${sidebarWidth}`} transition-all duration-100 ${className ?? ""}`,
+      ...rest,
+      children: [
+        logoUrl && /* @__PURE__ */ jsx13(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-center h-16 border-b border-gray-300",
+              classNames.logoSection
+            ),
+            children: /* @__PURE__ */ jsx13("img", { src: logoUrl, alt: logoAltText, className: "h-10" })
+          }
+        ),
+        header && /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-between p-4 border-b border-gray-300", children: header }),
+        /* @__PURE__ */ jsx13("nav", { className: cn("flex-grow", classNames.navSection), children: items.map((item, index) => {
+          if (item.subItems) {
+            return /* @__PURE__ */ jsxs10(
+              "div",
+              {
+                className: `my-2 ${item?.subItems && "has-sub-items"}`,
+                children: [
+                  /* @__PURE__ */ jsxs10(
+                    "div",
+                    {
+                      onClick: () => toggleGroup(item.name),
+                      "data-sidebar-item": item.name,
+                      "data-tooltip-id": item.name,
+                      className: `flex cursor-pointer dropdown-title-wrapper ${classNames?.navItem ?? ""}`,
+                      children: [
+                        /* @__PURE__ */ jsx13(
+                          ToolTip,
+                          {
+                            text: item.tooltip || item.name,
+                            placement: item.tooltipPlacement || "top",
+                            children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-2", children: [
+                              /* @__PURE__ */ jsx13("span", { className: classNames?.navItemText, children: item.icon }),
+                              !collapsed && /* @__PURE__ */ jsx13("span", { className: classNames?.navItemText, children: item.name })
+                            ] })
+                          }
+                        ),
+                        !collapsed && /* @__PURE__ */ jsx13(
+                          "span",
+                          {
+                            className: `transform transition-transform ${subItemsCollapsed[item.name] ? "rotate-180" : "rotate-0"}`,
+                            children: itemDropdownIcon
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  subItemsCollapsed[item.name] && /* @__PURE__ */ jsx13("div", { className: cn("collapse-btn-wrapper", classNames.subItem), children: item.subItems.map((subItem, subIndex) => {
+                    if (subItem.component) {
+                      const SubItemComponent = subItem.component;
+                      return /* @__PURE__ */ jsx13(SubItemComponent, {}, `${index}-${subIndex}`);
+                    }
+                    return /* @__PURE__ */ jsx13(
+                      "div",
+                      {
+                        className: "w-full",
+                        "data-sidebar-item": subItem.name,
+                        "data-tooltip-id": subItem.name,
+                        children: /* @__PURE__ */ jsx13(
+                          ToolTip,
+                          {
+                            text: item.tooltip || item.name,
+                            placement: item.tooltipPlacement || "top",
+                            className: "block w-full",
+                            children: /* @__PURE__ */ jsxs10(
+                              Link2,
+                              {
+                                to: subItem.link || "#",
+                                className: `flex ${classNames?.navItem ?? ""} ${isActive(subItem?.link ?? "") ? "active" : ""} ${item?.itemClassName}`,
+                                onClick: () => subItem.link && setActiveLink(subItem.link || ""),
+                                title: subItem.tooltip || subItem.name,
+                                children: [
+                                  /* @__PURE__ */ jsx13(
+                                    "span",
+                                    {
+                                      className: classNames.navItemText ?? "text-orange-600",
+                                      children: subItem.icon
+                                    }
+                                  ),
+                                  !collapsed && /* @__PURE__ */ jsx13("span", { className: classNames.navItemText, children: subItem.name })
+                                ]
+                              }
+                            )
+                          }
+                        )
+                      },
+                      `${index}-${subIndex}`
+                    );
+                  }) })
+                ]
+              },
+              index
+            );
+          }
+          if (item.component) {
+            const ItemComponent = item.component;
+            return /* @__PURE__ */ jsx13(ItemComponent, {}, index);
+          }
+          return /* @__PURE__ */ jsx13(
+            "div",
+            {
+              className: "w-full",
+              "data-sidebar-item": item.name,
+              "data-tooltip-id": item.name,
+              children: /* @__PURE__ */ jsx13(
+                ToolTip,
+                {
+                  text: item.tooltip || item.name,
+                  placement: item.tooltipPlacement || "top",
+                  className: "block w-full",
+                  children: /* @__PURE__ */ jsxs10(
+                    Link2,
+                    {
+                      to: item.link || "#",
+                      className: `flex ${classNames?.navItem ?? ""} ${isActive(item.link || "") ? "active" : ""} ${item?.itemClassName}`,
+                      onClick: () => setActiveLink(item.link || ""),
+                      title: item.tooltip || item.name,
+                      children: [
+                        /* @__PURE__ */ jsx13("span", { className: classNames.navItemText ?? "text-orange-600", children: item.icon }),
+                        !collapsed && /* @__PURE__ */ jsx13("span", { className: classNames.navItemText, children: item.name })
+                      ]
+                    }
+                  )
+                }
+              )
+            },
+            index
+          );
+        }) }),
+        children,
+        /* @__PURE__ */ jsx13(
+          "button",
+          {
+            onClick: () => setCollapsed(!collapsed),
+            className: cn("", classNames.collapseButton) ?? "p-4 border-t border-gray-300",
+            children: collapsed ? expandButtonText : collapseButtonText
+          }
+        ),
+        footer && /* @__PURE__ */ jsx13("div", { className: classNames?.footer ?? "p-4 border-t border-gray-300", children: footer })
+      ]
+    }
+  );
+}
+
 // src/components/skeleton/CardSkeleton.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_LINE_WIDTHS = ["w-32", "w-48"];
 function shouldShowAvatar(variant, showAvatar) {
   return showAvatar ?? variant === "profile";
@@ -1090,7 +1555,7 @@ function shouldShowImage(variant, showImage) {
   return showImage ?? variant === "image";
 }
 function AvatarSkeleton({ className }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx14(
     "svg",
     {
       className: cn("w-10 h-10 text-gray-200 dark:text-gray-700", className),
@@ -1098,7 +1563,7 @@ function AvatarSkeleton({ className }) {
       xmlns: "http://www.w3.org/2000/svg",
       fill: "currentColor",
       viewBox: "0 0 20 20",
-      children: /* @__PURE__ */ jsx8("path", { d: "M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" })
+      children: /* @__PURE__ */ jsx14("path", { d: "M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" })
     }
   );
 }
@@ -1107,7 +1572,7 @@ function SkeletonBlock({
   className,
   isFirst
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       className: cn(
@@ -1139,14 +1604,14 @@ function CardSkeleton({
   const skeletons = Array.from({ length: Math.max(1, count) }, (_, index) => {
     const renderAvatar = shouldShowAvatar(variant, showAvatar);
     const renderImage = shouldShowImage(variant, showImage);
-    return /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         className: cn("animate-pulse md:p-6 dark:border-gray-700", className),
         style: { animationDuration, ...style },
         ...props,
         children: [
-          renderImage ? /* @__PURE__ */ jsx8(
+          renderImage ? /* @__PURE__ */ jsx14(
             "div",
             {
               className: cn(
@@ -1155,9 +1620,9 @@ function CardSkeleton({
               )
             }
           ) : null,
-          /* @__PURE__ */ jsxs6("div", { className: cn("flex items-center mt-4 gap-4", contentClassName), children: [
-            renderAvatar ? /* @__PURE__ */ jsx8(AvatarSkeleton, { className: avatarClassName }) : null,
-            /* @__PURE__ */ jsx8("div", { children: Array.from({ length: Math.max(1, lines) }, (_2, lineIndex) => /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsxs11("div", { className: cn("flex items-center mt-4 gap-4", contentClassName), children: [
+            renderAvatar ? /* @__PURE__ */ jsx14(AvatarSkeleton, { className: avatarClassName }) : null,
+            /* @__PURE__ */ jsx14("div", { children: Array.from({ length: Math.max(1, lines) }, (_2, lineIndex) => /* @__PURE__ */ jsx14(
               SkeletonBlock,
               {
                 widthClass: lineWidths[lineIndex] ?? lineWidths[lineWidths.length - 1] ?? DEFAULT_LINE_WIDTHS[1],
@@ -1167,75 +1632,17 @@ function CardSkeleton({
               lineIndex
             )) })
           ] }),
-          /* @__PURE__ */ jsx8("span", { className: "sr-only", children: srLabel })
+          /* @__PURE__ */ jsx14("span", { className: "sr-only", children: srLabel })
         ]
       },
       index
     );
   });
-  return /* @__PURE__ */ jsx8(Fragment, { children: skeletons });
-}
-
-// src/components/tooltip/ToolTip.tsx
-import { useId as useId2 } from "react";
-import { Tooltip } from "react-tooltip";
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var defaultTooltipStyle = {
-  color: "#fff",
-  borderRadius: "5px",
-  zIndex: 999,
-  textAlign: "justify",
-  maxWidth: "300px",
-  whiteSpace: "pre-wrap",
-  wordWrap: "break-word",
-  overflowWrap: "break-word"
-};
-function ToolTip({
-  text = "tool tip",
-  placement = "top",
-  delayShow,
-  delayHide,
-  className,
-  tooltipClassName,
-  tooltipStyle,
-  wrapperTabIndex,
-  disabled = false,
-  children
-}) {
-  const generatedId = useId2();
-  const tooltipId = `eztrak-tooltip-${generatedId.replace(/:/g, "")}`;
-  const tooltipText = String(text ?? "");
-  if (disabled || !tooltipText) {
-    return /* @__PURE__ */ jsx9("span", { className, children });
-  }
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx9(
-      "span",
-      {
-        className,
-        "data-tooltip-id": tooltipId,
-        "data-tooltip-content": tooltipText,
-        tabIndex: wrapperTabIndex,
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx9(
-      Tooltip,
-      {
-        id: tooltipId,
-        place: placement,
-        positionStrategy: "fixed",
-        delayShow,
-        delayHide,
-        className: tooltipClassName,
-        style: { ...defaultTooltipStyle, ...tooltipStyle }
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx14(Fragment4, { children: skeletons });
 }
 
 // src/components/tooltip/TooltipText.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function TooltipText({
   text = "",
   maxLength = 20,
@@ -1255,7 +1662,7 @@ function TooltipText({
   const displayText = truncateText(fullText, maxLength);
   const isTruncated = displayText !== fullText;
   const tooltipDisabled = !showTooltip || !hasValue || tooltipWhenTruncatedOnly && !isTruncated;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx15(
     ToolTip,
     {
       text: fullText,
@@ -1267,24 +1674,24 @@ function TooltipText({
       tooltipStyle,
       wrapperTabIndex: tooltipDisabled ? void 0 : 0,
       disabled: tooltipDisabled,
-      children: /* @__PURE__ */ jsx10("span", { className: cn("inline-block max-w-full align-bottom", textClassName), children: displayText })
+      children: /* @__PURE__ */ jsx15("span", { className: cn("inline-block max-w-full align-bottom", textClassName), children: displayText })
     }
   );
 }
 
 // src/components/cell-editor/CustomCellEditor.tsx
 import {
-  forwardRef,
-  useEffect as useEffect5,
+  forwardRef as forwardRef2,
+  useEffect as useEffect6,
   useImperativeHandle,
   useMemo,
   useRef as useRef5,
-  useState as useState3
+  useState as useState4
 } from "react";
 import toast from "react-hot-toast";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function ButtonSpinner() {
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs12(
     "svg",
     {
       className: "animate-spin",
@@ -1294,7 +1701,7 @@ function ButtonSpinner() {
       fill: "none",
       "aria-hidden": true,
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx16(
           "circle",
           {
             cx: "12",
@@ -1305,7 +1712,7 @@ function ButtonSpinner() {
             strokeOpacity: "0.25"
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx16(
           "path",
           {
             d: "M12 2a10 10 0 0 1 10 10",
@@ -1327,7 +1734,7 @@ function normalizeInitialValue(initialValue, inputType) {
   }
   return initialValue;
 }
-var CustomCellEditor = forwardRef(
+var CustomCellEditor = forwardRef2(
   ({
     value: initialValue,
     name,
@@ -1352,8 +1759,8 @@ var CustomCellEditor = forwardRef(
     cancelButtonClassName
   }, ref) => {
     const normalizedInitial = normalizeInitialValue(initialValue, inputType);
-    const [value, setValue] = useState3(normalizedInitial);
-    const [isLoading, setIsLoading] = useState3(false);
+    const [value, setValue] = useState4(normalizedInitial);
+    const [isLoading, setIsLoading] = useState4(false);
     const inputRef = useRef5(null);
     const selectRef = useRef5(null);
     const normalizedOptions = useMemo(() => {
@@ -1372,7 +1779,7 @@ var CustomCellEditor = forwardRef(
       isCancelAfterEnd: () => false,
       isPopup: () => true
     }));
-    useEffect5(() => {
+    useEffect6(() => {
       if (isDropdown) {
         selectRef.current?.focus();
         return;
@@ -1441,7 +1848,7 @@ var CustomCellEditor = forwardRef(
     const defaultInputClass = "w-48 px-2 py-1 text-sm border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-1 focus:ring-blue-400";
     const defaultSaveBtnClass = "px-3 py-1 text-sm font-medium text-white bg-green-500 rounded-md hover:bg-green-600 disabled:opacity-50 whitespace-nowrap shrink-0";
     const defaultCancelBtnClass = "px-3 py-1 text-sm font-medium text-white bg-red-500 rounded-md hover:bg-red-600 disabled:opacity-50 whitespace-nowrap shrink-0";
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs12(
       "div",
       {
         className: cn(
@@ -1450,7 +1857,7 @@ var CustomCellEditor = forwardRef(
         ),
         style: containerStyle,
         children: [
-          isDropdown ? /* @__PURE__ */ jsxs8(
+          isDropdown ? /* @__PURE__ */ jsxs12(
             "select",
             {
               ref: selectRef,
@@ -1460,11 +1867,11 @@ var CustomCellEditor = forwardRef(
               className: inputClassName ?? defaultInputClass,
               disabled: isLoading,
               children: [
-                /* @__PURE__ */ jsx11("option", { value: "", disabled: true, children: "Select option..." }),
-                normalizedOptions.map((opt) => /* @__PURE__ */ jsx11("option", { value: opt.value, children: opt.label }, opt.value))
+                /* @__PURE__ */ jsx16("option", { value: "", disabled: true, children: "Select option..." }),
+                normalizedOptions.map((opt) => /* @__PURE__ */ jsx16("option", { value: opt.value, children: opt.label }, opt.value))
               ]
             }
-          ) : /* @__PURE__ */ jsx11(
+          ) : /* @__PURE__ */ jsx16(
             "input",
             {
               ref: inputRef,
@@ -1477,7 +1884,7 @@ var CustomCellEditor = forwardRef(
               disabled: isLoading
             }
           ),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx16(
             "button",
             {
               type: "button",
@@ -1486,10 +1893,10 @@ var CustomCellEditor = forwardRef(
               className: saveButtonClassName ?? (saveButtonStyle ? void 0 : defaultSaveBtnClass),
               style: saveButtonStyle,
               title: "Save (Enter)",
-              children: isLoading ? loadingIndicator ?? /* @__PURE__ */ jsx11(ButtonSpinner, {}) : saveButtonContent ?? "Save"
+              children: isLoading ? loadingIndicator ?? /* @__PURE__ */ jsx16(ButtonSpinner, {}) : saveButtonContent ?? "Save"
             }
           ),
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx16(
             "button",
             {
               type: "button",
@@ -1509,10 +1916,10 @@ var CustomCellEditor = forwardRef(
 CustomCellEditor.displayName = "CustomCellEditor";
 
 // src/components/popup-cell-renderer/PopupCellRenderer.tsx
-import { useState as useState4 } from "react";
+import { useRef as useRef6, useState as useState5 } from "react";
 import Tippy from "@tippyjs/react";
 import { BiDotsVerticalRounded } from "react-icons/bi";
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function PopupCellRenderer({
   dropDownContent,
   actionIcon: ActionIcon = BiDotsVerticalRounded,
@@ -1523,23 +1930,34 @@ function PopupCellRenderer({
   onAction,
   placement = "bottom-end",
   tippyProps,
-  ariaLabel = "Row actions"
+  ariaLabel = "Row actions",
+  openOnHover = false
 }) {
-  const [visible, setVisible] = useState4(false);
+  const [visible, setVisible] = useState5(false);
+  const instanceRef = useRef6(null);
   const show = () => setVisible(true);
-  const hide = () => setVisible(false);
+  const hide = () => {
+    setVisible(false);
+    instanceRef.current?.hide();
+  };
   const rowData = params?.data;
   const handleAction = (actionType, actionRowData) => {
     onAction?.(actionType, actionRowData ?? rowData, hide);
     hide();
   };
   const content = typeof dropDownContent === "function" ? dropDownContent(handleAction) : dropDownContent;
-  return /* @__PURE__ */ jsx12("div", { className: "flex h-full", children: /* @__PURE__ */ jsx12(
+  const hoverOrClickProps = openOnHover ? {
+    trigger: "mouseenter",
+    delay: [0, 150],
+    hideOnClick: false
+  } : {
+    visible,
+    onClickOutside: hide
+  };
+  return /* @__PURE__ */ jsx17("div", { className: "flex h-full", children: /* @__PURE__ */ jsx17(
     Tippy,
     {
       content,
-      visible,
-      onClickOutside: hide,
       allowHTML: true,
       arrow: false,
       appendTo: () => document.body,
@@ -1549,12 +1967,16 @@ function PopupCellRenderer({
       theme: "light",
       maxWidth: "none",
       offset: [0, 5],
+      onCreate: (instance) => {
+        instanceRef.current = instance;
+      },
+      ...hoverOrClickProps,
       ...tippyProps,
-      children: /* @__PURE__ */ jsxs9(
+      children: /* @__PURE__ */ jsxs13(
         "button",
         {
           type: "button",
-          onClick: visible ? hide : show,
+          onClick: openOnHover ? void 0 : visible ? hide : show,
           className: cn(
             "flex items-center justify-center gap-2 rounded-full text-gray-500 hover:text-gray-800",
             className
@@ -1562,7 +1984,7 @@ function PopupCellRenderer({
           "aria-label": ariaLabel,
           children: [
             !hideTitle && title,
-            /* @__PURE__ */ jsx12(ActionIcon, { "aria-hidden": true })
+            /* @__PURE__ */ jsx17(ActionIcon, { "aria-hidden": true })
           ]
         }
       )
@@ -1599,7 +2021,7 @@ var ROW_ACTION_PRESETS = {
 };
 
 // src/components/row-actions/ActionMenuItem.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function ActionMenuItem({
   label,
   icon: Icon,
@@ -1620,7 +2042,7 @@ function ActionMenuItem({
   onClick
 }) {
   const tooltipText = tooltip ?? label;
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx18(
     ToolTip,
     {
       text: tooltipText,
@@ -1631,7 +2053,7 @@ function ActionMenuItem({
       tooltipClassName,
       tooltipStyle: { ...ROW_ACTION_DEFAULT_MENU_TOOLTIP_STYLE, ...tooltipStyle },
       className: showLabel ? "block w-full" : "inline-flex",
-      children: /* @__PURE__ */ jsxs10(
+      children: /* @__PURE__ */ jsxs14(
         "button",
         {
           type: "button",
@@ -1651,7 +2073,7 @@ function ActionMenuItem({
             className
           ),
           children: [
-            Icon ? /* @__PURE__ */ jsx13(
+            Icon ? /* @__PURE__ */ jsx18(
               Icon,
               {
                 className: cn("shrink-0", iconClassName),
@@ -1659,7 +2081,7 @@ function ActionMenuItem({
                 size: iconSize
               }
             ) : null,
-            showLabel ? /* @__PURE__ */ jsx13("span", { className: labelClassName, children: label }) : null
+            showLabel ? /* @__PURE__ */ jsx18("span", { className: labelClassName, children: label }) : null
           ]
         }
       )
@@ -1717,7 +2139,7 @@ function resolveActions(actions, data, hasPermission, presets) {
 }
 
 // src/components/row-actions/RowActions.tsx
-import { Fragment as Fragment3, jsx as jsx14 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx19 } from "react/jsx-runtime";
 function runAction(action, data, hide, confirmFn = confirmationAlert) {
   if (!action.onClick) {
     if (action.closeOnClick) hide?.();
@@ -1748,6 +2170,7 @@ function RowActions({
   triggerAriaLabel = "Row actions",
   hasPermission,
   placement = "bottom-end",
+  openOnHover = false,
   tippyProps,
   presets,
   confirmFn = confirmationAlert,
@@ -1770,7 +2193,7 @@ function RowActions({
   };
   const renderDefaultItem = (action, hide, showLabel = true) => {
     if (action.type === "divider") {
-      return /* @__PURE__ */ jsx14(
+      return /* @__PURE__ */ jsx19(
         "div",
         {
           role: "separator",
@@ -1780,9 +2203,9 @@ function RowActions({
       );
     }
     if (action.content) {
-      return /* @__PURE__ */ jsx14("div", { className: action.className, children: action.content }, action.key);
+      return /* @__PURE__ */ jsx19("div", { className: action.className, children: action.content }, action.key);
     }
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx19(
       ActionMenuItem,
       {
         label: action.label,
@@ -1809,15 +2232,15 @@ function RowActions({
   const renderItems = (hide, showLabel = true) => resolved.map((action) => {
     const defaultItem = renderDefaultItem(action, hide, showLabel);
     if (!renderItem) return defaultItem;
-    return /* @__PURE__ */ jsx14("div", { children: renderItem(action, { data, hide: hide ?? (() => void 0), defaultItem }) }, action.key);
+    return /* @__PURE__ */ jsx19("div", { children: renderItem(action, { data, hide: hide ?? (() => void 0), defaultItem }) }, action.key);
   });
   if (mode === "inline") {
     const inlineItems = renderItems(void 0, false);
-    return /* @__PURE__ */ jsx14("div", { className: cn("flex h-full items-center justify-center gap-1", className), children: inlineItems });
+    return /* @__PURE__ */ jsx19("div", { className: cn("flex h-full items-center justify-center gap-1", className), children: inlineItems });
   }
   const triggerTooltipText = triggerTooltip === false ? void 0 : triggerTooltip;
   const buildMenu = (hide) => {
-    const defaultMenu = /* @__PURE__ */ jsx14(
+    const defaultMenu = /* @__PURE__ */ jsx19(
       "div",
       {
         className: cn(
@@ -1836,14 +2259,14 @@ function RowActions({
     });
   };
   if (renderTrigger) {
-    return /* @__PURE__ */ jsx14(Fragment3, { children: renderTrigger({
+    return /* @__PURE__ */ jsx19(Fragment5, { children: renderTrigger({
       data,
       actions: resolved,
       hide: () => void 0,
       defaultMenu: buildMenu(() => void 0)
     }) });
   }
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx19(
     ToolTip,
     {
       text: triggerTooltipText,
@@ -1854,7 +2277,7 @@ function RowActions({
       tooltipClassName,
       tooltipStyle,
       className: "flex h-full items-center justify-center",
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx19(
         PopupCellRenderer,
         {
           params: { data },
@@ -1862,6 +2285,7 @@ function RowActions({
           hideTitle: true,
           className,
           placement,
+          openOnHover,
           tippyProps,
           ariaLabel: triggerAriaLabel,
           dropDownContent: (handleAction) => buildMenu(() => handleAction("close"))
@@ -1874,7 +2298,7 @@ function RowActions({
 // src/components/table-error-boundary/TableErrorBoundary.tsx
 import { useMemo as useMemo2 } from "react";
 import { FaArrowsRotate, FaTriangleExclamation } from "react-icons/fa6";
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var TableErrorBoundary = ({
   isError,
   isLoading = false,
@@ -1891,7 +2315,7 @@ var TableErrorBoundary = ({
     return "Unable to load table data. Please try again.";
   }, [error, errorMessage]);
   if (isLoading && !isError) {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx20(
       "div",
       {
         className: cn(
@@ -1902,12 +2326,12 @@ var TableErrorBoundary = ({
         role: "status",
         "aria-live": "polite",
         "aria-busy": "true",
-        children: /* @__PURE__ */ jsx15(Loader, { size: "40px" })
+        children: /* @__PURE__ */ jsx20(Loader, { size: "40px" })
       }
     );
   }
   if (isError) {
-    return /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsxs15(
       "div",
       {
         className: cn(
@@ -1918,7 +2342,7 @@ var TableErrorBoundary = ({
         role: "alert",
         "aria-live": "assertive",
         children: [
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx20(
             FaTriangleExclamation,
             {
               className: "text-red-500",
@@ -1926,11 +2350,11 @@ var TableErrorBoundary = ({
               "aria-hidden": true
             }
           ),
-          /* @__PURE__ */ jsxs11("div", { className: "max-w-md space-y-1", children: [
-            /* @__PURE__ */ jsx15("p", { className: "text-base font-semibold text-gray-800", children: "Failed to load data" }),
-            /* @__PURE__ */ jsx15("p", { className: "text-sm text-gray-600", children: message })
+          /* @__PURE__ */ jsxs15("div", { className: "max-w-md space-y-1", children: [
+            /* @__PURE__ */ jsx20("p", { className: "text-base font-semibold text-gray-800", children: "Failed to load data" }),
+            /* @__PURE__ */ jsx20("p", { className: "text-sm text-gray-600", children: message })
           ] }),
-          refetch && /* @__PURE__ */ jsxs11(
+          refetch && /* @__PURE__ */ jsxs15(
             "button",
             {
               type: "button",
@@ -1938,7 +2362,7 @@ var TableErrorBoundary = ({
               disabled: isLoading,
               className: "inline-flex items-center gap-2 rounded-lg bg-primary-150 px-4 py-2 text-sm font-medium text-white transition-colors hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60",
               children: [
-                /* @__PURE__ */ jsx15(FaArrowsRotate, { className: cn(isLoading && "animate-spin") }),
+                /* @__PURE__ */ jsx20(FaArrowsRotate, { className: cn(isLoading && "animate-spin") }),
                 isLoading ? "Retrying..." : "Try again"
               ]
             }
@@ -1947,7 +2371,7 @@ var TableErrorBoundary = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx15(Fragment4, { children });
+  return /* @__PURE__ */ jsx20(Fragment6, { children });
 };
 
 export {
@@ -1961,8 +2385,13 @@ export {
   SearchInput,
   Loader,
   Modal,
-  CardSkeleton,
+  Button,
+  Card,
+  Header,
+  Breadcrumbs,
   ToolTip,
+  Sidebar,
+  CardSkeleton,
   TooltipText,
   CustomCellEditor,
   PopupCellRenderer,
@@ -1976,4 +2405,4 @@ export {
   RowActions,
   TableErrorBoundary
 };
-//# sourceMappingURL=chunk-HQPQ6TOE.mjs.map
+//# sourceMappingURL=chunk-PE7NNAX6.mjs.map