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.29 kB
import{a as I,b}from"./chunk-FQCU2UPX.js";import{a as f}from"./chunk-JOWCR2VE.js";import{a as g}from"./chunk-F3QZNV6U.js";import{a as i,b as d,c as s,d as M}from"./chunk-VXGPURSP.js";var H={};M(H,{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((x,m)=>{var c=x,{children:p,size:e="ml",value:t,disabled:l,readOnly:r,hasError:n}=c,o=s(c,["children","size","value","disabled","readOnly","hasError"]);let[a,u]=D(!1),h=E({disabled:l,invalid:n}),T=I(p,{targets:["InputTextLabel","InputTextActions","InputTextHelperText"],props:{size:e,readOnly:r,hasError:n,value:t,isActive:a,setActive:u}});return q(S.RootProvider,d(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 F}from"react/jsx-runtime";var P=_((o,n)=>{var m=o,{children:p,size:e="ml",disabled:t,readOnly:l}=m,r=s(m,["children","size","disabled","readOnly"]);return p?F("div",{className:"flex h-extrasmall w-[100%] items-center rounded-none border-none px-onepulse text-left",children:F(O.Label,d(i({ref:n,className:f("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":l&&!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,x)=>{var a=c,{onFocus:p,onBlur:e,size:t="ml",disabled:l,readOnly:r,isActive:n,setActive:o}=a,m=s(a,["onFocus","onBlur","size","disabled","readOnly","isActive","setActive"]);let u=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:x,disabled:l,readOnly:r,placeholder:"Placeholder is hidden",className:f("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":l,"text-text-neutral":n}),onFocus:u,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,x)=>{var a=c,{children:p,size:e="ml",disabled:t,readOnly:l,hasError:r,value:n,isActive:o}=a,m=s(a,["children","size","disabled","readOnly","hasError","value","isActive"]);let u=I(p,{targets:["InputTextIcon","InputTextField","InputTextClearButton"],props:{}});return U(K.div,d(i({ref:x,className:f("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":l&&!t,"bg-forms-fill-error ring-forms-border-error hover:ring-halfpulse":r&&!!n&&!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&&!n&&!o},!l&&!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&&!l&&!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:u}))});w.displayName="InputTextActions";import{forwardRef as V}from"react";import{jsx as R,jsxs as X}from"react/jsx-runtime";var A=V((c,x)=>{var a=c,{withIcon:p,iconName:e="rdicon-warning-circle",children:t,size:l="ml",disabled:r,readOnly:n,hasError:o}=a,m=s(a,["withIcon","iconName","children","size","disabled","readOnly","hasError"]);if(console.log("InputTextHelperText render:",{children:t,hasError:o,disabled:r,readOnly:n,withIcon:p,iconName:e}),!t)return console.log("InputTextHelperText: no children, returning null"),null;let u=o?"rdicon-warning-circle":e,h=o||p,T=r?"colorTextNeutralDisabled":n?"colorTextNeutralReadonly":o?"colorTextDangerAlternative":"colorTextNeutralAlternative";return console.log("InputTextHelperText: rendering with",{symbol:u,displayIcon:h,iconColor:T}),X("div",d(i({ref:x,"aria-disabled":r,className:f("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":n,"cursor-not-allowed text-text-neutral-disabled":r,"text-text-neutral-readonly":n&&!r})},m),{children:[h&&R("div",{className:"flex items-center",children:R(g,{symbol:u,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,x)=>{var a=c,{size:p,size:e="ml",disabled:t,readOnly:l,hasError:r,value:n,isActive:o}=a,m=s(a,["size","size","disabled","readOnly","hasError","value","isActive"]);return k("div",{className:f("input-text-clear-button",{"-mr-[6px]":e==="md","-mr-[8px]":e==="ml"||e==="lg"||e==="xl","invisible hidden":l||t||o||!n||!n.length}),"aria-disabled":t||l,children:k(b.Root,d(i({},m),{size:p||e,disabled:t||l,variant:"neutral-tertiary",className:f("!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 x=m,{color:p="colorTextNeutralDefault",symbol:e,size:t="ml",disabled:l,readOnly:r}=x,n=s(x,["color","symbol","size","disabled","readOnly"]);let c=(()=>{let u={md:"extra-small",ml:"small",lg:"small",xl:"small"};return u==null?void 0:u[t]})(),a=()=>l?"colorTextNeutralDisabled":r?"colorTextNeutralReadonly":"colorTextNeutralDefault";return C(Z.div,d(i({ref:o,className:"flex items-center"},n),{children:C(g,{symbol:e,color:a(),size:c})}))});L.displayName="InputTextIcon";export{H as a}; //# sourceMappingURL=chunk-AP7Q6ETC.js.map