@redneckz/wildless-cms-uni-blocks 0.13.3 → 0.13.5

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

@@ -2,33 +2,36 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconBgVersion, IconName, IconProps } from '../../ui-kit/Icon/IconProps';
+import type { IconName, IconBgVersion, IconProps } from '../../ui-kit/Icon/IconProps';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
 import { getIconName } from './getIconName';
-import { renderRoundedIcon } from './renderRoundedIcon';
 import { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
 import { rollupItemStyles } from './rollupItemStyles';
+import type { Picture } from '../../model/Picture';
+import { renderRoundedIcon } from './renderRoundedIcon';
 
-export interface RollupItemProps extends RollupItemContent, UniBlockProps {}
+interface RollupItemProps extends RollupItemContent, UniBlockProps {
+  labelIcon?: Picture;
+  labelIconBgVersion?: IconBgVersion;
+}
 
 export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
   ({
     className = '',
+    isExpanded,
+    isFoldButtonOnTop = true,
     label = 'Развернуть',
     labelIcon,
     labelIconBgVersion,
-    isExpanded,
-    isFoldButtonOnTop = true,
     version = 'primary',
     ...rest
   }) => {

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

@@ -1,7 +1,3 @@
 {
-  "content": {
-    "labelIcon": {
-      "ui:field": "icon"
-    }
-  }
+  "content": {}
 }

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

@@ -1,7 +1,5 @@
 import type { LabelProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
-import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
 
 /**
  * @title Сворачивающаяся секция
@@ -12,6 +10,4 @@ export type RollupItemContent = UniBlockContent &
     isExpanded?: boolean;
     /** @title Кнопка сверху */
     isFoldButtonOnTop?: boolean;
-    labelIcon?: Picture; // TODO: только для мобильной версии
-    labelIconBgVersion?: IconBgVersion;
   };

package/mobile/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -17,7 +17,7 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
         {renderTotal('Аренда за', days)}
         {renderTotal('Цена', price + ' ₽')}
       </div>
-      <span className="sm:hidden order-3 mb-xs text-s-light text-secondary-text">
+      <span className="sm:hidden order-3 mb-xs text-s font-light text-secondary-text">
         {imageDescription}
       </span>
       <div className="flex flex-col items-center gap-s order-3 sm:order-none mb-xl sm:mb-0 bg-primary-main py-s sm:p-3xl text-center">

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

@@ -46,7 +46,7 @@ export const BaseTile = JSX<BaseTileProps>(
         {renderImageContainer(leftImage, { imageAlign })}
         <div
           className={style(
-            'flex flex-col gap-3xl max-w-[600px] xl:max-w-[728px]',
+            'flex flex-col gap-3xl max-w-[600px] @xl:max-w-[728px]',
             leftImage ? '' : 'grow',
           )}
         >
@@ -66,9 +66,20 @@ export const BaseTile = JSX<BaseTileProps>(
 const renderImageContainer = (
   image: VNode | undefined,
   { className, imageAlign }: { className?: string; imageAlign?: Align },
-) =>
-  image ? (
-    <div className={style('flex-shrink-0', imageAlign && imageAlignmentMap[imageAlign], className)}>
+) => {
+  //TODO Спорное решение
+  const fullWidth = image?.props?.image?.size?.width > 400;
+
+  return image ? (
+    <div
+      className={style(
+        'flex-shrink-0',
+        fullWidth ? 'w-full @xl:w-auto' : '',
+        imageAlign && imageAlignmentMap[imageAlign],
+        className,
+      )}
+    >
       {image}
     </div>
   ) : null;
+};

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

@@ -21,6 +21,7 @@ export const Input = JSX<InputProps>(
     onFocus,
     onBlur,
     pattern,
+    autoFocus = false,
   }) => {
     const handleChange = useCallback(
       (e: { target?: { value?: string } }) => {
@@ -61,6 +62,7 @@ export const Input = JSX<InputProps>(
             onFocus={onFocus}
             onBlur={onBlur}
             pattern={pattern}
+            autoFocus={autoFocus}
           />
         </label>
         {children}

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

@@ -14,4 +14,5 @@ export interface InputProps<V = string> extends ControlProps<V>, LabelProps {
   onBlur?: () => void;
   valid?: boolean;
   disabled?: boolean;
+  autoFocus?: boolean;
 }

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

@@ -5,12 +5,14 @@ import { ListItem } from './ListItem';
 import type { ListProps } from './ListProps';
 
 const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
+  XS: 'text-m font-light',
   S: 'text-l font-light',
   M: 'text-h6',
   L: 'text-h5',
 };
 
 const ITEM_INDENT_MAP: Record<ListItemSize, string> = {
+  XS: 'ml-2xs',
   S: 'ml-xs',
   M: 'ml-s',
   L: 'ml-m',

package/mobile/src/ui-kit/List/ListContent.ts

@@ -1,8 +1,8 @@
 /**
  * @title Размер пунктов списка
- * @enumNames ["Маленький", "Средний", "Большой"]
+ * @enumNames ["Очень маленький", "Маленький", "Средний", "Большой"]
  */
-export type ListItemSize = 'S' | 'M' | 'L';
+export type ListItemSize = 'XS' | 'S' | 'M' | 'L';
 
 export interface ListContent {
   /** @title Список */

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -16,6 +16,7 @@ const DOT_SIZE_MAP = {
   L: 'w-1.5 h-1.5 mr-m', // TODO: Действительно нужен этот вариант? отличается только margin
   M: 'w-1.5 h-1.5 mr-s',
   S: 'w-1 h-1 mr-xs',
+  XS: 'w-1 h-1 mr-xs',
 };
 
 export const ListItem = JSX<ListItemProps>(

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

@@ -1,11 +1,13 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useBool } from '../../hooks/useBool';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 import { LabelProps } from '../../model/HeadlineType';
+import { jaroWinklerDistance } from '../../services/search/jaroWinklerDistance';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { Icon } from '../Icon/Icon';
+import { Input } from '../Input/Input';
 
 export interface Option {
   key: string;
@@ -20,6 +22,7 @@ export type SelectProps = LabelProps & {
   isBorder?: boolean;
   placeholder?: string;
   onChange?: (value: Option) => void;
+  isSearch?: boolean;
 };
 
 export const Select = JSX<SelectProps>(
@@ -32,13 +35,19 @@ export const Select = JSX<SelectProps>(
     isBorder = true,
     placeholder = '',
     onChange,
+    isSearch = false,
   }) => {
     const [isOpen, { setFalse: close, toggle }] = useBool();
-    const wrapperRef = useOutsideClick<HTMLDivElement>(close);
+    const [searchValue, setSearchValue] = useState('');
+    const reset = useCallback(() => {
+      close();
+      setSearchValue('');
+    }, []);
+    const wrapperRef = useOutsideClick<HTMLDivElement>(reset);
 
     const handleChange = useCallback(
       (option: Option) => {
-        close();
+        reset();
         onChange && onChange(option);
       },
       [onChange],
@@ -48,17 +57,11 @@ export const Select = JSX<SelectProps>(
 
     return (
       <div className={className} ref={wrapperRef}>
-        {label ? (
-          <div className="mb-xs">
-            <Text size="text-m" color="text-primary-text" font="font-light">
-              {label}
-            </Text>
-          </div>
-        ) : null}
+        {renderLabel(label)}
         <div className={style('relative', isOpen ? 'z-20' : 'z-10')}>
           <div
             className={style(
-              'text-l flex justify-between items-center text-primary-text cursor-pointer',
+              'text-l flex justify-between items-center text-primary-text cursor-pointer relative z-10',
               getBorderStyle(isBorder, valid),
             )}
             onClick={toggle}
@@ -73,10 +76,13 @@ export const Select = JSX<SelectProps>(
               height="16"
             />
           </div>
+          {isSearch ? renderSearch(isOpen, searchValue, setSearchValue) : null}
           {options?.length ? (
             <div className={style('h-0', isOpen ? '' : 'overflow-hidden')}>
               <div className="bg-white text-l max-h-64 overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
-                {options.map(renderOption(handleChange, isOpen, isSelected))}
+                {getFilteredOptions(options, searchValue).map(
+                  renderOption(handleChange, isOpen, isSelected),
+                )}
               </div>
             </div>
           ) : null}
@@ -86,6 +92,34 @@ export const Select = JSX<SelectProps>(
   },
 );
 
+const renderLabel = (label?: string) =>
+  label ? (
+    <div className="mb-xs">
+      <Text size="text-m" color="text-primary-text" font="font-light">
+        {label}
+      </Text>
+    </div>
+  ) : null;
+
+const getFilteredOptions = (options: Option[], searchValue: string) => {
+  return searchValue
+    ? options.filter(
+        (_) => jaroWinklerDistance(_.text?.toLowerCase())(searchValue.toLowerCase()) >= 0.6,
+      )
+    : options;
+};
+
+const renderSearch = (
+  isOpen: boolean,
+  searchValue: string,
+  setSearchValue: (value: string) => void,
+) =>
+  isOpen ? (
+    <div className={style('absolute top-0 w-full h-full z-20')}>
+      <Input type="text" autoFocus value={searchValue} onChange={setSearchValue} />
+    </div>
+  ) : null;
+
 const renderOption =
   (
     handleChange: (option: Option) => void,

package/mobile/src/utils/style.ts

@@ -1,4 +1,5 @@
-type Atom = string | null | undefined;
+type Falsy = null | undefined | false | 0;
+type Atom = string | Falsy;
 
 export const style = (...atoms: Array<Atom | Atom[]>): string =>
   atoms

package/package.json

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

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -28,6 +28,7 @@ const initialFormState: CreditFormState = {
 };
 
 const creditValidator = objectValidator({
+  fullName: defaultValidator,
   annualRevenue: defaultValidator,
   inn: innValidator,
   name: nameValidator,
@@ -65,7 +66,7 @@ export const ApplicationFormCredit = JSX<ApplicationFormsProps>(({ button, link,
 
   return (
     <form className="container space-y-m" onSubmit={formProps.onSubmit}>
-      <Heading headingType="h6" title="Параметры кредита" className="sm:text-center" />
+      <Heading headingType="h6" title="Параметры" className="sm:text-center" />
       {renderCreditParameters(field)}
       <Heading headingType="h6" title="Данные организации" className="sm:text-center" />
       {renderCreditDataOrganization(field)}

package/src/components/ApplicationForm/PhoneInputControl.tsx

@@ -13,6 +13,7 @@ export const PhoneInputControl = JSX<InputControlProps>(
         value={value}
         onChange={onChange}
         onBlur={onBlur}
+        placeholder="+7 (___) ___-__-__"
       />
       <div className="h-2">
         {error ? (

package/src/components/ApplicationForm/renderCreditDataOrganization.tsx

@@ -11,7 +11,7 @@ export const renderCreditDataOrganization = (field: FormFieldRegisterer<CreditFo
       <InputControl
         className="shrink-0 w-full"
         label="Наименование организации"
-        {...field('fullName')}
+        {...withValidator(field('fullName'), defaultValidator)}
       />
       <InputControl
         className="shrink-0 w-full"

package/src/components/ApplicationForm/renderCreditParameters.tsx

@@ -16,7 +16,7 @@ export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormStat
     <div className="sm:w-1/2">
       <label>
         <Text size="text-m" font="font-light">
-          Сумма кредита, ₽
+          Сумма, ₽
         </Text>
       </label>
       <InputRange
@@ -29,7 +29,7 @@ export const renderCreditParameters = (field: FormFieldRegisterer<CreditFormStat
     <div className="sm:w-1/2">
       <label>
         <Text size="text-m" font="font-light">
-          Срок кредита, месяцев
+          Срок, месяцев
         </Text>
       </label>
       <InputRange

package/src/components/ApplicationForm/renderRegion.tsx

@@ -15,6 +15,7 @@ export const renderRegion = ({ regions, field }: RegionProps) => (
     className="w-full"
     label="Регион"
     placeholder="Выберите регион"
+    isSearch
     options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
     {...withValidator(field('region'), defaultValidator)}
   />

package/src/components/ApplicationForm/renderRegionDepartment.tsx

@@ -18,6 +18,7 @@ export const renderRegionDepartment = ({ regions, branches, field }: RegionDepar
       <SelectControl
         label="Регион"
         placeholder="Выберите регион"
+        isSearch
         options={regions.map(({ code = '', name = '' }) => ({ key: code, text: name }))}
         {...withValidator(field('region'), defaultValidator)}
       />

package/src/components/Bonus/Bonus.tsx

@@ -3,8 +3,8 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Headline } from '../Headline/Headline';
 import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent';
 
@@ -12,7 +12,7 @@ export interface BonusProps extends BonusContent, UniBlockProps {}
 
 export const Bonus = JSX<BonusProps>(
   ({ className = '', title, description, bonusItems = [], ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <div className="container">
         <Headline
           className="mb-xl"
@@ -26,20 +26,23 @@ export const Bonus = JSX<BonusProps>(
             ? bonusItems.map((_, i) => (
                 <div
                   key={String(i)}
-                  className="space-y-xs flex-grow w-full sm:w-[49%] border border-gray p-m"
+                  className="space-y-xs flex flex-col grow w-full sm:w-[49%] border border-gray p-m"
                 >
-                  {_?.title ? (
-                    <div>
-                      <Text size="text-h4">{_.title}</Text>
-                    </div>
-                  ) : null}
-                  {_?.description ? (
-                    <Paragraph size="text-xl" font="font-light">
-                      {_.description}
-                    </Paragraph>
-                  ) : null}
-
-                  <div className="flex justify-between items-end">
+                  <div className="grow">
+                    {_?.title ? (
+                      <div className="mb-xs last:mb-0">
+                        <Text size="text-h4">{_.title}</Text>
+                      </div>
+                    ) : null}
+                    {_?.description ? (
+                      <div className="mb-text last:mb-0">
+                        <Paragraph size="text-xl" font="font-light">
+                          {_.description}
+                        </Paragraph>
+                      </div>
+                    ) : null}
+                  </div>
+                  <div className="flex justify-center sm:justify-between sm:items-end">
                     <div className="hidden sm:block">{renderButtonsSection(_?.buttons)}</div>
                     {_.bonusItemContent?.bonusType
                       ? renderBonusItemContent(_.bonusItemContent)
@@ -56,18 +59,19 @@ export const Bonus = JSX<BonusProps>(
 
 const renderBonusItemContent = (bonusItemContent: BonusImageDef | BonusCountDef) =>
   bonusItemContent.bonusType === 'count'
-    ? renderBonusCount(bonusItemContent)
+    ? renderBonusCount(bonusItemContent as BonusCountDef)
     : renderBonusImage(bonusItemContent as BonusImageDef);
 
 const renderBonusCount = (_: BonusCountDef) => (
-  <div className="w-full pt-default mt-s flex items-end">
+  <div className="w-full pt-default mt-s flex justify-center sm:justify-end items-end">
     {_.bonusCount ? (
-      <span className="shrink-0 w-1/2 sm:w-auto font-mohave text-title-extra -tracking-[5px] bg-clip-text text-transparent bg-green-to-yellow mt-lg">
-        {_.bonusCount}
-      </span>
+      // -mb-10 добавлен для выравнивания bonusCount относительно bonusName, тк шрифт font-mohave неправильно высчитывает line-height
+      <div className="shrink-0 -mb-10">
+        <span className="font-mohave text-title-extra gradient-color-text">{_.bonusCount}</span>
+      </div>
     ) : null}
     {_.bonusName ? (
-      <div className="w-1/2 sm:w-auto bg-clip-text text-transparent bg-green-to-yellow">
+      <div className="shrink-0 gradient-color-text">
         <Text size="text-h2">{_.bonusName}</Text>
       </div>
     ) : null}

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -19,8 +19,7 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
   }) => (
     <BlockWrapper className={className} defaultPadding="p-6xl" {...rest}>
       <Headline
-        className="mb-m sm:mb-3xl"
-        isEmbedded={true}
+        className="mb-4xl sm:mb-3xl"
         title={title}
         description={subtitle}
         headlineVersion="M"

package/src/components/Calculator/BusinessDepositCalculatorForm.tsx

@@ -71,6 +71,7 @@ export const BusinessDepositCalculatorForm = JSX<BusinessDepositCalculatorProp>(
           {renderDepositResults(finalSum, income)}
           {renderButtonsSection(buttons, { isVertical: true })}
           {renderFootnote(footnote)}
+          {renderFootnote(bottomFootnote)}
         </div>
       </section>
     );

package/src/components/CardTransfer/CardTransfer.example.json

@@ -8,6 +8,7 @@
       "text": "Далее",
       "target": "_blank",
       "version": "primary"
-    }
+    },
+    "formType": "private"
   }
 }

package/src/components/CardTransfer/CardTransfer.tsx

@@ -14,10 +14,14 @@ const DEFAULT_TITLE = 'Укажите сумму перевода';
 const DEFAULT_LABEL = 'Сумма перевода';
 const DEFAULT_PLACEHOLDER = '1500';
 
-const FORM_URL = 'https://www.rshb.ru/p2p/';
-const AMOUNT_KEY = 'amount';
+const FORM_URL_MAP = {
+  private: 'https://old.rshb.ru/p2p/',
+  business: 'https://old.rshb.ru/smallbusiness/p2p/',
+};
+
 const INITIAL_FORM_STATE = {
-  [AMOUNT_KEY]: 1500,
+  amount: 1500,
+  _amount: 1500,
 };
 
 export interface CardTransferProps extends CardTransferContent, UniBlockProps {}
@@ -29,9 +33,10 @@ export const CardTransfer = JSX<CardTransferProps>(
     label = DEFAULT_LABEL,
     placeholder = DEFAULT_PLACEHOLDER,
     button,
+    formType = 'private',
     ...rest
   }) => {
-    const [{ amount }, { field }] = useForm(INITIAL_FORM_STATE);
+    const [{ amount, _amount }, { field }] = useForm(INITIAL_FORM_STATE);
 
     const isDisabled = amount <= 0;
 
@@ -54,14 +59,15 @@ export const CardTransfer = JSX<CardTransferProps>(
             title={title}
           />
         ) : null}
-        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL}>
+        <form className="w-full xl:max-w-[468px]" method="POST" action={FORM_URL_MAP[formType]}>
           <CurrencyInput
-            name={AMOUNT_KEY}
+            name="_amount"
             valid={!isDisabled}
             placeholder={placeholder}
             label={label}
-            {...field(AMOUNT_KEY, { parse: Number, format: String })}
+            {...field('_amount', { parse: Number, format: String })}
           />
+          <input type="hidden" name="amount" value={_amount} />
           {button?.text ? (
             <button
               type="submit"

package/src/components/CardTransfer/CardTransferContent.ts

@@ -11,4 +11,9 @@ export type CardTransferContent = UniBlockContent &
     /** @title Плейсхолдер */
     placeholder?: string;
     button?: ButtonContent;
+    /**
+     * @title Тип формы
+     * @enumNames ['Частные клиенты', 'Бизнес-клиенты']
+     */
+    formType?: 'private' | 'business';
   };

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

@@ -4,5 +4,6 @@
   "arrowsPadded": true,
   "isCycle": false,
   "isPadding": true,
-  "isAlignCenter": false
+  "isAlignCenter": false,
+  "cardSize": "normal"
 }

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

@@ -187,6 +187,7 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={0}
+        cardSize="big"
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
@@ -203,6 +204,7 @@ export default {
       <Carousel
         className="col-span-12"
         visibleItemCount={0}
+        cardSize="big"
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({

package/src/components/Carousel/Carousel.tsx

@@ -1,18 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { renderBlock } from '../../BlockRenderer/renderBlock';
-import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
 import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
+import type { CarouselContent } from './CarouselContent';
 import { CarouselScrollButtons } from './CarouselScrollButtons';
 import { ITEMS_GAP } from './itemsGap';
-import type { CarouselContent } from './CarouselContent';
-import type { BlockDef } from '../../model/ContentPageDef';
-import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
-import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { renderCarouselCards } from './renderCarouselCards';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -29,6 +26,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     showDots,
     arrowsPadded = true,
     isGap = true,
+    cardSize = 'normal',
     ...rest
   }) => {
     const { blocks: childBlocks = [] } = rest.block || {};
@@ -58,20 +56,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             gap={isGap ? ITEMS_GAP : undefined}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
-            {renderChildren({
-              ...rest,
-              renderProps: (block: BlockDef, options: BlockRendererOptions, blockIndex) =>
-                renderBlock(block, options, {
-                  className: style(
-                    'h-full min-w-80 sm:min-w-96',
-                    noCardBorder
-                      ? ''
-                      : 'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider',
-                  ),
-                  blockIndex,
-                  isActive: activeIndex === blockIndex,
-                }),
-            })}
+            {renderCarouselCards({ noCardBorder, activeIndex, cardSize, ...rest })}
           </SwipeListContainer>
           <CarouselScrollButtons
             scroll={scroll}
@@ -109,3 +94,10 @@ Carousel.childrenTypes = [
   'CarouselInvestmentCard',
   'CarouselEventCard',
 ];
+
+Carousel.childSchema = () => ({
+  isHighlighting: {
+    title: 'Выделить карточку',
+    type: 'boolean',
+  },
+});