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

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

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