@inpulse-ui/otc 3.0.0 → 3.0.1

package/dist/index.js

@@ -1 +1 @@
-"use strict";var P=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var X=Object.prototype.hasOwnProperty;var Y=(t,s)=>{for(var i in s)P(t,i,{get:s[i],enumerable:!0})},_=(t,s,i,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let n of W(s))!X.call(t,n)&&n!==i&&P(t,n,{get:()=>s[n],enumerable:!(l=Q(s,n))||l.enumerable});return t};var j=t=>_(P({},"__esModule",{value:!0}),t);var le={};Y(le,{OTC:()=>ae,OneTimeCode:()=>$,Otc:()=>re});module.exports=j(le);var E=require("react");var D=require("react"),V=require("react-hook-form"),M=require("react/jsx-runtime");function ee(t){return t&&(t.value===""||t.value===void 0)}function A(t){return t&&t.value!==""&&t.value!==void 0}function b(t){if(t){let{length:s}=t.value,i=t.value!==""&&t.value!==void 0;t.focus(),t.setSelectionRange&&t.setSelectionRange(i?0:s,s)}}var H=(0,D.forwardRef)((t,s)=>{let{className:i,index:l,slotsRef:n,label:y,length:o,name:h,autoSubmit:S,onComplete:g}=t,{register:T,setValue:I}=(0,V.useFormContext)(),x=`${h}.${l}`,C=l===0,{ref:k,...K}=T(x),f=()=>n.current[l],d=()=>n.current[l-1],v=()=>n.current[l+1];function O(a){let e=a===1,r=[],p=e?o-l:l+1;return[...Array(p)].forEach((z,c)=>{let m=e?l+c:l-c,u=n.current[m];ee(u)&&r.push(u)}),r[e?0:r.length-1]}function w(){let a=0;return n.current.forEach((e,r)=>{A(e)&&(a+=1)}),a}function L(){if(S){let e=n.current[l]?.closest("form");e&&e.requestSubmit()}g&&g()}function U(){let a=f();b(a)}function q(){if(w()>0)return!1;let a=O(-1);return b(a),!1}function B(a){let e=a.clipboardData?.getData("text/plain");if(e){e=e.replace(/[^0-9]+/g,""),e=e.substring(0,o-l);let r=e.split("");if(I(h,r),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),w()===o)L();else{let p=O(1);p&&setTimeout(()=>p.focus(),0)}}}function Z(a){let e,{key:r}=a,{ctrlKey:p,metaKey:z,shiftKey:c}=a,m=!p&&!z&&!c&&r.match(/^[A-Za-z0-9]$/),{value:u}=a.currentTarget;r==="Backspace"||r==="Delete"?u?(e=f(),e&&(e.value="")):(e=d(),e&&(e.value="",e.focus())):r==="Enter"?w()===o&&(document.activeElement instanceof HTMLElement&&document.activeElement.blur(),L()):r==="Escape"?document.activeElement instanceof HTMLElement&&document.activeElement.blur():m&&(r=r.replace(/[^0-9]+/g,""),r.length||a.preventDefault())}function J(a){let e,{key:r}=a,{ctrlKey:p,metaKey:z,shiftKey:c}=a,m=!p&&!z&&!c&&r?.match(/^[0-9]$/),{value:u}=a.currentTarget;r==="ArrowLeft"||r==="PageUp"||r==="ArrowRight"||r==="PageDown"?(r==="ArrowLeft"||r==="PageUp"?e=d():e=v(),b(e||f())):m&&(A(a.currentTarget)&&l<o-1?(e=v(),b(e)):u&&l===o-1&&(w()===o?(e=f(),e&&e.blur(),L()):(e=O(-1),e&&e.focus())))}return(0,M.jsx)("div",{style:{width:`calc(100% / ${o})`},children:(0,M.jsx)("input",{...K,id:x,ref:a=>{k(a),typeof s=="function"?s(a):s&&(s.current=a),n.current[l]=a},type:"tel",className:i,pattern:"[0-9]",defaultValue:"",autoComplete:C?"one-time-code":"off","aria-label":`${y||"Code Number"} ${l}`,maxLength:1,onClick:U,onFocus:q,onPaste:B,onKeyDown:Z,onKeyUp:J})})});H.displayName="OneTimeCodeSlot";var F=require("tailwind-variants"),te=(0,F.tv)({slots:{base:"relative",icon:"absolute text-slate-400 dark:text-zinc-500 cursor-pointer",input:["appearance-none","outline-0","focus:outline-hidden","bg-white","dark:bg-zinc-900","text-slate-900","caret-slate-500","dark:caret-zinc-500","dark:text-zinc-100","text-fill-slate-900","dark:text-fill-white","border-slate-300","dark:border-zinc-600","transition","placeholder:text-fill-slate-400","placeholder:dark:text-fill-zinc-400","placeholder:opacity-0","placeholder:transition-opacity","placeholder:duration-200","focus:placeholder:opacity-100","disabled:cursor-not-allowed","disabled:opacity-50","disabled:bg-black/5","peer"],label:["absolute","dark:bg-zinc-900","pointer-events-none","text-slate-400","dark:text-zinc-400","duration-200","rounded-sm","transform","origin-[0]","scale-[0.65]","translate-x-1","peer-placeholder-shown:-translate-y-0","peer-placeholder-shown:translate-x-0","peer-placeholder-shown:scale-100","peer-placeholder-shown:text-slate-600","dark:peer-placeholder-shown:text-zinc-300","peer-focus:translate-x-1","peer-focus:scale-[0.65]","peer-focus:text-slate-400","dark:peer-focus:text-zinc-400","peer-disabled:opacity-35"]},variants:{isOTC:{true:{base:"flex",input:"text-center mx-1"}},size:{sm:{input:["pt-2","pb-1.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-5","peer-focus:-translate-y-5"],icon:["h-8","w-8","px-1.5","top-[0.15rem]","right-0.5"]},md:{input:["pt-2","pb-1.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"],icon:["h-11","w-11","px-2.5","-top-[0.1rem]","right-0.5"]},lg:{input:["pt-3","pb-2.5","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-[1.675rem]","peer-focus:-translate-y-[1.675rem]"],icon:["h-12","w-12","px-2.5","top-0","right-1"]}},variant:{default:{},rift:{label:"bg-white peer-disabled:bg-transparent"},line:{input:["border-b","shadow-none"]},ghost:{},raw:{input:["placeholder:opacity-100"],label:["!translate-x-0","!translate-y-0","!scale-100","peer-focus:!translate-x-0","peer-focus:!translate-y-0","peer-focus:!scale-100","peer-focus:opacity-0","peer-placeholder-shown:opacity-100","opacity-0"]}},rows:{true:{label:"bg-white"}}},compoundSlots:[{slots:["input","label"],size:"sm",class:"text-sm"},{slots:["input","label"],size:"md",class:"text-base"},{slots:["input","label"],size:"lg",isOTC:!0,class:"text-lg"}],compoundVariants:[{variant:["default","rift","raw"],class:{input:["border","rounded-sm","shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px white !important]","dark:shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px rgb(24 24 27) !important]"]}},{variant:["ghost","line"],class:{input:["disabled:bg-transparent"]}},{size:"sm",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-2","peer-focus:-translate-y-2"]}},{size:"sm",raw:!0,class:{input:["pt-[0.4375rem]","pb-[0.4375rem]","pl-[0.6875rem]","pr-[1.125rem]"]}},{size:"md",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"md",raw:!0,class:{input:["pt-[0.4375rem]","pb-2","pl-[0.9375rem]"]}},{size:"lg",variant:["default","ghost"],class:{input:["text-base","pt-[1.125rem]","pb-1","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"lg",raw:!0,class:{input:["pt-[0.6875rem]","pb-[0.6875rem]","pl-[0.9375rem]","pr-[0.9375rem]"]}},{size:"sm",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.125rem]","peer-focus:-translate-y-[1.125rem]"]}},{size:"md",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-5","peer-focus:-translate-y-5"]}},{size:"lg",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"]}},{size:"sm",type:"password",class:{input:"pr-10"}},{size:"md",type:"password",class:{input:"pr-13"}},{size:"lg",type:"password",class:{input:"pr-13"}},{size:"sm",isOTC:!0,class:{input:"w-8 p-1.5 pt-2 px-0"}},{size:"md",isOTC:!0,class:{input:"text-lg w-9 p-2 pt-2 pb-1.5"}},{size:"lg",isOTC:!0,class:{input:"w-10 p-2 pt-2.5"}},{rows:!0,variant:"default",class:{label:["rounded-tr-none"]}},{size:"sm",rows:!0,variant:"default",class:{label:["pr-4","-translate-y-[0.65rem]","peer-focus:pr-4","peer-focus:-translate-y-[0.65rem]"]}},{size:"md",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.7rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.7rem]"]}},{size:"lg",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.95rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.95rem]"]}}],defaultVariants:{disabled:!1,isOTC:!1,size:"md",type:"text",variant:"default",rows:!1}}),G=te;var N=require("react/jsx-runtime"),$=(0,E.forwardRef)((t,s)=>{let{className:i,disabled:l=!1,label:n="Input",length:y=6,name:o="input",size:h,autoSubmit:S=!1,onComplete:g,variant:T="default",...I}=t,x=(0,E.useRef)([]),C={disabled:l,isOTC:!0,size:h,variant:T},{base:k,input:K}=G(C);return o?(0,N.jsx)("div",{ref:s,className:k(),children:[...Array(y)].map((f,d)=>{let v=`${o}-otc-slot-${d}`;return(0,N.jsx)(H,{name:o,slotsRef:x,className:K({class:i}),index:d,label:n,length:y,autoSubmit:S,onComplete:g},v)})}):(console&&console.log('The "OneTimeCode" component cannot be rendered. Missing "name".'),null)}),ae=$,re=$;0&&(module.exports={OTC,OneTimeCode,Otc});
+"use strict";var P=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var X=Object.prototype.hasOwnProperty;var Y=(t,l)=>{for(var i in l)P(t,i,{get:l[i],enumerable:!0})},_=(t,l,i,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let n of W(l))!X.call(t,n)&&n!==i&&P(t,n,{get:()=>l[n],enumerable:!(s=Q(l,n))||s.enumerable});return t};var j=t=>_(P({},"__esModule",{value:!0}),t);var se={};Y(se,{OTC:()=>ae,OneTimeCode:()=>$,Otc:()=>re});module.exports=j(se);var E=require("react");var D=require("react"),V=require("react-hook-form"),M=require("react/jsx-runtime");function ee(t){return t&&(t.value===""||t.value===void 0)}function A(t){return t&&t.value!==""&&t.value!==void 0}function b(t){if(t){let{length:l}=t.value,i=t.value!==""&&t.value!==void 0;t.focus(),t.setSelectionRange&&t.setSelectionRange(i?0:l,l)}}var H=(0,D.forwardRef)((t,l)=>{let{className:i,index:s,slotsRef:n,label:y,length:o,name:g,autoSubmit:S,onComplete:h}=t,{register:T,setValue:I}=(0,V.useFormContext)(),x=`${g}.${s}`,C=s===0,{ref:k,...K}=T(x),f=()=>n.current[s],d=()=>n.current[s-1],v=()=>n.current[s+1];function O(a){let e=a===1,r=[],p=e?o-s:s+1;return[...Array(p)].forEach((z,c)=>{let m=e?s+c:s-c,u=n.current[m];ee(u)&&r.push(u)}),r[e?0:r.length-1]}function w(){let a=0;return n.current.forEach((e,r)=>{A(e)&&(a+=1)}),a}function L(){if(S){let e=n.current[s]?.closest("form");e&&e.requestSubmit()}h&&h()}function U(){let a=f();b(a)}function q(){if(w()>0)return!1;let a=O(-1);return b(a),!1}function B(a){let e=a.clipboardData?.getData("text/plain");if(e){e=e.replace(/[^0-9]+/g,""),e=e.substring(0,o-s);let r=e.split("");if(I(g,r),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),w()===o)L();else{let p=O(1);p&&setTimeout(()=>p.focus(),0)}}}function Z(a){let e,{key:r}=a,{ctrlKey:p,metaKey:z,shiftKey:c}=a,m=!p&&!z&&!c&&r.match(/^[A-Za-z0-9]$/),{value:u}=a.currentTarget;r==="Backspace"||r==="Delete"?u?(e=f(),e&&(e.value="")):(e=d(),e&&(e.value="",e.focus())):r==="Enter"?w()===o&&(document.activeElement instanceof HTMLElement&&document.activeElement.blur(),L()):r==="Escape"?document.activeElement instanceof HTMLElement&&document.activeElement.blur():m&&(r=r.replace(/[^0-9]+/g,""),r.length||a.preventDefault())}function J(a){let e,{key:r}=a,{ctrlKey:p,metaKey:z,shiftKey:c}=a,m=!p&&!z&&!c&&r?.match(/^[0-9]$/),{value:u}=a.currentTarget;r==="ArrowLeft"||r==="PageUp"||r==="ArrowRight"||r==="PageDown"?(r==="ArrowLeft"||r==="PageUp"?e=d():e=v(),b(e||f())):m&&(A(a.currentTarget)&&s<o-1?(e=v(),b(e)):u&&s===o-1&&(w()===o?(e=f(),e&&e.blur(),L()):(e=O(-1),e&&e.focus())))}return(0,M.jsx)("div",{style:{width:`calc(100% / ${o})`},children:(0,M.jsx)("input",{...K,id:x,ref:a=>{k(a),typeof l=="function"?l(a):l&&(l.current=a),n.current[s]=a},type:"tel",className:i,pattern:"[0-9]",defaultValue:"",autoComplete:C?"one-time-code":"off","aria-label":`${y||"Code Number"} ${s}`,maxLength:1,onClick:U,onFocus:q,onPaste:B,onKeyDown:Z,onKeyUp:J})})});H.displayName="OneTimeCodeSlot";var F=require("tailwind-variants"),te=(0,F.tv)({slots:{base:"relative",icon:"absolute text-slate-400 dark:text-zinc-500 cursor-pointer",input:["appearance-none","outline-0","focus:outline-hidden","bg-white","dark:bg-zinc-900","text-slate-900","caret-slate-500","dark:caret-zinc-500","dark:text-zinc-100","text-fill-slate-900","dark:text-fill-white","border-slate-300","dark:border-zinc-600","transition","placeholder:text-fill-slate-400","placeholder:dark:text-fill-zinc-400","placeholder:opacity-0","placeholder:transition-opacity","placeholder:duration-200","focus:placeholder:opacity-100","disabled:cursor-not-allowed","disabled:opacity-50","disabled:bg-black/5","peer"],label:["absolute","dark:bg-zinc-900","pointer-events-none","text-slate-400","dark:text-zinc-400","duration-200","rounded-sm","transform","origin-[0]","scale-[0.65]","translate-x-1","peer-placeholder-shown:-translate-y-0","peer-placeholder-shown:translate-x-0","peer-placeholder-shown:scale-100","peer-placeholder-shown:text-slate-600","dark:peer-placeholder-shown:text-zinc-300","peer-focus:translate-x-1","peer-focus:scale-[0.65]","peer-focus:text-slate-400","dark:peer-focus:text-zinc-400","peer-disabled:opacity-35"]},variants:{isOTC:{true:{base:"flex gap-1",input:"text-center"}},size:{sm:{input:["pt-2","pb-1.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-5","peer-focus:-translate-y-5"],icon:["h-8","w-8","px-1.5","top-[0.15rem]","right-0.5"]},md:{input:["pt-2","pb-1.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"],icon:["h-11","w-11","px-2.5","-top-[0.1rem]","right-0.5"]},lg:{input:["pt-3","pb-2.5","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-[1.675rem]","peer-focus:-translate-y-[1.675rem]"],icon:["h-12","w-12","px-2.5","top-0","right-1"]}},variant:{default:{},rift:{label:"bg-white peer-disabled:bg-transparent"},line:{input:["border-b","shadow-none"]},ghost:{},raw:{input:["placeholder:opacity-100"],label:["!translate-x-0","!translate-y-0","!scale-100","peer-focus:!translate-x-0","peer-focus:!translate-y-0","peer-focus:!scale-100","peer-focus:opacity-0","peer-placeholder-shown:opacity-100","opacity-0"]}},rows:{true:{label:"bg-white"}}},compoundSlots:[{slots:["input","label"],size:"sm",class:"text-sm"},{slots:["input","label"],size:"md",class:"text-base"},{slots:["input","label"],size:"lg",isOTC:!0,class:"text-lg"}],compoundVariants:[{variant:["default","rift","raw"],class:{input:["border","rounded-sm","shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px white !important]","dark:shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px rgb(24 24 27) !important]"]}},{variant:["ghost","line"],class:{input:["disabled:bg-transparent"]}},{size:"sm",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-2","peer-focus:-translate-y-2"]}},{size:"sm",raw:!0,class:{input:["pt-[0.4375rem]","pb-[0.4375rem]","pl-[0.6875rem]","pr-[1.125rem]"]}},{size:"md",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"md",raw:!0,class:{input:["pt-[0.4375rem]","pb-2","pl-[0.9375rem]"]}},{size:"lg",variant:["default","ghost"],class:{input:["text-base","pt-[1.125rem]","pb-1","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"lg",raw:!0,class:{input:["pt-[0.6875rem]","pb-[0.6875rem]","pl-[0.9375rem]","pr-[0.9375rem]"]}},{size:"sm",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.125rem]","peer-focus:-translate-y-[1.125rem]"]}},{size:"md",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-5","peer-focus:-translate-y-5"]}},{size:"lg",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"]}},{size:"sm",type:"password",class:{input:"pr-10"}},{size:"md",type:"password",class:{input:"pr-13"}},{size:"lg",type:"password",class:{input:"pr-13"}},{size:"sm",isOTC:!0,class:{base:"gap-0.75",input:"w-8 p-1.5 pt-2 px-0"}},{size:"md",isOTC:!0,class:{base:"gap-1",input:"text-lg w-9 p-2 pt-2 pb-1.5"}},{size:"lg",isOTC:!0,class:{base:"gap-1.5",input:"w-10 p-2 pt-2.5"}},{rows:!0,variant:"default",class:{label:["rounded-tr-none"]}},{size:"sm",rows:!0,variant:"default",class:{label:["pr-4","-translate-y-[0.65rem]","peer-focus:pr-4","peer-focus:-translate-y-[0.65rem]"]}},{size:"md",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.7rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.7rem]"]}},{size:"lg",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.95rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.95rem]"]}}],defaultVariants:{disabled:!1,isOTC:!1,size:"md",type:"text",variant:"default",rows:!1}}),G=te;var N=require("react/jsx-runtime"),$=(0,E.forwardRef)((t,l)=>{let{className:i,disabled:s=!1,label:n="Input",length:y=6,name:o="input",size:g,autoSubmit:S=!1,onComplete:h,variant:T="default",...I}=t,x=(0,E.useRef)([]),C={disabled:s,isOTC:!0,size:g,variant:T},{base:k,input:K}=G(C);return o?(0,N.jsx)("div",{ref:l,className:k(),children:[...Array(y)].map((f,d)=>{let v=`${o}-otc-slot-${d}`;return(0,N.jsx)(H,{name:o,slotsRef:x,className:K({class:i}),index:d,label:n,length:y,autoSubmit:S,onComplete:h},v)})}):(console&&console.log('The "OneTimeCode" component cannot be rendered. Missing "name".'),null)}),ae=$,re=$;0&&(module.exports={OTC,OneTimeCode,Otc});

package/dist/index.m.js

@@ -1 +1 @@
-import{forwardRef as W,useRef as X}from"react";import{forwardRef as q}from"react";import{useFormContext as B}from"react-hook-form";import{jsx as N}from"react/jsx-runtime";function Z(r){return r&&(r.value===""||r.value===void 0)}function H(r){return r&&r.value!==""&&r.value!==void 0}function b(r){if(r){let{length:n}=r.value,u=r.value!==""&&r.value!==void 0;r.focus(),r.setSelectionRange&&r.setSelectionRange(u?0:n,n)}}var M=q((r,n)=>{let{className:u,index:l,slotsRef:o,label:y,length:s,name:h,autoSubmit:E,onComplete:g}=r,{register:S,setValue:R}=B(),x=`${h}.${l}`,T=l===0,{ref:C,...k}=S(x),f=()=>o.current[l],d=()=>o.current[l-1],v=()=>o.current[l+1];function K(t){let e=t===1,a=[],i=e?s-l:l+1;return[...Array(i)].forEach((z,p)=>{let m=e?l+p:l-p,c=o.current[m];Z(c)&&a.push(c)}),a[e?0:a.length-1]}function w(){let t=0;return o.current.forEach((e,a)=>{H(e)&&(t+=1)}),t}function O(){if(E){let e=o.current[l]?.closest("form");e&&e.requestSubmit()}g&&g()}function D(){let t=f();b(t)}function V(){if(w()>0)return!1;let t=K(-1);return b(t),!1}function F(t){let e=t.clipboardData?.getData("text/plain");if(e){e=e.replace(/[^0-9]+/g,""),e=e.substring(0,s-l);let a=e.split("");if(R(h,a),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),w()===s)O();else{let i=K(1);i&&setTimeout(()=>i.focus(),0)}}}function G(t){let e,{key:a}=t,{ctrlKey:i,metaKey:z,shiftKey:p}=t,m=!i&&!z&&!p&&a.match(/^[A-Za-z0-9]$/),{value:c}=t.currentTarget;a==="Backspace"||a==="Delete"?c?(e=f(),e&&(e.value="")):(e=d(),e&&(e.value="",e.focus())):a==="Enter"?w()===s&&(document.activeElement instanceof HTMLElement&&document.activeElement.blur(),O()):a==="Escape"?document.activeElement instanceof HTMLElement&&document.activeElement.blur():m&&(a=a.replace(/[^0-9]+/g,""),a.length||t.preventDefault())}function U(t){let e,{key:a}=t,{ctrlKey:i,metaKey:z,shiftKey:p}=t,m=!i&&!z&&!p&&a?.match(/^[0-9]$/),{value:c}=t.currentTarget;a==="ArrowLeft"||a==="PageUp"||a==="ArrowRight"||a==="PageDown"?(a==="ArrowLeft"||a==="PageUp"?e=d():e=v(),b(e||f())):m&&(H(t.currentTarget)&&l<s-1?(e=v(),b(e)):c&&l===s-1&&(w()===s?(e=f(),e&&e.blur(),O()):(e=K(-1),e&&e.focus())))}return N("div",{style:{width:`calc(100% / ${s})`},children:N("input",{...k,id:x,ref:t=>{C(t),typeof n=="function"?n(t):n&&(n.current=t),o.current[l]=t},type:"tel",className:u,pattern:"[0-9]",defaultValue:"",autoComplete:T?"one-time-code":"off","aria-label":`${y||"Code Number"} ${l}`,maxLength:1,onClick:D,onFocus:V,onPaste:F,onKeyDown:G,onKeyUp:U})})});M.displayName="OneTimeCodeSlot";import{tv as J}from"tailwind-variants";var Q=J({slots:{base:"relative",icon:"absolute text-slate-400 dark:text-zinc-500 cursor-pointer",input:["appearance-none","outline-0","focus:outline-hidden","bg-white","dark:bg-zinc-900","text-slate-900","caret-slate-500","dark:caret-zinc-500","dark:text-zinc-100","text-fill-slate-900","dark:text-fill-white","border-slate-300","dark:border-zinc-600","transition","placeholder:text-fill-slate-400","placeholder:dark:text-fill-zinc-400","placeholder:opacity-0","placeholder:transition-opacity","placeholder:duration-200","focus:placeholder:opacity-100","disabled:cursor-not-allowed","disabled:opacity-50","disabled:bg-black/5","peer"],label:["absolute","dark:bg-zinc-900","pointer-events-none","text-slate-400","dark:text-zinc-400","duration-200","rounded-sm","transform","origin-[0]","scale-[0.65]","translate-x-1","peer-placeholder-shown:-translate-y-0","peer-placeholder-shown:translate-x-0","peer-placeholder-shown:scale-100","peer-placeholder-shown:text-slate-600","dark:peer-placeholder-shown:text-zinc-300","peer-focus:translate-x-1","peer-focus:scale-[0.65]","peer-focus:text-slate-400","dark:peer-focus:text-zinc-400","peer-disabled:opacity-35"]},variants:{isOTC:{true:{base:"flex",input:"text-center mx-1"}},size:{sm:{input:["pt-2","pb-1.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-5","peer-focus:-translate-y-5"],icon:["h-8","w-8","px-1.5","top-[0.15rem]","right-0.5"]},md:{input:["pt-2","pb-1.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"],icon:["h-11","w-11","px-2.5","-top-[0.1rem]","right-0.5"]},lg:{input:["pt-3","pb-2.5","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-[1.675rem]","peer-focus:-translate-y-[1.675rem]"],icon:["h-12","w-12","px-2.5","top-0","right-1"]}},variant:{default:{},rift:{label:"bg-white peer-disabled:bg-transparent"},line:{input:["border-b","shadow-none"]},ghost:{},raw:{input:["placeholder:opacity-100"],label:["!translate-x-0","!translate-y-0","!scale-100","peer-focus:!translate-x-0","peer-focus:!translate-y-0","peer-focus:!scale-100","peer-focus:opacity-0","peer-placeholder-shown:opacity-100","opacity-0"]}},rows:{true:{label:"bg-white"}}},compoundSlots:[{slots:["input","label"],size:"sm",class:"text-sm"},{slots:["input","label"],size:"md",class:"text-base"},{slots:["input","label"],size:"lg",isOTC:!0,class:"text-lg"}],compoundVariants:[{variant:["default","rift","raw"],class:{input:["border","rounded-sm","shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px white !important]","dark:shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px rgb(24 24 27) !important]"]}},{variant:["ghost","line"],class:{input:["disabled:bg-transparent"]}},{size:"sm",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-2","peer-focus:-translate-y-2"]}},{size:"sm",raw:!0,class:{input:["pt-[0.4375rem]","pb-[0.4375rem]","pl-[0.6875rem]","pr-[1.125rem]"]}},{size:"md",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"md",raw:!0,class:{input:["pt-[0.4375rem]","pb-2","pl-[0.9375rem]"]}},{size:"lg",variant:["default","ghost"],class:{input:["text-base","pt-[1.125rem]","pb-1","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"lg",raw:!0,class:{input:["pt-[0.6875rem]","pb-[0.6875rem]","pl-[0.9375rem]","pr-[0.9375rem]"]}},{size:"sm",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.125rem]","peer-focus:-translate-y-[1.125rem]"]}},{size:"md",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-5","peer-focus:-translate-y-5"]}},{size:"lg",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"]}},{size:"sm",type:"password",class:{input:"pr-10"}},{size:"md",type:"password",class:{input:"pr-13"}},{size:"lg",type:"password",class:{input:"pr-13"}},{size:"sm",isOTC:!0,class:{input:"w-8 p-1.5 pt-2 px-0"}},{size:"md",isOTC:!0,class:{input:"text-lg w-9 p-2 pt-2 pb-1.5"}},{size:"lg",isOTC:!0,class:{input:"w-10 p-2 pt-2.5"}},{rows:!0,variant:"default",class:{label:["rounded-tr-none"]}},{size:"sm",rows:!0,variant:"default",class:{label:["pr-4","-translate-y-[0.65rem]","peer-focus:pr-4","peer-focus:-translate-y-[0.65rem]"]}},{size:"md",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.7rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.7rem]"]}},{size:"lg",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.95rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.95rem]"]}}],defaultVariants:{disabled:!1,isOTC:!1,size:"md",type:"text",variant:"default",rows:!1}}),$=Q;import{jsx as I}from"react/jsx-runtime";var A=W((r,n)=>{let{className:u,disabled:l=!1,label:o="Input",length:y=6,name:s="input",size:h,autoSubmit:E=!1,onComplete:g,variant:S="default",...R}=r,x=X([]),T={disabled:l,isOTC:!0,size:h,variant:S},{base:C,input:k}=$(T);return s?I("div",{ref:n,className:C(),children:[...Array(y)].map((f,d)=>{let v=`${s}-otc-slot-${d}`;return I(M,{name:s,slotsRef:x,className:k({class:u}),index:d,label:o,length:y,autoSubmit:E,onComplete:g},v)})}):(console&&console.log('The "OneTimeCode" component cannot be rendered. Missing "name".'),null)}),ce=A,ue=A;export{ce as OTC,A as OneTimeCode,ue as Otc};
+import{forwardRef as W,useRef as X}from"react";import{forwardRef as q}from"react";import{useFormContext as B}from"react-hook-form";import{jsx as N}from"react/jsx-runtime";function Z(r){return r&&(r.value===""||r.value===void 0)}function H(r){return r&&r.value!==""&&r.value!==void 0}function b(r){if(r){let{length:n}=r.value,u=r.value!==""&&r.value!==void 0;r.focus(),r.setSelectionRange&&r.setSelectionRange(u?0:n,n)}}var M=q((r,n)=>{let{className:u,index:s,slotsRef:o,label:y,length:l,name:g,autoSubmit:E,onComplete:h}=r,{register:S,setValue:R}=B(),x=`${g}.${s}`,T=s===0,{ref:C,...k}=S(x),f=()=>o.current[s],d=()=>o.current[s-1],v=()=>o.current[s+1];function K(t){let e=t===1,a=[],i=e?l-s:s+1;return[...Array(i)].forEach((z,p)=>{let m=e?s+p:s-p,c=o.current[m];Z(c)&&a.push(c)}),a[e?0:a.length-1]}function w(){let t=0;return o.current.forEach((e,a)=>{H(e)&&(t+=1)}),t}function O(){if(E){let e=o.current[s]?.closest("form");e&&e.requestSubmit()}h&&h()}function D(){let t=f();b(t)}function V(){if(w()>0)return!1;let t=K(-1);return b(t),!1}function F(t){let e=t.clipboardData?.getData("text/plain");if(e){e=e.replace(/[^0-9]+/g,""),e=e.substring(0,l-s);let a=e.split("");if(R(g,a),document.activeElement instanceof HTMLElement&&document.activeElement.blur(),w()===l)O();else{let i=K(1);i&&setTimeout(()=>i.focus(),0)}}}function G(t){let e,{key:a}=t,{ctrlKey:i,metaKey:z,shiftKey:p}=t,m=!i&&!z&&!p&&a.match(/^[A-Za-z0-9]$/),{value:c}=t.currentTarget;a==="Backspace"||a==="Delete"?c?(e=f(),e&&(e.value="")):(e=d(),e&&(e.value="",e.focus())):a==="Enter"?w()===l&&(document.activeElement instanceof HTMLElement&&document.activeElement.blur(),O()):a==="Escape"?document.activeElement instanceof HTMLElement&&document.activeElement.blur():m&&(a=a.replace(/[^0-9]+/g,""),a.length||t.preventDefault())}function U(t){let e,{key:a}=t,{ctrlKey:i,metaKey:z,shiftKey:p}=t,m=!i&&!z&&!p&&a?.match(/^[0-9]$/),{value:c}=t.currentTarget;a==="ArrowLeft"||a==="PageUp"||a==="ArrowRight"||a==="PageDown"?(a==="ArrowLeft"||a==="PageUp"?e=d():e=v(),b(e||f())):m&&(H(t.currentTarget)&&s<l-1?(e=v(),b(e)):c&&s===l-1&&(w()===l?(e=f(),e&&e.blur(),O()):(e=K(-1),e&&e.focus())))}return N("div",{style:{width:`calc(100% / ${l})`},children:N("input",{...k,id:x,ref:t=>{C(t),typeof n=="function"?n(t):n&&(n.current=t),o.current[s]=t},type:"tel",className:u,pattern:"[0-9]",defaultValue:"",autoComplete:T?"one-time-code":"off","aria-label":`${y||"Code Number"} ${s}`,maxLength:1,onClick:D,onFocus:V,onPaste:F,onKeyDown:G,onKeyUp:U})})});M.displayName="OneTimeCodeSlot";import{tv as J}from"tailwind-variants";var Q=J({slots:{base:"relative",icon:"absolute text-slate-400 dark:text-zinc-500 cursor-pointer",input:["appearance-none","outline-0","focus:outline-hidden","bg-white","dark:bg-zinc-900","text-slate-900","caret-slate-500","dark:caret-zinc-500","dark:text-zinc-100","text-fill-slate-900","dark:text-fill-white","border-slate-300","dark:border-zinc-600","transition","placeholder:text-fill-slate-400","placeholder:dark:text-fill-zinc-400","placeholder:opacity-0","placeholder:transition-opacity","placeholder:duration-200","focus:placeholder:opacity-100","disabled:cursor-not-allowed","disabled:opacity-50","disabled:bg-black/5","peer"],label:["absolute","dark:bg-zinc-900","pointer-events-none","text-slate-400","dark:text-zinc-400","duration-200","rounded-sm","transform","origin-[0]","scale-[0.65]","translate-x-1","peer-placeholder-shown:-translate-y-0","peer-placeholder-shown:translate-x-0","peer-placeholder-shown:scale-100","peer-placeholder-shown:text-slate-600","dark:peer-placeholder-shown:text-zinc-300","peer-focus:translate-x-1","peer-focus:scale-[0.65]","peer-focus:text-slate-400","dark:peer-focus:text-zinc-400","peer-disabled:opacity-35"]},variants:{isOTC:{true:{base:"flex gap-1",input:"text-center"}},size:{sm:{input:["pt-2","pb-1.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-5","peer-focus:-translate-y-5"],icon:["h-8","w-8","px-1.5","top-[0.15rem]","right-0.5"]},md:{input:["pt-2","pb-1.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"],icon:["h-11","w-11","px-2.5","-top-[0.1rem]","right-0.5"]},lg:{input:["pt-3","pb-2.5","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-[1.675rem]","peer-focus:-translate-y-[1.675rem]"],icon:["h-12","w-12","px-2.5","top-0","right-1"]}},variant:{default:{},rift:{label:"bg-white peer-disabled:bg-transparent"},line:{input:["border-b","shadow-none"]},ghost:{},raw:{input:["placeholder:opacity-100"],label:["!translate-x-0","!translate-y-0","!scale-100","peer-focus:!translate-x-0","peer-focus:!translate-y-0","peer-focus:!scale-100","peer-focus:opacity-0","peer-placeholder-shown:opacity-100","opacity-0"]}},rows:{true:{label:"bg-white"}}},compoundSlots:[{slots:["input","label"],size:"sm",class:"text-sm"},{slots:["input","label"],size:"md",class:"text-base"},{slots:["input","label"],size:"lg",isOTC:!0,class:"text-lg"}],compoundVariants:[{variant:["default","rift","raw"],class:{input:["border","rounded-sm","shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px white !important]","dark:shadow-[0 1px 2px 0 rgb(0 0 0 / 0.05), inset 0 0 0 100px rgb(24 24 27) !important]"]}},{variant:["ghost","line"],class:{input:["disabled:bg-transparent"]}},{size:"sm",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-3.5","pr-3.5"],label:["top-2","left-2","px-1","-translate-y-2","peer-focus:-translate-y-2"]}},{size:"sm",raw:!0,class:{input:["pt-[0.4375rem]","pb-[0.4375rem]","pl-[0.6875rem]","pr-[1.125rem]"]}},{size:"md",variant:["default","ghost"],class:{input:["pt-3","pb-0.5","pl-4","pr-4"],label:["top-2","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"md",raw:!0,class:{input:["pt-[0.4375rem]","pb-2","pl-[0.9375rem]"]}},{size:"lg",variant:["default","ghost"],class:{input:["text-base","pt-[1.125rem]","pb-1","pl-4","pr-4"],label:["top-3","left-2","px-2","-translate-y-2.5","peer-focus:-translate-y-2.5"]}},{size:"lg",raw:!0,class:{input:["pt-[0.6875rem]","pb-[0.6875rem]","pl-[0.9375rem]","pr-[0.9375rem]"]}},{size:"sm",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.125rem]","peer-focus:-translate-y-[1.125rem]"]}},{size:"md",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-5","peer-focus:-translate-y-5"]}},{size:"lg",variant:"line",class:{input:["pl-2","pr-2"],label:["left-0.5","px-1","-translate-y-[1.5rem]","peer-focus:-translate-y-[1.5rem]"]}},{size:"sm",type:"password",class:{input:"pr-10"}},{size:"md",type:"password",class:{input:"pr-13"}},{size:"lg",type:"password",class:{input:"pr-13"}},{size:"sm",isOTC:!0,class:{base:"gap-0.75",input:"w-8 p-1.5 pt-2 px-0"}},{size:"md",isOTC:!0,class:{base:"gap-1",input:"text-lg w-9 p-2 pt-2 pb-1.5"}},{size:"lg",isOTC:!0,class:{base:"gap-1.5",input:"w-10 p-2 pt-2.5"}},{rows:!0,variant:"default",class:{label:["rounded-tr-none"]}},{size:"sm",rows:!0,variant:"default",class:{label:["pr-4","-translate-y-[0.65rem]","peer-focus:pr-4","peer-focus:-translate-y-[0.65rem]"]}},{size:"md",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.7rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.7rem]"]}},{size:"lg",rows:!0,variant:"default",class:{label:["pr-6","-translate-y-[0.95rem]","peer-focus:pr-6","peer-focus:-translate-y-[0.95rem]"]}}],defaultVariants:{disabled:!1,isOTC:!1,size:"md",type:"text",variant:"default",rows:!1}}),$=Q;import{jsx as I}from"react/jsx-runtime";var A=W((r,n)=>{let{className:u,disabled:s=!1,label:o="Input",length:y=6,name:l="input",size:g,autoSubmit:E=!1,onComplete:h,variant:S="default",...R}=r,x=X([]),T={disabled:s,isOTC:!0,size:g,variant:S},{base:C,input:k}=$(T);return l?I("div",{ref:n,className:C(),children:[...Array(y)].map((f,d)=>{let v=`${l}-otc-slot-${d}`;return I(M,{name:l,slotsRef:x,className:k({class:u}),index:d,label:o,length:y,autoSubmit:E,onComplete:h},v)})}):(console&&console.log('The "OneTimeCode" component cannot be rendered. Missing "name".'),null)}),ce=A,ue=A;export{ce as OTC,A as OneTimeCode,ue as Otc};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inpulse-ui/otc",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "keywords": [
     "auth",
     "input",
@@ -11,14 +11,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "homepage": "https://ds.inpulse.cx",
+  "homepage": "https://ui.inpulse.cx",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/inpulse-cx/ds.git",
+    "url": "git+https://github.com/inpulse-cx/ui.git",
     "directory": "packages/components/otc"
   },
   "bugs": {
-    "url": "https://github.com/inpulse-cx/ds/issues"
+    "url": "https://github.com/inpulse-cx/ui/issues"
   },
   "source": "./src/index.ts",
   "main": "./dist/index.js",