@helpwave/hightide 0.0.13 → 0.0.16

package/dist/components/Ring.mjs

@@ -0,0 +1,299 @@
+// src/components/Ring.tsx
+import { useCallback, useEffect, useState } from "react";
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/Circle.tsx
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+var Circle = ({
+  radius = 20,
+  className = "bg-primary",
+  style,
+  ...restProps
+}) => {
+  const size = radius * 2;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(`rounded-full`, className),
+      style: {
+        width: `${size}px`,
+        height: `${size}px`,
+        ...style
+      },
+      ...restProps
+    }
+  );
+};
+
+// src/components/Ring.tsx
+import clsx2 from "clsx";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Ring = ({
+  innerSize = 20,
+  width = 7,
+  className = "outline-primary"
+}) => {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: clsx2(`bg-transparent rounded-full outline`, className),
+      style: {
+        width: `${innerSize}px`,
+        height: `${innerSize}px`,
+        outlineWidth: `${width}px`
+      }
+    }
+  );
+};
+var AnimatedRing = ({
+  innerSize,
+  width,
+  className,
+  fillAnimationDuration = 3,
+  repeating = false,
+  onAnimationFinished = noop,
+  style
+}) => {
+  const [currentWidth, setCurrentWidth] = useState(0);
+  const milliseconds = 1e3 * fillAnimationDuration;
+  const animate = useCallback((timestamp, startTime) => {
+    const progress = Math.min((timestamp - startTime) / milliseconds, 1);
+    const newWidth = Math.min(width * progress, width);
+    setCurrentWidth(newWidth);
+    if (progress < 1) {
+      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime));
+    } else {
+      onAnimationFinished();
+      if (repeating) {
+        setCurrentWidth(0);
+        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp));
+      }
+    }
+  }, [milliseconds, onAnimationFinished, repeating, width]);
+  useEffect(() => {
+    if (currentWidth < width) {
+      requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
+    }
+  }, []);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "row items-center justify-center",
+      style: {
+        width: `${innerSize + 2 * width}px`,
+        height: `${innerSize + 2 * width}px`,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx2(
+        Ring,
+        {
+          innerSize,
+          width: currentWidth,
+          className
+        }
+      )
+    }
+  );
+};
+var RingWave = ({
+  startInnerSize = 20,
+  endInnerSize = 30,
+  width,
+  className,
+  fillAnimationDuration = 3,
+  repeating = false,
+  onAnimationFinished = noop,
+  style
+}) => {
+  const [currentInnerSize, setCurrentInnerSize] = useState(startInnerSize);
+  const distance = endInnerSize - startInnerSize;
+  const milliseconds = 1e3 * fillAnimationDuration;
+  const animate = useCallback((timestamp, startTime) => {
+    const progress = Math.min((timestamp - startTime) / milliseconds, 1);
+    const newInnerSize = Math.min(
+      startInnerSize + distance * progress,
+      endInnerSize
+    );
+    setCurrentInnerSize(newInnerSize);
+    if (progress < 1) {
+      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime));
+    } else {
+      onAnimationFinished();
+      if (repeating) {
+        setCurrentInnerSize(startInnerSize);
+        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp));
+      }
+    }
+  }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
+  useEffect(() => {
+    if (currentInnerSize < endInnerSize) {
+      requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
+    }
+  }, []);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "row items-center justify-center",
+      style: {
+        width: `${endInnerSize + 2 * width}px`,
+        height: `${endInnerSize + 2 * width}px`,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx2(
+        Ring,
+        {
+          innerSize: currentInnerSize,
+          width,
+          className
+        }
+      )
+    }
+  );
+};
+var RadialRings = ({
+  circle1ClassName = "bg-primary/90 outline-primary/90",
+  circle2ClassName = "bg-primary/60 outline-primary/60",
+  circle3ClassName = "bg-primary/40 outline-primary/40",
+  waveWidth = 10,
+  waveBaseColor = "outline-white/20",
+  sizeCircle1 = 100,
+  sizeCircle2 = 200,
+  sizeCircle3 = 300
+}) => {
+  const [currentRing, setCurrentRing] = useState(0);
+  const size = sizeCircle3;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative",
+      style: {
+        width: `${sizeCircle3}px`,
+        height: `${sizeCircle3}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          Circle,
+          {
+            radius: sizeCircle1 / 2,
+            className: clsx2(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`
+            }
+          }
+        ),
+        currentRing === 0 ? /* @__PURE__ */ jsx2(
+          AnimatedRing,
+          {
+            innerSize: sizeCircle1,
+            width: (sizeCircle2 - sizeCircle1) / 2,
+            onAnimationFinished: () => currentRing === 0 ? setCurrentRing(1) : null,
+            repeating: true,
+            className: clsx2(
+              circle2ClassName,
+              { "opacity-5": currentRing !== 0 }
+            ),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 9
+            }
+          }
+        ) : null,
+        currentRing === 2 ? /* @__PURE__ */ jsx2(
+          RingWave,
+          {
+            startInnerSize: sizeCircle1 - waveWidth,
+            endInnerSize: sizeCircle2,
+            width: waveWidth,
+            repeating: true,
+            className: clsx2(waveBaseColor, `opacity-5`),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 9
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx2(
+          Circle,
+          {
+            radius: sizeCircle2 / 2,
+            className: clsx2(
+              circle2ClassName,
+              { "opacity-20": currentRing < 1 },
+              `absolute z-[8] -translate-y-1/2 -translate-x-1/2`
+            ),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`
+            }
+          }
+        ),
+        currentRing === 1 ? /* @__PURE__ */ jsx2(
+          AnimatedRing,
+          {
+            innerSize: sizeCircle2 - 1,
+            width: (sizeCircle3 - sizeCircle2) / 2,
+            onAnimationFinished: () => currentRing === 1 ? setCurrentRing(2) : null,
+            repeating: true,
+            className: clsx2(circle3ClassName),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 7
+            }
+          }
+        ) : null,
+        currentRing === 2 ? /* @__PURE__ */ jsx2(
+          RingWave,
+          {
+            startInnerSize: sizeCircle2,
+            endInnerSize: sizeCircle3 - waveWidth,
+            width: waveWidth,
+            repeating: true,
+            className: clsx2(waveBaseColor, `opacity-5`),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`,
+              position: "absolute",
+              translate: `-50% -50%`,
+              zIndex: 7
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx2(
+          Circle,
+          {
+            radius: sizeCircle3 / 2,
+            className: clsx2(
+              circle3ClassName,
+              { "opacity-20": currentRing < 2 },
+              `absolute z-[6] -translate-y-1/2 -translate-x-1/2`
+            ),
+            style: {
+              left: `${size / 2}px`,
+              top: `${size / 2}px`
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  AnimatedRing,
+  RadialRings,
+  Ring,
+  RingWave
+};
+//# sourceMappingURL=Ring.mjs.map

package/dist/components/Ring.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Ring.tsx","../../src/util/noop.ts","../../src/components/Circle.tsx"],"sourcesContent":["import type { CSSProperties } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { noop } from '../util/noop'\nimport { Circle } from './Circle'\nimport clsx from 'clsx'\n\nexport type RingProps = {\n  innerSize: number, // the size of the entire circle including the circleWidth\n  width: number,\n  className?: string,\n};\n\nexport const Ring = ({\n                       innerSize = 20,\n                       width = 7,\n                       className = 'outline-primary',\n                     }: RingProps) => {\n  return (\n    <div\n      className={clsx(`bg-transparent rounded-full outline`, className)}\n      style={{\n        width: `${innerSize}px`,\n        height: `${innerSize}px`,\n        outlineWidth: `${width}px`,\n      }}\n    />\n  )\n}\n\nexport type AnimatedRingProps = RingProps & {\n  fillAnimationDuration?: number, // in seconds, 0 means no animation\n  repeating?: boolean,\n  onAnimationFinished?: () => void,\n  style?: CSSProperties,\n};\n\nexport const AnimatedRing = ({\n                               innerSize,\n                               width,\n                               className,\n                               fillAnimationDuration = 3,\n                               repeating = false,\n                               onAnimationFinished = noop,\n                               style,\n                             }: AnimatedRingProps) => {\n  const [currentWidth, setCurrentWidth] = useState(0)\n  const milliseconds = 1000 * fillAnimationDuration\n\n  const animate = useCallback((timestamp: number, startTime: number) => {\n    const progress = Math.min((timestamp - startTime) / milliseconds, 1)\n    const newWidth = Math.min(width * progress, width)\n\n    setCurrentWidth(newWidth)\n\n    if (progress < 1) {\n      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime))\n    } else {\n      onAnimationFinished()\n      if (repeating) {\n        setCurrentWidth(0)\n        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp))\n      }\n    }\n  }, [milliseconds, onAnimationFinished, repeating, width])\n\n  useEffect(() => {\n    if (currentWidth < width) {\n      requestAnimationFrame((timestamp) => animate(timestamp, timestamp))\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div\n      className=\"row items-center justify-center\"\n      style={{\n        width: `${innerSize + 2 * width}px`,\n        height: `${innerSize + 2 * width}px`,\n        ...style,\n      }}\n    >\n      <Ring\n        innerSize={innerSize}\n        width={currentWidth}\n        className={className}\n      />\n    </div>\n  )\n}\n\nexport type RingWaveProps = Omit<AnimatedRingProps, 'innerSize'> & {\n  startInnerSize: number,\n  endInnerSize: number,\n  style?: CSSProperties,\n};\n\nexport const RingWave = ({\n                           startInnerSize = 20,\n                           endInnerSize = 30,\n                           width,\n                           className,\n                           fillAnimationDuration = 3,\n                           repeating = false,\n                           onAnimationFinished = noop,\n                           style\n                         }: RingWaveProps) => {\n  const [currentInnerSize, setCurrentInnerSize] = useState(startInnerSize)\n  const distance = endInnerSize - startInnerSize\n  const milliseconds = 1000 * fillAnimationDuration\n\n  const animate = useCallback((timestamp: number, startTime: number) => {\n    const progress = Math.min((timestamp - startTime) / milliseconds, 1)\n    const newInnerSize = Math.min(\n      startInnerSize + distance * progress,\n      endInnerSize\n    )\n\n    setCurrentInnerSize(newInnerSize)\n\n    if (progress < 1) {\n      requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime))\n    } else {\n      onAnimationFinished()\n      if (repeating) {\n        setCurrentInnerSize(startInnerSize)\n        requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp))\n      }\n    }\n  }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize])\n\n  useEffect(() => {\n    if (currentInnerSize < endInnerSize) {\n      requestAnimationFrame((timestamp) => animate(timestamp, timestamp))\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div\n      className=\"row items-center justify-center\"\n      style={{\n        width: `${endInnerSize + 2 * width}px`,\n        height: `${endInnerSize + 2 * width}px`,\n        ...style\n      }}\n    >\n      <Ring\n        innerSize={currentInnerSize}\n        width={width}\n        className={className}\n      />\n    </div>\n  )\n}\n\nexport type RadialRingsProps = {\n  circle1ClassName?: string,\n  circle2ClassName?: string,\n  circle3ClassName?: string,\n  waveWidth?: number,\n  waveBaseColor?: string,\n  sizeCircle1?: number,\n  sizeCircle2?: number,\n  sizeCircle3?: number,\n};\n\n// TODO use fixed colors here to avoid artifacts\nexport const RadialRings = ({\n                              circle1ClassName = 'bg-primary/90 outline-primary/90',\n                              circle2ClassName = 'bg-primary/60 outline-primary/60',\n                              circle3ClassName = 'bg-primary/40 outline-primary/40',\n                              waveWidth = 10,\n                              waveBaseColor = 'outline-white/20',\n                              sizeCircle1 = 100,\n                              sizeCircle2 = 200,\n                              sizeCircle3 = 300\n                            }: RadialRingsProps) => {\n  const [currentRing, setCurrentRing] = useState(0)\n  const size = sizeCircle3\n\n  return (\n    <div\n      className=\"relative\"\n      style={{\n        width: `${sizeCircle3}px`,\n        height: `${sizeCircle3}px`,\n      }}\n    >\n      <Circle\n        radius={sizeCircle1 / 2}\n        className={clsx(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`)}\n        style={{\n          left: `${size / 2}px`,\n          top: `${size / 2}px`\n        }}\n      />\n      {currentRing === 0 ? (\n        <AnimatedRing\n          innerSize={sizeCircle1}\n          width={(sizeCircle2 - sizeCircle1) / 2}\n          onAnimationFinished={() =>\n            currentRing === 0 ? setCurrentRing(1) : null\n          }\n          repeating={true}\n          className={clsx(circle2ClassName,\n            { 'opacity-5': currentRing !== 0 })}\n          style={{\n            left: `${size / 2}px`,\n            top: `${size / 2}px`,\n            position: 'absolute',\n            translate: `-50% -50%`,\n            zIndex: 9\n          }}\n        />\n      ) : null}\n      {currentRing === 2 ? (\n        <RingWave\n          startInnerSize={sizeCircle1 - waveWidth}\n          endInnerSize={sizeCircle2}\n          width={waveWidth}\n          repeating={true}\n          className={clsx(waveBaseColor, `opacity-5`)}\n          style={{\n            left: `${size / 2}px`,\n            top: `${size / 2}px`,\n            position: 'absolute',\n            translate: `-50% -50%`,\n            zIndex: 9,\n          }}\n        />\n      ) : null}\n      <Circle\n        radius={sizeCircle2 / 2}\n        className={clsx(circle2ClassName,\n          { 'opacity-20': currentRing < 1 },\n          `absolute z-[8] -translate-y-1/2 -translate-x-1/2`)}\n        style={{\n          left: `${size / 2}px`,\n          top: `${size / 2}px`\n        }}\n      />\n      {currentRing === 1 ? (\n        <AnimatedRing\n          innerSize={sizeCircle2 - 1} // potentially harmful\n          width={(sizeCircle3 - sizeCircle2) / 2}\n          onAnimationFinished={() =>\n            currentRing === 1 ? setCurrentRing(2) : null\n          }\n          repeating={true}\n          className={clsx(circle3ClassName)}\n          style={{\n            left: `${size / 2}px`,\n            top: `${size / 2}px`,\n            position: 'absolute',\n            translate: `-50% -50%`,\n            zIndex: 7,\n          }}\n        />\n      ) : null}\n      {currentRing === 2 ? (\n        <RingWave\n          startInnerSize={sizeCircle2}\n          endInnerSize={sizeCircle3 - waveWidth}\n          width={waveWidth}\n          repeating={true}\n          className={clsx(waveBaseColor, `opacity-5`)}\n          style={{\n            left: `${size / 2}px`,\n            top: `${size / 2}px`,\n            position: 'absolute',\n            translate: `-50% -50%`,\n            zIndex: 7,\n          }}\n        />\n      ) : null}\n      <Circle\n        radius={sizeCircle3 / 2}\n        className={clsx(circle3ClassName,\n          { 'opacity-20': currentRing < 2 },\n          `absolute z-[6] -translate-y-1/2 -translate-x-1/2`)}\n        style={{\n          left: `${size / 2}px`,\n          top: `${size / 2}px`\n        }}\n      />\n    </div>\n  )\n}\n","export const noop = () => undefined\n","import type { HTMLAttributes } from 'react'\nimport clsx from 'clsx'\n\nexport type CircleProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color'> & {\n  radius: number,\n  className?: string,\n}\n\nexport const Circle = ({\n  radius = 20,\n  className = 'bg-primary',\n  style,\n  ...restProps\n}: CircleProps) => {\n  const size = radius * 2\n  return (\n    <div\n      className={clsx(`rounded-full`, className)}\n      style={{\n        width: `${size}px`,\n        height: `${size}px`,\n        ...style,\n      }}\n      {...restProps}\n    />\n  )\n}\n"],"mappings":"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","names":["clsx","jsx"]}

package/dist/components/SearchableList.d.mts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { PropsForTranslation } from '../hooks/useTranslation.mjs';
+import '../hooks/useLanguage.mjs';
+
+type SearchableListTranslation = {
+    search: string;
+    nothingFound: string;
+};
+type SearchableListProps<T> = {
+    list: T[];
+    initialSearch?: string;
+    searchMapping: (value: T) => string[];
+    itemMapper: (value: T) => ReactNode;
+    className?: string;
+};
+/**
+ * A component for searching a list
+ */
+declare const SearchableList: <T>({ overwriteTranslation, list, initialSearch, searchMapping, itemMapper, className }: PropsForTranslation<SearchableListTranslation, SearchableListProps<T>>) => react_jsx_runtime.JSX.Element;
+
+export { SearchableList, type SearchableListProps };

package/dist/components/SearchableList.d.ts

@@ -1,10 +1,13 @@
-import type { ReactNode } from 'react';
-import type { PropsForTranslation } from '../hooks/useTranslation';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { PropsForTranslation } from '../hooks/useTranslation.js';
+import '../hooks/useLanguage.js';
+
 type SearchableListTranslation = {
     search: string;
     nothingFound: string;
 };
-export type SearchableListProps<T> = {
+type SearchableListProps<T> = {
     list: T[];
     initialSearch?: string;
     searchMapping: (value: T) => string[];
@@ -14,5 +17,6 @@ export type SearchableListProps<T> = {
 /**
  * A component for searching a list
  */
-export declare const SearchableList: <T>({ overwriteTranslation, list, initialSearch, searchMapping, itemMapper, className }: PropsForTranslation<SearchableListTranslation, SearchableListProps<T>>) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const SearchableList: <T>({ overwriteTranslation, list, initialSearch, searchMapping, itemMapper, className }: PropsForTranslation<SearchableListTranslation, SearchableListProps<T>>) => react_jsx_runtime.JSX.Element;
+
+export { SearchableList, type SearchableListProps };

package/dist/components/SearchableList.js

@@ -1,27 +1,271 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { Search } from 'lucide-react';
-import clsx from 'clsx';
-import { useTranslation } from '../hooks/useTranslation';
-import { MultiSearchWithMapping } from '../util/simpleSearch';
-import { Input } from './user-input/Input';
-const defaultSearchableListTranslation = {
-    en: {
-        search: 'Search',
-        nothingFound: 'Nothing found'
-    },
-    de: {
-        search: 'Suche',
-        nothingFound: 'Nichts gefunden'
+"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/SearchableList.tsx
+var SearchableList_exports = {};
+__export(SearchableList_exports, {
+  SearchableList: () => SearchableList
+});
+module.exports = __toCommonJS(SearchableList_exports);
+var import_react5 = require("react");
+var import_lucide_react = require("lucide-react");
+var import_clsx2 = __toESM(require("clsx"));
+
+// src/hooks/useLanguage.tsx
+var import_react2 = require("react");
+
+// src/hooks/useLocalStorage.tsx
+var import_react = require("react");
+
+// src/hooks/useLanguage.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_LANGUAGE = "en";
+var LanguageContext = (0, import_react2.createContext)({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
+var useLanguage = () => (0, import_react2.useContext)(LanguageContext);
+
+// src/hooks/useTranslation.ts
+var useTranslation = (defaults, translationOverwrite = {}) => {
+  const { language: languageProp, translation: overwrite } = translationOverwrite;
+  const { language: inferredLanguage } = useLanguage();
+  const usedLanguage = languageProp ?? inferredLanguage;
+  let defaultValues = defaults[usedLanguage];
+  if (overwrite && overwrite[usedLanguage]) {
+    defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
+  }
+  return defaultValues;
+};
+
+// src/util/simpleSearch.ts
+var MultiSearchWithMapping = (search, objects, mapping) => {
+  return objects.filter((object) => {
+    const mappedSearchKeywords = mapping(object).map((value) => value.toLowerCase().trim());
+    return !!mappedSearchKeywords.find((value) => value.includes(search.toLowerCase().trim()));
+  });
+};
+
+// src/components/user-input/Input.tsx
+var import_react4 = require("react");
+var import_clsx = __toESM(require("clsx"));
+
+// src/hooks/useSaveDelay.ts
+var import_react3 = require("react");
+function useSaveDelay(setNotificationStatus, delay) {
+  const [updateTimer, setUpdateTimer] = (0, import_react3.useState)(void 0);
+  const [notificationTimer, setNotificationTimer] = (0, import_react3.useState)(void 0);
+  const restartTimer = (onSave) => {
+    clearTimeout(updateTimer);
+    setUpdateTimer(setTimeout(() => {
+      onSave();
+      setNotificationStatus(true);
+      clearTimeout(notificationTimer);
+      setNotificationTimer(setTimeout(() => {
+        setNotificationStatus(false);
+        clearTimeout(notificationTimer);
+      }, delay));
+      clearTimeout(updateTimer);
+    }, delay));
+  };
+  const clearUpdateTimer = (hasSaved = true) => {
+    clearTimeout(updateTimer);
+    if (hasSaved) {
+      setNotificationStatus(true);
+      clearTimeout(notificationTimer);
+      setNotificationTimer(setTimeout(() => {
+        setNotificationStatus(false);
+        clearTimeout(notificationTimer);
+      }, delay));
+    } else {
+      setNotificationStatus(false);
+    }
+  };
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      clearTimeout(updateTimer);
+      clearTimeout(notificationTimer);
+    };
+  }, []);
+  return { restartTimer, clearUpdateTimer };
+}
+var useSaveDelay_default = useSaveDelay;
+
+// src/util/noop.ts
+var noop = () => void 0;
+
+// src/components/user-input/Label.tsx
+var import_jsx_runtime2 = 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_runtime2.jsx)("label", { ...props, children: children ? children : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styleMapping[labelType], children: name }) });
+};
+
+// src/components/user-input/Input.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ControlledInput = ({
+  id,
+  type = "text",
+  value,
+  label,
+  onChange = noop,
+  onChangeEvent = noop,
+  className = "",
+  onEditCompleted,
+  expanded = true,
+  onBlur,
+  containerClassName,
+  ...restProps
+}) => {
+  const {
+    restartTimer,
+    clearUpdateTimer
+  } = useSaveDelay_default(() => void 0, 3e3);
+  const ref = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (restProps.autoFocus) {
+      ref.current?.focus();
+    }
+  }, [restProps.autoFocus]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx.default)({ "w-full": expanded }, containerClassName), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Label, { ...label, htmlFor: id, className: (0, import_clsx.default)("mb-1", label.className) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "input",
+      {
+        ref,
+        value,
+        id,
+        type,
+        className: (0, import_clsx.default)("block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary", className),
+        onBlur: (event) => {
+          if (onBlur) {
+            onBlur(event);
+          }
+          if (onEditCompleted) {
+            onEditCompleted(event.target.value, event);
+            clearUpdateTimer();
+          }
+        },
+        onChange: (e) => {
+          const value2 = e.target.value;
+          if (onEditCompleted) {
+            restartTimer(() => {
+              onEditCompleted(value2, e);
+              clearUpdateTimer();
+            });
+          }
+          onChange(value2, e);
+          onChangeEvent(e);
+        },
+        ...restProps
+      }
+    )
+  ] });
+};
+var FormInput = (0, import_react4.forwardRef)(function FormInput2({
+  id,
+  labelText,
+  errorText,
+  className,
+  labelClassName,
+  errorClassName,
+  containerClassName,
+  required,
+  ...restProps
+}, ref) {
+  const input = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "input",
+    {
+      ref,
+      id,
+      ...restProps,
+      className: (0, import_clsx.default)(
+        "block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary",
+        {
+          "focus:border-primary focus:ring-primary": !errorText,
+          "focus:border-negative focus:ring-negative text-negative": !!errorText
+        },
+        className
+      )
     }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx.default)("flex flex-col gap-y-1", containerClassName), children: [
+    labelText && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { htmlFor: id, className: (0, import_clsx.default)("textstyle-label-md", labelClassName), children: [
+      labelText,
+      required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-primary font-bold", children: "*" })
+    ] }),
+    input,
+    errorText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: id, className: (0, import_clsx.default)("text-negative", errorClassName), children: errorText })
+  ] });
+});
+
+// src/components/SearchableList.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var defaultSearchableListTranslation = {
+  en: {
+    search: "Search",
+    nothingFound: "Nothing found"
+  },
+  de: {
+    search: "Suche",
+    nothingFound: "Nichts gefunden"
+  }
 };
-/**
- * A component for searching a list
- */
-export const SearchableList = ({ overwriteTranslation, list, initialSearch = '', searchMapping, itemMapper, className }) => {
-    const translation = useTranslation(defaultSearchableListTranslation, overwriteTranslation);
-    const [search, setSearch] = useState(initialSearch);
-    useEffect(() => setSearch(initialSearch), [initialSearch]);
-    const filteredEntries = useMemo(() => MultiSearchWithMapping(search, list, searchMapping), [search, list, searchMapping]);
-    return (_jsxs("div", { className: clsx('col gap-y-2', className), children: [_jsxs("div", { className: "row justify-between gap-x-2 items-center", children: [_jsx("div", { className: "flex-1", children: _jsx(Input, { value: search, onChange: setSearch, placeholder: translation.search }) }), _jsx(Search, { size: 20 })] }), filteredEntries.length > 0 && (_jsx("div", { className: "col gap-y-1", children: filteredEntries.map(itemMapper) })), !filteredEntries.length && _jsx("div", { className: "row justify-center", children: translation.nothingFound })] }));
+var SearchableList = ({
+  overwriteTranslation,
+  list,
+  initialSearch = "",
+  searchMapping,
+  itemMapper,
+  className
+}) => {
+  const translation = useTranslation(defaultSearchableListTranslation, overwriteTranslation);
+  const [search, setSearch] = (0, import_react5.useState)(initialSearch);
+  (0, import_react5.useEffect)(() => setSearch(initialSearch), [initialSearch]);
+  const filteredEntries = (0, import_react5.useMemo)(() => MultiSearchWithMapping(search, list, searchMapping), [search, list, searchMapping]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx2.default)("col gap-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "row justify-between gap-x-2 items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ControlledInput, { value: search, onChange: setSearch, placeholder: translation.search }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.Search, { size: 20 })
+    ] }),
+    filteredEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col gap-y-1", children: filteredEntries.map(itemMapper) }),
+    !filteredEntries.length && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "row justify-center", children: translation.nothingFound })
+  ] });
 };
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SearchableList
+});
+//# sourceMappingURL=SearchableList.js.map