@infinityfx/fluid/dist/components/input/textarea.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsx as r}from"react/jsx-runtime";import{combineClasses as e,classes as o}from"../../core/utils.js";import a from"../../hooks/use-input-props.js";import{useState as t}from"react";import i from"../layout/scrollarea.js";import{createStyles as l}from"../../core/style.js";const s=l("textarea",{".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".textarea":{display:"flex",flexDirection:"column",outline:"solid 3px transparent",backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"var(--f-radius-sml)",transition:"border-color .2s, outline-color .2s",minWidth:"min(var(--width, 100vw), 12em)"},".textarea:focus-within":{borderColor:"var(--f-clr-primary-100)",outlineColor:"var(--f-clr-primary-500)"},".input":{flexShrink:0,flexGrow:1,width:"100%",resize:"none",outline:"none",border:"none",background:"none",overflow:"visible",padding:".6em",color:"var(--f-clr-text-100)"},'.textarea[data-error="true"]':{borderColor:"var(--f-clr-error-100)"},'.textarea[data-error="true"]:focus-within':{outlineColor:"var(--f-clr-error-400)"},'.textarea[data-error="true"] .input':{color:"var(--f-clr-error-200)"},'.textarea[data-disabled="true"]':{backgroundColor:"var(--f-clr-grey-100)",borderColor:"var(--f-clr-grey-200)"},'.textarea[data-disabled="true"] .input':{color:"var(--f-clr-grey-500)"}});function n({cc:l={},size:n="med",error:d,resize:f="both",...c}){const m=e(s,l),[u,x]=a(c),[p,v]=t(1);return r(i,{...x,className:o(m.textarea,m[`s__${n}`],c.className),"data-error":!!d,"data-disabled":c.disabled,style:{...c.style,resize:f,height:`calc(${c.rows||2}lh + 1.2em)`},children:r("textarea",{...u,rows:p,className:m.input,"aria-invalid":!!d,onChange:r=>{u.onChange?.(r),v(r.target.value.split(/\n/g).length)}})})}export{n as default};
//# sourceMappingURL=textarea.js.map