@eztrak/shared 0.16.6 → 0.17.1

package/dist/components/index.js

@@ -318,7 +318,144 @@ 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;
+    }
+    .ez-confirm-popup .swal2-input {
+      margin-top: var(--ez-confirm-input-mt, 0) !important;
+      margin-right: var(--ez-confirm-input-mr, 0) !important;
+      margin-bottom: var(--ez-confirm-input-mb, 1.25rem) !important;
+      margin-left: var(--ez-confirm-input-ml, 0) !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 +464,63 @@ 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 ?? options.children;
+  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 inputMarginTop = cssSize(options.inputMarginTop, "0");
+  const inputMarginRight = cssSize(options.inputMarginRight, "0");
+  const inputMarginBottom = cssSize(options.inputMarginBottom, "1.25rem");
+  const inputMarginLeft = cssSize(options.inputMarginLeft, "0");
+  const onCancel = options.onCancel;
   const useLoader = showLoaderOnConfirm || hasInput;
   const inputHtml = html ?? (hasInput ? `
       ${text ? `<p style="margin-bottom: 15px;">${text}</p>` : ""}
@@ -351,24 +528,60 @@ 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);
+        popup.style.setProperty("--ez-confirm-input-mt", inputMarginTop);
+        popup.style.setProperty("--ez-confirm-input-mr", inputMarginRight);
+        popup.style.setProperty("--ez-confirm-input-mb", inputMarginBottom);
+        popup.style.setProperty("--ez-confirm-input-ml", inputMarginLeft);
+        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 +616,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?.();
     }
   });
 }
@@ -1826,10 +2043,7 @@ function Sidebar({
                   "div",
                   {
                     "data-sidebar-item": item.name,
-                    className: cn(
-                      "has-sub-items max-w-full min-w-0 flex flex-col",
-                      collapsed ? "my-1" : "my-2"
-                    ),
+                    className: "has-sub-items max-w-full min-w-0 flex flex-col",
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         ToolTip,