@stanfordspezi/spezi-web-design-system/dist/InputOTP-Rg1Sfdf5.js

Stanford Biodesign Digital Health Spezi Web Design System

"use strict";const S=require("react/jsx-runtime"),ve=require("react"),K=require("./index-DwV9MiDB.js"),De=require("./misc-yOvtbcCM.js"),Ae=require("./minus-CfKz9A7-.js");function We(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const l=We(ve);var _e=Object.defineProperty,Be=Object.defineProperties,Ne=Object.getOwnPropertyDescriptors,Q=Object.getOwnPropertySymbols,ge=Object.prototype.hasOwnProperty,he=Object.prototype.propertyIsEnumerable,fe=(e,t,n)=>t in e?_e(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,Fe=(e,t)=>{for(var n in t||(t={}))ge.call(t,n)&&fe(e,n,t[n]);if(Q)for(var n of Q(t))he.call(t,n)&&fe(e,n,t[n]);return e},He=(e,t)=>Be(e,Ne(t)),Ge=(e,t)=>{var n={};for(var i in e)ge.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i]);if(e!=null&&Q)for(var i of Q(e))t.indexOf(i)<0&&he.call(e,i)&&(n[i]=e[i]);return n};function Le(e){let t=setTimeout(e,0),n=setTimeout(e,10),i=setTimeout(e,50);return[t,n,i]}function qe(e){let t=l.useRef();return l.useEffect(()=>{t.current=e}),t.current}var ze=18,be=40,$e=`${be}px`,Ve=["[data-lastpass-icon-root]","com-1password-button","[data-dashlanecreated]",'[style$="2147483647 !important;"]'].join(",");function Ze({containerRef:e,inputRef:t,pushPasswordManagerStrategy:n,isFocused:i}){let[P,p]=l.useState(!1),[T,j]=l.useState(!1),[A,F]=l.useState(!1),H=l.useMemo(()=>n==="none"?!1:(n==="increase-width"||n==="experimental-no-flickering")&&P&&T,[P,T,n]),W=l.useCallback(()=>{let f=e.current,y=t.current;if(!f||!y||A||n==="none")return;let h=f,x=h.getBoundingClientRect().left+h.offsetWidth,_=h.getBoundingClientRect().top+h.offsetHeight/2,u=x-ze,G=_;document.querySelectorAll(Ve).length===0&&document.elementFromPoint(u,G)===f||(p(!0),F(!0))},[e,t,A,n]);return l.useEffect(()=>{let f=e.current;if(!f||n==="none")return;function y(){let x=window.innerWidth-f.getBoundingClientRect().right;j(x>=be)}y();let h=setInterval(y,1e3);return()=>{clearInterval(h)}},[e,n]),l.useEffect(()=>{let f=i||document.activeElement===t.current;if(n==="none"||!f)return;let y=setTimeout(W,0),h=setTimeout(W,2e3),x=setTimeout(W,5e3),_=setTimeout(()=>{F(!0)},6e3);return()=>{clearTimeout(y),clearTimeout(h),clearTimeout(x),clearTimeout(_)}},[t,i,n,W]),{hasPWMBadge:P,willPushPWMBadge:H,PWM_BADGE_SPACE_WIDTH:$e}}var we=l.createContext({}),Se=l.forwardRef((e,t)=>{var n=e,{value:i,onChange:P,maxLength:p,textAlign:T="left",pattern:j,placeholder:A,inputMode:F="numeric",onComplete:H,pushPasswordManagerStrategy:W="increase-width",pasteTransformer:f,containerClassName:y,noScriptCSSFallback:h=Je,render:x,children:_}=n,u=Ge(n,["value","onChange","maxLength","textAlign","pattern","placeholder","inputMode","onComplete","pushPasswordManagerStrategy","pasteTransformer","containerClassName","noScriptCSSFallback","render","children"]),G,ne,re,le,ae;let[ye,Ce]=l.useState(typeof u.defaultValue=="string"?u.defaultValue:""),s=i??ye,M=qe(s),L=l.useCallback(r=>{P?.(r),Ce(r)},[P]),w=l.useMemo(()=>j?typeof j=="string"?new RegExp(j):j:null,[j]),c=l.useRef(null),U=l.useRef(null),X=l.useRef({value:s,onChange:L,isIOS:typeof window<"u"&&((ne=(G=window?.CSS)==null?void 0:G.supports)==null?void 0:ne.call(G,"-webkit-touch-callout","none"))}),Z=l.useRef({prev:[(re=c.current)==null?void 0:re.selectionStart,(le=c.current)==null?void 0:le.selectionEnd,(ae=c.current)==null?void 0:ae.selectionDirection]});l.useImperativeHandle(t,()=>c.current,[]),l.useEffect(()=>{let r=c.current,a=U.current;if(!r||!a)return;X.current.value!==r.value&&X.current.onChange(r.value),Z.current.prev=[r.selectionStart,r.selectionEnd,r.selectionDirection];function d(){if(document.activeElement!==r){z(null),$(null);return}let o=r.selectionStart,m=r.selectionEnd,J=r.selectionDirection,b=r.maxLength,R=r.value,E=Z.current.prev,C=-1,O=-1,I;if(R.length!==0&&o!==null&&m!==null){let ke=o===m,Re=o===R.length&&R.length<b;if(ke&&!Re){let D=o;if(D===0)C=0,O=1,I="forward";else if(D===b)C=D-1,O=D,I="backward";else if(b>1&&R.length>1){let te=0;if(E[0]!==null&&E[1]!==null){I=D<E[1]?"backward":"forward";let Ie=E[0]===E[1]&&E[0]<b;I==="backward"&&!Ie&&(te=-1)}C=te+D,O=te+D+1}}C!==-1&&O!==-1&&C!==O&&c.current.setSelectionRange(C,O,I)}let de=C!==-1?C:o,me=O!==-1?O:m,Me=I??J;z(de),$(me),Z.current.prev=[de,me,Me]}if(document.addEventListener("selectionchange",d,{capture:!0}),d(),document.activeElement===r&&Y(!0),!document.getElementById("input-otp-style")){let o=document.createElement("style");if(o.id="input-otp-style",document.head.appendChild(o),o.sheet){let m="background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";V(o.sheet,"[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"),V(o.sheet,`[data-input-otp]:autofill { ${m} }`),V(o.sheet,`[data-input-otp]:-webkit-autofill { ${m} }`),V(o.sheet,"@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }"),V(o.sheet,"[data-input-otp] + * { pointer-events: all !important; }")}}let v=()=>{a&&a.style.setProperty("--root-height",`${r.clientHeight}px`)};v();let g=new ResizeObserver(v);return g.observe(r),()=>{document.removeEventListener("selectionchange",d,{capture:!0}),g.disconnect()}},[]);let[oe,ie]=l.useState(!1),[q,Y]=l.useState(!1),[k,z]=l.useState(null),[B,$]=l.useState(null);l.useEffect(()=>{Le(()=>{var r,a,d,v;(r=c.current)==null||r.dispatchEvent(new Event("input"));let g=(a=c.current)==null?void 0:a.selectionStart,o=(d=c.current)==null?void 0:d.selectionEnd,m=(v=c.current)==null?void 0:v.selectionDirection;g!==null&&o!==null&&(z(g),$(o),Z.current.prev=[g,o,m])})},[s,q]),l.useEffect(()=>{M!==void 0&&s!==M&&M.length<p&&s.length===p&&H?.(s)},[p,H,M,s]);let N=Ze({containerRef:U,inputRef:c,pushPasswordManagerStrategy:W,isFocused:q}),ue=l.useCallback(r=>{let a=r.currentTarget.value.slice(0,p);if(a.length>0&&w&&!w.test(a)){r.preventDefault();return}typeof M=="string"&&a.length<M.length&&document.dispatchEvent(new Event("selectionchange")),L(a)},[p,L,M,w]),se=l.useCallback(()=>{var r;if(c.current){let a=Math.min(c.current.value.length,p-1),d=c.current.value.length;(r=c.current)==null||r.setSelectionRange(a,d),z(a),$(d)}Y(!0)},[p]),ce=l.useCallback(r=>{var a,d;let v=c.current;if(!f&&(!X.current.isIOS||!r.clipboardData||!v))return;let g=r.clipboardData.getData("text/plain"),o=f?f(g):g;r.preventDefault();let m=(a=c.current)==null?void 0:a.selectionStart,J=(d=c.current)==null?void 0:d.selectionEnd,b=(m!==J?s.slice(0,m)+o+s.slice(J):s.slice(0,m)+o+s.slice(m)).slice(0,p);if(b.length>0&&w&&!w.test(b))return;v.value=b,L(b);let R=Math.min(b.length,p-1),E=b.length;v.setSelectionRange(R,E),z(R),$(E)},[p,L,w,s]),Oe=l.useMemo(()=>({position:"relative",cursor:u.disabled?"default":"text",userSelect:"none",WebkitUserSelect:"none",pointerEvents:"none"}),[u.disabled]),pe=l.useMemo(()=>({position:"absolute",inset:0,width:N.willPushPWMBadge?`calc(100% + ${N.PWM_BADGE_SPACE_WIDTH})`:"100%",clipPath:N.willPushPWMBadge?`inset(0 ${N.PWM_BADGE_SPACE_WIDTH} 0 0)`:void 0,height:"100%",display:"flex",textAlign:T,opacity:"1",color:"transparent",pointerEvents:"all",background:"transparent",caretColor:"transparent",border:"0 solid transparent",outline:"0 solid transparent",boxShadow:"none",lineHeight:"1",letterSpacing:"-.5em",fontSize:"var(--root-height)",fontFamily:"monospace",fontVariantNumeric:"tabular-nums"}),[N.PWM_BADGE_SPACE_WIDTH,N.willPushPWMBadge,T]),Te=l.useMemo(()=>l.createElement("input",He(Fe({autoComplete:u.autoComplete||"one-time-code"},u),{"data-input-otp":!0,"data-input-otp-placeholder-shown":s.length===0||void 0,"data-input-otp-mss":k,"data-input-otp-mse":B,inputMode:F,pattern:w?.source,"aria-placeholder":A,style:pe,maxLength:p,value:s,ref:c,onPaste:r=>{var a;ce(r),(a=u.onPaste)==null||a.call(u,r)},onChange:ue,onMouseOver:r=>{var a;ie(!0),(a=u.onMouseOver)==null||a.call(u,r)},onMouseLeave:r=>{var a;ie(!1),(a=u.onMouseLeave)==null||a.call(u,r)},onFocus:r=>{var a;se(),(a=u.onFocus)==null||a.call(u,r)},onBlur:r=>{var a;Y(!1),(a=u.onBlur)==null||a.call(u,r)}})),[ue,se,ce,F,pe,p,B,k,u,w?.source,s]),ee=l.useMemo(()=>({slots:Array.from({length:p}).map((r,a)=>{var d;let v=q&&k!==null&&B!==null&&(k===B&&a===k||a>=k&&a<B),g=s[a]!==void 0?s[a]:null,o=s[0]!==void 0?null:(d=A?.[a])!=null?d:null;return{char:g,placeholderChar:o,isActive:v,hasFakeCaret:v&&g===null}}),isFocused:q,isHovering:!u.disabled&&oe}),[q,oe,p,B,k,u.disabled,s]),je=l.useMemo(()=>x?x(ee):l.createElement(we.Provider,{value:ee},_),[_,ee,x]);return l.createElement(l.Fragment,null,h!==null&&l.createElement("noscript",null,l.createElement("style",null,h)),l.createElement("div",{ref:U,"data-input-otp-container":!0,style:Oe,className:y},je,l.createElement("div",{style:{position:"absolute",inset:0,pointerEvents:"none"}},Te)))});Se.displayName="Input";function V(e,t){try{e.insertRule(t)}catch{console.error("input-otp could not insert CSS rule:",t)}}var Je=`
[data-input-otp] {
  --nojs-bg: white !important;
  --nojs-fg: black !important;

  background-color: var(--nojs-bg) !important;
  color: var(--nojs-fg) !important;
  caret-color: var(--nojs-fg) !important;
  letter-spacing: .25em !important;
  text-align: center !important;
  border: 1px solid var(--nojs-fg) !important;
  border-radius: 4px !important;
  width: 100% !important;
}
@media (prefers-color-scheme: dark) {
  [data-input-otp] {
    --nojs-bg: black !important;
    --nojs-fg: white !important;
  }
}`;const Pe=({className:e,containerClassName:t,...n})=>S.jsx(Se,{"data-slot":"input-otp",containerClassName:K.cn("flex items-center gap-1.5 has-disabled:opacity-50",t),className:K.cn("disabled:cursor-not-allowed",e),...n}),xe=({className:e,...t})=>S.jsx("div",{"data-slot":"input-otp-group",className:K.cn("flex items-center",e),...t}),Ee=({index:e,className:t,...n})=>{const i=ve.useContext(we),{char:P,hasFakeCaret:p,isActive:T}=i.slots[e];return S.jsxs("div",{"data-slot":"input-otp-slot",className:K.cn("flex-center border-input relative size-10 border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",T&&"ring-ring z-10 ring-2",t),...n,children:[P,p&&S.jsx("div",{className:"flex-center pointer-events-none absolute inset-0",children:S.jsx("div",{className:"animate-caret-blink bg-foreground h-4 w-px duration-1000"})})]})},Ke=({...e})=>S.jsx("div",{"data-slot":"input-otp-separator",role:"separator",...e,children:S.jsx(Ae.default,{className:"text-muted-foreground w-4"})}),Qe=({maxLength:e,...t})=>S.jsx(Pe,{maxLength:e,...t,children:S.jsx(xe,{children:De.times(e,n=>S.jsx(Ee,{index:n},n))})});exports.InputOTP=Qe;exports.InputOTPGroup=xe;exports.InputOTPRoot=Pe;exports.InputOTPSeparator=Ke;exports.InputOTPSlot=Ee;