@helpwave/hightide 0.1.7-alpha.1 → 0.1.8

package/dist/css/uncompiled/globals.css

@@ -155,7 +155,14 @@
 
 /* The theme variables */
 @theme {
-  /* Colors for with default values of the light theme */
+  /*
+   * Default light theme colors and initial definitions
+   */
+
+
+  /*
+   * Basic Colors
+   */
   --color-white: #FFFFFF;
   --color-black: #000000;
   --color-gray-25: #F8F8F8;
@@ -200,47 +207,55 @@
   --color-red-500: #DC576D;
   --color-red-900: #5C252E;
 
+
+  /*
+   * Semantic Colors
+   */
+  --color-text-dark: #1A1A1A;
+  --color-text-light: #E6E6E6;
+  --color-text-default: var(--color-text-dark);
+
   --color-primary: var(--color-purple-500);
-  --color-on-primary: #FFFFFF;
+  --color-on-primary: var(--color-text-light);
   --color-secondary: #11243E;
-  --color-on-secondary: #FFFFFF;
-  --color-warning: #EA9E40;
-  --color-on-warning: #FFFFFF;
-  --color-positive: #69CB81;
-  --color-on-positive: #FFFFFF;
-  --color-negative: #DC576D;
-  --color-on-negative: #FFFFFF;
+  --color-on-secondary: var(--color-text-light);
+  --color-warning: var(--color-yellow-500);
+  --color-on-warning: var(--color-text-light);
+  --color-positive: var(--color-green-500);
+  --color-on-positive: var(--color-text-light);
+  --color-negative: var(--color-red-500);
+  --color-on-negative: var(--color-text-light);
   --color-surface: #FFFFFF;
-  --color-on-surface: #1A1A1A;
+  --color-on-surface: var(--color-text-dark);
   --color-surface-variant: #F8F8F8;
   --color-surface-warning: #FBECD9;
   --color-highlight: #3272DF;
   --color-background: #EEEEEE;
-  --color-on-background: #1A1A1A;
+  --color-on-background: var(--color-text-dark);
 
-  --color-female: #E3798A;
-  --color-female-outline: #F4A3A7;
-  --color-female-surface: #FBE0E2;
-  --color-female-background: #FFF9F9;
+  --color-female: var(--color-red-400);
+  --color-female-outline: var(--color-red-300);
+  --color-female-surface: var(--color-red-100);
+  --color-female-background: var(--color-red-50);
 
-  --color-male: #3272DF;
-  --color-male-outline: #99B9EF;
-  --color-male-surface: #D6E3F9;
-  --color-male-background: #F6FAFF;
+  --color-male: var(--color-blue-400);
+  --color-male-outline: var(--color-blue-300);
+  --color-male-surface: var(--color-blue-100);
+  --color-male-background: var(--color-blue-50);
 
   --color-neutral: #4D4D4D;
   --color-neutral-outline: #B3B3B3;
   --color-neutral-surface: #E6E6E6;
   --color-neutral-background: #F8F8F8;
 
-  --color-text-primary: #1A1A1A;
+  --color-text-primary: var(--color-text-default);
   --color-text-secondary: #666666;
   --color-text-tertiary: #B3B3B3;
   --color-text-highlight: #3272DF;
   --color-text-label: #4D4D4D;
-  --color-icon-primary: #1A1A1A;
-  --color-icon-secondary: #666666;
-  --color-icon-highlight: #3272DF;
+  --color-icon-primary: var(--color-text-primary);
+  --color-icon-secondary: var(--color-text-secondary);
+  --color-icon-highlight: var(--color-text-highlight);
   --color-divider: #E6E6E6;
   --color-description: #555555;
   --color-outline: #E6E6E6;
@@ -249,7 +264,19 @@
   --color-disabled-text: #555555;
   --color-disabled-icon: #555555;
   --color-disabled-outline: #555555;
+  --color-border: #CCCCCC;
+
+
+  /*
+   * Component Colors
+   */
+
+  /* Button Outline */
+  --color-button-outline-primary-outline: var(--color-primary);
+  --color-button-outline-primary-icon: var(--color-primary);
+  --color-button-outline-primary-text: var(--color-primary);
 
+  /* Button Solid */
   --color-button-solid-primary-background: var(--color-primary);
   --color-button-solid-primary-text: var(--color-on-primary);
   --color-button-solid-primary-icon: var(--color-on-primary);
@@ -272,10 +299,7 @@
   --color-button-solid-negative-icon: var(--color-on-negative);
   --color-button-solid-negative-text: var(--color-on-negative);
 
-  --color-button-outline-primary-outline: var(--color-primary);
-  --color-button-outline-primary-icon: var(--color-primary);
-  --color-button-outline-primary-text: var(--color-primary);
-
+  /* Button Text */
   --color-button-text-hover-background: #77777733;
   --color-button-text-neutral-text: #333333;
   --color-button-text-neutral-icon: #333333;
@@ -284,16 +308,39 @@
   --color-button-text-primary-text: var(--color-primary);
   --color-button-text-primary-icon: var(--color-primary);
 
-  --color-menu-background: #FFFFFF;
-  --color-menu-text: #1A1A1A;
-  --color-menu-border: #999999;
+  /* Carousel */
+  --color-carousel-dot-active: var(--color-primary);
+  --color-carousel-dot-disabled: var(--color-disabled-background);
+
+  /* Menu */
+  --color-menu-background: var(--color-surface);
+  --color-menu-text: var(--color-on-surface);
+  --color-menu-border: var(--color-border);
+
+  /* Overlay */
+  --color-overlay-background: #FFFFFF;
+  --color-overlay-text: var(--color-text-dark);
+
+  /* ProgressIndicator */
+  --color-progress-indicator-fill: var(--color-primary);
+  --color-progress-indicator-background: var(--color-gray-300);
 
-  --color-tag-default-background: #F6FAFF;
-  --color-tag-default-text: #1A4080;
-  --color-tag-default-icon: #1A4080;
+  /* Property */
+  --color-property-title-background: #E6E6E6;
+  --color-property-title-text: var(--color-text-default);
+
+  /* Stepper Bar */
+  --color-stepperbar-dot-active: var(--color-primary);
+  --color-stepperbar-dot-normal: var(--color-purple-100);
+  --color-stepperbar-dot-disabled: var(--color-disabled-background);
+
+  /* Table */
+  --color-tabel-header-background: #F6FAFF;
+
+  /* Tag */
   --color-tag-dark-background: #333333;
-  --color-tag-dark-text: #FFFFFF;
-  --color-tag-dark-icon: #FFFFFF;
+  --color-tag-dark-text: var(--color-text-light);
+  --color-tag-dark-icon: var(--color-text-light);
   --color-tag-green-background: #E2E9DB;
   --color-tag-green-text: #7A977E;
   --color-tag-green-icon: #7A977E;
@@ -303,112 +350,137 @@
   --color-tag-red-background: #FEE0DD;
   --color-tag-red-text: #D67268;
   --color-tag-red-icon: #D67268;
-  --color-tag-blue-background: #F6FAFF;
-  --color-tag-blue-text: #1A4080;
-  --color-tag-blue-icon: #1A4080;
+  --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-pink-text: #CE75A0;
   --color-tag-pink-icon: #CE75A0;
 
-  --color-tabel-header-background: #F6FAFF;
-
+  /* TextImage */
   --color-text-image-primary-background: var(--color-primary);
   --color-text-image-primary-text: var(--color-on-primary);
   --color-text-image-secondary-background: #3171DE;
-  --color-text-image-secondary-text: #FFFFFF;
+  --color-text-image-secondary-text: var(--color-text-light);
   --color-text-image-dark-background: #11243E;
-  --color-text-image-dark-text: #FFFFFF;
-
-  --color-overlay-background: #FFFFFF;
-  --color-overlay-text: #1A1A1A;
+  --color-text-image-dark-text: var(--color-text-light);
 
+  /* Tooltip */
   --color-tooltip-background: var(--color-overlay-background);
   --color-tooltip-text: var(--color-description);
 
-  /* breakpoints */
+  /*
+   * breakpoints
+   */
   --breakpoint-tablet: 48rem; /* 768px for 16px font-size */
   --breakpoint-desktop: 64rem; /* 1024px for 16px font-size*/
-  /* fonts */
+
+  /*
+   * fonts
+   */
   --font-inter: 'Inter', sans-serif;
   --font-space: 'Space Grotesk', sans-serif;
 }
 
-/* Overrides of the dark theme */
+/* Overrides of the base theme */
 @layer base {
-  /* Here are overrides for the light theme */
+  /* dark theme overrides */
   @variant dark {
+    /*
+     * Basic Colors
+     */
     --color-primary: var(--color-purple-400);
     --color-positive: var(--color-green-700);
+    --color-negative: var(--color-red-700);
+
+    /*
+     * Semantic Colors
+     */
+    --color-text-default: var(--color-text-light);
 
     --color-surface: #333333;
-    --color-on-surface: #EEEEEE;
+    --color-on-surface: var(--color-text-light);
     --color-surface-variant: #494949;
     --color-surface-warning: #FBECD9;
     --color-text-label: #CFCFCF;
     --color-highlight: #3272DF;
-    --color-background: #1A1A1A;
-    --color-on-background: #EEEEEE;
+    --color-background: #222222;
+    --color-on-background: var(--color-text-light);
+    --color-border: #444444;
 
     --color-neutral: #4D4D4D;
     --color-neutral-outline: #B3B3B3;
     --color-neutral-surface: #E6E6E6;
     --color-neutral-background: #F8F8F8;
 
-    --color-text-primary: #EEEEEE;
+    --color-text-primary: var(--color-text-light);
     --color-text-secondary: #666666;
     --color-text-tertiary: #B3B3B3;
     --color-text-highlight: #3272DF;
-    --color-icon-primary: #EEEEEE;
-    --color-icon-secondary: #666666;
-    --color-icon-highlight: #3272DF;
     --color-description: #999999;
 
     --color-disabled-background: #555555;
-    --color-disabled-text: #888888;
+    --color-disabled-text: #999999;
+
+    /*
+     * Component Colors
+     */
 
+    /* Button Solid */
     --color-button-solid-neutral-background: #424242;
-    --color-button-solid-neutral-icon: #EEEEEE;
-    --color-button-solid-neutral-text: #EEEEEE;
+    --color-button-solid-neutral-icon: var(--color-text-light);
+    --color-button-solid-neutral-text: var(--color-text-light);
 
+    /* Button Text */
     --color-button-text-hover-background: #3F3F3F;
-    --color-button-text-neutral-text: #EEEEEE;
-    --color-button-text-neutral-icon: #EEEEEE;
+    --color-button-text-neutral-text: var(--color-text-light);
+    --color-button-text-neutral-icon: var(--color-text-light);
 
+    /* Menu */
     --color-menu-background: #333333;
-    --color-menu-text: #EEEEEE;
-    --color-menu-border: #999999;
+    --color-menu-text: var(--color-text-light);
+    --color-menu-border: var(--color-border);
 
-    --color-tabel-header-background: #F6FAFF;
+    /* Property */
+    --color-property-title-background: #393939;
+    --color-property-title-text: var(--color-on-surface);
+
+    /* ProgressIndicator */
+    --color-progress-indicator-background: var(--color-gray-700);
 
-    --color-overlay-background: #222222;
-    --color-overlay-text: #FFFFFF;
+    /* Overlay */
+    --color-overlay-background: #2A2A2A;
+    --color-overlay-text: var(--color-text-light);
+
+    /* Table */
+    --color-tabel-header-background: #F6FAFF;
   }
 }
 
 /* Styles that can be overwritten by utils */
 @layer components {
   .btn-sm {
-    @apply row items-center justify-center gap-x-1 px-[0.625rem] py-[0.25rem] rounded-[0.375rem] h-8;
+    @apply row items-center justify-center gap-x-1 px-[0.625rem] py-[0.25rem] rounded-[0.375rem] h-8 min-h-8;
   }
 
   .btn-md {
-    @apply row items-center justify-center gap-x-2 px-[0.75rem] py-[0.5rem] rounded-[0.375rem] h-10;
+    @apply row items-center justify-center gap-x-2 px-[0.75rem] py-[0.5rem] rounded-[0.375rem] h-10 min-h-10;
   }
 
   .btn-lg {
-    @apply row items-center justify-center gap-x-2 px-[1rem] py-[0.675rem] rounded-[0.375rem] h-12;
+    @apply row items-center justify-center gap-x-2 px-[1rem] py-[0.675rem] rounded-[0.375rem] h-12 min-h-12;
   }
 
   .icon-btn-sm {
-    @apply row items-center justify-center gap-x-1 p-[0.375rem] rounded-[0.375rem] h-8;
+    @apply row items-center justify-center gap-x-1 p-[0.375rem] rounded-[0.375rem] h-8 min-h-8 w-8 min-w-8;
   }
 
   .icon-btn-md {
-    @apply row items-center justify-center gap-x-2 p-[0.5rem] rounded-[0.375rem] h-10;
+    @apply row items-center justify-center gap-x-2 p-[0.5rem] rounded-[0.375rem] h-10 min-h-10 w-10 min-w-10;
   }
 
   .icon-btn-lg {
-    @apply row items-center justify-center gap-x-2 p-[0.75rem] rounded-[0.375rem] h-12;
+    @apply row items-center justify-center gap-x-2 p-[0.75rem] rounded-[0.375rem] h-12 min-h-12 w-12 min-w-12;
   }
 
   .card-sm {
@@ -445,16 +517,20 @@
 }
 
 @layer components {
+  * {
+    @apply border-border;
+  }
+
   html, main {
     @apply bg-background text-on-background;
   }
 
   button {
-    @apply cursor-pointer;
+    @apply cursor-pointer text-nowrap;
   }
 
   input {
-    @apply block bg-surface text-on-surface px-3 py-2 rounded-md border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary;
+    @apply block bg-surface text-on-surface px-2 py-[0.375rem] rounded-md border-2 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary;
   }
 
   .textstyle-title-3xl {
@@ -486,7 +562,7 @@
   }
 
   .textstyle-accent {
-    @apply text-sm text-gray-600 font-bold;
+    @apply text-sm text-text-label font-bold;
   }
 
   .textstyle-description {
@@ -510,7 +586,7 @@
   }
 
   .textstyle-table-header {
-    @apply text-gray-600 font-bold;
+    @apply text-text-label font-bold;
   }
 
   .textstyle-navigation-item {
@@ -522,6 +598,6 @@
   }
 
   .textstyle-form-description {
-    @apply text-gray-500 text-sm;
+    @apply text-description text-sm;
   }
 }

package/dist/hooks/useSearch.d.mts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+
+type UseSearchProps<T> = {
+    list: T[];
+    searchMapping: (item: T) => string[];
+    initialSearch?: string;
+};
+declare const useSearch: <T>({ list, initialSearch, searchMapping, }: UseSearchProps<T>) => {
+    result: T[];
+    hasResult: boolean;
+    allItems: T[];
+    setItems: react.Dispatch<react.SetStateAction<T[]>>;
+    search: string;
+    setSearch: react.Dispatch<react.SetStateAction<string>>;
+};
+
+export { type UseSearchProps, useSearch };

package/dist/hooks/useSearch.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+
+type UseSearchProps<T> = {
+    list: T[];
+    searchMapping: (item: T) => string[];
+    initialSearch?: string;
+};
+declare const useSearch: <T>({ list, initialSearch, searchMapping, }: UseSearchProps<T>) => {
+    result: T[];
+    hasResult: boolean;
+    allItems: T[];
+    setItems: react.Dispatch<react.SetStateAction<T[]>>;
+    search: string;
+    setSearch: react.Dispatch<react.SetStateAction<string>>;
+};
+
+export { type UseSearchProps, useSearch };

package/dist/hooks/useSearch.js

@@ -0,0 +1,66 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useSearch.ts
+var useSearch_exports = {};
+__export(useSearch_exports, {
+  useSearch: () => useSearch
+});
+module.exports = __toCommonJS(useSearch_exports);
+var import_react = require("react");
+
+// src/util/simpleSearch.ts
+var MultiSearchWithMapping = (search, objects, mapping) => {
+  return objects.filter((object) => {
+    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
+    if (!mappedSearchKeywords) {
+      return true;
+    }
+    return !!mappedSearchKeywords.find((value) => value.includes(search.toLowerCase().trim()));
+  });
+};
+
+// src/hooks/useSearch.ts
+var useSearch = ({
+  list,
+  initialSearch,
+  searchMapping
+}) => {
+  const [items, setItems] = (0, import_react.useState)(list);
+  const [search, setSearch] = (0, import_react.useState)(initialSearch);
+  (0, import_react.useEffect)(() => {
+    setItems(list);
+  }, [list]);
+  const result = (0, import_react.useMemo)(
+    () => MultiSearchWithMapping(search, items, searchMapping),
+    [search, items, searchMapping]
+  );
+  return {
+    result,
+    hasResult: result.length > 0,
+    allItems: items,
+    setItems,
+    search,
+    setSearch
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSearch
+});
+//# sourceMappingURL=useSearch.js.map

package/dist/hooks/useSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useSearch.ts","../../src/util/simpleSearch.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { MultiSearchWithMapping } from '../util/simpleSearch'\n\nexport type UseSearchProps<T> = {\n  list: T[],\n  searchMapping: (item: T) => string[],\n  initialSearch?: string,\n}\n\nexport const useSearch = <T>({\n                               list,\n                               initialSearch,\n                               searchMapping,\n                             }: UseSearchProps<T>) => {\n  const [items, setItems] = useState<T[]>(list)\n  const [search, setSearch] = useState<string>(initialSearch)\n\n  useEffect(() => {\n    setItems(list)\n  }, [list])\n\n  const result: T[] = useMemo(\n    () => MultiSearchWithMapping(search, items, searchMapping),\n    [search, items, searchMapping]\n  )\n\n  return {\n    result,\n    hasResult: result.length > 0,\n    allItems: items,\n    setItems,\n    search,\n    setSearch,\n  }\n}","/**\n *  Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.\n *  Returns the list of all matches.\n *\n *  @param search The list of search strings e.g. `[name, type]`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @param mapping The mapping of objects to the string properties they fulfil\n *\n *  @return The list of objects that match all search strings\n */\nexport const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[], mapping: (value: T) => (string | undefined)[]) => {\n  return objects.filter(object => {\n    const mappedSearchKeywords = mapping(object).map(value => value ? value.toLowerCase().trim() : undefined)\n    return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))\n  })\n}\n\n/**\n *  Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.\n *  Returns the list of all matches.\n *\n *  @param search The search string e.g `name`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @param mapping The mapping of objects to the string properties they fulfil, if undefined it is always fulfilled\n *\n *  @return The list of objects that match the search string\n */\nexport const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping: (value: T) => (string[] | undefined)) => {\n  return objects.filter(object => {\n    const mappedSearchKeywords = mapping(object)?.map(value => value.toLowerCase().trim())\n    if(!mappedSearchKeywords) {\n      return true\n    }\n    return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))\n  })\n}\n\n/**\n *  Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.\n *\n *  @param search The search string e.g `name`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @param mapping The mapping of objects to a string that is compared to the search\n *\n *  @return The list of objects that match the search string\n */\nexport const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping: (value: T) => string) => {\n  return MultiSearchWithMapping(search, objects, value => [mapping(value)])\n}\n\n/**\n *  Finds all values matching the search value and returns the list of all matches.\n *\n *  @param search The search string e.g `name`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @return The list of objects that match the search string\n */\nexport const SimpleSearch = (search: string, objects: string[]) => {\n  return SimpleSearchWithMapping(search, objects, value => value)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA6C;;;AC+BtC,IAAM,yBAAyB,CAAI,QAAgB,SAAc,YAAkD;AACxH,SAAO,QAAQ,OAAO,YAAU;AAC9B,UAAM,uBAAuB,QAAQ,MAAM,GAAG,IAAI,WAAS,MAAM,YAAY,EAAE,KAAK,CAAC;AACrF,QAAG,CAAC,sBAAsB;AACxB,aAAO;AAAA,IACT;AACA,WAAO,CAAC,CAAC,qBAAqB,KAAK,WAAS,MAAM,SAAS,OAAO,YAAY,EAAE,KAAK,CAAC,CAAC;AAAA,EACzF,CAAC;AACH;;;AD9BO,IAAM,YAAY,CAAI;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACpD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAc,IAAI;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAiB,aAAa;AAE1D,8BAAU,MAAM;AACd,aAAS,IAAI;AAAA,EACf,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,aAAc;AAAA,IAClB,MAAM,uBAAuB,QAAQ,OAAO,aAAa;AAAA,IACzD,CAAC,QAAQ,OAAO,aAAa;AAAA,EAC/B;AAEA,SAAO;AAAA,IACL;AAAA,IACA,WAAW,OAAO,SAAS;AAAA,IAC3B,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/hooks/useSearch.mjs

@@ -0,0 +1,42 @@
+// src/hooks/useSearch.ts
+import { useEffect, useMemo, useState } from "react";
+
+// src/util/simpleSearch.ts
+var MultiSearchWithMapping = (search, objects, mapping) => {
+  return objects.filter((object) => {
+    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
+    if (!mappedSearchKeywords) {
+      return true;
+    }
+    return !!mappedSearchKeywords.find((value) => value.includes(search.toLowerCase().trim()));
+  });
+};
+
+// src/hooks/useSearch.ts
+var useSearch = ({
+  list,
+  initialSearch,
+  searchMapping
+}) => {
+  const [items, setItems] = useState(list);
+  const [search, setSearch] = useState(initialSearch);
+  useEffect(() => {
+    setItems(list);
+  }, [list]);
+  const result = useMemo(
+    () => MultiSearchWithMapping(search, items, searchMapping),
+    [search, items, searchMapping]
+  );
+  return {
+    result,
+    hasResult: result.length > 0,
+    allItems: items,
+    setItems,
+    search,
+    setSearch
+  };
+};
+export {
+  useSearch
+};
+//# sourceMappingURL=useSearch.mjs.map

package/dist/hooks/useSearch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useSearch.ts","../../src/util/simpleSearch.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { MultiSearchWithMapping } from '../util/simpleSearch'\n\nexport type UseSearchProps<T> = {\n  list: T[],\n  searchMapping: (item: T) => string[],\n  initialSearch?: string,\n}\n\nexport const useSearch = <T>({\n                               list,\n                               initialSearch,\n                               searchMapping,\n                             }: UseSearchProps<T>) => {\n  const [items, setItems] = useState<T[]>(list)\n  const [search, setSearch] = useState<string>(initialSearch)\n\n  useEffect(() => {\n    setItems(list)\n  }, [list])\n\n  const result: T[] = useMemo(\n    () => MultiSearchWithMapping(search, items, searchMapping),\n    [search, items, searchMapping]\n  )\n\n  return {\n    result,\n    hasResult: result.length > 0,\n    allItems: items,\n    setItems,\n    search,\n    setSearch,\n  }\n}","/**\n *  Finds all values matching the search values by first mapping the values to a string array and then checking each entry for matches.\n *  Returns the list of all matches.\n *\n *  @param search The list of search strings e.g. `[name, type]`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @param mapping The mapping of objects to the string properties they fulfil\n *\n *  @return The list of objects that match all search strings\n */\nexport const MultiSubjectSearchWithMapping = <T>(search: string[], objects: T[], mapping: (value: T) => (string | undefined)[]) => {\n  return objects.filter(object => {\n    const mappedSearchKeywords = mapping(object).map(value => value ? value.toLowerCase().trim() : undefined)\n    return search.every(searchValue => !!mappedSearchKeywords.find(value => !!value && value.includes(searchValue.toLowerCase().trim())))\n  })\n}\n\n/**\n *  Finds all values matching the search value by first mapping the values to a string array and then checking each entry for matches.\n *  Returns the list of all matches.\n *\n *  @param search The search string e.g `name`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @param mapping The mapping of objects to the string properties they fulfil, if undefined it is always fulfilled\n *\n *  @return The list of objects that match the search string\n */\nexport const MultiSearchWithMapping = <T>(search: string, objects: T[], mapping: (value: T) => (string[] | undefined)) => {\n  return objects.filter(object => {\n    const mappedSearchKeywords = mapping(object)?.map(value => value.toLowerCase().trim())\n    if(!mappedSearchKeywords) {\n      return true\n    }\n    return !!mappedSearchKeywords.find(value => value.includes(search.toLowerCase().trim()))\n  })\n}\n\n/**\n *  Finds all values matching the search value by first mapping the values to a string and returns the list of all matches.\n *\n *  @param search The search string e.g `name`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @param mapping The mapping of objects to a string that is compared to the search\n *\n *  @return The list of objects that match the search string\n */\nexport const SimpleSearchWithMapping = <T>(search: string, objects: T[], mapping: (value: T) => string) => {\n  return MultiSearchWithMapping(search, objects, value => [mapping(value)])\n}\n\n/**\n *  Finds all values matching the search value and returns the list of all matches.\n *\n *  @param search The search string e.g `name`\n *\n *  @param objects The list of objects to be searched in\n *\n *  @return The list of objects that match the search string\n */\nexport const SimpleSearch = (search: string, objects: string[]) => {\n  return SimpleSearchWithMapping(search, objects, value => value)\n}\n"],"mappings":";AAAA,SAAS,WAAW,SAAS,gBAAgB;;;AC+BtC,IAAM,yBAAyB,CAAI,QAAgB,SAAc,YAAkD;AACxH,SAAO,QAAQ,OAAO,YAAU;AAC9B,UAAM,uBAAuB,QAAQ,MAAM,GAAG,IAAI,WAAS,MAAM,YAAY,EAAE,KAAK,CAAC;AACrF,QAAG,CAAC,sBAAsB;AACxB,aAAO;AAAA,IACT;AACA,WAAO,CAAC,CAAC,qBAAqB,KAAK,WAAS,MAAM,SAAS,OAAO,YAAY,EAAE,KAAK,CAAC,CAAC;AAAA,EACzF,CAAC;AACH;;;AD9BO,IAAM,YAAY,CAAI;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF,MAAyB;AACpD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAc,IAAI;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAiB,aAAa;AAE1D,YAAU,MAAM;AACd,aAAS,IAAI;AAAA,EACf,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,SAAc;AAAA,IAClB,MAAM,uBAAuB,QAAQ,OAAO,aAAa;AAAA,IACzD,CAAC,QAAQ,OAAO,aAAa;AAAA,EAC/B;AAEA,SAAO;AAAA,IACL;AAAA,IACA,WAAW,OAAO,SAAS;AAAA,IAC3B,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/index.d.mts

@@ -13,7 +13,7 @@ export { Helpwave, HelpwaveProps } from './components/icons-and-geometry/Helpwav
 export { AnimatedRing, AnimatedRingProps, RadialRings, RadialRingsProps, Ring, RingProps, RingWave, RingWaveProps } from './components/icons-and-geometry/Ring.mjs';
 export { TagIcon, TagProps } from './components/icons-and-geometry/Tag.mjs';
 export { BreadCrumb, Crumb } from './components/layout-and-navigation/BreadCrumb.mjs';
-export { Carousel } from './components/layout-and-navigation/Carousel.mjs';
+export { Carousel, CarouselProps } from './components/layout-and-navigation/Carousel.mjs';
 export { Chip, ChipColor, ChipList, ChipListProps, ChipProps } from './components/layout-and-navigation/Chip.mjs';
 export { DividerInserter, DividerInserterProps } from './components/layout-and-navigation/DividerInserter.mjs';
 export { Expandable, ExpandableProps, ExpandableUncontrolled } from './components/layout-and-navigation/Expandable.mjs';
@@ -25,7 +25,7 @@ export { SearchableList, SearchableListProps } from './components/layout-and-nav
 export { StepperBar, StepperBarProps, StepperBarUncontrolled, StepperState } from './components/layout-and-navigation/StepperBar.mjs';
 export { SortButton, SortButtonProps, Table, TableProps, TableSortingFunctionType, TableSortingType, TableState, TableStatePagination, TableStateSelection, addElementToTable, changeTableSelectionSingle, defaultTableStatePagination, defaultTableStateSelection, isDataObjectSelected, pageForItem, removeFromTableSelection, updatePagination } from './components/layout-and-navigation/Table.mjs';
 export { TextImage, TextImageProps } from './components/layout-and-navigation/TextImage.mjs';
-export { Tile, TileProps, TileWithImageProps } from './components/layout-and-navigation/Tile.mjs';
+export { Tile, TileProps } from './components/layout-and-navigation/Tile.mjs';
 export { VerticalDivider, VerticalDividerProps } from './components/layout-and-navigation/VerticalDivider.mjs';
 export { ErrorComponent, ErrorComponentProps } from './components/loading-states/ErrorComponent.mjs';
 export { LoadingAndErrorComponent, LoadingAndErrorComponentProps } from './components/loading-states/LoadingAndErrorComponent.mjs';
@@ -49,10 +49,10 @@ export { Checkbox, CheckboxProps, CheckboxUncontrolled } from './components/user
 export { DateTimePicker, DateTimePickerMode, DateTimePickerProps } from './components/user-action/DateAndTimePicker.mjs';
 export { FormInput, FormInputProps, Input, InputProps, InputUncontrolled } from './components/user-action/Input.mjs';
 export { Label, LabelProps, LabelType } from './components/user-action/Label.mjs';
-export { Menu, MenuItem, MenuItemProps } from './components/user-action/Menu.mjs';
-export { MultiSelect, MultiSelectOption, MultiSelectProps, SearchProps } from './components/user-action/MultiSelect.mjs';
+export { Menu, MenuItem, MenuItemProps, MenuProps } from './components/user-action/Menu.mjs';
+export { MultiSelect, MultiSelectOption, MultiSelectProps, MultiSelectUncontrolled, SearchProps } from './components/user-action/MultiSelect.mjs';
 export { ScrollPicker, ScrollPickerProps } from './components/user-action/ScrollPicker.mjs';
-export { SearchableSelect, SearchableSelectProps, Select, SelectOption, SelectProps, SelectUncontrolled } from './components/user-action/Select.mjs';
+export { Select, SelectOption, SelectProps, SelectUncontrolled } from './components/user-action/Select.mjs';
 export { Textarea, TextareaProps, TextareaUncontrolled } from './components/user-action/Textarea.mjs';
 export { ToggleableInput, ToggleableInputUncontrolled } from './components/user-action/ToggleableInput.mjs';
 export { Tooltip, TooltipProps } from './components/user-action/Tooltip.mjs';
@@ -60,10 +60,12 @@ export { useHoverState } from './hooks/useHoverState.mjs';
 export { useLocalStorage } from './hooks/useLocalStorage.mjs';
 export { useOutsideClick } from './hooks/useOutsideClick.mjs';
 export { useSaveDelay } from './hooks/useSaveDelay.mjs';
+export { UseSearchProps, useSearch } from './hooks/useSearch.mjs';
 export { LanguageContext, LanguageContextValue, LanguageProvider, useLanguage, useLocale } from './localization/LanguageProvider.mjs';
 export { PropsForTranslation, Translation, useTranslation } from './localization/useTranslation.mjs';
 export { Language, LanguageUtil } from './localization/util.mjs';
 export { ThemeContext, ThemeProvider, ThemeType, ThemeTypeTranslation, ThemeUtil, useTheme } from './theming/useTheme.mjs';
+export { BagFunction, BagFunctionUtil, PropsWithBagFunction, PropsWithBagFunctionOrChildren } from './util/PropsWithFunctionChildren.mjs';
 export { ArrayUtil, closestMatch, createLoopingList, createLoopingListWithIndex, equalSizeGroups, getNeighbours, range } from './util/array.mjs';
 export { builder } from './util/builder.mjs';
 export { Duration, Month, WeekDay, addDuration, changeDuration, equalDate, formatDate, formatDateTime, getBetweenDuration, getDaysInMonth, getWeeksForCalenderMonth, isInTimeSpan, monthsList, subtractDuration, weekDayList } from './util/date.mjs';

package/dist/index.d.ts

@@ -13,7 +13,7 @@ export { Helpwave, HelpwaveProps } from './components/icons-and-geometry/Helpwav
 export { AnimatedRing, AnimatedRingProps, RadialRings, RadialRingsProps, Ring, RingProps, RingWave, RingWaveProps } from './components/icons-and-geometry/Ring.js';
 export { TagIcon, TagProps } from './components/icons-and-geometry/Tag.js';
 export { BreadCrumb, Crumb } from './components/layout-and-navigation/BreadCrumb.js';
-export { Carousel } from './components/layout-and-navigation/Carousel.js';
+export { Carousel, CarouselProps } from './components/layout-and-navigation/Carousel.js';
 export { Chip, ChipColor, ChipList, ChipListProps, ChipProps } from './components/layout-and-navigation/Chip.js';
 export { DividerInserter, DividerInserterProps } from './components/layout-and-navigation/DividerInserter.js';
 export { Expandable, ExpandableProps, ExpandableUncontrolled } from './components/layout-and-navigation/Expandable.js';
@@ -25,7 +25,7 @@ export { SearchableList, SearchableListProps } from './components/layout-and-nav
 export { StepperBar, StepperBarProps, StepperBarUncontrolled, StepperState } from './components/layout-and-navigation/StepperBar.js';
 export { SortButton, SortButtonProps, Table, TableProps, TableSortingFunctionType, TableSortingType, TableState, TableStatePagination, TableStateSelection, addElementToTable, changeTableSelectionSingle, defaultTableStatePagination, defaultTableStateSelection, isDataObjectSelected, pageForItem, removeFromTableSelection, updatePagination } from './components/layout-and-navigation/Table.js';
 export { TextImage, TextImageProps } from './components/layout-and-navigation/TextImage.js';
-export { Tile, TileProps, TileWithImageProps } from './components/layout-and-navigation/Tile.js';
+export { Tile, TileProps } from './components/layout-and-navigation/Tile.js';
 export { VerticalDivider, VerticalDividerProps } from './components/layout-and-navigation/VerticalDivider.js';
 export { ErrorComponent, ErrorComponentProps } from './components/loading-states/ErrorComponent.js';
 export { LoadingAndErrorComponent, LoadingAndErrorComponentProps } from './components/loading-states/LoadingAndErrorComponent.js';
@@ -49,10 +49,10 @@ export { Checkbox, CheckboxProps, CheckboxUncontrolled } from './components/user
 export { DateTimePicker, DateTimePickerMode, DateTimePickerProps } from './components/user-action/DateAndTimePicker.js';
 export { FormInput, FormInputProps, Input, InputProps, InputUncontrolled } from './components/user-action/Input.js';
 export { Label, LabelProps, LabelType } from './components/user-action/Label.js';
-export { Menu, MenuItem, MenuItemProps } from './components/user-action/Menu.js';
-export { MultiSelect, MultiSelectOption, MultiSelectProps, SearchProps } from './components/user-action/MultiSelect.js';
+export { Menu, MenuItem, MenuItemProps, MenuProps } from './components/user-action/Menu.js';
+export { MultiSelect, MultiSelectOption, MultiSelectProps, MultiSelectUncontrolled, SearchProps } from './components/user-action/MultiSelect.js';
 export { ScrollPicker, ScrollPickerProps } from './components/user-action/ScrollPicker.js';
-export { SearchableSelect, SearchableSelectProps, Select, SelectOption, SelectProps, SelectUncontrolled } from './components/user-action/Select.js';
+export { Select, SelectOption, SelectProps, SelectUncontrolled } from './components/user-action/Select.js';
 export { Textarea, TextareaProps, TextareaUncontrolled } from './components/user-action/Textarea.js';
 export { ToggleableInput, ToggleableInputUncontrolled } from './components/user-action/ToggleableInput.js';
 export { Tooltip, TooltipProps } from './components/user-action/Tooltip.js';
@@ -60,10 +60,12 @@ export { useHoverState } from './hooks/useHoverState.js';
 export { useLocalStorage } from './hooks/useLocalStorage.js';
 export { useOutsideClick } from './hooks/useOutsideClick.js';
 export { useSaveDelay } from './hooks/useSaveDelay.js';
+export { UseSearchProps, useSearch } from './hooks/useSearch.js';
 export { LanguageContext, LanguageContextValue, LanguageProvider, useLanguage, useLocale } from './localization/LanguageProvider.js';
 export { PropsForTranslation, Translation, useTranslation } from './localization/useTranslation.js';
 export { Language, LanguageUtil } from './localization/util.js';
 export { ThemeContext, ThemeProvider, ThemeType, ThemeTypeTranslation, ThemeUtil, useTheme } from './theming/useTheme.js';
+export { BagFunction, BagFunctionUtil, PropsWithBagFunction, PropsWithBagFunctionOrChildren } from './util/PropsWithFunctionChildren.js';
 export { ArrayUtil, closestMatch, createLoopingList, createLoopingListWithIndex, equalSizeGroups, getNeighbours, range } from './util/array.js';
 export { builder } from './util/builder.js';
 export { Duration, Month, WeekDay, addDuration, changeDuration, equalDate, formatDate, formatDateTime, getBetweenDuration, getDaysInMonth, getWeeksForCalenderMonth, isInTimeSpan, monthsList, subtractDuration, weekDayList } from './util/date.js';