UNPKG

@rdsaude/pulso-react-components

Version:

Biblioteca de componentes React do Pulso Design System da RD Saúde oferece componentes consistentes e de alto desempenho, alinhados com os padrões da RDSaúde. Ideal para desenvolver aplicações modernas e acessíveis.

2 lines 7.08 kB
import{a as g,b}from"./chunk-FQCU2UPX.js";import{a as d}from"./chunk-JOWCR2VE.js";import{a as I}from"./chunk-F3QZNV6U.js";import{a as i,b as u,c as s,d as M}from"./chunk-VXGPURSP.js";var F={};M(F,{Actions:()=>w,ClearButton:()=>N,Field:()=>v,HelperText:()=>A,Icon:()=>L,Label:()=>P,Root:()=>y});import{Field as S,useField as E}from"@ark-ui/react/field";import{forwardRef as B,useState as D}from"react";import{jsx as q}from"react/jsx-runtime";var y=B((f,m)=>{var c=f,{children:p,size:e="ml",value:t,disabled:n,readOnly:r,hasError:l}=c,o=s(c,["children","size","value","disabled","readOnly","hasError"]);let[a,x]=D(!1),h=E({disabled:n,invalid:l}),T=g(p,{targets:["InputTextLabel","InputTextActions","InputTextHelperText"],props:{size:e,readOnly:r,hasError:l,value:t,disabled:n}});return q(S.RootProvider,u(i({},o),{ref:m,className:"flex w-full flex-col gap-halfpulse",value:h,children:T}))});y.displayName="InputTextRoot";import{Field as O}from"@ark-ui/react/field";import{forwardRef as _}from"react";import{jsx as H}from"react/jsx-runtime";var P=_((o,l)=>{var m=o,{children:p,size:e="ml",disabled:t,readOnly:n}=m,r=s(m,["children","size","disabled","readOnly"]);return p?H("div",{className:"flex h-extrasmall w-[100%] items-center rounded-none border-none px-onepulse text-left",children:H(O.Label,u(i({ref:l,className:d("w-[100%] align-middle m-none p-none text-left font-rdmodern font-regular tracking-tiny text-text-neutral text-nowrap truncate leading",{"text-threepulse":e==="md","text-threeandhalfpulse":e==="ml"||e==="lg"||e==="xl","cursor-not-allowed text-text-neutral-disabled":t,"cursor-not-allowed text-text-neutral-readonly":n&&!t}),"aria-disabled":t},r),{children:p}))}):null});P.displayName="InputTextLabel";import{Field as W}from"@ark-ui/react/field";import{forwardRef as G}from"react";import{jsx as J}from"react/jsx-runtime";var v=G((c,f)=>{var a=c,{onFocus:p,onBlur:e,size:t="ml",disabled:n,readOnly:r,isActive:l,setActive:o}=a,m=s(a,["onFocus","onBlur","size","disabled","readOnly","isActive","setActive"]);let x=T=>{o==null||o(!0),p==null||p(T)},h=T=>{o==null||o(!1),e==null||e(T)};return J(W.Input,i({ref:f,disabled:n,readOnly:r,placeholder:"Placeholder is hidden",className:d("peer/field flex w-[100%] bg-[transparent] !font-rdmodern font-regular text-text-neutral-alternative tracking-tiny leading-small placeholder:opacity-transparent focus-visible:border-none focus-visible:outline-none",{"text-threepulse":t==="md","text-threeandhalfpulse":t==="ml"||t==="lg"||t==="xl","text-text-neutral-readonly":r,"cursor-not-allowed text-text-neutral-disabled":n,"text-text-neutral":l}),onFocus:x,onBlur:h},m))});v.displayName="InputTextField";import{ark as K}from"@ark-ui/react";import{forwardRef as Q}from"react";import{jsx as U}from"react/jsx-runtime";var w=Q((c,f)=>{var a=c,{children:p,size:e="ml",disabled:t,readOnly:n,hasError:r,value:l,isActive:o}=a,m=s(a,["children","size","disabled","readOnly","hasError","value","isActive"]);let x=g(p,{targets:["InputTextIcon","InputTextField","InputTextClearButton"],props:{size:e,disabled:t,readOnly:n,hasError:r,value:l,isActive:o}});return U(K.div,u(i({ref:f,className:d("group flex w-[100%] items-center justify-between gap-onepulse py-threepulse duration-100 ease-in bg-forms-filled ring-forms-border-filled ring-quarterpulse overflow-hidden focus-within:ring-halfpulse focus-within:bg-forms-fill-focused min-w-[calc(var(--sizing-huge)_+_var(--sizing-tiny))]",{"h-medium rounded-form px-twopulse":e==="md","h-mediumlarge rounded-form px-threepulse":e==="ml","h-large rounded-form px-threepulse":e==="lg","h-extralarge rounded-largecontainer px-threepulse":e==="xl","cursor-not-allowed ring-forms-border-disabled ring-quarterpulse":t,"cursor-not-allowed bg-forms-fill-readonly ring-forms-border-readonly ring-quarterpulse":n&&!t,"bg-forms-fill-error ring-forms-border-error hover:ring-halfpulse":r&&!!l&&!o,"bg-forms-fill-error ring-forms-border-error ring-halfpulse hover:bg-forms-fill-error hover:ring-halfpulse":r&&o,"bg-forms-fill ring-forms-border-error hover:bg-forms-fill-hovered hover:ring-bg-forms-hovered hover:ring-halfpulse":r&&!l&&!o},!n&&!t&&!r&&"hover:ring-halfpulse [&:not(:focus-within)]:has-[:placeholder-shown]:bg-forms-fill [&:not(:focus-within)]:has-[:placeholder-shown]:hover:bg-forms-fill-hovered",!r&&!n&&!t&&"focus-within:ring-action-border-focused hover:ring-halfpulse [&:not(:focus-within)]:has-[:placeholder-shown]:ring-forms-border [&:not(:focus-within)]:has-[:placeholder-shown]:hover:ring-forms-border-hovered [&:not(:focus-within)]:has-[:placeholder-shown]:ring-none"),"aria-disabled":t,"data-disabled":t},m),{children:x}))});w.displayName="InputTextActions";import{forwardRef as V}from"react";import{jsx as R,jsxs as X}from"react/jsx-runtime";var A=V((c,f)=>{var a=c,{withIcon:p,iconName:e="rdicon-warning-circle",children:t,size:n="ml",disabled:r,readOnly:l,hasError:o}=a,m=s(a,["withIcon","iconName","children","size","disabled","readOnly","hasError"]);if(!t)return null;let x=o?"rdicon-warning-circle":e,h=o||p,T=r?"colorTextNeutralDisabled":l?"colorTextNeutralReadonly":o?"colorTextDangerAlternative":"colorTextNeutralAlternative";return X("div",u(i({ref:f,"aria-disabled":r,className:d("justify-star flex w-[100%] flex-wrap items-center gap-onepulse px-onepulse text-left font-rdmodern font-semibold text-text-neutral-alternative text-threepulse",{"text-text-danger-alternative":o,"cursor-not-allowed":l,"cursor-not-allowed text-text-neutral-disabled":r,"text-text-neutral-readonly":l&&!r})},m),{children:[h&&R("div",{className:"flex items-center",children:R(I,{symbol:x,color:T,size:"tiny"})}),R("span",{className:"flex flex-1",children:t})]}))});A.displayName="InputTextHelperText";import{forwardRef as Y}from"react";import{jsx as k}from"react/jsx-runtime";var N=Y((c,f)=>{var a=c,{size:p,size:e="ml",disabled:t,readOnly:n,hasError:r,value:l,isActive:o}=a,m=s(a,["size","size","disabled","readOnly","hasError","value","isActive"]);return k("div",{className:d("input-text-clear-button",{"-mr-[6px]":e==="md","-mr-[8px]":e==="ml"||e==="lg"||e==="xl","invisible hidden":n||t||o||!l||!l.length}),"aria-disabled":t||n,children:k(b.Root,u(i({},m),{size:p||e,disabled:t||n,variant:"neutral-tertiary",className:d("!px-none",{"!h-medium !w-medium":e==="md","!h-mediumlarge !min-w-mediumlarge":e==="ml"||e==="lg"||e==="xl"}),children:k(b.Icon,{symbol:"rdicon-dismiss-circle-outline"})}))})});N.displayName="InputTextClearButton";import{ark as Z}from"@ark-ui/react";import{forwardRef as $}from"react";import{jsx as C}from"react/jsx-runtime";var L=$((m,o)=>{var f=m,{color:p="colorTextNeutralDefault",symbol:e,size:t="ml",disabled:n,readOnly:r}=f,l=s(f,["color","symbol","size","disabled","readOnly"]);let c=(()=>{let x={md:"extra-small",ml:"small",lg:"small",xl:"small"};return x==null?void 0:x[t]})(),a=()=>n?"colorTextNeutralDisabled":r?"colorTextNeutralReadonly":"colorTextNeutralDefault";return C(Z.div,u(i({ref:o,className:"flex items-center"},l),{children:C(I,{symbol:e,color:a(),size:c})}))});L.displayName="InputTextIcon";export{F as a}; //# sourceMappingURL=chunk-36ZIRLLD.js.map