chordia-ui 3.9.8 → 4.0.0

package/dist/AgentLiftAnalysisCard.es.js

@@ -1,11 +1,11 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { useState as E, useRef as _ } from "react";
-import { Info as W, Settings as z } from "lucide-react";
-import { u as $ } from "./useMediaQuery.es.js";
-const A = "chordia-cog-spin-style";
-if (typeof document < "u" && !document.getElementById(A)) {
-  const l = document.createElement("style");
-  l.id = A, l.textContent = `
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { useState as v, useRef as _ } from "react";
+import { Info as F, Settings as k } from "lucide-react";
+import { u as W } from "./useMediaQuery.es.js";
+const E = "chordia-cog-spin-style";
+if (typeof document < "u" && !document.getElementById(E)) {
+  const r = document.createElement("style");
+  r.id = E, r.textContent = `
     @keyframes chordia-cog-spin {
       from { transform: rotate(0deg); }
       to   { transform: rotate(360deg); }
@@ -13,9 +13,9 @@ if (typeof document < "u" && !document.getElementById(A)) {
     @media (prefers-reduced-motion: reduce) {
       .chordia-cog-spin { animation: none !important; }
     }
-  `, document.head.appendChild(l);
+  `, document.head.appendChild(r);
 }
-const i = {
+const o = {
   strong: "var(--Grey-Strong, #2E3236)",
   muted: "var(--Grey-Muted, #808183)",
   faint: "var(--Grey-Faint, #ACADAD)",
@@ -26,47 +26,44 @@ const i = {
   surface: "#FAF9F5",
   // Gauge ring (background semicircle)
   gaugeTrack: "#E3E1D7"
-}, s = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", R = (l, n, r) => Math.max(n, Math.min(r, l)), w = (l) => {
-  const n = R(Number(l) || 0, -1, 1);
-  return n >= 0.6 ? "High" : n >= 0.15 ? "Above Average" : n <= -0.6 ? "Low" : n <= -0.15 ? "Below Average" : "Average";
-}, k = (l) => {
-  const n = Number(l);
-  return !Number.isFinite(n) || Math.abs(n) < 0.05 ? "neutral" : n > 0 ? "positive" : "negative";
-}, H = ({ text: l, children: n, maxWidth: r = 280 }) => {
-  const [t, o] = E(!1), a = _(null), [c, h] = E({ top: 0, left: 0 });
-  return l ? /* @__PURE__ */ d(
+}, i = "var(--font-sans, 'Averta', ui-sans-serif, system-ui, sans-serif)", b = (r, e, n) => Math.max(e, Math.min(n, r)), A = (r) => {
+  const e = b(Number(r) || 0, -1, 1);
+  return e >= 0.6 ? "High" : e >= 0.15 ? "Above Average" : e <= -0.6 ? "Low" : e <= -0.15 ? "Below Average" : "Average";
+}, $ = ({ text: r, children: e, maxWidth: n = 280 }) => {
+  const [h, a] = v(!1), l = _(null), [s, d] = v({ top: 0, left: 0 });
+  return r ? /* @__PURE__ */ c(
     "div",
     {
-      ref: a,
+      ref: l,
       style: { position: "relative", display: "inline-flex" },
       onMouseEnter: () => {
-        if (a.current) {
-          const f = a.current.getBoundingClientRect();
-          h({
+        if (l.current) {
+          const f = l.current.getBoundingClientRect();
+          d({
             top: f.bottom + 6,
             left: f.left + f.width / 2
           });
         }
-        o(!0);
+        a(!0);
       },
-      onMouseLeave: () => o(!1),
+      onMouseLeave: () => a(!1),
       children: [
-        n,
-        t && /* @__PURE__ */ e(
+        e,
+        h && /* @__PURE__ */ t(
           "div",
           {
             style: {
               position: "fixed",
-              top: c.top,
-              left: c.left,
+              top: s.top,
+              left: s.left,
               transform: "translate(-50%, 0)",
-              maxWidth: r,
+              maxWidth: n,
               padding: "8px 12px",
               borderRadius: 6,
               border: "1px solid var(--Grey-absent, #D9D9D9)",
               background: "var(--Grey-Strong, #2E3236)",
               color: "#FFF",
-              fontFamily: s,
+              fontFamily: i,
               fontSize: 12,
               fontWeight: 400,
               lineHeight: 1.4,
@@ -76,20 +73,20 @@ const i = {
               whiteSpace: "normal",
               textAlign: "left"
             },
-            children: l
+            children: r
           }
         )
       ]
     }
-  ) : n;
-}, M = ({ value: l = 0, highlight: n = null }) => {
-  const g = R(Number(l) || 0, -1, 1) * (Math.PI / 2), b = 60 + 38 * Math.sin(g), v = 56 - 38 * Math.cos(g);
-  let u = null;
-  if (n != null) {
-    const m = R(Number(n) || 0, -1, 1);
-    if (m !== 0) {
-      const x = m * (Math.PI / 2), y = 60, T = 56 - 26.65, L = 60 + 26.65 * Math.sin(x), N = 56 - 26.65 * Math.cos(x), F = m > 0 ? 1 : 0;
-      u = `M ${y} ${T} A ${26.65} ${26.65} 0 0 ${F} ${L} ${N}`;
+  ) : e;
+}, z = ({ value: r = 0, highlight: e = null }) => {
+  const m = b(Number(r) || 0, -1, 1) * (Math.PI / 2), x = 60 + 38 * Math.sin(m), p = 56 - 38 * Math.cos(m);
+  let g = null;
+  if (e != null) {
+    const y = b(Number(e) || 0, -1, 1);
+    if (y !== 0) {
+      const R = y * (Math.PI / 2), S = 60, w = 56 - 26.65, T = 60 + 26.65 * Math.sin(R), L = 56 - 26.65 * Math.cos(R), N = y > 0 ? 1 : 0;
+      g = `M ${S} ${w} A ${26.65} ${26.65} 0 0 ${N} ${T} ${L}`;
     }
   }
   return (
@@ -99,7 +96,7 @@ const i = {
     // doesn't reserve that empty space in the flow — matches Figma's
     // `mb-[-30px]` on the gauge wrapper and keeps the Outcome column's
     // bottom-anchored percent block from being pushed too far down.
-    /* @__PURE__ */ d(
+    /* @__PURE__ */ c(
       "svg",
       {
         width: "120",
@@ -109,89 +106,89 @@ const i = {
         "aria-hidden": "true",
         style: { marginBottom: -20, display: "block" },
         children: [
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "path",
             {
               d: `M ${60 - 26.65} 56 A ${26.65} ${26.65} 0 0 1 ${60 + 26.65} 56`,
               fill: "none",
-              stroke: i.gaugeTrack,
+              stroke: o.gaugeTrack,
               strokeWidth: 28.7,
               strokeLinecap: "butt"
             }
           ),
-          u && /* @__PURE__ */ e(
+          g && /* @__PURE__ */ t(
             "path",
             {
-              d: u,
+              d: g,
               fill: "none",
-              stroke: i.strong,
+              stroke: o.strong,
               strokeWidth: 28.7,
               strokeLinecap: "butt"
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "text",
             {
               x: 60,
               y: 56 - 41 - 4,
               textAnchor: "middle",
               fontSize: "13",
-              fontFamily: s,
-              fill: i.orange,
+              fontFamily: i,
+              fill: o.orange,
               children: "0"
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "text",
             {
               x: 60 - 41 - 9,
               y: 56 + 5,
               textAnchor: "middle",
               fontSize: "14",
-              fontFamily: s,
-              fill: i.strong,
+              fontFamily: i,
+              fill: o.strong,
               children: "−"
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "text",
             {
               x: 60 + 41 + 9,
               y: 56 + 5,
               textAnchor: "middle",
               fontSize: "14",
-              fontFamily: s,
-              fill: i.strong,
+              fontFamily: i,
+              fill: o.strong,
               children: "+"
             }
           ),
-          /* @__PURE__ */ e(
+          /* @__PURE__ */ t(
             "line",
             {
               x1: 60,
               y1: 56,
-              x2: b,
-              y2: v,
-              stroke: i.orange,
+              x2: x,
+              y2: p,
+              stroke: o.orange,
               strokeWidth: 2,
               strokeLinecap: "round"
             }
           ),
-          /* @__PURE__ */ e("circle", { cx: 60, cy: 56, r: 2.5, fill: i.orange })
+          /* @__PURE__ */ t("circle", { cx: 60, cy: 56, r: 2.5, fill: o.orange })
         ]
       }
     )
   );
-}, S = ({
-  title: l,
-  value: n,
-  highlight: r,
-  centerLabel: t,
-  centerLabelColor: o,
-  sublabel: a,
-  footer: c,
-  description: h
-}) => /* @__PURE__ */ d(
+}, C = ({
+  title: r,
+  value: e,
+  highlight: n,
+  centerLabel: h,
+  centerLabelColor: a,
+  sublabel: l,
+  footer: s,
+  description: d
+}) => /* @__PURE__ */ c(
   "div",
   {
     style: {
@@ -203,7 +200,7 @@ const i = {
       gap: 10
     },
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ t(
         "div",
         {
           style: {
@@ -213,28 +210,28 @@ const i = {
             justifyContent: "center",
             width: "100%"
           },
-          children: /* @__PURE__ */ e(
+          children: /* @__PURE__ */ t(
             "span",
             {
               style: {
-                fontFamily: s,
+                fontFamily: i,
                 fontSize: 14,
                 fontWeight: 400,
-                color: i.strong,
+                color: o.strong,
                 lineHeight: "20px",
                 textAlign: "center",
                 width: "100%"
               },
-              children: l
+              children: r
             }
           )
         }
       ),
-      n == null ? (
+      e == null ? (
         // Gauge swapped for an em-dash placeholder when the API ships no
         // numeric value for this column. Same 60px height as the gauge SVG
         // (after its -20 negative margin) so the columns stay aligned.
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ t(
           "div",
           {
             style: {
@@ -245,14 +242,14 @@ const i = {
               justifyContent: "center",
               marginBottom: -20
             },
-            children: /* @__PURE__ */ e(
+            children: /* @__PURE__ */ t(
               "span",
               {
                 style: {
-                  fontFamily: s,
+                  fontFamily: i,
                   fontSize: 28,
                   fontWeight: 400,
-                  color: i.muted,
+                  color: o.muted,
                   lineHeight: 1
                 },
                 children: "—"
@@ -260,8 +257,8 @@ const i = {
             )
           }
         )
-      ) : /* @__PURE__ */ e(M, { value: n, highlight: r }),
-      /* @__PURE__ */ d(
+      ) : /* @__PURE__ */ t(z, { value: e, highlight: n }),
+      /* @__PURE__ */ c(
         "div",
         {
           style: {
@@ -272,66 +269,66 @@ const i = {
             width: "100%"
           },
           children: [
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ t(
               "span",
               {
                 style: {
-                  fontFamily: s,
+                  fontFamily: i,
                   // Figma 1463:4261 spec: 14px Averta-Semibold, Neutral/850
                   // (#272727) for both "Average" and "Above Average".
                   fontSize: 14,
                   fontWeight: 600,
-                  color: t ? o || "#272727" : i.muted,
+                  color: h ? a || "#272727" : o.muted,
                   lineHeight: "normal",
                   textAlign: "center"
                 },
-                children: t || "—"
+                children: h || "—"
               }
             ),
-            a && /* @__PURE__ */ e(
+            l && /* @__PURE__ */ t(
               "span",
               {
                 style: {
-                  fontFamily: s,
+                  fontFamily: i,
                   fontSize: 13,
                   fontWeight: 400,
-                  color: i.muted,
+                  color: o.muted,
                   lineHeight: "normal",
                   textAlign: "center",
                   width: "100%"
                 },
-                children: a
+                children: l
               }
             ),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ t(
               "span",
               {
                 style: {
-                  fontFamily: s,
+                  fontFamily: i,
                   fontSize: 13,
                   fontWeight: 400,
-                  color: c ? i.strong : i.muted,
+                  color: s ? o.strong : o.muted,
                   lineHeight: "normal",
                   textAlign: "center",
                   width: "100%"
                 },
-                children: c || "—"
+                children: s || "—"
               }
             ),
-            h && /* @__PURE__ */ e(
+            d && /* @__PURE__ */ t(
               "span",
               {
                 style: {
-                  fontFamily: s,
+                  fontFamily: i,
                   fontSize: 13,
                   fontWeight: 400,
-                  color: i.muted,
+                  color: o.muted,
                   lineHeight: "normal",
                   textAlign: "center",
                   width: "100%",
                   marginTop: 4
                 },
-                children: h
+                children: d
               }
             )
           ]
@@ -339,157 +336,24 @@ const i = {
       )
     ]
   }
-), O = ({
-  percent: l,
-  label: n,
-  totalLabel: r = "Total",
-  description: t,
-  status: o
-}) => {
-  const a = (o == null ? void 0 : o.label) ?? n;
-  return (
-    // Top-aligned stack — pill → percent → Total / description, all hugging
-    // the top of the column with the root `gap: 16` between them. The row
-    // still uses `align-items: stretch` so the column visually fills the
-    // row height, but any leftover space falls to the BOTTOM of the column
-    // (after the description) rather than being distributed between the
-    // pill and the percent. This keeps the Outcome content tight even
-    // when the gauge columns are taller, matching the visual rhythm
-    // requested in the latest review.
-    /* @__PURE__ */ d(
-      "div",
-      {
-        style: {
-          flex: 1,
-          minWidth: 0,
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "flex-start",
-          gap: 16
-        },
-        children: [
-          a && /* @__PURE__ */ e(
-            "div",
-            {
-              style: {
-                minHeight: 40,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                width: "100%"
-              },
-              children: /* @__PURE__ */ e(
-                "span",
-                {
-                  style: {
-                    fontFamily: s,
-                    fontSize: 14,
-                    fontWeight: 600,
-                    color: i.strong,
-                    lineHeight: "normal",
-                    whiteSpace: "nowrap"
-                  },
-                  children: a
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ d(
-            "div",
-            {
-              style: {
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                gap: 20,
-                width: "100%"
-              },
-              children: [
-                /* @__PURE__ */ e(
-                  "span",
-                  {
-                    style: {
-                      fontFamily: s,
-                      fontSize: 34,
-                      fontWeight: 400,
-                      color: i.strong,
-                      lineHeight: 1.2,
-                      textAlign: "center",
-                      whiteSpace: "nowrap"
-                    },
-                    children: l != null ? `${l}%` : "—"
-                  }
-                ),
-                /* @__PURE__ */ d(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "center",
-                      gap: 4,
-                      width: "100%"
-                    },
-                    children: [
-                      r && /* @__PURE__ */ e(
-                        "span",
-                        {
-                          style: {
-                            fontFamily: s,
-                            fontSize: 14,
-                            fontWeight: 600,
-                            color: "#272727",
-                            lineHeight: "normal",
-                            textAlign: "center",
-                            whiteSpace: "nowrap"
-                          },
-                          children: r
-                        }
-                      ),
-                      t && /* @__PURE__ */ e(
-                        "span",
-                        {
-                          style: {
-                            fontFamily: s,
-                            fontSize: 13,
-                            fontWeight: 400,
-                            color: i.muted,
-                            lineHeight: "normal",
-                            textAlign: "center",
-                            width: "100%"
-                          },
-                          children: t
-                        }
-                      )
-                    ]
-                  }
-                )
-              ]
-            }
-          )
-        ]
-      }
-    )
-  );
-}, C = ({ variant: l = "dashed", horizontal: n = !1 }) => /* @__PURE__ */ e(
+), M = ({ variant: r = "dashed", horizontal: e = !1 }) => /* @__PURE__ */ t(
   "div",
   {
     "aria-hidden": "true",
-    style: n ? {
+    style: e ? {
       // Stacked (mobile) layout: a full-width horizontal rule between gauges.
       height: 0,
       width: "100%",
-      borderTop: `1px ${l} ${i.border}`,
+      borderTop: `1px ${r} ${o.border}`,
       flexShrink: 0
     } : {
       width: 0,
       alignSelf: "stretch",
-      borderLeft: `1px ${l} ${i.border}`,
+      borderLeft: `1px ${r} ${o.border}`,
       flexShrink: 0
     }
   }
-), D = () => /* @__PURE__ */ d(
+), H = () => /* @__PURE__ */ c(
   "div",
   {
     style: {
@@ -503,11 +367,11 @@ const i = {
       padding: "0 8px"
     },
     children: [
-      /* @__PURE__ */ e(
-        z,
+      /* @__PURE__ */ t(
+        k,
         {
           size: 28,
-          color: i.orange,
+          color: o.orange,
           strokeWidth: 2,
           className: "chordia-cog-spin",
           "aria-hidden": "true",
@@ -518,14 +382,14 @@ const i = {
           }
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ t(
         "span",
         {
           style: {
-            fontFamily: s,
+            fontFamily: i,
             fontSize: 14,
             fontWeight: 400,
-            color: i.strong,
+            color: o.strong,
             lineHeight: 1.2,
             textAlign: "center",
             maxWidth: 120
@@ -535,30 +399,25 @@ const i = {
       )
     ]
   }
-), U = ({
-  title: l = "Agent Lift Analysis",
-  status: n,
-  interactionDifficulty: r,
-  agentImpact: t,
-  outcome: o,
-  showInfoIcon: a = !0,
-  onInfoClick: c,
+), j = ({
+  title: r = "Agent Lift Analysis",
+  interactionDifficulty: e,
+  agentImpact: n,
+  showInfoIcon: h = !0,
+  onInfoClick: a,
   // Tooltip text rendered on hover of the (i) icon next to the card
   // title. The default explains what this section measures; hosts can
   // override per-context if needed.
-  infoTooltip: h = "Measures the agent's contribution to the call outcome by comparing actual performance against the expected result for similar calls."
+  infoTooltip: l = "Measures the agent's contribution to the call outcome by comparing actual performance against the expected result for similar calls."
 }) => {
-  const p = $("(max-width: 640px)"), f = Number(r == null ? void 0 : r.value) || 0, g = Number(t == null ? void 0 : t.value) || 0, b = (r == null ? void 0 : r.label) ?? w(f), v = (t == null ? void 0 : t.label) ?? w(g), u = "#272727", m = (() => {
-    if ((t == null ? void 0 : t.impactPercent) == null)
+  const s = W("(max-width: 640px)"), d = Number(e == null ? void 0 : e.value) || 0, u = Number(n == null ? void 0 : n.value) || 0, f = (e == null ? void 0 : e.label) ?? A(d), m = (n == null ? void 0 : n.label) ?? A(u), x = "#272727", p = (() => {
+    if ((n == null ? void 0 : n.impactPercent) == null)
       return;
-    const y = Number(t.impactPercent);
-    if (Number.isFinite(y))
-      return `${y < 0 ? "-" : ""}${Math.abs(y)}% Score impact`;
-  })(), x = n ?? {
-    label: o == null ? void 0 : o.label,
-    direction: t != null ? k(g) : "positive"
-  };
-  return /* @__PURE__ */ d(
+    const g = Number(n.impactPercent);
+    if (Number.isFinite(g))
+      return `${g < 0 ? "-" : ""}${Math.abs(g)}% Score impact`;
+  })();
+  return /* @__PURE__ */ c(
     "div",
     {
       style: {
@@ -566,14 +425,14 @@ const i = {
         flexDirection: "column",
         gap: 16,
         padding: "24px 16px",
-        background: i.surface,
-        border: `1px solid ${i.border}`,
+        background: o.surface,
+        border: `1px solid ${o.border}`,
         borderRadius: 8,
         width: "100%",
         boxSizing: "border-box"
       },
       children: [
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
@@ -583,25 +442,25 @@ const i = {
               width: "100%"
             },
             children: [
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ t(
                 "span",
                 {
                   style: {
-                    fontFamily: s,
+                    fontFamily: i,
                     fontSize: 15,
                     fontWeight: 700,
-                    color: i.strong,
+                    color: o.strong,
                     lineHeight: 1.2,
                     whiteSpace: "nowrap"
                   },
-                  children: l
+                  children: r
                 }
               ),
-              a && /* @__PURE__ */ e(H, { text: h, children: /* @__PURE__ */ e(
+              h && /* @__PURE__ */ t($, { text: l, children: /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  onClick: c,
+                  onClick: a,
                   "aria-label": "About Agent Lift Analysis",
                   style: {
                     display: "inline-flex",
@@ -616,63 +475,52 @@ const i = {
                     // a tooltip on hover or a click handler. Since `infoTooltip`
                     // defaults to a non-empty string, the icon almost always
                     // reads as interactive.
-                    cursor: h || c ? "pointer" : "default",
-                    color: i.muted
+                    cursor: l || a ? "pointer" : "default",
+                    color: o.muted
                   },
-                  children: /* @__PURE__ */ e(W, { size: 16, strokeWidth: 1.75 })
+                  children: /* @__PURE__ */ t(F, { size: 16, strokeWidth: 1.75 })
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ c(
           "div",
           {
             style: {
               display: "flex",
-              flexDirection: p ? "column" : "row",
+              flexDirection: s ? "column" : "row",
               alignItems: "stretch",
               gap: 16,
               width: "100%"
             },
             children: [
-              r && /* @__PURE__ */ e(
-                S,
+              e && /* @__PURE__ */ t(
+                C,
                 {
                   title: "Interaction Difficulty",
-                  value: f,
+                  value: d,
                   highlight: null,
-                  centerLabel: b,
-                  centerLabelColor: u,
-                  sublabel: r.sublabel,
-                  footer: r.footer
+                  centerLabel: f,
+                  centerLabelColor: x,
+                  sublabel: e.sublabel,
+                  footer: e.footer
                 }
               ),
-              r && t && /* @__PURE__ */ e(C, { variant: "dashed", horizontal: p }),
-              t && (t.isLearning ? /* @__PURE__ */ e(D, {}) : /* @__PURE__ */ e(
-                S,
+              e && n && /* @__PURE__ */ t(M, { variant: "dashed", horizontal: s }),
+              n && (n.isLearning ? /* @__PURE__ */ t(H, {}) : /* @__PURE__ */ t(
+                C,
                 {
                   title: "Agent Impact",
-                  value: g,
-                  highlight: g,
-                  centerLabel: v,
-                  centerLabelColor: u,
-                  sublabel: t.sublabel,
-                  footer: m,
-                  description: t.description
-                }
-              )),
-              (r || t) && o && /* @__PURE__ */ e(C, { variant: "solid", horizontal: p }),
-              o && /* @__PURE__ */ e(
-                O,
-                {
-                  percent: o.percent,
-                  label: o.label,
-                  totalLabel: o.totalLabel ?? "Total",
-                  description: o.description,
-                  status: x
+                  value: u,
+                  highlight: u,
+                  centerLabel: m,
+                  centerLabelColor: x,
+                  sublabel: n.sublabel,
+                  footer: p,
+                  description: n.description
                 }
-              )
+              ))
             ]
           }
         )
@@ -681,6 +529,6 @@ const i = {
   );
 };
 export {
-  U as A
+  j as A
 };
 //# sourceMappingURL=AgentLiftAnalysisCard.es.js.map