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

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

"use client";
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useState as o,useMemo as a}from"react";import{combineClasses as l,classes as t}from"../../core/utils.js";import i from"../../hooks/use-input-props.js";import{createStyles as n}from"../../core/style.js";const d=n("field",{".input":{border:"none",background:"none",outline:"none",color:"var(--f-clr-text-100)",width:0,flexGrow:1},".input::placeholder":{color:"var(--f-clr-grey-300)"},".field":{borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-grey-200)",transition:"background-color .2s, border-color .2s, color .2s, outline-color .2s",display:"flex",alignItems:"center",overflow:"hidden",outline:"solid 3px transparent",minWidth:"min(var(--width, 100vw), 12em)"},".v__default":{backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)"},".v__minimal":{backgroundColor:"var(--f-clr-fg-100)"},".content":{display:"flex",alignItems:"center",gap:"var(--f-spacing-xsm)",padding:".675em",flexGrow:1},".v__default:focus-within":{borderColor:"var(--f-clr-primary-100)",color:"var(--f-clr-primary-100)",outlineColor:"var(--f-clr-primary-500)"},".v__minimal:focus-within":{backgroundColor:"var(--f-clr-fg-200)"},'.field[data-error="true"]':{borderColor:"var(--f-clr-error-100)"},'.field[data-error="true"]:focus-within':{outlineColor:"var(--f-clr-error-400)"},'.field[data-error="true"] .content':{color:"var(--f-clr-error-200)"},'.field[data-error="true"] .input':{color:"var(--f-clr-error-200)"},'.field[data-disabled="true"]':{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},'.field[data-disabled="true"] .input':{color:"var(--f-clr-grey-500)"},".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)"},".field.round":{borderRadius:"calc(1.4em + 1px)"}});function f({cc:n={},round:f=!1,size:s="med",variant:c="default",error:u,icon:v,left:m,right:p,onEnter:g,inputRef:b,shape:_,defaultValue:h,...x}){const y=l(d,n),[w,C]=i(x),[k,z]=void 0!==x.value?[x.value]:o(h||""),j=a((()=>_?.split("").map((r=>/0/.test(r)?/[0-9]/:/\*/.test(r)?/\w/:r))||[]),[_]);return r("div",{...C,className:t(y.field,y[`s__${s}`],y[`v__${c}`],f&&y.round,x.className),"data-error":!!u,"data-disabled":x.disabled,"data-fb":"default"===c?"true":void 0,children:[m,r("label",{className:y.content,children:[v,e("input",{...w,ref:b,value:k,onChange:r=>{let e=r.target.value.split(""),o="",a=0;for(let l=0,t=0;l<e.length;l++){const i=e[l],n=j[t];if(!n){0===t&&(o=r.target.value,a=o.length);break}if("string"==typeof n)o+=n,n===i&&l===t||l--;else{if(!n.test(i))break;o+=i,a=o.length}t++}r.target.value=o.slice(0,a),z?.(r.target.value),x.onChange?.(r)},className:y.input,"aria-invalid":!!u,onKeyDown:r=>{"Enter"===r.key&&g?.()}})]}),p]})}export{f as default};
//# sourceMappingURL=field.js.map