@helpwave/hightide 0.5.4 → 0.6.1

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

@@ -1,21 +1,158 @@
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes bigLeftUp {
+  0%,
+  25% {
+    stroke-dashoffset: 1000;
+  }
+  50%,
+  75%,
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes bigLeftUp {
+  0%,
+  25% {
+    stroke-dashoffset: 1000;
+  }
+  50%,
+  75%,
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@-webkit-keyframes bigRightDown {
+  0%,
+  25%,
+  50% {
+    stroke-dashoffset: 0;
+  }
+  75%,
+  100% {
+    stroke-dashoffset: -1000;
+  }
+}
+@keyframes bigRightDown {
+  0%,
+  25%,
+  50% {
+    stroke-dashoffset: 0;
+  }
+  75%,
+  100% {
+    stroke-dashoffset: -1000;
+  }
+}
+
+@-webkit-keyframes smallLeftUp {
+  0%,
+  25%,
+  50% {
+    stroke-dashoffset: 1000;
+  }
+  75%,
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes smallLeftUp {
+  0%,
+  25%,
+  50% {
+    stroke-dashoffset: 1000;
+  }
+  75%,
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@-webkit-keyframes smallRightDown {
+  0%,
+  25% {
+    stroke-dashoffset: 0;
+  }
+  50%,
+  75%,
+  100% {
+    stroke-dashoffset: -1000;
+  }
+}
+@keyframes smallRightDown {
+  0%,
+  25% {
+    stroke-dashoffset: 0;
+  }
+  50%,
+  75%,
+  100% {
+    stroke-dashoffset: -1000;
+  }
+}
+
+@keyframes pop-in {
+  0% {
+    opacity: 0;
+    scale: 100%; /* Necessary so that the FloatingContainer picks up the correct position */
+  }
+  1% {
+    opacity: 0;
+    scale: 80%;
+  }
+  100% {
+    opacity: 1;
+    scale: 100%;
+  }
+}
+
+@keyframes pop-out {
+  0% {
+    opacity: 1;
+    scale: 100%;
+  }
+  100% {
+    opacity: 0;
+    scale: 80%;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+
 @utility animation-delay-* {
   animation-delay: calc(--value(number) * 1ms);
 }
 
 @utility animate-pop-in {
-  animation: pop-in 0.2s ease-in-out;
+  animation: pop-in var(--animation-duration-in, 250ms) ease-in-out forwards;
 }
 
 @utility animate-pop-out {
-  animation: pop-out 0.2s ease-in-out forwards;
+  animation: pop-out var(--animation-duration-out, 170ms) ease-in-out forwards;
 }
 
 @utility animate-fade-in {
-  animation: fade-in 0.2s ease-in-out;
+  animation: fade-in var(--animation-duration-in, 250ms) ease-in-out;
 }
 
 @utility animate-fade-out {
-  animation: fade-out 0.2s ease-in-out forwards;
+  animation: fade-in var(--animation-duration-in, 170ms) ease-in-out forwards
+    reverse;
 }
 
 @utility animate-fade {
@@ -43,139 +180,21 @@
 }
 
 @utility animate-tooltip-fade-in {
-  animation: fade-in 0.2s ease-in-out forwards;
-  -webkit-animation: fade-in 0.2s ease-in-out forwards;
+  animation: fade-in var(--animation-duration-in, 250ms) ease-in-out 1 forwards;
+  -webkit-animation: fade-in var(--animation-duration-in, 250ms) ease-in-out 1
+    forwards;
 }
 
 @utility animate-tooltip-fade-out {
-  animation: fade-in 0.2s ease-in-out forwards;
-  -webkit-animation: fade-in 0.2s ease-in-out forwards;
+  animation: fade-in var(--animation-duration-in, 170ms) ease-in-out 1 reverse
+    forwards;
+  -webkit-animation: fade-in var(--animation-duration-in, 170ms) ease-in-out 1
+    reverse forwards;
 }
 
 @layer utilities {
-  @keyframes fade-in {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes fade-out {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-
-  @-webkit-keyframes bigLeftUp {
-    0%, 25% {
-      stroke-dashoffset: 1000;
-    }
-    50%, 75%, 100% {
-      stroke-dashoffset: 0;
-    }
-  }
-  @keyframes bigLeftUp {
-    0%, 25% {
-      stroke-dashoffset: 1000;
-    }
-    50%, 75%, 100% {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  @-webkit-keyframes bigRightDown {
-    0%, 25%, 50% {
-      stroke-dashoffset: 0;
-    }
-    75%, 100% {
-      stroke-dashoffset: -1000;
-    }
-  }
-  @keyframes bigRightDown {
-    0%, 25%, 50% {
-      stroke-dashoffset: 0;
-    }
-    75%, 100% {
-      stroke-dashoffset: -1000;
-    }
-  }
-
-  @-webkit-keyframes smallLeftUp {
-    0%, 25%, 50% {
-      stroke-dashoffset: 1000;
-    }
-    75%, 100% {
-      stroke-dashoffset: 0;
-    }
-  }
-  @keyframes smallLeftUp {
-    0%, 25%, 50% {
-      stroke-dashoffset: 1000;
-    }
-    75%, 100% {
-      stroke-dashoffset: 0;
-    }
-  }
-
-  @-webkit-keyframes smallRightDown {
-    0%, 25% {
-      stroke-dashoffset: 0;
-    }
-    50%, 75%, 100% {
-      stroke-dashoffset: -1000;
-    }
-  }
-  @keyframes smallRightDown {
-    0%, 25% {
-      stroke-dashoffset: 0;
-    }
-    50%, 75%, 100% {
-      stroke-dashoffset: -1000;
-    }
-  }
-
-  @keyframes pop-in {
-    0% {
-      opacity: 0;
-      scale: 100%; /* Necessary so that the FloatingContainer picks up the correct position */
-    }
-    1% {
-      opacity: 0;
-      scale: 80%;
-    }
-    100% {
-      opacity: 1;
-      scale: 100%;
-    }
-  }
-
-  @keyframes pop-out {
-    0% {
-      opacity: 1;
-      scale: 100%;
-    }
-    100% {
-      opacity: 0;
-      scale: 80%;
-    }
-  }
-
-  @keyframes shimmer {
-    0% {
-      left: -100%;
-    }
-    100% {
-      left: 100%;
-    }
-  }
-
   .shimmer::before {
-    content: '';
+    content: "";
     position: absolute;
     top: 0;
     left: -100%;

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

@@ -1,53 +1,45 @@
 @utility coloring-solid {
-  @apply
-  bg-[var(--coloring-solid-color,var(--coloring-color))]
+  @apply bg-[var(--coloring-solid-color,var(--coloring-color))]
   text-[var(--coloring-solid-text,var(--coloring-on-color))];
 }
 
 @utility coloring-solid-hover {
-  @apply
-  coloring-solid
+  @apply coloring-solid
   hover:bg-[var(--coloring-solid-hover,var(--coloring-hover))];
 }
 
 @utility coloring-tonal {
-  @apply
-  bg-[var(--coloring-color)]/20
-  text-[var(--coloring-color)];
+  @apply bg-[var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)))]/20
+  text-[var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)))];
 }
 
 @utility coloring-tonal-hover {
-  @apply
-  coloring-tonal
-  hover:bg-[var(--coloring-color)]/30;
+  @apply coloring-tonal
+  hover:bg-[var(--coloring-tonal-hover,var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))))]/30;
 }
 
 @utility coloring-text {
-  @apply
-  text-[var(--coloring-text,var(--coloring-color))];
+  @apply text-[var(--coloring-text,var(--coloring-color))];
 }
 
 @utility coloring-text-hover {
-  @apply
-  coloring-text
+  @apply coloring-text
   hover:bg-[var(--coloring-text-hover,var(--coloring-text,var(--coloring-color)))]/20;
 }
 
 @utility coloring-outline {
-  @apply
-  border-1
+  @apply border-2
   border-[var(--coloring-border,var(--coloring-outline,var(--coloring-color)))]
   text-[var(--coloring-outline,var(--coloring-color))];
 }
 
 @utility coloring-outline-hover {
-  @apply
-  coloring-outline
+  @apply coloring-outline
   hover:border-[var(--coloring-border-hover,--coloring-hover)]
   hover:text-[var(--coloring-outline-hover,var(--coloring-hover))];
 }
 
-@utility reset-coloring-variables {
+@utility coloring-reset-variables {
   --coloring-color: initial;
   --coloring-on-color: initial;
   --coloring-hover: initial;
@@ -55,4 +47,8 @@
   --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;
+}

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

@@ -0,0 +1,27 @@
+@utility focus-style-outline {
+  transition: outline-offset var(--animation-duration-in, 250ms);
+  outline-offset: 0;
+
+  &:focus-visible {
+    @apply outline-solid outline-2 outline-focus;
+    outline-offset: calc(var(--spacing) * 0.25);
+  }
+}
+
+@utility focus-style-border {
+  &:focus-visible {
+    @apply border-2 border-focus;
+  }
+}
+
+@utility focus-style-default {
+  &:focus-visible:not(.focus-style-none) {
+    @apply focus-style-outline;
+  }
+}
+
+@utility focus-style-none {
+  &:focus-visible {
+    @apply outline-none;
+  }
+}

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

@@ -3,4 +3,5 @@
 @import "./animation.css";
 @import "./shadow.css";
 @import "./sizing.css";
-@import "./coloring.css";
+@import "./coloring.css";
+@import './focus.css';

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

@@ -1,31 +1,38 @@
 @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-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%));
+  --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%));
+  --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%));
+  --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%));
+  --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%));
+  --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;
 }
 
@@ -34,23 +41,37 @@
 }
 
 @utility shadow-hard {
-  --tw-shadow-color: rgba(0, 0, 0, 0.10);
+  --tw-shadow-color: rgba(0, 0, 0, 0.1);
 }
 
-@layer utilities {
-  .shadow-around {
-    @apply shadow-around-2;
-  }
+@utility shadow-around {
+  --shadow-right: 2px 0 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+  --shadow-left: -2px 0 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+  --shadow-top: 0 -2px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+  --shadow-bottom: 0 2px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+  @apply shadow-side;
+}
 
-  .shadow-around-md {
-    @apply shadow-around-5;
-  }
+@utility 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%));
+  --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%));
+  @apply shadow-side;
+}
 
-  .shadow-around-lg {
-    @apply shadow-around-10;
-  }
+@utility 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%));
+  @apply shadow-side;
+}
 
-  .shadow-around-xl {
-    @apply shadow-around-20;
-  }
+@utility shadow-around-xl {
+  --shadow-right: 20px 0 20px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+  --shadow-left: -20px 0 20px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+  --shadow-top: 0 -20px 20px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+  --shadow-bottom: 0 20px 20px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+  @apply shadow-side;
 }

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helpwave/hightide.git"
   },
   "license": "MPL-2.0",
-  "version": "0.5.4",
+  "version": "0.6.1",
   "files": [
     "dist"
   ],
@@ -43,7 +43,6 @@
     "@tanstack/react-table": "8.21.3",
     "clsx": "2.1.1",
     "lucide-react": "0.561.0",
-    "postcss": "8.5.3",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "tailwindcss": "4.1.18"
@@ -65,10 +64,12 @@
     "@types/react-dom": "19.2.3",
     "@types/tinycolor2": "1.4.6",
     "@vitest/mocker": "^4.0.16",
+    "autoprefixer": "^10.4.23",
     "eslint": "9.31.0",
     "eslint-plugin-storybook": "10.1.9",
     "jest": "30.2.0",
-    "storybook": "10.1.9",
+    "postcss": "^8.5.6",
+    "storybook": "10.1.10",
     "ts-jest": "29.4.5",
     "tsup": "8.5.0",
     "typescript": "5.7.2",