@ainias42/react-bootstrap-mobile 0.2.4 → 0.2.6

package/dist/src/Components/FormElements/CheckBox/Checkbox.d.ts

@@ -7,7 +7,8 @@ export type CheckboxProps<OnChangeData, OnChangeCheckedData> = RbmComponentProps
     label?: string;
     children?: string;
     isLabelBeforeCheckbox?: boolean;
+    error?: string;
 } & OptionalListener<'onChange', OnChangeData> & OptionalListener<'onChangeChecked', OnChangeCheckedData, boolean>>>;
-declare function Checkbox<OnChangeData, OnChangeCheckedData>({ children, label, isLabelBeforeCheckbox, id, className, style, ...props }: CheckboxProps<OnChangeData, OnChangeCheckedData>): React.JSX.Element;
+declare function Checkbox<OnChangeData, OnChangeCheckedData>({ children, label, isLabelBeforeCheckbox, id, className, error, style, ...props }: CheckboxProps<OnChangeData, OnChangeCheckedData>): React.JSX.Element;
 declare const tmp: typeof Checkbox;
 export { tmp as Checkbox };

package/dist/src/Components/FormElements/ColorInput/ColorInput.d.ts

@@ -12,7 +12,8 @@ export type ColorInputProps<OnChangeData> = {
     presetColors?: string[];
     sharedColorKey?: string;
     disabled?: boolean;
+    error?: string;
 } & OptionalListener<'onChange', OnChangeData>;
-declare function ColorInput<OnChangeData>({ defaultValue, value, label, onChangeColor, onChangeColorComplete, onOpen, onClose, disableAlpha, presetColors, sharedColorKey, disabled, ...otherProps }: ColorInputProps<OnChangeData>): React.JSX.Element;
+declare function ColorInput<OnChangeData>({ defaultValue, value, label, onChangeColor, onChangeColorComplete, onOpen, onClose, disableAlpha, presetColors, error, sharedColorKey, disabled, ...otherProps }: ColorInputProps<OnChangeData>): React.JSX.Element;
 declare const ColorInputMemo: typeof ColorInput;
 export { ColorInputMemo as ColorInput };

package/dist/src/Components/FormElements/Controller/ColorInputController.d.ts

@@ -0,0 +1,3 @@
+export declare const ColorInputController: import("../../../helper/withForwardRef").RefComponent<Omit<import("../ColorInput/ColorInput").ColorInputProps<unknown>, "value" | "ref" | "onBlur" | "name" | "onChangeColor"> & {
+    name: string;
+}, never>;

package/dist/src/Components/FormElements/Controller/FileInputController.d.ts

@@ -0,0 +1,8 @@
+import { FileInputProps } from "../Input/FileInput/FileInput";
+import React from "react";
+import { FieldPath, FieldValues } from "react-hook-form";
+type Props<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>> = Omit<FileInputProps<unknown>, 'name' | 'onBlur' | 'ref' | 'value' | "__allowChildren" | "children" | "onChangeFile" | "error"> & {
+    name: Name;
+};
+export declare const FileInputController: <Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>>({ name, ...otherProps }: Props<Values, Name>) => React.JSX.Element;
+export {};

package/dist/src/Components/FormElements/FormError.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export type FormErrorProps = {
+    error?: string;
+};
+export declare const FormError: ({ error }: FormErrorProps) => React.JSX.Element | null;

package/dist/src/Components/FormElements/Input/FileInput/FileInput.d.ts

@@ -6,7 +6,7 @@ import { FileType } from "./FileType";
 import { MultipleFileInputProps } from "./MultipleFileInput";
 export type FileInputProps<OnChangeFileData> = RbmComponentProps<Override<Omit<MultipleFileInputProps<unknown>, "onChangeFiles" | "maxFiles" | "onChangeFilesData" | "mimeTypes" | "showDeleteButton">, {
     value?: FileType;
-    mimeType?: string;
+    mimeType?: string | string[];
     required?: boolean;
     "data-test-id"?: string;
 } & Listener<'onChangeFile', OnChangeFileData, FileType | undefined>>>;

package/dist/src/Components/FormElements/Input/FileInput/FileType.d.ts

@@ -1,7 +1,7 @@
 export type FileType = {
     name: string;
-    data: string;
-    mimeType: string;
+    src: string;
+    type: string;
     uploaded?: boolean;
     blob?: Blob;
 };

package/dist/src/Components/FormElements/Switch/Switch.d.ts

@@ -9,5 +9,6 @@ export type SwitchProps<OnChangeCheckedData> = RbmComponentProps<Override<InputH
     children?: string;
     isLabelBeforeSwitch?: boolean;
     isDual?: boolean;
+    error?: string;
 } & OptionalListener<"onChangeChecked", OnChangeCheckedData, boolean>>>;
-export declare const Switch: <OnChangeCheckedData>({ children, label, preLabel, isLabelBeforeSwitch, isDual, id, className, style, onChange, ...props }: SwitchProps<OnChangeCheckedData>) => React.JSX.Element;
+export declare const Switch: <OnChangeCheckedData>({ children, label, preLabel, isLabelBeforeSwitch, isDual, id, className, style, error, onChange, ...props }: SwitchProps<OnChangeCheckedData>) => React.JSX.Element;

package/dist/src/Components/Hooks/useDelayedEffect.d.ts

@@ -0,0 +1 @@
+export declare function useDelayedEffect(effect: () => (() => void | void), dependencies: any[], delay?: number): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Mobile React Components using Bootstrap",
   "main": "dist/bootstrapReactMobile",
   "scripts": {

package/src/Components/Card/card.scss

@@ -51,7 +51,7 @@ $marginCard: 8px;
 
     .content {
       color: #000000;
-      color: rgba(0, 0, 0, 0.54);
+      color: var(--card-text-color, rgba(0, 0, 0, 0.54));
     }
 
     .title {
@@ -65,7 +65,7 @@ $marginCard: 8px;
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 12%);
 
     .content {
-      color: #030303;
+      color: var(--card-text-color, #030303);
     }
 
     .title {

package/src/Components/FormElements/CheckBox/Checkbox.tsx

@@ -6,6 +6,7 @@ import { withMemo } from '../../../helper/withMemo';
 import classNames from 'classnames';
 import { Override } from '@ainias42/js-helper';
 import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
+import { FormError } from "../FormError";
 
 export type CheckboxProps<OnChangeData, OnChangeCheckedData> = RbmComponentProps<
     Override<
@@ -14,6 +15,7 @@ export type CheckboxProps<OnChangeData, OnChangeCheckedData> = RbmComponentProps
             label?: string;
             children?: string;
             isLabelBeforeCheckbox?: boolean;
+            error?: string;
         } & OptionalListener<'onChange', OnChangeData> &
             OptionalListener<'onChangeChecked', OnChangeCheckedData, boolean>
     >
@@ -25,6 +27,7 @@ function Checkbox<OnChangeData, OnChangeCheckedData>({
     isLabelBeforeCheckbox = false,
     id,
     className,
+    error,
     style,
     ...props
 }: CheckboxProps<OnChangeData, OnChangeCheckedData>) {
@@ -80,6 +83,7 @@ function Checkbox<OnChangeData, OnChangeCheckedData>({
                 />
                 <span className={styles.checkmark} />
                 <span className={styles.label}>{label}</span>
+                <FormError error={error} />
             </label>
         </span>
     );

package/src/Components/FormElements/ColorInput/ColorInput.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import {useCallback, useRef, useState, MouseEvent} from 'react';
-import {Color, ColorChangeHandler, ColorResult, SketchPicker} from 'react-color';
-import {OptionalListener, useListener} from '../../Hooks/useListener';
-import {withMemo} from '../../../helper/withMemo';
-
+import { useCallback, useRef, useState, MouseEvent } from 'react';
+import { Color, ColorChangeHandler, ColorResult, SketchPicker } from 'react-color';
+import { OptionalListener, useListener } from '../../Hooks/useListener';
+import { withMemo } from '../../../helper/withMemo';
 import styles from './colorInput.scss';
-import {useSharedSelectedColor} from './sharedSelectedColor';
-import {Menu} from "../../Menu/Menu";
+import { useSharedSelectedColor } from './sharedSelectedColor';
+import { Menu } from "../../Menu/Menu";
 import { useClientLayoutEffect } from "../../Hooks/useClientLayoutEffect";
+import { FormError } from "../FormError";
 
 export type ColorInputProps<OnChangeData> = {
     defaultValue?: string;
@@ -21,6 +21,7 @@ export type ColorInputProps<OnChangeData> = {
     presetColors?: string[];
     sharedColorKey?: string;
     disabled?: boolean
+    error?: string;
 } & OptionalListener<'onChange', OnChangeData>;
 
 function convertToHex(color: { r: number; g: number; b: number; a?: number }, disableAlpha?: boolean) {
@@ -45,8 +46,9 @@ function ColorInput<OnChangeData>({
                                       onClose,
                                       disableAlpha,
                                       presetColors,
+                                      error,
                                       sharedColorKey = "default",
-    disabled,
+                                      disabled,
                                       ...otherProps
                                   }: ColorInputProps<OnChangeData>) {
     // Variables
@@ -101,7 +103,7 @@ function ColorInput<OnChangeData>({
 
     const openElement = useCallback(
         (e: MouseEvent) => {
-            if (disabled){
+            if (disabled) {
                 return;
             }
 
@@ -133,6 +135,7 @@ function ColorInput<OnChangeData>({
 
     // Render Functions
     return (
+        <>
         <span className={styles.colorInput}>
             <Menu x={position.x} y={position.y} isOpen={realIsOpen} onClose={onMenuClose}>
                         <SketchPicker
@@ -148,9 +151,11 @@ function ColorInput<OnChangeData>({
             </span>
             <span onClick={openElement} style={{backgroundColor: colVal}} className={styles.preview}/>
         </span>
+            <FormError error={error}/>
+        </>
     );
 }
 
 // Need ColorInputMemo for autocompletion of phpstorm
 const ColorInputMemo = withMemo(ColorInput, styles);
-export {ColorInputMemo as ColorInput};
+export { ColorInputMemo as ColorInput };

package/src/Components/FormElements/Controller/ColorInputController.ts

@@ -0,0 +1,4 @@
+import { withHookController } from "./withHookController";
+import { ColorInput } from "../ColorInput/ColorInput";
+
+export const ColorInputController = withHookController(ColorInput, "onChangeColor");

package/src/Components/FormElements/Controller/FileInputController.tsx

@@ -0,0 +1,42 @@
+import { FileInput, FileInputProps } from "../Input/FileInput/FileInput";
+import React, { useCallback } from "react";
+import { FieldPath, FieldValues, useController, useFormContext, useFormState } from "react-hook-form";
+import { FileType } from "../Input/FileInput/FileType";
+import { withMemo } from "../../../helper/withMemo";
+
+
+type Props<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>> = Omit<
+    FileInputProps<unknown>,
+    'name' | 'onBlur' | 'ref' | 'value' | "__allowChildren" | "children"|"onChangeFile"|"error"
+> & { name: Name };
+
+export const FileInputController = withMemo(function FileInputController<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>>(
+    {name, ...otherProps}: Props<Values, Name>,
+) {
+    const {field, fieldState} = useController({name});
+    const {errors} = useFormState();
+
+    const {clearErrors} = useFormContext();
+    const errorMessage = fieldState.error?.message ?? errors[`${name}.src`]?.message as string|undefined ?? errors[`${name}.name`]?.message as string|undefined ?? errors[`${name}.type`]?.message as string|undefined;
+
+    const internalOnChange = useCallback(
+        (arg: FileType | undefined) => {
+            clearErrors(name);
+            clearErrors(`${name}.name`);
+            clearErrors(`${name}.src`);
+            clearErrors(`${name}.type`);
+            field.onChange(arg);
+        },
+        [clearErrors, field, name]
+    );
+
+    return (
+        <FileInput
+            {...otherProps}
+            {...field}
+            onChangeFile={internalOnChange}
+            value={field.value}
+            error={errorMessage}
+        />
+    );
+});

package/src/Components/FormElements/Controller/MultipleFileInputController.ts

@@ -1,4 +1,5 @@
 import { MultipleFileInput } from "../Input/FileInput/MultipleFileInput";
 import { withHookController } from "./withHookController";
 
+// TODO Error handling(?)
 export const MultipleFileInputController = withHookController(MultipleFileInput, 'onChangeFiles');

package/src/Components/FormElements/Controller/withHookController.tsx

@@ -25,20 +25,22 @@ export function withHookController<C extends ComponentType<any>, OnChangeProp ex
 
         const internalOnChange = useCallback(
             (arg: any) => {
-                clearErrors(name);
-                field.onChange(arg);
+                    clearErrors(name);
+                    field.onChange(arg);
             },
             [clearErrors, field, name]
         );
         const onChangeProps = {
             [onChangeProp]: internalOnChange
-        }
+        };
 
         return (
             // @ts-expect-error Because of the prop spreading, typescript is really confused here
             <Comp
                 {...otherProps}
-                {...field}
+                name={field.name}
+                onBlur={field.onBlur}
+                disabled={field.disabled}
                 {...onChangeProps}
                 value={field.value ?? emptyValue}
                 checked={field.value ?? emptyValue}

package/src/Components/FormElements/FormError.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { withMemo } from "../../helper/withMemo";
+import styles from "./formError.scss";
+import { Text } from "../Text/Text";
+import { Block } from "../Layout/Block";
+
+export type FormErrorProps = {error?: string};
+
+export const FormError = withMemo(function FormError({error}: FormErrorProps) {
+    // Refs
+
+    // States/Variables/Selectors
+
+    // Dispatch
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // RenderFunctions
+
+	if (!error){
+		return null;
+	}
+
+	return <Block className={styles.error}><Text>{error}</Text></Block>
+}, styles);

package/src/Components/FormElements/Input/FileInput/FileInput.tsx

@@ -13,7 +13,7 @@ export type FileInputProps<OnChangeFileData> = RbmComponentProps<
     Override<
         Omit<MultipleFileInputProps<unknown>, "onChangeFiles" | "maxFiles" | "onChangeFilesData" | "mimeTypes" | "showDeleteButton">, {
         value?: FileType,
-        mimeType?: string,
+        mimeType?: string | string[],
         required?: boolean,
         "data-test-id"?: string;
     } & Listener<'onChangeFile', OnChangeFileData, FileType | undefined>>
@@ -30,7 +30,7 @@ export const FileInput = withMemo(function FileInput<OnChangeData>({
     // Refs
 
     // States
-    const mimeTypes = useMemo(() => (mimeType ? [mimeType] : undefined), [mimeType]);
+    const mimeTypes = useMemo(() => (mimeType ? (Array.isArray(mimeType) ? mimeType : [mimeType]) : undefined), [mimeType]);
     const innerValue = useMemo(() => value ? [value] : [], [value]);
 
     // Selectors
@@ -39,6 +39,7 @@ export const FileInput = withMemo(function FileInput<OnChangeData>({
     const [onChangeFile, multipleFileInputProps] = useListenerWithExtractedProps<"onChangeFile", OnChangeData>("onChangeFile", otherProps);
     const onChangeFiles = useCallback((files: FileType[]) => {
         if (!required || files[0]) {
+            console.log("LOG-d onChangeFile", files[0]);
             onChangeFile(files[0]);
         }
     }, [onChangeFile, required]);

package/src/Components/FormElements/Input/FileInput/FileType.ts

@@ -1 +1 @@
-export type FileType = { name: string; data: string; mimeType: string; uploaded?: boolean; blob?: Blob };
+export type FileType = { name: string; src: string; type: string; uploaded?: boolean; blob?: Blob };

package/src/Components/FormElements/Input/FileInput/MultipleFileInput.tsx

@@ -17,6 +17,7 @@ import { Clickable } from '../../../Clickable/Clickable';
 import { Inline } from '../../../Layout/Inline';
 import { FileType } from "./FileType";
 import { InlineBlock } from "../../../Layout/InlineBlock";
+import { FormError } from "../../FormError";
 
 
 export type MultipleFileInputProps<OnChangeFilesData> = RbmComponentProps<
@@ -64,7 +65,6 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
 
         // Callbacks
 
-
         const checkMimeType = useCallback(
             (fileType: string) => {
                 return mimeTypes.some((type) => {
@@ -116,8 +116,8 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                 const newUrls = await getBase64(newFiles);
                 const newValue = newFiles.map((file, fileIndex) => ({
                     name: file.name,
-                    data: newUrls[fileIndex],
-                    mimeType: file.type,
+                    src: newUrls[fileIndex],
+                    type: file.type,
                     blob: file,
                 }));
 
@@ -200,13 +200,13 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
 
         // Render Functions
         const renderFile = (file: FileType) => {
-            if (file.mimeType.startsWith('image/')) {
+            if (file.type.startsWith('image/')) {
                 return (
                     <Image
-                        key={file.data}
-                        src={file.data}
+                        key={file.src}
+                        src={file.src}
                         alt={file.name}
-                        className={classNames(styles.previewImage, file.data)}
+                        className={classNames(styles.previewImage)}
                     />
                 );
             }
@@ -218,6 +218,10 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
             );
         };
 
+        if (error){
+            console.log("LOG-d error inside MultipleFileInput:", error);
+        }
+
         return (
             <span
                 className={classNames(styles.fileInput, className)}
@@ -240,7 +244,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                 </Flex>
                 <Flex horizontal={true} className={styles.previewContainer}>
                     {value?.map((file, index) => {
-                        return <Grow className={styles.preview} center={true} key={file.data}>
+                        return <Grow className={styles.preview} center={true} key={file.src}>
                             <Clickable
                                 onDrop={onDrop}
                                 onDragOver={onDragOver}
@@ -282,7 +286,7 @@ export const MultipleFileInput = withMemo(function MultipleImageInput<OnChangeDa
                         </Clickable>
                     </Grow>
                 </Flex>
-                {error && <InlineBlock className={styles.error}><Text>{error}</Text></InlineBlock>}
+                <FormError error={error}/>
             </span>
         );
     },

package/src/Components/FormElements/Input/Input.tsx

@@ -11,15 +11,13 @@ import { RbmComponentProps } from '../../RbmComponentProps';
 import { Override } from '../../../TypeHelpers';
 import { OptionalListener, useListenerWithExtractedProps } from '../../Hooks/useListener';
 import { withForwardRef } from '../../../helper/withForwardRef';
-
 import styles from './input.scss';
 import classNames from 'classnames';
 import { useComposedRef } from '../../Hooks/useComposedRef';
 import { useOnChangeDone } from '../hooks/useOnChangeDone';
-import { InlineBlock } from "../../Layout/InlineBlock";
-import { Text } from "../../Text/Text";
 import { useSendFormContext } from "../Controller/SendFormContext";
 import { useDebounced } from "../../Hooks/useDebounced";
+import { FormError } from "../FormError";
 
 export type InputProps<OnChangeData, OnBlurData, OnChangeDoneData> = RbmComponentProps<
     Override<
@@ -196,7 +194,7 @@ export const Input = withForwardRef(function Input<OnChangeData, OnBlurData, OnC
                     onChange={onChange}
                     onKeyDown={realOnKeyDown}
                 />
-                {error && <InlineBlock className={styles.error}><Text>{error}</Text></InlineBlock>}
+                <FormError error={error}/>
             </label>
         );
     },

package/src/Components/FormElements/Input/input.scss

@@ -34,7 +34,7 @@
     font-size: 1rem;
 
     @include design($material) {
-      color: #212121;
+      color: var(--input-text-color, #212121);
       background-image: linear-gradient(to top, transparent 1px, #afafaf 1px);
       background-size: 100% 2px;
       background-repeat: no-repeat;
@@ -53,7 +53,7 @@
     }
 
     @include design($flat) {
-      color: #1f1f21;
+      color: var(--input-text-color, #1f1f21);
       &, &:focus {
         border-bottom: 1px solid var(--border-light);
       }

package/src/Components/FormElements/Switch/Switch.tsx

@@ -6,7 +6,8 @@ import classNames from 'classnames';
 
 import styles from './switch.scss';
 import { withMemo } from '../../../helper/withMemo';
-import {OptionalListener, useListenerWithExtractedProps} from "../../Hooks/useListener";
+import { OptionalListener, useListenerWithExtractedProps } from "../../Hooks/useListener";
+import { FormError } from "../FormError";
 
 export type SwitchProps<OnChangeCheckedData> = RbmComponentProps<
     Override<
@@ -17,67 +18,70 @@ export type SwitchProps<OnChangeCheckedData> = RbmComponentProps<
             children?: string;
             isLabelBeforeSwitch?: boolean;
             isDual?: boolean;
+            error?: string;
         } & OptionalListener<"onChangeChecked", OnChangeCheckedData, boolean>
     >
 >;
 
 export const Switch = withMemo(function Switch<OnChangeCheckedData>({
-    children,
-    label = '',
-    preLabel = '',
-    isLabelBeforeSwitch = false,
-    isDual = undefined,
-    id,
-    className,
-    style,
-    onChange,
-    ...props
-}: SwitchProps<OnChangeCheckedData>) {
-    // Variables
+                                                                        children,
+                                                                        label = '',
+                                                                        preLabel = '',
+                                                                        isLabelBeforeSwitch = false,
+                                                                        isDual = undefined,
+                                                                        id,
+                                                                        className,
+                                                                        style,
+                                                                        error,
+                                                                        onChange,
+                                                                        ...props
+                                                                    }: SwitchProps<OnChangeCheckedData>) {
+        // Variables
 
-    // States
+        // States
 
-    // Refs
+        // Refs
 
-    // Callbacks
-    const [onChangeChecked, otherProps] = useListenerWithExtractedProps("onChangeChecked", props);
+        // Callbacks
+        const [onChangeChecked, otherProps] = useListenerWithExtractedProps("onChangeChecked", props);
 
-    const realOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-        (e) => {
-            onChange?.(e);
-            onChangeChecked(e.target.checked);
-        },
-        [onChange, onChangeChecked]
-    );
+        const realOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+            (e) => {
+                onChange?.(e);
+                onChangeChecked(e.target.checked);
+            },
+            [onChange, onChangeChecked]
+        );
 
-    // Effects
+        // Effects
 
-    // Other
+        // Other
 
-    // Render Functions
+        // Render Functions
 
-    if (React.Children.count(children) === 1 && typeof children === 'string') {
-        label = children;
-    }
+        if (React.Children.count(children) === 1 && typeof children === 'string') {
+            label = children;
+        }
 
-    if (isLabelBeforeSwitch) {
-        [label, preLabel] = [preLabel, label];
-    }
+        if (isLabelBeforeSwitch) {
+            [label, preLabel] = [preLabel, label];
+        }
 
-    if (label && preLabel && isDual === undefined) {
-        isDual = true;
-    }
-    return (
-        <span className={classNames(styles.switch, { [styles.dual]: isDual }, className)} style={style}>
+        if (label && preLabel && isDual === undefined) {
+            isDual = true;
+        }
+        return (
+            <span className={classNames(styles.switch, {[styles.dual]: isDual}, className)} style={style}>
             <label htmlFor={id} key={id}>
                 <span className={styles.label}>{preLabel}</span>
-                <input {...otherProps} type="checkbox" id={id} onChange={realOnChange} />
+                <input {...otherProps} type="checkbox" id={id} onChange={realOnChange}/>
                 <div className={styles.toggle}>
-                    <span className={styles.handle} />
+                    <span className={styles.handle}/>
                 </div>
                 <span className={styles.label}>{label}</span>
+                <FormError error={error}/>
             </label>
         </span>
-    );
-},
-styles);
+        );
+    },
+    styles);

package/src/Components/FormElements/formError.scss

@@ -0,0 +1,4 @@
+.error {
+  font-size: 0.7rem;
+  --text-primary-default-color: var(--text-error)
+}

package/src/Components/Hooks/useDelayedEffect.ts

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+
+export function useDelayedEffect(effect: () => (() => void|void), dependencies: any[], delay = 100){
+    useEffect(() => {
+        let cleanup: (() => void|void) | undefined;
+        let timeout = setTimeout(() => {
+            cleanup = effect();
+        }, delay);
+        return () => {
+            clearTimeout(timeout);
+            cleanup?.()
+        };
+    }, dependencies);
+}