@itcase/ui 1.0.93 → 1.0.95

package/dist/components/Avatar.js

@@ -57,6 +57,7 @@ function Avatar(props) {
     before,
     src,
     type,
+    mode,
     onClick,
     textSize,
     textColor,
@@ -90,7 +91,7 @@ function Avatar(props) {
     return `${firstChar}${secondChar}`;
   }, [firstName, secondName]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'avatar', shapeClass, size && `avatar_size_${size}`, type && `avatar_type_${type}`, onClick && 'cursor_type_pointer'),
+    className: clsx__default.default(className, 'avatar', shapeClass, mode && `avatar_mode_${mode}`, size && `avatar_size_${size}`, type && `avatar_type_${type}`, onClick && 'cursor_type_pointer'),
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('avatar__wrapper', fillClass, fillHoverClass)

package/dist/components/Badge.js

@@ -40,6 +40,7 @@ function Badge(props) {
     appearance,
     className,
     children,
+    mode,
     textColor,
     textSize,
     value
@@ -80,7 +81,7 @@ function Badge(props) {
     styles: badgeStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'badge', !value && 'badge_type_status', borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, fillClass || badgeConfig.appearance[appearance] && `fill_${badgeConfig.appearance[appearance].fill}`?.replace(/([A-Z])/g, '-$1').toLowerCase(), positionClass, sizeClass, shapeClass),
+    className: clsx__default.default(className, 'badge', !value && 'badge_type_status', mode && `badge_mode_${mode}`, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, fillClass || badgeConfig.appearance[appearance] && `fill_${badgeConfig.appearance[appearance].fill}`?.replace(/([A-Z])/g, '-$1').toLowerCase(), positionClass, sizeClass, shapeClass),
     style: badgeStyles
   }, children || value && /*#__PURE__*/React__default.default.createElement(index.Text, {
     size: textSize,

package/dist/components/Button.js

@@ -137,7 +137,7 @@ const Button = /*#__PURE__*/React__default.default.forwardRef(function Button(pr
     label: labelStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(index.LinkWrapper, {
-    className: clsx__default.default(className, 'button', type && `button_type_${type}`, borderWidthClass, borderColorClass, borderTypeClass, fillClass || buttonConfig.appearance[appearance] && `fill_${buttonConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || buttonConfig.appearance[appearance] && `fill_hover_${buttonConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, sizeClass, widthClass, elevationClass, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', loading && 'button_state_loading', !label && (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc || icon || iconSrc) && 'button_type_icon', label && (after || before || icon || iconAfter || iconAfterSrc || iconBefore || iconBeforeSrc || iconSrc) && `button_type_with-icon button_type_with-icon_${size}`),
+    className: clsx__default.default(className, 'button', type && `button_type_${type}`, borderWidthClass || buttonConfig.appearance[appearance] && `border-width_${buttonConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || buttonConfig.appearance[appearance] && `border-color_${buttonConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderTypeClass || buttonConfig.appearance[appearance] && `border-type_${buttonConfig.appearance[appearance].borderType}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillClass || buttonConfig.appearance[appearance] && `fill_${buttonConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || buttonConfig.appearance[appearance] && `fill_hover_${buttonConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, sizeClass, widthClass, elevationClass, onClick && 'cursor_type_pointer', isDisabled && 'cursor_type_default', Badge && 'button_type_badge', loading && 'button_state_loading', !label && (iconBefore || iconBeforeSrc || iconAfter || iconAfterSrc || icon || iconSrc) && 'button_type_icon', label && (after || before || icon || iconAfter || iconAfterSrc || iconBefore || iconBeforeSrc || iconSrc) && `button_type_with-icon button_type_with-icon_${size}`),
     "data-tour": dataTour,
     DefaultComponent: "button",
     disabled: isDisabled,
@@ -153,8 +153,8 @@ const Button = /*#__PURE__*/React__default.default.forwardRef(function Button(pr
     ref: ref
   }, loading && /*#__PURE__*/React__default.default.createElement(index$1.Loader, {
     className: "button__loader",
-    fill: loaderFill,
-    itemFill: loaderItemFill,
+    fill: loaderFill || buttonConfig.appearance[appearance]?.loaderFill,
+    itemFill: loaderItemFill || buttonConfig.appearance[appearance]?.loaderItemFill,
     set: loaderSet
   }), before, (iconBefore || iconBeforeSrc) && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon_before",
@@ -170,14 +170,14 @@ const Button = /*#__PURE__*/React__default.default.forwardRef(function Button(pr
     imageSrc: iconSrc,
     size: iconSize,
     SvgImage: icon
-  }), (children || label) && /*#__PURE__*/React__default.default.createElement(index$3.Text, {
+  }), (children || label || buttonConfig.appearance[appearance]?.label) && /*#__PURE__*/React__default.default.createElement(index$3.Text, {
     className: "button__label",
-    size: labelTextSize,
+    size: labelTextSize || buttonConfig.appearance[appearance]?.labelTextSize,
     style: labelStyles,
     textColor: labelTextColor || buttonConfig.appearance[appearance]?.labelTextColor,
     textColorHover: labelTextColorHover || buttonConfig.appearance[appearance]?.labelTextColorHover,
     textWrap: labelTextWrap
-  }, children || label), (iconAfter || iconAfterSrc) && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
+  }, children || label || buttonConfig.appearance[appearance]?.label), (iconAfter || iconAfterSrc) && /*#__PURE__*/React__default.default.createElement(index$2.Icon, {
     className: "button__icon_after",
     iconFill: iconAfterFill || buttonConfig.appearance[appearance]?.iconAfterFill,
     iconStroke: iconAfterStroke || buttonConfig.appearance[appearance]?.iconAfterStroke,
@@ -230,7 +230,7 @@ Button.defaultProps = {
   // If the button is not associated with any form, it will look for
   // the nearest form in the DOM and submit its data when clicked.
   htmlType: 'button',
-  size: 'm',
+  size: 'xl',
   width: 'hug',
   loaderSet: 'simple',
   loading: false
@@ -253,7 +253,7 @@ Button.__docgenInfo = {
     },
     "size": {
       "defaultValue": {
-        "value": "'m'",
+        "value": "'xl'",
         "computed": false
       },
       "description": "",

package/dist/components/Cell.js

@@ -71,6 +71,7 @@ function Cell(props) {
     valueTag,
     after,
     before,
+    mode,
     size,
     value,
     valueTextSize,
@@ -149,7 +150,7 @@ function Cell(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'cell', size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'),
+    className: clsx__default.default(className, 'cell', mode && `cell_mode_${mode}`, size && `cell_size_${size}`, set && `cell_set_${set}`, bgFillClass, bgFillHoverClass, isActive && bgFillActiveClass, isDisabled && bgFillDisabledClass, bgShapeClass, widthClass, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap', reverse && 'cell_reverse'),
     onClick: onClick,
     onMouseEnter: onMouseEnter
   }, before && /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Checkbox.js

@@ -40,6 +40,7 @@ function Checkbox(props) {
     after,
     state,
     id,
+    tag: Tag,
     className,
     checked,
     disabled,
@@ -53,7 +54,8 @@ function Checkbox(props) {
     labelTextColor,
     onBlur,
     onChange,
-    onFocus
+    onFocus,
+    value
   } = props;
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
@@ -91,9 +93,13 @@ function Checkbox(props) {
     prefix: 'border-color_',
     propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
   });
-  return /*#__PURE__*/React__default.default.createElement("label", {
-    htmlFor: id,
-    className: clsx__default.default(className, 'checkbox', fillClass, shapeClass)
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
+    className: clsx__default.default(className, 'checkbox', fillClass, shapeClass, widthClass),
+    htmlFor: Tag === 'label' && id
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('checkbox__item', stateCheckmarkFillClass)
   }, /*#__PURE__*/React__default.default.createElement("input", {
@@ -102,6 +108,7 @@ function Checkbox(props) {
     disabled: disabled,
     id: id,
     type: "checkbox",
+    value: value,
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus
@@ -117,18 +124,35 @@ function Checkbox(props) {
   }, label), desc && /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "checkbox__desc",
     size: descTextSize,
-    textWeight: descTextWidth,
-    textColor: descTextColor
-  }, desc), after);
+    textColor: descTextColor,
+    textWeight: descTextWidth
+  }, desc), after && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "checkbox__after"
+  }, after));
 }
 Checkbox.propTypes = {
-  className: PropTypes__default.default.string
+  className: PropTypes__default.default.string,
+  tag: PropTypes__default.default.string
+};
+Checkbox.defaultProps = {
+  tag: 'label'
 };
 Checkbox.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "Checkbox",
   "props": {
+    "tag": {
+      "defaultValue": {
+        "value": "'label'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "className": {
       "description": "",
       "type": {

package/dist/components/Flex.js

@@ -600,7 +600,9 @@ Flex.__docgenInfo = {
 function FlexItem(props) {
   const {
     children,
-    className
+    className,
+    tag: Tag,
+    htmlFor
   } = props;
   const alignSelfClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'flex__item_align-self_',
@@ -630,6 +632,10 @@ function FlexItem(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'resize-horizontal_',
     propsKey: 'width'
@@ -645,8 +651,9 @@ function FlexItem(props) {
   const {
     styles: flexItemStyles
   } = useStyles.useStyles(props);
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'flex__item', positionClass, alignItemsClass, alignSelfClass, directionClass, fillClass, growClass, justifyContentClass, shapeClass, widthClass, wrapClass),
+  return /*#__PURE__*/React__default.default.createElement(Tag, {
+    className: clsx__default.default(className, 'flex__item', positionClass, alignItemsClass, alignSelfClass, directionClass, fillClass, fillHoverClass, growClass, justifyContentClass, shapeClass, widthClass, wrapClass),
+    htmlFor: htmlFor,
     style: flexItemStyles
   }, children);
 }
@@ -706,11 +713,21 @@ FlexItem.propTypes = {
   wrapMobile: PropTypes__default.default.oneOf(flexWrap.default),
   wrapTablet: PropTypes__default.default.oneOf(flexWrap.default)
 };
+FlexItem.defaultProps = {
+  tag: 'div'
+};
 FlexItem.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "FlexItem",
   "props": {
+    "tag": {
+      "defaultValue": {
+        "value": "'div'",
+        "computed": false
+      },
+      "required": false
+    },
     "alignItems": {
       "description": "",
       "type": {

package/dist/components/Grid.js

@@ -808,6 +808,10 @@ function GridItem(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
   const gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'gap_',
     propsKey: 'gap'
@@ -828,7 +832,7 @@ function GridItem(props) {
     styles: gridItemStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'grid__item', orderClass, fillClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass, gapClass, rowGapClass, columnGapClass),
+    className: clsx__default.default(className, 'grid__item', orderClass, fillClass, fillHoverClass, alignSelfClass, justifySelfClass, columnStartClass, columnEndClass, columnSpanClass, rowStartClass, rowEndClass, rowSpanClass, directionClass, gapClass, rowGapClass, columnGapClass),
     "data-tour": dataTour,
     id: id,
     style: gridItemStyles,