vdk-components/dist/index.esm.js

React component library built with TypeScript and SCSS

import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useEffect as a,useState as i,useRef as c}from"react";var n=function(a){var i,c=a.src,n=a.alt,o=void 0===n?"":n,r=a.size,l=void 0===r?"medium":r,s=a.shape,d=void 0===s?"circle":s,u=a.status,v=a.onClick,h=a.className,m=void 0===h?"":h,f=["avatar","avatar--".concat(l),"avatar--".concat(d),u?"avatar--".concat(u):"",m].filter(Boolean).join(" ");return t("div",{className:f,onClick:v,children:[c?e("img",{src:c,alt:o,className:"avatar__image"}):e("div",{className:"avatar__initials",children:(i=o,i.split(" ").map((function(t){return t[0]})).join("").toUpperCase().slice(0,2))}),u&&e("span",{className:"avatar__status"})]})},o=function(t){var a=t.label,i=t.onClick,c=t.variant,n=void 0===c?"primary":c,o=t.size,r=void 0===o?"medium":o,l=t.disabled,s=void 0!==l&&l;return e("button",{className:"vdk-button vdk-button--".concat(n," vdk-button--").concat(r),onClick:i,disabled:s,children:a})},r=function(a){var i=a.title,c=a.children,n=a.imageUrl,o=a.variant,r=void 0===o?"default":o,l=a.footer,s=a.onClick,d=a.className,u=void 0===d?"":d,v=["card","default"!==r?"card--".concat(r):"",u].filter(Boolean).join(" ");return t("div",{className:v,onClick:s,children:[n&&e("div",{className:"card__image",children:e("img",{src:n,alt:i})}),t("div",{className:"card__content",children:[e("h3",{className:"card__title",children:i}),e("div",{className:"card__text",children:c})]}),l&&e("div",{className:"card__footer",children:l})]})},l=function(a){var i=a.checked,c=void 0!==i&&i,n=a.disabled,o=void 0!==n&&n,r=a.loading,l=void 0!==r&&r,s=a.label,d=a.onChange,u=a.className,v=["switch",c?"switch--checked":"",o?"switch--disabled":"",l?"switch--loading":"",void 0===u?"":u].filter(Boolean).join(" ");return t("label",{className:v,children:[e("input",{type:"checkbox",checked:c,disabled:o||l,onChange:function(t){o||l||!d||d(t.target.checked)},className:"switch__input"}),e("span",{className:"switch__slider"}),s&&e("span",{className:"switch__label",children:s}),l&&e("span",{className:"switch__loader"})]})},s=function(i){var c=i.message,n=i.type,o=void 0===n?"info":n,r=i.duration,l=void 0===r?3e3:r,s=i.onClose,d=i.className,u=void 0===d?"":d;a((function(){if(l>0){var t=setTimeout((function(){null==s||s()}),l);return function(){return clearTimeout(t)}}}),[l,s]);var v=["toast","toast--".concat(o),u].filter(Boolean).join(" ");return t("div",{className:v,role:"alert",children:[e("div",{className:"toast__icon",children:function(){switch(o){case"success":return"✓";case"error":return"✕";case"warning":return"⚠";case"info":return"ℹ";default:return""}}()}),e("div",{className:"toast__message",children:c}),s&&e("button",{className:"toast__close",onClick:s,"aria-label":"Close",children:"×"}),e("div",{className:"toast__progress",style:{animationDuration:"".concat(l,"ms")}})]})},d=function(n){var o,r=n.content,l=n.children,s=n.position,d=void 0===s?"top":s,u=n.delay,v=void 0===u?0:u,h=n.className,m=void 0===h?"":h,f=i(!1),p=f[0],_=f[1],N=i({top:0,left:0}),g=N[0],b=N[1],k=c(null),w=c(null),C=function(){o=setTimeout((function(){if(k.current&&w.current){var t=k.current.getBoundingClientRect(),e=w.current.getBoundingClientRect(),a=0,i=0;switch(d){case"top":a=t.top-e.height-8,i=t.left+(t.width-e.width)/2;break;case"right":a=t.top+(t.height-e.height)/2,i=t.right+8;break;case"bottom":a=t.bottom+8,i=t.left+(t.width-e.width)/2;break;case"left":a=t.top+(t.height-e.height)/2,i=t.left-e.width-8}b({top:a,left:i}),_(!0)}}),v)},B=function(){clearTimeout(o),_(!1)};a((function(){return function(){return clearTimeout(o)}}),[]);var j=["tooltip","tooltip--".concat(d),p?"tooltip--visible":"",m].filter(Boolean).join(" ");return t("div",{ref:k,className:"tooltip-trigger",onMouseEnter:C,onMouseLeave:B,onFocus:C,onBlur:B,children:[l,e("div",{ref:w,className:j,style:{top:"".concat(g.top,"px"),left:"".concat(g.left,"px")},role:"tooltip",children:r})]})};export{n as Avatar,o as Button,r as Card,l as Switch,s as Toast,d as Tooltip};
//# sourceMappingURL=index.esm.js.map