@itcase/ui 1.0.92 → 1.0.94

package/dist/components/Text.js

@@ -30,13 +30,14 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Text(props) {
   const {
     after,
-    dataTour,
     before,
     children,
     className,
     cursor,
-    tag: Tag,
+    dataTour,
     htmlFor,
+    mode,
+    tag: Tag,
     type,
     onClick
   } = props;
@@ -88,7 +89,7 @@ function Text(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'text', sizeClass, weightClass, textColorClass, textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && `text_type_${type}`, widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'text', sizeClass, weightClass, textColorClass, textColorActiveClass, textColorHoverClass, textGradientClass, textStyleClass, textTruncateClass, textWrapClass, type && `text_type_${type}`, mode && `text_mode_${mode}`, widthClass, cursorClass, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     htmlFor: htmlFor,
     style: textStyles,

package/dist/components/Tile.js

@@ -39,6 +39,7 @@ require('../constants/componentProps/type.js');
 require('../constants/componentProps/underline.js');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');
+require('./Tooltip.js');
 require('../constants/componentProps/textAlign.js');
 require('../constants/componentProps/titleSize.js');
 require('../constants/componentProps/wrap.js');

package/dist/components/Title.js

@@ -42,6 +42,7 @@ function Title(props) {
     onClick
   } = props;
   const {
+    mode,
     size,
     sizeMobile,
     sizeTablet,
@@ -113,7 +114,7 @@ function Title(props) {
     return size;
   }, [isMobile, isTablet, isDesktop]);
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    className: clsx__default.default(className, 'title', fillColorClass, size && `title_size_${size}`, textColorClass, textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && `word-wrap_${textWrap}`),
+    className: clsx__default.default(className, 'title', fillColorClass, size && `title_size_${size}`, mode && `title_mode_${mode}`, textColorClass, textColorActiveClass, textColorHoverClass, typeClass, textGradientClass, textStyleClass, weightClass, textWrap && `word-wrap_${textWrap}`),
     "data-tour": dataTour,
     onClick: onClick,
     style: titleStyles

package/dist/components/Tooltip.js

@@ -35,10 +35,17 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+const tooltipConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    tooltipConfig.appearance = newComponent;
+  }
+};
 function Tooltip(props) {
   const {
     before,
     after,
+    appearance,
     className,
     text,
     title,
@@ -70,23 +77,35 @@ function Tooltip(props) {
     prefix: 'tooltip_size_',
     propsKey: 'size'
   });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border_type_',
+    propsKey: 'borderType'
+  });
   const {
     styles: tooltipStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'tooltip', fillClass, shapeClass, alignDirectionClass, alignClass, sizeClass, arrowPosition && `tooltip_type_arrow tooltip_arrow_position_${arrowPosition}`, type && `tooltip_type_${type}`, set && `tooltip_set_${set}`),
+    className: clsx__default.default(className, 'tooltip', fillClass || tooltipConfig.appearance[appearance] && `fill_${tooltipConfig.appearance[appearance].fillClass}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, alignDirectionClass, alignClass, borderWidthClass, borderColorClass, borderTypeClass, sizeClass, arrowPosition && `tooltip_type_arrow tooltip_arrow_position_${arrowPosition}`, type && `tooltip_type_${type}`, set && `tooltip_set_${set}`),
     style: tooltipStyles
-  }, /*#__PURE__*/React__default.default.createElement("div", {
+  }, before, /*#__PURE__*/React__default.default.createElement("div", {
     className: "tooltip__inner"
-  }, before, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
+  }, title && /*#__PURE__*/React__default.default.createElement(index.Title, {
     className: "tooltip__title",
-    textColor: titleTextColor,
-    size: titleSize
+    size: titleSize,
+    textColor: titleTextColor || tooltipConfig.appearance[appearance]?.titleTextColor
   }, title), text && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
     className: "tooltip__text",
-    textColor: textColor,
-    size: textSize
-  }, text), after));
+    size: textSize,
+    textColor: textColor || tooltipConfig.appearance[appearance]?.textColor
+  }, text)), after);
 }
 Tooltip.propTypes = {
   children: PropTypes__default.default.any,
@@ -99,16 +118,16 @@ Tooltip.propTypes = {
   shapeDesktop: PropTypes__default.default.oneOf(shape.default),
   shapeMobile: PropTypes__default.default.oneOf(shape.default),
   shapeTablet: PropTypes__default.default.oneOf(shape.default),
+  size: PropTypes__default.default.oneOf(size.default),
+  sizeDesktop: PropTypes__default.default.oneOf(size.default),
+  sizeMobile: PropTypes__default.default.oneOf(size.default),
+  sizeTablet: PropTypes__default.default.oneOf(size.default),
   text: PropTypes__default.default.any,
+  textColor: PropTypes__default.default.oneOf(size.default),
   textSize: PropTypes__default.default.oneOf(size.default),
   textSizeDesktop: PropTypes__default.default.oneOf(size.default),
   textSizeMobile: PropTypes__default.default.oneOf(size.default),
   textSizeTablet: PropTypes__default.default.oneOf(size.default),
-  textColor: PropTypes__default.default.oneOf(size.default),
-  size: PropTypes__default.default.oneOf(size.default),
-  sizeDesktop: PropTypes__default.default.oneOf(size.default),
-  sizeMobile: PropTypes__default.default.oneOf(size.default),
-  sizeTablet: PropTypes__default.default.oneOf(size.default),
   type: PropTypes__default.default.string
 };
 Tooltip.defaultProps = {
@@ -212,14 +231,16 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "text": {
+    "size": {
       "description": "",
       "type": {
-        "name": "any"
+        "name": "enum",
+        "computed": true,
+        "value": "sizeProps"
       },
       "required": false
     },
-    "textSize": {
+    "sizeDesktop": {
       "description": "",
       "type": {
         "name": "enum",
@@ -228,7 +249,7 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "textSizeDesktop": {
+    "sizeMobile": {
       "description": "",
       "type": {
         "name": "enum",
@@ -237,7 +258,7 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "textSizeMobile": {
+    "sizeTablet": {
       "description": "",
       "type": {
         "name": "enum",
@@ -246,12 +267,10 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "textSizeTablet": {
+    "text": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "sizeProps"
+        "name": "any"
       },
       "required": false
     },
@@ -264,7 +283,7 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "size": {
+    "textSize": {
       "description": "",
       "type": {
         "name": "enum",
@@ -273,7 +292,7 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "sizeDesktop": {
+    "textSizeDesktop": {
       "description": "",
       "type": {
         "name": "enum",
@@ -282,7 +301,7 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "sizeMobile": {
+    "textSizeMobile": {
       "description": "",
       "type": {
         "name": "enum",
@@ -291,7 +310,7 @@ Tooltip.__docgenInfo = {
       },
       "required": false
     },
-    "sizeTablet": {
+    "textSizeTablet": {
       "description": "",
       "type": {
         "name": "enum",
@@ -311,3 +330,4 @@ Tooltip.__docgenInfo = {
 };
 
 exports.Tooltip = Tooltip;
+exports.tooltipConfig = tooltipConfig;

package/dist/constants/componentProps/alignment.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const alignmentProps = [null, 'topLeft', 'topCenter', 'topRight', 'leftCenter', 'rightCenter', 'bottomRight', 'bottomCenter', 'bottomLeft'];
+
+exports.default = alignmentProps;

package/dist/constants.js

@@ -2,6 +2,7 @@
 
 var alignDirection = require('./constants/componentProps/alignDirection.js');
 var align = require('./constants/componentProps/align.js');
+var alignment = require('./constants/componentProps/alignment.js');
 var borderColorHover = require('./constants/componentProps/borderColorHover.js');
 var borderColor = require('./constants/componentProps/borderColor.js');
 var borderType = require('./constants/componentProps/borderType.js');
@@ -9,8 +10,8 @@ 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 fillHover = require('./constants/componentProps/fillHover.js');
 var fillGradient = require('./constants/componentProps/fillGradient.js');
+var fillHover = require('./constants/componentProps/fillHover.js');
 var fill = require('./constants/componentProps/fill.js');
 var fillType = require('./constants/componentProps/fillType.js');
 var flexAlign = require('./constants/componentProps/flexAlign.js');
@@ -23,8 +24,8 @@ 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 iconFillSize = require('./constants/componentProps/iconFillSize.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');
@@ -57,6 +58,7 @@ var wrap = require('./constants/componentProps/wrap.js');
 
 exports.alignDirectionProps = alignDirection.default;
 exports.alignProps = align.default;
+exports.alignmentProps = alignment.default;
 exports.borderColorHoverProps = borderColorHover.default;
 exports.borderColorProps = borderColor.default;
 exports.borderTypeProps = borderType.default;
@@ -64,8 +66,8 @@ exports.borderWidthProps = borderWidth.default;
 exports.captionPositionProps = captionPosition.default;
 exports.directionProps = direction.default;
 exports.emojiSizeProps = emojiSize.default;
-exports.fillHoverProps = fillHover.default;
 exports.fillGradientProps = fillGradient.default;
+exports.fillHoverProps = fillHover.default;
 exports.fillProps = fill.default;
 exports.fillTypeProps = fillType.default;
 exports.flexAlignProps = flexAlign.default;
@@ -78,8 +80,8 @@ exports.gridJustifySelfProps = gridJustifySelf.default;
 exports.heightProps = height.default;
 exports.horizontalContentAlignProps = horizontalContentAlign.default;
 exports.horizontalResizeModeProps = horizontalResizeMode.default;
-exports.iconSizeProps = iconSize.default;
 exports.iconFillSizeProps = iconFillSize.default;
+exports.iconSizeProps = iconSize.default;
 exports.itemColorProps = itemColor.default;
 exports.positionProps = position.default;
 exports.resizeModeProps = resizeMode.default;

package/dist/css/components/Accordion/Accordion.css

@@ -1,4 +1,5 @@
 .accordion {
+  border-radius: var(--accordion-border-radius, 12px);
   &__wrapper {
     width: 100%;
     max-width: var(--max);
@@ -48,7 +49,7 @@
   min-width: 170px;
   display: flex;
   flex-flow: row wrap;
-  gap: 8px;
+  gap: 14px;
   &__title {
     flex: 1;
   }

package/dist/css/components/Avatar/Avatar.css

@@ -16,24 +16,32 @@
   }
 }
 .avatar {
-  &_size {
-    @each $size in 14, 16, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144, 240 {
-      &_$(size) {
-        ^^&__wrapper {
-          width: $(size)px;
-          height: $(size)px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          ^^^&__image {
-            width: $(size)px;
-            height: $(size)px;
-          }
+  &&_mode {
+    &_skeleton {
+      ^^&__wrapper {
+        background-image: linear-gradient(
+          90deg,
+          var(--color-surface-secondary),
+          var(--color-surface-tertiary),
+          var(--color-surface-secondary)
+        );
+        background-size: 200%;
+        animation: avatar-skeleton 3s infinite linear;
+        ^^^&__name {
+          color: transparent;
         }
       }
     }
   }
 }
+@keyframes avatar-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 .avatar {
   &_shape {
     &_circular {
@@ -56,3 +64,22 @@
     }
   }
 }
+.avatar {
+  &_size {
+    @each $size in 14, 16, 24, 32, 40, 48, 56, 60, 64, 72, 80, 96, 112, 144, 240 {
+      &_$(size) {
+        ^^&__wrapper {
+          width: $(size)px;
+          height: $(size)px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          ^^^&__image {
+            width: $(size)px;
+            height: $(size)px;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -3,6 +3,41 @@
   justify-content: center;
   align-items: center;
 }
+.badge {
+  &&_mode {
+    &_skeleton {
+      background-image: linear-gradient(
+        90deg,
+        var(--color-surface-secondary),
+        var(--color-surface-tertiary),
+        var(--color-surface-secondary)
+      );
+      background-size: 200%;
+      animation: badge-skeleton 3s infinite linear;
+      ^^^^&.text {
+        color: transparent;
+      }
+    }
+  }
+}
+@keyframes badge-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
+.badge {
+  &_shape {
+    &_rounded {
+      border-radius: var(--badge-shape-rounded, 6px);
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
 .badge {
   &_size {
     @each $size in xxs, xs, s, m, l, xl, xxl {
@@ -29,16 +64,6 @@
     }
   }
 }
-.badge {
-  &_shape {
-    &_rounded {
-      border-radius: var(--badge-shape-rounded, 6px);
-    }
-    &_circular {
-      border-radius: 50%;
-    }
-  }
-}
 :root {
   --badge-width-size-xxs: 16px;
   --badge-height-size-xxs: 16px;

package/dist/css/components/Cell/Cell.css

@@ -38,6 +38,15 @@
     }
   }
 }
+.cell {
+  &__wrapper {
+    &_shape {
+      &_rounded {
+        border-radius: var(--cell-border-radius, 6px);
+      }
+    }
+  }
+}
 .cell {
   &&_state {
     &_active {
@@ -79,9 +88,41 @@
     }
   }
 }
+.cell {
+  &&_mode {
+    &_skeleton {
+      ^^&__data {
+        ^^^&__title,
+        ^^^&__value {
+          color: transparent;
+          background-image: linear-gradient(
+            90deg,
+            var(--color-surface-secondary),
+            var(--color-surface-tertiary),
+            var(--color-surface-secondary)
+          );
+          background-size: 200%;
+          border-radius: 6px;
+          animation: cell-skeleton 3s infinite linear;
+        }
+      }
+    }
+  }
+}
+@keyframes cell-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 :root {
   --cell-size-s-padding: 6px;
+
   --cell-size-m-padding: 6px;
+
   --cell-size-l-padding: 6px;
+
   --cell-size-xl-padding: 12px;
 }

package/dist/css/components/Checkbox/Checkbox.css

@@ -4,32 +4,32 @@
   grid-template-rows: auto auto;
   column-gap: 4px;
   &__item {
-    position: relative;
-    cursor: pointer;
+    min-width: 16px;
+    min-height: 16px;
     font-size: 0;
     line-height: 0;
+    position: relative;
     display: flex;
-    min-height: 16px;
-    min-width: 16px;
-    grid-row-start: span 2;
     align-self: start;
+    cursor: pointer;
+    grid-row-start: span 3;
     ^&__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;
     }
     ^&__state {
-      flex: 1;
       display: flex;
+      flex: 1;
       z-index: 1;
       &_shape {
         &_rounded {
@@ -41,19 +41,19 @@
       }
     }
     ^&__state-checkmark {
-      height: 8px;
       width: 5px;
-      border-bottom-style: solid;
-      border-bottom-width: 2px;
-      border-right-style: solid;
-      border-right-width: 2px;
+      height: 8px;
+      margin: -1px 0 0 0;
       position: absolute;
-      z-index: 2;
+      display: none;
       left: 50%;
       top: 50%;
-      margin: -1px 0 0 0;
+      z-index: 2;
       transform: translate(-50%, -50%) rotate(45deg);
-      display: none;
+      border-bottom-style: solid;
+      border-bottom-width: 2px;
+      border-right-style: solid;
+      border-right-width: 2px;
     }
   }
 }

package/dist/css/components/Group/Group.css

@@ -1,4 +1,5 @@
 .group {
+  display: block;
   transition: var(--group-transition);
 }
 

package/dist/css/components/Icon/Icon.css

@@ -1,5 +1,6 @@
 .icon {
   &__item {
+    position: relative;
     display: flex;
     & svg {
       transition: var(--icon-transition);
@@ -143,6 +144,13 @@
     }
   }
 }
+.icon {
+  &__tooltip {
+    min-width: 200px;
+    padding: 8px;
+    border-radius: 8px;
+  }
+}
 :root {
   --icon-transition: all 0.2s ease 0s;
   --icon-size-24-badge-position: 12px, 12px;

package/dist/css/components/Image/Image.css

@@ -17,6 +17,31 @@
     }
   }
 }
+.image {
+  &&_mode {
+    &_skeleton {
+      background-image: linear-gradient(
+        90deg,
+        var(--color-surface-secondary),
+        var(--color-surface-tertiary),
+        var(--color-surface-secondary)
+      );
+      background-size: 200%;
+      animation: image-skeleton 3s infinite linear;
+      ^^&__item {
+        opacity: 0;
+      }
+    }
+  }
+}
+@keyframes image-skeleton {
+  0% {
+    background-position: 200%;
+  }
+  100% {
+    background-position: -200%;
+  }
+}
 .image {
   &_resize-mode {
     &_cover {
@@ -42,12 +67,13 @@
 .image {
   &_shape {
     &_rounded {
+      border-radius: var(--image-shape-rounded, 12px);
       > ^^&__wrapper {
         width: 100%;
         height: 100%;
+        border-radius: var(--image-shape-rounded, 12px);
         position: relative;
         overflow: hidden;
-        border-radius: var(--image-shape-rounded, 12px);
         & > ^^^&__item {
           width: 100%;
           height: 100%;
@@ -56,6 +82,7 @@
       }
     }
     &_circular {
+      border-radius: 50%;
       > ^^&__wrapper {
         width: 100%;
         height: 100%;