@redneckz/wildless-cms-uni-blocks 0.7.5 → 0.7.6

package/mobile/dist/components/Tabs/renderTab.js

@@ -4,23 +4,21 @@ const jsx_runtime_1 = require("@redneckz/uni-jsx/jsx-runtime");
 const assertUnreachable_1 = require("../../utils/assertUnreachable");
 const LinkTab_1 = require("./LinkTab");
 const renderGroupTab_1 = require("./renderGroupTab");
-const renderTab = ({ page, currentTab, showCounter, onClick }) => 
-// Linter doesn't understand that switch processes all cases
-// eslint-disable-next-line consistent-return
-(tab, i) => {
+const renderTab = ({ page, currentTab, showCounter, onClick, isScrollable = false }) => (tab, i) => {
     const type = tab.type;
     if (!(type === 'group' || type === 'link')) {
         return null;
     }
     switch (type) {
         case 'group':
-            return (0, renderGroupTab_1.renderGroupTab)({ page, currentTab, showCounter, onClick })(tab, i);
+            return (0, renderGroupTab_1.renderGroupTab)({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
         case 'link': {
-            return (0, jsx_runtime_1.jsx)(LinkTab_1.LinkTab, { tab: tab, currentTab: currentTab }, String(i));
+            return ((0, jsx_runtime_1.jsx)(LinkTab_1.LinkTab, { tab: tab, currentTab: currentTab, isScrollable: isScrollable }, String(i)));
         }
         default:
             (0, assertUnreachable_1.assertUnreachable)(type);
     }
+    return null;
 };
 exports.renderTab = renderTab;
 //# sourceMappingURL=renderTab.js.map

package/mobile/dist/components/Tabs/renderTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/renderTab.tsx"],"names":[],"mappings":";;;AACA,qEAAkE;AAClE,uCAAoC;AACpC,qDAAkD;AAU3C,MAAM,SAAS,GACpB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAkB,EAAE,EAAE;AAC/D,4DAA4D;AAC5D,6CAA6C;AAC7C,CAAC,GAAY,EAAE,CAAS,EAAE,EAAE;IAC1B,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;IAEtB,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,EAAE;QAC1C,OAAO,IAAI,CAAC;KACb;IAED,QAAQ,IAAI,EAAE;QACZ,KAAK,OAAO;YACV,OAAO,IAAA,+BAAc,EAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAC5E,KAAK,MAAM,CAAC,CAAC;YACX,OAAO,uBAAC,iBAAO,IAAiB,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,IAA3C,MAAM,CAAC,CAAC,CAAC,CAAsC,CAAC;SACtE;QACD;YACE,IAAA,qCAAiB,EAAC,IAAI,CAAC,CAAC;KAC3B;AACH,CAAC,CAAC;AApBS,QAAA,SAAS,aAoBlB"}
+{"version":3,"file":"renderTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/renderTab.tsx"],"names":[],"mappings":";;;AACA,qEAAkE;AAClE,uCAAoC;AACpC,qDAAkD;AAW3C,MAAM,SAAS,GACpB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,GAAG,KAAK,EAAkB,EAAE,EAAE,CACrF,CAAC,GAAY,EAAE,CAAS,EAAE,EAAE;IAC1B,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;IAEtB,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,EAAE;QAC1C,OAAO,IAAI,CAAC;KACb;IAED,QAAQ,IAAI,EAAE;QACZ,KAAK,OAAO;YACV,OAAO,IAAA,+BAAc,EAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAC1F,KAAK,MAAM,CAAC,CAAC;YACX,OAAO,CACL,uBAAC,iBAAO,IAAiB,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,IAAvE,MAAM,CAAC,CAAC,CAAC,CAAkE,CAC1F,CAAC;SACH;QACD;YACE,IAAA,qCAAiB,EAAC,IAAI,CAAC,CAAC;KAC3B;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAtBS,QAAA,SAAS,aAsBlB"}

package/mobile/dist/components/Tabs/tabItemClasses.d.ts

@@ -1,6 +1,11 @@
 export declare const LINK_CLASSES = "h-12 flex-1 flex items-center justify-center cursor-pointer";
 export declare const ACTIVE_LINK_CLASSES = "bg-primary-main";
 export declare const INACTIVE_LINK_CLASSES = "group/btn bg-white";
-export declare const TEXT_CLASSES = "font-sans text-m";
+export declare const SCROLLABLE_ACTIVE_LINK_CLASSES = "bg-white text-primary-main";
+export declare const WIDESCREEN_ACTIVE_LINK_CLASSES = "bg-primary-main text-white";
+export declare const TEXT_CLASSES = "font-sans text-m text-center";
 export declare const ACTIVE_TEXT_CLASSES = "text-white";
 export declare const INACTIVE_TEXT_CLASSES = "text-secondary-text group-hover/btn:text-primary-main";
+export declare const WHITE_ACTIVE_TEXT_CLASSES = "text-primary-main";
+export declare const getGroupTabClassName: (type: string, active: boolean, isScrollable: boolean) => any;
+export declare const getLinkTabClassName: (type: string, active: boolean, isScrollable: boolean) => any;

package/mobile/dist/components/Tabs/tabItemClasses.js

@@ -1,9 +1,68 @@
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.INACTIVE_TEXT_CLASSES = exports.ACTIVE_TEXT_CLASSES = exports.TEXT_CLASSES = exports.INACTIVE_LINK_CLASSES = exports.ACTIVE_LINK_CLASSES = exports.LINK_CLASSES = void 0;
+exports.getLinkTabClassName = exports.getGroupTabClassName = exports.WHITE_ACTIVE_TEXT_CLASSES = exports.INACTIVE_TEXT_CLASSES = exports.ACTIVE_TEXT_CLASSES = exports.TEXT_CLASSES = exports.WIDESCREEN_ACTIVE_LINK_CLASSES = exports.SCROLLABLE_ACTIVE_LINK_CLASSES = exports.INACTIVE_LINK_CLASSES = exports.ACTIVE_LINK_CLASSES = exports.LINK_CLASSES = void 0;
 exports.LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
 exports.ACTIVE_LINK_CLASSES = 'bg-primary-main';
 exports.INACTIVE_LINK_CLASSES = 'group/btn bg-white';
-exports.TEXT_CLASSES = 'font-sans text-m';
+exports.SCROLLABLE_ACTIVE_LINK_CLASSES = 'bg-white text-primary-main';
+exports.WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
+exports.TEXT_CLASSES = 'font-sans text-m text-center';
 exports.ACTIVE_TEXT_CLASSES = 'text-white';
 exports.INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
+exports.WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
+const GROUP_TAB_CLASSES = {
+    div: {
+        scrollable: {
+            active: `inline-flex px-4 grow whitespace-nowrap ${exports.LINK_CLASSES} ${exports.SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+            default: `inline-flex px-4 grow whitespace-nowrap ${exports.LINK_CLASSES} ${exports.INACTIVE_LINK_CLASSES}`,
+        },
+        default: {
+            active: `${exports.LINK_CLASSES} ${exports.WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+            default: `${exports.LINK_CLASSES} ${exports.INACTIVE_LINK_CLASSES} whitespace-nowrap`,
+        },
+    },
+    text: {
+        scrollable: {
+            active: `h-full border-0 border-b-2`,
+            default: ``,
+        },
+        default: {
+            active: '',
+            default: '',
+        },
+    },
+};
+const LINK_TAB_CLASSES = {
+    link: {
+        scrollable: {
+            active: `inline-flex px-4 grow whitespace-nowrap ${exports.LINK_CLASSES} ${exports.SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+            default: `inline-flex px-4 grow whitespace-nowrap ${exports.LINK_CLASSES} ${exports.INACTIVE_LINK_CLASSES}`,
+        },
+        default: {
+            active: `${exports.LINK_CLASSES} ${exports.WIDESCREEN_ACTIVE_LINK_CLASSES}`,
+            default: `${exports.LINK_CLASSES} ${exports.INACTIVE_LINK_CLASSES}`,
+        },
+    },
+    text: {
+        scrollable: {
+            active: `${exports.TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${exports.WHITE_ACTIVE_TEXT_CLASSES}`,
+            default: `${exports.TEXT_CLASSES} ${exports.INACTIVE_TEXT_CLASSES}`,
+        },
+        default: {
+            active: `${exports.TEXT_CLASSES} ${exports.ACTIVE_TEXT_CLASSES}`,
+            default: `${exports.TEXT_CLASSES} ${exports.INACTIVE_TEXT_CLASSES}`,
+        },
+    },
+};
+const getGroupTabClassName = (type, active, isScrollable) => {
+    const styleType = isScrollable ? 'scrollable' : 'default';
+    const styleActive = active ? 'active' : 'default';
+    return GROUP_TAB_CLASSES[type][styleType][styleActive];
+};
+exports.getGroupTabClassName = getGroupTabClassName;
+const getLinkTabClassName = (type, active, isScrollable) => {
+    const styleType = isScrollable ? 'scrollable' : 'default';
+    const styleActive = active ? 'active' : 'default';
+    return LINK_TAB_CLASSES[type][styleType][styleActive];
+};
+exports.getLinkTabClassName = getLinkTabClassName;
 //# sourceMappingURL=tabItemClasses.js.map

package/mobile/dist/components/Tabs/tabItemClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabItemClasses.js","sourceRoot":"","sources":["../../../src/components/Tabs/tabItemClasses.ts"],"names":[],"mappings":";;AAAa,QAAA,YAAY,GAAG,6DAA6D,CAAC;AAC7E,QAAA,mBAAmB,GAAG,iBAAiB,CAAC;AACxC,QAAA,qBAAqB,GAAG,oBAAoB,CAAC;AAE7C,QAAA,YAAY,GAAG,kBAAkB,CAAC;AAClC,QAAA,mBAAmB,GAAG,YAAY,CAAC;AACnC,QAAA,qBAAqB,GAAG,uDAAuD,CAAC"}
+{"version":3,"file":"tabItemClasses.js","sourceRoot":"","sources":["../../../src/components/Tabs/tabItemClasses.ts"],"names":[],"mappings":";;AAAa,QAAA,YAAY,GAAG,6DAA6D,CAAC;AAC7E,QAAA,mBAAmB,GAAG,iBAAiB,CAAC;AACxC,QAAA,qBAAqB,GAAG,oBAAoB,CAAC;AAE7C,QAAA,8BAA8B,GAAG,4BAA4B,CAAC;AAC9D,QAAA,8BAA8B,GAAG,4BAA4B,CAAC;AAE9D,QAAA,YAAY,GAAG,8BAA8B,CAAC;AAC9C,QAAA,mBAAmB,GAAG,YAAY,CAAC;AACnC,QAAA,qBAAqB,GAAG,uDAAuD,CAAC;AAEhF,QAAA,yBAAyB,GAAG,mBAAmB,CAAC;AAE7D,MAAM,iBAAiB,GAAG;IACxB,GAAG,EAAE;QACH,UAAU,EAAE;YACV,MAAM,EAAE,2CAA2C,oBAAY,IAAI,sCAA8B,EAAE;YACnG,OAAO,EAAE,2CAA2C,oBAAY,IAAI,6BAAqB,EAAE;SAC5F;QACD,OAAO,EAAE;YACP,MAAM,EAAE,GAAG,oBAAY,IAAI,sCAA8B,oBAAoB;YAC7E,OAAO,EAAE,GAAG,oBAAY,IAAI,6BAAqB,oBAAoB;SACtE;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,MAAM,EAAE,4BAA4B;YACpC,OAAO,EAAE,EAAE;SACZ;QACD,OAAO,EAAE;YACP,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,EAAE;SACZ;KACF;CACF,CAAC;AACF,MAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,MAAM,EAAE,2CAA2C,oBAAY,IAAI,sCAA8B,EAAE;YACnG,OAAO,EAAE,2CAA2C,oBAAY,IAAI,6BAAqB,EAAE;SAC5F;QACD,OAAO,EAAE;YACP,MAAM,EAAE,GAAG,oBAAY,IAAI,sCAA8B,EAAE;YAC3D,OAAO,EAAE,GAAG,oBAAY,IAAI,6BAAqB,EAAE;SACpD;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,MAAM,EAAE,GAAG,oBAAY,iDAAiD,iCAAyB,EAAE;YACnG,OAAO,EAAE,GAAG,oBAAY,IAAI,6BAAqB,EAAE;SACpD;QACD,OAAO,EAAE;YACP,MAAM,EAAE,GAAG,oBAAY,IAAI,2BAAmB,EAAE;YAChD,OAAO,EAAE,GAAG,oBAAY,IAAI,6BAAqB,EAAE;SACpD;KACF;CACF,CAAC;AAEK,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAE,MAAe,EAAE,YAAqB,EAAE,EAAE;IAC3F,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1D,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAElD,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;AACzD,CAAC,CAAC;AALW,QAAA,oBAAoB,wBAK/B;AAEK,MAAM,mBAAmB,GAAG,CAAC,IAAY,EAAE,MAAe,EAAE,YAAqB,EAAE,EAAE;IAC1F,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1D,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAElD,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;AACxD,CAAC,CAAC;AALW,QAAA,mBAAmB,uBAK9B"}

package/mobile/dist/setup-fixture.js

@@ -27,7 +27,6 @@ useRouter_1.useRouter.setup(() => {
 });
 handlerDecorator_1.handlerDecorator.setup((handler, targetContent) => (ev) => {
     ev.preventDefault();
-    console.log(ev.target, ev, targetContent);
     handler(ev);
 });
 //# sourceMappingURL=setup-fixture.js.map

package/mobile/dist/setup-fixture.js.map

@@ -1 +1 @@
-{"version":3,"file":"setup-fixture.js","sourceRoot":"","sources":["../src/setup-fixture.ts"],"names":[],"mappings":";;;;AAAA,6CAA2C;AAC3C,iCAAiC;AACjC,+DAA4D;AAC5D,iDAA8C;AAC9C,uDAAoD;AACpD,0DAA6B;AAE7B,iCAAe,CAAC,KAAK,CAAC,kBAAG,CAAC,CAAC;AAE3B,qBAAS,CAAC,KAAK,CAAC,GAAG,EAAE;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAS,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,OAAO;QACL,IAAI,EAAE,GAAG,UAAU,CAAC,QAAQ,CAAC,MAAM,GAAG,iCAAe,CAAC,SAAS,cAAc;QAC7E,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,CAAC,GAAW,EAAE,EAAE;YACpB,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;YAC5C,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;QACD,OAAO,EAAE,CAAC,GAAW,EAAE,EAAE;YACvB,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;YAC/C,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mCAAgB,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,aAAa,EAAO,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE;IAC7D,EAAE,CAAC,cAAc,EAAE,CAAC;IACpB,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,CAAC;AACd,CAAC,CAAC,CAAC"}
+{"version":3,"file":"setup-fixture.js","sourceRoot":"","sources":["../src/setup-fixture.ts"],"names":[],"mappings":";;;;AAAA,6CAA2C;AAC3C,iCAAiC;AACjC,+DAA4D;AAC5D,iDAA8C;AAC9C,uDAAoD;AACpD,0DAA6B;AAE7B,iCAAe,CAAC,KAAK,CAAC,kBAAG,CAAC,CAAC;AAE3B,qBAAS,CAAC,KAAK,CAAC,GAAG,EAAE;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAS,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,OAAO;QACL,IAAI,EAAE,GAAG,UAAU,CAAC,QAAQ,CAAC,MAAM,GAAG,iCAAe,CAAC,SAAS,cAAc;QAC7E,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,CAAC,GAAW,EAAE,EAAE;YACpB,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;YAC5C,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;QACD,OAAO,EAAE,CAAC,GAAW,EAAE,EAAE;YACvB,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;YAC/C,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mCAAgB,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,aAAa,EAAO,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE;IAC7D,EAAE,CAAC,cAAc,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC;AACd,CAAC,CAAC,CAAC"}

package/mobile/lib/components/Tabs/LinkTab.d.ts

@@ -2,6 +2,7 @@ import type { LinkTabData, TabData } from './TabsContent';
 interface LinkTabProps {
     tab: LinkTabData;
     currentTab?: TabData;
+    isScrollable?: boolean;
 }
 export declare const LinkTab: import("@redneckz/uni-jsx").UNIComponent<LinkTabProps, any, any>;
 export {};

package/mobile/lib/components/Tabs/LinkTab.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink.js';
-import { ACTIVE_LINK_CLASSES, ACTIVE_TEXT_CLASSES, INACTIVE_LINK_CLASSES, INACTIVE_TEXT_CLASSES, LINK_CLASSES, TEXT_CLASSES, } from './tabItemClasses.js';
+import { getLinkTabClassName } from './tabItemClasses.js';
 export const LinkTab = JSX((props) => {
-    const { tab, currentTab } = props;
+    const { tab, currentTab, isScrollable = false } = props;
     const active = currentTab?.type === 'link' && currentTab.href === tab.href;
     const link = useLink();
     const adjustedProps = link(tab);
-    return (_jsx("a", { role: "tab", className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, target: tab.target, href: adjustedProps.href, onClick: adjustedProps.onClick, children: _jsx("span", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: tab.text }) }));
+    return (_jsx("a", { role: "tab", className: getLinkTabClassName('link', active, isScrollable), target: tab.target, href: adjustedProps.href, onClick: adjustedProps.onClick, children: _jsx("span", { className: getLinkTabClassName('text', active, isScrollable), children: tab.text }) }));
 });
 //# sourceMappingURL=LinkTab.js.map

package/mobile/lib/components/Tabs/LinkTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/LinkTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,YAAY,GACb,MAAM,kBAAkB,CAAC;AAQ1B,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAe,CAAC,KAAK,EAAE,EAAE;IACjD,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,MAAM,GAAG,UAAU,EAAE,IAAI,KAAK,MAAM,IAAI,UAAU,CAAC,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC;IAE3E,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;IAEhC,OAAO,CACL,YACE,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,GAAG,YAAY,IAAI,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,EAAE,EACpF,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,IAAI,EAAE,aAAa,CAAC,IAAI,EACxB,OAAO,EAAE,aAAa,CAAC,OAAO,YAE9B,eAAM,SAAS,EAAE,GAAG,YAAY,IAAI,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,EAAE,YACvF,GAAG,CAAC,IAAI,GACJ,GACL,CACL,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"LinkTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/LinkTab.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AASvD,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,CAAe,CAAC,KAAK,EAAE,EAAE;IACjD,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,YAAY,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IACxD,MAAM,MAAM,GAAG,UAAU,EAAE,IAAI,KAAK,MAAM,IAAI,UAAU,CAAC,IAAI,KAAK,GAAG,CAAC,IAAI,CAAC;IAE3E,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;IAEhC,OAAO,CACL,YACE,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,EAC5D,MAAM,EAAE,GAAG,CAAC,MAAM,EAClB,IAAI,EAAE,aAAa,CAAC,IAAI,EACxB,OAAO,EAAE,aAAa,CAAC,OAAO,YAE9B,eAAM,SAAS,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,YAAG,GAAG,CAAC,IAAI,GAAQ,GACnF,CACL,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/mobile/lib/components/Tabs/ScrollableTabs.d.ts

@@ -0,0 +1,8 @@
+import type { RenderTabProps } from './renderTab';
+import type { TabData } from './TabsContent';
+interface ScrollableTabsProps extends RenderTabProps {
+    tabs?: TabData[];
+}
+export declare type IsScrollButtonsShown = boolean[];
+export declare const ScrollableTabs: import("@redneckz/uni-jsx").UNIComponent<ScrollableTabsProps, any, any>;
+export {};

package/mobile/lib/components/Tabs/ScrollableTabs.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
+import { JSX } from '@redneckz/uni-jsx';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer.js';
+import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll.js';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton.js';
+import { renderTab } from './renderTab.js';
+const scrollButtonStyle = 'absolute z-50 top-0';
+export const ScrollableTabs = JSX((props) => {
+    const { tabs, onClick, currentTab, page, showCounter } = props;
+    const [containerRef, scroll] = useSwipeListScroll({
+        itemCount: tabs?.length || 0,
+        isCyclic: false,
+    });
+    return (_jsxs("div", { className: "relative max-w-full m-auto", children: [_jsx("div", { className: `font-sans max-w-full w-full overflow-hidden relative bg-white`, children: _jsx(SwipeListContainer, { containerRef: containerRef, snapAlign: "snap-start", onVisibleIndicesChange: scroll.handleVisibleIndicesChange, children: tabs?.map(renderTab({
+                        onClick,
+                        currentTab,
+                        showCounter,
+                        page,
+                        isScrollable: true,
+                    })) }) }), scroll.canScrollLeft ? (_jsx(ScrollLeftButton, { className: `${scrollButtonStyle} left-6`, onClick: scroll.scrollLeft })) : null, scroll.canScrollRight ? (_jsx(ScrollRightButton, { className: `${scrollButtonStyle} rotate-180 right-6`, onClick: scroll.scrollRight })) : null] }));
+});
+//# sourceMappingURL=ScrollableTabs.js.map

package/mobile/lib/components/Tabs/ScrollableTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollableTabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/ScrollableTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AACtF,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAQxC,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAsB,CAAC,KAAK,EAAE,EAAE;IAC/D,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAE/D,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,GAAG,kBAAkB,CAAiB;QAChE,SAAS,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;QAC5B,QAAQ,EAAE,KAAK;KAChB,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,SAAS,EAAC,4BAA4B,aACzC,cAAK,SAAS,EAAE,+DAA+D,YAC7E,KAAC,kBAAkB,IACjB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,YAAY,EACtB,sBAAsB,EAAE,MAAM,CAAC,0BAA0B,YAExD,IAAI,EAAE,GAAG,CACR,SAAS,CAAC;wBACR,OAAO;wBACP,UAAU;wBACV,WAAW;wBACX,IAAI;wBACJ,YAAY,EAAE,IAAI;qBACnB,CAAC,CACH,GACkB,GACjB,EACL,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CACtB,KAAC,gBAAgB,IAAC,SAAS,EAAE,GAAG,iBAAiB,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,UAAU,GAAI,CAC3F,CAAC,CAAC,CAAC,IAAI,EACP,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CACvB,KAAC,iBAAiB,IAChB,SAAS,EAAE,GAAG,iBAAiB,qBAAqB,EACpD,OAAO,EAAE,MAAM,CAAC,WAAW,GAC3B,CACH,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/mobile/lib/components/Tabs/Tabs.js

@@ -4,14 +4,16 @@ import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { EventBus } from '../../EventBus/EventBus.js';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper.js';
 import { renderTab } from './renderTab.js';
+import { ScrollableTabs } from './ScrollableTabs.js';
 export const Tabs = JSX((props) => {
-    const { className = '', tabs, showCounter, isSticky, ...rest } = props;
+    const { className = '', tabs, showCounter, isSticky, tabsMode, ...rest } = props;
     const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
     useEffect(() => EventBus.inst.subscribe('tab', (event) => {
         const tab = tabs?.find(checkTab(event));
         if (event.type === 'link' && tab) {
             setCurrentTab(tab);
         }
+        return [];
     }), [tabs]);
     useEffect(() => currentTab?.type === 'group'
         ? EventBus.inst.subject('tab', { label: currentTab.ref })
@@ -22,7 +24,12 @@ export const Tabs = JSX((props) => {
         }
         setCurrentTab(selectedTab);
     }, []);
-    return (_jsx(BlockWrapper, { className: `${isSticky ? 'sticky top-1 z-20 ' : ''}box-border flex gap-x-1 ${className}`, role: "tablist", ...rest, children: tabs?.map(renderTab({ onClick: handleClick, currentTab, showCounter, ...rest })) }));
+    return (_jsx(BlockWrapper, { className: `relative box-border flex gap-x-1 w-full ${isSticky ? 'sticky top-1 z-20 ' : ''} ${className}`, role: "tablist", ...rest, children: tabsMode === 'scrollable' ? (_jsx(ScrollableTabs, { tabs: tabs, onClick: handleClick, currentTab: currentTab, showCounter: showCounter, ...rest })) : (tabs?.map(renderTab({
+            onClick: handleClick,
+            currentTab,
+            showCounter,
+            ...rest,
+        }))) }));
 });
 const checkTab = (event) => (_) => _.type === 'link' && _.href === `#${event.label}`;
 //# sourceMappingURL=Tabs.js.map

package/mobile/lib/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAUxC,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAiB,CAAC,KAAK,EAAE,EAAE;IAChD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEvE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEzE,SAAS,CACP,GAAG,EAAE,CACH,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;QACvC,MAAM,GAAG,GAAG,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;QACxC,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,GAAG,EAAE;YAChC,aAAa,CAAC,GAAG,CAAC,CAAC;SACpB;IACH,CAAC,CAAC,EACJ,CAAC,IAAI,CAAC,CACP,CAAC;IAEF,SAAS,CACP,GAAG,EAAE,CACH,UAAU,EAAE,IAAI,KAAK,OAAO;QAC1B,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC;QACzD,CAAC,CAAC,SAAS,EACf,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,WAAoB,EAAE,EAAE;QACvD,IAAI,WAAW,EAAE,IAAI,KAAK,OAAO,EAAE;YACjC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;SAC/E;QACD,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,YAAY,IACX,SAAS,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,2BAA2B,SAAS,EAAE,EACxF,IAAI,EAAC,SAAS,KACV,IAAI,YAEP,IAAI,EAAE,GAAG,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,IAAI,EAAE,CAAC,CAAC,GACpE,CAChB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,CAAC,KAAyB,EAAE,EAAE,CAAC,CAAC,CAAU,EAAE,EAAE,CAC7D,CAAC,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAGnD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AASlD,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAiB,CAAC,KAAK,EAAE,EAAE;IAChD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEzE,SAAS,CACP,GAAG,EAAE,CACH,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,EAAE;QACvC,MAAM,GAAG,GAAG,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;QACxC,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,GAAG,EAAE;YAChC,aAAa,CAAC,GAAG,CAAC,CAAC;SACpB;QAED,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC,EACJ,CAAC,IAAI,CAAC,CACP,CAAC;IAEF,SAAS,CACP,GAAG,EAAE,CACH,UAAU,EAAE,IAAI,KAAK,OAAO;QAC1B,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC;QACzD,CAAC,CAAC,SAAS,EACf,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,WAAoB,EAAE,EAAE;QACvD,IAAI,WAAW,EAAE,IAAI,KAAK,OAAO,EAAE;YACjC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;SAC/E;QACD,aAAa,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,YAAY,IACX,SAAS,EAAE,2CACT,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EACpC,IAAI,SAAS,EAAE,EACf,IAAI,EAAC,SAAS,KACV,IAAI,YAEP,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,CAC3B,KAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,KACpB,IAAI,GACR,CACH,CAAC,CAAC,CAAC,CACF,IAAI,EAAE,GAAG,CACP,SAAS,CAAC;YACR,OAAO,EAAE,WAAW;YACpB,UAAU;YACV,WAAW;YACX,GAAG,IAAI;SACR,CAAC,CACH,CACF,GACY,CAChB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAG,CAAC,KAAyB,EAAE,EAAE,CAAC,CAAC,CAAU,EAAE,EAAE,CAC7D,CAAC,CAAC,IAAI,KAAK,MAAM,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC"}

package/mobile/lib/components/Tabs/TabsContent.d.ts

@@ -23,6 +23,13 @@ export declare type LinkTabData = LinkProps & {
  * }
  */
 export declare type TabData = GroupTabData | LinkTabData;
+/**
+ * @enumNames [
+ *   "По ширине экрана",
+ *   "С прокруткой"
+ * ]
+ */
+export declare type TabsMode = 'wideScreen' | 'scrollable';
 /**
  * @title Вкладки
  */
@@ -33,4 +40,9 @@ export interface TabsContent {
     isSticky?: boolean;
     /** @title Показывать счетчик блоков во вкладках */
     showCounter?: boolean;
+    /**
+     * @title Режим вкладок
+     * @default "wideScreen"
+     */
+    tabsMode?: TabsMode;
 }

package/mobile/lib/components/Tabs/renderGroupTab.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import type { RenderTabProps } from './renderTab';
 import type { GroupTabData } from './TabsContent';
-export declare const renderGroupTab: ({ page, currentTab, showCounter, onClick }: RenderTabProps) => (tab: GroupTabData, i: number) => JSX.Element;
+import type { RenderTabProps } from './renderTab';
+export declare const renderGroupTab: ({ page, currentTab, showCounter, onClick, isScrollable }: RenderTabProps) => (tab: GroupTabData, i: number) => JSX.Element;

package/mobile/lib/components/Tabs/renderGroupTab.js

@@ -1,15 +1,23 @@
 import { jsxs as _jsxs, jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
-import { ACTIVE_LINK_CLASSES, ACTIVE_TEXT_CLASSES, INACTIVE_LINK_CLASSES, INACTIVE_TEXT_CLASSES, LINK_CLASSES, TEXT_CLASSES, } from './tabItemClasses.js';
+import { ACTIVE_TEXT_CLASSES, INACTIVE_TEXT_CLASSES, TEXT_CLASSES, WHITE_ACTIVE_TEXT_CLASSES, getGroupTabClassName, } from './tabItemClasses.js';
 const BADGE_CLASSES = 'min-w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
 const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
 const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover/btn:text-primary-main';
-export const renderGroupTab = ({ page, currentTab, showCounter, onClick }) => (tab, i) => {
+export const renderGroupTab = ({ page, currentTab, showCounter, onClick, isScrollable = false }) => (tab, i) => {
     const active = currentTab === tab;
     const count = tab.ref && page?.blocks
         ? page.blocks.filter((block) => block?.labels?.includes(tab.ref)).length
         : 0;
-    return (_jsx("div", { className: `${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`, role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: _jsxs("div", { className: "flex flex-1 items-center justify-center", children: [tab?.title ? renderTitle(tab.title, active) : null, showCounter && count ? renderCount(count, active) : null] }) }, String(i)));
+    return (_jsx("div", { className: getGroupTabClassName('div', active, isScrollable), role: "tab", "aria-selected": active, onClick: () => onClick(tab), children: _jsxs("div", { className: `flex flex-1 items-center justify-center ${getGroupTabClassName('text', active, isScrollable)}`, children: [renderTitle(tab.title, active, isScrollable), renderCount(showCounter, count, active)] }) }, `group-${String(i)}`));
+};
+const renderTitle = (title, active, isScrollable) => {
+    const activeClassName = active ? WHITE_ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES;
+    const titleClassName = isScrollable
+        ? `${TEXT_CLASSES} ${activeClassName}`
+        : `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`;
+    return title ? _jsx("h3", { className: titleClassName, children: title }) : null;
+};
+const renderCount = (showCounter, count, active) => {
+    return showCounter && count ? (_jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count })) : null;
 };
-const renderTitle = (title, active) => (_jsx("h3", { className: `${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`, children: title }));
-const renderCount = (count, active) => (_jsx("div", { className: `${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`, children: count }));
 //# sourceMappingURL=renderGroupTab.js.map

package/mobile/lib/components/Tabs/renderGroupTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderGroupTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/renderGroupTab.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,YAAY,GACb,MAAM,kBAAkB,CAAC;AAG1B,MAAM,aAAa,GACjB,kFAAkF,CAAC;AACrF,MAAM,oBAAoB,GAAG,wBAAwB,CAAC;AACtD,MAAM,sBAAsB,GAC1B,uEAAuE,CAAC;AAE1E,MAAM,CAAC,MAAM,cAAc,GACzB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAkB,EAAE,EAAE,CAC/D,CAAC,GAAiB,EAAE,CAAS,EAAE,EAAE;IAC/B,MAAM,MAAM,GAAG,UAAU,KAAK,GAAG,CAAC;IAElC,MAAM,KAAK,GACT,GAAG,CAAC,GAAG,IAAI,IAAI,EAAE,MAAM;QACrB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAa,CAAC,CAAC,CAAC,MAAM;QAClF,CAAC,CAAC,CAAC,CAAC;IAER,OAAO,CACL,cAEE,SAAS,EAAE,GAAG,YAAY,IAAI,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,EAAE,EACpF,IAAI,EAAC,KAAK,mBACK,MAAM,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,YAE3B,eAAK,SAAS,EAAC,yCAAyC,aACrD,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,EAClD,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,IACrD,IATD,MAAM,CAAC,CAAC,CAAC,CAUV,CACP,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,MAAe,EAAE,EAAE,CAAC,CACtD,aAAI,SAAS,EAAE,GAAG,YAAY,IAAI,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,EAAE,YACrF,KAAK,GACH,CACN,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,MAAe,EAAE,EAAE,CAAC,CACtD,cAAK,SAAS,EAAE,GAAG,aAAa,IAAI,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,EAAE,YACzF,KAAK,GACF,CACP,CAAC"}
+{"version":3,"file":"renderGroupTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/renderGroupTab.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,mBAAmB,EACnB,qBAAqB,EACrB,YAAY,EACZ,yBAAyB,EACzB,oBAAoB,GACrB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,aAAa,GACjB,kFAAkF,CAAC;AACrF,MAAM,oBAAoB,GAAG,wBAAwB,CAAC;AACtD,MAAM,sBAAsB,GAC1B,uEAAuE,CAAC;AAE1E,MAAM,CAAC,MAAM,cAAc,GACzB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,GAAG,KAAK,EAAkB,EAAE,EAAE,CACrF,CAAC,GAAiB,EAAE,CAAS,EAAE,EAAE;IAC/B,MAAM,MAAM,GAAG,UAAU,KAAK,GAAG,CAAC;IAElC,MAAM,KAAK,GACT,GAAG,CAAC,GAAG,IAAI,IAAI,EAAE,MAAM;QACrB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAa,CAAC,CAAC,CAAC,MAAM;QAClF,CAAC,CAAC,CAAC,CAAC;IAER,OAAO,CACL,cAEE,SAAS,EAAE,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC,EAC5D,IAAI,EAAC,KAAK,mBACK,MAAM,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,YAE3B,eACE,SAAS,EAAE,2CAA2C,oBAAoB,CACxE,MAAM,EACN,MAAM,EACN,YAAY,CACb,EAAE,aAEF,WAAW,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,YAAY,CAAC,EAC5C,WAAW,CAAC,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,IACpC,IAfD,SAAS,MAAM,CAAC,CAAC,CAAC,EAAE,CAgBrB,CACP,CAAC;AACJ,CAAC,CAAC;AAEJ,MAAM,WAAW,GAAG,CAAC,KAAyB,EAAE,MAAe,EAAE,YAAqB,EAAE,EAAE;IACxF,MAAM,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IACnF,MAAM,cAAc,GAAG,YAAY;QACjC,CAAC,CAAC,GAAG,YAAY,IAAI,eAAe,EAAE;QACtC,CAAC,CAAC,GAAG,YAAY,IAAI,MAAM,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,qBAAqB,EAAE,CAAC;IAE9E,OAAO,KAAK,CAAC,CAAC,CAAC,aAAI,SAAS,EAAE,cAAc,YAAG,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,CAAC;AACpE,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,WAAgC,EAAE,KAAa,EAAE,MAAe,EAAE,EAAE;IACvF,OAAO,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,CAC5B,cAAK,SAAS,EAAE,GAAG,aAAa,IAAI,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,sBAAsB,EAAE,YACzF,KAAK,GACF,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CAAC"}

package/mobile/lib/components/Tabs/renderTab.d.ts

@@ -6,5 +6,6 @@ export interface RenderTabProps {
     currentTab?: TabData;
     showCounter?: boolean;
     onClick: (tab: TabData) => void;
+    isScrollable?: boolean;
 }
-export declare const renderTab: ({ page, currentTab, showCounter, onClick }: RenderTabProps) => (tab: TabData, i: number) => JSX.Element | null;
+export declare const renderTab: ({ page, currentTab, showCounter, onClick, isScrollable }: RenderTabProps) => (tab: TabData, i: number) => JSX.Element | null;

package/mobile/lib/components/Tabs/renderTab.js

@@ -2,22 +2,20 @@ import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
 import { assertUnreachable } from '../../utils/assertUnreachable.js';
 import { LinkTab } from './LinkTab.js';
 import { renderGroupTab } from './renderGroupTab.js';
-export const renderTab = ({ page, currentTab, showCounter, onClick }) => 
-// Linter doesn't understand that switch processes all cases
-// eslint-disable-next-line consistent-return
-(tab, i) => {
+export const renderTab = ({ page, currentTab, showCounter, onClick, isScrollable = false }) => (tab, i) => {
     const type = tab.type;
     if (!(type === 'group' || type === 'link')) {
         return null;
     }
     switch (type) {
         case 'group':
-            return renderGroupTab({ page, currentTab, showCounter, onClick })(tab, i);
+            return renderGroupTab({ page, currentTab, showCounter, onClick, isScrollable })(tab, i);
         case 'link': {
-            return _jsx(LinkTab, { tab: tab, currentTab: currentTab }, String(i));
+            return (_jsx(LinkTab, { tab: tab, currentTab: currentTab, isScrollable: isScrollable }, String(i)));
         }
         default:
             assertUnreachable(type);
     }
+    return null;
 };
 //# sourceMappingURL=renderTab.js.map

package/mobile/lib/components/Tabs/renderTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/renderTab.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAUlD,MAAM,CAAC,MAAM,SAAS,GACpB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAkB,EAAE,EAAE;AAC/D,4DAA4D;AAC5D,6CAA6C;AAC7C,CAAC,GAAY,EAAE,CAAS,EAAE,EAAE;IAC1B,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;IAEtB,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,EAAE;QAC1C,OAAO,IAAI,CAAC;KACb;IAED,QAAQ,IAAI,EAAE;QACZ,KAAK,OAAO;YACV,OAAO,cAAc,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAC5E,KAAK,MAAM,CAAC,CAAC;YACX,OAAO,KAAC,OAAO,IAAiB,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,IAA3C,MAAM,CAAC,CAAC,CAAC,CAAsC,CAAC;SACtE;QACD;YACE,iBAAiB,CAAC,IAAI,CAAC,CAAC;KAC3B;AACH,CAAC,CAAC"}
+{"version":3,"file":"renderTab.js","sourceRoot":"","sources":["../../../src/components/Tabs/renderTab.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAWlD,MAAM,CAAC,MAAM,SAAS,GACpB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,GAAG,KAAK,EAAkB,EAAE,EAAE,CACrF,CAAC,GAAY,EAAE,CAAS,EAAE,EAAE;IAC1B,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;IAEtB,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,MAAM,CAAC,EAAE;QAC1C,OAAO,IAAI,CAAC;KACb;IAED,QAAQ,IAAI,EAAE;QACZ,KAAK,OAAO;YACV,OAAO,cAAc,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QAC1F,KAAK,MAAM,CAAC,CAAC;YACX,OAAO,CACL,KAAC,OAAO,IAAiB,GAAG,EAAE,GAAG,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,IAAvE,MAAM,CAAC,CAAC,CAAC,CAAkE,CAC1F,CAAC;SACH;QACD;YACE,iBAAiB,CAAC,IAAI,CAAC,CAAC;KAC3B;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

package/mobile/lib/components/Tabs/tabItemClasses.d.ts

@@ -1,6 +1,11 @@
 export declare const LINK_CLASSES = "h-12 flex-1 flex items-center justify-center cursor-pointer";
 export declare const ACTIVE_LINK_CLASSES = "bg-primary-main";
 export declare const INACTIVE_LINK_CLASSES = "group/btn bg-white";
-export declare const TEXT_CLASSES = "font-sans text-m";
+export declare const SCROLLABLE_ACTIVE_LINK_CLASSES = "bg-white text-primary-main";
+export declare const WIDESCREEN_ACTIVE_LINK_CLASSES = "bg-primary-main text-white";
+export declare const TEXT_CLASSES = "font-sans text-m text-center";
 export declare const ACTIVE_TEXT_CLASSES = "text-white";
 export declare const INACTIVE_TEXT_CLASSES = "text-secondary-text group-hover/btn:text-primary-main";
+export declare const WHITE_ACTIVE_TEXT_CLASSES = "text-primary-main";
+export declare const getGroupTabClassName: (type: string, active: boolean, isScrollable: boolean) => any;
+export declare const getLinkTabClassName: (type: string, active: boolean, isScrollable: boolean) => any;

package/mobile/lib/components/Tabs/tabItemClasses.js

@@ -1,7 +1,64 @@
 export const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
 export const ACTIVE_LINK_CLASSES = 'bg-primary-main';
 export const INACTIVE_LINK_CLASSES = 'group/btn bg-white';
-export const TEXT_CLASSES = 'font-sans text-m';
+export const SCROLLABLE_ACTIVE_LINK_CLASSES = 'bg-white text-primary-main';
+export const WIDESCREEN_ACTIVE_LINK_CLASSES = 'bg-primary-main text-white';
+export const TEXT_CLASSES = 'font-sans text-m text-center';
 export const ACTIVE_TEXT_CLASSES = 'text-white';
 export const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover/btn:text-primary-main';
+export const WHITE_ACTIVE_TEXT_CLASSES = 'text-primary-main';
+const GROUP_TAB_CLASSES = {
+    div: {
+        scrollable: {
+            active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+            default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+        },
+        default: {
+            active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES} whitespace-nowrap`,
+            default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES} whitespace-nowrap`,
+        },
+    },
+    text: {
+        scrollable: {
+            active: `h-full border-0 border-b-2`,
+            default: ``,
+        },
+        default: {
+            active: '',
+            default: '',
+        },
+    },
+};
+const LINK_TAB_CLASSES = {
+    link: {
+        scrollable: {
+            active: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${SCROLLABLE_ACTIVE_LINK_CLASSES}`,
+            default: `inline-flex px-4 grow whitespace-nowrap ${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+        },
+        default: {
+            active: `${LINK_CLASSES} ${WIDESCREEN_ACTIVE_LINK_CLASSES}`,
+            default: `${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`,
+        },
+    },
+    text: {
+        scrollable: {
+            active: `${TEXT_CLASSES} flex items-center h-full border-0 border-b-2 ${WHITE_ACTIVE_TEXT_CLASSES}`,
+            default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+        },
+        default: {
+            active: `${TEXT_CLASSES} ${ACTIVE_TEXT_CLASSES}`,
+            default: `${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`,
+        },
+    },
+};
+export const getGroupTabClassName = (type, active, isScrollable) => {
+    const styleType = isScrollable ? 'scrollable' : 'default';
+    const styleActive = active ? 'active' : 'default';
+    return GROUP_TAB_CLASSES[type][styleType][styleActive];
+};
+export const getLinkTabClassName = (type, active, isScrollable) => {
+    const styleType = isScrollable ? 'scrollable' : 'default';
+    const styleActive = active ? 'active' : 'default';
+    return LINK_TAB_CLASSES[type][styleType][styleActive];
+};
 //# sourceMappingURL=tabItemClasses.js.map

package/mobile/lib/components/Tabs/tabItemClasses.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabItemClasses.js","sourceRoot":"","sources":["../../../src/components/Tabs/tabItemClasses.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,6DAA6D,CAAC;AAC1F,MAAM,CAAC,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AACrD,MAAM,CAAC,MAAM,qBAAqB,GAAG,oBAAoB,CAAC;AAE1D,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC/C,MAAM,CAAC,MAAM,mBAAmB,GAAG,YAAY,CAAC;AAChD,MAAM,CAAC,MAAM,qBAAqB,GAAG,uDAAuD,CAAC"}
+{"version":3,"file":"tabItemClasses.js","sourceRoot":"","sources":["../../../src/components/Tabs/tabItemClasses.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,6DAA6D,CAAC;AAC1F,MAAM,CAAC,MAAM,mBAAmB,GAAG,iBAAiB,CAAC;AACrD,MAAM,CAAC,MAAM,qBAAqB,GAAG,oBAAoB,CAAC;AAE1D,MAAM,CAAC,MAAM,8BAA8B,GAAG,4BAA4B,CAAC;AAC3E,MAAM,CAAC,MAAM,8BAA8B,GAAG,4BAA4B,CAAC;AAE3E,MAAM,CAAC,MAAM,YAAY,GAAG,8BAA8B,CAAC;AAC3D,MAAM,CAAC,MAAM,mBAAmB,GAAG,YAAY,CAAC;AAChD,MAAM,CAAC,MAAM,qBAAqB,GAAG,uDAAuD,CAAC;AAE7F,MAAM,CAAC,MAAM,yBAAyB,GAAG,mBAAmB,CAAC;AAE7D,MAAM,iBAAiB,GAAG;IACxB,GAAG,EAAE;QACH,UAAU,EAAE;YACV,MAAM,EAAE,2CAA2C,YAAY,IAAI,8BAA8B,EAAE;YACnG,OAAO,EAAE,2CAA2C,YAAY,IAAI,qBAAqB,EAAE;SAC5F;QACD,OAAO,EAAE;YACP,MAAM,EAAE,GAAG,YAAY,IAAI,8BAA8B,oBAAoB;YAC7E,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,oBAAoB;SACtE;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,MAAM,EAAE,4BAA4B;YACpC,OAAO,EAAE,EAAE;SACZ;QACD,OAAO,EAAE;YACP,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,EAAE;SACZ;KACF;CACF,CAAC;AACF,MAAM,gBAAgB,GAAG;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,MAAM,EAAE,2CAA2C,YAAY,IAAI,8BAA8B,EAAE;YACnG,OAAO,EAAE,2CAA2C,YAAY,IAAI,qBAAqB,EAAE;SAC5F;QACD,OAAO,EAAE;YACP,MAAM,EAAE,GAAG,YAAY,IAAI,8BAA8B,EAAE;YAC3D,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,EAAE;SACpD;KACF;IACD,IAAI,EAAE;QACJ,UAAU,EAAE;YACV,MAAM,EAAE,GAAG,YAAY,iDAAiD,yBAAyB,EAAE;YACnG,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,EAAE;SACpD;QACD,OAAO,EAAE;YACP,MAAM,EAAE,GAAG,YAAY,IAAI,mBAAmB,EAAE;YAChD,OAAO,EAAE,GAAG,YAAY,IAAI,qBAAqB,EAAE;SACpD;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,IAAY,EAAE,MAAe,EAAE,YAAqB,EAAE,EAAE;IAC3F,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1D,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAElD,OAAO,iBAAiB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;AACzD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,IAAY,EAAE,MAAe,EAAE,YAAqB,EAAE,EAAE;IAC1F,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1D,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAElD,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;AACxD,CAAC,CAAC"}

package/mobile/lib/setup-fixture.js

@@ -23,7 +23,6 @@ useRouter.setup(() => {
 });
 handlerDecorator.setup((handler, targetContent) => (ev) => {
     ev.preventDefault();
-    console.log(ev.target, ev, targetContent);
     handler(ev);
 });
 //# sourceMappingURL=setup-fixture.js.map

package/mobile/lib/setup-fixture.js.map

@@ -1 +1 @@
-{"version":3,"file":"setup-fixture.js","sourceRoot":"","sources":["../src/setup-fixture.ts"],"names":[],"mappings":"AAAA,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,GAAG,MAAM,YAAY,CAAC;AAE7B,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAE3B,SAAS,CAAC,KAAK,CAAC,GAAG,EAAE;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAS,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,OAAO;QACL,IAAI,EAAE,GAAG,UAAU,CAAC,QAAQ,CAAC,MAAM,GAAG,eAAe,CAAC,SAAS,cAAc;QAC7E,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,CAAC,GAAW,EAAE,EAAE;YACpB,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;YAC5C,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;QACD,OAAO,EAAE,CAAC,GAAW,EAAE,EAAE;YACvB,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;YAC/C,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,aAAa,EAAO,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE;IAC7D,EAAE,CAAC,cAAc,EAAE,CAAC;IACpB,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC;IAC1C,OAAO,CAAC,EAAE,CAAC,CAAC;AACd,CAAC,CAAC,CAAC"}
+{"version":3,"file":"setup-fixture.js","sourceRoot":"","sources":["../src/setup-fixture.ts"],"names":[],"mappings":"AAAA,OAAO,mCAAmC,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,GAAG,MAAM,YAAY,CAAC;AAE7B,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAE3B,SAAS,CAAC,KAAK,CAAC,GAAG,EAAE;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAS,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/D,OAAO;QACL,IAAI,EAAE,GAAG,UAAU,CAAC,QAAQ,CAAC,MAAM,GAAG,eAAe,CAAC,SAAS,cAAc;QAC7E,QAAQ,EAAE,eAAe;QACzB,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,CAAC,GAAW,EAAE,EAAE;YACpB,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;YAC5C,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;QACD,OAAO,EAAE,CAAC,GAAW,EAAE,EAAE;YACvB,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;YAC/C,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;KACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,aAAa,EAAO,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE;IAC7D,EAAE,CAAC,cAAc,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,CAAC;AACd,CAAC,CAAC,CAAC"}

package/mobile/src/components/Tabs/LinkTab.tsx

@@ -1,22 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import {
-  ACTIVE_LINK_CLASSES,
-  ACTIVE_TEXT_CLASSES,
-  INACTIVE_LINK_CLASSES,
-  INACTIVE_TEXT_CLASSES,
-  LINK_CLASSES,
-  TEXT_CLASSES,
-} from './tabItemClasses';
+import { getLinkTabClassName } from './tabItemClasses';
 import type { LinkTabData, TabData } from './TabsContent';
 
 interface LinkTabProps {
   tab: LinkTabData;
   currentTab?: TabData;
+  isScrollable?: boolean;
 }
 
 export const LinkTab = JSX<LinkTabProps>((props) => {
-  const { tab, currentTab } = props;
+  const { tab, currentTab, isScrollable = false } = props;
   const active = currentTab?.type === 'link' && currentTab.href === tab.href;
 
   const link = useLink();
@@ -25,14 +19,12 @@ export const LinkTab = JSX<LinkTabProps>((props) => {
   return (
     <a
       role="tab"
-      className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
+      className={getLinkTabClassName('link', active, isScrollable)}
       target={tab.target}
       href={adjustedProps.href}
       onClick={adjustedProps.onClick}
     >
-      <span className={`${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`}>
-        {tab.text}
-      </span>
+      <span className={getLinkTabClassName('text', active, isScrollable)}>{tab.text}</span>
     </a>
   );
 });

package/mobile/src/components/Tabs/ScrollableTabs.tsx

@@ -0,0 +1,55 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { RenderTabProps } from './renderTab';
+import type { TabData } from './TabsContent';
+import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
+import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
+import { renderTab } from './renderTab';
+
+interface ScrollableTabsProps extends RenderTabProps {
+  tabs?: TabData[];
+}
+
+export type IsScrollButtonsShown = boolean[];
+
+const scrollButtonStyle = 'absolute z-50 top-0';
+
+export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
+  const { tabs, onClick, currentTab, page, showCounter } = props;
+
+  const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
+    itemCount: tabs?.length || 0,
+    isCyclic: false,
+  });
+
+  return (
+    <div className="relative max-w-full m-auto">
+      <div className={`font-sans max-w-full w-full overflow-hidden relative bg-white`}>
+        <SwipeListContainer
+          containerRef={containerRef}
+          snapAlign="snap-start"
+          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+        >
+          {tabs?.map(
+            renderTab({
+              onClick,
+              currentTab,
+              showCounter,
+              page,
+              isScrollable: true,
+            }),
+          )}
+        </SwipeListContainer>
+      </div>
+      {scroll.canScrollLeft ? (
+        <ScrollLeftButton className={`${scrollButtonStyle} left-6`} onClick={scroll.scrollLeft} />
+      ) : null}
+      {scroll.canScrollRight ? (
+        <ScrollRightButton
+          className={`${scrollButtonStyle} rotate-180 right-6`}
+          onClick={scroll.scrollRight}
+        />
+      ) : null}
+    </div>
+  );
+});