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

package/dist/components/backdrop/backdrop.d.ts

@@ -0,0 +1,3 @@
+import type { BackdropProps } from './types';
+import React from 'react';
+export declare function Backdrop(props: BackdropProps): React.ReactPortal | null;

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

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

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

@@ -0,0 +1,7 @@
+import type { MouseEventHandler, ReactNode } from 'react';
+export type BackdropProps = {
+    open: boolean;
+    children?: ReactNode;
+    onClick?: MouseEventHandler<HTMLDivElement> | undefined;
+    zIndex?: number | undefined;
+};

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

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

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

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

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

@@ -0,0 +1,14 @@
+import type { BaseComponentProps, Size, Status } from '../common/types';
+import type { HTMLAttributeAnchorTarget, ReactNode } from 'react';
+export type ButtonProps = BaseComponentProps<'button'> & {
+    children: ReactNode;
+    variant: 'filled' | 'outlined' | 'text';
+    color?: `#${string}` | Status;
+    size?: Size;
+} & ({
+    href: string;
+    target?: HTMLAttributeAnchorTarget;
+} | {
+    href?: never;
+    target?: never;
+});

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

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

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

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

package/dist/components/check/checkbox/types.d.ts

@@ -0,0 +1,8 @@
+import type { BaseComponentProps } from '../../common/types';
+import type { CSSProperties, ReactNode } from 'react';
+export type CheckboxProps = BaseComponentProps<'input'> & AdditionalCheckboxProps;
+type AdditionalCheckboxProps = {
+    children?: ReactNode;
+    color?: CSSProperties['backgroundColor'];
+};
+export {};

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

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

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

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

package/dist/components/check/radio/types.d.ts

@@ -0,0 +1,8 @@
+import type { BaseComponentProps } from '../../common/types';
+import type { CSSProperties, ReactNode } from 'react';
+export type RadioProps = BaseComponentProps<'input'> & AdditionalRadioProps;
+type AdditionalRadioProps = {
+    children?: ReactNode;
+    color?: CSSProperties['backgroundColor'];
+};
+export {};

package/dist/components/check/radioGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from './radioGroup';
+export type { RadioOption } from './types';

package/dist/components/check/radioGroup/radioGroup.d.ts

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

package/dist/components/check/radioGroup/types.d.ts

@@ -0,0 +1,20 @@
+import type { ChangeEventHandler, CSSProperties, ReactNode } from 'react';
+import type { BaseProps } from '../../common/types';
+export type RadioGroupProps = BaseProps & AdditionalRadioGroupProps;
+type AdditionalRadioGroupProps = {
+    options: RadioOption[];
+    color?: CSSProperties['backgroundColor'];
+    direction?: 'row' | 'column';
+    disabled?: boolean;
+    name?: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    selected?: string;
+};
+export type RadioOption = {
+    label: ReactNode;
+    value: string | number;
+    disabled?: boolean | undefined;
+    id?: string | undefined;
+    title?: string | undefined;
+};
+export {};

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

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef, ElementType } from 'react';
+export type Size = 'small' | 'medium' | 'large';
+export type Status = 'success' | 'warning' | 'error';
+export type BaseComponentProps<T extends ElementType> = ComponentPropsWithRef<T> & BaseProps;
+export type BaseProps = {
+    dark?: boolean;
+};

package/dist/components/dialog/dialog.d.ts

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

package/dist/components/dialog/dialogContent.d.ts

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

package/dist/components/dialog/dialogControls.d.ts

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

package/dist/components/dialog/dialogTitle.d.ts

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

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

@@ -0,0 +1,4 @@
+export * from './dialog';
+export * from './dialogTitle';
+export * from './dialogContent';
+export * from './dialogControls';

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

@@ -0,0 +1,32 @@
+import type { AriaAttributes, ReactEventHandler, ReactNode } from 'react';
+import type { BaseProps, Status } from '../common/types';
+export type DialogProps = BaseProps & {
+    open: boolean;
+    children: ReactNode;
+    ariaModal?: AriaAttributes['aria-modal'];
+    describedby?: AriaAttributes['aria-describedby'];
+    labelledby?: AriaAttributes['aria-labelledby'];
+    scrollable?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    onClickBackdrop?: () => void;
+} & ({
+    onCancel: ReactEventHandler<HTMLDialogElement>;
+    disableEscapeKey?: never;
+} | {
+    disableEscapeKey: boolean;
+    onCancel?: never;
+});
+export type DialogTitleProps = {
+    children: ReactNode;
+    color?: Status | 'info';
+    id?: string;
+};
+export type DialogContentProps = {
+    children: ReactNode;
+    divider?: boolean;
+    id?: string;
+};
+export type DialogControlsProps = {
+    children: ReactNode;
+    position?: 'start' | 'end' | 'space-between';
+};

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

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

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { InputProps } from './types';
+export declare function Input(props: Omit<InputProps, 'placeholder'>): React.JSX.Element;

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

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

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

@@ -0,0 +1,17 @@
+import type { BaseComponentProps } from '../common/types';
+import type { InputDecorator } from './inputDecorator';
+import type { ReactElement, ReactNode } from 'react';
+export type InputProps = BaseComponentProps<'input'> & AdditionalInputProps;
+type AdditionalInputProps = {
+    label: string;
+    variant: 'outlined' | 'basic';
+    children?: ReactElement<InputDecoratorProps, typeof InputDecorator>;
+    error?: boolean;
+    helpText?: string;
+};
+export type InputDecoratorProps = {
+    children: ReactNode;
+    position?: 'start' | 'end';
+    onFocus?: boolean;
+};
+export {};

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/hooks/index.d.ts

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

package/dist/hooks/useContrastColor.d.ts

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

package/dist/index.css

@@ -0,0 +1 @@
+: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,7 +1,9 @@
-export { CustomInput, PasswordInput, PasswordRule } from './components/input/index';
-export { NotifyModal, QuestionModal } from './components/modal/index';
-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, useContrastColor } from './hooks/index';
+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';

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 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};
+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/dist/utils/conditionalClass.d.ts

@@ -0,0 +1,3 @@
+type Param = string | boolean | null | undefined;
+export default function cls(items: Param[]): string;
+export {};

package/dist/utils/generateKey.d.ts

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

package/package.json

@@ -1,20 +1,39 @@
 {
   "private": false,
   "name": "@hbuesing/ui-library",
-  "version": "5.0.0-beta.9",
+  "version": "5.0.1-beta.1",
   "description": "Collection of reusable ui components for react based applications",
   "source": "src/index.ts",
   "type": "module",
-  "types": "./dist/index.d.ts",
-  "exports": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./index.css": {
+      "import": "./dist/index.css",
+      "require": "./dist/index.css"
+    }
+  },
   "files": [
     "dist/*"
   ],
   "scripts": {
-    "lint": "eslint src",
-    "lint:nw": "eslint src --max-warnings 0",
-    "build": "node ./esbuild.js",
-    "postbuild": "tsc --emitDeclarationOnly --project tsconfig.build.json"
+    "lint": "eslint src --max-warnings 0",
+    "clear": "npx rimraf dist",
+    "build:dev": "NODE_ENV=dev node esbuild.js",
+    "build": "NODE_ENV=production node esbuild.js",
+    "postbuild": "npm run build:types",
+    "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"
   },
   "license": "MIT",
   "homepage": "https://www.ui-library.hbsng.com",
@@ -25,6 +44,17 @@
     "directory": "ui-library"
   },
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@vitest/coverage-v8": "^3.1.1",
+    "esbuild": "0.25.2",
+    "esbuild-sass-plugin": "^3.3.1",
+    "jsdom": "^26.1.0",
+    "tsc-alias": "^1.8.15",
+    "typescript-plugin-css-modules": "^5.1.0",
+    "vitest": "^3.1.1"
   }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-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/components/button/customButton.d.ts

@@ -1,24 +0,0 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-type HEXColor = `#${string}`;
-interface ICustomButton extends ComponentPropsWithoutRef<'button'> {
-    label: string;
-    disabled?: boolean;
-    small?: boolean;
-    theme?: HEXColor | 'success' | 'warning' | 'error';
-}
-/**
- * @example
- * ```jsx
- * <CustomButton
- *  label={'Click Me!'}
- *  disabled={false}
- *  small={true}
- *  theme={'success'}
- *  onClick={() => {ClickFunction()}}
- * />
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/button)
- */
-export declare function CustomButton(props: ICustomButton): React.JSX.Element;
-export {};

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

@@ -1,22 +0,0 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
-interface ICustomCheckbox extends ComponentPropsWithoutRef<'input'> {
-    checked: boolean;
-    toggleCheck: (value: boolean) => void;
-    checkColor?: string;
-    children?: ReactNode;
-    label?: string;
-}
-/**
- * @example
- * ```jsx
- * <CustomCheckbox
- *  checked={...}
- *  toggleCheck={...}
- *  label={"Check this checkbox"}
- * />
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/checkbox).
- */
-export declare function CustomCheckbox(props: ICustomCheckbox): React.JSX.Element;
-export {};

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

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

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

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

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

@@ -1,17 +0,0 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-interface ISvgIcon extends ComponentPropsWithoutRef<'svg'> {
-    src: string;
-    color?: string | undefined;
-    height?: number;
-    width?: number;
-}
-/**
- * @example
- * ```jsx
- * <SVG src={"foo/bar.png"} />
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/images).
- */
-export declare function SVG(props: ISvgIcon): React.JSX.Element;
-export {};

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

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

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import { IBaseInput } from './baseInput';
-export interface ICustomInput extends IBaseInput {
-    tooltipClose?: string;
-    tooltipIcon?: string;
-    tooltipText?: string;
-}
-/**
- * @example
- * ```jsx
- * <PasswordInput
- *  value={...}
- *  valueChanged={...}
- *  label={"..."}
- * />
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/input).
- */
-export declare function CustomInput(props: ICustomInput): React.JSX.Element;

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import { ICustomInput } from './customInput';
-interface IPasswordInput extends ICustomInput {
-    ruleChecked: string;
-    rules: PasswordRule[];
-    ruleUnchecked: string;
-    capsLockWarning?: string;
-    setFailedRules?: (value: PasswordRule[]) => void;
-}
-/**
- * Password rule
- * @example
- * ```js
- * const rule = {
- *  label: "minimum password length",
- *  count: 5
- *  type: "minLength"
- * }
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/passwordInput).
- */
-export interface PasswordRule {
-    label: string;
-    count?: number;
-    type?: 'minLength' | 'maxLength' | 'letters' | 'numbers' | 'special' | 'upper';
-    pattern?: string;
-}
-/**
- * @example
- * ```jsx
- * <PasswordInput
- *  ruleChecked={"/foo/bar.svg"}
- *  ruleUnchecked={"/foo/bar.svg"}
- *  rules={[...]}
- *  value={...}
- *  valueChanged={...}
- *  label={"..."}
- * />
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/passwordInput).
- */
-export declare function PasswordInput(props: IPasswordInput): React.JSX.Element;
-export {};

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

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

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

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

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

@@ -1,26 +0,0 @@
-import React from 'react';
-interface INotifyModal {
-    close: () => void;
-    closeLabel: string;
-    modalType: 'success' | 'warning' | 'error';
-    message: string | string[];
-    title: string;
-    callback?: (() => void) | undefined;
-    timeout?: number;
-}
-/**
- * @example
- * ```jsx
- * <NotifyModal
- *  close={...}
- *  closeLabel={"..."}
- *  modalType={"success"}
- *  title={"..."}
- *  message={"..."}
- * />
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/modal).
- */
-export declare function NotifyModal(props: INotifyModal): React.JSX.Element;
-export {};

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

@@ -1,26 +0,0 @@
-import React from 'react';
-interface IQuestionModal {
-    cancel: () => void;
-    cancelLabel: string;
-    confirm: () => void;
-    confirmLabel: string;
-    message: string | string[];
-    title: string;
-}
-/**
- * @example
- * ```jsx
- * <QuestionModal
- *  cancel={...}
- *  cancelLabel={"..."}
- *  confirm={...}
- *  confirmLabel={"..."}
- *  title={"..."}
- *  message={"..."}
- * />
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/questionModal).
- */
-export declare function QuestionModal(props: IQuestionModal): React.JSX.Element;
-export {};

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

@@ -1,41 +0,0 @@
-import React from 'react';
-interface ICustomRadio {
-    options: RadioOption[];
-    value: string;
-    valueChanged: (value: string) => void;
-    checkColor?: string;
-    disabled?: boolean;
-    label?: string;
-}
-/**
- * @example
- * ```js
- * const option = {
- *  label: "foo",
- *  value: "foo",
- * }
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/radio).
- */
-export interface RadioOption {
-    label: string;
-    value: string;
-    checked?: boolean;
-    disabled?: boolean;
-}
-/**
- * @example
- * ```jsx
- * <CustomRadio
- *  value={...}
- *  valueChanged={...}
- *  label={"..."}
- *  options={[...]}
- * />
- * ```
- *
- * For more information go to the [docs](https://www.ui-library.hbsng.com/docs/components/radio).
- */
-export declare function CustomRadio(props: ICustomRadio): React.JSX.Element;
-export {};

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

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

package/dist/hooks/clickOutside.d.ts

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

package/dist/hooks/contrastColor.d.ts

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