chordia-ui 3.2.2 → 3.2.4

package/dist/components/onboarding.es.js

@@ -0,0 +1,712 @@
+import { a as C } from "../UploadInteraction.es.js";
+import { U as Ge } from "../UploadInteraction.es.js";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useState as p } from "react";
+import { Search as z, Briefcase as T, MessageSquare as I, Database as W, Users as R, BookOpen as L, SlidersHorizontal as H } from "lucide-react";
+import { I as B } from "../IntegrationCard.es.js";
+const w = "var(--font-sans)", E = {
+  fontFamily: w
+}, A = {
+  fontSize: 20,
+  fontWeight: 600,
+  fontStyle: "normal",
+  fontFamily: w,
+  color: "var(--grey-strong)",
+  margin: 0,
+  lineHeight: "normal"
+}, D = {
+  fontSize: 13,
+  fontWeight: 400,
+  fontStyle: "normal",
+  color: "var(--color-text-secondary)",
+  fontFamily: w,
+  margin: "4px 0 0",
+  lineHeight: "140%"
+}, N = {
+  display: "grid",
+  gridTemplateColumns: "repeat(3, 1fr)",
+  gap: 16,
+  marginTop: 24
+}, M = [
+  {
+    providerName: "Five9",
+    description: "Cloud contact center platform for voice and digital channels",
+    status: "connected",
+    railColor: "#5E88B0"
+  },
+  {
+    providerName: "Twilio Flex",
+    description: "Programmable contact center with custom workflows",
+    status: "available",
+    railColor: "#9B7AA8"
+  },
+  {
+    providerName: "Zoom Phone",
+    description: "Cloud phone system with recording capabilities",
+    status: "coming-soon",
+    railColor: "#6B7C93"
+  }
+], j = ({ integrations: i = M, onConfigure: l }) => /* @__PURE__ */ o("div", { style: E, children: [
+  /* @__PURE__ */ e("h2", { style: A, children: "Connect Data Source" }),
+  /* @__PURE__ */ e("p", { style: D, children: "Choose your preferred platforms to synchronise data." }),
+  /* @__PURE__ */ e("div", { style: N, children: i.map((r) => /* @__PURE__ */ e(
+    B,
+    {
+      providerName: r.providerName,
+      description: r.description,
+      status: r.status,
+      railColor: r.railColor,
+      logoUrl: r.logoUrl,
+      icon: r.icon,
+      onConfigure: () => l == null ? void 0 : l(r)
+    },
+    r.providerName
+  )) })
+] }), m = "var(--font-sans)", U = {
+  fontFamily: m
+}, $ = {
+  fontSize: 20,
+  fontWeight: 600,
+  fontStyle: "normal",
+  fontFamily: m,
+  color: "var(--grey-strong)",
+  margin: 0,
+  lineHeight: "normal"
+}, G = {
+  fontSize: 13,
+  fontWeight: 400,
+  fontStyle: "normal",
+  color: "var(--color-text-secondary)",
+  fontFamily: m,
+  margin: "4px 0 0",
+  lineHeight: "140%"
+}, P = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  marginTop: 24
+}, O = {
+  display: "flex",
+  alignItems: "center",
+  flex: 1,
+  height: 44,
+  padding: "0 14px",
+  borderRadius: 10,
+  border: "1px solid var(--color-input-border)",
+  background: "var(--grey-white)",
+  boxSizing: "border-box",
+  gap: 8
+}, _ = {
+  flexShrink: 0,
+  color: "var(--color-text-secondary)"
+}, K = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 4,
+  padding: "4px 10px",
+  borderRadius: 6,
+  background: "var(--hover-warm)",
+  fontSize: 14,
+  fontWeight: 500,
+  fontFamily: m,
+  color: "var(--grey-strong)",
+  whiteSpace: "nowrap"
+}, V = {
+  cursor: "pointer",
+  fontSize: 16,
+  lineHeight: 1,
+  color: "var(--color-text-secondary)",
+  marginLeft: 2
+}, q = {
+  flex: 1,
+  border: "none",
+  outline: "none",
+  fontSize: 14,
+  fontWeight: 400,
+  fontFamily: m,
+  color: "var(--grey-strong)",
+  background: "transparent",
+  height: "100%"
+}, Z = {
+  display: "flex",
+  height: 44,
+  padding: "0 24px",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: 10,
+  background: "var(--grey-strong)",
+  fontSize: 14,
+  fontWeight: 600,
+  fontFamily: m,
+  color: "var(--grey-white)",
+  border: "none",
+  cursor: "pointer",
+  transition: "var(--transition-fast)",
+  outline: "none",
+  flexShrink: 0
+}, J = {
+  marginTop: 8,
+  border: "1px solid var(--border)",
+  borderRadius: 10,
+  overflow: "hidden",
+  background: "var(--grey-white)"
+}, Q = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  padding: "14px 16px",
+  cursor: "pointer",
+  transition: "var(--transition-fast)",
+  borderBottom: "1px solid var(--border-subtle)"
+}, X = (i) => ({
+  width: 40,
+  height: 40,
+  borderRadius: 9999,
+  background: i || "var(--hover-warm)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: 14,
+  fontWeight: 600,
+  fontFamily: m,
+  color: "var(--color-green)",
+  flexShrink: 0
+}), Y = {
+  fontSize: 14,
+  fontWeight: 600,
+  fontFamily: m,
+  color: "var(--grey-strong)",
+  margin: 0,
+  lineHeight: "120%"
+}, ee = {
+  fontSize: 13,
+  fontWeight: 400,
+  fontFamily: m,
+  color: "var(--color-text-secondary)",
+  margin: "2px 0 0",
+  lineHeight: "140%"
+}, te = [
+  { name: "Alex Rivera", email: "alex.rivera@company.com", initials: "AR" },
+  { name: "Alexandra Smith", email: "a.smith@design.co", initials: "AS" }
+], oe = ({ suggestions: i = te, onInvite: l }) => {
+  const [r, g] = p(""), [n, d] = p([]), [c, u] = p(!1), h = i.filter(
+    (t) => !n.includes(t.email) && (t.name.toLowerCase().includes(r.toLowerCase()) || t.email.toLowerCase().includes(r.toLowerCase()))
+  ), y = (t) => {
+    t && !n.includes(t) && (d([...n, t]), g(""));
+  }, v = (t) => {
+    d(n.filter((f) => f !== t));
+  }, x = (t) => {
+    t.key === "Enter" && r.includes("@") && (t.preventDefault(), y(r.trim())), t.key === "Backspace" && !r && n.length && v(n[n.length - 1]);
+  }, S = () => {
+    n.length && (l == null || l(n));
+  };
+  return /* @__PURE__ */ o("div", { style: U, children: [
+    /* @__PURE__ */ e("h2", { style: $, children: "Add Teammates" }),
+    /* @__PURE__ */ e("p", { style: G, children: "Collaborate with your team to accelerate your workflow." }),
+    /* @__PURE__ */ o("div", { style: P, children: [
+      /* @__PURE__ */ o(
+        "div",
+        {
+          style: {
+            ...O,
+            borderColor: c ? "var(--color-green)" : "var(--color-input-border)",
+            boxShadow: c ? "0 0 0 3px var(--color-green-ring)" : "none"
+          },
+          children: [
+            /* @__PURE__ */ e(z, { size: 18, style: _ }),
+            n.map((t) => /* @__PURE__ */ o("span", { style: K, children: [
+              t,
+              /* @__PURE__ */ e("span", { style: V, onClick: () => v(t), children: "×" })
+            ] }, t)),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "text",
+                placeholder: n.length ? "" : "Search by name or email...",
+                value: r,
+                onChange: (t) => g(t.target.value),
+                onFocus: () => u(!0),
+                onBlur: () => setTimeout(() => u(!1), 150),
+                onKeyDown: x,
+                style: q
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          style: Z,
+          onClick: S,
+          onMouseEnter: (t) => {
+            t.currentTarget.style.opacity = "0.85";
+          },
+          onMouseLeave: (t) => {
+            t.currentTarget.style.opacity = "1";
+          },
+          children: "Invite"
+        }
+      )
+    ] }),
+    c && h.length > 0 && /* @__PURE__ */ e("div", { style: J, children: h.map((t, f) => /* @__PURE__ */ o(
+      "div",
+      {
+        style: {
+          ...Q,
+          ...f === h.length - 1 ? { borderBottom: "none" } : {}
+        },
+        onMouseDown: () => y(t.email),
+        onMouseEnter: (b) => {
+          b.currentTarget.style.background = "var(--hover-warm-subtle)";
+        },
+        onMouseLeave: (b) => {
+          b.currentTarget.style.background = "var(--grey-white)";
+        },
+        children: [
+          /* @__PURE__ */ e("div", { style: X(), children: t.initials }),
+          /* @__PURE__ */ o("div", { children: [
+            /* @__PURE__ */ e("p", { style: Y, children: t.name }),
+            /* @__PURE__ */ e("p", { style: ee, children: t.email })
+          ] })
+        ]
+      },
+      t.email
+    )) })
+  ] });
+}, s = "var(--font-sans)", re = [
+  { id: "workspace", label: "Workspace Name", description: "Give your project a title.", icon: T },
+  { id: "interaction", label: "Add Interaction", description: "Connect data to see patterns.", icon: I },
+  { id: "connect", label: "Connect Data", description: "Link your platform for auto-evaluation.", icon: W },
+  { id: "invite", label: "Invite Team", description: "Add members to collaborate.", icon: R },
+  { id: "concepts", label: "Learn Concepts", description: "Explore conditions and evidence.", icon: L },
+  { id: "scope", label: "Define Scope", description: "Customize evaluation signals.", icon: H }
+], ne = {
+  fontFamily: s,
+  background: "var(--grey-white)",
+  minHeight: "100vh",
+  boxSizing: "border-box"
+}, ie = {
+  padding: "24px 48px",
+  borderBottom: "1px solid var(--border)",
+  background: "var(--grey-white)"
+}, ae = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: 8
+}, le = {
+  fontSize: 24,
+  fontWeight: 600,
+  fontStyle: "normal",
+  fontFamily: s,
+  color: "var(--grey-strong)",
+  margin: 0,
+  lineHeight: "normal"
+}, se = {
+  fontSize: 14,
+  fontWeight: 400,
+  lineHeight: "140%",
+  color: "var(--text-muted)",
+  margin: "4px 0 0",
+  fontFamily: s
+}, ce = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12
+}, de = {
+  display: "flex",
+  height: 36,
+  padding: "0 16px",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: 10,
+  background: "transparent",
+  border: "1px solid var(--border-strong)",
+  fontSize: 14,
+  fontWeight: 500,
+  fontFamily: s,
+  color: "var(--text-base)",
+  cursor: "pointer",
+  transition: "var(--transition-fast)",
+  outline: "none"
+}, ge = {
+  display: "flex",
+  height: 36,
+  padding: "0 20px",
+  justifyContent: "center",
+  alignItems: "center",
+  borderRadius: 10,
+  background: "var(--grey-strong)",
+  fontSize: 14,
+  fontWeight: 600,
+  fontFamily: s,
+  color: "var(--grey-white)",
+  border: "none",
+  cursor: "pointer",
+  transition: "var(--transition-fast)",
+  outline: "none"
+}, he = {
+  width: "100%",
+  height: 6,
+  borderRadius: 3,
+  background: "var(--border)",
+  overflow: "hidden",
+  marginTop: 12
+}, ye = (i) => ({
+  width: `${i}%`,
+  height: "100%",
+  borderRadius: 3,
+  background: "var(--color-green)",
+  transition: "width 0.4s ease-out"
+}), pe = {
+  display: "flex",
+  flex: 1,
+  minHeight: "calc(100vh - 140px)"
+}, me = {
+  width: 312,
+  minWidth: 312,
+  borderRight: "1px solid var(--border)",
+  padding: "24px 24px",
+  background: "var(--grey-white)",
+  boxSizing: "border-box"
+}, ue = {
+  fontSize: 13,
+  fontWeight: 500,
+  color: "var(--text-muted)",
+  fontFamily: s,
+  margin: "0 0 12px"
+}, fe = {
+  display: "flex",
+  width: 264,
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: 8,
+  alignSelf: "stretch"
+}, ve = (i) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+  padding: "8px 4px",
+  cursor: "pointer",
+  transition: "var(--transition-fast)",
+  background: i ? "var(--hover-warm)" : "var(--grey-white)",
+  borderRadius: 8,
+  alignSelf: "stretch"
+}), be = {
+  width: 40,
+  height: 40,
+  flexShrink: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+}, xe = {
+  fontSize: 14,
+  fontWeight: 600,
+  fontStyle: "normal",
+  color: "var(--grey-strong)",
+  fontFamily: s,
+  margin: 0,
+  lineHeight: "120%"
+}, Se = {
+  fontSize: 12,
+  fontWeight: 400,
+  color: "var(--text-muted)",
+  fontFamily: s,
+  margin: "2px 0 0",
+  lineHeight: 1.3
+}, we = {
+  flex: 1,
+  padding: "40px 48px",
+  background: "var(--grey-white)",
+  boxSizing: "border-box"
+}, ke = {
+  fontSize: 20,
+  fontWeight: 600,
+  fontStyle: "normal",
+  fontFamily: s,
+  color: "var(--grey-strong)",
+  margin: 0,
+  lineHeight: "normal"
+}, Fe = {
+  fontSize: 13,
+  fontWeight: 400,
+  fontStyle: "normal",
+  color: "var(--color-text-secondary)",
+  fontFamily: s,
+  margin: "4px 0 0",
+  lineHeight: "140%"
+}, k = {
+  fontSize: 16,
+  fontWeight: 600,
+  fontStyle: "normal",
+  color: "var(--grey-strong)",
+  fontFamily: s,
+  lineHeight: "normal",
+  margin: 0,
+  display: "block"
+}, Ce = {
+  width: "100%",
+  height: 44,
+  padding: "0 14px",
+  borderRadius: 6,
+  border: "1px solid var(--color-input-border)",
+  fontSize: 16,
+  fontWeight: 400,
+  fontStyle: "normal",
+  lineHeight: "normal",
+  fontFamily: s,
+  color: "var(--color-text-secondary)",
+  background: "var(--grey-white)",
+  boxSizing: "border-box",
+  outline: "none",
+  transition: "var(--transition-fast)"
+}, ze = {
+  position: "relative",
+  marginTop: 8
+}, Te = {
+  width: "100%",
+  minHeight: 160,
+  padding: "12px 14px 28px 14px",
+  borderRadius: 6,
+  border: "1px solid var(--color-input-border)",
+  fontSize: 16,
+  fontWeight: 400,
+  fontStyle: "normal",
+  lineHeight: "normal",
+  fontFamily: s,
+  color: "var(--color-text-secondary)",
+  background: "var(--grey-white)",
+  boxSizing: "border-box",
+  outline: "none",
+  resize: "vertical",
+  lineHeight: "140%",
+  transition: "var(--transition-fast)"
+}, Ie = {
+  position: "absolute",
+  bottom: 10,
+  right: 14,
+  fontSize: 12,
+  fontWeight: 400,
+  color: "var(--text-faint)",
+  fontFamily: s,
+  margin: 0,
+  pointerEvents: "none"
+};
+function We() {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      style: {
+        width: 24,
+        height: 24,
+        borderRadius: 6,
+        background: "var(--grey-strong)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ e("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ e("path", { d: "M2.5 7.5L5.5 10.5L11.5 4", stroke: "var(--grey-white)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    }
+  );
+}
+function Re() {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      style: {
+        width: 24,
+        height: 24,
+        borderRadius: "50%",
+        border: "2px solid var(--grey-muted)",
+        background: "transparent",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        gap: 2,
+        boxSizing: "border-box"
+      },
+      children: [
+        /* @__PURE__ */ e("span", { style: { width: 3, height: 3, borderRadius: "50%", background: "var(--grey-muted)" } }),
+        /* @__PURE__ */ e("span", { style: { width: 3, height: 3, borderRadius: "50%", background: "var(--grey-muted)" } }),
+        /* @__PURE__ */ e("span", { style: { width: 3, height: 3, borderRadius: "50%", background: "var(--grey-muted)" } })
+      ]
+    }
+  );
+}
+function Le({ step: i, isCompleted: l, isActive: r, onClick: g }) {
+  const [n, d] = p(!1);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      style: {
+        ...ve(r),
+        ...n && !r ? { background: "var(--hover-warm-subtle)" } : {}
+      },
+      onClick: g,
+      onMouseEnter: () => d(!0),
+      onMouseLeave: () => d(!1),
+      children: [
+        /* @__PURE__ */ e("div", { style: be, children: l ? /* @__PURE__ */ e(We, {}) : /* @__PURE__ */ e(Re, {}) }),
+        /* @__PURE__ */ o("div", { children: [
+          /* @__PURE__ */ e("p", { style: xe, children: i.label }),
+          /* @__PURE__ */ e("p", { style: Se, children: i.description })
+        ] })
+      ]
+    }
+  );
+}
+function He({ workspaceName: i, setWorkspaceName: l, description: r, setDescription: g, maxDescLength: n }) {
+  const [d, c] = p(!1), [u, h] = p(!1);
+  return /* @__PURE__ */ o("div", { children: [
+    /* @__PURE__ */ e("h2", { style: ke, children: "Name of your workspace" }),
+    /* @__PURE__ */ e("p", { style: Fe, children: "Tell us about the project or company you're organizing here." }),
+    /* @__PURE__ */ o("div", { style: { marginTop: 28 }, children: [
+      /* @__PURE__ */ e("label", { style: k, children: "Workspace Name" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          placeholder: "e.g. Acme Marketing",
+          value: i,
+          onChange: (y) => l(y.target.value),
+          onFocus: () => c(!0),
+          onBlur: () => c(!1),
+          style: {
+            ...Ce,
+            marginTop: 8,
+            borderColor: d ? "var(--color-green)" : "var(--color-input-border)",
+            boxShadow: d ? "0 0 0 3px var(--color-green-ring)" : "none"
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o("div", { style: { marginTop: 24 }, children: [
+      /* @__PURE__ */ e("label", { style: k, children: "Description" }),
+      /* @__PURE__ */ o("div", { style: ze, children: [
+        /* @__PURE__ */ e(
+          "textarea",
+          {
+            placeholder: "what's the goal of this workspace?",
+            value: r,
+            onChange: (y) => {
+              y.target.value.length <= n && g(y.target.value);
+            },
+            onFocus: () => h(!0),
+            onBlur: () => h(!1),
+            style: {
+              ...Te,
+              borderColor: u ? "var(--color-green)" : "var(--color-input-border)",
+              boxShadow: u ? "0 0 0 3px var(--color-green-ring)" : "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ o("span", { style: Ie, children: [
+          r.length,
+          "/",
+          n
+        ] })
+      ] })
+    ] })
+  ] });
+}
+const je = ({
+  steps: i = re,
+  completedSteps: l = ["workspace", "invite"],
+  initialActiveStep: r = "workspace",
+  onSaveNext: g,
+  onRemindLater: n,
+  onStepChange: d
+}) => {
+  const [c, u] = p(r), [h, y] = p(""), [v, x] = p(""), S = 1e3, t = l.length, f = i.length, b = t / f * 100, F = (a) => {
+    u(a), d == null || d(a);
+  };
+  return /* @__PURE__ */ o("div", { style: ne, children: [
+    /* @__PURE__ */ o("div", { style: ie, children: [
+      /* @__PURE__ */ o("div", { style: ae, children: [
+        /* @__PURE__ */ o("div", { children: [
+          /* @__PURE__ */ e("h1", { style: le, children: "Getting started with Chordia" }),
+          /* @__PURE__ */ e("p", { style: se, children: "Complete these steps to get the most out of Chordia." })
+        ] }),
+        /* @__PURE__ */ o("div", { style: ce, children: [
+          /* @__PURE__ */ e(
+            "button",
+            {
+              style: de,
+              onClick: n,
+              onMouseEnter: (a) => {
+                a.currentTarget.style.background = "var(--hover-warm-subtle)";
+              },
+              onMouseLeave: (a) => {
+                a.currentTarget.style.background = "transparent";
+              },
+              children: "Remind me Later"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              style: ge,
+              onClick: () => {
+                g == null || g({ stepId: c, workspaceName: h, description: v });
+              },
+              onMouseEnter: (a) => {
+                a.currentTarget.style.opacity = "0.85";
+              },
+              onMouseLeave: (a) => {
+                a.currentTarget.style.opacity = "1";
+              },
+              children: "Save & Next"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ e("div", { style: he, children: /* @__PURE__ */ e("div", { style: ye(b) }) })
+    ] }),
+    /* @__PURE__ */ o("div", { style: pe, children: [
+      /* @__PURE__ */ o("div", { style: me, children: [
+        /* @__PURE__ */ o("p", { style: ue, children: [
+          t,
+          " of ",
+          f,
+          " steps completed"
+        ] }),
+        /* @__PURE__ */ e("div", { style: fe, children: i.map((a) => /* @__PURE__ */ e(
+          Le,
+          {
+            step: a,
+            isCompleted: l.includes(a.id),
+            isActive: c === a.id,
+            onClick: () => F(a.id)
+          },
+          a.id
+        )) })
+      ] }),
+      /* @__PURE__ */ o("div", { style: we, children: [
+        c === "workspace" && /* @__PURE__ */ e(
+          He,
+          {
+            workspaceName: h,
+            setWorkspaceName: y,
+            description: v,
+            setDescription: x,
+            maxDescLength: S
+          }
+        ),
+        c === "interaction" && /* @__PURE__ */ e(C, {}),
+        c === "connect" && /* @__PURE__ */ e(j, {}),
+        c === "invite" && /* @__PURE__ */ e(oe, {})
+      ] })
+    ] })
+  ] });
+};
+export {
+  oe as AddTeammates,
+  j as ConnectData,
+  je as GettingStarted,
+  Ge as UploadEvaluate,
+  C as UploadInteraction
+};
+//# sourceMappingURL=onboarding.es.js.map