tiny-ui 1.0.2 → 1.0.3

package/lib/slider/style/css.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+// style dependencies
+require("../../tooltip/style/index.css");
+//# sourceMappingURL=index.js.map

package/lib/space/style/_index.scss

@@ -0,0 +1,25 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-space {
+  display: inline-flex;
+
+  &_vertical {
+    flex-direction: column;
+  }
+
+  &_start {
+    align-items: flex-start;
+  }
+
+  &_end {
+    align-items: flex-end;
+  }
+
+  &_center {
+    align-items: center;
+  }
+
+  &_baseline {
+    align-items: baseline;
+  }
+}

package/lib/space/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+//# sourceMappingURL=index.js.map

package/lib/speed-dial/style/_index.scss

@@ -0,0 +1,230 @@
+@use "../../style/variables" as *;
+@use "sass:color";
+
+$speed-dial-fab-size: 56px;
+$speed-dial-action-size: 40px;
+$speed-dial-actions-gap: 16px;
+
+.#{$prefix}-speed-dial {
+  position: relative;
+  display: inline-flex;
+
+  // FAB button
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $speed-dial-fab-size;
+    height: $speed-dial-fab-size;
+    border-radius: 50%;
+    border: none;
+    background-color: var(--ty-speed-dial-bg, #{$primary-color});
+    color: var(--ty-speed-dial-color, #{$white-color});
+    font-size: 24px;
+    cursor: pointer;
+    box-shadow: $box-shadow;
+    transition: background-color 0.2s ease;
+    outline: none;
+
+    &:hover:not(.#{$prefix}-speed-dial__button_disabled) {
+      background-color: var(--ty-speed-dial-bg-hover, #{color.adjust($primary-color, $lightness: -8%)});
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow;
+    }
+
+    &_open {
+      .#{$prefix}-speed-dial__icon-default {
+        transform: rotate(45deg);
+      }
+    }
+
+    &_disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  &__icon-default {
+    position: relative;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    transition: transform 0.3s ease;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      background-color: currentColor;
+      border-radius: 1px;
+      translate: -50% -50%;
+    }
+
+    &::before {
+      width: 55%;
+      height: 2px;
+    }
+
+    &::after {
+      width: 2px;
+      height: 55%;
+    }
+  }
+
+  // Actions container
+  &__actions {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.5);
+    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+
+    &_open {
+      opacity: 1;
+      visibility: visible;
+      transform: scale(1);
+    }
+  }
+
+  // Direction variants
+  &_up &__actions {
+    flex-direction: column-reverse;
+    bottom: 100%;
+    left: 50%;
+    transform-origin: bottom center;
+    translate: -50% 0;
+    padding-bottom: $speed-dial-actions-gap;
+  }
+
+  &_up &__actions_open {
+    transform: scale(1);
+  }
+
+  &_down &__actions {
+    flex-direction: column;
+    top: 100%;
+    left: 50%;
+    transform-origin: top center;
+    translate: -50% 0;
+    padding-top: $speed-dial-actions-gap;
+  }
+
+  &_down &__actions_open {
+    transform: scale(1);
+  }
+
+  &_left &__actions {
+    flex-direction: row-reverse;
+    right: 100%;
+    top: 50%;
+    transform-origin: center right;
+    translate: 0 -50%;
+    padding-right: $speed-dial-actions-gap;
+  }
+
+  &_left &__actions_open {
+    transform: scale(1);
+  }
+
+  &_right &__actions {
+    flex-direction: row;
+    left: 100%;
+    top: 50%;
+    transform-origin: center left;
+    translate: 0 -50%;
+    padding-left: $speed-dial-actions-gap;
+  }
+
+  &_right &__actions_open {
+    transform: scale(1);
+  }
+
+  // Action wrapper (contains button + tooltip)
+  &__action-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 4px 0;
+  }
+
+  &_left &__action-wrapper,
+  &_right &__action-wrapper {
+    margin: 0 4px;
+  }
+
+  // Action button
+  &__action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $speed-dial-action-size;
+    height: $speed-dial-action-size;
+    border-radius: 50%;
+    border: none;
+    background-color: var(--ty-speed-dial-action-bg, #{$white-color});
+    color: var(--ty-speed-dial-action-color, #{$gray-800});
+    font-size: 16px;
+    cursor: pointer;
+    box-shadow: $box-shadow-sm;
+    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+    outline: none;
+
+    &:hover:not(.#{$prefix}-speed-dial__action_disabled) {
+      background-color: var(--ty-speed-dial-action-bg-hover, #{$gray-100});
+      box-shadow: $box-shadow;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 3px rgba($primary-color, 0.3), $box-shadow-sm;
+    }
+
+    &_disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  // Tooltip
+  &__action-tooltip {
+    position: absolute;
+    white-space: nowrap;
+    background-color: var(--ty-speed-dial-tooltip-bg, #{$gray-800});
+    color: var(--ty-speed-dial-tooltip-color, #{$white-color});
+    font-size: $font-size-sm;
+    padding: 4px 8px;
+    border-radius: $border-radius;
+    pointer-events: none;
+
+    &_left {
+      right: calc(100% + 8px);
+      top: 50%;
+      translate: 0 -50%;
+    }
+
+    &_right {
+      left: calc(100% + 8px);
+      top: 50%;
+      translate: 0 -50%;
+    }
+
+    &_top {
+      bottom: calc(100% + 8px);
+      left: 50%;
+      translate: -50% 0;
+    }
+
+    &_bottom {
+      top: calc(100% + 8px);
+      left: 50%;
+      translate: -50% 0;
+    }
+  }
+}

package/lib/speed-dial/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./_index.css");
+//# sourceMappingURL=index.js.map

package/lib/split/style/_index.scss

@@ -0,0 +1,98 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-split {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  height: 100%;
+  outline: none;
+  overflow: hidden;
+  user-select: text;
+
+  &_horizontal {
+    flex-direction: column;
+  }
+
+  &_vertical {
+    flex-direction: row;
+  }
+}
+
+.#{$prefix}-split-pane {
+  box-sizing: border-box;
+  position: relative;
+  outline: none;
+}
+
+.#{$prefix}-split-bar {
+  position: relative;
+  box-sizing: border-box;
+  background-color: var(--ty-split-bar-bg);
+  border: 1px solid var(--ty-split-bar-border);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:before,
+  &:after {
+    content: '';
+    box-sizing: border-box;
+    display: block;
+    border: 1px solid var(--ty-split-bar-line);
+  }
+
+  &_vertical {
+    height: 100%;
+    cursor: col-resize;
+    flex-direction: column;
+    border-top: none;
+    border-bottom: none;
+
+    &:active {
+      cursor: ew-resize;
+    }
+
+    &:before,
+    &:after {
+      height: 4px;
+      width: 100%;
+      border-left: 0;
+      border-right: 0;
+    }
+
+    &:before {
+      margin-bottom: 1px;
+    }
+
+    &:after {
+      margin-top: 1px;
+    }
+  }
+
+  &_horizontal {
+    width: 100%;
+    cursor: row-resize;
+    border-left: none;
+    border-right: none;
+
+    &:active {
+      cursor: ns-resize;
+    }
+
+    &:before,
+    &:after {
+      height: 100%;
+      width: 4px;
+      border-top: 0;
+      border-bottom: 0;
+    }
+
+    &:before {
+      margin-right: 1px;
+    }
+
+    &:after {
+      margin-left: 1px;
+    }
+  }
+}

package/lib/split/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+//# sourceMappingURL=index.js.map

package/lib/split-button/style/_index.scss

@@ -0,0 +1,9 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-split-button {
+
+  &__dropdown-btn{
+    padding: 0 8px;
+    min-width: auto;
+  }
+}

package/lib/split-button/style/css.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+// style dependency
+require("../../button/style/index.css");
+require("../../dropdown/style/index.css");
+//# sourceMappingURL=index.js.map

package/lib/statistic/style/_index.scss

@@ -0,0 +1,31 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-statistic {
+  &__title {
+    margin-bottom: 4px;
+    color: var(--ty-color-text-secondary, #{$gray-600});
+    font-size: $font-size-sm;
+  }
+
+  &__content {
+    display: flex;
+    align-items: baseline;
+    color: var(--ty-color-text, #{$gray-900});
+    font-size: 24px;
+    font-weight: 600;
+    font-family: $font-family-sans-serif;
+  }
+
+  &__prefix {
+    margin-right: 4px;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__suffix {
+    margin-left: 4px;
+    font-size: $font-size-base;
+    display: inline-flex;
+    align-items: center;
+  }
+}

package/lib/statistic/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+//# sourceMappingURL=index.js.map

package/lib/steps/style/_index.scss

@@ -0,0 +1,208 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-steps {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: var(--ty-color-text);
+  display: flex;
+  width: 100%;
+
+  &_horizontal {
+    .#{$prefix}-steps-item_label-horizontal {
+      display: flex;
+
+      .#{$prefix}-steps-item {
+        &__tail {
+          display: none;
+        }
+
+        &__content {
+          flex: 1;
+          margin: 16px 0 0 12px;
+        }
+
+        &__title {
+          display: flex;
+          align-items: center;
+
+          &:after {
+            content: '';
+            margin: 0 12px;
+            flex: 1;
+            width: 100%;
+            height: 1px;
+            background: var(--ty-steps-tail-color);
+          }
+        }
+      }
+    }
+  }
+
+  &_vertical {
+    flex-direction: column;
+
+    .#{$prefix}-steps-item {
+      display: flex;
+
+      &__head {
+        flex-direction: column;
+      }
+
+      &__tail {
+        min-height: 30px;
+        height: 100%;
+        width: 1px;
+        margin: 8px 0;
+      }
+
+      &__content {
+        margin-top: 0;
+        margin-left: 12px;
+      }
+    }
+  }
+}
+
+.#{$prefix}-steps-item {
+  box-sizing: border-box;
+  flex: 1;
+  overflow: hidden;
+  vertical-align: top;
+
+  &[role='button']:not(&_disabled) {
+    cursor: pointer;
+  }
+
+  &_disabled {
+    cursor: not-allowed;
+  }
+
+  &__head {
+    display: flex;
+    align-items: center;
+  }
+
+  &__icon {
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--ty-color-primary);
+    border-radius: 50%;
+    background-color: var(--ty-steps-icon-bg);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &_has-icon {
+      border: none;
+      background-color: transparent;
+    }
+  }
+
+  &__tail {
+    margin: 0 12px;
+    flex: 1;
+    height: 1px;
+    width: 100%;
+    background-color: var(--ty-steps-tail-color);
+  }
+
+  &__content {
+    margin-top: 8px;
+  }
+
+  &__title {
+    line-height: 32px;
+    font-size: $steps-title-font-size;
+    color: var(--ty-color-text-secondary);
+  }
+
+  &__desc {
+    color: var(--ty-color-text-tertiary);
+  }
+
+  &:last-child {
+    flex: none;
+
+    .#{$prefix}-steps-item {
+
+      &__tail {
+        display: none;
+      }
+
+      &__title:after {
+        content: none;
+      }
+    }
+  }
+
+  &_process {
+    .#{$prefix}-steps-item {
+      &__icon {
+        background-color: var(--ty-color-primary);
+        color: #fff;
+
+        &_has-icon {
+          background-color: transparent;
+          color: var(--ty-color-primary);
+        }
+      }
+
+      &__title {
+        font-weight: 600;
+        color: var(--ty-color-primary);
+      }
+
+      &__desc {
+        color: var(--ty-color-primary);
+      }
+    }
+  }
+
+  &_finish {
+    .#{$prefix}-steps-item {
+
+      &__icon {
+        color: var(--ty-color-primary);
+      }
+
+      &__tail, &__title:after {
+        background-color: var(--ty-color-primary);
+      }
+    }
+  }
+
+  &_wait {
+    .#{$prefix}-steps-item {
+      &__icon {
+        border-color: var(--ty-color-text-quaternary);
+        color: var(--ty-color-text-quaternary);
+      }
+
+      &__title {
+        color: var(--ty-color-text-quaternary);
+      }
+
+      &__desc {
+        color: var(--ty-color-text-quaternary);
+      }
+    }
+  }
+
+  &_error {
+    .#{$prefix}-steps-item {
+      &__icon {
+        border-color: var(--ty-color-danger);
+        color: var(--ty-color-danger);
+      }
+
+      &__title {
+        color: var(--ty-color-danger);
+      }
+
+      &__desc {
+        color: var(--ty-color-danger);
+      }
+    }
+  }
+}

package/lib/steps/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+//# sourceMappingURL=index.js.map

package/lib/sticky/style/_index.scss

@@ -0,0 +1,8 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-sticky {
+
+  &_fixed {
+    position: fixed;
+  }
+}

package/lib/sticky/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+//# sourceMappingURL=index.js.map

package/lib/strength-indicator/style/_index.scss

@@ -0,0 +1,46 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-strength-indicator {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+
+  &__item {
+    box-sizing: border-box;
+    flex: 1;
+    margin: 0 2px;
+
+    &:first-child {
+      margin-left: 0;
+
+      .#{$prefix}-strength-indicator__inner {
+        border-top-left-radius: $strength-indicator-border-radius;
+        border-bottom-left-radius: $strength-indicator-border-radius;
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
+
+      .#{$prefix}-strength-indicator__inner {
+        border-top-right-radius: $strength-indicator-border-radius;
+        border-bottom-right-radius: $strength-indicator-border-radius;
+      }
+    }
+  }
+
+  &__inner {
+    background-color: var(--ty-color-bg-disabled);
+    min-height: 8px;
+    transition: background-color 300ms;
+  }
+
+  &__label {
+    text-align: center;
+    margin-top: 4px;
+    color: var(--ty-color-text-secondary);
+    font-size: 12px;
+  }
+}

package/lib/strength-indicator/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./index.css");
+//# sourceMappingURL=index.js.map