dripsender-otp-widget 1.0.0

package/README.md

@@ -0,0 +1,61 @@
+# DripsenderOTP Widget
+
+A customizable OTP verification widget for Dripsender.
+
+## Installation
+
+### Using npm
+
+```bash
+npm install dripsender-otp-widget
+```
+
+### Using the CDN
+
+```html
+<script type="module" src="https://unpkg.com/dripsender-otp-widget"></script>
+```
+
+### HTML Setup
+
+Add the widget element to your HTML:
+
+```html
+<div 
+  id="otp-widget"
+  reqotp="YOUR_REQUEST_OTP_ENDPOINT" 
+  verifyotp="YOUR_VERIFY_OTP_ENDPOINT"
+  title="Your Custom Title"
+></div>
+```
+
+## Customization Options
+
+The widget can be customized using the following attributes:
+
+| Attribute | Description | Default |
+|-----------|-------------|---------|
+| `reqotp` | API endpoint URL for requesting OTP | Required |
+| `verifyotp` | API endpoint URL for verifying OTP | Required |
+| `title` | Custom title for the verification modal | "Verifikasi OTP" |
+
+## Development
+
+To start the development server:
+
+```bash
+npm install
+npm run dev
+```
+
+## Building
+
+To build for production:
+
+```bash
+npm run build
+```
+
+## License
+
+MIT

package/dist/assets/main.js

@@ -0,0 +1,5 @@
+(function(j,T){typeof exports=="object"&&typeof module<"u"?module.exports=T():typeof define=="function"&&define.amd?define(T):(j=typeof globalThis<"u"?globalThis:j||self,j.DripsenderOTP=T())})(this,function(){"use strict";var Ge=Object.defineProperty;var Qe=(j,T,L)=>T in j?Ge(j,T,{enumerable:!0,configurable:!0,writable:!0,value:L}):j[T]=L;var ne=(j,T,L)=>(Qe(j,typeof T!="symbol"?T+"":T,L),L);const j="";function T(){}function L(e){return e()}function le(){return Object.create(null)}function V(e){e.forEach(L)}function oe(e){return typeof e=="function"}function ve(e,t){return e!=e?t==t:e!==t||e&&typeof e=="object"||typeof e=="function"}function we(e){return Object.keys(e).length===0}function i(e,t){e.appendChild(t)}function C(e,t,n){e.insertBefore(t,n||null)}function M(e){e.parentNode&&e.parentNode.removeChild(e)}function ke(e,t){for(let n=0;n<e.length;n+=1)e[n]&&e[n].d(t)}function b(e){return document.createElement(e)}function R(e){return document.createElementNS("http://www.w3.org/2000/svg",e)}function B(e){return document.createTextNode(e)}function S(){return B(" ")}function ye(){return B("")}function z(e,t,n,l){return e.addEventListener(t,n,l),()=>e.removeEventListener(t,n,l)}function o(e,t,n){n==null?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function xe(e){return Array.from(e.childNodes)}function G(e,t){t=""+t,e.data!==t&&(e.data=t)}function re(e,t){e.value=t??""}let Z;function F(e){Z=e}const q=[],se=[];let D=[];const ie=[],Oe=Promise.resolve();let $=!1;function Pe(){$||($=!0,Oe.then(ue))}function ee(e){D.push(e)}const te=new Set;let U=0;function ue(){if(U!==0)return;const e=Z;do{try{for(;U<q.length;){const t=q[U];U++,F(t),Te(t.$$)}}catch(t){throw q.length=0,U=0,t}for(F(null),q.length=0,U=0;se.length;)se.pop()();for(let t=0;t<D.length;t+=1){const n=D[t];te.has(n)||(te.add(n),n())}D.length=0}while(q.length);for(;ie.length;)ie.pop()();$=!1,te.clear(),F(e)}function Te(e){if(e.fragment!==null){e.update(),V(e.before_update);const t=e.dirty;e.dirty=[-1],e.fragment&&e.fragment.p(e.ctx,t),e.after_update.forEach(ee)}}function Ee(e){const t=[],n=[];D.forEach(l=>e.indexOf(l)===-1?t.push(l):n.push(l)),n.forEach(l=>l()),D=t}const Me=new Set;function Ce(e,t){e&&e.i&&(Me.delete(e),e.i(t))}function ce(e){return(e==null?void 0:e.length)!==void 0?e:Array.from(e)}function Se(e,t,n){const{fragment:l,after_update:r}=e.$$;l&&l.m(t,n),ee(()=>{const u=e.$$.on_mount.map(L).filter(oe);e.$$.on_destroy?e.$$.on_destroy.push(...u):V(u),e.$$.on_mount=[]}),r.forEach(ee)}function He(e,t){const n=e.$$;n.fragment!==null&&(Ee(n.after_update),V(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}function Ne(e,t){e.$$.dirty[0]===-1&&(q.push(e),Pe(),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<<t%31}function Ie(e,t,n,l,r,u,a=null,s=[-1]){const m=Z;F(e);const p=e.$$={fragment:null,ctx:[],props:u,update:T,not_equal:r,bound:le(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(t.context||(m?m.$$.context:[])),callbacks:le(),dirty:s,skip_bound:!1,root:t.target||m.$$.root};a&&a(p.root);let v=!1;if(p.ctx=n?n(e,t.props||{},(d,_,...c)=>{const h=c.length?c[0]:_;return p.ctx&&r(p.ctx[d],p.ctx[d]=h)&&(!p.skip_bound&&p.bound[d]&&p.bound[d](h),v&&Ne(e,d)),_}):[],p.update(),v=!0,V(p.before_update),p.fragment=l?l(p.ctx):!1,t.target){if(t.hydrate){const d=xe(t.target);p.fragment&&p.fragment.l(d),d.forEach(M)}else p.fragment&&p.fragment.c();t.intro&&Ce(e.$$.fragment),Se(e,t.target,t.anchor),ue()}F(m)}class je{constructor(){ne(this,"$$");ne(this,"$$set")}$destroy(){He(this,1),this.$destroy=T}$on(t,n){if(!oe(n))return T;const l=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return l.push(n),()=>{const r=l.indexOf(n);r!==-1&&l.splice(r,1)}}$set(t){this.$$set&&!we(t)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const Ae="4";typeof window<"u"&&(window.__svelte||(window.__svelte={v:new Set})).v.add(Ae);const We="";function ae(e,t,n){const l=e.slice();return l[24]=t[n],l[26]=n,l}function fe(e){let t,n,l,r,u,a,s,m,p,v,d,_;function c(y,P){return y[3]?Be:ze}let h=c(e),w=h(e),k=e[5]&&me(e),x=e[6]&&pe(e);return{c(){t=b("div"),n=b("div"),l=b("div"),r=b("div"),u=b("div"),a=b("h2"),s=B(e[0]),m=S(),p=b("div"),v=S(),w.c(),d=S(),k&&k.c(),_=S(),x&&x.c(),o(a,"class","text-2xl font-bold text-gray-800 mb-2"),o(p,"class","w-16 h-1 bg-gradient-to-r from-blue-500 to-purple-600 mx-auto rounded-full"),o(u,"class","text-center mb-8"),o(r,"class","bg-white p-8 rounded-2xl"),o(l,"class","bg-gradient-to-br from-blue-500 to-purple-600 p-1 rounded-2xl shadow-2xl"),o(n,"class","modal-content relative w-full max-w-md transform transition-all duration-300 ease-in-out scale-100 translate-y-0"),o(t,"class","fixed inset-0 flex items-center justify-center z-50 backdrop-blur-sm")},m(y,P){C(y,t,P),i(t,n),i(n,l),i(l,r),i(r,u),i(u,a),i(a,s),i(u,m),i(u,p),i(r,v),w.m(r,null),i(r,d),k&&k.m(r,null),i(r,_),x&&x.m(r,null)},p(y,P){P&1&&G(s,y[0]),h===(h=c(y))&&w?w.p(y,P):(w.d(1),w=h(y),w&&(w.c(),w.m(r,d))),y[5]?k?k.p(y,P):(k=me(y),k.c(),k.m(r,_)):k&&(k.d(1),k=null),y[6]?x?x.p(y,P):(x=pe(y),x.c(),x.m(r,null)):x&&(x.d(1),x=null)},d(y){y&&M(t),w.d(),k&&k.d(),x&&x.d()}}}function Be(e){let t,n,l,r,u,a,s,m,p,v,d,_,c,h,w,k,x,y,P=ce(e[2]),E=[];for(let g=0;g<P.length;g+=1)E[g]=de(ae(e,P,g));function X(g,I){return g[4]?Ke:Le}let J=X(e),A=J(e);return{c(){t=b("div"),n=b("label"),n.textContent="Masukkan Kode OTP",l=S(),r=b("p"),u=B("Kode OTP telah dikirim ke nomor "),a=B(e[1]),s=S(),m=b("div");for(let g=0;g<E.length;g+=1)E[g].c();p=S(),v=b("div"),d=b("button"),d.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
+                Ubah Nomor HP`,_=S(),c=b("button"),c.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"></path></svg>
+                Kirim Ulang Kode`,h=S(),w=b("button"),A.c(),o(n,"class","block text-sm font-medium text-gray-700 mb-2"),o(r,"class","text-xs text-gray-500 mb-4"),o(m,"class","flex justify-between mb-6"),o(d,"class","text-blue-600 hover:text-blue-800 hover:underline transition-colors flex items-center svelte-13xfqe0"),o(d,"aria-label","Ubah Nomor HP"),o(c,"class","text-blue-600 hover:text-blue-800 hover:underline transition-colors flex items-center svelte-13xfqe0"),o(c,"aria-label","Kirim Ulang Kode"),o(v,"class","flex justify-between text-sm"),o(t,"class","mb-6"),o(t,"id","otp-container"),w.disabled=k=e[4]||e[2].some(he),o(w,"class","w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white p-4 rounded-xl hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 transition-all duration-200 transform hover:-translate-y-1 disabled:opacity-70 disabled:transform-none svelte-13xfqe0")},m(g,I){C(g,t,I),i(t,n),i(t,l),i(t,r),i(r,u),i(r,a),i(t,s),i(t,m);for(let O=0;O<E.length;O+=1)E[O]&&E[O].m(m,null);i(t,p),i(t,v),i(v,d),i(v,_),i(v,c),C(g,h,I),C(g,w,I),A.m(w,null),x||(y=[z(d,"click",e[21]),z(c,"click",e[22]),z(w,"click",e[13])],x=!0)},p(g,I){if(I&2&&G(a,g[1]),I&23812){P=ce(g[2]);let O;for(O=0;O<P.length;O+=1){const f=ae(g,P,O);E[O]?E[O].p(f,I):(E[O]=de(f),E[O].c(),E[O].m(m,null))}for(;O<E.length;O+=1)E[O].d(1);E.length=P.length}J!==(J=X(g))&&(A.d(1),A=J(g),A&&(A.c(),A.m(w,null))),I&20&&k!==(k=g[4]||g[2].some(he))&&(w.disabled=k)},d(g){g&&(M(t),M(h),M(w)),ke(E,g),A.d(),x=!1,V(y)}}}function ze(e){let t,n,l,r,u,a,s,m,p;function v(c,h){return c[4]?qe:Ve}let d=v(e),_=d(e);return{c(){t=b("div"),n=b("label"),n.textContent="Nomor HP",l=S(),r=b("div"),u=b("input"),a=S(),s=b("button"),_.c(),o(n,"for","phone"),o(n,"class","block text-sm font-medium text-gray-700 mb-2"),o(u,"type","tel"),o(u,"id","phone"),o(u,"placeholder","Masukkan nomor HP Anda"),o(u,"class","w-full p-4 border-2 border-gray-200 rounded-xl focus:outline-none focus:border-blue-500 transition-all duration-200 svelte-13xfqe0"),o(r,"class","relative"),o(t,"class","mb-6"),o(t,"id","phone-container"),s.disabled=e[4],o(s,"class","w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white p-4 rounded-xl hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 transition-all duration-200 transform hover:-translate-y-1 disabled:opacity-70 disabled:transform-none svelte-13xfqe0")},m(c,h){C(c,t,h),i(t,n),i(t,l),i(t,r),i(r,u),re(u,e[1]),C(c,a,h),C(c,s,h),_.m(s,null),m||(p=[z(u,"input",e[17]),z(s,"click",e[9])],m=!0)},p(c,h){h&2&&re(u,c[1]),d!==(d=v(c))&&(_.d(1),_=d(c),_&&(_.c(),_.m(s,null))),h&16&&(s.disabled=c[4])},d(c){c&&(M(t),M(a),M(s)),_.d(),m=!1,V(p)}}}function de(e){let t,n,l,r,u,a,s,m,p;function v(...c){return e[18](e[26],...c)}function d(...c){return e[19](e[26],...c)}function _(){return e[20](e[26])}return{c(){t=b("div"),n=b("input"),r=S(),u=b("div"),s=S(),o(n,"type","text"),o(n,"id","otp-"+e[26]),o(n,"maxlength","1"),o(n,"inputmode","numeric"),n.value=l=e[24],o(n,"class","w-12 h-14 text-center text-xl font-bold border-2 border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 transition-all duration-200 svelte-13xfqe0"),o(u,"class",a="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-8 h-1 rounded-full transition-all duration-200 "+(e[8]===e[26]?"bg-blue-500":"bg-transparent")),o(t,"class","relative")},m(c,h){C(c,t,h),i(t,n),i(t,r),i(t,u),i(t,s),m||(p=[z(n,"input",v),z(n,"keydown",d),z(n,"paste",e[14]),z(n,"focus",_)],m=!0)},p(c,h){e=c,h&4&&l!==(l=e[24])&&n.value!==l&&(n.value=l),h&256&&a!==(a="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-8 h-1 rounded-full transition-all duration-200 "+(e[8]===e[26]?"bg-blue-500":"bg-transparent"))&&o(u,"class",a)},d(c){c&&M(t),m=!1,V(p)}}}function Le(e){let t;return{c(){t=B("Verifikasi")},m(n,l){C(n,t,l)},d(n){n&&M(t)}}}function Ke(e){let t;return{c(){t=b("div"),t.innerHTML=`<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                Memverifikasi...`,o(t,"class","flex items-center justify-center")},m(n,l){C(n,t,l)},d(n){n&&M(t)}}}function Ve(e){let t;return{c(){t=B("Kirim Kode OTP")},m(n,l){C(n,t,l)},d(n){n&&M(t)}}}function qe(e){let t;return{c(){t=b("div"),t.innerHTML=`<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+                Mengirim...`,o(t,"class","flex items-center justify-center")},m(n,l){C(n,t,l)},d(n){n&&M(t)}}}function me(e){let t,n,l,r,u,a;return{c(){t=b("div"),n=R("svg"),l=R("path"),r=S(),u=b("span"),a=B(e[5]),o(l,"fill-rule","evenodd"),o(l,"d","M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"),o(l,"clip-rule","evenodd"),o(n,"xmlns","http://www.w3.org/2000/svg"),o(n,"class","h-5 w-5 mr-2 flex-shrink-0"),o(n,"viewBox","0 0 20 20"),o(n,"fill","currentColor"),o(t,"class","mt-4 p-3 bg-red-50 border-l-4 border-red-500 text-red-700 rounded-md flex items-start")},m(s,m){C(s,t,m),i(t,n),i(n,l),i(t,r),i(t,u),i(u,a)},p(s,m){m&32&&G(a,s[5])},d(s){s&&M(t)}}}function pe(e){let t,n,l,r,u,a;return{c(){t=b("div"),n=R("svg"),l=R("path"),r=S(),u=b("span"),a=B(e[6]),o(l,"fill-rule","evenodd"),o(l,"d","M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"),o(l,"clip-rule","evenodd"),o(n,"xmlns","http://www.w3.org/2000/svg"),o(n,"class","h-5 w-5 mr-2 flex-shrink-0"),o(n,"viewBox","0 0 20 20"),o(n,"fill","currentColor"),o(t,"class","mt-4 p-3 bg-green-50 border-l-4 border-green-500 text-green-700 rounded-md flex items-start")},m(s,m){C(s,t,m),i(t,n),i(n,l),i(t,r),i(t,u),i(u,a)},p(s,m){m&64&&G(a,s[6])},d(s){s&&M(t)}}}function De(e){let t,n=e[7]&&fe(e);return{c(){n&&n.c(),t=ye()},m(l,r){n&&n.m(l,r),C(l,t,r)},p(l,[r]){l[7]?n?n.p(l,r):(n=fe(l),n.c(),n.m(t.parentNode,t)):n&&(n.d(1),n=null)},i:T,o:T,d(l){l&&M(t),n&&n.d(l)}}}function Q(e){const t=document.getElementById(e);t&&(t.classList.add("shake"),setTimeout(()=>{t.classList.remove("shake")},500))}const he=e=>e==="";function Ue(e,t,n){let{title:l="Verifikasi OTP"}=t,{vp_url:r=""}=t,{votp_url:u=""}=t,a="",s=["","","","",""],m=s.length,p=!1,v=!1,d="",_="",c=!0,h=0;localStorage.getItem("savedOtp")&&localStorage.getItem("savedPhoneNumber")&&(c=!1);async function w(){if(!a){n(5,d="Silakan masukkan nomor HP"),Q("phone-container");return}n(5,d=""),n(4,v=!0),(await(await fetch(r,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({phone:a})})).json()).exists?(n(4,v=!1),n(3,p=!0),n(6,_=`Kode OTP telah dikirim ke ${a}`),setTimeout(()=>{var H;(H=document.getElementById("otp-0"))==null||H.focus()},300)):(n(4,v=!1),n(5,d="Nomor HP tidak ditemukan"),Q("phone-container"))}function k(f,N){var K;const H=N.target.value;if(!/^\d*$/.test(H)){N.target.value=s[f];return}n(2,s[f]=H.slice(-1),s),H&&f<5&&((K=document.getElementById(`otp-${f+1}`))==null||K.focus(),n(8,h=f+1)),s.every(Y=>Y!=="")&&f===5&&P()}function x(f,N){var H;N.key==="Backspace"&&!s[f]&&f>0&&((H=document.getElementById(`otp-${f-1}`))==null||H.focus(),n(8,h=f-1))}function y(f){n(8,h=f)}async function P(){const f=s.join("");if(f.length!==s.length){n(5,d="Silakan masukkan kode OTP "+s.length+" digit"),Q("otp-container");return}if(n(5,d=""),n(4,v=!0),(await(await fetch(u,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({phone:a,otp:f})})).json()).status=="success"){n(4,v=!1),n(6,_="Verifikasi berhasil!");const K=document.querySelector(".modal-content");K&&K.classList.add("success-animation"),n(7,c=!1),localStorage.setItem("savedOtp",f),localStorage.setItem("savedPhoneNumber",a)}else n(4,v=!1),n(5,d="Kode OTP tidak valid"),Q("otp-container")}function E(f){var Y;f.preventDefault();const N=f.clipboardData.getData("text");if(!/^\d+$/.test(N))return;const H=N.slice(0,m).split("");H.forEach((Re,_e)=>{_e<m&&n(2,s[_e]=Re,s)});const K=Math.min(H.length,5);(Y=document.getElementById(`otp-${K}`))==null||Y.focus(),n(8,h=K),H.length===m&&P()}function X(){a=this.value,n(1,a)}const J=(f,N)=>k(f,N),A=(f,N)=>x(f,N),g=f=>y(f),I=()=>{n(3,p=!1),n(6,_="")},O=()=>{n(6,_=""),w()};return e.$$set=f=>{"title"in f&&n(0,l=f.title),"vp_url"in f&&n(15,r=f.vp_url),"votp_url"in f&&n(16,u=f.votp_url)},[l,a,s,p,v,d,_,c,h,w,k,x,y,P,E,r,u,X,J,A,g,I,O]}class Je extends je{constructor(t){super(),Ie(this,t,Ue,De,ve,{title:0,vp_url:15,votp_url:16})}}const W=document.getElementById("otp-widget"),be=W.getAttribute("reqotp"),ge=W.getAttribute("verifyotp"),Fe=W.getAttribute("title")||"Verifikasi OTP";return console.log(be,ge),new Je({target:W,props:{vp_url:be,votp_url:ge,title:Fe}})});

package/dist/assets/style.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.-bottom-2{bottom:-.5rem}.left-1\/2{left:50%}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.-ml-1{margin-left:-.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.hidden{display:none}.h-1{height:.25rem}.h-14{height:3.5rem}.h-4{height:1rem}.h-5{height:1.25rem}.w-12{width:3rem}.w-16{width:4rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-full{width:100%}.max-w-md{max-width:28rem}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border-2{border-width:2px}.border-l-4{border-left-width:4px}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-green-50{--tw-bg-opacity: 1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-purple-600{--tw-gradient-to: #9333ea var(--tw-gradient-to-position)}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-8{padding:2rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-green-700{--tw-text-opacity: 1;color:rgb(21 128 61 / var(--tw-text-opacity, 1))}.text-red-700{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}.success-animation{animation:success-pulse 1.5s ease-in-out}.hover\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:text-blue-800:hover{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-lg:hover{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-blue-300:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}.disabled\:transform-none:disabled{transform:none}.disabled\:opacity-70:disabled{opacity:.7}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:#f9fafb}@keyframes svelte-13xfqe0-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes svelte-13xfqe0-success-pulse{0%,to{transform:scale(1);box-shadow:0 0 #4fd1c500}50%{transform:scale(1.03);box-shadow:0 0 20px #4fd1c580}}input[type=text].svelte-13xfqe0,input[type=tel].svelte-13xfqe0{transition:border-color .2s ease}button.svelte-13xfqe0{position:relative;overflow:hidden}button.svelte-13xfqe0:after{content:"";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgba(255,255,255,.5);opacity:0;border-radius:100%;transform:scale(1) translate(-50%);transform-origin:50% 50%}@keyframes svelte-13xfqe0-ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(20);opacity:0}}button.svelte-13xfqe0:focus:not(:active):after{animation:svelte-13xfqe0-ripple 1s ease-out}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "dripsender-otp-widget",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A customizable OTP verification widget for Dripsender",
+  "main": "dist/assets/index.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "otp",
+    "verification",
+    "svelte",
+    "dripsender",
+    "widget"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yourusername/dripsender-otp.git"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^2.4.6",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "svelte": "^4.2.12",
+    "tailwindcss": "^3.4.17",
+    "vite": "^4.5.13"
+  }
+}