@helpwave/hightide 0.1.21 → 0.1.23

package/dist/css/uncompiled/globals.css

@@ -113,7 +113,7 @@
   }
 
   *:focus-visible {
-    @apply ring-1 ring-focus;
+    @apply ring-2 ring-focus;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -123,19 +123,19 @@
   }
 
   table {
-    @apply table-fixed border-separate border-spacing-0;
+    @apply table-fixed border-separate border-spacing-0 bg-table-background text-table-text;
   }
 
   th {
-    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-y-1 first:border-l-1 last:border-r-2 first:rounded-tl-lg last:rounded-tr-lg bg-tabel-header-background text-text-label font-bold;
+    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-y-1 first:border-l-1 last:border-r-1 first:rounded-tl-lg last:rounded-tr-lg bg-table-header-background text-label font-bold;
   }
 
   tbody > tr {
-    @apply hover:bg-table-row-hover-background hover:text-table-row-hover-text;
+    @apply hover:bg-table-row-hover-background;
   }
 
   td {
-    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-b-1 first:border-l-1 last:border-r-2 [nth-last-child(1)]:first:rounded-bl-lg [nth-last-child(1)]:last:rounded-br-lg;
+    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-b-1 first:border-l-1 last:border-r-1 [nth-last-child(1)]:first:rounded-bl-lg [nth-last-child(1)]:last:rounded-br-lg;
   }
 
   tbody > tr:last-child > td {

package/dist/css/uncompiled/textstyles.css

@@ -28,7 +28,7 @@
   }
 
   .textstyle-accent {
-    @apply text-sm text-text-label font-bold;
+    @apply text-sm text-label font-bold;
   }
 
   .textstyle-description {
@@ -36,15 +36,15 @@
   }
 
   .textstyle-label-lg {
-    @apply text-text-label text-lg font-semibold;
+    @apply text-label text-lg font-semibold;
   }
 
   .textstyle-label-md {
-    @apply text-text-label font-semibold;
+    @apply text-label font-semibold;
   }
 
   .textstyle-label-sm {
-    @apply text-sm text-text-label font-semibold;
+    @apply text-sm text-label font-semibold;
   }
 
   .textstyle-table-name {
@@ -52,7 +52,7 @@
   }
 
   .textstyle-table-header {
-    @apply text-text-label font-bold;
+    @apply text-label font-bold;
   }
 
   .textstyle-navigation-item {

package/dist/css/uncompiled/theme/colors-basic.css

@@ -4,30 +4,40 @@
  * default light-theme basic colors
  */
 @theme {
+  /* Basic */
   --color-white: #FFFFFF;
   --color-black: #000000;
   --color-gray-25: #F8F8F8;
   --color-gray-50: #F2F2F2;
+  --color-gray-75: #EEEEEE;
   --color-gray-100: #E6E6E6;
+  --color-gray-150: #D8D8D8;
   --color-gray-200: #CCCCCC;
   --color-gray-300: #B3B3B3;
   --color-gray-400: #999999;
   --color-gray-500: #888888;
+  --color-gray-550: #777777;
   --color-gray-600: #666666;
+  --color-gray-650: #555555;
   --color-gray-700: #4D4D4D;
+  --color-gray-750: #3F3F3F;
   --color-gray-800: #333333;
+  --color-gray-850: #222222;
   --color-gray-900: #1A1A1A;
   --color-gray-950: #0D0D0D;
 
+  /* Green */
   --color-green-100: #D1EFD8;
   --color-green-500: #69CB81;
   --color-green-700: #53a567;
   --color-green-900: #2C5536;
 
+  /* Orange */
   --color-orange-100: #FBECD9;
   --color-orange-200: #F7D8B3;
   --color-orange-500: #EA9E40;
 
+  /* Purple */
   --color-purple-50: #EFE6FD;
   --color-purple-100: #CEB0FA;
   --color-purple-200: #B892F3;
@@ -40,13 +50,16 @@
   --color-purple-900: #27144A;
   --color-purple-950: #1B0D33;
 
+  /* Blue */
   --color-blue-50: #F6FAFF;
   --color-blue-100: #D6E3F9;
   --color-blue-200: #99B9EF;
   --color-blue-500: #3272DF;
   --color-blue-600: #285BB2;
   --color-blue-800: #1A4080;
+  --color-blue-900: #11243E;
 
+  /* Red */
   --color-red-50: #FFF9F9;
   --color-red-100: #FBE0E2;
   --color-red-200: #F7C2C5;
@@ -62,11 +75,6 @@
 @layer base {
   /* dark theme */
   @variant dark {
-    --color-primary: var(--color-purple-400);
-    --color-positive: var(--color-green-700);
-    --color-negative: var(--color-red-700);
-    --color-negative-border-hover: var(--color-red-600);
 
-    --color-focus: var(--color-purple-500);
   }
 }

package/dist/css/uncompiled/theme/colors-component.css

@@ -5,6 +5,11 @@
  * default light-theme component colors
  */
 @theme {
+  /* Icon */
+  --color-icon-primary: var(--color-text-primary);
+  --color-icon-secondary: var(--color-text-secondary);
+  --color-icon-highlight: var(--color-highlight);
+
   /* Button Outline */
   --color-button-outline-primary-outline: var(--color-primary);
   --color-button-outline-primary-icon: var(--color-primary);
@@ -17,12 +22,12 @@
   --color-button-solid-secondary-background: var(--color-purple-50);
   --color-button-solid-secondary-text: var(--color-primary);
   --color-button-solid-secondary-icon: var(--color-primary);
-  --color-button-solid-tertiary-background: #F2F2F2;
-  --color-button-solid-tertiary-icon: #888888;
-  --color-button-solid-tertiary-text: #888888;
-  --color-button-solid-neutral-background: #D6D6D6;
-  --color-button-solid-neutral-icon: #1A1A1A;
-  --color-button-solid-neutral-text: #1A1A1A;
+  --color-button-solid-tertiary-background: var(--color-gray-50);
+  --color-button-solid-tertiary-icon: var(--color-gray-500);
+  --color-button-solid-tertiary-text: var(--color-gray-500);
+  --color-button-solid-neutral-background: var(--color-gray-150);
+  --color-button-solid-neutral-icon: var(--color-text-primary);
+  --color-button-solid-neutral-text: var(--color-text-primary);
   --color-button-solid-positive-background: var(--color-positive);
   --color-button-solid-positive-icon: var(--color-on-positive);
   --color-button-solid-positive-text: var(--color-on-positive);
@@ -35,8 +40,8 @@
 
   /* Button Text */
   --color-button-text-hover-background: #77777733;
-  --color-button-text-neutral-text: #333333;
-  --color-button-text-neutral-icon: #333333;
+  --color-button-text-neutral-text: var(--color-gray-800);
+  --color-button-text-neutral-icon: var(--color-gray-800);
   --color-button-text-negative-text: var(--color-negative);
   --color-button-text-negative-icon: var(--color-negative);
   --color-button-text-primary-text: var(--color-primary);
@@ -46,14 +51,18 @@
   --color-carousel-dot-active: var(--color-primary);
   --color-carousel-dot-disabled: var(--color-disabled-background);
 
+  /* Input */
+  --color-input-background: var(--color-surface);
+  --color-input-text: var(--color-on-surface);
+
   /* Menu */
-  --color-menu-background: var(--color-surface);
+  --color-menu-background: var(--color-surface-variant);
   --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);
+  /* Overlay, Dialog, Modal */
+  --color-overlay-background: var(--color-surface);
+  --color-overlay-text: var(--color-on-surface);
   --color-overlay-shadow: #00000039;
 
   /* ProgressIndicator */
@@ -61,23 +70,27 @@
   --color-progress-indicator-background: var(--color-gray-300);
 
   /* Property */
-  --color-property-title-background: #EDEDED;
+  --color-property-title-background: var(--color-gray-100);
   --color-property-title-text: var(--color-text-secondary);
 
   /* 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);
+  --color-stepperbar-dot-disabled: var(--color-description);
 
   /* Table */
-  --color-tabel-header-background: #F6FAFF;
-  --color-table-row-hover-background: var(--color-purple-50);
-  --color-table-row-hover-text: var(--color-text-default);
+  --color-table-background: var(--color-surface);
+  --color-table-text: var(--color-on-surface);
+  --color-table-header-background: color-mix(in srgb, var(--color-blue-500) 15%, var(--color-surface));
+  --color-table-row-hover-background: color-mix(in srgb, var(--color-purple-500) 15%, var(--color-surface));
 
   /* Tag */
-  --color-tag-dark-background: #333333;
-  --color-tag-dark-text: var(--color-text-light);
-  --color-tag-dark-icon: var(--color-text-light);
+  --color-tag-dark-background: var(--color-gray-800);
+  --color-tag-dark-text: var(--color-gray-100);
+  --color-tag-dark-icon: var(--color-gray-100);
+  --color-tag-default-background: #50687C;
+  --color-tag-default-text: var(--color-gray-100);
+  --color-tag-default-icon: var(--color-gray-100);
   --color-tag-green-background: #E2E9DB;
   --color-tag-green-text: #7A977E;
   --color-tag-green-icon: #7A977E;
@@ -97,14 +110,21 @@
   /* TextImage */
   --color-text-image-primary-background: var(--color-primary);
   --color-text-image-primary-text: var(--color-white);
-  --color-text-image-secondary-background: #3171DE;
+  --color-text-image-secondary-background: var(--color-blue-500);
   --color-text-image-secondary-text: var(--color-white);
-  --color-text-image-dark-background: #11243E;
+  --color-text-image-dark-background: var(--color-blue-900);
   --color-text-image-dark-text: var(--color-white);
 
   /* Tooltip */
-  --color-tooltip-background: #D9D9D9;
+  --color-tooltip-background: var(--color-menu-background);
   --color-tooltip-text: var(--color-description);
+
+  /* Other */
+  --color-border: var(--color-gray-200);
+  --color-divider: var(--color-gray-100);
+  --color-focus: var(--color-purple-400);
+  --color-outline: var(--color-gray-100);
+  --color-outline-variant: var(--color-gray-200);
 }
 
 /* non light-theme overrides */
@@ -112,41 +132,32 @@
   /* dark theme */
   @variant dark {
     /* Button Solid */
-    --color-button-solid-neutral-background: #424242;
-    --color-button-solid-neutral-icon: var(--color-text-light);
-    --color-button-solid-neutral-text: var(--color-text-light);
+    --color-button-solid-neutral-background: var(--color-gray-750);
+    --color-button-solid-neutral-icon: var(--color-gray-100);
+    --color-button-solid-neutral-text: var(--color-gray-100);
 
     /* Button Text */
-    --color-button-text-hover-background: #3F3F3F;
-    --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: var(--color-text-light);
-    --color-menu-border: var(--color-border);
+    --color-button-text-hover-background: #3F3F3F33;
+    --color-button-text-neutral-text: var(--color-gray-100);
+    --color-button-text-neutral-icon: var(--color-gray-100);
 
     /* Property */
-    --color-property-title-background: #393939;
-    --color-property-title-text: var(--color-on-surface);
+    --color-property-title-background: var(--color-gray-750);
 
     /* ProgressIndicator */
     --color-progress-indicator-background: var(--color-gray-700);
 
-    /* Overlay */
-    --color-overlay-background: #2A2A2A;
-    --color-overlay-text: var(--color-text-light);
-    --color-overlay-shadow: #00000055;
-
-    /* Table */
-    --color-tabel-header-background: #2F2F2F;
-    --color-table-row-hover-background: #2f2841;
+    /* Overlay, Dialog, Modal */
+    --color-overlay-shadow: #00000060;
 
     /* Tag */
-    --color-tag-dark-background: #1A1A1A;
-
-    /* Tooltip */
-    --color-tooltip-background: #555555;
-    --color-tooltip-text: var(--color-description);
+    --color-tag-dark-background: var(--color-gray-900);
+
+    /* Other */
+    --color-border: var(--color-gray-600);
+    --color-divider: var(--color-gray-700);
+    --color-focus: var(--color-purple-500);
+    --color-outline: var(--color-gray-700);
+    --color-outline-variant: var(--color-gray-600);
   }
 }

package/dist/css/uncompiled/theme/colors-semantic.css

@@ -5,98 +5,96 @@
  * default light-theme sematic colors
  */
 @theme {
-  --color-text-dark: #1A1A1A;
-  --color-text-light: #E6E6E6;
-  --color-text-default: var(--color-text-dark);
+  /* Background */
+  --color-background: var(--color-gray-75);
+  --color-on-background: var(--color-text-primary);
+
+  /* Gender */
+  --color-gender-female: var(--color-red-400);
+  --color-gender-female-outline: var(--color-red-300);
+  --color-gender-female-surface: var(--color-red-100);
+  --color-gender-female-background: var(--color-red-50);
+
+  --color-gender-male: var(--color-blue-500);
+  --color-gender-male-outline: var(--color-blue-200);
+  --color-gender-male-surface: var(--color-blue-100);
+  --color-gender-male-background: var(--color-blue-50);
+
+  --color-gender-neutral: var(--color-gray-700);
+  --color-gender-neutral-outline: var(--color-gray-300);
+  --color-gender-neutral-surface: var(--color-gray-100);
+  --color-gender-neutral-background: var(--color-gray-25);
+
+  /* States */
+  --color-warning: var(--color-orange-500);
+  --color-on-warning:  var(--color-white);
 
-  --color-primary: var(--color-purple-500);
-  --color-on-primary: #FFFFFF;
-  --color-secondary: #11243E;
-  --color-on-secondary: #FFFFFF;
-  --color-warning: var(--color-yellow-500);
-  --color-on-warning: #FFFFFF;
   --color-positive: var(--color-green-500);
-  --color-on-positive: #FFFFFF;
+  --color-on-positive:  var(--color-white);
+
   --color-negative: var(--color-red-500);
-  --color-on-negative: #FFFFFF;
+  --color-on-negative:  var(--color-white);
   --color-negative-border: var(--color-negative);
   --color-negative-border-hover: var(--color-red-700);
-  --color-surface: #FFFFFF;
-  --color-on-surface: var(--color-text-dark);
-  --color-surface-variant: #F8F8F8;
-  --color-surface-warning: #FBECD9;
-  --color-highlight: #3272DF;
-  --color-background: #EEEEEE;
-  --color-on-background: var(--color-text-dark);
-
-  --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: 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: var(--color-text-default);
-  --color-text-secondary: #666666;
-  --color-text-tertiary: #B3B3B3;
-  --color-text-highlight: #3272DF;
-  --color-text-label: #4D4D4D;
-  --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;
-  --color-outline-variant: #CCCCCC;
-
-  --color-disabled-background: #E2E2E2;
-  --color-disabled-text: #888888;
+
+  --color-disabled-background: var(--color-gray-200);
+  --color-disabled-text: var(--color-gray-400);
   --color-disabled-icon: var(--color-disabled-text);
-  --color-disabled-border: #CFCFCF;
+  --color-disabled-border: var(--color-gray-300);
   --color-disabled-outline: var(--color-disabled-border);
 
-  --color-border: #CCCCCC;
+  /* Surface */
+  --color-surface:  var(--color-white);
+  --color-on-surface: var(--color-text-primary);
+  --color-surface-variant: var(--color-gray-25);
+  --color-surface-warning: var(--color-orange-100);
+
+  /* Text */
+  --color-text-primary: var(--color-gray-900);
+  --color-text-secondary: var(--color-gray-600);
+  --color-text-tertiary: var(--color-gray-300);
+  --color-text-highlight: var(--color-highlight);
+  --color-description: var(--color-gray-600);
+  --color-label: var(--color-gray-700);
 
-  --color-focus: var(--color-purple-400);
+  /* Other */
+  --color-primary: var(--color-purple-500);
+  --color-on-primary: var(--color-white);
+  --color-secondary: var(--color-blue-800);
+  --color-on-secondary:  var(--color-white);
+  --color-highlight:  var(--color-blue-500);
 }
 
 /* non light-theme overrides */
 @layer base {
   /* dark theme */
   @variant dark {
-    --color-text-default: var(--color-text-light);
-
-    --color-surface: #333333;
-    --color-on-surface: var(--color-text-light);
-    --color-surface-variant: #494949;
-    --color-surface-warning: #FBECD9;
-    --color-text-label: #CFCFCF;
-    --color-highlight: #3272DF;
-    --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: var(--color-text-light);
-    --color-text-secondary: #666666;
-    --color-text-tertiary: #B3B3B3;
-    --color-text-highlight: #3272DF;
-    --color-description: #999999;
-
-    --color-disabled-background: #292929;
-    --color-disabled-text: #666666;
-    --color-disabled-border: #363636;
+    /* Background */
+    --color-background: var(--color-gray-850);
+    --color-on-background: var(--color-text-primary);
+
+    /* States */
+    --color-positive: var(--color-green-700);
+
+    --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);
+
+    /* Text */
+    --color-text-primary: var(--color-gray-100);
+    --color-text-secondary: var(--color-gray-400);
+    --color-text-tertiary: var(--color-gray-600);
+    --color-description: var(--color-gray-400);
+    --color-label: var(--color-gray-300);
+
+    /* Other */
+    --color-primary: var(--color-purple-400);
   }
 }

package/dist/css/uncompiled/utitlity/shadow.css

@@ -1,29 +1,58 @@
+@import "tailwindcss";
+
+@utility shadow-side {
+  box-shadow: var(--shadow-right, 0 0 0 transparent),
+    var(--shadow-left, 0 0 0 transparent),
+    var(--shadow-top, 0 0 0 transparent),
+    var(--shadow-bottom, 0 0 0 transparent);
+}
+
+@utility shadow-r-* {
+  --shadow-right: calc(--value(number) * 1px) 0 calc(--value(number) * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+}
+
+@utility shadow-l-* {
+  --shadow-left: calc(--value(number) * -1px) 0 calc(--value(number) * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+}
+
+@utility shadow-t-* {
+  --shadow-top: 0 calc(--value(number) * -1px) calc(--value(number) * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+}
+
+@utility shadow-b-* {
+  --shadow-bottom: 0 calc(--value(number) * 1px) calc(--value(number) * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+}
+
+@utility shadow-around-* {
+  --shadow-right: calc(--value(number) * 1px) 0 calc(--value(number) * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+  --shadow-left: calc(--value(number) * -1px) 0 calc(--value(number) * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+  --shadow-top: 0 calc(--value(number) * -1px) calc(--value(number) * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+  --shadow-bottom: 0 calc(--value(number) * 1px) calc(--value(number) * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+  @apply shadow-side;
+}
+
+@utility shadow-strong {
+  --tw-shadow-color: rgba(0, 0, 0, 0.06);
+}
+
+@utility shadow-hard {
+  --tw-shadow-color: rgba(0, 0, 0, 0.10);
+}
+
 @layer utilities {
   .shadow-around {
-    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.02),
-    0 -2px 2px 0 rgba(0, 0, 0, 0.02),
-    2px 0 2px 0 rgba(0, 0, 0, 0.02),
-    -2px 0 2px 0 rgba(0, 0, 0, 0.02);
+    @apply shadow-around-2;
   }
 
   .shadow-around-md {
-    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.02),
-    0 -5px 5px 0 rgba(0, 0, 0, 0.02),
-    5px 0 5px 0 rgba(0, 0, 0, 0.02),
-    -5px 0 5px 0 rgba(0, 0, 0, 0.02);
+    @apply shadow-around-5;
   }
 
   .shadow-around-lg {
-    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.02),
-    0 -10px 10px 0 rgba(0, 0, 0, 0.02),
-    10px 0 10px 0 rgba(0, 0, 0, 0.02),
-    -10px 0 10px 0 rgba(0, 0, 0, 0.02);
+    @apply shadow-around-10;
   }
 
   .shadow-around-xl {
-    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.02),
-    0 -20px 20px 0 rgba(0, 0, 0, 0.02),
-    20px 0 20px 0 rgba(0, 0, 0, 0.02),
-    -20px 0 20px 0 rgba(0, 0, 0, 0.02);
+    @apply shadow-around-20;
   }
 }

package/dist/hooks/useLocalStorage.js

@@ -53,6 +53,11 @@ var LocalStorageService = class extends StorageService {
   }
 };
 
+// src/util/resolveSetState.ts
+function resolveSetState(action, prev) {
+  return typeof action === "function" ? action(prev) : action;
+}
+
 // src/hooks/useLocalStorage.ts
 var useLocalStorage = (key, initValue) => {
   const get = (0, import_react.useCallback)(() => {
@@ -64,10 +69,10 @@ var useLocalStorage = (key, initValue) => {
     return value || initValue;
   }, [initValue, key]);
   const [storedValue, setStoredValue] = (0, import_react.useState)(get);
-  const setValue = (0, import_react.useCallback)((value) => {
-    const newValue = value instanceof Function ? value(storedValue) : value;
+  const setValue = (0, import_react.useCallback)((action) => {
+    const newValue = resolveSetState(action, storedValue);
     const storageService = new LocalStorageService();
-    storageService.set(key, value);
+    storageService.set(key, newValue);
     setStoredValue(newValue);
   }, [storedValue, setStoredValue, key]);
   (0, import_react.useEffect)(() => {

package/dist/hooks/useLocalStorage.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\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(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}","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"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAiD;;;ACDjD,IAAM,iBAAN,MAAqB;AAAA;AAAA,EAGnB,YAAoB,SAAkB;AAAlB;AAAA,EACpB;AAAA,EAEO,IAAO,KAAuB;AACnC,UAAM,QAAQ,KAAK,QAAQ,QAAQ,GAAG;AACtC,QAAI,UAAU,MAAM;AAClB,aAAO;AAAA,IACT;AACA,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AAAA,EAEO,IAAO,KAAa,OAAU;AACnC,SAAK,QAAQ,QAAQ,KAAK,KAAK,UAAU,KAAK,CAAC;AAAA,EACjD;AAAA,EAEO,OAAO,KAAa;AACzB,SAAK,QAAQ,WAAW,GAAG;AAAA,EAC7B;AAAA,EAEO,YAAY;AACjB,SAAK,QAAQ,MAAM;AAAA,EACrB;AACF;AAEO,IAAM,sBAAN,cAAkC,eAAe;AAAA,EACtD,cAAc;AACZ,UAAM,OAAO,YAAY;AAAA,EAC3B;AACF;;;AD1BO,IAAM,kBAAkB,CAAI,KAAa,cAAmC;AACjF,QAAM,UAAM,0BAAY,MAAS;AAC/B,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,UAAM,QAAQ,eAAe,IAAO,GAAG;AACvC,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,WAAW,GAAG,CAAC;AAEnB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAY,GAAG;AAErD,QAAM,eAAwB,0BAAY,WAAS;AACjD,UAAM,WAAW,iBAAiB,WAAW,MAAM,WAAW,IAAI;AAClE,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,mBAAe,IAAI,KAAK,KAAK;AAE7B,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,aAAa,gBAAgB,GAAG,CAAC;AAErC,8BAAU,MAAM;AACd,mBAAe,IAAI,CAAC;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,aAAa,QAAQ;AAC/B;","names":[]}
+{"version":3,"sources":["../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts","../../src/util/resolveSetState.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, 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  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\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":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAiD;;;ACDjD,IAAM,iBAAN,MAAqB;AAAA;AAAA,EAGnB,YAAoB,SAAkB;AAAlB;AAAA,EACpB;AAAA,EAEO,IAAO,KAAuB;AACnC,UAAM,QAAQ,KAAK,QAAQ,QAAQ,GAAG;AACtC,QAAI,UAAU,MAAM;AAClB,aAAO;AAAA,IACT;AACA,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AAAA,EAEO,IAAO,KAAa,OAAU;AACnC,SAAK,QAAQ,QAAQ,KAAK,KAAK,UAAU,KAAK,CAAC;AAAA,EACjD;AAAA,EAEO,OAAO,KAAa;AACzB,SAAK,QAAQ,WAAW,GAAG;AAAA,EAC7B;AAAA,EAEO,YAAY;AACjB,SAAK,QAAQ,MAAM;AAAA,EACrB;AACF;AAEO,IAAM,sBAAN,cAAkC,eAAe;AAAA,EACtD,cAAc;AACZ,UAAM,OAAO,YAAY;AAAA,EAC3B;AACF;;;AC7BO,SAAS,gBAAmB,QAA2B,MAAY;AACxE,SAAO,OAAO,WAAW,aAAc,OAA0B,IAAI,IAAI;AAC3E;;;AFEO,IAAM,kBAAkB,CAAI,KAAa,cAAmC;AACjF,QAAM,UAAM,0BAAY,MAAS;AAC/B,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,UAAM,QAAQ,eAAe,IAAO,GAAG;AACvC,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,WAAW,GAAG,CAAC;AAEnB,QAAM,CAAC,aAAa,cAAc,QAAI,uBAAY,GAAG;AAErD,QAAM,eAAwB,0BAAY,YAAU;AAClD,UAAM,WAAW,gBAAgB,QAAQ,WAAW;AACpD,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,mBAAe,IAAI,KAAK,QAAQ;AAEhC,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,aAAa,gBAAgB,GAAG,CAAC;AAErC,8BAAU,MAAM;AACd,mBAAe,IAAI,CAAC;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,aAAa,QAAQ;AAC/B;","names":[]}

package/dist/hooks/useLocalStorage.mjs

@@ -30,6 +30,11 @@ var LocalStorageService = class extends StorageService {
   }
 };
 
+// src/util/resolveSetState.ts
+function resolveSetState(action, prev) {
+  return typeof action === "function" ? action(prev) : action;
+}
+
 // src/hooks/useLocalStorage.ts
 var useLocalStorage = (key, initValue) => {
   const get = useCallback(() => {
@@ -41,10 +46,10 @@ var useLocalStorage = (key, initValue) => {
     return value || initValue;
   }, [initValue, key]);
   const [storedValue, setStoredValue] = useState(get);
-  const setValue = useCallback((value) => {
-    const newValue = value instanceof Function ? value(storedValue) : value;
+  const setValue = useCallback((action) => {
+    const newValue = resolveSetState(action, storedValue);
     const storageService = new LocalStorageService();
-    storageService.set(key, value);
+    storageService.set(key, newValue);
     setStoredValue(newValue);
   }, [storedValue, setStoredValue, key]);
   useEffect(() => {

package/dist/hooks/useLocalStorage.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\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(value => {\n    const newValue = value instanceof Function ? value(storedValue) : value\n    const storageService = new LocalStorageService()\n    storageService.set(key, value)\n\n    setStoredValue(newValue)\n  }, [storedValue, setStoredValue, key])\n\n  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  return [storedValue, setValue]\n}","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"],"mappings":";AACA,SAAS,aAAa,WAAW,gBAAgB;;;ACDjD,IAAM,iBAAN,MAAqB;AAAA;AAAA,EAGnB,YAAoB,SAAkB;AAAlB;AAAA,EACpB;AAAA,EAEO,IAAO,KAAuB;AACnC,UAAM,QAAQ,KAAK,QAAQ,QAAQ,GAAG;AACtC,QAAI,UAAU,MAAM;AAClB,aAAO;AAAA,IACT;AACA,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AAAA,EAEO,IAAO,KAAa,OAAU;AACnC,SAAK,QAAQ,QAAQ,KAAK,KAAK,UAAU,KAAK,CAAC;AAAA,EACjD;AAAA,EAEO,OAAO,KAAa;AACzB,SAAK,QAAQ,WAAW,GAAG;AAAA,EAC7B;AAAA,EAEO,YAAY;AACjB,SAAK,QAAQ,MAAM;AAAA,EACrB;AACF;AAEO,IAAM,sBAAN,cAAkC,eAAe;AAAA,EACtD,cAAc;AACZ,UAAM,OAAO,YAAY;AAAA,EAC3B;AACF;;;AD1BO,IAAM,kBAAkB,CAAI,KAAa,cAAmC;AACjF,QAAM,MAAM,YAAY,MAAS;AAC/B,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,UAAM,QAAQ,eAAe,IAAO,GAAG;AACvC,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,WAAW,GAAG,CAAC;AAEnB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAY,GAAG;AAErD,QAAM,WAAwB,YAAY,WAAS;AACjD,UAAM,WAAW,iBAAiB,WAAW,MAAM,WAAW,IAAI;AAClE,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,mBAAe,IAAI,KAAK,KAAK;AAE7B,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,aAAa,gBAAgB,GAAG,CAAC;AAErC,YAAU,MAAM;AACd,mBAAe,IAAI,CAAC;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,aAAa,QAAQ;AAC/B;","names":[]}
+{"version":3,"sources":["../../src/hooks/useLocalStorage.ts","../../src/util/storage.ts","../../src/util/resolveSetState.ts"],"sourcesContent":["import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, 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  useEffect(() => {\n    setStoredValue(get())\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\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":";AACA,SAAS,aAAa,WAAW,gBAAgB;;;ACDjD,IAAM,iBAAN,MAAqB;AAAA;AAAA,EAGnB,YAAoB,SAAkB;AAAlB;AAAA,EACpB;AAAA,EAEO,IAAO,KAAuB;AACnC,UAAM,QAAQ,KAAK,QAAQ,QAAQ,GAAG;AACtC,QAAI,UAAU,MAAM;AAClB,aAAO;AAAA,IACT;AACA,WAAO,KAAK,MAAM,KAAK;AAAA,EACzB;AAAA,EAEO,IAAO,KAAa,OAAU;AACnC,SAAK,QAAQ,QAAQ,KAAK,KAAK,UAAU,KAAK,CAAC;AAAA,EACjD;AAAA,EAEO,OAAO,KAAa;AACzB,SAAK,QAAQ,WAAW,GAAG;AAAA,EAC7B;AAAA,EAEO,YAAY;AACjB,SAAK,QAAQ,MAAM;AAAA,EACrB;AACF;AAEO,IAAM,sBAAN,cAAkC,eAAe;AAAA,EACtD,cAAc;AACZ,UAAM,OAAO,YAAY;AAAA,EAC3B;AACF;;;AC7BO,SAAS,gBAAmB,QAA2B,MAAY;AACxE,SAAO,OAAO,WAAW,aAAc,OAA0B,IAAI,IAAI;AAC3E;;;AFEO,IAAM,kBAAkB,CAAI,KAAa,cAAmC;AACjF,QAAM,MAAM,YAAY,MAAS;AAC/B,QAAI,OAAO,WAAW,aAAa;AACjC,aAAO;AAAA,IACT;AACA,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,UAAM,QAAQ,eAAe,IAAO,GAAG;AACvC,WAAO,SAAS;AAAA,EAClB,GAAG,CAAC,WAAW,GAAG,CAAC;AAEnB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAY,GAAG;AAErD,QAAM,WAAwB,YAAY,YAAU;AAClD,UAAM,WAAW,gBAAgB,QAAQ,WAAW;AACpD,UAAM,iBAAiB,IAAI,oBAAoB;AAC/C,mBAAe,IAAI,KAAK,QAAQ;AAEhC,mBAAe,QAAQ;AAAA,EACzB,GAAG,CAAC,aAAa,gBAAgB,GAAG,CAAC;AAErC,YAAU,MAAM;AACd,mBAAe,IAAI,CAAC;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,aAAa,QAAQ;AAC/B;","names":[]}