@helpwave/hightide 0.8.11 → 0.9.0

package/dist/style/uncompiled/theme/colors/utilities.css

@@ -3,6 +3,7 @@
   --coloring-color: var(--color-primary);
   --coloring-on-color: var(--color-on-primary);
   --coloring-hover: var(--color-primary-hover);
+  --color-focus: var(--color-primary);
 }
 
 @utility secondary {
@@ -10,6 +11,7 @@
   --coloring-color: var(--color-secondary);
   --coloring-on-color: var(--color-on-secondary);
   --coloring-hover: var(--color-secondary-hover);
+  --color-focus: var(--color-secondary);
 }
 
 @utility positive {
@@ -17,6 +19,7 @@
   --coloring-color: var(--color-positive);
   --coloring-on-color: var(--color-on-positive);
   --coloring-hover: var(--color-positive-hover);
+  --color-focus: var(--color-positive);
 }
 
 @utility negative {
@@ -24,6 +27,7 @@
   --coloring-color: var(--color-negative);
   --coloring-on-color: var(--color-on-negative);
   --coloring-hover: var(--color-negative-hover);
+  --color-focus: var(--color-negative);
 }
 
 @utility warning {
@@ -31,6 +35,7 @@
   --coloring-color: var(--color-warning);
   --coloring-on-color: var(--color-on-warning);
   --coloring-hover: var(--color-warning-hover);
+  --color-focus: var(--color-warning);
 }
 
 @utility neutral {
@@ -73,6 +78,7 @@
   @apply data-[coloringstyle=text]:coloring-text;
   @apply data-[coloringstyle=outline]:coloring-outline;
   @apply data-[coloringstyle=tonal]:coloring-tonal;
+  @apply data-[coloringstyle=tonal-outline]:coloring-tonal-outline;
 }
 
 @utility coloring-style-hover-detect {
@@ -80,6 +86,7 @@
   @apply data-[coloringstyle=text]:coloring-text-hover;
   @apply data-[coloringstyle=outline]:coloring-outline-hover;
   @apply data-[coloringstyle=tonal]:coloring-tonal-hover;
+  @apply data-[coloringstyle=tonal-outline]:coloring-tonal-outline-hover;
 }
 
 @utility coloring-color-detect {
@@ -92,4 +99,4 @@
   @apply data-[color=description]:description;
   @apply data-[color=surface]:surface;
   @apply data-[color=disabled]:disabled;
-}
+}

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

@@ -14,7 +14,8 @@
     &[data-size="xs"] {
       @apply gap-x-1 sizing-xs;
       @apply text-xs min-w-20;
-      &[data-coloringstyle="outline"] {
+      &[data-coloringstyle="outline"],
+      &[data-coloringstyle="tonal-outline"] {
         padding: 
           calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width)) 
           calc(var(--spacing-element-padding-direction-xs) - var(--coloring-outline-width));
@@ -23,7 +24,8 @@
     &[data-size="sm"] {
       @apply gap-x-1 sizing-sm;
       @apply min-w-28;
-      &[data-coloringstyle="outline"] {
+      &[data-coloringstyle="outline"],
+      &[data-coloringstyle="tonal-outline"] {
         padding: 
           calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width)) 
           calc(var(--spacing-element-padding-direction-sm) - var(--coloring-outline-width));
@@ -32,7 +34,8 @@
     &[data-size="md"] {
       @apply gap-x-2 sizing-md;
       @apply min-w-36;
-      &[data-coloringstyle="outline"] {
+      &[data-coloringstyle="outline"],
+      &[data-coloringstyle="tonal-outline"] {
         padding: 
           calc(var(--spacing-element-padding-md) - var(--coloring-outline-width)) 
           calc(var(--spacing-element-padding-direction-md) - var(--coloring-outline-width));
@@ -41,7 +44,8 @@
     &[data-size="lg"] {
       @apply gap-x-2 sizing-lg;
       @apply text-lg min-w-45;
-      &[data-coloringstyle="outline"] {
+      &[data-coloringstyle="outline"],
+      &[data-coloringstyle="tonal-outline"] {
         padding: 
           calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width)) 
           calc(var(--spacing-element-padding-direction-lg) - var(--coloring-outline-width));

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

@@ -1,6 +1,14 @@
 @layer components {
   [data-name="checkbox"] {
     @apply flex-col-0 items-center justify-center rounded border-2;
+    transition: 
+      border-color var(--animation-duration-in, 250ms) ease-in-out, 
+      box-shadow var(--animation-duration-in, 250ms) ease-in-out,
+      outline-color var(--animation-duration-in, 250ms) ease-in-out,
+      outline-offset var(--animation-duration-in, 250ms) ease-in-out,
+      color 100ms ease-in-out,
+      background-color 100ms ease-in-out;
+
     &:not([data-disabled]) {
       @apply hover:cursor-pointer;
     }

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

@@ -0,0 +1,25 @@
+@layer components {
+  [data-name="combobox-root"] {
+    @apply flex-col-2;
+  }
+
+  [data-name="combobox-input"] {
+    @apply input-element rounded-md;
+  }
+
+  [data-name="combobox-list"] {
+    @apply flex-col-1 overflow-y-auto;
+  }
+
+  [data-name="combobox-option"] {
+    @apply flex-row-1 items-center px-2 py-1 rounded-md cursor-pointer;
+
+    &[data-highlighted] {
+      @apply bg-primary/20;
+    }
+  }
+
+  [data-name="combobox-list-status"] {
+    @apply text-description text-sm px-2 py-1 rounded-md;
+  }
+}

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

@@ -23,6 +23,6 @@
   }
 
   * {
-    @apply focus-style-outline focusable;
+    @apply focus-style-outline focusable outline-focus;
   }
-}
+}

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

@@ -12,25 +12,29 @@
 
     &[data-size="xs"] {
         @apply sizing-xs;
-        &[data-coloringstyle="outline"] {
+        &[data-coloringstyle="outline"],
+        &[data-coloringstyle="tonal-outline"] {
             padding: calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width)); 
         }
     }
     &[data-size="sm"] {
         @apply sizing-sm;
-        &[data-coloringstyle="outline"] {
+        &[data-coloringstyle="outline"],
+        &[data-coloringstyle="tonal-outline"] {
             padding: calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width)); 
         }
     }
     &[data-size="md"] {
         @apply sizing-md;
-        &[data-coloringstyle="outline"] {
+        &[data-coloringstyle="outline"],
+        &[data-coloringstyle="tonal-outline"] {
             padding: calc(var(--spacing-element-padding-md) - var(--coloring-outline-width)); 
         }
     }
     &[data-size="lg"] {
         @apply sizing-lg;
-        &[data-coloringstyle="outline"] {
+        &[data-coloringstyle="outline"],
+        &[data-coloringstyle="tonal-outline"] {
             padding: calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width)); 
         }
     }

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

@@ -24,6 +24,7 @@
 @import "./property.css";
 @import "./pop-up.css";
 @import "./select.css";
+@import "./combobox.css";
 @import "./general.css";
 @import "./icon-button.css";
 @import "./date-time-input.css";

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

@@ -1,5 +1,13 @@
 @utility input-element {
   @apply border-2 focus-style-none focus-style-border focus-style-shadow;
+  transition: 
+    border-color var(--animation-duration-in, 250ms) ease-in-out, 
+    box-shadow var(--animation-duration-in, 250ms) ease-in-out,
+    outline-color var(--animation-duration-in, 250ms) ease-in-out,
+    outline-offset var(--animation-duration-in, 250ms) ease-in-out,
+    color var(--animation-duration-in, 250ms) ease-in-out,
+    background-color var(--animation-duration-in, 250ms) ease-in-out;
+
   &:not([data-disabled]):not([data-invalid]) {
     @apply bg-input-background hover:border-primary-hover;
 

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

@@ -1,7 +1,14 @@
 [data-name="pop-up"] {
-    @apply surface coloring-solid rounded-md border-2 border-outline-variant shadow-md;
+    @apply surface coloring-solid rounded-md border-2 border-outline-variant shadow-lg shadow-black/15;
     @apply focus-within:border-primary;
 
+    transition: 
+        top var(--anchored-position-polling-interval, 100ms) linear,
+        left var(--anchored-position-polling-interval, 100ms) linear,
+        right var(--anchored-position-polling-interval, 100ms) linear,
+        bottom var(--anchored-position-polling-interval, 100ms) linear,
+        border-color var(--animation-duration-in, 250ms) ease-in-out,
+        box-shadow var(--animation-duration-in, 250ms) ease-in-out;
     &[data-positioned] {
         @apply animate-pop-in;
     }

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

@@ -1,19 +1,50 @@
 @layer components {
-    [data-name="select-button"] {
-      @apply input-element flex-row-2 items-center justify-between rounded-md px-3 py-2;
-      &:not([data-disabled]) {
-        @apply hover:cursor-pointer;
-      }
+
+  [data-name="select-button"],
+  [data-name="multi-select-button"] {
+    @apply input-element flex-row-2 items-center justify-between rounded-md px-3 py-2;
+
+    &:not([data-disabled]) {
+      @apply hover:cursor-pointer;
     }
-  
-    [data-name="select-chip-display"] {
-      @apply input-element flex flex-wrap gap-2 items-center rounded-md px-2.5 py-2.5;
-      &:not([data-disabled]) {
-        @apply hover:cursor-pointer;
-      }
+  }
+
+  [data-name="multi-select-chip-display-button"] {
+    @apply input-element flex flex-wrap gap-2 items-center rounded-md px-2.5 py-2.5;
+
+    &:not([data-disabled]) {
+      @apply hover:cursor-pointer;
+    }
+  }
+
+  [data-name="multi-select-chip-display-chip"] {
+    @apply flex-row-1 items-center pl-2 pr-1 coloring-solid neutral rounded-md h-9;
+  }
+
+  [data-name="select-list"],
+  [data-name="multi-select-list"] {
+    @apply flex-col-1 overflow-y-auto;
+  }
+
+  [data-name="select-list-option"],
+  [data-name="multi-select-list-option"] {
+    @apply flex-row-1 items-center px-2 py-1 rounded-md;
+
+    &[data-disabled] {
+      @apply cursor-not-allowed text-disabled;
     }
 
-    [data-name="select-chip-display-chip"] {
-      @apply flex-row-1 items-center pl-2 pr-1 coloring-solid neutral rounded-md h-9;
+    &:not([data-disabled]) {
+      @apply cursor-pointer;
+
+      &[data-highlighted] {
+        @apply bg-primary/20;
+      }
     }
-  }
+  }
+
+  [data-name="select-list-status"],
+  [data-name="multi-select-list-status"] {
+    @apply text-description px-2 py-1 rounded-md;
+  }
+}

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

@@ -1,4 +1,15 @@
+@utility coloring-transition {
+  transition: 
+    border-color var(--animation-duration-in, 250ms) ease-in-out, 
+    box-shadow var(--animation-duration-in, 250ms) ease-in-out,
+    outline-color var(--animation-duration-in, 250ms) ease-in-out,
+    outline-offset var(--animation-duration-in, 250ms) ease-in-out,
+    color var(--animation-duration-in, 250ms) ease-in-out,
+    background-color var(--animation-duration-in, 250ms) ease-in-out;
+}
+
 @utility coloring-solid {
+  @apply coloring-transition;
   @apply bg-[var(--coloring-solid-color,var(--coloring-color))]
   text-[var(--coloring-solid-text,var(--coloring-on-color))];
 }
@@ -9,6 +20,7 @@
 }
 
 @utility coloring-tonal {
+  @apply coloring-transition;
   @apply bg-[var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)))]/20
   text-[var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)))];
 }
@@ -19,6 +31,7 @@
 }
 
 @utility coloring-text {
+  @apply coloring-transition;
   @apply text-[var(--coloring-text,var(--coloring-color))];
 }
 
@@ -28,6 +41,7 @@
 }
 
 @utility coloring-outline {
+  @apply coloring-transition;
   border-width: var(--coloring-outline-width, 0.125rem);
   @apply border-[var(--coloring-border,var(--coloring-outline,var(--coloring-color)))];
   @apply text-[var(--coloring-outline,var(--coloring-color))];
@@ -39,6 +53,19 @@
   hover:text-[var(--coloring-outline-hover,var(--coloring-hover))];
 }
 
+@utility coloring-tonal-outline {
+  @apply coloring-transition coloring-tonal;
+  border-width: var(--coloring-outline-width, 0.125rem);
+  @apply border-[var(--coloring-border,var(--coloring-outline,var(--coloring-color)))];
+}
+
+@utility coloring-tonal-outline-hover {
+  @apply coloring-tonal-outline
+  hover:border-[var(--coloring-border-hover,--coloring-hover)]
+  hover:text-[var(--coloring-outline-hover,var(--coloring-hover))]
+  hover:bg-[var(--coloring-tonal-hover,var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))))]/30;
+}
+
 @utility coloring-reset-variables {
   --coloring-color: initial;
   --coloring-on-color: initial;

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

@@ -9,7 +9,7 @@
 }
 
 @utility focus-style-shadow {
-  --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
+  --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
 }
 
 @utility focus-style-none {
@@ -30,4 +30,4 @@
     box-shadow: var(--focus-box-shadow);
     border-color: var(--focus-border-color);
   }
-}
+}

package/package.json

@@ -6,8 +6,11 @@
   "repository": {
     "url": "git+https://github.com/helpwave/hightide.git"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "license": "MPL-2.0",
-  "version": "0.8.11",
+  "version": "0.9.0",
   "files": [
     "dist"
   ],
@@ -15,7 +18,7 @@
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "bin": {
-    "barrel": ".dist/scripts/barrel.js"
+    "barrel": "dist/scripts/barrel.js"
   },
   "exports": {
     ".": {
@@ -39,6 +42,7 @@
   },
   "dependencies": {
     "@helpwave/internationalization": "0.4.0",
+    "@radix-ui/react-slot": "1.2.4",
     "@tailwindcss/cli": "4.1.18",
     "@tanstack/react-table": "8.21.3",
     "clsx": "2.1.1",
@@ -54,9 +58,9 @@
     "@babel/preset-typescript": "7.26.0",
     "@faker-js/faker": "10.1.0",
     "@helpwave/eslint-config": "0.0.11",
-    "@storybook/addon-docs": "10.2.8",
-    "@storybook/addon-links": "10.2.8",
-    "@storybook/nextjs": "^10.2.8",
+    "@storybook/addon-docs": "10.2.10",
+    "@storybook/addon-links": "10.2.10",
+    "@storybook/nextjs": "10.2.10",
     "@tailwindcss/postcss": "4.1.18",
     "@types/jest": "30.0.0",
     "@types/node": "20.17.10",
@@ -66,12 +70,12 @@
     "@vitest/mocker": "4.0.16",
     "autoprefixer": "10.4.23",
     "eslint": "9.31.0",
-    "eslint-plugin-storybook": "10.2.8",
+    "eslint-plugin-storybook": "10.2.10",
     "jest": "30.2.0",
     "postcss": "8.5.6",
-    "storybook": "10.2.8",
-    "ts-jest": "29.4.5",
-    "tsup": "8.5.0",
+    "storybook": "10.2.10",
+    "ts-jest": "29.4.6",
+    "tsup": "8.5.1",
     "typescript": "5.7.2",
     "webpack": "5.105.2"
   },
@@ -87,4 +91,4 @@
   "overrides": {
     "elliptic": "^6.6.1"
   }
-}
+}