survo-react-widget 1.0.0

package/README.md

@@ -0,0 +1,71 @@
+# survo-react-widget
+
+Native React component for embedding [Survo](https://survo.digital) surveys in your application.
+
+## Installation
+
+```bash
+npm install survo-react-widget
+```
+
+## Quick Start
+
+```tsx
+import { SurvoWidget } from 'survo-react-widget';
+
+function App() {
+  return (
+    <SurvoWidget
+      apiKey="your-api-key"
+      surveyId="your-survey-id"
+      display="inline"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiKey` | `string` | **required** | Your Survo API key |
+| `surveyId` | `string` | **required** | The survey ID to display |
+| `display` | `'modal' \| 'inline'` | `'modal'` | Display mode |
+| `containerId` | `string` | `'survo-widget'` | Target container ID (inline mode) |
+| `baseUrl` | `string` | `'https://api.survo.digital'` | API base URL |
+
+## Display Modes
+
+### Inline Mode
+
+Renders the survey directly in your component tree:
+
+```tsx
+<SurvoWidget
+  apiKey="your-api-key"
+  surveyId="your-survey-id"
+  display="inline"
+/>
+```
+
+### Modal Mode
+
+Renders the survey as a floating modal in the bottom-right corner:
+
+```tsx
+<SurvoWidget
+  apiKey="your-api-key"
+  surveyId="your-survey-id"
+  display="modal"
+/>
+```
+
+## Getting Your API Key
+
+1. Log in to [survo.digital](https://survo.digital)
+2. Navigate to your workspace settings
+3. Create an API key in the **API Keys** section
+
+## License
+
+MIT © [Survo Digital](https://survo.digital)

package/dist/components/SurvoWidget.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface SurvoConfig {
+    apiKey: string;
+    surveyId: string;
+    display?: 'modal' | 'inline';
+    containerId?: string;
+    baseUrl?: string;
+}
+export declare const SurvoWidget: React.FC<SurvoConfig>;
+//# sourceMappingURL=SurvoWidget.d.ts.map

package/dist/components/SurvoWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurvoWidget.d.ts","sourceRoot":"","sources":["../../src/components/SurvoWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAmBD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+Y7C,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/SurvoWidget';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/dist/survo-react.es.js

@@ -0,0 +1,581 @@
+import te, { useState as y, useCallback as ne, useEffect as X } from "react";
+var z = { exports: {} }, w = {};
+var Z;
+function oe() {
+  if (Z) return w;
+  Z = 1;
+  var x = /* @__PURE__ */ Symbol.for("react.transitional.element"), b = /* @__PURE__ */ Symbol.for("react.fragment");
+  function m(_, u, i) {
+    var h = null;
+    if (i !== void 0 && (h = "" + i), u.key !== void 0 && (h = "" + u.key), "key" in u) {
+      i = {};
+      for (var p in u)
+        p !== "key" && (i[p] = u[p]);
+    } else i = u;
+    return u = i.ref, {
+      $$typeof: x,
+      type: _,
+      key: h,
+      ref: u !== void 0 ? u : null,
+      props: i
+    };
+  }
+  return w.Fragment = b, w.jsx = m, w.jsxs = m, w;
+}
+var k = {};
+var Q;
+function ae() {
+  return Q || (Q = 1, process.env.NODE_ENV !== "production" && (function() {
+    function x(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === a ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case j:
+          return "Fragment";
+        case I:
+          return "Profiler";
+        case P:
+          return "StrictMode";
+        case g:
+          return "Suspense";
+        case $:
+          return "SuspenseList";
+        case c:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case W:
+            return "Portal";
+          case Y:
+            return e.displayName || "Context";
+          case F:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case d:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case D:
+            return r = e.displayName || null, r !== null ? r : x(e.type) || "Memo";
+          case n:
+            r = e._payload, e = e._init;
+            try {
+              return x(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function b(e) {
+      return "" + e;
+    }
+    function m(e) {
+      try {
+        b(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var o = r.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return o.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          s
+        ), b(e);
+      }
+    }
+    function _(e) {
+      if (e === j) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === n)
+        return "<...>";
+      try {
+        var r = x(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function u() {
+      var e = f.A;
+      return e === null ? null : e.getOwner();
+    }
+    function i() {
+      return Error("react-stack-top-frame");
+    }
+    function h(e) {
+      if (V.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function p(e, r) {
+      function o() {
+        J || (J = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      o.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: o,
+        configurable: !0
+      });
+    }
+    function T() {
+      var e = x(this.type);
+      return H[e] || (H[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function A(e, r, o, s, N, q) {
+      var l = o.ref;
+      return e = {
+        $$typeof: C,
+        type: e,
+        key: r,
+        props: o,
+        _owner: s
+      }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: T
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: N
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: q
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function O(e, r, o, s, N, q) {
+      var l = r.children;
+      if (l !== void 0)
+        if (s)
+          if (ee(l)) {
+            for (s = 0; s < l.length; s++)
+              S(l[s]);
+            Object.freeze && Object.freeze(l);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else S(l);
+      if (V.call(r, "key")) {
+        l = x(e);
+        var R = Object.keys(r).filter(function(re) {
+          return re !== "key";
+        });
+        s = 0 < R.length ? "{key: someKey, " + R.join(": ..., ") + ": ...}" : "{key: someKey}", B[l + s] || (R = 0 < R.length ? "{" + R.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          s,
+          l,
+          R,
+          l
+        ), B[l + s] = !0);
+      }
+      if (l = null, o !== void 0 && (m(o), l = "" + o), h(r) && (m(r.key), l = "" + r.key), "key" in r) {
+        o = {};
+        for (var L in r)
+          L !== "key" && (o[L] = r[L]);
+      } else o = r;
+      return l && p(
+        o,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), A(
+        e,
+        l,
+        o,
+        u(),
+        N,
+        q
+      );
+    }
+    function S(e) {
+      E(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === n && (e._payload.status === "fulfilled" ? E(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function E(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === C;
+    }
+    var v = te, C = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), j = /* @__PURE__ */ Symbol.for("react.fragment"), P = /* @__PURE__ */ Symbol.for("react.strict_mode"), I = /* @__PURE__ */ Symbol.for("react.profiler"), F = /* @__PURE__ */ Symbol.for("react.consumer"), Y = /* @__PURE__ */ Symbol.for("react.context"), d = /* @__PURE__ */ Symbol.for("react.forward_ref"), g = /* @__PURE__ */ Symbol.for("react.suspense"), $ = /* @__PURE__ */ Symbol.for("react.suspense_list"), D = /* @__PURE__ */ Symbol.for("react.memo"), n = /* @__PURE__ */ Symbol.for("react.lazy"), c = /* @__PURE__ */ Symbol.for("react.activity"), a = /* @__PURE__ */ Symbol.for("react.client.reference"), f = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, V = Object.prototype.hasOwnProperty, ee = Array.isArray, M = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    v = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var J, H = {}, U = v.react_stack_bottom_frame.bind(
+      v,
+      i
+    )(), G = M(_(i)), B = {};
+    k.Fragment = j, k.jsx = function(e, r, o) {
+      var s = 1e4 > f.recentlyCreatedOwnerStacks++;
+      return O(
+        e,
+        r,
+        o,
+        !1,
+        s ? Error("react-stack-top-frame") : U,
+        s ? M(_(e)) : G
+      );
+    }, k.jsxs = function(e, r, o) {
+      var s = 1e4 > f.recentlyCreatedOwnerStacks++;
+      return O(
+        e,
+        r,
+        o,
+        !0,
+        s ? Error("react-stack-top-frame") : U,
+        s ? M(_(e)) : G
+      );
+    };
+  })()), k;
+}
+var K;
+function ie() {
+  return K || (K = 1, process.env.NODE_ENV === "production" ? z.exports = oe() : z.exports = ae()), z.exports;
+}
+var t = ie();
+const le = ({
+  apiKey: x,
+  surveyId: b,
+  display: m = "modal",
+  containerId: _ = "survo-widget",
+  baseUrl: u = "https://api.survo.digital"
+}) => {
+  const [i, h] = y(null), [p, T] = y(-1), [A, O] = y({}), [S, E] = y(!0), [v, C] = y(!1), [W, j] = y(!0), P = ne(async () => {
+    try {
+      const n = await fetch(`${u}/api/v1/widget/config?key=${x}&surveyId=${b}`);
+      if (!n.ok) throw new Error("Failed to load");
+      const c = await n.json();
+      h(c.survey);
+    } catch (n) {
+      console.error("[Survo Widget] Error loading survey:", n);
+    } finally {
+      E(!1);
+    }
+  }, [x, b, u]);
+  X(() => {
+    P();
+  }, [P]);
+  const I = async () => {
+    E(!0);
+    try {
+      await fetch(`${u}/api/v1/widget/submit`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          key: x,
+          surveyId: b,
+          answers: A,
+          metadata: {
+            domain: window.location.hostname,
+            url: window.location.href,
+            submittedVia: "react-widget"
+          }
+        })
+      }), C(!0);
+    } catch (n) {
+      console.error("[Survo Widget] Error submitting answers:", n), alert("Erro ao enviar. Por favor tente novamente.");
+    } finally {
+      E(!1);
+    }
+  }, F = (n) => {
+    const c = i?.questions[p];
+    if (c?.required && (n === null || n === "")) {
+      alert("Por favor, responda a esta pergunta.");
+      return;
+    }
+    const a = { ...A };
+    c && (a[c.id] = n), O(a), p + 1 >= (i?.questions.length || 0) ? I() : T(p + 1);
+  };
+  if (!W || !S && !i) return null;
+  const Y = () => {
+    if (S && !v)
+      return /* @__PURE__ */ t.jsx("div", { style: { textAlign: "center", padding: "40px 0" }, children: /* @__PURE__ */ t.jsx("p", { style: { color: "#64748b", fontSize: "14px" }, children: "A carregar..." }) });
+    if (v)
+      return /* @__PURE__ */ t.jsxs("div", { style: { textAlign: "center", padding: "20px 0" }, children: [
+        /* @__PURE__ */ t.jsx("div", { style: {
+          width: "64px",
+          height: "64px",
+          background: "#000",
+          borderRadius: "50%",
+          margin: "0 auto 16px auto",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#fff",
+          fontSize: "32px",
+          fontWeight: 700
+        }, children: "✓" }),
+        /* @__PURE__ */ t.jsx("h3", { style: { margin: 0, fontSize: "20px", fontWeight: 700, color: "#000" }, children: "Muito Obrigado!" }),
+        /* @__PURE__ */ t.jsx("p", { style: { fontSize: "14px", color: "#64748b", marginTop: "12px", lineHeight: 1.5 }, children: "Recebemos as suas respostas com sucesso. A sua opinião faz a diferença!" }),
+        /* @__PURE__ */ t.jsx(
+          "button",
+          {
+            onClick: () => j(!1),
+            style: {
+              marginTop: "24px",
+              padding: "12px",
+              width: "100%",
+              background: "#f1f5f9",
+              color: "#475569",
+              border: "none",
+              borderRadius: "8px",
+              cursor: "pointer",
+              fontWeight: 600
+            },
+            children: "Fechar"
+          }
+        )
+      ] });
+    if (p === -1)
+      return /* @__PURE__ */ t.jsxs("div", { children: [
+        /* @__PURE__ */ t.jsx("p", { style: { color: "#64748b", fontSize: "14px", margin: "0 0 24px 0", lineHeight: 1.5 }, children: i?.description || "A sua opinião é muito importante para nós." }),
+        /* @__PURE__ */ t.jsx(
+          "button",
+          {
+            onClick: () => T(0),
+            style: {
+              width: "100%",
+              padding: "12px",
+              background: "#000",
+              color: "#fff",
+              border: "none",
+              borderRadius: "8px",
+              cursor: "pointer",
+              fontWeight: 600,
+              fontSize: "14px"
+            },
+            children: "Começar Inquérito"
+          }
+        )
+      ] });
+    const n = i.questions[p];
+    return /* @__PURE__ */ t.jsxs("div", { children: [
+      /* @__PURE__ */ t.jsxs("div", { style: { fontSize: "10px", fontWeight: 700, color: "#94a3b8", textTransform: "uppercase", marginBottom: "8px", letterSpacing: "0.05em" }, children: [
+        "Pergunta ",
+        p + 1,
+        " de ",
+        i.questions.length
+      ] }),
+      /* @__PURE__ */ t.jsx("h4", { style: { margin: "0 0 20px 0", fontSize: "16px", color: "#000", fontWeight: 600, lineHeight: 1.4 }, children: n.title }),
+      /* @__PURE__ */ t.jsx("div", { style: { marginBottom: "20px" }, children: $(n) }),
+      /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          id: "survo-next-btn",
+          onClick: () => F(d),
+          style: {
+            width: "100%",
+            padding: "12px",
+            background: "#000",
+            color: "#fff",
+            border: "none",
+            borderRadius: "8px",
+            cursor: "pointer",
+            fontWeight: 600,
+            fontSize: "14px"
+          },
+          children: p + 1 === i.questions.length ? "Finalizar" : "Continuar"
+        }
+      )
+    ] });
+  }, [d, g] = y(null);
+  X(() => {
+    g(null);
+  }, [p]);
+  const $ = (n) => {
+    if (["choice", "multiple_choice", "single_choice"].includes(n.type)) {
+      const c = Object.values(n.options || {});
+      return /* @__PURE__ */ t.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: c.map((a, f) => /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          onClick: () => g(a),
+          style: {
+            padding: "12px",
+            border: "1px solid #e2e8f0",
+            borderRadius: "8px",
+            cursor: "pointer",
+            fontSize: "14px",
+            color: "#1e293b",
+            background: d === a ? "#f1f5f9" : "#fff",
+            borderColor: d === a ? "#000" : "#e2e8f0",
+            borderWidth: d === a ? "2px" : "1px",
+            fontWeight: d === a ? 600 : 400,
+            textAlign: "left"
+          },
+          children: a
+        },
+        f
+      )) });
+    }
+    if (n.type === "rating") {
+      const c = n.maxStars || 5;
+      return /* @__PURE__ */ t.jsx("div", { style: { display: "flex", gap: "12px", justifyContent: "flex-start" }, children: Array.from({ length: c }).map((a, f) => /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          onClick: () => g(f + 1),
+          style: {
+            fontSize: "34px",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: (d || 0) > f ? "#000" : "#e2e8f0",
+            padding: 0
+          },
+          children: "★"
+        },
+        f
+      )) });
+    }
+    if (n.type === "rating_emoji") {
+      const c = ["😡", "🙁", "😐", "🙂", "😍"];
+      return /* @__PURE__ */ t.jsx("div", { style: { display: "flex", gap: "12px", justifyContent: "flex-start" }, children: c.map((a, f) => /* @__PURE__ */ t.jsx(
+        "span",
+        {
+          onClick: () => g(f + 1),
+          style: {
+            fontSize: "28px",
+            cursor: "pointer",
+            opacity: d === f + 1 ? 1 : 0.3,
+            filter: d === f + 1 ? "grayscale(0)" : "grayscale(1)",
+            transform: d === f + 1 ? "scale(1.2)" : "scale(1)",
+            transition: "all 0.2s"
+          },
+          children: a
+        },
+        f
+      )) });
+    }
+    return n.type === "nps" ? /* @__PURE__ */ t.jsxs("div", { children: [
+      /* @__PURE__ */ t.jsx("div", { style: { display: "flex", justifyContent: "space-between", border: "1px solid #e2e8f0", borderRadius: "8px", padding: "4px" }, children: Array.from({ length: 11 }).map((c, a) => /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          onClick: () => g(a),
+          style: {
+            flex: 1,
+            textAlign: "center",
+            padding: "8px 0",
+            fontSize: "12px",
+            fontWeight: 600,
+            cursor: "pointer",
+            borderRadius: "4px",
+            background: d === a ? "#000" : "transparent",
+            color: d === a ? "#fff" : "#1e293b"
+          },
+          children: a
+        },
+        a
+      )) }),
+      /* @__PURE__ */ t.jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "10px", color: "#94a3b8", marginTop: "8px" }, children: [
+        /* @__PURE__ */ t.jsx("span", { children: "Nada provável" }),
+        /* @__PURE__ */ t.jsx("span", { children: "Muito provável" })
+      ] })
+    ] }) : n.type === "long_text" ? /* @__PURE__ */ t.jsx(
+      "textarea",
+      {
+        autoFocus: !0,
+        value: d || "",
+        onChange: (c) => g(c.target.value),
+        placeholder: "Escreva a sua resposta detalhada...",
+        style: {
+          width: "100%",
+          padding: "12px",
+          border: "1px solid #e2e8f0",
+          borderRadius: "8px",
+          fontSize: "14px",
+          fontFamily: "inherit",
+          minHeight: "100px",
+          boxSizing: "border-box"
+        }
+      }
+    ) : /* @__PURE__ */ t.jsx(
+      "input",
+      {
+        autoFocus: !0,
+        type: "text",
+        value: d || "",
+        onChange: (c) => g(c.target.value),
+        placeholder: "Escreva aqui...",
+        style: {
+          width: "100%",
+          padding: "12px",
+          border: "1px solid #e2e8f0",
+          borderRadius: "8px",
+          fontSize: "14px",
+          fontFamily: "inherit",
+          boxSizing: "border-box"
+        }
+      }
+    );
+  }, D = m === "modal" ? {
+    position: "fixed",
+    bottom: "20px",
+    right: "20px",
+    width: "360px",
+    maxHeight: "85vh",
+    boxShadow: "0 15px 45px rgba(0,0,0,0.15)",
+    borderRadius: "16px",
+    zIndex: 9999990,
+    background: "#fff",
+    border: "1px solid rgba(0,0,0,0.1)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    fontFamily: "'Inter', -apple-system, sans-serif"
+  } : {
+    width: "100%",
+    background: "#fff",
+    border: "1px solid rgba(0,0,0,0.1)",
+    borderRadius: "12px",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    fontFamily: "'Inter', -apple-system, sans-serif"
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: "survo-react-widget", style: D, children: [
+    /* @__PURE__ */ t.jsxs("div", { style: { padding: "16px", background: "#fff", borderBottom: "1px solid #f1f5f9", display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ t.jsx("span", { style: { fontWeight: 700, fontSize: "14px", color: "#000", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: i?.title || "Carregando..." }),
+      m === "modal" && /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          onClick: () => j(!1),
+          style: { background: "none", border: "none", cursor: "pointer", color: "#000", fontSize: "24px", lineHeight: 1, padding: "4px" },
+          children: "×"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsx("div", { style: { padding: "24px", overflowY: "auto" }, children: Y() }),
+    /* @__PURE__ */ t.jsxs("div", { style: { padding: "10px", textAlign: "center", fontSize: "10px", color: "#94a3b8", background: "#fff", borderTop: "1px solid #f1f5f9" }, children: [
+      "Disponibilizado pelo ",
+      /* @__PURE__ */ t.jsx("a", { href: "https://survo.digital", target: "_blank", rel: "noopener noreferrer", style: { color: "#64748b", fontWeight: 700, textDecoration: "none" }, children: "Survo" })
+    ] })
+  ] });
+};
+export {
+  le as SurvoWidget
+};

package/dist/survo-react.umd.js

@@ -0,0 +1,6 @@
+(function(v,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],u):(v=typeof globalThis<"u"?globalThis:v||self,u(v.SurvoReact={},v.React))})(this,(function(v,u){"use strict";var A={exports:{}},w={};var U;function ee(){if(U)return w;U=1;var g=Symbol.for("react.transitional.element"),m=Symbol.for("react.fragment");function h(j,d,i){var y=null;if(i!==void 0&&(y=""+i),d.key!==void 0&&(y=""+d.key),"key"in d){i={};for(var x in d)x!=="key"&&(i[x]=d[x])}else i=d;return d=i.ref,{$$typeof:g,type:j,key:y,ref:d!==void 0?d:null,props:i}}return w.Fragment=m,w.jsx=h,w.jsxs=h,w}var k={};var G;function re(){return G||(G=1,process.env.NODE_ENV!=="production"&&(function(){function g(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===a?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case _:return"Fragment";case F:return"Profiler";case z:return"StrictMode";case b:return"Suspense";case M:return"SuspenseList";case c:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case I:return"Portal";case D:return e.displayName||"Context";case Y:return(e._context.displayName||"Context")+".Consumer";case f:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case L:return r=e.displayName||null,r!==null?r:g(e.type)||"Memo";case n:r=e._payload,e=e._init;try{return g(e(r))}catch{}}return null}function m(e){return""+e}function h(e){try{m(e);var r=!1}catch{r=!0}if(r){r=console;var o=r.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),m(e)}}function j(e){if(e===_)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===n)return"<...>";try{var r=g(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function d(){var e=p.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function y(e){if(X.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function x(e,r){function o(){q||(q=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function O(){var e=g(this.type);return Z[e]||(Z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function C(e,r,o,s,W,J){var l=o.ref;return e={$$typeof:N,type:e,key:r,props:o,_owner:s},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:O}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:W}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function P(e,r,o,s,W,J){var l=r.children;if(l!==void 0)if(s)if(oe(l)){for(s=0;s<l.length;s++)T(l[s]);Object.freeze&&Object.freeze(l)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else T(l);if(X.call(r,"key")){l=g(e);var R=Object.keys(r).filter(function(ae){return ae!=="key"});s=0<R.length?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}",K[l+s]||(R=0<R.length?"{"+R.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,s,l,R,l),K[l+s]=!0)}if(l=null,o!==void 0&&(h(o),l=""+o),y(r)&&(h(r.key),l=""+r.key),"key"in r){o={};for(var H in r)H!=="key"&&(o[H]=r[H])}else o=r;return l&&x(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),C(e,l,o,d(),W,J)}function T(e){E(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===n&&(e._payload.status==="fulfilled"?E(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function E(e){return typeof e=="object"&&e!==null&&e.$$typeof===N}var S=u,N=Symbol.for("react.transitional.element"),I=Symbol.for("react.portal"),_=Symbol.for("react.fragment"),z=Symbol.for("react.strict_mode"),F=Symbol.for("react.profiler"),Y=Symbol.for("react.consumer"),D=Symbol.for("react.context"),f=Symbol.for("react.forward_ref"),b=Symbol.for("react.suspense"),M=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),n=Symbol.for("react.lazy"),c=Symbol.for("react.activity"),a=Symbol.for("react.client.reference"),p=S.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,X=Object.prototype.hasOwnProperty,oe=Array.isArray,V=console.createTask?console.createTask:function(){return null};S={react_stack_bottom_frame:function(e){return e()}};var q,Z={},Q=S.react_stack_bottom_frame.bind(S,i)(),$=V(j(i)),K={};k.Fragment=_,k.jsx=function(e,r,o){var s=1e4>p.recentlyCreatedOwnerStacks++;return P(e,r,o,!1,s?Error("react-stack-top-frame"):Q,s?V(j(e)):$)},k.jsxs=function(e,r,o){var s=1e4>p.recentlyCreatedOwnerStacks++;return P(e,r,o,!0,s?Error("react-stack-top-frame"):Q,s?V(j(e)):$)}})()),k}var B;function te(){return B||(B=1,process.env.NODE_ENV==="production"?A.exports=ee():A.exports=re()),A.exports}var t=te();const ne=({apiKey:g,surveyId:m,display:h="modal",containerId:j="survo-widget",baseUrl:d="https://api.survo.digital"})=>{const[i,y]=u.useState(null),[x,O]=u.useState(-1),[C,P]=u.useState({}),[T,E]=u.useState(!0),[S,N]=u.useState(!1),[I,_]=u.useState(!0),z=u.useCallback(async()=>{try{const n=await fetch(`${d}/api/v1/widget/config?key=${g}&surveyId=${m}`);if(!n.ok)throw new Error("Failed to load");const c=await n.json();y(c.survey)}catch(n){console.error("[Survo Widget] Error loading survey:",n)}finally{E(!1)}},[g,m,d]);u.useEffect(()=>{z()},[z]);const F=async()=>{E(!0);try{await fetch(`${d}/api/v1/widget/submit`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({key:g,surveyId:m,answers:C,metadata:{domain:window.location.hostname,url:window.location.href,submittedVia:"react-widget"}})}),N(!0)}catch(n){console.error("[Survo Widget] Error submitting answers:",n),alert("Erro ao enviar. Por favor tente novamente.")}finally{E(!1)}},Y=n=>{const c=i?.questions[x];if(c?.required&&(n===null||n==="")){alert("Por favor, responda a esta pergunta.");return}const a={...C};c&&(a[c.id]=n),P(a),x+1>=(i?.questions.length||0)?F():O(x+1)};if(!I||!T&&!i)return null;const D=()=>{if(T&&!S)return t.jsx("div",{style:{textAlign:"center",padding:"40px 0"},children:t.jsx("p",{style:{color:"#64748b",fontSize:"14px"},children:"A carregar..."})});if(S)return t.jsxs("div",{style:{textAlign:"center",padding:"20px 0"},children:[t.jsx("div",{style:{width:"64px",height:"64px",background:"#000",borderRadius:"50%",margin:"0 auto 16px auto",display:"flex",alignItems:"center",justifyContent:"center",color:"#fff",fontSize:"32px",fontWeight:700},children:"✓"}),t.jsx("h3",{style:{margin:0,fontSize:"20px",fontWeight:700,color:"#000"},children:"Muito Obrigado!"}),t.jsx("p",{style:{fontSize:"14px",color:"#64748b",marginTop:"12px",lineHeight:1.5},children:"Recebemos as suas respostas com sucesso. A sua opinião faz a diferença!"}),t.jsx("button",{onClick:()=>_(!1),style:{marginTop:"24px",padding:"12px",width:"100%",background:"#f1f5f9",color:"#475569",border:"none",borderRadius:"8px",cursor:"pointer",fontWeight:600},children:"Fechar"})]});if(x===-1)return t.jsxs("div",{children:[t.jsx("p",{style:{color:"#64748b",fontSize:"14px",margin:"0 0 24px 0",lineHeight:1.5},children:i?.description||"A sua opinião é muito importante para nós."}),t.jsx("button",{onClick:()=>O(0),style:{width:"100%",padding:"12px",background:"#000",color:"#fff",border:"none",borderRadius:"8px",cursor:"pointer",fontWeight:600,fontSize:"14px"},children:"Começar Inquérito"})]});const n=i.questions[x];return t.jsxs("div",{children:[t.jsxs("div",{style:{fontSize:"10px",fontWeight:700,color:"#94a3b8",textTransform:"uppercase",marginBottom:"8px",letterSpacing:"0.05em"},children:["Pergunta ",x+1," de ",i.questions.length]}),t.jsx("h4",{style:{margin:"0 0 20px 0",fontSize:"16px",color:"#000",fontWeight:600,lineHeight:1.4},children:n.title}),t.jsx("div",{style:{marginBottom:"20px"},children:M(n)}),t.jsx("button",{id:"survo-next-btn",onClick:()=>Y(f),style:{width:"100%",padding:"12px",background:"#000",color:"#fff",border:"none",borderRadius:"8px",cursor:"pointer",fontWeight:600,fontSize:"14px"},children:x+1===i.questions.length?"Finalizar":"Continuar"})]})},[f,b]=u.useState(null);u.useEffect(()=>{b(null)},[x]);const M=n=>{if(["choice","multiple_choice","single_choice"].includes(n.type)){const c=Object.values(n.options||{});return t.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"8px"},children:c.map((a,p)=>t.jsx("div",{onClick:()=>b(a),style:{padding:"12px",border:"1px solid #e2e8f0",borderRadius:"8px",cursor:"pointer",fontSize:"14px",color:"#1e293b",background:f===a?"#f1f5f9":"#fff",borderColor:f===a?"#000":"#e2e8f0",borderWidth:f===a?"2px":"1px",fontWeight:f===a?600:400,textAlign:"left"},children:a},p))})}if(n.type==="rating"){const c=n.maxStars||5;return t.jsx("div",{style:{display:"flex",gap:"12px",justifyContent:"flex-start"},children:Array.from({length:c}).map((a,p)=>t.jsx("button",{onClick:()=>b(p+1),style:{fontSize:"34px",background:"none",border:"none",cursor:"pointer",color:(f||0)>p?"#000":"#e2e8f0",padding:0},children:"★"},p))})}if(n.type==="rating_emoji"){const c=["😡","🙁","😐","🙂","😍"];return t.jsx("div",{style:{display:"flex",gap:"12px",justifyContent:"flex-start"},children:c.map((a,p)=>t.jsx("span",{onClick:()=>b(p+1),style:{fontSize:"28px",cursor:"pointer",opacity:f===p+1?1:.3,filter:f===p+1?"grayscale(0)":"grayscale(1)",transform:f===p+1?"scale(1.2)":"scale(1)",transition:"all 0.2s"},children:a},p))})}return n.type==="nps"?t.jsxs("div",{children:[t.jsx("div",{style:{display:"flex",justifyContent:"space-between",border:"1px solid #e2e8f0",borderRadius:"8px",padding:"4px"},children:Array.from({length:11}).map((c,a)=>t.jsx("div",{onClick:()=>b(a),style:{flex:1,textAlign:"center",padding:"8px 0",fontSize:"12px",fontWeight:600,cursor:"pointer",borderRadius:"4px",background:f===a?"#000":"transparent",color:f===a?"#fff":"#1e293b"},children:a},a))}),t.jsxs("div",{style:{display:"flex",justifyContent:"space-between",fontSize:"10px",color:"#94a3b8",marginTop:"8px"},children:[t.jsx("span",{children:"Nada provável"}),t.jsx("span",{children:"Muito provável"})]})]}):n.type==="long_text"?t.jsx("textarea",{autoFocus:!0,value:f||"",onChange:c=>b(c.target.value),placeholder:"Escreva a sua resposta detalhada...",style:{width:"100%",padding:"12px",border:"1px solid #e2e8f0",borderRadius:"8px",fontSize:"14px",fontFamily:"inherit",minHeight:"100px",boxSizing:"border-box"}}):t.jsx("input",{autoFocus:!0,type:"text",value:f||"",onChange:c=>b(c.target.value),placeholder:"Escreva aqui...",style:{width:"100%",padding:"12px",border:"1px solid #e2e8f0",borderRadius:"8px",fontSize:"14px",fontFamily:"inherit",boxSizing:"border-box"}})},L=h==="modal"?{position:"fixed",bottom:"20px",right:"20px",width:"360px",maxHeight:"85vh",boxShadow:"0 15px 45px rgba(0,0,0,0.15)",borderRadius:"16px",zIndex:9999990,background:"#fff",border:"1px solid rgba(0,0,0,0.1)",display:"flex",flexDirection:"column",overflow:"hidden",fontFamily:"'Inter', -apple-system, sans-serif"}:{width:"100%",background:"#fff",border:"1px solid rgba(0,0,0,0.1)",borderRadius:"12px",display:"flex",flexDirection:"column",overflow:"hidden",fontFamily:"'Inter', -apple-system, sans-serif"};return t.jsxs("div",{className:"survo-react-widget",style:L,children:[t.jsxs("div",{style:{padding:"16px",background:"#fff",borderBottom:"1px solid #f1f5f9",display:"flex",justifyContent:"space-between",alignItems:"center"},children:[t.jsx("span",{style:{fontWeight:700,fontSize:"14px",color:"#000",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:i?.title||"Carregando..."}),h==="modal"&&t.jsx("button",{onClick:()=>_(!1),style:{background:"none",border:"none",cursor:"pointer",color:"#000",fontSize:"24px",lineHeight:1,padding:"4px"},children:"×"})]}),t.jsx("div",{style:{padding:"24px",overflowY:"auto"},children:D()}),t.jsxs("div",{style:{padding:"10px",textAlign:"center",fontSize:"10px",color:"#94a3b8",background:"#fff",borderTop:"1px solid #f1f5f9"},children:["Disponibilizado pelo ",t.jsx("a",{href:"https://survo.digital",target:"_blank",rel:"noopener noreferrer",style:{color:"#64748b",fontWeight:700,textDecoration:"none"},children:"Survo"})]})]})};v.SurvoWidget=ne,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "survo-react-widget",
+  "version": "1.0.0",
+  "description": "Native React widget for Survo surveys — embed beautiful survey forms in your React app",
+  "type": "module",
+  "main": "./dist/survo-react.umd.js",
+  "module": "./dist/survo-react.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/survo-react.es.js",
+      "require": "./dist/survo-react.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "keywords": [
+    "survo",
+    "survey",
+    "widget",
+    "react",
+    "form",
+    "feedback"
+  ],
+  "author": "Survo Digital",
+  "license": "MIT",
+  "homepage": "https://survo.digital",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/survo-digital/survo-react"
+  },
+  "devDependencies": {
+    "@types/node": "^25.2.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
+  }
+}