@helpwave/hightide 0.6.6 → 0.6.8

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;
   }
@@ -2823,7 +2832,7 @@
   }
 }
 @layer components {
-  [data-name="input"]:not(.default-style-none) {
+  [data-name="input"] {
     height: calc(var(--spacing) * 10);
     &:focus-visible {
       border-style: var(--tw-border-style);
@@ -2882,7 +2891,7 @@
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);
   }
-  [data-name="select-button"]:not(.default-style-none) {
+  [data-name="select-button"] {
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
@@ -2952,7 +2961,7 @@
       }
     }
   }
-  [data-name="select-button-chips"]:not(.default-style-none) {
+  [data-name="select-button-chips"] {
     display: flex;
     &:focus-visible {
       border-style: var(--tw-border-style);
@@ -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,15 @@
     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"] {
+  .table-header-cell {
     position: relative;
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2.5);
     &:first-child {
@@ -3086,23 +3093,36 @@
       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-clickable] {
+      &:hover {
+        @media (hover: hover) {
+          cursor: pointer;
+        }
+      }
+    }
   }
-  [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 +3182,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);
     }
@@ -3743,7 +3763,7 @@
   }
 }
 @layer components {
-  [data-name="expandable-root"]:not(.default-style-none) {
+  [data-name="expandable-root"] {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 0);
@@ -3770,7 +3790,7 @@
       cursor: pointer;
     }
   }
-  [data-name="expandable-header"]:not(.default-style-none) {
+  [data-name="expandable-header"] {
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
@@ -3826,7 +3846,7 @@
       --coloring-text-hover: transparent;
     }
   }
-  [data-name="expandable-content"]:not(.default-style-none) {
+  [data-name="expandable-content"] {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 2);
@@ -3861,7 +3881,7 @@
   }
 }
 @layer components {
-  [data-name="expansion-icon"]:not(.default-style-none) {
+  [data-name="expansion-icon"] {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 0);
@@ -3891,7 +3911,7 @@
   }
 }
 @layer components {
-  [data-name="checkbox"]:not(.default-style-none) {
+  .checkbox {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 0);
@@ -3967,19 +3987,31 @@
       }
     }
     &[data-size="sm"] {
-      width: calc(var(--spacing) * 5);
       height: calc(var(--spacing) * 5);
+      min-height: calc(var(--spacing) * 5);
+      max-height: calc(var(--spacing) * 5);
+      width: calc(var(--spacing) * 5);
+      min-width: calc(var(--spacing) * 5);
+      max-width: calc(var(--spacing) * 5);
     }
     &[data-size="md"] {
-      width: calc(var(--spacing) * 6);
       height: calc(var(--spacing) * 6);
+      min-height: calc(var(--spacing) * 6);
+      max-height: calc(var(--spacing) * 6);
+      width: calc(var(--spacing) * 6);
+      min-width: calc(var(--spacing) * 6);
+      max-width: calc(var(--spacing) * 6);
     }
     &[data-size="lg"] {
-      width: calc(var(--spacing) * 8);
       height: calc(var(--spacing) * 8);
+      min-height: calc(var(--spacing) * 8);
+      max-height: calc(var(--spacing) * 8);
+      width: calc(var(--spacing) * 8);
+      min-width: calc(var(--spacing) * 8);
+      max-width: calc(var(--spacing) * 8);
     }
   }
-  [data-name="checkbox-indicator"]:not(.default-style-none) {
+  .checkbox-indicator {
     height: 100%;
     width: 100%;
     &[data-size="sm"] {
@@ -3994,7 +4026,7 @@
   }
 }
 @layer components {
-  [data-name="tooltip"] {
+  .tooltip {
     position: absolute;
     border-radius: 0.25rem;
     padding-inline: calc(var(--spacing) * 2);
@@ -4004,16 +4036,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"] {
@@ -4295,7 +4330,7 @@
   }
 }
 @layer components {
-  [data-name="textarea"]:not(.default-style-none) {
+  [data-name="textarea"] {
     height: calc(var(--spacing) * 32);
     width: 100%;
     &:focus-visible {
@@ -4552,13 +4587,13 @@
   }
 }
 @layer components {
-  [data-name="property-root"]:not(.default-style-none) {
+  [data-name="property-root"] {
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 0);
     border-radius: var(--radius-xl);
   }
-  [data-name="property-root"]:not(.default-style-none) {
+  [data-name="property-root"] {
     transition: outline-offset var(--animation-duration-in, 250ms);
     outline-offset: 0;
     &:hover {
@@ -4583,7 +4618,7 @@
       }
     }
   }
-  [data-name="property-title"]:not(.default-style-none) {
+  [data-name="property-title"] {
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
@@ -4609,11 +4644,11 @@
       color: var(--color-on-warning);
     }
   }
-  [data-name="property-title-icon"]:not(.default-style-none) {
+  [data-name="property-title-icon"] {
     max-width: calc(var(--spacing) * 6);
     min-width: calc(var(--spacing) * 6);
   }
-  [data-name="property-title-text"]:not(.default-style-none) {
+  [data-name="property-title-text"] {
     min-width: calc(var(--spacing) * 0);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -4621,7 +4656,7 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  [data-name="property-content"]:not(.default-style-none) {
+  [data-name="property-content"] {
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
@@ -4646,14 +4681,14 @@
       background-color: var(--color-surface-warning);
     }
   }
-  [data-name="property-actions"]:not(.default-style-none) {
+  [data-name="property-actions"] {
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
     align-items: center;
     gap: calc(var(--spacing) * 1);
   }
-  [data-name="property-input-wrapper"]:not(.default-style-none) {
+  [data-name="property-input-wrapper"] {
     position: relative;
     display: flex;
     flex-direction: row;
@@ -4667,7 +4702,7 @@
       }
     }
   }
-  [data-name="property-input"]:not(.default-style-none) {
+  [data-name="property-input"] {
     border-radius: 0.25rem;
     padding: calc(var(--spacing) * 1);
     &[data-invalid] {
@@ -4677,7 +4712,7 @@
       }
     }
   }
-  [data-name="property-suffix"]:not(.default-style-none) {
+  [data-name="property-suffix"] {
     position: absolute;
     top: calc(1/2 * 100%);
     right: calc(var(--spacing) * 2);

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

@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="checkbox"]:not(.default-style-none) {
+  .checkbox {
     @apply flex-col-0 items-center justify-center rounded border-2;
     &:not([data-disabled]) {
       @apply hover:cursor-pointer;
@@ -25,16 +25,17 @@
     }
 
     &[data-size="sm"] {
-      @apply size-5;
+      @apply size-force-5;
     }
     &[data-size="md"] {
-      @apply size-6;
+      @apply size-force-6;
     }
     &[data-size="lg"] {
-      @apply size-8;
+      @apply size-force-8;
     }
   }
-  [data-name="checkbox-indicator"]:not(.default-style-none) {
+  
+  .checkbox-indicator{
     @apply w-full h-full;
     &[data-size="sm"] {
       @apply stroke-3;

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

@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="expandable-root"]:not(.default-style-none) {
+  [data-name="expandable-root"] {
     @apply flex-col-0 surface coloring-solid rounded-lg shadow-sm;
 
     &:not([data-disabled])[data-containertoggleable] {
@@ -7,7 +7,7 @@
     }
   }
 
-  [data-name="expandable-header"]:not(.default-style-none) {
+  [data-name="expandable-header"] {
     @apply flex-row-2 justify-between items-center py-2 px-4 rounded-lg select-none;
 
     &:not([data-disabled]) {
@@ -19,7 +19,7 @@
     }
   }
 
-  [data-name="expandable-content"]:not(.default-style-none) {
+  [data-name="expandable-content"] {
     @apply flex-col-2 px-4 transition-all ease-in-out h-24;
 
     &[data-state="opening"],

package/dist/style/uncompiled/theme/components/expansion-icon.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="expansion-icon"]:not(.default-style-none) {
+  [data-name="expansion-icon"] {
     @apply flex-col-0 items-center justify-center size-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out;
 
     &[data-expanded] {

package/dist/style/uncompiled/theme/components/input-elements.css

@@ -33,18 +33,18 @@
 
 /* input-elements */
 @layer components {
-  [data-name="input"]:not(.default-style-none) {
+  [data-name="input"] {
     @apply px-3 py-2 rounded-md h-10 input-element;
   }
 
-  [data-name="select-button"]:not(.default-style-none) {
+  [data-name="select-button"] {
     @apply flex-row-2 items-center justify-between rounded-md px-3 py-2 input-element;
     &:not([data-disabled]) {
       @apply hover:cursor-pointer;
     }
   }
 
-  [data-name="select-button-chips"]:not(.default-style-none) {
+  [data-name="select-button-chips"] {
     @apply flex flex-wrap gap-2 items-center rounded-md px-2.5 py-2.5 input-element;
     &:not([data-disabled]) {
       @apply hover:cursor-pointer;

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

@@ -1,9 +1,9 @@
 @layer components {
-  [data-name="property-root"]:not(.default-style-none) {
+  [data-name="property-root"] {
     @apply flex-row-0 rounded-xl;
   }
 
-  [data-name="property-root"]:not(.default-style-none) {
+  [data-name="property-root"] {
     transition: outline-offset var(--animation-duration-in, 250ms);
     outline-offset: 0;
 
@@ -34,7 +34,7 @@
   }
 
 
-  [data-name="property-title"]:not(.default-style-none) {
+  [data-name="property-title"] {
     @apply flex-row-2 max-w-48 min-w-48 px-3 py-2 items-center justify-between rounded-l-xl border-2 border-r-0;
 
     &:not([data-invalid]) {
@@ -47,15 +47,15 @@
   }
 
 
-  [data-name="property-title-icon"]:not(.default-style-none) {
+  [data-name="property-title-icon"] {
     @apply max-w-6 min-w-6;
   }
 
-  [data-name="property-title-text"]:not(.default-style-none) {
+  [data-name="property-title-text"] {
     @apply font-semibold truncate min-w-0;
   }
 
-  [data-name="property-content"]:not(.default-style-none) {
+  [data-name="property-content"] {
     @apply flex-row-2 grow px-3 py-2 justify-between items-center rounded-r-xl border-2 border-l-0 min-h-15;
 
     &:not([data-invalid]) {
@@ -67,11 +67,11 @@
     }
   }
 
-  [data-name="property-actions"]:not(.default-style-none) {
+  [data-name="property-actions"] {
     @apply flex-row-2 items-center gap-1;
   }
 
-  [data-name="property-input-wrapper"]:not(.default-style-none) {
+  [data-name="property-input-wrapper"] {
     @apply relative flex-row-2 w-full;
 
     &[data-invalid] {
@@ -84,7 +84,7 @@
     }
   }
 
-  [data-name="property-input"]:not(.default-style-none) {
+  [data-name="property-input"] {
     @apply rounded p-1;
 
     &[data-invalid] {
@@ -92,7 +92,7 @@
     }
   }
 
-  [data-name="property-suffix"]:not(.default-style-none) {
+  [data-name="property-suffix"] {
     @apply absolute top-1/2 -translate-y-1/2 right-2;
 
     &[data-invalid] {

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

@@ -1,41 +1,45 @@
 @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 relative;
     @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-clickable] {
+      @apply hover:cursor-pointer;
+    }
   }
 
-  [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 +64,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/textarea.css

@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="textarea"]:not(.default-style-none) {
+  [data-name="textarea"] {
     @apply w-full h-32 py-2 px-3 rounded-md resize-none overflow-y-scroll input-element;
   }
 }

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.8",
   "files": [
     "dist"
   ],