@redneckz/wildless-cms-uni-blocks 0.6.32 → 0.6.34

package/mobile/src/BlockRenderer/BlockRendererOptions.ts

@@ -0,0 +1,12 @@
+import type { BlockAncestors, BlockDecorator } from '../model/BlockDecorator';
+import type { BlocksRegistry } from '../model/BlocksRegistry';
+import type { ContentPageDef, Slot } from '../model/ContentPageDef';
+
+export interface BlockRendererOptions {
+  key?: string;
+  page?: ContentPageDef;
+  blockDecorator?: BlockDecorator;
+  blocksRegistry?: BlocksRegistry;
+  parent?: Slot;
+  ancestors?: BlockAncestors;
+}

package/mobile/src/BlockRenderer/defaultBlockDecorator.ts

@@ -0,0 +1,4 @@
+import type { BlockDecorator } from '../model/BlockDecorator';
+
+export const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
+  render({ blockClassName, block });

package/mobile/src/{model → BlockRenderer}/getParentBlockContent.ts

@@ -1,11 +1,11 @@
-import type { BlockAncestors } from './BlockDecorator';
+import type { BlockRendererOptions } from './BlockRendererOptions';
 import { getParentBlockDef } from './getParentBlockDef';
 
 export function getParentBlockContent<C extends Record<string, any>>(
-  ancestors: BlockAncestors | undefined,
+  options: BlockRendererOptions | undefined,
   defaultContent: C,
 ): C {
-  const { content } = getParentBlockDef(ancestors);
+  const { content } = getParentBlockDef(options);
 
   return (content as C) || defaultContent;
 }

package/mobile/src/BlockRenderer/getParentBlockDef.ts

@@ -0,0 +1,6 @@
+import type { BlockRendererOptions } from '../BlockRenderer/BlockRendererOptions';
+import type { BlockDef } from '../model/ContentPageDef';
+
+export function getParentBlockDef(options: BlockRendererOptions | undefined): BlockDef {
+  return options?.parent || {};
+}

package/mobile/src/BlockRenderer/renderBlock.tsx

@@ -0,0 +1,47 @@
+import type { BlockAncestors } from '../model/BlockDecorator';
+import type { BlockDef } from '../model/ContentPageDef';
+import { style2className } from '../utils/style2className';
+import type { BlockRendererOptions } from './BlockRendererOptions';
+import { defaultBlockDecorator } from './defaultBlockDecorator';
+
+const DEFAULT_ANCESTORS: BlockAncestors = [];
+const DEFAULT_STYLE = ['col-span-12'];
+
+export function renderBlock(block: BlockDef, options: BlockRendererOptions) {
+  const {
+    key,
+    blockDecorator = defaultBlockDecorator,
+    blocksRegistry = {},
+    ancestors = DEFAULT_ANCESTORS,
+  } = options;
+  const { type } = block;
+
+  if (!(type && type in blocksRegistry)) {
+    console.warn(`No block with "${type}" is registered`);
+  }
+
+  const BlockComponent = type && blocksRegistry[type];
+
+  return blockDecorator(
+    {
+      blockClassName: `scroll-mt-12 ${style2className(block.style || DEFAULT_STYLE)}`, // TODO scroll-mt-12 ? here?
+      block,
+      ancestors,
+      // Adjusted by decorator block and blockClassName
+      render: ({ block: adjustedBlock, blockClassName: adjustedBlockClassName }) => {
+        const { content } = adjustedBlock;
+
+        return BlockComponent ? (
+          <BlockComponent
+            key={key}
+            className={adjustedBlockClassName}
+            block={block}
+            options={options}
+            {...content}
+          />
+        ) : null;
+      },
+    },
+    key,
+  );
+}

package/mobile/src/BlockRenderer/renderBlockList.tsx

@@ -0,0 +1,33 @@
+import type { BlockAncestors, SlotName } from '../model/BlockDecorator';
+import { DEFAULT_SLOT_NAME } from '../model/BlockDecorator';
+import type { BlockDef } from '../model/ContentPageDef';
+import type { VNode } from '../model/VNode';
+import type { BlockRendererOptions } from './BlockRendererOptions';
+import { renderBlock } from './renderBlock';
+
+export interface BlocksListRendererProps extends BlockRendererOptions {
+  slotName?: SlotName;
+  renderChild?: (block: BlockDef, options: BlockRendererOptions) => VNode;
+}
+
+const EMPTY_ANCESTORS: BlockAncestors = [];
+
+export const renderBlocksList = (
+  blocks: BlockDef[] | undefined,
+  {
+    key,
+    ancestors = EMPTY_ANCESTORS,
+    slotName = DEFAULT_SLOT_NAME,
+    renderChild = renderBlock,
+    ...options
+  }: BlocksListRendererProps,
+): VNode[] =>
+  (blocks || []).map((_: BlockDef, j: number) =>
+    renderChild(_, {
+      ...options,
+      key: `${key ? key : _.type}-${j}`,
+      ancestors: options.parent
+        ? [...(ancestors || EMPTY_ANCESTORS), [options.parent, slotName]]
+        : ancestors,
+    }),
+  );

package/mobile/src/BlockRenderer/renderChildren.ts

@@ -0,0 +1,25 @@
+import type { BlockDef } from '../model/ContentPageDef';
+import type { UniBlockProps } from '../model/JSXBlock';
+import type { VNode } from '../model/VNode';
+import type { BlockRendererOptions } from './BlockRendererOptions';
+import { renderBlocksList } from './renderBlockList';
+
+interface ChildrenRendererProps extends UniBlockProps {
+  children?: VNode;
+  renderChild?: (block: BlockDef, options: BlockRendererOptions) => VNode;
+}
+
+export function renderChildren({
+  children,
+  block,
+  options,
+  renderChild,
+}: ChildrenRendererProps): VNode[] | null {
+  if (children) {
+    return children;
+  }
+
+  return block && options
+    ? renderBlocksList(block.blocks, { ...options, parent: block, renderChild })
+    : null;
+}

package/mobile/src/components/Accordion/Accordion.tsx

@@ -1,21 +1,26 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItemsList } from './AccordionItemsList';
 
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
-  ({ title, description, className = '', children, ...rest }) => (
-    <BlockWrapper
-      className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}
-      {...rest}
-    >
+  ({ title, description, className = '', ...rest }) => (
+    <BlockWrapper className={`py-6 px-4 bg-white text-primary-text ${className}`} {...rest}>
       {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
-      {description ? <div className="mb-5 text-m-light text-center">{description}</div> : null}
-      <AccordionItemsList>{children}</AccordionItemsList>
+      {description ? (
+        <div className="mb-5">
+          <Paragraph size="text-m" font="font-light" align="text-center">
+            {description}
+          </Paragraph>
+        </div>
+      ) : null}
+      <AccordionItemsList>{renderChildren(rest)}</AccordionItemsList>
     </BlockWrapper>
   ),
 );

package/mobile/src/components/AccordionItem/AccordionItem.tsx

@@ -1,20 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { getParentBlockContent } from '../../model/getParentBlockContent';
+import { getParentBlockContent } from '../../BlockRenderer/getParentBlockContent';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { JSXBlock } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type { AccordionContent } from '../Accordion/AccordionContent';
 import type { AccordionItemProps } from './AccordionItemProps';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 
 const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
 
 export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProps>(
-  ({ className = '', ancestors, label = '', labelIcon, isExpanded, children }) => {
-    const { bordered } = getParentBlockContent(ancestors, {} as AccordionContent);
+  ({ className = '', label = '', labelIcon, isExpanded, ...rest }) => {
+    const { bordered } = getParentBlockContent(rest.options, {} as AccordionContent);
 
     return (
       <li
@@ -30,7 +32,7 @@ export const AccordionItem: JSXBlock<AccordionItemProps> = JSX<AccordionItemProp
               className="flex flex-wrap group-last:last:pb-0 gap-5 [&>*]:p-0"
               isUnfolded={isUnfolded}
             >
-              {children}
+              {renderChildren(rest)}
             </FoldableSection>
           )}
           renderFoldButton={({ isUnfolded, onToggle }) => (
@@ -63,7 +65,7 @@ const FoldButton = JSX<FoldButtonProps>(({ className, icon, label, primaryIcon,
     className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text group cursor-pointer ${className}`}
     onClick={onClick}
   >
-    <span className="text-m-title-xs font-medium pr-2.5 flex group-hover:text-primary-main">
+    <div className="flex group-hover:text-primary-main">
       {primaryIcon ? (
         <Img
           image={getIconWithVersion(primaryIcon)}
@@ -73,8 +75,10 @@ const FoldButton = JSX<FoldButtonProps>(({ className, icon, label, primaryIcon,
           asSVG
         />
       ) : null}
-      {label}
-    </span>
+      <Text size="text-m-title-xs" font="font-medium">
+        {label}
+      </Text>
+    </div>
     <Img
       className="flex-shrink-0"
       image={getIconWithVersion({ icon: icon })}

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

@@ -3,6 +3,7 @@
     "title": "Вы можете оплатить бонусными баллами",
     "subtitle": "Удобный каталог с большим ассортиментом товаров и сервисов",
     "columnsCount": "4",
+    "cardTextAlign": "center",
     "bonusBenefits": [
       {
         "label": "Более 5000 товаров",

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
@@ -12,13 +13,21 @@ import type {
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
 export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ className = '', title, subtitle, bonusBenefits, columnsCount = '4', ...rest }) => (
+  ({
+    bonusBenefits,
+    cardTextAlign = 'center',
+    className = '',
+    columnsCount = '4',
+    subtitle,
+    title,
+    ...rest
+  }) => (
     <BlockWrapper
       className={`font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`}
       {...rest}
     >
       <Headline
-        className="!p-0"
+        className="!p-0 mb-8"
         title={title}
         description={subtitle}
         headlineVersion="M"
@@ -26,7 +35,9 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
         {...rest}
       />
       {bonusBenefits?.length ? (
-        <div className={`grid gap-1 mt-8 ${getElementsColsValue(columnsCount)}`}>
+        <div
+          className={`grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}
+        >
           {bonusBenefits.map(renderBonusBenefit)}
         </div>
       ) : null}
@@ -34,23 +45,25 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
   ),
 );
 
-const renderBonusBenefit = (bonusBenefit: BonusBenefit, i: number) => {
+const renderBonusBenefit = ({ icon, label, description }: BonusBenefit, i: number) => {
   return (
-    <div key={String(i)} className="flex flex-col items-center max-w-[292px]">
-      {bonusBenefit?.icon ? (
-        <Img
-          className="h-[160px] w-[180px] min-w-[180px] min-h-[160px]"
-          image={bonusBenefit.icon}
-          width="180"
-          height="160"
-        />
-      ) : null}
-      <div>
-        {bonusBenefit?.label ? <span className="text-h6 m-0">{bonusBenefit.label}</span> : null}
-      </div>
+    <div key={String(i)} className="flex flex-col items-center text-h6">
+      {description ? <span>{description}</span> : null}
+      {icon ? <Img image={icon} height="180" width="auto" className="h-[180px] w-auto" /> : null}
+      <div>{label ? <span>{label}</span> : null}</div>
     </div>
   );
 };
 
-const getElementsColsValue = (colValue: ColumnsCount) =>
-  colValue === '4' ? 'grid-cols-4' : 'grid-cols-5';
+const getElementsColsValue = (colValue: ColumnsCount) => {
+  switch (colValue) {
+    case '3':
+      return 'grid-cols-3';
+    case '4':
+      return 'grid-cols-4';
+    case '5':
+      return 'grid-cols-5';
+    default:
+      return 'grid-cols-5';
+  }
+};

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlockContent.ts

@@ -1,18 +1,20 @@
-import type { LabelProps, TitleProps } from '../../model/HeadlineType';
+import type { AlignType } from '../../model/AlignType';
+import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
 import type { IconProps } from '../../model/Picture';
 /**
  * @title Количество элементов в строке
  * @enumNames [
+ *   "Три колонки",
  *   "Четыре колонки",
  *   "Пять колонок",
  *  ]
  */
-export type ColumnsCount = '4' | '5';
+export type ColumnsCount = '3' | '4' | '5';
 
 /**
  * @title Бонус и преимущество
  */
-export type BonusBenefit = LabelProps & IconProps;
+export type BonusBenefit = LabelProps & IconProps & DescriptionProps;
 
 /**
  * @title Блок бонусов и преимуществ
@@ -23,4 +25,5 @@ export type BonusBenefitsBlockContent = TitleProps & {
   /** @title Список бонусов */
   bonusBenefits?: BonusBenefit[];
   columnsCount?: ColumnsCount;
+  cardTextAlign?: AlignType;
 };

package/mobile/src/components/Calculator/Calculator.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -9,19 +10,19 @@ import { renderCalculatorBlock } from './renderCalculatorBlock';
 
 export interface CalculatorProps extends CalculatorContent, UniBlockProps {}
 
-type TabsProps = {
-  tabsShift: number;
+interface TabsProps {
+  activeIndex: number;
   tabsNav: CalculatorNav[];
-  activeSlideIndex: number;
-  setActiveSlideIndex: (index: number) => void;
-};
+  slideIndexShift: number;
+  onClick: (index: number) => void;
+}
 
-type NavButtonProps = {
+interface NavButtonProps {
   tab: CalculatorNav;
   i: number;
-  activeSlideIndex: number;
+  isActive: boolean;
   onClick: () => void;
-};
+}
 
 export const Calculator = JSX<CalculatorProps>(
   ({ className = '', calculatorTabs = [], ...rest }) => {
@@ -29,15 +30,14 @@ export const Calculator = JSX<CalculatorProps>(
     const calculatorBlocks = calculatorTabs.map(
       ({ calculatorBlock }) => calculatorBlock || ({} as CalculatorBlockDef),
     );
-    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
-    const [tabsShift, setTabsShift] = useState(0);
-
-    const handleNextClick = () => setTabsShift(tabsShift + 1);
-    const handlePrevClick = () => setTabsShift(tabsShift - 1);
+    const [slideIndexShift, setSlideIndexShift] = useState(0);
+    const handleSlideIndexShift = useCallback((_: number) => setSlideIndexShift(_), []);
+    const COLUMNS_FOR_SCROLL = 3;
 
-    const isGalleryScrollAvailable = calculatorTabs?.length > 3;
-    const showNextButton = isGalleryScrollAvailable && calculatorTabs?.length > tabsShift + 3;
-    const showPrevButton = tabsShift > 0;
+    const [activeIndex, controls] = useCarouselControls({
+      itemCount: calculatorTabs?.length,
+      visibleItemCount: COLUMNS_FOR_SCROLL,
+    });
 
     return (
       <BlockWrapper
@@ -46,18 +46,17 @@ export const Calculator = JSX<CalculatorProps>(
       >
         <div className="bg-white">
           {tabsNav.length > 1
-            ? renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex })
+            ? renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick: handleSlideIndexShift })
             : null}
           {renderArrows({
-            handler: [handlePrevClick, handleNextClick],
-            isShown: [showPrevButton, showNextButton],
+            ...controls,
             btnClass: ['left-3', 'right-3'],
             className: 'top-8',
           })}
         </div>
         <div
           className="flex"
-          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          style={{ transform: `translateX(-${slideIndexShift}00%)` }}
           role="list"
         >
           {calculatorBlocks?.length ? calculatorBlocks.map(renderCalculatorBlock) : null}
@@ -67,19 +66,17 @@ export const Calculator = JSX<CalculatorProps>(
   },
 );
 
-function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps) {
-  const isActiveBtn = i === activeSlideIndex;
-
-  const btnClassName = isActiveBtn
+function renderNavButton({ tab, i, isActive, onClick }: NavButtonProps) {
+  const btnClassName = isActive
     ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
     : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
-  const btnTitleClassName = isActiveBtn ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
-  const btnDescClassName = isActiveBtn
+  const btnTitleClassName = isActive ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
+  const btnDescClassName = isActive
     ? 'text-l-light text-white'
     : `text-m-light text-secondary-text`;
-  const iconClassName = isActiveBtn ? '' : `text-primary-main`;
+  const iconClassName = isActive ? '' : `text-primary-main`;
   const iconVersion = tab?.icon?.iconVersion;
-  const activeIconStyle = isActiveBtn ? 'white' : 'normal';
+  const activeIconStyle = isActive ? 'white' : 'normal';
 
   return (
     <button
@@ -108,11 +105,13 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
   );
 }
 
-function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex }: TabsProps) {
+function renderTabs({ activeIndex, tabsNav, slideIndexShift, onClick }: TabsProps) {
+  const CARD_SHIFT = 388;
+
   return (
     <div>
       <div
-        style={{ transform: `translateX(-${tabsShift * 388}px)` }}
+        style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
         className="flex flex-col justify-end items-center h-[126px] pt-9 box-border duration-1000"
       >
         <div className="w-full flex flex-nowrap items-end gap-2">
@@ -120,8 +119,8 @@ function renderTabs({ tabsShift, tabsNav, activeSlideIndex, setActiveSlideIndex
             renderNavButton({
               tab,
               i,
-              activeSlideIndex,
-              onClick: () => setActiveSlideIndex(i),
+              isActive: Boolean(i === slideIndexShift),
+              onClick: () => onClick(i),
             }),
           )}
         </div>

package/mobile/src/components/Calculator/CalculatorValueBlock.tsx

@@ -10,16 +10,14 @@ export interface CalculatorValueBlockProps {
 }
 
 export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
-  ({ title, value, postfix = '', prefix, className = '' }) => {
-    return (
-      <div className={`mb-7 ${className}`}>
-        {title ? <div className="text-l-light text-secondary-text">{title}</div> : null}
-        {value ? (
-          <div className="text-h3">
-            {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
+  ({ title, value, postfix = '', prefix, className = '' }) => (
+    <div className={`mb-7 ${className}`}>
+      {title ? <div className="text-l-light text-secondary-text">{title}</div> : null}
+      {value ? (
+        <div className="text-h3">
+          {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}
+        </div>
+      ) : null}
+    </div>
+  ),
 );

package/mobile/src/components/CardTransfer/CardTransfer.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -28,6 +28,7 @@ export const CardTransfer = JSX<CardTransferProps>(
     ...rest
   }) => {
     const [value, setValue] = useState<string>('');
+    const handleChange = useCallback((_: string) => setValue(_), []);
     const isDisabled = !Number(getSanitizedValue(value));
     const buttonStyle = isDisabled
       ? getDisabledButtonClasses({ version: button?.version })
@@ -45,7 +46,7 @@ export const CardTransfer = JSX<CardTransferProps>(
           <CurrencyInput
             name={AMOUNT_KEY}
             value={value}
-            onChange={setValue}
+            onChange={handleChange}
             valid={value === '' || !isDisabled}
             placeholder={placeholder}
             label={label}

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

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

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

@@ -1,4 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -6,61 +8,48 @@ import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { CarouselContainer } from './CarouselContainer';
 import type { CarouselContent } from './CarouselContent';
 
-export interface CarouselProps extends CarouselContent, UniBlockProps {}
+export interface CarouselProps extends CarouselContent, UniBlockProps {
+  itemCount?: number;
+}
 
-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 blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px]';
 
-    const childBlocksLength = childBlocks !== undefined ? childBlocks.length : 0;
+export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
+  ({ className = '', itemCount, visibleItemCount, isBlur = true, isCyclic = false, ...rest }) => {
+    const { blocks: childBlocks } = rest.block || {};
+    const count = itemCount || childBlocks?.length || 0;
 
-    const isScrollAvailable = childBlocksLength > cardFullViewCount;
+    const containerRef = useRef<HTMLDivElement | null>(null);
 
     const [activeIndex, controls] = useCarouselControls({
-      itemsCount: childBlocksLength,
-      visibleItemCount: cardFullViewCount,
+      itemCount: count,
+      visibleItemCount,
       isCyclic,
+      container: containerRef.current,
     });
-    const { inc, dec, canDec, canInc } = controls;
+    const { isScrollAvailable } = controls;
 
     return (
-      <BlockWrapper
-        className={`box-border h-full relative font-sans flex flex-col justify-center overflow-hidden ${className}`}
-        {...rest}
-      >
+      <BlockWrapper className={`relative font-sans overflow-hidden ${className}`} {...rest}>
         <CarouselContainer
-          activeItem={activeIndex}
-          cardFullViewCount={cardFullViewCount}
-          cardWidth={cardWidth}
+          activeIndex={activeIndex}
+          itemCount={count}
+          visibleItemCount={visibleItemCount}
+          containerRef={containerRef}
         >
-          {children}
+          {renderChildren(rest)}
         </CarouselContainer>
-        {isScrollAvailable ? (
-          <div>
-            {renderArrows({
-              handler: [dec, inc],
-              isShown: [canDec, canInc],
-              btnClass: ['left-8', 'right-8'],
-              className: 'top-1/2 z-10',
-            })}
-          </div>
-        ) : null}
-        {isScrollAvailable ? (
+        {isScrollAvailable && isBlur ? (
           <div>
-            <div className={`${blurClasses} left-0 bg-opacity-from-white`} />
-            <div className={`${blurClasses} right-0 bg-opacity-to-white`} />
+            <div className={`${blurBaseStyle} left-0 bg-opacity-from-white`} />
+            <div className={`${blurBaseStyle} right-0 bg-opacity-to-white`} />
           </div>
         ) : null}
+        {renderArrows({
+          ...controls,
+          btnClass: ['left-8', 'right-8'],
+          className: 'top-1/2',
+        })}
       </BlockWrapper>
     );
   },