@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.
48 lines (47 loc) • 12.9 kB
JavaScript
import{a as M}from"./chunk-J6EKVC3B.js";import{a as v}from"./chunk-4UEKWB35.js";import{a as w}from"./chunk-W7XK6INV.js";import{a as c}from"./chunk-2MB3Y6WI.js";import{a as x}from"./chunk-DQ6V5CGR.js";import{a as m,b,c as h}from"./chunk-DDCCLFYC.js";import{Children as W,isValidElement as Z}from"react";var g=(s,u)=>{var d;let t=(d=W.toArray(s))==null?void 0:d.filter(r=>Z(r));return t.map((r,l)=>{let o=u.find(e=>r.type===e.child),i=t.reduce((e,n,p)=>(n==null?void 0:n.type)===r.type&&p<=l?e+1:e,0);return o&&i<=(o==null?void 0:o.amount)?r:null})};var E=c({base:`
group flex w-full items-center justify-between gap-onepulse duration-100 ease-in
bg-forms-fill-default border-forms-none overflow-hidden cursor-pointer
min-w-[calc(var(--sizing-huge)_+_var(--sizing-tiny))] focus-visible:outline-none
`,variants:{size:{md:"min-h-medium rounded-form px-threepulse",ml:"min-h-mediumlarge rounded-form px-threepulse",lg:"min-h-large rounded-form px-threepulse",xl:"min-h-extralarge rounded-largecontainer px-threepulse"},hasError:{true:""},disabled:{true:""},filled:{true:""},readonly:{true:""},active:{true:""},hasTwoItems:{true:""}},compoundVariants:[{hasError:!0,filled:!0,class:`
border-forms-border-error bg-forms-fill-error
hover:border-forms-border-error hover:border-halfpulse
focus:border-forms-border-error focus:border-halfpulse
active:border-forms-border-error active:border-halfpulse
`},{hasError:!0,filled:!1,class:`
border-forms-border-error bg-forms-fill-default
hover:border-forms-border-error hover:bg-forms-fill-hovered hover:border-halfpulse
focus:border-forms-border-error focus:border-halfpulse
active:border-forms-border-error active:border-halfpulse
`},{readonly:!0,filled:!0,class:`
border-forms-border-readonly bg-forms-fill-readonly
hover:border-forms-border-readonly hover:border-quarterpulse
focus:border-forms-border-readonly focus:border-quarterpulse
active:border-forms-border-readonly active:border-quarterpulse
`},{readonly:!0,filled:!1,class:`
border-forms-border-readonly bg-forms-fill-readonly
hover:border-forms-border-readonly hover:border-quarterpulse
focus:border-forms-border-readonly focus:border-quarterpulse
active:border-forms-border-readonly active:border-quarterpulse
`},{disabled:!0,filled:!0,class:`
border-forms-border-disabled bg-forms-fill-disabled
hover:border-forms-border-disabled hover:border-quarterpulse
focus:border-forms-border-disabled focus:border-quarterpulse
active:border-forms-border-disabled active:border-quarterpulse
`},{disabled:!0,filled:!1,class:`
border-forms-border-disabled bg-forms-fill-disabled
hover:border-forms-border-disabled hover:border-quarterpulse
focus:border-forms-border-disabled focus:border-quarterpulse
active:border-forms-border-disabled active:border-quarterpulse
`},{active:!0,filled:!0,readonly:!1,disabled:!1,hasError:!1,class:"cursor-pointer border-forms-border-focused bg-forms-fill-focused hover:border-forms-border-focused hover:border-halfpulse active:border-forms-border-focused active:border-halfpulse"},{active:!0,readonly:!1,disabled:!1,hasError:!1,filled:!1,class:"cursor-pointer border-forms-border-focused bg-forms-fill-focused hover:border-forms-border-focused hover:border-halfpulse active:border-forms-border-focused active:border-halfpulse"},{active:!1,hasError:!1,disabled:!1,readonly:!1,filled:!0,class:"border-forms-border-filled bg-forms-fill-filled hover:border-forms-border-filled hover:border-halfpulse focus:border-forms-border-focused focus:bg-forms-fill-focused active:border-forms-border-focused active:border-halfpulse active:bg-forms-fill-focused"},{active:!1,hasError:!1,disabled:!1,readonly:!1,filled:!1,class:`
focus-within:border-halfpulse focus-within:bg-forms-fill-focused focus-simple:cursor-pointer
focus:border-halfpulse focus:border-forms-border-focused focus:cursor-pointer
hover:border-none hover:bg-forms-fill-hovered
active:border-halfpulse active:border-forms-border-focused active:cursor-pointer active:bg-forms-fill-focused
`},{size:"md",hasTwoItems:!1,class:"h-medium"},{size:"ml",hasTwoItems:!1,class:"h-mediumlarge"},{size:"lg",hasTwoItems:!1,class:"h-large"},{size:"xl",hasTwoItems:!1,class:"h-extralarge"}],defaultVariants:{size:"ml",isFocused:!1,hasError:!1,readonly:!1,disabled:!1}});import{jsx as j}from"react/jsx-runtime";var L=d=>{var r=d,{children:s,__scopeInputMultiSelect:u}=r,t=h(r,["children","__scopeInputMultiSelect"]);let{disabled:l,hasError:o,size:i,readonly:e,isActive:n,setActive:p}=f("InputMultiSelectActions",u),a=!!(t.selectedItemsQuantity&&t.selectedItemsQuantity>0),S=!!(t.selectedItemsQuantity&&t.selectedItemsQuantity>1);return j("button",b(m({},t),{onClick:y=>{p(!n),t.onClick&&t.onClick(y)},className:E({active:n,size:i,disabled:l,hasError:o,readonly:e,filled:a,hasTwoItems:S}),"aria-disabled":l,children:g(s,[{child:I.Icon,amount:1},{child:I.Field,amount:1},{child:I.Quantity,amount:4},{child:I.ClearButton,amount:1},{child:x,amount:1}])}))};import{useMemo as ee}from"react";var O=c({base:"input-text-clear-button group-active:hidden",variants:{size:{md:"-mr-[0.375rem]",ml:"-mr-[0.5rem]",lg:"-mr-[0.5rem]",xl:"-mr-[0.5rem]"},readOnly:{true:"invisible hidden"},disabled:{true:"invisible hidden"},isActive:{true:""}},compoundVariants:[{readOnly:!1,disabled:!1,isActive:!0,class:"peer-focus/field:peer-[:not(:placeholder-shown)]/field:visible peer-focus/field:peer-[:not(:placeholder-shown)]/field:flex group-hover:peer-[:not(:placeholder-shown)]/field:flex"}],defaultVariants:{readOnly:!1,disabled:!1}}),R=c({base:"px-none",variants:{size:{md:"h-medium w-medium",ml:"h-mediumlarge w-mediumlarge",lg:"h-mediumlarge w-mediumlarge",xl:"h-mediumlarge w-mediumlarge"}}});import{jsx as T}from"react/jsx-runtime";var Q=t=>{var d=t,{__scopeInputMultiSelect:s}=d,u=h(d,["__scopeInputMultiSelect"]);let{size:r,disabled:l,isActive:o,readonly:i}=f("InputMultiSelectClearButton",s),e=ee(()=>{switch(r){case"md":return"md";default:return"ml"}},[r]);return T("div",{className:O({size:r,disabled:l,isActive:o,readOnly:i}),"aria-disabled":l,children:T(w.Root,b(m({},u),{size:e,disabled:l,variant:"neutral-tertiary",className:R({size:e}),children:T(w.Icon,{symbol:"rdicon-dismiss-circle-outline"})}))})};import{forwardRef as te}from"react";var F=c({base:`
peer/field h-small 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
`,variants:{size:{md:"text-threepulse",ml:"text-threeandhalfpulse",lg:"text-threeandhalfpulse",xl:"text-threeandhalfpulse"},readOnly:{true:"text-text-neutral-readonly"},disabled:{true:"cursor-not-allowed text-text-neutral-disabled",false:""},isActive:{true:"text-text-neutral"}},compoundVariants:[{readOnly:!0,disabled:!1,class:"cursor-not-allowed text-text-neutral-readonly"}],defaultVariants:{readOnly:!1,disabled:!1}});import{jsx as re}from"react/jsx-runtime";var A=te((l,r)=>{var o=l,{__scopeInputMultiSelect:s,onFocus:u,onBlur:t}=o,d=h(o,["__scopeInputMultiSelect","onFocus","onBlur"]);let{disabled:i,readonly:e,size:n,isActive:p,setActive:a}=f("InputMultiSelectField",s),S=P=>{a(!0),u==null||u(P)},y=P=>{a(!1),t==null||t(P)};return re("input",b(m({},d),{ref:r,disabled:i,readOnly:e,placeholder:"Placeholder is hidden",className:F({disabled:i,readOnly:e,isActive:p,size:n}),onFocus:S,onBlur:y}))});A.displayName="InputMultiSelectField";import{useMemo as le}from"react";var q=c({base:"flex w-full flex-wrap items-center justify-start gap-onepulse px-onepulse text-left font-rdmodern font-semibold text-text-neutral-alternative text-threepulse",variants:{hasError:{true:"text-text-danger-alternative",false:""},readOnly:{true:"cursor-not-allowed text-text-neutral-readonly"},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 z,jsxs as oe}from"react/jsx-runtime";var B=l=>{var o=l,{withIcon:s,iconName:u="rdicon-warning-circle",children:t,__scopeInputMultiSelect:d}=o,r=h(o,["withIcon","iconName","children","__scopeInputMultiSelect"]);let{disabled:i,hasError:e,readonly:n}=f("InputMultiSelectHelperText",d),p=e?"rdicon-warning-circle":u,a=le(()=>n?"colorTextNeutralReadonly":i?"colorTextNeutralDisabled":e?"colorTextDangerAlternative":"colorTextNeutralAlternative",[i,e,n]);return t?oe("div",b(m({},r),{"aria-disabled":i,className:q({hasError:e,disabled:i,readOnly:n}),children:[s&&z("div",{className:"flex items-center",children:z(x,{symbol:p,color:a,size:"tiny"})}),z("span",{className:"line-clamp-2 flex-1",children:t})]})):null};import{useMemo as se}from"react";import{jsx as D}from"react/jsx-runtime";function H(d){var r=d,{__scopeInputMultiSelect:s,color:u="colorTextNeutralDefault"}=r,t=h(r,["__scopeInputMultiSelect","color"]);let{size:l,disabled:o,readonly:i}=f("InputMultiSelectField",s),e=se(()=>{let p={md:"extra-small",ml:"small",lg:"small",xl:"small"};return p==null?void 0:p[l]},[l]),n=()=>i?"colorTextNeutralReadonly":o?"colorTextNeutralDisabled":"colorTextNeutralDefault";return D("div",{className:"flex items-center",children:D(x,b(m({},t),{color:n(),size:e}))})}var k=c({base:`
w-full align-middle m-none p-none
text-left font-rdmodern font-regular tracking-tiny text-text-neutral text-nowrap truncate leading
`,variants:{size:{md:"text-threepulse leading-[150%]",ml:"text-threeandhalfpulse leading-[140%]",lg:"text-threeandhalfpulse leading-[140%]",xl:"text-threeandhalfpulse leading-[140%]"},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 _}from"react/jsx-runtime";var J=s=>{let o=s,{__scopeInputMultiSelect:u,children:t}=o,d=h(o,["__scopeInputMultiSelect","children"]),{disabled:r,size:l}=f("InputMultiSelectLabel",u);return t?_("div",{className:"flex h-extrasmall w-full items-center rounded-none border-none px-onepulse text-left",children:_("label",b(m({},d),{className:k({disabled:r,size:l}),"aria-disabled":r,children:t}))}):null};import{useCallback as ie,useMemo as ne}from"react";var U=c({base:"flex w-full flex-wrap gap-1"}),pt=c({base:"flex h-[2rem] max-h-[2.5rem] items-center justify-center gap-onepulse rounded-[999px] border border-[#9E9E9E] px-twopulse py-onepulse font-bold text-[#575757] text-sm"}),ft=c({base:"flex rotate-45"});import{jsx as C}from"react/jsx-runtime";function X({labels:s,removeItem:u,__scopeInputMultiSelect:t}){let{disabled:d,readonly:r,size:l}=f("InputMultiSelectLabel",t),o=ie((e,n)=>n?`+${e}`:e.slice(0,1).toUpperCase()+e.slice(1),[]),i=ne(()=>l==="lg"||l==="xl"?"ml":"sm",[l]);return C("div",{className:U(),children:s.map(({id:e,label:n,oversized:p})=>{let a=o(n,p);return C(M.Root,{id:e,name:a,disabled:d,readOnly:r,value:"",size:i,checked:!p,children:C(M.Input,{id:e,name:a,value:"",onChange:()=>u(e),children:C(M.Label,{children:a})})},e)})})}import{createContextScope as de}from"@radix-ui/react-context";import{useState as ce}from"react";import{useState as ae}from"react";import{jsx as V,jsxs as ue}from"react/jsx-runtime";var Y=({labels:s,selectedLabels:u,onCancel:t,onConfirm:d,__scopeInputMultiSelect:r})=>{let{isActive:l,setActive:o}=f("InputMultiSelectActions",r),[i,e]=ae(u),n=a=>!!i.find(({id:S})=>S===a),p=(a,S)=>{e(a?i.filter(({id:y})=>y!==S.id):[...i,S])};return ue(v.Root,{children:[V(v.List,{children:s.map(a=>V(v.Item,{type:"multi",checked:n(a.id),content:{label:a.label,value:a.id},onPress:()=>p(n(a.id),a)},a.id))}),V(v.Footer,{controls:[{type:"cancel",label:"Cancelar",handler:()=>{o(!l),t()}},{type:"confirm",label:"Confirmar",handler:()=>{o(!l),d(i)}}]})]})};var $=c({base:"flex w-full min-w-[calc(var(--sizing-gigantic)_+_var(--sizing-gigantic))] flex-col gap-halfpulse",variants:{disabled:{true:"opacity-50"},readonly:{true:"opacity-75"}}});import{jsx as G}from"react/jsx-runtime";var N="InputMultiSelect",K=s=>{let{size:u="ml",children:t,__scopeInputMultiSelect:d}=s,[r,l]=ce(!1);return G(fe,b(m({},s),{size:u,scope:d,isActive:r,setActive:l,children:G("div",{className:$({disabled:s.disabled,readonly:s.readonly}),children:g(t,[{child:I.Label,amount:1},{child:I.Actions,amount:1},{child:I.HelperText,amount:1},{child:I.Dropdown,amount:1}])})}))};K.displayName=N;var[pe]=de(N),[fe,f]=pe(N),I={Root:K,Label:J,HelperText:B,Actions:L,ClearButton:Q,Icon:H,Field:A,Quantity:X,Dropdown:Y};export{I as a};
//# sourceMappingURL=chunk-QKMG66OU.js.map