@itcase/ui 1.0.10 → 1.0.13

package/dist/components/Switch.js

@@ -10,7 +10,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-function Switch(props) {
+var Switch = /*#__PURE__*/React__default.default.forwardRef(function Switch(props, ref) {
   var className = props.className,
     set = props.set,
     size = props.size,
@@ -25,6 +25,7 @@ function Switch(props) {
     className: "switch__checkbox",
     disabled: disabled,
     id: id,
+    ref: ref,
     type: "checkbox",
     onChange: onChange
   }), /*#__PURE__*/React__default.default.createElement("div", {
@@ -32,7 +33,7 @@ function Switch(props) {
   }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
     className: "switch__toggle"
   }, "\xA0"));
-}
+});
 Switch.propTypes = {
   checked: PropTypes__default.default.bool,
   className: PropTypes__default.default.string,

package/dist/components/Tab.js

@@ -135,7 +135,6 @@ function Tab(props) {
   });
   var _useStyles = useStyles.useStyles(props),
     tab = _useStyles.styles;
-  console.log(tabConfig.appearance);
   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(), appearance && ("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: tab,

package/dist/components/Textarea.js

@@ -36,6 +36,10 @@ function Textarea(props) {
     prefix: 'fill_',
     propsKey: 'fill'
   });
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
   var sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'textarea_size_',
     propsKey: 'size'
@@ -69,7 +73,7 @@ function Textarea(props) {
     propsKey: 'width'
   });
   return /*#__PURE__*/React__default.default.createElement("textarea", {
-    className: clsx__default.default(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, widthClass, sizeClass),
+    className: clsx__default.default(className, 'textarea', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, fillClass, borderColorClass, placeholderClass, shapeClass, textSizeClass, textColorClass, weightClass, widthClass, sizeClass),
     id: id,
     disabled: disabled,
     placeholder: placeholder,

package/dist/components/Tile.js

@@ -4,7 +4,6 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var clsx = require('clsx');
 var index$2 = require('./Badge.js');
-require('./Emoji.js');
 require('./Icon.js');
 var index = require('./Title.js');
 var index$1 = require('./Text.js');
@@ -32,8 +31,6 @@ require('../context/UIContext.js');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
 require('lodash/castArray');
-require('../constants/componentProps/direction.js');
-require('../constants/componentProps/emojiSize.js');
 require('react-inlinesvg');
 require('../constants/componentProps/iconSize.js');
 require('../constants/componentProps/strokeColor.js');

package/dist/css/components/Choice/Choice.css

@@ -0,0 +1,73 @@
+.choice {
+  display: flex;
+  align-items: center;
+  &__wrapper {
+    position: relative;
+    display: flex;
+    ^&__item {
+      min-width: 80px;
+      position: relative;
+      display: flex;
+      border-top: 0;
+      border-left: 0;
+      border-bottom: 0;
+      &:hover {
+        background: var(--choice-item-background-hover);
+      }
+      &last-child {
+        border-right: 0;
+      }
+      &_state_active {
+      }
+      & input {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
+        opacity: 0%;
+        cursor: pointer;
+        border: 0;
+        margin: 0;
+      }
+      &-label {
+        width: 100%;
+        text-align: center;
+        position: relative;
+        display: block;
+        z-index: 3;
+        transition: color 0.5s ease;
+        cursor: pointer;
+      }
+    }
+  }
+}
+.choice {
+  &_shape {
+    &_rounded {
+      border-radius: 8px;
+    }
+    &_circular {
+      border-radius: 50%;
+    }
+  }
+}
+.choice {
+  &_size {
+    @each $size in normal, compact {
+      &_$(size) {
+        ^^&__item {
+          &-label {
+            padding: var(--choice-item-size-$(size)-padding, 10px 16px);
+          }
+        }
+      }
+    }
+  }
+}
+:root {
+  --choice-item-background-hover: var(--color-surface-secondary);
+}