@infinityfx/fluid/dist/components/input/pincode.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as e,jsx as r}from"react/jsx-runtime";import{combineClasses as o,classes as a}from"../../core/utils.js";import i from"../../hooks/use-input-props.js";import{useRef as t,useState as l}from"react";import{createStyles as d}from"../../core/style.js";const n=d("pincode",{".pincode":{display:"flex",gap:"var(--f-spacing-xsm)"},".group":{display:"flex",flexGrow:1},".field":{outline:"solid 3px transparent",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"var(--f-radius-sml)",transition:"border-color .2s, outline-color .2s",display:"flex",flexGrow:1},".group .field + .field":{marginLeft:"-1px",borderTopLeftRadius:0,borderBottomLeftRadius:0},".group .field:not(:last-child)":{borderTopRightRadius:0,borderBottomRightRadius:0},".field:focus-within":{borderColor:"var(--f-clr-primary-100)",outlineColor:"var(--f-clr-primary-500)",zIndex:1},".input":{boxSizing:"content-box",border:"none",outline:"none",width:"1em",flexGrow:1,padding:".675em",background:"none",textAlign:"center",color:"var(--f-clr-text-100)"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".pincode.round .field:first-child":{borderTopLeftRadius:"calc(1.4em + 1px)",borderBottomLeftRadius:"calc(1.4em + 1px)"},".pincode.round .field:last-child":{borderTopRightRadius:"calc(1.4em + 1px)",borderBottomRightRadius:"calc(1.4em + 1px)"},'.pincode[data-disabled="true"] .field':{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},'.pincode[data-disabled="true"] .input':{color:"var(--f-clr-grey-500)"},'.pincode[data-error="true"] .field':{borderColor:"var(--f-clr-error-100)"},'.pincode[data-error="true"] .field:focus-within':{outlineColor:"var(--f-clr-error-400)"},'.pincode[data-error="true"] .input':{color:"var(--f-clr-error-200)"}});function c({cc:d={},format:c=[1,1,1,1],masked:s,size:u="med",round:f=!1,value:p,error:m,onChange:g,defaultvalue:b,autoFocus:v,...x}){const h=o(n,d),y=t([]),R=c.reduce(((e,r)=>e+r),0),[z,k]=void 0!==p?[p]:l(b?.toString().slice(0,R)||"");function _(e){let r=e.target.value.replace(/\D/g,"");r&&(r.length<R&&(r=z+r),r=r.slice(0,R),k?.(r),g?.(r),y.current[Math.min(r.length,R-1)]?.focus())}const[w,C]=i(x);return e("div",{...C,className:a(h.pincode,h[`s__${u}`],f&&h.round,x.className),"data-error":!!m,"data-disabled":x.disabled,"data-fb":!0,children:[c.map(((e,o)=>{const a=c.slice(0,o).reduce(((e,r)=>e+r),0);return r("div",{className:h.group,children:new Array(e).fill(0).map(((e,o)=>(o+=a,r("div",{className:h.field,children:r("input",{ref:e=>{y.current[o]=e},"aria-label":w["aria-label"],"aria-labelledby":w["aria-labelledby"],autoFocus:0===o&&v,disabled:x.disabled,className:h.input,"aria-invalid":!!m,inputMode:"numeric",type:s?"password":"text",value:z.charAt(o),onChange:_,onKeyDown:e=>function(e,r){let o=z.slice();/^\d$/.test(e.key)&&(e.preventDefault(),z.length<=r?o+=e.key:o=o.slice(0,r)+e.key+o.slice(r+1),y.current[o.length]?.focus()),"Backspace"===e.key&&(e.preventDefault(),o=o.slice(0,o.length-1),y.current[o.length-1]?.focus()),k?.(o),g?.(o)}(e,o)})},o))))},o)})),r("input",{...w,type:"hidden",value:z})]})}export{c as default};
//# sourceMappingURL=pincode.js.map