@hbuesing/ui-library 5.0.0-beta.8 → 5.0.0-beta.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 - present Henrik Buesing
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/hooks/contrastColor.d.ts

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

package/dist/hooks/index.d.ts

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

package/dist/index.d.ts

@@ -4,4 +4,4 @@ export { CustomRadio, RadioOption } from './components/radio/index';
 export { CustomCheckbox } from './components/checkbox/index';
 export { CustomButton } from './components/button/index';
 export { SVG } from './components/images/index';
-export { useClickOutsideRef, useGetColor } from './hooks/index';
+export { useClickOutsideRef, useContrastColor } from './hooks/index';

package/dist/index.js

@@ -1 +1 @@
-var $=":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:.375rem var(--uil-xxs)}@media (min-width:760px){.uil-button{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-check-wrapper .uil-check-label{cursor:pointer;user-select:none}.uil-svg-wrapper{display:flex;height: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::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{cursor:not-allowed;fill:var(--uil-grey-dark)}.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{align-items:center;display:flex;justify-content:center;position:absolute;right:var(--uil-xs);top:50%;transform:translateY(-50%);fill:var(--uil-black);opacity:.5}.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: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{cursor:pointer;fill:var(--uil-black-alt);margin-bottom:var(--uil-xxs)}.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:2}.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:3}@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:a;border:2px solid var(--uil-grey-dark)}@keyframes a{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-base);line-height:var(--uil-font-base);margin:0}.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: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;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)}";import f,{useState as W}from"react";import w from"react";import N from"react";function h(e){let{color:i,height:r,src:t,width:o}=e;if(!t.includes(".svg"))throw new Error("Provided src is not an svg image");return N.createElement("div",{className:"uil-svg-wrapper"},N.createElement("svg",{"aria-hidden":!0,className:"uil-svg",style:{fill:i,height:r,width:o}},N.createElement("use",{href:t})))}function P(e){let{iconColor:i,iconSrc:r,inputColor:t,label:o,toggle:s,valueChanged:c,...u}=e;return w.createElement("label",{className:"uil-input-wrapper",htmlFor:u.id},w.createElement("input",{className:"uil-input uil-font-base",onChange:a=>{c(a.target.value)},placeholder:o,style:{color:t},...u}),r&&w.createElement("div",{className:"uil-icon",onClick:s},w.createElement(h,{src:r,width:24,height:24,color:i})),w.createElement("span",{className:"uil-label uil-font-base",style:{color:t}},o))}import{useEffect as T,useRef as B}from"react";function E(e){let i=B(null);return T(()=>{if(!i.current)return;function r(t){i.current&&!i.current.contains(t.target)&&e()}return document.addEventListener("click",r),document.addEventListener("touchend",r),()=>{document.removeEventListener("click",r),document.removeEventListener("touchend",r)}},[e]),i}function L(e){let{tooltipClose:i,tooltipIcon:r,tooltipText:t,...o}=e,[s,c]=W(!1),u=E(a);function a(){c(!1)}return f.createElement(f.Fragment,null,r?f.createElement("div",{className:"uil-tooltip-wrapper",ref:u},s&&f.createElement("div",{className:"uil-tooltip"},i&&f.createElement("button",{className:"uil-tooltip-button uil-fit",onClick:a},i),f.createElement("span",null,t)),f.createElement("div",{className:"uil-tooltip-icon uil-fit",onClick:()=>{c(!s)}},f.createElement(h,{src:r,height:16,width:16})),f.createElement(P,{...o})):f.createElement(P,{...o}))}import v,{useEffect as z,useState as A}from"react";function g(e){let i=String(Date.now().toString(32)+Math.random().toString(16)).replace(/\./g,"");return`${e}-${i}`}function G(e){let{capsLockWarning:i,rules:r,ruleChecked:t,ruleUnchecked:o,setFailedRules:s,...c}=e,[u,a]=A(!1);z(()=>{n()},[e.value]),z(()=>{if(!i)return;function l(d){a(d.getModifierState("CapsLock"))}return document.addEventListener("keydown",l),()=>{document.removeEventListener("keydown",l)}},[]);function n(){let l=[];r.forEach(d=>{m(d)||l.push(d)}),s?.(l)}function m(l){let d;if(l.type){if(!l.count)throw new Error("count must not be empty if a type is provided");switch(l.type){case"minLength":d=`[a-zA-Z0-9\xDF\xC4\xE4\xD6\xF6\xDC\xFC._!"\`'#%&\xA7,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${l.count},}`;break;case"maxLength":d=`^[a-zA-Z0-9\xDF\xC4\xE4\xD6\xF6\xDC\xFC._!"\`'#%&,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{0,${l.count}}$`;break;case"letters":d=`[a-zA-Z\xDF\xC4\xE4\xD6\xF6\xDC\xFC]{${l.count},}`;break;case"numbers":d=`[0-9]{${l.count},}`;break;case"special":d=`[._!"\`'#%&\xA7,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${l.count},}`;break;case"upper":d=`[A-Z\xC4\xD6\xDC]{${l.count},}`;break;default:throw new Error("unrecognized rule type provided")}}else{if(!l.pattern)throw new Error("pattern must not be an empty string");d=l.pattern}return new RegExp(d).test(e.value.toString())}return v.createElement("div",null,v.createElement(L,{...c}),v.createElement("div",{className:"uil-password-rules"},u&&v.createElement("div",{className:"uil-password-rule"},i),r.map((l,d)=>v.createElement("div",{key:g(d),className:"uil-password-rule"},v.createElement(h,{src:m(l)?t:o,height:12,width:12}),v.createElement("span",null,l.label)))))}import F from"react";import p,{useEffect as q}from"react";import O from"react";function k(e){if(e.length!==7)throw new Error("provided hex color must be 7 characters (including #) long");e=e.substring(1,7);let r=[parseInt(e.substring(0,2),16)/255,parseInt(e.substring(2,4),16)/255,parseInt(e.substring(4,6),16)/255].map(o=>o<=.03928?o/12.92:Math.pow((o+.055)/1.055,2.4));return .2126*r[0]+.7152*r[1]+.0722*r[2]>.179?"#000000":"#ffffff"}function y(e){let{disabled:i=!1,label:r,small:t=!1,theme:o,...s}=e;function c(){if(!(i||!o)){if(o.includes("#"))return{color:k(o),backgroundColor:o,border:"transparent"};switch(o){case"success":return{color:k("#006A4E"),backgroundColor:"#006A4E",border:"transparent"};case"warning":return{color:"#000000",backgroundColor:"#FFD700",border:"transparent"};case"error":return{color:k("#800020"),backgroundColor:"#800020",border:"transparent"};default:throw new Error("invalid theme provided")}}}function u(){let a="uil-button uil-fit";return i?t?`${a} uil-disabled uil-small`:`${a} uil-font-base uil-disabled`:t?`${a} uil-small`:`${a} uil-font-base`}return O.createElement("button",{className:u(),style:c(),disabled:i,...s},r)}function I(e){let{callback:i,cancelLabel:r="",close:t,closeLabel:o,confirm:s,confirmLabel:c="",message:u,timeout:a,title:n,type:m}=e,l;q(()=>{if(a)return l=setTimeout(()=>i?i():t(),a),()=>{clearTimeout(l)}},[]);function d(){let x="uil-header";switch(m){case"error":return`${x} uil-error`;case"success":return`${x} uil-success`;case"warning":return`${x} uil-warning`;default:return x}}function S(){return clearTimeout(l),a&&i?i():t()}return p.createElement("div",{className:"uil-modal-wrapper"},p.createElement("div",{className:"uil-modal"},p.createElement("div",{className:d()},n),a&&p.createElement("div",{className:"uil-progress-wrapper"},p.createElement("div",{className:"uil-progress-bar",style:{animationDuration:`${a/1e3+.5}s`}})),p.createElement("div",{className:"uil-content"},p.createElement("div",null,Array.isArray(u)?u.map((x,M)=>p.createElement("p",{key:g(M),className:"uil-modal-text"},x)):p.createElement("p",{className:"uil-modal-text"},u)),p.createElement("div",{className:`uil-button-wrapper ${m!=="question"?"uil-single":""}`},m!=="question"&&p.createElement(y,{label:o??"",onClick:S,type:"button"}),m=="question"&&e.confirm&&p.createElement(p.Fragment,null,p.createElement(y,{label:c,theme:"#00416A",onClick:s,type:"button"}),p.createElement(y,{label:r,onClick:t,type:"button"}))))))}function V(e){let{modalType:i,...r}=e;return F.createElement(I,{type:i,...r})}import K from"react";function H(e){let{cancel:i,...r}=e;return K.createElement(I,{type:"question",close:i,...r})}import b,{useEffect as j}from"react";function D(e){let{checkColor:i,disabled:r,label:t,options:o,value:s,valueChanged:c}=e,u=g("radio");j(()=>{o.forEach(n=>{n.checked&&a(n)})},[]);function a(n){s===n.value||n.disabled||r||c(n.value)}return b.createElement("div",null,t&&b.createElement("div",{className:"uil-radio-title"},t),b.createElement("div",{className:"uil-radio-wrapper"},o.map((n,m)=>b.createElement("div",{key:g(m),className:"uil-radio-option"},b.createElement("div",{className:"uil-radio uil-check",onClick:()=>{a(n)}},b.createElement("input",{id:`${m}-${u}`,name:n.label,type:"radio",value:n.value,checked:s===n.value||s===""&&n.checked,onChange:()=>{a(n)},disabled:r||n.disabled}),b.createElement("div",{className:"uil-checkmark uil-radio-check",style:{backgroundColor:i}})),b.createElement("label",{htmlFor:`${m}-${u}`,className:"uil-font-base"},n.label)))))}import C from"react";function Q(e){let{checkColor:i,checked:r,children:t,toggleCheck:o,label:s,...c}=e,u=g("check");return C.createElement("div",{className:"uil-check-wrapper"},C.createElement("div",{className:"uil-checkbox uil-check",onClick:()=>{o(!r)}},C.createElement("input",{type:"checkbox",checked:r,onChange:()=>{o(!r)},...c,id:u}),C.createElement("div",{className:"uil-checkmark",style:{backgroundColor:i}})),C.createElement("label",{htmlFor:u,className:"uil-check-label"},t||s))}if(typeof document<"u"){let e=document.createElement("style"),i=document.createTextNode($);e.appendChild(i),document.head.appendChild(e)}export{y as CustomButton,Q as CustomCheckbox,L as CustomInput,D as CustomRadio,V as NotifyModal,G as PasswordInput,H as QuestionModal,h as SVG,E as useClickOutsideRef,k as useGetColor};
+var $=":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:.375rem var(--uil-xxs)}@media (min-width:760px){.uil-button{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-check-wrapper .uil-check-label{cursor:pointer;user-select:none}.uil-svg-wrapper{display:flex;height: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::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{cursor:not-allowed;fill:var(--uil-grey-dark)}.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{align-items:center;display:flex;justify-content:center;position:absolute;right:var(--uil-xs);top:50%;transform:translateY(-50%);fill:var(--uil-black);opacity:.5}.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: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{cursor:pointer;fill:var(--uil-black-alt);margin-bottom:var(--uil-xxs)}.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:2}.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:3}@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:a;border:2px solid var(--uil-grey-dark)}@keyframes a{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-base);line-height:var(--uil-font-base);margin:0}.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: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;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)}";import f,{useState as F}from"react";import x from"react";import N from"react";function v(i){let{color:e,height:r,src:t,width:o}=i;if(!t.includes(".svg"))throw new Error("Provided src is not an svg image");return N.createElement("div",{className:"uil-svg-wrapper"},N.createElement("svg",{"aria-hidden":!0,className:"uil-svg",style:{fill:e,height:r,width:o}},N.createElement("use",{href:t})))}function P(i){let{iconColor:e,iconSrc:r,inputColor:t,label:o,toggle:s,valueChanged:c,...u}=i;return x.createElement("label",{className:"uil-input-wrapper",htmlFor:u.id},x.createElement("input",{className:"uil-input uil-font-base",onChange:a=>{c(a.target.value)},placeholder:o,style:{color:t},...u}),r&&x.createElement("div",{className:"uil-icon",onClick:s},x.createElement(v,{src:r,width:24,height:24,color:e})),x.createElement("span",{className:"uil-label uil-font-base",style:{color:t}},o))}import{useEffect as T,useRef as B}from"react";function E(i){let e=B(null);return T(()=>{if(!e.current)return;function r(t){e.current&&!e.current.contains(t.target)&&i()}return document.addEventListener("click",r),document.addEventListener("touchend",r),()=>{document.removeEventListener("click",r),document.removeEventListener("touchend",r)}},[i]),e}function L(i){let{tooltipClose:e,tooltipIcon:r,tooltipText:t,...o}=i,[s,c]=F(!1),u=E(a);function a(){c(!1)}return f.createElement(f.Fragment,null,r?f.createElement("div",{className:"uil-tooltip-wrapper",ref:u},s&&f.createElement("div",{className:"uil-tooltip"},e&&f.createElement("button",{className:"uil-tooltip-button uil-fit",onClick:a},e),f.createElement("span",null,t)),f.createElement("div",{className:"uil-tooltip-icon uil-fit",onClick:()=>{c(!s)}},f.createElement(v,{src:r,height:16,width:16})),f.createElement(P,{...o})):f.createElement(P,{...o}))}import h,{useEffect as z,useState as W}from"react";function g(i){let e=String(Date.now().toString(32)+Math.random().toString(16)).replace(/\./g,"");return`${i}-${e}`}function A(i){let{capsLockWarning:e,rules:r,ruleChecked:t,ruleUnchecked:o,setFailedRules:s,...c}=i,[u,a]=W(!1);z(()=>{n()},[i.value]),z(()=>{if(!e)return;function l(d){a(d.getModifierState("CapsLock"))}return document.addEventListener("keydown",l),()=>{document.removeEventListener("keydown",l)}},[]);function n(){let l=[];r.forEach(d=>{m(d)||l.push(d)}),s?.(l)}function m(l){let d;if(l.type){if(!l.count)throw new Error("count must not be empty if a type is provided");switch(l.type){case"minLength":d=`[a-zA-Z0-9\xDF\xC4\xE4\xD6\xF6\xDC\xFC._!"\`'#%&\xA7,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${l.count},}`;break;case"maxLength":d=`^[a-zA-Z0-9\xDF\xC4\xE4\xD6\xF6\xDC\xFC._!"\`'#%&,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{0,${l.count}}$`;break;case"letters":d=`[a-zA-Z\xDF\xC4\xE4\xD6\xF6\xDC\xFC]{${l.count},}`;break;case"numbers":d=`[0-9]{${l.count},}`;break;case"special":d=`[._!"\`'#%&\xA7,:;<>=@{}~\\$\\(\\)\\*\\+\\/\\\\\\?\\[\\]\\^\\|\\-]{${l.count},}`;break;case"upper":d=`[A-Z\xC4\xD6\xDC]{${l.count},}`;break;default:throw new Error("unrecognized rule type provided")}}else{if(!l.pattern)throw new Error("pattern must not be an empty string");d=l.pattern}return new RegExp(d).test(i.value.toString())}return h.createElement("div",null,h.createElement(L,{...c}),h.createElement("div",{className:"uil-password-rules"},u&&h.createElement("div",{className:"uil-password-rule"},e),r.map((l,d)=>h.createElement("div",{key:g(d),className:"uil-password-rule"},h.createElement(v,{src:m(l)?t:o,height:12,width:12}),h.createElement("span",null,l.label)))))}import V from"react";import p,{useEffect as q}from"react";import O from"react";function k(i){if(i.includes("#")&&(i=i.replace("#","")),i.length<3||i.length>6)throw new Error("Invalid hex color, allowed values are (#)FFF or (#)FFFFFF");let e;i.length===3?e=[parseInt(i.substring(0),16)/255,parseInt(i.substring(1),16)/255,parseInt(i.substring(2),16)/255]:e=[parseInt(i.substring(0,2),16)/255,parseInt(i.substring(2,4),16)/255,parseInt(i.substring(4,6),16)/255];let r=e.map(o=>o<=.03928?o/12.92:Math.pow((o+.055)/1.055,2.4));return .2126*r[0]+.7152*r[1]+.0722*r[2]>.179?"#000000":"#ffffff"}function y(i){let{disabled:e=!1,label:r,small:t=!1,theme:o,...s}=i;function c(){if(!(e||!o)){if(o.includes("#"))return{color:k(o),backgroundColor:o,border:"transparent"};switch(o){case"success":return{color:k("#006A4E"),backgroundColor:"#006A4E",border:"transparent"};case"warning":return{color:"#000000",backgroundColor:"#FFD700",border:"transparent"};case"error":return{color:k("#800020"),backgroundColor:"#800020",border:"transparent"};default:throw new Error("invalid theme provided")}}}function u(){let a="uil-button uil-fit";return e?t?`${a} uil-disabled uil-small`:`${a} uil-font-base uil-disabled`:t?`${a} uil-small`:`${a} uil-font-base`}return O.createElement("button",{className:u(),style:c(),disabled:e,...s},r)}function I(i){let{callback:e,cancelLabel:r="",close:t,closeLabel:o,confirm:s,confirmLabel:c="",message:u,timeout:a,title:n,type:m}=i,l;q(()=>{if(a)return l=setTimeout(()=>e?e():t(),a),()=>{clearTimeout(l)}},[]);function d(){let w="uil-header";switch(m){case"error":return`${w} uil-error`;case"success":return`${w} uil-success`;case"warning":return`${w} uil-warning`;default:return w}}function S(){return clearTimeout(l),a&&e?e():t()}return p.createElement("div",{className:"uil-modal-wrapper"},p.createElement("div",{className:"uil-modal"},p.createElement("div",{className:d()},n),a&&p.createElement("div",{className:"uil-progress-wrapper"},p.createElement("div",{className:"uil-progress-bar",style:{animationDuration:`${a/1e3+.5}s`}})),p.createElement("div",{className:"uil-content"},p.createElement("div",null,Array.isArray(u)?u.map((w,M)=>p.createElement("p",{key:g(M),className:"uil-modal-text"},w)):p.createElement("p",{className:"uil-modal-text"},u)),p.createElement("div",{className:`uil-button-wrapper ${m!=="question"?"uil-single":""}`},m!=="question"&&p.createElement(y,{label:o??"",onClick:S,type:"button"}),m=="question"&&i.confirm&&p.createElement(p.Fragment,null,p.createElement(y,{label:c,theme:"#00416A",onClick:s,type:"button"}),p.createElement(y,{label:r,onClick:t,type:"button"}))))))}function K(i){let{modalType:e,...r}=i;return V.createElement(I,{type:e,...r})}import G from"react";function H(i){let{cancel:e,...r}=i;return G.createElement(I,{type:"question",close:e,...r})}import b,{useEffect as j}from"react";function D(i){let{checkColor:e,disabled:r,label:t,options:o,value:s,valueChanged:c}=i,u=g("radio");j(()=>{o.forEach(n=>{n.checked&&a(n)})},[]);function a(n){s===n.value||n.disabled||r||c(n.value)}return b.createElement("div",null,t&&b.createElement("div",{className:"uil-radio-title"},t),b.createElement("div",{className:"uil-radio-wrapper"},o.map((n,m)=>b.createElement("div",{key:g(m),className:"uil-radio-option"},b.createElement("div",{className:"uil-radio uil-check",onClick:()=>{a(n)}},b.createElement("input",{id:`${m}-${u}`,name:n.label,type:"radio",value:n.value,checked:s===n.value||s===""&&n.checked,onChange:()=>{a(n)},disabled:r||n.disabled}),b.createElement("div",{className:"uil-checkmark uil-radio-check",style:{backgroundColor:e}})),b.createElement("label",{htmlFor:`${m}-${u}`,className:"uil-font-base"},n.label)))))}import C from"react";function Q(i){let{checkColor:e,checked:r,children:t,toggleCheck:o,label:s,...c}=i,u=g("check");return C.createElement("div",{className:"uil-check-wrapper"},C.createElement("div",{className:"uil-checkbox uil-check",onClick:()=>{o(!r)}},C.createElement("input",{type:"checkbox",checked:r,onChange:()=>{o(!r)},...c,id:u}),C.createElement("div",{className:"uil-checkmark",style:{backgroundColor:e}})),C.createElement("label",{htmlFor:u,className:"uil-check-label"},t||s))}if(typeof document<"u"){let i=document.createElement("style"),e=document.createTextNode($);i.appendChild(e),document.head.appendChild(i)}export{y as CustomButton,Q as CustomCheckbox,L as CustomInput,D as CustomRadio,K as NotifyModal,A as PasswordInput,H as QuestionModal,v as SVG,E as useClickOutsideRef,k as useContrastColor};

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@hbuesing/ui-library",
-  "version": "5.0.0-beta.8",
+  "version": "5.0.0-beta.9",
   "description": "Collection of reusable ui components for react based applications",
   "source": "src/index.ts",
   "type": "module",

package/dist/hooks/getColor.d.ts

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