@real-system/input/lib/index.mjs

Real System input component

var N=Object.defineProperty,W=Object.defineProperties;var L=Object.getOwnPropertyDescriptors;var v=Object.getOwnPropertySymbols;var w=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var _=(o,e,r)=>e in o?N(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,i=(o,e)=>{for(var r in e||(e={}))w.call(e,r)&&_(o,r,e[r]);if(v)for(var r of v(e))B.call(e,r)&&_(o,r,e[r]);return o},c=(o,e)=>W(o,L(e));var s=(o,e)=>{var r={};for(var t in o)w.call(o,t)&&e.indexOf(t)<0&&(r[t]=o[t]);if(o!=null&&v)for(var t of v(o))e.indexOf(t)<0&&B.call(o,t)&&(r[t]=o[t]);return r};import A,{forwardRef as Q}from"react";import*as p from"react";import{real as O}from"@real-system/elements-primitive";import{preventSpreadingStyleProps as z}from"@real-system/styled-library";import{makeTestId as X,merge as y}from"@real-system/utils-library";import T,{useMemo as E}from"react";import{real as H}from"@real-system/elements-primitive";import{makeTestId as M}from"@real-system/utils-library";var D=(o=!1)=>{let e={borderBottomLeftRadius:4,borderTopLeftRadius:4,borderRight:1};return o&&(e={borderBottomRightRadius:4,borderTopRightRadius:4,borderLeft:1}),e},q=(o=!1)=>{let e={backgroundColor:"gray-50",borderColor:"gray-100"};return o&&(e.backgroundColor="none"),e},P=T.forwardRef(function(l,a){var d=l,{children:e,disabled:r,isSuffix:t=!1}=d,u=s(d,["children","disabled","isSuffix"]);let m=E(()=>q(r),[r]),f=E(()=>D(t),[t]);return e==null?null:T.createElement(H.div,c(i(i(i({"data-testid":M("input-box-addon"),display:"flex",justifyContent:"center",alignItems:"center",height:"auto",paddingX:4},f),m),u),{ref:a}),e)});var b={display:"flex",width:"100%",height:"control",lineHeight:"control",border:"1px solid",borderRadius:4,transition:"box-shadow 150ms ease-in, border-color 150ms ease-in",bgColor:"white",cursor:"text",outline:"none",boxShadow:"none",boxSizing:"content-box",_hover:{},_focusWithin:{},_active:{boxShadow:"none"}},j={default:y(b,{color:"gray-500",borderColor:"gray-200",_hover:{borderColor:"gray-300"},_focusWithin:{borderColor:"gray-400",boxShadow:"focus-outline"},_active:{borderColor:"gray-400"}}),disabled:y(b,{color:"gray-300",bgColor:"gray-50",borderColor:"gray-200",cursor:"default"}),readonly:y(b,{color:"gray-400",bgColor:"gray-50",borderColor:"gray-200",_hover:{borderColor:"gray-300"},_focusWithin:{boxShadow:"focus-outline",borderColor:"gray-300"},_active:{borderColor:"gray-300"}}),error:y(b,{borderColor:"red-500",_hover:{borderColor:"red-600"},_focusWithin:{boxShadow:"focus-outline",borderColor:"red-600"},_active:{borderColor:"red-600"}}),hidden:y(b,{bgColor:"none",border:0,_hover:{border:0},_focusWithin:{border:0},_active:{border:0}})},C=p.forwardRef((R,f)=>{var h=R,{disabled:o,hasError:e=!1,readonly:r,children:t,type:u,suffix:a,prefix:l,addonProps:d}=h,m=s(h,["disabled","hasError","readonly","children","type","suffix","prefix","addonProps"]);let g=o,I=e,S=r,n="default";return u==="hidden"?n="hidden":g?n="disabled":I?n="error":S&&(n="readonly"),p.createElement(O.div,i(c(i({ref:f},j[n]),{"data-testid":X("input-box")}),z(m,{display:!0,height:!0,width:!0,border:!0,borderRadius:!0,transition:!0,bgColor:!0,backgroundColor:!0,color:!0,borderColor:!0,boxShadow:!0,cursor:!0,_hover:!0,_focusWithin:!0,_active:!0})),l&&p.createElement(P,i({disabled:o},d),l),t,a&&p.createElement(P,c(i({disabled:o},d),{isSuffix:!0}),a))});C.displayName="InputBox";import Y,{forwardRef as F}from"react";import{real as G}from"@real-system/elements-primitive";import{spreadStyleProps as J}from"@real-system/styled-library";var K=({disabled:o,readonly:e,type:r})=>(r==="date"||r==="time")&&!e&&!o?"text":"auto",k=F(function(e,r){return Y.createElement(G.input,i({appearance:"none",display:"block",width:"100%",height:"control",paddingX:5,paddingY:0,margin:0,fontScale:"input",fontWeight:"input",lineHeight:"control",backgroundColor:"transparent",border:"none",borderRadius:4,boxShadow:"none",color:"inherit",cursor:K(e),outline:"none",resize:"none",ref:r,_placeholder:{color:"gray-200",transition:"150ms all ease-in",fontWeight:"placeholder"},_hover_placeholder:{color:"gray-300"},_focus_placeholder:{color:"gray-300"},_focus:{outline:"none"},_disabled:{cursor:"default"},transition:"0.25s all ease-out","aria-invalid":e["aria-invalid"],"aria-readonly":e.readonly,disabled:e.disabled,id:e.id,name:e.name,placeholder:e.placeholder,readOnly:e.readonly,required:e.required,value:e.value},J(e,{display:!1,width:!1,height:!1,border:!1,borderRadius:!1,transition:!1,bgColor:!1,backgroundColor:!1,color:!1,borderColor:!1,boxShadow:!1,cursor:!1,_hover:!1,_focusWithin:!1,_active:!1})))});var be=Q(function(S,I){var n=S,{readonly:e,disabled:r,id:t,required:u,hasError:a,type:l="text",suffix:d,prefix:m,placeholder:f,value:R,name:h}=n,g=s(n,["readonly","disabled","id","required","hasError","type","suffix","prefix","placeholder","value","name"]);let x={type:l};return l==="number"&&(x.type="text",x.inputmode="numeric",x.pattern="[0-9]*"),A.createElement(C,i({disabled:r,hasError:a,suffix:d,prefix:m,readonly:e,type:l},g),A.createElement(k,i(i({"aria-invalid":a,"aria-readonly":e,disabled:r,id:t,name:h,placeholder:f,readonly:e,required:u,value:R,ref:I},g),x)))});export{be as Input,C as InputBox};