@infinityfx/fluid
Version:
React UI library, using zero-runtime CSS-in-JS.
4 lines (3 loc) • 2.04 kB
JavaScript
"use client";
import{jsx as r,jsxs as e}from"react/jsx-runtime";import{combineClasses as o,classes as t}from"../../core/utils.js";import a from"../../hooks/use-input-props.js";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)"},".stretch":{position:"relative",whiteSpace:"pre-wrap",padding:".6em",flexShrink:0,flexGrow:1,color:"transparent"},".input":{position:"absolute",inset:0,width:"100%",height:"100%",resize:"none",outline:"none",border:"none",background:"none",overflow:"hidden",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:c="both",...f}){const m=o(s,l),[u,p]=a(f);return r(i,{...p,className:t(m.textarea,m[`s__${n}`],f.className),"data-error":!!d,"data-disabled":f.disabled,"data-fb":!0,style:{resize:c,minHeight:`calc(${f.rows||2}lh + 1.2em)`,...f.style},children:e("div",{className:m.stretch,children:[u.value,r("textarea",{...u,className:m.input,"aria-invalid":!!d})]})})}export{n as default};
//# sourceMappingURL=textarea.js.map