tiny-ui 1.0.2 → 1.0.3

package/es/checkbox/style/_index.scss

@@ -0,0 +1,139 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  font-size: $font-size-base;
+  margin-right: 8px;
+  color: var(--ty-color-text);
+  box-sizing: border-box;
+
+  &:hover {
+    .#{$prefix}-checkbox__inner {
+      border-color: var(--ty-color-primary);
+    }
+  }
+
+  &__native {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    cursor: pointer;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__inner {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    border: 1px solid var(--ty-checkbox-border);
+    background-color: var(--ty-checkbox-bg);
+    transition: 200ms;
+    line-height: 1;
+    vertical-align: middle;
+
+    &:before {
+      content: '';
+      position: absolute;
+      display: block;
+      border: 1px solid var(--ty-checkbox-check-color);
+      margin-top: -1px;
+      left: 3px;
+      right: 3px;
+      top: 50%;
+      transition: all 200ms;
+      transform: scale(0);
+    }
+
+    &:after {
+      transform: rotate(45deg) scaleY(1);
+      pointer-events: none;
+      box-sizing: content-box;
+      border: 2px solid var(--ty-checkbox-check-color);
+      border-left: 0;
+      border-top: 0;
+      height: 7px;
+      left: 4px;
+      position: absolute;
+      top: 1px;
+      width: 4px;
+      transform-origin: center;
+    }
+
+    & + span {
+      padding: 0 5px 0 8px;
+      line-height: 16px;
+    }
+  }
+
+  &_checked {
+    .#{$prefix}-checkbox {
+      &__inner {
+        background-color: var(--ty-color-primary);
+        border-color: var(--ty-color-primary);
+
+        &:after {
+          content: '';
+          transform: rotate(45deg) scale(1);
+        }
+
+        &:before {
+          transform: scale(0);
+        }
+      }
+    }
+  }
+
+  &_indeterminate {
+    .#{$prefix}-checkbox {
+      &__inner {
+        background-color: var(--ty-color-primary);
+        border-color: var(--ty-color-primary);
+
+        &:before {
+          transform: scale(1);
+        }
+
+        &:after {
+          transform: rotate(45deg) scale(0);
+        }
+      }
+    }
+  }
+
+  &_disabled {
+    .#{$prefix}-checkbox {
+      &__native {
+        cursor: not-allowed;
+      }
+
+      &__inner {
+        background-color: var(--ty-checkbox-disabled-bg);
+        border-color: var(--ty-checkbox-border) !important;
+
+        &:after {
+          border-color: var(--ty-color-text-quaternary);
+        }
+
+        & + span {
+          color: var(--ty-color-text-quaternary);
+        }
+      }
+    }
+  }
+
+  &-group {
+    display: inline-block;
+  }
+}

package/es/checkbox/style/css.js

@@ -0,0 +1,2 @@
+import './index.css';
+//# sourceMappingURL=index.js.map

package/es/collapse/style/_index.scss

@@ -0,0 +1,101 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-collapse {
+  box-sizing: border-box;
+  border-radius: $collapse-border-radius;
+  color: var(--ty-color-text);
+  font-size: 14px;
+  border: 1px solid var(--ty-collapse-border);
+  border-bottom: 0;
+  background-color: var(--ty-collapse-bg);
+  overflow: hidden;
+
+  &-item {
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--ty-collapse-border);
+
+    &:last-child {
+      border-radius: 0 0 $collapse-border-radius $collapse-border-radius;
+
+      .#{$prefix}-collapse-item__content {
+        border-radius: 0 0 $collapse-border-radius $collapse-border-radius;
+      }
+    }
+
+    &__header {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      position: relative;
+      padding: 12px 16px;
+      color: var(--ty-color-text);
+      line-height: 22px;
+      cursor: pointer;
+      transition: all 300ms;
+      background: none;
+      border: none;
+      width: 100%;
+      text-align: left;
+      font-size: inherit;
+      font-family: inherit;
+
+      &:hover {
+        background-color: var(--ty-collapse-header-hover-bg);
+      }
+
+      &_disabled {
+        color: var(--ty-color-text-quaternary);
+        cursor: not-allowed;
+      }
+    }
+
+    &__arrow {
+      margin-right: 10px;
+      transform: rotate(-90deg);
+      text-align: center;
+      color: currentColor;
+      transition: all 300ms;
+
+      &_active {
+        transform: rotate(0deg);
+      }
+    }
+
+    &__title {
+      flex: 1;
+    }
+
+    &__extra {
+      color: inherit;
+      font-size: 11px;
+      margin-left: 15px;
+    }
+
+    &__content {
+      overflow: hidden;
+      color: var(--ty-color-text-secondary);
+      background-color: var(--ty-collapse-content-bg);
+      border-top: 1px solid var(--ty-collapse-border);
+      padding: 16px;
+      box-sizing: border-box;
+      transition: height 300ms;
+    }
+  }
+
+  &_borderless {
+    border: 0;
+    background-color: var(--ty-collapse-borderless-bg);
+  }
+
+  &_borderless > .#{$prefix}-collapse-item {
+    &:last-child {
+      border-radius: 0;
+    }
+  }
+
+  &_borderless > .#{$prefix}-collapse-item > .#{$prefix}-collapse-item__content {
+    border-radius: 0;
+    border-top: 0;
+    padding-top: 4px;
+  }
+}

package/es/collapse/style/css.js

@@ -0,0 +1,2 @@
+import './index.css';
+//# sourceMappingURL=index.js.map

package/es/collapse-transition/style/_index.scss

@@ -0,0 +1,4 @@
+.ty-collapse-transition {
+  overflow: hidden;
+  transition: 250ms height, 250ms padding-top, 250ms padding-bottom;
+}

package/es/collapse-transition/style/css.js

@@ -0,0 +1,2 @@
+import '../style/index.css';
+//# sourceMappingURL=index.js.map

package/es/color-picker/style/_index.scss

@@ -0,0 +1,196 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-color-picker {
+  display: inline-block;
+  position: relative;
+
+  &_disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    .#{$prefix}-color-picker__trigger,
+    .#{$prefix}-color-picker__swatch {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  &__trigger {
+    cursor: pointer;
+    display: inline-flex;
+  }
+
+  &__swatch {
+    width: 32px;
+    height: 32px;
+    border-radius: $border-radius;
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    padding: 3px;
+    cursor: pointer;
+  }
+
+  &__swatch-inner {
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+  }
+
+  &__panel {
+    padding: 12px;
+    background: var(--ty-color-picker-bg, #fff);
+    border-radius: 8px;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    width: 240px;
+  }
+
+  &__spectrum {
+    position: relative;
+    width: 100%;
+    height: 150px;
+    border-radius: 4px;
+    cursor: crosshair;
+    overflow: hidden;
+  }
+
+  &__spectrum-white {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to right, #fff, transparent);
+  }
+
+  &__spectrum-black {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, transparent, #000);
+  }
+
+  &__spectrum-handle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 12px;
+  }
+
+  &__preview {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    flex-shrink: 0;
+  }
+
+  &__sliders {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__hue {
+    position: relative;
+    height: 12px;
+    border-radius: 6px;
+    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+    cursor: pointer;
+  }
+
+  &__alpha {
+    position: relative;
+    height: 12px;
+    border-radius: 6px;
+    cursor: pointer;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 6px;
+      background: repeating-conic-gradient(#{$gray-300} 0% 25%, transparent 0% 50%) 0 0 / 8px 8px;
+      z-index: -1;
+    }
+  }
+
+  &__slider-handle {
+    position: absolute;
+    top: 50%;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    background: transparent;
+  }
+
+  &__input-row {
+    display: flex;
+    gap: 6px;
+    margin-top: 12px;
+    align-items: center;
+  }
+
+  &__format-btn {
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    background: transparent;
+    border-radius: $border-radius;
+    padding: 2px 6px;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--ty-color-text, #{$gray-700});
+    white-space: nowrap;
+
+    &:hover {
+      border-color: var(--ty-color-primary, #{$primary-color});
+    }
+  }
+
+  &__hex-input {
+    flex: 1;
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    border-radius: $border-radius;
+    padding: 2px 6px;
+    font-size: 12px;
+    font-family: $font-family-monospace;
+    color: var(--ty-color-text, #{$gray-800});
+    outline: none;
+    min-width: 0;
+
+    &:focus {
+      border-color: var(--ty-color-primary, #{$primary-color});
+    }
+  }
+
+  &__presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 12px;
+    padding-top: 12px;
+    border-top: 1px solid var(--ty-color-picker-border, #{$gray-200});
+  }
+
+  &__preset {
+    width: 20px;
+    height: 20px;
+    border-radius: $border-radius;
+    cursor: pointer;
+    border: 1px solid var(--ty-color-picker-border, #{$gray-300});
+    transition: transform 0.15s;
+
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+}

package/es/color-picker/style/css.js

@@ -0,0 +1,2 @@
+import './index.css';
+//# sourceMappingURL=index.js.map

package/es/date-picker/style/_index.scss

@@ -0,0 +1,272 @@
+@use '../../style/variables' as *;
+
+$dp: #{$prefix}-date-picker;
+
+.#{$dp} {
+  display: inline-flex;
+  position: relative;
+  font-family: $font-family;
+  font-size: $font-size-base;
+
+  // ---- Input ----
+  &__input {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    padding: 4px 11px;
+    border: 1px solid var(--ty-input-border);
+    border-radius: 6px;
+    background: var(--ty-picker-input-bg);
+    cursor: pointer;
+    transition: border-color 0.3s, box-shadow 0.3s;
+
+    &:hover {
+      border-color: var(--ty-color-primary);
+    }
+  }
+
+  &_open &__input {
+    border-color: var(--ty-color-primary);
+    box-shadow: var(--ty-input-focus-shadow);
+  }
+
+  &__input-field {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: inherit;
+    font-family: inherit;
+    color: var(--ty-color-text);
+    cursor: pointer;
+    min-width: 120px;
+
+    &::placeholder {
+      color: var(--ty-color-text-quaternary);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__suffix {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    margin-left: 4px;
+    color: var(--ty-color-text-quaternary);
+  }
+
+  &__icon {
+    display: inline-flex;
+    font-size: 14px;
+  }
+
+  &__clear {
+    display: none;
+    position: absolute;
+    inset: 0;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: var(--ty-color-text-quaternary);
+    background: var(--ty-picker-clear-bg);
+    cursor: pointer;
+    border: none;
+    padding: 0;
+
+    &:hover {
+      color: var(--ty-color-text-tertiary);
+    }
+  }
+
+  &_has-value:hover &__clear {
+    display: inline-flex;
+  }
+
+  // ---- Sizes ----
+  &_sm &__input {
+    padding: 0 7px;
+    font-size: 12px;
+  }
+
+  &_sm &__input-field {
+    min-width: 90px;
+  }
+
+  &_lg &__input {
+    padding: 6px 11px;
+    font-size: 16px;
+  }
+
+  &_lg &__input-field {
+    min-width: 140px;
+  }
+
+  // ---- Disabled ----
+  &_disabled {
+    opacity: 0.65;
+
+    .#{$dp}__input {
+      background: var(--ty-color-bg-disabled);
+      cursor: not-allowed;
+      border-color: var(--ty-input-border);
+
+      &:hover {
+        border-color: var(--ty-input-border);
+      }
+    }
+  }
+
+  // ---- Dropdown ----
+  &__dropdown {
+    background: var(--ty-picker-dropdown-bg);
+    border-radius: 8px;
+    box-shadow: var(--ty-shadow-popup);
+    width: 288px;
+  }
+
+  // ---- Header ----
+  &__header {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--ty-color-border-light);
+  }
+
+  &__header-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: none;
+    background: transparent;
+    color: var(--ty-color-text-tertiary);
+    cursor: pointer;
+    font-size: 14px;
+    border-radius: 4px;
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--ty-color-primary);
+    }
+  }
+
+  &__header-caption {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  &__header-label {
+    font-weight: 500;
+    cursor: pointer;
+    padding: 0 4px;
+    border-radius: 4px;
+    transition: color 0.2s;
+
+    &:hover {
+      color: var(--ty-color-primary);
+    }
+  }
+
+  // ---- Body / Table ----
+  &__body {
+    padding: 8px 12px;
+  }
+
+  &__table {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    text-align: center;
+  }
+
+  &__cell-header {
+    font-weight: 400;
+    color: var(--ty-color-text-secondary);
+    padding: 4px 0;
+    font-size: 12px;
+  }
+
+  // ---- Cell ----
+  &__cell {
+    padding: 2px 0;
+    cursor: pointer;
+
+    &_disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__cell-inner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 6px;
+    transition: background 0.2s;
+    color: var(--ty-color-text-quaternary);
+    font-size: 13px;
+  }
+
+  &__cell_in-view &__cell-inner {
+    color: var(--ty-color-text);
+  }
+
+  &__cell:hover &__cell-inner {
+    background: var(--ty-picker-cell-hover-bg);
+  }
+
+  &__cell_today &__cell-inner {
+    border: 1px solid var(--ty-color-primary);
+    color: var(--ty-color-primary);
+  }
+
+  &__cell_selected &__cell-inner {
+    background: var(--ty-color-primary);
+    color: #fff;
+    font-weight: 500;
+  }
+
+  &__cell_selected:hover &__cell-inner {
+    background: var(--ty-picker-cell-selected-hover-bg);
+  }
+
+  &__cell_disabled &__cell-inner {
+    color: var(--ty-color-text-quaternary);
+    background: var(--ty-picker-cell-disabled-bg);
+  }
+
+  &__cell_disabled:hover &__cell-inner {
+    background: var(--ty-picker-cell-disabled-bg);
+  }
+
+  &__cell_dim &__cell-inner {
+    color: var(--ty-color-text-quaternary);
+  }
+
+  // ---- Footer ----
+  &__footer {
+    padding: 8px 12px;
+    border-top: 1px solid var(--ty-color-border-light);
+    text-align: center;
+  }
+
+  &__today-btn {
+    color: var(--ty-color-primary);
+    cursor: pointer;
+    font-size: 13px;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}