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.

2 lines 8.84 kB
import{a as I}from"./chunk-WLLUXDH6.js";import{a}from"./chunk-JOWCR2VE.js";import{a as L}from"./chunk-UL3XK3GH.js";import{a as b}from"./chunk-2W7OI2CB.js";import{a as u}from"./chunk-V5IX4U5J.js";import{a as l,b as n,c as i,d as U}from"./chunk-UABQX4UA.js";var S={};U(S,{HelperText:()=>N,Input:()=>R,Label:()=>k,Root:()=>y});import{PasswordInput as Y,usePasswordInput as Z}from"@ark-ui/react/password-input";var X=u({slots:{root:["w-full min-w-[14rem] space-y-[var(--spacing-stack-halfpulse)]"],control:["ring-[var(--color-forms-border-default)]","inline-flex w-full items-center","gap-x-[var(--spacing-inline-onepulse)]","rounded-[var(--border-radius-form)]","bg-[var(--color-forms-fill-default)]","px-[var(--padding-inset-threepulse)]","[&:has(input:not(:focus-within,:placeholder-shown))]:bg-[var(--color-forms-fill-filled)]","[&:has(input:not(:focus-within,:placeholder-shown))]:ring-[length:var(--border-width-quarterpulse)]"],input:["min-w-0 flex-1 bg-transparent caret-[var(--color-text-neutral-default)] outline-0","placeholder:invisible","font-sans text-[var(--color-text-neutral-default)]"]},variants:{size:{md:{control:["h-[var(--sizing-medium)]"],input:["text-[length:var(--font-size-threepulse)]"]},ml:{control:["h-[var(--sizing-mediumlarge)]"]},lg:{control:["h-[var(--sizing-large)]"]},xl:{control:["h-[var(--sizing-extralarge)] rounded-[var(--border-radius-largecontainer)]"]}},isDisabled:{true:{control:["cursor-not-allowed bg-[var(--color-forms-fill-disabled)]! ring-[length:var(--border-width-quarterpulse)] ring-[var(--color-forms-border-disabled)]","*:cursor-not-allowed","[&:has(input:not(:focus-within,:placeholder-shown))]:bg-[var(--color-forms-fill-disabled)]"],input:["text-[var(--color-text-neutral-disabled)]"]}},isReadOnly:{true:{control:["pointer-events-none bg-[var(--color-forms-fill-readonly)] ring-[length:var(--border-width-quarterpulse)] ring-[var(--color-forms-border-readonly)]","[&:has(input:not(:focus-within,:placeholder-shown))]:bg-[var(--color-forms-fill-readonly)]"],input:["text-[var(--color-text-neutral-readonly)]"]}},isError:{true:{control:["ring-[length:var(--border-width-quarterpulse)]","ring-[var(--color-forms-border-error)]","[&:not(:focus-within,[data-disabled])]:hover:ring-[length:var(--border-width-halfpulse)]","focus-within:bg-[var(--color-forms-fill-error)]","focus-within:ring-[length:var(--border-width-halfpulse)]"]},false:{control:["focus-within:bg-[var(--color-forms-fill-focused)]","focus-within:ring-[length:var(--border-width-halfpulse)]","focus-within:ring-[var(--color-forms-border-focused)]","[&:has(input:not(:focus-within,:placeholder-shown))]:ring-[var(--color-forms-border-filled)]"]}}},compoundVariants:[{size:["ml","lg","xl"],class:{input:["text-[length:var(--font-size-threeandhalfpulse)]"]}},{isDisabled:!1,isReadOnly:!1,isError:!1,class:{control:["[&:not(:focus-within)]:hover:bg-[var(--color-forms-fill-hovered)] [&:not(:focus-within)]:hover:ring-[var(--color-forms-border-hovered)]","[&:has(input:not(:focus-within,:placeholder-shown))]:hover:bg-[var(--color-forms-fill-filled)] [&:has(input:not(:focus-within,:placeholder-shown))]:hover:ring-[var(--color-forms-border-filled)]","[&:has(input:not(:focus-within,:placeholder-shown))]:hover:ring-[length:var(--border-width-halfpulse)]"]}}],defaultVariants:{size:"ml",isDisabled:!1,isReadOnly:!1,isError:!1}}),{root:V,control:z,input:D}=X();import{jsx as $}from"react/jsx-runtime";function y(h){var d=h,{children:e,size:o,asChild:t,disabled:s,readOnly:r,invalid:p,onVisibilityChange:c}=d,g=i(d,["children","size","asChild","disabled","readOnly","invalid","onVisibilityChange"]);let v=Z({disabled:s,invalid:p,onVisibilityChange:c}),f=L(e,{targets:["InputPasswordInput","InputPasswordLabel","InputPasswordHelperText"],props:{size:o,readOnly:r},asChild:t});return $(Y.RootProvider,n(l({},g),{className:a(V({size:o})),value:v,children:f}))}y.displayName="InputPasswordRoot";import*as x from"react";import{PasswordInput as T,usePasswordInputContext as or}from"@ark-ui/react/password-input";import{jsx as rr}from"react/jsx-runtime";var j=u({base:["inline-flex h-[var(--sizing-extrasmall)] select-none items-center rounded-[var(--border-radius-pill)] px-[var(--padding-inset-twopulse)]","font-semibold text-[length:var(--font-size-threepulse)]"],variants:{variant:{strong:["[--color-labeling-fill-strong-default:#ABF7CD] [--color-labeling-text-strong-default:#18492E]","bg-[var(--color-labeling-fill-strong-default)] text-[var(--color-labeling-text-strong-default)]"],average:["[--color-labeling-fill-average-default:#FBEBD0] [--color-labeling-text-average-default:#55350C]","bg-[var(--color-labeling-fill-average-default)] text-[var(--color-labeling-text-average-default)]"],weak:["[--color-labeling-fill-weak-default:#FCCFEA] [--color-labeling-text-weak-default:#642049]","bg-[var(--color-labeling-fill-weak-default)] text-[var(--color-labeling-text-weak-default)]"]}}});function E({variant:e="weak"}){let o={strong:"Forte",average:"M\xE9dia",weak:"Fraca"};return rr("span",{className:a(j({variant:e})),children:o[e]})}import{jsx as m,jsxs as er}from"react/jsx-runtime";function R(c){var g=c,{prefix:e,strengthRules:o,size:t="ml",onChange:s,readOnly:r}=g,p=i(g,["prefix","strengthRules","size","onChange","readOnly"]);let{visible:h,disabled:d,invalid:v}=or(),[f,w]=x.useState(null),P=!d&&!r,_=f&&P,G=P;function J(){return d?"colorTextNeutralDisabled":r?"colorTextNeutralReadonly":"colorTextNeutralDefault"}let K=x.useCallback(A=>{let C=A.target.value;for(let Q of Object.keys(o)){let H=Q;if(o[H].test(C)){w(H);break}}C.length===0&&w(null),s==null||s(A)},[]);return er(T.Control,{className:a(z({size:t,isDisabled:d,isReadOnly:r,isError:v,className:"overflow-red-500"})),children:[e&&m(b,{size:t==="md"?"extra-small":"small",color:J(),symbol:e}),m(T.Input,n(l({},p),{className:a(D({size:t,isDisabled:d,isReadOnly:r})),placeholder:"Hidden placeholder",onChange:K,readOnly:r})),_&&m(E,{variant:f}),G&&m(T.VisibilityTrigger,{asChild:!0,children:m(I.Root,{variant:"neutral-tertiary",size:t==="md"?"md":"ml",children:m(I.Icon,{symbol:h?"rdicon-eye-off":"rdicon-eye"})})})]})}R.displayName="InputPasswordInput";import{PasswordInput as sr}from"@ark-ui/react/password-input";import{ark as tr}from"@ark-ui/react/factory";var O=u({base:["line-clamp-1 max-w-full truncate","font-normal font-sans text-[var(--color-text-neutral-default)] data-[disabled]:text-[var(--color-text-neutral-disabled)]"],variants:{size:{md:"text-[length:var(--font-size-threepulse)] leading-[var(--line-height-medium)]",ml:null,lg:null,xl:null}},compoundVariants:[{size:["ml","lg","xl"],class:"text-[length:var(--font-size-threeandhalfpulse)] leading-[var(--line-height-small)]"}],defaultVariants:{size:"ml"}});import{jsx as ar}from"react/jsx-runtime";function F(s){var r=s,{className:e,size:o}=r,t=i(r,["className","size"]);return ar(tr.span,n(l({},t),{className:a(O({className:e,size:o}))}))}import{jsx as B}from"react/jsx-runtime";function k(r){var p=r,{children:e,size:o,readOnly:t}=p,s=i(p,["children","size","readOnly"]);return B(sr.Label,n(l({},s),{className:a("px-[var(--padding-inset-onepulse)]",t&&"text-[var(--color-text-neutral-readonly)]"),asChild:!0,children:B(F,{size:o,className:a(o==="md"&&"leading-0"),children:e})}))}k.displayName="InputPasswordLabel";import{usePasswordInputContext as ir}from"@ark-ui/react/password-input";import{Field as lr}from"@ark-ui/react/field";var q=u({base:["flex w-full items-start gap-x-[var(--spacing-inline-onepulse)] px-[var(--padding-inset-onepulse)]","font-semibold text-[length:var(--font-size-threepulse)] text-[var(--color-text-neutral-alternative)]"],variants:{isError:{true:"text-[var(--color-text-danger-alternative)]"},isDisabled:{true:"text-[var(--color-text-neutral-disabled)]"},isReadOnly:{true:"text-[var(--color-text-neutral-readonly)]"}},defaultVariants:{isError:!1,isDisabled:!1,isReadOnly:!1}});import{jsx as M,jsxs as nr}from"react/jsx-runtime";function W(g){var h=g,{children:e,className:o,prefix:t,isError:s,isDisabled:r,isReadOnly:p}=h,c=i(h,["children","className","prefix","isError","isDisabled","isReadOnly"]);let d=s||!!t;function v(){let f=[[s,"colorTextDangerAlternative"],[r,"colorTextNeutralDisabled"],[p,"colorTextNeutralReadonly"]];for(let[w,P]of f)if(w)return P;return"colorTextNeutralAlternative"}return nr(lr.HelperText,n(l({},c),{className:a(q({className:o,isError:s,isDisabled:r,isReadOnly:p})),children:[d&&M(b,{symbol:s?"rdicon-warning-circle":t,size:"tiny",color:v()}),M("div",{className:a("line-clamp-2 text-ellipsis"),children:e})]}))}import{jsx as pr}from"react/jsx-runtime";function N(s){var r=s,{children:e,readOnly:o}=r,t=i(r,["children","readOnly"]);let{invalid:p,disabled:c}=ir();return pr(W,n(l({},t),{isError:p,isDisabled:c,isReadOnly:o,children:e}))}N.displayName="InputPasswordHelperText";export{F as a,S as b}; //# sourceMappingURL=chunk-ALZ72MQC.js.map