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

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

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