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.12 kB
import{a as g,b as y}from"./chunk-FQCU2UPX.js";import{a as d}from"./chunk-JOWCR2VE.js";import{a as I}from"./chunk-F3QZNV6U.js";import{a,b as u,c as i,d as S}from"./chunk-VXGPURSP.js";var H={};S(H,{Actions:()=>R,ClearButton:()=>L,Field:()=>w,HelperText:()=>k,Icon:()=>F,Label:()=>v,Root:()=>P});import{Field as E,useField as B}from"@ark-ui/react/field";import{forwardRef as D,useState as q}from"react";import{jsx as O}from"react/jsx-runtime";var P=D((h,s)=>{var f=h,{children:p,size:e="ml",value:t,disabled:n,readOnly:r,hasError:l}=f,o=i(f,["children","size","value","disabled","readOnly","hasError"]);let[m,x]=q(!1),c=B({disabled:n,invalid:l}),T=g(p,{targets:["InputTextLabel","InputTextActions","InputTextHelperText"],props:{size:e,readOnly:r,hasError:l,value:t,disabled:n}});return O(E.RootProvider,u(a({},o),{ref:s,className:"flex w-full flex-col gap-halfpulse",value:c,children:T}))});P.displayName="InputTextRoot";import{Field as _}from"@ark-ui/react/field";import{forwardRef as W}from"react";import{jsx as C}from"react/jsx-runtime";var v=W((o,l)=>{var s=o,{children:p,size:e="ml",disabled:t,readOnly:n}=s,r=i(s,["children","size","disabled","readOnly"]);return p?C("div",{className:"flex h-extrasmall w-[100%] items-center rounded-none border-none px-onepulse text-left",children:C(_.Label,u(a({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});v.displayName="InputTextLabel";import{Field as G}from"@ark-ui/react/field";import{forwardRef as J}from"react";import{jsx as K}from"react/jsx-runtime";var w=J((m,f)=>{var x=m,{onFocus:p,onBlur:e,size:t="ml",disabled:n,readOnly:r,isActive:l,setActive:o,hasError:s}=x,h=i(x,["onFocus","onBlur","size","disabled","readOnly","isActive","setActive","hasError"]);let c=b=>{o==null||o(!0),p==null||p(b)},T=b=>{o==null||o(!1),e==null||e(b)};return K(G.Input,a({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:c,onBlur:T},h))});w.displayName="InputTextField";import{ark as Q}from"@ark-ui/react";import{forwardRef as U}from"react";import{jsx as V}from"react/jsx-runtime";var R=U((f,h)=>{var m=f,{children:p,size:e="ml",disabled:t,readOnly:n,hasError:r,value:l,isActive:o}=m,s=i(m,["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 V(Q.div,u(a({ref:h,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},s),{children:x}))});R.displayName="InputTextActions";import{forwardRef as X}from"react";import{jsx as A,jsxs as Y}from"react/jsx-runtime";var k=X((f,h)=>{var m=f,{withIcon:p,iconName:e="rdicon-warning-circle",children:t,size:n="ml",disabled:r,readOnly:l,hasError:o}=m,s=i(m,["withIcon","iconName","children","size","disabled","readOnly","hasError"]);if(!t)return null;let x=o?"rdicon-warning-circle":e,c=o||p,T=r?"colorTextNeutralDisabled":l?"colorTextNeutralReadonly":o?"colorTextDangerAlternative":"colorTextNeutralAlternative";return Y("div",u(a({ref:h,"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})},s),{children:[c&&A("div",{className:"flex items-center",children:A(I,{symbol:x,color:T,size:"tiny"})}),A("span",{className:"flex flex-1",children:t})]}))});k.displayName="InputTextHelperText";import{forwardRef as Z}from"react";import{jsx as N}from"react/jsx-runtime";var L=Z((f,h)=>{var m=f,{size:p,size:e="ml",disabled:t,readOnly:n,hasError:r,value:l,isActive:o}=m,s=i(m,["size","size","disabled","readOnly","hasError","value","isActive"]);return N("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:N(y.Root,u(a({},s),{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:N(y.Icon,{symbol:"rdicon-dismiss-circle-outline"})}))})});L.displayName="InputTextClearButton";import{ark as $}from"@ark-ui/react";import{forwardRef as j}from"react";import{jsx as M}from"react/jsx-runtime";var F=j((h,s)=>{var f=h,{color:p="colorTextNeutralDefault",symbol:e,size:t="ml",disabled:n,readOnly:r,isActive:l}=f,o=i(f,["color","symbol","size","disabled","readOnly","isActive"]);let m=(()=>{let c={md:"extra-small",ml:"small",lg:"small",xl:"small"};return c==null?void 0:c[t]})(),x=()=>n?"colorTextNeutralDisabled":r?"colorTextNeutralReadonly":"colorTextNeutralDefault";return M($.div,u(a({ref:s,className:"flex items-center"},o),{children:M(I,{symbol:e,color:x(),size:m})}))});F.displayName="InputTextIcon";export{H as a}; //# sourceMappingURL=chunk-K5BI6VP3.js.map