@redneckz/wildless-cms-uni-blocks 0.14.294 → 0.14.296

package/mobile/src/components/ApplicationForm/renderAgreementSubmit.tsx

@@ -0,0 +1,31 @@
+import { type FieldProps } from '../../hooks/useForm';
+import { type LinkProps } from '../../model/LinkProps';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { renderErrorText } from '../../ui-kit/Input/renderErrorText';
+import { withValidator } from '../../validation/withValidator';
+import { type SubmitButtonProps } from './ApplicationFormContent';
+import { Footnote } from './Footnote';
+import { renderSubmitButton } from './renderSubmitButton';
+import { agreementValidator } from './validators';
+
+const agreementText = 'Нажимая кнопку, вы подтверждаете согласие с ';
+export const renderAgreementSubmit = (
+  consentDataProcessing?: FieldProps<boolean>,
+  link?: LinkProps,
+  button?: SubmitButtonProps,
+) => (
+  <div className="flex col-span-2 gap-m flex-col lg:flex-row w-full justify-between items-baseline">
+    {consentDataProcessing ? (
+      <div>
+        <div className="flex gap-3">
+          <Checkbox {...consentDataProcessing} />
+          <Footnote link={link} />
+        </div>
+        {renderErrorText(withValidator(consentDataProcessing, agreementValidator).error)}
+      </div>
+    ) : (
+      <Footnote text={agreementText} link={link} />
+    )}
+    {renderSubmitButton(button)}
+  </div>
+);

package/mobile/src/components/ApplicationForm/renderSubmitButton.tsx

@@ -0,0 +1,9 @@
+import { Button } from '../../ui-kit/Button/Button';
+import { style } from '../../utils/style';
+import { type SubmitButtonProps } from './ApplicationFormContent';
+
+export const renderSubmitButton = (button?: SubmitButtonProps, className?: string) => (
+  <Button className={style('w-full @xl:w-auto', className)} type="submit">
+    {button?.text ? button.text : 'Отправить заявку'}
+  </Button>
+);

package/mobile/src/components/Blocks.ts

@@ -1,7 +1,7 @@
 import { type BlocksRegistry } from '../model/BlocksRegistry';
 
 import { AdTile } from './AdTile/AdTile';
-import { ApplicationFormCustom } from './ApplicationFormCustom/ApplicationFormCustom';
+import { ApplicationForm } from './ApplicationForm/ApplicationForm';
 import { BankAccountFiltration } from './BankAccountFiltration/BankAccountFiltration';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
@@ -47,7 +47,7 @@ import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
   AdTile,
-  ApplicationFormCustom,
+  ApplicationForm,
   BankAccountFiltration,
   BenefitsBlock,
   BonusBenefitsBlock,

package/mobile/src/components/GrantSupport/GrantSupport.tsx

@@ -0,0 +1,56 @@
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { getRegularButtonClasses } from '../../ui-kit/LinkButton/getRegularButtonClasses';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { SelectControl } from '../../ui-kit/Select/SelectControl';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { type GrantSupportContent } from './GrantSupportContent';
+
+interface GrantSupportProps extends GrantSupportContent, UniBlockProps {}
+
+export const GrantSupport = UniBlock<GrantSupportProps>(
+  ({ className, title, button, regionSource, data, ...rest }) => {
+    const [region, setRegion] = useState({ key: '' });
+    const regions = regionSource?.regions ?? [];
+
+    const buttonStyle = getRegularButtonClasses({
+      className: 'text-white',
+      version: button?.version || 'primary',
+    });
+    const regionHref = regions?.find((_) => _.name === region.key)?.href;
+    const buttonText = button?.text ? button.text : 'Перейти';
+
+    return (
+      <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
+        <div className="container max-w-[978px] space-y-m">
+          {title ? <Heading headingType="h3" title={title} className="@xl:text-center" /> : null}
+          {regions ? (
+            <SelectControl
+              label="Ваш регион"
+              placeholder="Выберите регион"
+              isSearch={true}
+              options={regions.map(({ name = '' }) => ({ key: name, text: name }))}
+              value={region}
+              onChange={setRegion}
+            />
+          ) : null}
+          {regionHref ? (
+            <div className="text-center">
+              <LinkButton
+                href={regionHref}
+                target="_blank"
+                className={style('p-m w-full @xl:w-auto', buttonStyle)}
+                data={data}
+              >
+                {buttonText}
+              </LinkButton>
+            </div>
+          ) : null}
+        </div>
+      </BlockWrapper>
+    );
+  },
+);

package/mobile/src/components/GrantSupport/GrantSupportContent.ts

@@ -0,0 +1,19 @@
+import { type JSONRefObject } from '../../data/JSONRefObject';
+import { type AspectsProps } from '../../model/AspectsProps';
+import { type TitleProps } from '../../model/HeadlineType';
+import { type SubmitButtonProps } from '../ApplicationForm/ApplicationFormContent';
+
+type RegionGrand = {
+  /** @hidden */
+  regions?: { name: string; href: string }[];
+};
+
+/**
+ * @title Грантовая поддержка
+ */
+export type GrantSupportContent = TitleProps &
+  AspectsProps & {
+    button?: SubmitButtonProps;
+    /** @title Список регионов */
+    regionSource?: RegionGrand & JSONRefObject;
+  };

package/mobile/src/components/Tabs/TabsContent.ts

@@ -37,7 +37,7 @@ export type TabData = GroupTabData | LinkTabData;
  *   "По центру"
  * ]
  */
-export type TabsMode = 'wideScreen' | 'scrollable' | 'centered';
+export type TabsMode = 'wideScreen' | 'scrollable';
 
 /**
  * @title Вкладки

package/mobile/src/components/Tabs/renderTabs.tsx

@@ -15,16 +15,6 @@ export const renderTabs = ({ tabsMode, ...props }: RenderTabsProps) => {
   switch (tabsMode) {
     case 'wideScreen':
       return <TabsControl {...props} />;
-    case 'centered':
-      return (
-        <div className="flex">
-          <TabsControl
-            className="m-auto p-xs rounded-md bg-main-gray"
-            tabsType="rounded"
-            {...props}
-          />
-        </div>
-      );
     case 'scrollable':
       return (
         <div className="flex">

package/mobile/src/components/TabsLayout/TabsLayout.example.json

@@ -3,8 +3,9 @@
     "version": "primary",
     "padding": "",
     "tabs": [
-      { "title": "Первый таб", "description": "Описание первого таба" },
-      { "title": "Второй таб", "description": "Описание второго таба" }
-    ]
+      { "text": "Первый таб", "description": "", "type": "group" },
+      { "text": "Второй таб", "description": "", "type": "group" }
+    ],
+    "tabsType": "animated"
   }
 }

package/mobile/src/components/TabsLayout/TabsLayout.tsx

@@ -1,66 +1,78 @@
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
-import { useCarouselControls } from '../../hooks/useCarouselControls';
-import { type Align } from '../../model/Align';
+import { useRouter } from '../../hooks/useRouter';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
-import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { type TabItemBase } from '../../ui-kit/TabsControl/TabItem';
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
-import { CarouselScrollButtons } from '../Carousel/CarouselScrollButtons';
-import { alignTabStyle } from './alignTabStyle';
-import { TabsLayoutButton } from './TabsLayoutButton';
+import { renderTabsLayout } from './renderTabsLayout';
 import { type Tab, type TabsLayoutContent } from './TabsLayoutContent';
-import { TabsLayoutRedirectSection } from './TabsLayoutRedirectSection';
+
+const TAB_QUERY_PARAM_KEY = 'tab';
 
 export interface TabsLayoutProps extends TabsLayoutContent, UniBlockProps {}
 
 export const TabsLayout = UniBlock<TabsLayoutProps>(
-  ({ className = '', tabs = [], block, tabAlign, ...rest }) => {
+  ({ className = '', tabs = [], block, tabsType, ...rest }) => {
+    const router = useRouter();
+
+    const { isReady } = router;
+
     const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
 
+    const defaultSelectedTab = tabs.findIndex((_) => Boolean(_.selected));
+
+    useEffect(() => {
+      const defaultTabIndex = router.query[TAB_QUERY_PARAM_KEY]
+        ? tabs.findIndex(
+            (_, index) => _.type === 'group' && String(index) === router.query[TAB_QUERY_PARAM_KEY],
+          )
+        : defaultSelectedTab;
+
+      setActiveTabIndex(defaultTabIndex === -1 ? 0 : defaultTabIndex);
+    }, [isReady, defaultSelectedTab]);
+
     const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
 
-    const itemCount = tabs.length;
+    const updateUrlSearchTabParam = (_: TabItemBase, index: number) => {
+      const searchParams = new URLSearchParams(router.query as Record<string, string>);
+      if (_.text) {
+        searchParams.set(TAB_QUERY_PARAM_KEY, String(index));
+      } else {
+        searchParams.delete(TAB_QUERY_PARAM_KEY);
+      }
+      router.replace(`${router.pathname}?${searchParams}`, '', { scroll: false });
+    };
 
-    const [activeSlideIndex, { inc: incActiveSlideIndex, dec: decActiveSlideIndex }] =
-      useCarouselControls({ itemCount }, activeTabIndex);
+    const handleChange = useCallback(
+      (_: TabItemBase) => {
+        const index = tabs.indexOf(_ as Tab);
+        const tab = tabs[index];
 
-    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({ itemCount });
+        setActiveTabIndex(index);
+
+        if (tab.type === 'group') {
+          updateUrlSearchTabParam(_, index);
+        }
+      },
+      [tabs],
+    );
 
     return (
       <BlockWrapper className={style(className)} defaultPadding="p-0" {...rest}>
-        <div className="relative border-b-8 border-primary-main">
-          <SwipeListContainer
-            itemClassName="flex"
-            containerRef={containerRef}
-            snapAlign="snap-end"
-            gap={8}
-            onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
-          >
-            {tabs.map(renderTabButton(activeTabIndex, setActiveTabIndex, tabAlign))}
-          </SwipeListContainer>
-          <CarouselScrollButtons
-            scroll={scroll}
-            arrowsPadded={true}
-            onScrollLeft={decActiveSlideIndex}
-            onScrollRight={incActiveSlideIndex}
-            activeIndex={activeSlideIndex}
-            itemCount={itemCount}
-          />
-        </div>
+        {renderTabsLayout({
+          items: tabs,
+          value: tabs[activeTabIndex],
+          tabsType,
+          onChange: handleChange,
+        })}
         <div className="space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs">
-          {tabs[activeTabIndex]?.href ? (
-            <TabsLayoutRedirectSection tab={tabs[activeTabIndex]} />
-          ) : (
-            renderBlocksList(block?.slots?.[slotName], {
-              ...rest?.options,
-              key: `${slotName}-${block?.type}`,
-              slotName,
-              parent: block,
-            })
-          )}
+          {renderBlocksList(block?.slots?.[slotName], {
+            ...rest?.options,
+            slotName,
+            parent: block,
+          })}
         </div>
       </BlockWrapper>
     );
@@ -71,20 +83,7 @@ export const TabsLayout = UniBlock<TabsLayoutProps>(
   },
 );
 
-const getSlotName = (tab: Tab, index: number): string => tab?.title || `Слот №${index}`;
+const getSlotName = (tab: Tab, index: number): string => tab?.text || `Слот №${index}`;
 
 const getInitSelectedIndex = (tabs: Tab[]) =>
   tabs.reduce((selectedIndex, tab, i) => (tab.selected ? i : selectedIndex), 0);
-
-const renderTabButton =
-  (activeTabIndex: number, onClick: (i: number) => void, tabAlign: Align = 'start') =>
-  (tab: Tab, i: number) =>
-    (
-      <TabsLayoutButton
-        key={String(i)}
-        className={alignTabStyle[tabAlign]}
-        tab={tab}
-        isActive={activeTabIndex === i}
-        onClick={() => onClick(i)}
-      />
-    );

package/mobile/src/components/TabsLayout/TabsLayoutContent.ts

@@ -1,28 +1,56 @@
-import { type Align } from '../../model/Align';
 import { type AspectsProps } from '../../model/AspectsProps';
-import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
-import { type LinkCommonProps } from '../../model/LinkProps';
+import { type DescriptionProps } from '../../model/HeadlineType';
+import { type LinkProps } from '../../model/LinkProps';
 import { type IconProps } from '../../model/Picture';
+import { type TabsType } from '../../ui-kit/TabsControl/TabsControlProps';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
 /**
  * @title Таб
  */
-export type Tab = TitleProps &
-  DescriptionProps &
+export type TabBase = DescriptionProps &
   IconProps &
-  LinkCommonProps &
+  LinkProps &
   AspectsProps & {
     /** @title Вкладка выбрана по-умолчанию */
     selected?: boolean;
   };
 
+/**
+ * @title Группа
+ */
+export type GroupTab = TabBase & {
+  /** @default group */
+  type: 'group';
+};
+
+/**
+ * @title Ссылка
+ */
+export type LinkTab = TabBase &
+  LinkProps & {
+    /** @default link */
+    type: 'link';
+  };
+
+/**
+ * @title Таб
+ * @default {
+ *    "type": "group"
+ * }
+ */
+export type Tab = GroupTab | LinkTab;
+
 /**
  * @title Табы
  */
 export type TabsLayoutContent = UniBlockContent & {
-  /** @title Выравнивание табов */
-  tabAlign?: Align;
   /** @title Список табов */
   tabs?: Tab[];
+  /** @title Режим отображения */
+  tabsType?: TabsType;
+  /** @title Закрепить сверху */
+  isSticky?: boolean;
+  /** @title Показывать счетчик блоков во вкладках */
+  showCounter?: boolean;
 };

package/mobile/src/components/TabsLayout/renderTabsLayout.tsx

@@ -0,0 +1,32 @@
+import { ScrollableTabsControl } from '../../ui-kit/TabsControl/ScrollableTabsControl';
+import { type TabItemBase } from '../../ui-kit/TabsControl/TabItem';
+import { TabsControl } from '../../ui-kit/TabsControl/TabsControl';
+import { type TabsControlProps, type TabsType } from '../../ui-kit/TabsControl/TabsControlProps';
+
+interface RenderTabsProps {
+  items: TabItemBase[];
+  value: TabItemBase;
+  onChange: TabsControlProps['onChange'];
+  tabsType?: TabsType;
+}
+
+export const renderTabsLayout = ({ tabsType = 'animated', ...props }: RenderTabsProps) => {
+  switch (tabsType) {
+    case 'default':
+      return <TabsControl {...props} />;
+    case 'underlined':
+      return (
+        <div className="flex">
+          <TabsControl className="m-auto" tabsType="underlined" {...props} />
+        </div>
+      );
+    case 'animated':
+      return (
+        <div className="border-b-8 border-primary-main">
+          <ScrollableTabsControl className="m-auto" {...props} tabsType="animated" />
+        </div>
+      );
+    default:
+      return null;
+  }
+};

package/mobile/src/hooks/useAspects/handleAspects.ts

@@ -1,4 +1,4 @@
-import { type FormState } from '../../components/ApplicationFormCustom/getInitialFormState';
+import { type FormState } from '../../components/ApplicationForm/getInitialFormState';
 import { type PreventableEventWithTarget } from '../../ui-kit/PreventableEvent';
 import { type Aspects, type AspectsAttribute } from './useAspects';
 

package/mobile/src/ui-kit/TabsControl/ScrollableTabsControl.tsx

@@ -6,32 +6,55 @@ import { useSwipeListScroll } from '../SwipeListControl/useSwipeListScroll';
 import { renderTab } from './renderTab';
 import { type TabsControlProps } from './TabsControlProps';
 
-const scrollButtonStyle = 'hidden sm:flex absolute z-40 top-0';
+const scrollButtonStyle = 'hidden sm:flex absolute z-40';
+
+const scrollStyleType = {
+  animated: {
+    itemClassName: 'flex',
+    gap: 8,
+    buttonTop: 'top-5',
+  },
+  underlined: {
+    itemClassName: '',
+    gap: 0,
+    buttonTop: 'top-0',
+  },
+};
 
 export const ScrollableTabsControl = JSX<TabsControlProps>(
-  ({ className, items = [], value, onChange, tabsType }) => {
+  ({ className, items = [], value, onChange, tabsType = 'default' }) => {
     const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
       itemCount: items?.length || 0,
     });
 
     return (
-      <div className={style('relative overflow-x-auto no-scrollbar', className)} role="tablist">
+      <div className={style('relative overflow-x-auto no-scrollbar', className)}>
         <SwipeListContainer
           containerRef={containerRef}
           snapAlign="snap-start"
           onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+          itemClassName={scrollStyleType[tabsType].itemClassName}
+          gap={scrollStyleType[tabsType].gap}
         >
           {items.map(renderTab(value, onChange, tabsType))}
         </SwipeListContainer>
         {scroll.canScrollLeft ? (
           <ScrollLeftButton
-            className={style('left-6', scrollButtonStyle)}
+            className={style(
+              'left-6',
+              scrollButtonStyle,
+              scrollStyleType[tabsType].buttonTop as string,
+            )}
             onClick={scroll.scrollLeft}
           />
         ) : null}
         {scroll.canScrollRight ? (
           <ScrollRightButton
-            className={style('right-6', scrollButtonStyle)}
+            className={style(
+              'right-6',
+              scrollButtonStyle,
+              scrollStyleType[tabsType].buttonTop as string,
+            )}
             onClick={scroll.scrollRight}
           />
         ) : null}

package/mobile/src/ui-kit/TabsControl/TabItem.tsx

@@ -1,21 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
+import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
 import { type LinkProps } from '../../model/LinkProps';
+import { type IconProps } from '../../model/Picture';
 import { type VNode } from '../../model/VNode';
 import { TabItemInner } from './TabItemInner';
-import { type TabsControlProps } from './TabsControlProps';
-export interface TabItemBase extends LinkProps {
+import { type TabsControlProps, type TabsType } from './TabsControlProps';
+export interface TabItemBase extends LinkProps, TitleProps, DescriptionProps, IconProps {
   name?: string;
   appendRight?: VNode;
 }
 
-export type TabType = 'default' | 'underlined' | 'rounded';
-
 export interface TabItemProps {
   item?: TabItemBase;
   isActive?: boolean;
-  type?: TabType;
+  type?: TabsType;
   onClick?: TabsControlProps['onChange'];
 }
 

package/mobile/src/ui-kit/TabsControl/TabItemInner.tsx

@@ -1,32 +1,33 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style';
-import { Text } from '../Text/Text';
-import { type TabItemProps, type TabType } from './TabItem';
+import { renderTabItemInner } from './renderTabItemInner';
+import { type TabItemProps } from './TabItem';
+import { type TabsType } from './TabsControlProps';
 
-const tabPaddingStyleMap: Record<TabType, string> = {
+const tabPaddingStyleMap: Record<TabsType, string> = {
   default: 'px-xs',
   underlined: 'px-m',
-  rounded: 'px-lg rounded-md',
+  animated: 'px-m border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs',
 };
 
 const tabTextStyle = 'text-secondary-text hover:text-primary-main';
 
-const activeTabTextStyleMap: Record<TabType, string> = {
+const activeTabTextStyleMap: Record<TabsType, string> = {
   default: 'text-black sm:text-white',
   underlined: 'text-primary-main border-b-2',
-  rounded: 'text-white',
+  animated: 'text-white sm:text-white',
 };
 
-const tabBgStyleMap: Record<TabType, string> = {
+const tabBgStyleMap: Record<TabsType, string> = {
   default: 'bg-white',
   underlined: 'bg-white',
-  rounded: 'bg-transparent',
+  animated: 'p-1 ease-in duration-300 bg-white text-primary-text h-[70px] w-96',
 };
 
-const activeTabBgStyleMap: Record<TabType, string> = {
+const activeTabBgStyleMap: Record<TabsType, string> = {
   default: 'sm:bg-primary-main',
   underlined: 'bg-white',
-  rounded: 'bg-primary-main',
+  animated: 'p-2 border-none bg-primary-main text-white h-20 w-96',
 };
 
 interface TabItemInnerProps extends TabItemProps {
@@ -34,10 +35,10 @@ interface TabItemInnerProps extends TabItemProps {
 }
 
 export const TabItemInner = JSX<TabItemInnerProps>(
-  ({ tag = 'div', item = {}, isActive, type = 'default', onClick }) => {
+  ({ tag = 'div', item = {}, isActive = false, type = 'default', onClick }) => {
     const Tag: any = tag;
 
-    const { text, appendRight, ...link } = item;
+    const { text, description, icon, appendRight, ...link } = item;
 
     return (
       <Tag
@@ -48,8 +49,7 @@ export const TabItemInner = JSX<TabItemInnerProps>(
           tabPaddingStyleMap[type],
           isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type],
         )}
-        role="tab"
-        aria-selected={isActive}
+        role="tablist"
         onClick={onClick}
         {...link}
       >
@@ -61,7 +61,13 @@ export const TabItemInner = JSX<TabItemInnerProps>(
             isActive ? activeTabTextStyleMap[type] : tabTextStyle,
           )}
         >
-          <Text size="text-m">{text}</Text>
+          {renderTabItemInner({
+            text,
+            description,
+            icon,
+            isActive,
+            type,
+          })}
           {appendRight ? <div className="ml-xs">{appendRight}</div> : null}
         </div>
       </Tag>

package/mobile/src/ui-kit/TabsControl/TabsControl.tsx

@@ -5,7 +5,10 @@ import { type TabsControlProps } from './TabsControlProps';
 
 export const TabsControl = JSX<TabsControlProps>(
   ({ className, tabsType = 'default', items = [], value, onChange }) => (
-    <div className={style('flex gap-x-2xs overflow-x-auto no-scrollbar', className)} role="tablist">
+    <div
+      className={style('flex gap-x-2xs overflow-x-auto no-scrollbar', className)}
+      role="tabpanel"
+    >
       {items.map(renderTab(value, onChange, tabsType))}
     </div>
   ),

package/mobile/src/ui-kit/TabsControl/TabsControlProps.ts

@@ -1,7 +1,17 @@
 import { type ListControlProps } from '../ListControlProps';
-import { type TabItemBase, type TabType } from './TabItem';
+import { type TabItemBase } from './TabItem';
+
+/**
+ * @title Тип вкладки
+ * @enumNames [
+ *   "По ширине экрана",
+ *   "С прокруткой",
+ *   "Кнопка с анимацией",
+ * ]
+ */
+export type TabsType = 'default' | 'underlined' | 'animated';
 
 export interface TabsControlProps extends ListControlProps<TabItemBase> {
   className?: string;
-  tabsType?: TabType;
+  tabsType?: TabsType;
 }

package/mobile/src/ui-kit/TabsControl/renderTab.tsx

@@ -1,8 +1,8 @@
-import { TabItem, type TabItemBase, type TabType } from './TabItem';
-import { type TabsControlProps } from './TabsControlProps';
+import { TabItem, type TabItemBase } from './TabItem';
+import { type TabsControlProps, type TabsType } from './TabsControlProps';
 
 export const renderTab =
-  (activeTab?: TabItemBase, onClick?: TabsControlProps['onChange'], type?: TabType) =>
+  (activeTab?: TabItemBase, onClick?: TabsControlProps['onChange'], type?: TabsType) =>
   (tab: TabItemBase, i: number) =>
     (
       <TabItem