@salutejs/plasma-new-hope 0.162.3-canary.1448.11254553277.0 → 0.162.3-dev.0

package/cjs/index.js

@@ -2,9 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./engines/index.js');
-var index$1 = require('./utils/index.js');
-var index$2 = require('./components/ButtonBase/index.js');
 var applyBlur = require('./mixins/applyBlur.js');
 var applyEllipsis = require('./mixins/applyEllipsis.js');
 var applySpacing = require('./mixins/applySpacing.js');
@@ -17,7 +14,7 @@ var applyRoundness = require('./mixins/applyRoundness.js');
 var applySkeletonGradient = require('./mixins/applySkeletonGradient.js');
 var applyDisabled = require('./mixins/applyDisabled.js');
 var applyHidden = require('./mixins/applyHidden.js');
-var common = require('./engines/common.js');
+var index = require('./engines/index.js');
 var useUniqId = require('./hooks/useUniqId.js');
 var useFocusTrap = require('./hooks/useFocusTrap.js');
 var usePreviousValue = require('./hooks/usePreviousValue.js');
@@ -25,16 +22,7 @@ var useForceUpdate = require('./hooks/useForceUpdate.js');
 var useDidMountEffect = require('./hooks/useDidMountEffect.js');
 var useOutsideClick = require('./hooks/useOutsideClick.js');
 var useIsomorphicLayoutEffect = require('./hooks/useIsomorphicLayoutEffect.js');
-var canUseDOM = require('./utils/canUseDOM.js');
-var extractTextFrom = require('./utils/extractTextFrom.js');
-var getSizeValueFromProp = require('./utils/getSizeValueFromProp.js');
-var react = require('./utils/react.js');
-var isNumber = require('./utils/isNumber.js');
-var setRefList = require('./utils/setRefList.js');
-var isEmpty = require('./utils/isEmpty.js');
-var noop = require('./utils/noop.js');
-var getPopoverPlacement = require('./utils/getPopoverPlacement.js');
-var constants = require('./utils/constants.js');
+var index$1 = require('./utils/index.js');
 var Button = require('./components/Button/Button.js');
 var Button_tokens = require('./components/Button/Button.tokens.js');
 var IconButton = require('./components/IconButton/IconButton.js');
@@ -71,8 +59,10 @@ var TextFieldGroup = require('./components/TextFieldGroup/TextFieldGroup.js');
 var TextFieldGroup_tokens = require('./components/TextFieldGroup/TextFieldGroup.tokens.js');
 var Switch = require('./components/Switch/Switch.js');
 var Switch_tokens = require('./components/Switch/Switch.tokens.js');
-var Tabs = require('./components/Tabs/ui/Tabs/Tabs.js');
-var TabItem = require('./components/Tabs/ui/TabItem/TabItem.js');
+var HorizontalTabs = require('./components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js');
+var HorizontalTabItem = require('./components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js');
+var VerticalTabs = require('./components/Tabs/ui/vertical/VerticalTabs/VerticalTabs.js');
+var VerticalTabItem = require('./components/Tabs/ui/vertical/VerticalTabItem/VerticalTabItem.js');
 var tokens = require('./components/Tabs/tokens.js');
 var TabsContext = require('./components/Tabs/TabsContext.js');
 var createTabsController = require('./components/Tabs/createTabsController.js');
@@ -81,7 +71,6 @@ var withRange = require('./components/Calendar/hoc/withRange.js');
 var CalendarBase = require('./components/Calendar/CalendarBase/CalendarBase.js');
 var CalendarDouble = require('./components/Calendar/CalendarDouble/CalendarDouble.js');
 var Calendar_tokens = require('./components/Calendar/Calendar.tokens.js');
-var tokens$1 = require('./components/Typography/tokens.js');
 var Body = require('./components/Typography/Body/Body.js');
 var Dspl = require('./components/Typography/Dspl/Dspl.js');
 var Heading = require('./components/Typography/Heading/Heading.js');
@@ -96,6 +85,7 @@ var Paragraph = require('./components/Typography/Old/Paragraph/Paragraph.js');
 var ParagraphText = require('./components/Typography/Old/ParagraphText/ParagraphText.js');
 var Underline = require('./components/Typography/Old/Underline/Underline.js');
 var Subtitle = require('./components/Typography/Old/Subtitle/Subtitle.js');
+var tokens$1 = require('./components/Typography/tokens.js');
 var PopupContext = require('./components/Popup/PopupContext.js');
 var Popup = require('./components/Popup/Popup.js');
 var usePopup = require('./components/Popup/hooks/usePopup.js');
@@ -107,10 +97,10 @@ var Notification = require('./components/Notification/Notification.js');
 var NotificationsStore = require('./components/Notification/NotificationsStore.js');
 var Notification_tokens = require('./components/Notification/Notification.tokens.js');
 var Drawer = require('./components/Drawer/Drawer.js');
-var Drawer_tokens = require('./components/Drawer/Drawer.tokens.js');
 var DrawerContent = require('./components/Drawer/ui/DrawerContent/DrawerContent.js');
 var DrawerFooter = require('./components/Drawer/ui/DrawerFooter/DrawerFooter.js');
 var DrawerHeader = require('./components/Drawer/ui/DrawerHeader/DrawerHeader.js');
+var Drawer_tokens = require('./components/Drawer/Drawer.tokens.js');
 var Dropdown = require('./components/Dropdown/Dropdown.js');
 var Dropdown_tokens = require('./components/Dropdown/Dropdown.tokens.js');
 var useKeyboardNavigation = require('./components/Dropdown/hooks/useKeyboardNavigation.js');
@@ -125,8 +115,8 @@ var DropdownOld = require('./components/Dropdown/ui/DropdownOld/DropdownOld.js')
 var DropdownOld_tokens = require('./components/Dropdown/ui/DropdownOld/DropdownOld.tokens.js');
 var Tooltip = require('./components/Tooltip/Tooltip.js');
 var Tooltip_tokens = require('./components/Tooltip/Tooltip.tokens.js');
-var SegmentItem = require('./components/Segment/ui/SegmentItem/SegmentItem.js');
 var SegmentGroup = require('./components/Segment/ui/SegmentGroup/SegmentGroup.js');
+var SegmentItem = require('./components/Segment/ui/SegmentItem/SegmentItem.js');
 var SegmentProvider = require('./components/Segment/SegmentProvider/SegmentProvider.js');
 var tokens$2 = require('./components/Segment/tokens.js');
 var LineSkeleton = require('./components/Skeleton/LineSkeleton/LineSkeleton.js');
@@ -151,22 +141,23 @@ var Toast_tokens = require('./components/Toast/Toast.tokens.js');
 var Overlay = require('./components/Overlay/Overlay.js');
 var SSRProvider = require('./components/SSRProvider/SSRProvider.js');
 var Combobox = require('./components/Combobox/ComboboxOld/Combobox.js');
+var Combobox_tokens = require('./components/Combobox/ComboboxOld/Combobox.tokens.js');
 var ComboboxDivider = require('./components/Combobox/ComboboxOld/ui/ComboboxDivider/ComboboxDivider.js');
 var ComboboxFooter = require('./components/Combobox/ComboboxOld/ui/ComboboxFooter/ComboboxFooter.js');
 var ComboboxGroup = require('./components/Combobox/ComboboxOld/ui/ComboboxGroup/ComboboxGroup.js');
 var ComboboxHeader = require('./components/Combobox/ComboboxOld/ui/ComboboxHeader/ComboboxHeader.js');
 var ComboboxItem = require('./components/Combobox/ComboboxOld/ui/ComboboxItem/ComboboxItem.js');
 var ComboboxTarget = require('./components/Combobox/ComboboxOld/ui/ComboboxTarget/ComboboxTarget.js');
-var Combobox_tokens = require('./components/Combobox/ComboboxOld/Combobox.tokens.js');
-var Combobox_tokens$1 = require('./components/Combobox/ComboboxNew/Combobox.tokens.js');
 var Combobox$1 = require('./components/Combobox/ComboboxNew/Combobox.js');
+var Combobox_tokens$1 = require('./components/Combobox/ComboboxNew/Combobox.tokens.js');
 var Indicator = require('./components/Indicator/Indicator.js');
 var Indicator_tokens = require('./components/Indicator/Indicator.tokens.js');
+var index$2 = require('./components/ButtonBase/index.js');
 var Grid = require('./components/Grid/Grid.js');
 var Grid_tokens = require('./components/Grid/Grid.tokens.js');
-var index$3 = require('./components/Grid/utils/index.js');
 var Row = require('./components/Grid/ui/Row/Row.js');
 var Col = require('./components/Grid/ui/Col/Col.js');
+var index$3 = require('./components/Grid/utils/index.js');
 var Progress = require('./components/Progress/Progress.js');
 var Progress_tokens = require('./components/Progress/Progress.tokens.js');
 var Select = require('./components/Select/Select.js');
@@ -180,7 +171,10 @@ var Sheet = require('./components/Sheet/Sheet.js');
 var Sheet_tokens = require('./components/Sheet/Sheet.tokens.js');
 var Slider = require('./components/Slider/Slider.js');
 var Slider_tokens = require('./components/Slider/Slider.tokens.js');
+require('react');
+require('react-draggable');
 var Thumb_styles = require('./components/Slider/ui/Thumb/Thumb.styles.js');
+require('@linaria/react');
 var Steps = require('./components/Steps/Steps.js');
 var Steps_tokens = require('./components/Steps/Steps.tokens.js');
 var Range = require('./components/Range/Range.js');
@@ -203,13 +197,20 @@ var Editable_tokens = require('./components/Editable/Editable.tokens.js');
 var Mask = require('./components/Mask/Mask.js');
 var Attach = require('./components/Attach/Attach.js');
 var Attach_tokens = require('./components/Attach/Attach.tokens.js');
+var common = require('./engines/common.js');
+var canUseDOM = require('./utils/canUseDOM.js');
+var extractTextFrom = require('./utils/extractTextFrom.js');
+var getSizeValueFromProp = require('./utils/getSizeValueFromProp.js');
+var react = require('./utils/react.js');
+var isNumber = require('./utils/isNumber.js');
+var setRefList = require('./utils/setRefList.js');
+var isEmpty = require('./utils/isEmpty.js');
+var noop = require('./utils/noop.js');
+var getPopoverPlacement = require('./utils/getPopoverPlacement.js');
+var constants = require('./utils/constants.js');
 
 
 
-exports.css = index.css;
-exports.composableStyle = index$1.composableStyle;
-exports.cx = index$1.cx;
-exports.ButtonBase = index$2.ButtonBase;
 exports.applyBlur = applyBlur.applyBlur;
 exports.blurs = applyBlur.blurs;
 exports.applyEllipsis = applyEllipsis.applyEllipsis;
@@ -285,8 +286,7 @@ exports.applySkeletonGradient = applySkeletonGradient.applySkeletonGradient;
 exports.getSkeletonColor = applySkeletonGradient.getSkeletonColor;
 exports.applyDisabled = applyDisabled.applyDisabled;
 exports.applyHidden = applyHidden.applyHidden;
-exports.component = common.component;
-exports.mergeConfig = common.mergeConfig;
+exports.css = index.css;
 exports.useUniqId = useUniqId.useUniqId;
 exports.useFocusTrap = useFocusTrap.useFocusTrap;
 exports.usePreviousValue = usePreviousValue.usePreviousValue;
@@ -294,19 +294,8 @@ exports.useForceUpdate = useForceUpdate.useForceUpdate;
 exports.useDidMountEffect = useDidMountEffect.useDidMountEffect;
 exports.useOutsideClick = useOutsideClick.useOutsideClick;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
-exports.canUseDOM = canUseDOM.canUseDOM;
-exports.extractTextFrom = extractTextFrom.extractTextFrom;
-exports.getSizeValueFromProp = getSizeValueFromProp.getSizeValueFromProp;
-exports.IS_REACT_18 = react.IS_REACT_18;
-exports.safeUseId = react.safeUseId;
-exports.isNumber = isNumber.isNumber;
-exports.mergeRefs = setRefList.mergeRefs;
-exports.setRefList = setRefList.setRefList;
-exports.isEmpty = isEmpty.isEmpty;
-exports.noop = noop.noop;
-exports.getPlacement = getPopoverPlacement.getPlacement;
-exports.getPlacements = getPopoverPlacement.getPlacements;
-exports.constants = constants;
+exports.composableStyle = index$1.composableStyle;
+exports.cx = index$1.cx;
 exports.buttonConfig = Button.buttonConfig;
 exports.buttonRoot = Button.buttonRoot;
 exports.buttonClasses = Button_tokens.classes;
@@ -368,10 +357,14 @@ exports.textFieldGroupTokens = TextFieldGroup_tokens.tokens;
 exports.switchConfig = Switch.switchConfig;
 exports.switchRoot = Switch.switchRoot;
 exports.switchTokens = Switch_tokens.tokens;
-exports.tabsConfig = Tabs.tabsConfig;
-exports.tabsRoot = Tabs.tabsRoot;
-exports.tabItemConfig = TabItem.tabItemConfig;
-exports.tabItemRoot = TabItem.tabItemRoot;
+exports.horizontalTabsConfig = HorizontalTabs.horizontalTabsConfig;
+exports.horizontalTabsRoot = HorizontalTabs.horizontalTabsRoot;
+exports.horizontalTabItemConfig = HorizontalTabItem.horizontalTabItemConfig;
+exports.horizontalTabItemRoot = HorizontalTabItem.horizontalTabItemRoot;
+exports.verticalTabsConfig = VerticalTabs.verticalTabsConfig;
+exports.verticalTabsRoot = VerticalTabs.verticalTabsRoot;
+exports.verticalTabItemConfig = VerticalTabItem.verticalTabItemConfig;
+exports.verticalTabItemRoot = VerticalTabItem.verticalTabItemRoot;
 exports.tabsTokens = tokens.tokens;
 exports.TabItemRefs = TabsContext.TabItemRefs;
 exports.TabsContext = TabsContext.TabsContext;
@@ -384,7 +377,6 @@ exports.calendarDoubleConfig = CalendarDouble.calendarDoubleConfig;
 exports.calendarDoubleRoot = CalendarDouble.calendarDoubleRoot;
 exports.calendarBaseTokens = Calendar_tokens.tokens;
 exports.calendarDoubleTokens = Calendar_tokens.tokens;
-exports.typographyTokens = tokens$1.tokens;
 exports.bodyConfig = Body.bodyConfig;
 exports.bodyRoot = Body.bodyRoot;
 exports.dsplConfig = Dspl.dsplConfig;
@@ -413,6 +405,7 @@ exports.underlineConfig = Underline.underlineConfig;
 exports.underlineRoot = Underline.underlineRoot;
 exports.subtitleConfig = Subtitle.subtitleConfig;
 exports.subtitleRoot = Subtitle.subtitleRoot;
+exports.typographyTokens = tokens$1.tokens;
 exports.PopupProvider = PopupContext.PopupProvider;
 exports.usePopupContext = PopupContext.usePopupContext;
 exports.popupConfig = Popup.popupConfig;
@@ -432,14 +425,14 @@ exports.notificationClasses = Notification_tokens.classes;
 exports.notificationTokens = Notification_tokens.tokens;
 exports.drawerConfig = Drawer.drawerConfig;
 exports.drawerRoot = Drawer.drawerRoot;
-exports.drawerClasses = Drawer_tokens.classes;
-exports.drawerTokens = Drawer_tokens.tokens;
 exports.drawerContentConfig = DrawerContent.drawerContentConfig;
 exports.drawerContentRoot = DrawerContent.drawerContentRoot;
 exports.drawerFooterConfig = DrawerFooter.drawerFooterConfig;
 exports.drawerFooterRoot = DrawerFooter.drawerFooterRoot;
 exports.drawerHeaderConfig = DrawerHeader.drawerHeaderConfig;
 exports.drawerHeaderRoot = DrawerHeader.drawerHeaderRoot;
+exports.drawerClasses = Drawer_tokens.classes;
+exports.drawerTokens = Drawer_tokens.tokens;
 exports.dropdownConfig = Dropdown.dropdownConfig;
 exports.dropdownRoot = Dropdown.dropdownRoot;
 exports.dropdownClasses = Dropdown_tokens.classes;
@@ -463,10 +456,10 @@ exports.dropdownOldTokens = DropdownOld_tokens.tokens;
 exports.tooltipConfig = Tooltip.tooltipConfig;
 exports.tooltipRoot = Tooltip.tooltipRoot;
 exports.tooltipTokens = Tooltip_tokens.tokens;
-exports.segmentItemConfig = SegmentItem.segmentItemConfig;
-exports.segmentItemRoot = SegmentItem.segmentItemRoot;
 exports.segmentGroupConfig = SegmentGroup.segmentGroupConfig;
 exports.segmentGroupRoot = SegmentGroup.segmentGroupRoot;
+exports.segmentItemConfig = SegmentItem.segmentItemConfig;
+exports.segmentItemRoot = SegmentItem.segmentItemRoot;
 exports.SegmentProvider = SegmentProvider.SegmentProvider;
 exports.useSegment = SegmentProvider.useSegment;
 exports.segmentClasses = tokens$2.classes;
@@ -508,6 +501,8 @@ exports.SSRContext = SSRProvider.SSRContext;
 exports.SSRProvider = SSRProvider.SSRProvider;
 exports.comboboxOldConfig = Combobox.comboboxConfig;
 exports.comboboxOldRoot = Combobox.comboboxRoot;
+exports.comboboxOldClasses = Combobox_tokens.classes;
+exports.comboboxOldTokens = Combobox_tokens.tokens;
 exports.comboboxDividerConfig = ComboboxDivider.comboboxDividerConfig;
 exports.comboboxDividerRoot = ComboboxDivider.comboboxDividerRoot;
 exports.comboboxFooterConfig = ComboboxFooter.comboboxFooterConfig;
@@ -519,20 +514,19 @@ exports.comboboxHeaderRoot = ComboboxHeader.comboboxHeaderRoot;
 exports.comboboxItemConfig = ComboboxItem.comboboxItemConfig;
 exports.comboboxItemRoot = ComboboxItem.comboboxItemRoot;
 exports.ComboboxTarget = ComboboxTarget.ComboboxTarget;
-exports.comboboxOldClasses = Combobox_tokens.classes;
-exports.comboboxOldTokens = Combobox_tokens.tokens;
-exports.comboboxNewTokens = Combobox_tokens$1.tokens;
 exports.comboboxNewConfig = Combobox$1.comboboxConfig;
 exports.comboboxNewRoot = Combobox$1.comboboxRoot;
+exports.comboboxNewTokens = Combobox_tokens$1.tokens;
 exports.indicatorConfig = Indicator.indicatorConfig;
 exports.indicatorRoot = Indicator.indicatorRoot;
 exports.indicatorTokens = Indicator_tokens.tokens;
+exports.ButtonBase = index$2.ButtonBase;
 exports.gridConfig = Grid.gridConfig;
 exports.gridRoot = Grid.gridRoot;
 exports.gridTokens = Grid_tokens.tokens;
-exports.getBaseGridView = index$3.getBaseGridView;
 exports.Row = Row.Row;
 exports.Col = Col.Col;
+exports.getBaseGridView = index$3.getBaseGridView;
 exports.progressConfig = Progress.progressConfig;
 exports.progressRoot = Progress.progressRoot;
 exports.progressTokens = Progress_tokens.tokens;
@@ -590,4 +584,19 @@ exports.composeMask = Mask.composeMask;
 exports.attachConfig = Attach.attachConfig;
 exports.attachRoot = Attach.attachRoot;
 exports.attachTokens = Attach_tokens.tokens;
+exports.component = common.component;
+exports.mergeConfig = common.mergeConfig;
+exports.canUseDOM = canUseDOM.canUseDOM;
+exports.extractTextFrom = extractTextFrom.extractTextFrom;
+exports.getSizeValueFromProp = getSizeValueFromProp.getSizeValueFromProp;
+exports.IS_REACT_18 = react.IS_REACT_18;
+exports.safeUseId = react.safeUseId;
+exports.isNumber = isNumber.isNumber;
+exports.mergeRefs = setRefList.mergeRefs;
+exports.setRefList = setRefList.setRefList;
+exports.isEmpty = isEmpty.isEmpty;
+exports.noop = noop.noop;
+exports.getPlacement = getPopoverPlacement.getPlacement;
+exports.getPlacements = getPopoverPlacement.getPlacements;
+exports.constants = constants;
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/utils/index.js

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('react');
+var react = require('./react.js');
+
 var cx = function cx() {
   for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
     classes[_key] = arguments[_key];
@@ -20,6 +23,8 @@ var composableStyle = function composableStyle(s) {
   return res;
 };
 
+exports.IS_REACT_18 = react.IS_REACT_18;
+exports.safeUseId = react.safeUseId;
 exports.composableStyle = composableStyle;
 exports.cx = cx;
 //# sourceMappingURL=index.js.map

package/cjs/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from '@linaria/core';\n\nexport { canUseDOM } from './canUseDOM';\nexport { extractTextFrom } from './extractTextFrom';\nexport { getSizeValueFromProp } from './getSizeValueFromProp';\nexport { IS_REACT_18, safeUseId } from './react';\nexport { isNumber } from './isNumber';\nexport { mergeRefs, setRefList } from './setRefList';\nexport { isEmpty } from './isEmpty';\nexport * as constants from './constants';\nexport * from './getPopoverPlacement';\nexport { noop } from './noop';\n\nexport const cx = (...classes: (string | undefined)[]) => classes.filter((classItem) => classItem).join(' ');\n\nexport const composableStyle = (s: TemplateStringsArray, ...expr: Array<string | number | CSSProperties>): string => {\n    let res = '';\n    for (let i = 0; i < Math.max(s.length, expr.length); ++i) {\n        res += s[i] ?? '';\n        res += expr[i] ?? '';\n    }\n\n    return res;\n};\n"],"names":["cx","_len","arguments","length","classes","Array","_key","filter","classItem","join","composableStyle","s","res","i","Math","max","_s$i","_ref","undefined"],"mappings":";;;;AAaaA,IAAAA,EAAE,GAAG,SAALA,EAAEA,GAAA;AAAA,EAAA,KAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAOC,OAAO,GAAAC,IAAAA,KAAA,CAAAJ,IAAA,GAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAAPF,IAAAA,OAAO,CAAAE,IAAA,CAAAJ,GAAAA,SAAA,CAAAI,IAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,OAA6BF,OAAO,CAACG,MAAM,CAAC,UAACC,SAAS,EAAA;AAAA,IAAA,OAAKA,SAAS,CAAA;AAAA,GAAA,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;AAAA,EAAA;IAE/FC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,CAAuB,EAA8D;EACjH,IAAIC,GAAG,GAAG,EAAE,CAAA;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACJ,CAAC,CAACR,MAAM,EAAAD,SAAA,CAAAC,MAAA,IAAA,CAAA,GAAA,CAAA,GAAAD,SAAA,CAAAC,MAAA,GAAA,CAAa,CAAC,EAAE,EAAEU,CAAC,EAAE;IAAA,IAAAG,IAAA,EAAAC,IAAA,CAAA;AACtDL,IAAAA,GAAG,IAAAI,CAAAA,IAAA,GAAIL,CAAC,CAACE,CAAC,CAAC,MAAA,IAAA,IAAAG,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAI,EAAE,CAAA;IACjBJ,GAAG,IAAA,CAAAK,IAAA,GAASJ,CAAC,YAAAX,SAAA,CAAAC,MAAA,IAADU,CAAC,OAAAK,SAAA,GAAAhB,SAAA,CAADW,CAAC,mBAAAI,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAK,EAAE,CAAA;AACxB,GAAA;AAEA,EAAA,OAAOL,GAAG,CAAA;AACd;;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/utils/index.ts"],"sourcesContent":["import { CSSProperties } from '@linaria/core';\n\nexport { canUseDOM } from './canUseDOM';\nexport { extractTextFrom } from './extractTextFrom';\nexport { getSizeValueFromProp } from './getSizeValueFromProp';\nexport { IS_REACT_18, safeUseId } from './react';\nexport { isNumber } from './isNumber';\nexport { mergeRefs, setRefList } from './setRefList';\nexport { isEmpty } from './isEmpty';\nexport * as constants from './constants';\nexport * from './getPopoverPlacement';\nexport { noop } from './noop';\n\nexport const cx = (...classes: (string | undefined)[]) => classes.filter((classItem) => classItem).join(' ');\n\nexport const composableStyle = (s: TemplateStringsArray, ...expr: Array<string | number | CSSProperties>): string => {\n    let res = '';\n    for (let i = 0; i < Math.max(s.length, expr.length); ++i) {\n        res += s[i] ?? '';\n        res += expr[i] ?? '';\n    }\n\n    return res;\n};\n"],"names":["cx","_len","arguments","length","classes","Array","_key","filter","classItem","join","composableStyle","s","res","i","Math","max","_s$i","_ref","undefined"],"mappings":";;;;;;;AAaaA,IAAAA,EAAE,GAAG,SAALA,EAAEA,GAAA;AAAA,EAAA,KAAA,IAAAC,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAOC,OAAO,GAAAC,IAAAA,KAAA,CAAAJ,IAAA,GAAAK,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA,EAAA,EAAA;AAAPF,IAAAA,OAAO,CAAAE,IAAA,CAAAJ,GAAAA,SAAA,CAAAI,IAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,OAA6BF,OAAO,CAACG,MAAM,CAAC,UAACC,SAAS,EAAA;AAAA,IAAA,OAAKA,SAAS,CAAA;AAAA,GAAA,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,CAAA;AAAA,EAAA;IAE/FC,eAAe,GAAG,SAAlBA,eAAeA,CAAIC,CAAuB,EAA8D;EACjH,IAAIC,GAAG,GAAG,EAAE,CAAA;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACJ,CAAC,CAACR,MAAM,EAAAD,SAAA,CAAAC,MAAA,IAAA,CAAA,GAAA,CAAA,GAAAD,SAAA,CAAAC,MAAA,GAAA,CAAa,CAAC,EAAE,EAAEU,CAAC,EAAE;IAAA,IAAAG,IAAA,EAAAC,IAAA,CAAA;AACtDL,IAAAA,GAAG,IAAAI,CAAAA,IAAA,GAAIL,CAAC,CAACE,CAAC,CAAC,MAAA,IAAA,IAAAG,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAI,EAAE,CAAA;IACjBJ,GAAG,IAAA,CAAAK,IAAA,GAASJ,CAAC,YAAAX,SAAA,CAAAC,MAAA,IAADU,CAAC,OAAAK,SAAA,GAAAhB,SAAA,CAADW,CAAC,mBAAAI,IAAA,KAAA,KAAA,CAAA,GAAAA,IAAA,GAAK,EAAE,CAAA;AACxB,GAAA;AAEA,EAAA,OAAOL,GAAG,CAAA;AACd;;;;;;;"}

package/emotion/cjs/components/Tabs/Tabs.template-doc.mdx

@@ -15,6 +15,11 @@ import { PropsTable, Description } from '@site/src/components';
 <Description name="TabItem" />
 <PropsTable name="TabItem" />
 
+:::caution Взаимоисключающие свойства
+Свойство `value` - это значение таба. Оно отображается справа от основного текста.<br/>
+`value` и `contentRight` взаимоисключающие: если передано одно, второе передать нельзя.
+:::
+
 ## TabsController (deprecated)
 Вместо этого используйте Tabs, TabItem, указав параметры index, itemIndex, onIndexChange.
 
@@ -56,6 +61,41 @@ export function App() {
 }
 ```
 
+### Расположение табов
+Табы могут быть горизонтальными (по умолчанию) и вертикальными. За это отвечает свойство `orientation`.
+
+```tsx live
+import React, { useState } from 'react';
+import { Tabs, TabItem } from '@salutejs/{{ package }}';
+import { IconClock } from '@salutejs/plasma-icons';
+
+export function App() {
+    const items = Array(8).fill(0);
+    const [index, setIndex] = useState(0);
+
+    return (
+        <div>
+            <Tabs view="divider" orientation="vertical" size="xs" style=\{{ width: '15rem' }}>
+                {items.map((_, i) => (
+                    <TabItem
+                        view="divider"
+                        orientation="vertical"
+                        key={`item:${i}`}
+                        size="xs"
+                        selected={i === index}
+                        tabIndex={0}
+                        contentLeft={<IconClock size="xs" color="inherit" />}
+                        onClick={() => setIndex(i)}
+                    >
+                        {`Label${i + 1}`}
+                    </TabItem>
+                ))}
+            </Tabs>
+        </div>
+    );
+}
+```
+
 ### Пример с прокруткой
 
 ```tsx live
@@ -143,8 +183,9 @@ export function App() {
 ```
 
 ### Подключение клавиатурной навигации
-Для этого необходимо дополнительно прокинуть свойства `index, itemIndex, onIndexChange`.
-Клавиши ArrowLeft, ArrowRight, Home, End для навигации по вкладкам.
+Для этого необходимо дополнительно прокинуть свойства `index, itemIndex, onIndexChange`.<br/>
+Для горизонтальных табов: клавиши ArrowLeft, ArrowRight, Home, End для навигации по вкладкам.<br/>
+Для вертикальных табов: клавиши ArrowUp, ArrowDown, Home, End для навигации по вкладкам.
 
 ```tsx live
 import React, { useState } from 'react';
@@ -153,27 +194,51 @@ import { IconClock } from '@salutejs/plasma-icons';
 
 export function App() {
     const items = Array(4).fill(0);
-    const [index, setIndex] = useState(0);
+    const [horizontalIndex, setHorizontalIndex] = useState(0);
+    const [verticalIndex, setVerticalIndex] = useState(0);
 
     return (
-        <div>
-            <Tabs view="filled" stretch size="xs" index={index}>
-                {items.map((_, i) => (
-                    <TabItem
-                        view="secondary"
-                        key={`item:${i}`}
-                        size="xs"
-                        itemIndex={i}
-                        onIndexChange={(i) => setIndex(i)}
-                        selected={i === index}
-                        tabIndex={0}
-                        contentLeft={<IconClock size="xs" color="inherit" />}
-                        onClick={() => setIndex(i)}
-                    >
-                        {`Label${i + 1}`}
-                    </TabItem>
-                ))}
-            </Tabs>
+        <div style=\{{ display: "flex", flexDirection: "column", gap: "50px"}}>
+            <div>
+                <Tabs view="divider" stretch size="xs" index={horizontalIndex}>
+                    {items.map((_, i) => (
+                        <TabItem
+                            view="divider"
+                            key={`item:${i}`}
+                            size="xs"
+                            itemIndex={i}
+                            onIndexChange={(i) => setHorizontalIndex(i)}
+                            selected={i === horizontalIndex}
+                            tabIndex={0}
+                            contentLeft={<IconClock size="xs" color="inherit" />}
+                            onClick={() => setHorizontalIndex(i)}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    ))}
+                </Tabs>
+            </div>
+
+            <div>
+                <Tabs orientation="vertical" view="divider" size="xs" index={verticalIndex}>
+                    {items.map((_, i) => (
+                        <TabItem
+                            orientation="vertical"
+                            view="divider"
+                            key={`item:${i}`}
+                            size="xs"
+                            itemIndex={i}
+                            onIndexChange={(i) => setVerticalIndex(i)}
+                            selected={i === verticalIndex}
+                            tabIndex={0}
+                            contentLeft={<IconClock size="xs" color="inherit" />}
+                            onClick={() => setVerticalIndex(i)}
+                        >
+                            {`Label${i + 1}`}
+                        </TabItem>
+                    ))}
+                </Tabs>
+            </div>
         </div>
     );
 }

package/emotion/cjs/components/Tabs/index.js

@@ -21,28 +21,28 @@ Object.defineProperty(exports, "createTabsController", {
     return _createTabsController.createTabsController;
   }
 });
-Object.defineProperty(exports, "tabItemConfig", {
+Object.defineProperty(exports, "horizontalTabItemConfig", {
   enumerable: true,
   get: function get() {
-    return _TabItem.tabItemConfig;
+    return _HorizontalTabItem.horizontalTabItemConfig;
   }
 });
-Object.defineProperty(exports, "tabItemRoot", {
+Object.defineProperty(exports, "horizontalTabItemRoot", {
   enumerable: true,
   get: function get() {
-    return _TabItem.tabItemRoot;
+    return _HorizontalTabItem.horizontalTabItemRoot;
   }
 });
-Object.defineProperty(exports, "tabsConfig", {
+Object.defineProperty(exports, "horizontalTabsConfig", {
   enumerable: true,
   get: function get() {
-    return _Tabs.tabsConfig;
+    return _HorizontalTabs.horizontalTabsConfig;
   }
 });
-Object.defineProperty(exports, "tabsRoot", {
+Object.defineProperty(exports, "horizontalTabsRoot", {
   enumerable: true,
   get: function get() {
-    return _Tabs.tabsRoot;
+    return _HorizontalTabs.horizontalTabsRoot;
   }
 });
 Object.defineProperty(exports, "tabsTokens", {
@@ -51,8 +51,34 @@ Object.defineProperty(exports, "tabsTokens", {
     return _tokens.tokens;
   }
 });
-var _Tabs = /*#__PURE__*/require("./ui/Tabs/Tabs");
-var _TabItem = /*#__PURE__*/require("./ui/TabItem/TabItem");
+Object.defineProperty(exports, "verticalTabItemConfig", {
+  enumerable: true,
+  get: function get() {
+    return _VerticalTabItem.verticalTabItemConfig;
+  }
+});
+Object.defineProperty(exports, "verticalTabItemRoot", {
+  enumerable: true,
+  get: function get() {
+    return _VerticalTabItem.verticalTabItemRoot;
+  }
+});
+Object.defineProperty(exports, "verticalTabsConfig", {
+  enumerable: true,
+  get: function get() {
+    return _VerticalTabs.verticalTabsConfig;
+  }
+});
+Object.defineProperty(exports, "verticalTabsRoot", {
+  enumerable: true,
+  get: function get() {
+    return _VerticalTabs.verticalTabsRoot;
+  }
+});
+var _HorizontalTabs = /*#__PURE__*/require("./ui/horizontal/HorizontalTabs/HorizontalTabs");
+var _HorizontalTabItem = /*#__PURE__*/require("./ui/horizontal/HorizontalTabItem/HorizontalTabItem");
+var _VerticalTabs = /*#__PURE__*/require("./ui/vertical/VerticalTabs/VerticalTabs");
+var _VerticalTabItem = /*#__PURE__*/require("./ui/vertical/VerticalTabItem/VerticalTabItem");
 var _tokens = /*#__PURE__*/require("./tokens");
 var _TabsContext = /*#__PURE__*/require("./TabsContext");
 var _createTabsController = /*#__PURE__*/require("./createTabsController");

package/emotion/cjs/components/Tabs/tokens.js

@@ -9,6 +9,7 @@ var classes = exports.classes = {
   tabsPilled: 'tabs-pilled',
   tabsGroupFilledBackground: 'tabs-group-filled-background',
   tabsStretch: 'tabs-stretched',
+  tabsNoDivider: 'tabs-no-divider',
   tabItemDivider: 'tab-item-divider',
   tabItemAnimated: 'tab-item-animated',
   tabContent: 'tab-item-content',
@@ -16,18 +17,23 @@ var classes = exports.classes = {
   tabLeftContent: 'tab-item-left-content',
   tabsHasLeftArrow: 'tabs-has-left-arrow',
   tabsHasRightArrow: 'tabs-has-right-arrow',
+  tabsHasTopArrow: 'tabs-has-top-arrow',
+  tabsHasBottomArrow: 'tabs-has-bottom-arrow',
   tabsClipScroll: 'tabs-clip-scroll',
   tabsClipShowAll: 'tabs-clip-show-all'
 };
 var tokens = exports.tokens = {
   disabledOpacity: '--plasma-tabs-disabled-opacity',
   containerWidth: '--plasma-tabs-container-width',
+  containerHeight: '--plasma-tabs-container-height',
   cursor: '--plasma-tabs-cursor',
   color: '--plasma-tabs-color',
   colorHover: '--plasma-tabs-color-hover',
+  tabsDividerWidth: '--plasma-tabs-divider-width',
   tabsDividerHeight: '--plasma-tabs-divider-height',
   tabsDividerColor: '--plasma-tabs-divider-color',
   tabsDividerBorderRadius: '--plasma-tabs-divider-border-radius',
+  itemSelectedDividerWidth: '--plasma-tab-item-selected-divider-width',
   itemSelectedDividerHeight: '--plasma-tab-item-selected-divider-height',
   itemSelectedDividerColor: '--plasma-tab-item-selected-divider-color',
   itemSelectedDividerColorHover: '--plasma-tab-item-selected-hover-divider-color',
@@ -47,6 +53,7 @@ var tokens = exports.tokens = {
   itemPadding: '--plasma-tab-item-padding',
   itemPaddingClear: '--plasma-tab-item-padding-clear',
   itemPaddingPilled: '--plasma-tab-item-padding-pilled',
+  itemPaddingOrientationVertical: '--plasma-tab-item-padding-orientation-vertical',
   itemMarginLeft: '--plasma-tab-item-margin-left',
   itemMarginLeftFilled: '--plasma-tab-item-margin-left-filled',
   itemContentGap: '--plasma-tab-item-content-gap',
@@ -56,19 +63,20 @@ var tokens = exports.tokens = {
   arrowOuterPadding: '--plasma-tab-arrow-outer-padding',
   arrowViewOuterPadding: '--plasma-tab-arrow-view-outer-padding',
   itemColor: '--plasma-tab-item-color',
+  itemValueColor: '--plasma-tab-item-value-color',
   itemBackgroundColor: '--plasma-tab-item-background-color',
   itemColorHover: '--plasma-tab-item-color-hover',
+  itemValueColorHover: '--plasma-tab-item-value-color-hover',
   itemColorActive: '--plasma-tab-item-color-active',
+  itemValueColorActive: '--plasma-tab-item-value-color-active',
   itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',
   itemSelectedColor: '--plasma-tab-item-selected-color',
+  itemSelectedValueColor: '--plasma-tab-item-selected-value-color',
   itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',
   itemSelectedColorHover: '--plasma-tab-item-selected-color-hover',
+  itemSelectedValueColorHover: '--plasma-tab-item-selected-value-color-hover',
   itemSelectedBackgroundColorHover: '--plasma-tab-item-selected-background-color-hover',
   itemBackgroundTransition: '--plasma-tab-item-background-transition',
-  additionalContentColor: '--plasma-tab-item-additional-content-color',
-  additionalContentHoverColor: '--plasma-tab-item-hover-additional-content-color',
-  additionalContentSelectedColor: '--plasma-tab-item-selected-additional-content-color',
-  additionalContentSelectedHoverColor: '--plasma-tab-item-selected-hover-additional-content-color',
   fontFamily: '--plasma-tab-item-font-family',
   fontSize: '--plasma-tab-item-font-size',
   fontStyle: '--plasma-tab-item-font-style',