@snowball-tech/fractal/dist/Textarea/Textarea.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 ee}from"../helpers-DBEwVIlX.js";import{Typography as n}from"../Typography/Typography.js";import{r}from"../utils-K22C_6qC.js";import{Button as i}from"../Button/Button.js";import{GROUP_NAME as a}from"./Textarea.constants.js";import{forwardRef as o,useId as s}from"react";import c from"lodash/fp/isFunction.js";import l from"lodash/fp/isString.js";import u from"lodash/fp/omit.js";import d from"lodash/fp/isNil.js";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{Label as m}from"@radix-ui/react-label";import h from"lodash/fp/isError.js";import g from"react-textarea-autosize";const _=o(({autoFocus:o=!1,defaultValue:_,description:v,disabled:y=!1,error:b,fullWidth:x=!1,icon:S,iconButtonLabel:C,iconDisabled:w,id:T,label:E,labelElement:D,maxRows:O,minRows:k=1,name:A,onChange:j,onHeightChange:M,onIconClick:N,placeholder:P,readOnly:F=!1,required:I=!1,selectOnFocus:L=!0,success:R,value:z,...B},V)=>{let H=s(),U=(T??H)||H,W=h(b)?b.message:b,G=b!==!0&&!!W,K=R!==!0&&!!R,q=G||b===!0||h(b),J=(K||R===!0)&&!q,Y=e=>{c(j)&&j(e,e.target.value)},te=e=>{c(B.onFocus)&&B.onFocus(e),L&&e.target&&e.target.select()},X=y;c(N)&&(X=d(w)?y:w);let Z=!y&&!F,Q=!!S,$=l(E)?E:r(E);return p(`div`,{className:ee(`${e}-${a}`,`flex w-full max-w-full flex-col gap-1 text-dark`,`${e}-${a}--${Z?``:`not-`}writable`,y?`${e}-${a}--disabled`:``,F&&!y?`cursor-default`:``,x?`${e}-${a}--full-width`:`sm:w-fit`,q?`${e}-${a}--with-error`:``,F?`${e}-${a}--readonly`:``,I?`${e}-${a}--required`:``,J?`${e}-${a}--with-success`:``,S?`${e}-${a}--with-icon`:``,c(N)&&S?`${e}-${a}--with-action`:``,B.className),children:[E?f(m,{asChild:!0,className:t(`${e}-${a}__label`,I?`${e}-${a}__label--required after:text-feedback-danger-50 after:content-required`:``),htmlFor:U,children:f(n,{element:D||(l(E)?`label`:`div`),children:E})}):!1,p(n,{className:t(`${e}-${a}__wrapper`,`relative w-full`,x?``:`sm:w-fit`),element:`div`,children:[f(g,{"aria-label":$,autoFocus:o,className:t(`${e}-${a}__input`,`box-border min-h-6 w-full max-w-full resize-none rounded-sm border-1 px-2 py-[calc(theme(spacing.1)+theme(spacing.half)+theme(spacing.quarter))] text-left leading-[inherit] outline-none transition-border-color duration-300 ease-out placeholder:text-placeholder focus:cursor-text`,Z?`${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`,y?`${e}-${a}__input--disabled cursor-not-allowed text-disabled`:`text-dark`,F&&!y?`${e}-${a}__input--readonly cursor-default`:``,x?`${e}-${a}__input--fullWidth`:`sm:w-unset`,q?`${e}-${a}__input--with-error border-error shadow-error`:``,J?`${e}-${a}__input--with-success border-success shadow-success`:``,Z&&!q&&!J?`border-normal`:``,I?`${e}-${a}--required`:``,Q?`pr-6`:``),disabled:y,title:$,..._===void 0?{}:{defaultValue:_},id:U,ref:V,...O===void 0?{}:{maxRows:O},...k===void 0?{}:{minRows:k},name:A||U,placeholder:P,readOnly:F,required:I,value:z,onChange:Y,onFocus:te,...c(M)?{onHeightChange:M}:{},...u([`className`,`onFocus`],B)}),Q&&p(`div`,{className:`absolute bottom-one-and-half right-half`,children:[c(N)&&f(i,{className:t(`fractal-input-textarea__action`,`mb-half mr-one-and-half text-grey-50`,X?`fractal-input-textarea__action--disabled cursor-not-allowed !text-grey-70`:`hover:!text-dark`),disabled:X,icon:S,iconOnly:!0,label:C,variant:`text`,onClick:N}),!c(N)&&f(`div`,{className:t(`fractal-input-textarea__icon`,`mr-one-and-half text-grey-50`,X||y?`fractal-input-textarea__icon--disabled cursor-not-allowed !text-grey-70`:``),children:S})]})]}),v&&!G&&!K&&f(n,{className:t(`fractal-input-textarea__description`,`cursor-default text-dark`),element:`div`,variant:`caption-median`,children:v}),(G||K)&&f(n,{className:t(`fractal-input-textarea__message fractal-input-textarea__message--${q?`error`:`success`}`,`cursor-default text-dark`),element:`div`,variant:`caption-median`,children:q?h(b)?b.message:b:R})]})});_.displayName=`Textarea`;export{_ as Textarea,_ as default};
//# sourceMappingURL=Textarea.js.map