@snowball-tech/fractal/dist/InputText/InputText.js

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

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