@itcase/ui 1.0.70 → 1.0.71

package/dist/components/Badge.js

@@ -42,12 +42,20 @@ function Badge(props) {
     textSize,
     value
   } = props;
-  const borderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
-    propsKey: 'border'
+    propsKey: 'borderColor'
+  });
+  const borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'borderColorHover'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
   });
   const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border_',
+    prefix: 'border_type',
     propsKey: 'borderType'
   });
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -67,7 +75,7 @@ function Badge(props) {
     propsKey: 'type'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'badge', borderClass, borderTypeClass, fillClass || badgeConfig.appearance[appearance] && `fill_${badgeConfig.appearance[appearance].fillClass}`?.replace(/([A-Z])/g, '-$1').toLowerCase(), positionClass, sizeClass, typeClass)
+    className: clsx__default.default(className, 'badge', borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, fillClass || badgeConfig.appearance[appearance] && `fill_${badgeConfig.appearance[appearance].fillClass}`?.replace(/([A-Z])/g, '-$1').toLowerCase(), positionClass, sizeClass, typeClass)
   }, children || /*#__PURE__*/React__default.default.createElement(index.Text, {
     textColor: textColor || badgeConfig.appearance[appearance] && badgeConfig.appearance[appearance].textColor?.replace(/([A-Z])/g, '-$1').toLowerCase(),
     size: textSize

package/dist/components/Grid.js

@@ -765,7 +765,8 @@ function GridItem(props) {
     id,
     children,
     className,
-    dataTour
+    dataTour,
+    onClick
   } = props;
   const orderClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'order_',
@@ -830,7 +831,8 @@ function GridItem(props) {
     className: clsx__default.default(className, 'grid__item', orderClass, fillClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass, gapClass, rowGapClass, columnGapClass),
     id: id,
     "data-tour": dataTour,
-    style: gridItemStyles
+    style: gridItemStyles,
+    onClick: onClick
   }, children);
 }
 GridItem.propTypes = {

package/dist/components/Switch.js

@@ -42,6 +42,7 @@ Switch.propTypes = {
   disabled: PropTypes__default.default.bool,
   id: PropTypes__default.default.string,
   set: PropTypes__default.default.string,
+  size: PropTypes__default.default.string,
   onChange: PropTypes__default.default.func
 };
 Switch.__docgenInfo = {
@@ -84,6 +85,13 @@ Switch.__docgenInfo = {
       },
       "required": false
     },
+    "size": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "onChange": {
       "description": "",
       "type": {

package/dist/constants/componentProps/borderColor.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const borderColorProps = [null, 'accent', 'primary', 'secondary', 'tertiary', 'surface', 'error', 'success'];
+const borderColorProps = [null, 'accentBorderPrimary', 'accentBorderSecondary', 'accentBorderTertiary', 'accentBorderQuaternary', 'accentBorderDisabled', 'primaryBorderPrimary', 'primaryBorderSecondary', 'primaryBorderTertiary', 'primaryBorderQuaternary', 'primaryBorderDisabled', 'secondaryBorderPrimary', 'secondaryBorderSecondary', 'secondaryBorderTertiary', 'secondaryBorderQuaternary', 'secondaryBorderDisabled', 'tertiaryBorderPrimary', 'tertiaryBorderSecondary', 'tertiaryBorderTertiary', 'tertiaryBorderQuaternary', 'tertiaryBorderDisabled', 'surfaceBorderPrimary', 'surfaceBorderSecondary', 'surfaceBorderTertiary', 'surfaceBorderQuaternary', 'surfaceBorderDisabled', 'errorBorderPrimary', 'errorBorderSecondary', 'errorBorderDisabled', 'successBorderPrimary', 'successBorderSecondary', 'successBorderDisabled'];
 
 exports.default = borderColorProps;

package/dist/constants/componentProps/borderColorHover.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const borderColorHoverProps = [null, 'accentBorderPrimary', 'accentBorderPrimaryHover', 'primaryBorderPrimary', 'secondaryBorderPrimary', 'tertiaryBorderPrimary', 'surfaceBorderPrimary', 'surfaceBorderSecondary', 'surfaceBorderTertiary', 'errorBorderPrimary', 'errorBorderPrimaryHover', 'successBorderPrimary'];
+
+exports.default = borderColorHoverProps;

package/dist/constants/componentProps/borderType.js

@@ -1,5 +1,5 @@
 'use strict';
 
-const borderTypeProps = [null, 'outine', 'solid'];
+const borderTypeProps = [null, 'outline', 'solid', 'none'];
 
 exports.default = borderTypeProps;

package/dist/constants/componentProps/borderWidth.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const borderWidthProps = [null, '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
+
+exports.default = borderWidthProps;

package/dist/constants/componentProps/height.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const heightProps = [null, 'fixed', 'hug', 'fill'];
+
+exports.default = heightProps;

package/dist/constants/componentProps/sizeInterface.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const sizeInterfaceProps = [null, 'compact', 'regular', 'any'];
+
+exports.default = sizeInterfaceProps;

package/dist/constants/componentProps/sizePX.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const sizePXProps = [null, '16', '24', '32', '40', '48', '56', '64', '72', '80', '96', '112', '144'];
+
+exports.default = sizePXProps;

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.js

@@ -1,17 +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 textSize = require('./constants/componentProps/textSize.js');
-var textWrap = require('./constants/componentProps/textWrap.js');
-var itemColor = require('./constants/componentProps/itemColor.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 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');
@@ -20,23 +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');
@@ -47,18 +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.textSizeProps = textSize.default;
-exports.textWrapProps = textWrap.default;
-exports.itemColorProps = itemColor.default;
+exports.borderWidthProps = borderWidth.default;
 exports.captionPositionProps = captionPosition.default;
 exports.directionProps = direction.default;
 exports.emojiSizeProps = emojiSize.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;
@@ -67,23 +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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.70",
+  "version": "1.0.71",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",

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

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