@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.
54 lines (53 loc) • 7.89 kB
JavaScript
import{a as I}from"./chunk-PTZV7LZT.js";import{a as P}from"./chunk-ZBDHEFCW.js";import{a as p}from"./chunk-V5IX4U5J.js";import{a as i,b as d,c as w}from"./chunk-UABQX4UA.js";import{useState as Z}from"react";import{createContextScope as $}from"@radix-ui/react-context";import{jsx as C}from"react/jsx-runtime";var v=t=>{let{symbol:s,__scopeInputCounter:r}=t,{size:o}=a("InputCounterButton",r),e=n=>({md:"md",ml:"md",lg:"ml",xl:"ml"})[n];return C(I.Root,d(i({},t),{variant:"neutral-tertiary",size:e(o||"md"),children:C(I.Icon,{symbol:s})}))},V=t=>{let{__scopeInputCounter:s,onClick:r}=t,{setCurrentValue:o,currentValue:e,disabled:n,readOnly:l}=a("InputCounterButton",s);return C(v,d(i({},t),{symbol:e===1?"rdicon-delete":"rdicon-minus",tabIndex:0,onClick:u=>{e>0&&o(e-1),r==null||r(u)},disabled:n||l||e===0}))},N=t=>{let{__scopeInputCounter:s,onClick:r}=t,{setCurrentValue:o,currentValue:e,disabled:n,readOnly:l}=a("InputCounterButton",s);return C(v,d(i({},t),{symbol:"rdicon-plus",tabIndex:0,onClick:u=>{e>=0&&e<999&&o(e+1),r==null||r(u)},disabled:n||l||e===999}))};var T=p({base:[`grid grid-cols-[auto_1fr_auto] place-content-center w-full gap-onepulse duration-100 ease-in overflow-hidden
bg-[var(--color-forms-fill-default)]
has-[:placeholder-shown]:bg-forms-fill
has-[:placeholder-shown]:border-transparent
has-[:placeholder-shown]:border-none
has-[:focus-within]:has-[:placeholder-shown]:bg-forms-fill-focused
`],variants:{size:{md:"h-medium rounded-form px-threepulse",ml:"h-mediumlarge rounded-form px-threepulse",lg:"h-large rounded-form px-threepulse",xl:"h-extralarge rounded-largecontainer px-threepulse"},readOnly:{true:`
cursor-not-allowed
has-[:placeholder-shown]:bg-forms-fill-readonly
has-[:placeholder-shown]:ring-forms-border-readonly
has-[:placeholder-shown]:ring-quarterpulse
`},disabled:{true:`
cursor-not-allowed
has-[:placeholder-shown]:bg-forms-fill-disabled
has-[:placeholder-shown]:ring-forms-border-disabled
has-[:placeholder-shown]:ring-quarterpulse
`},hasFilled:{true:""},hasError:{true:`
has-[:placeholder-shown]:ring-forms-border-error
has-[:placeholder-shown]:ring-quarterpulse
has-[:placeholder-shown]:hover:ring-halfpulse
`}},compoundVariants:[{hasError:!1,hasFilled:!0,readOnly:!1,disabled:!1,class:`
[&:not(:focus-within)]:bg-forms-fill-filled
[&:not(:focus-within)]:border-forms-border-filled
[&:not(:focus-within)]:border-quarterpulse
[&:not(:focus-within)]:hover:border-halfpulse
`},{hasError:!1,readOnly:!1,disabled:!1,class:`
has-[:focus-within]:ring-action-border-focused
has-[:focus-within]:ring-halfpulse
has-[:focus-within]:bg-forms-fill-focused
[&:not(:focus-within)]:has-[:placeholder-shown]:hover:bg-forms-fill-hovered
[&:not(:focus-within)]:has-[:placeholder-shown]:hover:border-forms-border-hovered
`},{hasError:!0,hasFilled:!0,readOnly:!1,disabled:!1,class:`
has-[:not(:placeholder-shown)]:ring-forms-border-error
has-[:not(:placeholder-shown)]:bg-forms-fill-error
has-[:not(:placeholder-shown)]:ring-quarterpulse
has-[:not(:placeholder-shown)]:hover:ring-halfpulse
has-[:not(:placeholder-shown)]:border-none
`},{hasError:!1,hasFilled:!0,readOnly:!1,disabled:!0,class:`
has-[:not(:placeholder-shown)]:ring-forms-border-disabled
has-[:not(:placeholder-shown)]:bg-forms-fill-disabled
has-[:not(:placeholder-shown)]:ring-quarterpulse
has-[:not(:placeholder-shown)]:border-none
`},{hasError:!1,hasFilled:!0,readOnly:!0,disabled:!1,class:`
has-[:not(:placeholder-shown)]:ring-forms-border-readonly
has-[:not(:placeholder-shown)]:bg-forms-fill-readonly
has-[:not(:placeholder-shown)]:ring-quarterpulse
has-[:not(:placeholder-shown)]:border-none
`}],defaultVariants:{size:"md",isFocused:!1,hasError:!1,readOnly:!1,disabled:!1}});import{jsx as U}from"react/jsx-runtime";var _=t=>{let{children:s,__scopeInputCounter:r}=t,{size:o,disabled:e,hasError:n,readOnly:l,currentValue:u}=a("InputCounterControl",r),c=u>=1;return U("div",{className:T({size:o,disabled:e,hasError:n,readOnly:l,hasFilled:c}),children:s})};import{useMemo as X}from"react";var S=p({base:`flex flex-row justify-star w-[100%] items-center px-onepulse
`,variants:{}}),E=p({base:`
flex text-left font-rdmodern font-semibold text-text-neutral-alternative text-threepulse
line-clamp-2
`,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:{hasError:!1,disabled:!1,readOnly:!1}});import{jsx as b,jsxs as Y}from"react/jsx-runtime";var O=t=>{let{children:s,iconName:r="",__scopeInputCounter:o}=t,{hasError:e,disabled:n,readOnly:l}=a("InputCounterHelperText",o),u=e?"rdicon-warning-circle":r,c=X(()=>n?"colorTextNeutralDisabled":l?"colorTextNeutralReadonly":e?"colorTextDangerAlternative":"colorTextNeutralAlternative",[n,e,l]);if(!s)return null;let h=e||r!=="";return Y("div",d(i({},t),{"aria-disabled":n,className:S({}),children:[h&&b("div",{className:"mr-onepulse flex items-center",children:b(P,{symbol:u,color:c,size:"tiny"})}),b("span",{className:E({hasError:e,disabled:n,readOnly:l}),children:s})]}))};import{forwardRef as k,useEffect as G,useRef as J}from"react";var R=p({base:["w-full bg-transparent text-center text-text-neutral-alternative tabular-nums outline-none placeholder:invisible focus-within:text-text-neutral","disabled:cursor-not-allowed disabled:text-text-neutral-disabled","read-only:pointer-events-none read-only:cursor-not-allowed read-only:text-text-neutral-readonly"],variants:{hasError:{true:"text-text-neutral-alternative"}}});import{jsx as Q}from"react/jsx-runtime";var z=0,K=999,x=k((r,s)=>{var t=w(r,[]);let{__scopeInputCounter:o}=t,{currentValue:e,setCurrentValue:n,disabled:l,readOnly:u,hasError:c,onValueChange:h}=a("InputCounterInput",o),f=J(null);function g(m){let q=/[^0-9]/g,A=m.replace(q,"").trim(),D=Math.min(K,Math.max(z,Number.parseInt(A)||z));n(Number(D))}return G(()=>{f.current&&(f.current.value=e>0?String(e):"",h(e))},[e]),Q("input",d(i({},t),{ref:m=>{typeof s=="function"&&s(m),f.current=m},inputMode:"numeric",type:"tel",pattern:"[0-9]*",className:R({hasError:c}),maxLength:3,onChange:m=>{g(m.target.value),h(Number(m.target.value))},value:e,disabled:l,readOnly:u,placeholder:"0"}))});x.displayName="InputCounterInput";var B=p({base:"line-clamp-1 rounded-none px-onepulse font-rdmodern font-regular text-text-neutral",variants:{size:{md:"text-threepulse",ml:"text-threeandhalfpulse",lg:"text-threeandhalfpulse",xl:"text-threeandhalfpulse"},disabled:{true:"cursor-not-allowed text-text-neutral-disabled",false:""},readOnly:{true:"cursor-not-allowed text-text-neutral-readonly",false:""}}});import{jsx as W}from"react/jsx-runtime";var L=t=>{let{children:s,__scopeInputCounter:r}=t,{disabled:o,readOnly:e,size:n}=a("InputCounterControl",r);return W("label",{className:B({disabled:o,readOnly:e,size:n}),children:s})};var M=p({base:"flex w-full min-w-[calc(var(--sizing-colossal)_+_var(--sizing-micro))] flex-col gap-halfpulse ",variants:{}});import{jsx as H}from"react/jsx-runtime";var y="InputCounterRoot",F=t=>{let{size:s="ml",children:r,value:o,onValueChange:e,disabled:n,hasError:l,readOnly:u,__scopeInputCounter:c}=t,[h,f]=Z(o!=null?o:0);return H(ee,d(i({},{size:s,scope:c,setCurrentValue:f,currentValue:h,value:o,onValueChange:e,disabled:n,readOnly:u,hasError:l}),{children:H("div",{className:M({}),children:r})}))};F.displayName=y;var[j]=$(y),[ee,a]=j(y),te={Root:F,Decrement:V,Increment:N,Control:_,Input:x,Label:L,HelperText:O};export{te as a};
//# sourceMappingURL=chunk-L4IDY3RV.js.map