UNPKG

vdk-components

Version:

React component library built with TypeScript and SCSS

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