@snowball-tech/fractal/dist/chunk-GIR5KELV.js

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

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