@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.17 kB
JavaScript
import{a as g,b as y}from"./chunk-FQCU2UPX.js";import{a as f}from"./chunk-JOWCR2VE.js";import{a as I}from"./chunk-F3QZNV6U.js";import{a,b as u,c as i,d as M}from"./chunk-VXGPURSP.js";var H={};M(H,{Actions:()=>A,ClearButton:()=>L,Field:()=>w,HelperText:()=>k,Icon:()=>F,Label:()=>v,Root:()=>P});import{Field as S,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((m,d)=>{var h=m,{children:p,size:e="ml",value:t,disabled:n,readOnly:r,hasError:l}=h,o=i(h,["children","size","value","disabled","readOnly","hasError"]);let[s,x]=q(!1),T=B({disabled:n,invalid:l}),c=g(p,{targets:["InputTextLabel","InputTextActions","InputTextHelperText"],props:{size:e,readOnly:r,hasError:l,value:t,disabled:n}});return O(S.RootProvider,u(a({},o),{ref:d,className:"flex w-full flex-col gap-halfpulse",value:T,children:c}))});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((d,o)=>{var m=d,{children:p,size:e="ml",disabled:t,readOnly:n,hasError:r}=m,l=i(m,["children","size","disabled","readOnly","hasError"]);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:o,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":n&&!t}),"aria-disabled":t},l),{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((s,h)=>{var x=s,{onFocus:p,onBlur:e,size:t="ml",disabled:n,readOnly:r,isActive:l,setActive:o,hasError:d}=x,m=i(x,["onFocus","onBlur","size","disabled","readOnly","isActive","setActive","hasError"]);let T=b=>{o==null||o(!0),p==null||p(b)},c=b=>{o==null||o(!1),e==null||e(b)};return K(G.Input,a({ref:h,disabled:n,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":n,"text-text-neutral":l}),onFocus:T,onBlur:c},m))});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 A=U((h,m)=>{var s=h,{children:p,size:e="ml",disabled:t,readOnly:n,hasError:r,value:l,isActive:o}=s,d=i(s,["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:m,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":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},d),{children:x}))});A.displayName="InputTextActions";import{forwardRef as X}from"react";import{jsx as R,jsxs as Y}from"react/jsx-runtime";var k=X((h,m)=>{var s=h,{withIcon:p,iconName:e="rdicon-warning-circle",children:t,size:n="ml",disabled:r,readOnly:l,hasError:o}=s,d=i(s,["withIcon","iconName","children","size","disabled","readOnly","hasError"]);if(!t)return null;let x=o?"rdicon-warning-circle":e,T=o||p,c=r?"colorTextNeutralDisabled":l?"colorTextNeutralReadonly":o?"colorTextDangerAlternative":"colorTextNeutralAlternative";return Y("div",u(a({ref:m,"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":l,"cursor-not-allowed text-text-neutral-disabled":r,"text-text-neutral-readonly":l&&!r})},d),{children:[T&&R("div",{className:"flex items-center",children:R(I,{symbol:x,color:c,size:"tiny"})}),R("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((h,m)=>{var s=h,{size:p,size:e="ml",disabled:t,readOnly:n,hasError:r,value:l,isActive:o}=s,d=i(s,["size","size","disabled","readOnly","hasError","value","isActive"]);return N("div",{className:f("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({},d),{size:p||e,disabled:t||n,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: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 E}from"react/jsx-runtime";var F=j((h,m)=>{var s=h,{color:p="colorTextNeutralDefault",symbol:e,size:t="ml",disabled:n,readOnly:r,isActive:l,hasError:o}=s,d=i(s,["color","symbol","size","disabled","readOnly","isActive","hasError"]);let x=(()=>{let c={md:"extra-small",ml:"small",lg:"small",xl:"small"};return c==null?void 0:c[t]})(),T=()=>n?"colorTextNeutralDisabled":r?"colorTextNeutralReadonly":"colorTextNeutralDefault";return E($.div,u(a({ref:m,className:"flex items-center"},d),{children:E(I,{symbol:e,color:T(),size:x})}))});F.displayName="InputTextIcon";export{H as a};
//# sourceMappingURL=chunk-TUGN6YCW.js.map