@helpwave/hightide 0.5.4 → 0.6.0

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

@@ -0,0 +1,50 @@
+@layer components {
+  [data-name="expandable-root"]:not(.default-style-none) {
+    @apply flex-col-0 surface coloring-solid rounded-lg shadow-sm;
+
+    &:not([data-disabled])[data-containertoggleable] {
+      @apply cursor-pointer;
+    }
+  }
+
+  [data-name="expandable-header"]:not(.default-style-none) {
+    @apply flex-row-2 justify-between items-center py-2 px-4 rounded-lg select-none;
+
+    &:not([data-disabled]) {
+      @apply cursor-pointer surface coloring-solid-hover;
+    }
+
+    &[data-disabled] {
+      @apply cursor-not-allowed disabled coloring-solid;
+    }
+  }
+
+  [data-name="expandable-content"]:not(.default-style-none) {
+    @apply flex-col-2 px-4 transition-all ease-in-out h-24;
+
+    &[data-state="opening"],
+    &[data-state="closing"] {
+      @apply overflow-hidden;
+    }
+
+    &[data-state="opened"] {
+      @apply overflow-y-auto;
+    }
+
+    &:not([data-expanded]) {
+      @apply max-h-0 opacity-0 overflow-hidden py-0 duration-[var(--animation-duration-out)];
+    }
+
+    &[data-expanded] {
+      @apply max-h-24 opacity-100 py-2 duration-[var(--animation-duration-in)];
+    }
+  }
+}
+
+@utility expadable-content-h-* {
+  height: calc(var(--spacing) * --value(number));
+
+  &[data-expanded] {
+    max-height: calc(var(--spacing) * --value(number));
+  }
+}

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

@@ -0,0 +1,13 @@
+@layer components {
+  [data-name="expansion-icon"]:not(.default-style-none) {
+    @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] {
+      @apply rotate-180;
+    }
+
+    &[data-disabled] {
+      @apply text-disabled;
+    }
+  }
+}

package/dist/style/uncompiled/theme/components/form-field.css

@@ -0,0 +1,17 @@
+@layer components {
+  [data-name="form-field-container"] {
+    @apply relative flex-col-1;
+  }
+
+  [data-name="form-field-container"] {
+    @apply text-description text-sm;
+  }
+
+  [data-name="form-field-error"] {
+    @apply absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium;
+  }
+
+  [data-name="form-field-label"] {
+    @apply flex-row-1 items-start typography-label-lg text-label;
+  }
+}

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

@@ -0,0 +1,28 @@
+@layer components {
+  * {
+    @apply border-border list-none placeholder-placeholder;
+
+    @variant dark {
+      color-scheme: dark;
+    }
+  }
+
+  html {
+    @apply bg-background text-on-background;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      @apply transition-none animate-none;
+    }
+  }
+
+  /* move the focus styles into its own file and utilities */
+  *:focus {
+    @apply outline-0 ring-0;
+  }
+
+  * {
+    @apply focus-style-default;
+  }
+}

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

@@ -0,0 +1,23 @@
+@import "./button.css";
+@import "./card.css";
+@import "./chip.css";
+@import "./input-elements.css";
+@import "./table.css";
+@import "./scrollbar.css";
+@import "./link.css";
+@import "./avatar.css";
+@import "./chip.css";
+@import "./breadcrumb.css";
+@import "./tabswitcher.css";
+@import "./expandable.css";
+@import "./expansion-icon.css";
+@import "./checkbox.css";
+@import "./tooltip.css";
+@import "./drawer.css";
+@import "./dialog.css";
+@import "./textarea.css";
+@import "./form-field.css";
+@import "./day-picker.css";
+@import "./time-picker.css";
+@import "./property.css";
+@import "./general.css";

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

@@ -0,0 +1,53 @@
+@utility input-element {
+  @apply border-2 focus-style-none focus-style-border;
+  &:not([data-disabled]):not([data-invalid]) {
+    @apply bg-input-background hover:border-primary-hover;
+
+    &:not([data-value]) {
+      @apply text-placeholder;
+    }
+
+    &[data-value] {
+      @apply text-input-text;
+    }
+  }
+
+  &:not([data-disabled])[data-invalid] {
+    @apply bg-negative/20 border-negative hover:border-negative-hover;
+
+    --color-focus: var(--color-negative);
+
+    &[data-value] {
+      @apply text-negative;
+    }
+
+    &:not([data-value]) {
+      @apply text-placeholder;
+    }
+  }
+
+  &[data-disabled] {
+    @apply border-disabled bg-disabled text-on-disabled placeholder:text-transparent cursor-not-allowed;
+  }
+}
+
+/* input-elements */
+@layer components {
+  [data-name="input"]:not(.default-style-none) {
+    @apply px-3 py-2 rounded-md h-10 input-element;
+  }
+
+  [data-name="select-button"]:not(.default-style-none) {
+    @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) {
+    @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/link.css

@@ -0,0 +1,5 @@
+@layer components {
+  .link {
+    @apply decoration-3 p-2 hover:underline focus:underline font-bold text-lg rounded;
+  }
+}

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

@@ -0,0 +1,102 @@
+@layer components {
+  [data-name="property-root"]:not(.default-style-none) {
+    @apply flex-row-0 rounded-xl;
+  }
+
+  [data-name="property-root"]:not(.default-style-none) {
+    transition: outline-offset var(--animation-duration-in, 250ms);
+    outline-offset: 0;
+
+    &:hover {
+      [data-name="property-title"]:not([data-invalid]),
+      [data-name="property-content"]:not([data-invalid]) {
+        @apply border-primary;
+      }
+
+      [data-name="property-title"][data-invalid],
+      [data-name="property-content"][data-invalid] {
+        @apply border-warning;
+      }
+    }
+
+    &:focus-within {
+      @apply outline-solid outline-2;
+      outline-offset: calc(var(--spacing) * 0.25);
+
+      &:not([data-invalid]) {
+        @apply outline-primary;
+      }
+
+      &[data-invalid] {
+        @apply outline-warning;
+      }
+    }
+  }
+
+
+  [data-name="property-title"]:not(.default-style-none) {
+    @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]) {
+      @apply bg-property-title-background text-property-title-text;
+    }
+
+    &[data-invalid] {
+      @apply bg-warning text-on-warning border-warning-hover;
+    }
+  }
+
+
+  [data-name="property-title-icon"]:not(.default-style-none) {
+    @apply max-w-6 min-w-6;
+  }
+
+  [data-name="property-title-text"]:not(.default-style-none) {
+    @apply font-semibold truncate min-w-0;
+  }
+
+  [data-name="property-content"]:not(.default-style-none) {
+    @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]) {
+      @apply bg-input-background text-input-text;
+    }
+
+    &[data-invalid] {
+      @apply bg-surface-warning border-warning;
+    }
+  }
+
+  [data-name="property-actions"]:not(.default-style-none) {
+    @apply flex-row-2 items-center gap-1;
+  }
+
+  [data-name="property-input-wrapper"]:not(.default-style-none) {
+    @apply relative flex-row-2 w-full;
+
+    &[data-invalid] {
+      @apply text-warning;
+
+      [data-name="select-button"],
+      [data-name="select-button-chips"] {
+        @apply !bg-warning !text-surface-warning;
+      }
+    }
+  }
+
+  [data-name="property-input"]:not(.default-style-none) {
+    @apply rounded p-1;
+
+    &[data-invalid] {
+      @apply bg-surface-warning placeholder-warning;
+    }
+  }
+
+  [data-name="property-suffix"]:not(.default-style-none) {
+    @apply absolute top-1/2 -translate-y-1/2 right-2;
+
+    &[data-invalid] {
+      @apply bg-surface-warning;
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+@layer components {
+  @supports (scrollbar-color: auto) {
+    * {
+      scrollbar-color: var(--color-gray-500) transparent;
+    }
+  }
+
+  /* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
+  @supports selector(::-webkit-scrollbar) {
+    * {
+      scrollbar-color: initial;
+    }
+
+    :root {
+      --scrollbar-width: 10px;
+      --scrollbar-padding: 1px;
+    }
+
+    *::-webkit-scrollbar {
+      width: var(--scrollbar-width);
+      height: var(--scrollbar-width);
+    }
+
+    *::-webkit-scrollbar-track {
+      border-radius: 9999px;
+      background: transparent;
+      cursor: default;
+    }
+
+    *::-webkit-scrollbar-thumb {
+      background-color: var(--color-gray-500);
+      border-radius: 9999px;
+      border: var(--scrollbar-padding) solid transparent;
+      background-clip: padding-box;
+      cursor: default;
+      transition: background-color 0.2s ease;
+    }
+
+    *::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-gray-600);
+    }
+
+    *::-webkit-scrollbar-thumb:vertical {
+      min-height: calc(var(--scrollbar-width) * 3);
+    }
+
+    *::-webkit-scrollbar-thumb:horizontal {
+      min-width: calc(var(--scrollbar-width) * 3);
+    }
+
+    *::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+@layer components {
+  [data-name="table-container"] {
+    @apply flex-col-4;
+  }
+
+  [data-name="table-scroll-wrapper"] {
+    @apply flex-col-0 w-full overflow-auto;
+  }
+
+  [data-name="table"] {
+    @apply table-fixed border-separate border-spacing-0 rounded-lg;
+    @apply bg-table-background text-table-text;
+  }
+
+  [data-name="table-filler-cell"] {
+    @apply flex flex-row items-center w-1/2 h-4 text-disabled font-bold;
+  }
+
+  [data-name="table-cell"] {
+    @apply block max-w-full overflow-ellipsis truncate;
+  }
+
+  [data-name="table-header-row"] {
+  }
+
+  [data-name="table-header-cell"] {
+    @apply relative font-bold;
+    @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;
+  }
+
+  [data-name="table-body-row"] {
+    @apply hover:bg-table-row-hover-background;
+  }
+
+  [data-name="table-body-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;
+  }
+
+  [data-name="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 opacity-0 transition-opacity;
+
+    &[data-active] {
+      @apply opacity-100;
+    }
+
+    &[data-disabled] {
+      @apply opacity-0 hidden;
+    }
+
+    &:not([data-disabled]) {
+      @apply group-hover/table-header-cell:opacity-100;
+    }
+  }
+
+  [data-name="table-body-row"]:last-child > [data-name="table-body-cell"] {
+    @apply first:rounded-bl-lg last:rounded-br-lg;
+  }
+}

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

@@ -0,0 +1,23 @@
+@layer components {
+  [data-name="tab-list"] {
+    @apply flex-row-0;
+  }
+
+  [data-name="tab-list-item"] {
+    @apply flex-row-0 grow justify-center px-3 py-2 typography-label-md font-bold border-b-2 transition-colors neutral coloring-text-hover;
+    &[data-active] {
+      @apply border-primary;
+    }
+    &:not([data-active]) {
+      @apply text-description hover:cursor-pointer;
+    }
+  }
+
+  [data-name="tab-view"] {
+    @apply flex-col;
+  }
+
+  [data-name="tab-panel"] {
+    @apply flex-col-0 overflow-y-auto;
+  }
+}

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

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

package/dist/style/uncompiled/theme/components/time-picker.css

@@ -0,0 +1,9 @@
+@layer components {
+  [data-name="time-picker-container"] {
+    @apply flex-row-2 flex-1 min-h-0 select-none overflow-hidden;
+  }
+
+  [data-name="time-picker-value-column"] {
+    @apply flex-col-1 flex-1 overflow-y-auto min-w-20 max-w-20;
+  }
+}

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

@@ -0,0 +1,56 @@
+@layer components {
+  [data-name="tooltip"] {
+    @apply absolute px-2 py-1 rounded shadow-around-md;
+    @apply text-xs font-semibold text-tooltip-text bg-tooltip-background;
+
+    &[data-state="opening"] {
+      @apply opacity-0 animate-tooltip-fade-in;
+    }
+    &[data-state="closing"] {
+      @apply opacity-0 animate-tooltip-fade-out;
+    }
+    &[data-state="closed"] {
+      @apply opacity-0;
+    }
+  }
+
+  [data-name="tooltip-triangle"] {
+    @apply absolute w-0 h-0;
+    --triangle-size: calc(1.5 * var(--spacing));
+
+    &[data-state="opening"] {
+      @apply opacity-0 animate-tooltip-fade-in;
+    }
+    &[data-state="closing"] {
+      @apply opacity-0 animate-tooltip-fade-out;
+    }
+    &[data-state="closed"] {
+      @apply opacity-0;
+    }
+
+    &[data-position="top"] {
+      @apply border-t-tooltip-background border-l-transparent border-r-transparent;
+      border-width: var(--triangle-size) var(--triangle-size) 0
+        var(--triangle-size);
+      transform: translate(0, var(--triangle-size));
+    }
+    &[data-position="bottom"] {
+      @apply border-b-tooltip-background border-l-transparent border-r-transparent;
+      border-width: 0 var(--triangle-size) var(--triangle-size)
+        var(--triangle-size);
+      transform: translate(0, calc(-1 * var(--triangle-size)));
+    }
+    &[data-position="left"] {
+      @apply border-l-tooltip-background border-t-transparent border-b-transparent;
+      border-width: var(--triangle-size) 0 var(--triangle-size)
+        var(--triangle-size);
+      transform: translate(var(--triangle-size), 0);
+    }
+    &[data-position="right"] {
+      @apply border-r-tooltip-background border-t-transparent border-b-transparent;
+      border-width: var(--triangle-size) var(--triangle-size)
+        var(--triangle-size) 0;
+      transform: translate(calc(-1 * var(--triangle-size)), 0);
+    }
+  }
+}

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

@@ -1,5 +1,6 @@
-@import './colors/index.css';
-@import './typography.css';
-@import './breakpoints.css';
-@import './components.css';
-@import './shadow.css';
+@import "./colors/index.css";
+@import "./typography.css";
+@import "./breakpoints.css";
+@import "./components/index.css";
+@import "./shadow.css";
+@import "./variables.css";

package/dist/style/uncompiled/theme/variables.css

@@ -0,0 +1,6 @@
+:root {
+  --spacing: 0.25rem;
+  --drawer-indent: calc(4 * var(--spacing));
+  --animation-duration-in: 250ms;
+  --animation-duration-out: 170ms;
+}