@eztrak/shared 0.16.5 → 0.17.0

package/dist/{chunk-S7ZLXOPF.mjs → chunk-KJWCRX6F.mjs}

@@ -8,7 +8,7 @@ import {
   storeItemInLocalStorage,
   toDateInputValue,
   truncateText
-} from "./chunk-EIX5CUQF.mjs";
+} from "./chunk-A5BBQ7X5.mjs";
 
 // src/components/tabs/EztrakTabs.tsx
 import {
@@ -1189,10 +1189,41 @@ function Header({
 }
 
 // src/components/breadcrumbs/Breadcrumbs.tsx
-import { Fragment } from "react";
+import {
+  cloneElement,
+  isValidElement
+} 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]";
+import { Fragment, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_BACKGROUND = "#F7F7F5";
+var DEFAULT_INACTIVE = "#6B7280";
+var DEFAULT_ACTIVE = "#111111";
+var DEFAULT_SEPARATOR = "#9CA3AF";
+var CRUMB_LAYOUT = "inline-flex items-center gap-1.5 whitespace-nowrap leading-5 rounded-sm";
+var LINK_INTERACTION = "font-normal transition-colors duration-200 motion-reduce:transition-none hover:!text-[color-mix(in_srgb,var(--bc-inactive)_65%,#111111)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#111111]";
+function BreadcrumbChevron() {
+  return /* @__PURE__ */ jsx11(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      "aria-hidden": "true",
+      className: "shrink-0",
+      children: /* @__PURE__ */ jsx11(
+        "path",
+        {
+          d: "M4.5 2.5L8 6L4.5 9.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
 function asTitleMap(customTitles) {
   if (Object.prototype.toString.call(customTitles) !== "[object Object]") {
     return {};
@@ -1222,73 +1253,141 @@ function Breadcrumbs({
   containerClassName,
   linkClassName = "",
   separatorClassName = "",
-  separator = "/",
-  activeClassName = "font-bold whitespace-pre",
+  separator,
+  activeClassName = "font-semibold",
   customTitles = {},
   customIcons = {},
   prefix,
   suffix,
-  nonClickablePaths = []
+  nonClickablePaths = [],
+  backgroundColor = DEFAULT_BACKGROUND,
+  inactiveColor = DEFAULT_INACTIVE,
+  activeColor = DEFAULT_ACTIVE,
+  separatorColor = DEFAULT_SEPARATOR,
+  iconColor,
+  iconClassName,
+  showHome = false
 }) {
   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 && titles[lastParamPath]) {
+      return titles[lastParamPath];
+    }
     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];
+    const segment = getLastParam(pathname);
+    if (segment && customIcons[segment]) {
+      return customIcons[segment];
     }
     return null;
   };
+  const crumbs = [];
+  if (showHome) {
+    crumbs.push({
+      key: "home",
+      to: "/",
+      title: titles.home || "Home",
+      icon: customIcons.home ?? null,
+      isCurrent: pathnames.length === 0,
+      isLink: pathnames.length > 0
+    });
+  }
+  pathnames.forEach((segment, index) => {
+    const to = `/${pathnames.slice(0, index + 1).join("/")}`;
+    const isCurrent = index === pathnames.length - 1;
+    const isNonClickable = nonClickablePaths.some(
+      (token) => to.includes(token) || segment === token
+    );
+    crumbs.push({
+      key: to,
+      to,
+      title: getTitle(to),
+      icon: getIcon(to),
+      isCurrent,
+      isLink: !isCurrent && !isNonClickable
+    });
+  });
+  const navStyle = {
+    backgroundColor,
+    "--bc-inactive": inactiveColor
+  };
+  const inactiveClassName = cn(CRUMB_LAYOUT, LINK_INTERACTION, linkClassName);
+  const staticInactiveClassName = cn(CRUMB_LAYOUT, "font-normal", linkClassName);
+  const currentClassName = cn(CRUMB_LAYOUT, activeClassName);
+  const renderCrumb = (crumb) => {
+    const content = /* @__PURE__ */ jsxs8(Fragment, { children: [
+      crumb.icon ? /* @__PURE__ */ jsx11(
+        "span",
+        {
+          className: cn("inline-flex shrink-0 items-center", iconClassName),
+          style: iconColor ? { color: iconColor } : void 0,
+          children: crumb.icon
+        }
+      ) : null,
+      crumb.title
+    ] });
+    if (crumb.isCurrent) {
+      return /* @__PURE__ */ jsx11(
+        "span",
+        {
+          className: currentClassName,
+          style: { color: activeColor },
+          "aria-current": "page",
+          children: content
+        }
+      );
+    }
+    if (crumb.isLink) {
+      return /* @__PURE__ */ jsx11(
+        Link,
+        {
+          to: crumb.to,
+          className: inactiveClassName,
+          style: { color: inactiveColor },
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx11("span", { className: staticInactiveClassName, style: { color: inactiveColor }, children: content });
+  };
   return /* @__PURE__ */ jsxs8(
-    "div",
+    "nav",
     {
+      "aria-label": "Breadcrumb",
       className: cn(
-        "flex flex-row gap-2 items-center text-sm text-secondary",
+        "flex w-full flex-row items-center gap-2 overflow-x-auto px-4 py-3 text-sm leading-5",
         containerClassName
       ),
+      style: navStyle,
       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 })
+        prefix ? /* @__PURE__ */ jsx11("div", { className: "breadcrumb-prefix", children: prefix }) : null,
+        /* @__PURE__ */ jsx11("ol", { className: "flex min-w-0 flex-row flex-nowrap items-center gap-2", children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs8("li", { className: "inline-flex items-center gap-2", children: [
+          index > 0 ? /* @__PURE__ */ jsx11(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "inline-flex shrink-0 items-center",
+                separatorClassName
+              ),
+              style: { color: separatorColor },
+              children: separator === void 0 ? /* @__PURE__ */ jsx11(BreadcrumbChevron, {}) : isValidElement(separator) ? cloneElement(separator) : separator
+            }
+          ) : null,
+          renderCrumb(crumb)
+        ] }, crumb.key)) }),
+        suffix ? /* @__PURE__ */ jsx11("div", { className: "breadcrumb-suffix", children: suffix }) : null
       ]
     }
   );
@@ -1301,7 +1400,7 @@ 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";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var defaultTooltipStyle = {
   color: "#fff",
   borderRadius: "5px",
@@ -1330,7 +1429,7 @@ function ToolTip({
   if (disabled || !tooltipText) {
     return /* @__PURE__ */ jsx12("span", { className, children });
   }
-  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
     /* @__PURE__ */ jsx12(
       "span",
       {
@@ -1694,7 +1793,7 @@ function Sidebar({
 }
 
 // src/components/skeleton/CardSkeleton.tsx
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, 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";
@@ -1786,7 +1885,7 @@ function CardSkeleton({
       index
     );
   });
-  return /* @__PURE__ */ jsx14(Fragment4, { children: skeletons });
+  return /* @__PURE__ */ jsx14(Fragment3, { children: skeletons });
 }
 
 // src/components/tooltip/TooltipText.tsx
@@ -2287,7 +2386,7 @@ function resolveActions(actions, data, hasPermission, presets) {
 }
 
 // src/components/row-actions/RowActions.tsx
-import { Fragment as Fragment5, jsx as jsx19 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx19 } from "react/jsx-runtime";
 function runAction(action, data, hide, confirmFn = confirmationAlert) {
   if (!action.onClick) {
     if (action.closeOnClick) hide?.();
@@ -2407,7 +2506,7 @@ function RowActions({
     });
   };
   if (renderTrigger) {
-    return /* @__PURE__ */ jsx19(Fragment5, { children: renderTrigger({
+    return /* @__PURE__ */ jsx19(Fragment4, { children: renderTrigger({
       data,
       actions: resolved,
       hide: () => void 0,
@@ -2446,7 +2545,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 Fragment6, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var TableErrorBoundary = ({
   isError,
   isLoading = false,
@@ -2519,7 +2618,7 @@ var TableErrorBoundary = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx20(Fragment6, { children });
+  return /* @__PURE__ */ jsx20(Fragment5, { children });
 };
 
 export {
@@ -2553,4 +2652,4 @@ export {
   RowActions,
   TableErrorBoundary
 };
-//# sourceMappingURL=chunk-S7ZLXOPF.mjs.map
+//# sourceMappingURL=chunk-KJWCRX6F.mjs.map