@hbuesing/ui-library 5.0.0-beta.3 → 5.0.0-beta.5

package/dist/index.css

@@ -0,0 +1 @@
+.i{letter-spacing:1px;color:var(--uil-black);background-color:var(--uil-white);border:1px solid var(--uil-black);border-radius:2px;cursor:pointer;padding:.375rem var(--uil-xxs);-webkit-box-shadow:0 0 3px 0 var(--uil-black-alt);box-shadow:0 0 3px 0 var(--uil-black-alt)}@media (min-width: 760px){.i{padding:var(--uil-xs) var(--uil-s)}}.i.u{background-color:var(--uil-grey-dark);color:var(--uil-grey);border:transparent}.i.a{font-size:var(--uil-font-small);line-height:var(--uil-font-small);padding:var(--uil-xxs) var(--uil-xs)}:root{--uil-black: #000000;--uil-black-alt: #222222;--uil-white: #ffffff;--uil-grey: #f3f3f3;--uil-grey-alt: #cfcfcf;--uil-grey-dark: #878787;--uil-outline-focus: #1E90FFFF;--uil-outline-disabled: #8B0000FF;--uil-success: #006A4E;--uil-error: #800020;--uil-question: #00416A;--uil-warning: #FFD700;--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)}.e{height:fit-content;width:fit-content}.o{font-size:var(--uil-font-base);line-height:var(--uil-font-base)}.l{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}.l:has(input:disabled){background-color:var(--uil-grey);border-color:var(--uil-grey-dark)}.l input{position:absolute;cursor:pointer;height:0;width:0;opacity:0}.l input:checked~.r{transform:scale(1)}.l input:disabled~.r{background-color:var(--uil-grey-dark)}.l .r{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/dist/index.d.ts

@@ -5,4 +5,5 @@ export { CustomCheckbox } from './components/checkbox/index';
 export { CustomButton } from './components/button/index';
 export { SVG } from './components/images/index';
 export { useClickOutsideRef, useGetColor } from './hooks/index';
-import './utils/styles.scss';
+import './components/global.module.scss';
+import './components/button/button.module.scss';

package/dist/index.js

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

package/package.json

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