@itcase/ui 1.0.4 → 1.0.6

package/dist/components/RadioButton.js

@@ -3,12 +3,23 @@
 var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
+var index = require('./Text.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-require('lodash/castArray');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../useStyles-e4accb53.js');
 require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
 require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('lodash/castArray');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -16,50 +27,90 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+var radioButtonConfig = {
+  state: {},
+  setState: function setState(newComponent) {
+    radioButtonConfig.state = newComponent;
+  }
+};
 function RadioButton(props) {
-  var id = props.id,
+  props.state;
+    var id = props.id,
     className = props.className,
     checked = props.checked,
     onChange = props.onChange,
-    disabled = props.disabled;
-  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'border-color_',
-    propsKey: 'border'
+    disabled = props.disabled,
+    descTextSize = props.descTextSize,
+    descTextWidth = props.descTextWidth,
+    descTextColor = props.descTextColor,
+    desc = props.desc,
+    label = props.label,
+    labelTextSize = props.labelTextSize,
+    labelTextWidth = props.labelTextWidth,
+    labelTextColor = props.labelTextColor;
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
   });
   var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'radio-button_shape_',
     propsKey: 'shape'
   });
-  var fillCheckedClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'radio-button_fill_checked_',
-    propsKey: 'fillChecked'
+  var stateShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'radio-button__state_shape_',
+    propsKey: 'stateShape'
   });
-  var fillCheckmarkClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'radio-button_fill_checkmark_',
-    propsKey: 'fillCheckmark'
+  var stateFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: checked ? 'stateFillChecked' : 'stateFill'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  var stateFillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
-    propsKey: 'fill'
+    propsKey: checked ? 'stateFillDisabledChecked' : 'stateFillDisabled'
   });
-  var fillDisableClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'radio-button_fill_disable_',
-    propsKey: 'fillDisable'
+  var stateCheckmarkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'radio-button_checkmark_fill_',
+    propsKey: disabled ? 'stateCheckmarkFillDisabled' : 'stateCheckmarkFill'
   });
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'radio-button', fillCheckmarkClass, fillCheckedClass, fillClass, fillDisableClass, shapeClass, borderColorClass)
+  var stateBorderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'stateBorderWidth'
+  });
+  var stateBorderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: checked ? 'stateBorderColorChecked' : 'stateBorderColor'
+  });
+  var stateBorderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: checked ? 'stateBorderColorDisabledChecked' : 'stateBorderColorDisabled'
+  });
+  return /*#__PURE__*/React__default.default.createElement("label", {
+    htmlFor: id,
+    "class": clsx__default.default(className, 'radio-button', fillClass, shapeClass)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('radio-button__item', stateCheckmarkFillClass)
   }, /*#__PURE__*/React__default.default.createElement("input", {
-    id: id,
-    type: "radio",
     checked: checked,
+    className: "radio-button__input",
     disabled: disabled,
-    onChange: onChange,
-    className: "radio-button__button"
+    id: id,
+    type: "radio",
+    onChange: onChange
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "radio-button__bg"
+    className: clsx__default.default('radio-button__state', disabled ? stateFillDisabledClass : stateFillClass, disabled ? stateBorderColorDisabledClass : stateBorderColorClass, stateShapeClass, stateBorderWidthClass)
   }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "radio-button__mark"
-  }, "\xA0"));
+    className: "radio-button__state-checkmark"
+  }, "\xA0")), label && /*#__PURE__*/React__default.default.createElement(index.Text, {
+    className: "radio-button__label",
+    size: labelTextSize,
+    textWeight: labelTextWidth,
+    textColor: labelTextColor
+  }, label), desc && /*#__PURE__*/React__default.default.createElement(index.Text, {
+    className: "radio-button__desc",
+    size: descTextSize,
+    textWeight: descTextWidth,
+    textColor: descTextColor
+  }, desc));
 }
 RadioButton.propTypes = {
   className: PropTypes__default.default.string
@@ -69,3 +120,4 @@ RadioButton.defaulProps = {
 };
 
 exports.RadioButton = RadioButton;
+exports.radioButtonConfig = radioButtonConfig;

package/dist/components/Scrollbar.js

@@ -3,7 +3,7 @@
 var React$1 = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
-var ReactDOM = require('react-dom');
+var require$$2 = require('react-dom');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -28,7 +28,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React$1);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+var require$$2__default = /*#__PURE__*/_interopDefault(require$$2);
 
 var isArray = Array.isArray;
 var toClassName = function (val) {
@@ -829,7 +829,7 @@ var React = _interopRequireWildcard(React__namespace.default);
 
 var _propTypes = _interopRequireDefault(PropTypes__default.default);
 
-var _reactDom = _interopRequireDefault(ReactDOM__default.default);
+var _reactDom = _interopRequireDefault(require$$2__default.default);
 
 var _domFns = domFns;
 
@@ -1405,7 +1405,7 @@ _defineProperty(DraggableCore$1, "defaultProps", {
 
 	var _propTypes = _interopRequireDefault(PropTypes__default.default);
 
-	var _reactDom = _interopRequireDefault(ReactDOM__default.default);
+	var _reactDom = _interopRequireDefault(require$$2__default.default);
 
 	var _clsx2 = _interopRequireDefault(clsx__default.default);
 

package/dist/components/Select.js

@@ -5,7 +5,7 @@ var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var Select$1 = require('react-select');
 var objectWithoutProperties = require('../objectWithoutProperties-ea190611.js');
-var ReactDOM = require('react-dom');
+var require$$2 = require('react-dom');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var index$1 = require('./Icon.js');
 var index$2 = require('./Text.js');
@@ -4050,7 +4050,7 @@ var MenuPortal = function MenuPortal(props) {
   }), innerProps), children);
   return jsx(PortalPlacementContext.Provider, {
     value: portalPlacementContext
-  }, appendTo ? /*#__PURE__*/ReactDOM.createPortal(menuWrapper, appendTo) : menuWrapper);
+  }, appendTo ? /*#__PURE__*/require$$2.createPortal(menuWrapper, appendTo) : menuWrapper);
 };
 
 // ==============================

package/dist/components/Switch.js

@@ -13,12 +13,13 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 function Switch(props) {
   var className = props.className,
     set = props.set,
+    size = props.size,
     id = props.id,
     checked = props.checked,
     disabled = props.disabled,
     onChange = props.onChange;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('switch', className, set && "switch_set_" + set)
+    className: clsx__default.default('switch', className, size && "switch_size_" + size, set && "switch_set_" + set)
   }, /*#__PURE__*/React__default.default.createElement("input", {
     checked: checked,
     className: "switch__checkbox",

package/dist/components/Tab.js

@@ -0,0 +1,205 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var index$1 = require('./Text.js');
+var index = require('./Link.js');
+var index$2 = require('./Divider.js');
+var fill = require('../constants/componentProps/fill.js');
+var shape = require('../constants/componentProps/shape.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 textStyle = require('../constants/componentProps/textStyle.js');
+var textWeight = require('../constants/componentProps/textWeight.js');
+var type = require('../constants/componentProps/type.js');
+var underline = require('../constants/componentProps/underline.js');
+var useStyles = require('../useStyles-e4accb53.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var size = require('../constants/componentProps/size.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+require('../constants/componentProps/direction.js');
+require('../constants/componentProps/width.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var _Tab$propTypes;
+var tabConfig = {
+  appearance: {},
+  setAppearance: function setAppearance(newComponent) {
+    tabConfig.appearance = newComponent;
+  }
+};
+function Tab(props) {
+  var isActive = props.isActive,
+    isHover = props.isHover,
+    appearance = props.appearance,
+    after = props.after,
+    before = props.before,
+    children = props.children,
+    className = props.className,
+    href = props.href,
+    link = props.link,
+    set = props.set,
+    rel = props.rel,
+    target = props.target,
+    label = props.label,
+    labelColor = props.labelColor,
+    labelColorHover = props.labelColorHover,
+    labelColorActive = props.labelColorActive,
+    labelGradient = props.labelGradient,
+    labelSize = props.labelSize,
+    labelWrap = props.labelWrap,
+    labelStyle = props.labelStyle,
+    labelWeight = props.labelWeight,
+    dividerFill = props.dividerFill,
+    dividerFillHover = props.dividerFillHover,
+    dividerFillActive = props.dividerFillActive,
+    dividerFillActiveHover = props.dividerFillActiveHover,
+    dividerFillDisabled = props.dividerFillDisabled,
+    dividerSize = props.dividerSize,
+    dividerDirection = props.dividerDirection,
+    onClick = props.onClick,
+    onMouseEnter = props.onMouseEnter;
+  var alignDirectionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'alignDirection'
+  });
+  var alignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'align_',
+    propsKey: 'align'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_hover_',
+    propsKey: 'fillHover'
+  });
+  var fillActiveClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_',
+    propsKey: 'fillActive'
+  });
+  var fillActiveHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_active_hover_',
+    propsKey: 'fillActiveHover'
+  });
+  var fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
+  var linkFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'linkFill'
+  });
+  var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'tab_size_',
+    propsKey: 'size'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'tab_shape_',
+    propsKey: 'shape'
+  });
+  var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'tab_justify-content_',
+    propsKey: 'justifyContent'
+  });
+  var typeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'tab_type_',
+    propsKey: 'type'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    menuItem = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('tab', isActive && 'tab_state_active', isHover && 'tab_state_hover', appearance && (("fill_" + tabConfig.appearance[appearance].fillClass).replace(/([A-Z])/g, '-$1').toLowerCase(), ("fill_hover_" + tabConfig.appearance[appearance].fillHoverClass).replace(/([A-Z])/g, '-$1').toLowerCase()), className, sizeClass, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, shapeClass, typeClass, widthClass, set && "tab_set_" + set, justifyContentClass),
+    style: menuItem,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter
+  }, /*#__PURE__*/React__default.default.createElement(index.Link, {
+    href: link || href,
+    className: clsx__default.default('tab__link', alignDirectionClass, alignClass),
+    fill: linkFillClass,
+    target: target,
+    rel: rel
+  }, /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, before, children || /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, label && /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    className: "tab__label",
+    textColorActive: isActive && labelColorActive || appearance && tabConfig.appearance[appearance].labelColorActive.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    textGradient: labelGradient,
+    size: labelSize,
+    textWeight: labelWeight,
+    textColor: labelColor || appearance && tabConfig.appearance[appearance].labelColor.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    textWrap: labelWrap,
+    textColorHover: labelColorHover,
+    textStyle: labelStyle
+  }, dividerFillActive, " ", label), /*#__PURE__*/React__default.default.createElement(index$2.Divider, {
+    width: "fill",
+    fill: dividerFill || appearance && tabConfig.appearance[appearance].dividerFill.replace(/([A-Z])/g, '-$1').toLowerCase(),
+    fillHover: isHover && (dividerFillHover || appearance && tabConfig.appearance[appearance].dividerFillHover.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    fillActive: isActive && (dividerFillActive || appearance && tabConfig.appearance[appearance].dividerFillActive.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    fillActiveHover: dividerFillActiveHover,
+    fillDisabled: dividerFillDisabled,
+    size: dividerSize,
+    direction: dividerDirection
+  })), after)));
+}
+Tab.propTypes = (_Tab$propTypes = {
+  before: PropTypes__default.default.any,
+  after: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  linkFill: PropTypes__default.default.oneOf(fill.default),
+  linkFillDesktop: PropTypes__default.default.oneOf(fill.default),
+  linkFillMobile: PropTypes__default.default.oneOf(fill.default),
+  linkFillTablet: PropTypes__default.default.oneOf(fill.default),
+  isActive: PropTypes__default.default.bool,
+  label: PropTypes__default.default.string,
+  labelSize: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func,
+  onMouseEnter: PropTypes__default.default.func,
+  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),
+  LinkComponent: PropTypes__default.default.any,
+  href: PropTypes__default.default.string,
+  link: PropTypes__default.default.string,
+  target: PropTypes__default.default.string,
+  rel: PropTypes__default.default.string,
+  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),
+  labelColor: PropTypes__default.default.oneOf(textColor.default),
+  labelColorHover: PropTypes__default.default.oneOf(textColorHover.default),
+  labelColorActive: PropTypes__default.default.oneOf(textColorActive.default),
+  labelGradient: PropTypes__default.default.oneOf(textGradient.default)
+}, _Tab$propTypes["labelSize"] = PropTypes__default.default.oneOf(size.default), _Tab$propTypes.labelWrap = PropTypes__default.default.string, _Tab$propTypes.labelStyle = PropTypes__default.default.oneOf(textStyle.default), _Tab$propTypes.labelWeight = PropTypes__default.default.oneOf(textWeight.default), _Tab$propTypes.type = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeDesktop = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeMobile = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.typeTablet = PropTypes__default.default.oneOf(type.default), _Tab$propTypes.title = PropTypes__default.default.string, _Tab$propTypes.underline = PropTypes__default.default.oneOf(underline.default), _Tab$propTypes);
+Tab.defaultProps = {
+  size: 'normal',
+  LinkComponent: 'a',
+  direction: 'horizontal'
+};
+
+exports.Tab = Tab;
+exports.tabConfig = tabConfig;

package/dist/components/Text.js

@@ -113,9 +113,7 @@ Text.propTypes = {
   onClick: PropTypes__default.default.fund
 };
 Text.defaultProps = {
-  tag: 'span',
-  size: 'm',
-  textColor: 'surfaceTextPrimary'
+  tag: 'span'
 };
 
 exports.Text = Text;

package/dist/components/Textarea.js

@@ -16,8 +16,15 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
+var textareaConfig = {
+  state: {},
+  setState: function setState(newComponent) {
+    textareaConfig.state = newComponent;
+  }
+};
 function Textarea(props) {
-  var id = props.id,
+  props.state;
+    var id = props.id,
     className = props.className,
     placeholder = props.placeholder,
     disabled = props.disabled,
@@ -88,3 +95,4 @@ Textarea.defaultProps = {
 };
 
 exports.Textarea = Textarea;
+exports.textareaConfig = textareaConfig;