@redneckz/wildless-cms-uni-blocks 0.7.5 → 0.7.7

package/src/components/Footer/MediaButton.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
 import { Img } from '../../ui-kit/Img/Img';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import type { Picture } from '../../model/Picture';
 import type { IconVersion } from '../../model/IconVersion';
+import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 const ICONS_MAP: Array<{
   origins: string[];
@@ -45,11 +46,9 @@ const ICONS_MAP: Array<{
 
 export type ButtonSize = 'default' | 'small';
 
-interface MediaButtonProps {
-  href?: string;
-  isRounded?: boolean;
-  buttonSize?: ButtonSize;
+interface MediaButtonProps extends ButtonProps {
   iconVersion?: IconVersion;
+  buttonSize?: ButtonSize;
 }
 
 const buttonSizeStyles = {
@@ -58,29 +57,32 @@ const buttonSizeStyles = {
 };
 
 export const MediaButton = JSX<MediaButtonProps>(
-  ({ isRounded = false, buttonSize = 'default', iconVersion = 'color', ...rest }) => {
-    const link = useLink();
-    const { href, onClick } = link(rest);
+  ({ iconVersion = 'color', buttonSize = 'default', rounded = false, ...rest }) => {
+    const { href, version } = rest;
 
     const { icon, label } =
       ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
     const iconWithVersion = icon ? { ...getIconWithVersion(icon), iconVersion } : null;
 
-    return icon ? (
-      <a
+    return (
+      <Button
         className={style(
           'group/media flex items-center justify-center box-border',
           buttonSizeStyles[buttonSize],
-          isRounded ? 'rounded-full' : 'rounded-md',
-          'border-solid border border-main-divider hover:border-transparent',
+          rounded ? 'rounded-full' : 'rounded-md',
+          'border border-solid hover:border-transparent',
+          'group-data-primary:border-main-divider',
           'hover:bg-primary-main hover:text-black',
-          'group-data-secondary:bg-white group-data-secondary:hover:bg-secondary-hover',
+          'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover',
+          'group-data-gray:border-green',
+
+          buttonSizeStyles[buttonSize],
         )}
-        href={href}
         aria-label={label}
         target="_blank"
         rel="noopener noreferrer"
-        onClick={onClick}
+        version={version}
+        {...rest}
       >
         {iconWithVersion ? (
           <Img
@@ -91,7 +93,7 @@ export const MediaButton = JSX<MediaButtonProps>(
             asSVG
           />
         ) : null}
-      </a>
-    ) : null;
+      </Button>
+    );
   },
 );

package/src/components/Footer/SocialMedia.tsx

@@ -1,20 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { LinkProps } from '../../model/LinkProps';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { MediaButton, type ButtonSize } from './MediaButton';
 
 export interface SocialMediaProps {
   className?: string;
-  media?: LinkProps[];
-  isRounded?: boolean;
+  media?: ButtonProps[];
   buttonSize?: ButtonSize;
 }
 
 export const SocialMedia = JSX<SocialMediaProps>(
-  ({ className = '', media, isRounded = false, buttonSize, children }) => (
+  ({ className = '', media, children, buttonSize }) => (
     <div className="font-sans">
       <div className={`flex gap-2.5 ${className}`}>
         {media?.map((_, index) => (
-          <MediaButton key={String(index)} isRounded={isRounded} buttonSize={buttonSize} {..._} />
+          <MediaButton key={String(index)} buttonSize={buttonSize} version={_.version} {..._} />
         ))}
       </div>
       <span className="text-s-light text-secondary-text">{children}</span>

package/src/components/Header/DropdownMenu.tsx

@@ -3,6 +3,7 @@ import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
 
 interface DropdownMenuProps {
   className?: string;
@@ -21,7 +22,7 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
 
   return (
     <div
-      className={`${visible ? 'bg-white rounded-md shadow-blue-gray' : ''} ${className}`}
+      className={style(visible ? 'bg-white rounded-md shadow-blue-gray' : '', className)}
       ref={ref}
     >
       <button
@@ -39,15 +40,16 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
           ))}
       </button>
       <div
-        className={`flex flex-col rounded-md bg-white p-6 pb-2 ${visible ? '' : 'hidden'}`}
+        className={style('flex flex-col rounded-md bg-white p-6 pb-2', visible ? '' : 'hidden')}
         aria-hidden={!visible}
       >
         {items?.map((item, i) => (
           <a
             key={item.href || String(i)}
-            className={`text-l-light pb-4 hover:text-primary-main ${
-              item === activeItem ? 'text-primary-main' : ''
-            }`}
+            className={style(
+              'text-l-light pb-4 hover:text-primary-main',
+              item === activeItem ? 'text-primary-main' : '',
+            )}
             {...link(item)}
           >
             {item.text}

package/src/components/Header/Header.fixture.tsx

@@ -2,7 +2,7 @@ import '../../setup-fixture';
 import { Header } from './Header';
 
 export default {
-  default: <Header />,
-  transparent: <Header bgColor="transparent" />,
-  'no submenu': <Header showSubMenu={false} />,
+  default: <Header chat="personal" />,
+  transparent: <Header bgColor="transparent" chat="personal" />,
+  'no submenu': <Header showSubMenu={false} chat="personal" />,
 };

package/src/components/Header/Header.tsx

@@ -10,6 +10,7 @@ import { useSWRResource } from '../../services/sitemap/useSWRResource';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
+import { style } from '../../utils/style';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { HeaderSubMenu } from './HeaderSubMenu';
@@ -24,9 +25,10 @@ const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
 export const Header = JSX<HeaderProps>(
   ({
     bgColor = 'bg-white',
-    className = '',
+    className,
     showSubMenu = true,
     version = BG_COLOR_TO_BLOCK_VERSION[bgColor],
+    chat,
     ...rest
   }) => {
     const router = useRouter();
@@ -46,9 +48,11 @@ export const Header = JSX<HeaderProps>(
     return (
       <BlockWrapper
         tag="header"
-        className={`pt-6 px-20 ${className} ${
-          showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5'
-        }`}
+        className={style(
+          'pt-6 px-20',
+          showSubMenu && activeTopItem?.items?.length ? 'pb-4' : 'pb-5',
+          className,
+        )}
         version={version}
         {...rest}
       >
@@ -62,10 +66,14 @@ export const Header = JSX<HeaderProps>(
               foreignOffices={foreignOffices}
               defaultLocation={defaultLocation}
               officesLink={officesLink}
+              chat={chat}
             />
           </div>
           <div
-            className={`mt-6 h-px bg-main-divider${version === 'transparent' ? ' opacity-30' : ''}`}
+            className={style(
+              'mt-6 h-px bg-main-divider',
+              version === 'transparent' ? 'opacity-30' : '',
+            )}
           />
           {showSubMenu && activeTopItem?.items?.length ? (
             <HeaderSubMenu subItems={activeTopItem.items} />

package/src/components/Header/HeaderChatBotButton.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useBool } from '../../hooks/useBool';
+import type { IconVersion } from '../../model/IconVersion';
+import { style } from '../../utils/style';
+import type { ChatBot as ChatBotWithEmptyOption } from './HeaderContent';
+import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
+import { useChatBot } from './useChatBot';
+
+export type ChatBot = Exclude<ChatBotWithEmptyOption, ''>;
+
+interface HeaderChatBotButtonProps {
+  className?: string;
+  iconVersion?: IconVersion;
+  chat?: ChatBot;
+  onClick?: () => void;
+}
+
+const CHAT_BUTTON_EXTERNAL_NAME = 'text-page__btn-chat';
+
+export const HeaderChatBotButton = JSX<HeaderChatBotButtonProps>((props) => {
+  const [loadRequested, { setTrue: load }] = useBool();
+
+  return loadRequested ? (
+    <HeaderChatBotButtonWithLoader {...props} />
+  ) : (
+    renderChatBotButton({ ...props, onClick: load })
+  );
+});
+
+const HeaderChatBotButtonWithLoader = JSX<HeaderChatBotButtonProps>(
+  ({ chat = 'personal', ...rest }) => {
+    useChatBot(chat);
+
+    return renderChatBotButton(rest);
+  },
+);
+
+const renderChatBotButton = ({ className, iconVersion, onClick }: HeaderChatBotButtonProps) => (
+  <HeaderSecondaryMenuButton
+    className={style(CHAT_BUTTON_EXTERNAL_NAME, className)}
+    image={{ icon: 'HeadphonesIcon', iconVersion }}
+    ariaLabel="Чат"
+    onClick={onClick}
+  />
+);

package/src/components/Header/HeaderContent.ts

@@ -7,6 +7,12 @@ import type { IconProps, Picture } from '../../model/Picture';
  */
 export type SubMenuItem = LinkProps & IconProps;
 
+/**
+ * @title Чат-бот
+ * @enumNames ["", "Для физических лиц", "Для юридических лиц"]
+ */
+export type ChatBot = '' | 'personal' | 'business';
+
 /**
  * @title Ссылка дополнительного меню
  * @required ["text", "href"]
@@ -28,11 +34,11 @@ export interface Logo {
 
 /**
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
- * @required ["defaultLocation", "topItems"]
  */
 export interface HeaderContent {
   /** @hidden */
   showSubMenu?: boolean;
   /** @hidden */
   bgColor?: BgColorVersion;
+  chat?: ChatBot;
 }

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,12 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '../../hooks/useBool';
 import { useLocation } from '../../hooks/useLocation';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
 import type { ForeignOffice } from '../../services/sitemap/SitemapProps';
-import { Img } from '../../ui-kit/Img/Img';
 import { Location } from '../../ui-kit/Location/Location';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
+import { style } from '../../utils/style';
+import { HeaderChatBotButton } from './HeaderChatBotButton';
+import type { ChatBot } from './HeaderContent';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
 interface HeaderSecondaryMenuContent {
@@ -14,6 +16,7 @@ interface HeaderSecondaryMenuContent {
   defaultLocation?: string;
   officesLink?: string;
   foreignOffices?: ForeignOffice[];
+  chat?: ChatBot;
 }
 
 export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
@@ -21,22 +24,16 @@ export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
 }
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices }) => {
-    const [isShowLocationModal, setShowLocationModal] = useState<boolean>(false);
+  ({ version, className, officesLink, defaultLocation = 'Москва', foreignOffices, chat }) => {
+    const [isShowLocationModal, { setTrue: showLocationModal, setFalse: hideLocationModal }] =
+      useBool();
 
     const [location, onChangeLocation] = useLocation(defaultLocation);
 
-    const showLocationModal = useCallback(() => {
-      setShowLocationModal(true);
-    }, []);
-    const hideLocationModal = useCallback(() => {
-      setShowLocationModal(false);
-    }, []);
-
     const iconVersion: IconVersion = version === 'transparent' ? 'white' : 'black';
 
     return (
-      <div className={`flex items-center ${className || ''}`}>
+      <div className={style('flex items-center', className)}>
         <TopItem
           className="mr-5"
           flat={true}
@@ -54,28 +51,21 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
             ariaLabel="Список всех доступных офисов и банкоматов"
           />
         ) : null}
+        {chat ? (
+          <HeaderChatBotButton className="mr-5" iconVersion={iconVersion} chat={chat} />
+        ) : null}
         <HeaderSecondaryMenuButton
-          className="mr-5 group/btn text-primary-text hover:text-primary-main group-data-transparent:text-white"
+          className="mr-5"
+          image={{ icon: 'LoupeIcon', iconVersion }}
           ariaLabel="Поиск по сайту"
-        >
-          <Img
-            image={{ icon: 'LoupeIcon', iconVersion }}
-            className="h-full pointer-events-none"
-            imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0 pointer-events-none"
-            asSVG
-          />
-        </HeaderSecondaryMenuButton>
+          disabled={true}
+        />
         <HeaderSecondaryMenuButton
-          className="group/btn min-w-8 min-h-8 text-secondary-light hover:text-secondary-hover group-data-transparent:text-white"
+          image={{ icon: 'GridIcon', iconVersion }}
           ariaLabel="Дополнительные ссылки"
-        >
-          <Img
-            image={{ icon: 'GridIcon', iconVersion }}
-            className="h-full bg-main-divider/20 rounded-full pointer-events-none"
-            imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
-            asSVG
-          />
-        </HeaderSecondaryMenuButton>
+          isRounded={true}
+          disabled={true}
+        />
         {isShowLocationModal ? (
           <Location
             currentLocation={location}

package/src/components/Header/HeaderSecondaryMenuButton.tsx

@@ -1,19 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Img } from '../../ui-kit/Img/Img';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import { style } from '../../utils/style';
 
-interface HeaderSecondaryMenuButtonProps {
+export interface HeaderSecondaryMenuButtonProps extends ImageContent {
   className?: string;
+  isRounded?: boolean;
+  disabled?: boolean;
   ariaLabel?: string;
+  onClick?: (ev?: { preventDefault: () => void }) => void;
 }
 
 export const HeaderSecondaryMenuButton = JSX<HeaderSecondaryMenuButtonProps>(
-  ({ className = '', children, ariaLabel }) => (
+  ({ className, isRounded, disabled, ariaLabel, image, onClick }) => (
     <button
+      className={style(
+        'group/btn border-0 p-0 flex items-center bg-inherit',
+        isRounded
+          ? 'w-8 h-8 text-secondary-light hover:text-secondary-hove'
+          : 'w-6 h-6 text-primary-text hover:text-primary-main',
+        'group-data-transparent:text-white',
+        className,
+      )}
       type="button"
-      className={`border-0 p-0 w-6 h-6 flex items-center bg-inherit cursor-pointer ${className}`}
-      disabled={true}
+      disabled={disabled}
       aria-label={ariaLabel}
+      onClick={onClick}
     >
-      {children}
+      <Img
+        image={image}
+        className={style('h-full', isRounded ? 'bg-main-divider/20 rounded-full' : '')}
+        imageClassName="group-hover/btn:text-primary-hover group-hover/btn:invert-0"
+        asSVG
+      />
     </button>
   ),
 );

package/src/components/Header/useChatBot.ts

@@ -0,0 +1,16 @@
+import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useExternalNS } from '../../hooks/useExternalNS';
+import { ChatBot } from './HeaderChatBotButton';
+
+const CHATBOT_NAMESPACE = 'chatbot';
+
+const CHATBOT_URL: Record<ChatBot, string> = {
+  personal: '//chat.mes.rshb.ru/assets/js/webchat_rshb',
+  business: '', //TODO: add url business chat
+};
+
+export const useChatBot = (chat: ChatBot) => {
+  useEffect(() => globalThis.localStorage?.setItem('webchat-keep-open', String(Date.now())), []);
+
+  return useExternalNS(CHATBOT_NAMESPACE, CHATBOT_URL[chat]);
+};

package/src/components/Tabs/LinkTab.tsx

@@ -1,22 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import {
-  ACTIVE_LINK_CLASSES,
-  ACTIVE_TEXT_CLASSES,
-  INACTIVE_LINK_CLASSES,
-  INACTIVE_TEXT_CLASSES,
-  LINK_CLASSES,
-  TEXT_CLASSES,
-} from './tabItemClasses';
+import { getLinkTabClassName } from './tabItemClasses';
 import type { LinkTabData, TabData } from './TabsContent';
 
 interface LinkTabProps {
   tab: LinkTabData;
   currentTab?: TabData;
+  isScrollable?: boolean;
 }
 
 export const LinkTab = JSX<LinkTabProps>((props) => {
-  const { tab, currentTab } = props;
+  const { tab, currentTab, isScrollable = false } = props;
   const active = currentTab?.type === 'link' && currentTab.href === tab.href;
 
   const link = useLink();
@@ -25,14 +19,12 @@ export const LinkTab = JSX<LinkTabProps>((props) => {
   return (
     <a
       role="tab"
-      className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
+      className={getLinkTabClassName('link', active, isScrollable)}
       target={tab.target}
       href={adjustedProps.href}
       onClick={adjustedProps.onClick}
     >
-      <span className={`${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`}>
-        {tab.text}
-      </span>
+      <span className={getLinkTabClassName('text', active, isScrollable)}>{tab.text}</span>
     </a>
   );
 });

package/src/components/Tabs/ScrollableTabs.tsx

@@ -0,0 +1,55 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { RenderTabProps } from './renderTab';
+import type { TabData } from './TabsContent';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
+import { renderTab } from './renderTab';
+
+interface ScrollableTabsProps extends RenderTabProps {
+  tabs?: TabData[];
+}
+
+export type IsScrollButtonsShown = boolean[];
+
+const scrollButtonStyle = 'absolute z-50 top-0';
+
+export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
+  const { tabs, onClick, currentTab, page, showCounter } = props;
+
+  const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
+    itemCount: tabs?.length || 0,
+    isCyclic: false,
+  });
+
+  return (
+    <div className="relative max-w-full m-auto">
+      <div className={`font-sans max-w-full w-full overflow-hidden relative bg-white`}>
+        <SwipeListContainer
+          containerRef={containerRef}
+          snapAlign="snap-start"
+          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+        >
+          {tabs?.map(
+            renderTab({
+              onClick,
+              currentTab,
+              showCounter,
+              page,
+              isScrollable: true,
+            }),
+          )}
+        </SwipeListContainer>
+      </div>
+      {scroll.canScrollLeft ? (
+        <ScrollLeftButton className={`${scrollButtonStyle} left-6`} onClick={scroll.scrollLeft} />
+      ) : null}
+      {scroll.canScrollRight ? (
+        <ScrollRightButton
+          className={`${scrollButtonStyle} rotate-180 right-6`}
+          onClick={scroll.scrollRight}
+        />
+      ) : null}
+    </div>
+  );
+});

package/src/components/Tabs/Tabs.fixture.tsx

@@ -10,8 +10,30 @@ export default {
           { type: 'group', ref: 'tab1', title: 'Вкладка 1' },
           { type: 'group', ref: 'tab2', title: 'Вкладка 2' },
           { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
+          { type: 'group', ref: 'tab3', title: 'Вкладка 4' },
         ]}
       />
     </div>
   ),
+  scrollable: (
+    <div className="container grid grid-cols-12">
+      <Tabs
+        className="col-span-12"
+        tabs={[
+          { type: 'group', ref: 'tab1', title: 'Вкладка 1' },
+          { type: 'group', ref: 'tab2', title: 'Вкладка 2' },
+          { type: 'link', href: 'https://google.com', text: 'Вкладка 3' },
+          { type: 'link', href: 'https://yandex.com', text: 'Вкладка 4' },
+          { type: 'link', href: 'https://ya.com', text: 'Вкладка 5' },
+          { type: 'link', href: 'https://habr.com', text: 'Вкладка за номером 6' },
+          { type: 'link', href: 'https://kremlin.com', text: 'Вкладка 7' },
+          { type: 'link', href: 'https://gov.com', text: 'Вкладка 8' },
+          { type: 'group', ref: 'tab3', title: 'Вкладка 9' },
+          { type: 'link', href: 'https://vc.com', text: 'Вкладка номер 10' },
+          { type: 'link', href: 'https://ria.com', text: 'Вкладка номер 11' },
+        ]}
+        tabsMode="scrollable"
+      />
+    </div>
+  ),
 };

package/src/components/Tabs/Tabs.tsx

@@ -2,9 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import type { TabData, TabsContent } from './TabsContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderTab } from './renderTab';
-import type { TabData, TabsContent } from './TabsContent';
+import { ScrollableTabs } from './ScrollableTabs';
 
 export interface TabActivationEvent {
   type?: TabData['type'];
@@ -14,7 +15,7 @@ export interface TabActivationEvent {
 export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>((props) => {
-  const { className = '', tabs, showCounter, isSticky, ...rest } = props;
+  const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
@@ -25,6 +26,8 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
         if (event.type === 'link' && tab) {
           setCurrentTab(tab);
         }
+
+        return [];
       }),
     [tabs],
   );
@@ -46,11 +49,30 @@ export const Tabs = JSX<TabsBlockProps>((props) => {
 
   return (
     <BlockWrapper
-      className={`${isSticky ? 'sticky top-1 z-20 ' : ''}box-border flex gap-x-1 ${className}`}
+      className={`relative box-border flex gap-x-1 w-full ${
+        isSticky ? 'sticky top-1 z-20 ' : ''
+      } ${className}`}
       role="tablist"
       {...rest}
     >
-      {tabs?.map(renderTab({ onClick: handleClick, currentTab, showCounter, ...rest }))}
+      {tabsMode === 'scrollable' ? (
+        <ScrollableTabs
+          tabs={tabs}
+          onClick={handleClick}
+          currentTab={currentTab}
+          showCounter={showCounter}
+          {...rest}
+        />
+      ) : (
+        tabs?.map(
+          renderTab({
+            onClick: handleClick,
+            currentTab,
+            showCounter,
+            ...rest,
+          }),
+        )
+      )}
     </BlockWrapper>
   );
 });

package/src/components/Tabs/TabsContent.ts

@@ -27,6 +27,14 @@ export type LinkTabData = LinkProps & {
  */
 export type TabData = GroupTabData | LinkTabData;
 
+/**
+ * @enumNames [
+ *   "По ширине экрана",
+ *   "С прокруткой"
+ * ]
+ */
+export type TabsMode = 'wideScreen' | 'scrollable';
+
 /**
  * @title Вкладки
  */
@@ -37,4 +45,9 @@ export interface TabsContent {
   isSticky?: boolean;
   /** @title Показывать счетчик блоков во вкладках */
   showCounter?: boolean;
+  /**
+   * @title Режим вкладок
+   * @default "wideScreen"
+   */
+  tabsMode?: TabsMode;
 }