@itcase/ui 1.0.96 → 1.0.97

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 || 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}`),
+    className: clsx__default.default(className, 'button', type && `button_type_${type}`, borderWidthClass || buttonConfig.appearance[appearance] && `border-width_${buttonConfig.appearance[appearance].borderWidth}`.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,

package/dist/components/Checkbox.js

@@ -32,10 +32,15 @@ const checkboxConfig = {
   state: {},
   setState: newComponent => {
     checkboxConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    checkboxConfig.appearance = newComponent;
   }
 };
 function Checkbox(props) {
   const {
+    appearance,
     before,
     after,
     state,
@@ -101,7 +106,7 @@ function Checkbox(props) {
     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)
+    className: clsx__default.default('checkbox__item', stateCheckmarkFillClass || checkboxConfig.appearance[appearance]?.stateCheckmarkFill && `checkbox_checkmark_fill_${checkboxConfig.appearance[appearance].stateCheckmarkFill}`.replace(/([A-Z])/g, '-$1').toLowerCase())
   }, /*#__PURE__*/React__default.default.createElement("input", {
     checked: checked,
     className: "checkbox__input",
@@ -113,18 +118,18 @@ function Checkbox(props) {
     onChange: onChange,
     onFocus: onFocus
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateShapeClass, stateBorderWidthClass)
+    className: clsx__default.default('checkbox__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass || checkboxConfig.appearance[appearance]?.stateBorderColor && `border-color_${checkboxConfig.appearance[appearance].stateBorderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateShapeClass || checkboxConfig.appearance[appearance]?.stateShape && `checkbox__state_shape_${checkboxConfig.appearance[appearance].stateShape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), stateBorderWidthClass || checkboxConfig.appearance[appearance]?.stateBorderWidth && `border-width_${checkboxConfig.appearance[appearance].stateBorderWidth}`.replace(/([A-Z])/g, '-$1').toLowerCase())
   }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
     className: "checkbox__state-checkmark"
   }, "\xA0")), label && /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "checkbox__label",
-    size: labelTextSize,
-    textColor: labelTextColor,
+    size: labelTextSize || checkboxConfig.appearance[appearance]?.labelTextSize,
+    textColor: labelTextColor || checkboxConfig.appearance[appearance]?.labelTextColor,
     textWeight: labelTextWidth
   }, label), desc && /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "checkbox__desc",
-    size: descTextSize,
-    textColor: descTextColor,
+    size: descTextSize || checkboxConfig.appearance[appearance].descTextSize,
+    textColor: descTextColor || checkboxConfig.appearance[appearance].descTextColor,
     textWeight: descTextWidth
   }, desc), after && /*#__PURE__*/React__default.default.createElement("div", {
     className: "checkbox__after"

package/dist/components/Chips.js

@@ -81,18 +81,22 @@ function Chips(props) {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
+  const cursorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'cursor_',
+    propsKey: 'cursor'
+  });
   const {
     styles: chipsStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'chips', fillClass || chipsConfig.appearance[appearance] && `fill_${chipsConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || chipsConfig.appearance[appearance] && `fill_hover_${chipsConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && `chips_type_${type}`),
+    className: clsx__default.default(className, 'chips', fillClass || chipsConfig.appearance[appearance] && `fill_${chipsConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || chipsConfig.appearance[appearance] && `fill_hover_${chipsConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass || chipsConfig.appearance[appearance]?.border && `border-color_${chipsConfig.appearance[appearance].border}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderTypeClass, sizeClass, alignDirectionClass, alignClass, type && `chips_type_${type}`, cursorClass),
     style: chipsStyles,
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "chips__inner"
   }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "chips__label",
-    textColor: labelTextColor || chipsConfig.appearance[appearance] && chipsConfig.appearance[appearance].labelTextColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    textColor: labelTextColor || chipsConfig.appearance[appearance]?.labelTextColor && chipsConfig.appearance[appearance].labelTextColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
     textWeight: labelTextWeight,
     size: labelSize
   }, label) : /*#__PURE__*/React__default.default.createElement("div", {

package/dist/components/Choice.js

@@ -44,8 +44,15 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+const choiceConfig = {
+  appearance: {},
+  setAppearance: newComponent => {
+    choiceConfig.appearance = newComponent;
+  }
+};
 const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(props, ref) {
   const {
+    appearance,
     name,
     className,
     type,
@@ -115,12 +122,12 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
     propsKey: 'fillActiveDisabled'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'choice', shapeClass, !isDisabled ? fillClass : fillDisabledClass, borderColorClass, borderWidthClass, borderTypeClass, set && `choice_set_${set}`, size && `choice_size_${size}`, type && `choice_type_${type}`),
+    className: clsx__default.default(className, 'choice', shapeClass || choiceConfig.appearance[appearance]?.shape && `choice_shape_${choiceConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? fillClass || choiceConfig.appearance[appearance]?.fill && `fill_${choiceConfig.appearance[appearance].fill}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillDisabledClass, borderColorClass || choiceConfig.appearance[appearance]?.borderColor && `border-color_${choiceConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderWidthClass, borderTypeClass, set && `choice_set_${set}`, size && `choice_size_${size}`, type && `choice_type_${type}`),
     ref: controlRef
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "choice__wrapper"
   }, options?.map((item, i) => /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('choice__item', !isDisabled && fillHoverClass, item.value !== active.value && isDisabled && 'choice__item_state_disabled', item.value === active.value ? !isDisabled ? fillActiveClass : fillActiveDisabledClass : !isDisabled ? fillClass : fillDisabledClass, item.value === active.value && isDisabled && 'choice__item_active_state_disabled', item.value === active.value && 'choice__item_active'),
+    className: clsx__default.default('choice__item', !isDisabled && (fillHoverClass || choiceConfig.appearance[appearance]?.fillHover && `fill_active_${choiceConfig.appearance[appearance].fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase()), item.value !== active.value && isDisabled && 'choice__item_state_disabled', item.value === active.value ? !isDisabled ? fillActiveClass || choiceConfig.appearance[appearance]?.fillActive && `fill_active_${choiceConfig.appearance[appearance].fillActive}`.replace(/([A-Z])/g, '-$1').toLowerCase() : fillActiveDisabledClass : !isDisabled ? fillClass : fillDisabledClass, item.value === active.value && isDisabled && 'choice__item_active_state_disabled', item.value === active.value && 'choice__item_active'),
     key: item.value,
     ref: optionsRefs.get(item.value)
   }, /*#__PURE__*/React__default.default.createElement("input", {
@@ -136,8 +143,8 @@ const Choice = /*#__PURE__*/React__default.default.forwardRef(function Choice(pr
     className: clsx__default.default('choice__item-label', isDisabled && 'choice__item-label_state_disabled'),
     htmlFor: `${name}-${item.value}`
   }, before, item.label && /*#__PURE__*/React__default.default.createElement(index.Text, {
-    size: labelTextSize,
-    textColor: item.value === active.value ? !isDisabled ? labelTextActiveColor : labelTextActiveColorDisabled : !isDisabled ? labelTextColor : labelTextColorDisabled
+    size: labelTextSize || choiceConfig.appearance[appearance].labelTextSize,
+    textColor: item.value === active.value ? !isDisabled ? labelTextActiveColor || choiceConfig.appearance[appearance].labelTextActiveColor : labelTextActiveColorDisabled : !isDisabled ? labelTextColor || choiceConfig.appearance[appearance].labelTextColor : labelTextColorDisabled
   }, item.label), (icon || activeIcon) && /*#__PURE__*/React__default.default.createElement(index$1.Icon, {
     className: "choice__item-icon",
     iconFill: item.value === active.value ? activeIconItemFill : iconItemFill,
@@ -172,7 +179,8 @@ Choice.propTypes = {
 };
 Choice.defaultProps = {
   active: {},
-  options: []
+  options: [],
+  size: 'normal'
 };
 Choice.__docgenInfo = {
   "description": "",
@@ -248,6 +256,17 @@ Choice.__docgenInfo = {
       },
       "required": false
     },
+    "size": {
+      "defaultValue": {
+        "value": "'normal'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "after": {
       "description": "",
       "type": {
@@ -318,13 +337,6 @@ Choice.__docgenInfo = {
       },
       "required": false
     },
-    "size": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "type": {
       "description": "",
       "type": {
@@ -336,3 +348,4 @@ Choice.__docgenInfo = {
 };
 
 exports.Choice = Choice;
+exports.choiceConfig = choiceConfig;

package/dist/components/DadataHintField.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
-var _commonjsHelpers = require('../_commonjsHelpers-rI13D0F7.js');
+var _commonjsHelpers = require('../_commonjsHelpers-CFO10eej.js');
 var crypto = require('crypto');
 var index = require('./Input.js');
 require('../hooks/useDeviceTargetClass.js');