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

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

@@ -1,2 +1 @@
-export * from './clickOutside';
-export * from './getColor';
+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-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)}

package/dist/index.d.ts

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

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.8",
+  "version": "5.0.0",
   "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 --project 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,15 @@
     "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.0.0",
+    "vitest": "^3.1.1"
   }
 }

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

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