@helpwave/hightide 0.1.47 → 0.2.0

package/dist/style/globals.css

@@ -19,6 +19,7 @@
     --color-blue-50: #F6FAFF;
     --color-blue-100: #D6E3F9;
     --color-blue-200: #99B9EF;
+    --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: #3272DF;
     --color-blue-800: #1A4080;
     --color-blue-900: #11243E;
@@ -143,8 +144,6 @@
     --color-progress-indicator-background: var(--color-gray-300);
     --color-property-title-background: var(--color-gray-100);
     --color-property-title-text: var(--color-text-secondary);
-    --color-scrollbar-track: #00000033;
-    --color-scrollbar-thumb: var(--color-gray-600);
     --color-stepperbar-dot-active: var(--color-primary);
     --color-stepperbar-dot-normal: var(--color-purple-100);
     --color-stepperbar-dot-disabled: var(--color-description);
@@ -417,6 +416,9 @@
   .left-full {
     left: 100%;
   }
+  .z-1 {
+    z-index: 1;
+  }
   .z-10 {
     z-index: 10;
   }
@@ -471,9 +473,6 @@
   .\!m-0 {
     margin: calc(var(--spacing) * 0) !important;
   }
-  .mx-1 {
-    margin-inline: calc(var(--spacing) * 1);
-  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -492,6 +491,9 @@
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
   .mt-12 {
     margin-top: calc(var(--spacing) * 12);
   }
@@ -507,9 +509,6 @@
   .mr-\[6px\] {
     margin-right: 6px;
   }
-  .mb-1 {
-    margin-bottom: calc(var(--spacing) * 1);
-  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -555,11 +554,6 @@
     flex-direction: row;
     column-gap: calc(var(--spacing) * 6);
   }
-  .row {
-    display: flex;
-    flex-direction: row;
-    column-gap: calc(var(--spacing) * 2);
-  }
   .flex-col-0 {
     display: flex;
     flex-direction: column;
@@ -683,12 +677,6 @@
   .h-128 {
     height: calc(var(--spacing) * 128);
   }
-  .h-\[calc\(100\%_-_var\(--scrollbar-size\)\)\] {
-    height: calc(100% - var(--scrollbar-size));
-  }
-  .h-\[var\(--scrollbar-size\)\] {
-    height: var(--scrollbar-size);
-  }
   .h-full {
     height: 100%;
   }
@@ -707,9 +695,6 @@
   .max-h-16 {
     max-height: calc(var(--spacing) * 16);
   }
-  .max-h-32 {
-    max-height: calc(var(--spacing) * 32);
-  }
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
@@ -743,9 +728,6 @@
   .min-h-\[400px\] {
     min-height: 400px;
   }
-  .min-h-\[var\(--scrollbar-size\)\] {
-    min-height: var(--scrollbar-size);
-  }
   .\!w-fit {
     width: fit-content !important;
   }
@@ -773,6 +755,9 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -797,12 +782,6 @@
   .w-\[400px\] {
     width: 400px;
   }
-  .w-\[calc\(100\%_-_var\(--scrollbar-size\)\)\] {
-    width: calc(100% - var(--scrollbar-size));
-  }
-  .w-\[var\(--scrollbar-size\)\] {
-    width: var(--scrollbar-size);
-  }
   .w-fit {
     width: fit-content;
   }
@@ -830,15 +809,9 @@
   .max-w-20 {
     max-width: calc(var(--spacing) * 20);
   }
-  .max-w-40 {
-    max-width: calc(var(--spacing) * 40);
-  }
   .max-w-48 {
     max-width: calc(var(--spacing) * 48);
   }
-  .max-w-60 {
-    max-width: calc(var(--spacing) * 60);
-  }
   .max-w-64 {
     max-width: calc(var(--spacing) * 64);
   }
@@ -863,9 +836,6 @@
   .min-w-32 {
     min-width: calc(var(--spacing) * 32);
   }
-  .min-w-40 {
-    min-width: calc(var(--spacing) * 40);
-  }
   .min-w-48 {
     min-width: calc(var(--spacing) * 48);
   }
@@ -884,9 +854,6 @@
   .min-w-\[320px\] {
     min-width: 320px;
   }
-  .min-w-\[var\(--scrollbar-size\)\] {
-    min-width: var(--scrollbar-size);
-  }
   .flex-1 {
     flex: 1;
   }
@@ -899,6 +866,11 @@
   .grow {
     flex-grow: 1;
   }
+  .-translate-1\/2 {
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1111,6 +1083,10 @@
     border-right-style: var(--tw-border-style);
     border-right-width: 0px;
   }
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
   .border-l-0 {
     border-left-style: var(--tw-border-style);
     border-left-width: 0px;
@@ -1133,9 +1109,6 @@
       border-color: color-mix(in oklab, var(--color-divider) 50%, transparent);
     }
   }
-  .border-inherit {
-    border-color: inherit;
-  }
   .border-primary {
     border-color: var(--color-primary);
   }
@@ -1181,6 +1154,9 @@
   .\!bg-warning {
     background-color: var(--color-warning) !important;
   }
+  .bg-blue-400 {
+    background-color: var(--color-blue-400);
+  }
   .bg-button-solid-neutral-background {
     background-color: var(--color-button-solid-neutral-background);
   }
@@ -1250,17 +1226,8 @@
   .bg-property-title-background {
     background-color: var(--color-property-title-background);
   }
-  .bg-scrollbar-thumb {
-    background-color: var(--color-scrollbar-thumb);
-  }
-  .bg-scrollbar-track {
-    background-color: var(--color-scrollbar-track);
-  }
-  .bg-scrollbar-track\/50 {
-    background-color: color-mix(in srgb, #00000033 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-scrollbar-track) 50%, transparent);
-    }
+  .bg-red-400 {
+    background-color: var(--color-red-400);
   }
   .bg-secondary {
     background-color: var(--color-secondary);
@@ -1466,6 +1433,9 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -2133,28 +2103,6 @@
       }
     }
   }
-  .group-hover\/scrollbar\:bg-primary {
-    &:is(:where(.group\/scrollbar):hover *) {
-      @media (hover: hover) {
-        background-color: var(--color-primary);
-      }
-    }
-  }
-  .peer-\[\&\:where\(\[data-state\=visible\]\)\]\/horizontal\:h-\[calc\(100\%_-_var\(--scrollbar-size\)\)\] {
-    &:is(:where(.peer\/horizontal):where([data-state=visible]) ~ *) {
-      height: calc(100% - var(--scrollbar-size));
-    }
-  }
-  .peer-\[\&\:where\(\[data-state\=visible\]\)\]\/vertical\:w-\[calc\(100\%_-_var\(--scrollbar-size\)\)\] {
-    &:is(:where(.peer\/vertical):where([data-state=visible]) ~ *) {
-      width: calc(100% - var(--scrollbar-size));
-    }
-  }
-  .first\:mt-1 {
-    &:first-child {
-      margin-top: calc(var(--spacing) * 1);
-    }
-  }
   .first\:rounded-t-md {
     &:first-child {
       border-top-left-radius: var(--radius-md);
@@ -2239,24 +2187,24 @@
       }
     }
   }
-  .hover\:bg-scrollbar-track {
+  .hover\:bg-stepperbar-dot-active {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-scrollbar-track);
+        background-color: var(--color-stepperbar-dot-active);
       }
     }
   }
-  .hover\:bg-stepperbar-dot-active {
+  .hover\:text-button-solid-primary-text {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-stepperbar-dot-active);
+        color: var(--color-button-solid-primary-text);
       }
     }
   }
-  .hover\:text-button-solid-primary-text {
+  .hover\:text-on-background {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-button-solid-primary-text);
+        color: var(--color-on-background);
       }
     }
   }
@@ -2361,14 +2309,6 @@
       border-color: var(--color-primary);
     }
   }
-  .focus\:bg-primary\/20 {
-    &:focus {
-      background-color: color-mix(in srgb, #694BB4 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-      }
-    }
-  }
   .focus\:ring-0 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2514,26 +2454,6 @@
       font-weight: var(--font-weight-normal);
     }
   }
-  .data-\[state\=visible\]\:h-\[var\(--scrollbar-size\)\] {
-    &[data-state="visible"] {
-      height: var(--scrollbar-size);
-    }
-  }
-  .data-\[state\=visible\]\:min-h-\[var\(--scrollbar-size\)\] {
-    &[data-state="visible"] {
-      min-height: var(--scrollbar-size);
-    }
-  }
-  .data-\[state\=visible\]\:w-\[var\(--scrollbar-size\)\] {
-    &[data-state="visible"] {
-      width: var(--scrollbar-size);
-    }
-  }
-  .data-\[state\=visible\]\:min-w-\[var\(--scrollbar-size\)\] {
-    &[data-state="visible"] {
-      min-width: var(--scrollbar-size);
-    }
-  }
   .motion-safe\:animate-fade-in {
     @media (prefers-reduced-motion: no-preference) {
       animation: fade-in 0.2s ease-in-out;
@@ -3068,10 +2988,9 @@
   .chip {
     display: flex;
     flex-direction: row;
-    column-gap: calc(var(--spacing) * 2);
+    column-gap: calc(var(--spacing) * 1);
     align-items: center;
     justify-content: center;
-    column-gap: calc(var(--spacing) * 1);
     border-radius: var(--radius-md);
     padding-inline: calc(var(--spacing) * 2);
     padding-block: calc(var(--spacing) * 1);
@@ -3079,10 +2998,9 @@
   .chip-full {
     display: flex;
     flex-direction: row;
-    column-gap: calc(var(--spacing) * 2);
+    column-gap: calc(var(--spacing) * 1);
     align-items: center;
     justify-content: center;
-    column-gap: calc(var(--spacing) * 1);
     border-radius: calc(infinity * 1px);
     padding-inline: calc(var(--spacing) * 2);
     padding-block: calc(var(--spacing) * 1);

package/dist/style/uncompiled/globals.css

@@ -60,11 +60,11 @@
   }
 
   .chip {
-    @apply row gap-x-1 items-center justify-center px-2 py-1 rounded-md;
+    @apply flex-row-1 items-center justify-center px-2 py-1 rounded-md;
   }
 
   .chip-full {
-    @apply row gap-x-1 items-center justify-center px-2 py-1 rounded-full;
+    @apply flex-row-1 items-center justify-center px-2 py-1 rounded-full;
   }
 
   .section-padding-x {

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

@@ -1,17 +1,9 @@
-@utility col {
-  @apply flex flex-col gap-y-2;
-}
-
 @utility flex-col-* {
   display: flex;
   flex-direction: column;
   row-gap: calc(var(--spacing) * --value(number));
 }
 
-@utility row {
-  @apply flex flex-row gap-x-2;
-}
-
 @utility flex-row-* {
   display: flex;
   flex-direction: row;

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helpwave/hightide.git"
   },
   "license": "MPL-2.0",
-  "version": "0.1.47",
+  "version": "0.2.0",
   "files": [
     "dist"
   ],
@@ -42,14 +42,13 @@
     "@tanstack/react-table": "8.21.3",
     "clsx": "2.1.1",
     "lucide-react": "0.468.0",
-    "postcss": "^8.5.3",
-    "radix-ui": "1.4.2",
+    "postcss": "8.5.3",
     "react": "18.3.1",
     "react-custom-scrollbars-2": "4.5.0",
     "react-dom": "18.3.1",
     "tailwindcss": "4.1.3",
     "tinycolor2": "1.6.0",
-    "@helpwave/internationalization": "0.3.0"
+    "@helpwave/internationalization": "0.4.0"
   },
   "devDependencies": {
     "@babel/core": "7.26.0",