@redneckz/wildless-cms-uni-blocks 0.13.0 → 0.13.2

package/mobile/lib/ui-kit/TabsControl/TabItem.js

@@ -1,36 +1,22 @@
 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 { useLink } from '../../hooks/useLink.js';
-import { style } from '../../utils/style.js';
-import { Text } from '../Text/Text.js';
-const tabPaddingStyleMap = {
-    default: 'px-xs',
-    underlined: 'px-m',
-    rounded: 'px-lg rounded-md',
-};
-const tabTextStyle = 'text-secondary-text hover:text-primary-main';
-const activeTabTextStyleMap = {
-    default: 'text-black sm:text-white',
-    underlined: 'text-primary-main border-b-2',
-    rounded: 'text-white',
-};
-const tabBgStyleMap = {
-    default: 'bg-white',
-    underlined: 'bg-white',
-    rounded: 'bg-transparent',
-};
-const activeTabBgStyleMap = {
-    default: 'sm:bg-primary-main',
-    underlined: 'bg-white',
-    rounded: 'bg-primary-main',
-};
-export const TabItem = JSX(({ item = {}, isActive, onClick, type = 'default' }) => {
+import { TabItemInner } from './TabItemInner.js';
+export const TabItem = JSX((props) => props?.item?.href ? _jsx(LinkTabItem, { ...props }) : _jsx(ButtonTabItem, { ...props }));
+const LinkTabItem = JSX((props) => {
     const link = useLink();
-    const handleClick = () => {
+    const handleClick = useCallback(() => {
+        props.onClick && props.onClick(props.item || {});
+    }, [props.onClick, props.item]);
+    const { onClick, ...item } = link({ ...props.item, onClick: handleClick });
+    return _jsx(TabItemInner, { ...props, tag: "a", item: item, onClick: onClick });
+});
+// TODO: Update handlerDecorator (support buttons?)
+const ButtonTabItem = JSX(({ item = {}, onClick, ...rest }) => {
+    const handleClick = useCallback(() => {
         onClick && onClick(item);
-    };
-    const { text, ...linkProps } = link({ ...item, onClick: handleClick });
-    const Tag = item.href ? 'a' : 'div';
-    return (_jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tab", "aria-selected": isActive, ...linkProps, children: _jsx("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), children: _jsx(Text, { size: "text-m", children: text }) }) }));
+    }, [onClick, item]);
+    return _jsx(TabItemInner, { item: item, onClick: handleClick, ...rest });
 });
 //# sourceMappingURL=TabItem.js.map

package/mobile/lib/ui-kit/TabsControl/TabItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabItem.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/TabItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAcpC,MAAM,kBAAkB,GAA4B;IAClD,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,kBAAkB;CAC5B,CAAC;AAEF,MAAM,YAAY,GAAG,6CAA6C,CAAC;AAEnE,MAAM,qBAAqB,GAA4B;IACrD,OAAO,EAAE,0BAA0B;IACnC,UAAU,EAAE,8BAA8B;IAC1C,OAAO,EAAE,YAAY;CACtB,CAAC;AAEF,MAAM,aAAa,GAA4B;IAC7C,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,gBAAgB;CAC1B,CAAC;AAEF,MAAM,mBAAmB,GAA4B;IACnD,OAAO,EAAE,oBAAoB;IAC7B,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,iBAAiB;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAe,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,GAAG,SAAS,EAAE,EAAE,EAAE;IAC9F,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC;IAEvE,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;IAEpC,OAAO,CACL,KAAC,GAAG,IACF,SAAS,EAAE,KAAK,CACd,MAAM,EACN,cAAc,EACd,gBAAgB,EAChB,kBAAkB,CAAC,IAAI,CAAC,EACxB,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAC3D,EACD,IAAI,EAAC,KAAK,mBACK,QAAQ,KACnB,SAAS,YAEb,cACE,SAAS,EAAE,KAAK,CACd,QAAQ,EACR,kCAAkC,EAClC,+BAA+B,EAC/B,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CACtD,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,YAAE,IAAI,GAAQ,GAC7B,GACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"TabItem.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/TabItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAc9C,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAe,CAAC,KAAK,EAAE,EAAE,CACjD,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,KAAC,WAAW,OAAK,KAAK,GAAI,CAAC,CAAC,CAAC,KAAC,aAAa,OAAK,KAAK,GAAI,CAC9E,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,CAAe,CAAC,KAAK,EAAE,EAAE;IAC9C,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAEhC,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC,CAAC;IAE3E,OAAO,KAAC,YAAY,OAAK,KAAK,EAAE,GAAG,EAAC,GAAG,EAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AAC3E,CAAC,CAAC,CAAC;AAEH,mDAAmD;AACnD,MAAM,aAAa,GAAG,GAAG,CAAe,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAC1E,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpB,OAAO,KAAC,YAAY,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,KAAM,IAAI,GAAI,CAAC;AACtE,CAAC,CAAC,CAAC"}

package/mobile/lib/ui-kit/TabsControl/TabItemInner.d.ts

@@ -0,0 +1,6 @@
+import type { TabItemProps } from './TabItem';
+interface TabItemInnerProps extends TabItemProps {
+    tag?: string;
+}
+export declare const TabItemInner: import("@redneckz/uni-jsx").UNIComponent<TabItemInnerProps, any, any>;
+export {};

package/mobile/lib/ui-kit/TabsControl/TabItemInner.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style.js';
+import { Text } from '../Text/Text.js';
+const tabPaddingStyleMap = {
+    default: 'px-xs',
+    underlined: 'px-m',
+    rounded: 'px-lg rounded-md',
+};
+const tabTextStyle = 'text-secondary-text hover:text-primary-main';
+const activeTabTextStyleMap = {
+    default: 'text-black sm:text-white',
+    underlined: 'text-primary-main border-b-2',
+    rounded: 'text-white',
+};
+const tabBgStyleMap = {
+    default: 'bg-white',
+    underlined: 'bg-white',
+    rounded: 'bg-transparent',
+};
+const activeTabBgStyleMap = {
+    default: 'sm:bg-primary-main',
+    underlined: 'bg-white',
+    rounded: 'bg-primary-main',
+};
+export const TabItemInner = JSX(({ tag = 'div', item = {}, isActive, type = 'default', onClick }) => {
+    const Tag = tag;
+    const { text, ...link } = item;
+    return (_jsx(Tag, { className: style('h-12', 'block flex-1', 'cursor-pointer', tabPaddingStyleMap[type], isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type]), role: "tab", "aria-selected": isActive, onClick: onClick, ...link, children: _jsx("div", { className: style('h-full', 'flex justify-center items-center', 'text-center whitespace-nowrap', isActive ? activeTabTextStyleMap[type] : tabTextStyle), children: _jsx(Text, { size: "text-m", children: text }) }) }));
+});
+//# sourceMappingURL=TabItemInner.js.map

package/mobile/lib/ui-kit/TabsControl/TabItemInner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabItemInner.js","sourceRoot":"","sources":["../../../src/ui-kit/TabsControl/TabItemInner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAGpC,MAAM,kBAAkB,GAA4B;IAClD,OAAO,EAAE,OAAO;IAChB,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,kBAAkB;CAC5B,CAAC;AAEF,MAAM,YAAY,GAAG,6CAA6C,CAAC;AAEnE,MAAM,qBAAqB,GAA4B;IACrD,OAAO,EAAE,0BAA0B;IACnC,UAAU,EAAE,8BAA8B;IAC1C,OAAO,EAAE,YAAY;CACtB,CAAC;AAEF,MAAM,aAAa,GAA4B;IAC7C,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,gBAAgB;CAC1B,CAAC;AAEF,MAAM,mBAAmB,GAA4B;IACnD,OAAO,EAAE,oBAAoB;IAC7B,UAAU,EAAE,UAAU;IACtB,OAAO,EAAE,iBAAiB;CAC3B,CAAC;AAMF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAC7B,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,GAAG,SAAS,EAAE,OAAO,EAAE,EAAE,EAAE;IAClE,MAAM,GAAG,GAAQ,GAAG,CAAC;IAErB,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAE/B,OAAO,CACL,KAAC,GAAG,IACF,SAAS,EAAE,KAAK,CACd,MAAM,EACN,cAAc,EACd,gBAAgB,EAChB,kBAAkB,CAAC,IAAI,CAAC,EACxB,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAC3D,EACD,IAAI,EAAC,KAAK,mBACK,QAAQ,EACvB,OAAO,EAAE,OAAO,KACZ,IAAI,YAER,cACE,SAAS,EAAE,KAAK,CACd,QAAQ,EACR,kCAAkC,EAClC,+BAA+B,EAC/B,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YAAY,CACtD,YAED,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,YAAE,IAAI,GAAQ,GAC7B,GACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/src/components/Blocks.ts

@@ -7,12 +7,12 @@ import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard/CarouselBankHistoryCard';
-import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
-import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
-import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
+import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
+import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
@@ -26,6 +26,7 @@ import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
+import { ProductTile } from './ProductTile/ProductTile';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
@@ -33,21 +34,26 @@ import { StepsBlock } from './StepsBlock/StepsBlock';
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
+import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
   ApplicationForm,
-  ButtonsBlock,
+  BenefitsBlock,
   BonusBenefitsBlock,
+  ButtonsBlock,
   Calculator,
   CardTransfer,
   Carousel,
+  CarouselBankHistoryCard,
   CarouselCard,
   CarouselCatalogCard,
   CarouselProductCard,
-  CarouselBankHistoryCard,
+  CarouselProgramsCard,
+  CarouselRecommendationCard,
   CarouselTariffsCard,
   ComparisonTable,
+  ExchangeRateTile,
   Footer,
   Header,
   Headline,
@@ -58,17 +64,15 @@ export const Blocks: BlocksRegistry = {
   PictureText,
   Placeholder,
   ProductBlock,
+  ProductGallery,
+  ProductTile,
+  RichTextBlock,
+  RollupItem,
+  SafeDepositRental,
   StepsBlock,
   Tabs,
   TariffsTable,
   TextBlock,
-  RichTextBlock,
-  RollupItem,
-  SafeDepositRental,
+  Tile,
   VerticalLayout,
-  CarouselRecommendationCard,
-  ExchangeRateTile,
-  CarouselProgramsCard,
-  ProductGallery,
-  BenefitsBlock,
 };

package/mobile/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -28,7 +28,7 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
     const [filtrationState, { field, reset, update: replaceFiltrationState }] =
       useForm(initialFiltrationState);
 
-    const normalizedHotFilters: TabItemBase[] = useMemo(
+    const tabsControlItems: TabItemBase[] = useMemo(
       () =>
         hotFilters.map(({ text }) => ({
           text,
@@ -40,12 +40,12 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
 
     const handleHotFilterSelect = useCallback(
       (_: TabItemBase) => {
-        setHotFilterIndex(normalizedHotFilters.indexOf(_));
+        setHotFilterIndex(tabsControlItems.indexOf(_));
         replaceFiltrationState(
-          hotFilters[normalizedHotFilters.indexOf(_)].filter || initialFiltrationState,
+          hotFilters[tabsControlItems.indexOf(_)].filter || initialFiltrationState,
         );
       },
-      [normalizedHotFilters],
+      [hotFilters, tabsControlItems],
     );
 
     useEffect(() => {
@@ -65,8 +65,8 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
       >
         <TabsControl
           className="mb-2xs"
-          items={normalizedHotFilters}
-          value={normalizedHotFilters[hotFilterIndex]}
+          items={tabsControlItems}
+          value={tabsControlItems[hotFilterIndex]}
           onChange={handleHotFilterSelect}
         />
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}

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

@@ -12,7 +12,7 @@ export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>(
   ({ className = '', isSticky, tabs = [], tabsMode, ...rest }) => {
-    const normalizedTabs: TabItemBase[] = useMemo(() => tabs.map(normalizeTab), [tabs]);
+    const tabsControlItems: TabItemBase[] = useMemo(() => tabs.map(normalizeTab), [tabs]);
 
     const [activeTabIndex, setActiveTabIndex] = useState(0);
 
@@ -32,12 +32,15 @@ export const Tabs = JSX<TabsBlockProps>(
       }
     }, [tabs, activeTabIndex]);
 
-    const handleChange = useCallback((_: TabItemBase) => {
-      const index = normalizedTabs.indexOf(_);
+    const handleChange = useCallback(
+      (_: TabItemBase) => {
+        const index = tabsControlItems.indexOf(_);
 
-      setActiveTabIndex(index);
-      fireTabEvent(tabs[index]);
-    }, []);
+        setActiveTabIndex(index);
+        fireTabEvent(tabs[index]);
+      },
+      [tabs, tabsControlItems],
+    );
 
     return (
       <BlockWrapper
@@ -46,10 +49,10 @@ export const Tabs = JSX<TabsBlockProps>(
         {...rest}
       >
         {renderTabs({
-          items: normalizedTabs,
-          onChange: handleChange,
-          value: normalizedTabs[activeTabIndex],
+          items: tabsControlItems,
+          value: tabsControlItems[activeTabIndex],
           tabsMode,
+          onChange: handleChange,
         })}
       </BlockWrapper>
     );

package/mobile/src/model/HeadlineType.ts

@@ -46,7 +46,7 @@ export type AdditionalDescriptionProps = {
   additionalDescription?: string;
 };
 
-export type HeadlineCommonProps = TitleProps & DescriptionProps & AlignProps & {};
+export type HeadlineCommonProps = TitleProps & DescriptionProps & AlignProps;
 
 export type HeadlineProps = HeadlineCommonProps & {
   headlineVersion?: HeadlineVersion;

package/mobile/src/ui-kit/BaseFiltration/checkShouldRenderBlock.ts

@@ -34,10 +34,8 @@ export const checkShouldRenderBlock = (pattern: Record<string, any>, target: Rec
         return isNumberFieldMatch(key, pattern);
       }
 
-      if (typeof subPattern === 'object') {
-        if ('min' in subPattern && 'max' in subPattern) {
-          return isValueInRange(key, pattern);
-        }
+      if (typeof subPattern === 'object' && 'min' in subPattern && 'max' in subPattern) {
+        return isValueInRange(key, pattern);
       }
 
       return Array.isArray(subPattern)

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
-import { style } from '../../utils/style';
-import { Text } from '../Text/Text';
+import { TabItemInner } from './TabItemInner';
 import type { TabsControlProps } from './TabsControlProps';
 
 export type TabItemBase = LinkProps;
@@ -16,66 +16,27 @@ export interface TabItemProps {
   type?: TabType;
 }
 
-const tabPaddingStyleMap: Record<TabType, string> = {
-  default: 'px-xs',
-  underlined: 'px-m',
-  rounded: 'px-lg rounded-md',
-};
+export const TabItem = JSX<TabItemProps>((props) =>
+  props?.item?.href ? <LinkTabItem {...props} /> : <ButtonTabItem {...props} />,
+);
 
-const tabTextStyle = 'text-secondary-text hover:text-primary-main';
-
-const activeTabTextStyleMap: Record<TabType, string> = {
-  default: 'text-black sm:text-white',
-  underlined: 'text-primary-main border-b-2',
-  rounded: 'text-white',
-};
+const LinkTabItem = JSX<TabItemProps>((props) => {
+  const link = useLink();
 
-const tabBgStyleMap: Record<TabType, string> = {
-  default: 'bg-white',
-  underlined: 'bg-white',
-  rounded: 'bg-transparent',
-};
+  const handleClick = useCallback(() => {
+    props.onClick && props.onClick(props.item || {});
+  }, [props.onClick, props.item]);
 
-const activeTabBgStyleMap: Record<TabType, string> = {
-  default: 'sm:bg-primary-main',
-  underlined: 'bg-white',
-  rounded: 'bg-primary-main',
-};
+  const { onClick, ...item } = link({ ...props.item, onClick: handleClick });
 
-export const TabItem = JSX<TabItemProps>(({ item = {}, isActive, onClick, type = 'default' }) => {
-  const link = useLink();
+  return <TabItemInner {...props} tag="a" item={item} onClick={onClick} />;
+});
 
-  const handleClick = () => {
+// TODO: Update handlerDecorator (support buttons?)
+const ButtonTabItem = JSX<TabItemProps>(({ item = {}, onClick, ...rest }) => {
+  const handleClick = useCallback(() => {
     onClick && onClick(item);
-  };
-
-  const { text, ...linkProps } = link({ ...item, onClick: handleClick });
-
-  const Tag = item.href ? 'a' : 'div';
+  }, [onClick, item]);
 
-  return (
-    <Tag
-      className={style(
-        'h-12',
-        'block flex-1',
-        'cursor-pointer',
-        tabPaddingStyleMap[type],
-        isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type],
-      )}
-      role="tab"
-      aria-selected={isActive}
-      {...linkProps}
-    >
-      <div
-        className={style(
-          'h-full',
-          'flex justify-center items-center',
-          'text-center whitespace-nowrap',
-          isActive ? activeTabTextStyleMap[type] : tabTextStyle,
-        )}
-      >
-        <Text size="text-m">{text}</Text>
-      </div>
-    </Tag>
-  );
+  return <TabItemInner item={item} onClick={handleClick} {...rest} />;
 });

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

@@ -0,0 +1,69 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import { Text } from '../Text/Text';
+import type { TabItemProps, TabType } from './TabItem';
+
+const tabPaddingStyleMap: Record<TabType, string> = {
+  default: 'px-xs',
+  underlined: 'px-m',
+  rounded: 'px-lg rounded-md',
+};
+
+const tabTextStyle = 'text-secondary-text hover:text-primary-main';
+
+const activeTabTextStyleMap: Record<TabType, string> = {
+  default: 'text-black sm:text-white',
+  underlined: 'text-primary-main border-b-2',
+  rounded: 'text-white',
+};
+
+const tabBgStyleMap: Record<TabType, string> = {
+  default: 'bg-white',
+  underlined: 'bg-white',
+  rounded: 'bg-transparent',
+};
+
+const activeTabBgStyleMap: Record<TabType, string> = {
+  default: 'sm:bg-primary-main',
+  underlined: 'bg-white',
+  rounded: 'bg-primary-main',
+};
+
+interface TabItemInnerProps extends TabItemProps {
+  tag?: string;
+}
+
+export const TabItemInner = JSX<TabItemInnerProps>(
+  ({ tag = 'div', item = {}, isActive, type = 'default', onClick }) => {
+    const Tag: any = tag;
+
+    const { text, ...link } = item;
+
+    return (
+      <Tag
+        className={style(
+          'h-12',
+          'block flex-1',
+          'cursor-pointer',
+          tabPaddingStyleMap[type],
+          isActive ? activeTabBgStyleMap[type] : tabBgStyleMap[type],
+        )}
+        role="tab"
+        aria-selected={isActive}
+        onClick={onClick}
+        {...link}
+      >
+        <div
+          className={style(
+            'h-full',
+            'flex justify-center items-center',
+            'text-center whitespace-nowrap',
+            isActive ? activeTabTextStyleMap[type] : tabTextStyle,
+          )}
+        >
+          <Text size="text-m">{text}</Text>
+        </div>
+      </Tag>
+    );
+  },
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/Blocks.mobile.ts

@@ -7,12 +7,12 @@ import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard/CarouselBankHistoryCard';
-import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
-import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
-import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
+import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
+import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
+import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
@@ -26,6 +26,7 @@ import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
+import { ProductTile } from './ProductTile/ProductTile';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
@@ -33,21 +34,26 @@ import { StepsBlock } from './StepsBlock/StepsBlock';
 import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
+import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 
 export const Blocks: BlocksRegistry = {
   ApplicationForm,
-  ButtonsBlock,
+  BenefitsBlock,
   BonusBenefitsBlock,
+  ButtonsBlock,
   Calculator,
   CardTransfer,
   Carousel,
+  CarouselBankHistoryCard,
   CarouselCard,
   CarouselCatalogCard,
   CarouselProductCard,
-  CarouselBankHistoryCard,
+  CarouselProgramsCard,
+  CarouselRecommendationCard,
   CarouselTariffsCard,
   ComparisonTable,
+  ExchangeRateTile,
   Footer,
   Header,
   Headline,
@@ -58,17 +64,15 @@ export const Blocks: BlocksRegistry = {
   PictureText,
   Placeholder,
   ProductBlock,
+  ProductGallery,
+  ProductTile,
+  RichTextBlock,
+  RollupItem,
+  SafeDepositRental,
   StepsBlock,
   Tabs,
   TariffsTable,
   TextBlock,
-  RichTextBlock,
-  RollupItem,
-  SafeDepositRental,
+  Tile,
   VerticalLayout,
-  CarouselRecommendationCard,
-  ExchangeRateTile,
-  CarouselProgramsCard,
-  ProductGallery,
-  BenefitsBlock,
 };

package/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -28,7 +28,7 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
     const [filtrationState, { field, reset, update: replaceFiltrationState }] =
       useForm(initialFiltrationState);
 
-    const normalizedHotFilters: TabItemBase[] = useMemo(
+    const tabsControlItems: TabItemBase[] = useMemo(
       () =>
         hotFilters.map(({ text }) => ({
           text,
@@ -40,12 +40,12 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
 
     const handleHotFilterSelect = useCallback(
       (_: TabItemBase) => {
-        setHotFilterIndex(normalizedHotFilters.indexOf(_));
+        setHotFilterIndex(tabsControlItems.indexOf(_));
         replaceFiltrationState(
-          hotFilters[normalizedHotFilters.indexOf(_)].filter || initialFiltrationState,
+          hotFilters[tabsControlItems.indexOf(_)].filter || initialFiltrationState,
         );
       },
-      [normalizedHotFilters],
+      [hotFilters, tabsControlItems],
     );
 
     useEffect(() => {
@@ -65,8 +65,8 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
       >
         <TabsControl
           className="mb-2xs"
-          items={normalizedHotFilters}
-          value={normalizedHotFilters[hotFilterIndex]}
+          items={tabsControlItems}
+          value={tabsControlItems[hotFilterIndex]}
           onChange={handleHotFilterSelect}
         />
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}

package/src/components/Tabs/Tabs.tsx

@@ -12,7 +12,7 @@ export interface TabsBlockProps extends TabsContent, UniBlockProps {}
 
 export const Tabs = JSX<TabsBlockProps>(
   ({ className = '', isSticky, tabs = [], tabsMode, ...rest }) => {
-    const normalizedTabs: TabItemBase[] = useMemo(() => tabs.map(normalizeTab), [tabs]);
+    const tabsControlItems: TabItemBase[] = useMemo(() => tabs.map(normalizeTab), [tabs]);
 
     const [activeTabIndex, setActiveTabIndex] = useState(0);
 
@@ -32,12 +32,15 @@ export const Tabs = JSX<TabsBlockProps>(
       }
     }, [tabs, activeTabIndex]);
 
-    const handleChange = useCallback((_: TabItemBase) => {
-      const index = normalizedTabs.indexOf(_);
+    const handleChange = useCallback(
+      (_: TabItemBase) => {
+        const index = tabsControlItems.indexOf(_);
 
-      setActiveTabIndex(index);
-      fireTabEvent(tabs[index]);
-    }, []);
+        setActiveTabIndex(index);
+        fireTabEvent(tabs[index]);
+      },
+      [tabs, tabsControlItems],
+    );
 
     return (
       <BlockWrapper
@@ -46,10 +49,10 @@ export const Tabs = JSX<TabsBlockProps>(
         {...rest}
       >
         {renderTabs({
-          items: normalizedTabs,
-          onChange: handleChange,
-          value: normalizedTabs[activeTabIndex],
+          items: tabsControlItems,
+          value: tabsControlItems[activeTabIndex],
           tabsMode,
+          onChange: handleChange,
         })}
       </BlockWrapper>
     );

package/src/model/HeadlineType.ts

@@ -46,7 +46,7 @@ export type AdditionalDescriptionProps = {
   additionalDescription?: string;
 };
 
-export type HeadlineCommonProps = TitleProps & DescriptionProps & AlignProps & {};
+export type HeadlineCommonProps = TitleProps & DescriptionProps & AlignProps;
 
 export type HeadlineProps = HeadlineCommonProps & {
   headlineVersion?: HeadlineVersion;

package/src/ui-kit/BaseFiltration/checkShouldRenderBlock.ts

@@ -34,10 +34,8 @@ export const checkShouldRenderBlock = (pattern: Record<string, any>, target: Rec
         return isNumberFieldMatch(key, pattern);
       }
 
-      if (typeof subPattern === 'object') {
-        if ('min' in subPattern && 'max' in subPattern) {
-          return isValueInRange(key, pattern);
-        }
+      if (typeof subPattern === 'object' && 'min' in subPattern && 'max' in subPattern) {
+        return isValueInRange(key, pattern);
       }
 
       return Array.isArray(subPattern)