@itcase/ui 1.8.86 → 1.8.88

package/dist/components/Switch.js

@@ -82,17 +82,17 @@ var switchAppearanceSize = {
 };
 
 var switchAppearanceStyle = {
-    full: {
+    solid: {
         borderColor: 'none',
     },
-    ghost: {
+    outlined: {
         fill: 'none',
+    },
+    full: {
         borderColor: 'none',
     },
-    outlined: {
+    ghost: {
         fill: 'none',
-    },
-    solid: {
         borderColor: 'none',
     },
 };
@@ -117,20 +117,20 @@ var switchConfig = {
     },
 };
 var Switch = React.forwardRef(function Switch(props, ref) {
-    var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, title = props.title, desc = props.desc, isDisabled = props.isDisabled, isChecked = props.isChecked, isActive = props.isActive, onChange = props.onChange;
+    var id = props.id, className = props.className, appearance = props.appearance, _a = props.align, align = _a === void 0 ? 'left' : _a, title = props.title, desc = props.desc, isDisabled = props.isDisabled, isActive = props.isActive, onChange = props.onChange;
     var appearanceConfig = useAppearanceConfig(appearance, switchConfig);
     var propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     var size = propsGenerator.size, fillActiveClass = propsGenerator.fillActiveClass, fillActiveHoverClass = propsGenerator.fillActiveHoverClass, fillClass = propsGenerator.fillClass, fillHoverClass = propsGenerator.fillHoverClass, fillToggleActiveClass = propsGenerator.fillToggleActiveClass, fillToggleActiveHoverClass = propsGenerator.fillToggleActiveHoverClass, fillToggleClass = propsGenerator.fillToggleClass, fillToggleHoverClass = propsGenerator.fillToggleHoverClass, titleTextColor = propsGenerator.titleTextColor, titleTextSize = propsGenerator.titleTextSize, descTextColor = propsGenerator.descTextColor, descTextSize = propsGenerator.descTextSize;
-    return (jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [title && (jsx(Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc })), jsxs("div", { className: 'switch__item', children: [jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", disabled: isDisabled && 'disabled', checked: (isActive || isChecked) && 'checked', 
+    return (jsxs("div", { className: clsx('switch', className, align && "switch_align_".concat(align), size && "switch_size_".concat(size)), children: [jsxs("div", { className: "switch__wrapper", children: [title && (jsx(Text, { className: clsx('switch__title'), size: titleTextSize, textColor: titleTextColor, children: title })), desc && (jsx(Text, { className: clsx('switch__desc'), size: descTextSize, textColor: descTextColor, children: desc }))] }), jsxs("div", { className: 'switch__item', children: [jsx("input", { id: id, className: "switch__checkbox", type: "checkbox", 
                         // @ts-expect-error
-                        ref: ref, onChange: onChange }), jsx("div", { className: clsx('switch__bg', !isActive || !isChecked
+                        ref: ref, disabled: isDisabled && 'disabled', checked: isActive && 'checked', onChange: onChange }), jsx("div", { className: clsx('switch__bg', !isActive
                             ? fillClass && "fill_".concat(fillClass)
-                            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive || !isChecked
+                            : fillActiveClass && "fill_active_".concat(fillActiveClass), !isActive
                             ? fillHoverClass && "fill_hover_".concat(fillHoverClass)
                             : fillActiveHoverClass &&
-                                "fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsx("div", { className: clsx('switch__toggle', !isActive || !isChecked
+                                "fill_active_hover_".concat(fillActiveHoverClass)), children: "\u00A0" }), jsx("div", { className: clsx('switch__toggle', !isActive
                             ? fillToggleClass && "fill_".concat(fillToggleClass)
-                            : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive || !isChecked
+                            : fillToggleActiveClass && "fill_active_".concat(fillToggleActiveClass), !isActive
                             ? fillToggleHoverClass && "fill_hover_".concat(fillToggleHoverClass)
                             : fillToggleActiveHoverClass &&
                                 "fill_active_hover_".concat(fillToggleActiveHoverClass)), children: "\u00A0" })] })] }));

package/dist/components/Tab.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { B as Badge, I as Icon } from '../Icon_es_-iRj1sFG.js';
+import { B as Badge, I as Icon } from '../Icon_es_BpZIoe9M.js';
 import { D as Divider } from '../Divider_es_CiRU0sTz.js';
 import { L as Link } from '../Link_es_BnUIX0QT.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';

package/dist/components/Tile.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';
 import { useStyles } from '../hooks/useStyles/useStyles.js';
-import { b as Title, B as Badge, I as Icon } from '../Icon_es_-iRj1sFG.js';
+import { b as Title, B as Badge, I as Icon } from '../Icon_es_BpZIoe9M.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import { _ as __assign } from '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react';

package/dist/components/Title.js

@@ -1,4 +1,4 @@
-export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_-iRj1sFG.js';
+export { b as Title, d as titleAppearance, c as titleConfig } from '../Icon_es_BpZIoe9M.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components/Tooltip.js

@@ -1,4 +1,4 @@
-export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_-iRj1sFG.js';
+export { T as Tooltip, a as tooltipAppearance, t as tooltipConfig } from '../Icon_es_BpZIoe9M.js';
 import '../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components/Warning.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, Fragment } from 'react';
 import clsx from 'clsx';
-import { I as Icon } from '../Icon_es_-iRj1sFG.js';
+import { I as Icon } from '../Icon_es_BpZIoe9M.js';
 import { T as Text } from '../Text_es_BvmOR4nv.js';
 import { useAppearanceConfig } from '../hooks/useAppearanceConfig/useAppearanceConfig.js';
 import { useDevicePropsGenerator } from '../hooks/useDevicePropsGenerator/useDevicePropsGenerator.js';

package/dist/css/components/Checkbox/Checkbox.css

@@ -99,7 +99,7 @@
   }
 }
 .checkbox {
-  @each $size in xxl, xl, l, m, s, xs, xxs {
+  @each $size in xl, l, m, s {
     &_size_$(size) {
       padding: var(--checkbox-$(size)-padding);
       gap: var(--checkbox-$(size)-gap);
@@ -132,21 +132,27 @@
   --checkbox-error-border: var(--color-error-border-secondary);
   --checkbox-focus-border: var(--color-surface-border-quaternary);
 
-  --checkbox-area-m-width: 24px;
-  --checkbox-area-m-height: 24px;
-  --checkbox-m-width: 16px;
-  --checkbox-m-height: 16px;
-  --checkbox-m-gap: 0 2px;
+  --checkbox-area-xl-width: 24px;
+  --checkbox-area-xl-height: 24px;
+  --checkbox-xl-width: 16px;
+  --checkbox-xl-height: 16px;
+  --checkbox-xl-gap: 0 2px;
+
+  --checkbox-area-l-width: 20px;
+  --checkbox-area-l-height: 20px;
+  --checkbox-l-width: 16px;
+  --checkbox-l-height: 16px;
+  --checkbox-l-gap: 0 2px;
 
-  --checkbox-area-xs-width: 16px;
-  --checkbox-area-xs-height: 16px;
-  --checkbox-xs-width: 12px;
-  --checkbox-xs-height: 12px;
-  --checkbox-xs-gap: 0 2px;
+  --checkbox-area-m-width: 16px;
+  --checkbox-area-m-height: 16px;
+  --checkbox-m-width: 12px;
+  --checkbox-m-height: 12px;
+  --checkbox-m-gap: 0 2px;
 
-  --checkbox-area-xxs-width: 14px;
-  --checkbox-area-xxs-height: 14px;
-  --checkbox-xxs-width: 10px;
-  --checkbox-xxs-height: 10px;
-  --checkbox-xxs-gap: 0 2px;
+  --checkbox-area-s-width: 14px;
+  --checkbox-area-s-height: 14px;
+  --checkbox-s-width: 10px;
+  --checkbox-s-height: 10px;
+  --checkbox-s-gap: 0 2px;
 }

package/dist/css/components/Code/Code.css

@@ -1,4 +1,5 @@
 .code {
+  width: 100%;
   &__wrapper {
     width: 100%;
     display: flex;
@@ -14,7 +15,7 @@
 }
 .code__input {
   &_size {
-    @each $size in l, m {
+    @each $size in xl, l, m, s {
       &_$(size) {
         min-width: var(--code-input-size-$(size)-width);
         min-height: var(--code-input-size-$(size)-height);

package/dist/css/components/Switch/Switch.css

@@ -1,22 +1,24 @@
 .switch {
-  display: grid;
-  &__title {
-    padding: 0 8px 0 0;
-    align-self: start;
-  }
-  &__desc {
-    padding: 0 8px 0 0;
-    align-self: start;
+  display: flex;
+  flex-direction: row;
+  &__wrapper {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    ^&__title {
+      padding: 0 8px 0 0;
+    }
+    ^&__desc {
+      padding: 0 8px 0 0;
+    }
   }
   &__item {
     border-radius: 50px;
     position: relative;
     overflow: hidden;
     display: flex;
-    align-self: start;
     transition: 0.4s;
     cursor: pointer;
-    grid-row: 1/3;
   }
   &__checkbox {
     width: 100%;
@@ -30,11 +32,7 @@
     cursor: pointer;
     appearance: none;
     &:checked {
-      & + .switch__bg {
-        /* background: var(--color-accent-fill-primary); */
-      }
       & ~ .switch__toggle {
-        /* background: var(--color-accent-item-primary); */
         margin: 0 0 0 -3px;
         left: 100%;
         transform: translate(-100%, -50%);
@@ -47,7 +45,6 @@
     }
   }
   &__bg {
-    /* background: var(--color-surface-tertiary); */
     width: 100%;
     flex: 1;
     transition: all 0.25s;
@@ -55,8 +52,6 @@
   &__toggle {
     height: calc(100% - 6px);
     aspect-ratio: 1/1;
-
-    /* background: #fff; */
     border-radius: 50%;
     position: absolute;
     box-shadow: inset 0 0 5px rgb(0, 0, 0, 0.2);
@@ -70,26 +65,20 @@
 .switch {
   &_align {
     &_left {
-      grid-template-columns: 1fr auto;
+      width: 100%;
+      flex-direction: row-reverse;
       ^^&__title,
       ^^&__desc {
-        grid-column-start: 2;
         padding: 0 0 0 8px;
       }
-      ^^&__item {
-        grid-column-start: 1;
-      }
     }
     &_right {
-      grid-template-columns: auto 1fr;
+      width: 100%;
+      flex-direction: row;
       ^^&__title,
       ^^&__desc {
-        grid-column-start: 1;
         padding: 0 8px 0 0;
       }
-      ^^&__item {
-        grid-column-start: 2;
-      }
     }
   }
 }

package/dist/types/components/Badge/appearance/badgeStyle.d.ts

@@ -1,13 +1,13 @@
 declare const badgeAppearanceStyle: {
-    full: {};
-    ghost: {
-        fill: string;
+    solid: {
         borderColor: string;
     };
     outlined: {
         fill: string;
     };
-    solid: {
+    full: {};
+    ghost: {
+        fill: string;
         borderColor: string;
     };
 };

package/dist/types/components/Checkbox/appearance/checkboxRequire.d.ts

@@ -1,12 +1,16 @@
 declare const checkboxAppearanceRequire: {
     requirePrimary: {
-        fill: string;
-        borderColor: string;
-        borderHover: string;
-        textColor: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
-        placeholderTextColor: string;
+        fillCheckbox: string;
+        fillCheckboxActive: string;
+        fillCheckboxActiveHover: string;
+        fillCheckboxHover: string;
+        fillCheckmark: string;
+        labelTextColor: string;
+        descTextColor: string;
+        borderColorCheckbox: string;
+        borderColorCheckboxActive: string;
+        borderColorCheckboxActiveHover: string;
+        borderColorCheckboxHover: string;
     };
     requireSecondary: {
         fill: string;

package/dist/types/components/Checkbox/appearance/checkboxSize.d.ts

@@ -1,15 +1,20 @@
 declare const checkboxAppearanceSize: {
-    sizeM: {
+    sizeXL: {
+        size: string;
+        labelTextSize: string;
+        descTextSize: string;
+    };
+    sizeL: {
         size: string;
         labelTextSize: string;
         descTextSize: string;
     };
-    sizeXS: {
+    sizeM: {
         size: string;
         labelTextSize: string;
         descTextSize: string;
     };
-    sizeXXS: {
+    sizeS: {
         size: string;
         labelTextSize: string;
         descTextSize: string;

package/dist/types/components/Checkbox/appearance/checkboxStyle.d.ts

@@ -1,13 +1,15 @@
 declare const checkboxAppearanceStyle: {
-    full: {};
-    ghost: {
-        fill: string;
+    solid: {
+        borderColorCheckbox: string;
         borderWidth: string;
     };
     outlined: {
         fill: string;
     };
-    solid: {
+    full: {};
+    ghost: {
+        fill: string;
+        borderColorCheckbox: string;
         borderWidth: string;
     };
 };

package/dist/types/components/Checkbox/appearance/checkboxSuccess.d.ts

@@ -1,12 +1,16 @@
 declare const checkboxAppearanceSuccess: {
     successPrimary: {
-        fill: string;
-        borderColor: string;
-        borderHover: string;
-        textColor: string;
-        iconBeforeFill: string;
-        iconClearFill: string;
-        placeholderTextColor: string;
+        fillCheckbox: string;
+        fillCheckboxActive: string;
+        fillCheckboxActiveHover: string;
+        fillCheckboxHover: string;
+        fillCheckmark: string;
+        labelTextColor: string;
+        descTextColor: string;
+        borderColorCheckbox: string;
+        borderColorCheckboxActive: string;
+        borderColorCheckboxActiveHover: string;
+        borderColorCheckboxHover: string;
     };
     successSecondary: {
         fill: string;

package/dist/types/components/Switch/appearance/switchStyle.d.ts

@@ -1,15 +1,15 @@
 declare const switchAppearanceStyle: {
-    full: {
+    solid: {
         borderColor: string;
     };
-    ghost: {
+    outlined: {
         fill: string;
+    };
+    full: {
         borderColor: string;
     };
-    outlined: {
+    ghost: {
         fill: string;
-    };
-    solid: {
         borderColor: string;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.86",
+  "version": "1.8.88",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -103,7 +103,7 @@
     "@emotion/is-prop-valid": "^1.3.1",
     "@itcase/common": "^1.2.28",
     "@itcase/icons": "^1.2.16",
-    "@itcase/storybook-config": "^1.1.76",
+    "@itcase/storybook-config": "^1.1.77",
     "@itcase/tokens-am": "^1.1.19",
     "@itcase/tokens-baikal": "^1.1.17",
     "@itcase/tokens-palette": "^1.1.11",

package/dist/{Icon_cjs_DP41Z8bS.js → Icon_cjs_CdFkbmKN.js}

@@ -207,15 +207,15 @@ var badgeAppearanceSize = {
 };
 
 var badgeAppearanceStyle = {
-    full: {},
-    ghost: {
-        fill: 'none',
+    solid: {
         borderColor: 'none',
     },
     outlined: {
         fill: 'none',
     },
-    solid: {
+    full: {},
+    ghost: {
+        fill: 'none',
         borderColor: 'none',
     },
 };

package/dist/{Icon_es_-iRj1sFG.js → Icon_es_BpZIoe9M.js}

@@ -205,15 +205,15 @@ var badgeAppearanceSize = {
 };
 
 var badgeAppearanceStyle = {
-    full: {},
-    ghost: {
-        fill: 'none',
+    solid: {
         borderColor: 'none',
     },
     outlined: {
         fill: 'none',
     },
-    solid: {
+    full: {},
+    ghost: {
+        fill: 'none',
         borderColor: 'none',
     },
 };