@hbuesing/ui-library 5.0.0 → 5.0.1-beta.1

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

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

package/dist/components/notification/notification.d.ts

@@ -0,0 +1,3 @@
+import type { NotificationProps } from './types';
+import React from 'react';
+export declare function Notification(props: NotificationProps): React.JSX.Element;

package/dist/components/notification/types.d.ts

@@ -0,0 +1,13 @@
+import type { BaseProps, Status } from '../common/types';
+import type { MouseEventHandler, ReactNode } from 'react';
+export type NotificationProps = BaseProps & {
+    children: ReactNode;
+    type: 'info' | Status;
+    variant: 'outlined' | 'filled';
+} & ({
+    action?: ReactNode;
+    onCancel?: never;
+} | {
+    action?: never;
+    onCancel?: MouseEventHandler<HTMLButtonElement>;
+});

package/dist/index.css

@@ -1 +1 @@
-:root{--uil-black: #000000;--uil-black-alt: #222222;--uil-black-light: #2b2b2b;--uil-black-lighter: #333333;--uil-white: #ffffff;--uil-white-alt: #ffffff;--uil-grey: #f3f3f3;--uil-grey-alt: #cfcfcf;--uil-grey-dark: #878787;--uil-outline-focus: #2779ca;--uil-default-hover: 39, 121, 202;--uil-success-hover: 0, 156, 115;--uil-warning-hover: 255, 215, 0;--uil-error-hover: 207, 9, 52;--uil-custom-hover: 0, 0, 0;--uil-success: #009c73;--uil-error: #CF0934;--uil-warning: #FFD700;--uil-warning-alt: #d1b21a;--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}.K{min-height:fit-content;min-width:fit-content;height:fit-content;width:fit-content}.L{font-size:var(--uil-m);line-height:var(--uil-m)}.M{font-size:var(--uil-l);line-height:var(--uil-l)}.N{font-size:var(--uil-xxl);line-height:var(--uil-xxl)}.O{--uil-black: #ffffff;--uil-outline-focus: #7bb4ff;--uil-grey-dark: #a3a3a3;--uil-grey-alt: #5c5c5c;--uil-white-alt: #3a3a3a;--uil-default-hover: 50, 121, 202;--uil-black-alt: #c3c3c3;--uil-success: #00cc96;--uil-success-hover: 0, 163, 115;--uil-warning: #FFFF3E;--uil-warning-alt: #dcdc38;--uil-warning-hover: 255, 255, 30;--uil-error: #fb0b41;--uil-error-hover: 239, 34, 79;--uil-custom-hover: 255, 255, 255}.e{margin:auto;border-radius:5px;background-color:var(--uil-white-alt)}.e::backdrop{background-color:#00000080}.e.P{width:25%}.e.Q{width:50%}.e.R{width:75%}.e .f{font-weight:700;padding:.5rem}.e .f.S{background-color:var(--uil-outline-focus);color:var(--uil-white)}.e .f.A{background-color:var(--uil-success);color:var(--uil-white)}.e .f.B{background-color:var(--uil-warning);color:var(--uil-black-light)}.e .f.G{background-color:var(--uil-error);color:var(--uil-white)}.e .f.T,.e .f.A,.e .f.B,.e .f.G{border-top-left-radius:4px;border-top-right-radius:4px}.e .H{display:flex;flex-direction:column;padding:.5rem}.e .H.U{border-top:1px solid var(--uil-grey-alt);border-bottom:1px solid var(--uil-grey-alt)}.e .z{display:flex;gap:2rem;padding:.5rem}.e .z.V{justify-content:start}.e .z.W{justify-content:end}.e .z.X{justify-content:space-between}.n{display:flex;align-items:center;gap:var(--uil-s)}.n:has(input:disabled) .I{color:var(--uil-grey-dark)}.n .I{color:var(--uil-black)}.n .b{position:relative;display:block;min-height:var(--uil-l);min-width:var(--uil-l);border:2px solid var(--uil-grey-dark);box-sizing:border-box;cursor:pointer}.n .b:hover,.n .b:has(input:checked){border-color:var(--uil-black)}.n .b.Y{border-radius:2px}.n .b.J,.n .b.J .Z{border-radius:50%}.n .b:has(input:disabled){border-color:var(--uil-grey-alt);cursor:default}.n .b input{position:absolute;cursor:pointer;height:0;width:0;opacity:0}.n .b input:checked~.j{transform:scale(1)}.n .b input:disabled~.j{background-color:var(--uil-grey-dark)}.n .b .j{position:absolute;top:25%;left:25%;background-color:var(--uil-outline-focus);width:var(--uil-xs);height:var(--uil-xs);transform:scale(0);transition:.1s ease}.C{display:flex;gap:var(--uil-m)}.C._{flex-direction:row}.C.rr{flex-direction:column}.r{width:100%}.r .o{position:relative;display:flex;align-items:center}.r .o.d{border-bottom:1px solid var(--uil-grey-dark)}.r .o.d .i{padding-left:0}.r .o.d .u{left:0}.r .o.d .a{border-bottom:1px solid var(--uil-grey-dark)}.r .o.d .t.F{margin-right:.875rem}.r .o.s,.r .o.s .a{border:1px solid var(--uil-grey-dark);border-radius:5px}.r .o.s .t.F{margin-left:.875rem}.r .o.s .t.or{margin-right:.875rem}.r .o.d:not(:has(.i:disabled)):not(.c):not(:focus-within):has(.i:placeholder-shown):hover,.r .o.s:not(:has(.i:disabled)):not(.c):not(:focus-within):has(.i:placeholder-shown):hover{border-color:var(--uil-black)}.r .o.d:not(:has(.i:disabled)):not(.c):not(:focus-within):has(.i:placeholder-shown):hover .a,.r .o.s:not(:has(.i:disabled)):not(.c):not(:focus-within):has(.i:placeholder-shown):hover .a{border-color:var(--uil-black)}.r .o.d:not(:has(.i:disabled)):not(.c):not(:focus-within):has(:not(.i:placeholder-shown)):hover .a,.r .o.s:not(:has(.i:disabled)):not(.c):not(:focus-within):has(:not(.i:placeholder-shown)):hover .a{border-color:var(--uil-black)}.r .o.d:focus-within,.r .o.d:has(.i:not(:placeholder-shown)),.r .o.s:focus-within,.r .o.s:has(.i:not(:placeholder-shown)){border-color:transparent}.r .o.d:has(.t.F),.r .o.s:has(.t.F){flex-direction:row-reverse}.r .o.d:has(.t.w),.r .o.s:has(.t.w){border:transparent}.r .o.d:has(.i:disabled),.r .o.s:has(.i:disabled){border-color:var(--uil-grey-alt)}.r .o.d:has(.i:disabled:not(:placeholder-shown)),.r .o.s:has(.i:disabled:not(:placeholder-shown)){border-color:transparent}.r .o.c{border-color:var(--uil-error)}.r .o.c .a,.r .o.c .i:focus~.a,.r .o.c .i:not(:placeholder-shown)~.a{border-color:var(--uil-error)}.r .o.c .u{color:var(--uil-error);opacity:1}.r .o .a{border-radius:0;padding:var(--uil-s);margin:0;position:absolute;top:-.8125rem;left:0;right:0;bottom:0;pointer-events:none;visibility:hidden;border:none}.r .o .a .ir{visibility:hidden;padding:0 2px}.r .o .u{position:absolute;top:20%;left:var(--uil-m);cursor:text;color:var(--uil-black);opacity:.6;transition:top .25s ease-in-out}.r .o .h{font-size:var(--uil-l);line-height:var(--uil-l);transition:font-size .25s ease,line-height .25s ease}.r .o .h.lr{margin-left:var(--uil-xxxs)}.r .o .i{box-sizing:border-box;width:100%;color:var(--uil-black);background-color:transparent;border-radius:0;padding:var(--uil-xs);padding-left:.875rem;border:none;outline:none}.r .o .i:disabled{color:var(--uil-grey-dark)}.r .o .i:disabled~.a{border-color:var(--uil-grey-alt)}.r .o .i:disabled:not(:placeholder-shown)~.a{border-color:var(--uil-grey-alt)}.r .o .i:disabled~.u{color:var(--uil-grey-dark);opacity:1;cursor:default}.r .o .t{min-width:fit-content;opacity:.75}.r .o .t.x{visibility:hidden}.r .o .i:focus~.t.x,.r .o .i:not(:placeholder-shown)~.t.x{visibility:visible}.r .o .i:focus~.u,.r .o .i:not(:placeholder-shown)~.u,.r .o .i:focus~.t.x~.u,.r .o .t.w~.u{top:-35%}.r .o:not(.c) .i:not(:disabled):focus~.u{opacity:1;color:var(--uil-outline-focus)}.r .o .i:focus~.a,.r .o .i:not(:placeholder-shown)~.a,.r .o .i:focus~.t.x~.a,.r .o .t.w~.a{visibility:visible}.r .o .i:focus~.a{border-color:var(--uil-outline-focus);border-width:2px}.r .o .i:focus~.u .h,.r .o .i:not(:placeholder-shown)~.u .h,.r .o .i:focus~.t.x~.u .h,.r .o .t.w~.u .h,.r .o .i:focus~.a .h,.r .o .i:not(:placeholder-shown)~.a .h,.r .o .i:focus~.t.x~.a .h,.r .o .t.w~.a .h{font-size:var(--uil-s);line-height:var(--uil-s)}.r .D{color:var(--uil-grey-dark);font-size:var(--uil-m);line-height:var(--uil-m);margin-left:var(--uil-s);margin-top:var(--uil-xxs);min-height:var(--uil-m)}.r .D.c{color:var(--uil-error)}.r .o.d~.D{margin-left:0}.ar{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background-color:#00000080;z-index:auto}.l{display:block;border:1px solid transparent;border-radius:5px;box-sizing:border-box;background-color:transparent;cursor:pointer}.l:not(:disabled).v{color:var(--uil-white);background-color:var(--uil-outline-focus);box-shadow:0 0 2px 0 var(--uil-black-alt)}.l:not(:disabled).v:hover{background-color:rgba(var(--uil-default-hover),.9)}.l:not(:disabled).g{color:var(--uil-outline-focus);border-color:var(--uil-outline-focus)}.l:not(:disabled).g:not(:disabled):hover{background-color:rgba(var(--uil-default-hover),.12)}.l:not(:disabled).p{color:var(--uil-outline-focus)}.l:not(:disabled).p:not(:disabled):hover{background-color:rgba(var(--uil-default-hover),.08)}.l:not(:disabled).k.v{color:var(--uil-white);background-color:var(--uil-success)}.l:not(:disabled).k.v:hover{background-color:rgba(var(--uil-success-hover),.9)}.l:not(:disabled).k.g{color:var(--uil-success);border-color:var(--uil-success)}.l:not(:disabled).k.g:hover{background-color:rgba(var(--uil-success-hover),.15)}.l:not(:disabled).k.p{color:var(--uil-success)}.l:not(:disabled).k.p:hover{background-color:rgba(var(--uil-success-hover),.07)}.l:not(:disabled).m.v{color:var(--uil-black-light);background-color:var(--uil-warning)}.l:not(:disabled).m.v:hover{background-color:rgba(var(--uil-warning-hover),.7)}.l:not(:disabled).m.g{color:var(--uil-warning-alt);border-color:var(--uil-warning)}.l:not(:disabled).m.g:hover{background-color:rgba(var(--uil-warning-hover),.1)}.l:not(:disabled).m.p{color:var(--uil-warning-alt)}.l:not(:disabled).m.p:hover{background-color:rgba(var(--uil-warning-hover),.1)}.l:not(:disabled).y.v{color:var(--uil-white);background-color:var(--uil-error)}.l:not(:disabled).y.v:hover{background-color:rgba(var(--uil-error-hover),.9)}.l:not(:disabled).y.g{color:var(--uil-error);border-color:var(--uil-error)}.l:not(:disabled).y.g:hover{background-color:rgba(var(--uil-error-hover),.12)}.l:not(:disabled).y.p{color:var(--uil-error)}.l:not(:disabled).y.p:hover{background-color:rgba(var(--uil-error-hover),.08)}.l:not(:disabled).E.v:hover,.l:not(:disabled).E.g:hover,.l:not(:disabled).E.p:hover{opacity:.9;background-color:rgba(var(--uil-custom-hover),.05)}.l.q{cursor:default;color:var(--uil-grey-dark)}.l.q.v{background-color:var(--uil-grey)}.l.q.g{border-color:var(--uil-grey-dark)}.l.er{letter-spacing:1px;padding:var(--uil-xxs)}.l.tr{letter-spacing:2px;padding:var(--uil-xs)}.l.dr{letter-spacing:2px;padding:var(--uil-s)}
+:root{--uil-black: #000000;--uil-black-w: #000000;--uil-black-alt: #222222;--uil-black-light: #2b2b2b;--uil-black-lighter: #333333;--uil-hover-black: rgba(0, 0, 0, .1);--uil-hover-black-w: rgba(0, 0, 0, .1);--uil-white: #ffffff;--uil-white-alt: #ffffff;--uil-grey: #f3f3f3;--uil-grey-alt: #cfcfcf;--uil-grey-dark: #878787;--uil-outline-focus: #2779ca;--uil-default-hover: 39, 121, 202;--uil-success-hover: 0, 156, 115;--uil-warning-hover: 255, 215, 0;--uil-error-hover: 207, 9, 52;--uil-custom-hover: 0, 0, 0;--uil-success: #009c73;--uil-error: #CF0934;--uil-warning: #FFD700;--uil-warning-alt: #d1b21a;--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}.S{min-height:fit-content;min-width:fit-content;height:fit-content;width:fit-content}.T{font-size:var(--uil-m);line-height:var(--uil-m)}.U{font-size:var(--uil-l);line-height:var(--uil-l)}.V{font-size:var(--uil-xxl);line-height:var(--uil-xxl)}.W{--uil-black-w: #ffffff;--uil-outline-focus: #7bb4ff;--uil-grey-dark: #a3a3a3;--uil-grey-alt: #5c5c5c;--uil-white-alt: #3a3a3a;--uil-default-hover: 50, 121, 202;--uil-black-alt: #c3c3c3;--uil-success: #00cc96;--uil-success-hover: 0, 163, 115;--uil-warning: #FFFF3E;--uil-warning-alt: #dcdc38;--uil-warning-hover: 255, 255, 30;--uil-error: #fb0b41;--uil-error-hover: 239, 34, 79;--uil-custom-hover: 255, 255, 255;--uil-hover-black-w: rgba(255, 255, 255, .1)}.e{margin:auto;border-radius:5px;background-color:var(--uil-white-alt)}.e::backdrop{background-color:#00000080}.e.X{width:25%}.e.Y{width:50%}.e.Z{width:75%}.e .p{font-weight:700;padding:.5rem}.e .p._{background-color:var(--uil-outline-focus);color:var(--uil-white)}.e .p.I{background-color:var(--uil-success);color:var(--uil-white)}.e .p.J{background-color:var(--uil-warning);color:var(--uil-black-light)}.e .p.K{background-color:var(--uil-error);color:var(--uil-white)}.e .p.rr,.e .p.I,.e .p.J,.e .p.K{border-top-left-radius:4px;border-top-right-radius:4px}.e .L{display:flex;flex-direction:column;padding:.5rem}.e .L.or{border-top:1px solid var(--uil-grey-alt);border-bottom:1px solid var(--uil-grey-alt)}.e .D{display:flex;gap:2rem;padding:.5rem}.e .D.lr{justify-content:start}.e .D.ir{justify-content:end}.e .D.ar{justify-content:space-between}.d{display:flex;align-items:center;gap:var(--uil-s)}.d:has(input:disabled) .M{color:var(--uil-grey-dark)}.d .M{color:var(--uil-black-w)}.d .h{position:relative;display:block;min-height:var(--uil-l);min-width:var(--uil-l);border:2px solid var(--uil-grey-dark);box-sizing:border-box;cursor:pointer}.d .h:hover,.d .h:has(input:checked){border-color:var(--uil-black-w)}.d .h.er{border-radius:2px}.d .h.N,.d .h.N .tr{border-radius:50%}.d .h:has(input:disabled){border-color:var(--uil-grey-alt);cursor:default}.d .h input{position:absolute;cursor:pointer;height:0;width:0;opacity:0}.d .h input:checked~.q{transform:scale(1)}.d .h input:disabled~.q{background-color:var(--uil-grey-dark)}.d .h .q{position:absolute;top:25%;left:25%;background-color:var(--uil-outline-focus);width:var(--uil-xs);height:var(--uil-xs);transform:scale(0);transition:.1s ease}.A{display:flex;gap:var(--uil-m)}.A.ur{flex-direction:row}.A.nr{flex-direction:column}.r{width:100%}.r .o{position:relative;display:flex;align-items:center}.r .o.n{border-bottom:1px solid var(--uil-grey-dark)}.r .o.n .l{padding-left:0}.r .o.n .c{left:0}.r .o.n .a{border-bottom:1px solid var(--uil-grey-dark)}.r .o.n .t.E{margin-right:.875rem}.r .o.s,.r .o.s .a{border:1px solid var(--uil-grey-dark);border-radius:5px}.r .o.s .t.E{margin-left:.875rem}.r .o.s .t.dr{margin-right:.875rem}.r .o.n:not(:has(.l:disabled)):not(.b):not(:focus-within):has(.l:placeholder-shown):hover,.r .o.s:not(:has(.l:disabled)):not(.b):not(:focus-within):has(.l:placeholder-shown):hover{border-color:var(--uil-black-w)}.r .o.n:not(:has(.l:disabled)):not(.b):not(:focus-within):has(.l:placeholder-shown):hover .a,.r .o.s:not(:has(.l:disabled)):not(.b):not(:focus-within):has(.l:placeholder-shown):hover .a{border-color:var(--uil-black-w)}.r .o.n:not(:has(.l:disabled)):not(.b):not(:focus-within):has(:not(.l:placeholder-shown)):hover .a,.r .o.s:not(:has(.l:disabled)):not(.b):not(:focus-within):has(:not(.l:placeholder-shown)):hover .a{border-color:var(--uil-black-w)}.r .o.n:focus-within,.r .o.n:has(.l:not(:placeholder-shown)),.r .o.s:focus-within,.r .o.s:has(.l:not(:placeholder-shown)){border-color:transparent}.r .o.n:has(.t.E),.r .o.s:has(.t.E){flex-direction:row-reverse}.r .o.n:has(.t.y),.r .o.s:has(.t.y){border:transparent}.r .o.n:has(.l:disabled),.r .o.s:has(.l:disabled){border-color:var(--uil-grey-alt)}.r .o.n:has(.l:disabled:not(:placeholder-shown)),.r .o.s:has(.l:disabled:not(:placeholder-shown)){border-color:transparent}.r .o.b{border-color:var(--uil-error)}.r .o.b .a,.r .o.b .l:focus~.a,.r .o.b .l:not(:placeholder-shown)~.a{border-color:var(--uil-error)}.r .o.b .c{color:var(--uil-error);opacity:1}.r .o .a{border-radius:0;padding:var(--uil-s);margin:0;position:absolute;top:-.8125rem;left:0;right:0;bottom:0;pointer-events:none;visibility:hidden;border:none}.r .o .a .cr{visibility:hidden;padding:0 2px}.r .o .c{position:absolute;top:20%;left:var(--uil-m);cursor:text;color:var(--uil-black-w);opacity:.6;transition:top .25s ease-in-out}.r .o .v{font-size:var(--uil-l);line-height:var(--uil-l);transition:font-size .25s ease,line-height .25s ease}.r .o .v.sr{margin-left:var(--uil-xxxs)}.r .o .l{box-sizing:border-box;width:100%;color:var(--uil-black-w);background-color:transparent;border-radius:0;padding:var(--uil-xs);padding-left:.875rem;border:none;outline:none}.r .o .l:disabled{color:var(--uil-grey-dark)}.r .o .l:disabled~.a{border-color:var(--uil-grey-alt)}.r .o .l:disabled:not(:placeholder-shown)~.a{border-color:var(--uil-grey-alt)}.r .o .l:disabled~.c{color:var(--uil-grey-dark);opacity:1;cursor:default}.r .o .t{min-width:fit-content;opacity:.75}.r .o .t.k{visibility:hidden}.r .o .l:focus~.t.k,.r .o .l:not(:placeholder-shown)~.t.k{visibility:visible}.r .o .l:focus~.c,.r .o .l:not(:placeholder-shown)~.c,.r .o .l:focus~.t.k~.c,.r .o .t.y~.c{top:-35%}.r .o:not(.b) .l:not(:disabled):focus~.c{opacity:1;color:var(--uil-outline-focus)}.r .o .l:focus~.a,.r .o .l:not(:placeholder-shown)~.a,.r .o .l:focus~.t.k~.a,.r .o .t.y~.a{visibility:visible}.r .o .l:focus~.a{border-color:var(--uil-outline-focus);border-width:2px}.r .o .l:focus~.c .v,.r .o .l:not(:placeholder-shown)~.c .v,.r .o .l:focus~.t.k~.c .v,.r .o .t.y~.c .v,.r .o .l:focus~.a .v,.r .o .l:not(:placeholder-shown)~.a .v,.r .o .l:focus~.t.k~.a .v,.r .o .t.y~.a .v{font-size:var(--uil-s);line-height:var(--uil-s)}.r .B{color:var(--uil-grey-dark);font-size:var(--uil-m);line-height:var(--uil-m);margin-left:var(--uil-s);margin-top:var(--uil-xxs);min-height:var(--uil-m)}.r .B.b{color:var(--uil-error)}.r .o.n~.B{margin-left:0}.u{display:flex;align-items:center;padding:var(--uil-xs);border-radius:5px}.u.x{color:var(--uil-white)}.u.x.O{background-color:var(--uil-outline-focus)}.u.x.P{background-color:var(--uil-success)}.u.x.Q{color:var(--uil-black);background-color:var(--uil-warning)}.u.x.R{background-color:var(--uil-error)}.u.m{border-width:1px;color:var(--uil-black-w)}.u.m.O{border-color:var(--uil-outline-focus)}.u.m.P{border-color:var(--uil-success)}.u.m.Q{border-color:var(--uil-warning)}.u.m.R{border-color:var(--uil-error)}.u .br{margin-right:var(--uil-xs)}.u .hr{margin-left:auto}.u .C{height:var(--uil-m);width:var(--uil-m);box-sizing:content-box;margin-left:auto;padding:var(--uil-xs);border-radius:50%;cursor:pointer;border:none;background-color:transparent}.u .C.x{fill:var(--uil-white)}.u .C.x:hover{background-color:var(--uil-hover-black)}.u .C.m{fill:var(--uil-black-w)}.u .C.m:hover{background-color:var(--uil-hover-black-w)}.vr{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background-color:#00000080;z-index:auto}.i{display:block;border:1px solid transparent;border-radius:5px;box-sizing:border-box;background-color:transparent;cursor:pointer}.i:not(:disabled).g{color:var(--uil-white);background-color:var(--uil-outline-focus);box-shadow:0 0 2px 0 var(--uil-black-alt)}.i:not(:disabled).g:hover{background-color:rgba(var(--uil-default-hover),.9)}.i:not(:disabled).f{color:var(--uil-outline-focus);border-color:var(--uil-outline-focus)}.i:not(:disabled).f:not(:disabled):hover{background-color:rgba(var(--uil-default-hover),.12)}.i:not(:disabled).w{color:var(--uil-outline-focus)}.i:not(:disabled).w:not(:disabled):hover{background-color:rgba(var(--uil-default-hover),.08)}.i:not(:disabled).z.g{color:var(--uil-white);background-color:var(--uil-success)}.i:not(:disabled).z.g:hover{background-color:rgba(var(--uil-success-hover),.9)}.i:not(:disabled).z.f{color:var(--uil-success);border-color:var(--uil-success)}.i:not(:disabled).z.f:hover{background-color:rgba(var(--uil-success-hover),.15)}.i:not(:disabled).z.w{color:var(--uil-success)}.i:not(:disabled).z.w:hover{background-color:rgba(var(--uil-success-hover),.07)}.i:not(:disabled).F.g{color:var(--uil-black-light);background-color:var(--uil-warning)}.i:not(:disabled).F.g:hover{background-color:rgba(var(--uil-warning-hover),.7)}.i:not(:disabled).F.f{color:var(--uil-warning-alt);border-color:var(--uil-warning)}.i:not(:disabled).F.f:hover{background-color:rgba(var(--uil-warning-hover),.1)}.i:not(:disabled).F.w{color:var(--uil-warning-alt)}.i:not(:disabled).F.w:hover{background-color:rgba(var(--uil-warning-hover),.1)}.i:not(:disabled).j.g{color:var(--uil-white);background-color:var(--uil-error)}.i:not(:disabled).j.g:hover{background-color:rgba(var(--uil-error-hover),.9)}.i:not(:disabled).j.f{color:var(--uil-error);border-color:var(--uil-error)}.i:not(:disabled).j.f:hover{background-color:rgba(var(--uil-error-hover),.12)}.i:not(:disabled).j.w{color:var(--uil-error)}.i:not(:disabled).j.w:hover{background-color:rgba(var(--uil-error-hover),.08)}.i:not(:disabled).G.g:hover,.i:not(:disabled).G.f:hover,.i:not(:disabled).G.w:hover{opacity:.9;background-color:rgba(var(--uil-custom-hover),.05)}.i.H{cursor:default;color:var(--uil-grey-dark)}.i.H.g{background-color:var(--uil-grey)}.i.H.f{border-color:var(--uil-grey-dark)}.i.gr{letter-spacing:1px;padding:var(--uil-xxs)}.i.fr{letter-spacing:2px;padding:var(--uil-xs)}.i.pr{letter-spacing:2px;padding:var(--uil-s)}

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 export { Dialog, DialogTitle, DialogContent, DialogControls } from './components/dialog';
 export { RadioGroup, type RadioOption } from './components/check/radioGroup';
 export { Input, InputDecorator } from './components/input';
+export { Notification } from './components/notification';
 export { Checkbox } from './components/check/checkbox';
 export { Backdrop } from './components/backdrop';
 export { Radio } from './components/check/radio';
 export { Button } from './components/button';
-export { useContrastColor } from '@hooks/index';
+export { useContrastColor } from './hooks/index';

package/dist/index.js

@@ -1 +1 @@
-var d={fit:"K",fontSmall:"L",fontMedium:"M",fontLarge:"N",dark:"O"};import L,{useEffect as M,useRef as B}from"react";function i(r){let e="";return r.forEach(o=>{o==null||o===!1||(e!==""&&(e+=" "),e+=o)}),e}var g={dialog:"e",small:"P",medium:"Q",large:"R",title:"f",info:"S",success:"A",warning:"B",error:"G",default:"T",content:"H",divider:"U",controls:"z",start:"V",end:"W","space-between":"X"};function H(r){let{ariaModal:e,children:o,dark:l=!1,describedby:n,disableEscapeKey:p,labelledby:u,onCancel:m,onClickBackdrop:s,open:c,scrollable:a=!1,size:b}=r,h=B(null);M(()=>(h.current?.addEventListener("keydown",k),h.current?.addEventListener("mousedown",y),c?(a||(document.body.style.paddingRight="15px",document.body.style.overflow="hidden"),h.current?.showModal()):(a||(document.body.style.paddingRight="",document.body.style.overflow=""),h.current?.close()),()=>{h.current?.removeEventListener("keydown",k),h.current?.removeEventListener("mousedown",y)}),[c]);function k(W){p&&W.key==="Escape"&&W.preventDefault()}function y(W){s&&W.target===W.currentTarget&&s()}return L.createElement("dialog",{ref:h,"aria-describedby":n,"aria-labelledby":u,"aria-modal":e,className:i([g.dialog,l&&d.dark,b&&g[b]]),onCancel:m,role:e?"alertdialog":"dialog"},o)}import K from"react";function G(r){let{children:e,color:o,id:l}=r;return K.createElement("div",{className:i([g.title,o&&g[o],d.fontLarge]),id:l},e)}import O from"react";function j(r){let{children:e,divider:o=!1,id:l}=r;return O.createElement("div",{className:i([g.content,o&&g.divider]),id:l},e)}import q from"react";function A(r){let{children:e,position:o="end"}=r;return q.createElement("div",{className:i([g.controls,g[o]])},e)}import P from"react";var f={checkWrapper:"n",label:"I",check:"b",box:"Y",radio:"J",radioCheck:"Z",checkmark:"j",radioWrapper:"C",row:"_",column:"rr"};import F from"react";function x(){let r=new Uint32Array(2);return crypto.getRandomValues(r),`uil${r[0].toString(32)}${r[1].toString(16)}`}function E(r){let{checked:e,children:o,color:l,dark:n,disabled:p,id:u,name:m,onChange:s,value:c,...a}=r,b=u??x();function h(y){!p&&s&&s(y)}function k(){document.querySelector(`#${b}`).click()}return F.createElement("div",{className:i([f.checkWrapper,n&&d.dark])},F.createElement("div",{className:`${f.check} ${f.radio}`,onClick:()=>{k()}},F.createElement("input",{id:b,name:m,type:"radio",value:c,checked:e,onChange:y=>{h(y)},disabled:p,tabIndex:p?-1:a.tabIndex??void 0,...a}),F.createElement("div",{className:`${f.checkmark} ${f.radioCheck}`,style:p?void 0:{backgroundColor:l}})),o&&F.createElement("label",{htmlFor:b,className:`${d.fontMedium} ${f.label}`},o))}function U(r){let{color:e,dark:o=!1,direction:l="column",disabled:n,name:p,onChange:u,options:m,selected:s}=r;function c(a){!n&&u&&u(a)}return P.createElement("div",{className:i([f.radioWrapper,f[l]])},m.map((a,b)=>P.createElement(E,{key:b,dark:o,color:e,onChange:c,checked:s===a.value,disabled:n??a.disabled,name:p,...a},a.label)))}var t={inputField:"r",inputWrapper:"o",basic:"d",input:"i",label:"u",fieldset:"a",decorator:"t",start:"F",outlined:"s",end:"or",error:"c",visible:"w",legend:"ir",labelText:"h",asterisk:"lr",focus:"x",helpText:"D"};import _ from"react";function I(r){let{children:e,onFocus:o,position:l}=r;return _.createElement("div",{className:i([t.decorator,d.fontSmall,l==="start"?t.start:t.end,o?t.focus:t.visible])},e)}import v,{isValidElement as D}from"react";function J(r){let{children:e,dark:o,error:l,helpText:n,id:p,label:u,required:m,variant:s,...c}=r;if(e&&(!D(e)||e.type!==I))throw new Error(`<Input> received an invalid child. Expected <InputDecorator />, but got: ${D(e)?String(e.type):typeof e}.`);let a=p??x(),b=n?x():void 0;return v.createElement("div",{className:i([t.inputField,o&&d.dark])},v.createElement("div",{className:i([t.inputWrapper,s==="basic"?t.basic:t.outlined,l&&t.error])},v.createElement("input",{id:a,className:`${t.input} ${d.fontMedium}`,placeholder:"",required:m,...c,"aria-describedby":b}),e&&e,v.createElement("fieldset",{className:t.fieldset,"aria-hidden":!0},v.createElement("legend",{className:t.legend},v.createElement("span",{className:t.labelText},u),m&&v.createElement("span",{className:`${t.labelText} ${t.asterisk}`,"aria-hidden":!0},"*"))),v.createElement("label",{htmlFor:a,className:t.label},v.createElement("span",{className:t.labelText},u),m&&v.createElement("span",{className:`${t.labelText} ${t.asterisk}`,"aria-hidden":!0},"*"))),n&&v.createElement("div",{className:i([t.helpText,l&&t.error]),id:b},n))}import C from"react";function Q(r){let{checked:e,children:o,color:l,dark:n,disabled:p,onChange:u,...m}=r,s=m.id??x();function c(b){!p&&u&&u(b)}function a(){document.querySelector(`#${s}`).click()}return C.createElement("div",{className:i([f.checkWrapper,n&&d.dark])},C.createElement("div",{className:i([f.check,f.box]),onClick:a},C.createElement("input",{type:"checkbox",checked:e,onChange:c,id:s,disabled:p,...m}),C.createElement("div",{className:i([f.checkmark]),style:p?void 0:{backgroundColor:l}})),o&&C.createElement("label",{htmlFor:s,className:`${d.fontMedium} ${f.label}`},o))}var N={backdrop:"ar"};import{createPortal as Z}from"react-dom";import R from"react";function rr(r){let{children:e,onClick:o,open:l,zIndex:n}=r;return l?Z(R.createElement("div",{className:N.backdrop,style:{zIndex:n},onClick:o},e),document.body):null}var er=new RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);function T(r){if(!er.test(r))throw new Error(`useContrastColor received an invalid hex color format. Expected '#000' or '#000000', but got: ${r}`);r=r.replace("#","");let e;r.length===3?e=[parseInt(r.substring(0),16)/255,parseInt(r.substring(1),16)/255,parseInt(r.substring(2),16)/255]:e=[parseInt(r.substring(0,2),16)/255,parseInt(r.substring(2,4),16)/255,parseInt(r.substring(4,6),16)/255];let[o,l,n]=e.map(u=>u<=.04045?u/12.92:((u+.055)/1.055)**2.4);return .2126*o+.7152*l+.0722*n>.179?"#000000":"#ffffff"}import $ from"react";var w={button:"l",filled:"v",outlined:"g",text:"p",success:"k",warning:"m",error:"y",custom:"E",disabled:"q",small:"er",medium:"tr",large:"dr"};function ir(r){let{children:e,color:o,dark:l,disabled:n,href:p,size:u="medium",target:m,variant:s,...c}=r,a=b();function b(){if(!(n||!o?.includes("#")))switch(s){case"filled":return{color:T(o),backgroundColor:o};case"outlined":return{color:o,borderColor:o};case"text":return{color:o};default:throw new Error(`<Button> received an unexpected variant. Expected 'filled', 'outline' or 'text', but got: ${String(s)}'`)}}function h(){let k;switch(u){case"small":k=d.fontSmall;break;case"medium":k=d.fontMedium;break;case"large":k=d.fontLarge;break;default:throw new Error(`<Button> received an unsupported size. Expected 'small', 'medium' or 'large', but got: ${String(u)}`)}return i([w.button,d.fit,k,w[u],w[s],l&&d.dark,o&&!o.includes("#")&&w[o],a&&w.custom,n&&w.disabled])}return p||p===""?$.createElement("a",{href:p,target:m,id:c.id,title:c.title,style:a,className:h()},e):$.createElement("button",{style:a,className:h(),type:c.type??"button",disabled:n,"aria-disabled":n,tabIndex:n?-1:c.tabIndex,...c},e)}export{rr as Backdrop,ir as Button,Q as Checkbox,H as Dialog,j as DialogContent,A as DialogControls,G as DialogTitle,J as Input,I as InputDecorator,E as Radio,U as RadioGroup,T as useContrastColor};
+var n={fit:"S",fontSmall:"T",fontMedium:"U",fontLarge:"V",dark:"W"};import S,{useEffect as H,useRef as K}from"react";function i(e){let r="";return e.forEach(o=>{o==null||o===!1||(r!==""&&(r+=" "),r+=o)}),r}var g={dialog:"e",small:"X",medium:"Y",large:"Z",title:"p",info:"_",success:"I",warning:"J",error:"K",default:"rr",content:"L",divider:"or",controls:"D",start:"lr",end:"ir","space-between":"ar"};function G(e){let{ariaModal:r,children:o,dark:l=!1,describedby:t,disableEscapeKey:u,labelledby:d,onCancel:m,onClickBackdrop:s,open:c,scrollable:p=!1,size:b}=e,h=K(null);H(()=>(h.current?.addEventListener("keydown",k),h.current?.addEventListener("mousedown",y),c?(p||(document.body.style.paddingRight="15px",document.body.style.overflow="hidden"),h.current?.showModal()):(p||(document.body.style.paddingRight="",document.body.style.overflow=""),h.current?.close()),()=>{h.current?.removeEventListener("keydown",k),h.current?.removeEventListener("mousedown",y)}),[c]);function k(C){u&&C.key==="Escape"&&C.preventDefault()}function y(C){s&&C.target===C.currentTarget&&s()}return S.createElement("dialog",{ref:h,"aria-describedby":t,"aria-labelledby":d,"aria-modal":r,className:i([g.dialog,l&&n.dark,b&&g[b]]),onCancel:m,role:r?"alertdialog":"dialog"},o)}import O from"react";function j(e){let{children:r,color:o,id:l}=e;return O.createElement("div",{className:i([g.title,o&&g[o],n.fontLarge]),id:l},r)}import q from"react";function A(e){let{children:r,divider:o=!1,id:l}=e;return q.createElement("div",{className:i([g.content,o&&g.divider]),id:l},r)}import V from"react";function U(e){let{children:r,position:o="end"}=e;return V.createElement("div",{className:i([g.controls,g[o]])},r)}import D from"react";var f={checkWrapper:"d",label:"M",check:"h",box:"er",radio:"N",radioCheck:"tr",checkmark:"q",radioWrapper:"A",row:"ur",column:"nr"};import N from"react";function x(){let e=new Uint32Array(2);return crypto.getRandomValues(e),`uil${e[0].toString(32)}${e[1].toString(16)}`}function I(e){let{checked:r,children:o,color:l,dark:t,disabled:u,id:d,name:m,onChange:s,value:c,...p}=e,b=d??x();function h(y){!u&&s&&s(y)}function k(){document.querySelector(`#${b}`).click()}return N.createElement("div",{className:i([f.checkWrapper,t&&n.dark])},N.createElement("div",{className:`${f.check} ${f.radio}`,onClick:()=>{k()}},N.createElement("input",{id:b,name:m,type:"radio",value:c,checked:r,onChange:y=>{h(y)},disabled:u,tabIndex:u?-1:p.tabIndex??void 0,...p}),N.createElement("div",{className:`${f.checkmark} ${f.radioCheck}`,style:u?void 0:{backgroundColor:l}})),o&&N.createElement("label",{htmlFor:b,className:`${n.fontMedium} ${f.label}`},o))}function _(e){let{color:r,dark:o=!1,direction:l="column",disabled:t,name:u,onChange:d,options:m,selected:s}=e;function c(p){!t&&d&&d(p)}return D.createElement("div",{className:i([f.radioWrapper,f[l]])},m.map((p,b)=>D.createElement(I,{key:b,dark:o,color:r,onChange:c,checked:s===p.value,disabled:t??p.disabled,name:u,...p},p.label)))}var a={inputField:"r",inputWrapper:"o",basic:"n",input:"l",label:"c",fieldset:"a",decorator:"t",start:"E",outlined:"s",end:"dr",error:"b",visible:"y",legend:"cr",labelText:"v",asterisk:"sr",focus:"k",helpText:"B"};import Q from"react";function P(e){let{children:r,onFocus:o,position:l}=e;return Q.createElement("div",{className:i([a.decorator,n.fontSmall,l==="start"?a.start:a.end,o?a.focus:a.visible])},r)}import v,{isValidElement as $}from"react";function Y(e){let{children:r,dark:o,error:l,helpText:t,id:u,label:d,required:m,variant:s,...c}=e;if(r&&(!$(r)||r.type!==P))throw new Error(`<Input> received an invalid child. Expected <InputDecorator />, but got: ${$(r)?String(r.type):typeof r}.`);let p=u??x(),b=t?x():void 0;return v.createElement("div",{className:i([a.inputField,o&&n.dark])},v.createElement("div",{className:i([a.inputWrapper,s==="basic"?a.basic:a.outlined,l&&a.error])},v.createElement("input",{id:p,className:`${a.input} ${n.fontMedium}`,placeholder:"",required:m,...c,"aria-describedby":b}),r&&r,v.createElement("fieldset",{className:a.fieldset,"aria-hidden":!0},v.createElement("legend",{className:a.legend},v.createElement("span",{className:a.labelText},d),m&&v.createElement("span",{className:`${a.labelText} ${a.asterisk}`,"aria-hidden":!0},"*"))),v.createElement("label",{htmlFor:p,className:a.label},v.createElement("span",{className:a.labelText},d),m&&v.createElement("span",{className:`${a.labelText} ${a.asterisk}`,"aria-hidden":!0},"*"))),t&&v.createElement("div",{className:i([a.helpText,l&&a.error]),id:b},t))}var w={notification:"u",filled:"x",info:"O",success:"P",warning:"Q",error:"R",outlined:"m",icon:"br",action:"hr",cancelButton:"C"};import F from"react";function R(e){let{action:r,children:o,dark:l,onCancel:t,type:u,variant:d}=e;return F.createElement("div",{className:i([w.notification,w[d],w[u],l&&n.dark])},F.createElement("div",{className:n.fontMedium},o),r&&F.createElement("div",{className:w.action},r),t&&F.createElement("button",{className:i([w.cancelButton,w[d]]),onClick:t},F.createElement("svg",{viewBox:"0 0 512 512",xmlns:"http://www.w3.org/2000/svg"},F.createElement("path",{d:"M64 64a16 16 0 0 1 22 0l170 166L425 64a16 16 0 1 1 23 22L278 256l170 169a16 16 0 1 1-23 23L256 280 86 449a16 16 0 1 1-22-24l169-169L64 86a16 16 0 0 1 0-22"}))))}import E from"react";function rr(e){let{checked:r,children:o,color:l,dark:t,disabled:u,onChange:d,...m}=e,s=m.id??x();function c(b){!u&&d&&d(b)}function p(){document.querySelector(`#${s}`).click()}return E.createElement("div",{className:i([f.checkWrapper,t&&n.dark])},E.createElement("div",{className:i([f.check,f.box]),onClick:p},E.createElement("input",{type:"checkbox",checked:r,onChange:c,id:s,disabled:u,...m}),E.createElement("div",{className:i([f.checkmark]),style:u?void 0:{backgroundColor:l}})),o&&E.createElement("label",{htmlFor:s,className:`${n.fontMedium} ${f.label}`},o))}var B={backdrop:"vr"};import{createPortal as or}from"react-dom";import ir from"react";function tr(e){let{children:r,onClick:o,open:l,zIndex:t}=e;return l?or(ir.createElement("div",{className:B.backdrop,style:{zIndex:t},onClick:o},r),document.body):null}var lr=new RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/);function T(e){if(!lr.test(e))throw new Error(`useContrastColor received an invalid hex color format. Expected '#000' or '#000000', but got: ${e}`);e=e.replace("#","");let r;e.length===3?r=[parseInt(e.substring(0),16)/255,parseInt(e.substring(1),16)/255,parseInt(e.substring(2),16)/255]:r=[parseInt(e.substring(0,2),16)/255,parseInt(e.substring(2,4),16)/255,parseInt(e.substring(4,6),16)/255];let[o,l,t]=r.map(d=>d<=.04045?d/12.92:((d+.055)/1.055)**2.4);return .2126*o+.7152*l+.0722*t>.179?"#000000":"#ffffff"}import z from"react";var W={button:"i",filled:"g",outlined:"f",text:"w",success:"z",warning:"F",error:"j",custom:"G",disabled:"H",small:"gr",medium:"fr",large:"pr"};function ar(e){let{children:r,color:o,dark:l,disabled:t,href:u,size:d="medium",target:m,variant:s,...c}=e,p=b();function b(){if(!(t||!o?.includes("#")))switch(s){case"filled":return{color:T(o),backgroundColor:o};case"outlined":return{color:o,borderColor:o};case"text":return{color:o};default:throw new Error(`<Button> received an unexpected variant. Expected 'filled', 'outline' or 'text', but got: ${String(s)}'`)}}function h(){let k;switch(d){case"small":k=n.fontSmall;break;case"medium":k=n.fontMedium;break;case"large":k=n.fontLarge;break;default:throw new Error(`<Button> received an unsupported size. Expected 'small', 'medium' or 'large', but got: ${String(d)}`)}return i([W.button,n.fit,k,W[d],W[s],l&&n.dark,o&&!o.includes("#")&&W[o],p&&W.custom,t&&W.disabled])}return u||u===""?z.createElement("a",{href:u,target:m,id:c.id,title:c.title,style:p,className:h()},r):z.createElement("button",{style:p,className:h(),type:c.type??"button",disabled:t,"aria-disabled":t,tabIndex:t?-1:c.tabIndex,...c},r)}export{tr as Backdrop,ar as Button,rr as Checkbox,G as Dialog,A as DialogContent,U as DialogControls,j as DialogTitle,Y as Input,P as InputDecorator,R as Notification,I as Radio,_ as RadioGroup,T as useContrastColor};

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@hbuesing/ui-library",
-  "version": "5.0.0",
+  "version": "5.0.1-beta.1",
   "description": "Collection of reusable ui components for react based applications",
   "source": "src/index.ts",
   "type": "module",
@@ -30,7 +30,7 @@
     "build:dev": "NODE_ENV=dev node esbuild.js",
     "build": "NODE_ENV=production node esbuild.js",
     "postbuild": "npm run build:types",
-    "build:types": "tsc --emitDeclarationOnly --project tsconfig.build.json",
+    "build:types": "tsc --emitDeclarationOnly -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
     "test": "vitest run",
     "test:watch": "vitest -w",
     "test:coverage": "vitest run --coverage"
@@ -52,7 +52,9 @@
     "@vitest/coverage-v8": "^3.1.1",
     "esbuild": "0.25.2",
     "esbuild-sass-plugin": "^3.3.1",
-    "jsdom": "^26.0.0",
+    "jsdom": "^26.1.0",
+    "tsc-alias": "^1.8.15",
+    "typescript-plugin-css-modules": "^5.1.0",
     "vitest": "^3.1.1"
   }
 }