xtreme-ui/dist/components/base/Textfield/Textfield.cjs

Collection of reusable components that can be used in web projects

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("react"),K=require("clsx"),S=require("../Icon/Icon.cjs");;/* empty css                 */const T=o.forwardRef((x,w)=>{const{className:I,style:q,type:e="text",textarea:t,placeholder:a,autoComplete:m="off",active:v,autoFocus:h,icon:s,iconType:C="regular",value:l,onChange:y,onFocus:b,onBlur:j,onKeyUp:c,onKeyDown:i,onEnterKey:u}=x,M=o.useId(),d=x.id??M,f=o.useMemo(()=>{if(t===!0)return null;if(s)return s;if(e==="number")return"23";if(e==="search")return"f002";if(e==="password")return"f30d"},[t,s,e]),p=o.useMemo(()=>{if(a)return a;if(e==="number")return"Enter a number";if(e==="search")return"Search";if(e==="password")return"Enter password";if(e==="phone")return"Enter phone number"},[a,e]),E=o.useMemo(()=>e==="phone"?"number":e,[e]),g=n=>{c==null||c(n)},N=n=>{n.key==="Enter"&&(u==null||u(n)),i==null||i(n)},F=K("xtrTextfield",f&&"withIcon",t&&"textarea",l&&"hasValue",e==="phone"&&"phone",v&&"active",I);return r.jsxs("div",{ref:w,className:F,role:"textbox",style:q,children:[r.jsx("label",{className:"placeholder",htmlFor:d,children:p}),f&&!t&&r.jsx(S.Icon,{code:f,type:C}),e==="phone"&&r.jsxs("div",{className:"dialCode",children:[r.jsx("span",{style:{backgroundImage:"url(https://flagcdn.com/in.svg)"}}),r.jsx("p",{children:"+91"})]}),t?r.jsx("textarea",{className:"input",id:d,autoFocus:h,autoComplete:m,value:l,onChange:y,onFocus:b,onBlur:j,onKeyUp:g,onKeyDown:N,"aria-label":p}):r.jsx("input",{className:"input",id:d,type:E,autoFocus:h,autoComplete:m,value:l,onChange:y,onFocus:b,onBlur:j,onKeyUp:g,onKeyDown:N,"aria-label":p})]})});T.displayName="Textfield";exports.Textfield=T;