typescript-overlay-essentials 1.6.1 → 2.0.0

package/dist/ConfirmationBox.css

@@ -1,4 +1,4 @@
-.confirmation-overlay {
+.overlay-essentials-confirmation-overlay {
     position: fixed;
     top: 0;
     left: 0;
@@ -9,9 +9,11 @@
     align-items: center;
     justify-content: center;
     z-index: 10000;
+    white-space: pre-line;
+    word-break: break-word;
 }
 
-.confirmation-box {
+.overlay-essentials-confirmation-box {
     background-color: var(--Hellgrau, white);
     color: var(--HellSchwarz,#2c2c2c);
     padding: 2rem;
@@ -36,34 +38,42 @@
     }
 }
 
-.confirmation-box div {
+.overlay-essentials-confirmation-box div {
     margin-bottom: 0.5em;
 }
 
-.confirmation-box .headline {
+.overlay-essentials-confirmation-box .overlay-essentials-headline {
     margin-bottom: 0.75em;
 }
 
-.confirmation-box .confirmation-buttons {
+.overlay-essentials-confirmation-box .overlay-essentials-confirmation-buttons {
     display: flex;
     justify-content: center;
     gap: 1rem;
     margin-top: 1.5rem;
 }
 
-    .confirmation-box .confirmation-buttons button {
+    .overlay-essentials-confirmation-box .overlay-essentials-confirmation-buttons button {
         font-size: 85%;
         padding: 0.5rem 1.1rem;
     }
 
-.confirmation-box .closeButton {
+.overlay-essentials-confirmation-box .overlay-essentials-closeButton {
     right: 10px;
     top: 10px;
     position: absolute;
 }
 
-    .confirmation-box .close-icon:hover {
+    .overlay-essentials-confirmation-box .overlay-essentials-close-icon:hover {
         color: var(--HSDAkzent);
         cursor: pointer;
     }
 
+
+/* ==== Dark Mode Support ==== */
+[visual-theme="dark"] {
+    .overlay-essentials-confirmation-box {
+        background-color: var(--HellSchwarz,#2c2c2c);
+        color: white;
+    }
+}

package/dist/ConfirmationBox.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CSSProperties } from 'react';
+import { CSSProperties, Dispatch, SetStateAction } from 'react';
 import './ConfirmationBox.css';
 export interface ConfirmationBoxState {
     headline?: React.ReactNode;
@@ -20,5 +20,5 @@ export interface ConfirmationBoxState {
 export declare const defaultConfirmationState: ConfirmationBoxState;
 export declare function ConfirmationBox({ state, setState }: {
     state: ConfirmationBoxState;
-    setState: (state: ConfirmationBoxState) => void;
+    setState: Dispatch<SetStateAction<ConfirmationBoxState>>;
 }): React.ReactElement;

package/dist/ConfirmationBox.js

@@ -65,10 +65,10 @@ export function ConfirmationBox({ state, setState }) {
             tempState.handler(tempState.handlerArgs);
     };
     return showConfirm ?
-        _jsx("div", { className: "confirmation-overlay", children: _jsxs("div", { className: "confirmation-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "alertdialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? "confirmation-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? undefined : "Bestätigung", "aria-describedby": "confirmation-message", onKeyDown: (event) => {
+        _jsx("div", { className: "overlay-essentials-confirmation-overlay", children: _jsxs("div", { className: "overlay-essentials-confirmation-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "alertdialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? "confirmation-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? undefined : "Bestätigung", "aria-describedby": "confirmation-message", onKeyDown: (event) => {
                     if (event.key === "Escape")
                         handleAction(state.handlerCancel);
                 }, children: [state.addCloseButton ?
-                        _jsx("span", { className: "closeButton", children: _jsx("button", { type: "button", className: "close-icon", onClick: () => handleAction(undefined), "aria-label": "Dialog schlie\u00DFen", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }) }) :
-                        _jsx(_Fragment, {}), (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? _jsx("div", { className: "headline", id: "confirmation-headline", style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: _jsx("strong", { children: state === null || state === void 0 ? void 0 : state.headline }) }) : _jsx(_Fragment, {}), _jsx("div", { id: "confirmation-message", style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: (_b = (_a = state.message1) !== null && _a !== void 0 ? _a : state.message) !== null && _b !== void 0 ? _b : "" }), _jsx("div", { style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: _jsx("strong", { children: (_c = state.message2) !== null && _c !== void 0 ? _c : "" }) }), _jsxs("div", { className: "confirmation-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel), type: "button", className: "px-4 py-2 bg-gray-300 rounded", style: (state === null || state === void 0 ? void 0 : state.cancelButtonStyle) !== undefined ? state.cancelButtonStyle : {}, children: state.cancelButtonText ? state.cancelButtonText : "Abbrechen" }), _jsx("button", { onClick: () => handleAction(state.handlerOk), ref: confirmButtonRef, type: "button", className: "px-4 py-2 bg-blue-600 text-white rounded", style: (state === null || state === void 0 ? void 0 : state.proceedButtonStyle) !== undefined ? state.proceedButtonStyle : {}, children: state.proceedButtonText ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
+                        _jsx("span", { className: "overlay-essentials-closeButton", children: _jsx("button", { type: "button", className: "overlay-essentials-close-icon", onClick: () => handleAction(undefined), "aria-label": "Dialog schlie\u00DFen", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }) }) :
+                        _jsx(_Fragment, {}), (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? _jsx("div", { className: "overlay-essentials-headline", id: "overlay-essentials-confirmation-headline", children: _jsx("strong", { children: state === null || state === void 0 ? void 0 : state.headline }) }) : _jsx(_Fragment, {}), _jsx("div", { id: "overlay-essentials-confirmation-message", children: (_b = (_a = state.message1) !== null && _a !== void 0 ? _a : state.message) !== null && _b !== void 0 ? _b : "" }), _jsx("div", { children: _jsx("strong", { children: (_c = state.message2) !== null && _c !== void 0 ? _c : "" }) }), _jsxs("div", { className: "overlay-essentials-confirmation-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel), type: "button", className: "overlay-essentials-px-4 py-2 bg-gray-300 rounded", style: (state === null || state === void 0 ? void 0 : state.cancelButtonStyle) !== undefined ? state.cancelButtonStyle : {}, children: state.cancelButtonText ? state.cancelButtonText : "Abbrechen" }), _jsx("button", { onClick: () => handleAction(state.handlerOk), ref: confirmButtonRef, type: "button", className: "overlay-essentials-px-4 py-2 bg-blue-600 text-white rounded", style: (state === null || state === void 0 ? void 0 : state.proceedButtonStyle) !== undefined ? state.proceedButtonStyle : {}, children: state.proceedButtonText ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
 }

package/dist/Dropdown.css

@@ -1,4 +1,4 @@
-.custom-select {
+.overlay-essentials-custom-select {
     border-radius: 8px;
     border: 1px solid var(--Mittelgrau);
     color: black;
@@ -18,7 +18,7 @@
     width: 100%;
 }
 
-    .custom-select:hover, .dropdown__menu-list div:hover, .card .dropdown__menu-list div:hover {
+    .overlay-essentials-custom-select:hover, .dropdown__menu-list div:hover, .card .dropdown__menu-list div:hover {
         cursor: pointer;
     }
 
@@ -26,6 +26,6 @@
         color:  var(--FastSchwarz, black);
     }
 
-.custom-select .dropdown__single-value {
+.overlay-essentials-custom-select .dropdown__single-value {
     color: var(--FastSchwarz, black);
 }

package/dist/Dropdown.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import './Dropdown.css';
 export interface DropdownOption<T = string> {
     value: T;
-    label: string;
+    label: React.ReactNode;
     disabled?: boolean;
     indent?: number;
 }

package/dist/Dropdown.js

@@ -30,14 +30,20 @@ export function Dropdown({ selections, value, onChange, maxMenuHeight, menuPlace
         value = options.filter(opt => defaultValue.map(({ value }) => (value)).includes(opt.value)).map(opt => opt.value);
     }
     function usePrefersDarkMode() {
-        const [isDarkMode, setIsDarkMode] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches);
+        const [isDarkMode, setIsDarkMode] = useState(document.documentElement.getAttribute('visual-theme') === "dark");
         useEffect(() => {
-            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-            const handler = (event) => setIsDarkMode(event.matches);
-            // EventListener hinzufügen
-            mediaQuery.addEventListener('change', handler);
-            // Aufräumen
-            return () => mediaQuery.removeEventListener('change', handler);
+            // Handler, der ausgeführt wird, wenn sich das Attribut ändert
+            const checkTheme = () => {
+                const isDark = document.documentElement.getAttribute('visual-theme') === 'dark';
+                setIsDarkMode(isDark);
+            };
+            // Oberserver an den Handler koppeln (hört auf Änderungen an dem Attribut, falls sich das visual-theme ändert)
+            const observer = new MutationObserver(checkTheme);
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['visual-theme'] // Nur auf das Attribut reagieren
+            });
+            return () => observer.disconnect();
         }, []);
         return isDarkMode;
     }
@@ -46,7 +52,7 @@ export function Dropdown({ selections, value, onChange, maxMenuHeight, menuPlace
     function hasId(value) {
         return typeof value === "object" && value !== null && "id" in value;
     }
-    return isMulti || Array.isArray(defaultValue) ? (_jsx(Select, { className: "custom-select", isMulti: true, "aria-label": placeHolder !== null && placeHolder !== void 0 ? placeHolder : "Auswahl", placeholder: placeHolder !== null && placeHolder !== void 0 ? placeHolder : "", options: options, value: options.length > 0 && hasId(options[0].value) ? // Wenn die values der Optionen ids haben, handelt es sich um komplexe Objekte, die zur Auswahl stehen und müssen dahingehend verglichen werden
+    return isMulti || Array.isArray(defaultValue) ? (_jsx(Select, { className: "overlay-essentials-custom-select", isMulti: true, "aria-label": placeHolder !== null && placeHolder !== void 0 ? placeHolder : "Auswahl", placeholder: placeHolder !== null && placeHolder !== void 0 ? placeHolder : "", options: options, value: options.length > 0 && hasId(options[0].value) ? // Wenn die values der Optionen ids haben, handelt es sich um komplexe Objekte, die zur Auswahl stehen und müssen dahingehend verglichen werden
             options.filter(opt => (hasId(opt.value) && value.find(val => hasId(val) && hasId(opt.value) && val.id === opt.value.id))) // Dann alle Optionen, die in den values per id vorkommen
             : options.filter(opt => (value.includes(opt.value))) // Ansonsten einfach alle Optionen, die in den values vorkommen
         , onChange: (selectedOption) => { initializedRef.current = true; onChange(selectedOption.map((opt) => opt.value)); }, maxMenuHeight: maxMenuHeight !== null && maxMenuHeight !== void 0 ? maxMenuHeight : 280, menuPlacement: menuPlacement !== null && menuPlacement !== void 0 ? menuPlacement : "auto", menuPosition: "fixed", classNamePrefix: "dropdown", defaultValue: options.filter(opt => defaultValue.map(({ value }) => (value)).includes(opt.value)), formatOptionLabel: ({ label, indent }, { context }) => {

package/dist/InfoOverlay.css

@@ -1,4 +1,4 @@
-.information-overlay {
+.overlay-essentials-information-overlay {
     position: fixed;
     top: 0;
     left: 0;
@@ -9,9 +9,11 @@
     align-items: center;
     justify-content: center;
     z-index: 10000;
+    white-space: pre-line;
+    word-break: break-word;
 }
 
-.information-box {
+.overlay-essentials-information-box {
     background-color: var(--Hellgrau, white);
     color: var(--HellSchwarz,#2c2c2c);
     padding: 2rem;
@@ -25,7 +27,7 @@
     position: relative;
 }
 
-.information-box .headline {
+.overlay-essentials-information-box .overlay-essentials-headline {
     margin-bottom: 0.75em;
 }
 
@@ -41,25 +43,33 @@
     }
 }
 
-.information-box .information-buttons {
+.overlay-essentials-information-box .overlay-essentials-information-buttons {
     display: flex;
     justify-content: center;
     gap: 1rem;
     margin-top: 1.5rem;
 }
 
-.information-box .information-buttons button {
+.overlay-essentials-information-box .overlay-essentials-information-buttons button {
     font-size: 85%;
     padding: 0.5rem 1.1rem;
 }
 
-.information-box .closeButton {
+.overlay-essentials-information-box .overlay-essentials-closeButton {
     right: 10px;
     top: 10px;
     position: absolute;
 }
 
-    .information-box .close-icon:hover {
+    .overlay-essentials-information-box .overlay-essentials-close-icon:hover {
         color: var(--HSDAkzent);
         cursor: pointer;
-    }
+    }
+    
+/* ==== Dark Mode Support ==== */
+[visual-theme="dark"] {
+    .overlay-essentials-information-box {
+        background-color: var(--HellSchwarz,#2c2c2c);
+        color: #fff;
+    }
+}

package/dist/InfoOverlay.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, Dispatch, SetStateAction } from 'react';
 import * as React from 'react';
 import './InfoOverlay.css';
 export interface InfoOverlayState {
@@ -13,5 +13,5 @@ export interface InfoOverlayState {
 export declare const defaultInfoOverlayState: InfoOverlayState;
 export declare function InfoOverlay({ state, setState }: {
     state: InfoOverlayState;
-    setState: (state: InfoOverlayState) => void;
+    setState: Dispatch<SetStateAction<InfoOverlayState>>;
 }): React.ReactElement;

package/dist/InfoOverlay.js

@@ -40,18 +40,18 @@ export function InfoOverlay({ state, setState }) {
             tempState.handler(tempState.handlerArgs);
     };
     return showOverlay ?
-        _jsx("div", { className: "information-overlay", children: _jsxs("div", { className: "information-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "dialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? "information-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? undefined : "Information", "aria-describedby": "information-message", onKeyDown: (event) => { if (event.key === "Escape")
+        _jsx("div", { className: "overlay-essentials-information-overlay", children: _jsxs("div", { className: "overlay-essentials-information-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "dialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? "information-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? undefined : "Information", "aria-describedby": "information-message", onKeyDown: (event) => { if (event.key === "Escape")
                     handleAction(); }, children: [state.addCloseButton ?
-                        _jsx("span", { className: "closeButton", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", tabIndex: 0, className: "close-icon", onClick: () => setShowOverlay(false), onKeyDown: (e) => {
+                        _jsx("span", { className: "overlay-essentials-closeButton", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", tabIndex: 0, className: "overlay-essentials-close-icon", onClick: () => setShowOverlay(false), onKeyDown: (e) => {
                                     if (e.key === 'Enter' || e.key === ' ') {
                                         e.preventDefault(); // Verhindert Scroll bei Space
                                         setShowOverlay(false);
                                     }
                                 }, role: "button", "aria-label": "Dialog schlie\u00DFen", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }) :
-                        _jsx(_Fragment, {}), _jsx("div", { className: "headline", id: "information-headline", style: { whiteSpace: "pre-line" }, children: _jsx("strong", { children: (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? state.headline : "" }) }), _jsx("div", { id: "information-message", style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: (state === null || state === void 0 ? void 0 : state.message) !== undefined ? state.message : "" }), _jsx("div", { className: "information-buttons", children: _jsx("button", { type: "button", autoFocus: true, onClick: () => handleAction(), onKeyDown: (e) => {
+                        _jsx(_Fragment, {}), _jsx("div", { className: "overlay-essentials-headline", id: "overlay-essentials-information-headline", children: _jsx("strong", { children: (state === null || state === void 0 ? void 0 : state.headline) !== undefined ? state.headline : "" }) }), _jsx("div", { id: "overlay-essentials-information-message", children: (state === null || state === void 0 ? void 0 : state.message) !== undefined ? state.message : "" }), _jsx("div", { className: "overlay-essentials-information-buttons", children: _jsx("button", { type: "button", autoFocus: true, onClick: () => handleAction(), onKeyDown: (e) => {
                                 if (e.key === 'Enter' || e.key === ' ') {
                                     e.preventDefault(); // Verhindert Scroll bei Space
                                     handleAction();
                                 }
-                            }, className: "px-4 py-2 bg-blue-600 text-white rounded", id: "infoButton", children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) !== undefined ? state.proceedButtonText : "OK" }) })] }) }) : _jsx(_Fragment, {});
+                            }, className: "overlay-essentials-px-4 py-2 bg-blue-600 text-white rounded", id: "overlay-essentials-infoButton", children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) !== undefined ? state.proceedButtonText : "OK" }) })] }) }) : _jsx(_Fragment, {});
 }

package/dist/InfoOverlayWithInput.css

@@ -1,4 +1,4 @@
-.information-overlay-with-input {
+.overlay-essentials-information-overlay-with-input {
     position: fixed;
     top: 0;
     left: 0;
@@ -9,9 +9,11 @@
     align-items: center;
     justify-content: center;
     z-index: 10000;
+    white-space: pre-line;
+    word-break: break-word;
 }
 
-.information-box-with-input {
+.overlay-essentials-information-box-with-input {
     background-color: var(--Hellgrau, white);
     color: var(--HellSchwarz,#2c2c2c);
     padding: 2rem;
@@ -37,19 +39,19 @@
     }
 }
 
-.information-box-with-input .information-buttons {
+.overlay-essentials-information-box-with-input .overlay-essentials-information-buttons {
     display: flex;
     justify-content: center;
     gap: 1rem;
     margin-top: 1.5rem;
 }
 
-    .information-box-with-input .information-buttons button {
+    .overlay-essentials-information-box-with-input .overlay-essentials-information-buttons button {
         font-size: 85%;
         padding: 0.5rem 1.1rem;
     }
 
-.information-box-with-input input[type="text"] {
+.overlay-essentials-information-box-with-input input[type="text"] {
     margin-top: 15px;
     padding: 0.75rem 1rem;
     font-size: 1em;
@@ -58,31 +60,56 @@
     box-shadow: inset 0 0 0 1px #ccc;
 }
 
-.information-box-with-input .headline {
+.overlay-essentials-information-box-with-input .overlay-essentials-headline {
     margin-bottom: 0.75em;
 }
 
 /* ==== Dark Mode Support ==== */
-@media (prefers-color-scheme: dark) {
-    .information-box-with-input {
+[visual-theme="dark"] {
+    .overlay-essentials-information-box-with-input {
         background-color: var(--HellSchwarz,#2c2c2c);
         color: #fff;
     }
 
-    .information-box-with-input input[type="text"] {
+    .overlay-essentials-information-box-with-input input[type="text"] {
         background-color: var(--HellSchwarz, #2c2c2c);
         color: var(--FastWeiß, white);
         box-shadow: inset 0 0 0 1px #444;
     }
 }
 
-.information-box-with-input .closeButton {
+.overlay-essentials-information-box-with-input .overlay-essentials-closeButton {
     right: 10px;
     top: 10px;
     position: absolute;
 }
 
-    .information-box-with-input .close-icon:hover {
+    .overlay-essentials-information-box-with-input .overlay-essentials-close-icon:hover {
         color: var(--HSDAkzent);
         cursor: pointer;
-    }
+    }
+
+.overlay-essentials-information-box-with-input .overlay-essentials-closeButton {
+    right: 10px;
+    top: 10px;
+    position: absolute;
+}
+
+    .overlay-essentials-information-box-with-input .overlay-essentials-close-icon:hover {
+        color: var(--HSDAkzent);
+        cursor: pointer;
+    }
+
+/* ==== Dark Mode Support ==== */
+[visual-theme="dark"] {
+    .overlay-essentials-information-box-with-input {
+        background-color: var(--HellSchwarz,#2c2c2c);
+        color: #fff;
+    }
+
+    .overlay-essentials-information-box-with-input input[type="text"] {
+        background-color: var(--HellSchwarz, #2c2c2c);
+        color: var(--FastWeiß, white);
+        box-shadow: inset 0 0 0 1px #444;
+    }
+}

package/dist/InfoOverlayWithInput.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, Dispatch, SetStateAction } from 'react';
 import * as React from 'react';
 import './InfoOverlayWithInput.css';
 export interface InfoOverlayWithInputState {
@@ -19,5 +19,5 @@ export interface InfoOverlayWithInputState {
 export declare const defaultInfoOverlayWithInputState: InfoOverlayWithInputState;
 export declare function InfoOverlayWithInput({ state, setState }: {
     state: InfoOverlayWithInputState;
-    setState: (state: InfoOverlayWithInputState) => void;
+    setState: Dispatch<SetStateAction<InfoOverlayWithInputState>>;
 }): React.ReactElement;

package/dist/InfoOverlayWithInput.js

@@ -69,18 +69,18 @@ export function InfoOverlayWithInput({ state, setState }) {
             tempState.handler(tempState.handlerArgs);
     };
     return showOverlay ?
-        _jsx("div", { className: "information-overlay-with-input", children: _jsxs("div", { className: "information-box-with-input", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "dialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) != null ? "information-input-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) != null ? undefined : "Information", "aria-describedby": "information-input-message", onKeyDown: (event) => { if (event.key === "Escape")
+        _jsx("div", { className: "overlay-essentials-information-overlay-with-input", children: _jsxs("div", { className: "overlay-essentials-information-box-with-input", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, role: "dialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.headline) != null ? "information-input-headline" : undefined, "aria-label": (state === null || state === void 0 ? void 0 : state.headline) != null ? undefined : "Information", "aria-describedby": "information-input-message", onKeyDown: (event) => { if (event.key === "Escape")
                     handleAction(state.handlerCancel, false); }, children: [state.addCloseButton ?
-                        _jsx("span", { className: "closeButton", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", tabIndex: 0, className: "close-icon", onClick: () => handleAction(undefined, false), onKeyDown: (e) => {
+                        _jsx("span", { className: "overlay-essentials-closeButton", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", tabIndex: 0, className: "overlay-essentials-close-icon", onClick: () => handleAction(undefined, false), onKeyDown: (e) => {
                                     if (e.key === 'Enter' || e.key === ' ') {
                                         e.preventDefault(); // Verhindert Scroll bei Space
                                         handleAction(undefined, false);
                                     }
                                 }, role: "button", "aria-label": "Dialog schlie\u00DFen", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }) :
-                        _jsx(_Fragment, {}), _jsx("div", { className: "headline", id: "information-input-headline", style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: _jsx("strong", { children: (state === null || state === void 0 ? void 0 : state.headline) != null ? state.headline : "" }) }), _jsx("div", { id: "information-input-message", style: { whiteSpace: "pre-line", wordBreak: "break-word" }, children: (state === null || state === void 0 ? void 0 : state.message) != null ? state.message : "" }), _jsx("div", { className: "information-input", children: _jsx("input", { id: "information-inputfield", "aria-label": (state === null || state === void 0 ? void 0 : state.placeholder) != null ? state.placeholder : "Eingabe", autoFocus: true, placeholder: (state === null || state === void 0 ? void 0 : state.placeholder) != null ? state.placeholder : "", pattern: "^[A-Za-z0-9_-~]+$", required: true, type: "text", className: "form-control", value: input, onChange: handleInputChange, onKeyDown: handleInputKeyDown }) }), _jsxs("div", { className: "information-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel, false), className: "px-4 py-2 bg-gray-300 rounded", style: (state === null || state === void 0 ? void 0 : state.cancelButtonStyle) != null ? state.cancelButtonStyle : {}, tabIndex: 0, onKeyDown: (e) => {
+                        _jsx(_Fragment, {}), _jsx("div", { className: "overlay-essentials-headline", id: "overlay-essentials-information-input-headline", children: _jsx("strong", { children: (state === null || state === void 0 ? void 0 : state.headline) != null ? state.headline : "" }) }), _jsx("div", { id: "overlay-essentials-information-input-message", children: (state === null || state === void 0 ? void 0 : state.message) != null ? state.message : "" }), _jsx("div", { className: "overlay-essentials-information-input", children: _jsx("input", { id: "overlay-essentials-information-inputfield", "aria-label": (state === null || state === void 0 ? void 0 : state.placeholder) != null ? state.placeholder : "Eingabe", autoFocus: true, placeholder: (state === null || state === void 0 ? void 0 : state.placeholder) != null ? state.placeholder : "", pattern: "^[A-Za-z0-9_-~]+$", required: true, type: "text", className: "overlay-essentials-form-control", value: input, onChange: handleInputChange, onKeyDown: handleInputKeyDown }) }), _jsxs("div", { className: "overlay-essentials-information-buttons", children: [_jsx("button", { onClick: () => handleAction(state.handlerCancel, false), className: "overlay-essentials-px-4 py-2 bg-gray-300 rounded", style: (state === null || state === void 0 ? void 0 : state.cancelButtonStyle) != null ? state.cancelButtonStyle : {}, tabIndex: 0, onKeyDown: (e) => {
                                     if (e.key === 'Enter' || e.key === ' ') {
                                         e.preventDefault(); // Verhindert Scroll bei Space
                                         handleAction(state.handlerCancel, false);
                                     }
-                                }, children: (state === null || state === void 0 ? void 0 : state.cancelButtonText) != null ? state.cancelButtonText : "Abbrechen" }), _jsx("button", { onClick: () => handleAction(state.handlerOk, true), className: "px-4 py-2 bg-blue-600 text-white rounded", style: (state === null || state === void 0 ? void 0 : state.proceedButtonStyle) != null ? state.proceedButtonStyle : {}, tabIndex: 0, children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) != null ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
+                                }, children: (state === null || state === void 0 ? void 0 : state.cancelButtonText) != null ? state.cancelButtonText : "Abbrechen" }), _jsx("button", { onClick: () => handleAction(state.handlerOk, true), className: "overlay-essentials-px-4 py-2 bg-blue-600 text-white rounded", style: (state === null || state === void 0 ? void 0 : state.proceedButtonStyle) != null ? state.proceedButtonStyle : {}, tabIndex: 0, children: (state === null || state === void 0 ? void 0 : state.proceedButtonText) != null ? state.proceedButtonText : "OK" })] })] }) }) : _jsx(_Fragment, {});
 }

package/dist/LoadingOverlay.css

@@ -1,4 +1,4 @@
-.loading-overlay {
+.overlay-essentials-loading-overlay {
     position: fixed;
     top: 0;
     left: 0;
@@ -12,7 +12,7 @@
     backdrop-filter: blur(2px);
 }
 
-.loading-box {
+.overlay-essentials-loading-box {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -20,7 +20,7 @@
 }
 
 /* Spinner (Standardfarbe für Dark Mode) */
-.loading-box .spinner {
+.overlay-essentials-loading-box .overlay-essentials-spinner {
     width: 60px;
     height: 60px;
     /*border: 8px solid var(--HellSchwarz, #555);*/
@@ -35,25 +35,25 @@
         transform 0.3s ease;
 }
 
-.loading-box .spinner.is-success,
-.loading-box .spinner.is-error {
+.overlay-essentials-loading-box .overlay-essentials-spinner.overlay-essentials-is-success,
+.overlay-essentials-loading-box .overlay-essentials-spinner.overlay-essentials-is-error {
     animation: none;
     border-color: transparent;
 }
 
-.loading-box .spinner::before,
-.loading-box .spinner::after {
+.overlay-essentials-loading-box .overlay-essentials-spinner::before,
+.overlay-essentials-loading-box .overlay-essentials-spinner::after {
     content: "";
     position: absolute;
     opacity: 0;
     transition: opacity 0.3s ease;
 }
 
-.loading-box .spinner.is-success {
+.overlay-essentials-loading-box .overlay-essentials-spinner.overlay-essentials-is-success {
     background-color: var(--success-bg, #4caf50);
 }
 
-.loading-box .spinner.is-success::before {
+.overlay-essentials-loading-box .overlay-essentials-spinner.overlay-essentials-is-success::before {
     width: 12px;
     height: 24px;
     border-right: 6px solid white;
@@ -64,12 +64,12 @@
     opacity: 1;
 }
 
-.loading-box .spinner.is-error {
+.overlay-essentials-loading-box .overlay-essentials-spinner.overlay-essentials-is-error {
     background-color: var(--error-bg, #e60028);
 }
 
-.loading-box .spinner.is-error::before,
-.loading-box .spinner.is-error::after {
+.overlay-essentials-loading-box .overlay-essentials-spinner.overlay-essentials-is-error::before,
+.overlay-essentials-loading-box .overlay-essentials-spinner.overlay-essentials-is-error::after {
     width: 36px;
     height: 6px;
     background: white;
@@ -78,15 +78,15 @@
     opacity: 1;
 }
 
-.loading-box .spinner.is-error::before {
+.overlay-essentials-loading-box .overlay-essentials-spinner.overlay-essentials-is-error::before {
     transform: rotate(45deg);
 }
 
-.loading-box .spinner.is-error::after {
+.overlay-essentials-loading-box .overlay-essentials-spinner.overlay-essentials-is-error::after {
     transform: rotate(-45deg);
 }
 
-.loading-box .loading-message {
+.overlay-essentials-loading-box .overlay-essentials-loading-message {
     font-size: 1.1em;
     font-weight: bold;
     text-align: center;

package/dist/LoadingOverlay.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, CSSProperties } from 'react';
+import { ReactElement, CSSProperties, Dispatch, SetStateAction } from 'react';
 import * as React from 'react';
 import './LoadingOverlay.css';
 export interface LoadingOverlayState {
@@ -11,5 +11,5 @@ export interface LoadingOverlayState {
 export declare const defaultLoadingOverlayState: LoadingOverlayState;
 export declare function LoadingOverlay({ state, setState }: {
     state: LoadingOverlayState;
-    setState: (state: LoadingOverlayState) => void;
+    setState: Dispatch<SetStateAction<LoadingOverlayState>>;
 }): ReactElement;

package/dist/LoadingOverlay.js

@@ -30,7 +30,7 @@ export function LoadingOverlay({ state, setState }) {
             setShowOverlay(false);
         }
     }, [state, setState]);
-    return showOverlay ? (_jsx("div", { className: "loading-overlay", role: "status", "aria-live": "polite", "aria-atomic": "true", "aria-busy": (_a = state === null || state === void 0 ? void 0 : state.isActive) !== null && _a !== void 0 ? _a : false, children: _jsxs("div", { className: "loading-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, children: [_jsx("div", { className: "spinner " + (state.showSuccess === undefined ? "is-loading" : (state.showSuccess ? "is-success" : "is-error")), style: {
+    return showOverlay ? (_jsx("div", { className: "overlay-essentials-loading-overlay", role: "status", "aria-live": "polite", "aria-atomic": "true", "aria-busy": (_a = state === null || state === void 0 ? void 0 : state.isActive) !== null && _a !== void 0 ? _a : false, children: _jsxs("div", { className: "overlay-essentials-loading-box", style: (state === null || state === void 0 ? void 0 : state.style) !== undefined ? state.style : {}, children: [_jsx("div", { className: "overlay-essentials-spinner " + (state.showSuccess === undefined ? "overlay-essentials-is-loading" : (state.showSuccess ? "overlay-essentials-is-success" : "overlay-essentials-is-error")), style: {
                         "--spinner-color": (_b = state.color) !== null && _b !== void 0 ? _b : "#e60028",
                         "--success-bg": (_c = state.color) !== null && _c !== void 0 ? _c : "#42ab34",
                         "--error-bg": (_d = state.color) !== null && _d !== void 0 ? _d : "#e60028",