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

package/mobile/src/components/Recommendation/RecommendationCard.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
@@ -14,7 +15,7 @@ export interface RecommendationCardProps extends RecommendationCardTypes {
 }
 
 export const RecommendationCard = JSX<RecommendationCardProps>(
-  ({ className = '', title, description, items, image, version, socialMedia }) => {
+  ({ className = '', title, description, items, image, version, socialMedia, button }) => {
     const tileTitle = title ? (
       <Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
     ) : null;
@@ -40,6 +41,9 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
             {socialMedia ? (
               <SocialMedia className="pt-10 pb-0" media={socialMedia} version={version} />
             ) : null}
+            {button?.text ? (
+              <div className="pt-2">{renderButton({ button, buttonClassName: 'mt-16' })}</div>
+            ) : null}
           </div>
         </BaseTile>
       </section>

package/mobile/src/components/Recommendation/RecommendationContent.ts

@@ -2,6 +2,7 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
@@ -33,6 +34,13 @@ export interface RecommendationCardTypes extends HeadlineCommonProps, ListConten
    * }
    */
   image?: Picture;
+  /**
+   * @default {
+   * "text": "",
+   * "version": "secondary"
+   * }
+   */
+  button?: ButtonProps;
 }
 
 /**

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

@@ -0,0 +1,23 @@
+{
+  "content": {
+    "label": "Сворачивающаяся секция 1",
+    "isExpanded": true,
+    "isFoldButtonOnTop": true
+  },
+  "blocks": [
+    {
+      "type": "Bonus",
+      "content": {
+        "title": "Заголовок",
+        "description": "Описание",
+        "bonusItems": [
+          {
+            "title": "Плитка 1",
+            "description": "Описание плитки 1"
+          }
+        ]
+      },
+      "style": ["col-span-12"]
+    }
+  ]
+}

package/mobile/src/components/RollupItem/RollupItem.tsx

@@ -0,0 +1,86 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { JSXBlock } from '../../model/JSXBlock';
+import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img/Img';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import type { RollupItemProps } from './RollupItemProps';
+
+interface RollupFoldablePartProps extends FoldablePartProps {
+  label?: string;
+  version?: BlockVersion;
+}
+
+interface FoldButtonProps {
+  label?: string;
+  icon: IconName;
+  onClick?: () => void;
+  onToggle?: () => void;
+  isUnfolded?: boolean;
+}
+
+export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
+  ({
+    className = '',
+    label = 'Развернуть',
+    isExpanded,
+    isFoldButtonOnTop = true,
+    version = 'primary',
+    children,
+  }) => (
+    <div className={`border-b border-solid border-main-divider w-full ${className}`}>
+      <Foldable
+        isFoldButtonOnTop={isFoldButtonOnTop}
+        unfoldedByDefault={isExpanded}
+        renderFoldableSection={({ isUnfolded }) => (
+          <div className="box-border">
+            <FoldableSection
+              className={`grid grid-cols-12 gap-1 border-box`}
+              isUnfolded={isUnfolded}
+            >
+              {children}
+            </FoldableSection>
+          </div>
+        )}
+        renderFoldButton={({ isUnfolded, onToggle }) =>
+          renderFoldButton({ isUnfolded, onToggle, label, version })
+        }
+      />
+    </div>
+  ),
+);
+
+RollupItem.childrenTypes = [];
+
+const renderFoldButton = ({ isUnfolded, onToggle, label, version }: RollupFoldablePartProps) => {
+  const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
+  const labels = label ? [label, label] : ['Развернуть', 'Скрыть'];
+
+  return version === 'primary' ? (
+    <FoldButton
+      icon={icons[Number(isUnfolded)]}
+      label={labels[Number(isUnfolded)]}
+      onClick={onToggle}
+    />
+  ) : (
+    <DefaultFoldButton
+      icon={icons[Number(isUnfolded)]}
+      label={labels[Number(isUnfolded)]}
+      onClick={onToggle}
+    />
+  );
+};
+
+const FoldButton = JSX<FoldButtonProps>(({ label, icon, onClick }) => (
+  <button
+    className="border-none bg-transparent px-9 pt-5 pb-3.5 flex justify-between text-left w-full font-sans text-h6 group cursor-pointer"
+    onClick={onClick}
+  >
+    <span className="text-xl font-medium pr-2.5">{label}</span>
+    {icon ? <Img image={getIconWithVersion({ icon })} width="24" height="24" asSVG /> : null}
+  </button>
+));

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

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

package/mobile/src/components/RollupItem/RollupItemContent.ts

@@ -0,0 +1,13 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { LabelProps } from '../../model/HeadlineType';
+
+/**
+ * @title Сворачивающаяся секция
+ */
+export type RollupItemContent = LabelProps & {
+  /** @title Отображать в раскрытом виде */
+  isExpanded?: boolean;
+  /** @title Кнопка сверху */
+  isFoldButtonOnTop?: boolean;
+  version?: BlockVersion;
+};

package/mobile/src/components/RollupItem/RollupItemProps.ts

@@ -0,0 +1,4 @@
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { RollupItemContent } from './RollupItemContent';
+
+export interface RollupItemProps extends RollupItemContent, UniBlockProps {}

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -30,7 +30,7 @@ const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
 };
 
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
-  ({ className = '', children, gap = '', align = 'left', version = 'primary', ...rest }) => (
+  ({ className = '', children, gap = '', align = 'left', version = 'transparent', ...rest }) => (
     <BlockWrapper
       className={[
         'flex flex-col',

package/mobile/src/hooks/useCarousel.ts

@@ -0,0 +1,55 @@
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+
+export type CarouselControlProps = [number, Controls];
+
+export interface Controls {
+  inc: () => void;
+  dec: () => void;
+  canInc: boolean;
+  canDec: boolean;
+}
+
+interface CarouselProps {
+  itemsCount: number;
+  visibleItemCount?: number;
+  isCyclic?: boolean;
+}
+
+export const useCarouselControl = ({
+  itemsCount,
+  visibleItemCount = itemsCount,
+  isCyclic,
+}: CarouselProps): Required<CarouselControlProps> => {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const inc = useCallback(
+    () =>
+      setActiveIndex((_) => (isCyclic ? (_ + 1) % itemsCount : Math.min(_ + 1, itemsCount - 1))),
+    [],
+  );
+
+  const dec = useCallback(
+    () =>
+      setActiveIndex((_) => (isCyclic ? (itemsCount + _ - 1) % itemsCount : Math.max(_ - 1, 0))),
+    [],
+  );
+
+  const isScrollAvailable = itemsCount > visibleItemCount;
+  const isCyclicAndScrollAvailable = isCyclic && isScrollAvailable;
+
+  const canInc =
+    isCyclicAndScrollAvailable ||
+    (isScrollAvailable && itemsCount - activeIndex > visibleItemCount);
+
+  const canDec = isCyclicAndScrollAvailable || Boolean(isScrollAvailable && activeIndex > 0);
+
+  return [
+    activeIndex,
+    {
+      inc,
+      dec,
+      canInc,
+      canDec,
+    },
+  ];
+};

package/mobile/src/icons/HuaweiIcon.svg

@@ -0,0 +1 @@
+<svg title="Лого «Huawei»" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.471 1.4c-5.177 0-7.07 1.894-7.07 7.07V19.53c0 5.176 1.893 7.07 7.07 7.07h11.055c5.177 0 7.074-1.894 7.074-7.07V8.47c0-5.176-1.893-7.07-7.07-7.07H8.47z" fill="#83B83E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.393 16.015h1.012l-.508-1.18-.504 1.18zm-.249.595-.3.687h-.683L12.614 14h.59l1.448 3.297h-.702l-.296-.687h-1.51zm10.997.685h.66V14h-.66v3.295zm-2.63-1.416h1.218v-.6h-1.217v-.676h1.767v-.6h-2.427v3.294h2.49v-.601h-1.83v-.817zm-2.623.39L17.138 14h-.546l-.748 2.269-.73-2.267h-.712l1.15 3.297h.554l.75-2.166.75 2.166h.56l1.146-3.297h-.694l-.73 2.267zm-7.736-.38c0 .536-.266.822-.75.822-.486 0-.754-.294-.754-.845v-1.864H7.98v1.886c0 .928.516 1.46 1.414 1.46.908 0 1.428-.542 1.428-1.487V14h-.669v1.888zM6.382 14h.669v3.3h-.67v-1.34h-1.51v1.34H4.2V14h.67v1.33h1.51V14zM14 9.8a4.205 4.205 0 0 1-4.2-4.2h.594a3.61 3.61 0 0 0 3.607 3.607 3.61 3.61 0 0 0 3.607-3.606h.593c0 2.316-1.884 4.2-4.2 4.2z" fill="#fff"/></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', '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', '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', 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', 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 = 'Сетка (белая)', 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 = 'Сетка (белая)', 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', 'Сетка (белая)', 'Диаграмма роста', 'Скидка', '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' | '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' | '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/model/CarouselCardVersion.ts

@@ -0,0 +1 @@
+export type CarouselCardVersion = 'normal' | 'mini';

package/mobile/src/services/sitemap/SitemapProps.ts

@@ -24,4 +24,9 @@ export interface SitemapDataProps {
   topItems?: TopMenuItem[];
   /** @title Дополнительное меню */
   dispositions?: DispositionItem[];
+  logo?: {
+    image?: Picture;
+    title?: string;
+  };
+  defaultLocation?: string;
 }

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

@@ -16,7 +16,7 @@ export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
   ({ className = '', label, icon, dataTheme = '', onClick }) => {
     const STATE_STYLE =
       'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
-    const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5 mb-[1px]';
+    const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5';
 
     return (
       <button

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import { useTariffsInnerTableData } from '../../hooks/useTariffsInnerTableData';
+import { useTariffsInnerTableData } from './useTariffsInnerTableData';
 import { InnerTableBody } from './InnerTableBody';
 import { TableInnerButton } from './InnerTableButton';
 import { InnerTableHeader } from './InnerTableHeader';

package/mobile/src/ui-kit/Input/InputProps.ts

@@ -1,9 +1,8 @@
-import type { InputTypes } from '../../model/InputTypes';
 import type { LabelProps } from '../../model/HeadlineType';
+import type { InputTypes } from '../../model/InputTypes';
 
 export type InputProps = LabelProps & {
   className?: string;
-  label?: string;
   inputClassName?: string;
   id?: string;
   name?: string;

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
+import { LabelProps } from '../../model/HeadlineType';
 import { Icon } from '../Icon/Icon';
 
 export interface OptionProps {
@@ -8,15 +9,14 @@ export interface OptionProps {
   text: string;
 }
 
-export interface SelectProps {
+export type SelectProps = LabelProps & {
   className?: string;
-  label?: string;
   value?: OptionProps;
   onChange: (value: OptionProps) => void;
   options: OptionProps[];
   isBorder?: boolean;
   placeholder?: string;
-}
+};
 
 export const Select = JSX<SelectProps>(
   ({ className = '', isBorder = true, label, options = [], value, onChange, placeholder = '' }) => {

package/package.json

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

package/src/components/Blocks.ts

@@ -18,6 +18,7 @@ import { GracePeriod } from './GracePeriod/GracePeriod';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBlock';
+import { InvestmentGallery } from './InvestmentGallery/InvestmentGallery';
 import { InvestmentInfo } from './InvestmentInfo/InvestmentInfo';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
@@ -33,6 +34,7 @@ import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
 import { Recommendation } from './Recommendation/Recommendation';
+import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { Tabs } from './Tabs/Tabs';
@@ -40,7 +42,8 @@ import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
-import { InvestmentGallery } from './InvestmentGallery/InvestmentGallery';
+import { CarouselCard } from './CarouselCard/CarouselCard';
+import { Carousel } from './Carousel/Carousel';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
@@ -78,6 +81,7 @@ export const Blocks: BlocksRegistry = {
   OtherProducts,
   OtherProductsItem,
   Recommendation,
+  RollupItem,
   SafeDepositRental,
   StepsBlock,
   Tabs,
@@ -85,4 +89,6 @@ export const Blocks: BlocksRegistry = {
   TextBlock,
   Tile,
   VerticalLayout,
+  CarouselCard,
+  Carousel,
 };

package/src/components/Carousel/Carousel.example.json

@@ -0,0 +1,6 @@
+{
+  "cardWidth": 1200,
+  "isBlur": false,
+  "cardFullViewCount": 1,
+  "isCycle": false
+}

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

@@ -0,0 +1,48 @@
+import '../../react/setup-fixture';
+import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
+import { Carousel } from './Carousel';
+import { CarouselCard } from '../CarouselCard/CarouselCard';
+
+const CAROUSEL_CARD_BLOCK = <CarouselCard className="col-span-12" {...CARD} />;
+
+const CAROUSEL_CARD_BLOCK_MINI = <CarouselCard className="col-span-3" {...CARD_MINI} />;
+
+const CAROUSEL_CARD_NEW = <CarouselCard className="col-span-12" {...CARD_NEW} />;
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        cardFullViewCount={1}
+        cardWidth={1200}
+        isBlur={false}
+        isCyclic={true}
+        block={{ type: 'Carousel', blocks: new Array(2).fill(CARD).flat() }}
+      >
+        {[CAROUSEL_CARD_BLOCK, CAROUSEL_CARD_NEW]}
+      </Carousel>
+    </div>
+  ),
+  'carousel with mini cards': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        cardFullViewCount={3}
+        cardWidth={350}
+        isBlur={true}
+        isCyclic={false}
+        block={{ type: 'Carousel', blocks: new Array(5).fill(CARD_MINI).flat() }}
+      >
+        {[
+          CAROUSEL_CARD_BLOCK_MINI,
+          CAROUSEL_CARD_BLOCK_MINI,
+          CAROUSEL_CARD_BLOCK_MINI,
+          CAROUSEL_CARD_BLOCK_MINI,
+          CAROUSEL_CARD_BLOCK_MINI,
+          CAROUSEL_CARD_BLOCK_MINI,
+        ]}
+      </Carousel>
+    </div>
+  ),
+};

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,70 @@
+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';
+
+export interface CarouselProps extends CarouselContent, UniBlockProps {}
+
+export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
+  ({
+    cardFullViewCount = 1,
+    children,
+    cardWidth = 1007,
+    className = '',
+    isBlur = true,
+    isCyclic = false,
+    block,
+    ...rest
+  }) => {
+    const blurClasses = isBlur ? 'absolute top-0 bottom-0 w-[84px]' : '';
+    const { blocks: childBlocks } = block || {};
+
+    const childBlocksLength = childBlocks !== undefined ? childBlocks.length : 0;
+
+    const isScrollAvailable = childBlocksLength > cardFullViewCount;
+
+    const [activeIndex, controls] = useCarouselControl({
+      itemsCount: childBlocksLength,
+      visibleItemCount: cardFullViewCount,
+      isCyclic,
+    });
+
+    const { inc, dec, canDec, canInc } = controls;
+
+    return (
+      <BlockWrapper
+        className={`box-border h-full relative font-sans flex flex-col justify-center overflow-hidden ${className}`}
+        {...rest}
+      >
+        <CarouselContainer
+          activeItem={activeIndex}
+          cardFullViewCount={cardFullViewCount}
+          cardWidth={cardWidth}
+        >
+          {children}
+        </CarouselContainer>
+        {isScrollAvailable ? (
+          <div>
+            {renderArrows({
+              handler: [dec, inc],
+              isShown: [canDec, canInc],
+              btnClass: ['left-8', 'right-8'],
+              className: 'top-1/2 z-10',
+            })}
+          </div>
+        ) : null}
+        {isScrollAvailable ? (
+          <div>
+            <div className={`${blurClasses} left-0 bg-opacity-from-white`} />
+            <div className={`${blurClasses} right-0 bg-opacity-to-white`} />
+          </div>
+        ) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+Carousel.childrenTypes = ['CarouselCard'];

package/src/components/Carousel/CarouselContainer.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface CarouselContainerProps {
+  activeItem: number;
+  cardFullViewCount: number;
+  cardWidth: number;
+}
+
+export const CarouselContainer = JSX<CarouselContainerProps>(
+  ({ children, activeItem, cardFullViewCount, cardWidth }) => {
+    const cardFullViewStyles =
+      cardFullViewCount === 1
+        ? `translateX(-${activeItem}00%)`
+        : `translateX(-${activeItem * cardWidth}px)`;
+
+    return (
+      <div
+        className="w-auto flex flex-1 duration-1000"
+        style={{ transform: `${cardFullViewStyles}` }}
+        role="list"
+      >
+        {children}
+      </div>
+    );
+  },
+);

package/src/components/Carousel/CarouselContent.ts

@@ -0,0 +1,10 @@
+/**
+ * @title Карусель
+ */
+export interface CarouselContent {
+  /** @title Блоки */
+  cardFullViewCount?: number;
+  cardWidth?: number;
+  isBlur?: boolean;
+  isCyclic?: boolean;
+}

package/src/components/CarouselCard/CarouselCard.example.json

@@ -0,0 +1,11 @@
+{
+  "title": "Заголовок",
+  "description": "Описание",
+  "button": {
+    "href": "",
+    "text": "Подробнее",
+    "target": "_self",
+    "version": "primary"
+  },
+  "version": "normal"
+}