tiny-ui 0.0.94 → 0.0.95

package/components/style/_mixins.scss

@@ -6,7 +6,7 @@
   height: 1em;
   position: relative;
   border-width: 2px;
-  border-color: currentcolor currentcolor transparent transparent;
+  border-color: currentColor currentColor transparent transparent;
   border-style: solid;
   border-radius: 50%;
   animation: ty-rotate-reverse 600ms infinite linear;

package/components/style/_normalise.scss

@@ -1,4 +1,5 @@
 @import "./variables";
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 // Reboot
@@ -56,31 +57,37 @@ main {
 
 h1 {
   @extend %heading;
+
   font-size: $h1-font-size;
 }
 
 h2 {
   @extend %heading;
+
   font-size: $h2-font-size;
 }
 
 h3 {
   @extend %heading;
+
   font-size: $h3-font-size;
 }
 
 h4 {
   @extend %heading;
+
   font-size: $h4-font-size;
 }
 
 h5 {
   @extend %heading;
+
   font-size: $h5-font-size;
 }
 
 h6 {
   @extend %heading;
+
   font-size: $h6-font-size;
 }
 

package/components/style/_variables.scss

@@ -1,264 +1,264 @@
-$prefix: 'ty'                                 !default;
+$prefix: 'ty' !default;
 
 // Color
-$primary-color: #6E41BF                       !default;
-
-$white-color: #fff                            !default;
-$gray-100: #f6f9fc                            !default;
-$gray-200: #e9ecef                            !default;
-$gray-300: #dee2e6                            !default;
-$gray-400: #ced4da                            !default;
-$gray-500: #adb5bd                            !default;
-$gray-600: #8898aa                            !default;
-$gray-700: #525f7f                            !default;
-$gray-800: #32325d                            !default;
-$gray-900: #212529                            !default;
-$black-color: #000                            !default;
-
-$red-color:     #dc3545                       !default;
-$orange-color:  #fd7e14                       !default;
-$yellow-color:  #fadb14                       !default;
-$green-color:   #52c41a                       !default;
-$teal-color:    #20c997                       !default;
-$cyan-color:    #17a2b8                       !default;
-$blue-color:    #0d6efd                       !default;
-$indigo-color:  #6610f2                       !default;
-$purple-color:  #6f42c1                       !default;
-$magenta-color: #eb2f96                       !default;
+$primary-color: #6e41bf !default;
+
+$white-color: #fff !default;
+$gray-100: #f6f9fc !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #8898aa !default;
+$gray-700: #525f7f !default;
+$gray-800: #32325d !default;
+$gray-900: #212529 !default;
+$black-color: #000 !default;
+
+$red-color:     #dc3545 !default;
+$orange-color:  #fd7e14 !default;
+$yellow-color:  #fadb14 !default;
+$green-color:   #52c41a !default;
+$teal-color:    #20c997 !default;
+$cyan-color:    #17a2b8 !default;
+$blue-color:    #0d6efd !default;
+$indigo-color:  #6610f2 !default;
+$purple-color:  #6f42c1 !default;
+$magenta-color: #eb2f96 !default;
 
 // Info
-$info-color: #1890ff                          !default;
-$info-light-color: #91d5ff                    !default;
-$info-lighter-color: #e6f7ff                  !default;
+$info-color: #1890ff !default;
+$info-light-color: #91d5ff !default;
+$info-lighter-color: #e6f7ff !default;
 
 // Success
-$success-color: #52c41a                       !default;
-$success-light-color: #b7eb8f                 !default;
-$success-lighter-color: #f6ffed               !default;
+$success-color: #52c41a !default;
+$success-light-color: #b7eb8f !default;
+$success-lighter-color: #f6ffed !default;
 
 // Warn
-$warning-color: #ff9800                       !default;
-$warning-light-color: #ffe58f                 !default;
-$warning-lighter-color: #fffbe6               !default;
+$warning-color: #ff9800 !default;
+$warning-light-color: #ffe58f !default;
+$warning-lighter-color: #fffbe6 !default;
 
 // Error
-$danger-color: #f44336                        !default;
-$danger-light-color: #ffa39e                  !default;
-$danger-lighter-color: #fff1f0                !default;
+$danger-color: #f44336 !default;
+$danger-light-color: #ffa39e !default;
+$danger-lighter-color: #fff1f0 !default;
 
 // Body
-$body-bg-color: $white-color                  !default;
-$body-color: $gray-800                        !default;
+$body-bg-color: $white-color !default;
+$body-color: $gray-800 !default;
 
 // Font & Font family
-$font-color: $body-color                      !default;
-$font-path: 'fonts'                           !default;
-$font-size-base: 1rem                         !default;
-$font-size-lg: $font-size-base * 1.25         !default;
-$font-size-sm: $font-size-base * .875         !default;
-$font-weight: 400                             !default;
+$font-color: $body-color !default;
+$font-path: 'fonts' !default;
+$font-size-base: 1rem !default;
+$font-size-lg: $font-size-base * 1.25 !default;
+$font-size-sm: $font-size-base * 0.875 !default;
+$font-weight: 400 !default;
 
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-family-monospace: lucida console,Consolas,Monaco,andale mono,ubuntu mono,monospace !default;
-$font-family: $font-family-sans-serif         !default;
+$font-family-sans-serif: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-monospace: lucida console,consolas,monaco,andale mono,ubuntu mono,monospace !default;
+$font-family: $font-family-sans-serif !default;
 
-$height-sm: 24px                              !default;
-$height-md: 32px                              !default;
-$height-lg: 42px                              !default;
+$height-sm: 24px !default;
+$height-md: 32px !default;
+$height-lg: 42px !default;
 
-$line-height-base: 1.5                        !default;
-$line-height-lg: 2                            !default;
-$line-height-sm: 1.25                         !default;
+$line-height-base: 1.5 !default;
+$line-height-lg: 2 !default;
+$line-height-sm: 1.25 !default;
 
 // Responsive breakpoints
-$size-xs: 480px                               !default;
-$size-sm: 600px                               !default;
-$size-md: 840px                               !default;
-$size-lg: 960px                               !default;
-$size-xl: 1280px                              !default;
-$size-xxl: 1440px                             !default;
+$size-xs: 480px !default;
+$size-sm: 600px !default;
+$size-md: 840px !default;
+$size-lg: 960px !default;
+$size-xl: 1280px !default;
+$size-xxl: 1440px !default;
 
 // Layout
-$layout-body-background: #fff                 !default;
-$layout-header-background: #fff               !default;
-$layout-header-padding: 0 50px                !default;
-$layout-header-height: 60px                   !default;
-$layout-footer-background: #fff               !default;
-$layout-footer-padding: 24px 50px             !default;
-$layout-sidebar-background: #12131a           !default;
+$layout-body-background: #fff !default;
+$layout-header-background: #fff !default;
+$layout-header-padding: 0 50px !default;
+$layout-header-height: 60px !default;
+$layout-footer-background: #fff !default;
+$layout-footer-padding: 24px 50px !default;
+$layout-sidebar-background: #12131a !default;
 
 // Spacing
 $spacer: 1rem !default;
 
 // Typography
-$h1-font-size: $font-size-base * 2.5          !default;
-$h2-font-size: $font-size-base * 2            !default;
-$h3-font-size: $font-size-base * 1.75         !default;
-$h4-font-size: $font-size-base * 1.5          !default;
-$h5-font-size: $font-size-base * 1.25         !default;
-$h6-font-size: $font-size-base                !default;
-
-$headings-margin-bottom: $spacer / 2          !default;
-$headings-font-family: null                   !default;
-$headings-font-style: null                    !default;
-$headings-font-weight: 500                    !default;
-$headings-line-height: 1.2                    !default;
-$headings-color: null                         !default;
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+
+$headings-margin-bottom: calc($spacer / 2) !default;
+$headings-font-family: null !default;
+$headings-font-style: null !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: null !default;
 
 // Border & Border Radius
-$border-radius: 2px                           !default;
-$border-width: 1px                            !default;
-$border-color: $gray-300                      !default;
+$border-radius: 2px !default;
+$border-width: 1px !default;
+$border-color: $gray-300 !default;
 
 // Box shadow
-$box-shadow-sm: 0 .125rem .25rem rgba($black-color, .075)     !default;
-$box-shadow: 0 .5rem 1rem rgba($black-color, .15)             !default;
-$box-shadow-lg: 0 1rem 3rem rgba($black-color, .175)          !default;
-$box-shadow-inset: inset 0 1px 2px rgba($black-color, .075)   !default;
+$box-shadow-sm: 0 0.125rem 0.25rem rgba($black-color, 0.075) !default;
+$box-shadow: 0 0.5rem 1rem rgba($black-color, 0.15) !default;
+$box-shadow-lg: 0 1rem 3rem rgba($black-color, 0.175) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($black-color, 0.075) !default;
 
 // Code
-$code-font-size: .875em                       !default;
-$code-color: $gray-800                        !default;
-$pre-color: null                              !default;
+$code-font-size: 0.875em !default;
+$code-color: $gray-800 !default;
+$pre-color: null !default;
 
 // Link
-$link-color: $primary-color                   !default;
-$link-decoration: none                        !default;
-$link-hover-color: darken($link-color, 15%)   !default;
-$link-hover-decoration: underline             !default;
+$link-color: $primary-color !default;
+$link-decoration: none !default;
+$link-hover-color: darken($link-color, 15%) !default;
+$link-hover-decoration: underline !default;
 
 // Alert
-$alert-border-radius: 3px                     !default;
+$alert-border-radius: 3px !default;
 
 // Avatar
-$avatar-bg: #ccc                              !default;
-$avatar-color: #fff                           !default;
-$avatar-border-radius: 2px                    !default;
+$avatar-bg: #ccc !default;
+$avatar-color: #fff !default;
+$avatar-border-radius: 2px !default;
 
 // Collapse
-$collapse-border-radius: $border-radius       !default;
+$collapse-border-radius: $border-radius !default;
 
 // Badge
-$badge-font-size: 12px                        !default;
-$badge-size: 18px                             !default;
-$badge-dot-size: 6px                          !default;
+$badge-font-size: 12px !default;
+$badge-size: 18px !default;
+$badge-dot-size: 6px !default;
 
 // Button
-$btn-font-size-sm: $font-size-sm              !default;
-$btn-font-size-md: $font-size-base            !default;
-$btn-font-size-lg: $font-size-lg              !default;
-$btn-padding-sm: 0 10px                       !default;
-$btn-padding-md: 0 15px                       !default;
-$btn-padding-lg: 0 28px                       !default;
-$btn-height-sm: $height-sm                    !default;
-$btn-height-md: $height-md                    !default;
-$btn-height-lg: $height-lg                    !default;
-$btn-line-height: $line-height-base           !default;
-$btn-border-radius: $border-radius            !default;
-$btn-border-width: $border-width              !default;
-$btn-font-weight: 400                         !default;
-$btn-font-family: $font-family                !default;
-$btn-box-shadow: inset 0 1px 0 rgba($white-color, .15), 0 1px 1px rgba($black-color, .075) !default;
-$btn-loading-opacity: .35                     !default;
-$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+$btn-font-size-sm: $font-size-sm !default;
+$btn-font-size-md: $font-size-base !default;
+$btn-font-size-lg: $font-size-lg !default;
+$btn-padding-sm: 0 10px !default;
+$btn-padding-md: 0 15px !default;
+$btn-padding-lg: 0 28px !default;
+$btn-height-sm: $height-sm !default;
+$btn-height-md: $height-md !default;
+$btn-height-lg: $height-lg !default;
+$btn-line-height: $line-height-base !default;
+$btn-border-radius: $border-radius !default;
+$btn-border-width: $border-width !default;
+$btn-font-weight: 400 !default;
+$btn-font-family: $font-family !default;
+$btn-box-shadow: inset 0 1px 0 rgba($white-color, 0.15), 0 1px 1px rgba($black-color, 0.075) !default;
+$btn-loading-opacity: 0.35 !default;
+$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
 
 // Card
-$card-border-radius: $border-radius           !default;
-$card-header-padding: 13px 16px               !default;
-$card-body-padding: 16px                      !default;
-$card-footer-padding: 5px 16px 16px           !default;
+$card-border-radius: $border-radius !default;
+$card-header-padding: 13px 16px !default;
+$card-body-padding: 16px !default;
+$card-footer-padding: 5px 16px 16px !default;
 
 // Divider
-$divider-line-color: #e4e4e4                  !default;
+$divider-line-color: #e4e4e4 !default;
 
 // Input
-$input-font-color: $font-color                !default;
-$input-border-radius: $border-radius          !default;
-$input-sm-padding: 0 4px                      !default;
-$input-sm-height: $height-sm                  !default;
-$input-sm-font-size: $font-size-sm            !default;
-$input-md-padding: 0 6px                      !default;
-$input-md-font-size: $font-size-base          !default;
-$input-md-height: $height-md                  !default;
-$input-lg-padding: 0 8px                      !default;
-$input-lg-font-size: $font-size-lg            !default;
-$input-lg-height: $height-lg                  !default;
+$input-font-color: $font-color !default;
+$input-border-radius: $border-radius !default;
+$input-sm-padding: 0 4px !default;
+$input-sm-height: $height-sm !default;
+$input-sm-font-size: $font-size-sm !default;
+$input-md-padding: 0 6px !default;
+$input-md-font-size: $font-size-base !default;
+$input-md-height: $height-md !default;
+$input-lg-padding: 0 8px !default;
+$input-lg-font-size: $font-size-lg !default;
+$input-lg-height: $height-lg !default;
 
 // Textarea
-$textarea-font-size: $font-size-base          !default;
-$textarea-padding: 5px                        !default;
+$textarea-font-size: $font-size-base !default;
+$textarea-padding: 5px !default;
 
 // Native Select
-$native-select-sm-padding: 3px 25px 3px 7px   !default;
-$native-select-sm-font-size: $font-size-sm    !default;
-$native-select-md-padding: 6px 25px 6px 7px   !default;
-$native-select-md-font-size: $font-size-base  !default;
-$native-select-lg-padding: 9px 25px 9px 7px   !default;
-$native-select-lg-font-size: $font-size-lg    !default;
-$native-select-border-radius: $border-radius  !default;
+$native-select-sm-padding: 3px 25px 3px 7px !default;
+$native-select-sm-font-size: $font-size-sm !default;
+$native-select-md-padding: 6px 25px 6px 7px !default;
+$native-select-md-font-size: $font-size-base !default;
+$native-select-lg-padding: 9px 25px 9px 7px !default;
+$native-select-lg-font-size: $font-size-lg !default;
+$native-select-border-radius: $border-radius !default;
 
 // Switch
-$switch-md-font-size: 12px                    !default;
-$switch-sm-font-size: 9px                     !default;
-$switch-lg-font-size: 14px                    !default;
+$switch-md-font-size: 12px !default;
+$switch-sm-font-size: 9px !default;
+$switch-lg-font-size: 14px !default;
 
 // Select
-$select-selected-font-weight: 600             !default;
-$select-dropdown-max-height: 300px            !default;
+$select-selected-font-weight: 600 !default;
+$select-dropdown-max-height: 300px !default;
 $select-dropdown-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !default;
 
 // Notification
-$notification-width: 380px                    !default;
-$notification-margin: 20px                    !default;
+$notification-width: 380px !default;
+$notification-margin: 20px !default;
 
 // Breadcrumb
-$breadcrumb-font-size: $font-size-base        !default;
+$breadcrumb-font-size: $font-size-base !default;
 
 // Tag
-$tag-border-radius: $border-radius            !default;
+$tag-border-radius: $border-radius !default;
 
 // Popover
-$popover-arrow-size: 8px                      !default;
-$popover-border-radius: $border-radius        !default;
-$popover-box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05) !default;
+$popover-arrow-size: 8px !default;
+$popover-border-radius: $border-radius !default;
+$popover-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !default;
 
 // Tooltip
-$tooltip-arrow-size: 4px                      !default;
-$tooltip-font-size: $font-size-sm             !default;
-$tooltip-content-padding: 5px 8px             !default;
+$tooltip-arrow-size: 4px !default;
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-content-padding: 5px 8px !default;
 
 // Menu
-$menu-sub-border-radius: $border-radius       !default;
-$menu-item-padding-vertical: 15px 20px        !default;
+$menu-sub-border-radius: $border-radius !default;
+$menu-item-padding-vertical: 15px 20px !default;
 
 // Slider
-$slider-size: 12px                            !default;
-$slider-track-size: 4px                       !default;
-$slider-margin-bottom-with-marks: 30px        !default;
+$slider-size: 12px !default;
+$slider-track-size: 4px !default;
+$slider-margin-bottom-with-marks: 30px !default;
 
 // Steps
-$steps-title-font-size: 16px                  !default;
-$steps-title-active-color: $primary-color     !default;
-$steps-title-normal-color: rgba(0,0,0,.65)    !default;
-$steps-title-wait-color: rgba(0,0,0,.25)      !default;
-$steps-title-error-color: #ff4d4f             !default;
-$steps-desc-active-color: $primary-color      !default;
-$steps-desc-normal-color: rgba(0,0,0,.45)     !default;
-$steps-desc-wait-color: rgba(0,0,0,.25)       !default;
-$steps-desc-error-color: #ff4d4f              !default;
+$steps-title-font-size: 16px !default;
+$steps-title-active-color: $primary-color !default;
+$steps-title-normal-color: rgba(0, 0, 0, 0.65) !default;
+$steps-title-wait-color: rgba(0, 0, 0, 0.25) !default;
+$steps-title-error-color: #ff4d4f !default;
+$steps-desc-active-color: $primary-color !default;
+$steps-desc-normal-color: rgba(0, 0, 0, 0.45) !default;
+$steps-desc-wait-color: rgba(0, 0, 0, 0.25) !default;
+$steps-desc-error-color: #ff4d4f !default;
 
 // Description
-$description-border-color: #dfe2e5            !default;
-$description-border-radius: $border-radius    !default;
-$description-sm-padding-vt: 8px               !default;
-$description-md-padding-vt: 12px              !default;
-$description-lg-padding-vt: 16px              !default;
-$description-sm-padding-hr: 16px              !default;
-$description-md-padding-hr: 24px              !default;
-$description-lg-padding-hr: 24px              !default;
+$description-border-color: #dfe2e5 !default;
+$description-border-radius: $border-radius !default;
+$description-sm-padding-vt: 8px !default;
+$description-md-padding-vt: 12px !default;
+$description-lg-padding-vt: 16px !default;
+$description-sm-padding-hr: 16px !default;
+$description-md-padding-hr: 24px !default;
+$description-lg-padding-hr: 24px !default;
 
 // Tree
-$tree-font-size: $font-size-base              !default;
+$tree-font-size: $font-size-base !default;
 
 // StrengthIndicator
-$strength-indicator-border-radius: 99px       !default;
+$strength-indicator-border-radius: 99px !default;

package/components/switch/index.tsx

@@ -41,7 +41,7 @@ const Switch = React.forwardRef<HTMLLabelElement, SwitchProps>(
     };
 
     useEffect(() => {
-      'checked' in props && setChecked(props.checked as boolean);
+      'checked' in props && typeof props.checked !== 'undefined' && setChecked(props.checked);
     }, [props]);
 
     return (

package/components/switch/style/_mixin.scss

@@ -7,8 +7,8 @@
 
   &:before {
     content: '';
-    width: ($size - 22px)/2 + 10px;
-    height: ($size - 22px)/2 + 10px;
+    width: calc(($size - 22px) / 2) + 10px;
+    height: calc(($size - 22px) / 2) + 10px;
     @include loader();
     display: none;
   }

package/components/tooltip/style/_index.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 @import '../../style/variables';
 
 .#{$prefix}-tooltip {
@@ -16,25 +17,25 @@
 
   &[data-popper-placement^='top'] {
     & > .#{$prefix}-popup__arrow {
-      bottom: -$tooltip-arrow-size / 2;
+      bottom: math.div(-$tooltip-arrow-size, 2);
     }
   }
 
   &[data-popper-placement^='bottom'] {
     > .#{$prefix}-popup__arrow {
-      top: -$tooltip-arrow-size / 2;
+      top: math.div(-$tooltip-arrow-size, 2);
     }
   }
 
   &[data-popper-placement^='left'] {
     > .#{$prefix}-popup__arrow {
-      right: -$tooltip-arrow-size / 2;
+      right: math.div(-$tooltip-arrow-size, 2);
     }
   }
 
   &[data-popper-placement^='right'] {
     > .#{$prefix}-popup__arrow {
-      left: -$tooltip-arrow-size / 2;
+      left: math.div(-$tooltip-arrow-size, 2);
     }
   }
 }