gotcha-feedback 1.0.16 → 1.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {createContext,useState,useMemo,useCallback,useRef,useEffect,useContext}from'react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {createPortal}from'react-dom';var Te="https://gotcha.cx/api/v1";var ce={ANONYMOUS_ID:"gotcha_anonymous_id"},M={POSITION:"top-right",SIZE:"md",THEME:"light",SHOW_ON_HOVER:true,TOUCH_BEHAVIOR:"always-visible",SUBMIT_TEXT:"Submit",THANK_YOU_MESSAGE:"Thanks for your feedback!"};var q={MAX_RETRIES:2,BASE_DELAY_MS:500,MAX_DELAY_MS:5e3};function we(){if(typeof window>"u")return `anon_${crypto.randomUUID()}`;let e=localStorage.getItem(ce.ANONYMOUS_ID);if(e)return e;let a=`anon_${crypto.randomUUID()}`;return localStorage.setItem(ce.ANONYMOUS_ID,a),a}var Z={maxRetries:q.MAX_RETRIES,baseDelayMs:q.BASE_DELAY_MS,maxDelayMs:q.MAX_DELAY_MS};async function de(e,a,l=Z,o=false){let b=null;for(let m=0;m<=l.maxRetries;m++){try{o&&m>0&&console.log(`[Gotcha] Retry attempt ${m}/${l.maxRetries}`);let t=await fetch(e,a);if(t.status>=400&&t.status<500&&t.status!==429||t.ok)return t;b=new Error(`HTTP ${t.status}`);}catch(t){b=t,o&&console.log(`[Gotcha] Network error: ${b.message}`);}if(m<l.maxRetries){let t=Math.min(l.baseDelayMs*Math.pow(2,m),l.maxDelayMs);await new Promise(c=>setTimeout(c,t));}}throw b}function Ce(e){let{apiKey:a,baseUrl:l=Te,debug:o=false}=e,b={"Content-Type":"application/json",Authorization:`Bearer ${a}`};async function m(t,c,
|
|
1
|
+
import {createContext,useState,useMemo,useCallback,useRef,useEffect,useContext}from'react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {createPortal}from'react-dom';var Te="https://gotcha.cx/api/v1";var ce={ANONYMOUS_ID:"gotcha_anonymous_id"},M={POSITION:"top-right",SIZE:"md",THEME:"light",SHOW_ON_HOVER:true,TOUCH_BEHAVIOR:"always-visible",SUBMIT_TEXT:"Submit",THANK_YOU_MESSAGE:"Thanks for your feedback!"};var q={MAX_RETRIES:2,BASE_DELAY_MS:500,MAX_DELAY_MS:5e3};function we(){if(typeof window>"u")return `anon_${crypto.randomUUID()}`;let e=localStorage.getItem(ce.ANONYMOUS_ID);if(e)return e;let a=`anon_${crypto.randomUUID()}`;return localStorage.setItem(ce.ANONYMOUS_ID,a),a}var Z={maxRetries:q.MAX_RETRIES,baseDelayMs:q.BASE_DELAY_MS,maxDelayMs:q.MAX_DELAY_MS};async function de(e,a,l=Z,o=false){let b=null;for(let m=0;m<=l.maxRetries;m++){try{o&&m>0&&console.log(`[Gotcha] Retry attempt ${m}/${l.maxRetries}`);let t=await fetch(e,a);if(t.status>=400&&t.status<500&&t.status!==429||t.ok)return t;b=new Error(`HTTP ${t.status}`);}catch(t){b=t,o&&console.log(`[Gotcha] Network error: ${b.message}`);}if(m<l.maxRetries){let t=Math.min(l.baseDelayMs*Math.pow(2,m),l.maxDelayMs);await new Promise(c=>setTimeout(c,t));}}throw b}function Ce(e){let{apiKey:a,baseUrl:l=Te,debug:o=false}=e,b={"Content-Type":"application/json",Authorization:`Bearer ${a}`};async function m(t,c,n){let u=`${l}${c}`,d=crypto.randomUUID();o&&console.log(`[Gotcha] ${t} ${c}`,n);let s=await de(u,{method:t,headers:{...b,"Idempotency-Key":d},body:n?JSON.stringify(n):void 0},Z,o),i=await s.json();if(!s.ok){let f=i.error;throw o&&console.error(`[Gotcha] Error: ${f.code} - ${f.message}`),f}return o&&console.log("[Gotcha] Response:",i),i}return {async submitResponse(t){let c=t.user||{};c.id||(c.id=we());let n={...t,user:c,context:{url:typeof window<"u"?window.location.href:void 0,userAgent:typeof navigator<"u"?navigator.userAgent:void 0}};return m("POST","/responses",n)},async checkExistingResponse(t,c){let n=`${l}/responses/check?elementId=${encodeURIComponent(t)}&userId=${encodeURIComponent(c)}`;o&&console.log("[Gotcha] GET /responses/check");let u=await de(n,{method:"GET",headers:b},Z,o),d=await u.json();if(!u.ok){let s=d.error;throw o&&console.error(`[Gotcha] Error: ${s.code} - ${s.message}`),s}return d.exists?(o&&console.log("[Gotcha] Found existing response:",d.response),d.response):null},async updateResponse(t,c,n){let u=`${l}/responses/${t}${n?`?userId=${encodeURIComponent(n)}`:""}`;o&&console.log(`[Gotcha] PATCH /responses/${t}`,c);let d=await de(u,{method:"PATCH",headers:b,body:JSON.stringify(c)},Z,o),s=await d.json();if(!d.ok){let i=s.error;throw o&&console.error(`[Gotcha] Error: ${i.code} - ${i.message}`),i}return o&&console.log("[Gotcha] Response updated:",s),s},getBaseUrl(){return l}}}var Ge=createContext(null);function je({apiKey:e,children:a,baseUrl:l,debug:o=false,disabled:b=false,defaultUser:m={}}){let[t,c]=useState(null),n=useMemo(()=>Ce({apiKey:e,baseUrl:l,debug:o}),[e,l,o]),u=useCallback(i=>{c(i);},[]),d=useCallback(()=>{c(null);},[]),s=useMemo(()=>({client:n,disabled:b,defaultUser:m,debug:o,activeModalId:t,openModal:u,closeModal:d}),[n,b,m,o,t,u,d]);return jsx(Ge.Provider,{value:s,children:a})}function L(){let e=useContext(Ge);if(!e)throw new Error("useGotchaContext must be used within a GotchaProvider");return e}function Pe(e){let{client:a,defaultUser:l}=L(),[o,b]=useState(false),[m,t]=useState(false),[c,n]=useState(null),[u,d]=useState(null);return useEffect(()=>{let i=e.user?.id||l?.id;if(!i){d(null);return}let f=false;return (async()=>{t(true);try{let g=await a.checkExistingResponse(e.elementId,i);f||d(g);}catch{f||d(null);}finally{f||t(false);}})(),()=>{f=true;}},[a,e.elementId,e.user?.id,l?.id]),{submit:useCallback(async i=>{b(true),n(null);try{let f=e.user?.id||l?.id,p;return u&&f?p=await a.updateResponse(u.id,{content:i.content,title:i.title,rating:i.rating,vote:i.vote,pollSelected:i.pollSelected},f):p=await a.submitResponse({elementId:e.elementId,mode:e.mode,content:i.content,title:i.title,rating:i.rating,vote:i.vote,pollOptions:e.pollOptions,pollSelected:i.pollSelected,experimentId:e.experimentId,variant:e.variant,user:{...l,...e.user}}),e.onSuccess?.(p),p}catch(f){let p=f instanceof Error?f.message:"Something went wrong";throw n(p),e.onError?.(f instanceof Error?f:new Error(p)),f}finally{b(false);}},[a,l,e,u]),isLoading:o,isCheckingExisting:m,error:c,existingResponse:u,isEditing:!!u,clearError:()=>n(null)}}function ee(...e){return e.filter(Boolean).join(" ")}var I=()=>typeof window>"u"?false:"ontouchstart"in window||navigator.maxTouchPoints>0,Ae=(e,a)=>{let l={sm:{desktop:24,mobile:32},md:{desktop:32,mobile:36},lg:{desktop:40,mobile:40}};return a?l[e].mobile:l[e].desktop};function Je(){return typeof window>"u"?"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function De({size:e,theme:a,customStyles:l,showOnHover:o,touchBehavior:b,onClick:m,isOpen:t,isParentHovered:c=false}){let[n,u]=useState(false),[d,s]=useState(false),[i,f]=useState(Je);useEffect(()=>{u(I());let C=window.matchMedia("(prefers-color-scheme: dark)"),A=S=>f(S.matches?"dark":"light");return C.addEventListener("change",A),()=>C.removeEventListener("change",A)},[]);let p=t?true:!n&&o?c:n&&b==="tap-to-reveal"?d:true,g=()=>{if(n&&b==="tap-to-reveal"&&!d){s(true);return}m();},r=Ae(e,n),h=(a==="auto"?i:a)==="dark",P={width:r,height:r,borderRadius:"50%",border:h?"1px solid rgba(255,255,255,0.15)":"none",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",background:h?"linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 60%, rgba(0,0,0,0.05) 100%)":"linear-gradient(160deg, rgba(255,255,255,0.7) 0%, rgba(200,210,230,0.4) 40%, rgba(180,192,220,0.5) 100%)",backdropFilter:"blur(16px) saturate(170%)",WebkitBackdropFilter:"blur(16px) saturate(170%)",color:h?"rgba(255,255,255,0.88)":"rgba(0,0,0,0.75)",boxShadow:h?"0 4px 14px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.35)":"0 3px 12px rgba(0,0,0,0.12), 0 0 1px rgba(0,0,0,0.2)",transition:"all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",opacity:p?1:0,transform:p?"scale(1)":"scale(0.6)",pointerEvents:p?"auto":"none",...l?.button};return jsx("button",{type:"button",onClick:g,style:P,className:ee("gotcha-button",t&&"gotcha-button--open"),"aria-label":"Give feedback on this feature","aria-expanded":t,"aria-haspopup":"dialog",children:jsx(tt,{size:r*.65})})}var Oe="gotcha-carter-one";function et(){useEffect(()=>{if(document.getElementById(Oe))return;let e=document.createElement("link");e.id=Oe,e.rel="stylesheet",e.href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap",document.head.appendChild(e);},[]);}function tt({size:e}){return et(),jsx("span",{"aria-hidden":"true",style:{fontFamily:"'Carter One', cursive",fontSize:e,lineHeight:1,display:"flex",alignItems:"center",justifyContent:"center",marginTop:e*.05,marginRight:e*.05,userSelect:"none"},children:"G"})}function _({size:e=16,color:a="currentColor"}){return jsxs("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",style:{animation:"gotcha-spin 0.8s linear infinite"},children:[jsx("style",{children:`
|
|
2
2
|
@keyframes gotcha-spin {
|
|
3
3
|
from { transform: rotate(0deg); }
|
|
4
4
|
to { transform: rotate(360deg); }
|
|
@@ -8,5 +8,5 @@ import {createContext,useState,useMemo,useCallback,useRef,useEffect,useContext}f
|
|
|
8
8
|
50% { stroke-dasharray: 40, 62; stroke-dashoffset: -12; }
|
|
9
9
|
100% { stroke-dasharray: 1, 62; stroke-dashoffset: -62; }
|
|
10
10
|
}
|
|
11
|
-
`}),jsx("circle",{cx:"12",cy:"12",r:"10",stroke:a,strokeWidth:"2",strokeOpacity:"0.12"}),jsx("circle",{cx:"12",cy:"12",r:"10",stroke:a,strokeWidth:"2",strokeLinecap:"round",style:{animation:"gotcha-dash 1.2s ease-in-out infinite"}})]})}function ze({theme:e,placeholder:a,submitText:l,isLoading:o,onSubmit:b,customStyles:m,initialValues:t,isEditing:c=false}){let[r,u]=useState(t?.content||""),[d,s]=useState(t?.rating??null),[i,f]=useState(false);useEffect(()=>{f(I());},[]),useEffect(()=>{t?.content!==void 0&&u(t.content||""),t?.rating!==void 0&&s(t.rating??null);},[t?.content,t?.rating]);let p=e==="dark",g=h=>{h.preventDefault(),!(!r.trim()&&d===null)&&b({content:r.trim()||void 0,rating:d??void 0});},n={width:"100%",padding:i?"12px 14px":"10px 12px",border:`1px solid ${p?"rgba(255,255,255,0.08)":"#e2e8f0"}`,borderRadius:8,backgroundColor:p?"rgba(55,65,81,0.5)":"#fafbfc",color:p?"#f9fafb":"#111827",fontSize:i?16:14,resize:"vertical",minHeight:i?100:80,fontFamily:"inherit",outline:"none",transition:"border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)",lineHeight:1.5,...m?.input},v={width:"100%",padding:i?"14px 16px":"10px 16px",border:"none",borderRadius:8,backgroundColor:p?"#e2e8f0":"#1e293b",color:p?"#1e293b":"#ffffff",fontSize:i?16:14,fontWeight:500,cursor:o?"not-allowed":"pointer",transition:"all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",letterSpacing:"0.01em",...m?.submitButton};return jsxs("form",{onSubmit:g,children:[jsx("div",{style:{marginBottom:i?16:12},children:jsx(rt,{value:d,onChange:s,isDark:p,isTouch:i})}),jsx("textarea",{value:r,onChange:h=>u(h.target.value),placeholder:a||"Share your thoughts...",style:n,disabled:o,"aria-label":"Your feedback",onFocus:h=>{h.currentTarget.style.borderColor="#1e293b",h.currentTarget.style.boxShadow="0 0 0 2px rgba(30,41,59,0.15)",h.currentTarget.style.backgroundColor=p?"rgba(55,65,81,0.7)":"#ffffff";},onBlur:h=>{h.currentTarget.style.borderColor=p?"rgba(255,255,255,0.08)":"#e2e8f0",h.currentTarget.style.boxShadow="none",h.currentTarget.style.backgroundColor=p?"rgba(55,65,81,0.5)":"#fafbfc";}}),jsxs("button",{type:"submit",disabled:o||!r.trim()&&d===null,style:{...v,marginTop:12,opacity:o?.8:1,backgroundColor:!r.trim()&&d===null?p?"#374151":"#e2e8f0":p?"#e2e8f0":"#1e293b",color:!r.trim()&&d===null?p?"#6b7280":"#94a3b8":p?"#1e293b":"#ffffff",display:"flex",alignItems:"center",justifyContent:"center",gap:8},onMouseEnter:h=>{h.currentTarget.disabled||(h.currentTarget.style.backgroundColor=p?"#cbd5e1":"#334155");},onMouseLeave:h=>{h.currentTarget.disabled||(h.currentTarget.style.backgroundColor=p?"#e2e8f0":"#1e293b");},children:[o&&jsx(_,{size:i?18:16,color:p?"#1e293b":"#ffffff"}),o?c?"Updating...":"Submitting...":c?"Update":l]})]})}function rt({value:e,onChange:a,isDark:l,isTouch:o}){let[b,m]=useState(null),t=o?28:18,c=o?6:3;return jsx("div",{style:{display:"flex",gap:o?6:2},role:"group","aria-label":"Rating",children:[1,2,3,4,5].map(r=>{let u=(b??e??0)>=r;return jsx("button",{type:"button",onClick:()=>a(r),onMouseEnter:()=>m(r),onMouseLeave:()=>m(null),"aria-label":`Rate ${r} out of 5`,"aria-pressed":e===r,style:{background:"none",border:"none",cursor:"pointer",padding:c,color:u?"#f59e0b":l?"rgba(255,255,255,0.12)":"#e2e8f0",transition:"color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)",transform:b!==null&&b>=r?"scale(1.1)":"scale(1)"},children:jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"currentColor",children:jsx("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"})})},r)})})}function Ne({theme:e,isLoading:a,onSubmit:l,initialVote:o,isEditing:b=false,labels:m}){let[t,c]=useState(false),[r,u]=useState(o||null),[d,s]=useState(o||null);useEffect(()=>{c(I());},[]),useEffect(()=>{o!==void 0&&(s(o),u(o));},[o]),useEffect(()=>{!a&&!b&&u(null);},[a,b]);let i=n=>{u(n),l({vote:n});},f=e==="dark",p=n=>{let v=d===n;return {flex:1,minWidth:0,overflow:"hidden",padding:t?"14px 18px":"10px 14px",border:`1px solid ${v?n==="up"?f?"rgba(16,185,129,0.3)":"rgba(16,185,129,0.25)":f?"rgba(239,68,68,0.3)":"rgba(239,68,68,0.25)":f?"rgba(255,255,255,0.08)":"#e2e8f0"}`,borderRadius:t?10:8,backgroundColor:v?n==="up"?f?"rgba(16,185,129,0.08)":"rgba(16,185,129,0.06)":f?"rgba(239,68,68,0.08)":"rgba(239,68,68,0.06)":f?"rgba(55,65,81,0.5)":"#fafbfc",color:v?n==="up"?"#10b981":"#ef4444":f?"#d1d5db":"#64748b",fontSize:t?28:24,cursor:a?"not-allowed":"pointer",transition:"background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s",display:"flex",alignItems:"center",justifyContent:"center",gap:t?10:8}},g=t?24:20;return jsxs("div",{style:{display:"flex",gap:t?12:10},role:"group","aria-label":"Vote",children:[jsx("button",{type:"button",onClick:()=>i("up"),disabled:a,style:p("up"),"aria-label":"Vote up - I like this","aria-pressed":d==="up",onMouseEnter:n=>{a||(n.currentTarget.style.transform="translateY(-1px)",n.currentTarget.style.boxShadow="0 2px 8px rgba(0,0,0,0.06)");},onMouseLeave:n=>{n.currentTarget.style.transform="translateY(0)",n.currentTarget.style.boxShadow="none";},children:a&&r==="up"?jsxs(Fragment,{children:[jsx(_,{size:g,color:f?"#f9fafb":"#111827"}),jsx("span",{style:{fontSize:t?15:13,fontWeight:500,letterSpacing:"0.01em"},children:b?"Updating...":"Sending..."})]}):jsxs(Fragment,{children:[jsx(nt,{size:g}),jsx("span",{style:{fontSize:t?15:13,fontWeight:500,letterSpacing:"0.01em"},children:m?.up||(d==="up"?"Liked":"Like")})]})}),jsx("button",{type:"button",onClick:()=>i("down"),disabled:a,style:p("down"),"aria-label":"Vote down - I don't like this","aria-pressed":d==="down",onMouseEnter:n=>{a||(n.currentTarget.style.transform="translateY(-1px)",n.currentTarget.style.boxShadow="0 2px 8px rgba(0,0,0,0.06)");},onMouseLeave:n=>{n.currentTarget.style.transform="translateY(0)",n.currentTarget.style.boxShadow="none";},children:a&&r==="down"?jsxs(Fragment,{children:[jsx(_,{size:g,color:f?"#f9fafb":"#111827"}),jsx("span",{style:{fontSize:t?15:13,fontWeight:500,letterSpacing:"0.01em"},children:b?"Updating...":"Sending..."})]}):jsxs(Fragment,{children:[jsx(st,{size:g}),jsx("span",{style:{fontSize:t?15:13,fontWeight:500,letterSpacing:"0.01em"},children:m?.down||(d==="down"?"Disliked":"Dislike")})]})})]})}function nt({size:e=24}){return jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"})})}function st({size:e=24}){return jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"})})}function $e({theme:e,options:a,allowMultiple:l,isLoading:o,onSubmit:b,initialSelected:m,isEditing:t=false}){let[c,r]=useState(m||[]),[u,d]=useState(false);useEffect(()=>{d(I());},[]),useEffect(()=>{m&&r(m);},[m]);let s=e==="dark",i=g=>{r(l?n=>n.includes(g)?n.filter(v=>v!==g):[...n,g]:n=>n.includes(g)?[]:[g]);},f=()=>{c.length!==0&&b({pollSelected:c});},p=g=>{let n=c.includes(g);return {width:"100%",padding:u?"12px 14px":"9px 12px",border:`1px solid ${n?s?"rgba(226,232,240,0.25)":"rgba(30,41,59,0.25)":s?"rgba(255,255,255,0.08)":"#e2e8f0"}`,borderRadius:u?10:8,backgroundColor:n?s?"rgba(226,232,240,0.08)":"rgba(30,41,59,0.05)":s?"rgba(55,65,81,0.5)":"#fafbfc",color:n?s?"#e2e8f0":"#1e293b":s?"#d1d5db":"#374151",fontSize:u?15:13,fontWeight:500,cursor:o?"not-allowed":"pointer",transition:"background-color 0.2s, border-color 0.2s, color 0.2s",textAlign:"left",letterSpacing:"0.01em",display:"flex",alignItems:"center",gap:8}};return jsxs("div",{children:[jsx("div",{style:{display:"flex",flexDirection:"column",gap:u?8:6},role:"group","aria-label":l?"Select one or more options":"Select an option",children:a.map(g=>{let n=c.includes(g);return jsxs("button",{type:"button",onClick:()=>i(g),disabled:o,style:p(g),"aria-pressed":n,children:[jsx("span",{style:{width:16,height:16,borderRadius:l?4:"50%",border:`2px solid ${n?s?"#e2e8f0":"#1e293b":s?"rgba(255,255,255,0.2)":"#cbd5e1"}`,backgroundColor:n?s?"#e2e8f0":"#1e293b":"transparent",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,transition:"all 0.15s"},children:n&&jsx("svg",{width:10,height:10,viewBox:"0 0 12 12",fill:"none",children:jsx("path",{d:"M2 6l3 3 5-5",stroke:"#fff",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),g]},g)})}),jsxs("button",{type:"button",onClick:f,disabled:o||c.length===0,style:{width:"100%",marginTop:12,padding:u?"14px 16px":"10px 16px",border:"none",borderRadius:8,backgroundColor:c.length===0?s?"#374151":"#e2e8f0":s?"#e2e8f0":"#1e293b",color:c.length===0?s?"#6b7280":"#94a3b8":s?"#1e293b":"#ffffff",fontSize:u?16:14,fontWeight:500,cursor:o||c.length===0?"not-allowed":"pointer",transition:"all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",letterSpacing:"0.01em",display:"flex",alignItems:"center",justifyContent:"center",gap:8,opacity:o?.8:1},onMouseEnter:g=>{g.currentTarget.disabled||(g.currentTarget.style.backgroundColor=s?"#cbd5e1":"#334155");},onMouseLeave:g=>{g.currentTarget.disabled||(g.currentTarget.style.backgroundColor=c.length===0?s?"#374151":"#e2e8f0":s?"#e2e8f0":"#1e293b");},children:[o&&jsx(_,{size:u?18:16,color:s?"#1e293b":"#ffffff"}),o?t?"Updating...":"Submitting...":t?"Update":"Submit"]})]})}function xe({mode:e,theme:a,customStyles:l,promptText:o,placeholder:b,submitText:m,thankYouMessage:t,isLoading:c,isSubmitted:r,error:u,existingResponse:d,isEditing:s=false,voteLabels:i,options:f,allowMultiple:p=false,onSubmit:g,onClose:n,anchorRect:v}){let h=useRef(null),P=useRef(null),[C,A]=useState(false),[S,se]=useState(false),[ae,F]=useState("light");useEffect(()=>{se(window.innerWidth<640);let x=window.matchMedia("(prefers-color-scheme: dark)");F(x.matches?"dark":"light");let w=E=>F(E.matches?"dark":"light");return x.addEventListener("change",w),()=>x.removeEventListener("change",w)},[]),useEffect(()=>{let x=requestAnimationFrame(()=>A(true));return ()=>cancelAnimationFrame(x)},[]);let O=a==="auto"?ae:a,y=O==="dark",V=(v?window.innerHeight-v.bottom:window.innerHeight/2)<280+20;useEffect(()=>{let x=h.current;if(!x)return;P.current?.focus();let w=E=>{if(E.key==="Escape"){n();return}if(E.key==="Tab"){let D=x.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),z=D[0],N=D[D.length-1];E.shiftKey&&document.activeElement===z?(E.preventDefault(),N?.focus()):!E.shiftKey&&document.activeElement===N&&(E.preventDefault(),z?.focus());}};return document.addEventListener("keydown",w),()=>document.removeEventListener("keydown",w)},[n]);let K=e==="vote"?"What do you think?":e==="poll"?"Cast your vote":"What do you think of this feature?",U=S?20:16,X=y?"0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.2)":"0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.06)",j=S?{position:"fixed",left:"50%",top:"50%",width:"calc(100vw - 32px)",maxWidth:320,padding:U,borderRadius:12,backgroundColor:y?"#1f2937":"#ffffff",color:y?"#f9fafb":"#111827",boxShadow:X,border:`1px solid ${y?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.06)"}`,zIndex:9999,transition:"opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)",opacity:C?1:0,transform:C?"translate(-50%, -50%) scale(1)":"translate(-50%, -50%) scale(0.96)",...l?.modal}:{position:"absolute",left:"50%",width:320,padding:U,borderRadius:10,backgroundColor:y?"#1f2937":"#ffffff",color:y?"#f9fafb":"#111827",boxShadow:X,border:`1px solid ${y?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.06)"}`,zIndex:9999,...V?{bottom:"100%",marginBottom:8}:{top:"100%",marginTop:8},transition:"opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)",opacity:C?1:0,transform:C?"translateX(-50%) scale(1) translateY(0)":`translateX(-50%) scale(0.96) translateY(${V?"6px":"-6px"})`,...l?.modal};return jsxs("div",{ref:h,role:"dialog","aria-modal":"true","aria-labelledby":"gotcha-modal-title",style:j,className:ee("gotcha-modal",y&&"gotcha-modal--dark"),children:[jsx("button",{ref:P,type:"button",onClick:n,"aria-label":"Close feedback form",style:{position:"absolute",top:S?12:8,right:S?12:8,width:S?36:28,height:S?36:28,border:"none",background:"transparent",cursor:"pointer",color:y?"#6b7280":"#9ca3af",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:6,transition:"all 0.15s cubic-bezier(0.4, 0, 0.2, 1)"},onMouseEnter:x=>{x.currentTarget.style.backgroundColor=y?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.04)",x.currentTarget.style.color=y?"#9ca3af":"#6b7280";},onMouseLeave:x=>{x.currentTarget.style.backgroundColor="transparent",x.currentTarget.style.color=y?"#6b7280":"#9ca3af";},children:jsx("svg",{width:S?16:12,height:S?16:12,viewBox:"0 0 14 14",fill:"none",children:jsx("path",{d:"M1 1L13 13M1 13L13 1",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}),jsx("h2",{id:"gotcha-modal-title",style:{margin:"0 0 16px 0",fontSize:S?16:14,fontWeight:600,paddingRight:S?40:32,letterSpacing:"-0.01em",lineHeight:1.4},children:o||K}),r&&jsxs("div",{style:{textAlign:"center",padding:"24px 0",color:y?"#10b981":"#059669"},children:[jsx("div",{style:{width:44,height:44,borderRadius:"50%",backgroundColor:y?"rgba(16,185,129,0.1)":"rgba(5,150,105,0.08)",display:"flex",alignItems:"center",justifyContent:"center",margin:"0 auto 12px"},children:jsx("svg",{width:"22",height:"22",viewBox:"0 0 24 24",fill:"none",children:jsx("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),jsx("p",{style:{margin:0,fontSize:13,fontWeight:500,color:y?"#d1d5db":"#374151"},children:t})]}),u&&!r&&jsx("div",{style:{padding:"8px 10px",marginBottom:12,borderRadius:8,backgroundColor:y?"rgba(127,29,29,0.3)":"#fef2f2",border:`1px solid ${y?"rgba(254,202,202,0.1)":"rgba(220,38,38,0.1)"}`,color:y?"#fecaca":"#dc2626",fontSize:13,lineHeight:1.4},children:u}),!r&&jsxs(Fragment,{children:[e==="feedback"&&jsx(ze,{theme:O,placeholder:b,submitText:m,isLoading:c,onSubmit:g,customStyles:l,initialValues:d?{content:d.content,rating:d.rating}:void 0,isEditing:s}),e==="vote"&&jsx(Ne,{theme:O,isLoading:c,onSubmit:g,initialVote:d?.vote||void 0,isEditing:s,labels:i}),e==="poll"&&f&&f.length>0&&jsx($e,{theme:O,options:f,allowMultiple:p,isLoading:c,onSubmit:g,initialSelected:d?.pollSelected||void 0,isEditing:s})]}),jsxs("div",{"aria-live":"polite",className:"sr-only",style:{position:"absolute",left:-9999},children:[r&&"Thank you! Your feedback has been submitted.",u&&`Error: ${u}`]})]})}function ct({elementId:e,user:a,mode:l="feedback",experimentId:o,variant:b,voteLabels:m,options:t,allowMultiple:c=false,showResults:r=true,position:u=M.POSITION,size:d=M.SIZE,theme:s=M.THEME,customStyles:i,visible:f=true,showOnHover:p=M.SHOW_ON_HOVER,touchBehavior:g=M.TOUCH_BEHAVIOR,promptText:n,placeholder:v,submitText:h=M.SUBMIT_TEXT,thankYouMessage:P=M.THANK_YOU_MESSAGE,onSubmit:C,onOpen:A,onClose:S,onError:se}){let{disabled:ae,activeModalId:F,openModal:O,closeModal:y}=L(),[ie,W]=useState(false),[V,K]=useState(false),[U,X]=useState(null),[j,x]=useState(false),w=useRef(null);useEffect(()=>{x(window.innerWidth<640);},[]);let E=F===e;useEffect(()=>{if(!p)return;let R=w.current;if(!R)return;let B=R.parentElement;if(!B)return;let Ee=()=>K(true),Re=()=>K(false);return B.addEventListener("mouseenter",Ee),B.addEventListener("mouseleave",Re),()=>{B.removeEventListener("mouseenter",Ee),B.removeEventListener("mouseleave",Re);}},[p]);let{submit:D,isLoading:z,error:N,existingResponse:ve,isEditing:Q}=Pe({elementId:e,mode:l,experimentId:o,variant:b,pollOptions:t,user:a,onSuccess:R=>{W(true),C?.(R),setTimeout(()=>{y(),W(false);},3e3);},onError:R=>{console.warn("[Gotcha] Submission failed:",R instanceof Error?R.message:R),se?.(R);}}),We=useCallback(()=>{w.current&&X(w.current.getBoundingClientRect()),O(e),A?.();},[e,O,A]),le=useCallback(()=>{y(),W(false),S?.();},[y,S]),ke=useCallback(R=>{D(R);},[D]);return ae||!f?null:jsxs("div",{ref:w,style:{...{"top-right":{position:"absolute",top:0,right:0,transform:"translate(50%, -50%)"},"top-left":{position:"absolute",top:0,left:0,transform:"translate(-50%, -50%)"},"bottom-right":{position:"absolute",bottom:0,right:0,transform:"translate(50%, 50%)"},"bottom-left":{position:"absolute",bottom:0,left:0,transform:"translate(-50%, 50%)"},inline:{position:"relative",display:"inline-flex"}}[u],zIndex:E?1e4:"auto"},className:"gotcha-container","data-gotcha-element":e,children:[jsx(De,{size:d,theme:s,customStyles:i,showOnHover:p,touchBehavior:g,onClick:We,isOpen:E,isParentHovered:V}),E&&!j&&jsx(xe,{mode:l,theme:s,customStyles:i,promptText:n,placeholder:v,submitText:h,thankYouMessage:Q?"Your feedback has been updated!":P,isLoading:z,isSubmitted:ie,error:N,existingResponse:ve,isEditing:Q,voteLabels:m,options:t,allowMultiple:c,onSubmit:ke,onClose:le,anchorRect:U||void 0}),E&&j&&createPortal(jsx("div",{style:{position:"fixed",inset:0,zIndex:99999,backgroundColor:"rgba(0, 0, 0, 0.3)"},onClick:le,"aria-hidden":"true",children:jsx("div",{onClick:R=>R.stopPropagation(),children:jsx(xe,{mode:l,theme:s,customStyles:i,promptText:n,placeholder:v,submitText:h,thankYouMessage:Q?"Your feedback has been updated!":P,isLoading:z,isSubmitted:ie,error:N,existingResponse:ve,isEditing:Q,voteLabels:m,options:t,allowMultiple:c,onSubmit:ke,onClose:le,anchorRect:U||void 0})})}),document.body)]})}function ut(){let{client:e,disabled:a,defaultUser:l,debug:o}=L();return {client:e,disabled:a,defaultUser:l,debug:o,submitFeedback:e.submitResponse.bind(e)}}export{ct as Gotcha,je as GotchaProvider,ut as useGotcha};//# sourceMappingURL=index.mjs.map
|
|
11
|
+
`}),jsx("circle",{cx:"12",cy:"12",r:"10",stroke:a,strokeWidth:"2",strokeOpacity:"0.12"}),jsx("circle",{cx:"12",cy:"12",r:"10",stroke:a,strokeWidth:"2",strokeLinecap:"round",style:{animation:"gotcha-dash 1.2s ease-in-out infinite"}})]})}function ze({theme:e,placeholder:a,submitText:l,isLoading:o,onSubmit:b,customStyles:m,initialValues:t,isEditing:c=false}){let[n,u]=useState(t?.content||""),[d,s]=useState(t?.rating??null),[i,f]=useState(false);useEffect(()=>{f(I());},[]),useEffect(()=>{t?.content!==void 0&&u(t.content||""),t?.rating!==void 0&&s(t.rating??null);},[t?.content,t?.rating]);let p=e==="dark",g=h=>{h.preventDefault(),!(!n.trim()&&d===null)&&b({content:n.trim()||void 0,rating:d??void 0});},r={width:"100%",padding:i?"12px 14px":"10px 12px",border:`1px solid ${p?"rgba(255,255,255,0.08)":"#e2e8f0"}`,borderRadius:8,backgroundColor:p?"rgba(55,65,81,0.5)":"#fafbfc",color:p?"#f9fafb":"#111827",fontSize:i?16:14,resize:"vertical",minHeight:i?100:80,fontFamily:"inherit",outline:"none",transition:"border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)",lineHeight:1.5,...m?.input},v={width:"100%",padding:i?"14px 16px":"10px 16px",border:"none",borderRadius:8,backgroundColor:p?"#e2e8f0":"#1e293b",color:p?"#1e293b":"#ffffff",fontSize:i?16:14,fontWeight:500,cursor:o?"not-allowed":"pointer",transition:"all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",letterSpacing:"0.01em",...m?.submitButton};return jsxs("form",{onSubmit:g,children:[jsx("div",{style:{marginBottom:i?16:12},children:jsx(nt,{value:d,onChange:s,isDark:p,isTouch:i})}),jsx("textarea",{value:n,onChange:h=>u(h.target.value),placeholder:a||"Share your thoughts...",style:r,disabled:o,"aria-label":"Your feedback",onFocus:h=>{h.currentTarget.style.borderColor="#1e293b",h.currentTarget.style.boxShadow="0 0 0 2px rgba(30,41,59,0.15)",h.currentTarget.style.backgroundColor=p?"rgba(55,65,81,0.7)":"#ffffff";},onBlur:h=>{h.currentTarget.style.borderColor=p?"rgba(255,255,255,0.08)":"#e2e8f0",h.currentTarget.style.boxShadow="none",h.currentTarget.style.backgroundColor=p?"rgba(55,65,81,0.5)":"#fafbfc";}}),jsxs("button",{type:"submit",disabled:o||!n.trim()&&d===null,style:{...v,marginTop:12,opacity:o?.8:1,backgroundColor:!n.trim()&&d===null?p?"#374151":"#e2e8f0":p?"#e2e8f0":"#1e293b",color:!n.trim()&&d===null?p?"#6b7280":"#94a3b8":p?"#1e293b":"#ffffff",display:"flex",alignItems:"center",justifyContent:"center",gap:8},onMouseEnter:h=>{h.currentTarget.disabled||(h.currentTarget.style.backgroundColor=p?"#cbd5e1":"#334155");},onMouseLeave:h=>{h.currentTarget.disabled||(h.currentTarget.style.backgroundColor=p?"#e2e8f0":"#1e293b");},children:[o&&jsx(_,{size:i?18:16,color:p?"#1e293b":"#ffffff"}),o?c?"Updating...":"Submitting...":c?"Update":l]})]})}function nt({value:e,onChange:a,isDark:l,isTouch:o}){let[b,m]=useState(null),t=o?28:18,c=o?6:3;return jsx("div",{style:{display:"flex",gap:o?6:2},role:"group","aria-label":"Rating",children:[1,2,3,4,5].map(n=>{let u=(b??e??0)>=n;return jsx("button",{type:"button",onClick:()=>a(n),onMouseEnter:()=>m(n),onMouseLeave:()=>m(null),"aria-label":`Rate ${n} out of 5`,"aria-pressed":e===n,style:{background:"none",border:"none",cursor:"pointer",padding:c,color:u?"#f59e0b":l?"rgba(255,255,255,0.12)":"#e2e8f0",transition:"color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)",transform:b!==null&&b>=n?"scale(1.1)":"scale(1)"},children:jsx("svg",{width:t,height:t,viewBox:"0 0 24 24",fill:"currentColor",children:jsx("path",{d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"})})},n)})})}function Ne({theme:e,isLoading:a,onSubmit:l,initialVote:o,isEditing:b=false,labels:m}){let[t,c]=useState(false),[n,u]=useState(o||null),[d,s]=useState(o||null);useEffect(()=>{c(I());},[]),useEffect(()=>{o!==void 0&&(s(o),u(o));},[o]),useEffect(()=>{!a&&!b&&u(null);},[a,b]);let i=r=>{u(r),l({vote:r});},f=e==="dark",p=r=>{let v=d===r;return {flex:1,minWidth:0,overflow:"hidden",padding:t?"14px 18px":"10px 14px",border:`1px solid ${v?r==="up"?f?"rgba(16,185,129,0.3)":"rgba(16,185,129,0.25)":f?"rgba(239,68,68,0.3)":"rgba(239,68,68,0.25)":f?"rgba(255,255,255,0.08)":"#e2e8f0"}`,borderRadius:t?10:8,backgroundColor:v?r==="up"?f?"rgba(16,185,129,0.08)":"rgba(16,185,129,0.06)":f?"rgba(239,68,68,0.08)":"rgba(239,68,68,0.06)":f?"rgba(55,65,81,0.5)":"#fafbfc",color:v?r==="up"?"#10b981":"#ef4444":f?"#d1d5db":"#64748b",fontSize:t?28:24,cursor:a?"not-allowed":"pointer",transition:"background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s",display:"flex",alignItems:"center",justifyContent:"center",gap:t?10:8}},g=t?24:20;return jsxs("div",{style:{display:"flex",gap:t?12:10},role:"group","aria-label":"Vote",children:[jsx("button",{type:"button",onClick:()=>i("up"),disabled:a,style:p("up"),"aria-label":"Vote up - I like this","aria-pressed":d==="up",onMouseEnter:r=>{a||(r.currentTarget.style.transform="translateY(-1px)",r.currentTarget.style.boxShadow="0 2px 8px rgba(0,0,0,0.06)");},onMouseLeave:r=>{r.currentTarget.style.transform="translateY(0)",r.currentTarget.style.boxShadow="none";},children:a&&n==="up"?jsxs(Fragment,{children:[jsx(_,{size:g,color:f?"#f9fafb":"#111827"}),jsx("span",{style:{fontSize:t?15:13,fontWeight:500,letterSpacing:"0.01em"},children:b?"Updating...":"Sending..."})]}):jsxs(Fragment,{children:[jsx(rt,{size:g}),jsx("span",{style:{fontSize:t?15:13,fontWeight:500,letterSpacing:"0.01em"},children:m?.up||(d==="up"?"Liked":"Like")})]})}),jsx("button",{type:"button",onClick:()=>i("down"),disabled:a,style:p("down"),"aria-label":"Vote down - I don't like this","aria-pressed":d==="down",onMouseEnter:r=>{a||(r.currentTarget.style.transform="translateY(-1px)",r.currentTarget.style.boxShadow="0 2px 8px rgba(0,0,0,0.06)");},onMouseLeave:r=>{r.currentTarget.style.transform="translateY(0)",r.currentTarget.style.boxShadow="none";},children:a&&n==="down"?jsxs(Fragment,{children:[jsx(_,{size:g,color:f?"#f9fafb":"#111827"}),jsx("span",{style:{fontSize:t?15:13,fontWeight:500,letterSpacing:"0.01em"},children:b?"Updating...":"Sending..."})]}):jsxs(Fragment,{children:[jsx(st,{size:g}),jsx("span",{style:{fontSize:t?15:13,fontWeight:500,letterSpacing:"0.01em"},children:m?.down||(d==="down"?"Disliked":"Dislike")})]})})]})}function rt({size:e=24}){return jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"})})}function st({size:e=24}){return jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round",children:jsx("path",{d:"M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"})})}function $e({theme:e,options:a,allowMultiple:l,isLoading:o,onSubmit:b,initialSelected:m,isEditing:t=false}){let[c,n]=useState(m||[]),[u,d]=useState(false);useEffect(()=>{d(I());},[]),useEffect(()=>{m&&n(m);},[m]);let s=e==="dark",i=g=>{n(l?r=>r.includes(g)?r.filter(v=>v!==g):[...r,g]:r=>r.includes(g)?[]:[g]);},f=()=>{c.length!==0&&b({pollSelected:c});},p=g=>{let r=c.includes(g);return {width:"100%",padding:u?"12px 14px":"9px 12px",border:`1px solid ${r?s?"rgba(226,232,240,0.25)":"rgba(30,41,59,0.25)":s?"rgba(255,255,255,0.08)":"#e2e8f0"}`,borderRadius:u?10:8,backgroundColor:r?s?"rgba(226,232,240,0.08)":"rgba(30,41,59,0.05)":s?"rgba(55,65,81,0.5)":"#fafbfc",color:r?s?"#e2e8f0":"#1e293b":s?"#d1d5db":"#374151",fontSize:u?15:13,fontWeight:500,cursor:o?"not-allowed":"pointer",transition:"background-color 0.2s, border-color 0.2s, color 0.2s",textAlign:"left",letterSpacing:"0.01em",display:"flex",alignItems:"center",gap:8}};return jsxs("div",{children:[jsx("div",{style:{display:"flex",flexDirection:"column",gap:u?8:6},role:"group","aria-label":l?"Select one or more options":"Select an option",children:a.map(g=>{let r=c.includes(g);return jsxs("button",{type:"button",onClick:()=>i(g),disabled:o,style:p(g),"aria-pressed":r,children:[jsx("span",{style:{width:16,height:16,borderRadius:l?4:"50%",border:`2px solid ${r?s?"#e2e8f0":"#1e293b":s?"rgba(255,255,255,0.2)":"#cbd5e1"}`,backgroundColor:r?s?"#e2e8f0":"#1e293b":"transparent",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,transition:"all 0.15s"},children:r&&jsx("svg",{width:10,height:10,viewBox:"0 0 12 12",fill:"none",children:jsx("path",{d:"M2 6l3 3 5-5",stroke:"#fff",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),g]},g)})}),jsxs("button",{type:"button",onClick:f,disabled:o||c.length===0,style:{width:"100%",marginTop:12,padding:u?"14px 16px":"10px 16px",border:"none",borderRadius:8,backgroundColor:c.length===0?s?"#374151":"#e2e8f0":s?"#e2e8f0":"#1e293b",color:c.length===0?s?"#6b7280":"#94a3b8":s?"#1e293b":"#ffffff",fontSize:u?16:14,fontWeight:500,cursor:o||c.length===0?"not-allowed":"pointer",transition:"all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",letterSpacing:"0.01em",display:"flex",alignItems:"center",justifyContent:"center",gap:8,opacity:o?.8:1},onMouseEnter:g=>{g.currentTarget.disabled||(g.currentTarget.style.backgroundColor=s?"#cbd5e1":"#334155");},onMouseLeave:g=>{g.currentTarget.disabled||(g.currentTarget.style.backgroundColor=c.length===0?s?"#374151":"#e2e8f0":s?"#e2e8f0":"#1e293b");},children:[o&&jsx(_,{size:u?18:16,color:s?"#1e293b":"#ffffff"}),o?t?"Updating...":"Submitting...":t?"Update":"Submit"]})]})}function xe({mode:e,theme:a,customStyles:l,promptText:o,placeholder:b,submitText:m,thankYouMessage:t,isLoading:c,isSubmitted:n,error:u,existingResponse:d,isEditing:s=false,voteLabels:i,options:f,allowMultiple:p=false,onSubmit:g,onClose:r,anchorRect:v}){let h=useRef(null),P=useRef(null),[C,A]=useState(false),[S,se]=useState(false),[ae,F]=useState("light");useEffect(()=>{se(window.innerWidth<640);let x=window.matchMedia("(prefers-color-scheme: dark)");F(x.matches?"dark":"light");let w=E=>F(E.matches?"dark":"light");return x.addEventListener("change",w),()=>x.removeEventListener("change",w)},[]),useEffect(()=>{let x=requestAnimationFrame(()=>A(true));return ()=>cancelAnimationFrame(x)},[]);let O=a==="auto"?ae:a,y=O==="dark",V=(v?window.innerHeight-v.bottom:window.innerHeight/2)<280+20;useEffect(()=>{let x=h.current;if(!x)return;P.current?.focus();let w=E=>{if(E.key==="Escape"){r();return}if(E.key==="Tab"){let D=x.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),z=D[0],N=D[D.length-1];E.shiftKey&&document.activeElement===z?(E.preventDefault(),N?.focus()):!E.shiftKey&&document.activeElement===N&&(E.preventDefault(),z?.focus());}};return document.addEventListener("keydown",w),()=>document.removeEventListener("keydown",w)},[r]);let K=e==="vote"?"What do you think?":e==="poll"?"Cast your vote":"What do you think of this feature?",U=S?20:16,X=y?"0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.2)":"0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.06)",j=S?{position:"fixed",left:"50%",top:"50%",width:"calc(100vw - 32px)",maxWidth:320,padding:U,borderRadius:12,backgroundColor:y?"#1f2937":"#ffffff",color:y?"#f9fafb":"#111827",boxShadow:X,border:`1px solid ${y?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.06)"}`,zIndex:9999,transition:"opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)",opacity:C?1:0,transform:C?"translate(-50%, -50%) scale(1)":"translate(-50%, -50%) scale(0.96)",...l?.modal,textAlign:"left"}:{position:"absolute",left:"50%",width:320,padding:U,borderRadius:10,backgroundColor:y?"#1f2937":"#ffffff",color:y?"#f9fafb":"#111827",boxShadow:X,border:`1px solid ${y?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.06)"}`,zIndex:9999,...V?{bottom:"100%",marginBottom:8}:{top:"100%",marginTop:8},transition:"opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)",opacity:C?1:0,transform:C?"translateX(-50%) scale(1) translateY(0)":`translateX(-50%) scale(0.96) translateY(${V?"6px":"-6px"})`,...l?.modal,textAlign:"left"};return jsxs("div",{ref:h,role:"dialog","aria-modal":"true","aria-labelledby":"gotcha-modal-title",style:j,className:ee("gotcha-modal",y&&"gotcha-modal--dark"),children:[jsx("button",{ref:P,type:"button",onClick:r,"aria-label":"Close feedback form",style:{position:"absolute",top:S?12:8,right:S?12:8,width:S?36:28,height:S?36:28,border:"none",background:"transparent",cursor:"pointer",color:y?"#6b7280":"#9ca3af",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:6,transition:"all 0.15s cubic-bezier(0.4, 0, 0.2, 1)"},onMouseEnter:x=>{x.currentTarget.style.backgroundColor=y?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.04)",x.currentTarget.style.color=y?"#9ca3af":"#6b7280";},onMouseLeave:x=>{x.currentTarget.style.backgroundColor="transparent",x.currentTarget.style.color=y?"#6b7280":"#9ca3af";},children:jsx("svg",{width:S?16:12,height:S?16:12,viewBox:"0 0 14 14",fill:"none",children:jsx("path",{d:"M1 1L13 13M1 13L13 1",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}),jsx("h2",{id:"gotcha-modal-title",style:{margin:"0 0 16px 0",fontSize:S?16:14,fontWeight:600,paddingRight:S?40:32,letterSpacing:"-0.01em",lineHeight:1.4,textAlign:"left"},children:o||K}),n&&jsxs("div",{style:{textAlign:"center",padding:"24px 0",color:y?"#10b981":"#059669"},children:[jsx("div",{style:{width:44,height:44,borderRadius:"50%",backgroundColor:y?"rgba(16,185,129,0.1)":"rgba(5,150,105,0.08)",display:"flex",alignItems:"center",justifyContent:"center",margin:"0 auto 12px"},children:jsx("svg",{width:"22",height:"22",viewBox:"0 0 24 24",fill:"none",children:jsx("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),jsx("p",{style:{margin:0,fontSize:13,fontWeight:500,color:y?"#d1d5db":"#374151"},children:t})]}),u&&!n&&jsx("div",{style:{padding:"8px 10px",marginBottom:12,borderRadius:8,backgroundColor:y?"rgba(127,29,29,0.3)":"#fef2f2",border:`1px solid ${y?"rgba(254,202,202,0.1)":"rgba(220,38,38,0.1)"}`,color:y?"#fecaca":"#dc2626",fontSize:13,lineHeight:1.4},children:u}),!n&&jsxs(Fragment,{children:[e==="feedback"&&jsx(ze,{theme:O,placeholder:b,submitText:m,isLoading:c,onSubmit:g,customStyles:l,initialValues:d?{content:d.content,rating:d.rating}:void 0,isEditing:s}),e==="vote"&&jsx(Ne,{theme:O,isLoading:c,onSubmit:g,initialVote:d?.vote||void 0,isEditing:s,labels:i}),e==="poll"&&f&&f.length>0&&jsx($e,{theme:O,options:f,allowMultiple:p,isLoading:c,onSubmit:g,initialSelected:d?.pollSelected||void 0,isEditing:s})]}),jsxs("div",{"aria-live":"polite",className:"sr-only",style:{position:"absolute",left:-9999},children:[n&&"Thank you! Your feedback has been submitted.",u&&`Error: ${u}`]})]})}function ct({elementId:e,user:a,mode:l="feedback",experimentId:o,variant:b,voteLabels:m,options:t,allowMultiple:c=false,showResults:n=true,position:u=M.POSITION,size:d=M.SIZE,theme:s=M.THEME,customStyles:i,visible:f=true,showOnHover:p=M.SHOW_ON_HOVER,touchBehavior:g=M.TOUCH_BEHAVIOR,promptText:r,placeholder:v,submitText:h=M.SUBMIT_TEXT,thankYouMessage:P=M.THANK_YOU_MESSAGE,onSubmit:C,onOpen:A,onClose:S,onError:se}){let{disabled:ae,activeModalId:F,openModal:O,closeModal:y}=L(),[ie,W]=useState(false),[V,K]=useState(false),[U,X]=useState(null),[j,x]=useState(false),w=useRef(null);useEffect(()=>{x(window.innerWidth<640);},[]);let E=F===e;useEffect(()=>{if(!p)return;let R=w.current;if(!R)return;let B=R.parentElement;if(!B)return;let Ee=()=>K(true),Re=()=>K(false);return B.addEventListener("mouseenter",Ee),B.addEventListener("mouseleave",Re),()=>{B.removeEventListener("mouseenter",Ee),B.removeEventListener("mouseleave",Re);}},[p]);let{submit:D,isLoading:z,error:N,existingResponse:ve,isEditing:Q}=Pe({elementId:e,mode:l,experimentId:o,variant:b,pollOptions:t,user:a,onSuccess:R=>{W(true),C?.(R),setTimeout(()=>{y(),W(false);},3e3);},onError:R=>{console.warn("[Gotcha] Submission failed:",R instanceof Error?R.message:R),se?.(R);}}),We=useCallback(()=>{w.current&&X(w.current.getBoundingClientRect()),O(e),A?.();},[e,O,A]),le=useCallback(()=>{y(),W(false),S?.();},[y,S]),ke=useCallback(R=>{D(R);},[D]);return ae||!f?null:jsxs("div",{ref:w,style:{...{"top-right":{position:"absolute",top:0,right:0,transform:"translate(50%, -50%)"},"top-left":{position:"absolute",top:0,left:0,transform:"translate(-50%, -50%)"},"bottom-right":{position:"absolute",bottom:0,right:0,transform:"translate(50%, 50%)"},"bottom-left":{position:"absolute",bottom:0,left:0,transform:"translate(-50%, 50%)"},inline:{position:"relative",display:"inline-flex"}}[u],zIndex:E?1e4:"auto"},className:"gotcha-container","data-gotcha-element":e,children:[jsx(De,{size:d,theme:s,customStyles:i,showOnHover:p,touchBehavior:g,onClick:We,isOpen:E,isParentHovered:V}),E&&!j&&jsx(xe,{mode:l,theme:s,customStyles:i,promptText:r,placeholder:v,submitText:h,thankYouMessage:Q?"Your feedback has been updated!":P,isLoading:z,isSubmitted:ie,error:N,existingResponse:ve,isEditing:Q,voteLabels:m,options:t,allowMultiple:c,onSubmit:ke,onClose:le,anchorRect:U||void 0}),E&&j&&createPortal(jsx("div",{style:{position:"fixed",inset:0,zIndex:99999,backgroundColor:"rgba(0, 0, 0, 0.3)"},onClick:le,"aria-hidden":"true",children:jsx("div",{onClick:R=>R.stopPropagation(),children:jsx(xe,{mode:l,theme:s,customStyles:i,promptText:r,placeholder:v,submitText:h,thankYouMessage:Q?"Your feedback has been updated!":P,isLoading:z,isSubmitted:ie,error:N,existingResponse:ve,isEditing:Q,voteLabels:m,options:t,allowMultiple:c,onSubmit:ke,onClose:le,anchorRect:U||void 0})})}),document.body)]})}function ut(){let{client:e,disabled:a,defaultUser:l,debug:o}=L();return {client:e,disabled:a,defaultUser:l,debug:o,submitFeedback:e.submitResponse.bind(e)}}export{ct as Gotcha,je as GotchaProvider,ut as useGotcha};//# sourceMappingURL=index.mjs.map
|
|
12
12
|
//# sourceMappingURL=index.mjs.map
|