@hbuesing/ui-library 3.0.0 → 3.0.1

package/dist/bundle.js

@@ -0,0 +1,2 @@
+import e,{useEffect as l,useRef as i,useState as r}from"react";function t(){return t=Object.assign?Object.assign.bind():function(e){for(var l=1;l<arguments.length;l++){var i=arguments[l];for(var r in i)({}).hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},t.apply(null,arguments)}function a(e,l){if(null==e)return{};var i={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(l.includes(r))continue;i[r]=e[r]}return i}var o=":root{--uil-black:#000;--uil-black-alt:#222;--uil-white:#fff;--uil-grey:#f3f3f3;--uil-grey-alt:#cfcfcf;--uil-grey-dark:#878787;--uil-outline-focus:#1e90ff;--uil-outline-disabled:#8b0000;--uil-success:#006a4e;--uil-error:#800020;--uil-question:#00416a;--uil-warning:gold;--uil-xxxs:.125rem;--uil-xxs:.25rem;--uil-xs:.5rem;--uil-s:.75rem;--uil-m:1rem;--uil-l:1.25rem;--uil-xl:1.5rem;--uil-xxl:1.75rem;--uil-xxxl:2rem;--uil-font-base:var(--uil-l);--uil-font-small:var(--uil-m)}.uil-button{background-color:var(--uil-white);border:1px solid var(--uil-black);border-radius:2px;box-shadow:0 0 3px 0 var(--uil-black-alt);color:var(--uil-black);cursor:pointer;letter-spacing:1px;padding:var(--uil-xs) var(--uil-s)}.uil-button.uil-disabled{background-color:var(--uil-grey-dark);border:transparent;color:var(--uil-grey)}.uil-button.uil-small{font-size:var(--uil-font-small);line-height:var(--uil-font-small);padding:var(--uil-xxs) var(--uil-xs)}.uil-check-wrapper{align-items:center;display:flex;font-size:var(--uil-font-base);gap:var(--uil-s);line-height:var(--uil-font-base)}.uil-check-wrapper .uil-checkbox{border-radius:2px}.uil-svg-wrapper{display:flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content}.uil-svg-wrapper .uil-svg{height:var(--uil-xxxl);width:var(--uil-xxxl)}.uil-input-wrapper{display:block;position:relative}.uil-input-wrapper .uil-label{background:linear-gradient(0deg,var(--uil-white) 9px,transparent 0);color:var(--uil-black);cursor:text;font-weight:700;left:var(--uil-xxs);opacity:.6;padding:0 var(--uil-xxxs);position:absolute;top:25%;transition:top .25s ease-in-out}.uil-input-wrapper .uil-input{background-color:var(--uil-white);border:1px solid var(--uil-black);border-radius:0;box-sizing:border-box;color:var(--uil-black);padding:var(--uil-xs);width:100%}.uil-input-wrapper .uil-input::-moz-placeholder{color:transparent;height:0;width:0}.uil-input-wrapper .uil-input::placeholder{color:transparent;height:0;width:0}.uil-input-wrapper .uil-input:focus{outline:1px solid var(--uil-outline-focus)}.uil-input-wrapper .uil-input:disabled{background-color:var(--uil-grey);border:2px solid var(--uil-outline-disabled);color:var(--uil-grey-dark);cursor:not-allowed}.uil-input-wrapper .uil-input:disabled~.uil-label{background:transparent;color:var(--uil-grey-dark);cursor:not-allowed}.uil-input-wrapper .uil-input:disabled~.uil-icon{fill:var(--uil-grey-dark);cursor:not-allowed}.uil-input-wrapper .uil-input:disabled:not(:-moz-placeholder-shown)~.uil-label{background:linear-gradient(0deg,var(--uil-grey) 8px,transparent 0)}.uil-input-wrapper .uil-input:disabled:not(:placeholder-shown)~.uil-label{background:linear-gradient(0deg,var(--uil-grey) 8px,transparent 0)}.uil-input-wrapper .uil-icon{fill:var(--uil-black);align-items:center;display:flex;justify-content:center;opacity:.5;position:absolute;right:var(--uil-xs);top:50%;transform:translateY(-50%)}.uil-input-wrapper .uil-input:not(:-moz-placeholder-shown)~.uil-label{opacity:1;top:-30%}.uil-input-wrapper .uil-input:focus~.uil-label,.uil-input-wrapper .uil-input:not(:placeholder-shown)~.uil-label{opacity:1;top:-30%}.uil-input-wrapper .uil-input:not(:-moz-placeholder-shown)~.uil-icon{opacity:1}.uil-input-wrapper .uil-input:focus~.uil-icon,.uil-input-wrapper .uil-input:not(:placeholder-shown)~.uil-icon{opacity:1}.uil-tooltip-wrapper{position:relative}.uil-tooltip-wrapper .uil-tooltip-icon{fill:var(--uil-black-alt);cursor:pointer;margin-bottom:var(--uil-xxs)}.uil-tooltip-wrapper .uil-tooltip-icon:has(~.uil-input-wrapper>.uil-input:not(:-moz-placeholder-shown),~.uil-input-wrapper:focus-within){opacity:0;-moz-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s;visibility:hidden}.uil-tooltip-wrapper .uil-tooltip-icon:has(~.uil-input-wrapper>.uil-input:not(:placeholder-shown),~.uil-input-wrapper:focus-within){opacity:0;transition:opacity .3s,visibility .3s;visibility:hidden}.uil-tooltip-wrapper .uil-tooltip{background-color:rgba(34,34,34,.9);border-radius:3px;box-sizing:border-box;color:var(--uil-white);font-size:var(--uil-font-small);left:0;line-height:var(--uil-font-small);padding:var(--uil-s);position:absolute;top:0;width:100%;z-index:1}.uil-tooltip-wrapper .uil-tooltip .uil-tooltip-button{background-color:transparent;border:none;border-bottom:1px solid var(--uil-white);color:var(--uil-white);cursor:pointer;display:block;margin-bottom:var(--uil-m);margin-left:auto;padding:0}.uil-password-rules{display:flex;flex-direction:column;gap:var(--uil-xs);margin-left:var(--uil-xs);margin-top:var(--uil-m)}.uil-password-rules .uil-password-rule{align-items:center;display:flex;font-size:var(--uil-font-small);gap:var(--uil-xxs);line-height:var(--uil-font-small)}.uil-modal-wrapper{background-color:rgba(0,0,0,.5);height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}.uil-modal-wrapper .uil-modal{border-radius:5px;box-shadow:0 0 6px 0 var(--uil-black);left:50%;position:absolute;top:30%;transform:translateX(-50%);width:95%;z-index:999}@media (min-width:1025px){.uil-modal-wrapper .uil-modal{width:75%}}@media (min-width:1250px){.uil-modal-wrapper .uil-modal{width:55%}}@media (min-width:1920px){.uil-modal-wrapper .uil-modal{width:35%}}.uil-modal-wrapper .uil-modal .uil-progress-wrapper{background-color:var(--uil-grey-alt)}.uil-modal-wrapper .uil-modal .uil-progress-wrapper .uil-progress-bar{animation-duration:2s;animation-iteration-count:1;animation-name:uil-progress;border:2px solid var(--uil-grey-dark)}@keyframes uil-progress{0%{width:100%}to{width:0}}.uil-modal-wrapper .uil-modal .uil-header{background-color:var(--uil-question);border-top-left-radius:3px;border-top-right-radius:3px;color:var(--uil-white);display:flex;font-size:var(--uil-xl);font-weight:700;justify-content:space-between;line-height:var(--uil-xl);margin:0;padding:var(--uil-s)}@media (min-width:1025px){.uil-modal-wrapper .uil-modal .uil-header{font-size:var(--uil-xxxl);line-height:var(--uil-xxxl);padding:var(--uil-m)}}.uil-modal-wrapper .uil-modal .uil-header.uil-success{background-color:var(--uil-success)}.uil-modal-wrapper .uil-modal .uil-header.uil-error{background-color:var(--uil-error)}.uil-modal-wrapper .uil-modal .uil-header.uil-warning{background-color:var(--uil-warning);color:var(--uil-black)}.uil-modal-wrapper .uil-modal .uil-content{background-color:var(--uil-white);border-bottom-left-radius:3px;border-bottom-right-radius:3px;display:flex;flex-direction:column;gap:var(--uil-m);padding:var(--uil-m)}@media (min-width:1025px){.uil-modal-wrapper .uil-modal .uil-content{gap:var(--uil-xxxl);padding:var(--uil-l)}}.uil-modal-wrapper .uil-modal .uil-content .uil-modal-text{color:var(--uil-black);font-size:var(--uil-font-small);line-height:var(--uil-font-small);margin:var(--uil-s) 0}@media (min-width:760px){.uil-modal-wrapper .uil-modal .uil-content .uil-modal-text{font-size:var(--uil-font-base);line-height:var(--uil-font-base)}}.uil-modal-wrapper .uil-modal .uil-content .uil-button-wrapper{display:flex;justify-content:space-between}.uil-modal-wrapper .uil-modal .uil-content .uil-button-wrapper.uil-single{justify-content:end}.uil-radio-title{display:block;font-size:var(--uil-xl);line-height:var(--uil-xl);margin-bottom:var(--uil-m)}.uil-radio-wrapper{display:flex;flex-direction:column;gap:var(--uil-m)}.uil-radio-wrapper .uil-radio-option{align-items:center;display:flex;gap:.25rem}.uil-radio-wrapper .uil-radio-option .uil-radio,.uil-radio-wrapper .uil-radio-option .uil-radio .uil-radio-check{border-radius:50%}.uil-fit{height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content}.uil-font-base{font-size:var(--uil-font-base);line-height:var(--uil-font-base)}.uil-check{border:2px solid var(--uil-black-alt);box-sizing:border-box;cursor:pointer;display:block;font-size:var(--uil-font-small);line-height:var(--uil-font-small);min-height:var(--uil-l);min-width:var(--uil-l);position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.uil-check:has(input:disabled){background-color:var(--uil-grey);border-color:var(--uil-grey-dark)}.uil-check input{cursor:pointer;height:0;opacity:0;position:absolute;width:0}.uil-check input:checked~.uil-checkmark{transform:scale(1)}.uil-check input:disabled~.uil-checkmark{background-color:var(--uil-grey-dark)}.uil-check .uil-checkmark{background-color:var(--uil-black-alt);height:var(--uil-xs);left:25%;position:absolute;top:25%;transform:scale(0);transition:.1s ease;width:var(--uil-xs)}";const n=[];function u(e){l(()=>{const l=e.current?e.current.ownerDocument:document;if(void 0!==l&&!n.includes(l)){const e=l.createElement("style");e.innerHTML=o,n.push(l),l.head.appendChild(e)}},[])}function c(e){if(7!==e.length)throw new Error("provided hex color must be 7 characters (including #) long");e=e.substring(1,7);const l=[parseInt(e.substring(0,2),16)/255,parseInt(e.substring(2,4),16)/255,parseInt(e.substring(4,6),16)/255].map(e=>e<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4));return.2126*l[0]+.7152*l[1]+.0722*l[2]>.179?"#000000":"#ffffff"}const s=["disabled","label","small","theme"];function p(l){const{disabled:r=!1,label:o,small:n=!1,theme:p}=l,d=a(l,s),m=i(null);return u(m),e.createElement("button",t({className:function(){const e="uil-button uil-fit";return r&&!n?`${e} uil-font-base uil-disabled`:r&&n?`${e} uil-disabled uil-small`:n?`${e} uil-small`:`${e} uil-font-base`}(),style:function(){if(!r&&p){if(p.includes("#"))return{color:c(p),backgroundColor:p,border:"transparent"};switch(p){case"success":return{color:c("#006A4E"),backgroundColor:"#006A4E",border:"transparent"};case"warning":return{color:"#000000",backgroundColor:"#FFD700",border:"transparent"};case"error":return{color:c("#800020"),backgroundColor:"#800020",border:"transparent"};default:throw new Error("invalid theme provided")}}}(),disabled:r},d,{ref:m}),o)}const d=["checkColor","checked","toggleCheck","label","children"];function m(l){const{checkColor:r,checked:o,toggleCheck:n,label:c,children:s}=l,p=a(l,d),m=i(null);return u(m),e.createElement("div",{className:"uil-check-wrapper",ref:m},e.createElement("label",{className:"uil-checkbox uil-check"},e.createElement("input",t({type:"checkbox",checked:o,onChange:()=>{n(!o)}},p)),e.createElement("div",{className:"uil-checkmark",style:{backgroundColor:r}})),s||e.createElement("span",{onClick:()=>n(!o),style:{cursor:"pointer",userSelect:"none"}},c))}function h(l){const{src:r,color:t,height:a,width:o}=l;if(!r.includes(".svg"))throw new Error("Provided src is not an svg image");const n=i(null);return u(n),e.createElement("div",{ref:n,className:"uil-svg-wrapper"},e.createElement("svg",{"aria-hidden":!0,className:"uil-svg",style:{fill:t,height:`${a}px`,width:`${o}px`}},e.createElement("use",{href:r})))}const b=["iconColor","iconSrc","inputColor","label","toggle","valueChanged"];function g(l){const{iconColor:r,iconSrc:o,inputColor:n,label:c,toggle:s,valueChanged:p}=l,d=a(l,b),m=i(null);return u(m),e.createElement("label",{className:"uil-input-wrapper",htmlFor:d.id,ref:m},e.createElement("input",t({className:"uil-input uil-font-base",onChange:e=>p(e.target.value),placeholder:c,style:{color:n}},d)),o&&e.createElement("div",{className:"uil-icon",onClick:s},e.createElement(h,{src:o,width:24,height:24,color:r})),e.createElement("span",{className:"uil-label uil-font-base",style:{color:n}},c))}function f(e){const r=i(null);return l(()=>{if(r.current)return document.addEventListener("click",l),document.addEventListener("touchend",l),()=>{document.removeEventListener("click",l),document.removeEventListener("touchend",l)};function l(l){r.current&&!r.current.contains(l.target)&&e()}},[e]),r}const v=["tooltipClose","tooltipIcon","tooltipText"];function w(l){const{tooltipClose:i,tooltipIcon:o,tooltipText:n}=l,u=a(l,v),[c,s]=r(!1),p=f(d);function d(){s(!1)}return e.createElement(e.Fragment,null,o?e.createElement("div",{className:"uil-tooltip-wrapper",ref:p},c&&e.createElement("div",{className:"uil-tooltip"},i&&e.createElement("button",{className:"uil-tooltip-button uil-fit",onClick:d},i),e.createElement("span",null,n)),e.createElement("div",{className:"uil-tooltip-icon uil-fit",onClick:()=>s(!c)},e.createElement(h,{src:o,height:16,width:16})),e.createElement(g,t({},u))):e.createElement(g,t({},u)))}var k;!function(e){e[e.minLength=1]="minLength",e[e.maxLength=2]="maxLength",e[e.letters=3]="letters",e[e.numbers=4]="numbers",e[e.special=5]="special",e[e.upper=6]="upper"}(k||(k={}));const x=["capsLockWarning","rules","ruleChecked","ruleUnchecked","setFailedRules"];function y(i){const{capsLockWarning:o,rules:n,ruleChecked:u,ruleUnchecked:c,setFailedRules:s}=i,p=a(i,x),[d,m]=r(!1);function b(e){let l;if(e.type){if(!e.count)throw new Error("count must not be empty if a type is provided");switch(e.type){case k.minLength:l=`[a-zA-Z0-9ßÄäÖöÜü._!"\`'#%&§,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${e.count},}`;break;case k.maxLength:l=`^[a-zA-Z0-9ßÄäÖöÜü._!"\`'#%&,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{0,${e.count}}$`;break;case k.letters:l=`[a-zA-ZßÄäÖöÜü]{${e.count},}`;break;case k.numbers:l=`[0-9]{${e.count},}`;break;case k.special:l=`[._!"\`'#%&§,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${e.count},}`;break;case k.upper:l=`[A-ZÄÖÜ]{${e.count},}`;break;default:throw new Error("unrecognized rule type provided")}}else l=e.pattern?e.pattern:"";if(""===l)throw new Error("pattern must not be an empty string");return new RegExp(l).test(i.value)}return l(()=>{!function(){const e=[];n.forEach(l=>{b(l)||e.push(l)}),null==s||s(e)}()},[i.value]),l(()=>{if(o)return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e);function e(e){m(null==e.getModifierState?void 0:e.getModifierState("CapsLock"))}},[]),e.createElement(e.Fragment,null,e.createElement(w,t({},p)),e.createElement("div",{className:"uil-password-rules"},d&&e.createElement("div",{className:"uil-password-rule"},o),n.map((l,i)=>e.createElement("div",{key:i,className:"uil-password-rule"},e.createElement(h,{src:b(l)?u:c,height:12,width:12}),e.createElement("span",null,l.label)))))}var E;function C(r){const{callback:t,cancelLabel:a="",close:o,closeLabel:n,confirm:c,confirmLabel:s="",message:d,timeout:m,title:h,type:b}=r;let g;const f=i(null);return u(f),l(()=>{if(m)return g=setTimeout(()=>t?t():o(),m),()=>clearTimeout(g)},[]),e.createElement("div",{className:"uil-modal-wrapper",ref:f},e.createElement("div",{className:"uil-modal"},e.createElement("div",{className:function(){const e="uil-header";switch(b){case E.error:return`${e} uil-error`;case E.success:return`${e} uil-success`;case E.warning:return`${e} uil-warning`;default:return e}}()},h),m&&e.createElement("div",{className:"uil-progress-wrapper"},e.createElement("div",{className:"uil-progress-bar",style:{animationDuration:m/1e3+.5+"s"}})),e.createElement("div",{className:"uil-content"},e.createElement("div",null,Array.isArray(d)?d.map((l,i)=>e.createElement("p",{key:i,className:"uil-modal-text"},l)):e.createElement("p",{className:"uil-modal-text"},d)),e.createElement("div",{className:"uil-button-wrapper "+(b!==E.question?"uil-single":"")},b!==E.question&&e.createElement(p,{label:null!=n?n:"",onClick:function(){clearTimeout(g),m&&t?t():o()},type:"button"}),b==E.question&&r.confirm&&e.createElement(e.Fragment,null,e.createElement(p,{label:s,theme:"#00416A",onClick:c,type:"button"}),e.createElement(p,{label:a,onClick:o,type:"button"}))))))}!function(e){e.error="error",e.question="question",e.success="success",e.warning="warning"}(E||(E={}));const z=["modalType"];function N(l){const{modalType:i}=l,r=a(l,z);return e.createElement(C,t({type:i},r))}const $=["cancel"];function L(l){const{cancel:i}=l,r=a(l,$);return e.createElement(C,t({type:E.question,close:i},r))}function A(r){const{checkColor:t,disabled:a,label:o,options:n,value:c,valueChanged:s}=r,p=i(null);function d(e){c!==e&&s(e)}return u(p),l(()=>{n.forEach(e=>{e.checked&&d(e.value)})},[]),e.createElement("div",{ref:p},o&&e.createElement("div",{className:"uil-radio-title"},o),e.createElement("div",{className:"uil-radio-wrapper"},n.map((l,i)=>{return e.createElement("div",{key:(r=i,`${r}-${(new Date).getTime()}`),className:"uil-radio-option"},e.createElement("label",{className:"uil-radio uil-check"},e.createElement("input",{name:l.label,type:"radio",value:l.value,checked:c===l.value||""===c&&l.checked,onChange:()=>d(l.value),disabled:a||l.disabled}),e.createElement("div",{className:"uil-checkmark uil-radio-check",style:{backgroundColor:t}})),e.createElement("span",{className:"uil-font-base"},l.label));var r})))}export{p as CustomButton,m as CustomCheckBox,w as CustomInput,A as CustomRadio,N as NotifyModal,y as PasswordInput,k as PasswordRuleTypes,L as QuestionModal,h as SVG,f as useClickOutsideRef,c as useGetColor};
+//# sourceMappingURL=bundle.js.map

package/dist/bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundle.js","sources":["../src/utils/useInjectStyles.ts","../src/hooks/getColor.ts","../src/components/button/customButton.tsx","../src/components/checkbox/customCheckBox.tsx","../src/components/images/svgIcon.tsx","../src/components/input/baseInput.tsx","../src/hooks/clickOutside.ts","../src/components/input/customInput.tsx","../src/enums/passwordRuleTypes.ts","../src/components/input/passwordInput.tsx","../src/enums/modalType.ts","../src/components/modal/baseModal.tsx","../src/components/modal/notifyModal.tsx","../src/components/modal/questionModal.tsx","../src/components/radio/customRadio.tsx","../src/utils/generateKey.ts"],"sourcesContent":["import {RefObject, useEffect} from \"react\";\nimport styles from \"./styles.scss\";\n\nconst injectedStyles: Document[] = [];\n\nexport default function useInjectStyleSheet(nodeRef: RefObject<HTMLElement>): void {\n  useEffect(() => {\n    const parentDocument = nodeRef.current ? nodeRef.current.ownerDocument : document;\n\n    if (typeof parentDocument !== \"undefined\" && !injectedStyles.includes(parentDocument)) {\n      const styleElement = parentDocument.createElement(\"style\");\n\n      styleElement.innerHTML = styles;\n      injectedStyles.push(parentDocument);\n\n      parentDocument.head.appendChild(styleElement);\n    }\n  }, []);\n}","export function useGetColor(backgroundColor: string) {\n  if (backgroundColor.length !== 7) throw new Error('provided hex color must be 7 characters (including #) long');\n\n  backgroundColor = backgroundColor.substring(1, 7);\n  const uiColors = [\n    parseInt(backgroundColor.substring(0, 2), 16) / 255,\n    parseInt(backgroundColor.substring(2, 4), 16) / 255,\n    parseInt(backgroundColor.substring(4, 6), 16) / 255\n  ];\n  const c = uiColors.map(col => {\n    return col <= 0.03928? (col / 12.92) : Math.pow((col + 0.055) / 1.055, 2.4);\n  });\n  const contrast = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);\n\n  return contrast > 0.179 ? '#000000' : '#ffffff';\n}","import React, {ComponentPropsWithoutRef, CSSProperties, useRef} from 'react';\nimport useInjectStyleSheet from \"utils/useInjectStyles\";\nimport {useGetColor} from 'hooks/getColor';\n\ntype HEXColor = `#${string}`\n\ninterface ICustomButton extends ComponentPropsWithoutRef<'button'> {\n  label    : string;\n  disabled?: boolean;\n  small?   : boolean;\n  theme?   : HEXColor | 'success' | 'warning' | 'error';\n}\n\nexport function CustomButton(props: ICustomButton) {\n  const {\n    disabled = false,\n    label,\n    small = false,\n    theme,\n    ...buttonProps\n  } = props;\n\n  const nodeRef = useRef<HTMLButtonElement>(null);\n  useInjectStyleSheet(nodeRef);\n\n  function getStyle(): CSSProperties | undefined {\n    if (disabled || !theme) return undefined;\n\n    if (theme.includes('#')) {\n      return {\n        color: useGetColor(theme),\n        backgroundColor: theme,\n        border: 'transparent'\n      };\n    }\n\n    switch (theme) {\n      case 'success':\n        return {\n          color: useGetColor('#006A4E'),\n          backgroundColor: '#006A4E',\n          border: 'transparent'\n        };\n      case 'warning':\n        return {\n          color: '#000000',\n          backgroundColor: '#FFD700',\n          border: 'transparent'\n        };\n      case 'error':\n        return {\n          color: useGetColor('#800020'),\n          backgroundColor: '#800020',\n          border: 'transparent'\n        };\n      default:\n        throw new Error('invalid theme provided')\n    }\n  }\n\n  function getClassName(): string {\n    const base = 'uil-button uil-fit'\n\n    if (disabled && !small) {\n      return `${base} uil-font-base uil-disabled`;\n    }\n\n    if (disabled && small) {\n      return `${base} uil-disabled uil-small`;\n    }\n\n    if (small) {\n      return `${base} uil-small`;\n    }\n\n    return `${base} uil-font-base`;\n  }\n\n  return (\n    <button className={getClassName()} style={getStyle()} disabled={disabled} {...buttonProps} ref={nodeRef}>\n      {label}\n    </button>\n  );\n}","import React, {ComponentPropsWithoutRef, ReactNode, useRef} from 'react';\nimport useInjectStyleSheet from \"utils/useInjectStyles\";\n\ninterface ICustomCheckbox extends ComponentPropsWithoutRef<'input'> {\n  checked     : boolean;\n  label?      : string;\n  toggleCheck : (value: boolean) => void;\n  checkColor? : string;\n  children?   : ReactNode;\n}\n\nexport function CustomCheckBox(props: ICustomCheckbox) {\n  const {\n    checkColor,\n    checked,\n    toggleCheck,\n    label,\n    children,\n    ...checkProps\n  } = props;\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n  useInjectStyleSheet(nodeRef);\n\n  return (\n    <div className={'uil-check-wrapper'} ref={nodeRef}>\n      <label className={'uil-checkbox uil-check'}>\n        <input type={'checkbox'} checked={checked} onChange={() => {toggleCheck(!checked)}} {...checkProps}/>\n        <div className={'uil-checkmark'} style={{backgroundColor: checkColor}}/>\n      </label>\n\n      {children ? children : <span onClick={() => toggleCheck(!checked)} style={{cursor: 'pointer', userSelect: 'none'}}>{label}</span>}\n    </div>\n  );\n}","import React, {ComponentPropsWithoutRef, CSSProperties, useRef} from 'react';\nimport useInjectStyleSheet from \"utils/useInjectStyles\";\n\ninterface ISvgIcon extends ComponentPropsWithoutRef<'svg'>{\n  src    : string;\n  color? : string | undefined;\n  height?: number;\n  width? : number;\n}\n\nexport function SVG(props: ISvgIcon) {\n  const {\n    src,\n    color,\n    height,\n    width\n  } = props;\n\n  if (!src.includes('.svg')) {\n    throw new Error('Provided src is not an svg image');\n  }\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n  useInjectStyleSheet(nodeRef);\n\n  const style: CSSProperties = {\n    fill: color,\n    height: `${height}px`,\n    width: `${width}px`\n  }\n\n  return (\n    <div ref={nodeRef} className={'uil-svg-wrapper'}>\n      <svg aria-hidden={true} className={'uil-svg'} style={style}>\n        <use href={src}/>\n      </svg>\n    </div>\n  );\n}","import React, {ComponentPropsWithoutRef, useRef} from 'react';\nimport {SVG} from 'components/images/svgIcon';\nimport useInjectStyleSheet from \"../../utils/useInjectStyles\";\n\nexport interface IBaseInput extends ComponentPropsWithoutRef<'input'> {\n  label       : string;\n  value       : string;\n  valueChanged: (value: string) => void;\n  iconColor?  : string;\n  iconSrc?    : string;\n  inputColor? : string;\n  toggle?     : () => void;\n}\n\nexport function BaseInput(props: IBaseInput) {\n  const {\n    iconColor,\n    iconSrc,\n    inputColor,\n    label,\n    toggle,\n    valueChanged,\n    ...inputProps\n  } = props;\n\n  const nodeRef = useRef<HTMLLabelElement>(null);\n  useInjectStyleSheet(nodeRef);\n\n  return (\n    <label className={'uil-input-wrapper'} htmlFor={inputProps.id} ref={nodeRef}>\n      <input\n        className={'uil-input uil-font-base'}\n        onChange={(e) => valueChanged(e.target.value)}\n        placeholder={label}\n        style={{color: inputColor}}\n        {...inputProps}\n      />\n\n      {iconSrc &&\n        <div className={'uil-icon'} onClick={toggle}>\n          <SVG src={iconSrc} width={24} height={24} color={iconColor}/>\n        </div>\n      }\n\n      <span className={'uil-label uil-font-base'} style={{color: inputColor}}>{label}</span>\n    </label>\n  );\n}","import {useEffect, useRef} from 'react';\n\nexport function useClickOutsideRef<T extends HTMLElement>(callback: () => void) {\n  const ref = useRef<T>(null);\n\n  useEffect(() => {\n    if (!ref.current) return;\n\n    function handleClickOutside (event: MouseEvent | TouchEvent) {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        callback();\n      }\n    }\n\n    document.addEventListener('click', handleClickOutside);\n    document.addEventListener('touchend', handleClickOutside);\n\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n      document.removeEventListener('touchend', handleClickOutside);\n    };\n  }, [callback]);\n\n  return ref;\n}","import React, {useState} from 'react';\nimport {BaseInput, IBaseInput} from './baseInput';\nimport {SVG} from 'components/images/svgIcon';\nimport {useClickOutsideRef} from 'hooks/clickOutside';\n\nexport interface ICustomInput extends IBaseInput {\n  tooltipClose?: string;\n  tooltipIcon? : string;\n  tooltipText? : string;\n}\n\nexport function CustomInput(props: ICustomInput) {\n  const {\n    tooltipClose,\n    tooltipIcon,\n    tooltipText,\n    ...inputProps\n  } = props;\n\n  const [tooltipVisible, setTooltipVisible] = useState(false);\n  const ref = useClickOutsideRef<HTMLDivElement>(closeTooltip);\n\n  function closeTooltip() {\n    setTooltipVisible(false);\n  }\n\n  return (\n    <>\n      {tooltipIcon ?\n        <div className={'uil-tooltip-wrapper'} ref={ref}>\n          {tooltipVisible &&\n            <div className={'uil-tooltip'}>\n              {tooltipClose &&\n                <button className={'uil-tooltip-button uil-fit'} onClick={closeTooltip}>\n                  {tooltipClose}\n                </button>\n              }\n\n              <span>{tooltipText}</span>\n            </div>\n          }\n\n          <div className={'uil-tooltip-icon uil-fit'} onClick={() => setTooltipVisible(!tooltipVisible)}>\n            <SVG src={tooltipIcon} height={16} width={16}/>\n          </div>\n\n          <BaseInput {...inputProps}/>\n        </div> :\n\n        <BaseInput {...inputProps}/>\n      }\n    </>\n  );\n}","export enum PasswordRuleTypes {\n  minLength = 1,\n  maxLength,\n  letters,\n  numbers,\n  special,\n  upper\n}","import React, {useEffect, useState} from 'react';\nimport {CustomInput, ICustomInput} from './customInput';\nimport {SVG} from 'components/images/svgIcon';\nimport {PasswordRuleTypes} from 'enums/passwordRuleTypes';\n\ninterface IPasswordInput extends ICustomInput {\n  ruleChecked     : string;\n  rules           : PasswordRule[];\n  ruleUnchecked   : string;\n  capsLockWarning?: string;\n  setFailedRules? : (value: PasswordRule[]) => void;\n}\n\nexport interface PasswordRule {\n  label   : string;\n  count?  : number;\n  type?   : PasswordRuleTypes;\n  pattern?: string;\n}\n\nexport function PasswordInput(props: IPasswordInput) {\n  const {\n    capsLockWarning,\n    rules,\n    ruleChecked,\n    ruleUnchecked,\n    setFailedRules,\n    ...inputProps\n  } = props;\n\n  const [capsLock, setCapsLock] = useState(false);\n\n  useEffect(() => {\n    validateInput();\n  }, [props.value]);\n\n  useEffect(() => {\n    if (!capsLockWarning) return;\n\n    function setCapsLockState(event: globalThis.KeyboardEvent) {\n      setCapsLock(event.getModifierState?.('CapsLock'));\n    }\n\n    document.addEventListener('keydown', setCapsLockState);\n\n    return () => document.removeEventListener('keydown', setCapsLockState);\n  }, []);\n\n  function validateInput() {\n    const failedRules: PasswordRule[] = [];\n\n    rules.forEach(rule => {\n      if (!checkRule(rule)) {\n        failedRules.push(rule);\n      }\n    });\n\n    setFailedRules?.(failedRules);\n  }\n\n  function checkRule(rule: PasswordRule): boolean {\n    let pattern: string;\n\n    if (rule.type) {\n      if (!rule.count) throw new Error('count must not be empty if a type is provided');\n\n      switch (rule.type) {\n        case PasswordRuleTypes.minLength:\n          pattern = `[a-zA-Z0-9ßÄäÖöÜü._!\"\\`'#%&§,:;<>=@{}~\\\\$\\\\(\\\\)\\\\*\\\\+\\\\/\\\\\\\\\\\\?\\\\[\\\\]\\\\^\\\\|\\\\-]{${rule.count},}`;\n          break;\n        case PasswordRuleTypes.maxLength:\n          pattern = `^[a-zA-Z0-9ßÄäÖöÜü._!\"\\`'#%&,:;<>=@{}~\\\\$\\\\(\\\\)\\\\*\\\\+\\\\/\\\\\\\\\\\\?\\\\[\\\\]\\\\^\\\\|\\\\-]{0,${rule.count}}$`;\n          break;\n        case PasswordRuleTypes.letters:\n          pattern = `[a-zA-ZßÄäÖöÜü]{${rule.count},}`;\n          break;\n        case PasswordRuleTypes.numbers:\n          pattern = `[0-9]{${rule.count},}`;\n          break;\n        case PasswordRuleTypes.special:\n          pattern = `[._!\"\\`'#%&§,:;<>=@{}~\\\\$\\\\(\\\\)\\\\*\\\\+\\\\/\\\\\\\\\\\\?\\\\[\\\\]\\\\^\\\\|\\\\-]{${rule.count},}`;\n          break;\n        case PasswordRuleTypes.upper:\n          pattern = `[A-ZÄÖÜ]{${rule.count},}`;\n          break;\n        default:\n          throw new Error('unrecognized rule type provided');\n      }\n    } else {\n      pattern = rule.pattern ? rule.pattern : '';\n    }\n\n    if (pattern === '') throw new Error('pattern must not be an empty string');\n\n    const reg = new RegExp(pattern);\n    return reg.test(props.value);\n  }\n\n  return (\n    <>\n      <CustomInput {...inputProps}/>\n\n      <div className={'uil-password-rules'}>\n        {capsLock &&\n          <div className={'uil-password-rule'}>{capsLockWarning}</div>\n        }\n\n        {rules.map((rule, idx) =>\n          <div key={idx} className={'uil-password-rule'}>\n            <SVG src={checkRule(rule) ? ruleChecked : ruleUnchecked} height={12} width={12}/>\n\n            <span>{rule.label}</span>\n          </div>\n        )}\n      </div>\n    </>\n  );\n}","export enum ModalType {\n  error = 'error',\n  question = 'question',\n  success = 'success',\n  warning = 'warning',\n}","import React, {useEffect, useRef} from 'react';\nimport {ModalType} from 'enums/modalType';\nimport {CustomButton} from 'components/button/customButton';\nimport useInjectStyleSheet from \"utils/useInjectStyles\";\n\ninterface IBaseModal {\n  close        : () => void;\n  message      : string | string[];\n  title        : string;\n  type         : ModalType;\n  callback?    : (() => void) | undefined;\n  cancelLabel? : string;\n  closeLabel?  : string;\n  confirm?     : () => void;\n  confirmLabel?: string;\n  timeout?     : number;\n}\n\nexport function BaseModal(props: IBaseModal) {\n  const {\n    callback,\n    cancelLabel = '',\n    close,\n    closeLabel,\n    confirm,\n    confirmLabel = '',\n    message,\n    timeout,\n    title,\n    type\n  } = props;\n\n  let timer: NodeJS.Timeout | undefined = undefined;\n  const nodeRef = useRef<HTMLDivElement>(null);\n  useInjectStyleSheet(nodeRef);\n\n  useEffect(() => {\n    if (!timeout) return;\n\n    timer = setTimeout(() => {\n      return callback ? callback() : close();\n    }, timeout);\n\n    return () => clearTimeout(timer);\n  },[]);\n\n  function setHeaderClass() {\n    const base = 'uil-header';\n\n    switch (type) {\n      case ModalType.error:\n        return `${base} uil-error`;\n      case ModalType.success:\n        return `${base} uil-success`;\n      case ModalType.warning:\n        return `${base} uil-warning`;\n      default:\n        return base;\n    }\n  }\n\n  //run callback if timeout and callback are set, otherwise close\n  function handleClose() {\n    clearTimeout(timer);\n    timeout && callback ? callback() : close();\n  }\n\n  return (\n    <div className={'uil-modal-wrapper'} ref={nodeRef}>\n      <div className={'uil-modal'}>\n        <div className={setHeaderClass()}>\n          {title}\n        </div>\n\n        {timeout &&\n          <div className={'uil-progress-wrapper'}>\n            <div className={'uil-progress-bar'} style={{animationDuration: `${(timeout / 1000) + .5}s`}}/>\n          </div>\n        }\n\n        <div className={'uil-content'}>\n          <div>\n            {Array.isArray(message) ?\n              message.map((m, idx) => <p key={idx} className={'uil-modal-text'}>{m}</p>)\n              : <p className={'uil-modal-text'}>{message}</p>\n            }\n          </div>\n\n          <div className={`uil-button-wrapper ${type !== ModalType.question ? 'uil-single' : ''}`}>\n            {type !== ModalType.question &&\n              <CustomButton label={closeLabel?? ''} onClick={handleClose} type={'button'}/>\n            }\n\n            {type == ModalType.question && props.confirm &&\n              <>\n                <CustomButton label={confirmLabel} theme={'#00416A'} onClick={confirm} type={'button'}/>\n                <CustomButton label={cancelLabel} onClick={close} type={'button'}/>\n              </>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}","import React from 'react';\nimport {BaseModal} from './baseModal';\nimport {ModalType} from 'enums/modalType';\n\nexport interface INotifyModal {\n  close     : () => void;\n  closeLabel: string;\n  modalType : 'success' | 'warning' | 'error';\n  message   : string | string[];\n  title     : string;\n  callback? : (() => void) | undefined;\n  timeout?  : number;\n}\n\nexport function NotifyModal(props: INotifyModal) {\n  const {\n    modalType,\n    ...modalProps\n  } = props;\n\n  return (\n    <BaseModal type={modalType as ModalType} {...modalProps}/>\n  );\n}","import React from 'react';\nimport {BaseModal} from './baseModal';\nimport {ModalType} from 'enums/modalType';\n\nexport interface IQuestionModal {\n  cancel      : () => void;\n  cancelLabel : string;\n  confirm     : () => void;\n  confirmLabel: string;\n  message     : string | string[];\n  title       : string;\n}\n\nexport function QuestionModal(props: IQuestionModal) {\n  const {\n    cancel,\n    ...modalProps\n  } = props;\n\n  return (\n    <BaseModal type={ModalType.question} close={cancel} {...modalProps}/>\n  );\n}","import React, {useEffect, useRef} from 'react';\nimport generateKey from 'utils/generateKey';\nimport useInjectStyleSheet from \"utils/useInjectStyles\";\n\ninterface ICustomRadio {\n  options     : RadioOption[];\n  value       : string;\n  valueChanged: (value: string) => void;\n  checkColor? : string;\n  disabled?   : boolean;\n  label?      : string;\n}\n\nexport interface RadioOption {\n  label    : string;\n  value    : string;\n  checked? : boolean;\n  disabled?: boolean;\n}\n\nexport function CustomRadio(props: ICustomRadio) {\n  const {\n    checkColor,\n    disabled,\n    label,\n    options,\n    value,\n    valueChanged,\n  } = props;\n\n  const nodeRef = useRef<HTMLDivElement>(null);\n  useInjectStyleSheet(nodeRef);\n\n  useEffect(() => {\n    // prevents multiple radio options being checked at the same time\n    options.forEach(option => {\n      if (option.checked) handleRadioChange(option.value);\n    });\n  },[]);\n\n  function handleRadioChange(newValue: string) {\n    if (value === newValue) return;\n\n    valueChanged(newValue);\n  }\n\n  return (\n    <div ref={nodeRef}>\n      {label && <div className={'uil-radio-title'}>{label}</div>}\n\n      <div className={'uil-radio-wrapper'}>\n        {options.map((option, idx) =>\n          <div key={generateKey(idx)} className={'uil-radio-option'}>\n            <label className={'uil-radio uil-check'}>\n              <input\n                name={option.label}\n                type={'radio'}\n                value={option.value}\n                checked={value === option.value || value === '' && option.checked}\n                onChange={() => handleRadioChange(option.value)}\n                disabled={disabled? disabled : option.disabled}\n              />\n              <div className={'uil-checkmark uil-radio-check'} style={{backgroundColor: checkColor}}/>\n            </label>\n\n            <span className={'uil-font-base'}>{option.label}</span>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}","export default function generateKey(prefix: string | number) {\n  return `${prefix}-${new Date().getTime()}`;\n}"],"names":["injectedStyles","useInjectStyleSheet","nodeRef","useEffect","parentDocument","current","ownerDocument","document","includes","styleElement","createElement","innerHTML","styles","push","head","appendChild","useGetColor","backgroundColor","length","Error","substring","c","parseInt","map","col","Math","pow","_excluded","CustomButton","props","disabled","label","small","theme","buttonProps","_objectWithoutPropertiesLoose","useRef","React","_extends","className","base","getClassName","style","color","border","getStyle","ref","CustomCheckBox","checkColor","checked","toggleCheck","children","checkProps","type","onChange","onClick","cursor","userSelect","SVG","src","height","width","fill","href","BaseInput","iconColor","iconSrc","inputColor","toggle","valueChanged","inputProps","htmlFor","id","e","target","value","placeholder","useClickOutsideRef","callback","addEventListener","handleClickOutside","removeEventListener","event","contains","CustomInput","tooltipClose","tooltipIcon","tooltipText","tooltipVisible","setTooltipVisible","useState","closeTooltip","Fragment","PasswordRuleTypes","PasswordInput","capsLockWarning","rules","ruleChecked","ruleUnchecked","setFailedRules","capsLock","setCapsLock","checkRule","rule","pattern","count","minLength","maxLength","letters","numbers","special","upper","RegExp","test","failedRules","forEach","validateInput","setCapsLockState","getModifierState","idx","key","ModalType","BaseModal","cancelLabel","close","closeLabel","confirm","confirmLabel","message","timeout","title","timer","setTimeout","clearTimeout","error","success","warning","setHeaderClass","animationDuration","Array","isArray","m","question","NotifyModal","modalType","modalProps","QuestionModal","cancel","CustomRadio","options","handleRadioChange","newValue","option","prefix","Date","getTime","name"],"mappings":"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"}

package/dist/components/button/customButton.d.ts

@@ -0,0 +1,10 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+type HEXColor = `#${string}`;
+interface ICustomButton extends ComponentPropsWithoutRef<'button'> {
+    label: string;
+    disabled?: boolean;
+    small?: boolean;
+    theme?: HEXColor | 'success' | 'warning' | 'error';
+}
+export declare function CustomButton(props: ICustomButton): React.JSX.Element;
+export {};

package/dist/components/button/index.d.ts

@@ -0,0 +1 @@
+export * from './customButton';

package/dist/components/checkbox/customCheckBox.d.ts

@@ -0,0 +1,10 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+interface ICustomCheckbox extends ComponentPropsWithoutRef<'input'> {
+    checked: boolean;
+    label?: string;
+    toggleCheck: (value: boolean) => void;
+    checkColor?: string;
+    children?: ReactNode;
+}
+export declare function CustomCheckBox(props: ICustomCheckbox): React.JSX.Element;
+export {};

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './customCheckBox';

package/dist/components/images/index.d.ts

@@ -0,0 +1 @@
+export * from './svgIcon';

package/dist/components/images/svgIcon.d.ts

@@ -0,0 +1,9 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+interface ISvgIcon extends ComponentPropsWithoutRef<'svg'> {
+    src: string;
+    color?: string | undefined;
+    height?: number;
+    width?: number;
+}
+export declare function SVG(props: ISvgIcon): React.JSX.Element;
+export {};

package/dist/components/input/baseInput.d.ts

@@ -0,0 +1,11 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+export interface IBaseInput extends ComponentPropsWithoutRef<'input'> {
+    label: string;
+    value: string;
+    valueChanged: (value: string) => void;
+    iconColor?: string;
+    iconSrc?: string;
+    inputColor?: string;
+    toggle?: () => void;
+}
+export declare function BaseInput(props: IBaseInput): React.JSX.Element;

package/dist/components/input/customInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IBaseInput } from './baseInput';
+export interface ICustomInput extends IBaseInput {
+    tooltipClose?: string;
+    tooltipIcon?: string;
+    tooltipText?: string;
+}
+export declare function CustomInput(props: ICustomInput): React.JSX.Element;

package/dist/components/input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './customInput';
+export * from './passwordInput';

package/dist/components/input/passwordInput.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ICustomInput } from './customInput';
+import { PasswordRuleTypes } from 'enums/passwordRuleTypes';
+interface IPasswordInput extends ICustomInput {
+    ruleChecked: string;
+    rules: PasswordRule[];
+    ruleUnchecked: string;
+    capsLockWarning?: string;
+    setFailedRules?: (value: PasswordRule[]) => void;
+}
+export interface PasswordRule {
+    label: string;
+    count?: number;
+    type?: PasswordRuleTypes;
+    pattern?: string;
+}
+export declare function PasswordInput(props: IPasswordInput): React.JSX.Element;
+export {};

package/dist/components/modal/baseModal.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ModalType } from 'enums/modalType';
+interface IBaseModal {
+    close: () => void;
+    message: string | string[];
+    title: string;
+    type: ModalType;
+    callback?: (() => void) | undefined;
+    cancelLabel?: string;
+    closeLabel?: string;
+    confirm?: () => void;
+    confirmLabel?: string;
+    timeout?: number;
+}
+export declare function BaseModal(props: IBaseModal): React.JSX.Element;
+export {};

package/dist/components/modal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './notifyModal';
+export * from './questionModal';

package/dist/components/modal/notifyModal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface INotifyModal {
+    close: () => void;
+    closeLabel: string;
+    modalType: 'success' | 'warning' | 'error';
+    message: string | string[];
+    title: string;
+    callback?: (() => void) | undefined;
+    timeout?: number;
+}
+export declare function NotifyModal(props: INotifyModal): React.JSX.Element;

package/dist/components/modal/questionModal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface IQuestionModal {
+    cancel: () => void;
+    cancelLabel: string;
+    confirm: () => void;
+    confirmLabel: string;
+    message: string | string[];
+    title: string;
+}
+export declare function QuestionModal(props: IQuestionModal): React.JSX.Element;

package/dist/components/radio/customRadio.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface ICustomRadio {
+    options: RadioOption[];
+    value: string;
+    valueChanged: (value: string) => void;
+    checkColor?: string;
+    disabled?: boolean;
+    label?: string;
+}
+export interface RadioOption {
+    label: string;
+    value: string;
+    checked?: boolean;
+    disabled?: boolean;
+}
+export declare function CustomRadio(props: ICustomRadio): React.JSX.Element;
+export {};

package/dist/components/radio/index.d.ts

@@ -0,0 +1 @@
+export * from './customRadio';

package/dist/enums/index.d.ts

@@ -0,0 +1 @@
+export * from './passwordRuleTypes';

package/dist/enums/modalType.d.ts

@@ -0,0 +1,6 @@
+export declare enum ModalType {
+    error = "error",
+    question = "question",
+    success = "success",
+    warning = "warning"
+}

package/dist/enums/passwordRuleTypes.d.ts

@@ -0,0 +1,8 @@
+export declare enum PasswordRuleTypes {
+    minLength = 1,
+    maxLength = 2,
+    letters = 3,
+    numbers = 4,
+    special = 5,
+    upper = 6
+}

package/dist/hooks/clickOutside.d.ts

@@ -0,0 +1 @@
+export declare function useClickOutsideRef<T extends HTMLElement>(callback: () => void): import("react").RefObject<T>;

package/dist/hooks/getColor.d.ts

@@ -0,0 +1 @@
+export declare function useGetColor(backgroundColor: string): "#000000" | "#ffffff";

package/{src/hooks/index.ts → dist/hooks/index.d.ts}

@@ -1,2 +1,2 @@
 export * from './clickOutside';
-export * from './getColor';
+export * from './getColor';

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { CustomButton } from './components/button/index';
+export { CustomCheckBox } from './components/checkbox/index';
+export { SVG } from './components/images/index';
+export { CustomInput, PasswordInput, PasswordRule } from './components/input/index';
+export { NotifyModal, QuestionModal } from './components/modal/index';
+export { CustomRadio, RadioOption } from './components/radio/index';
+export { useClickOutsideRef, useGetColor } from './hooks/index';
+export { PasswordRuleTypes } from './enums/index';

package/dist/utils/generateKey.d.ts

@@ -0,0 +1 @@
+export default function generateKey(prefix: string | number): string;

package/dist/utils/useInjectStyles.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export default function useInjectStyleSheet(nodeRef: RefObject<HTMLElement>): void;

package/package.json

@@ -1,21 +1,26 @@
 {
   "private": false,
   "name": "@hbuesing/ui-library",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Collection of reusable ui components for react based applications",
   "source": "src/index.ts",
-  "exports": "./dist/bundle.mjs",
+  "type": "module",
+  "exports": "./dist/bundle.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/*"
+  ],
   "scripts": {
     "clean": "rimraf ./dist && mkdir dist",
     "lint": "eslint src",
     "lint:nw": "eslint src --max-warnings 0",
-    "build": "microbundle build --output ./dist/bundle.mjs --no-pkg-main --generateTypes true --format modern --jsx react --globals react/jsx-runtime=jsxRuntime --css inline",
+    "build": "microbundle build --output ./dist/bundle.js --generateTypes true --format modern --jsx react --globals react/jsx-runtime=jsxRuntime --css inline",
     "build:uil": "microbundle build --output ../website/src/uil-bundle/bundle.mjs --no-pkg-main --generateTypes true --format modern --jsx react --globals react/jsx-runtime=jsxRuntime --css inline",
     "dev": "microbundle -w --output ./dist/bundle.mjs --no-pkg-main --generateTypes true --format modern --jsx react --globals react/jsx-runtime=jsxRuntime --css inline",
     "stats": "microbundle --visualize"
   },
   "license": "MIT",
-  "homepage": "https://github.com/HenrikBuesing/ui-library/tree/main#README.md",
+  "homepage": "https://hb-ui-library-docs.vercel.app",
   "bugs": "https://github.com/HenrikBuesing/ui-library/issues",
   "repository": {
     "type": "git",

package/src/components/button/button.scss

@@ -1,25 +0,0 @@
-@use '../variables' as *;
-
-.uil-button {
-  letter-spacing: 1px;
-  color: var(--uil-black);
-  background-color: var(--uil-white);
-  border: 1px solid var(--uil-black);
-  border-radius: 2px;
-  cursor: pointer;
-  padding: var(--uil-xs) var(--uil-s);
-  -webkit-box-shadow: 0 0 3px 0 var(--uil-black-alt);
-  box-shadow: 0 0 3px 0 var(--uil-black-alt);
-
-  &.uil-disabled {
-    background-color: var(--uil-grey-dark);
-    color: var(--uil-grey);
-    border: transparent;
-  }
-
-  &.uil-small {
-    font-size: var(--uil-font-small);
-    line-height: var(--uil-font-small);
-    padding: var(--uil-xxs) var(--uil-xs);
-  }
-}

package/src/components/button/customButton.tsx

@@ -1,84 +0,0 @@
-import React, {ComponentPropsWithoutRef, CSSProperties, useRef} from 'react';
-import useInjectStyleSheet from "utils/useInjectStyles";
-import {useGetColor} from 'hooks/getColor';
-
-type HEXColor = `#${string}`
-
-interface ICustomButton extends ComponentPropsWithoutRef<'button'> {
-  label    : string;
-  disabled?: boolean;
-  small?   : boolean;
-  theme?   : HEXColor | 'success' | 'warning' | 'error';
-}
-
-export function CustomButton(props: ICustomButton) {
-  const {
-    disabled = false,
-    label,
-    small = false,
-    theme,
-    ...buttonProps
-  } = props;
-
-  const nodeRef = useRef<HTMLButtonElement>(null);
-  useInjectStyleSheet(nodeRef);
-
-  function getStyle(): CSSProperties | undefined {
-    if (disabled || !theme) return undefined;
-
-    if (theme.includes('#')) {
-      return {
-        color: useGetColor(theme),
-        backgroundColor: theme,
-        border: 'transparent'
-      };
-    }
-
-    switch (theme) {
-      case 'success':
-        return {
-          color: useGetColor('#006A4E'),
-          backgroundColor: '#006A4E',
-          border: 'transparent'
-        };
-      case 'warning':
-        return {
-          color: '#000000',
-          backgroundColor: '#FFD700',
-          border: 'transparent'
-        };
-      case 'error':
-        return {
-          color: useGetColor('#800020'),
-          backgroundColor: '#800020',
-          border: 'transparent'
-        };
-      default:
-        throw new Error('invalid theme provided')
-    }
-  }
-
-  function getClassName(): string {
-    const base = 'uil-button uil-fit'
-
-    if (disabled && !small) {
-      return `${base} uil-font-base uil-disabled`;
-    }
-
-    if (disabled && small) {
-      return `${base} uil-disabled uil-small`;
-    }
-
-    if (small) {
-      return `${base} uil-small`;
-    }
-
-    return `${base} uil-font-base`;
-  }
-
-  return (
-    <button className={getClassName()} style={getStyle()} disabled={disabled} {...buttonProps} ref={nodeRef}>
-      {label}
-    </button>
-  );
-}

package/src/components/button/index.ts

@@ -1 +0,0 @@
-export * from './customButton'

package/src/components/checkbox/checkbox.scss

@@ -1,13 +0,0 @@
-@use '../variables' as *;
-
-.uil-check-wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--uil-s);
-  font-size: var(--uil-font-base);
-  line-height: var(--uil-font-base);
-
-  .uil-checkbox {
-    border-radius: 2px;
-  }
-}

package/src/components/checkbox/customCheckBox.tsx

@@ -1,35 +0,0 @@
-import React, {ComponentPropsWithoutRef, ReactNode, useRef} from 'react';
-import useInjectStyleSheet from "utils/useInjectStyles";
-
-interface ICustomCheckbox extends ComponentPropsWithoutRef<'input'> {
-  checked     : boolean;
-  label?      : string;
-  toggleCheck : (value: boolean) => void;
-  checkColor? : string;
-  children?   : ReactNode;
-}
-
-export function CustomCheckBox(props: ICustomCheckbox) {
-  const {
-    checkColor,
-    checked,
-    toggleCheck,
-    label,
-    children,
-    ...checkProps
-  } = props;
-
-  const nodeRef = useRef<HTMLDivElement>(null);
-  useInjectStyleSheet(nodeRef);
-
-  return (
-    <div className={'uil-check-wrapper'} ref={nodeRef}>
-      <label className={'uil-checkbox uil-check'}>
-        <input type={'checkbox'} checked={checked} onChange={() => {toggleCheck(!checked)}} {...checkProps}/>
-        <div className={'uil-checkmark'} style={{backgroundColor: checkColor}}/>
-      </label>
-
-      {children ? children : <span onClick={() => toggleCheck(!checked)} style={{cursor: 'pointer', userSelect: 'none'}}>{label}</span>}
-    </div>
-  );
-}

package/src/components/checkbox/index.ts

@@ -1 +0,0 @@
-export * from './customCheckBox';

package/src/components/global.scss

@@ -1,60 +0,0 @@
-@use "variables" as *;
-
-.uil-fit {
-  height: fit-content;
-  width: fit-content;
-}
-
-.uil-font-base {
-  font-size: var(--uil-font-base);
-  line-height: var(--uil-font-base);
-}
-
-.uil-check {
-  position: relative;
-  display: block;
-  cursor: pointer;
-  font-size: var(--uil-font-small);
-  line-height: var(--uil-font-small);
-  min-height: var(--uil-l);
-  min-width: var(--uil-l);
-  user-select: none;
-  border: 2px solid var(--uil-black-alt);
-  box-sizing: border-box;
-
-  &:has(input:disabled) {
-    background-color: var(--uil-grey);
-    border-color: var(--uil-grey-dark);
-  }
-
-  input {
-    position: absolute;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-    opacity: 0;
-
-    &:checked {
-      ~ .uil-checkmark {
-        transform: scale(1);
-      }
-    }
-
-    &:disabled {
-      ~ .uil-checkmark {
-        background-color: var(--uil-grey-dark);
-      }
-    }
-  }
-
-  .uil-checkmark {
-    position: absolute;
-    top: 25%;
-    left: 25%;
-    background-color: var(--uil-black-alt);
-    width: var(--uil-xs);
-    height: var(--uil-xs);
-    transform: scale(0);
-    transition: .1s ease;
-  }
-}

package/src/components/images/images.scss

@@ -1,12 +0,0 @@
-@use '../variables' as *;
-
-.uil-svg-wrapper {
-  display: flex;
-  height: fit-content;
-  width: fit-content;
-
-  .uil-svg {
-    height: var(--uil-xxxl);
-    width: var(--uil-xxxl);
-  }
-}

package/src/components/images/index.ts

@@ -1 +0,0 @@
-export * from './svgIcon';