@rescui/switcher 0.9.8 → 0.10.0

package/lib/public-api.p.css

@@ -207,9 +207,240 @@
     --_rs-switcher-mark-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
   }
 }
+@define-mixin rs-switcher-compact-true{
+  &:not(html){
+    --_rs-switcher-border-radius-from-compact:var(
+    --_rs-switcher-compact-border-radius
+  );
+    --_rs-switcher-option-padding-from-compact:var(
+    --_rs-switcher-compact-option-padding
+  );
+    --_rs-switcher-icon-offset-from-compact:var(
+    --_rs-switcher-compact-icon-offset
+  );
+  }
+}
+@define-mixin rs-switcher-compact-false{
+  &:not(html){
+    --_rs-switcher-border-radius-from-compact:initial;
+    --_rs-switcher-option-padding-from-compact:initial;
+    --_rs-switcher-icon-offset-from-compact:initial;
+  }
+}
 @define-mixin rs-switcher-icon-position-left{
   --_rs-switcher-option-flex-direction:row;
 }
 @define-mixin rs-switcher-icon-position-right{
   --_rs-switcher-option-flex-direction:row-reverse;
 }
+@define-mixin rs-vertical-switcher-size-xs{
+  &:not(html){
+    --_rs-switcher-vertical-border-radius:4px;
+    --_rs-switcher-vertical-option-vertical-padding:2px;
+    --_rs-switcher-vertical-option-horizontal-padding:8px;
+    --_rs-switcher-vertical-icon-size:16px;
+    --_rs-switcher-vertical-icon-offset:4px;
+    --_rs-switcher-vertical-icon-margin-vertical:2px;
+  }
+    &:not(html) [data-rs-internal='vertical-switcher__option']{
+    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-text-transform:initial;
+    --_rs-typography-font-variant-numeric:initial;
+    --_rs-typography-font-family:var(
+    --rs-font-family-ui,
+    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
+  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
+  );
+    --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
+    --_rs-typography-font-weight:var(
+    --rs-font-weight-regular,
+    400
+  );
+    --_rs-typography-line-height:var(
+    --rs-text-3-line-height,
+    20px
+  );
+    --_rs-typography-base-color:var(
+    --_rs-typography-hardness-color,
+    var(
+  --rs-color-average,
+  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
+)
+  );
+    --_rs-typography-text-auto-offset:8px;
+    --_rs-typography-ul-list-li-padding-left:28px;
+    --_rs-typography-ol-list-li-padding-left:21px;
+    --_rs-typography-list-li-margin-top-from-text:8px;
+    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
+    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
+    --_rs-typography-link-border-bottom-width-from-text:1px;
+  }
+}
+@define-mixin rs-vertical-switcher-size-s{
+  &:not(html){
+    --_rs-switcher-vertical-border-radius:4px;
+    --_rs-switcher-vertical-option-vertical-padding:6px;
+    --_rs-switcher-vertical-option-horizontal-padding:12px;
+    --_rs-switcher-vertical-icon-size:20px;
+    --_rs-switcher-vertical-icon-offset:4px;
+    --_rs-switcher-vertical-icon-margin-vertical:0px;
+  }
+    &:not(html) [data-rs-internal='vertical-switcher__option']{
+    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-text-transform:initial;
+    --_rs-typography-font-variant-numeric:initial;
+    --_rs-typography-font-family:var(
+    --rs-font-family-ui,
+    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
+  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
+  );
+    --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
+    --_rs-typography-font-weight:var(
+    --rs-font-weight-regular,
+    400
+  );
+    --_rs-typography-line-height:var(
+    --rs-text-3-line-height,
+    20px
+  );
+    --_rs-typography-base-color:var(
+    --_rs-typography-hardness-color,
+    var(
+  --rs-color-average,
+  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
+)
+  );
+    --_rs-typography-text-auto-offset:8px;
+    --_rs-typography-ul-list-li-padding-left:28px;
+    --_rs-typography-ol-list-li-padding-left:21px;
+    --_rs-typography-list-li-margin-top-from-text:8px;
+    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
+    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
+    --_rs-typography-link-border-bottom-width-from-text:1px;
+  }
+}
+@define-mixin rs-vertical-switcher-size-m{
+  &:not(html){
+    --_rs-switcher-vertical-border-radius:8px;
+    --_rs-switcher-vertical-option-vertical-padding:8px;
+    --_rs-switcher-vertical-option-horizontal-padding:16px;
+    --_rs-switcher-vertical-icon-size:24px;
+    --_rs-switcher-vertical-icon-offset:8px;
+    --_rs-switcher-vertical-icon-margin-vertical:0px;
+  }
+    &:not(html) [data-rs-internal='vertical-switcher__option']{
+    --_rs-typography-letter-spacing:0.0015em;
+    --_rs-typography-text-transform:initial;
+    --_rs-typography-font-variant-numeric:initial;
+    --_rs-typography-font-family:var(
+    --rs-font-family-ui,
+    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
+  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
+  );
+    --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
+    --_rs-typography-font-weight:var(
+    --rs-font-weight-regular,
+    400
+  );
+    --_rs-typography-line-height:var(
+    --rs-text-2-line-height,
+    24px
+  );
+    --_rs-typography-base-color:var(
+    --_rs-typography-hardness-color,
+    var(
+  --rs-color-average,
+  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
+)
+  );
+    --_rs-typography-text-auto-offset:16px;
+    --_rs-typography-ul-list-li-padding-left:22px;
+    --_rs-typography-ol-list-li-padding-left:26px;
+    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
+    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
+    --_rs-typography-link-border-bottom-width-from-text:1px;
+  }
+    @media screen and (max-width: 640px){
+    &:not(html) [data-rs-internal='vertical-switcher__option']{
+    --_rs-typography-list-li-margin-top-from-text:12px;
+  }
+  }
+}
+@define-mixin rs-vertical-switcher-size-l{
+  &:not(html){
+    --_rs-switcher-vertical-border-radius:12px;
+    --_rs-switcher-vertical-option-vertical-padding:12px;
+    --_rs-switcher-vertical-option-horizontal-padding:24px;
+    --_rs-switcher-vertical-icon-size:28px;
+    --_rs-switcher-vertical-icon-offset:12px;
+    --_rs-switcher-vertical-icon-margin-vertical:0px;
+  }
+    &:not(html) [data-rs-internal='vertical-switcher__option']{
+    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-text-transform:initial;
+    --_rs-typography-font-variant-numeric:initial;
+    --_rs-typography-font-family:var(
+    --rs-font-family-ui,
+    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
+  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
+  );
+    --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
+    --_rs-typography-font-weight:var(
+    --rs-font-weight-regular,
+    400
+  );
+    --_rs-typography-line-height:var(
+    --rs-text-1-line-height,
+    28px
+  );
+    --_rs-typography-base-color:var(
+    --_rs-typography-hardness-color,
+    var(
+  --rs-color-average,
+  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
+)
+  );
+    --_rs-typography-text-auto-offset:32px;
+    --_rs-typography-ul-list-li-padding-left:26px;
+    --_rs-typography-ol-list-li-padding-left:32px;
+    --_rs-typography-list-li-margin-top-from-text:24px;
+    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
+    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
+    --_rs-typography-link-border-bottom-width-from-text:1px;
+  }
+    @media screen and (max-width: 640px){
+    &:not(html) [data-rs-internal='vertical-switcher__option']{
+    --_rs-typography-list-li-margin-top-from-text:16px;
+  }
+  }
+}
+@define-mixin rs-vertical-switcher-mode-classic{
+  &:not(html){
+    --_rs-switcher-vertical-option-hover-background:var(
+    --_rs-color-primary-t-fog
+  );
+    --_rs-switcher-vertical-mark-border-color:var(--_rs-color-primary);
+  }
+}
+@define-mixin rs-vertical-switcher-mode-rock{
+  &:not(html){
+    --_rs-switcher-vertical-option-hover-background:rgba(
+    calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
+    0.1
+  );
+    --_rs-switcher-vertical-mark-border-color:rgb(
+    calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
+  );
+  }
+}
+@define-mixin rs-vertical-switcher-icon-position-left{
+  --_rs-switcher-vertical-option-flex-direction:row;
+}
+@define-mixin rs-vertical-switcher-icon-position-right{
+  --_rs-switcher-vertical-option-flex-direction:row-reverse;
+}

package/lib/public-api.pcss

@@ -207,9 +207,240 @@
     --_rs-switcher-mark-border-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
   }
 }
+@define-mixin rs-switcher-compact-true{
+  &:not(html){
+    --_rs-switcher-border-radius-from-compact:var(
+    --_rs-switcher-compact-border-radius
+  );
+    --_rs-switcher-option-padding-from-compact:var(
+    --_rs-switcher-compact-option-padding
+  );
+    --_rs-switcher-icon-offset-from-compact:var(
+    --_rs-switcher-compact-icon-offset
+  );
+  }
+}
+@define-mixin rs-switcher-compact-false{
+  &:not(html){
+    --_rs-switcher-border-radius-from-compact:initial;
+    --_rs-switcher-option-padding-from-compact:initial;
+    --_rs-switcher-icon-offset-from-compact:initial;
+  }
+}
 @define-mixin rs-switcher-icon-position-left{
   --_rs-switcher-option-flex-direction:row;
 }
 @define-mixin rs-switcher-icon-position-right{
   --_rs-switcher-option-flex-direction:row-reverse;
 }
+@define-mixin rs-vertical-switcher-size-xs{
+  &:not(html){
+    --_rs-switcher-vertical-border-radius:4px;
+    --_rs-switcher-vertical-option-vertical-padding:2px;
+    --_rs-switcher-vertical-option-horizontal-padding:8px;
+    --_rs-switcher-vertical-icon-size:16px;
+    --_rs-switcher-vertical-icon-offset:4px;
+    --_rs-switcher-vertical-icon-margin-vertical:2px;
+  }
+    &:not(html) [data-rs-internal='vertical-switcher__option']{
+    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-text-transform:initial;
+    --_rs-typography-font-variant-numeric:initial;
+    --_rs-typography-font-family:var(
+    --rs-font-family-ui,
+    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
+  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
+  );
+    --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
+    --_rs-typography-font-weight:var(
+    --rs-font-weight-regular,
+    400
+  );
+    --_rs-typography-line-height:var(
+    --rs-text-3-line-height,
+    20px
+  );
+    --_rs-typography-base-color:var(
+    --_rs-typography-hardness-color,
+    var(
+  --rs-color-average,
+  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
+)
+  );
+    --_rs-typography-text-auto-offset:8px;
+    --_rs-typography-ul-list-li-padding-left:28px;
+    --_rs-typography-ol-list-li-padding-left:21px;
+    --_rs-typography-list-li-margin-top-from-text:8px;
+    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
+    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
+    --_rs-typography-link-border-bottom-width-from-text:1px;
+  }
+}
+@define-mixin rs-vertical-switcher-size-s{
+  &:not(html){
+    --_rs-switcher-vertical-border-radius:4px;
+    --_rs-switcher-vertical-option-vertical-padding:6px;
+    --_rs-switcher-vertical-option-horizontal-padding:12px;
+    --_rs-switcher-vertical-icon-size:20px;
+    --_rs-switcher-vertical-icon-offset:4px;
+    --_rs-switcher-vertical-icon-margin-vertical:0px;
+  }
+    &:not(html) [data-rs-internal='vertical-switcher__option']{
+    --_rs-typography-letter-spacing:0.0045em;
+    --_rs-typography-text-transform:initial;
+    --_rs-typography-font-variant-numeric:initial;
+    --_rs-typography-font-family:var(
+    --rs-font-family-ui,
+    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
+  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
+  );
+    --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
+    --_rs-typography-font-weight:var(
+    --rs-font-weight-regular,
+    400
+  );
+    --_rs-typography-line-height:var(
+    --rs-text-3-line-height,
+    20px
+  );
+    --_rs-typography-base-color:var(
+    --_rs-typography-hardness-color,
+    var(
+  --rs-color-average,
+  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
+)
+  );
+    --_rs-typography-text-auto-offset:8px;
+    --_rs-typography-ul-list-li-padding-left:28px;
+    --_rs-typography-ol-list-li-padding-left:21px;
+    --_rs-typography-list-li-margin-top-from-text:8px;
+    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
+    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
+    --_rs-typography-link-border-bottom-width-from-text:1px;
+  }
+}
+@define-mixin rs-vertical-switcher-size-m{
+  &:not(html){
+    --_rs-switcher-vertical-border-radius:8px;
+    --_rs-switcher-vertical-option-vertical-padding:8px;
+    --_rs-switcher-vertical-option-horizontal-padding:16px;
+    --_rs-switcher-vertical-icon-size:24px;
+    --_rs-switcher-vertical-icon-offset:8px;
+    --_rs-switcher-vertical-icon-margin-vertical:0px;
+  }
+    &:not(html) [data-rs-internal='vertical-switcher__option']{
+    --_rs-typography-letter-spacing:0.0015em;
+    --_rs-typography-text-transform:initial;
+    --_rs-typography-font-variant-numeric:initial;
+    --_rs-typography-font-family:var(
+    --rs-font-family-ui,
+    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
+  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
+  );
+    --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
+    --_rs-typography-font-weight:var(
+    --rs-font-weight-regular,
+    400
+  );
+    --_rs-typography-line-height:var(
+    --rs-text-2-line-height,
+    24px
+  );
+    --_rs-typography-base-color:var(
+    --_rs-typography-hardness-color,
+    var(
+  --rs-color-average,
+  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
+)
+  );
+    --_rs-typography-text-auto-offset:16px;
+    --_rs-typography-ul-list-li-padding-left:22px;
+    --_rs-typography-ol-list-li-padding-left:26px;
+    --_rs-typography-list-li-margin-top-from-text:16px;
+    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
+    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
+    --_rs-typography-link-border-bottom-width-from-text:1px;
+  }
+    @media screen and (max-width: 640px){
+    &:not(html) [data-rs-internal='vertical-switcher__option']{
+    --_rs-typography-list-li-margin-top-from-text:12px;
+  }
+  }
+}
+@define-mixin rs-vertical-switcher-size-l{
+  &:not(html){
+    --_rs-switcher-vertical-border-radius:12px;
+    --_rs-switcher-vertical-option-vertical-padding:12px;
+    --_rs-switcher-vertical-option-horizontal-padding:24px;
+    --_rs-switcher-vertical-icon-size:28px;
+    --_rs-switcher-vertical-icon-offset:12px;
+    --_rs-switcher-vertical-icon-margin-vertical:0px;
+  }
+    &:not(html) [data-rs-internal='vertical-switcher__option']{
+    --_rs-typography-letter-spacing:normal;
+    --_rs-typography-text-transform:initial;
+    --_rs-typography-font-variant-numeric:initial;
+    --_rs-typography-font-family:var(
+    --rs-font-family-ui,
+    var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
+  BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+  'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
+  );
+    --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
+    --_rs-typography-font-weight:var(
+    --rs-font-weight-regular,
+    400
+  );
+    --_rs-typography-line-height:var(
+    --rs-text-1-line-height,
+    28px
+  );
+    --_rs-typography-base-color:var(
+    --_rs-typography-hardness-color,
+    var(
+  --rs-color-average,
+  rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7)
+)
+  );
+    --_rs-typography-text-auto-offset:32px;
+    --_rs-typography-ul-list-li-padding-left:26px;
+    --_rs-typography-ol-list-li-padding-left:32px;
+    --_rs-typography-list-li-margin-top-from-text:24px;
+    --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
+    --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
+    --_rs-typography-link-border-bottom-width-from-text:1px;
+  }
+    @media screen and (max-width: 640px){
+    &:not(html) [data-rs-internal='vertical-switcher__option']{
+    --_rs-typography-list-li-margin-top-from-text:16px;
+  }
+  }
+}
+@define-mixin rs-vertical-switcher-mode-classic{
+  &:not(html){
+    --_rs-switcher-vertical-option-hover-background:var(
+    --_rs-color-primary-t-fog
+  );
+    --_rs-switcher-vertical-mark-border-color:var(--_rs-color-primary);
+  }
+}
+@define-mixin rs-vertical-switcher-mode-rock{
+  &:not(html){
+    --_rs-switcher-vertical-option-hover-background:rgba(
+    calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
+    0.1
+  );
+    --_rs-switcher-vertical-mark-border-color:rgb(
+    calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227)
+  );
+  }
+}
+@define-mixin rs-vertical-switcher-icon-position-left{
+  --_rs-switcher-vertical-option-flex-direction:row;
+}
+@define-mixin rs-vertical-switcher-icon-position-right{
+  --_rs-switcher-vertical-option-flex-direction:row-reverse;
+}

package/lib/switcher.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { useResizeObserver } from '@rescui/use-resize-observer';
-import styles from './index.p.module.css.js';
+import styles from './switcher.p.module.css.js';
 var sizeToClass = {
   l: styles.sizeL,
   m: styles.sizeM,
@@ -124,8 +124,10 @@ function Switcher(_ref2) {
     "data-e2e": e2eId,
     ref: containerRef,
     "data-rs-internal": 'switcher',
-    "data-test": "switcher".concat(disabled ? '-disabled' : '')
+    "data-test": cn("switcher", disabled && "switcher-disabled")
   }, _mapInstanceProperty(options).call(options, function (_ref3, index) {
+    var _options$activeIndex;
+
     var value = _ref3.value,
         label = _ref3.label,
         icon = _ref3.icon;
@@ -139,7 +141,7 @@ function Switcher(_ref2) {
         return onChange(value);
       },
       ref: handleOptionRef(index),
-      selected: switcherValue === value
+      selected: ((_options$activeIndex = options[activeIndex]) === null || _options$activeIndex === void 0 ? void 0 : _options$activeIndex.value) === value
     });
   }), /*#__PURE__*/React.createElement("span", {
     className: cn(styles.mark),

package/lib/switcher.p.module.css.js

@@ -0,0 +1,20 @@
+var styles = {
+  "themeLight": "_themeLight_1n7cu7x_6",
+  "themeDark": "_themeDark_1n7cu7x_9",
+  "sizeXS": "_sizeXS_1n7cu7x_13",
+  "sizeS": "_sizeS_1n7cu7x_16",
+  "sizeM": "_sizeM_1n7cu7x_19",
+  "sizeL": "_sizeL_1n7cu7x_22",
+  "modeClassic": "_modeClassic_1n7cu7x_26",
+  "modeRock": "_modeRock_1n7cu7x_29",
+  "compact": "_compact_1n7cu7x_33",
+  "switcher": "_switcher_1n7cu7x_37",
+  "disabled": "_disabled_1n7cu7x_55",
+  "alignIconLeft": "_alignIconLeft_1n7cu7x_60",
+  "alignIconRight": "_alignIconRight_1n7cu7x_63",
+  "option": "_option_1n7cu7x_67",
+  "selected": "_selected_1n7cu7x_116",
+  "icon": "_icon_1n7cu7x_135",
+  "mark": "_mark_1n7cu7x_148"
+};
+export { styles as default };

package/lib/vertical-switcher.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+export declare type VerticalSwitcherOptionIconPosition = 'left' | 'right';
+export declare type VerticalSwitcherSize = 'l' | 'm' | 's' | 'xs';
+export declare type VerticalSwitcherTheme = 'light' | 'dark';
+export declare type VerticalSwitcherMode = 'rock' | 'classic';
+export declare type VerticalSwitcherOption<OptionsValueType> = {
+    label?: React.ReactNode;
+    value: OptionsValueType;
+    /** Additional icon */
+    icon?: React.ReactNode;
+};
+export declare type VerticalSwitcherOptionForDocs = VerticalSwitcherOption<any>;
+export interface VerticalSwitcherProps<ValueType, OptionsValueType extends ValueType> {
+    /** Current selected value */
+    value: ValueType;
+    /** Array of options */
+    options?: VerticalSwitcherOption<OptionsValueType>[];
+    onChange: (value: OptionsValueType) => void;
+    className?: string;
+    theme?: VerticalSwitcherTheme;
+    size?: VerticalSwitcherSize;
+    /** Appearance mode */
+    mode?: VerticalSwitcherMode;
+    disabled?: boolean;
+    /** Identifier for e2e tests */
+    'data-e2e'?: string;
+    /** **Works only if the `icon` on options is present.** Additional icon position. */
+    iconPosition?: VerticalSwitcherOptionIconPosition;
+    /** CSS style object */
+    style?: React.CSSProperties;
+}
+export declare function VerticalSwitcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, ['data-e2e']: e2eId, options: rawOptions, value: switcherValue, mode, iconPosition, onChange, style }: VerticalSwitcherProps<ValueType, OptionsValueType>): JSX.Element;
+export declare namespace VerticalSwitcher {
+    var propTypes: {};
+}