@helpwave/hightide 0.0.13 → 0.0.16

package/dist/components/modals/Modal.mjs.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":["useContext","useEffect","clsx","useEffect","useState","useEffect","useState","jsx","createContext","useState","jsx","createContext","jsx","jsxs","clsx","useContext","useEffect"]}

package/dist/components/modals/ModalRegister.d.mts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { PropsWithChildren } from 'react';
+
+type ModalContextType = {
+    register: string[];
+    addToRegister: (id: string) => void;
+    removeFromRegister: (id: string) => void;
+};
+declare const ModalContext: react.Context<ModalContextType>;
+/**
+ * A Simple Wrapper for the context
+ */
+declare const ModalRegister: ({ children }: PropsWithChildren) => react_jsx_runtime.JSX.Element;
+
+export { ModalContext, type ModalContextType, ModalRegister };

package/dist/components/modals/ModalRegister.d.ts

@@ -1,11 +1,16 @@
-import type { PropsWithChildren } from 'react';
-export type ModalContextType = {
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { PropsWithChildren } from 'react';
+
+type ModalContextType = {
     register: string[];
     addToRegister: (id: string) => void;
     removeFromRegister: (id: string) => void;
 };
-export declare const ModalContext: import("react").Context<ModalContextType>;
+declare const ModalContext: react.Context<ModalContextType>;
 /**
  * A Simple Wrapper for the context
  */
-export declare const ModalRegister: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+declare const ModalRegister: ({ children }: PropsWithChildren) => react_jsx_runtime.JSX.Element;
+
+export { ModalContext, type ModalContextType, ModalRegister };

package/dist/components/modals/ModalRegister.js

@@ -1,28 +1,63 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useState } from 'react';
-import { noop } from '../../util/noop';
-export const ModalContext = createContext({
-    register: [],
-    addToRegister: noop,
-    removeFromRegister: noop,
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/modals/ModalRegister.tsx
+var ModalRegister_exports = {};
+__export(ModalRegister_exports, {
+  ModalContext: () => ModalContext,
+  ModalRegister: () => ModalRegister
 });
-/**
- * A Simple Wrapper for the context
- */
-export const ModalRegister = ({ children }) => {
-    const [register, setRegister] = useState([]);
-    const inRegister = (id) => {
-        return !!register.find(value => value === id);
-    };
-    const addToRegister = (id) => {
-        if (!inRegister(id)) {
-            setRegister([...register, id]);
-        }
-    };
-    const removeFromRegister = (id) => {
-        if (inRegister(id)) {
-            setRegister(register.filter(value => value !== id));
-        }
-    };
-    return (_jsx(ModalContext.Provider, { value: { register, addToRegister, removeFromRegister }, children: children }));
+module.exports = __toCommonJS(ModalRegister_exports);
+var import_react = require("react");
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/modals/ModalRegister.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ModalContext = (0, import_react.createContext)({
+  register: [],
+  addToRegister: noop,
+  removeFromRegister: noop
+});
+var ModalRegister = ({
+  children
+}) => {
+  const [register, setRegister] = (0, import_react.useState)([]);
+  const inRegister = (id) => {
+    return !!register.find((value) => value === id);
+  };
+  const addToRegister = (id) => {
+    if (!inRegister(id)) {
+      setRegister([...register, id]);
+    }
+  };
+  const removeFromRegister = (id) => {
+    if (inRegister(id)) {
+      setRegister(register.filter((value) => value !== id));
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalContext.Provider, { value: { register, addToRegister, removeFromRegister }, children });
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModalContext,
+  ModalRegister
+});
+//# sourceMappingURL=ModalRegister.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/modals/ModalRegister.tsx","../../../src/util/noop.ts"],"sourcesContent":["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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwC;;;ACDjC,IAAM,OAAO,MAAM;;;ADwCtB;AA/BG,IAAM,mBAAe,4BAAgC;AAAA,EAC1D,UAAU,CAAC;AAAA,EACX,eAAe;AAAA,EACf,oBAAoB;AACtB,CAAC;AAKM,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AACF,MAAyB;AACvB,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAmB,CAAC,CAAC;AAErD,QAAM,aAAa,CAAC,OAAe;AACjC,WAAO,CAAC,CAAC,SAAS,KAAK,WAAS,UAAU,EAAE;AAAA,EAC9C;AAEA,QAAM,gBAAgB,CAAC,OAAe;AACpC,QAAI,CAAC,WAAW,EAAE,GAAG;AACnB,kBAAY,CAAC,GAAG,UAAU,EAAE,CAAC;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,qBAAqB,CAAC,OAAe;AACzC,QAAI,WAAW,EAAE,GAAG;AAClB,kBAAY,SAAS,OAAO,WAAS,UAAU,EAAE,CAAC;AAAA,IACpD;AAAA,EACF;AAEA,SACE,4CAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,UAAU,eAAe,mBAAmB,GACzE,UACH;AAEJ;","names":[]}

package/dist/components/modals/ModalRegister.mjs

@@ -0,0 +1,37 @@
+// src/components/modals/ModalRegister.tsx
+import { createContext, useState } from "react";
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/modals/ModalRegister.tsx
+import { jsx } from "react/jsx-runtime";
+var ModalContext = createContext({
+  register: [],
+  addToRegister: noop,
+  removeFromRegister: noop
+});
+var ModalRegister = ({
+  children
+}) => {
+  const [register, setRegister] = useState([]);
+  const inRegister = (id) => {
+    return !!register.find((value) => value === id);
+  };
+  const addToRegister = (id) => {
+    if (!inRegister(id)) {
+      setRegister([...register, id]);
+    }
+  };
+  const removeFromRegister = (id) => {
+    if (inRegister(id)) {
+      setRegister(register.filter((value) => value !== id));
+    }
+  };
+  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { register, addToRegister, removeFromRegister }, children });
+};
+export {
+  ModalContext,
+  ModalRegister
+};
+//# sourceMappingURL=ModalRegister.mjs.map

package/dist/components/modals/ModalRegister.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/modals/ModalRegister.tsx","../../../src/util/noop.ts"],"sourcesContent":["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":";AACA,SAAS,eAAe,gBAAgB;;;ACDjC,IAAM,OAAO,MAAM;;;ADwCtB;AA/BG,IAAM,eAAe,cAAgC;AAAA,EAC1D,UAAU,CAAC;AAAA,EACX,eAAe;AAAA,EACf,oBAAoB;AACtB,CAAC;AAKM,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AACF,MAAyB;AACvB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAmB,CAAC,CAAC;AAErD,QAAM,aAAa,CAAC,OAAe;AACjC,WAAO,CAAC,CAAC,SAAS,KAAK,WAAS,UAAU,EAAE;AAAA,EAC9C;AAEA,QAAM,gBAAgB,CAAC,OAAe;AACpC,QAAI,CAAC,WAAW,EAAE,GAAG;AACnB,kBAAY,CAAC,GAAG,UAAU,EAAE,CAAC;AAAA,IAC/B;AAAA,EACF;AAEA,QAAM,qBAAqB,CAAC,OAAe;AACzC,QAAI,WAAW,EAAE,GAAG;AAClB,kBAAY,SAAS,OAAO,WAAS,UAAU,EAAE,CAAC;AAAA,IACpD;AAAA,EACF;AAEA,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,UAAU,eAAe,mBAAmB,GACzE,UACH;AAEJ;","names":[]}

package/dist/components/properties/CheckboxProperty.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsForTranslation } from '../../hooks/useTranslation.mjs';
+import { PropertyBaseProps } from './PropertyBase.mjs';
+import '../../hooks/useLanguage.mjs';
+import 'react';
+
+type CheckboxPropertyTranslation = {
+    yes: string;
+    no: string;
+};
+type CheckboxPropertyProps = Omit<PropertyBaseProps, 'icon' | 'input' | 'hasValue' | 'onRemove'> & {
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+};
+/**
+ * An Input for a boolen properties
+ */
+declare const CheckboxProperty: ({ overwriteTranslation, value, onChange, readOnly, ...baseProps }: PropsForTranslation<CheckboxPropertyTranslation, CheckboxPropertyProps>) => react_jsx_runtime.JSX.Element;
+
+export { CheckboxProperty, type CheckboxPropertyProps };

package/dist/components/properties/CheckboxProperty.d.ts

@@ -1,15 +1,20 @@
-import type { PropsForTranslation } from '../../hooks/useTranslation';
-import type { PropertyBaseProps } from './PropertyBase';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsForTranslation } from '../../hooks/useTranslation.js';
+import { PropertyBaseProps } from './PropertyBase.js';
+import '../../hooks/useLanguage.js';
+import 'react';
+
 type CheckboxPropertyTranslation = {
     yes: string;
     no: string;
 };
-export type CheckboxPropertyProps = Omit<PropertyBaseProps, 'icon' | 'input' | 'hasValue' | 'onRemove'> & {
+type CheckboxPropertyProps = Omit<PropertyBaseProps, 'icon' | 'input' | 'hasValue' | 'onRemove'> & {
     value?: boolean;
     onChange?: (value: boolean) => void;
 };
 /**
  * An Input for a boolen properties
  */
-export declare const CheckboxProperty: ({ overwriteTranslation, value, onChange, readOnly, ...baseProps }: PropsForTranslation<CheckboxPropertyTranslation, CheckboxPropertyProps>) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const CheckboxProperty: ({ overwriteTranslation, value, onChange, readOnly, ...baseProps }: PropsForTranslation<CheckboxPropertyTranslation, CheckboxPropertyProps>) => react_jsx_runtime.JSX.Element;
+
+export { CheckboxProperty, type CheckboxPropertyProps };

package/dist/components/properties/CheckboxProperty.js

@@ -1,27 +1,326 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Check } from 'lucide-react';
-import { noop } from '../../util/noop';
-import { Checkbox } from '../user-input/Checkbox';
-import { useTranslation } from '../../hooks/useTranslation';
-import { PropertyBase } from './PropertyBase';
-const defaultCheckboxPropertyTranslation = {
-    en: {
-        yes: 'Yes',
-        no: 'No'
-    },
-    de: {
-        yes: 'Ja',
-        no: 'Nein'
+"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/properties/CheckboxProperty.tsx
+var CheckboxProperty_exports = {};
+__export(CheckboxProperty_exports, {
+  CheckboxProperty: () => CheckboxProperty
+});
+module.exports = __toCommonJS(CheckboxProperty_exports);
+var import_lucide_react3 = require("lucide-react");
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/user-input/Checkbox.tsx
+var import_react = require("react");
+var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
+var import_lucide_react = require("lucide-react");
+var import_clsx = __toESM(require("clsx"));
+
+// src/components/user-input/Label.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var styleMapping = {
+  labelSmall: "textstyle-label-sm",
+  labelMedium: "textstyle-label-md",
+  labelBig: "textstyle-label-lg"
+};
+var Label = ({
+  children,
+  name,
+  labelType = "labelSmall",
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { ...props, children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styleMapping[labelType], children: name }) });
+};
+
+// src/components/user-input/Checkbox.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var checkboxSizeMapping = {
+  small: "size-4",
+  medium: "size-6",
+  large: "size-8"
+};
+var checkboxIconSizeMapping = {
+  small: "size-3",
+  medium: "size-5",
+  large: "size-7"
+};
+var ControlledCheckbox = ({
+  id,
+  label,
+  checked,
+  disabled,
+  onChange,
+  onChangeTristate,
+  size = "medium",
+  className = "",
+  containerClassName
+}) => {
+  const usedSizeClass = checkboxSizeMapping[size];
+  const innerIconSize = checkboxIconSizeMapping[size];
+  const propagateChange = (checked2) => {
+    if (onChangeTristate) {
+      onChangeTristate(checked2);
     }
+    if (onChange) {
+      onChange(checked2 === "indeterminate" ? false : checked2);
+    }
+  };
+  const changeValue = () => {
+    const newValue = checked === "indeterminate" ? false : !checked;
+    propagateChange(newValue);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_clsx.default)("row justify-center items-center", containerClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      CheckboxPrimitive.Root,
+      {
+        onCheckedChange: propagateChange,
+        checked,
+        disabled,
+        id,
+        className: (0, import_clsx.default)(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {
+          "text-disabled-text border-disabled-text": disabled,
+          "border-on-background": !disabled,
+          "bg-primary/30 border-primary text-primary": checked === true || checked === "indeterminate",
+          "hover:border-gray-400 focus:hover:border-primary": !checked
+        }, className),
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(CheckboxPrimitive.Indicator, { children: [
+          checked === true && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Check, { className: innerIconSize }),
+          checked === "indeterminate" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Minus, { className: innerIconSize })
+        ] })
+      }
+    ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Label, { ...label, className: (0, import_clsx.default)("cursor-pointer", label.className), htmlFor: id, onClick: changeValue })
+  ] });
+};
+
+// src/hooks/useLanguage.tsx
+var import_react3 = require("react");
+
+// src/hooks/useLocalStorage.tsx
+var import_react2 = require("react");
+
+// src/hooks/useLanguage.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DEFAULT_LANGUAGE = "en";
+var LanguageContext = (0, import_react3.createContext)({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
+var useLanguage = () => (0, import_react3.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;
 };
-/**
- * An Input for a boolen properties
- */
-export const CheckboxProperty = ({ overwriteTranslation, value, onChange = noop, readOnly, ...baseProps }) => {
-    const translation = useTranslation(defaultCheckboxPropertyTranslation, overwriteTranslation);
-    return (_jsx(PropertyBase, { ...baseProps, hasValue: true, readOnly: readOnly, icon: _jsx(Check, { size: 16 }), input: () => (_jsx("div", { className: "row py-2 px-4 items-center", children: _jsx(Checkbox
-            // TODO make bigger as in #904
-            , { 
-                // TODO make bigger as in #904
-                checked: value !== null && value !== void 0 ? value : true, disabled: readOnly, onChange: onChange, label: { name: `${translation.yes}/${translation.no}`, labelType: 'labelMedium' } }) })) }));
+
+// src/components/properties/PropertyBase.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_clsx3 = __toESM(require("clsx"));
+
+// src/components/Button.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ButtonSizePaddings = {
+  small: "btn-sm",
+  medium: "btn-md",
+  large: "btn-lg"
+};
+var TextButton = ({
+  children,
+  disabled = false,
+  color = "neutral",
+  size = "medium",
+  startIcon,
+  endIcon,
+  onClick,
+  className,
+  ...restProps
+}) => {
+  const colorClasses = {
+    negative: "bg-transparent text-button-text-negative-text",
+    neutral: "bg-transparent text-button-text-neutral-text"
+  }[color];
+  const iconColorClasses = {
+    negative: "text-button-text-negative-icon",
+    neutral: "text-button-text-neutral-icon"
+  }[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled: disabled || onClick === void 0,
+      className: (0, import_clsx2.default)(
+        className,
+        {
+          "text-disabled-text": disabled,
+          [(0, import_clsx2.default)(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
+        },
+        ButtonSizePaddings[size]
+      ),
+      ...restProps,
+      children: [
+        startIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            className: (0, import_clsx2.default)({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: startIcon
+          }
+        ),
+        children,
+        endIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            className: (0, import_clsx2.default)({
+              [iconColorClasses]: !disabled,
+              [`text-disabled-icon`]: disabled
+            }),
+            children: endIcon
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/properties/PropertyBase.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var defaultPropertyBaseTranslation = {
+  en: {
+    remove: "Remove"
+  },
+  de: {
+    remove: "Entfernen"
+  }
+};
+var PropertyBase = ({
+  overwriteTranslation,
+  name,
+  input,
+  softRequired = false,
+  hasValue,
+  icon,
+  readOnly,
+  onRemove,
+  className = ""
+}) => {
+  const translation = useTranslation(defaultPropertyBaseTranslation, overwriteTranslation);
+  const requiredAndNoValue = softRequired && !hasValue;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_clsx3.default)("row gap-x-0 group", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx3.default)("row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0", {
+          "bg-gray-100 text-black group-hover:border-primary border-gray-400": !requiredAndNoValue,
+          "bg-warning text-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
+        }, className),
+        children: [
+          icon,
+          name
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx3.default)("row grow justify-between items-center rounded-r-xl border-2 border-l-0", {
+          "bg-white group-hover:border-primary border-gray-400": !requiredAndNoValue,
+          "bg-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
+        }, className),
+        children: [
+          input({ softRequired, hasValue }),
+          requiredAndNoValue && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-warning pr-4", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.AlertTriangle, { size: 24 }) }),
+          onRemove && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            TextButton,
+            {
+              onClick: onRemove,
+              color: "negative",
+              className: (0, import_clsx3.default)("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
+              disabled: !hasValue || readOnly,
+              children: translation.remove
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+// src/components/properties/CheckboxProperty.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var defaultCheckboxPropertyTranslation = {
+  en: {
+    yes: "Yes",
+    no: "No"
+  },
+  de: {
+    yes: "Ja",
+    no: "Nein"
+  }
+};
+var CheckboxProperty = ({
+  overwriteTranslation,
+  value,
+  onChange = noop,
+  readOnly,
+  ...baseProps
+}) => {
+  const translation = useTranslation(defaultCheckboxPropertyTranslation, overwriteTranslation);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    PropertyBase,
+    {
+      ...baseProps,
+      hasValue: true,
+      readOnly,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Check, { size: 16 }),
+      input: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "row py-2 px-4 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        ControlledCheckbox,
+        {
+          checked: value ?? true,
+          disabled: readOnly,
+          onChange,
+          label: { name: `${translation.yes}/${translation.no}`, labelType: "labelMedium" }
+        }
+      ) })
+    }
+  );
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckboxProperty
+});
+//# sourceMappingURL=CheckboxProperty.js.map