@redneckz/wildless-cms-uni-blocks 0.6.29 → 0.6.30

package/mobile/src/components/Carousel/CarouselNavButtons.tsx

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { VNode } from '../../model/VNode';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+
+interface CarouselNavButtonsProps {
+  cardsCount: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (index: number) => void;
+  cardFullViewCount: number;
+  cards?: VNode[];
+  isCycle?: boolean;
+}
+
+export const CarouselNavButtons = JSX<CarouselNavButtonsProps>(
+  ({ cardsCount, activeCardIndex, setActiveCardIndex, cardFullViewCount, isCycle }) => {
+    const isGalleryScrollAvailable = cardsCount > cardFullViewCount;
+
+    const showNextButton =
+      (isCycle && isGalleryScrollAvailable) ||
+      (isGalleryScrollAvailable && cardsCount - activeCardIndex > cardFullViewCount);
+
+    const showPrevButton =
+      (isCycle && isGalleryScrollAvailable) || (isGalleryScrollAvailable && activeCardIndex > 0);
+
+    const handleNextClick = useCallback(() => {
+      if (isCycle) {
+        const nextIndex = activeCardIndex + 1;
+        setActiveCardIndex(cardsCount === nextIndex ? 0 : nextIndex);
+      } else {
+        setActiveCardIndex(activeCardIndex + 1);
+      }
+    }, []);
+
+    const handlePrevClick = useCallback(() => {
+      if (isCycle && cardsCount > 0) {
+        const prevIndex = activeCardIndex - 1;
+        setActiveCardIndex(prevIndex < 0 ? cardsCount - 1 : prevIndex);
+      } else {
+        setActiveCardIndex(activeCardIndex - 1);
+      }
+    }, []);
+
+    return renderArrows({
+      handler: [handlePrevClick, handleNextClick],
+      isShown: [showPrevButton, showNextButton],
+      btnClass: ['left-8', 'right-8'],
+      className: 'top-1/2 z-10',
+    });
+  },
+);

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -1,9 +1,9 @@
-import { Headline } from '../Headline/Headline';
 import { JSX } from '@redneckz/uni-jsx';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
-import type { CarouselCardContent } from './CarouselCardContent';
 import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { Headline } from '../Headline/Headline';
+import type { CarouselCardContent } from './CarouselCardContent';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {
   version?: CarouselCardVersion;
@@ -13,7 +13,7 @@ const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-[100%]
 
 const CARD_STYLE_MAP: Record<CarouselCardVersion, string> = {
   normal: 'min-w-[100%] justify-center items-center my-7 col-span-12',
-  mini: 'w-1/3 justify-center items-center mx-4 my-9 col-span-4',
+  mini: 'justify-center items-center mx-4 my-9 col-span-4',
 };
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {

package/mobile/src/components/CarouselCard/CarouselCardContent.ts

@@ -1,7 +1,10 @@
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
+/**
+ * @title Карточка какусели
+ */
 export interface CarouselCardContent extends HeadlineCommonProps {
   /**
    * @title Кнопка

package/mobile/src/components/CarouselCard/constants.ts

@@ -0,0 +1,11 @@
+import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
+
+export const cardStyleMap: Record<CarouselCardVersion, string> = {
+  normal: 'min-w-[100%] justify-center items-center m-7 col-span-12',
+  mini: 'min-w-auto justify-center items-center m-9 col-span-4',
+};
+
+export const cardWidthMap: Record<CarouselCardVersion, string> = {
+  normal: 'w-[1007px]',
+  mini: 'w-[350px]',
+};

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

@@ -0,0 +1,24 @@
+{
+  "title": "Заголовок",
+  "button": {
+    "href": "",
+    "text": "Кнопка",
+    "target": "_self",
+    "version": "primary"
+  },
+  "isHighlighting": false,
+  "rows": [
+    {
+      "title": "Ячейка 1-1",
+      "description": "Описание 1-1"
+    },
+    {
+      "title": "Ячейка 1-2",
+      "description": "Описание 1-2"
+    },
+    {
+      "title": "Ячейка 1-3",
+      "description": "Описание 1-3"
+    }
+  ]
+}

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -0,0 +1,93 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { VNode } from '../../model/VNode';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Button } from '../../ui-kit/Button/Button';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
+import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+
+export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
+
+export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
+  ({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
+    const hitStyle = getHitStyle(Boolean(isHighlighting));
+    const rowsNode = rows.map(renderCardInfo);
+    const VISIBLE_ROWS_COUNT = 1;
+    const [visibleRows, hiddenRows] = [
+      rowsNode.slice(0, VISIBLE_ROWS_COUNT),
+      rowsNode.slice(VISIBLE_ROWS_COUNT),
+    ];
+
+    return (
+      <BlockWrapper
+        className={`font-sans bg-white p-[50px] p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`}
+        {...rest}
+      >
+        {isHighlighting ? renderHitIcon() : null}
+        {icon?.src ? <Img className="flex justify-center" image={icon} /> : null}
+        {title ? (
+          <Heading className="text-primary-text text-center pt-2" headingType="h5" title={title} />
+        ) : null}
+        {button ? <Button className="w-full mt-4" {...button} /> : null}
+        {rows?.length ? (
+          <Foldable
+            renderFoldableSection={({ isUnfolded }) => (
+              <div>
+                {visibleRows}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+              </div>
+            )}
+            renderFoldButton={rows.length > 1 ? renderFoldButton : null}
+          />
+        ) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+const getHitStyle = (isHighlighting: boolean): string =>
+  isHighlighting ? 'mt-9 pt-[71px]' : 'mt-[70px] pt-9';
+
+const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
+  <button
+    className="w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center"
+    onClick={onToggle}
+  >
+    <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
+    <Icon
+      className="text-primary-text"
+      name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+      width="16"
+      height="16"
+      asSVG
+    />
+  </button>
+);
+
+const renderCardInfo = (cell: HeadlineCommonProps): VNode => (
+  <div className="py-5 border-b border-main-divider flex flex-col gap-1">
+    {cell?.title ? (
+      <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
+    ) : null}
+    {cell?.description ? <div className="text-primary-text text-h6">{cell.description}</div> : null}
+  </div>
+);
+
+const renderHitIcon = (): VNode => {
+  const POSITION_STYLE = 'absolute -top-7 -right-4';
+
+  return (
+    <div
+      className={`h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)] ${POSITION_STYLE}`}
+    >
+      <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
+      <div className="text-center">Хит</div>
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+{}

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCardContent.ts

@@ -0,0 +1,16 @@
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Карточка тарифной карусели
+ */
+export type CarouselTariffsCardContent = TitleProps & {
+  icon?: Picture;
+  /** @title Выделить карточку */
+  isHighlighting?: boolean;
+  /** @title Кнопка */
+  button?: ButtonProps;
+  /** @title Ячейка */
+  rows?: HeadlineCommonProps[];
+};

package/mobile/src/icons/HeartIcon.svg

@@ -0,0 +1,3 @@
+<svg title="Сердце" width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.87565 3.66675C5.09122 3.66675 2.83398 5.92398 2.83398 8.70841C2.83398 13.7501 8.79232 18.3334 12.0007 19.3996C15.209 18.3334 21.1673 13.7501 21.1673 8.70841C21.1673 5.92398 18.9101 3.66675 16.1257 3.66675C14.4205 3.66675 12.9131 4.51324 12.0007 5.80893C11.0882 4.51324 9.5808 3.66675 7.87565 3.66675Z" fill="currentColor" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/mobile/src/icons/IconName.ts

@@ -3,15 +3,15 @@
 /* eslint-disable max-len, max-lines */
 
 export const IconsWithoutInversion = new Set([
-  'ActualBalanceIcon', 'AirPlaneIcon', 'CardWithGemIcon', 'CarIcon', 'CinemaIcon', 'ClockIcon', 'ComfortableCompIcon', 'CreditCardsIcon', 'DocsIcon', 'DollarIcon', 'DoneIcon', 'EarthIcon', 'EuroIcon', 'FullScreenIcon', 'GlassIcon', 'HuaweiIcon', 'InterestGrowthIcon', 'JCBIcon', 'MapMarkerClusterIcon', 'MapMarkerSingleIcon', 'MasterCardIcon', 'MirIcon', 'MoneyInsuranceIcon', 'NewDocIcon', 'OfficeIcon', 'PackA4Icon', 'PassSendIcon', 'PowerIcon', 'PumpkinIcon', 'SignDocsIcon', 'SoundIcon', 'UnionPayIcon', 'UserGeoLocationIcon', 'VisaIcon', 'WateringCanIcon'
+  'ActualBalanceIcon', 'AirPlaneIcon', 'CardWithGemIcon', 'CarIcon', 'CinemaIcon', 'ClockIcon', 'ComfortableCompIcon', 'CreditCardsIcon', 'DocsIcon', 'DollarIcon', 'DoneIcon', 'EarthIcon', 'EuroIcon', 'FullScreenIcon', 'GlassIcon', 'HeartIcon', 'HuaweiIcon', 'InterestGrowthIcon', 'JCBIcon', 'MapMarkerClusterIcon', 'MapMarkerSingleIcon', 'MasterCardIcon', 'MirIcon', 'MoneyInsuranceIcon', 'NewDocIcon', 'OfficeIcon', 'PackA4Icon', 'PassSendIcon', 'PowerIcon', 'PumpkinIcon', 'SignDocsIcon', 'SoundIcon', 'UnionPayIcon', 'UserGeoLocationIcon', 'VisaIcon', 'WateringCanIcon'
 ]);
 
 export enum IconMap {
-  ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowUpIcon = 'ArrowUpIcon', AtmIcon = 'AtmIcon', BankIcon = 'BankIcon', BuildingIcon = 'BuildingIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', Car2Icon = 'Car2Icon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', CinemaIcon = 'CinemaIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocDownloadIcon = 'DocDownloadIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentText2Icon = 'DocumentText2Icon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', DoneSimpleIcon = 'DoneSimpleIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', HuaweiIcon = 'HuaweiIcon', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', LogoIcon = 'LogoIcon', LoupeIcon = 'LoupeIcon', MapMarkerClusterIcon = 'MapMarkerClusterIcon', MapMarkerSingleIcon = 'MapMarkerSingleIcon', MasterCardIcon = 'MasterCardIcon', MetroIcon = 'MetroIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MoneysIcon = 'MoneysIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PackA4Icon = 'PackA4Icon', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PersonalCardIcon = 'PersonalCardIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', StrongBoxIcon = 'StrongBoxIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'UserSquareIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCanIcon = 'WateringCanIcon'
+  ActualBalanceIcon = 'ActualBalanceIcon', AirPlaneIcon = 'AirPlaneIcon', AppleIcon = 'AppleIcon', ArrowDownIcon = 'ArrowDownIcon', ArrowLeftIcon = 'ArrowLeftIcon', ArrowUpIcon = 'ArrowUpIcon', AtmIcon = 'AtmIcon', BankIcon = 'BankIcon', BuildingIcon = 'BuildingIcon', BurgerIcon = 'BurgerIcon', Calendar2Icon = 'Calendar2Icon', CalendarCircleIcon = 'CalendarCircleIcon', CalendarIcon = 'CalendarIcon', CalendarTickIcon = 'CalendarTickIcon', Car2Icon = 'Car2Icon', CardIcon = 'CardIcon', CardPosIcon = 'CardPosIcon', CardTickIcon = 'CardTickIcon', CardWithGemIcon = 'CardWithGemIcon', CarIcon = 'CarIcon', ChartSquareIcon = 'ChartSquareIcon', CinemaIcon = 'CinemaIcon', ClockIcon = 'ClockIcon', CloseIcon = 'CloseIcon', ComfortableCompIcon = 'ComfortableCompIcon', CreditCardsIcon = 'CreditCardsIcon', DiscountShapeIcon = 'DiscountShapeIcon', DocDownloadIcon = 'DocDownloadIcon', DocIcon = 'DocIcon', DocIconMonoColor = 'DocIconMonoColor', DocsIcon = 'DocsIcon', DocumentText2Icon = 'DocumentText2Icon', DocumentTextIcon = 'DocumentTextIcon', DollarIcon = 'DollarIcon', DoneIcon = 'DoneIcon', DoneSimpleIcon = 'DoneSimpleIcon', EarthIcon = 'EarthIcon', EmptyWalletChangeIcon = 'EmptyWalletChangeIcon', EmptyWalletIcon = 'EmptyWalletIcon', EuroIcon = 'EuroIcon', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'GeolocationIcon', GlassIcon = 'GlassIcon', GlobalIcon = 'GlobalIcon', GpsIcon = 'GpsIcon', GridIcon = 'GridIcon', HeartIcon = 'HeartIcon', HuaweiIcon = 'HuaweiIcon', InterestGrowthIcon = 'InterestGrowthIcon', InterestIcon = 'InterestIcon', JCBIcon = 'JCBIcon', LogoIcon = 'LogoIcon', LoupeIcon = 'LoupeIcon', MapMarkerClusterIcon = 'MapMarkerClusterIcon', MapMarkerSingleIcon = 'MapMarkerSingleIcon', MasterCardIcon = 'MasterCardIcon', MetroIcon = 'MetroIcon', MinusIcon = 'MinusIcon', MirIcon = 'MirIcon', MoneyIcon = 'MoneyIcon', MoneyInsuranceIcon = 'MoneyInsuranceIcon', MoneysIcon = 'MoneysIcon', MonitorMobileIcon = 'MonitorMobileIcon', NewDocIcon = 'NewDocIcon', OfficeIcon = 'OfficeIcon', OkIcon = 'OkIcon', PackA4Icon = 'PackA4Icon', PassSendIcon = 'PassSendIcon', PercentageRoundIcon = 'PercentageRoundIcon', PercentageSquareIcon = 'PercentageSquareIcon', PersonalCardIcon = 'PersonalCardIcon', PlayMarketIcon = 'PlayMarketIcon', PlusIcon = 'PlusIcon', PowerIcon = 'PowerIcon', Profile2UserIcon = 'Profile2UserIcon', ProfileIcon = 'ProfileIcon', PumpkinIcon = 'PumpkinIcon', RoundRubleIcon = 'RoundRubleIcon', SafeIcon = 'SafeIcon', ShieldTickIcon = 'ShieldTickIcon', SignDocsIcon = 'SignDocsIcon', SmallClockIcon = 'SmallClockIcon', SoundIcon = 'SoundIcon', StrongBoxIcon = 'StrongBoxIcon', TelegramIcon = 'TelegramIcon', UnionPayIcon = 'UnionPayIcon', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'UserSquareIcon', UserTickIcon = 'UserTickIcon', VisaIcon = 'VisaIcon', VKIcon = 'VKIcon', WalletAdd2Icon = 'WalletAdd2Icon', WalletAddIcon = 'WalletAddIcon', WalletIcon = 'WalletIcon', WalletWithMoneyIcon = 'WalletWithMoneyIcon', WateringCanIcon = 'WateringCanIcon'
 }
 
 export enum IconTitleMap {
-  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолёт', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка', ArrowUpIcon = 'Стрелка вверх', AtmIcon = 'Банкомат', BankIcon = 'Банк', BuildingIcon = 'Здание с деревом', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', Car2Icon = 'Машина2', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', CinemaIcon = 'Кинотеатр', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocDownloadIcon = 'Скачать документ', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentText2Icon = 'Документы-2', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', DoneIcon = 'Зелёная \'галочка\' в круге', DoneSimpleIcon = 'Зелёная \'галочка\'', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', HuaweiIcon = 'Лого «Huawei»', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LogoIcon = 'Logo', LoupeIcon = 'Лупа', MapMarkerClusterIcon = 'Маркер карты', MapMarkerSingleIcon = 'Маркер карты РСХБ', MasterCardIcon = 'MasterCard', MetroIcon = 'Лого Метро', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MoneysIcon = 'Купюры', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PackA4Icon = 'Пачка бумаги А4', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PersonalCardIcon = 'Персональная карта', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', StrongBoxIcon = 'Ящик с замочной скважиной', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'Пользователь в рамке', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCanIcon = 'Добавить продукт'
+  ActualBalanceIcon = 'Деньги', AirPlaneIcon = 'Самолёт', AppleIcon = 'Лого «Apple»', ArrowDownIcon = 'Стрелка \'Вниз\'', ArrowLeftIcon = 'Стрелка', ArrowUpIcon = 'Стрелка вверх', AtmIcon = 'Банкомат', BankIcon = 'Банк', BuildingIcon = 'Здание с деревом', BurgerIcon = 'Бургер', Calendar2Icon = 'Календарь 2', CalendarCircleIcon = 'Скруглённый календарь', CalendarIcon = 'Календарь', CalendarTickIcon = 'Календарь с галочкой', Car2Icon = 'Машина2', CardIcon = 'Кред. карта', CardPosIcon = 'Кред. карта под наклоном', CardTickIcon = 'Кред. карта с галочкой', CardWithGemIcon = 'Карта с драгоценностями', CarIcon = 'Машина', ChartSquareIcon = 'Деньги внутри кошелька', CinemaIcon = 'Кинотеатр', ClockIcon = 'Часы', CloseIcon = 'Крестик', ComfortableCompIcon = 'Кресло', CreditCardsIcon = 'Кредитные карты', DiscountShapeIcon = 'Скидка', DocDownloadIcon = 'Скачать документ', DocIcon = 'Документ', DocIconMonoColor = 'Документ (одноцветный)', DocsIcon = 'Документы', DocumentText2Icon = 'Документы-2', DocumentTextIcon = 'Документ с текстом', DollarIcon = 'Доллар', DoneIcon = 'Зелёная \'галочка\' в круге', DoneSimpleIcon = 'Зелёная \'галочка\'', EarthIcon = 'Земля', EmptyWalletChangeIcon = 'Пустой кошелёк с возвратом', EmptyWalletIcon = 'Пустой кошелёк', EuroIcon = 'Евро', FullScreenIcon = 'FullScreenIcon', GeolocationIcon = 'Геолокация', GlassIcon = 'Зеркало', GlobalIcon = 'Глобус', GpsIcon = 'Gps', GridIcon = 'Сетка (белая)', HeartIcon = 'Сердце', HuaweiIcon = 'Лого «Huawei»', InterestGrowthIcon = 'Диаграмма роста', InterestIcon = 'Скидка', JCBIcon = 'JCB', LogoIcon = 'Logo', LoupeIcon = 'Лупа', MapMarkerClusterIcon = 'Маркер карты', MapMarkerSingleIcon = 'Маркер карты РСХБ', MasterCardIcon = 'MasterCard', MetroIcon = 'Лого Метро', MinusIcon = 'Минус', MirIcon = 'МИР', MoneyIcon = 'Деньги', MoneyInsuranceIcon = 'Денежное страхование', MoneysIcon = 'Купюры', MonitorMobileIcon = 'Монитор и мобильный', NewDocIcon = 'Новый документ', OfficeIcon = 'Офис', OkIcon = 'Лого «Одноклассники»', PackA4Icon = 'Пачка бумаги А4', PassSendIcon = 'Бизнес', PercentageRoundIcon = 'Проценты (круг.)', PercentageSquareIcon = 'Проценты', PersonalCardIcon = 'Персональная карта', PlayMarketIcon = 'Лого «PlayMarket»', PlusIcon = 'Плюс', PowerIcon = 'Щит', Profile2UserIcon = 'Профиль, 2 персоны', ProfileIcon = 'Профиль', PumpkinIcon = 'Тыква', RoundRubleIcon = 'Рубль (круг.)', SafeIcon = 'Сейф', ShieldTickIcon = 'Безопасность', SignDocsIcon = 'Подписанные документы', SmallClockIcon = 'Маленькие часы', SoundIcon = 'Звук', StrongBoxIcon = 'Ящик с замочной скважиной', TelegramIcon = 'Лого «Telegram»', UnionPayIcon = 'UnionPay', UserGeoLocationIcon = 'UserGeoLocationIcon', UserSquareIcon = 'Пользователь в рамке', UserTickIcon = 'Пользователь', VisaIcon = 'Visa', VKIcon = 'Лого «VK»', WalletAdd2Icon = 'Пополнение карты', WalletAddIcon = 'Кошелёк с плюсом', WalletIcon = 'Кошелёк', WalletWithMoneyIcon = 'Кошелёк с деньгами', WateringCanIcon = 'Добавить продукт'
 }
 
 /**
@@ -19,7 +19,7 @@ export enum IconTitleMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
+ *   'Деньги', 'Самолёт', 'Лого «Apple»', 'Стрелка \'Вниз\'', 'Стрелка', 'Стрелка вверх', 'Банкомат', 'Банк', 'Здание с деревом', 'Бургер', 'Календарь 2', 'Скруглённый календарь', 'Календарь', 'Календарь с галочкой', 'Машина2', 'Кред. карта', 'Кред. карта под наклоном', 'Кред. карта с галочкой', 'Карта с драгоценностями', 'Машина', 'Деньги внутри кошелька', 'Кинотеатр', 'Часы', 'Крестик', 'Кресло', 'Кредитные карты', 'Скидка', 'Скачать документ', 'Документ', 'Документ (одноцветный)', 'Документы', 'Документы-2', 'Документ с текстом', 'Доллар', 'Зелёная \'галочка\' в круге', 'Зелёная \'галочка\'', 'Земля', 'Пустой кошелёк с возвратом', 'Пустой кошелёк', 'Евро', 'FullScreenIcon', 'Геолокация', 'Зеркало', 'Глобус', 'Gps', 'Сетка (белая)', 'Сердце', 'Лого «Huawei»', 'Диаграмма роста', 'Скидка', 'JCB', 'Logo', 'Лупа', 'Маркер карты', 'Маркер карты РСХБ', 'MasterCard', 'Лого Метро', 'Минус', 'МИР', 'Деньги', 'Денежное страхование', 'Купюры', 'Монитор и мобильный', 'Новый документ', 'Офис', 'Лого «Одноклассники»', 'Пачка бумаги А4', 'Бизнес', 'Проценты (круг.)', 'Проценты', 'Персональная карта', 'Лого «PlayMarket»', 'Плюс', 'Щит', 'Профиль, 2 персоны', 'Профиль', 'Тыква', 'Рубль (круг.)', 'Сейф', 'Безопасность', 'Подписанные документы', 'Маленькие часы', 'Звук', 'Ящик с замочной скважиной', 'Лого «Telegram»', 'UnionPay', 'UserGeoLocationIcon', 'Пользователь в рамке', 'Пользователь', 'Visa', 'Лого «VK»', 'Пополнение карты', 'Кошелёк с плюсом', 'Кошелёк', 'Кошелёк с деньгами', 'Добавить продукт'
  * ]
  */
-export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | 'ArrowUpIcon' | 'AtmIcon' | 'BankIcon' | 'BuildingIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'Car2Icon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'CinemaIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocDownloadIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentText2Icon' | 'DocumentTextIcon' | 'DollarIcon' | 'DoneIcon' | 'DoneSimpleIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'FullScreenIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'HuaweiIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LogoIcon' | 'LoupeIcon' | 'MapMarkerClusterIcon' | 'MapMarkerSingleIcon' | 'MasterCardIcon' | 'MetroIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MoneysIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PackA4Icon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PersonalCardIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'StrongBoxIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserGeoLocationIcon' | 'UserSquareIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCanIcon';
+export type IconName = '' | 'ActualBalanceIcon' | 'AirPlaneIcon' | 'AppleIcon' | 'ArrowDownIcon' | 'ArrowLeftIcon' | 'ArrowUpIcon' | 'AtmIcon' | 'BankIcon' | 'BuildingIcon' | 'BurgerIcon' | 'Calendar2Icon' | 'CalendarCircleIcon' | 'CalendarIcon' | 'CalendarTickIcon' | 'Car2Icon' | 'CardIcon' | 'CardPosIcon' | 'CardTickIcon' | 'CardWithGemIcon' | 'CarIcon' | 'ChartSquareIcon' | 'CinemaIcon' | 'ClockIcon' | 'CloseIcon' | 'ComfortableCompIcon' | 'CreditCardsIcon' | 'DiscountShapeIcon' | 'DocDownloadIcon' | 'DocIcon' | 'DocIconMonoColor' | 'DocsIcon' | 'DocumentText2Icon' | 'DocumentTextIcon' | 'DollarIcon' | 'DoneIcon' | 'DoneSimpleIcon' | 'EarthIcon' | 'EmptyWalletChangeIcon' | 'EmptyWalletIcon' | 'EuroIcon' | 'FullScreenIcon' | 'GeolocationIcon' | 'GlassIcon' | 'GlobalIcon' | 'GpsIcon' | 'GridIcon' | 'HeartIcon' | 'HuaweiIcon' | 'InterestGrowthIcon' | 'InterestIcon' | 'JCBIcon' | 'LogoIcon' | 'LoupeIcon' | 'MapMarkerClusterIcon' | 'MapMarkerSingleIcon' | 'MasterCardIcon' | 'MetroIcon' | 'MinusIcon' | 'MirIcon' | 'MoneyIcon' | 'MoneyInsuranceIcon' | 'MoneysIcon' | 'MonitorMobileIcon' | 'NewDocIcon' | 'OfficeIcon' | 'OkIcon' | 'PackA4Icon' | 'PassSendIcon' | 'PercentageRoundIcon' | 'PercentageSquareIcon' | 'PersonalCardIcon' | 'PlayMarketIcon' | 'PlusIcon' | 'PowerIcon' | 'Profile2UserIcon' | 'ProfileIcon' | 'PumpkinIcon' | 'RoundRubleIcon' | 'SafeIcon' | 'ShieldTickIcon' | 'SignDocsIcon' | 'SmallClockIcon' | 'SoundIcon' | 'StrongBoxIcon' | 'TelegramIcon' | 'UnionPayIcon' | 'UserGeoLocationIcon' | 'UserSquareIcon' | 'UserTickIcon' | 'VisaIcon' | 'VKIcon' | 'WalletAdd2Icon' | 'WalletAddIcon' | 'WalletIcon' | 'WalletWithMoneyIcon' | 'WateringCanIcon';

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -31,7 +31,7 @@ const getButtonStyle = (props: ButtonInnerProps) => {
     return '';
   }
 
-  const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-9'}`;
+  const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-4'}`;
 
   return [
     'group flex items-center justify-center',

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

@@ -7,7 +7,7 @@ export interface FoldableProps {
   unfoldedByDefault?: boolean;
   isFoldButtonOnTop?: boolean;
   renderFoldableSection: (props: FoldablePartProps) => VNode;
-  renderFoldButton?: (props: FoldablePartProps) => VNode;
+  renderFoldButton?: ((props: FoldablePartProps) => VNode) | null;
 }
 
 export const Foldable = JSX<FoldableProps>(

package/package.json

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

package/src/components/Blocks.ts

@@ -7,6 +7,9 @@ import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { BusinessBlock } from './BusinessBlock/BusinessBlock';
 import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
+import { Carousel } from './Carousel/Carousel';
+import { CarouselCard } from './CarouselCard/CarouselCard';
+import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ContactsBlock } from './ContactsBlock/ContactsBlock';
@@ -42,8 +45,6 @@ import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
-import { CarouselCard } from './CarouselCard/CarouselCard';
-import { Carousel } from './Carousel/Carousel';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
@@ -53,10 +54,13 @@ export const Blocks: BlocksRegistry = {
   Bonus,
   BonusBenefitsBlock,
   CardTransfer,
-  ComparisonTable,
   Calculator,
+  Carousel,
+  CarouselCard,
+  CarouselTariffsCard,
   Catalog,
   ContactsBlock,
+  ComparisonTable,
   ErrorBlock,
   ExchangeRateTile,
   Footer,
@@ -89,6 +93,4 @@ export const Blocks: BlocksRegistry = {
   TextBlock,
   Tile,
   VerticalLayout,
-  CarouselCard,
-  Carousel,
 };

package/src/components/Carousel/Carousel.fixture.tsx

@@ -1,7 +1,9 @@
 import '../../react/setup-fixture';
+import { CarouselCard } from '../CarouselCard/CarouselCard';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
+import { CarouselTariffsCard } from '../CarouselTariffsCard/CarouselTariffsCard';
+import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
-import { CarouselCard } from '../CarouselCard/CarouselCard';
 
 const CAROUSEL_CARD_BLOCK = <CarouselCard className="col-span-12" {...CARD} />;
 
@@ -9,6 +11,12 @@ const CAROUSEL_CARD_BLOCK_MINI = <CarouselCard className="col-span-3" {...CARD_M
 
 const CAROUSEL_CARD_NEW = <CarouselCard className="col-span-12" {...CARD_NEW} />;
 
+const CAROUSEL_TARIFFS_CARD = <CarouselTariffsCard className="col-span-12" {...TARIFFS_CARD} />;
+
+const CAROUSEL_TARIFFS_CARD_HIT = (
+  <CarouselTariffsCard className="col-span-12" {...TARIFFS_CARD_HIT} />
+);
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -45,4 +53,24 @@ export default {
       </Carousel>
     </div>
   ),
+  tariffs: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        cardFullViewCount={3}
+        cardWidth={322}
+        isBlur={true}
+        isCyclic={false}
+        block={{ type: 'Carousel', blocks: new Array(5).fill(TARIFFS_CARD).flat() }}
+      >
+        {[
+          CAROUSEL_TARIFFS_CARD,
+          CAROUSEL_TARIFFS_CARD_HIT,
+          CAROUSEL_TARIFFS_CARD,
+          CAROUSEL_TARIFFS_CARD,
+          CAROUSEL_TARIFFS_CARD,
+        ]}
+      </Carousel>
+    </div>
+  ),
 };

package/src/components/Carousel/Carousel.tsx

@@ -1,10 +1,10 @@
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { CarouselContainer } from './CarouselContainer';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { JSX } from '@redneckz/uni-jsx';
 import { useCarouselControl } from '../../hooks/useCarousel';
-import type { CarouselContent } from './CarouselContent';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+import { CarouselContainer } from './CarouselContainer';
+import type { CarouselContent } from './CarouselContent';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {}
 
@@ -67,4 +67,4 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   },
 );
 
-Carousel.childrenTypes = ['CarouselCard'];
+Carousel.childrenTypes = ['CarouselCard', 'CarouselTariffsCard'];

package/src/components/Carousel/CarouselNavButtons.tsx

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { VNode } from '../../model/VNode';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+
+interface CarouselNavButtonsProps {
+  cardsCount: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (index: number) => void;
+  cardFullViewCount: number;
+  cards?: VNode[];
+  isCycle?: boolean;
+}
+
+export const CarouselNavButtons = JSX<CarouselNavButtonsProps>(
+  ({ cardsCount, activeCardIndex, setActiveCardIndex, cardFullViewCount, isCycle }) => {
+    const isGalleryScrollAvailable = cardsCount > cardFullViewCount;
+
+    const showNextButton =
+      (isCycle && isGalleryScrollAvailable) ||
+      (isGalleryScrollAvailable && cardsCount - activeCardIndex > cardFullViewCount);
+
+    const showPrevButton =
+      (isCycle && isGalleryScrollAvailable) || (isGalleryScrollAvailable && activeCardIndex > 0);
+
+    const handleNextClick = useCallback(() => {
+      if (isCycle) {
+        const nextIndex = activeCardIndex + 1;
+        setActiveCardIndex(cardsCount === nextIndex ? 0 : nextIndex);
+      } else {
+        setActiveCardIndex(activeCardIndex + 1);
+      }
+    }, []);
+
+    const handlePrevClick = useCallback(() => {
+      if (isCycle && cardsCount > 0) {
+        const prevIndex = activeCardIndex - 1;
+        setActiveCardIndex(prevIndex < 0 ? cardsCount - 1 : prevIndex);
+      } else {
+        setActiveCardIndex(activeCardIndex - 1);
+      }
+    }, []);
+
+    return renderArrows({
+      handler: [handlePrevClick, handleNextClick],
+      isShown: [showPrevButton, showNextButton],
+      btnClass: ['left-8', 'right-8'],
+      className: 'top-1/2 z-10',
+    });
+  },
+);

package/src/components/CarouselCard/CarouselCard.tsx

@@ -1,9 +1,9 @@
-import { Headline } from '../Headline/Headline';
 import { JSX } from '@redneckz/uni-jsx';
-import { renderButton } from '../../ui-kit/Button/ButtonSection';
-import type { CarouselCardContent } from './CarouselCardContent';
 import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { Headline } from '../Headline/Headline';
+import type { CarouselCardContent } from './CarouselCardContent';
 
 export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {
   version?: CarouselCardVersion;
@@ -13,7 +13,7 @@ const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-[100%]
 
 const CARD_STYLE_MAP: Record<CarouselCardVersion, string> = {
   normal: 'min-w-[100%] justify-center items-center my-7 col-span-12',
-  mini: 'w-1/3 justify-center items-center mx-4 my-9 col-span-4',
+  mini: 'justify-center items-center mx-4 my-9 col-span-4',
 };
 
 const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {

package/src/components/CarouselCard/CarouselCardContent.ts

@@ -1,7 +1,10 @@
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
+/**
+ * @title Карточка какусели
+ */
 export interface CarouselCardContent extends HeadlineCommonProps {
   /**
    * @title Кнопка

package/src/components/CarouselCard/constants.ts

@@ -0,0 +1,11 @@
+import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
+
+export const cardStyleMap: Record<CarouselCardVersion, string> = {
+  normal: 'min-w-[100%] justify-center items-center m-7 col-span-12',
+  mini: 'min-w-auto justify-center items-center m-9 col-span-4',
+};
+
+export const cardWidthMap: Record<CarouselCardVersion, string> = {
+  normal: 'w-[1007px]',
+  mini: 'w-[350px]',
+};

package/src/components/CarouselTariffsCard/CarouselTariffsCard.example.json

@@ -0,0 +1,24 @@
+{
+  "title": "Заголовок",
+  "button": {
+    "href": "",
+    "text": "Кнопка",
+    "target": "_self",
+    "version": "primary"
+  },
+  "isHighlighting": false,
+  "rows": [
+    {
+      "title": "Ячейка 1-1",
+      "description": "Описание 1-1"
+    },
+    {
+      "title": "Ячейка 1-2",
+      "description": "Описание 1-2"
+    },
+    {
+      "title": "Ячейка 1-3",
+      "description": "Описание 1-3"
+    }
+  ]
+}