@helpwave/hightide 0.0.13 → 0.0.16

package/dist/components/TextImage.d.mts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsForTranslation } from '../hooks/useTranslation.mjs';
+import '../hooks/useLanguage.mjs';
+import 'react';
+
+type TextImageColor = 'primary' | 'secondary' | 'dark';
+type TextImageTranslation = {
+    showMore: string;
+};
+type TextImageProps = {
+    title: string;
+    description: string;
+    imageUrl: string;
+    onShowMoreClicked?: () => void;
+    color?: TextImageColor;
+    badge?: string;
+    contentClassName?: string;
+    className?: string;
+};
+/**
+ * A Component for layering a Text upon a Image
+ */
+declare const TextImage: ({ overwriteTranslation, title, description, imageUrl, onShowMoreClicked, color, badge, contentClassName, className, }: PropsForTranslation<TextImageTranslation, TextImageProps>) => react_jsx_runtime.JSX.Element;
+
+export { TextImage, type TextImageProps };

package/dist/components/TextImage.d.ts

@@ -1,9 +1,13 @@
-import type { PropsForTranslation } from '../hooks/useTranslation';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsForTranslation } from '../hooks/useTranslation.js';
+import '../hooks/useLanguage.js';
+import 'react';
+
 type TextImageColor = 'primary' | 'secondary' | 'dark';
 type TextImageTranslation = {
     showMore: string;
 };
-export type TextImageProps = {
+type TextImageProps = {
     title: string;
     description: string;
     imageUrl: string;
@@ -16,5 +20,6 @@ export type TextImageProps = {
 /**
  * A Component for layering a Text upon a Image
  */
-export declare const TextImage: ({ overwriteTranslation, title, description, imageUrl, onShowMoreClicked, color, badge, contentClassName, className, }: PropsForTranslation<TextImageTranslation, TextImageProps>) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const TextImage: ({ overwriteTranslation, title, description, imageUrl, onShowMoreClicked, color, badge, contentClassName, className, }: PropsForTranslation<TextImageTranslation, TextImageProps>) => react_jsx_runtime.JSX.Element;
+
+export { TextImage, type TextImageProps };

package/dist/components/TextImage.js

@@ -1,31 +1,123 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTranslation } from '../hooks/useTranslation';
-import clsx from 'clsx';
-const defaultTextImageTranslation = {
-    de: {
-        showMore: 'Mehr anzeigen'
-    },
-    en: {
-        showMore: 'Show more'
-    }
+"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/TextImage.tsx
+var TextImage_exports = {};
+__export(TextImage_exports, {
+  TextImage: () => TextImage
+});
+module.exports = __toCommonJS(TextImage_exports);
+
+// 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;
 };
-/**
- * A Component for layering a Text upon a Image
- */
-export const TextImage = ({ overwriteTranslation, title, description, imageUrl, onShowMoreClicked, color = 'primary', badge, contentClassName = '', className = '', }) => {
-    const translation = useTranslation(defaultTextImageTranslation, overwriteTranslation);
-    const chipColorMapping = {
-        primary: 'text-text-image-primary-background bg-text-text-image-primary-text',
-        secondary: 'text-text-image-secondary-background bg-text-text-image-secondary-text',
-        dark: 'text-text-image-dark-background bg-text-text-image-dark-text',
-    };
-    const colorMapping = {
-        primary: 'text-text-image-primary-text bg-linear-to-r from-30% from-text-image-primary-background to-text-image-primary-background/55',
-        secondary: 'text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55',
-        dark: 'text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55',
-    };
-    return (_jsx("div", { className: clsx('rounded-2xl w-full', className), style: {
-            backgroundImage: `url(${imageUrl})`,
-            backgroundSize: 'cover',
-        }, children: _jsxs("div", { className: clsx(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName), children: [badge && (_jsx("div", { className: clsx(`chip-full bg-white mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: _jsx("span", { className: "text-lg font-bold", children: badge }) })), _jsxs("div", { className: "col gap-y-1 text-white overflow-hidden", children: [_jsx("span", { className: "textstyle-title-xl", children: title }), _jsx("span", { className: "text-ellipsis overflow-hidden", children: description })] }), onShowMoreClicked && (_jsx("div", { className: "row mt-2 text-white underline", children: _jsx("button", { onClick: onShowMoreClicked, children: translation.showMore }) }))] }) }));
+
+// src/components/TextImage.tsx
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var defaultTextImageTranslation = {
+  de: {
+    showMore: "Mehr anzeigen"
+  },
+  en: {
+    showMore: "Show more"
+  }
+};
+var TextImage = ({
+  overwriteTranslation,
+  title,
+  description,
+  imageUrl,
+  onShowMoreClicked,
+  color = "primary",
+  badge,
+  contentClassName = "",
+  className = ""
+}) => {
+  const translation = useTranslation(defaultTextImageTranslation, overwriteTranslation);
+  const chipColorMapping = {
+    primary: "text-text-image-primary-background bg-text-text-image-primary-text",
+    secondary: "text-text-image-secondary-background bg-text-text-image-secondary-text",
+    dark: "text-text-image-dark-background bg-text-text-image-dark-text"
+  };
+  const colorMapping = {
+    primary: "text-text-image-primary-text bg-linear-to-r from-30% from-text-image-primary-background to-text-image-primary-background/55",
+    secondary: "text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55",
+    dark: "text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: (0, import_clsx.default)("rounded-2xl w-full", className),
+      style: {
+        backgroundImage: `url(${imageUrl})`,
+        backgroundSize: "cover"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          className: (0, import_clsx.default)(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          children: [
+            badge && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_clsx.default)(`chip-full bg-white mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-lg font-bold", children: badge }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "col gap-y-1 text-white overflow-hidden", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "textstyle-title-xl", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-ellipsis overflow-hidden", children: description })
+            ] }),
+            onShowMoreClicked && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "row mt-2 text-white underline", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { onClick: onShowMoreClicked, children: translation.showMore }) })
+          ]
+        }
+      )
+    }
+  );
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextImage
+});
+//# sourceMappingURL=TextImage.js.map

package/dist/components/TextImage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TextImage.tsx","../../src/hooks/useLanguage.tsx","../../src/hooks/useLocalStorage.tsx","../../src/hooks/useTranslation.ts"],"sourcesContent":["import type { Languages } from '../hooks/useLanguage'\nimport type { PropsForTranslation } from '../hooks/useTranslation'\nimport { useTranslation } from '../hooks/useTranslation'\nimport clsx from 'clsx'\n\ntype TextImageColor = 'primary' | 'secondary' | 'dark'\n\ntype TextImageTranslation = {\n  showMore: string,\n}\n\nconst defaultTextImageTranslation: Record<Languages, TextImageTranslation> = {\n  de: {\n    showMore: 'Mehr anzeigen'\n  },\n  en: {\n    showMore: 'Show more'\n  }\n}\n\nexport type TextImageProps = {\n  title: string,\n  description: string,\n  imageUrl: string,\n  onShowMoreClicked?: () => void,\n  color?: TextImageColor,\n  badge?: string,\n  contentClassName?: string,\n  className?: string,\n}\n\n/**\n * A Component for layering a Text upon a Image\n */\nexport const TextImage = ({\n                            overwriteTranslation,\n                            title,\n                            description,\n                            imageUrl,\n                            onShowMoreClicked,\n                            color = 'primary',\n                            badge,\n                            contentClassName = '',\n                            className = '',\n                          }: PropsForTranslation<TextImageTranslation, TextImageProps>) => {\n  const translation = useTranslation(defaultTextImageTranslation, overwriteTranslation)\n\n  const chipColorMapping: Record<TextImageColor, string> = {\n    primary: 'text-text-image-primary-background bg-text-text-image-primary-text',\n    secondary: 'text-text-image-secondary-background bg-text-text-image-secondary-text',\n    dark: 'text-text-image-dark-background bg-text-text-image-dark-text',\n  }\n\n  const colorMapping: Record<TextImageColor, string> = {\n    primary: 'text-text-image-primary-text bg-linear-to-r from-30% from-text-image-primary-background to-text-image-primary-background/55',\n    secondary: 'text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55',\n    dark: 'text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55',\n  }\n\n  return (\n    <div\n      className={clsx('rounded-2xl w-full', className)}\n      style={{\n        backgroundImage: `url(${imageUrl})`,\n        backgroundSize: 'cover',\n      }}>\n      <div\n        className={clsx(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName)}>\n        {badge && (\n          <div className={clsx(`chip-full bg-white mb-2 py-2 px-4 w-fit`, chipColorMapping[color])}>\n            <span className=\"text-lg font-bold\">{badge}</span>\n          </div>\n        )}\n        <div className=\"col gap-y-1 text-white overflow-hidden\">\n          <span className=\"textstyle-title-xl\">{title}</span>\n          <span className=\"text-ellipsis overflow-hidden\">{description}</span>\n        </div>\n        {onShowMoreClicked && (\n          <div className=\"row mt-2 text-white underline\">\n            <button onClick={onShowMoreClicked}>{translation.showMore}</button>\n          </div>\n        )}\n      </div>\n    </div>\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,IAAAA,gBAA+D;;;ACA/D,mBAAiD;;;ADqE7C;AA3DG,IAAM,mBAAmB;AAOzB,IAAM,sBAAkB,6BAAoC,EAAE,UAAU,kBAAkB,aAAa,CAAC,MAAM,EAAE,CAAC;AAEjH,IAAM,cAAc,UAAM,0BAAW,eAAe;;;AEUpD,IAAM,iBAAiB,CAC5B,UACA,uBAA8D,CAAC,MAC9C;AACjB,QAAM,EAAE,UAAU,cAAc,aAAa,UAAU,IAAI;AAC3D,QAAM,EAAE,UAAU,iBAAiB,IAAI,YAAY;AACnD,QAAM,eAAe,gBAAgB;AACrC,MAAI,gBAA6B,SAAS,YAAY;AACtD,MAAI,aAAa,UAAU,YAAY,GAAG;AACxC,oBAAgB,EAAE,GAAG,eAAe,GAAG,UAAU,YAAY,EAAE;AAAA,EACjE;AACA,SAAO;AACT;;;AHvCA,kBAAiB;AAmEL,IAAAC,sBAAA;AA3DZ,IAAM,8BAAuE;AAAA,EAC3E,IAAI;AAAA,IACF,UAAU;AAAA,EACZ;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,EACZ;AACF;AAgBO,IAAM,YAAY,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,mBAAmB;AAAA,EACnB,YAAY;AACd,MAAiE;AACzF,QAAM,cAAc,eAAe,6BAA6B,oBAAoB;AAEpF,QAAM,mBAAmD;AAAA,IACvD,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAEA,QAAM,eAA+C;AAAA,IACnD,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,YAAAC,SAAK,sBAAsB,SAAS;AAAA,MAC/C,OAAO;AAAA,QACL,iBAAiB,OAAO,QAAQ;AAAA,QAChC,gBAAgB;AAAA,MAClB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,YAAAA,SAAK,qCAAqC,aAAa,KAAK,GAAG,gBAAgB;AAAA,UACzF;AAAA,qBACC,6CAAC,SAAI,eAAW,YAAAA,SAAK,2CAA2C,iBAAiB,KAAK,CAAC,GACrF,uDAAC,UAAK,WAAU,qBAAqB,iBAAM,GAC7C;AAAA,YAEF,8CAAC,SAAI,WAAU,0CACb;AAAA,2DAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA,cAC5C,6CAAC,UAAK,WAAU,iCAAiC,uBAAY;AAAA,eAC/D;AAAA,YACC,qBACC,6CAAC,SAAI,WAAU,iCACb,uDAAC,YAAO,SAAS,mBAAoB,sBAAY,UAAS,GAC5D;AAAA;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":["import_react","import_jsx_runtime","clsx"]}

package/dist/components/TextImage.mjs

@@ -0,0 +1,86 @@
+// 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/components/TextImage.tsx
+import clsx from "clsx";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var defaultTextImageTranslation = {
+  de: {
+    showMore: "Mehr anzeigen"
+  },
+  en: {
+    showMore: "Show more"
+  }
+};
+var TextImage = ({
+  overwriteTranslation,
+  title,
+  description,
+  imageUrl,
+  onShowMoreClicked,
+  color = "primary",
+  badge,
+  contentClassName = "",
+  className = ""
+}) => {
+  const translation = useTranslation(defaultTextImageTranslation, overwriteTranslation);
+  const chipColorMapping = {
+    primary: "text-text-image-primary-background bg-text-text-image-primary-text",
+    secondary: "text-text-image-secondary-background bg-text-text-image-secondary-text",
+    dark: "text-text-image-dark-background bg-text-text-image-dark-text"
+  };
+  const colorMapping = {
+    primary: "text-text-image-primary-text bg-linear-to-r from-30% from-text-image-primary-background to-text-image-primary-background/55",
+    secondary: "text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55",
+    dark: "text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55"
+  };
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: clsx("rounded-2xl w-full", className),
+      style: {
+        backgroundImage: `url(${imageUrl})`,
+        backgroundSize: "cover"
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName),
+          children: [
+            badge && /* @__PURE__ */ jsx2("div", { className: clsx(`chip-full bg-white mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: /* @__PURE__ */ jsx2("span", { className: "text-lg font-bold", children: badge }) }),
+            /* @__PURE__ */ jsxs("div", { className: "col gap-y-1 text-white overflow-hidden", children: [
+              /* @__PURE__ */ jsx2("span", { className: "textstyle-title-xl", children: title }),
+              /* @__PURE__ */ jsx2("span", { className: "text-ellipsis overflow-hidden", children: description })
+            ] }),
+            onShowMoreClicked && /* @__PURE__ */ jsx2("div", { className: "row mt-2 text-white underline", children: /* @__PURE__ */ jsx2("button", { onClick: onShowMoreClicked, children: translation.showMore }) })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  TextImage
+};
+//# sourceMappingURL=TextImage.mjs.map

package/dist/components/TextImage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useLanguage.tsx","../../src/hooks/useLocalStorage.tsx","../../src/hooks/useTranslation.ts","../../src/components/TextImage.tsx"],"sourcesContent":["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 { Languages } from '../hooks/useLanguage'\nimport type { PropsForTranslation } from '../hooks/useTranslation'\nimport { useTranslation } from '../hooks/useTranslation'\nimport clsx from 'clsx'\n\ntype TextImageColor = 'primary' | 'secondary' | 'dark'\n\ntype TextImageTranslation = {\n  showMore: string,\n}\n\nconst defaultTextImageTranslation: Record<Languages, TextImageTranslation> = {\n  de: {\n    showMore: 'Mehr anzeigen'\n  },\n  en: {\n    showMore: 'Show more'\n  }\n}\n\nexport type TextImageProps = {\n  title: string,\n  description: string,\n  imageUrl: string,\n  onShowMoreClicked?: () => void,\n  color?: TextImageColor,\n  badge?: string,\n  contentClassName?: string,\n  className?: string,\n}\n\n/**\n * A Component for layering a Text upon a Image\n */\nexport const TextImage = ({\n                            overwriteTranslation,\n                            title,\n                            description,\n                            imageUrl,\n                            onShowMoreClicked,\n                            color = 'primary',\n                            badge,\n                            contentClassName = '',\n                            className = '',\n                          }: PropsForTranslation<TextImageTranslation, TextImageProps>) => {\n  const translation = useTranslation(defaultTextImageTranslation, overwriteTranslation)\n\n  const chipColorMapping: Record<TextImageColor, string> = {\n    primary: 'text-text-image-primary-background bg-text-text-image-primary-text',\n    secondary: 'text-text-image-secondary-background bg-text-text-image-secondary-text',\n    dark: 'text-text-image-dark-background bg-text-text-image-dark-text',\n  }\n\n  const colorMapping: Record<TextImageColor, string> = {\n    primary: 'text-text-image-primary-text bg-linear-to-r from-30% from-text-image-primary-background to-text-image-primary-background/55',\n    secondary: 'text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55',\n    dark: 'text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55',\n  }\n\n  return (\n    <div\n      className={clsx('rounded-2xl w-full', className)}\n      style={{\n        backgroundImage: `url(${imageUrl})`,\n        backgroundSize: 'cover',\n      }}>\n      <div\n        className={clsx(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName)}>\n        {badge && (\n          <div className={clsx(`chip-full bg-white mb-2 py-2 px-4 w-fit`, chipColorMapping[color])}>\n            <span className=\"text-lg font-bold\">{badge}</span>\n          </div>\n        )}\n        <div className=\"col gap-y-1 text-white overflow-hidden\">\n          <span className=\"textstyle-title-xl\">{title}</span>\n          <span className=\"text-ellipsis overflow-hidden\">{description}</span>\n        </div>\n        {onShowMoreClicked && (\n          <div className=\"row mt-2 text-white underline\">\n            <button onClick={onShowMoreClicked}>{translation.showMore}</button>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AACA,SAAS,eAAe,YAAY,aAAAA,YAAW,YAAAC,iBAAgB;;;ACA/D,SAAS,aAAa,WAAW,gBAAgB;;;ADqE7C;AA3DG,IAAM,mBAAmB;AAOzB,IAAM,kBAAkB,cAAoC,EAAE,UAAU,kBAAkB,aAAa,CAAC,MAAM,EAAE,CAAC;AAEjH,IAAM,cAAc,MAAM,WAAW,eAAe;;;AEUpD,IAAM,iBAAiB,CAC5B,UACA,uBAA8D,CAAC,MAC9C;AACjB,QAAM,EAAE,UAAU,cAAc,aAAa,UAAU,IAAI;AAC3D,QAAM,EAAE,UAAU,iBAAiB,IAAI,YAAY;AACnD,QAAM,eAAe,gBAAgB;AACrC,MAAI,gBAA6B,SAAS,YAAY;AACtD,MAAI,aAAa,UAAU,YAAY,GAAG;AACxC,oBAAgB,EAAE,GAAG,eAAe,GAAG,UAAU,YAAY,EAAE;AAAA,EACjE;AACA,SAAO;AACT;;;ACvCA,OAAO,UAAU;AAmEL,gBAAAC,MAGJ,YAHI;AA3DZ,IAAM,8BAAuE;AAAA,EAC3E,IAAI;AAAA,IACF,UAAU;AAAA,EACZ;AAAA,EACA,IAAI;AAAA,IACF,UAAU;AAAA,EACZ;AACF;AAgBO,IAAM,YAAY,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,mBAAmB;AAAA,EACnB,YAAY;AACd,MAAiE;AACzF,QAAM,cAAc,eAAe,6BAA6B,oBAAoB;AAEpF,QAAM,mBAAmD;AAAA,IACvD,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAEA,QAAM,eAA+C;AAAA,IACnD,SAAS;AAAA,IACT,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAEA,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,KAAK,sBAAsB,SAAS;AAAA,MAC/C,OAAO;AAAA,QACL,iBAAiB,OAAO,QAAQ;AAAA,QAChC,gBAAgB;AAAA,MAClB;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,KAAK,qCAAqC,aAAa,KAAK,GAAG,gBAAgB;AAAA,UACzF;AAAA,qBACC,gBAAAA,KAAC,SAAI,WAAW,KAAK,2CAA2C,iBAAiB,KAAK,CAAC,GACrF,0BAAAA,KAAC,UAAK,WAAU,qBAAqB,iBAAM,GAC7C;AAAA,YAEF,qBAAC,SAAI,WAAU,0CACb;AAAA,8BAAAA,KAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA,cAC5C,gBAAAA,KAAC,UAAK,WAAU,iCAAiC,uBAAY;AAAA,eAC/D;AAAA,YACC,qBACC,gBAAAA,KAAC,SAAI,WAAU,iCACb,0BAAAA,KAAC,YAAO,SAAS,mBAAoB,sBAAY,UAAS,GAC5D;AAAA;AAAA;AAAA,MAEJ;AAAA;AAAA,EACF;AAEJ;","names":["useEffect","useState","jsx"]}

package/dist/components/TimeDisplay.d.mts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsForTranslation } from '../hooks/useTranslation.mjs';
+import '../hooks/useLanguage.mjs';
+import 'react';
+
+type TimeDisplayTranslation = {
+    today: string;
+    yesterday: string;
+    tomorrow: string;
+    inDays: (days: number) => string;
+    agoDays: (days: number) => string;
+    january: string;
+    february: string;
+    march: string;
+    april: string;
+    may: string;
+    june: string;
+    july: string;
+    august: string;
+    september: string;
+    october: string;
+    november: string;
+    december: string;
+};
+type TimeDisplayMode = 'daysFromToday' | 'date';
+type TimeDisplayProps = {
+    date: Date;
+    mode?: TimeDisplayMode;
+};
+/**
+ * A Component for displaying time and dates in a unified fashion
+ */
+declare const TimeDisplay: ({ overwriteTranslation, date, mode }: PropsForTranslation<TimeDisplayTranslation, TimeDisplayProps>) => react_jsx_runtime.JSX.Element;
+
+export { TimeDisplay };

package/dist/components/TimeDisplay.d.ts

@@ -1,4 +1,8 @@
-import type { PropsForTranslation } from '../hooks/useTranslation';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsForTranslation } from '../hooks/useTranslation.js';
+import '../hooks/useLanguage.js';
+import 'react';
+
 type TimeDisplayTranslation = {
     today: string;
     yesterday: string;
@@ -26,5 +30,6 @@ type TimeDisplayProps = {
 /**
  * A Component for displaying time and dates in a unified fashion
  */
-export declare const TimeDisplay: ({ overwriteTranslation, date, mode }: PropsForTranslation<TimeDisplayTranslation, TimeDisplayProps>) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const TimeDisplay: ({ overwriteTranslation, date, mode }: PropsForTranslation<TimeDisplayTranslation, TimeDisplayProps>) => react_jsx_runtime.JSX.Element;
+
+export { TimeDisplay };

package/dist/components/TimeDisplay.js

@@ -1,83 +1,136 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useTranslation } from '../hooks/useTranslation';
-const defaultTimeDisplayTranslations = {
-    en: {
-        today: 'today',
-        yesterday: 'yesterday',
-        tomorrow: 'tomorrow',
-        inDays: (days) => `in ${days} days`,
-        agoDays: (days) => `${days} days ago`,
-        january: 'January',
-        february: 'February',
-        march: 'March',
-        april: 'April',
-        may: 'May',
-        june: 'June',
-        july: 'July',
-        august: 'August',
-        september: 'September',
-        october: 'October',
-        november: 'November',
-        december: 'December'
-    },
-    de: {
-        today: 'heute',
-        yesterday: 'gestern',
-        tomorrow: 'morgen',
-        inDays: (days) => `in ${days} Tagen`,
-        agoDays: (days) => `vor ${days} Tagen`,
-        january: 'Januar',
-        february: 'Februar',
-        march: 'März',
-        april: 'April',
-        may: 'Mai',
-        june: 'Juni',
-        july: 'Juli',
-        august: 'August',
-        september: 'September',
-        october: 'October',
-        november: 'November',
-        december: 'December'
-    }
+"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 });
 };
-/**
- * A Component for displaying time and dates in a unified fashion
- */
-export const TimeDisplay = ({ overwriteTranslation, date, mode = 'daysFromToday' }) => {
-    const translation = useTranslation(defaultTimeDisplayTranslations, overwriteTranslation);
-    const difference = new Date().setHours(0, 0, 0, 0).valueOf() - new Date(date).setHours(0, 0, 0, 0).valueOf();
-    const isBefore = difference > 0;
-    const differenceInDays = Math.floor(Math.abs(difference) / (1000 * 3600 * 24));
-    let displayString;
-    if (differenceInDays === 0) {
-        displayString = translation.today;
-    }
-    else if (differenceInDays === 1) {
-        displayString = isBefore ? translation.yesterday : translation.tomorrow;
-    }
-    else {
-        displayString = isBefore ? translation.agoDays(differenceInDays) : translation.inDays(differenceInDays);
-    }
-    const monthToTranslation = {
-        0: translation.january,
-        1: translation.february,
-        2: translation.march,
-        3: translation.april,
-        4: translation.may,
-        5: translation.june,
-        6: translation.july,
-        7: translation.august,
-        8: translation.september,
-        9: translation.october,
-        10: translation.november,
-        11: translation.december
-    };
-    let fullString;
-    if (mode === 'daysFromToday') {
-        fullString = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')} - ${displayString}`;
-    }
-    else {
-        fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
-    }
-    return (_jsx("span", { children: fullString }));
+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/TimeDisplay.tsx
+var TimeDisplay_exports = {};
+__export(TimeDisplay_exports, {
+  TimeDisplay: () => TimeDisplay
+});
+module.exports = __toCommonJS(TimeDisplay_exports);
+
+// 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/components/TimeDisplay.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var defaultTimeDisplayTranslations = {
+  en: {
+    today: "today",
+    yesterday: "yesterday",
+    tomorrow: "tomorrow",
+    inDays: (days) => `in ${days} days`,
+    agoDays: (days) => `${days} days ago`,
+    january: "January",
+    february: "February",
+    march: "March",
+    april: "April",
+    may: "May",
+    june: "June",
+    july: "July",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December"
+  },
+  de: {
+    today: "heute",
+    yesterday: "gestern",
+    tomorrow: "morgen",
+    inDays: (days) => `in ${days} Tagen`,
+    agoDays: (days) => `vor ${days} Tagen`,
+    january: "Januar",
+    february: "Februar",
+    march: "M\xE4rz",
+    april: "April",
+    may: "Mai",
+    june: "Juni",
+    july: "Juli",
+    august: "August",
+    september: "September",
+    october: "October",
+    november: "November",
+    december: "December"
+  }
+};
+var TimeDisplay = ({
+  overwriteTranslation,
+  date,
+  mode = "daysFromToday"
+}) => {
+  const translation = useTranslation(defaultTimeDisplayTranslations, overwriteTranslation);
+  const difference = (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0).valueOf() - new Date(date).setHours(0, 0, 0, 0).valueOf();
+  const isBefore = difference > 0;
+  const differenceInDays = Math.floor(Math.abs(difference) / (1e3 * 3600 * 24));
+  let displayString;
+  if (differenceInDays === 0) {
+    displayString = translation.today;
+  } else if (differenceInDays === 1) {
+    displayString = isBefore ? translation.yesterday : translation.tomorrow;
+  } else {
+    displayString = isBefore ? translation.agoDays(differenceInDays) : translation.inDays(differenceInDays);
+  }
+  const monthToTranslation = {
+    0: translation.january,
+    1: translation.february,
+    2: translation.march,
+    3: translation.april,
+    4: translation.may,
+    5: translation.june,
+    6: translation.july,
+    7: translation.august,
+    8: translation.september,
+    9: translation.october,
+    10: translation.november,
+    11: translation.december
+  };
+  let fullString;
+  if (mode === "daysFromToday") {
+    fullString = `${date.getHours().toString().padStart(2, "0")}:${date.getMinutes().toString().padStart(2, "0")} - ${displayString}`;
+  } else {
+    fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: fullString });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TimeDisplay
+});
+//# sourceMappingURL=TimeDisplay.js.map

package/dist/components/TimeDisplay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/TimeDisplay.tsx","../../src/hooks/useLanguage.tsx","../../src/hooks/useLocalStorage.tsx","../../src/hooks/useTranslation.ts"],"sourcesContent":["import type { Languages } from '../hooks/useLanguage'\nimport type { PropsForTranslation } from '../hooks/useTranslation'\nimport { useTranslation } from '../hooks/useTranslation'\n\ntype TimeDisplayTranslation = {\n  today: string,\n  yesterday: string,\n  tomorrow: string,\n  inDays: (days: number) => string,\n  agoDays: (days: number) => string,\n  january: string,\n  february: string,\n  march: string,\n  april: string,\n  may: string,\n  june: string,\n  july: string,\n  august: string,\n  september: string,\n  october: string,\n  november: string,\n  december: string,\n}\n\nconst defaultTimeDisplayTranslations: Record<Languages, TimeDisplayTranslation> = {\n  en: {\n    today: 'today',\n    yesterday: 'yesterday',\n    tomorrow: 'tomorrow',\n    inDays: (days: number) => `in ${days} days`,\n    agoDays: (days: number) => `${days} days ago`,\n    january: 'January',\n    february: 'February',\n    march: 'March',\n    april: 'April',\n    may: 'May',\n    june: 'June',\n    july: 'July',\n    august: 'August',\n    september: 'September',\n    october: 'October',\n    november: 'November',\n    december: 'December'\n  },\n  de: {\n    today: 'heute',\n    yesterday: 'gestern',\n    tomorrow: 'morgen',\n    inDays: (days: number) => `in ${days} Tagen`,\n    agoDays: (days: number) => `vor ${days} Tagen`,\n    january: 'Januar',\n    february: 'Februar',\n    march: 'März',\n    april: 'April',\n    may: 'Mai',\n    june: 'Juni',\n    july: 'Juli',\n    august: 'August',\n    september: 'September',\n    october: 'October',\n    november: 'November',\n    december: 'December'\n  }\n}\n\ntype TimeDisplayMode = 'daysFromToday' | 'date'\n\ntype TimeDisplayProps = {\n  date: Date,\n  mode?: TimeDisplayMode,\n}\n\n/**\n * A Component for displaying time and dates in a unified fashion\n */\nexport const TimeDisplay = ({\n  overwriteTranslation,\n  date,\n  mode = 'daysFromToday'\n}: PropsForTranslation<TimeDisplayTranslation, TimeDisplayProps>) => {\n  const translation = useTranslation(defaultTimeDisplayTranslations, overwriteTranslation)\n  const difference = new Date().setHours(0, 0, 0, 0).valueOf() - new Date(date).setHours(0, 0, 0, 0).valueOf()\n  const isBefore = difference > 0\n  const differenceInDays = Math.floor(Math.abs(difference) / (1000 * 3600 * 24))\n\n  let displayString\n  if (differenceInDays === 0) {\n    displayString = translation.today\n  } else if (differenceInDays === 1) {\n    displayString = isBefore ? translation.yesterday : translation.tomorrow\n  } else {\n    displayString = isBefore ? translation.agoDays(differenceInDays) : translation.inDays(differenceInDays)\n  }\n  const monthToTranslation: { [key: number]: string } = {\n    0: translation.january,\n    1: translation.february,\n    2: translation.march,\n    3: translation.april,\n    4: translation.may,\n    5: translation.june,\n    6: translation.july,\n    7: translation.august,\n    8: translation.september,\n    9: translation.october,\n    10: translation.november,\n    11: translation.december\n  } as const\n\n  let fullString\n  if (mode === 'daysFromToday') {\n    fullString = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')} - ${displayString}`\n  } else {\n    fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`\n  }\n\n  return (\n    <span>\n      {fullString}\n    </span>\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"],"mappings":"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","names":["import_react","import_jsx_runtime"]}