the-omelet-ui 1.8.64 → 1.8.65
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/entries/otpInput.js +1 -1
- package/package.json +1 -1
package/dist/entries/otpInput.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import {a}from'../chunk-6GLPXMGB.js';import
|
|
1
|
+
import {a}from'../chunk-6GLPXMGB.js';import Q,{forwardRef,useRef,useState,useImperativeHandle,useEffect,useCallback}from'react';import {cva}from'class-variance-authority';import {jsx,jsxs}from'react/jsx-runtime';var R=cva("flex items-center justify-center",{variants:{size:{sm:"gap-2",md:"gap-3",lg:"gap-4"}},defaultVariants:{size:"md"}}),Z=cva(["text-center font-semibold transition-all duration-200 outline-none rounded-sm","disabled:cursor-not-allowed disabled:opacity-50"],{variants:{size:{sm:"h-[32px] w-[32px] text-sm ",md:"h-[40px] w-[40px] text-base ",lg:"h-[50px] w-[50px] text-lg "},variant:{default:["border-2 border-gray-300 bg-white text-gray-900","focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20"],outline:["border-2 border-gray-400 bg-transparent text-gray-900","focus:border-blue-600 focus:ring-2 focus:ring-blue-600/20"],filled:["border-2 border-transparent bg-gray-100 text-gray-900","focus:border-blue-500 focus:bg-white focus:ring-2 focus:ring-blue-500/20"]},state:{default:"",error:["border-red-500 ","focus:border-red-500 focus:ring-red-500/20","animate-shake"],success:["border-green-500 bg-green-50 text-green-900","focus:border-green-500 focus:ring-green-500/20"],disabled:"border-gray-200 bg-gray-100 text-gray-400 cursor-not-allowed"}},defaultVariants:{size:"md",variant:"default",state:"default"}}),A=forwardRef(({length:a$1=6,value:o,onChange:n,onComplete:g,onFocus:I,onBlur:P,disabled:b=false,error:y=false,success:L=false,autoFocus:T=true,placeholder:F="",numericOnly:c=true,mask:H=false,separatorAfter:h=[],separatorElement:N,size:v,variant:j,classNames:p,ariaLabel:E="OTP input"},S)=>{let s=useRef([]),[C,u]=useState(-1),m=useRef(false),K=b?"disabled":y?"error":L?"success":"default";useImperativeHandle(S,()=>({focus:()=>{s.current[0]?.focus();},clear:()=>{m.current=false,n(""),s.current[0]?.focus();},focusAt:e=>{e>=0&&e<a$1&&s.current[e]?.focus();}})),useEffect(()=>{if(T&&!b&&s.current[0]){let e=setTimeout(()=>{s.current[0]?.focus();},0);return ()=>clearTimeout(e)}},[T,b]),useEffect(()=>{o.length===a$1&&g&&!m.current&&(m.current=true,g(o)),o.length<a$1&&(m.current=false);},[o,a$1,g]);let z=useCallback((e,t)=>{let r=c?t.replace(/\D/g,""):t;if(r.length>1){let D=r.slice(0,a$1);n(D);let V=Math.min(D.length,a$1)-1,k=V>=0?V:0;s.current[k]?.focus(),u(k);return}let i=r.slice(-1);if(!i&&t!=="")return;let w=o.split("");w[e]=i;let J=w.join("").slice(0,a$1);n(J),i&&e<a$1-1&&(s.current[e+1]?.focus(),u(e+1));},[o,a$1,c,n]),B=useCallback((e,t)=>{switch(t.key){case "Backspace":t.preventDefault();let r=o.split("");r[e]?(r[e]="",n(r.join(""))):e>0&&(r[e-1]="",n(r.join("")),s.current[e-1]?.focus(),u(e-1));break;case "ArrowLeft":t.preventDefault(),e>0&&(s.current[e-1]?.focus(),u(e-1));break;case "ArrowRight":t.preventDefault(),e<a$1-1&&(s.current[e+1]?.focus(),u(e+1));break;case "Delete":t.preventDefault();let i=o.split("");i[e]="",n(i.join(""));break;case "Home":t.preventDefault(),s.current[0]?.focus(),u(0);break;case "End":t.preventDefault(),s.current[a$1-1]?.focus(),u(a$1-1);break}},[o,a$1,n]),$=useCallback(e=>{e.preventDefault();let t=e.clipboardData.getData("text");if(c&&(t=t.replace(/\D/g,"")),t=t.slice(0,a$1),t){n(t);let r=Math.min(t.length,a$1)-1;s.current[r]?.focus(),u(r);}},[a$1,c,n]),W=useCallback((e,t)=>{u(e),t.target.select(),I?.(t);},[I]),_=useCallback(e=>{u(-1),P?.(e);},[P]),q=e=>h.includes(e+1)?jsx("span",{className:a("flex items-center justify-center text-gray-400",p?.separator),"aria-hidden":"true",children:N??jsx("span",{className:"w-2 h-0.5 bg-gray-300 rounded-full"})}):null,G=e=>{let t=o[e]||"";return H&&t?"\u2022":t};return jsx("div",{className:a(R({size:v}),p?.container),role:"group","aria-label":E,children:jsx("div",{className:a(R({size:v}),p?.inputWrapper),children:Array.from({length:a$1},(e,t)=>jsxs(Q.Fragment,{children:[jsx("input",{ref:r=>{s.current[t]=r;},type:"text",inputMode:c?"numeric":"text",pattern:c?"[0-9]*":void 0,maxLength:a$1,autoComplete:t===0?"one-time-code":"off",value:G(t),onChange:r=>z(t,r.target.value),onKeyDown:r=>B(t,r),onPaste:$,onFocus:r=>W(t,r),onBlur:_,disabled:b,placeholder:F,className:a(Z({size:v,variant:j,state:K}),C===t&&p?.inputActive,p?.input),"aria-label":`${E} digit ${t+1} of ${a$1}`,"aria-invalid":y}),q(t)]},t))})})});A.displayName="OTPInput";export{A as OTPInput,R as otpContainerVariants,Z as otpInputVariants};
|