savor-ui 0.0.1

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

@@ -0,0 +1,127 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+
+@include b(descriptions) {
+  width: 100%;
+
+  @include e(title) {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    color: getCssVar("color", "text-1");
+  }
+
+  @include e(body) {
+    width: 100%;
+  }
+
+  @include e(item) {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  @include m(vertical) {
+    @include be(descriptions, item) {
+      flex-direction: column;
+    }
+    @include be(descriptions, label) {
+      width: 100%;
+    }
+    @include be(descriptions, content) {
+      width: 100%;
+    }
+  }
+
+  @include when(border) {
+    @include be(descriptions, body) {
+      border-top: 1px solid getCssVar("color", "fill-3");
+      border-left: 1px solid getCssVar("color", "fill-3");
+    }
+    @include be(descriptions, label) {
+      border-right: 1px solid getCssVar("color", "fill-3");
+      border-bottom: 1px solid getCssVar("color", "fill-3");
+    }
+    @include be(descriptions, content) {
+      border-right: 1px solid getCssVar("color", "fill-3");
+      border-bottom: 1px solid getCssVar("color", "fill-3");
+    }
+    @include this-bm(descriptions, large) {
+      @include be(descriptions, label) {
+        padding: 12px 12px;
+        background-color: getCssVar("color", "fill-2");
+      }
+      @include be(descriptions, content) {
+        padding: 12px 12px;
+      }
+    }
+
+    @include this-bm(descriptions, default) {
+      @include be(descriptions, label) {
+        padding: 8px 12px;
+        background-color: getCssVar("color", "fill-2");
+      }
+      @include be(descriptions, content) {
+        padding: 8px 12px;
+      }
+    }
+
+    @include this-bm(descriptions, small) {
+      @include be(descriptions, label) {
+        padding: 4px 12px;
+        background-color: getCssVar("color", "fill-2");
+      }
+      @include be(descriptions, content) {
+        padding: 4px 12px;
+      }
+    }
+  }
+
+  @include m(large) {
+    @include be(descriptions, label) {
+      padding-right: 12px;
+      padding-bottom: 12px;
+    }
+    @include be(descriptions, content) {
+      padding-right: 12px;
+      padding-bottom: 12px;
+    }
+  }
+
+  @include m(default) {
+    @include be(descriptions, label) {
+      padding-right: 12px;
+      padding-bottom: 8px;
+    }
+    @include be(descriptions, content) {
+      padding-right: 12px;
+      padding-bottom: 8px;
+    }
+  }
+
+  @include m(small) {
+    @include be(descriptions, label) {
+      padding-right: 12px;
+      padding-bottom: 4px;
+    }
+    @include be(descriptions, content) {
+      padding-right: 12px;
+      padding-bottom: 4px;
+    }
+  }
+
+  @include e(label) {
+    font-size: 14px;
+    font-weight: 500;
+    color: getCssVar("color", "text-3");
+  }
+
+  @include e(content) {
+    font-size: 14px;
+    color: getCssVar("color", "text-1");
+    word-break: break-word;
+    flex: 1;
+    min-width: 0;
+  }
+}

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

@@ -0,0 +1,54 @@
+@use "../mixins/mixins" as *;
+@use "../mixins/function" as *;
+@use "../common/var.scss" as *;
+
+@include b(divider) {
+  display: block;
+  position: relative;
+
+  @include e(label) {
+    position: absolute;
+    font-size: getCssVar("font-size", "medium");
+    line-height: getCssVar("line-height", "medium");
+    padding: 0 8px;
+    background-color: getCssVar("color", "bg-2");
+  }
+
+  @include m(left) {
+    @include be(divider, label) {
+      top: 50%;
+      transform: translateY(-50%);
+      left: 20px;
+    }
+  }
+
+  @include m(center) {
+    @include be(divider, label) {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  @include m(right) {
+    @include be(divider, label) {
+      top: 50%;
+      transform: translateY(-50%);
+      right: 20px;
+    }
+  }
+
+  @include not-when(vertical) {
+    height: 1px;
+    width: 100%;
+    border-top-width: 1px;
+    border-top-color: getCssVar("color", "fill-4");
+  }
+
+  @include when(vertical) {
+    height: 1em;
+    width: 1px;
+    border-left-width: 1px;
+    border-left-color: getCssVar("color", "fill-4");
+  }
+}

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

@@ -0,0 +1,153 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(drawer) {
+  word-break: break-word;
+  position: absolute;
+  box-shadow: getCssVar('shadow', '1');
+  background-color: getCssVar('color', 'bg-3');
+  color: getCssVar('color', 'text-1');
+  box-sizing: border-box;
+  pointer-events: all;
+  @include m(left) {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    @include be(drawer, trigger) {
+      width: 6px;
+      height: 100%;
+      top: 0;
+      right: 0;
+      cursor: ew-resize;
+      @include when(dragging) {
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 2px;
+          height: 100%;
+          background-color: getCssVar('color', 'primary-6');
+          z-index: 1;
+        }
+      }
+    }
+  }
+  @include m(right) {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    @include be(drawer, trigger) {
+      width: 6px;
+      height: 100%;
+      top: 0;
+      left: 0;
+      cursor: ew-resize;
+      @include when(dragging) {
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 2px;
+          height: 100%;
+          background-color: getCssVar('color', 'primary-6');
+          z-index: 1;
+        }
+      }
+    }
+  }
+  @include m(top) {
+    top: 0;
+    left: 0;
+    right: 0;
+    @include be(drawer, trigger) {
+      width: 100%;
+      height: 6px;
+      bottom: 0;
+      left: 0;
+      cursor: ns-resize;
+      @include when(dragging) {
+        &::before {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          background-color: getCssVar('color', 'primary-6');
+          z-index: 1;
+        }
+      }
+    }
+  }
+  @include m(bottom) {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    @include be(drawer, trigger) {
+      width: 100%;
+      height: 6px;
+      top: 0;
+      left: 0;
+      cursor: ns-resize;
+      @include when(dragging) {
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          background-color: getCssVar('color', 'primary-6');
+          z-index: 1;
+        }
+      }
+    }
+  }
+  @include e(container) {
+    inset: 0;
+    pointer-events: none;
+  }
+  @include e(mask) {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: all;
+    backdrop-filter: blur(3px);
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  @include e(wrapper) {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  @include e(trigger) {
+    position: absolute;
+    background-color: #0000;
+    transition: background-color 0.3s getCssVar('bezier', '1');
+  }
+  @include e(header) {
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  @include e(title) {
+    flex: 1;
+  }
+  @include e(body) {
+    flex: 1;
+  }
+  @include e(content) {
+  }
+  @include e(footer) {
+    padding: 8px 16px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+}

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

@@ -0,0 +1,107 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(dropdown) {
+  @include e(list) {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: getCssVar('shadow', '1');
+    background-color: getCssVar('color', 'bg-3');
+    padding: 4px;
+    transform-origin: left top;
+    transition: all 0.3s getCssVar('bezier', '1');
+    border-radius: getCssVar('radius', 'medium');
+  }
+}
+
+@include b(droption) {
+  height: getCssVar('size', 'medium');
+  line-height: getCssVar('size', 'medium');
+  color: getCssVar('color', 'text-1');
+  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  cursor: pointer;
+  min-width: 80px;
+  border-radius: calc(getCssVar('radius', 'medium') - 1px);
+
+  &:hover {
+    color: getCssVar('color', 'primary-6');
+    background-color: getCssVar('color', 'fill-2');
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+  @include e(icon) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @include e(title) {
+    font-size: getCssVar('font-size', 'medium');
+    text-wrap: nowrap;
+    flex: 1;
+  }
+  @include e(extra) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+  }
+}
+
+@include b(dsubmenu) {
+  margin-bottom: 4px;
+  @include e(item) {
+    height: getCssVar('size', 'medium');
+    line-height: getCssVar('size', 'medium');
+    color: getCssVar('color', 'text-1');
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+    cursor: pointer;
+    min-width: 80px;
+    border-radius: calc(getCssVar('radius', 'medium') - 1px);
+    gap: 8px;
+
+    &:hover {
+      color: getCssVar('color', 'primary-6');
+      background-color: getCssVar('color', 'fill-2');
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  @include e(icon) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @include e(title) {
+    font-size: getCssVar('font-size', 'medium');
+    text-wrap: nowrap;
+    flex: 1;
+  }
+  @include e(arrow) {
+    display: flex;
+    align-items: center;
+    margin-left: 8px;
+  }
+  @include e(list) {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-shadow: getCssVar('shadow', '1');
+    background-color: getCssVar('color', 'bg-3');
+    padding: 4px;
+    transform-origin: left top;
+    transition: all 0.3s getCssVar('bezier', '1');
+    border-radius: getCssVar('radius', 'medium');
+  }
+}

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

@@ -0,0 +1,17 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(empty) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  @include e(image) {
+    margin-bottom: 20px;
+  }
+  @include e(description) {
+    font-size: 14px;
+    color: getCssVar('color', 'text-3');
+  }
+}

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

@@ -0,0 +1,49 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(fieldset) {
+  width: 100%;
+  background-color: getCssVar('color', 'bg-2');
+  border: 1px solid getCssVar('color', 'fill-3');
+  border-radius: getCssVar('radius', 'medium');
+  color: getCssVar('color', 'text-1');
+  padding: 0 12px 12px;
+  margin: 0;
+
+  @include e(legend) {
+    background-color: getCssVar('color', 'bg-2');
+    color: var(--p-fieldset-legend-color);
+    padding: 4px 8px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    border-radius: getCssVar('radius', 'medium');
+    @include when(toggle) {
+      &:hover {
+        cursor: pointer;
+        user-select: none;
+        background-color: getCssVar('color', 'fill-2');
+      }
+    }
+  }
+  @include e(toggle) {
+    height: 20px;
+    width: 20px;
+    font-size: getCssVar('font-size', 'medium');
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  @include e(label) {
+    font-size: getCssVar('font-size', 'medium');
+    font-weight: 600;
+  }
+  @include e(wrapper) {
+    width: 100%;
+  }
+  @include e(content) {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,99 @@
+@use '../mixins/function.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+@include b(form) {
+  width: 100%;
+  display: inline-flex;
+  flex-direction: column;
+}
+
+@include b(form-item) {
+  display: flex;
+  box-sizing: border-box;
+  font-size: getCssVar('font-size', 'medium');
+  margin-bottom: 20px;
+  gap: 8px;
+  @include when(top) {
+    flex-direction: column;
+    @include be(form-item, label-wrapper) {
+      line-height: 1.5715;
+    }
+  }
+
+  @include m(mini) {
+    @include be(form-item, label-wrapper) {
+      line-height: getCssVar('size', 'mini');
+      font-size: getCssVar('font-size', 'mini');
+    }
+  }
+  @include m(small) {
+    @include be(form-item, label-wrapper) {
+      line-height: getCssVar('size', 'small');
+    }
+  }
+  @include m(medium) {
+    @include be(form-item, label-wrapper) {
+      line-height: getCssVar('size', 'medium');
+    }
+  }
+  @include m(large) {
+    @include be(form-item, label-wrapper) {
+      line-height: getCssVar('size', 'large');
+    }
+  }
+  @include e(label-wrapper) {
+    display: flex;
+    align-items: flex-start;
+  }
+  @include e(label) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  @include m(align-left) {
+    justify-content: flex-start;
+  }
+  @include m(align-right) {
+    justify-content: flex-end;
+  }
+  @include e(required) {
+    color: getCssVar('color', 'error-6');
+    display: flex;
+    align-items: center;
+    font-size: getCssVar('font-size', 'mini');
+    svg {
+      display: inline-block;
+      transform: scale(0.5);
+    }
+  }
+  @include e(tooltip) {
+    font-size: getCssVar('font-size', 'medium');
+    height: 14px;
+    color: getCssVar('color', 'text-3');
+  }
+
+  @include e(content-wrapper) {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+  @include e(content) {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  @include e(error-msg) {
+    height: 20px;
+    font-size: getCssVar('font-size', 'small');
+    color: getCssVar('color', 'error-6');
+    display: inline-flex;
+    align-items: center;
+  }
+
+  @include when(error) {
+    margin-bottom: 0;
+  }
+}