savor-ui 0.0.1

package/dist/es/theme/components/galleria.scss

@@ -0,0 +1,192 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(galleria) {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  gap: 20px;
+  @include m(top) {
+    width: 100%;
+    flex-direction: column-reverse;
+    @include be(galleria, preview) {
+      width: 100%;
+    }
+    @include be(galleria, wrapper) {
+      flex-direction: row;
+    }
+    @include be(galleria, list) {
+      flex-direction: row;
+    }
+    @include be(galleria, item) {
+      height: 60px;
+    }
+    @include be(galleria, arrow) {
+      height: 60px;
+      width: 24px;
+    }
+    @include be(galleria, arrow-left) {
+      border-top-left-radius: getCssVar('radius', 'medium');
+      border-bottom-left-radius: getCssVar('radius', 'medium');
+    }
+    @include be(galleria, arrow-right) {
+      border-top-right-radius: getCssVar('radius', 'medium');
+      border-bottom-right-radius: getCssVar('radius', 'medium');
+    }
+  }
+  @include m(bottom) {
+    width: 100%;
+    flex-direction: column;
+    @include be(galleria, preview) {
+      width: 100%;
+    }
+    @include be(galleria, wrapper) {
+      flex-direction: row;
+    }
+    @include be(galleria, list) {
+      flex-direction: row;
+    }
+    @include be(galleria, item) {
+      height: 60px;
+    }
+    @include be(galleria, arrow) {
+      height: 60px;
+      width: 24px;
+    }
+    @include be(galleria, arrow-left) {
+      border-top-left-radius: getCssVar('radius', 'medium');
+      border-bottom-left-radius: getCssVar('radius', 'medium');
+    }
+    @include be(galleria, arrow-right) {
+      border-top-right-radius: getCssVar('radius', 'medium');
+      border-bottom-right-radius: getCssVar('radius', 'medium');
+    }
+  }
+  @include m(left) {
+    height: 100%;
+    flex-direction: row;
+    align-items: center;
+    @include be(galleria, preview) {
+      height: 100%;
+    }
+    @include be(galleria, wrapper) {
+      height: 100%;
+      flex-direction: column;
+    }
+    @include be(galleria, list) {
+      flex-direction: column;
+    }
+    @include be(galleria, item) {
+      width: 100px;
+    }
+    @include be(galleria, arrow) {
+      width: 100px;
+      height: 24px;
+    }
+    @include be(galleria, arrow-left) {
+      border-top-left-radius: getCssVar('radius', 'medium');
+      border-top-right-radius: getCssVar('radius', 'medium');
+    }
+    @include be(galleria, arrow-right) {
+      border-bottom-left-radius: getCssVar('radius', 'medium');
+      border-bottom-right-radius: getCssVar('radius', 'medium');
+    }
+  }
+  @include m(right) {
+    height: 100%;
+    flex-direction: row-reverse;
+    align-items: center;
+    @include be(galleria, preview) {
+      height: 100%;
+    }
+    @include be(galleria, wrapper) {
+      height: 100%;
+      flex-direction: column;
+    }
+    @include be(galleria, list) {
+      flex-direction: column;
+    }
+    @include be(galleria, item) {
+      width: 100px;
+    }
+    @include be(galleria, arrow) {
+      width: 100px;
+      height: 24px;
+    }
+    @include be(galleria, arrow-left) {
+      border-top-left-radius: getCssVar('radius', 'medium');
+      border-top-right-radius: getCssVar('radius', 'medium');
+    }
+    @include be(galleria, arrow-right) {
+      border-bottom-left-radius: getCssVar('radius', 'medium');
+      border-bottom-right-radius: getCssVar('radius', 'medium');
+    }
+  }
+  @include e(preview) {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    img {
+      height: auto;
+      width: auto;
+      max-height: 100%;
+      max-width: 100%;
+      border-radius: getCssVar('radius', 'medium');
+    }
+  }
+  @include e(wrapper) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  @include e(list) {
+    flex: 1;
+    display: flex;
+    gap: 8px;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  @include e(item) {
+    flex-shrink: 0;
+    cursor: pointer;
+    overflow: hidden;
+    opacity: 0.3;
+    transition: all 0.3s getCssVar('bezier', '1');
+    img {
+      height: auto;
+      width: auto;
+      max-height: 100%;
+      max-width: 100%;
+      border-radius: getCssVar('radius', 'medium');
+    }
+    @include when(active) {
+      opacity: 1;
+    }
+  }
+  @include e(arrow) {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: getCssVar('font-size', 'medium');
+    background-color: getCssVar('color', 'bg-3');
+    border: 1px solid getCssVar('color', 'fill-3');
+    user-select: none;
+    &:hover {
+      background-color: getCssVar('color', 'fill-2');
+    }
+    &:active {
+      background-color: getCssVar('color', 'fill-3');
+    }
+  }
+}

package/dist/es/theme/components/grid.scss

@@ -0,0 +1,9 @@
+@use "../mixins/mixins" as *;
+@use "../mixins/function" as *;
+@use "../common/var.scss" as *;
+
+@include b(grid) {
+  width: 100%;
+  display: grid;
+  grid-template-rows: auto;
+}

package/dist/es/theme/components/icon.scss

@@ -0,0 +1,14 @@
+@use "../mixins/mixins" as *;
+@use "../mixins/function" as *;
+@use "../common/var.scss" as *;
+
+@include b(icon) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+}

package/dist/es/theme/components/image.scss

@@ -0,0 +1,104 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(image) {
+  display: inline-block;
+  @include e(img) {
+    max-width: 100%;
+  }
+  @include e(preview) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  @include e(mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  @include e(wrapper) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+  @include e(content) {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+  }
+  @include e(content-img) {
+    display: inline-block;
+    max-width: 100%;
+    max-height: 100%;
+    vertical-align: middle;
+    cursor: grab;
+    user-select: none;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: auto;
+  }
+  @include e(toolbar) {
+    position: absolute;
+    bottom: 46px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    background-color: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    padding: 8px;
+    border-radius: getCssVar('radius', 'round');
+    gap: 8px;
+    pointer-events: auto;
+  }
+  @include e(toolbar-item) {
+    height: 32px;
+    width: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: getCssVar('radius', 'circle');
+    color: getCssVar('color', 'white');
+    font-size: 18px;
+    cursor: pointer;
+    pointer-events: auto;
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+  @include e(arrow) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: getCssVar('radius', 'circle');
+    color: getCssVar('color', 'white');
+    font-size: 18px;
+    cursor: pointer;
+    pointer-events: auto;
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+  @include e(arrow-left) {
+    left: 20px;
+  }
+  @include e(arrow-right) {
+    right: 20px;
+  }
+}

package/dist/es/theme/components/index.scss

@@ -0,0 +1,64 @@
+@use "transition.scss";
+@use "loading-icon.scss";
+@use "anchor.scss";
+@use "auto-complete.scss";
+@use "avatar.scss";
+@use "back-top.scss";
+@use "button.scss";
+@use "card.scss";
+@use "carousel.scss";
+@use "cascader.scss";
+@use "checkbox.scss";
+@use "collapse.scss";
+@use "color-picker.scss";
+@use "date-picker.scss";
+@use "datetime-picker.scss";
+@use "descriptions.scss";
+@use "divider.scss";
+@use "drawer.scss";
+@use "dropdown.scss";
+@use "empty.scss";
+@use "fieldset.scss";
+@use "form.scss";
+@use "galleria.scss";
+@use "grid.scss";
+@use "icon.scss";
+@use "image.scss";
+@use "input.scss";
+@use "input-number.scss";
+@use "input-tag.scss";
+@use "layer.scss";
+@use "layout.scss";
+@use "link.scss";
+@use "list.scss";
+@use "menu.scss";
+@use "message.scss";
+@use "meter-group.scss";
+@use "modal.scss";
+@use "pagination.scss";
+@use "panel.scss";
+@use "popover.scss";
+@use "progress.scss";
+@use "radio.scss";
+@use "scrollbar.scss";
+@use "segmented.scss";
+@use "select.scss";
+@use "skeleton.scss";
+@use "space.scss";
+@use "split.scss";
+@use "statistic.scss";
+@use "switch.scss";
+@use "table.scss";
+@use "tabs.scss";
+@use "tag.scss";
+@use "text.scss";
+@use "textarea.scss";
+@use "timeline.scss";
+@use "tooltip.scss";
+@use "tree.scss";
+@use "upload.scss";
+@use "virtual-list.scss";
+@use "waterfall.scss";
+@use "watermark.scss";
+@use "wheel.scss";
+@use "badge.scss";

package/dist/es/theme/components/input-number.scss

@@ -0,0 +1,223 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+@use "../common/var.scss" as *;
+
+@include b(input-number) {
+  display: inline-flex;
+  box-sizing: border-box;
+  @include e(wrapper) {
+    width: 100%;
+    display: flex;
+    overflow: hidden;
+    color: getCssVar("color", "text-1");
+    background-color: getCssVar("color", "bg-2");
+    border: 1px solid getCssVar("color", "fill-3");
+    &:hover {
+      border: 1px solid getCssVar("color", "fill-4");
+    }
+    &:focus-within {
+      border-color: getCssVar("color", "primary-6");
+    }
+    @include when(disabled) {
+      background-color: getCssVar("color", "fill-2");
+      border-color: getCssVar("color", "fill-2");
+      cursor: not-allowed;
+    }
+    @include when(error) {
+      @include this-be(input-number, wrapper) {
+        border-color: getCssVar("color", "error-6");
+        &:hover {
+          border-color: getCssVar("color", "error-6");
+        }
+        &:focus-within {
+          border-color: getCssVar("color", "error-6");
+        }
+        @include when(filled) {
+          background-color: getCssVar("color", "error-1");
+          border-color: getCssVar("color", "error-1");
+          &:hover {
+            background-color: getCssVar("color", "error-2");
+          }
+          &:focus-within {
+            background-color: getCssVar("color", "bg-2");
+            border-color: getCssVar("color", "error-5");
+          }
+        }
+      }
+    }
+    @include when(filled) {
+      background-color: getCssVar("color", "fill-2");
+      border: 1px solid getCssVar("color", "fill-2");
+      &:hover {
+        background-color: getCssVar("color", "fill-3");
+      }
+      &:focus-within {
+        background-color: getCssVar("color", "bg-2");
+        border-color: getCssVar("color", "primary-6");
+      }
+    }
+  }
+  @include e(prepend) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 12px;
+    color: getCssVar("color", "text-2");
+    white-space: nowrap;
+    background-color: getCssVar("color", "fill-2");
+    border-right: 1px solid getCssVar("color", "fill-3");
+  }
+  @include e(prefix) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @include e(inner) {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 8px;
+    @include has-be(input-number, controls) {
+      padding: 0 0 0 8px;
+    }
+  }
+  @include e(input) {
+    flex-grow: 1;
+    min-width: 0;
+    font-size: inherit;
+    padding: 0;
+    outline: none;
+    border: none;
+    background: none;
+    box-sizing: border-box;
+    border-radius: 0;
+    color: getCssVar("color", "text-1");
+    cursor: inherit;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+  @include e(clear) {
+    height: 18px;
+    width: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: getCssVar("font-size", "medium");
+    border-radius: getCssVar("radius", "circle");
+    cursor: pointer;
+    user-select: none;
+    &:hover {
+      background-color: getCssVar("color", "fill-1");
+    }
+    &:active {
+      background-color: getCssVar("color", "fill-2");
+    }
+  }
+  @include e(suffix) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @include e(button) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: getCssVar("font-size", "medium");
+    background-color: getCssVar("color", "fill-2");
+    color: getCssVar("color", "text-2");
+    cursor: pointer;
+    user-select: none;
+    &:hover {
+      background-color: getCssVar("color", "fill-1");
+    }
+    &:active {
+      background-color: getCssVar("color", "fill-2");
+    }
+  }
+  @include e(prepend-button) {
+    border-right: 1px solid getCssVar("color", "fill-3");
+  }
+  @include e(append-button) {
+    border-left: 1px solid getCssVar("color", "fill-3");
+  }
+  @include e(controls) {
+    display: flex;
+    flex-direction: column;
+    background-color: getCssVar("color", "bg-3");
+    border: 1px solid getCssVar("color", "fill-3");
+    user-select: none;
+    font-size: getCssVar("font-size", "small");
+  }
+  @include e(increase) {
+    flex: 1;
+    width: 100%;
+    border-bottom: 1px solid getCssVar("color", "fill-3");
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    &:hover {
+      background-color: getCssVar("color", "fill-1");
+    }
+    &:active {
+      background-color: getCssVar("color", "fill-2");
+    }
+  }
+  @include e(decrease) {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    &:hover {
+      background-color: getCssVar("color", "fill-1");
+    }
+    &:active {
+      background-color: getCssVar("color", "fill-2");
+    }
+  }
+  @include e(append) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 12px;
+    color: getCssVar("color", "text-2");
+    white-space: nowrap;
+    background-color: getCssVar("color", "fill-2");
+    border-left: 1px solid getCssVar("color", "fill-3");
+  }
+
+  @each $size in $size-list {
+    @include m(#{$size}) {
+      @include be(input-number, wrapper) {
+        border-radius: getCssVar("radius", $size);
+      }
+      @include be(input-number, input) {
+        height: calc(getCssVar("size", $size) - 2px);
+        line-height: calc(getCssVar("size", $size) - 2px);
+        @if $size == mini {
+          font-size: getCssVar("font-size", $size);
+        }
+      }
+      @include be(input-number, controls) {
+        height: calc(getCssVar("size", $size) - 2px);
+        width: calc(getCssVar("size", $size) - 2px);
+        @if $size == mini {
+          font-size: getCssVar("font-size", $size);
+          svg {
+            height: 10px;
+          }
+        }
+      }
+      @include be(input-number, button) {
+        height: calc(getCssVar("size", $size) - 2px);
+        width: calc(getCssVar("size", $size) - 2px);
+        @if $size == mini {
+          font-size: getCssVar("font-size", $size);
+        }
+      }
+    }
+  }
+}