@redneckz/wildless-cms-uni-blocks 0.14.147 → 0.14.149

package/mobile/lib/ui-kit/Shimmer/Shimmer.d.ts

@@ -0,0 +1,5 @@
+export interface ShimmerProps {
+    className?: string;
+    size?: number;
+}
+export declare const Shimmer: import("@redneckz/uni-jsx").UNIComponent<ShimmerProps, any, any>;

package/mobile/lib/ui-kit/Shimmer/Shimmer.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style.js';
+const GOLDEN_RATIO = 1.618;
+export const Shimmer = JSX(({ className, size }) => (_jsx("figure", { className: style('m-0 mt-xl min-w-[80%]', className), children: renderShimmer(size) })));
+const renderShimmer = (size = 3) => goldenSequence(100, size)
+    .map((_) => Math.floor(_))
+    .map(renderShimmerItem);
+const renderShimmerItem = (width, index) => (_jsx("div", { style: { width: `${width || 100}%` }, className: "h-4 mt-xs bg-secondary-light" }, String(index)));
+const goldenSequence = (first, size) => [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);
+//# sourceMappingURL=Shimmer.js.map

package/mobile/lib/ui-kit/Shimmer/Shimmer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shimmer.js","sourceRoot":"","sources":["../../../src/ui-kit/Shimmer/Shimmer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE1C,MAAM,YAAY,GAAG,KAAK,CAAC;AAO3B,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAe,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAChE,iBAAQ,SAAS,EAAE,KAAK,CAAC,uBAAuB,EAAE,SAAS,CAAC,YAAG,aAAa,CAAC,IAAI,CAAC,GAAU,CAC7F,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,CAAC,IAAI,GAAG,CAAC,EAAE,EAAE,CACjC,cAAc,CAAC,GAAG,EAAE,IAAI,CAAC;KACtB,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KACzB,GAAG,CAAC,iBAAiB,CAAC,CAAC;AAE5B,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAE,KAAa,EAAE,EAAE,CAAC,CAC1D,cAEE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,GAAG,GAAG,EAAE,EACpC,SAAS,EAAC,8BAA8B,IAFnC,MAAM,CAAC,KAAK,CAAC,CAGlB,CACH,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,IAAY,EAAY,EAAE,CAC/D,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,KAAK,GAAG,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC"}

package/mobile/lib/ui-kit/SwipeListControl/SwipeListContainer.d.ts

@@ -1,16 +1,16 @@
 import { type SwipeListContainerContent } from './SwipeListControlContent';
 declare type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;
-declare type SwipeListItemWidthAuto = 0;
 /**
  * @title Список
  */
 interface SwipeListContainerProps extends SwipeListContainerContent {
     className?: string;
+    itemClassName?: string;
     containerRef?: {
         current: HTMLDivElement | null;
     };
     activeIndex?: number;
-    visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3 | 4;
+    visibleItemCount?: 0 | 1 | 2 | 3 | 4;
     snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
     gap?: number;
     padding?: number;

package/mobile/lib/ui-kit/SwipeListControl/SwipeListContainer.js

@@ -6,7 +6,7 @@ import { style } from '../../utils/style.js';
 import { getContainerHeight } from './getContainerHeight.js';
 import { SwipeListItem } from './SwipeListItem.js';
 const childStyleMap = ['min-w-full', '@lg:min-w-[50%]', '@lg:min-w-[33.3%]', '@lg:min-w-[25%]'];
-export const SwipeListContainer = JSX(({ className = '', containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, listType = 'horizontal-list', snapAlign = 'snap-center', minHeight, children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
+export const SwipeListContainer = JSX(({ className, itemClassName, containerRef, activeIndex, visibleItemCount = 0, gap = 0, padding = 0, listType = 'horizontal-list', snapAlign = 'snap-center', minHeight, children, onVisibleItemsChange, onVisibleIndicesChange, }) => {
     const observerOptions = {
         sensitivity: 1,
         rootRef: containerRef,
@@ -27,7 +27,7 @@ export const SwipeListContainer = JSX(({ className = '', containerRef, activeInd
         ...(isVerticalList ? getContainerHeight(minHeight) : {}),
         gap: `${gap}px`,
     };
-    return (_jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, ref: containerRef, children: mapChildren((child, idx) => (_jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : '', isVerticalList ? 'h-full' : ''), style: isHorizontalList ? getContainerOffset(padding / 4) : {}, activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
+    return (_jsx("div", { className: style('box-border overflow-auto no-scrollbar', listType, className), style: containerStyle, ref: containerRef, children: mapChildren((child, idx) => (_jsx(SwipeListItem, { className: style(snapAlign, visibleItemCount ? childStyleMap[visibleItemCount - 1] : '', isVerticalList ? 'h-full' : '', itemClassName), style: isHorizontalList ? getContainerOffset(padding / 4) : {}, activeIndex: activeIndex, idx: idx, observerOptions: observerOptions, onIntersection: handleIntersection, children: child }, String(idx))))(children) }));
 });
 // Styles used to compensate outer container padding to get rid of clipping effect
 const getContainerOffset = (padding, additionalPadding = 0) => ({

package/mobile/lib/ui-kit/SwipeListControl/SwipeListContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeListContainer.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListContainer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SwipeListContainer.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListContainer.tsx"],"names":[],"mappings":"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"}

package/mobile/lib/ui-kit/SwipeListControl/SwipeListItem.js

@@ -2,13 +2,14 @@ import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useIntersectionObserver, } from '../../hooks/useIntersectionObserver.js';
-export const SwipeListItem = JSX(({ className = '', style, idx, activeIndex, observerOptions, children, onIntersection }) => {
+import { style } from '../../utils/style.js';
+export const SwipeListItem = JSX(({ className, style: inlineStyle, idx, activeIndex, observerOptions, children, onIntersection, }) => {
     const observerCallback = useCallback((entries) => {
         if (entries.length && onIntersection) {
             onIntersection(idx || 0, entries[entries.length - 1]);
         }
     }, [onIntersection, idx]);
     const ref = useIntersectionObserver(observerCallback, observerOptions);
-    return (_jsx("div", { className: `inline-block snap-always box-border ${className}`, style: style, "aria-current": Boolean(idx === activeIndex), ref: ref, children: children }));
+    return (_jsx("div", { className: style('inline-block snap-always box-border', className), style: inlineStyle, "aria-current": Boolean(idx === activeIndex), ref: ref, children: children }));
 });
 //# sourceMappingURL=SwipeListItem.js.map

package/mobile/lib/ui-kit/SwipeListControl/SwipeListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeListItem.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EACL,uBAAuB,GAExB,MAAM,qCAAqC,CAAC;AAc7C,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAC9B,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,eAAe,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,EAAE;IACzF,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,OAAoC,EAAE,EAAE;QACvC,IAAI,OAAO,CAAC,MAAM,IAAI,cAAc,EAAE;YACpC,cAAc,CAAC,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;SACvD;IACH,CAAC,EACD,CAAC,cAAc,EAAE,GAAG,CAAC,CACtB,CAAC;IACF,MAAM,GAAG,GAAG,uBAAuB,CAAiB,gBAAgB,EAAE,eAAe,CAAC,CAAC;IAEvF,OAAO,CACL,cACE,SAAS,EAAE,uCAAuC,SAAS,EAAE,EAC7D,KAAK,EAAE,KAAK,kBACE,OAAO,CAAC,GAAG,KAAK,WAAW,CAAC,EAC1C,GAAG,EAAE,GAAG,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"SwipeListItem.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EACL,uBAAuB,GAExB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAc1C,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAC9B,CAAC,EACC,SAAS,EACT,KAAK,EAAE,WAAW,EAClB,GAAG,EACH,WAAW,EACX,eAAe,EACf,QAAQ,EACR,cAAc,GACf,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,OAAoC,EAAE,EAAE;QACvC,IAAI,OAAO,CAAC,MAAM,IAAI,cAAc,EAAE;YACpC,cAAc,CAAC,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;SACvD;IACH,CAAC,EACD,CAAC,cAAc,EAAE,GAAG,CAAC,CACtB,CAAC;IACF,MAAM,GAAG,GAAG,uBAAuB,CAAiB,gBAAgB,EAAE,eAAe,CAAC,CAAC;IAEvF,OAAO,CACL,cACE,SAAS,EAAE,KAAK,CAAC,qCAAqC,EAAE,SAAS,CAAC,EAClE,KAAK,EAAE,WAAW,kBACJ,OAAO,CAAC,GAAG,KAAK,WAAW,CAAC,EAC1C,GAAG,EAAE,GAAG,YAEP,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/lib/ui-kit/SwipeListControl/useSwipeListScroll.d.ts

@@ -1,7 +1,7 @@
 export interface SwipeListScroll {
     scrollLeft: () => void;
     scrollRight: () => void;
-    scrollTo: (idx: number) => void;
+    scrollTo: (idx: number, options?: ScrollIntoViewOptions) => void;
     canScrollLeft: boolean;
     canScrollRight: boolean;
     visibleIndicesRange: [number, number];

package/mobile/lib/ui-kit/SwipeListControl/useSwipeListScroll.js

@@ -39,13 +39,13 @@ export const useSwipeListScroll = ({ itemCount, onVisibleIndicesChange, }) => {
             scrollToStart(containerRef.current);
         }
     }, [itemCount, canScrollRight]);
-    const scrollTo = useCallback((idx) => {
+    const scrollTo = useCallback((idx, options = {
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'center',
+    }) => {
         if (containerRef?.current) {
-            containerRef.current.children[idx]?.scrollIntoView({
-                behavior: 'smooth',
-                block: 'nearest',
-                inline: 'center',
-            });
+            containerRef.current.children[idx]?.scrollIntoView(options);
         }
     }, [containerRef]);
     return [

package/mobile/lib/ui-kit/SwipeListControl/useSwipeListScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSwipeListScroll.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/useSwipeListScroll.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSwipeListScroll.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/useSwipeListScroll.ts"],"names":[],"mappings":"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"}

package/mobile/src/components/Blocks.ts

@@ -36,6 +36,7 @@ import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { Tabs } from './Tabs/Tabs';
+import { TabsLayout } from './TabsLayout/TabsLayout';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { UnitBlock } from './UnitBlock/UnitBlock';
@@ -72,14 +73,15 @@ export const Blocks: BlocksRegistry = {
   Placeholder,
   ProductBlock,
   ProductGallery,
-  UnitBlock,
   RepresentativeOfficeInfo,
   RichTextBlock,
   RollupItem,
   SafeDepositRental,
   StepsBlock,
   Tabs,
+  TabsLayout,
   TariffsTable,
   TextBlock,
+  UnitBlock,
   VerticalLayout,
 };

package/mobile/src/components/ContentPage/ContentPage.page.json

@@ -28,43 +28,6 @@
         "type": "Footer",
         "style": ["col-span-12"]
       }
-    ],
-    "stickyBottomMenu": [
-      {
-        "type": "StickyBottomMenu",
-        "content": {
-          "menuItems": [
-            {
-              "title": "Кредиты",
-              "url": "#EmptyWalletIcon",
-              "icon": {
-                "icon": "EmptyWalletIcon"
-              }
-            },
-            {
-              "title": "Карты",
-              "url": "#CardIcon",
-              "icon": {
-                "icon": "CardIcon"
-              }
-            },
-            {
-              "title": "Вклады",
-              "url": "#SafeIcon",
-              "icon": {
-                "icon": "SafeIcon"
-              }
-            },
-            {
-              "title": "Инвестиции",
-              "url": "#ChartIcon",
-              "icon": {
-                "icon": "ChartIcon"
-              }
-            }
-          ]
-        }
-      }
     ]
   },
   "blocks": []

package/mobile/src/components/OfficesAtmsMap/OfficesAtmsMap.ui.json

@@ -4,6 +4,9 @@
       "dataType": {
         "ui:widget": "hidden"
       },
+      "__html": {
+        "ui:widget": "html"
+      },
       "list": {
         "items": {
           "image": {

package/mobile/src/components/OfficesAtmsMap/OfficesAtmsMapContent.ts

@@ -1,5 +1,6 @@
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type Picture } from '../../model/Picture';
+import { type RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
 /**
  * @title Пункт
@@ -22,10 +23,8 @@ export type OfficesDef = {
  * @title Банкоматам
  * @default {"dataType": "atms"}
  */
-export type AtmsDef = {
+export type AtmsDef = RichTextProps & {
   dataType: 'atms';
-  /** @title Описание */
-  description: string;
   /** @title Список */
   list?: ItemList[];
 };

package/mobile/src/components/OfficesAtmsMap/OfficesAtmsMapLayout.tsx

@@ -5,7 +5,7 @@ import { type VNode } from '../../model/VNode';
 import { ClientOnly } from '../../ui-kit/ClientOnly';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import { YandexMap } from '../../ui-kit/YandexMap/YandexMap';
 import { style } from '../../utils/style';
@@ -75,14 +75,10 @@ export const OfficesAtmsMapLayout = JSX<OfficesAtmsMapLayoutProps<Branch | Atm>>
   },
 );
 
-const renderDescriptionBlock = ({ description, list }: AtmsDef) =>
-  description || list?.length ? (
+const renderDescriptionBlock = ({ __html, list }: AtmsDef) =>
+  __html || list?.length ? (
     <div className="p-xl mb-2xl border-b sm:border border-main-divider sm:rounded-md">
-      {description ? (
-        <Paragraph size="text-l" font="font-light">
-          {description}
-        </Paragraph>
-      ) : null}
+      {__html ? <RichText __html={__html} /> : null}
       {list?.length ? (
         <div className="flex flex-col sm:flex-row gap-2xl sm:flex-wrap pt-xs">
           {list.map((item, i) => (

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -1,14 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Shimmer } from '../../ui-kit/Shimmer/Shimmer';
 import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import { type PlaceholderContent } from './PlaceholderContent';
 
 export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {}
 
-const GOLDEN_RATIO = 1.618;
-
 export const Placeholder = JSX<PlaceholderProps>(
   ({ className, title, description = 'Блок в разработке...', ...rest }) => (
     <BlockWrapper className={style('box-border', className)} {...rest}>
@@ -20,23 +19,7 @@ export const Placeholder = JSX<PlaceholderProps>(
         align="text-left"
         isEmbedded={true}
       />
-      <figure className="m-0 mt-xl min-w-[80%]">{renderShimmer()}</figure>
+      <Shimmer />
     </BlockWrapper>
   ),
 );
-
-const renderShimmer = (size = 3) =>
-  goldenSequence(100, size)
-    .map((_) => Math.floor(_))
-    .map(renderShimmerItem);
-
-const renderShimmerItem = (width: number, index: number) => (
-  <div
-    key={String(index)}
-    style={{ width: `${width || 100}%` }}
-    className="h-4 mt-xs bg-secondary-light"
-  />
-);
-
-const goldenSequence = (first: number, size: number): number[] =>
-  [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);

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

@@ -0,0 +1,8 @@
+{
+  "content": {
+    "tabs": [
+      { "title": "Первый таб", "description": "Описание первого таба" },
+      { "title": "Второй таб", "description": "Описание второго таба" }
+    ]
+  }
+}

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

@@ -0,0 +1,88 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { 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 type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { style } from '../../utils/style';
+import { CarouselScrollButtons } from '../Carousel/CarouselScrollButtons';
+import { alignTabStyle } from './alignTabStyle';
+import { TabsLayoutButton } from './TabsLayoutButton';
+import { type Tab, type TabsLayoutContent } from './TabsLayoutContent';
+import { TabsLayoutRedirectTab } from './TabsLayoutRedirectTab';
+
+export interface TabsLayoutProps extends TabsLayoutContent, UniBlockProps {}
+
+export const TabsLayout: JSXBlock<TabsLayoutProps> = JSX<TabsLayoutProps>(
+  ({ className = '', tabs = [], block, tabAlign, ...rest }) => {
+    const [activeTabIndex, setActiveTabIndex] = useState(getInitSelectedIndex(tabs));
+
+    const slotName = getSlotName(tabs[activeTabIndex], activeTabIndex);
+
+    const itemCount = tabs.length;
+
+    const [activeSlideIndex, { inc: incActiveSlideIndex, dec: decActiveSlideIndex }] =
+      useCarouselControls({ itemCount }, activeTabIndex);
+
+    const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({ itemCount });
+
+    useEffect(() => {
+      scroll.scrollTo(activeTabIndex, { behavior: 'auto' });
+    }, []);
+
+    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>
+        <div className="space-y-px @5xl:space-y-0 @5xl:grid @5xl:grid-cols-12 @5xl:gap-2xs">
+          {tabs[activeTabIndex]?.href ? (
+            <TabsLayoutRedirectTab tab={tabs[activeTabIndex]} />
+          ) : (
+            renderBlocksList(block?.slots?.[slotName], { ...rest?.options, slotName })
+          )}
+        </div>
+      </BlockWrapper>
+    );
+  },
+);
+
+TabsLayout.slots = ({ tabs }) => tabs?.filter((_) => !_.href).map(getSlotName) || [];
+TabsLayout.childrenTypes = { exclude: ['TabsLayout'] };
+
+const getSlotName = (tab: Tab, index: number): string => tab?.title || `Слот №${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/TabsLayout.ui.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "tabs": {
+      "items": {
+        "icon": {
+          "ui:field": "picture"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { type IconVersion } from '../../model/IconVersion';
+import { Img } from '../../ui-kit/Img/Img';
+import { type PreventableEvent } from '../../ui-kit/PreventableEvent';
+import { style } from '../../utils/style';
+import { type Tab } from './TabsLayoutContent';
+
+const getButtonClassNames = (isActive: boolean) => ({
+  btn: `w-96 ${
+    isActive
+      ? 'p-m border-none bg-primary-main text-white'
+      : 'p-s ease-in duration-300 bg-white text-primary-text'
+  }`,
+  title: isActive ? 'mb-xs text-xl' : 'mb-2xs text-l',
+  desc: `font-light ${isActive ? 'text-l text-white' : 'text-m text-secondary-text'}`,
+  icon: isActive ? '' : 'text-primary-main',
+  iconVersion: (isActive ? 'white' : 'normal') as IconVersion,
+});
+
+interface TabsLayoutButtonProps {
+  tab: Tab;
+  className?: string;
+  onClick: (ev?: PreventableEvent) => void;
+  isActive: boolean;
+}
+
+export const TabsLayoutButton = JSX<TabsLayoutButtonProps>(
+  ({ tab, className, onClick, isActive }) => {
+    const buttonClassNames = getButtonClassNames(isActive);
+
+    return (
+      <button
+        type="button"
+        onClick={onClick}
+        aria-label={tab?.title}
+        className={style(
+          'border border-gray cursor-pointer text-left border-b-0 mt-auto flex gap-2xs',
+          buttonClassNames.btn,
+          className,
+        )}
+      >
+        {tab?.icon ? (
+          <Img
+            className={style('h-6 w-6 min-w-6 min-h-6', buttonClassNames.icon)}
+            image={{
+              ...tab?.icon,
+              iconVersion: tab?.icon?.iconVersion ?? buttonClassNames.iconVersion,
+            }}
+            width="24"
+            height="24"
+          />
+        ) : null}
+        <div className="border-0">
+          {tab?.title ? <div className={buttonClassNames.title}>{tab.title}</div> : null}
+          {tab?.description ? <div className={buttonClassNames.desc}>{tab.description}</div> : null}
+        </div>
+      </button>
+    );
+  },
+);

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

@@ -0,0 +1,26 @@
+import { type Align } from '../../model/Align';
+import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
+import { type UniBlockContent } from '../../model/JSXBlock';
+import { type LinkCommonProps } from '../../model/LinkProps';
+import { type IconProps } from '../../model/Picture';
+
+/**
+ * @title Таб
+ */
+export type Tab = TitleProps &
+  DescriptionProps &
+  IconProps &
+  LinkCommonProps & {
+    /** @title Вкладка выбрана по-умолчанию */
+    selected?: boolean;
+  };
+
+/**
+ * @title Табы
+ */
+export type TabsLayoutContent = UniBlockContent & {
+  /** @title Выравнивание табов */
+  tabAlign?: Align;
+  /** @title Список табов */
+  tabs?: Tab[];
+};

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

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useDebouncedEffect } from '@redneckz/uni-jsx/lib/hooks/useDebouncedEffect';
+import { useLink } from '../../hooks/useLink';
+import { Shimmer } from '../../ui-kit/Shimmer/Shimmer';
+import { type Tab } from './TabsLayoutContent';
+
+const REDIRECT_DELAY = 0.5 * 1000;
+
+interface TabsLayoutRedirectTabProps {
+  tab: Tab;
+}
+
+export const TabsLayoutRedirectTab = JSX<TabsLayoutRedirectTabProps>(({ tab }) => {
+  const link = useLink();
+
+  useDebouncedEffect(
+    () => {
+      const { onClick } = link(tab);
+      onClick();
+    },
+    [tab],
+    REDIRECT_DELAY,
+  );
+
+  return <Shimmer className="col-span-12 p-xl" size={5} />;
+});

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

@@ -0,0 +1,7 @@
+import { type Align } from '../../model/Align';
+
+export const alignTabStyle: Record<Align, string> = {
+  start: 'text-start',
+  center: 'text-center',
+  end: 'text-end',
+};

package/mobile/src/setup-fixture.ts

@@ -48,7 +48,7 @@ handlerDecorator.setup((handler): any => (ev) => {
   const shouldNotPrevent = ev?.target?.type === 'submit';
 
   if (!shouldNotPrevent) {
-    ev.preventDefault();
+    ev?.preventDefault();
   }
 
   handler(ev);

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

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+
+const GOLDEN_RATIO = 1.618;
+
+export interface ShimmerProps {
+  className?: string;
+  size?: number;
+}
+
+export const Shimmer = JSX<ShimmerProps>(({ className, size }) => (
+  <figure className={style('m-0 mt-xl min-w-[80%]', className)}>{renderShimmer(size)}</figure>
+));
+
+const renderShimmer = (size = 3) =>
+  goldenSequence(100, size)
+    .map((_) => Math.floor(_))
+    .map(renderShimmerItem);
+
+const renderShimmerItem = (width: number, index: number) => (
+  <div
+    key={String(index)}
+    style={{ width: `${width || 100}%` }}
+    className="h-4 mt-xs bg-secondary-light"
+  />
+);
+
+const goldenSequence = (first: number, size: number): number[] =>
+  [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);

package/mobile/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -9,16 +9,15 @@ import { SwipeListItem } from './SwipeListItem';
 
 type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;
 
-type SwipeListItemWidthAuto = 0;
-
 /**
  * @title Список
  */
 interface SwipeListContainerProps extends SwipeListContainerContent {
   className?: string;
+  itemClassName?: string;
   containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;
-  visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3 | 4;
+  visibleItemCount?: 0 | 1 | 2 | 3 | 4;
   snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
   gap?: number;
   padding?: number;
@@ -30,7 +29,8 @@ const childStyleMap = ['min-w-full', '@lg:min-w-[50%]', '@lg:min-w-[33.3%]', '@l
 
 export const SwipeListContainer = JSX<SwipeListContainerProps>(
   ({
-    className = '',
+    className,
+    itemClassName,
     containerRef,
     activeIndex,
     visibleItemCount = 0,
@@ -84,6 +84,7 @@ export const SwipeListContainer = JSX<SwipeListContainerProps>(
               snapAlign,
               visibleItemCount ? childStyleMap[visibleItemCount - 1] : '',
               isVerticalList ? 'h-full' : '',
+              itemClassName,
             )}
             style={isHorizontalList ? getContainerOffset(padding / 4) : {}}
             activeIndex={activeIndex}