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.

47 lines 11.9 kB
import{a as B}from"./chunk-J44H5GIE.js";import{a as g}from"./chunk-W7XK6INV.js";import{a as d}from"./chunk-2MB3Y6WI.js";import{a as C}from"./chunk-DQ6V5CGR.js";import{a as p,b as f,c as S}from"./chunk-DDCCLFYC.js";import{createContextScope as we}from"@radix-ui/react-context";import{jsx as ne}from"react/jsx-runtime";var k=({children:e})=>ne("div",{className:"input-select-actions","data-testid":"input-name-actions",children:e});import{forwardRef as he,useEffect as W,useRef as xe,useState as be}from"react";import{createContextScope as ie}from"@radix-ui/react-context";import{forwardRef as de}from"react";var q=d({base:` group flex items-center justify-between rounded-pill min-w-[11.25rem] w-full gap-onepulse pl-threepulse pr-onepulse relative py-[2px] text-text-neutral leading-none border-solid bg-forms-fill border-forms-fill duration-100 ease-in hover:bg-forms-fill-hovered hover:border-forms-fill-hovered focus:border-forms-border-focused focus:bg-forms-fill-focused focus:border-halfpulse active:border-forms-fill-focused active:bg-forms-fill-focused active:border-halfpulse has-[:focus]:ring-forms-border-filled has-[:focus]:bg-forms-fill-focused has-[:focus]:border-halfpulse has-[:active]:ring-forms-border-focused has-[:active]:bg-forms-fill-focused has-[:active]:border-halfpulse focus-within:ring-action-border-focused [&:not(:focus-within)]:has-[:placeholder-shown]:border-action-border-focused [&:not(:focus-within)]:has-[:placeholder-shown]:bg-forms-fill [&:not(:focus-within)]:has-[:placeholder-shown]:hover:bg-forms-fill-hovered [&:not(:focus-within)]:has-[:not(:placeholder-shown)]:border-forms-border-filled has-[:active]:[&:not(:focus-within)]:has-[:placeholder-shown]:bg-forms-fill-focused has-[:active]:[&:not(:focus-within)]:has-[:placeholder-shown]:border-forms-border-focused has-[:active]:[&:not(:focus-within)]:has-[:not(:placeholder-shown)]:border-forms-border-focused has-[:focus]:has-[:not(:placeholder-shown)]:border-forms-border-focused `,variants:{size:{md:"h-medium",ml:"h-mediumlarge",lg:"h-large"},hasFilled:{true:` border-forms-border-filled border-quarterpulse bg-forms-fill-filled active:border-forms-fill-focused active:bg-forms-fill-focused active:border-halfpulse hover:bg-forms-fill-filled hover:border-forms-border-filled hover:border-halfpulse has-[:active]:border-forms-fill-focused has-[:active]:bg-forms-fill-focused has-[:active]:border-halfpulse [&:not(:focus-within)]:has-[:placeholder-shown]:bg-forms-fill [&:not(:focus-within)]:has-[:placeholder-shown]:hover:bg-forms-fill-hovered [&: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 `}},defaultVariants:{size:"md"}}),_=d({base:` peer/field font-wheight-regular text-text-neutral-alternative font-rdmodern font-regular text-threeandhalfpulse leading-none border-none bg-[transparent] flex-1 align-middle self-center focus-visible:border-none focus-visible:outline-none placeholder:text-text-neutral-alternative active:placeholder:text-text-neutral-placeholder focus:placeholder:text-text-neutral-placeholder active:text-text-neutral-placeholder focus:text-text-neutral-placeholder `,variants:{size:{md:"h-extrasmall",ml:"h-extrasmall",lg:"h-extrasmall"},hasFilled:{true:`text-text-neutral active:text-text-neutral `}},defaultVariants:{size:"md"}}),$=d({base:"searchbar-button bg-none",variants:{size:{md:"h-medium w-medium min-w-medium",ml:"h-mediumlarge w-mediumlarge min-w-mediumlarge",lg:"h-mediumlarge w-mediumlarge min-w-mediumlarge"}},defaultVariants:{size:"md"}}),Y=d({base:` searchbar-clear-button hidden peer-focus/field:peer-[:not(:placeholder-shown)]/field:flex peer-focus/field:peer-[:not(:placeholder-shown)]/field:visible group-hover:peer-[:not(:placeholder-shown)]/field:flex `,variants:{size:{md:"h-medium w-medium min-w-medium",ml:"h-mediumlarge w-mediumlarge min-w-mediumlarge",lg:"h-mediumlarge w-mediumlarge min-w-mediumlarge"}}});import{jsx as v,jsxs as me}from"react/jsx-runtime";var R="SearchBar",K=de((e,s)=>{let{onChange:o=()=>{},handleSearch:l=()=>{},handleClear:n=()=>{},placeholder:t,datatestid:x="search-bar",value:a="",size:r="md",__scopeSearchBar:m}=e,i=u=>u==="lg"?"ml":u;return v(pe,f(p({},e),{scope:m,children:me("div",{className:q({size:r,hasFilled:a!==""}),children:[v("input",{ref:s,type:"text",className:_({size:r,hasFilled:a!==""}),placeholder:t,onChange:u=>o(u),value:a,"data-testid":x}),v(g.Root,{size:i(r),variant:"neutral-tertiary",className:Y({size:r}),onClick:n,children:v(g.Icon,{symbol:"rdicon-dismiss-circle-outline"})}),v(g.Root,{size:i(r),variant:"neutral-tertiary",className:$({size:r}),onClick:l,children:v(g.Icon,{symbol:"rdicon-search"})})]})}))});K.displayName=R;var[ce]=ie(R),[pe,Le]=ce(R),fe={Root:K};import{useState as ue}from"react";function y(){let[e,s]=ue();return{useSelect:y,selectedOption:e,setSelectedOption:s}}var U=d({base:` flex justify-between w-full h-extrasmall p-none px-twopulse items-center text-text-neutral font-rdmodern flex-1 rounded-none leading-small z-80 placeholder:opacity-transparent focus-visible:border-none focus-visible:outline-none tracking-onepulse `,variants:{size:{md:"text-threepulse",ml:"text-threeandhalfpulse",lg:"text-threeandhalfpulse",xl:"text-threeandhalfpulse"},readOnly:{true:"text-text-neutral-readonly",false:""},disabled:{true:"text-text-neutral-disabled",false:""},hasError:{true:"bg-forms-fill-error",false:"bg-forms-fill-filled"}},defaultVariants:{size:"md",readOnly:!1,disabled:!1,hasError:!1}});import{jsx as w,jsxs as G}from"react/jsx-runtime";var E=he(x=>{var a=x,{children:e,__scopeInputSelect:s,onChangeSelectionValue:o,value:l,optionMaxHeight:n}=a,t=S(a,["children","__scopeInputSelect","onChangeSelectionValue","value","optionMaxHeight"]);let{size:r,hasError:m,disabled:i,readOnly:u,placeholder:N,options:P=[]}=h("InputSelectField",s),[z,T]=be(!1),{setSelectedOption:I,selectedOption:V}=y(),O=xe(null),D={label:N!=null?N:"Selecione...",value:""};W(()=>{if(l){let c=P.find(b=>b.value===l);return I(c)}return I(D)},[l]),W(()=>{function c(b){O.current&&!O.current.contains(b.target)&&T(!1)}return document.addEventListener("mousedown",c),()=>{document.removeEventListener("mousedown",c)}},[]);let se=c=>{I(c),T(!1),o==null||o(c.value)},M=()=>{!i&&!u&&T(!z)};return G("div",{ref:O,className:"relative flex w-full flex-col",children:[G("div",f(p({},Object.keys(t).reduce((b,F)=>(F.startsWith("data-")&&(b[F]=t[F]),b),{})),{className:U(p({size:r,hasError:m,readOnly:u,disabled:i},t)),onClick:()=>M(),onKeyUp:()=>M(),"data-testid":"select-field",children:[V?V.label:D.label,w(L.Icon,{symbol:z?"rdicon-chevron-up":"rdicon-chevron-down",color:i?"colorTextNeutralDisabled":u?"colorTextNeutralReadonly":"colorTextNeutralDefault"})]})),z&&w("div",{className:"x-full absolute top-full left-0 z-10 w-full py-fivepulse","data-testid":"select-option-menu",children:w(B.Root,f(p({type:"single"},t),{children:w(B.List,{maxHeight:n,children:P==null?void 0:P.map((c,b)=>w(B.Item,{content:c,onPress:()=>se(c),disabled:i,"data-testid":"select-item"},`${c.label}-${b}`))})}))})]})});E.displayName="InputSelectField";var J=d({base:` flex w-full border border-solid bg-forms-fill-filled border-forms-border-filled px-onepulse py-threepulse items-center gap-none self-stretch rounded-form border opacity-opaque group hover:border-halfpulse `,variants:{size:{md:"h-medium text-threepulse",ml:"h-mediumlarge text-threeandhalfpulse",lg:"h-large text-hreeandhalfpulse",xl:"h-extralarge text-threeandhalfpulse"},readOnly:{true:"border-forms-border-readonly bg-forms-fill-readonly text-text-neutral-readonly hover:border-quarterpulse",false:""},disabled:{true:"border-forms-border-disabled bg-forms-fill-disabled text-text-neutral-disabled hover:border-quarterpulse",false:""},hasError:{true:"border-forms-border-error border-quarterpulse bg-forms-fill-error",false:"border-quarterpulse"}},defaultVariants:{}});import{jsx as Se}from"react/jsx-runtime";var Q=({__scopeInputSelect:e,children:s})=>{let{hasError:o,size:l,disabled:n,readOnly:t}=h("InputSelectHelperText",e);return Se("div",{"data-testid":"select-field-container",className:J({hasError:o,size:l,disabled:n,readOnly:t}),children:s})};import{useMemo as ve}from"react";var X=d({base:"justify-star flex w-[100%] flex-wrap items-center gap-onepulse px-twopulse text-left font-rdmodern font-semibold text-text-neutral-alternative text-threepulse tracking-inline-onepulse",variants:{hasError:{true:"text-text-danger-alternative",false:""},readOnly:{true:"cursor-not-allowed"},disabled:{true:"cursor-not-allowed text-text-neutral-disabled",false:""}},compoundVariants:[{readOnly:!0,disabled:!1,class:"text-text-neutral-readonly"}],defaultVariants:{error:!1,disabled:!1,readOnly:!1}});import{jsx as A,jsxs as ge}from"react/jsx-runtime";var Z=t=>{var x=t,{withIcon:e,iconName:s="rdicon-warning-circle",__scopeInputSelect:o,children:l}=x,n=S(x,["withIcon","iconName","__scopeInputSelect","children"]);let{hasError:a,readOnly:r,disabled:m}=h("InputSelectHelperText",o),i=a?"rdicon-warning-circle":s,u=ve(()=>m?"colorTextNeutralDisabled":r?"colorTextNeutralReadonly":a?"colorTextDangerAlternative":"colorTextNeutralAlternative",[m,a,r]);return l?ge("div",f(p({},n),{"aria-disabled":m,className:X({hasError:a,disabled:m,readOnly:r}),children:[e&&A("div",{className:"flex items-center",children:A(C,{symbol:i,color:u,size:"tiny"})}),A("span",{className:"flex flex-1",children:l})]})):null};import ye from"react";import{jsx as j}from"react/jsx-runtime";function ee(l){var n=l,{__scopeInputSelect:e,color:s="colorTextNeutralDefault"}=n,o=S(n,["__scopeInputSelect","color"]);let{size:t,hasError:x,disabled:a,readOnly:r}=h("InputSelectField",e),m=ye.useMemo(()=>{let i={md:"small",ml:"small",lg:"small",xl:"small"};return i==null?void 0:i[t]},[t]);return j("div",{className:"flex h-6 h-small w-6 items-center justify-center rounded-none opacity-100",children:j(C,f(p({},o),{size:m,color:x?"colorTextDangerAlternative":a?"colorTextNeutralDisabled":r?"colorTextNeutralReadonly":"colorTextNeutralDefault"}))})}var re=d({base:` w-[100%] align-middle m-none p-none text-left font-rdmodern font-semibold tracking-tiny text-text-neutral text-nowrap truncate leading `,variants:{size:{md:"text-threepulse",ml:"text-threeandhalfpulse",lg:"text-threeandhalfpulse",xl:"text-threeandhalfpulse"},readOnly:{true:"",false:""},disabled:{true:"cursor-not-allowed text-text-neutral-disabled",false:""}},compoundVariants:[{readOnly:!0,disabled:!1,class:"cursor-not-allowed text-text-neutral-readonly"}],defaultVariants:{disabled:!1,readOnly:!1}});import{jsx as te}from"react/jsx-runtime";var oe=({htmlFor:e,__scopeInputSelect:s,children:o})=>{let{size:l,disabled:n,readOnly:t}=h("InputSelectLabel",s);return te("div",{className:"flex h-extrasmall w-[100%] items-center rounded-none rounded-none border-none px-twopulse text-left",children:te("label",{htmlFor:e,className:re({disabled:n,readOnly:t,size:l}),"data-testid":"testid-label",children:o})})};import{jsx as le}from"react/jsx-runtime";var H="Select",ae=e=>{let{size:s="md",hasError:o=!1,disabled:l=!1,__scopeInputSelect:n,options:t,children:x,placeholder:a}=e,{selectedOption:r}=y();return le(Ce,f(p({},e),{size:s,scope:n,hasError:o,disabled:l,options:t,value:r==null?void 0:r.value,placeholder:a,children:le("div",{className:"size-${size} min-w-[5rem] flex-1 flex-shrink-0 flex-col items-start gap-halfpulse rounded-none border-none bg-transparent p-none font-rdmodern text-align-center opacity-opaque",children:x})}))};ae.displayName=H;var[Pe]=we(H),[Ce,h]=Pe(H),L={Root:ae,Label:oe,FieldContainer:Q,Icon:ee,Field:E,Actions:k,HelperText:Z};export{L as a,fe as b}; //# sourceMappingURL=chunk-IQEXTCBB.js.map