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.

49 lines 12.8 kB
import{a as E}from"./chunk-J44H5GIE.js";import{a as z}from"./chunk-W7XK6INV.js";import{a as c}from"./chunk-2MB3Y6WI.js";import{a as y}from"./chunk-DQ6V5CGR.js";import{a as p,b as m,c as g}from"./chunk-DDCCLFYC.js";import{createContextScope as Ne}from"@radix-ui/react-context";import{jsx as ce}from"react/jsx-runtime";var q=({children:e})=>ce("div",{className:"input-select-actions","data-testid":"input-name-actions",children:e});import{forwardRef as Se,useEffect as J,useRef as ve,useState as ge}from"react";import{createContextScope as de}from"@radix-ui/react-context";import{forwardRef as pe}from"react";var _=c({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"}}),$=c({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"}}),Y=c({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"}}),K=c({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 N,jsxs as he}from"react/jsx-runtime";var L="SearchBar",U=pe((e,r)=>{let{onChange:o=()=>{},handleSearch:l=()=>{},handleClear:n=()=>{},placeholder:a,datatestid:u="search-bar",value:s="",size:t="md",__scopeSearchBar:d}=e,i=f=>f==="lg"?"ml":f;return N(me,m(p({},e),{scope:d,children:he("div",{className:_({size:t,hasFilled:s!==""}),children:[N("input",{ref:r,type:"text",className:$({size:t,hasFilled:s!==""}),placeholder:a,onChange:f=>o(f),value:s,"data-testid":u}),N(z.Root,{size:i(t),variant:"neutral-tertiary",className:K({size:t}),onClick:n,children:N(z.Icon,{symbol:"rdicon-dismiss-circle-outline"})}),N(z.Root,{size:i(t),variant:"neutral-tertiary",className:Y({size:t}),onClick:l,children:N(z.Icon,{symbol:"rdicon-search"})})]})}))});U.displayName=L;var[fe]=de(L),[me,He]=fe(L),ue={Root:U};import{useState as xe}from"react";var W=c({base:` flex flex-row bg-[transparent] `,variants:{size:{tiny:"gap-none",small:"gap-onepulse"}}});import{jsx as T}from"react/jsx-runtime";var Ge=a=>{var u=a,{size:e="tiny",value:r,ratingLimit:o=5,onPress:l}=u,n=g(u,["size","value","ratingLimit","onPress"]);let[s,t]=xe(0),d="colorTextEvaluateDefault";function i(f){let x=f+1;l(x),t(x)}return T("div",{className:W(),children:Array.from({length:o},(f,x)=>{let S=r!=null?r:s,B=Math.floor(S),P=S%1,w=B,C=!1;P>=.5&&(C=!0),P>=.99&&(w+=1,C=!1);let I=x<w,F=x===w&&C;return T("a",m(p({onClick:()=>i(x)},n),{"data-testid":"star-icon",children:I?T(y,{symbol:"rdicon-star-filled",color:d,size:e}):F?T(y,{symbol:"rdicon-star-half",color:d,size:e}):T(y,{symbol:"rdicon-star-outline",color:d,size:e})}),`${x}-${S}`)})})};import{useState as be}from"react";function O(){let[e,r]=be();return{useSelect:O,selectedOption:e,setSelectedOption:r}}var G=c({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 R,jsxs as Q}from"react/jsx-runtime";var A=Se(u=>{var s=u,{children:e,__scopeInputSelect:r,onChangeSelectionValue:o,value:l,optionMaxHeight:n}=s,a=g(s,["children","__scopeInputSelect","onChangeSelectionValue","value","optionMaxHeight"]);let{size:t,hasError:d,disabled:i,readOnly:f,placeholder:x,options:S=[]}=b("InputSelectField",r),[B,P]=ge(!1),{setSelectedOption:w,selectedOption:C}=O(),I=ve(null),F={label:x!=null?x:"Selecione...",value:""};J(()=>{if(l){let h=S.find(v=>v.value===l);return w(h)}return w(F)},[l]),J(()=>{function h(v){I.current&&!I.current.contains(v.target)&&P(!1)}return document.addEventListener("mousedown",h),()=>{document.removeEventListener("mousedown",h)}},[]);let ie=h=>{w(h),P(!1),o==null||o(h.value)},k=()=>{!i&&!f&&P(!B)};return Q("div",{ref:I,className:"relative flex w-full flex-col",children:[Q("div",m(p({},Object.keys(a).reduce((v,V)=>(V.startsWith("data-")&&(v[V]=a[V]),v),{})),{className:G(p({size:t,hasError:d,readOnly:f,disabled:i},a)),onClick:()=>k(),onKeyUp:()=>k(),"data-testid":"select-field",children:[C?C.label:F.label,R(H.Icon,{symbol:B?"rdicon-chevron-up":"rdicon-chevron-down",color:i?"colorTextNeutralDisabled":f?"colorTextNeutralReadonly":"colorTextNeutralDefault"})]})),B&&R("div",{className:"x-full absolute top-full left-0 z-10 w-full py-fivepulse","data-testid":"select-option-menu",children:R(E.Root,m(p({type:"single"},a),{children:R(E.List,{maxHeight:n,children:S==null?void 0:S.map((h,v)=>R(E.Item,{content:h,onPress:()=>ie(h),disabled:i,"data-testid":"select-item"},`${h.label}-${v}`))})}))})]})});A.displayName="InputSelectField";var X=c({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 ye}from"react/jsx-runtime";var Z=({__scopeInputSelect:e,children:r})=>{let{hasError:o,size:l,disabled:n,readOnly:a}=b("InputSelectHelperText",e);return ye("div",{"data-testid":"select-field-container",className:X({hasError:o,size:l,disabled:n,readOnly:a}),children:r})};import{useMemo as we}from"react";var j=c({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 D,jsxs as Pe}from"react/jsx-runtime";var ee=a=>{var u=a,{withIcon:e,iconName:r="rdicon-warning-circle",__scopeInputSelect:o,children:l}=u,n=g(u,["withIcon","iconName","__scopeInputSelect","children"]);let{hasError:s,readOnly:t,disabled:d}=b("InputSelectHelperText",o),i=s?"rdicon-warning-circle":r,f=we(()=>d?"colorTextNeutralDisabled":t?"colorTextNeutralReadonly":s?"colorTextDangerAlternative":"colorTextNeutralAlternative",[d,s,t]);return l?Pe("div",m(p({},n),{"aria-disabled":d,className:j({hasError:s,disabled:d,readOnly:t}),children:[e&&D("div",{className:"flex items-center",children:D(y,{symbol:i,color:f,size:"tiny"})}),D("span",{className:"flex flex-1",children:l})]})):null};import Ce from"react";import{jsx as te}from"react/jsx-runtime";function re(l){var n=l,{__scopeInputSelect:e,color:r="colorTextNeutralDefault"}=n,o=g(n,["__scopeInputSelect","color"]);let{size:a,hasError:u,disabled:s,readOnly:t}=b("InputSelectField",e),d=Ce.useMemo(()=>{let i={md:"small",ml:"small",lg:"small",xl:"small"};return i==null?void 0:i[a]},[a]);return te("div",{className:"flex h-6 h-small w-6 items-center justify-center rounded-none opacity-100",children:te(y,m(p({},o),{size:d,color:u?"colorTextDangerAlternative":s?"colorTextNeutralDisabled":t?"colorTextNeutralReadonly":"colorTextNeutralDefault"}))})}var oe=c({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 le}from"react/jsx-runtime";var ae=({htmlFor:e,__scopeInputSelect:r,children:o})=>{let{size:l,disabled:n,readOnly:a}=b("InputSelectLabel",r);return le("div",{className:"flex h-extrasmall w-[100%] items-center rounded-none rounded-none border-none px-twopulse text-left",children:le("label",{htmlFor:e,className:oe({disabled:n,readOnly:a,size:l}),"data-testid":"testid-label",children:o})})};import{jsx as se}from"react/jsx-runtime";var M="Select",ne=e=>{let{size:r="md",hasError:o=!1,disabled:l=!1,__scopeInputSelect:n,options:a,children:u,placeholder:s}=e,{selectedOption:t}=O();return se(Ie,m(p({},e),{size:r,scope:n,hasError:o,disabled:l,options:a,value:t==null?void 0:t.value,placeholder:s,children:se("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:u})}))};ne.displayName=M;var[Be]=Ne(M),[Ie,b]=Be(M),H={Root:ne,Label:ae,FieldContainer:Z,Icon:re,Field:A,Actions:q,HelperText:ee};export{H as a,ue as b,Ge as c}; //# sourceMappingURL=chunk-74EKNFS3.js.map