@vsn-ux/gaia-styles 0.2.0 → 0.2.2

package/dist/components.css

@@ -1,7 +1,4 @@
-/*! tailwindcss v4.0.8 | MIT License | https://tailwindcss.com */
-:root, :host {
-  --spacing: 0.25rem;
-}
+/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
 .ga-avatar {
   display: inline-flex;
   height: calc(0.25rem * 10);
@@ -301,10 +298,105 @@
     }
   }
 }
+.ga-dropdown {
+  display: flex;
+  min-width: calc(0.25rem * 36);
+  flex-direction: column;
+  align-items: stretch;
+  border-radius: var(--ga-radius);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--ga-color-border-primary);
+  background-color: var(--ga-color-surface-primary);
+  --tw-outline-style: none;
+  outline-style: none;
+  .ga-dropdown__item {
+    position: relative;
+    display: flex;
+    height: calc(0.25rem * 9);
+    cursor: pointer;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(0.25rem * 2);
+    padding-inline: calc(0.25rem * 3);
+    padding-block: calc(0.25rem * 2);
+    text-align: left;
+    font-size: var(--ga-size-font-md);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+    --tw-leading: 1;
+    line-height: 1;
+    color: var(--ga-color-text-action);
+    &:first-child {
+      border-top-left-radius: var(--ga-radius);
+      border-top-right-radius: var(--ga-radius);
+    }
+    &:last-child {
+      border-bottom-right-radius: var(--ga-radius);
+      border-bottom-left-radius: var(--ga-radius);
+    }
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:hover, &:active {
+      background-color: var(--ga-color-surface-action-hover-2);
+      color: var(--ga-color-text-action-hover);
+    }
+    &.ga-dropdown__item--disabled {
+      cursor: default;
+      background-color: var(--ga-color-surface-disabled);
+      color: var(--ga-color-text-disable-selected);
+    }
+    &.ga-dropdown__item--selected {
+      background-color: var(--ga-color-surface-success);
+      --tw-font-weight: 600;
+      font-weight: 600;
+      color: var(--ga-color-text-body);
+      &.ga-dropdown__item--disabled {
+        background-color: var(--ga-color-surface-disable-selected);
+        color: var(--ga-color-text-on-action);
+      }
+    }
+  }
+  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active, .ga-dropdown__item:focus-visible {
+    &::after {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      height: calc(100% - 4px);
+      width: calc(100% - 4px);
+      border-radius: var(--ga-radius);
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--ga-color-border-focus);
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
+  .ga-dropdown__caption {
+    padding-inline: calc(0.25rem * 3);
+    padding-top: calc(0.25rem * 3);
+    padding-bottom: calc(0.25rem * 2);
+    font-size: var(--ga-size-font-sm);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, 0);
+    --tw-font-weight: 600;
+    font-weight: 600;
+  }
+  .ga-dropdown__content-spinner {
+    margin-inline: auto;
+    margin-block: calc(0.25rem * 8);
+    display: inline-flex;
+  }
+}
 .ga-form-field {
   display: flex;
   flex-direction: column;
   gap: calc(0.25rem * 2);
+  > * {
+    width: 100%;
+  }
   .ga-form-field__label {
     padding-inline: calc(0.25rem * 1);
     font-size: var(--ga-size-font-md);
@@ -608,6 +700,9 @@
     letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
     --tw-leading: calc(0.25rem * 4);
     line-height: calc(0.25rem * 4);
+    &:empty {
+      display: none;
+    }
   }
 }
 .ga-segmented-control {
@@ -672,6 +767,117 @@
     }
   }
 }
+.ga-native-select {
+  position: relative;
+  select {
+    height: calc(0.25rem * 10);
+    appearance: none;
+    border-radius: var(--ga-radius);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-surface-primary);
+    padding-block: calc(0.25rem * 2);
+    padding-right: calc(0.25rem * 9);
+    padding-left: calc(0.25rem * 3);
+    font-size: var(--ga-size-font-md);
+    line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+    letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+    --tw-leading: 1;
+    line-height: 1;
+  }
+  .ga-native-select__arrow {
+    pointer-events: none;
+    position: absolute;
+    top: calc(1/2 * 100%);
+    right: calc(0.25rem * 2);
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+}
+.ga-select {
+  display: inline-flex;
+  height: calc(0.25rem * 10);
+  width: calc(0.25rem * 50);
+  cursor: pointer;
+  appearance: none;
+  align-items: center;
+  gap: calc(0.25rem * 2);
+  border-radius: var(--ga-radius);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--ga-color-border-primary);
+  background-color: var(--ga-color-surface-primary);
+  padding-block: calc(0.25rem * 2);
+  padding-right: calc(0.25rem * 2);
+  padding-left: calc(0.25rem * 3);
+  text-align: left;
+  font-size: var(--ga-size-font-md);
+  line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
+  letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
+  --tw-leading: 1;
+  line-height: 1;
+  &.ga-select--expanded {
+    border-color: var(--ga-color-border-focus);
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+    outline-color: var(--ga-color-border-focus);
+  }
+  &:hover {
+    border-color: var(--ga-color-border-action-hover);
+    &:not(.ga-select--empty, .ga-select--disabled) {
+      background-color: var(--ga-color-surface-action-hover-2);
+    }
+  }
+  &.ga-select--disabled {
+    cursor: not-allowed;
+    border-color: var(--ga-color-border-primary);
+    background-color: var(--ga-color-surface-disabled);
+    color: var(--ga-color-text-disable-selected);
+  }
+  &:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+    outline-offset: 2px;
+    outline-color: var(--ga-color-border-focus);
+  }
+  &.ga-select--invalid {
+    border-color: var(--ga-color-border-error);
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+    outline-color: var(--ga-color-border-error);
+    &:not(.ga-select--empty) {
+      background-color: var(--ga-color-surface-error);
+    }
+  }
+  .ga-select__placeholder {
+    min-width: calc(0.25rem * 0);
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--ga-color-text-disabled);
+  }
+  .ga-select__value {
+    min-width: calc(0.25rem * 0);
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .ga-select__input {
+    height: calc(0.25rem * 6);
+    min-width: calc(0.25rem * 0);
+    flex: 1;
+    --tw-leading: calc(0.25rem * 6);
+    line-height: calc(0.25rem * 6);
+    --tw-outline-style: none;
+    outline-style: none;
+    &:is(input)::placeholder {
+      color: var(--ga-color-text-disabled);
+    }
+  }
+}
 .ga-text-area {
   display: flex;
   width: calc(0.25rem * 50);
@@ -889,6 +1095,11 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -904,8 +1115,3 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-content {
-  syntax: "*";
-  inherits: false;
-  initial-value: "";
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vsn-ux/gaia-styles",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "scripts": {
     "dev": "storybook dev -p 6006",

package/src/styles/components/dropdown.css

@@ -0,0 +1,51 @@
+.ga-dropdown {
+  @apply flex min-w-36 flex-col items-stretch rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) outline-none;
+
+  .ga-dropdown__item {
+    @apply text-md relative flex h-9 cursor-pointer flex-row items-center gap-2 px-3 py-2 text-left leading-none text-(--ga-color-text-action);
+
+    &:first-child {
+      @apply rounded-t;
+    }
+
+    &:last-child {
+      @apply rounded-b;
+    }
+
+    &:focus {
+      @apply outline-none;
+    }
+
+    &:hover,
+    &:active {
+      @apply bg-(--ga-color-surface-action-hover-2) text-(--ga-color-text-action-hover);
+    }
+
+    &.ga-dropdown__item--disabled {
+      @apply cursor-default bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
+    }
+
+    &.ga-dropdown__item--selected {
+      @apply bg-(--ga-color-surface-success) font-semibold text-(--ga-color-text-body);
+
+      &.ga-dropdown__item--disabled {
+        @apply bg-(--ga-color-surface-disable-selected) text-(--ga-color-text-on-action);
+      }
+    }
+  }
+
+  &:not(:focus-within) .ga-dropdown__item.ga-dropdown__item--active,
+  .ga-dropdown__item:focus-visible {
+    &::after {
+      @apply absolute top-[2px] left-[2px] h-[calc(100%-4px)] w-[calc(100%-4px)] rounded border-2 border-(--ga-color-border-focus) content-[''];
+    }
+  }
+
+  .ga-dropdown__caption {
+    @apply px-3 pt-3 pb-2 text-sm font-semibold;
+  }
+
+  .ga-dropdown__content-spinner {
+    @apply mx-auto my-8 inline-flex;
+  }
+}

package/src/styles/components/form-field.css

@@ -1,6 +1,10 @@
 .ga-form-field {
   @apply flex flex-col gap-2;
 
+  > * {
+    @apply w-full;
+  }
+
   .ga-form-field__label {
     @apply text-md px-1 leading-5 font-medium;
   }

package/src/styles/components/radio.css

@@ -63,5 +63,9 @@
 
   .ga-radio-button__label {
     @apply text-md min-h-4 leading-4;
+
+    &:empty {
+      @apply hidden;
+    }
   }
 }

package/src/styles/components/select.css

@@ -0,0 +1,59 @@
+.ga-native-select {
+  @apply relative;
+
+  select {
+    @apply text-md h-10 appearance-none rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) py-2 pr-9 pl-3 leading-none;
+  }
+
+  .ga-native-select__arrow {
+    @apply pointer-events-none absolute top-1/2 right-2 -translate-y-1/2;
+  }
+}
+
+.ga-select {
+  @apply text-md inline-flex h-10 w-50 cursor-pointer appearance-none items-center gap-2 rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) py-2 pr-2 pl-3 text-left leading-none;
+
+  &.ga-select--expanded {
+    @apply border-(--ga-color-border-focus) outline-1 outline-(--ga-color-border-focus);
+  }
+
+  &:hover {
+    @apply border-(--ga-color-border-action-hover);
+
+    &:not(.ga-select--empty, .ga-select--disabled) {
+      @apply bg-(--ga-color-surface-action-hover-2);
+    }
+  }
+
+  &.ga-select--disabled {
+    @apply cursor-not-allowed border-(--ga-color-border-primary) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
+  }
+
+  &:focus-visible {
+    @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
+  }
+
+  &.ga-select--invalid {
+    @apply border-(--ga-color-border-error) outline outline-(--ga-color-border-error);
+
+    &:not(.ga-select--empty) {
+      @apply bg-(--ga-color-surface-error);
+    }
+  }
+
+  .ga-select__placeholder {
+    @apply min-w-0 flex-1 truncate text-(--ga-color-text-disabled);
+  }
+
+  .ga-select__value {
+    @apply min-w-0 flex-1 truncate;
+  }
+
+  .ga-select__input {
+    @apply h-6 min-w-0 flex-1 leading-6 outline-none;
+
+    &:is(input)::placeholder {
+      @apply text-(--ga-color-text-disabled);
+    }
+  }
+}

package/src/styles/components.css

@@ -3,11 +3,13 @@
 @import './components/button.css';
 @import './components/card.css';
 @import './components/checkbox.css';
+@import './components/dropdown.css';
 @import './components/form-field.css';
 @import './components/input.css';
 @import './components/notification.css';
 @import './components/menu.css';
 @import './components/radio.css';
 @import './components/segmented-control.css';
+@import './components/select.css';
 @import './components/text-area.css';
 @import './components/tooltip.css';