@helpwave/hightide 0.6.5 → 0.6.6

package/dist/style/globals.css

@@ -145,6 +145,7 @@
     --color-border: var(--color-gray-200);
     --color-divider: var(--color-gray-100);
     --color-focus: var(--color-primary);
+    --color-outline-variant: var(--color-gray-200);
     --font-space: 'Space Grotesk', sans-serif;
   }
 }
@@ -318,12 +319,12 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .-top-1 {
+    top: calc(var(--spacing) * -1);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
-  .top-0\.5 {
-    top: calc(var(--spacing) * 0.5);
-  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
@@ -333,12 +334,12 @@
   .top-full {
     top: 100%;
   }
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
-  .right-0\.5 {
-    right: calc(var(--spacing) * 0.5);
-  }
   .right-1 {
     right: calc(var(--spacing) * 1);
   }
@@ -360,6 +361,9 @@
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-1\/1 {
+    left: calc(1/1 * 100%);
+  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -393,9 +397,6 @@
   .z-\[10\] {
     z-index: 10;
   }
-  .z-\[300\] {
-    z-index: 300;
-  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -456,6 +457,9 @@
   .mb-\[6px\] {
     margin-bottom: 6px;
   }
+  .-ml-1 {
+    margin-left: calc(var(--spacing) * -1);
+  }
   .ml-0\.5 {
     margin-left: calc(var(--spacing) * 0.5);
   }
@@ -567,6 +571,12 @@
     min-width: calc(var(--spacing) * 6);
     max-width: calc(var(--spacing) * 6);
   }
+  .expandable-content-h-39 {
+    height: calc(var(--spacing) * 39);
+    &[data-expanded] {
+      max-height: calc(var(--spacing) * 39);
+    }
+  }
   .expandable-content-h-40 {
     height: calc(var(--spacing) * 40);
     &[data-expanded] {
@@ -702,12 +712,6 @@
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
-  .w-40 {
-    width: calc(var(--spacing) * 40);
-  }
-  .w-50 {
-    width: calc(var(--spacing) * 50);
-  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -723,9 +727,6 @@
   .w-\[70\%\] {
     width: 70%;
   }
-  .w-\[400px\] {
-    width: 400px;
-  }
   .w-fit {
     width: fit-content;
   }
@@ -783,6 +784,12 @@
   .min-w-56 {
     min-width: calc(var(--spacing) * 56);
   }
+  .min-w-64 {
+    min-width: calc(var(--spacing) * 64);
+  }
+  .min-w-72 {
+    min-width: calc(var(--spacing) * 72);
+  }
   .min-w-80 {
     min-width: calc(var(--spacing) * 80);
   }
@@ -823,12 +830,6 @@
   .animate-bounce {
     animation: var(--animate-bounce);
   }
-  .animate-pop-in {
-    animation: pop-in var(--animation-duration-in, 250ms) ease-in-out forwards;
-  }
-  .animate-pop-out {
-    animation: pop-out var(--animation-duration-out, 170ms) ease-in-out forwards;
-  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -957,6 +958,12 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -1046,9 +1053,6 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-divider {
-    border-color: var(--color-divider);
-  }
   .border-divider\/50 {
     border-color: color-mix(in srgb, #E6E6E6 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1116,9 +1120,6 @@
   .bg-negative {
     background-color: var(--color-negative);
   }
-  .bg-overlay-shadow {
-    background-color: var(--color-overlay-shadow);
-  }
   .bg-positive {
     background-color: var(--color-positive);
   }
@@ -1167,9 +1168,6 @@
   .bg-surface {
     background-color: var(--color-surface);
   }
-  .bg-surface-variant {
-    background-color: var(--color-surface-variant);
-  }
   .bg-text-image-dark-text {
     background-color: var(--color-text-image-dark-text);
   }
@@ -1320,12 +1318,6 @@
   .text-center {
     text-align: center;
   }
-  .text-left {
-    text-align: left;
-  }
-  .text-right {
-    text-align: right;
-  }
   .typography-headline-lg {
     font-family: var(--font-space);
     font-size: var(--text-4xl);
@@ -1444,10 +1436,6 @@
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
-  .font-normal {
-    --tw-font-weight: var(--font-weight-normal);
-    font-weight: var(--font-weight-normal);
-  }
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -1488,9 +1476,6 @@
   .text-on-background {
     color: var(--color-on-background);
   }
-  .text-on-positive {
-    color: var(--color-on-positive);
-  }
   .text-on-primary {
     color: var(--color-on-primary);
   }
@@ -1564,21 +1549,10 @@
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-xl {
-    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-around-lg {
-    --shadow-right: 10px 0 10px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
-    --shadow-left: -10px 0 10px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
-    --shadow-top: 0 -10px 10px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
-    --shadow-bottom: 0 10px 10px 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);
-  }
   .shadow-around-md {
     --shadow-right: 5px 0 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
     --shadow-left: -5px 0 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
@@ -1589,9 +1563,6 @@
   .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);
   }
-  .shadow-strong {
-    --tw-shadow-color: rgba(0, 0, 0, 0.05);
-  }
   .focus-style-default {
     &:focus-visible:not(.focus-style-none) {
       transition: outline-offset var(--animation-duration-in, 250ms);
@@ -1622,6 +1593,9 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-offset-0 {
+    outline-offset: 0px;
+  }
   .outline-primary {
     outline-color: var(--color-primary);
   }
@@ -1683,6 +1657,10 @@
   .delay-25 {
     transition-delay: 25ms;
   }
+  .duration-\(--animation-duration-in\) {
+    --tw-duration: var(--animation-duration-in);
+    transition-duration: var(--animation-duration-in);
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -1968,12 +1946,28 @@
       }
     }
   }
+  .focus\:border-primary {
+    &:focus {
+      border-color: var(--color-primary);
+    }
+  }
   .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);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus\:outline-1 {
+    &:focus {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .focus\:outline-offset-1 {
+    &:focus {
+      outline-offset: 1px;
+    }
+  }
   .focus-visible\:ring-0 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2042,18 +2036,6 @@
       font-weight: var(--font-weight-normal);
     }
   }
-  .motion-safe\:duration-100 {
-    @media (prefers-reduced-motion: no-preference) {
-      --tw-duration: 100ms;
-      transition-duration: 100ms;
-    }
-  }
-  .motion-reduce\:duration-0 {
-    @media (prefers-reduced-motion: reduce) {
-      --tw-duration: 0ms;
-      transition-duration: 0ms;
-    }
-  }
   .desktop\:block {
     @media (width >= 64rem) {
       display: block;
@@ -3042,11 +3024,6 @@
 }
 @layer components {
   [data-name="table-container"] {
-    display: flex;
-    flex-direction: column;
-    row-gap: calc(var(--spacing) * 4);
-  }
-  [data-name="table-scroll-wrapper"] {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 0);
@@ -3065,7 +3042,7 @@
   }
   [data-name="table-filler-cell"] {
     display: flex;
-    height: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 6);
     width: calc(1/2 * 100%);
     flex-direction: row;
     align-items: center;
@@ -3155,7 +3132,7 @@
       }
     }
   }
-  [data-name="table-resize-indicator"] {
+  .table-resize-indicator {
     position: absolute;
     top: calc(1/2 * 100%);
     right: calc(var(--spacing) * 1);
@@ -3166,9 +3143,6 @@
     border-radius: 0.25rem;
     background-color: var(--color-primary);
     cursor: col-resize;
-    touch-action: none;
-    -webkit-user-select: none;
-    user-select: none;
     opacity: 0%;
     transition-property: opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4249,7 +4223,7 @@
   }
 }
 @layer components {
-  [data-name="dialog-container"] {
+  .dialog-container {
     position: fixed;
     inset: calc(var(--spacing) * 0);
     height: 100vh;
@@ -4259,12 +4233,13 @@
       touch-action: none;
     }
   }
-  [data-name="dialog-background"] {
+  .dialog-background {
     position: fixed;
     inset: calc(var(--spacing) * 0);
     height: 100vh;
     width: 100vw;
     background-color: var(--color-overlay-shadow);
+    animation-fill-mode: forwards;
     &[data-state="opening"] {
       animation-duration: var(--animation-duration-in);
     }
@@ -4276,7 +4251,7 @@
       animation-name: fade-in;
     }
   }
-  [data-name="dialog-content"] {
+  .dialog-content {
     display: flex;
     flex-direction: column;
     row-gap: calc(var(--spacing) * 2);
@@ -4713,6 +4688,39 @@
     }
   }
 }
+.pop-up {
+  border-radius: var(--radius-md);
+  border-style: var(--tw-border-style);
+  border-width: 2px;
+  border-color: var(--color-outline-variant);
+  background-color: var(--coloring-solid-color,var(--coloring-color));
+  color: var(--coloring-solid-text,var(--coloring-on-color));
+  --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  --coloring-color: initial;
+  --coloring-on-color: initial;
+  --coloring-hover: initial;
+  --coloring-text: initial;
+  --coloring-text-hover: initial;
+  --coloring-outline: initial;
+  --coloring-outline-hover: initial;
+  --coloring-tonal: initial;
+  --coloring-tonal-background: initial;
+  --coloring-tonal-text: initial;
+  --coloring-tonal-hover: initial;
+  --coloring-color: var(--color-surface);
+  --coloring-on-color: var(--color-on-surface);
+  --coloring-hover: var(--color-surface-hover);
+  &:focus-within {
+    border-color: var(--color-primary);
+  }
+  &[data-positioned] {
+    animation: pop-in var(--animation-duration-in, 250ms) ease-in-out forwards;
+  }
+  &:not([data-positioned]) {
+    opacity: 0%;
+  }
+}
 @layer components {
   * {
     list-style-type: none;

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

@@ -1,14 +1,15 @@
 @layer components {
-  [data-name="dialog-container"] {
-    @apply fixed inset-0 h-screen w-screen;
+  .dialog-container {
     @apply fixed inset-0 h-screen w-screen;
     &:not([data-open]) {
       @apply touch-none pointer-events-none;
     }
   }
 
-  [data-name="dialog-background"] {
+  .dialog-background {
     @apply fixed inset-0 h-screen w-screen bg-overlay-shadow;
+    animation-fill-mode: forwards;
+
     &[data-state="opening"] {
       animation-duration: var(--animation-duration-in);
     }
@@ -24,7 +25,7 @@
     }
   }
 
-  [data-name="dialog-content"] {
+  .dialog-content {
     @apply flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)];
     animation-timing-function: ease-out;
     animation-fill-mode: forwards;

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

@@ -20,4 +20,5 @@
 @import "./day-picker.css";
 @import "./time-picker.css";
 @import "./property.css";
+@import "./pop-up.css";
 @import "./general.css";

package/dist/style/uncompiled/theme/components/pop-up.css

@@ -0,0 +1,11 @@
+.pop-up {
+    @apply surface coloring-solid rounded-md border-2 border-outline-variant shadow-md;
+    @apply focus-within:border-primary;
+
+    &[data-positioned] {
+        @apply animate-pop-in;
+    }
+    &:not([data-positioned]) {
+        @apply opacity-0;
+    }
+}

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

@@ -1,9 +1,5 @@
 @layer components {
   [data-name="table-container"] {
-    @apply flex-col-4;
-  }
-
-  [data-name="table-scroll-wrapper"] {
     @apply flex-col-0 w-full overflow-auto;
   }
 
@@ -13,7 +9,7 @@
   }
 
   [data-name="table-filler-cell"] {
-    @apply flex flex-row items-center w-1/2 h-4 text-disabled font-bold;
+    @apply flex flex-row items-center w-1/2 h-6 text-disabled font-bold;
   }
 
   [data-name="table-cell"] {
@@ -45,10 +41,10 @@
     @apply [nth-last-child(1)]:first:rounded-bl-lg [nth-last-child(1)]:last:rounded-br-lg;
   }
 
-  [data-name="table-resize-indicator"] {
+  .table-resize-indicator {
     @apply absolute right-1 top-1/2 -translate-y-1/2;
     @apply h-6 w-2 rounded bg-primary;
-    @apply cursor-col-resize select-none touch-none;
+    @apply cursor-col-resize;
     @apply opacity-0 transition-opacity;
 
     &[data-active] {

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

@@ -1,4 +1,4 @@
-@utility animate-tooltip-fade-in {
+  @utility animate-tooltip-fade-in {
   animation: fade-in calc(var(--animation-duration-in, 250ms) * 2) ease-in-out 1 forwards;
 }
 

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helpwave/hightide.git"
   },
   "license": "MPL-2.0",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "files": [
     "dist"
   ],
@@ -63,12 +63,13 @@
     "@types/react": "19.2.3",
     "@types/react-dom": "19.2.3",
     "@types/tinycolor2": "1.4.6",
-    "@vitest/mocker": "^4.0.16",
-    "autoprefixer": "^10.4.23",
+    "@vitest/mocker": "4.0.16",
+    "autoprefixer": "10.4.23",
     "eslint": "9.31.0",
     "eslint-plugin-storybook": "10.1.9",
     "jest": "30.2.0",
     "postcss": "^8.5.6",
+    "react-devtools": "7.0.1",
     "storybook": "10.1.10",
     "ts-jest": "29.4.5",
     "tsup": "8.5.0",