UNPKG

@snowball-tech/fractal

Version:

Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS

3 lines 5.58 kB
'use client'; import{a as t}from"./chunk-UQJAQAHD.js";import{e as J}from"./chunk-WJB4GYBF.js";import{c as z}from"./chunk-LYTTDLE2.js";import{a as h}from"./chunk-AOLTZ2WJ.js";import{b as e}from"./chunk-CMFNILWJ.js";import{a as o,b as F}from"./chunk-XYM7TA65.js";import{Label as ue}from"@radix-ui/react-label";import{forwardRef as me,useId as pe,useState as fe}from"react";import $ from"lodash/fp/isEmpty";import M from"lodash/fp/isError";import K from"lodash/fp/isFunction";import L from"lodash/fp/isNil";import Q from"lodash/fp/isString";import Y from"lodash/fp/omit";import{jsx as d,jsxs as R}from"react/jsx-runtime";var Z=me(({autoFocus:V=!1,button:a={},defaultValue:C,description:H,disabled:s=!1,error:i,extraSmall:B=!1,fullWidth:_=!1,id:P,label:u,labelElement:W,name:O,onButtonClick:ee,onChange:S,placeholder:te,prefix:x,readOnly:c=!1,required:g=!1,selectOnFocus:ae=!0,success:v,suffix:w,type:k="text",value:re,withButton:r=!1,withSpinButton:oe=!1,...m},se)=>{let q=pe(),N=(P??q)||q,[D,ie]=fe(null),le=M(i)?i.message:i,I=i!==!0&&!!le,T=v!==!0&&!!v,l=I||i===!0||M(i),b=(T||v===!0)&&!l,ne=n=>{K(S)&&S(n,n.target.value)},de=n=>{K(m.onFocus)&&m.onFocus(n),ae&&n.target&&n.target.select()},p=m.inputMode??"text";switch(k){case"email":{p="email";break}case"number":{p="decimal";break}case"search":{p="search";break}case"tel":{p="tel";break}case"url":{p="url";break}default:break}let f=!s&&!c,A=!!x,G=!!w,E=!L(D?.closest(`.${e}-dialog__content`)),ce=!L(D?.closest(`.${e}-input-phone__fields__phone-number`)),U=o("flex max-w-full absolute top-1/2 w-fit",ce&&!E?"-translate-y-[calc(50%-1px)]":"-translate-y-1/2"),y=L(a?.disabled)?s||c:a.disabled,X=r&&d(J,{className:F("rounded-0 border-1 border-l-0 hover:bg-primary hover:text-dark focus:bg-primary focus:text-dark active:border-l-0 active:!border-black active:shadow-hover",y?"border-disabled hover:bg-disabled hover:text-light focus:bg-disabled focus:text-light active:border-1 active:border-l-0 active:!border-disabled active:shadow-none":"",(s||c)&&!y?"border-l-1 active:border-l-1":"",a?.position==="left"?"rounded-l-full":"rounded-r-full",a?.className),disabled:y,variant:"primary",onClick:ee,...Y(["variant","onClick","className","position","disabled"],a)}),j=Q(u)?u:z(u);return R("div",{ref:n=>ie(n),className:F(`${e}-${t}`,"flex w-full max-w-full flex-col gap-1 text-dark",`${e}-${t}--${f?"":"not-"}-writable`,s?`${e}-${t}--disabled`:"",c&&!s?"cursor-default":"",_?`${e}-${t}--full-width`:"sm:w-fit",l?`${e}-${t}--with-error`:"",!$(x)||!$(w)?`${e}-${t}--with-addendum`:"",$(x)?"":`${e}-${t}--with-prefix`,$(w)?"":`${e}-${t}--with-suffix`,c?`${e}-${t}--readonly`:"",g?`${e}-${t}--required`:"",b?`${e}-${t}--with-success`:"",m.className),children:[u?d(ue,{asChild:!0,className:o(`${e}-${t}__label`,"text-dark",s?`${e}-${t}__label--disabled cursor-default`:"cursor-pointer",g?`${e}-${t}__label--required after:text-feedback-danger-50 after:content-required`:""),htmlFor:N,children:d(h,{element:W||(Q(u)?"label":"div"),children:u})}):!1,R(h,{className:o(`${e}-${t}__wrapper`,"w-full max-w-full",_?"":"sm:w-fit",r?"flex":""),element:"div",children:[r&&a?.position==="left"&&X,R("div",{className:o(`${e}-${t}__icon-wrapper`,"relative",_?"w-full":""),children:[A&&d("div",{className:o(`${e}-${t}__addendum ${e}-${t}__addendum--prefix`,U,f?"":"text-disabled",r?E?"left-4":"left-2":E?"left-3":"left-1"),children:x}),d("input",{id:N,ref:se,"aria-label":j,autoFocus:V,className:o(`${e}-${t}__input`,"box-border h-6 max-h-6 w-full min-w-6 max-w-full border-1 px-2 py-1 text-left outline-none transition-border-color duration-300 ease-out placeholder:text-placeholder",B?"to-sm:min-w-5 to-sm:px-1":"",r?`${e}-${t}__input--with-button ${e}-${t}__input--with-button--${a?.position??"right"}`:"rounded-sm",r&&a?.position==="left"?"rounded-r-full":"",r&&($(a?.position)||a?.position==="right")?"rounded-l-full":"",f?`${e}-${t}__input--writable bg-white hover:border-normal hover:shadow-hover focus:border-primary focus:shadow-primary [&:is([data-state="open"])]:bg-primary [&:is([data-state="open"])]:shadow-primary`:`${e}-${t}__input--not-writable border-disabled bg-disabled-light placeholder:text-transparent`,s?`${e}-${t}__input--disabled cursor-not-allowed text-disabled`:"text-dark",c&&!s?`${e}-${t}__input--readonly cursor-default`:"",_?`${e}-${t}__input--full-width w-full`:"sm:w-unset",l?`${e}-${t}__input--with-error border-error shadow-error`:"",b?`${e}-${t}__input--with-success border-success shadow-success`:"",f&&!l&&!b?"border-normal":"",A?r?"pl-6":"pl-5":"",G?r?"pr-6":"pr-5":"",g?`${e}-${t}--required`:"",oe?"":"[appearance:textfield] [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden",r&&y&&f?"border-r-disabled":""),disabled:s,inputMode:p,name:O||N,pattern:m.pattern??k==="number"?"[0-9]*":void 0,placeholder:te,readOnly:c,required:g,title:j,type:k,value:re,...C===void 0?{}:{defaultValue:C},onChange:ne,onFocus:de,...Y(["className","onFocus"],m)}),G&&d("div",{className:o(`${e}-${t}__addendum ${e}-${t}__addendum--suffix`,U,"right-1",!f&&!l&&!b?"text-disabled":"",l?"text-error":"",b?"text-success":""),children:w})]}),r&&($(a?.position)||a?.position==="right")&&X]}),H&&!I&&!T&&d(h,{className:o(`${e}-${t}__description`,"cursor-default text-dark"),element:"div",variant:"caption-median",children:H}),(I||T)&&d(h,{className:o(`${e}-${t}__message ${e}-${t}__message--${l?"error":"success"}`,"cursor-default text-dark"),element:"div",variant:"caption-median",children:l?M(i)?i.message:i:v})]})});Z.displayName="InputText";var Fe=Z;export{Z as a,Fe as b}; //# sourceMappingURL=chunk-FA4DQLON.js.map