@helpwave/hightide 0.6.6 → 0.6.7

package/dist/style/globals.css

@@ -491,6 +491,11 @@
     flex-direction: row;
     column-gap: calc(var(--spacing) * 6);
   }
+  .flex-row-8 {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 8);
+  }
   .flex-col-0 {
     display: flex;
     flex-direction: column;
@@ -664,6 +669,9 @@
   .max-h-71 {
     max-height: calc(var(--spacing) * 71);
   }
+  .max-h-128 {
+    max-height: calc(var(--spacing) * 128);
+  }
   .\!min-h-10 {
     min-height: calc(var(--spacing) * 10) !important;
   }
@@ -763,9 +771,6 @@
   .max-w-128 {
     max-width: calc(var(--spacing) * 128);
   }
-  .max-w-full {
-    max-width: 100%;
-  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -775,6 +780,9 @@
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
+  .min-w-24 {
+    min-width: calc(var(--spacing) * 24);
+  }
   .min-w-26 {
     min-width: calc(var(--spacing) * 26);
   }
@@ -816,6 +824,10 @@
     --tw-translate-x: calc(1/2 * 100%);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-4 {
+    --tw-translate-x: calc(var(--spacing) * 4);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1443,9 +1455,6 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
-  .overflow-ellipsis {
-    text-overflow: ellipsis;
-  }
   .text-ellipsis {
     text-overflow: ellipsis;
   }
@@ -3023,14 +3032,14 @@
   }
 }
 @layer components {
-  [data-name="table-container"] {
+  .table-container {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 0);
     width: 100%;
     overflow: auto;
   }
-  [data-name="table"] {
+  .table {
     table-layout: fixed;
     border-collapse: separate;
     --tw-border-spacing-x: calc(var(--spacing) * 0);
@@ -3040,7 +3049,7 @@
     background-color: var(--color-table-background);
     color: var(--color-table-text);
   }
-  [data-name="table-filler-cell"] {
+  .table-filler-cell {
     display: flex;
     height: calc(var(--spacing) * 6);
     width: calc(1/2 * 100%);
@@ -3050,17 +3059,14 @@
     font-weight: var(--font-weight-bold);
     color: var(--color-disabled);
   }
-  [data-name="table-cell"] {
+  .table-default-cell {
     display: block;
     max-width: 100%;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  [data-name="table-header-cell"] {
-    position: relative;
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
+  .table-header-cell {
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2.5);
     &:first-child {
@@ -3086,23 +3092,29 @@
       border-top-right-radius: var(--radius-lg);
     }
     background-color: var(--color-table-header-background);
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
     color: var(--color-description);
+    &[data-sticky] {
+      position: sticky;
+      top: calc(var(--spacing) * 0);
+    }
   }
-  [data-name="table-body-row"] {
+  .table-body-row {
     &:hover {
       @media (hover: hover) {
         background-color: var(--color-table-row-hover-background);
       }
     }
   }
-  [data-name="table-body-filler-row"] {
+  .table-body-filler-row {
     &:hover {
       @media (hover: hover) {
         cursor: not-allowed;
       }
     }
   }
-  [data-name="table-body-cell"], [data-name="table-body-filler-cell"] {
+  .table-body-cell, .table-body-filler-cell {
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2.5);
     &:first-child {
@@ -3162,7 +3174,7 @@
       }
     }
   }
-  [data-name="table-body-row"]:last-child > [data-name="table-body-cell"] {
+  .table-body-row:last-child > .table-body-cell {
     &:first-child {
       border-bottom-left-radius: var(--radius-lg);
     }
@@ -3994,7 +4006,7 @@
   }
 }
 @layer components {
-  [data-name="tooltip"] {
+  .tooltip {
     position: absolute;
     border-radius: 0.25rem;
     padding-inline: calc(var(--spacing) * 2);
@@ -4004,16 +4016,19 @@
     --shadow-top: 0 -5px 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
     --shadow-bottom: 0 5px 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
     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);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     background-color: var(--color-tooltip-background);
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
     color: var(--color-tooltip-text);
-    &[data-state="opening"] {
+    &[data-state="opening"][data-animated] {
       animation: fade-in calc(var(--animation-duration-in, 250ms) * 2) ease-in-out 1 forwards;
     }
-    &[data-state="closing"] {
+    &[data-state="closing"][data-animated] {
       animation: fade-in var(--animation-duration-out, 170ms) ease-in-out 1 reverse forwards;
     }
     &[data-state="closed"] {

package/dist/style/uncompiled/theme/components/table.css

@@ -1,41 +1,41 @@
 @layer components {
-  [data-name="table-container"] {
+  .table-container {
     @apply flex-col-0 w-full overflow-auto;
   }
 
-  [data-name="table"] {
+  .table {
     @apply table-fixed border-separate border-spacing-0 rounded-lg;
     @apply bg-table-background text-table-text;
   }
 
-  [data-name="table-filler-cell"] {
+  .table-filler-cell {
     @apply flex flex-row items-center w-1/2 h-6 text-disabled font-bold;
   }
 
-  [data-name="table-cell"] {
+  .table-default-cell {
     @apply block max-w-full overflow-ellipsis truncate;
   }
 
-  [data-name="table-header-row"] {
-  }
-
-  [data-name="table-header-cell"] {
-    @apply relative font-bold;
+  .table-header-cell {
     @apply px-3 first:pl-6 last:pr-6 py-2.5;
     @apply border-y-1 first:border-l-1 last:border-r-1;
     @apply first:rounded-tl-lg last:rounded-tr-lg;
-    @apply bg-table-header-background text-description;
+    @apply bg-table-header-background text-description font-bold;
+
+    &[data-sticky] {
+      @apply sticky top-0;
+    }
   }
 
-  [data-name="table-body-row"] {
+  .table-body-row {
     @apply hover:bg-table-row-hover-background;
   }
 
-  [data-name="table-body-filler-row"] {
+  .table-body-filler-row {
     @apply hover:cursor-not-allowed;
   }
 
-  [data-name="table-body-cell"], [data-name="table-body-filler-cell"] {
+  .table-body-cell, .table-body-filler-cell {
     @apply px-3 first:pl-6 last:pr-6 py-2.5;
     @apply border-b-1 first:border-l-1 last:border-r-1;
     @apply [nth-last-child(1)]:first:rounded-bl-lg [nth-last-child(1)]:last:rounded-br-lg;
@@ -60,7 +60,7 @@
     }
   }
 
-  [data-name="table-body-row"]:last-child > [data-name="table-body-cell"] {
+  .table-body-row:last-child > .table-body-cell {
     @apply first:rounded-bl-lg last:rounded-br-lg;
   }
 }

package/dist/style/uncompiled/theme/components/tooltip.css

@@ -8,14 +8,14 @@
 }
 
 @layer components {
-  [data-name="tooltip"] {
+  .tooltip {
     @apply absolute px-2 py-1 rounded shadow-around-md;
-    @apply text-xs font-semibold text-tooltip-text bg-tooltip-background;
+    @apply text-xs font-semibold text-tooltip-text bg-tooltip-background truncate;
 
-    &[data-state="opening"] {
+    &[data-state="opening"][data-animated] {
       @apply animate-tooltip-fade-in;
     }
-    &[data-state="closing"] {
+    &[data-state="closing"][data-animated] {
       @apply animate-tooltip-fade-out;
     }
     &[data-state="closed"] {

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helpwave/hightide.git"
   },
   "license": "MPL-2.0",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "files": [
     "dist"
   ],