xtreme-ui/dist/storybook/assets/Textfield-JZRQAuDu.js

Collection of reusable components that can be used in web projects

import{r as t,j as a,$ as F}from"./iframe-5Rr_RUeM.js";import{c as M}from"./clsx-B-dksMZM.js";const m=t.forwardRef((u,g)=>{const{className:b,style:T,type:e="text",textarea:l,placeholder:r,autoComplete:p="off",active:V,autoFocus:v,icon:o,iconType:q="regular",value:s,onChange:f,onFocus:y,onBlur:x,onKeyUp:K,onKeyDown:w,onEnterKey:N}=u,j=t.useId(),i=u.id??j,d=t.useMemo(()=>{if(l===!0)return null;if(o)return o;if(e==="number")return"23";if(e==="search")return"f002";if(e==="password")return"f30d"},[l,o,e]),c=t.useMemo(()=>{if(r)return r;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"},[r,e]),C=t.useMemo(()=>e==="phone"?"number":e,[e]),h=n=>{K?.(n)},E=n=>{n.key==="Enter"&&N?.(n),w?.(n)},I=M("xtrTextfield",d&&"withIcon",l&&"textarea",s&&"hasValue",e==="phone"&&"phone",V&&"active",b);return a.jsxs("div",{ref:g,className:I,style:T,children:[a.jsx("label",{className:"placeholder",htmlFor:i,children:c}),d&&!l&&a.jsx(F,{className:"xIcon",code:d,type:q}),e==="phone"&&a.jsxs("div",{className:"dialCode",children:[a.jsx("span",{style:{backgroundImage:"url(https://flagcdn.com/in.svg)"}}),a.jsx("p",{children:"+91"})]}),l?a.jsx("textarea",{className:"input",id:i,autoFocus:v,autoComplete:p,value:s,onChange:f,onFocus:y,onBlur:x,onKeyUp:h,onKeyDown:E,"aria-label":c}):a.jsx("input",{className:"input",id:i,type:C,autoFocus:v,autoComplete:p,value:s,onChange:f,onFocus:y,onBlur:x,onKeyUp:h,onKeyDown:E,"aria-label":c})]})});m.displayName="Textfield";try{m.displayName="Textfield",m.__docgenInfo={description:"",displayName:"Textfield",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties"}},type:{defaultValue:null,description:"",name:"type",required:!1,type:{name:"enum",value:[{value:'"number"'},{value:'"search"'},{value:'"text"'},{value:'"phone"'},{value:'"password"'}]}},textarea:{defaultValue:null,description:"",name:"textarea",required:!1,type:{name:"boolean"}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"string"}},active:{defaultValue:null,description:"",name:"active",required:!1,type:{name:"boolean"}},autoFocus:{defaultValue:null,description:"",name:"autoFocus",required:!1,type:{name:"boolean"}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'},{value:'"tel"'},{value:'"email"'},{value:'"name"'},{value:'"honorific-prefix"'},{value:'"given-name"'},{value:'"additional-name"'},{value:'"family-name"'},{value:'"honorific-suffix"'},{value:'"nickname"'},{value:'"username"'},{value:'"new-password"'},{value:'"current-password"'},{value:'"one-time-code"'},{value:'"organization-title"'},{value:'"organization"'},{value:'"street-address"'},{value:'"address-line1"'},{value:'"address-line2"'},{value:'"address-line3"'},{value:'"address-level4"'},{value:'"address-level3"'},{value:'"address-level2"'},{value:'"address-level1"'},{value:'"country"'},{value:'"country-name"'},{value:'"postal-code"'},{value:'"cc-name"'},{value:'"cc-given-name"'},{value:'"cc-additional-name"'},{value:'"cc-family-name"'},{value:'"cc-number"'},{value:'"cc-exp"'},{value:'"cc-exp-month"'},{value:'"cc-exp-year"'},{value:'"cc-csc"'},{value:'"cc-type"'},{value:'"transaction-currency"'},{value:'"transaction-amount"'},{value:'"language"'},{value:'"bday"'},{value:'"bday-day"'},{value:'"bday-month"'},{value:'"bday-year"'},{value:'"tel-country-code"'},{value:'"tel-national"'},{value:'"tel-area-code"'},{value:'"tel-local"'},{value:'"tel-extension"'}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"string"}},iconType:{defaultValue:null,description:"",name:"iconType",required:!1,type:{name:"enum",value:[{value:'"thin"'},{value:'"light"'},{value:'"regular"'},{value:'"solid"'}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"string"}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"string"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"((event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void)"}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"((event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void)"}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"((event: FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>) => void)"}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"((event: KeyboardEvent<Element>) => void)"}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"((event: KeyboardEvent<Element>) => void)"}},onEnterKey:{defaultValue:null,description:"",name:"onEnterKey",required:!1,type:{name:"((event: KeyboardEvent<Element>) => void)"}}}}}catch{}export{m as T};