@iqworksai/common-components 0.1.21 → 0.1.23

package/dist/components/Charts/VerticalBarChart/index.mjs

@@ -0,0 +1,130 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useMemo as i } from "react";
+import "../../../node_modules/chart.js/auto/auto.mjs";
+import { Chart as s } from "../../../node_modules/react-chartjs-2/dist/index.mjs";
+import { useTheme as c } from "../../../context/ThemeContext.mjs";
+import { Chart as m, CategoryScale as p, LinearScale as g, BarElement as y, PointElement as b, LineElement as f, Title as C, Tooltip as h, Legend as S } from "../../../node_modules/chart.js/dist/chart.mjs";
+m.register(p, g, y, b, f, C, h, S);
+m.defaults.font.family = "'Rubik', 'Inter', sans-serif";
+const L = ({ chartData: t, title: l }) => {
+  const { theme: n } = c(), e = getComputedStyle(document.documentElement).getPropertyValue("--chart-text-color").trim() || (n === "dark" ? "#fff" : "#333333"), d = i(
+    () => ({
+      responsive: !0,
+      maintainAspectRatio: !1,
+      interaction: {
+        mode: "nearest",
+        intersect: !1
+      },
+      scales: {
+        y: {
+          beginAtZero: !0,
+          grid: {
+            color: getComputedStyle(document.documentElement).getPropertyValue("--chart-grid-color").trim()
+          },
+          ticks: {
+            maxTicksLimit: 8,
+            font: {
+              size: 12,
+              weight: "bold"
+            },
+            color: e
+          },
+          border: {
+            color: getComputedStyle(document.documentElement).getPropertyValue("--border-color").trim()
+          }
+        },
+        x: {
+          grid: {
+            display: !1,
+            color: getComputedStyle(document.documentElement).getPropertyValue("--chart-grid-color").trim()
+          },
+          ticks: {
+            font: {
+              size: 12,
+              weight: "bold"
+            },
+            color: e
+          },
+          border: {
+            color: getComputedStyle(document.documentElement).getPropertyValue("--border-color").trim()
+          }
+        }
+      },
+      plugins: {
+        datalabels: {
+          color: e,
+          font: { weight: "bold", size: 14 },
+          anchor: "end",
+          align: "left",
+          formatter: (o, r) => r.dataset.label === "Blue Bar" ? o.toLocaleString() : ""
+        },
+        legend: {
+          display: !1,
+          labels: {
+            color: e
+          }
+        },
+        title: {
+          display: !0,
+          text: l || "",
+          color: e,
+          font: {
+            weight: "600",
+            size: 20
+          },
+          position: "top",
+          align: "start"
+        },
+        tooltip: {
+          backgroundColor: getComputedStyle(document.documentElement).getPropertyValue("--bg-color").trim(),
+          titleColor: e,
+          bodyColor: e,
+          borderColor: getComputedStyle(document.documentElement).getPropertyValue("--border-color").trim(),
+          borderWidth: 1,
+          callbacks: {
+            label: function(o) {
+              return `${o.dataset.type === "line" ? "Trend" : "Value"}: ${o.raw}`;
+            }
+          }
+        }
+      }
+    }),
+    [l, n, e]
+  ), u = i(() => {
+    var o;
+    return t != null && t.monthlyData ? {
+      labels: (o = t.monthlyData) == null ? void 0 : o.map((r) => r.month),
+      datasets: [
+        {
+          label: `${l}`,
+          type: "line",
+          data: t.monthlyData.map((r) => r.value),
+          borderColor: getComputedStyle(document.documentElement).getPropertyValue("--brand-orange").trim(),
+          borderWidth: 3,
+          pointRadius: 4,
+          pointBackgroundColor: getComputedStyle(document.documentElement).getPropertyValue("--bg-color").trim(),
+          pointBorderColor: getComputedStyle(document.documentElement).getPropertyValue("--brand-orange").trim(),
+          pointBorderWidth: 3,
+          tension: 0,
+          fill: !1,
+          yAxisID: "y",
+          stack: "stack 1"
+        },
+        {
+          label: `${l}`,
+          type: "bar",
+          data: t.monthlyData.map((r) => r.value),
+          backgroundColor: getComputedStyle(document.documentElement).getPropertyValue("--brand-light").trim(),
+          borderSkipped: !1,
+          maxBarThickness: 30,
+          stack: "Stack 0",
+          borderRadius: { topLeft: 20, topRight: 20, bottomLeft: 0, bottomRight: 0 }
+        }
+      ]
+    } : { labels: [], datasets: [] };
+  }, [t, l]);
+  return /* @__PURE__ */ a("div", { className: "vertical-bar-chart", style: { height: "400px" }, children: /* @__PURE__ */ a(s, { type: "bar", options: d, data: u }) });
+};
+export {
+  L as default
+};

package/dist/components/ConfidenceScoreTooltip/index.mjs

@@ -0,0 +1,113 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { useState as p, useRef as x, useEffect as T } from "react";
+import $ from "react-dom";
+import { MdInfo as j } from "../../node_modules/react-icons/md/index.mjs";
+/* empty css            */
+const P = ({ confidenceData: w, children: b, position: r = "top" }) => {
+  const [f, u] = p(!1), [g, y] = p({}), [N, C] = p({}), h = x(null), v = x(null);
+  T(() => {
+    if (!f || !h.current) return;
+    const e = h.current.getBoundingClientRect(), s = v.current;
+    if (!s) return;
+    const t = s.getBoundingClientRect(), m = window.innerWidth, k = window.innerHeight;
+    let l = r, n = 0, c = 0, a = 0, d = 0;
+    switch (r === "top" && e.top - t.height < 10 ? l = "bottom" : r === "bottom" && e.bottom + t.height > k - 10 ? l = "top" : r === "left" && e.left - t.width < 10 ? l = "right" : r === "right" && e.right + t.width > m - 10 && (l = "left"), l) {
+      case "top":
+        n = e.top - t.height - 8, c = e.left + e.width / 2 - t.width / 2, a = t.height - 4, d = t.width / 2 - 5;
+        break;
+      case "bottom":
+        n = e.bottom + 8, c = e.left + e.width / 2 - t.width / 2, a = -5, d = t.width / 2 - 5;
+        break;
+      case "left":
+        n = e.top + e.height / 2 - t.height / 2, c = e.left - t.width - 8, a = t.height / 2 - 5, d = t.width - 4;
+        break;
+      case "right":
+        n = e.top + e.height / 2 - t.height / 2, c = e.right + 8, a = t.height / 2 - 5, d = -5;
+        break;
+    }
+    y({
+      top: `${n}px`,
+      left: `${c}px`,
+      opacity: 1,
+      visibility: "visible"
+    }), C({
+      top: `${a}px`,
+      left: `${d}px`,
+      transform: "rotate(45deg)"
+    });
+  }, [f, r]);
+  const _ = (e) => e >= 0.8 ? "text-green-600" : e >= 0.6 ? "text-yellow-600" : "text-red-600", R = (e) => e >= 0.8 ? "High" : e >= 0.6 ? "Medium" : "Low", S = (e) => {
+    switch (e) {
+      case "column_name":
+        return "Based on column name analysis";
+      case "sample_data":
+        return "Based on sample data analysis";
+      default:
+        return "Confidence score available";
+    }
+  }, M = () => {
+    const { confidence_score: e, classification_reason: s, sample_data_preview: t, confidence_reason: m } = w;
+    return /* @__PURE__ */ i("div", { className: "confidence-tooltip-content", children: [
+      /* @__PURE__ */ o("div", { className: "confidence-tooltip-header", children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ o(j, { className: "h-4 w-4 text-blue-500" }),
+        /* @__PURE__ */ o("span", { className: "font-semibold", style: { color: "var(--text-color)" }, children: "Classification Details" })
+      ] }) }),
+      /* @__PURE__ */ i("div", { className: "confidence-tooltip-body", children: [
+        e !== void 0 && /* @__PURE__ */ o("div", { className: "confidence-score-section", children: /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ o("span", { className: "text-sm font-medium", style: { color: "var(--secondary-text-color)" }, children: "Confidence Score:" }),
+          /* @__PURE__ */ i("span", { className: `text-sm font-bold ${_(e)}`, children: [
+            R(e),
+            " (",
+            (e * 100).toFixed(0),
+            "%)"
+          ] })
+        ] }) }),
+        /* @__PURE__ */ o("div", { className: "classification-reason-section", children: /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ o("span", { className: "text-sm font-medium", style: { color: "var(--secondary-text-color)" }, children: "Classification Method:" }),
+          /* @__PURE__ */ o("span", { className: "text-sm", style: { color: "var(--text-color)" }, children: S(s) })
+        ] }) }),
+        s === "sample_data" && t && /* @__PURE__ */ i("div", { className: "sample-data-section", children: [
+          /* @__PURE__ */ o("div", { className: "text-sm font-medium mb-1", style: { color: "var(--text-color)" }, children: "Sample Data Preview:" }),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: "text-xs p-2 rounded border max-w-xs",
+              style: {
+                color: "var(--text-color)",
+                backgroundColor: "var(--hover-bg-color)",
+                borderColor: "var(--border-color)"
+              },
+              children: /* @__PURE__ */ o("div", { className: "truncate", title: t, children: t })
+            }
+          )
+        ] }),
+        m && /* @__PURE__ */ i("div", { className: "confidence-reason-section", children: [
+          /* @__PURE__ */ o("div", { className: "text-sm font-medium mb-1", style: { color: "var(--text-color)" }, children: "Additional Details:" }),
+          /* @__PURE__ */ o("div", { className: "text-xs", style: { color: "var(--secondary-text-color)" }, children: m })
+        ] })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: "confidence-tooltip-wrapper",
+      ref: h,
+      onMouseEnter: () => u(!0),
+      onMouseLeave: () => u(!1),
+      children: [
+        b,
+        f && $.createPortal(
+          /* @__PURE__ */ i("div", { ref: v, className: "confidence-tooltip", style: g, children: [
+            M(),
+            /* @__PURE__ */ o("span", { className: "confidence-tooltip-arrow", style: N })
+          ] }),
+          document.body
+        )
+      ]
+    }
+  );
+};
+export {
+  P as default
+};

package/dist/components/ConfirmationModal/index.mjs

@@ -0,0 +1,96 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { FaExclamationTriangle as g } from "../../node_modules/react-icons/fa/index.mjs";
+const h = ({
+  isOpen: n,
+  onClose: l,
+  onConfirm: a,
+  title: c,
+  message: i,
+  confirmText: d = "Confirm",
+  cancelText: m = "Cancel",
+  type: s = "warning",
+  isLoading: o = !1
+}) => {
+  if (!n) return null;
+  const u = () => {
+    switch (s) {
+      case "danger":
+        return "text-red-500";
+      case "warning":
+        return "text-yellow-500";
+      case "info":
+        return "text-brand-primary";
+      default:
+        return "text-yellow-500";
+    }
+  }, f = () => {
+    switch (s) {
+      case "danger":
+        return "bg-red-600 hover:bg-red-700 focus:ring-red-500";
+      case "warning":
+        return "bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500";
+      case "info":
+        return "bg-brand-primary hover:bg-[hsl(var(--brand-orange))]/90 focus:ring-[hsl(var(--brand-orange))]";
+      default:
+        return "bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500";
+    }
+  };
+  return /* @__PURE__ */ r("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity", onClick: l }),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "relative rounded-lg text-left overflow-hidden shadow-xl transform transition-all max-w-lg w-full mx-4",
+        style: { backgroundColor: "var(--bg-color)", border: "1px solid var(--border-color)" },
+        children: [
+          /* @__PURE__ */ e("div", { className: "px-4 pt-5 pb-4 sm:p-6 sm:pb-4", style: { backgroundColor: "var(--bg-color)" }, children: /* @__PURE__ */ r("div", { className: "sm:flex sm:items-start", children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10",
+                style: { backgroundColor: "var(--hover-bg-color)" },
+                children: /* @__PURE__ */ e(g, { className: `h-6 w-6 ${u()}` })
+              }
+            ),
+            /* @__PURE__ */ r("div", { className: "mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left", children: [
+              /* @__PURE__ */ e("h3", { className: "text-lg leading-6 font-medium", style: { color: "var(--text-color)" }, children: c }),
+              /* @__PURE__ */ e("div", { className: "mt-2", children: /* @__PURE__ */ e("p", { className: "text-sm whitespace-pre-line", style: { color: "var(--secondary-text-color)" }, children: i }) })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ r("div", { className: "px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse", style: { backgroundColor: "var(--hover-bg-color)" }, children: [
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: `w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white ${f()} focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed`,
+                onClick: a,
+                disabled: o,
+                children: o ? "Processing..." : d
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: "mt-3 w-full inline-flex justify-center rounded-md shadow-sm px-4 py-2 text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm",
+                style: {
+                  backgroundColor: "var(--bg-color)",
+                  color: "var(--text-color)",
+                  border: "1px solid var(--border-color)"
+                },
+                onMouseEnter: (t) => t.currentTarget.style.backgroundColor = "var(--hover-bg-color)",
+                onMouseLeave: (t) => t.currentTarget.style.backgroundColor = "var(--bg-color)",
+                onClick: l,
+                disabled: o,
+                children: m
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  h as default
+};

package/dist/components/CountryBox/index.mjs

@@ -0,0 +1,18 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useRef as i, useState as d, useEffect as f } from "react";
+import x from "../ToolTip/index.mjs";
+const g = ({ icon: n, title: e = "Select Country" }) => {
+  const o = i(null), [c, a] = d(!1);
+  f(() => {
+    const r = o.current;
+    r && a(r.scrollWidth > r.clientWidth);
+  }, [e]);
+  const s = /* @__PURE__ */ t("p", { ref: o, className: "overflow-hidden text-ellipsis whitespace-nowrap max-w-36", children: e });
+  return /* @__PURE__ */ l("div", { className: "px-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-gray-400 dark:text-gray-300 text-sm text-center h-[30px] flex items-center justify-center", children: [
+    /* @__PURE__ */ t("img", { src: n, alt: e, className: "w-4 h-4 mr-2 rounded-full object-cover" }),
+    c ? /* @__PURE__ */ t(x, { text: e, children: s }) : s
+  ] });
+};
+export {
+  g as default
+};