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