@itcase/ui 1.0.93 → 1.0.95

package/dist/components/Group.js

@@ -32,6 +32,8 @@ function Group(props) {
     children,
     className,
     horizontalScroll,
+    tag: Tag,
+    htmlFor,
     set,
     style,
     dataTour,
@@ -113,9 +115,10 @@ function Group(props) {
     styles: groupStyles,
     wrapper: groupWrapperStyles
   } = useStyles.useStyles(props);
-  return /*#__PURE__*/React__default.default.createElement("div", {
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(className, 'group', widthClass, heightClass, columnsClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, fillHoverClass, set && `group_set_${set}`, horizontalScroll && 'group_type_horizontal_scroll', stackingClass, wrapClass, growClass, shapeClass, borderColorClass, borderWidthClass, borderTypeClass, elevationClass, justifyContentClass),
     "data-tour": dataTour,
+    htmlFor: htmlFor,
     id: id,
     style: Object.assign({}, groupStyles, style),
     onClick: onClick
@@ -129,99 +132,61 @@ Group.propTypes = {
   children: PropTypes__default.default.any,
   className: PropTypes__default.default.string,
   direction: PropTypes__default.default.oneOf(direction.default),
-  directionDesktop: PropTypes__default.default.oneOf(direction.default),
-  directionMobile: PropTypes__default.default.oneOf(direction.default),
-  directionTablet: PropTypes__default.default.oneOf(direction.default),
   fill: PropTypes__default.default.oneOf(fill.default),
-  fillMobile: PropTypes__default.default.oneOf(fill.default),
-  fillTablet: PropTypes__default.default.oneOf(fill.default),
-  fillDesktop: PropTypes__default.default.oneOf(fill.default),
   contentAlign: PropTypes__default.default.oneOf([null, 'center']),
-  contentAlignDesktop: PropTypes__default.default.oneOf([null, 'center']),
-  contentAlignMobile: PropTypes__default.default.oneOf([null, 'center']),
-  contentAlignTablet: PropTypes__default.default.oneOf([null, 'center']),
+  tag: PropTypes__default.default.string,
   stacking: PropTypes__default.default.oneOf(stacking.default),
-  stackingDesktop: PropTypes__default.default.oneOf(stacking.default),
-  stackingMobile: PropTypes__default.default.oneOf(stacking.default),
-  stackingTablet: PropTypes__default.default.oneOf(stacking.default),
   wrap: PropTypes__default.default.oneOf(wrap.default),
-  wrapDesktop: PropTypes__default.default.oneOf(wrap.default),
-  wrapMobile: PropTypes__default.default.oneOf(wrap.default),
-  wrapTablet: PropTypes__default.default.oneOf(wrap.default),
   shape: PropTypes__default.default.oneOf(shape.default),
-  shapeDesktop: PropTypes__default.default.oneOf(shape.default),
-  shapeMobile: PropTypes__default.default.oneOf(shape.default),
-  shapeTablet: PropTypes__default.default.oneOf(shape.default),
   spaceBetweenItems: PropTypes__default.default.string,
-  spaceBetweenItemsDesktop: PropTypes__default.default.string,
-  spaceBetweenItemsMobile: PropTypes__default.default.string,
-  spaceBetweenItemsTablet: PropTypes__default.default.string,
   width: PropTypes__default.default.oneOf(width.default),
-  widthMobile: PropTypes__default.default.oneOf(width.default),
-  widthTablet: PropTypes__default.default.oneOf(width.default),
-  widthDesktop: PropTypes__default.default.oneOf(width.default),
   columns: PropTypes__default.default.number,
-  columnsDesktop: PropTypes__default.default.number,
-  columnsMobile: PropTypes__default.default.number,
-  columnsTablet: PropTypes__default.default.number,
   set: PropTypes__default.default.string,
   horizontalScroll: PropTypes__default.default.bool,
-  onClick: PropTypes__default.default.func
+  onClick: PropTypes__default.default.func,
+  htmlFor: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
+};
+Group.defaultProps = {
+  tag: 'div'
 };
 Group.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "Group",
   "props": {
-    "id": {
-      "description": "",
-      "type": {
-        "name": "string"
+    "tag": {
+      "defaultValue": {
+        "value": "'div'",
+        "computed": false
       },
-      "required": false
-    },
-    "children": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "className": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "direction": {
+    "id": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "directionProps"
+        "name": "string"
       },
       "required": false
     },
-    "directionDesktop": {
+    "children": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "directionProps"
+        "name": "any"
       },
       "required": false
     },
-    "directionMobile": {
+    "className": {
       "description": "",
       "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "directionProps"
+        "name": "string"
       },
       "required": false
     },
-    "directionTablet": {
+    "direction": {
       "description": "",
       "type": {
         "name": "enum",
@@ -239,33 +204,6 @@ Group.__docgenInfo = {
       },
       "required": false
     },
-    "fillMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "fillTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "fillDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
     "contentAlign": {
       "description": "",
       "type": {
@@ -280,48 +218,6 @@ Group.__docgenInfo = {
       },
       "required": false
     },
-    "contentAlignDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "value": [{
-          "value": "null",
-          "computed": false
-        }, {
-          "value": "'center'",
-          "computed": false
-        }]
-      },
-      "required": false
-    },
-    "contentAlignMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "value": [{
-          "value": "null",
-          "computed": false
-        }, {
-          "value": "'center'",
-          "computed": false
-        }]
-      },
-      "required": false
-    },
-    "contentAlignTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "value": [{
-          "value": "null",
-          "computed": false
-        }, {
-          "value": "'center'",
-          "computed": false
-        }]
-      },
-      "required": false
-    },
     "stacking": {
       "description": "",
       "type": {
@@ -331,33 +227,6 @@ Group.__docgenInfo = {
       },
       "required": false
     },
-    "stackingDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "stackingProps"
-      },
-      "required": false
-    },
-    "stackingMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "stackingProps"
-      },
-      "required": false
-    },
-    "stackingTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "stackingProps"
-      },
-      "required": false
-    },
     "wrap": {
       "description": "",
       "type": {
@@ -367,33 +236,6 @@ Group.__docgenInfo = {
       },
       "required": false
     },
-    "wrapDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "wrapProps"
-      },
-      "required": false
-    },
-    "wrapMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "wrapProps"
-      },
-      "required": false
-    },
-    "wrapTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "wrapProps"
-      },
-      "required": false
-    },
     "shape": {
       "description": "",
       "type": {
@@ -403,33 +245,6 @@ Group.__docgenInfo = {
       },
       "required": false
     },
-    "shapeDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
-    "shapeMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
-    "shapeTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
     "spaceBetweenItems": {
       "description": "",
       "type": {
@@ -437,27 +252,6 @@ Group.__docgenInfo = {
       },
       "required": false
     },
-    "spaceBetweenItemsDesktop": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "spaceBetweenItemsMobile": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "spaceBetweenItemsTablet": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "width": {
       "description": "",
       "type": {
@@ -467,33 +261,6 @@ Group.__docgenInfo = {
       },
       "required": false
     },
-    "widthMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "widthProps"
-      },
-      "required": false
-    },
-    "widthTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "widthProps"
-      },
-      "required": false
-    },
-    "widthDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "widthProps"
-      },
-      "required": false
-    },
     "columns": {
       "description": "",
       "type": {
@@ -501,27 +268,6 @@ Group.__docgenInfo = {
       },
       "required": false
     },
-    "columnsDesktop": {
-      "description": "",
-      "type": {
-        "name": "number"
-      },
-      "required": false
-    },
-    "columnsMobile": {
-      "description": "",
-      "type": {
-        "name": "number"
-      },
-      "required": false
-    },
-    "columnsTablet": {
-      "description": "",
-      "type": {
-        "name": "number"
-      },
-      "required": false
-    },
     "set": {
       "description": "",
       "type": {
@@ -542,6 +288,18 @@ Group.__docgenInfo = {
         "name": "func"
       },
       "required": false
+    },
+    "htmlFor": {
+      "description": "",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": false
     }
   }
 };

package/dist/components/Image.js

@@ -34,6 +34,7 @@ function Image(props) {
     className,
     imageWrapperClassName,
     imageClassName,
+    mode,
     overlay,
     src,
     title,
@@ -85,16 +86,21 @@ function Image(props) {
     prefix: 'border-color-image_',
     propsKey: 'borderColorImage'
   });
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   const {
-    // left
     styles,
-    // leftImageWrapper
     wrapper: wrapperStyles,
-    // leftImage
     image: imageStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'image', type && `image_type_${type}`, cursorClass, horizontalAlignClass, verticalAlignClass, shapeClass, resizeModeClass, widthClass, heightClass),
+    className: clsx__default.default(className, 'image', mode && `image_mode_${mode}`, type && `image_type_${type}`, cursorClass, horizontalAlignClass, verticalAlignClass, shapeClass, fillClass, fillHoverClass, resizeModeClass, widthClass, heightClass),
     onClick: onClick,
     style: styles
   }, before, /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Label.js

@@ -48,6 +48,7 @@ function Label(props) {
     labelTextWrap,
     labelTextColor,
     labelTextColorHover,
+    mode,
     set,
     before,
     after,
@@ -104,7 +105,7 @@ function Label(props) {
     styles: labelStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'label', fillClass || labelConfig.appearance[appearance] && `fill_${labelConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelConfig.appearance[appearance] && `fill_hover_${labelConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, textAlignClass, type && `label_type_${type}`, set && `label_set_${set}`, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'label', fillClass || labelConfig.appearance[appearance] && `fill_${labelConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelConfig.appearance[appearance] && `fill_hover_${labelConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, textAlignClass, type && `label_type_${type}`, set && `label_set_${set}`, mode && `label_mode_${mode}`, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     style: labelStyles,
     onClick: onClick

package/dist/components/Logo.js

@@ -35,9 +35,10 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Logo(props) {
   const {
     className,
-    size,
-    link,
     href,
+    link,
+    mode,
+    size,
     source,
     src
   } = props;
@@ -61,7 +62,7 @@ function Logo(props) {
     styles: logo
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'logo', alignDirectionClass, alignClass, widthClass, alignItemsClass, size && `logo_size_${size}`),
+    className: clsx__default.default(className, 'logo', alignDirectionClass, alignClass, widthClass, alignItemsClass, size && `logo_size_${size}`, mode && `logo_mode_${mode}`),
     style: logo
   }, link || href ? /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
     href: link || href

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/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/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;