@helpwave/hightide 0.0.13 → 0.0.16

package/dist/components/modals/Modal.js

@@ -1,57 +1,286 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { X } from 'lucide-react';
-import clsx from 'clsx';
-import { useTranslation } from '../../hooks/useTranslation';
-import { Tooltip } from '../Tooltip';
-import { ModalContext } from './ModalRegister';
-const defaultModalHeaderTranslation = {
-    en: {
-        close: 'Close'
-    },
-    de: {
-        close: 'Schließen'
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/modals/Modal.tsx
+var Modal_exports = {};
+__export(Modal_exports, {
+  Modal: () => Modal,
+  ModalHeader: () => ModalHeader,
+  modalRootName: () => modalRootName
+});
+module.exports = __toCommonJS(Modal_exports);
+var import_react5 = require("react");
+var import_react_dom = __toESM(require("react-dom"));
+var import_lucide_react = require("lucide-react");
+var import_clsx2 = __toESM(require("clsx"));
+
+// src/hooks/useLanguage.tsx
+var import_react2 = require("react");
+
+// src/hooks/useLocalStorage.tsx
+var import_react = require("react");
+
+// src/hooks/useLanguage.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_LANGUAGE = "en";
+var LanguageContext = (0, import_react2.createContext)({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
+var useLanguage = () => (0, import_react2.useContext)(LanguageContext);
+
+// src/hooks/useTranslation.ts
+var useTranslation = (defaults, translationOverwrite = {}) => {
+  const { language: languageProp, translation: overwrite } = translationOverwrite;
+  const { language: inferredLanguage } = useLanguage();
+  const usedLanguage = languageProp ?? inferredLanguage;
+  let defaultValues = defaults[usedLanguage];
+  if (overwrite && overwrite[usedLanguage]) {
+    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
+  }
+  return defaultValues;
+};
+
+// src/hooks/useHoverState.ts
+var import_react3 = require("react");
+var defaultUseHoverStateProps = {
+  closingDelay: 200,
+  isDisabled: false
+};
+var useHoverState = (props = void 0) => {
+  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
+  const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
+  const [timer, setTimer] = (0, import_react3.useState)();
+  const onMouseEnter = () => {
+    if (isDisabled) {
+      return;
+    }
+    clearTimeout(timer);
+    setIsHovered(true);
+  };
+  const onMouseLeave = () => {
+    if (isDisabled) {
+      return;
+    }
+    setTimer(setTimeout(() => {
+      setIsHovered(false);
+    }, closingDelay));
+  };
+  (0, import_react3.useEffect)(() => {
+    if (timer) {
+      return () => {
+        clearTimeout(timer);
+      };
     }
+  });
+  (0, import_react3.useEffect)(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }, [isDisabled]);
+  return {
+    isHovered,
+    setIsHovered,
+    handlers: { onMouseEnter, onMouseLeave }
+  };
+};
+
+// src/components/Tooltip.tsx
+var import_clsx = require("clsx");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Tooltip = ({
+  tooltip,
+  children,
+  animationDelay = 650,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  zIndex = 10
+}) => {
+  const { isHovered, handlers } = useHoverState();
+  const positionClasses = {
+    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
+    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
+    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
+    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
+  };
+  const triangleSize = 6;
+  const triangleClasses = {
+    top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,
+    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,
+    left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,
+    right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`
+  };
+  const triangleStyle = {
+    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
+    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
+    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
+    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx.clsx)("relative inline-block", containerClassName),
+      ...handlers,
+      children: [
+        children,
+        isHovered && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "div",
+          {
+            className: (0, import_clsx.clsx)(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600
+           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName),
+            style: { zIndex, animationDelay: animationDelay + "ms" },
+            children: [
+              tooltip,
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  className: (0, import_clsx.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
+                  style: { ...triangleStyle[position], zIndex }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
-/**
- * A default Header to be used by modals to have a uniform design
- */
-export const ModalHeader = ({ overwriteTranslation, onCloseClick, title, titleText = '', description, descriptionText = '' }) => {
-    const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation);
-    return (_jsxs("div", { className: "col", children: [_jsxs("div", { className: "row justify-between items-start gap-x-8", children: [title !== null && title !== void 0 ? title : (_jsx("span", { className: clsx('textstyle-title-lg', {
-                            'mb-1': description || descriptionText,
-                        }), children: titleText })), !!onCloseClick && (_jsx(Tooltip, { tooltip: translation.close, children: _jsx("button", { className: "row bg-gray-200 hover:bg-gray-300 rounded-md p-1", onClick: onCloseClick, children: _jsx(X, {}) }) }))] }), description !== null && description !== void 0 ? description : (_jsx("span", { className: "textstyle-description", children: descriptionText }))] }));
-};
-export const modalRootName = 'modal-root';
-/**
- * A Generic Modal Window
- *
- * The state needs to be managed by the parent of this component
- *
- * DO NOT Conditionally render this always use the isOpen to ensure that the ModalRegister is working properly
- */
-export const Modal = ({ children, id, isOpen, onBackgroundClick, backgroundClassName = '', modalClassName = '', containerClassName = '', ...modalHeaderProps }) => {
-    const modalRoot = typeof window !== 'undefined' ? document.getElementById(modalRootName) : null;
-    const { register, addToRegister, removeFromRegister } = useContext(ModalContext);
-    if (!id) {
-        console.error('the id cannot be empty');
+
+// src/components/modals/ModalRegister.tsx
+var import_react4 = require("react");
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/modals/ModalRegister.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ModalContext = (0, import_react4.createContext)({
+  register: [],
+  addToRegister: noop,
+  removeFromRegister: noop
+});
+
+// src/components/modals/Modal.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var defaultModalHeaderTranslation = {
+  en: {
+    close: "Close"
+  },
+  de: {
+    close: "Schlie\xDFen"
+  }
+};
+var ModalHeader = ({
+  overwriteTranslation,
+  onCloseClick,
+  title,
+  titleText = "",
+  description,
+  descriptionText = ""
+}) => {
+  const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "row justify-between items-start gap-x-8", children: [
+      title ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: (0, import_clsx2.default)("textstyle-title-lg", {
+        "mb-1": description || descriptionText
+      }), children: titleText }),
+      !!onCloseClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Tooltip, { tooltip: translation.close, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { className: "row bg-gray-200 hover:bg-gray-300 rounded-md p-1", onClick: onCloseClick, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.X, {}) }) })
+    ] }),
+    description ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "textstyle-description", children: descriptionText })
+  ] });
+};
+var modalRootName = "modal-root";
+var Modal = ({
+  children,
+  id,
+  isOpen,
+  onBackgroundClick,
+  backgroundClassName = "",
+  modalClassName = "",
+  containerClassName = "",
+  ...modalHeaderProps
+}) => {
+  const modalRoot = typeof window !== "undefined" ? document.getElementById(modalRootName) : null;
+  const {
+    register,
+    addToRegister,
+    removeFromRegister
+  } = (0, import_react5.useContext)(ModalContext);
+  if (!id) {
+    console.error("the id cannot be empty");
+  }
+  (0, import_react5.useEffect)(() => {
+    if (isOpen) {
+      addToRegister(id);
+    } else {
+      removeFromRegister(id);
     }
-    useEffect(() => {
-        if (isOpen) {
-            addToRegister(id);
+  }, [addToRegister, id, removeFromRegister, isOpen]);
+  if (modalRoot === null || !isOpen) return null;
+  const isLast = register.length < 1 || register[register.length - 1] === id;
+  const isSecondLast = register.length < 2 || register[register.length - 2] === id;
+  return import_react_dom.default.createPortal(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx2.default)("fixed inset-0 overflow-y-auto z-[99]", containerClassName), id, children: [
+      isLast && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          className: (0, import_clsx2.default)("fixed inset-0 h-screen w-screen", backgroundClassName, {
+            "bg-black/70": isLast && register.length === 1
+          }),
+          onClick: onBackgroundClick
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          className: (0, import_clsx2.default)("fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-white text-black rounded-xl shadow-xl", modalClassName),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ModalHeader, { ...modalHeaderProps }),
+            children
+          ]
         }
-        else {
-            removeFromRegister(id);
+      ),
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          className: (0, import_clsx2.default)("fixed inset-0 h-screen w-screen", backgroundClassName, {
+            "bg-black/70": isSecondLast && register.length > 1
+          })
         }
-    }, [addToRegister, id, removeFromRegister, isOpen]);
-    if (modalRoot === null || !isOpen)
-        return null;
-    const isLast = register.length < 1 || register[register.length - 1] === id;
-    const isSecondLast = register.length < 2 || register[register.length - 2] === id;
-    return ReactDOM.createPortal(_jsxs("div", { className: clsx('fixed inset-0 overflow-y-auto z-[99]', containerClassName), id: id, children: [isLast && (_jsx("div", { className: clsx('fixed inset-0 h-screen w-screen', backgroundClassName, {
-                    'bg-black/70': isLast && register.length === 1,
-                }), onClick: onBackgroundClick })), _jsxs("div", { className: clsx('fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-white text-black rounded-xl shadow-xl', modalClassName), children: [_jsx(ModalHeader, { ...modalHeaderProps }), children] }), !isLast && (_jsx("div", { className: clsx('fixed inset-0 h-screen w-screen', backgroundClassName, {
-                    'bg-black/70': isSecondLast && register.length > 1,
-                }) }))] }), modalRoot, id);
+      )
+    ] }),
+    modalRoot,
+    id
+  );
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Modal,
+  ModalHeader,
+  modalRootName
+});
+//# sourceMappingURL=Modal.js.map

package/dist/components/modals/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/modals/Modal.tsx","../../../src/hooks/useLanguage.tsx","../../../src/hooks/useLocalStorage.tsx","../../../src/hooks/useTranslation.ts","../../../src/hooks/useHoverState.ts","../../../src/components/Tooltip.tsx","../../../src/components/modals/ModalRegister.tsx","../../../src/util/noop.ts"],"sourcesContent":["import { useContext, useEffect, type MouseEventHandler, type PropsWithChildren, type ReactNode } from 'react'\nimport ReactDOM from 'react-dom'\nimport { X } from 'lucide-react'\nimport clsx from 'clsx'\nimport type { Languages } from '../../hooks/useLanguage'\nimport type { PropsForTranslation } from '../../hooks/useTranslation'\nimport { useTranslation } from '../../hooks/useTranslation'\nimport { Tooltip } from '../Tooltip'\nimport { ModalContext } from './ModalRegister'\n\ntype ModalHeaderTranslation = {\n  close: string,\n}\n\nconst defaultModalHeaderTranslation: Record<Languages, ModalHeaderTranslation> = {\n  en: {\n    close: 'Close'\n  },\n  de: {\n    close: 'Schließen'\n  }\n}\n\nexport type ModalHeaderProps = {\n  onCloseClick?: () => void,\n  /** The title of the Modal. If you want to only set the text use `titleText` instead */\n  title?: ReactNode,\n  /** The title text of the Modal. If you want to set a custom title use `title` instead */\n  titleText?: string,\n  /** The description of the Modal. If you want to only set the text use `descriptionText` instead */\n  description?: ReactNode,\n  /** The description text of the Modal. If you want to set a custom description use `description` instead */\n  descriptionText?: string,\n}\n\n/**\n * A default Header to be used by modals to have a uniform design\n */\nexport const ModalHeader = ({\n                              overwriteTranslation,\n                              onCloseClick,\n                              title,\n                              titleText = '',\n                              description,\n                              descriptionText = ''\n                            }: PropsForTranslation<ModalHeaderTranslation, ModalHeaderProps>) => {\n  const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation)\n  return (\n    <div className=\"col\">\n      <div className=\"row justify-between items-start gap-x-8\">\n        {title ?? (\n          <span className={clsx('textstyle-title-lg', {\n            'mb-1': description || descriptionText,\n          })}>\n            {titleText}\n          </span>\n        )}\n        {!!onCloseClick && (\n          <Tooltip tooltip={translation.close}>\n            <button className=\"row bg-gray-200 hover:bg-gray-300 rounded-md p-1\" onClick={onCloseClick}>\n              <X/>\n            </button>\n          </Tooltip>\n        )}\n      </div>\n      {description ?? (<span className=\"textstyle-description\">{descriptionText}</span>)}\n    </div>\n  )\n}\n\nexport const modalRootName = 'modal-root'\n\nexport type ModalProps = {\n  id: string,\n  isOpen: boolean,\n  onBackgroundClick?: MouseEventHandler<HTMLDivElement>,\n  backgroundClassName?: string,\n  modalClassName?: string,\n  containerClassName?: string,\n} & ModalHeaderProps\n\n/**\n * A Generic Modal Window\n *\n * The state needs to be managed by the parent of this component\n *\n * DO NOT Conditionally render this always use the isOpen to ensure that the ModalRegister is working properly\n */\nexport const Modal = ({\n                        children,\n                        id,\n                        isOpen,\n                        onBackgroundClick,\n                        backgroundClassName = '',\n                        modalClassName = '',\n                        containerClassName = '',\n                        ...modalHeaderProps\n                      }: PropsWithChildren<ModalProps>) => {\n  const modalRoot = typeof window !== 'undefined' ? document.getElementById(modalRootName) : null\n  const {\n    register,\n    addToRegister,\n    removeFromRegister\n  } = useContext(ModalContext)\n\n  if (!id) {\n    console.error('the id cannot be empty')\n  }\n\n  useEffect(() => {\n    if (isOpen) {\n      addToRegister(id)\n    } else {\n      removeFromRegister(id)\n    }\n  }, [addToRegister, id, removeFromRegister, isOpen])\n\n  if (modalRoot === null || !isOpen) return null\n\n  const isLast = register.length < 1 || register[register.length - 1] === id\n  const isSecondLast = register.length < 2 || register[register.length - 2] === id\n\n  return ReactDOM.createPortal(\n    <div className={clsx('fixed inset-0 overflow-y-auto z-[99]', containerClassName)} id={id}>\n      {isLast && (\n        <div\n          className={clsx('fixed inset-0 h-screen w-screen', backgroundClassName, {\n            'bg-black/70': isLast && register.length === 1,\n          })}\n          onClick={onBackgroundClick}\n        />\n      )}\n      <div\n        className={clsx('fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-white text-black rounded-xl shadow-xl', modalClassName)}>\n        <ModalHeader {...modalHeaderProps} />\n        {children}\n      </div>\n      {!isLast && (\n        <div\n          className={clsx('fixed inset-0 h-screen w-screen', backgroundClassName, {\n            'bg-black/70': isSecondLast && register.length > 1,\n          })}\n        />\n      )}\n    </div>,\n    modalRoot,\n    id\n  )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport useLocalStorage from './useLocalStorage'\n\nexport const languages = ['en', 'de'] as const\nexport type Languages = typeof languages[number]\nexport const languagesLocalNames: Record<Languages, string> = {\n  en: 'English',\n  de: 'Deutsch',\n}\n\nexport const DEFAULT_LANGUAGE = 'en'\n\nexport type LanguageContextValue = {\n  language: Languages,\n  setLanguage: Dispatch<SetStateAction<Languages>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v })\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Languages) => {\n  const { language } = useLanguage()\n  const mapping: Record<Languages, string> = {\n    en: 'en-US',\n    de: 'de-DE'\n  }\n  return mapping[overWriteLanguage ?? language]\n}\n\ntype ProvideLanguageProps = {\n  initialLanguage?: Languages,\n}\n\nexport const ProvideLanguage = ({ initialLanguage, children }: PropsWithChildren<ProvideLanguageProps>) => {\n  const [language, setLanguage] = useState<Languages>(initialLanguage ?? DEFAULT_LANGUAGE)\n  const [storedLanguage, setStoredLanguage] = useLocalStorage<Languages>('language', initialLanguage ?? DEFAULT_LANGUAGE)\n\n  useEffect(() => {\n    if(language !== initialLanguage && initialLanguage){\n      console.warn('LanguageProvider initial state changed: Prefer using useLanguages\\'s setLanguage instead')\n      setLanguage(initialLanguage)\n    }\n  }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  useEffect(() => {\n    // TODO set locale of html tag here as well\n    setStoredLanguage(language)\n  }, [language, setStoredLanguage])\n\n  useEffect(() => {\n    if (storedLanguage !== null) {\n      setLanguage(storedLanguage)\n      return\n    }\n\n    const languagesToTestAgainst = Object.values(languages)\n\n    const matchingBrowserLanguages = window.navigator.languages\n      .map(language => languagesToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n      .filter(entry => entry !== undefined)\n\n    if (matchingBrowserLanguages.length === 0) return\n\n    const firstMatch = matchingBrowserLanguages[0] as Languages\n    setLanguage(firstMatch)\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <LanguageContext.Provider value={{\n      language,\n      setLanguage\n    }}>\n      {children}\n    </LanguageContext.Provider>\n  )\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nconst useLocalStorage = <T, >(key: string, initValue: T): [T, SetValue<T>] => {\n  const get = useCallback((): T => {\n    if (typeof window === 'undefined') {\n      return initValue\n    }\n    const storageService = new LocalStorageService()\n    const value = storageService.get<T>(key)\n    return value || initValue\n  }, [initValue, key])\n\n  const [storedValue, setStoredValue] = useState<T>(get)\n\n  const setValue: SetValue<T> = useCallback(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}\n\nexport default useLocalStorage\n","import type { Languages } from './useLanguage'\nimport { useLanguage } from './useLanguage'\n\nexport type Translation<T> = Record<Languages, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n  language?: Languages,\n  translation?: Partial<Record<Languages, Partial<Translation>>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n *              if you don't expect any other props other than `language` and get an\n *              error when using your component (because it uses `forwardRef` etc.)\n *              you can try out `Record<string, unknown>`, this might resolve your\n *              problem as `SomeType & never` is still `never` but `SomeType & unknown`\n *              is `SomeType` which means that adding back props (like `ref` etc.)\n *              works properly\n */\nexport type PropsForTranslation<\n  Translation extends Record<string, unknown>,\n  Props = Record<string, never>\n> = Props & {\n  overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n  defaults: Record<Languages, Translation>,\n  translationOverwrite: OverwriteTranslationType<Translation> = {}\n) : Translation => {\n  const { language: languageProp, translation: overwrite } = translationOverwrite\n  const { language: inferredLanguage } = useLanguage()\n  const usedLanguage = languageProp ?? inferredLanguage\n  let defaultValues: Translation = defaults[usedLanguage]\n  if (overwrite && overwrite[usedLanguage]) {\n    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n  }\n  return defaultValues\n}\n","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n  /**\n   * The delay after which the menu is closed in milliseconds\n   *\n   * default: 200ms\n   */\n  closingDelay: number,\n  /**\n   * Whether the hover state management should be disabled\n   *\n   * default: false\n   */\n  isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n  /**\n   * Whether the element is hovered\n   */\n  isHovered: boolean,\n  /**\n   * Function to change the current hover status\n   */\n  setIsHovered: Dispatch<SetStateAction<boolean>>,\n  /**\n   * Handlers to pass on to the component that should be hovered\n   */\n  handlers: {\n    onMouseEnter: () => void,\n    onMouseLeave: () => void,\n  },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n  closingDelay: 200,\n  isDisabled: false,\n}\n\n/**\n * @param props See UseHoverStateProps\n *\n * A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n */\nexport const useHoverState = (props: Partial<UseHoverStateProps> | undefined = undefined): UseHoverStateReturnType => {\n  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n  const [isHovered, setIsHovered] = useState(false)\n  const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n  const onMouseEnter = () => {\n    if (isDisabled) {\n      return\n    }\n    clearTimeout(timer)\n    setIsHovered(true)\n  }\n\n  const onMouseLeave = () => {\n    if (isDisabled) {\n      return\n    }\n    setTimer(setTimeout(() => {\n      setIsHovered(false)\n    }, closingDelay))\n  }\n\n  useEffect(() => {\n    if (timer) {\n      return () => {\n        clearTimeout(timer)\n      }\n    }\n  })\n\n  useEffect(() => {\n    if (timer) {\n      clearTimeout(timer)\n    }\n  }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n  }\n}\n","import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'\nimport { useHoverState } from '../hooks/useHoverState'\nimport { clsx } from 'clsx'\n\ntype Position = 'top' | 'bottom' | 'left' | 'right'\n\nexport type TooltipProps = PropsWithChildren<{\n  tooltip: string | ReactNode,\n  /**\n   * Number of milliseconds until the tooltip appears\n   *\n   * defaults to 1000ms\n   */\n  animationDelay?: number,\n  /**\n   * Class names of additional styling properties for the tooltip\n   */\n  tooltipClassName?: string,\n  /**\n   * Class names of additional styling properties for the container from which the tooltip will be created\n   */\n  containerClassName?: string,\n  position?: Position,\n  zIndex?: number,\n}>\n\n/**\n * A Component for showing a tooltip when hovering over Content\n * @param tooltip The tooltip to show can be a text or any ReactNode\n * @param children The Content for which the tooltip should be created\n * @param animationDelay The delay before the tooltip appears\n * @param tooltipClassName Additional ClassNames for the Container of the tooltip\n * @param containerClassName Additional ClassNames for the Container holding the content\n * @param position The direction of the tooltip relative to the Container\n * @param zIndex The z Index of the tooltip (you may require this when stacking modals)\n * @constructor\n */\nexport const Tooltip = ({\n                          tooltip,\n                          children,\n                          animationDelay = 650,\n                          tooltipClassName = '',\n                          containerClassName = '',\n                          position = 'bottom',\n                          zIndex = 10,\n                        }: TooltipProps) => {\n  const { isHovered, handlers } = useHoverState()\n\n  const positionClasses = {\n    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,\n    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,\n    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,\n    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`\n  }\n\n  const triangleSize = 6\n  const triangleClasses = {\n    top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,\n    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,\n    left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,\n    right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`\n  }\n\n  const triangleStyle: Record<Position, CSSProperties> = {\n    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },\n    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },\n    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },\n    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }\n  }\n\n  return (\n    <div\n      className={clsx('relative inline-block', containerClassName)}\n      {...handlers}\n    >\n      {children}\n      {isHovered && (\n        <div\n          className={clsx(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600\n           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName)}\n          style={{ zIndex, animationDelay: animationDelay + 'ms' }}\n        >\n          {tooltip}\n          <div\n            className={clsx(`absolute w-0 h-0`, triangleClasses[position])}\n            style={{ ...triangleStyle[position], zIndex }}\n           />\n        </div>\n      )}\n    </div>\n  )\n}\n","import type { PropsWithChildren } from 'react'\nimport { createContext, useState } from 'react'\nimport { noop } from '../../util/noop'\n\nexport type ModalContextType = {\n  register: string[],\n  addToRegister: (id: string) => void,\n  removeFromRegister: (id: string) => void,\n}\nexport const ModalContext = createContext<ModalContextType>({\n  register: [],\n  addToRegister: noop,\n  removeFromRegister: noop,\n})\n\n/**\n * A Simple Wrapper for the context\n */\nexport const ModalRegister = ({\n  children\n}: PropsWithChildren) => {\n  const [register, setRegister] = useState<string[]>([])\n\n  const inRegister = (id: string) => {\n    return !!register.find(value => value === id)\n  }\n\n  const addToRegister = (id: string) => {\n    if (!inRegister(id)) {\n      setRegister([...register, id])\n    }\n  }\n\n  const removeFromRegister = (id: string) => {\n    if (inRegister(id)) {\n      setRegister(register.filter(value => value !== id))\n    }\n  }\n\n  return (\n    <ModalContext.Provider value={{ register, addToRegister, removeFromRegister }}>\n      {children}\n    </ModalContext.Provider>\n  )\n}\n","export const noop = () => undefined\n"],"mappings":"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","names":["import_react","import_clsx","import_react","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","clsx","ReactDOM"]}

package/dist/components/modals/Modal.mjs

@@ -0,0 +1,249 @@
+// src/components/modals/Modal.tsx
+import { useContext as useContext2, useEffect as useEffect4 } from "react";
+import ReactDOM from "react-dom";
+import { X } from "lucide-react";
+import clsx2 from "clsx";
+
+// src/hooks/useLanguage.tsx
+import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
+
+// src/hooks/useLocalStorage.tsx
+import { useCallback, useEffect, useState } from "react";
+
+// src/hooks/useLanguage.tsx
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_LANGUAGE = "en";
+var LanguageContext = createContext({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
+var useLanguage = () => useContext(LanguageContext);
+
+// src/hooks/useTranslation.ts
+var useTranslation = (defaults, translationOverwrite = {}) => {
+  const { language: languageProp, translation: overwrite } = translationOverwrite;
+  const { language: inferredLanguage } = useLanguage();
+  const usedLanguage = languageProp ?? inferredLanguage;
+  let defaultValues = defaults[usedLanguage];
+  if (overwrite && overwrite[usedLanguage]) {
+    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
+  }
+  return defaultValues;
+};
+
+// src/hooks/useHoverState.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+var defaultUseHoverStateProps = {
+  closingDelay: 200,
+  isDisabled: false
+};
+var useHoverState = (props = void 0) => {
+  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
+  const [isHovered, setIsHovered] = useState3(false);
+  const [timer, setTimer] = useState3();
+  const onMouseEnter = () => {
+    if (isDisabled) {
+      return;
+    }
+    clearTimeout(timer);
+    setIsHovered(true);
+  };
+  const onMouseLeave = () => {
+    if (isDisabled) {
+      return;
+    }
+    setTimer(setTimeout(() => {
+      setIsHovered(false);
+    }, closingDelay));
+  };
+  useEffect3(() => {
+    if (timer) {
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  });
+  useEffect3(() => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+  }, [isDisabled]);
+  return {
+    isHovered,
+    setIsHovered,
+    handlers: { onMouseEnter, onMouseLeave }
+  };
+};
+
+// src/components/Tooltip.tsx
+import { clsx } from "clsx";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Tooltip = ({
+  tooltip,
+  children,
+  animationDelay = 650,
+  tooltipClassName = "",
+  containerClassName = "",
+  position = "bottom",
+  zIndex = 10
+}) => {
+  const { isHovered, handlers } = useHoverState();
+  const positionClasses = {
+    top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
+    bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
+    left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
+    right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
+  };
+  const triangleSize = 6;
+  const triangleClasses = {
+    top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,
+    bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,
+    left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,
+    right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`
+  };
+  const triangleStyle = {
+    top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
+    bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
+    left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
+    right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx("relative inline-block", containerClassName),
+      ...handlers,
+      children: [
+        children,
+        isHovered && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600
+           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName),
+            style: { zIndex, animationDelay: animationDelay + "ms" },
+            children: [
+              tooltip,
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: clsx(`absolute w-0 h-0`, triangleClasses[position]),
+                  style: { ...triangleStyle[position], zIndex }
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/modals/ModalRegister.tsx
+import { createContext as createContext2, useState as useState4 } from "react";
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/modals/ModalRegister.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ModalContext = createContext2({
+  register: [],
+  addToRegister: noop,
+  removeFromRegister: noop
+});
+
+// src/components/modals/Modal.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultModalHeaderTranslation = {
+  en: {
+    close: "Close"
+  },
+  de: {
+    close: "Schlie\xDFen"
+  }
+};
+var ModalHeader = ({
+  overwriteTranslation,
+  onCloseClick,
+  title,
+  titleText = "",
+  description,
+  descriptionText = ""
+}) => {
+  const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation);
+  return /* @__PURE__ */ jsxs2("div", { className: "col", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "row justify-between items-start gap-x-8", children: [
+      title ?? /* @__PURE__ */ jsx4("span", { className: clsx2("textstyle-title-lg", {
+        "mb-1": description || descriptionText
+      }), children: titleText }),
+      !!onCloseClick && /* @__PURE__ */ jsx4(Tooltip, { tooltip: translation.close, children: /* @__PURE__ */ jsx4("button", { className: "row bg-gray-200 hover:bg-gray-300 rounded-md p-1", onClick: onCloseClick, children: /* @__PURE__ */ jsx4(X, {}) }) })
+    ] }),
+    description ?? /* @__PURE__ */ jsx4("span", { className: "textstyle-description", children: descriptionText })
+  ] });
+};
+var modalRootName = "modal-root";
+var Modal = ({
+  children,
+  id,
+  isOpen,
+  onBackgroundClick,
+  backgroundClassName = "",
+  modalClassName = "",
+  containerClassName = "",
+  ...modalHeaderProps
+}) => {
+  const modalRoot = typeof window !== "undefined" ? document.getElementById(modalRootName) : null;
+  const {
+    register,
+    addToRegister,
+    removeFromRegister
+  } = useContext2(ModalContext);
+  if (!id) {
+    console.error("the id cannot be empty");
+  }
+  useEffect4(() => {
+    if (isOpen) {
+      addToRegister(id);
+    } else {
+      removeFromRegister(id);
+    }
+  }, [addToRegister, id, removeFromRegister, isOpen]);
+  if (modalRoot === null || !isOpen) return null;
+  const isLast = register.length < 1 || register[register.length - 1] === id;
+  const isSecondLast = register.length < 2 || register[register.length - 2] === id;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsxs2("div", { className: clsx2("fixed inset-0 overflow-y-auto z-[99]", containerClassName), id, children: [
+      isLast && /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: clsx2("fixed inset-0 h-screen w-screen", backgroundClassName, {
+            "bg-black/70": isLast && register.length === 1
+          }),
+          onClick: onBackgroundClick
+        }
+      ),
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: clsx2("fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-white text-black rounded-xl shadow-xl", modalClassName),
+          children: [
+            /* @__PURE__ */ jsx4(ModalHeader, { ...modalHeaderProps }),
+            children
+          ]
+        }
+      ),
+      !isLast && /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: clsx2("fixed inset-0 h-screen w-screen", backgroundClassName, {
+            "bg-black/70": isSecondLast && register.length > 1
+          })
+        }
+      )
+    ] }),
+    modalRoot,
+    id
+  );
+};
+export {
+  Modal,
+  ModalHeader,
+  modalRootName
+};
+//# sourceMappingURL=Modal.mjs.map