vdk-components/dist/index.js

React component library built with TypeScript and SCSS

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