@helpwave/hightide 0.1.24 → 0.1.26

package/dist/{css → style}/uncompiled/globals.css

@@ -7,7 +7,7 @@
 @import './theme/index.css';
 
 /* components */
-@import './textstyles.css';
+@import './typography.css';
 
 /* The theme variables */
 @theme {
@@ -16,12 +16,6 @@
    */
   --breakpoint-tablet: 48rem; /* 768px for 16px font-size */
   --breakpoint-desktop: 64rem; /* 1024px for 16px font-size*/
-
-  /*
-   * fonts
-   */
-  --font-inter: 'Inter', sans-serif;
-  --font-space: 'Space Grotesk', sans-serif;
 }
 
 /* Styles that can be overwritten by utils */
@@ -100,28 +94,38 @@
     @apply cursor-pointer text-nowrap;
   }
 
-  input {
-    @apply block;
-  }
-
   *:disabled {
     @apply cursor-not-allowed;
   }
 
+
+  /* move the focus styles into its own file and utilities */
   *:focus {
-    @apply outline-none ring-0;
+    @apply outline-0 ring-0;
   }
 
   *:focus-visible {
     @apply ring-2 ring-focus;
   }
 
+  .focus-style-within:focus-within {
+    @apply ring-2 ring-focus;
+  }
+
+  .focus-style-none {
+    @apply focus-visible:ring-0 focus-within:ring-0;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     * {
-      @apply !transition-none !animate-none;
+      @apply transition-none animate-none;
     }
   }
 
+  /**
+   * Table
+   */
+
   table {
     @apply table-fixed border-separate border-spacing-0 bg-table-background text-table-text;
   }
@@ -149,4 +153,62 @@
   th:last-child > .table-resize-indicator {
     @apply right-6;
   }
+
+  /**
+   * Scrollbar
+   */
+  @supports (scrollbar-color: auto) {
+    * {
+      scrollbar-color: var(--color-gray-500) transparent;
+    }
+  }
+
+  /* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
+
+  @supports selector(::-webkit-scrollbar) {
+    * {
+      scrollbar-color: initial;
+    }
+
+    :root{
+      --scrollbar-width: 10px;
+      --scrollbar-padding: 1px;
+    }
+
+    *::-webkit-scrollbar {
+      width: var(--scrollbar-width);
+      height: var(--scrollbar-width);
+    }
+
+    *::-webkit-scrollbar-track {
+      border-radius: 9999px;
+      background: transparent;
+      cursor: default;
+    }
+
+    *::-webkit-scrollbar-thumb {
+      background-color: var(--color-gray-500);
+      border-radius: 9999px;
+      border: var(--scrollbar-padding) solid transparent;
+      background-clip: padding-box;
+      cursor: default;
+      transition: background-color 0.2s ease;
+    }
+
+    *::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-gray-600);
+    }
+
+    *::-webkit-scrollbar-thumb:vertical {
+      min-height: calc(var(--scrollbar-width) * 3);
+    }
+
+    *::-webkit-scrollbar-thumb:horizontal {
+      min-width: calc(var(--scrollbar-width) * 3);
+    }
+
+    *::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+  }
 }

package/dist/{css → style}/uncompiled/theme/colors-component.css

@@ -60,6 +60,9 @@
   --color-menu-text: var(--color-on-surface);
   --color-menu-border: var(--color-border);
 
+  /* Label */
+  --color-label-text: var(--color-text-secondary);
+
   /* Overlay, Dialog, Modal */
   --color-overlay-background: var(--color-surface);
   --color-overlay-text: var(--color-on-surface);
@@ -73,6 +76,10 @@
   --color-property-title-background: var(--color-gray-100);
   --color-property-title-text: var(--color-text-secondary);
 
+  /* Scrollbar */
+  --color-scrollbar-track: #00000033;
+  --color-scrollbar-thumb: var(--color-gray-600);
+
   /* Stepper Bar */
   --color-stepperbar-dot-active: var(--color-primary);
   --color-stepperbar-dot-normal: var(--color-purple-100);
@@ -100,12 +107,15 @@
   --color-tag-red-background: #FEE0DD;
   --color-tag-red-text: #D67268;
   --color-tag-red-icon: #D67268;
-  --color-tag-blue-background: var(--color-blue-50);
-  --color-tag-blue-text: var(--color-blue-800);
-  --color-tag-blue-icon: var(--color-blue-800);
-  --color-tag-pink-background: #CEA3B8;
+  --color-tag-blue-background: #DBE2F3;
+  --color-tag-blue-text: #758ECE;
+  --color-tag-blue-icon: #758ECE;
+  --color-tag-pink-background: #F3DBE7;
   --color-tag-pink-text: #CE75A0;
   --color-tag-pink-icon: #CE75A0;
+  --color-tag-orange-background: #FEEACB;
+  --color-tag-orange-text: #EA8E00;
+  --color-tag-orange-icon: #EA8E00;
 
   /* TextImage */
   --color-text-image-primary-background: var(--color-primary);
@@ -150,6 +160,10 @@
     /* Overlay, Dialog, Modal */
     --color-overlay-shadow: #00000060;
 
+    /* Scrollbar */
+    --color-scrollbar-track: #FFFFFF33;
+    --color-scrollbar-thumb: var(--color-gray-300);
+
     /* Tag */
     --color-tag-dark-background: var(--color-gray-900);
 

package/dist/{css → style}/uncompiled/theme/colors-semantic.css

@@ -37,11 +37,8 @@
   --color-negative-border: var(--color-negative);
   --color-negative-border-hover: var(--color-red-700);
 
-  --color-disabled-background: var(--color-gray-200);
-  --color-disabled-text: var(--color-gray-400);
-  --color-disabled-icon: var(--color-disabled-text);
-  --color-disabled-border: var(--color-gray-300);
-  --color-disabled-outline: var(--color-disabled-border);
+  --color-disabled: var(--color-gray-300);
+  --color-disabled-background: var(--color-gray-100);
 
   /* Surface */
   --color-surface:  var(--color-white);
@@ -79,10 +76,6 @@
     --color-negative: var(--color-red-500);
     --color-negative-border-hover: var(--color-red-600);
 
-    --color-disabled-background: var(--color-gray-800);
-    --color-disabled-text: var(--color-gray-600);
-    --color-disabled-border: var(--color-gray-850);
-
     /* Surface */
     --color-surface: var(--color-gray-800);
     --color-surface-variant: var(--color-gray-700);

package/dist/style/uncompiled/typography.css

@@ -0,0 +1,171 @@
+@theme {
+  /*
+   * text
+   */
+  --text-xs: calc(12 / 16 * 1rem);
+  --text-xs--line-height: calc(15 / 12);
+
+  --text-sm: calc(14 / 16 * 1rem);
+  --text-sm--line-height: calc(17 / 14);
+
+  --text-base: 1rem;
+  --text-base--line-height: calc(19 / 16);
+
+  --text-lg: calc(18 / 16 * 1rem);
+  --text-lg--line-height: calc(23 / 18);
+
+  --text-xl: calc(20 / 16 * 1rem);
+  --text-xl--line-height: calc(26 / 20);
+
+  --text-2xl: calc(22 / 16 * 1rem);
+  --text-2xl--line-height: calc(28 / 22);
+
+  --text-3xl: calc(24 / 16 * 1rem);
+  --text-3xl--line-height: calc(30 / 24);
+
+  --text-4xl: calc(32 / 16 * 1rem);
+  --text-4xl--line-height: calc(40 / 32);
+
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+
+  /*
+   * fonts
+   */
+  --font-inter: 'Inter', sans-serif;
+  --font-space: 'Space Grotesk', sans-serif;
+}
+
+/* Headline */
+@utility typography-headline-lg-bold {
+  @apply text-4xl font-space font-bold;
+}
+
+@utility typography-headline-md-semibold {
+  @apply text-3xl font-space font-semibold;
+}
+
+@utility typography-headline-sm-bold {
+  @apply text-2xl font-space font-bold;
+}
+
+/* Title */
+@utility typography-title-lg-semibold {
+  @apply text-2xl font-space font-semibold;
+}
+
+@utility typography-title-md-semibold {
+  @apply text-lg font-space font-semibold;
+}
+
+@utility typography-title-sm-medium {
+  @apply text-base font-space font-medium;
+}
+
+@utility typography-title-sm-semibold {
+  @apply text-base font-space font-semibold;
+}
+
+/* Body */
+@utility typography-body-lg-regular {
+  @apply text-lg font-normal;
+}
+
+@utility typography-body-lg-medium {
+  @apply text-lg font-medium;
+}
+
+@utility typography-body-lg-semibold {
+  @apply text-lg font-semibold;
+}
+
+@utility typography-body-md-light {
+  @apply text-base font-light;
+}
+
+@utility typography-body-md-regular {
+  @apply text-base font-normal;
+}
+
+@utility typography-body-md-medium {
+  @apply text-base font-medium;
+}
+
+@utility typography-body-md-bold {
+  @apply text-base font-bold;
+}
+
+/* Label */
+@utility typography-label-lg-regular {
+  @apply text-base font-normal;
+}
+
+@utility typography-label-lg-semibold {
+  @apply text-base font-semibold;
+}
+
+@utility typography-label-lg-bold {
+  @apply text-base font-bold;
+}
+
+@utility typography-label-md-regular {
+  @apply text-sm font-normal;
+}
+
+@utility typography-label-md-medium {
+  @apply text-sm font-medium;
+}
+
+@utility typography-label-md-bold {
+  @apply text-sm font-bold;
+}
+
+/* Caption */
+@utility typography-caption-lg-regular {
+  @apply text-lg font-normal;
+}
+
+@utility typography-caption-md-medium {
+  @apply text-base font-medium;
+}
+
+@utility typography-caption-md-bold {
+  @apply text-base font-bold;
+}
+
+@utility typography-caption-sm-regular {
+  @apply text-sm font-normal;
+}
+
+@utility typography-caption-sm-medium {
+  @apply text-sm font-medium;
+}
+
+/* Button */
+@utility typography-button-lg-semibold {
+  @apply text-lg font-semibold;
+}
+
+@utility typography-button-md-semibold {
+  @apply text-base font-semibold;
+}
+
+@utility typography-button-sm-regular {
+  @apply text-sm font-normal;
+}
+
+@utility typography-button-sm-semibold {
+  @apply text-sm font-semibold;
+}

package/dist/{css → style}/uncompiled/utitlity/animation.css

@@ -2,6 +2,56 @@
   animation-delay: calc(--value(number) * 1ms);
 }
 
+@utility animate-pop-in {
+  animation: pop-in 0.2s ease-in-out;
+}
+
+@utility animate-pop-out {
+  animation: pop-out 0.2s ease-in-out forwards;
+}
+
+@utility animate-fade-in {
+  animation: fade-in 0.2s ease-in-out;
+}
+
+@utility animate-fade-out {
+  animation: fade-out 0.2s ease-in-out;
+}
+
+@utility animate-fade {
+  animation: fade-out 3s ease-in-out;
+}
+
+@utility animate-wave-big-left-up {
+  animation: bigLeftUp 1.7s ease-in infinite normal;
+  -webkit-animation: bigLeftUp 1.7s ease-in infinite normal;
+}
+
+@utility animate-wave-big-right-down {
+  animation: bigRightDown 1.7s ease-in infinite reverse;
+  -webkit-animation: bigRightDown 1.7s ease-in infinite reverse;
+}
+
+@utility animate-wave-small-left-up {
+  animation: smallLeftUp 1.7s ease-in infinite normal;
+  -webkit-animation: smallLeftUp 1.7s ease-in infinite normal;
+}
+
+@utility animate-wave-small-right-down {
+  animation: smallRightDown 1.7s ease-in infinite reverse;
+  -webkit-animation: smallRightDown 1.7s ease-in infinite reverse;
+}
+
+@utility animate-tooltip-fade-in {
+  animation: fade-in 0.2s ease-in-out forwards;
+  -webkit-animation: fade-in 0.2s ease-in-out forwards;
+}
+
+@utility animate-tooltip-fade-out {
+  animation: fade-in 0.2s ease-in-out forwards;
+  -webkit-animation: fade-in 0.2s ease-in-out forwards;
+}
+
 @layer utilities {
   @keyframes fade-in {
     0% {
@@ -91,6 +141,10 @@
 
   @keyframes pop-in {
     0% {
+      opacity: 0;
+      scale: 100%; /* Necessary so that the FloatingContainer picks up the correct position */
+    }
+    1% {
       opacity: 0;
       scale: 80%;
     }
@@ -120,14 +174,6 @@
     }
   }
 
-  .animate-pop-in {
-    animation: pop-in 0.2s ease-in-out;
-  }
-
-  .animate-pop-out {
-    animation: pop-out 0.2s ease-in-out forwards;
-  }
-
   .shimmer::before {
     content: '';
     position: absolute;
@@ -145,38 +191,4 @@
     );
     animation: shimmer 2s infinite;
   }
-
-  .animate-fade {
-    animation: fade-out 3s ease-in-out;
-  }
-
-  .animate-wave-big-left-up {
-    animation: bigLeftUp 1.7s ease-in infinite normal;
-    -webkit-animation: bigLeftUp 1.7s ease-in infinite normal;
-  }
-
-  .animate-wave-big-right-down {
-    animation: bigRightDown 1.7s ease-in infinite reverse;
-    -webkit-animation: bigRightDown 1.7s ease-in infinite reverse;
-  }
-
-  .animate-wave-small-left-up {
-    animation: smallLeftUp 1.7s ease-in infinite normal;
-    -webkit-animation: smallLeftUp 1.7s ease-in infinite normal;
-  }
-
-  .animate-wave-small-right-down {
-    animation: smallRightDown 1.7s ease-in infinite reverse;
-    -webkit-animation: smallRightDown 1.7s ease-in infinite reverse;
-  }
-
-  .animate-tooltip-fade-in {
-    animation: fade-in 0.2s ease-in-out forwards;
-    -webkit-animation: fade-in 0.2s ease-in-out forwards;
-  }
-
-  .animate-tooltip-fade-out {
-    animation: fade-in 0.2s ease-in-out forwards;
-    -webkit-animation: fade-in 0.2s ease-in-out forwards;
-  }
 }

package/dist/{css → style}/uncompiled/utitlity/index.css

@@ -1,4 +1,5 @@
 @import "./general.css";
 @import "./borderradius.css";
 @import "./animation.css";
-@import "./shadow.css";
+@import "./shadow.css";
+@import "./sizing.css";

package/dist/{css → style}/uncompiled/utitlity/shadow.css

@@ -32,13 +32,17 @@
 }
 
 @utility shadow-strong {
-  --tw-shadow-color: rgba(0, 0, 0, 0.06);
+  --tw-shadow-color: rgba(0, 0, 0, 0.05);
 }
 
 @utility shadow-hard {
   --tw-shadow-color: rgba(0, 0, 0, 0.10);
 }
 
+@utility shadow-hw-bottom {
+  --shadow-bottom: 0 calc(1rem/16) calc(20rem/16) 0 var(--tw-shadow-color, rgb(0 0 0 / 10%));
+}
+
 @layer utilities {
   .shadow-around {
     @apply shadow-around-2;

package/dist/style/uncompiled/utitlity/sizing.css

@@ -0,0 +1,29 @@
+@utility h-force-* {
+  height: calc(var(--spacing) * --value(number));
+  min-height: calc(var(--spacing) * --value(number));
+  max-height: calc(var(--spacing) * --value(number));
+}
+
+@utility w-force-* {
+  width: calc(var(--spacing) * --value(number));
+  min-width: calc(var(--spacing) * --value(number));
+  max-width: calc(var(--spacing) * --value(number));
+}
+
+@utility size-force-* {
+  height: calc(var(--spacing) * --value(number));
+  min-height: calc(var(--spacing) * --value(number));
+  max-height: calc(var(--spacing) * --value(number));
+  width: calc(var(--spacing) * --value(number));
+  min-width: calc(var(--spacing) * --value(number));
+  max-width: calc(var(--spacing) * --value(number));
+}
+
+@utility size-force-nonscaling-* {
+  height: calc(--value(number));
+  width: calc(--value(number));
+  min-height: calc(--value(number));
+  min-width: calc(--value(number));
+  max-height: calc(--value(number));
+  max-width: calc(--value(number));
+}

package/dist/theming/useTheme.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
+import * as React from 'react';
 import { Dispatch, SetStateAction, PropsWithChildren } from 'react';
 import { TranslationPlural, Translation } from '../localization/useTranslation.mjs';
 import '../localization/util.mjs';
@@ -17,7 +17,7 @@ type ThemeContextType = {
     theme: ThemeType;
     setTheme: Dispatch<SetStateAction<ThemeType>>;
 };
-declare const ThemeContext: react.Context<ThemeContextType>;
+declare const ThemeContext: React.Context<ThemeContextType>;
 type ThemeProviderProps = {
     initialTheme?: ThemeType;
 };

package/dist/theming/useTheme.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
+import * as React from 'react';
 import { Dispatch, SetStateAction, PropsWithChildren } from 'react';
 import { TranslationPlural, Translation } from '../localization/useTranslation.js';
 import '../localization/util.js';
@@ -17,7 +17,7 @@ type ThemeContextType = {
     theme: ThemeType;
     setTheme: Dispatch<SetStateAction<ThemeType>>;
 };
-declare const ThemeContext: react.Context<ThemeContextType>;
+declare const ThemeContext: React.Context<ThemeContextType>;
 type ThemeProviderProps = {
     initialTheme?: ThemeType;
 };

package/dist/theming/useTheme.js

@@ -28,13 +28,13 @@ module.exports = __toCommonJS(useTheme_exports);
 var import_react2 = require("react");
 var import_react3 = require("react");
 
-// src/util/noop.ts
+// src/utils/noop.ts
 var noop = () => void 0;
 
 // src/hooks/useLocalStorage.ts
 var import_react = require("react");
 
-// src/util/storage.ts
+// src/utils/storage.ts
 var StorageService = class {
   // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript
   constructor(storage) {
@@ -63,7 +63,7 @@ var LocalStorageService = class extends StorageService {
   }
 };
 
-// src/util/resolveSetState.ts
+// src/utils/resolveSetState.ts
 function resolveSetState(action, prev) {
   return typeof action === "function" ? action(prev) : action;
 }
@@ -136,7 +136,7 @@ var ThemeProvider = ({ children, initialTheme }) => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     setUserTheme(prefersDark ? "dark" : "light");
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: { theme: usedTheme, setTheme: setStoredTheme }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value: { theme: storedTheme, setTheme: setStoredTheme }, children });
 };
 var useTheme = () => (0, import_react3.useContext)(ThemeContext);
 // Annotate the CommonJS export names for ESM import in node:

package/dist/theming/useTheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theming/useTheme.tsx","../../src/util/noop.ts","../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts","../../src/util/resolveSetState.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { useMemo } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport type { Translation, TranslationPlural } from '../localization/useTranslation'\nimport { noop } from '../util/noop'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\n\nconst themes = ['light', 'dark', 'system'] as const\n\nexport type ThemeType = typeof themes[number]\n\nexport type ThemeTypeTranslation = Record<ThemeType, string> & {\n  theme: TranslationPlural,\n}\n\nconst defaultThemeTypeTranslation: Translation<ThemeTypeTranslation> = {\n  en: {\n    dark: 'Dark',\n    light: 'Light',\n    system: 'System',\n    theme: {\n      one: 'Theme',\n      other: 'Themes'\n    }\n  },\n  de: {\n    dark: 'Dunkel',\n    light: 'Hell',\n    system: 'System',\n    theme: {\n      one: 'Farbschema',\n      other: 'Farbschemas'\n    }\n  }\n}\n\nexport const ThemeUtil = {\n  themes,\n  translation: defaultThemeTypeTranslation,\n}\n\ntype ThemeContextType = {\n  theme: ThemeType,\n  setTheme: Dispatch<SetStateAction<ThemeType>>,\n}\n\nexport const ThemeContext = createContext<ThemeContextType>({\n  theme: 'light',\n  setTheme: noop\n})\n\ntype ThemeProviderProps = {\n  initialTheme?: ThemeType,\n}\n\nexport const ThemeProvider = ({ children, initialTheme }: PropsWithChildren<ThemeProviderProps>) => {\n  const [storedTheme, setStoredTheme] = useLocalStorage<ThemeType>('theme', initialTheme ?? 'system')\n  const [userTheme, setUserTheme] = useState<ThemeType>()\n\n  useEffect(() => {\n    if (!!initialTheme && storedTheme !== initialTheme) {\n      console.warn('ThemeProvider initial state changed: Prefer using useTheme\\'s setTheme instead')\n      setStoredTheme(initialTheme)\n    }\n  }, [initialTheme]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const usedTheme = useMemo(() => storedTheme !== 'system' ? storedTheme : userTheme, [storedTheme, userTheme])\n\n  useEffect(() => {\n    document.documentElement.setAttribute('data-theme', usedTheme)\n  }, [usedTheme])\n\n  useEffect(() => {\n    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n    setUserTheme(prefersDark ? 'dark' : 'light')\n  }, [])\n\n  return (\n    <ThemeContext.Provider value={{ theme: usedTheme, setTheme: setStoredTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n\n\nexport const useTheme = () => useContext(ThemeContext)\n","export const noop = () => undefined\n","'use client'\n\nimport type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\nimport { resolveSetState } from '../util/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const 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(action => {\n    const newValue = resolveSetState(action, storedValue)\n    const storageService = new LocalStorageService()\n    storageService.set(key, newValue)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  return [storedValue, setValue]\n}","class StorageService {\n  // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n  constructor(private storage: Storage) {\n  }\n\n  public get<T>(key: string): T | null {\n    const value = this.storage.getItem(key)\n    if (value === null) {\n      return null\n    }\n    return JSON.parse(value)\n  }\n\n  public set<T>(key: string, value: T) {\n    this.storage.setItem(key, JSON.stringify(value))\n  }\n\n  public delete(key: string) {\n    this.storage.removeItem(key)\n  }\n\n  public deleteAll() {\n    this.storage.clear()\n  }\n}\n\nexport class LocalStorageService extends StorageService {\n  constructor() {\n    super(window.localStorage)\n  }\n}\n\nexport class SessionStorageService extends StorageService {\n  constructor() {\n    super(window.sessionStorage)\n  }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n  return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}"],"mappings":"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","names":["import_react"]}
+{"version":3,"sources":["../../src/theming/useTheme.tsx","../../src/utils/noop.ts","../../src/hooks/useLocalStorage.ts","../../src/utils/storage.ts","../../src/utils/resolveSetState.ts"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { useMemo } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport type { Translation, TranslationPlural } from '../localization/useTranslation'\nimport { noop } from '@/src/utils/noop'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\n\nconst themes = ['light', 'dark', 'system'] as const\n\nexport type ThemeType = typeof themes[number]\n\nexport type ThemeTypeTranslation = Record<ThemeType, string> & {\n  theme: TranslationPlural,\n}\n\nconst defaultThemeTypeTranslation: Translation<ThemeTypeTranslation> = {\n  en: {\n    dark: 'Dark',\n    light: 'Light',\n    system: 'System',\n    theme: {\n      one: 'Theme',\n      other: 'Themes'\n    }\n  },\n  de: {\n    dark: 'Dunkel',\n    light: 'Hell',\n    system: 'System',\n    theme: {\n      one: 'Farbschema',\n      other: 'Farbschemas'\n    }\n  }\n}\n\nexport const ThemeUtil = {\n  themes,\n  translation: defaultThemeTypeTranslation,\n}\n\ntype ThemeContextType = {\n  theme: ThemeType,\n  setTheme: Dispatch<SetStateAction<ThemeType>>,\n}\n\nexport const ThemeContext = createContext<ThemeContextType>({\n  theme: 'light',\n  setTheme: noop\n})\n\ntype ThemeProviderProps = {\n  initialTheme?: ThemeType,\n}\n\nexport const ThemeProvider = ({ children, initialTheme }: PropsWithChildren<ThemeProviderProps>) => {\n  const [storedTheme, setStoredTheme] = useLocalStorage<ThemeType>('theme', initialTheme ?? 'system')\n  const [userTheme, setUserTheme] = useState<ThemeType>()\n\n  useEffect(() => {\n    if (!!initialTheme && storedTheme !== initialTheme) {\n      console.warn('ThemeProvider initial state changed: Prefer using useTheme\\'s setTheme instead')\n      setStoredTheme(initialTheme)\n    }\n  }, [initialTheme]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const usedTheme = useMemo(() => storedTheme !== 'system' ? storedTheme : userTheme, [storedTheme, userTheme])\n\n  useEffect(() => {\n    document.documentElement.setAttribute('data-theme', usedTheme)\n  }, [usedTheme])\n\n  useEffect(() => {\n    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches\n    setUserTheme(prefersDark ? 'dark' : 'light')\n  }, [])\n\n  return (\n    <ThemeContext.Provider value={{ theme: storedTheme, setTheme: setStoredTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n\n\nexport const useTheme = () => useContext(ThemeContext)\n","export const noop = () => undefined\n","'use client'\n\nimport type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useState } from 'react'\nimport { LocalStorageService } from '@/src/utils/storage'\nimport { resolveSetState } from '@/src/utils/resolveSetState'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const 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(action => {\n    const newValue = resolveSetState(action, storedValue)\n    const storageService = new LocalStorageService()\n    storageService.set(key, newValue)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  return [storedValue, setValue]\n}","class StorageService {\n  // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript\n\n  constructor(private storage: Storage) {\n  }\n\n  public get<T>(key: string): T | null {\n    const value = this.storage.getItem(key)\n    if (value === null) {\n      return null\n    }\n    return JSON.parse(value)\n  }\n\n  public set<T>(key: string, value: T) {\n    this.storage.setItem(key, JSON.stringify(value))\n  }\n\n  public delete(key: string) {\n    this.storage.removeItem(key)\n  }\n\n  public deleteAll() {\n    this.storage.clear()\n  }\n}\n\nexport class LocalStorageService extends StorageService {\n  constructor() {\n    super(window.localStorage)\n  }\n}\n\nexport class SessionStorageService extends StorageService {\n  constructor() {\n    super(window.sessionStorage)\n  }\n}\n","import type { SetStateAction } from 'react'\n\nexport function resolveSetState<T>(action: SetStateAction<T>, prev: T): T {\n  return typeof action === 'function' ? (action as (prev: T) => T)(prev) : action\n}"],"mappings":"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","names":["import_react"]}

package/dist/theming/useTheme.mjs

@@ -2,13 +2,13 @@
 import { useMemo } from "react";
 import { createContext, useContext, useEffect, useState as useState2 } from "react";
 
-// src/util/noop.ts
+// src/utils/noop.ts
 var noop = () => void 0;
 
 // src/hooks/useLocalStorage.ts
 import { useCallback, useState } from "react";
 
-// src/util/storage.ts
+// src/utils/storage.ts
 var StorageService = class {
   // this seems to be a bug in eslint as 'paramter-properties' is a special syntax of typescript
   constructor(storage) {
@@ -37,7 +37,7 @@ var LocalStorageService = class extends StorageService {
   }
 };
 
-// src/util/resolveSetState.ts
+// src/utils/resolveSetState.ts
 function resolveSetState(action, prev) {
   return typeof action === "function" ? action(prev) : action;
 }
@@ -110,7 +110,7 @@ var ThemeProvider = ({ children, initialTheme }) => {
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     setUserTheme(prefersDark ? "dark" : "light");
   }, []);
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme: usedTheme, setTheme: setStoredTheme }, children });
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme: storedTheme, setTheme: setStoredTheme }, children });
 };
 var useTheme = () => useContext(ThemeContext);
 export {