@tiny-design/react 1.4.0 → 1.5.1

package/es/marquee/style/_index.scss

@@ -0,0 +1,77 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-marquee {
+  overflow: hidden;
+  width: 0;
+  min-width: 100%;
+
+  &_fade {
+    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
+    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
+  }
+
+  &__track {
+    display: flex;
+    gap: var(--ty-marquee-gap, 16px);
+    width: max-content;
+    animation: ty-marquee-left var(--ty-marquee-duration, 50s) linear infinite;
+
+    &_reverse {
+      animation-name: ty-marquee-right;
+    }
+
+    &_pause-on-hover:hover {
+      animation-play-state: paused;
+    }
+
+    &_once {
+      animation-iteration-count: 1;
+      animation-fill-mode: forwards;
+      animation-name: ty-marquee-once-left;
+
+      &.#{$prefix}-marquee__track_reverse {
+        animation-name: ty-marquee-once-right;
+      }
+    }
+  }
+}
+
+@keyframes ty-marquee-left {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes ty-marquee-right {
+  from {
+    transform: translateX(-50%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes ty-marquee-once-left {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes ty-marquee-once-right {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}

package/es/marquee/style/index.css

@@ -0,0 +1,64 @@
+.ty-marquee {
+  overflow: hidden;
+  width: 0;
+  min-width: 100%;
+}
+.ty-marquee_fade {
+  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
+          mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
+  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
+}
+.ty-marquee__track {
+  display: flex;
+  gap: var(--ty-marquee-gap, 16px);
+  width: -moz-max-content;
+  width: max-content;
+  animation: ty-marquee-left var(--ty-marquee-duration, 50s) linear infinite;
+}
+.ty-marquee__track_reverse {
+  animation-name: ty-marquee-right;
+}
+.ty-marquee__track_pause-on-hover:hover {
+  animation-play-state: paused;
+}
+.ty-marquee__track_once {
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  animation-name: ty-marquee-once-left;
+}
+.ty-marquee__track_once.ty-marquee__track_reverse {
+  animation-name: ty-marquee-once-right;
+}
+
+@keyframes ty-marquee-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+@keyframes ty-marquee-right {
+  from {
+    transform: translateX(-50%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes ty-marquee-once-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes ty-marquee-once-right {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}

package/es/marquee/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/marquee/style/index.js

@@ -0,0 +1 @@
+import "./_index.css";

package/es/marquee/types.d.ts

@@ -0,0 +1,21 @@
+import { BaseProps } from "../_utils/props.js";
+import React from "react";
+
+//#region src/marquee/types.d.ts
+interface MarqueeProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
+  /** Scroll direction */
+  direction?: 'left' | 'right';
+  /** Animation duration in seconds */
+  duration?: number;
+  /** Pause animation on hover */
+  pauseOnHover?: boolean;
+  /** Gap between items in pixels */
+  gap?: number;
+  /** Apply edge fade mask */
+  fade?: boolean;
+  /** Loop the animation infinitely (duplicates children for seamless loop) */
+  infinite?: boolean;
+}
+//#endregion
+export { MarqueeProps };
+//# sourceMappingURL=types.d.ts.map

package/es/native-select/style/index.css

@@ -9,7 +9,7 @@
   vertical-align: middle;
   box-sizing: border-box;
   border: 1px solid var(--ty-input-border);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   background-color: var(--ty-native-select-bg);
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij4gIDxwYXRoIGZpbGw9IiMzOTNFNDgiIGQ9Ik0wLjIyMiw1LjYxMyBMNS40NTEsMC4yMjMgQzUuNzU2MjEyMDksLTAuMDc0MzYzMjMzMyA2LjI0Mjc4NzkxLC0wLjA3NDM2MzIzMzMgNi41NDgsMC4yMjMgTDExLjc3OCw1LjYxMyBDMTIuMTgsNi4wMjcgMTIuMDI1LDYuNjY3IDExLjQwNyw2LjY2NyBMMC41OTIsNi42NjcgQy0wLjAyNCw2LjY2NyAtMC4xOCw2LjAyNyAwLjIyMiw1LjYxMyBaIE0wLjU5Miw5LjMzMyBMMTEuNDA3LDkuMzMzIEMxMi4wMjUsOS4zMzMgMTIuMTgsOS45NzMgMTEuNzc3LDEwLjM4NyBMNi41NDcsMTUuNzc3IEM2LjI0MTkxMjU4LDE2LjA3MzcxNDMgNS43NTYwODc0MiwxNi4wNzM3MTQzIDUuNDUxLDE1Ljc3NyBMMC4yMjIsMTAuMzg3IEMtMC4xOCw5Ljk3MyAtMC4wMjQsOS4zMzMgMC41OTIsOS4zMzMgWiIvPjwvc3ZnPg==");
   background-repeat: no-repeat, repeat;
@@ -43,13 +43,13 @@
 }
 .ty-select-native_sm {
   padding: 3px 25px 3px 7px;
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
 }
 .ty-select-native_md {
   padding: 6px 25px 6px 7px;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-select-native_lg {
   padding: 9px 25px 9px 7px;
-  font-size: 1.25rem;
+  font-size: var(--ty-font-size-lg);
 }

package/es/notification/style/_index.scss

@@ -5,7 +5,7 @@
   padding: 16px 24px;
   border-radius: 3px;
   color: var(--ty-color-text-secondary);
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
   box-shadow: var(--ty-shadow-modal);
   box-sizing: border-box;
   display: flex;

package/es/notification/style/index.css

@@ -3,7 +3,7 @@
   padding: 16px 24px;
   border-radius: 3px;
   color: var(--ty-color-text-secondary);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   box-shadow: var(--ty-shadow-modal);
   box-sizing: border-box;
   display: flex;

package/es/pop-confirm/style/_index.scss

@@ -9,7 +9,7 @@
 
   &__messages {
     padding: 0 0 12px;
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
     display: flex;
     align-items: center;
   }

package/es/pop-confirm/style/index.css

@@ -6,7 +6,7 @@
 }
 .ty-pop-confirm__messages {
   padding: 0 0 12px;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   display: flex;
   align-items: center;
 }

package/es/popup/style/_index.scss

@@ -5,19 +5,19 @@
   box-sizing: border-box;
   border-radius: $popover-border-radius;
   white-space: nowrap;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
   text-align: left;
   box-shadow: var(--ty-shadow-popup);
   z-index: 999;
 
-  &__arrow, &__arrow:before {
+  &__arrow, &__arrow::before {
     width: $popover-arrow-size;
     height: $popover-arrow-size;
     box-sizing: border-box;
     position: absolute;
   }
 
-  &__arrow:before {
+  &__arrow::before {
     content: '';
     transform: rotate(45deg);
   }
@@ -26,7 +26,7 @@
     background-color: var(--ty-popup-light-bg);
     color: var(--ty-color-text-secondary);
     .#{$prefix}-popup {
-      &__arrow:before {
+      &__arrow::before {
         background: var(--ty-popup-light-bg);
       }
     }
@@ -36,7 +36,7 @@
     background-color: var(--ty-popup-dark-bg);
     color: #fff;
     .#{$prefix}-popup {
-      &__arrow:before {
+      &__arrow::before {
         background: var(--ty-popup-dark-bg);
       }
     }
@@ -46,7 +46,7 @@
     & > .#{$prefix}-popup__arrow {
       bottom: math.div(-$popover-arrow-size, 2);
 
-      &:before {
+      &::before {
         box-shadow: 3px 3px 7px var(--ty-popup-arrow-shadow);
       }
     }
@@ -56,7 +56,7 @@
     > .#{$prefix}-popup__arrow {
       top: math.div(-$popover-arrow-size, 2);
 
-      &:before {
+      &::before {
         box-shadow: -2px -2px 5px var(--ty-popup-arrow-shadow);
       }
     }
@@ -66,7 +66,7 @@
     > .#{$prefix}-popup__arrow {
       right: math.div(-$popover-arrow-size, 2);
 
-      &:before {
+      &::before {
         box-shadow: 3px -3px 7px var(--ty-popup-arrow-shadow);
       }
     }
@@ -76,7 +76,7 @@
     > .#{$prefix}-popup__arrow {
       left: math.div(-$popover-arrow-size, 2);
 
-      &:before {
+      &::before {
         box-shadow: -3px 3px 7px var(--ty-popup-arrow-shadow);
       }
     }

package/es/popup/style/index.css

@@ -1,19 +1,19 @@
 .ty-popup {
   box-sizing: border-box;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   white-space: nowrap;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   text-align: left;
   box-shadow: var(--ty-shadow-popup);
   z-index: 999;
 }
-.ty-popup__arrow, .ty-popup__arrow:before {
+.ty-popup__arrow, .ty-popup__arrow::before {
   width: 8px;
   height: 8px;
   box-sizing: border-box;
   position: absolute;
 }
-.ty-popup__arrow:before {
+.ty-popup__arrow::before {
   content: "";
   transform: rotate(45deg);
 }
@@ -21,37 +21,37 @@
   background-color: var(--ty-popup-light-bg);
   color: var(--ty-color-text-secondary);
 }
-.ty-popup_light .ty-popup__arrow:before {
+.ty-popup_light .ty-popup__arrow::before {
   background: var(--ty-popup-light-bg);
 }
 .ty-popup_dark {
   background-color: var(--ty-popup-dark-bg);
   color: #fff;
 }
-.ty-popup_dark .ty-popup__arrow:before {
+.ty-popup_dark .ty-popup__arrow::before {
   background: var(--ty-popup-dark-bg);
 }
 .ty-popup[data-popper-placement^=top] > .ty-popup__arrow {
   bottom: -4px;
 }
-.ty-popup[data-popper-placement^=top] > .ty-popup__arrow:before {
+.ty-popup[data-popper-placement^=top] > .ty-popup__arrow::before {
   box-shadow: 3px 3px 7px var(--ty-popup-arrow-shadow);
 }
 .ty-popup[data-popper-placement^=bottom] > .ty-popup__arrow {
   top: -4px;
 }
-.ty-popup[data-popper-placement^=bottom] > .ty-popup__arrow:before {
+.ty-popup[data-popper-placement^=bottom] > .ty-popup__arrow::before {
   box-shadow: -2px -2px 5px var(--ty-popup-arrow-shadow);
 }
 .ty-popup[data-popper-placement^=left] > .ty-popup__arrow {
   right: -4px;
 }
-.ty-popup[data-popper-placement^=left] > .ty-popup__arrow:before {
+.ty-popup[data-popper-placement^=left] > .ty-popup__arrow::before {
   box-shadow: 3px -3px 7px var(--ty-popup-arrow-shadow);
 }
 .ty-popup[data-popper-placement^=right] > .ty-popup__arrow {
   left: -4px;
 }
-.ty-popup[data-popper-placement^=right] > .ty-popup__arrow:before {
+.ty-popup[data-popper-placement^=right] > .ty-popup__arrow::before {
   box-shadow: -3px 3px 7px var(--ty-popup-arrow-shadow);
 }

package/es/radio/style/_index.scss

@@ -4,16 +4,13 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
   margin-right: 8px;
   color: var(--ty-color-text);
 
   &__native {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
@@ -34,7 +31,7 @@
     align-items: center;
     justify-content: center;
 
-    &:after {
+    &::after {
       box-sizing: border-box;
       display: inline-block;
       content: '';
@@ -54,7 +51,7 @@
 
   &_checked {
     .#{$prefix}-radio {
-      &__inner:after {
+      &__inner::after {
         transform: scale(1);
       }
     }
@@ -69,7 +66,7 @@
       &__inner {
         border-color: var(--ty-radio-disabled-border);
 
-        &:after {
+        &::after {
           background-color: var(--ty-radio-disabled-dot);
         }
 

package/es/radio/style/index.css

@@ -2,16 +2,13 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   margin-right: 8px;
   color: var(--ty-color-text);
 }
 .ty-radio__native {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
@@ -31,7 +28,7 @@
   align-items: center;
   justify-content: center;
 }
-.ty-radio__inner:after {
+.ty-radio__inner::after {
   box-sizing: border-box;
   display: inline-block;
   content: "";
@@ -46,7 +43,7 @@
   padding: 0 5px;
   line-height: 16px;
 }
-.ty-radio_checked .ty-radio__inner:after {
+.ty-radio_checked .ty-radio__inner::after {
   transform: scale(1);
 }
 .ty-radio_disabled .ty-radio__native {
@@ -55,7 +52,7 @@
 .ty-radio_disabled .ty-radio__inner {
   border-color: var(--ty-radio-disabled-border);
 }
-.ty-radio_disabled .ty-radio__inner:after {
+.ty-radio_disabled .ty-radio__inner::after {
   background-color: var(--ty-radio-disabled-dot);
 }
 .ty-radio_disabled .ty-radio__inner + span {

package/es/segmented/style/_index.scss

@@ -5,7 +5,7 @@
   align-items: center;
   padding: 2px;
   background: var(--ty-segmented-bg, #{$gray-200});
-  border-radius: $border-radius;
+  border-radius: var(--ty-border-radius);
   box-sizing: border-box;
 
   &_block {
@@ -30,20 +30,20 @@
 
   &_sm .#{$prefix}-segmented__item {
     padding: 0 8px;
-    height: calc(#{$height-sm} - 4px);
-    font-size: $font-size-sm;
+    height: calc(var(--ty-height-sm) - 4px);
+    font-size: var(--ty-font-size-sm);
   }
 
   &_md .#{$prefix}-segmented__item {
     padding: 0 12px;
-    height: calc(#{$height-md} - 4px);
-    font-size: $font-size-base;
+    height: calc(var(--ty-height-md) - 4px);
+    font-size: var(--ty-font-size-base);
   }
 
   &_lg .#{$prefix}-segmented__item {
     padding: 0 16px;
-    height: calc(#{$height-lg} - 4px);
-    font-size: $font-size-lg;
+    height: calc(var(--ty-height-lg) - 4px);
+    font-size: var(--ty-font-size-lg);
   }
 
   &__item {
@@ -52,19 +52,19 @@
     align-items: center;
     gap: 4px;
     cursor: pointer;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     transition: all 0.2s;
     user-select: none;
     white-space: nowrap;
 
-    &:hover:not(&_active):not(&_disabled) {
+    &:hover:not(&_active, &_disabled) {
       color: var(--ty-color-text, #{$gray-900});
     }
 
     &_active {
       background: var(--ty-segmented-active-bg, #fff);
       color: var(--ty-color-text, #{$gray-900});
-      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 6%), 0 1px 3px 0 rgb(0 0 0 / 10%);
       font-weight: 500;
     }
 

package/es/segmented/style/index.css

@@ -3,7 +3,7 @@
   align-items: center;
   padding: 2px;
   background: var(--ty-segmented-bg, #e9ecef);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   box-sizing: border-box;
 }
 .ty-segmented_block {
@@ -24,18 +24,18 @@
 }
 .ty-segmented_sm .ty-segmented__item {
   padding: 0 8px;
-  height: calc(24px - 4px);
-  font-size: 0.875rem;
+  height: calc(var(--ty-height-sm) - 4px);
+  font-size: var(--ty-font-size-sm);
 }
 .ty-segmented_md .ty-segmented__item {
   padding: 0 12px;
-  height: calc(32px - 4px);
-  font-size: 1rem;
+  height: calc(var(--ty-height-md) - 4px);
+  font-size: var(--ty-font-size-base);
 }
 .ty-segmented_lg .ty-segmented__item {
   padding: 0 16px;
-  height: calc(42px - 4px);
-  font-size: 1.25rem;
+  height: calc(var(--ty-height-lg) - 4px);
+  font-size: var(--ty-font-size-lg);
 }
 .ty-segmented__item {
   position: relative;
@@ -43,14 +43,14 @@
   align-items: center;
   gap: 4px;
   cursor: pointer;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   transition: all 0.2s;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   white-space: nowrap;
 }
-.ty-segmented__item:hover:not(.ty-segmented__item_active):not(.ty-segmented__item_disabled) {
+.ty-segmented__item:hover:not(.ty-segmented__item_active, .ty-segmented__item_disabled) {
   color: var(--ty-color-text, #212529);
 }
 .ty-segmented__item_active {

package/es/select/style/_index.scss

@@ -4,7 +4,7 @@
   position: relative;
   display: inline-block;
   width: 100%;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
   cursor: pointer;
   outline: none;
 
@@ -20,20 +20,20 @@
 
   // Sizes
   &_sm .#{$prefix}-select__selector {
-    min-height: $height-sm;
-    font-size: $font-size-sm;
+    min-height: var(--ty-height-sm);
+    font-size: var(--ty-font-size-sm);
     padding: 0 24px 0 8px;
   }
 
   &_md .#{$prefix}-select__selector {
-    min-height: $height-md;
-    font-size: $font-size-base;
+    min-height: var(--ty-height-md);
+    font-size: var(--ty-font-size-base);
     padding: 0 28px 0 10px;
   }
 
   &_lg .#{$prefix}-select__selector {
-    min-height: $height-lg;
-    font-size: $font-size-lg;
+    min-height: var(--ty-height-lg);
+    font-size: var(--ty-font-size-lg);
     padding: 0 32px 0 12px;
   }
 
@@ -62,7 +62,7 @@
     align-items: center;
     width: 100%;
     border: $border-width solid var(--ty-input-border);
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     background-color: var(--ty-input-bg);
     box-sizing: border-box;
     transition: all 0.3s;
@@ -173,9 +173,9 @@
     max-width: 100%;
     height: 22px;
     padding: 0 4px 0 8px;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     background-color: var(--ty-color-fill-secondary);
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
     line-height: 20px;
     color: var(--ty-color-text);
     box-sizing: border-box;
@@ -212,12 +212,11 @@
     list-style-type: none;
     background-color: var(--ty-select-dropdown-bg);
     box-sizing: border-box;
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden auto;
     z-index: 10;
     box-shadow: var(--ty-shadow-popup);
-    border-radius: $border-radius;
-    font-size: $font-size-base;
+    border-radius: var(--ty-border-radius);
+    font-size: var(--ty-font-size-base);
     max-height: $select-dropdown-max-height;
   }
 
@@ -238,7 +237,7 @@
     padding: 16px;
     text-align: center;
     color: var(--ty-color-text-quaternary);
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
   }
 }
 
@@ -284,9 +283,8 @@
 }
 
 .#{$prefix}-select-group {
-
   &__title {
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
     cursor: default;
     color: $gray-600;
     padding: 7px 12px;
@@ -307,6 +305,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }