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

package/mobile/lib/ui-kit/SwipeListControl/SwipeListControlDots.js

@@ -1,20 +1,21 @@
 import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 const DOT_STYLES = 'bg-primary-main opacity-30 w-1.5 h-1.5 min-w-1.5 min-h-1.5 rounded-full';
 const BASE_DOT_WIDTH = 6;
 const ACTIVE_DOT_WIDTH_CHANGE = 16;
 const BASE_DOT_OPACITY = 0.3;
 const ACTIVE_DOT_OPACITY_CHANGE = 0.7;
 export const SwipeListControlDots = JSX(({ children, activeIndex, indexFraction, showDots }) => {
-    const handleClick = (idx) => (e) => {
+    const handleClick = useCallback((idx) => (e) => {
         if (idx === activeIndex) {
             return;
         }
         const contentContainer = e.currentTarget.parentElement
             ?.previousElementSibling;
         contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    };
-    return showDots && children?.length ? (_jsx("div", { className: "flex gap-2 mx-auto mt-5 w-fit", children: children?.map((_, idx) => (_jsx("div", { onClick: handleClick(idx), className: `${DOT_STYLES}`, style: getDotStyles(idx, activeIndex, indexFraction), "aria-hidden": true }, String(idx)))) })) : null;
+    }, [activeIndex]);
+    return showDots && children ? (_jsx("div", { className: "flex gap-2 mx-auto mt-5 w-fit", children: children.length && children.map ? (children.map((_, idx) => (_jsx("div", { onClick: handleClick(idx), className: DOT_STYLES, style: getDotStyles(idx, activeIndex, indexFraction), "aria-hidden": true }, String(idx))))) : (_jsx("div", { className: DOT_STYLES, style: createDotStyle(1) })) })) : null;
 });
 const getDotStyles = (currentIdx, activeIndex, indexFraction) => {
     if (currentIdx < activeIndex || currentIdx > activeIndex + 1) {
@@ -22,14 +23,10 @@ const getDotStyles = (currentIdx, activeIndex, indexFraction) => {
     }
     const leftIndexMod = 1 - indexFraction;
     const rightIndexMod = indexFraction;
-    return currentIdx === activeIndex
-        ? {
-            opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * leftIndexMod}`,
-            width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * leftIndexMod}px`,
-        }
-        : {
-            opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * rightIndexMod}`,
-            width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * rightIndexMod}px`,
-        };
+    return createDotStyle(currentIdx === activeIndex ? leftIndexMod : rightIndexMod);
 };
+const createDotStyle = (indexModifier) => ({
+    opacity: `${BASE_DOT_OPACITY + ACTIVE_DOT_OPACITY_CHANGE * indexModifier}`,
+    width: `${BASE_DOT_WIDTH + ACTIVE_DOT_WIDTH_CHANGE * indexModifier}px`,
+});
 //# sourceMappingURL=SwipeListControlDots.js.map

package/mobile/lib/ui-kit/SwipeListControl/SwipeListControlDots.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeListControlDots.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControlDots.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,MAAM,UAAU,GAAG,yEAAyE,CAAC;AAC7F,MAAM,cAAc,GAAG,CAAC,CAAC;AACzB,MAAM,uBAAuB,GAAG,EAAE,CAAC;AACnC,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAC7B,MAAM,yBAAyB,GAAG,GAAG,CAAC;AAQtC,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CACrC,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrD,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE;QACzC,IAAI,GAAG,KAAK,WAAW,EAAE;YACvB,OAAO;SACR;QAED,MAAM,gBAAgB,GAAI,CAAC,CAAC,aAA6B,CAAC,aAAa;YACrE,EAAE,sBAAsB,CAAC;QAE3B,gBAAgB,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IAC5F,CAAC,CAAC;IAEF,OAAO,QAAQ,IAAI,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CACpC,cAAK,SAAS,EAAC,+BAA+B,YAC3C,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,GAAW,EAAE,EAAE,CAAC,CACjC,cAEE,OAAO,EAAE,WAAW,CAAC,GAAG,CAAC,EACzB,SAAS,EAAE,GAAG,UAAU,EAAE,EAC1B,KAAK,EAAE,YAAY,CAAC,GAAG,EAAE,WAAW,EAAE,aAAa,CAAC,yBAH/C,MAAM,CAAC,GAAG,CAAC,CAKhB,CACH,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,UAAkB,EAClB,WAAmB,EACnB,aAAqB,EACe,EAAE;IACtC,IAAI,UAAU,GAAG,WAAW,IAAI,UAAU,GAAG,WAAW,GAAG,CAAC,EAAE;QAC5D,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,YAAY,GAAG,CAAC,GAAG,aAAa,CAAC;IACvC,MAAM,aAAa,GAAG,aAAa,CAAC;IAEpC,OAAO,UAAU,KAAK,WAAW;QAC/B,CAAC,CAAC;YACE,OAAO,EAAE,GAAG,gBAAgB,GAAG,yBAAyB,GAAG,YAAY,EAAE;YACzE,KAAK,EAAE,GAAG,cAAc,GAAG,uBAAuB,GAAG,YAAY,IAAI;SACtE;QACH,CAAC,CAAC;YACE,OAAO,EAAE,GAAG,gBAAgB,GAAG,yBAAyB,GAAG,aAAa,EAAE;YAC1E,KAAK,EAAE,GAAG,cAAc,GAAG,uBAAuB,GAAG,aAAa,IAAI;SACvE,CAAC;AACR,CAAC,CAAC"}
+{"version":3,"file":"SwipeListControlDots.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControlDots.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,MAAM,UAAU,GAAG,yEAAyE,CAAC;AAC7F,MAAM,cAAc,GAAG,CAAC,CAAC;AACzB,MAAM,uBAAuB,GAAG,EAAE,CAAC;AACnC,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAC7B,MAAM,yBAAyB,GAAG,GAAG,CAAC;AAQtC,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CACrC,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE;IACrD,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,GAAW,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE;QACrB,IAAI,GAAG,KAAK,WAAW,EAAE;YACvB,OAAO;SACR;QAED,MAAM,gBAAgB,GAAI,CAAC,CAAC,aAA6B,CAAC,aAAa;YACrE,EAAE,sBAAsB,CAAC;QAE3B,gBAAgB,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IAC5F,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,OAAO,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,CAC5B,cAAK,SAAS,EAAC,+BAA+B,YAC3C,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CACjC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAW,EAAE,EAAE,CAAC,CAC/B,cAEE,OAAO,EAAE,WAAW,CAAC,GAAG,CAAC,EACzB,SAAS,EAAE,UAAU,EACrB,KAAK,EAAE,YAAY,CAAC,GAAG,EAAE,WAAW,EAAE,aAAa,CAAC,yBAH/C,MAAM,CAAC,GAAG,CAAC,CAKhB,CACH,CAAC,CACH,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAI,CACzD,GACG,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC;AAEF,MAAM,YAAY,GAAG,CACnB,UAAkB,EAClB,WAAmB,EACnB,aAAqB,EACe,EAAE;IACtC,IAAI,UAAU,GAAG,WAAW,IAAI,UAAU,GAAG,WAAW,GAAG,CAAC,EAAE;QAC5D,OAAO,SAAS,CAAC;KAClB;IAED,MAAM,YAAY,GAAG,CAAC,GAAG,aAAa,CAAC;IACvC,MAAM,aAAa,GAAG,aAAa,CAAC;IAEpC,OAAO,cAAc,CAAC,UAAU,KAAK,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;AACnF,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CAAC,aAAqB,EAA0B,EAAE,CAAC,CAAC;IACzE,OAAO,EAAE,GAAG,gBAAgB,GAAG,yBAAyB,GAAG,aAAa,EAAE;IAC1E,KAAK,EAAE,GAAG,cAAc,GAAG,uBAAuB,GAAG,aAAa,IAAI;CACvE,CAAC,CAAC"}

package/mobile/lib/ui-kit/SwipeListControl/SwipeListControlList.js

@@ -3,7 +3,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { DEFAULT_GAP, DEFAULT_PADDING } from './constants.js';
 import { SwipeListControlItem } from './SwipeListControlItem.js';
 import { getContainerStyle } from './utils/getContainerStyle.js';
-export const SwipeListControlList = JSX(({ className = '', children, activeIndex, onScroll, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, }) => {
-    return (_jsx("div", { className: `overflow-auto flex horizontal-list no-scrollbar ${className}`, style: { ...getContainerStyle(padding), gap: `${gap}px` }, role: "list", onScroll: onScroll, children: children?.length ? (children?.map((child, idx) => (_jsx(SwipeListControlItem, { style: getContainerStyle(padding / 4), "aria-current": Boolean(activeIndex === idx), children: child }, String(idx))))) : (_jsx(SwipeListControlItem, { children: children })) }));
+export const SwipeListControlList = JSX(({ className = '', activeIndex = -1, gap = DEFAULT_GAP, padding = DEFAULT_PADDING, children, onScroll, }) => {
+    return children ? (_jsx("div", { className: `overflow-auto flex horizontal-list no-scrollbar ${className}`, style: { ...getContainerStyle(padding), gap: `${gap}px` }, role: "list", onScroll: onScroll, children: children.length && children.map ? (children.map((child, idx) => (_jsx(SwipeListControlItem, { style: getContainerStyle(padding / 4), "aria-current": Boolean(activeIndex === idx), children: child }, String(idx))))) : (_jsx(SwipeListControlItem, { style: getContainerStyle(padding / 4), "aria-current": true, children: children })) })) : null;
 });
 //# sourceMappingURL=SwipeListControlList.js.map

package/mobile/lib/ui-kit/SwipeListControl/SwipeListControlList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeListControlList.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControlList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAW9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CACrC,CAAC,EACC,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,GAAG,GAAG,WAAW,EACjB,OAAO,GAAG,eAAe,GAC1B,EAAE,EAAE;IACH,OAAO,CACL,cACE,SAAS,EAAE,mDAAmD,SAAS,EAAE,EACzE,KAAK,EAAE,EAAE,GAAG,iBAAiB,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,EAAE,EACzD,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,YAEjB,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAClB,QAAQ,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC5B,KAAC,oBAAoB,IAEnB,KAAK,EAAE,iBAAiB,CAAC,OAAO,GAAG,CAAC,CAAC,kBACvB,OAAO,CAAC,WAAW,KAAK,GAAG,CAAC,YAEzC,KAAK,IAJD,MAAM,CAAC,GAAG,CAAC,CAKK,CACxB,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,cAAE,QAAQ,GAAwB,CACxD,GACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"SwipeListControlList.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControlList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAE9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAW9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CACrC,CAAC,EACC,SAAS,GAAG,EAAE,EACd,WAAW,GAAG,CAAC,CAAC,EAChB,GAAG,GAAG,WAAW,EACjB,OAAO,GAAG,eAAe,EACzB,QAAQ,EACR,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,cACE,SAAS,EAAE,mDAAmD,SAAS,EAAE,EACzE,KAAK,EAAE,EAAE,GAAG,iBAAiB,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,EAAE,EACzD,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,QAAQ,YAEjB,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CACjC,QAAQ,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3B,KAAC,oBAAoB,IAEnB,KAAK,EAAE,iBAAiB,CAAC,OAAO,GAAG,CAAC,CAAC,kBACvB,OAAO,CAAC,WAAW,KAAK,GAAG,CAAC,YAEzC,KAAK,IAJD,MAAM,CAAC,GAAG,CAAC,CAKK,CACxB,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,IAAC,KAAK,EAAE,iBAAiB,CAAC,OAAO,GAAG,CAAC,CAAC,kCACxD,QAAQ,GACY,CACxB,GACG,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC"}

package/mobile/lib/ui-kit/TableArrowScrollControl/TableArrowScrollControl.js

@@ -3,9 +3,11 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderArrows } from '../Button/renderArrows.js';
 export const TableArrowScrollControl = JSX(({ isScrollAvailable, onNextClick, onPrevClick, showNextButton, showPrevButton }) => {
     return isScrollAvailable ? (_jsx("div", { children: renderArrows({
-            handler: [onPrevClick, onNextClick],
-            isShown: [showPrevButton, showNextButton],
-            btnClass: ['top-[108px]', 'top-11'],
+            dec: onPrevClick,
+            inc: onNextClick,
+            canDec: showPrevButton,
+            canInc: showNextButton,
+            btnClass: ['top-[108px]', 'top-[44px]'],
             className: 'right-7',
             isDisabled: true,
         }) })) : null;

package/mobile/lib/ui-kit/TableArrowScrollControl/TableArrowScrollControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableArrowScrollControl.js","sourceRoot":"","sources":["../../../src/ui-kit/TableArrowScrollControl/TableArrowScrollControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGtD,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CACxC,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,EAAE;IAClF,OAAO,iBAAiB,CAAC,CAAC,CAAC,CACzB,wBACG,YAAY,CAAC;YACZ,OAAO,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC;YACnC,OAAO,EAAE,CAAC,cAAc,EAAE,cAAc,CAAC;YACzC,QAAQ,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC;YACnC,SAAS,EAAE,SAAS;YACpB,UAAU,EAAE,IAAI;SACjB,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC"}
+{"version":3,"file":"TableArrowScrollControl.js","sourceRoot":"","sources":["../../../src/ui-kit/TableArrowScrollControl/TableArrowScrollControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGtD,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CACxC,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,EAAE;IAClF,OAAO,iBAAiB,CAAC,CAAC,CAAC,CACzB,wBACG,YAAY,CAAC;YACZ,GAAG,EAAE,WAAW;YAChB,GAAG,EAAE,WAAW;YAChB,MAAM,EAAE,cAAc;YACtB,MAAM,EAAE,cAAc;YACtB,QAAQ,EAAE,CAAC,aAAa,EAAE,YAAY,CAAC;YACvC,SAAS,EAAE,SAAS;YACpB,UAAU,EAAE,IAAI;SACjB,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC"}

package/mobile/lib/ui-kit/TableArrowScrollControl/TableArrowScrollControlProps.d.ts

@@ -1,8 +1,9 @@
 export interface TableArrowScrollControlProps {
-    activeCardIndex: number;
+    activeIndex: number;
     onNextClick: () => void;
     onPrevClick: () => void;
     isScrollAvailable?: boolean;
     showNextButton: boolean;
     showPrevButton: boolean;
+    setActiveIndex: (index: number) => void;
 }

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,4 +1,5 @@
 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';
@@ -9,7 +10,7 @@ import { AccordionItemsList } from './AccordionItemsList';
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
-  ({ title, description, className = '', children, ...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 ? (
@@ -19,7 +20,7 @@ export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
           </Paragraph>
         </div>
       ) : null}
-      <AccordionItemsList>{children}</AccordionItemsList>
+      <AccordionItemsList>{renderChildren(rest)}</AccordionItemsList>
     </BlockWrapper>
   ),
 );

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

@@ -1,5 +1,6 @@
 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';
@@ -14,8 +15,8 @@ import type { AccordionItemProps } from './AccordionItemProps';
 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
@@ -31,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 }) => (

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
-}
+}