react-reusable-elements/dist/index.js

A collection of reusable React UI components.

"use strict";var r=require("react/jsx-runtime"),n=require("react"),e=require("react-dom"),o=function(){return o=Object.assign||function(r){for(var n,e=1,o=arguments.length;e<o;e++)for(var a in n=arguments[e])Object.prototype.hasOwnProperty.call(n,a)&&(r[a]=n[a]);return r},o.apply(this,arguments)};function a(r,n){void 0===n&&(n={});var e=n.insertAt;if(r&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===e&&o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.styleSheet?a.styleSheet.cssText=r:a.appendChild(document.createTextNode(r))}}"function"==typeof SuppressedError&&SuppressedError;var s="EissaInputField-module_input_container__ApCvn",i="EissaInputField-module_input_wrapper__6AFYQ",t="EissaInputField-module_inputField__rJHdr",d="EissaInputField-module_inputFieldLabel__br3CD",l="EissaInputField-module_hide_placeholder__WjJio",_="EissaInputField-module_error__ssj7L",u="EissaInputField-module_errorMessage__Xm82-",c="EissaInputField-module_hideErrorMessage__m2QS-",m="EissaInputField-module_showErrorMessage__wP-Sz",p="EissaInputField-module_heightZero__8kZuo",h="EissaInputField-module_borderlessInput__CwWgP";a(".EissaInputField-module_input_container__ApCvn {\r\n    text-align: start;\r\n}\r\n\r\n.EissaInputField-module_input_container__ApCvn span {\r\n    color: red;\r\n}\r\n\r\n.EissaInputField-module_input_wrapper__6AFYQ {\r\n    --focus-color: var(--brand-color);\r\n    --padding: 0.75rem;\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.EissaInputField-module_inputField__rJHdr {\r\n    padding: var(--padding);\r\n    border: 2px solid gray;\r\n    outline: none;\r\n    border-radius: 6px;\r\n    transition: all 0.2s ease-in;\r\n    width: 100%;\r\n}\r\n\r\n.EissaInputField-module_inputFieldLabel__br3CD {\r\n    position: absolute;\r\n    background-color: white;\r\n    color: gray;\r\n    left: var(--padding);\r\n    padding: 0 4px;\r\n    transition: all 0.2s ease-in;\r\n    cursor: text;\r\n}\r\n\r\n.EissaInputField-module_inputField__rJHdr::placeholder {\r\n    transition: all 0.2s ease-in;\r\n}\r\n\r\n.EissaInputField-module_hide_placeholder__WjJio:not(:focus)::placeholder {\r\n    opacity: 0;\r\n}\r\n\r\n.EissaInputField-module_inputField__rJHdr:is(:focus) {\r\n    border: 2px solid var(--focus-color);\r\n}\r\n\r\n.EissaInputField-module_inputField__rJHdr:is(:focus)+.EissaInputField-module_inputFieldLabel__br3CD {\r\n    color: var(--focus-color);\r\n}\r\n\r\n.EissaInputField-module_inputField__rJHdr:is(:focus, :not(:placeholder-shown)) {}\r\n\r\n.EissaInputField-module_inputField__rJHdr:is(:focus, :not(:placeholder-shown))+.EissaInputField-module_inputFieldLabel__br3CD {\r\n    transform: translatey(calc(-1 * var(--padding) - 12px)) translatex(-8px);\r\n    font-size: 14px;\r\n}\r\n\r\n.EissaInputField-module_error__ssj7L .EissaInputField-module_inputField__rJHdr:is(:not(:focus)) {\r\n    border: 2px solid red;\r\n}\r\n\r\n.EissaInputField-module_error__ssj7L .EissaInputField-module_inputFieldLabel__br3CD {\r\n    color: red;\r\n}\r\n\r\n.EissaInputField-module_errorMessage__Xm82- {\r\n    color: red;\r\n    font-size: 0.75rem;\r\n    height: 1rem;\r\n    transition: opacity 0.75s ease;\r\n}\r\n\r\n.EissaInputField-module_hideErrorMessage__m2QS- {\r\n    opacity: 0;\r\n}\r\n\r\n.EissaInputField-module_showErrorMessage__wP-Sz {\r\n    opacity: 1;\r\n    height: unset;\r\n}\r\n\r\n.EissaInputField-module_heightZero__8kZuo {\r\n    height: 0;\r\n}\r\n\r\n\r\n.EissaInputField-module_borderlessInput__CwWgP {\r\n    border: none;\r\n}\r\n\r\n.EissaInputField-module_borderlessInput__CwWgP:focus {\r\n    border: none;\r\n}\r\n\r\n.EissaInputField-module_error__ssj7L .EissaInputField-module_borderlessInput__CwWgP:is(:not(:focus)) {\r\n    border: none;\r\n}");var E="EissaButton-module_eissa_button__qqG9z",b="EissaButton-module_primary__aain1",g="EissaButton-module_secondary__mpLkM",x="EissaButton-module_disabled__AMGBr";a(".EissaButton-module_eissa_button__qqG9z {\r\n    --padding: 12px 24px;\r\n    --border-radius: 32px;\r\n    padding: var(--padding);\r\n    border-radius: var(--border-radius);\r\n    cursor: pointer;\r\n    /* min-width: 3rem; */\r\n    border: 2px solid var(--brand-color);\r\n    font-weight: bold;\r\n    transition: all 0.5s ease;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.EissaButton-module_primary__aain1 {\r\n    background-color: var(--brand-color);\r\n    color: white;\r\n}\r\n\r\n.EissaButton-module_eissa_button__qqG9z:hover {\r\n    opacity: 0.9;\r\n    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\r\n}\r\n\r\n.EissaButton-module_eissa_button__qqG9z:active {\r\n    filter: brightness(50%);\r\n    transform: scale(0.95);\r\n}\r\n\r\n.EissaButton-module_secondary__mpLkM {\r\n    background-color: white;\r\n    color: var(--brand-color);\r\n}\r\n\r\n.EissaButton-module_eissa_button__qqG9z.EissaButton-module_disabled__AMGBr {\r\n    background-color: gray;\r\n    cursor: not-allowed;\r\n}\r\n\r\n.EissaButton-module_loader__CWshF {\r\n    width: 0.8rem;\r\n    height: 0.8rem;\r\n    border: 2px solid var(--brand-color);\r\n    border-bottom-color: transparent;\r\n    border-radius: 50%;\r\n    display: inline-block;\r\n    box-sizing: border-box;\r\n    animation: EissaButton-module_rotation__FG7of 1s linear infinite;\r\n}\r\n\r\n.EissaButton-module_primary__aain1 > .EissaButton-module_loader__CWshF{\r\n    border: 2px solid white;\r\n}\r\n\r\n@keyframes EissaButton-module_rotation__FG7of {\r\n    0% {\r\n        transform: rotate(0deg);\r\n    }\r\n\r\n    100% {\r\n        transform: rotate(360deg);\r\n    }\r\n}");var f={dot:"EissaLoader-module_dot__fjyS0",bounce:"EissaLoader-module_bounce__tUvaz",primary:"EissaLoader-module_primary__OnJla",secondary:"EissaLoader-module_secondary__wrBlZ",loader:"EissaLoader-module_loader__GRxRB"};a(".EissaLoader-module_dot__fjyS0 {\r\n    height: 0.4rem;\r\n    width: 0.4rem;\r\n    border-radius: 50%;\r\n    animation: EissaLoader-module_bounce__tUvaz 0.6s infinite ease-in-out;\r\n}\r\n\r\n.EissaLoader-module_primary__OnJla .EissaLoader-module_dot__fjyS0 {\r\n    background-color: white;\r\n}\r\n\r\n.EissaLoader-module_secondary__wrBlZ .EissaLoader-module_dot__fjyS0 {\r\n    background-color: var(--brand-color);\r\n}\r\n\r\n.EissaLoader-module_loader__GRxRB {\r\n    display: flex;\r\n    gap: 0.5rem;\r\n    justify-content: center;\r\n    height: 2ch;\r\n}\r\n\r\n.EissaLoader-module_loader__GRxRB .EissaLoader-module_dot__fjyS0:nth-child(1) {\r\n    animation-delay: 0s;\r\n}\r\n\r\n.EissaLoader-module_loader__GRxRB .EissaLoader-module_dot__fjyS0:nth-child(2) {\r\n    animation-delay: 0.1s;\r\n}\r\n\r\n.EissaLoader-module_loader__GRxRB .EissaLoader-module_dot__fjyS0:nth-child(3) {\r\n    animation-delay: 0.2s;\r\n}\r\n\r\n@keyframes EissaLoader-module_bounce__tUvaz {\r\n\r\n    0%,\r\n    100% {\r\n        transform: translateY(0.25rem);\r\n    }\r\n\r\n    50% {\r\n        transform: translateY(-0.25rem);\r\n    }\r\n}");var v=function(n){var e=n.varient;return r.jsxs("div",{className:"".concat(f.loader," ").concat(f[e]),children:[r.jsx("div",{className:f.dot}),r.jsx("div",{className:f.dot}),r.jsx("div",{className:f.dot})]})},y={checkbox_container:"EissaCheckbox-module_checkbox_container__JVMgx",checkbox_label:"EissaCheckbox-module_checkbox_label__361-Y",checkbox:"EissaCheckbox-module_checkbox__fZBpm",errorMessage:"EissaCheckbox-module_errorMessage__3bfEM",hideErrorMessage:"EissaCheckbox-module_hideErrorMessage__8R-JQ",showErrorMessage:"EissaCheckbox-module_showErrorMessage__aOyT0"};a(".EissaCheckbox-module_checkbox_container__JVMgx {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: start;\r\n}\r\n\r\n.EissaCheckbox-module_checkbox_label__361-Y {\r\n    padding-left: 0.25rem;\r\n}\r\n\r\n.EissaCheckbox-module_checkbox__fZBpm {\r\n    accent-color: var(--brand-color)\r\n}\r\n\r\n.EissaCheckbox-module_errorMessage__3bfEM {\r\n    color: red;\r\n    font-size: 0.75rem;\r\n    height: 1rem;\r\n    transition: opacity 0.75s ease;\r\n}\r\n\r\n.EissaCheckbox-module_hideErrorMessage__8R-JQ {\r\n    opacity: 0;\r\n}\r\n\r\n.EissaCheckbox-module_showErrorMessage__aOyT0 {\r\n    opacity: 1;\r\n}");var F="EissaModal-module_main_container__CM9up",k="EissaModal-module_visible__t-0OL",C="EissaModal-module_hide__XlVCw";a(".EissaModal-module_main_container__CM9up {\r\n    background-color: rgba(0, 0, 0, 0.5);\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    height: 100%;\r\n    width: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    opacity: 0;\r\n    transition: opacity 0.5s ease;\r\n}\r\n\r\n.EissaModal-module_visible__t-0OL {\r\n    animation: EissaModal-module_showModal__Lpx-R 0.5s forwards ease\r\n}\r\n\r\n.EissaModal-module_hide__XlVCw {\r\n    animation: EissaModal-module_hideModal__Tdh3V 0.5s forwards ease\r\n}\r\n\r\n@keyframes EissaModal-module_showModal__Lpx-R {\r\n    from {\r\n        opacity: 0;\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n    }\r\n}\r\n\r\n@keyframes EissaModal-module_hideModal__Tdh3V {\r\n    from {\r\n        opacity: 1;\r\n    }\r\n\r\n    to {\r\n        opacity: 0;\r\n    }\r\n}");var w="EissaAvatar-module_main_container__wy2kT",L="EissaAvatar-module_avatar_img__TDRzP";a(".EissaAvatar-module_main_container__wy2kT {\r\n    height: 2rem;\r\n    aspect-ratio: 1;\r\n    background-color: var(--brand-color);\r\n    border-radius: 50%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    color: white;\r\n    cursor: pointer;\r\n}\r\n\r\n.EissaAvatar-module_main_container__wy2kT .EissaAvatar-module_avatar_img__TDRzP {\r\n    height: 100%;\r\n    object-fit: cover;\r\n    aspect-ratio: 1;\r\n    overflow: hidden;\r\n    border-radius: 50%;\r\n}");var j="EissaTextLogo-module_logo__OZ5zp";a("@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@700&display=swap');\r\n\r\n.EissaTextLogo-module_logo__OZ5zp {\r\n  font-family: \"Catamaran\", sans-serif;\r\n  font-weight: 700;\r\n  display: flex;\r\n}\r\n\r\n.EissaTextLogo-module_logo__OZ5zp span {\r\n  opacity: 0;\r\n  transform: translateY(30px);\r\n  animation: EissaTextLogo-module_fadeUp__SQiuD 0.6s ease forwards;\r\n  display: inline-block;\r\n  cursor: default;\r\n  transition: transform 0.3s ease;\r\n}\r\n\r\n.EissaTextLogo-module_logo__OZ5zp span:hover {\r\n  transform: scale(1.2) rotate(-5deg);\r\n}\r\n\r\n@keyframes EissaTextLogo-module_fadeUp__SQiuD {\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n}\r\n\r\n@media (max-width: 420px) {\r\n  .EissaTextLogo-module_logo__OZ5zp {\r\n    letter-spacing: -2px;\r\n  }\r\n}\r\n");exports.EissaAvatar=function(n){var e=n.img,o=n.bg,a=n.fontColor,s=n.fontSize,i=n.height,t=n.name,d=n.CTA;return r.jsx("div",{className:w,style:{backgroundColor:o,color:a,fontSize:s,height:i},onClick:d,children:e?r.jsx("img",{src:e,alt:"Avatar",className:L}):null==t?void 0:t.charAt(0).toUpperCase()})},exports.EissaButton=function(n){var e=n.label,o=n.onClick,a=n.type,s=void 0===a?"button":a,i=n.variant,t=void 0===i?"primary":i,d=n.disabled,l=void 0!==d&&d,_=n.isLoading,u=void 0!==_&&_,c=n.icon,m=n.bg,p=n.fontColor,h=n.padding,f=n.borderColor;return r.jsxs("button",{className:"".concat(E," ").concat("primary"===t?b:g," ").concat(l?x:""),onClick:o,type:s,disabled:l||u,style:{backgroundColor:m,padding:h,color:p,borderColor:f},children:[c&&r.jsx("img",{src:c,alt:"Button Icon"}),u?r.jsx(v,{varient:t}):e]})},exports.EissaCheckbox=function(n){var e=n.label,a=n.name,s=n.register,i=n.rules,t=n.error,d=n.isTouched;return r.jsxs("div",{className:y.checkbox_container,children:[r.jsxs("div",{children:[r.jsx("input",o({type:"checkbox"},s(a,i),{className:"".concat(y.checkbox," ").concat(d&&(null==t?void 0:t.message)?y.error:"")})),r.jsx("label",{className:y.checkbox_label,htmlFor:a,children:e})]}),r.jsxs("div",{className:"".concat(y.errorMessage," ").concat(d&&(null==t?void 0:t.message)?y.showErrorMessage:y.hideErrorMessage),children:[" ",null==t?void 0:t.message]})]})},exports.EissaInputField=function(n){var e=n.label,a=n.name,E=n.register,b=n.rules,g=n.error,x=n.isTouched,f=n.placeholder,v=void 0===f?"":f,y=n.type,F=void 0===y?"text":y,k=n.keepSpaceForError,C=void 0===k||k,w=n.bg,L=n.fontColor,j=n.varient,M=void 0===j?"primary":j;return r.jsxs("div",{className:s,children:[r.jsxs("div",{className:"".concat(i," ").concat(x&&(null==g?void 0:g.message)&&_),children:[r.jsx("input",o({type:F,id:a,placeholder:v},E(a,b),{className:"".concat(t," ").concat(e&&l," ").concat("secondary"===M&&h),style:{backgroundColor:w&&w,color:L&&L}})),e&&r.jsx("label",{htmlFor:a,className:d,style:{backgroundColor:w&&w,color:L&&L},children:e})]}),r.jsxs("div",{className:"".concat(!C&&p," ").concat(u," ").concat(x&&(null==g?void 0:g.message)?m:c),children:[" ",null==g?void 0:g.message]})]})},exports.EissaLoader=v,exports.EissaModal=function(o){var a=o.ModalContent,s=o.isVisible,i=n.useState(!1),t=i[0],d=i[1];if(n.useEffect((function(){s?d(s):setTimeout((function(){d(s)}),500)}),[s]),!t&&!s)return null;var l=r.jsx("div",{className:"".concat(F," ").concat(s?k:C),children:r.jsx(a,{})});return e.createPortal(l,document.body)},exports.EissaTextLogo=function(n){var e=n.text,o=void 0===e?"Logo":e,a=n.size,s=void 0===a?40:a,i=n.colors,t=void 0===i?["#4285F4","#EA4335","#FBBC05","#34A853"]:i,d=n.BrandLogo;return r.jsxs("div",{className:j,style:{fontSize:"".concat(s,"px")},children:[r.jsx("span",{children:d&&d}),o.split("").map((function(n,e){return r.jsx("span",{style:{color:t[e%t.length],animationDelay:"".concat(.1+.2*e,"s")},children:n},e)}))]})};
//# sourceMappingURL=index.js.map