@eztrak/shared 0.16.5 → 0.17.0

package/dist/components/index.js

@@ -318,7 +318,138 @@ function classifyError(error) {
   };
 }
 var BRAND_ORANGE = "#FF7335";
-var CANCEL_RED = "#ff0000";
+var DANGER_RED = "#DC2626";
+var DANGER_ICON_BG = "#FEE2E2";
+var CANCEL_BG = "#ffffff";
+var CANCEL_TEXT = "#374151";
+var CONFIRM_STYLE_ID = "eztrak-confirm-alert-styles";
+function cssSize(value, fallback) {
+  if (value === void 0) return fallback;
+  return typeof value === "number" ? `${value}px` : value;
+}
+var DEFAULT_CONFIRM_ICONS = {
+  warning: `
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+      <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
+    </svg>
+  `.trim()
+};
+var VARIANT_DEFAULTS = {
+  brand: {
+    confirmButtonText: "Yes",
+    confirmButtonColor: BRAND_ORANGE,
+    confirmButtonTextColor: "#ffffff",
+    cancelButtonColor: CANCEL_BG,
+    cancelButtonTextColor: CANCEL_TEXT,
+    iconColor: BRAND_ORANGE,
+    iconBgColor: "#FFEDD5",
+    iconHtml: DEFAULT_CONFIRM_ICONS.warning,
+    icon: "warning"
+  },
+  danger: {
+    title: "Delete this item",
+    confirmButtonText: "Yes, delete it!",
+    confirmButtonColor: DANGER_RED,
+    confirmButtonTextColor: "#ffffff",
+    cancelButtonColor: CANCEL_BG,
+    cancelButtonTextColor: CANCEL_TEXT,
+    iconColor: DANGER_RED,
+    iconBgColor: DANGER_ICON_BG,
+    iconHtml: DEFAULT_CONFIRM_ICONS.warning,
+    icon: "warning",
+    showLoaderOnConfirm: true
+  }
+};
+function ensureConfirmAlertStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(CONFIRM_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = CONFIRM_STYLE_ID;
+  style.textContent = `
+    .ez-confirm-popup {
+      border-radius: var(--ez-confirm-radius, 1rem) !important;
+      padding: 1.5rem !important;
+      max-width: 24rem !important;
+      width: var(--ez-confirm-width, 100%) !important;
+      box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) !important;
+    }
+    .ez-confirm-title {
+      font-size: 1.125rem !important;
+      font-weight: 600 !important;
+      color: #111827 !important;
+      margin: 0 0 0.25rem !important;
+      padding: 0 !important;
+    }
+    .ez-confirm-html {
+      font-size: 0.875rem !important;
+      color: #6b7280 !important;
+      margin: 0 0 1.5rem !important;
+    }
+    .ez-confirm-icon {
+      border: none !important;
+      background: var(--ez-confirm-icon-bg, #fee2e2) !important;
+      color: var(--ez-confirm-icon-color, #dc2626) !important;
+      width: 3rem !important;
+      height: 3rem !important;
+      margin: 0 auto 1rem !important;
+      border-radius: 9999px !important;
+    }
+    .ez-confirm-icon .swal2-icon-content {
+      font-size: inherit !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      color: inherit !important;
+    }
+    .ez-confirm-actions {
+      width: 100% !important;
+      margin: 0 !important;
+      gap: 0.75rem !important;
+    }
+    .ez-confirm-confirm,
+    .ez-confirm-cancel {
+      flex: 1 1 0 !important;
+      margin: 0 !important;
+      border-radius: var(--ez-confirm-btn-radius, 0.5rem) !important;
+      font-size: 0.875rem !important;
+      font-weight: 500 !important;
+      padding: 0.625rem 1rem !important;
+      box-shadow: none !important;
+    }
+    .ez-confirm-confirm {
+      background: var(--ez-confirm-confirm-bg, #ff7335) !important;
+      color: var(--ez-confirm-confirm-fg, #fff) !important;
+      border: none !important;
+    }
+    .ez-confirm-confirm:hover {
+      filter: brightness(0.95);
+    }
+    .ez-confirm-cancel {
+      background: var(--ez-confirm-cancel-bg, #fff) !important;
+      color: var(--ez-confirm-cancel-fg, #374151) !important;
+      border: 1px solid #d1d5db !important;
+    }
+    .ez-confirm-cancel:hover {
+      background: #f9fafb !important;
+    }
+  `;
+  document.head.appendChild(style);
+}
+function pick(explicit, fromVariant, fallback) {
+  if (explicit !== void 0) return explicit;
+  if (fromVariant !== void 0) return fromVariant;
+  return fallback;
+}
+function mergeCustomClass(base, extra) {
+  if (!extra || typeof extra !== "object") return base;
+  const merged = { ...base };
+  for (const [key, value] of Object.entries(extra)) {
+    if (typeof value === "string" && value) {
+      merged[key] = merged[key] ? `${merged[key]} ${value}` : value;
+    }
+  }
+  return merged;
+}
 function getConfirmErrorMessage(error) {
   if (error && typeof error === "object") {
     const err = error;
@@ -327,23 +458,59 @@ function getConfirmErrorMessage(error) {
   return "Something went wrong. Please try again.";
 }
 function confirmationAlert(onConfirm, options = {}) {
-  const {
-    title = options.inputExpectedValue ? "Confirmation Required" : "Are you sure?",
-    text,
-    html,
-    icon = "warning",
-    confirmButtonText = "Yes",
-    cancelButtonText = "Cancel",
-    confirmButtonColor = BRAND_ORANGE,
-    cancelButtonColor = CANCEL_RED,
-    showLoaderOnConfirm = false,
-    inputExpectedValue,
-    inputPlaceholder = "Type confirmation text to proceed",
-    reverseButtons,
-    focusCancel,
-    zIndex
-  } = options;
+  ensureConfirmAlertStyles();
+  const variant = options.variant ?? "brand";
+  const vd = VARIANT_DEFAULTS[variant];
+  const inputExpectedValue = options.inputExpectedValue;
   const hasInput = Boolean(inputExpectedValue);
+  const title = pick(
+    options.title,
+    vd.title,
+    hasInput ? "Confirmation Required" : "Delete this item"
+  );
+  const text = options.text;
+  const html = options.html;
+  const icon = pick(options.icon, vd.icon, "warning");
+  const iconHtml = pick(options.iconHtml, vd.iconHtml, void 0);
+  const iconColor = pick(options.iconColor, vd.iconColor, BRAND_ORANGE);
+  const iconBgColor = pick(options.iconBgColor, vd.iconBgColor, "#FFEDD5");
+  const showIcon = options.showIcon !== false;
+  const confirmButtonText = pick(options.confirmButtonText, vd.confirmButtonText, "Yes");
+  const cancelButtonText = options.cancelButtonText ?? "Cancel";
+  const confirmButtonColor = pick(
+    options.confirmButtonColor,
+    vd.confirmButtonColor,
+    BRAND_ORANGE
+  );
+  const cancelButtonColor = pick(
+    options.cancelButtonColor,
+    vd.cancelButtonColor,
+    CANCEL_BG
+  );
+  const confirmButtonTextColor = pick(
+    options.confirmButtonTextColor,
+    vd.confirmButtonTextColor,
+    "#ffffff"
+  );
+  const cancelButtonTextColor = pick(
+    options.cancelButtonTextColor,
+    vd.cancelButtonTextColor,
+    CANCEL_TEXT
+  );
+  const showCancelButton = options.showCancelButton !== false;
+  const showLoaderOnConfirm = pick(
+    options.showLoaderOnConfirm,
+    vd.showLoaderOnConfirm,
+    false
+  );
+  const inputPlaceholder = options.inputPlaceholder ?? "Type confirmation text to proceed";
+  const reverseButtons = options.reverseButtons ?? false;
+  const focusCancel = options.focusCancel;
+  const zIndex = options.zIndex;
+  const width = options.width;
+  const borderRadius = cssSize(options.borderRadius, "1rem");
+  const buttonBorderRadius = cssSize(options.buttonBorderRadius, "0.5rem");
+  const onCancel = options.onCancel;
   const useLoader = showLoaderOnConfirm || hasInput;
   const inputHtml = html ?? (hasInput ? `
       ${text ? `<p style="margin-bottom: 15px;">${text}</p>` : ""}
@@ -351,24 +518,56 @@ function confirmationAlert(onConfirm, options = {}) {
         Please type "<span style="color: ${BRAND_ORANGE}; font-weight: bold;">${inputExpectedValue}</span>" to confirm:
       </p>
     ` : void 0);
+  const baseCustomClass = {
+    popup: "ez-confirm-popup",
+    title: "ez-confirm-title",
+    htmlContainer: "ez-confirm-html",
+    actions: "ez-confirm-actions",
+    confirmButton: "ez-confirm-confirm",
+    cancelButton: "ez-confirm-cancel",
+    icon: "ez-confirm-icon"
+  };
   const swalOptions = {
     title,
-    icon,
-    showCancelButton: true,
+    showCancelButton,
     confirmButtonText,
     cancelButtonText,
     confirmButtonColor,
     cancelButtonColor,
     reverseButtons,
     focusCancel,
+    customClass: mergeCustomClass(baseCustomClass, options.customClass),
     allowOutsideClick: () => !import_sweetalert2.default.isLoading(),
     allowEscapeKey: () => !import_sweetalert2.default.isLoading(),
     didOpen: () => {
+      const popup = import_sweetalert2.default.getPopup();
+      if (popup) {
+        popup.style.setProperty("--ez-confirm-confirm-bg", confirmButtonColor);
+        popup.style.setProperty("--ez-confirm-confirm-fg", confirmButtonTextColor);
+        popup.style.setProperty("--ez-confirm-cancel-bg", cancelButtonColor);
+        popup.style.setProperty("--ez-confirm-cancel-fg", cancelButtonTextColor);
+        popup.style.setProperty("--ez-confirm-icon-color", iconColor);
+        popup.style.setProperty("--ez-confirm-icon-bg", iconBgColor);
+        popup.style.setProperty("--ez-confirm-radius", borderRadius);
+        popup.style.setProperty("--ez-confirm-btn-radius", buttonBorderRadius);
+        if (width != null) {
+          popup.style.setProperty(
+            "--ez-confirm-width",
+            typeof width === "number" ? `${width}px` : String(width)
+          );
+        }
+      }
       if (zIndex == null) return;
       const container = import_sweetalert2.default.getContainer();
       if (container) container.style.zIndex = String(zIndex);
     }
   };
+  if (showIcon) {
+    swalOptions.icon = icon;
+    if (iconHtml) {
+      swalOptions.iconHtml = iconHtml;
+    }
+  }
   if (hasInput) {
     swalOptions.html = inputHtml;
     swalOptions.input = "text";
@@ -403,6 +602,10 @@ function confirmationAlert(onConfirm, options = {}) {
   void import_sweetalert2.default.fire(swalOptions).then((result) => {
     if (result.isConfirmed && !useLoader) {
       void Promise.resolve(onConfirm());
+      return;
+    }
+    if (result.isDismissed) {
+      onCancel?.();
     }
   });
 }
@@ -1411,7 +1614,35 @@ function Header({
 var import_react6 = 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 {};
@@ -1441,73 +1672,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_react6.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_react6.isValidElement)(separator) ? (0, import_react6.cloneElement)(separator) : separator
+            }
+          ) : null,
+          renderCrumb(crumb)
+        ] }, crumb.key)) }),
+        suffix ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "breadcrumb-suffix", children: suffix }) : null
       ]
     }
   );