@streamscloud/kit 0.2.1 → 0.2.3

package/dist/ui/selects/_multiselect.scss

@@ -0,0 +1,282 @@
+@use 'styles/colors';
+@use 'styles/functions';
+@use 'styles/mixins';
+
+@mixin multiselect {
+  --_multiselect--root--font-size: var(--sc-kit--multiselect--root--font-size, 1rem);
+  --_multiselect--height: var(--sc-kit--multiselect--height, #{functions.em(32)});
+  --_multiselect--width: var(--sc-kit--multiselect--width, 100%);
+  --_multiselect--background: var(--sc-kit--multiselect--background, light-dark(#{colors.$color-white}, #{colors.$color-gray-900}));
+  --_multiselect--background--disabled: var(--sc-kit--multiselect--background--disabled, light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-800}));
+  --_multiselect--border-color: var(--sc-kit--multiselect--border-color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
+  --_multiselect--border-radius: var(--sc-kit--multiselect--border-radius, #{functions.em(4)});
+  --_multiselect--text--font-size: var(--sc-kit--multiselect--text--font-size, #{functions.em(14)});
+  --_multiselect--text--color: var(--sc-kit--multiselect--text--color, light-dark(#{colors.$color-gray-800}, #{colors.$color-white}));
+  --_multiselect--placeholder--color: var(--sc-kit--multiselect--placeholder--color, var(--_multiselect--border-color));
+  --_multiselect--icon--color: var(--sc-kit--multiselect--icon--color, var(--_multiselect--border-color));
+  --_multiselect--padding-inline: var(--sc-kit--multiselect--padding-inline, #{functions.em(8)});
+  --_multiselect--padding-block: var(--sc-kit--multiselect--padding-block, #{functions.em(4)});
+
+  --_multiselect--options--max-height: var(--sc-kit--multiselect--options--max-height, #{functions.em(320)});
+  --_multiselect--item--hover--background: var(
+    --sc-kit--multiselect--item--hover--background,
+    light-dark(#{colors.$color-gray-100}, #{colors.$color-gray-800})
+  );
+  --_multiselect--item--active--background: var(
+    --sc-kit--multiselect--item--active--background,
+    light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-700})
+  );
+
+  --_multiselect--tag--color: var(--sc-kit--multiselect--tag--color, var(--_multiselect--text--color));
+  --_multiselect--tag--background: var(--sc-kit--multiselect--tag--background, var(--_multiselect--background));
+  --_multiselect--tag--border-color: var(--sc-kit--multiselect--tag--border-color, var(--_multiselect--border-color));
+  --_multiselect--tag--border-radius: var(--sc-kit--multiselect--tag--border-radius, var(--_multiselect--border-radius));
+  --_multiselect--tag--font-size: var(--sc-kit--multiselect--tag--font-size, calc(var(--_multiselect--text--font-size) * 0.9));
+  --_multiselect--tag--padding-inline: var(--sc-kit--multiselect--tag--padding-inline, var(--_multiselect--padding-inline));
+  --_multiselect--tag--padding-block: var(--sc-kit--multiselect--tag--padding-block, var(--_multiselect--padding-block));
+
+  --_multiselect--chevron--pointer-events: var(--sc-kit--multiselect--chevron--pointer-events, none);
+
+  --_multiselect--group-header--color: var(--sc-kit--multiselect--group-header--color, var(--_multiselect--placeholder--color));
+  --_multiselect--group-header--font-weight: var(--sc-kit--multiselect--group-header--font-weight, 500);
+  --_multiselect--group-item--padding-left: var(--sc-kit--multiselect--group-item--padding-left, #{functions.em(16)});
+
+  --_multiselect--inline--tag--background: var(
+    --sc-kit--multiselect--inline--tag--background,
+    light-dark(#{colors.$color-neutral-100}, #{colors.$color-neutral-700})
+  );
+
+  // svelte-select CSS variable mappings
+  --background: var(--_multiselect--background);
+  --border: 1px solid var(--_multiselect--border-color);
+  --border-focused: var(--border);
+  --border-hover: var(--border);
+  --border-radius: var(--_multiselect--border-radius);
+  --border-radius-focused: var(--border-radius);
+  --box-sizing: border-box;
+  --chevron-background: transparent;
+  --chevron-border: transparent;
+  --chevron-color: transparent;
+  --chevron-height: auto;
+  --chevron-pointer-events: var(--_multiselect--chevron--pointer-events);
+  --chevron-width: auto;
+  --disabled-background: var(--_multiselect--background--disabled);
+  --disabled-border-color: var(--_multiselect--border-color);
+  --disabled-color: var(--_multiselect--text--color);
+  --disabled-placeholder-color: var(--placeholder-color);
+  --disabled-placeholder-opacity: var(--placeholder-opacity);
+  --font-size: var(--_multiselect--text--font-size);
+  --height: var(--_multiselect--height);
+  --icons-color: var(--_multiselect--icon--color);
+  --indicators-bottom: auto;
+  --indicators-position: static;
+  --indicators-right: auto;
+  --indicators-top: auto;
+  --input--color: var(--_multiselect--text--color);
+  --input-left: 0;
+  --input-letter-spacing: 1;
+  --input-margin: 0;
+  --input-padding: 0 var(--_multiselect--padding-inline) 0 0;
+  --item-active-background: var(--_multiselect--item--active--background);
+  --item-color: var(--_multiselect--text--color);
+  --item-first-border-radius: 0;
+  --item-height: auto;
+  --item-hover-bg: var(--_multiselect--item--hover--background);
+  --item-hover-color: var(--_multiselect--text--color);
+  --item-is-active-bg: var(--_multiselect--item--active--background);
+  --item-is-active-color: var(--_multiselect--text--color);
+  --item-is-not-selectable-color: var(--_multiselect--group-header--color);
+  --item-line-height: 1;
+  --item-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline);
+  --item-transition: auto;
+  --list-background: var(--background);
+  --list-border: var(--border);
+  --list-border-radius: var(--border-radius);
+  --list-max-height: var(--_multiselect--options--max-height);
+  --list-position: absolute;
+  --list-shadow: none;
+  --list-z-index: 2;
+  --loading--margin: 0;
+  --loading-color: var(--icons-color);
+  --loading-height: max-content;
+  --loading-width: max-content;
+  --margin: 0;
+  --max-height: var(--height);
+  --multi-item-active-outline: none;
+  --multi-item-bg: transparent;
+  --multi-item-border-radius: 0;
+  --multi-item-clear-icon-color: transparent;
+  --multi-item-color: transparent;
+  --multi-item-gap: 0;
+  --multi-item-height: 0;
+  --multi-item-margin: 0;
+  --multi-item-outline: none;
+  --multi-item-padding: 0;
+  --multi-max-width: 0;
+  --multi-select-input-margin: 0;
+  --multi-select-input-padding: 0;
+  --multi-select-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline) var(--_multiselect--padding-block) 0;
+  --padding: 0;
+  --placeholder-color: var(--_multiselect--placeholder--color);
+  --placeholder-opacity: 0.8;
+  --selected-item-color: auto;
+  --selected-item-overflow: auto;
+  --selected-item-padding: auto;
+  --spinner-color: var(--icons-color);
+  --spinner-height: var(--_multiselect--text--font-size);
+  --spinner-width: var(--_multiselect--text--font-size);
+  --value-container-overflow: hidden;
+  --value-container-padding: 0 var(--_multiselect--padding-inline) 0 0;
+  --width: var(--_multiselect--width);
+  --group-title-color: var(--_multiselect--group-header--color);
+  --group-title-font-weight: var(--_multiselect--group-header--font-weight);
+  --group-title-font-size: var(--_multiselect--text--font-size);
+  --group-title-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline);
+  --group-item-padding-left: var(--_multiselect--group-item--padding-left);
+
+  font-size: var(--_multiselect--root--font-size);
+  width: var(--_multiselect--width);
+  position: relative;
+
+  &__icon {
+    --sc-kit--icon--color: var(--_multiselect--icon--color);
+    --sc-kit--icon--size: 1.25em;
+    display: flex;
+    align-items: center;
+
+    &--prepend {
+      padding: 0 var(--_multiselect--padding-inline);
+
+      :global &:not(:has(*)) {
+        padding-right: 0 !important;
+      }
+    }
+  }
+
+  &__option {
+    font-size: var(--_multiselect--text--font-size);
+  }
+
+  &__selection {
+    font-size: var(--_multiselect--tag--font-size);
+    @include mixins.width(100%);
+    @include mixins.height(100%);
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  &__selection-text {
+    @include mixins.ellipsis;
+  }
+
+  &__no-options {
+    color: var(--_multiselect--placeholder--color);
+    padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline);
+  }
+
+  &--disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &--loading {
+    pointer-events: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: light-dark(hsl(0, 0%, 97%), hsl(0, 0%, 3%));
+      opacity: 0.5;
+    }
+  }
+
+  :global(.value-container) {
+    gap: 0 !important;
+  }
+
+  &--inline {
+    --max-height: auto;
+    --multi-item-active-outline: none;
+    --multi-item-bg: var(--_multiselect--inline--tag--background);
+    --multi-item-border-radius: var(--_multiselect--border-radius);
+    --multi-item-clear-icon-color: var(--_multiselect--icon--color);
+    --multi-item-color: var(--_multiselect--text--color);
+    --multi-item-gap: var(--_multiselect--padding-inline);
+    --multi-item-height: calc(var(--_multiselect--height) - 2 * var(--_multiselect--padding-block));
+    --multi-item-margin: 0;
+    --multi-item-outline: 1px solid var(--_multiselect--border-color);
+    --multi-item-padding: var(--_multiselect--tag--padding-block) var(--_multiselect--tag--padding-inline);
+    --multi-max-width: #{functions.em(150)};
+    --multi-select-input-margin: 0;
+    --multi-select-input-padding: 0;
+    --multi-select-padding: var(--_multiselect--padding-block) var(--_multiselect--padding-inline) var(--_multiselect--padding-block) 0;
+
+    :global(.value-container) {
+      gap: #{functions.em(4)} !important;
+    }
+  }
+
+  &--inline-full-item {
+    --multi-max-width: none;
+  }
+
+  &--list-hidden {
+    --list-border: none;
+  }
+}
+
+@mixin multiselect-tags {
+  @include mixins.no-select;
+  display: flex;
+  flex-wrap: wrap;
+  gap: #{functions.em(4)};
+  margin-bottom: #{functions.em(4)};
+  min-width: 0;
+  width: 100%;
+
+  &__item {
+    display: flex;
+    gap: #{functions.em(6)};
+    vertical-align: middle;
+    border: 1px solid var(--_multiselect--tag--border-color);
+    font-size: var(--_multiselect--tag--font-size);
+    padding: var(--_multiselect--tag--padding-block) var(--_multiselect--tag--padding-inline);
+    color: var(--_multiselect--tag--color);
+    background: var(--_multiselect--tag--background);
+    border-radius: var(--_multiselect--tag--border-radius);
+    max-width: 100%;
+  }
+
+  &__item-text {
+    @include mixins.ellipsis;
+  }
+
+  &__deselect {
+    --sc-kit--icon--color: var(--_multiselect--icon--color);
+    --sc-kit--icon--size: #{functions.rem(20)};
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  &__drag-handle {
+    --sc-kit--icon--color: var(--_multiselect--icon--color);
+    --sc-kit--icon--size: #{functions.rem(16)};
+    cursor: grab;
+    display: flex;
+    align-items: center;
+    font-size: 0.7em;
+    user-select: none;
+  }
+}
+
+@mixin multiselect-tags-others {
+  color: var(--_multiselect--placeholder--color);
+  font-size: var(--_multiselect--tag--font-size);
+  padding: var(--_multiselect--tag--padding-block) 0;
+}

package/dist/ui/selects/_singleselect.scss

@@ -0,0 +1,175 @@
+@use 'styles/colors';
+@use 'styles/functions';
+@use 'styles/mixins';
+
+@mixin singleselect {
+  --_singleselect--root--font-size: var(--sc-kit--singleselect--root--font-size, 1rem);
+  --_singleselect--height: var(--sc-kit--singleselect--height, #{functions.em(32)});
+  --_singleselect--width: var(--sc-kit--singleselect--width, 100%);
+  --_singleselect--background: var(--sc-kit--singleselect--background, light-dark(#{colors.$color-white}, #{colors.$color-gray-900}));
+  --_singleselect--background--disabled: var(
+    --sc-kit--singleselect--background--disabled,
+    light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-800})
+  );
+  --_singleselect--border-color: var(--sc-kit--singleselect--border-color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
+  --_singleselect--border-radius: var(--sc-kit--singleselect--border-radius, #{functions.em(4)});
+  --_singleselect--text--font-size: var(--sc-kit--singleselect--text--font-size, #{functions.em(14)});
+  --_singleselect--text--color: var(--sc-kit--singleselect--text--color, light-dark(#{colors.$color-gray-800}, #{colors.$color-white}));
+  --_singleselect--placeholder--color: var(--sc-kit--singleselect--placeholder--color, var(--_singleselect--border-color));
+  --_singleselect--icon--color: var(--sc-kit--singleselect--icon--color, var(--_singleselect--border-color));
+  --_singleselect--padding-inline: var(--sc-kit--singleselect--padding-inline, #{functions.em(8)});
+  --_singleselect--padding-block: var(--sc-kit--singleselect--padding-block, #{functions.em(4)});
+
+  --_singleselect--options--max-height: var(--sc-kit--singleselect--options--max-height, #{functions.em(320)});
+  --_singleselect--item--hover--background: var(
+    --sc-kit--singleselect--item--hover--background,
+    light-dark(#{colors.$color-gray-100}, #{colors.$color-gray-800})
+  );
+  --_singleselect--item--active--background: var(
+    --sc-kit--singleselect--item--active--background,
+    light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-700})
+  );
+
+  --_singleselect--group-header--color: var(--sc-kit--singleselect--group-header--color, var(--_singleselect--placeholder--color));
+  --_singleselect--group-header--font-weight: var(--sc-kit--singleselect--group-header--font-weight, 500);
+  --_singleselect--group-item--padding-left: var(--sc-kit--singleselect--group-item--padding-left, #{functions.em(16)});
+
+  // svelte-select CSS variable mappings
+  --background: var(--_singleselect--background);
+  --border: 1px solid var(--_singleselect--border-color);
+  --border-focused: var(--border);
+  --border-hover: var(--border);
+  --border-radius: var(--_singleselect--border-radius);
+  --border-radius-focused: var(--border-radius);
+  --box-sizing: border-box;
+  --chevron-background: transparent;
+  --chevron-border: transparent;
+  --chevron-color: transparent;
+  --chevron-height: auto;
+  --chevron-pointer-events: none;
+  --chevron-width: auto;
+  --disabled-background: var(--_singleselect--background--disabled);
+  --disabled-border-color: var(--_singleselect--border-color);
+  --disabled-color: var(--_singleselect--text--color);
+  --disabled-placeholder-color: var(--placeholder-color);
+  --disabled-placeholder-opacity: var(--placeholder-opacity);
+  --font-size: var(--_singleselect--text--font-size);
+  --height: var(--_singleselect--height);
+  --icons-color: var(--_singleselect--icon--color);
+  --indicators-bottom: auto;
+  --indicators-position: static;
+  --indicators-right: auto;
+  --indicators-top: auto;
+  --input--color: var(--_singleselect--text--color);
+  --input-left: 0;
+  --input-letter-spacing: 1;
+  --input-margin: 0;
+  --input-padding: 0 var(--_singleselect--padding-inline) 0 0;
+  --item-active-background: var(--_singleselect--item--active--background);
+  --item-color: var(--_singleselect--text--color);
+  --item-first-border-radius: 0;
+  --item-height: auto;
+  --item-hover-bg: var(--_singleselect--item--hover--background);
+  --item-hover-color: var(--_singleselect--text--color);
+  --item-is-active-bg: var(--_singleselect--item--active--background);
+  --item-is-active-color: var(--_singleselect--text--color);
+  --item-is-not-selectable-color: var(--_singleselect--group-header--color);
+  --item-line-height: 1;
+  --item-padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
+  --item-transition: auto;
+  --list-background: var(--background);
+  --list-border: var(--border);
+  --list-border-radius: var(--border-radius);
+  --list-max-height: var(--_singleselect--options--max-height);
+  --list-position: absolute;
+  --list-shadow: none;
+  --list-z-index: 2;
+  --loading--margin: 0;
+  --loading-color: var(--icons-color);
+  --loading-height: max-content;
+  --loading-width: max-content;
+  --margin: 0;
+  --max-height: var(--height);
+  --padding: 0 var(--_singleselect--padding-inline) 0 0;
+  --placeholder-color: var(--_singleselect--placeholder--color);
+  --placeholder-opacity: 0.8;
+  --selected-item-color: auto;
+  --selected-item-overflow: auto;
+  --selected-item-padding: auto;
+  --spinner-color: var(--icons-color);
+  --spinner-height: var(--_singleselect--text--font-size);
+  --spinner-width: var(--_singleselect--text--font-size);
+  --value-container-overflow: hidden;
+  --value-container-padding: 0;
+  --width: var(--_singleselect--width);
+  --group-title-color: var(--_singleselect--group-header--color);
+  --group-title-font-weight: var(--_singleselect--group-header--font-weight);
+  --group-title-font-size: var(--_singleselect--text--font-size);
+  --group-title-padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
+  --group-item-padding-left: var(--_singleselect--group-item--padding-left);
+
+  font-size: var(--_singleselect--root--font-size);
+  width: var(--_singleselect--width);
+  position: relative;
+
+  &__icon {
+    --sc-kit--icon--color: var(--_singleselect--icon--color);
+    --sc-kit--icon--size: 1.25em;
+    display: flex;
+    align-items: center;
+
+    &--prepend {
+      padding: 0 var(--_singleselect--padding-inline);
+
+      :global &:not(:has(*)) {
+        padding-right: 0 !important;
+      }
+    }
+  }
+
+  &__option {
+    font-size: var(--_singleselect--text--font-size);
+
+    &--faded {
+      color: var(--_singleselect--placeholder--color);
+      opacity: 0.5;
+    }
+  }
+
+  &__selection {
+    @include mixins.width(100%);
+    @include mixins.height(100%);
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  &__selection-text {
+    @include mixins.ellipsis;
+  }
+
+  &__no-options {
+    color: var(--_singleselect--placeholder--color);
+    padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
+  }
+
+  &--disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &--loading {
+    pointer-events: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: light-dark(hsl(0, 0%, 97%), hsl(0, 0%, 3%));
+      opacity: 0.5;
+    }
+  }
+}