@itcase/ui 1.0.66 → 1.0.71

package/dist/constants/componentProps/state.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const stateProps = [null, 'normal', 'focus', 'hover', 'active', 'disabled'];
+
+exports.default = stateProps;

package/dist/constants/componentProps/textSize.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const textSizeProps = [null, 'xs', 's', 'm', 'l', 'xl'];
+
+exports.default = textSizeProps;

package/dist/constants/componentProps/textWrap.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const textWrapProps = [null, 'wrap', 'nowrap'];
+
+exports.default = textWrapProps;

package/dist/constants.js

@@ -1,15 +1,16 @@
 'use strict';
 
-var align = require('./constants/componentProps/align.js');
 var alignDirection = require('./constants/componentProps/alignDirection.js');
+var align = require('./constants/componentProps/align.js');
+var borderColorHover = require('./constants/componentProps/borderColorHover.js');
 var borderColor = require('./constants/componentProps/borderColor.js');
 var borderType = require('./constants/componentProps/borderType.js');
+var borderWidth = require('./constants/componentProps/borderWidth.js');
 var captionPosition = require('./constants/componentProps/captionPosition.js');
 var direction = require('./constants/componentProps/direction.js');
 var emojiSize = require('./constants/componentProps/emojiSize.js');
-var position = require('./constants/componentProps/position.js');
-var fill = require('./constants/componentProps/fill.js');
 var fillGradient = require('./constants/componentProps/fillGradient.js');
+var fill = require('./constants/componentProps/fill.js');
 var fillType = require('./constants/componentProps/fillType.js');
 var flexAlign = require('./constants/componentProps/flexAlign.js');
 var flexJustifyContent = require('./constants/componentProps/flexJustifyContent.js');
@@ -18,22 +19,30 @@ var gridAlign = require('./constants/componentProps/gridAlign.js');
 var gridAlignSelf = require('./constants/componentProps/gridAlignSelf.js');
 var gridJustifyItems = require('./constants/componentProps/gridJustifyItems.js');
 var gridJustifySelf = require('./constants/componentProps/gridJustifySelf.js');
+var height = require('./constants/componentProps/height.js');
 var horizontalContentAlign = require('./constants/componentProps/horizontalContentAlign.js');
 var horizontalResizeMode = require('./constants/componentProps/horizontalResizeMode.js');
 var iconSize = require('./constants/componentProps/iconSize.js');
+var itemColor = require('./constants/componentProps/itemColor.js');
+var position = require('./constants/componentProps/position.js');
 var resizeMode = require('./constants/componentProps/resizeMode.js');
 var shape = require('./constants/componentProps/shape.js');
+var sizeInterface = require('./constants/componentProps/sizeInterface.js');
+var sizePX = require('./constants/componentProps/sizePX.js');
 var size = require('./constants/componentProps/size.js');
 var stacking = require('./constants/componentProps/stacking.js');
+var state = require('./constants/componentProps/state.js');
 var strokeColor = require('./constants/componentProps/strokeColor.js');
 var textAlign = require('./constants/componentProps/textAlign.js');
-var textColor = require('./constants/componentProps/textColor.js');
 var textColorActive = require('./constants/componentProps/textColorActive.js');
 var textColorHover = require('./constants/componentProps/textColorHover.js');
+var textColor = require('./constants/componentProps/textColor.js');
 var textGradient = require('./constants/componentProps/textGradient.js');
+var textSize = require('./constants/componentProps/textSize.js');
 var textStyle = require('./constants/componentProps/textStyle.js');
 var textTag = require('./constants/componentProps/textTag.js');
 var textWeight = require('./constants/componentProps/textWeight.js');
+var textWrap = require('./constants/componentProps/textWrap.js');
 var titleSize = require('./constants/componentProps/titleSize.js');
 var type = require('./constants/componentProps/type.js');
 var underline = require('./constants/componentProps/underline.js');
@@ -44,16 +53,17 @@ var wrap = require('./constants/componentProps/wrap.js');
 
 
 
-exports.alignProps = align.default;
 exports.alignDirectionProps = alignDirection.default;
+exports.alignProps = align.default;
+exports.borderColorHoverProps = borderColorHover.default;
 exports.borderColorProps = borderColor.default;
 exports.borderTypeProps = borderType.default;
+exports.borderWidthProps = borderWidth.default;
 exports.captionPositionProps = captionPosition.default;
 exports.directionProps = direction.default;
 exports.emojiSizeProps = emojiSize.default;
-exports.positionProps = position.default;
-exports.fillProps = fill.default;
 exports.fillGradientProps = fillGradient.default;
+exports.fillProps = fill.default;
 exports.fillTypeProps = fillType.default;
 exports.flexAlignProps = flexAlign.default;
 exports.flexJustifyContentProps = flexJustifyContent.default;
@@ -62,22 +72,30 @@ exports.gridAlignProps = gridAlign.default;
 exports.gridAlignSelfProps = gridAlignSelf.default;
 exports.gridJustifyItemsProps = gridJustifyItems.default;
 exports.gridJustifySelfProps = gridJustifySelf.default;
+exports.heightProps = height.default;
 exports.horizontalContentAlignProps = horizontalContentAlign.default;
 exports.horizontalResizeModeProps = horizontalResizeMode.default;
 exports.iconSizeProps = iconSize.default;
+exports.itemColorProps = itemColor.default;
+exports.positionProps = position.default;
 exports.resizeModeProps = resizeMode.default;
 exports.shapeProps = shape.default;
+exports.sizeInterfaceProps = sizeInterface.default;
+exports.sizePXProps = sizePX.default;
 exports.sizeProps = size.default;
 exports.stackingProps = stacking.default;
+exports.stateProps = state.default;
 exports.strokeColorProps = strokeColor.default;
 exports.textAlignProps = textAlign.default;
-exports.textColorProps = textColor.default;
 exports.textColorActiveProps = textColorActive.default;
 exports.textColorHoverProps = textColorHover.default;
+exports.textColorProps = textColor.default;
 exports.textGradientProps = textGradient.default;
+exports.textSizeProps = textSize.default;
 exports.textStyleProps = textStyle.default;
 exports.textTagProps = textTag.default;
 exports.textWeightProps = textWeight.default;
+exports.textWrapProps = textWrap.default;
 exports.titleSizeProps = titleSize.default;
 exports.typeProps = type.default;
 exports.underlineProps = underline.default;

package/dist/context/Notifications.js

@@ -100,6 +100,20 @@ function useNotifications() {
 function useNotificationsAPI() {
   return React.useContext(NotificationsAPIContext);
 }
+NotificationsProvider.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "NotificationsProvider",
+  "props": {
+    "children": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    }
+  }
+};
 
 exports.NotificationsProvider = NotificationsProvider;
 exports.useNotifications = useNotifications;

package/dist/css/components/Badge/Badge.css

@@ -27,8 +27,8 @@
 .badge {
   &&_type {
     &_primary {
-      background: var(--color-primary);
       color: var(--color-primary-text-primary);
+      background: var(--color-primary-primary);
     }
   }
 }

package/dist/css/components/Button/Button.css

@@ -48,7 +48,7 @@
 }
 .button {
   &_size {
-    @each $size in xs, s, m, l, xl, xxl {
+    @each $size in xxs, xs, s, m, l, xl, xxl {
       &_$(size) {
         ^^&__wrapper {
           padding: var(--button-size-$(size)-padding);

package/dist/css/components/DatePicker/DatePicker.css

@@ -854,7 +854,12 @@
                 cursor: default !important;
               }
             }
-            &--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {
+            &--in-selecting-range:not(
+            .react-datepicker__day--in-range,
+            .react-datepicker__month-text--in-range,
+            .react-datepicker__quarter-text--in-range,
+            .react-datepicker__year-text--in-range
+          ) {
               background: var(--date-picker-day-selected-background);
               & .button__label {
                 color: var(--date-picker-day-selected-text-color);

package/dist/css/components/RadioButton/RadioButton.css

@@ -5,40 +5,40 @@
   column-gap: 4px;
   &:hover {
     ^&__state {
-      border-color: var(--radio-button-state-hover-border);
+      border-color: var(--radio-button-state-border-hover);
     }
   }
   &__item {
-    position: relative;
-    cursor: pointer;
+    min-width: 16px;
+    min-height: 16px;
     font-size: 0;
     line-height: 0;
+    margin: 2px 0 0 0;
+    position: relative;
     display: flex;
-    min-height: 16px;
-    min-width: 16px;
-    grid-row-start: span 2;
     align-self: start;
-    margin: 2px 0 0 0;
+    cursor: pointer;
+    grid-row-start: span 2;
     ^&__input {
-      cursor: pointer;
-      appearance: none;
-      border: 0;
-      margin: 0;
+      width: 100%;
+      height: 100%;
       font-size: 0;
       line-height: 0;
+      margin: 0;
+      border: 0;
       position: absolute;
       left: 0;
       top: 0;
-      width: 100%;
-      height: 100%;
       z-index: 3;
+      cursor: pointer;
+      appearance: none;
       &:disabled + .radio-button__state {
         border-color: transparent !important;
       }
     }
     ^&__state {
-      flex: 1;
       display: flex;
+      flex: 1;
       z-index: 1;
       &_shape {
         &_rounded {
@@ -54,15 +54,15 @@
       }
     }
     ^&__state-checkmark {
-      height: calc(100% - 6px);
       width: calc(100% - 6px);
+      height: calc(100% - 6px);
+      border-radius: 50%;
       position: absolute;
-      z-index: 2;
+      display: none;
       left: 50%;
       top: 50%;
+      z-index: 2;
       transform: translate(-50%, -50%);
-      display: none;
-      border-radius: 50%;
     }
   }
 }
@@ -111,5 +111,5 @@
   }
 }
 :root {
-  --radio-button-state-hover-border: var(--color-surface-border-tertiary);
+  --radio-button-state-border-hover: var(--color-surface-border-tertiary);
 }

package/dist/css/components/Segmented/Segmented.css

@@ -25,8 +25,8 @@
           width 0.3s ease;
       }
       ^^&__item {
-        border-radius: 6px;
         min-width: 120px;
+        border-radius: 6px;
         position: relative;
         display: flex;
         align-items: center;
@@ -52,22 +52,20 @@
         & input {
           width: 100%;
           height: 100%;
+          margin: 0;
+          border: 0;
           position: absolute;
-          left: 0;
-          top: 0;
-          right: 0;
-          bottom: 0;
+          inset: 0 0 0 0;
           z-index: 2;
           opacity: 0%;
           cursor: pointer;
-          border: 0;
-          margin: 0;
         }
         &-label {
           width: 100%;
           text-align: center;
           position: relative;
-          display: block;
+          display: flex;
+          justify-content: center;
           z-index: 3;
           transition: color 0.5s ease;
           cursor: pointer;

package/dist/css/styles/border-color/border-color.css

@@ -11,32 +11,5 @@
         }
       }
     }
-    &_hover {
-      &_$(type) {
-        &-border {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover  {
-            &-$(color) {
-              &:hover {
-                border-color: var(--color-$(type)-border-$(color));
-              }
-            }
-          }
-        }
-      }
-    }
-    &_focus {
-      &_$(type) {
-        &-border {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover  {
-            &-$(color) {
-              &:focus {
-                outline: 0;
-                border-color: var(--color-$(type)-border-$(color)) !important;
-              }
-            }
-          }
-        }
-      }
-    }
   }
 }

package/dist/css/styles/border-color-focus/border-color-focus.css

@@ -0,0 +1,18 @@
+.border-color {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error {
+    &_focus {
+      &_$(type) {
+        &-border {
+          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, active, disabled, hover  {
+            &-$(color) {
+              &:focus {
+                outline: 0;
+                border-color: var(--color-$(type)-border-$(color)) !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/border-color-hover/border-color-hover.css

@@ -0,0 +1,21 @@
+.border-color_hover {
+  @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning{
+    &_$(type) {
+      &-border {
+        @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
+          &-$(color) {
+            &:hover {
+              border: solid 2px red;
+              border-color: var(--color-$(type)-border-$(color));
+            }
+            &-hover {
+              &:hover {
+                border-color: var(--color-$(type)-border-$(color));
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/css/styles/border-width/border-width.css

@@ -1,8 +1,8 @@
 .border-width {
   @each $width in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 {
     &_$(width) {
+      border-width: $(width)px;
       border-style: solid;
-      border-width: $(width)px ;
     }
   }
 }

package/dist/css/styles/constraints/constraints.css

@@ -1,59 +1,72 @@
 .constraints {
-  &_top-left,
-  &_left-top {
+  &_top {
+    top: 0;
+  }
+  &_top-left {
     left: 0;
     top: 0;
   }
-  &_bottom-left,
-  &_left-bottom {
+  &_top-right {
+    top: 0;
+    right: 0;
+  }
+  &_top-fill {
     left: 0;
-    bottom: 0;
+    top: 0;
+    right: 0;
   }
-  &_bottom-right,
-  &_right-bottom {
+  &_top-center {
+    position: absolute;
+    left: 50%;
+    top: 0%;
     right: 0;
+    transform: translate(-50%, 0);
+  }
+  &_bottom {
+    bottom: 0;
+  }
+  &_bottom-left {
+    left: 0;
     bottom: 0;
   }
-  &_top-right,
-  &_right-top {
+  &_bottom-right {
     right: 0;
-    top: 0;
+    bottom: 0;
   }
-  &_left-right-top {
+  &_bottom-left-right {
     left: 0;
-    right: 0;
     top: 0;
+    right: 0;
   }
-
-  &_left-right-bottom {
-    left: 0;
+  &_bottom_center {
+    position: absolute;
+    left: 50%;
     right: 0;
     bottom: 0;
+    transform: translate(-50%, 0);
   }
-  &_left-right-top-bottom {
+  &_bottom-fill {
     left: 0;
     right: 0;
     bottom: 0;
-    top: 0;
+  }
+  &_left {
+    left: 0;
+  }
+  &_right {
+    right: 0;
   }
   &_center {
     position: absolute;
-    top: 50%;
     left: 50%;
+    top: 50%;
     transform: translate(-50%, -50%);
   }
-  &_center-top {
-    position: absolute;
-    top: 0%;
-    left: 50%;
-    right: 0;
-    transform: translate(-50%, 0);
+  &_fill {
+    inset: 0 0 0 0;
   }
-  &_center-bottom {
-    position: absolute;
+  &_fill_vertical {
+    top: 0;
     bottom: 0;
-    left: 50%;
-    right: 0;
-    transform: translate(-50%, 0);
   }
 }

package/dist/css/styles/width/width.css

@@ -5,5 +5,7 @@
   &_fill {
     width: 100%;
   }
+  &_auto {
+    width: auto;
+  }
 }
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.66",
+  "version": "1.0.71",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -79,6 +79,7 @@
     "@semantic-release/release-notes-generator": "^12.0.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-inline-react-svg": "^2.0.2",
+    "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "eslint": "8.50.0",
     "eslint-config-prettier": "^9.0.0",

package/dist/css/styles/border/border.css

@@ -1,13 +0,0 @@
-.border {
-  &_type {
-    &_outline {
-      border-style: solid;
-    }
-    &_solid {
-      border-style: solid;
-    }
-    &_none {
-      border: none;
-    }
-  }
-}