@redneckz/wildless-cms-uni-blocks 0.14.533 → 0.14.535

package/mobile/lib/ui-kit/SwipeListControl/SwipeListDots.d.ts

@@ -1,14 +1,19 @@
 import { type BlockVersion } from '../../model/BlockVersion';
+import { type NavButtonProp } from './NavButtonProp';
 import { type SwipeListControlType } from './SwipeListControlContent';
+import { type SwipeListScroll } from './useSwipeListScroll';
 interface SwipeListDotsProps {
     className?: string;
-    containerRef?: {
-        current: HTMLDivElement | null;
-    };
     activeIndex?: number;
     dotCount?: number;
     listType?: SwipeListControlType;
     version?: BlockVersion;
+    navButtons?: NavButtonProp[];
+    onVisibleIndicesChange?: (indices: number[]) => void;
+    containerRef?: {
+        current: HTMLDivElement | null;
+    };
+    containerScroll?: SwipeListScroll;
 }
 export declare const SwipeListDots: import("@redneckz/uni-jsx").UNIComponent<SwipeListDotsProps, any, any>;
 export {};

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

@@ -1,27 +1,43 @@
 import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useMobileMode } from '../../hooks/useMobileMode.js';
 import { style } from '../../utils/style.js';
+import { renderDotButton } from './renderDotButton.js';
+import { renderNavButton } from './renderNavButton.js';
+import { SwipeListContainer } from './SwipeListContainer.js';
+import { useSwipeListScroll } from './useSwipeListScroll.js';
 const containerStyles = {
     'horizontal-list': 'mx-auto mt-lg w-fit',
     'vertical-list': 'absolute flex-col justify-center h-full top-0 left-4',
 };
-const activeDotStyles = {
-    'horizontal-list': 'w-6',
-    'vertical-list': 'h-6',
-};
-const dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white';
-const inactiveDotStyle = 'w-2 h-2 opacity-30';
-export const SwipeListDots = JSX(({ className = '', containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list', version, }) => {
-    const handleClick = (idx) => {
+export const SwipeListDots = JSX(({ className = '', activeIndex = 0, dotCount = 0, listType = 'horizontal-list', version, navButtons = [], containerRef, containerScroll, }) => {
+    const isMobileMode = useMobileMode();
+    const [navRef, navScroll] = useSwipeListScroll({
+        itemCount: navButtons.length,
+    });
+    const scrollOption = getOptions(Boolean(navButtons?.length));
+    useEffect(() => {
+        if (navButtons?.length && activeIndex >= 0 && navRef?.current) {
+            navScroll.scrollTo(activeIndex, scrollOption);
+        }
+    }, [activeIndex]);
+    const onChangeActiveIndex = useCallback((idx) => {
         if (idx !== activeIndex && containerRef?.current) {
-            containerRef.current.children[idx]?.scrollIntoView({
-                behavior: 'smooth',
-                block: 'nearest',
-            });
+            containerScroll?.scrollTo(idx, scrollOption);
         }
-    };
-    return dotCount ? (_jsx("div", { className: style('flex gap-xs', containerStyles[listType], version ? 'group' : '', className), "data-ver": version, children: Array.from({ length: dotCount })
-            .fill(null)
-            .map((_, idx) => (_jsx("div", { className: `${dotStyle} ${idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle}`, role: "button", "aria-hidden": true, onClick: () => handleClick(idx) }, String(idx)))) })) : null;
+    }, [containerRef?.current]);
+    if (navButtons?.length && !isMobileMode) {
+        return (_jsx(SwipeListContainer, { containerRef: navRef, snapAlign: "snap-start", itemClassName: "h-36 flex items-stretch w-screen", gap: 8, children: navButtons.map(renderNavButton({ activeIndex, onClick: onChangeActiveIndex })) }));
+    }
+    else if (dotCount) {
+        return (_jsx("div", { className: style('flex gap-xs', containerStyles[listType], version ? 'group' : '', className, { 'pb-xl': navButtons?.length && isMobileMode }), "data-ver": version, children: Array.from({ length: dotCount })
+                .fill(null)
+                .map(renderDotButton({ activeIndex, onClick: onChangeActiveIndex, listType })) }));
+    }
+    return null;
+});
+const getOptions = (isAuto = false) => ({
+    behavior: isAuto ? 'auto' : 'smooth',
 });
 //# sourceMappingURL=SwipeListDots.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SwipeListDots.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListDots.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C,MAAM,eAAe,GAAyC;IAC5D,iBAAiB,EAAE,qBAAqB;IACxC,eAAe,EAAE,sDAAsD;CACxE,CAAC;AAEF,MAAM,eAAe,GAAyC;IAC5D,iBAAiB,EAAE,KAAK;IACxB,eAAe,EAAE,KAAK;CACvB,CAAC;AAEF,MAAM,QAAQ,GACZ,yGAAyG,CAAC;AAE5G,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAW9C,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAC9B,CAAC,EACC,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,WAAW,EACX,QAAQ,GAAG,CAAC,EACZ,QAAQ,GAAG,iBAAiB,EAC5B,OAAO,GACR,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;QAClC,IAAI,GAAG,KAAK,WAAW,IAAI,YAAY,EAAE,OAAO,EAAE;YAChD,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC;gBACjD,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,SAAS;aACjB,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,cACE,SAAS,EAAE,KAAK,CACd,aAAa,EACb,eAAe,CAAC,QAAQ,CAAC,EACzB,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EACtB,SAAS,CACV,cACS,OAAO,YAEhB,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;aAC9B,IAAI,CAAC,IAAI,CAAC;aACV,GAAG,CAAC,CAAC,CAAC,EAAE,GAAW,EAAE,EAAE,CAAC,CACvB,cAEE,SAAS,EAAE,GAAG,QAAQ,IACpB,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,gBACpD,EAAE,EACF,IAAI,EAAC,QAAQ,uBAEb,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,IAN1B,MAAM,CAAC,GAAG,CAAC,CAOhB,CACH,CAAC,GACA,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC"}
+{"version":3,"file":"SwipeListDots.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListDots.tsx"],"names":[],"mappings":"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"}

package/mobile/lib/ui-kit/SwipeListControl/SwipeListScrollButtons.d.ts

@@ -4,5 +4,6 @@ export interface SwipeListScrollButtonsProps extends SwipeListScrollButtonsConte
     className?: string;
     scroll: SwipeListScroll;
     hasBlur?: boolean;
+    isBottom?: boolean;
 }
 export declare const SwipeListScrollButtons: import("@redneckz/uni-jsx").UNIComponent<SwipeListScrollButtonsProps, any, any>;

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

@@ -2,11 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { style } from '../../utils/style.js';
 import { ScrollLeftButton, ScrollRightButton } from '../LinkButton/ArrowButton.js';
-const scrollButtonStyle = 'absolute top-[calc(50%-24px)] z-40';
 const blurBaseStyle = 'absolute top-0 bottom-0 z-40 hidden @lg:block w-20 pointer-events-none';
-export const SwipeListScrollButtons = JSX(({ className, scroll, hasBlur, arrowsPadded }) => {
+export const SwipeListScrollButtons = JSX(({ className, scroll, hasBlur, arrowsPadded, isBottom }) => {
     const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
-    return (_jsxs("div", { className: style(className), children: [hasBlur ? renderBlur(scroll) : null, canScrollLeft ? (_jsx(ScrollLeftButton, { className: style(scrollButtonStyle, arrowsPadded ? 'left-1' : 'left-0'), onClick: scrollLeft })) : null, canScrollRight ? (_jsx(ScrollRightButton, { className: style(scrollButtonStyle, arrowsPadded ? 'right-1' : 'right-0'), onClick: scrollRight })) : null] }));
+    const isArrowPadded = arrowsPadded && !isBottom;
+    return (_jsxs("div", { className: className, children: [hasBlur ? renderBlur(scroll) : null, canScrollLeft ? (_jsx(ScrollLeftButton, { className: style(buttonStyle(isBottom), isArrowPadded ? 'left-1' : 'left-0'), onClick: scrollLeft })) : null, canScrollRight ? (_jsx(ScrollRightButton, { className: style(buttonStyle(isBottom), isArrowPadded ? 'right-1' : 'right-0'), onClick: scrollRight })) : null] }));
 });
 const renderBlur = (scroll) => (_jsxs("div", { children: [scroll.canScrollLeft ? (_jsx("div", { className: style(blurBaseStyle, 'left-0 bg-opacity-from-white group-data-secondary:bg-none') })) : null, scroll.canScrollRight ? (_jsx("div", { className: style(blurBaseStyle, 'right-0 bg-opacity-to-white group-data-secondary:bg-none') })) : null] }));
+const buttonStyle = (isBottom = false) => style('absolute z-40', isBottom ? 'bottom-[56px]' : 'top-[calc(50%-24px)]');
 //# sourceMappingURL=SwipeListScrollButtons.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SwipeListScrollButtons.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListScrollButtons.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAIhF,MAAM,iBAAiB,GAAG,oCAAoC,CAAC;AAC/D,MAAM,aAAa,GAAG,wEAAwE,CAAC;AAQ/F,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CACvC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE;IAC/C,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC;IAE1E,OAAO,CACL,eAAK,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,aAC7B,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,EACnC,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,gBAAgB,IACf,SAAS,EAAE,KAAK,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,EACvE,OAAO,EAAE,UAAU,GACnB,CACH,CAAC,CAAC,CAAC,IAAI,EACP,cAAc,CAAC,CAAC,CAAC,CAChB,KAAC,iBAAiB,IAChB,SAAS,EAAE,KAAK,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,EACzE,OAAO,EAAE,WAAW,GACpB,CACH,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,MAAuB,EAAE,EAAE,CAAC,CAC9C,0BACG,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CACtB,cACE,SAAS,EAAE,KAAK,CACd,aAAa,EACb,2DAA2D,CAC5D,GACD,CACH,CAAC,CAAC,CAAC,IAAI,EACP,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CACvB,cACE,SAAS,EAAE,KAAK,CAAC,aAAa,EAAE,0DAA0D,CAAC,GAC3F,CACH,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC"}
+{"version":3,"file":"SwipeListScrollButtons.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListScrollButtons.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAIhF,MAAM,aAAa,GAAG,wEAAwE,CAAC;AAS/F,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CACvC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzD,MAAM,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,MAAM,CAAC;IAC1E,MAAM,aAAa,GAAG,YAAY,IAAI,CAAC,QAAQ,CAAC;IAEhD,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACtB,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,EACnC,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,gBAAgB,IACf,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,EAC5E,OAAO,EAAE,UAAU,GACnB,CACH,CAAC,CAAC,CAAC,IAAI,EACP,cAAc,CAAC,CAAC,CAAC,CAChB,KAAC,iBAAiB,IAChB,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,EAC9E,OAAO,EAAE,WAAW,GACpB,CACH,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,MAAuB,EAAE,EAAE,CAAC,CAC9C,0BACG,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CACtB,cACE,SAAS,EAAE,KAAK,CACd,aAAa,EACb,2DAA2D,CAC5D,GACD,CACH,CAAC,CAAC,CAAC,IAAI,EACP,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CACvB,cACE,SAAS,EAAE,KAAK,CAAC,aAAa,EAAE,0DAA0D,CAAC,GAC3F,CACH,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,QAAQ,GAAG,KAAK,EAAE,EAAE,CACvC,KAAK,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC"}

package/mobile/lib/ui-kit/SwipeListControl/renderDotButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DotProp } from './NavButtonProp';
+export declare const renderDotButton: ({ activeIndex, onClick, listType }: DotProp) => (_: any, idx: number) => JSX.Element;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { style } from '../../utils/style.js';
+const activeDotStyles = {
+    'horizontal-list': 'w-6',
+    'vertical-list': 'h-6',
+};
+const dotStyle = 'cursor-pointer rounded-full transition-width duration-300 bg-primary-main group-data-secondary:bg-white';
+const inactiveDotStyle = 'w-2 h-2 opacity-30';
+export const renderDotButton = ({ activeIndex, onClick, listType = 'horizontal-list' }) => (_, idx) => (_jsx("div", { className: style(dotStyle, idx === activeIndex ? activeDotStyles[listType] : inactiveDotStyle), role: "button", "aria-hidden": true, onClick: () => onClick(idx) }, String(idx)));
+//# sourceMappingURL=renderDotButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderDotButton.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/renderDotButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAI1C,MAAM,eAAe,GAAyC;IAC5D,iBAAiB,EAAE,KAAK;IACxB,eAAe,EAAE,KAAK;CACvB,CAAC;AAEF,MAAM,QAAQ,GACZ,yGAAyG,CAAC;AAE5G,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAE9C,MAAM,CAAC,MAAM,eAAe,GAC1B,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,GAAG,iBAAiB,EAAW,EAAE,EAAE,CACpE,CAAC,CAAM,EAAE,GAAW,EAAE,EAAE,CACtB,CACE,cAEE,SAAS,EAAE,KAAK,CACd,QAAQ,EACR,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,gBAAgB,CACnE,EACD,IAAI,EAAC,QAAQ,uBAEb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAPtB,MAAM,CAAC,GAAG,CAAC,CAQhB,CACH,CAAC"}

package/mobile/lib/ui-kit/SwipeListControl/renderNavButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type DotProp, type NavButtonProp } from './NavButtonProp';
+export declare const renderNavButton: ({ activeIndex, onClick }: DotProp) => (nav: NavButtonProp, i: number) => JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { style } from '../../utils/style.js';
+export const renderNavButton = ({ activeIndex, onClick }) => (nav, i) => {
+    const isActive = i === activeIndex;
+    const btnClassName = isActive
+        ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
+        : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:backdrop-blur';
+    const btnTitleClassName = isActive
+        ? 'text-primary-text text-h6 py-xs'
+        : 'text-l pb-2xs text-secondary-text group-data-secondary:text-white';
+    const btnDescClassName = isActive ? 'text-l' : 'text-m group-data-secondary:text-white/80';
+    return (_jsxs("button", { type: "button", onClick: () => onClick(i), "aria-label": nav?.title, className: style('max-h-28 mt-xs ml-xs relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50 whitespace-nowrap', btnClassName), children: [_jsx("div", { className: btnTitleClassName, children: nav?.title }), _jsx("div", { className: style('text-secondary-text font-light', btnDescClassName), children: nav?.description })] }, String(i)));
+};
+//# sourceMappingURL=renderNavButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderNavButton.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/renderNavButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1C,MAAM,CAAC,MAAM,eAAe,GAC1B,CAAC,EAAE,WAAW,EAAE,OAAO,EAAW,EAAE,EAAE,CACtC,CAAC,GAAkB,EAAE,CAAS,EAAE,EAAE;IAChC,MAAM,QAAQ,GAAG,CAAC,KAAK,WAAW,CAAC;IACnC,MAAM,YAAY,GAAG,QAAQ;QAC3B,CAAC,CAAC,yDAAyD;QAC3D,CAAC,CAAC,2EAA2E,CAAC;IAChF,MAAM,iBAAiB,GAAG,QAAQ;QAChC,CAAC,CAAC,iCAAiC;QACnC,CAAC,CAAC,mEAAmE,CAAC;IACxE,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,2CAA2C,CAAC;IAE3F,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,EAEb,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,gBACb,GAAG,EAAE,KAAK,EACtB,SAAS,EAAE,KAAK,CACd,iKAAiK,EACjK,YAAY,CACb,aAED,cAAK,SAAS,EAAE,iBAAiB,YAAG,GAAG,EAAE,KAAK,GAAO,EACrD,cAAK,SAAS,EAAE,KAAK,CAAC,gCAAgC,EAAE,gBAAgB,CAAC,YACtE,GAAG,EAAE,WAAW,GACb,KAXD,MAAM,CAAC,CAAC,CAAC,CAYP,CACV,CAAC;AACJ,CAAC,CAAC"}

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

@@ -11,7 +11,7 @@ export const useSwipeListScroll = ({ itemCount, onVisibleIndicesChange, }) => {
     const handleVisibleIndicesChange = useCallback((indices) => {
         setVisibleIndices((prevIndices) => areArraysEqual(prevIndices, indices) ? prevIndices : indices);
         onVisibleIndicesChange && onVisibleIndicesChange(indices);
-    }, [itemCount]);
+    }, [onVisibleIndicesChange]);
     const [minIndex, maxIndex] = visibleIndices.length
         ? [minBy()(visibleIndices), maxBy()(visibleIndices)]
         : [-1, -1];

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

@@ -1 +1 @@
-{"version":3,"file":"useSwipeListScroll.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/useSwipeListScroll.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSwipeListScroll.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/useSwipeListScroll.ts"],"names":[],"mappings":"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"}

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

@@ -3,6 +3,7 @@ import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl
 import { UniBlock } from '../../UniBlock/UniBlock';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
 import { style } from '../../utils/style';
+import { type ProductBlockContent } from '../ProductBlock/ProductBlockContent';
 import { type CarouselContent } from './CarouselContent';
 import { ITEMS_GAP } from './itemsGap';
 import { renderCarouselCards } from './renderCarouselCards';
@@ -18,24 +19,24 @@ export const Carousel = UniBlock<CarouselProps>(
     arrowsPadded = true,
     isGap = true,
     cardSize = 'normal',
+    isNavButtons = false,
     ...rest
-  }) => {
-    return (
-      <BlockWrapper className={style(className)} defaultPadding="p-6xl" {...rest}>
-        <SwipeListControl
-          className={style('relative max-w-full')}
-          visibleItemCount={visibleItemCount}
-          snapAlign="snap-start"
-          gap={isGap ? ITEMS_GAP : 0}
-          padding={0}
-          arrowsPadded={arrowsPadded}
-          hasBlur
-        >
-          {renderCarouselCards({ noCardBorder, cardSize, ...rest })}
-        </SwipeListControl>
-      </BlockWrapper>
-    );
-  },
+  }) => (
+    <BlockWrapper className={style(className)} defaultPadding="p-6xl" {...rest}>
+      <SwipeListControl
+        className={style('relative max-w-full')}
+        visibleItemCount={visibleItemCount}
+        snapAlign="snap-start"
+        gap={isGap ? ITEMS_GAP : 0}
+        padding={0}
+        arrowsPadded={arrowsPadded}
+        navButtons={isNavButtons ? getNavButton(rest?.block?.blocks) : []}
+        hasBlur
+      >
+        {renderCarouselCards({ noCardBorder, cardSize, isNavButtons, ...rest })}
+      </SwipeListControl>
+    </BlockWrapper>
+  ),
   {
     childrenTypes: [
       'CarouselCard',
@@ -53,3 +54,13 @@ export const Carousel = UniBlock<CarouselProps>(
     }),
   },
 );
+
+const getNavButton = (blocks?: { content?: ProductBlockContent }[]) =>
+  blocks?.map((_) => {
+    const content = _?.content;
+
+    return {
+      title: content?.title,
+      description: content?.additionalDescription || content?.description,
+    };
+  }) ?? [];

package/mobile/src/components/Carousel/CarouselContent.ts

@@ -16,6 +16,8 @@ export type CarouselContent = UniBlockContent & {
   arrowsPadded?: boolean;
   /** @title Отступы между карточками */
   isGap?: boolean;
+  /** @title Показывать кнопки навигации */
+  isNavButtons?: boolean;
   /** @title Не показывать контур на карточках */
   noCardBorder?: boolean;
   cardSize?: CardSizeMode;

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

@@ -19,10 +19,16 @@ const CARD_SIZE_MAP: Record<CardSizeMode, string> = {
 export const renderCarouselCards = ({
   noCardBorder,
   cardSize = 'normal',
+  isNavButtons = false,
   ...rest
-}: UniBlockProps & { noCardBorder?: boolean; cardSize?: CardSizeMode }) => {
+}: UniBlockProps & {
+  noCardBorder?: boolean;
+  cardSize?: CardSizeMode;
+  isNavButtons?: boolean;
+}) => {
   const { blocks: childBlocks } = rest.block || {};
   const someCardsHighlighted = childBlocks?.some(isCardHighlighted);
+  const defaultPadding = isNavButtons ? { defaultPadding: 'p-6xl pb-m' } : {};
 
   return renderChildren({
     ...rest,
@@ -34,6 +40,7 @@ export const renderCarouselCards = ({
             showBorder: !noCardBorder,
             cardSize,
           }),
+          ...defaultPadding,
           blockIndex,
         })}
         {isCardHighlighted(block)

package/mobile/src/components/ProductBlock/ProductBlock.tsx

@@ -8,13 +8,18 @@ import { type ProductBlockContent } from './ProductBlockContent';
 export interface ProductBlockProps extends UniBlockProps, ProductBlockContent {}
 
 export const ProductBlock = UniBlock<ProductBlockProps>(
-  ({ className, padding, ...rest }) => (
+  ({ className, padding, defaultPadding, ...rest }) => (
     <BlockWrapper
       className={style('overflow-hidden flex flex-col gap-3xl box-border', className)}
       padding="p-0"
       {...rest}
     >
-      <BaseProductTile defaultPadding="p-6xl" padding={padding} className="grow h-full" {...rest} />
+      <BaseProductTile
+        defaultPadding={defaultPadding || 'p-6xl'}
+        padding={padding}
+        className="grow h-full"
+        {...rest}
+      />
     </BlockWrapper>
   ),
   { childrenTypes: ['UnitBlock'] },

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,3 +1,4 @@
+import { type AdditionalDescriptionProps } from '../../model/HeadlineType';
 import { type BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
@@ -5,7 +6,8 @@ import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
  * @title Продуктовый блок
  */
 export type ProductBlockContent = UniBlockContent &
-  BaseProductTileContent & {
+  BaseProductTileContent &
+  AdditionalDescriptionProps & {
     /** @title Отображать кнопку возврата */
     backwardButton?: boolean;
   };

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -2,7 +2,6 @@ import { type BlockVersion } from '../../model/BlockVersion';
 import { type BulletsProps } from '../../model/Bullets';
 import { type DescriptionProps, type LabelProps, type TitleProps } from '../../model/HeadlineType';
 import { type IconProps } from '../../model/Picture';
-import { type ImageContent } from '../../ui-kit/Img/ImgProps';
 import { type ButtonsSectionContent } from '../../ui-kit/LinkButton/ButtonsSectionContent';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
@@ -12,7 +11,6 @@ import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
  * @title Шаг
  */
 export type StepProps = DescriptionProps &
-  ImageContent &
   LabelProps &
   RichTextProps &
   IconProps &

package/mobile/src/components/StepsBlock/renderStep.tsx

@@ -1,5 +1,4 @@
 import { type BlockVersion } from '../../model/BlockVersion';
-import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { type VNode } from '../../model/VNode';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { RichText } from '../../ui-kit/RichText/RichText';
@@ -43,7 +42,7 @@ export const renderStep =
         {button?.text ? (
           <LinkButton
             className="box-border py-s w-full max-w-60 mt-auto"
-            version={version as LinkButtonVersion}
+            version={version}
             {...button}
           >
             {button?.text}

package/mobile/src/components/StepsBlock/renderStepMobile.tsx

@@ -1,6 +1,5 @@
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type IconVersion } from '../../model/IconVersion';
-import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
@@ -17,14 +16,11 @@ const styleMap = STEPS_BLOCK_STYLE;
 export const renderStepMobile =
   (stepsSize: boolean, version: BlockVersion, stepVersion: BlockVersion) =>
   (step: StepProps, i: number) => {
-    const { button, image } = step;
-
-    const styleStepMobile = button?.text && image?.src;
+    const { button } = step;
 
     return (
       <div key={String(i)} className="contents">
-        <div className={style('flex items-center relative', image?.src ? 'flex-col' : 'flex-row')}>
-          {image?.src ? renderText(step) : null}
+        <div className="flex items-center relative flex-row">
           <div className="overflow-hidden flex flex-shrink-0 items-center">
             {renderIconArea(stepsSize, stepVersion)(step, i)}
           </div>
@@ -33,11 +29,11 @@ export const renderStepMobile =
               'min-h-6xl': stepsSize,
             })}
           >
-            {image?.src ? null : renderText(step)}
-            {styleStepMobile ? (
+            {renderText(step)}
+            {button?.text ? (
               <LinkButton
                 className="box-border py-s w-full max-w-60 mt-lg"
-                version={version as LinkButtonVersion}
+                version={version}
                 {...button}
               >
                 {button?.text}
@@ -55,15 +51,10 @@ const renderIconArea =
     const isImg = Boolean(step?.icon?.src);
     const iconAreaSize = getIconAreaSize(stepsSize, isImg);
     const containerVersion = isImg ? stepVersion === 'transparent' : stepVersion;
-    const isImgSrc = step.image?.src;
 
     return (
       <BlockWrapper
-        className={style(
-          { 'w-32': Boolean(isImgSrc) },
-          'z-10 mr-s flex justify-center content-center rounded-md',
-          !isImgSrc && iconAreaSize,
-        )}
+        className={style('z-10 mr-s flex justify-center content-center rounded-md', iconAreaSize)}
         defaultPadding=""
         version={containerVersion as BlockVersion}
       >
@@ -75,14 +66,8 @@ const renderIconArea =
   };
 
 const renderText = (step: StepProps) => {
-  const visibleStyle = Boolean(step.button?.text && step.image?.src);
-
   return (
-    <div
-      className={style({
-        'mb-lg w-full': visibleStyle,
-      })}
-    >
+    <div>
       {step?.label ? (
         <Paragraph size="text-l" align="text-left">
           {step.label}
@@ -112,21 +97,15 @@ const renderIcon = ({
   iconVersion: IconVersion;
   i: number;
   stepVersion: BlockVersion;
-}) => {
-  if (isIcon(step?.icon)) {
-    return (
-      <Img
-        image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
-        imageClassName="max-w-full max-h-full"
-        width="24"
-        height="24"
-      />
-    );
-  } else if (isIcon(step.image)) {
-    return <Img image={{ ...step.image, size: { width: 120, height: 120 } }} />;
-  }
-
-  return (
+}) =>
+  isIcon(step?.icon) ? (
+    <Img
+      image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}
+      imageClassName="max-w-full max-h-full"
+      width="24"
+      height="24"
+    />
+  ) : (
     <span
       className={style(
         'text-h4',
@@ -136,4 +115,3 @@ const renderIcon = ({
       {i + 1}
     </span>
   );
-};

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

@@ -10,7 +10,7 @@ export const ButtonInner = JSX<LinkButtonProps>((props) => {
   const iconHideStyle = isWithText(props) ? 'hidden lg:block' : '';
 
   return (
-    <div className={style(getButtonStyle(props), 'flex gap-xs')}>
+    <div className={style(buttonStyle(props), 'flex gap-xs')}>
       {appendLeft ? (
         <div className={style(iconHideStyle, iconStyleMap[version])}>{appendLeft}</div>
       ) : null}
@@ -27,7 +27,7 @@ export const ButtonInner = JSX<LinkButtonProps>((props) => {
   );
 });
 
-const getButtonStyle = (props: LinkButtonContent) => {
+const buttonStyle = (props: LinkButtonContent) => {
   const { version, aboveText, rounded } = props;
 
   if (version === 'link') {

package/mobile/src/ui-kit/SwipeListControl/NavButtonProp.ts

@@ -0,0 +1,11 @@
+import { type DescriptionProps, type TitleProps } from '../../model/HeadlineType';
+import type { SwipeListControlType } from './SwipeListControlContent';
+
+export interface DotProp {
+  activeIndex?: number;
+  onClick: (i: number) => void;
+  listType?: SwipeListControlType;
+}
+
+/** @title Кнопка под слайдом */
+export type NavButtonProp = TitleProps & DescriptionProps;

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type BlockVersion } from '../../model/BlockVersion';
 import { style } from '../../utils/style';
+import { type NavButtonProp } from './NavButtonProp';
 import { SwipeListContainer, type SnapAlign } from './SwipeListContainer';
 import { type SwipeListControlContent } from './SwipeListControlContent';
 import { SwipeListDots } from './SwipeListDots';
@@ -24,6 +25,7 @@ interface SwipeListControlProps extends SwipeListControlContent {
   snapAlign?: SnapAlign;
   hasBlur?: boolean;
   onVisibleIndicesChange?: (indices: number[]) => void;
+  navButtons?: NavButtonProp[];
 }
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
@@ -42,6 +44,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     showDots,
     children,
     onVisibleIndicesChange,
+    navButtons,
   }) => {
     const itemCount = Array.isArray(children) ? children.length : 0;
 
@@ -71,14 +74,17 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
           scroll={scroll}
           hasBlur={hasBlur}
           arrowsPadded={arrowsPadded}
+          isBottom={Boolean(navButtons?.length)}
         />
         <SwipeListDots
           className={style(!showDots && 'lg:hidden')}
-          containerRef={containerRef}
           activeIndex={activeIndex}
           dotCount={itemCount}
           listType={listType}
           version={version}
+          navButtons={navButtons}
+          containerRef={containerRef}
+          containerScroll={scroll}
         />
       </div>
     );