@eztrak/shared 0.16.5 → 0.16.6

package/dist/components/index.mjs

@@ -28,7 +28,7 @@ import {
   TooltipText,
   dropdownStyles,
   resolveActions
-} from "../chunk-S7ZLXOPF.mjs";
+} from "../chunk-SS3J2WBE.mjs";
 import "../chunk-EIX5CUQF.mjs";
 export {
   ActionMenuItem,

package/dist/index.js

@@ -1839,7 +1839,35 @@ function Header({
 var import_react8 = require("react");
 var import_react_router_dom5 = require("react-router-dom");
 var import_jsx_runtime11 = require("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]";
+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__ */ (0, import_jsx_runtime11.jsx)(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      "aria-hidden": "true",
+      className: "shrink-0",
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "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 {};
@@ -1869,73 +1897,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 = (0, import_react_router_dom5.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__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+      crumb.icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "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__ */ (0, import_jsx_runtime11.jsx)(
+        "span",
+        {
+          className: currentClassName,
+          style: { color: activeColor },
+          "aria-current": "page",
+          children: content
+        }
+      );
+    }
+    if (crumb.isLink) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_react_router_dom5.Link,
+        {
+          to: crumb.to,
+          className: inactiveClassName,
+          style: { color: inactiveColor },
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: staticInactiveClassName, style: { color: inactiveColor }, children: content });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    "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__ */ (0, import_jsx_runtime11.jsx)("div", { className: "breadcrumb-prefix", children: prefix }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_router_dom5.Link, { to: "/", className: inactiveLinkClassName, children: [
-          customIcons.home && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
-            icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "mr-1", children: icon }),
-            title
-          ] });
-          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react8.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: separatorClassName, children: separator }),
-            isLast || isNonClickable ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: isLast ? activeClassName : linkClassName, children: crumb }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_router_dom5.Link, { to, className: inactiveLinkClassName, children: crumb })
-          ] }, to);
-        }),
-        suffix && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "breadcrumb-suffix", children: suffix })
+        prefix ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "breadcrumb-prefix", children: prefix }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ol", { className: "flex min-w-0 flex-row flex-nowrap items-center gap-2", children: crumbs.map((crumb, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { className: "inline-flex items-center gap-2", children: [
+          index > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "inline-flex shrink-0 items-center",
+                separatorClassName
+              ),
+              style: { color: separatorColor },
+              children: separator === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BreadcrumbChevron, {}) : (0, import_react8.isValidElement)(separator) ? (0, import_react8.cloneElement)(separator) : separator
+            }
+          ) : null,
+          renderCrumb(crumb)
+        ] }, crumb.key)) }),
+        suffix ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "breadcrumb-suffix", children: suffix }) : null
       ]
     }
   );