@snowball-tech/fractal/dist/src/components/InputPinCode/InputPinCode.js

Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS

"use client";import{PREFIX as e}from"../../constants.js";import{cj as t,cn as n}from"../../styles/helpers.js";import r from"../Typography/Typography.js";import i from"../InputText/InputText.js";import{GROUP_NAME as a}from"./InputPinCode.constants.js";import{useId as o,useRef as s}from"react";import c from"lodash/fp/isEmpty.js";import l from"lodash/fp/isFunction.js";import u from"lodash/fp/isString.js";import d from"lodash/fp/omit.js";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{Label as m}from"@radix-ui/react-label";import h from"lodash/fp/isError.js";import g from"lodash/fp/isNumber.js";import _ from"lodash/fp/isInteger.js";import v from"lodash/fp/range.js";const y=({autoFocus:y=!1,defaultValue:b,description:x,disabled:S=!1,error:C,id:w,label:T,labelElement:E,length:D=4,name:O,onBlur:k,onChange:A,onComplete:j,onFieldChange:M,onFocus:N,onKeyDown:P,placeholders:F,readOnly:I=!1,required:L=!1,split:R=!1,splitAt:z,success:B,value:V,wrapper:H,...U})=>{let W=o(),G=(w??W)||W,K=s(!1),q=h(C)?C.message:C,J=C!==!0&&!!q,Y=B!==!0&&!!B,X=J||C===!0||h(C),Z=(Y||B===!0)&&!X,Q=(e,t,n)=>{let r=Number.parseInt(t,10),i=t;(!g(r)||!_(r)||r<0||r>9)&&(i=``);let a=V||b||``,o=`${a.slice(0,Math.max(0,n))}${i}${a.slice(Math.max(0,n+1))}`;l(A)&&A(e,o),l(M)&&M(e,n,i);let s=e.target;if(s&&s.select(),K.current){K.current=!1;return}if(n<D-1){let e=Math.min(o.length,n+1),t=document.querySelector(`#${CSS.escape(G)}-${e}`);t&&t.focus()}else l(j)&&j(o),!c(i)&&s&&s.blur()},ee=(e,t)=>{l(k)&&k(e,t)},te=(e,t)=>{switch(l(P)&&P(e,t),e.key){case`ArrowDown`:case`ArrowUp`:K.current=!0;break;case`ArrowLeft`:if(t>0){let e=document.querySelector(`#${CSS.escape(G)}-${t-1}`);e&&e.focus()}e.preventDefault();break;case`ArrowRight`:if(t<D-1){let e=document.querySelector(`#${CSS.escape(G)}-${t+1}`);e&&e.focus()}e.preventDefault();break;case`Backspace`:if(!c(e.currentTarget.value)){Q(e,``,t);return}if(t>0){let e=document.querySelector(`#${CSS.escape(G)}-${t-1}`);e&&e.focus()}e.preventDefault();break;default:break}},ne=(e,t)=>{l(U.onPaste)&&U.onPaste(e);let n=e.clipboardData.getData(`text/plain`);if(c(n))return;let r=Number.parseInt(n,10);if(!g(r)||!_(r)||`${r}`.padStart(n.length,`0`)!==n)return;let i=n.slice(0,Math.max(0,D-t)).padEnd(D-t-1,`0`),a=`${(V||b||``).slice(0,Math.max(0,t))}${i}`;if(l(A)&&A(e,a),a.length===D){l(j)&&j(a);let t=e.target;t&&t.blur()}else{let e=a.length,t=document.querySelector(`#${CSS.escape(G)}-${e}`);t&&t.focus()}},$=!g(z)||Number.isNaN(z)||z<=0?Math.ceil(D/2):z;return p(`div`,{className:n(`${e}-${a}`,`flex w-min max-w-full flex-col gap-1 sm:w-fit`,S?`${e}-${a}--disabled`:``,X?`${e}-${a}--with-error`:``,I?`${e}-${a}--readonly`:``,L?`${e}-${a}--required`:``,Z?`${e}-${a}--with-success`:``,U.className),children:[T?f(m,{asChild:!0,className:t(`${e}-${a}__label`,S?`cursor-default`:`cursor-pointer`,L?`${e}-${a}__label--required after:text-feedback-danger-50 after:content-required`:``),htmlFor:`${G}-0`,children:f(r,{element:E||(u(T)?`label`:`div`),children:T})}):!1,f(`div`,{className:t(`flex w-min justify-start gap-1 sm:w-fit`,R?R===!0?`flex-col flex-wrap items-start justify-center`:`to-sm:flex-wrap`:``),children:v(0,R&&g($)?Math.ceil(D/$):1).map((r=0)=>{let o=r*$;return o>=D?null:f(`div`,{className:n(`${e}-${a}__fields ${e}-${a}__fields--row-${r}`,`flex w-min gap-half sm:w-fit sm:gap-1`,H?.className),children:v(o,R&&g($)?Math.min(o+$,D):D).map(n=>f(i,{id:`${G}-${n}`,autoFocus:y&&n===0,className:t(`${e}-${a}__field`,n===0||n===D-1?`${e}-${a}__field--${n===0?`first`:`last`}`:``,`${e}-${a}__field--${n}`,`w-fit min-w-[20px] !max-w-8 [&_input]:text-center`),disabled:S,error:X,extraSmall:!R,inputMode:`numeric`,max:9,maxLength:1,min:0,name:`${O||G}-${n}`,pattern:`[0-9]?`,placeholder:F?.[n]??F?.[0]??``,readOnly:I,required:L,size:1,success:Z,type:`number`,...u(V)?{value:_(Number.parseInt(V[n]??``,10))?V[n]:``}:{},...u(b)?{defaultValue:_(Number.parseInt(b[n]??``,10))?b[n]:``}:{},onBlur:e=>ee(e,n),onChange:(e,t)=>Q(e,t,n),onKeyDown:e=>te(e,n),onPaste:e=>ne(e,n),...l(N)?{onFocus:e=>N(e,n)}:{},...d([`className`],U)},n))},r)})}),x&&!J&&!Y&&f(r,{className:t(`fractal-input-pincode__description`,`cursor-default text-dark`),element:`div`,variant:`caption-median`,children:x}),(J||Y)&&f(r,{className:t(`fractal-input-pincode__message fractal-input-pincode__message--${X?`error`:`success`}`,`cursor-default text-dark`),element:`div`,variant:`caption-median`,children:X?h(C)?C.message:C:B})]})};y.displayName=`InputPinCode`;export{y as default};
//# sourceMappingURL=InputPinCode.js.map