react-reusable-elements/dist/index.mjs

A collection of reusable React UI components.

import{jsxs as r,jsx as n}from"react/jsx-runtime";import{useState as e,useEffect as o}from"react";import a from"react-dom";var s=function(){return s=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},s.apply(this,arguments)};function i(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 t="EissaInputField-module_input_container__ApCvn",d="EissaInputField-module_input_wrapper__6AFYQ",l="EissaInputField-module_inputField__rJHdr",_="EissaInputField-module_inputFieldLabel__br3CD",c="EissaInputField-module_hide_placeholder__WjJio",u="EissaInputField-module_error__ssj7L",m="EissaInputField-module_errorMessage__Xm82-",p="EissaInputField-module_hideErrorMessage__m2QS-",h="EissaInputField-module_showErrorMessage__wP-Sz",b="EissaInputField-module_heightZero__8kZuo",E="EissaInputField-module_borderlessInput__CwWgP";i(".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 g=function(e){var o=e.label,a=e.name,i=e.register,g=e.rules,f=e.error,v=e.isTouched,y=e.placeholder,x=void 0===y?"":y,F=e.type,k=void 0===F?"text":F,C=e.keepSpaceForError,w=void 0===C||C,L=e.bg,M=e.fontColor,I=e.varient,B=void 0===I?"primary":I;return r("div",{className:t,children:[r("div",{className:"".concat(d," ").concat(v&&(null==f?void 0:f.message)&&u),children:[n("input",s({type:k,id:a,placeholder:x},i(a,g),{className:"".concat(l," ").concat(o&&c," ").concat("secondary"===B&&E),style:{backgroundColor:L&&L,color:M&&M}})),o&&n("label",{htmlFor:a,className:_,style:{backgroundColor:L&&L,color:M&&M},children:o})]}),r("div",{className:"".concat(!w&&b," ").concat(m," ").concat(v&&(null==f?void 0:f.message)?h:p),children:[" ",null==f?void 0:f.message]})]})},f="EissaButton-module_eissa_button__qqG9z",v="EissaButton-module_primary__aain1",y="EissaButton-module_secondary__mpLkM",x="EissaButton-module_disabled__AMGBr";i(".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"};i(".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 k=function(e){var o=e.varient;return r("div",{className:"".concat(F.loader," ").concat(F[o]),children:[n("div",{className:F.dot}),n("div",{className:F.dot}),n("div",{className:F.dot})]})},C=function(e){var o=e.label,a=e.onClick,s=e.type,i=void 0===s?"button":s,t=e.variant,d=void 0===t?"primary":t,l=e.disabled,_=void 0!==l&&l,c=e.isLoading,u=void 0!==c&&c,m=e.icon,p=e.bg,h=e.fontColor,b=e.padding,E=e.borderColor;return r("button",{className:"".concat(f," ").concat("primary"===d?v:y," ").concat(_?x:""),onClick:a,type:i,disabled:_||u,style:{backgroundColor:p,padding:b,color:h,borderColor:E},children:[m&&n("img",{src:m,alt:"Button Icon"}),u?n(k,{varient:d}):o]})},w={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"};i(".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 L=function(e){var o=e.label,a=e.name,i=e.register,t=e.rules,d=e.error,l=e.isTouched;return r("div",{className:w.checkbox_container,children:[r("div",{children:[n("input",s({type:"checkbox"},i(a,t),{className:"".concat(w.checkbox," ").concat(l&&(null==d?void 0:d.message)?w.error:"")})),n("label",{className:w.checkbox_label,htmlFor:a,children:o})]}),r("div",{className:"".concat(w.errorMessage," ").concat(l&&(null==d?void 0:d.message)?w.showErrorMessage:w.hideErrorMessage),children:[" ",null==d?void 0:d.message]})]})},M="EissaModal-module_main_container__CM9up",I="EissaModal-module_visible__t-0OL",B="EissaModal-module_hide__XlVCw";i(".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 z=function(r){var s=r.ModalContent,i=r.isVisible,t=e(!1),d=t[0],l=t[1];if(o((function(){i?l(i):setTimeout((function(){l(i)}),500)}),[i]),!d&&!i)return null;var _=n("div",{className:"".concat(M," ").concat(i?I:B),children:n(s,{})});return a.createPortal(_,document.body)},T="EissaAvatar-module_main_container__wy2kT",j="EissaAvatar-module_avatar_img__TDRzP";i(".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 S=function(r){var e=r.img,o=r.bg,a=r.fontColor,s=r.fontSize,i=r.height,t=r.name,d=r.CTA;return n("div",{className:T,style:{backgroundColor:o,color:a,fontSize:s,height:i},onClick:d,children:e?n("img",{src:e,alt:"Avatar",className:j}):null==t?void 0:t.charAt(0).toUpperCase()})},N="EissaTextLogo-module_logo__OZ5zp";i("@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");var A=function(e){var o=e.text,a=void 0===o?"Logo":o,s=e.size,i=void 0===s?40:s,t=e.colors,d=void 0===t?["#4285F4","#EA4335","#FBBC05","#34A853"]:t,l=e.BrandLogo;return r("div",{className:N,style:{fontSize:"".concat(i,"px")},children:[n("span",{children:l&&l}),a.split("").map((function(r,e){return n("span",{style:{color:d[e%d.length],animationDelay:"".concat(.1+.2*e,"s")},children:r},e)}))]})};export{S as EissaAvatar,C as EissaButton,L as EissaCheckbox,g as EissaInputField,k as EissaLoader,z as EissaModal,A as EissaTextLogo};
//# sourceMappingURL=index.mjs.map