@sbcrmweb/sbcrmweb-tma-core 0.0.59

package/dist/cjs/components/TMABannersFeed/StoryProgress.js

@@ -0,0 +1,81 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StoryProgress = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const react_timer_hook_1 = require("react-timer-hook");
+const theme_1 = require("../../theme");
+const TMABannerFeedPropsContext_1 = require("./TMABannerFeedPropsContext");
+const MAX_TIME_OF_STORY = 10;
+const StoryProgress = ({ story, activeStoryItemIndex, onExpirationTimer, onItemClick, timerRef, }) => {
+    const { maxStoryTimeSeconds = MAX_TIME_OF_STORY } = (0, TMABannerFeedPropsContext_1.useTMABannerFeedPropsContext)();
+    const maxStoryTimeMilliseconds = maxStoryTimeSeconds * 1000;
+    const getTimerOffset = (0, react_1.useCallback)(() => {
+        const newOffsetDate = new Date();
+        newOffsetDate.setMilliseconds(newOffsetDate.getMilliseconds() + maxStoryTimeMilliseconds);
+        return newOffsetDate;
+    }, [maxStoryTimeMilliseconds]);
+    const resetTimer = () => {
+        restart(getTimerOffset(), true);
+    };
+    const handleExpirationTimer = () => {
+        if (!story) {
+            return;
+        }
+        if (activeStoryItemIndex !== story.items.length - 1) {
+            resetTimer();
+        }
+        onExpirationTimer();
+    };
+    const timer = (0, react_timer_hook_1.useTimer)({
+        autoStart: true,
+        interval: maxStoryTimeSeconds,
+        expiryTimestamp: getTimerOffset(),
+        onExpire: handleExpirationTimer,
+    });
+    if (timerRef) {
+        timerRef.current = {
+            ...timer,
+            resetTimer,
+        };
+    }
+    const { totalMilliseconds: time, pause, restart } = timer;
+    const stopTimer = () => {
+        pause();
+    };
+    (0, react_1.useEffect)(() => {
+        if (story) {
+            resetTimer();
+            return;
+        }
+        stopTimer();
+    }, [story, activeStoryItemIndex]);
+    const getProgressBarValue = (currentIndex) => {
+        if (currentIndex === activeStoryItemIndex) {
+            return (1 - time / maxStoryTimeMilliseconds) * 100;
+        }
+        return currentIndex > activeStoryItemIndex ? 0 : 100;
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { className: "story-progress", onClick: (event) => event.stopPropagation(), gap: 4 / theme_1.BASE_SPACING, sx: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 1000,
+            mt: 2,
+            mx: 2,
+        }, direction: "row", children: story?.items.map((storyItem, index) => ((0, jsx_runtime_1.jsx)(material_1.Box, { className: "story-progress-item-wrapper", onClick: () => onItemClick(index), flex: 1, height: 25, display: "flex", justifyItems: "center", children: (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { className: "story-progress-item", variant: "determinate", sx: {
+                    width: '100%',
+                    borderRadius: 1,
+                    '& .MuiLinearProgress-bar': {
+                        transition: 'none',
+                        background: 'white',
+                    },
+                    '&.MuiLinearProgress-root': {
+                        background: '#FFFFFF1A',
+                    },
+                }, value: getProgressBarValue(index) }) }, storyItem.subtitle))) }));
+};
+exports.StoryProgress = StoryProgress;

package/dist/cjs/components/TMABannersFeed/TMABannerFeed.d.ts

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { TypographyProps } from '@mui/material/Typography';
+import { SwiperProps } from 'swiper/react';
+export type TMAStoryItem = {
+    title?: string;
+    subtitle?: string;
+    image?: string;
+    component?: ReactNode;
+};
+export interface TMAStory {
+    title: string;
+    image?: React.ReactElement;
+    items: TMAStoryItem[];
+    isGray?: boolean;
+}
+export interface TMABannersFeedProps {
+    stories?: TMAStory[];
+    sx?: SxProps<Theme>;
+    maxStoryTimeSeconds?: number;
+    storiesSwiperProps?: SwiperProps;
+    storyTitleVariant?: TypographyProps['variant'];
+    storyItemsSwiperProps?: SwiperProps;
+    storyItemTitleVariant?: TypographyProps['variant'];
+    storyItemSubtitleVariant?: TypographyProps['variant'];
+}
+export declare const TMABannersFeed: (props: TMABannersFeedProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMABannerFeed.d.ts.map

package/dist/cjs/components/TMABannersFeed/TMABannerFeed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMABannerFeed.d.ts","sourceRoot":"","sources":["../../../../src/components/TMABannersFeed/TMABannerFeed.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AACnD,OAAO,EAAU,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAG9D,OAAmB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAEL,WAAW,EAGZ,MAAM,cAAc,CAAC;AAKtB,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAEF,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,WAAW,CAAC;IACjC,iBAAiB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAC/C,qBAAqB,CAAC,EAAE,WAAW,CAAC;IACpC,qBAAqB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACnD,wBAAwB,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACvD;AA2DD,eAAO,MAAM,cAAc,UAAW,mBAAmB,4CA+ExD,CAAC"}

package/dist/cjs/components/TMABannersFeed/TMABannerFeed.js

@@ -0,0 +1,87 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TMABannersFeed = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const react_2 = require("swiper/react");
+const TMAStoryDrawer_1 = require("./TMAStoryDrawer");
+const theme_1 = require("../../theme");
+const TMABannerFeedPropsContext_1 = require("./TMABannerFeedPropsContext");
+const StyledBannerWrapper = (0, styles_1.styled)(Stack_1.default)(({ theme }) => theme.unstable_sx({
+    borderRadius: '12px',
+    width: 103,
+    height: 103,
+    borderColor: theme.palette?.accent_text_color.main,
+    borderWidth: 2,
+    borderStyle: 'solid',
+    position: 'relative',
+    marginRight: 12 / theme_1.BASE_SPACING,
+}));
+const StyledBanner = (0, styles_1.styled)(Stack_1.default, {
+    shouldForwardProp: (prop) => ['isGray'].every((key) => key !== prop),
+})(({ theme, isGray }) => theme.unstable_sx({
+    background: isGray
+        ? 'linear-gradient(180deg, #E6FFEE, #A3A9A7)'
+        : 'linear-gradient(180deg, #5FC1FF 0%, #0078EE 100%)',
+    borderRadius: '12px',
+    borderColor: theme.palette?.bg_color.main,
+    borderWidth: 2,
+    borderStyle: 'solid',
+    width: 99,
+    height: 99,
+    p: 6 / theme_1.BASE_SPACING,
+    position: 'relative',
+    alignItems: 'center',
+    '&:after': {
+        content: "''",
+        zIndex: 1,
+        position: 'absolute',
+        height: 40,
+        width: 95,
+        borderRadius: '12px',
+        background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%)',
+        bottom: -1,
+    },
+}));
+const StyledSwiper = (0, styles_1.styled)(react_2.Swiper)(({ theme }) => ({
+    '& .swiper-wrapper': {
+        width: 'fit-content',
+        maxWidth: 'fit-content',
+    },
+}));
+const StyledSwiperSlide = (0, styles_1.styled)(react_2.SwiperSlide)(({ theme }) => ({
+    width: 'fit-content',
+    flex: 1,
+}));
+const TMABannersFeed = (props) => {
+    const { stories, sx = {}, storiesSwiperProps = {}, storyTitleVariant = 'caption3Semibold', } = props;
+    const [activeStoryIndex, setActiveStoryIndex] = (0, react_1.useState)(null);
+    const handleFinishedStory = () => {
+        setActiveStoryIndex(Number(activeStoryIndex) + 1);
+    };
+    const handlePrevStory = () => {
+        setActiveStoryIndex(Number(activeStoryIndex) - 1);
+    };
+    const haveStories = Boolean(stories?.length);
+    return ((0, jsx_runtime_1.jsx)(Box_1.default, { sx: sx, children: (0, jsx_runtime_1.jsxs)(TMABannerFeedPropsContext_1.TMABannerFeedPropsContext.Provider, { value: props, children: [(0, jsx_runtime_1.jsx)(StyledSwiper, { className: "story-swiper", allowTouchMove: true, slidesPerView: "auto", speed: 400, ...storiesSwiperProps, children: stories?.map((story, index) => ((0, jsx_runtime_1.jsx)(StyledSwiperSlide, { className: "story-slide", children: (0, jsx_runtime_1.jsx)(StyledBannerWrapper, { alignItems: "center", justifyContent: "center", className: "story-banner-wrapper", children: (0, jsx_runtime_1.jsxs)(StyledBanner, { isGray: story.isGray, onClick: () => setActiveStoryIndex(index), className: "story-banner", children: [story.image, (0, jsx_runtime_1.jsx)(Typography_1.default, { className: "story-banner-title", variant: storyTitleVariant, sx: {
+                                            width: '85%',
+                                            position: 'absolute',
+                                            bottom: 6,
+                                            left: 6,
+                                            fontSize: 10,
+                                            fontWeight: 600,
+                                            lineHeight: '107%',
+                                            zIndex: 2,
+                                        }, children: story.title })] }) }) }, story.title))) }), activeStoryIndex !== null && haveStories && ((0, jsx_runtime_1.jsx)(TMAStoryDrawer_1.TMAStoryDrawer, { onFinished: activeStoryIndex !== stories.length - 1
+                        ? handleFinishedStory
+                        : undefined, onPrev: activeStoryIndex ? handlePrevStory : undefined, onClose: () => setActiveStoryIndex(null), story: stories[activeStoryIndex] }))] }) }));
+};
+exports.TMABannersFeed = TMABannersFeed;

package/dist/cjs/components/TMABannersFeed/TMABannerFeedPropsContext.d.ts

@@ -0,0 +1,5 @@
+import { TMABannersFeedProps } from './TMABannerFeed';
+export type TMABannerFeedPropsContextType = TMABannersFeedProps;
+export declare const TMABannerFeedPropsContext: import("react").Context<TMABannersFeedProps>;
+export declare const useTMABannerFeedPropsContext: () => TMABannersFeedProps;
+//# sourceMappingURL=TMABannerFeedPropsContext.d.ts.map

package/dist/cjs/components/TMABannersFeed/TMABannerFeedPropsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMABannerFeedPropsContext.d.ts","sourceRoot":"","sources":["../../../../src/components/TMABannersFeed/TMABannerFeedPropsContext.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,6BAA6B,GAAG,mBAAmB,CAAC;AAEhE,eAAO,MAAM,yBAAyB,8CACe,CAAC;AAEtD,eAAO,MAAM,4BAA4B,2BAKxC,CAAC"}

package/dist/cjs/components/TMABannersFeed/TMABannerFeedPropsContext.js

@@ -0,0 +1,11 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTMABannerFeedPropsContext = exports.TMABannerFeedPropsContext = void 0;
+const react_1 = require("react");
+exports.TMABannerFeedPropsContext = (0, react_1.createContext)(null);
+const useTMABannerFeedPropsContext = () => {
+    const value = (0, react_1.useContext)(exports.TMABannerFeedPropsContext);
+    return (0, react_1.useMemo)(() => value, [value]);
+};
+exports.useTMABannerFeedPropsContext = useTMABannerFeedPropsContext;

package/dist/cjs/components/TMABannersFeed/TMAStoryDrawer.d.ts

@@ -0,0 +1,11 @@
+import { SxProps } from '@mui/material/styles';
+import { TMAStory } from './TMABannerFeed';
+export interface TMAStoryDrawerProps {
+    sx?: SxProps;
+    onClose: () => void;
+    story: TMAStory | null;
+    onFinished?: () => void;
+    onPrev?: () => void;
+}
+export declare const TMAStoryDrawer: ({ story, onClose, onFinished, onPrev, }: TMAStoryDrawerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMAStoryDrawer.d.ts.map

package/dist/cjs/components/TMABannersFeed/TMAStoryDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMAStoryDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/TMABannersFeed/TMAStoryDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAU,MAAM,sBAAsB,CAAC;AAUvD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAM3C,MAAM,WAAW,mBAAmB;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAWD,eAAO,MAAM,cAAc,4CAKxB,mBAAmB,4CAkMrB,CAAC"}

package/dist/cjs/components/TMABannersFeed/TMAStoryDrawer.js

@@ -0,0 +1,126 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TMAStoryDrawer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const image_1 = __importDefault(require("next/image"));
+const Drawer_1 = __importDefault(require("@mui/material/Drawer"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const CloseOutlined_1 = __importDefault(require("@mui/icons-material/CloseOutlined"));
+const react_2 = require("swiper/react");
+const modules_1 = require("swiper/modules");
+const StoryProgress_1 = require("./StoryProgress");
+const useTMALongPress_1 = __importDefault(require("../../hooks/useTMALongPress"));
+const TMABannerFeedPropsContext_1 = require("./TMABannerFeedPropsContext");
+const theme_1 = require("../../theme");
+const StyledSwiper = (0, styles_1.styled)(react_2.Swiper)(({ theme }) => ({
+    height: '100vh',
+    width: '100%',
+    background: 'linear-gradient(0deg, #0078EE, #5FC1FF)',
+    '& .story-item-slide': {
+        maxHeight: 'calc(100% - 90px)',
+    },
+}));
+const TMAStoryDrawer = ({ story, onClose, onFinished, onPrev, }) => {
+    const { storyItemsSwiperProps = {}, storyItemTitleVariant = 'title3Semibold', storyItemSubtitleVariant = 'textRegular', } = (0, TMABannerFeedPropsContext_1.useTMABannerFeedPropsContext)();
+    const [activeStoryItemIndex, setActiveStoryItemIndex] = (0, react_1.useState)(0);
+    const swiperRef = (0, react_1.useRef)(null);
+    const timerRef = (0, react_1.useRef)(null);
+    const goToSlide = (index = 0) => {
+        setActiveStoryItemIndex(index);
+        setTimeout(() => swiperRef.current?.slideTo(index), 0);
+    };
+    const goToSlidePrev = () => {
+        setTimeout(() => swiperRef.current?.slidePrev(), 0);
+    };
+    const handleNextStep = () => {
+        if (!story) {
+            return;
+        }
+        if (activeStoryItemIndex !== story.items.length - 1) {
+            goToSlide(activeStoryItemIndex + 1);
+        }
+        else if (onFinished) {
+            setActiveStoryItemIndex(0);
+            setTimeout(() => swiperRef.current?.slideTo(0, 0), 0);
+            onFinished();
+        }
+        else {
+            onClose();
+        }
+    };
+    const handlePreviousStep = () => {
+        if (!story) {
+            return;
+        }
+        if (activeStoryItemIndex) {
+            goToSlidePrev();
+        }
+        else if (onPrev) {
+            setActiveStoryItemIndex(0);
+            goToSlide();
+            onPrev();
+        }
+        else {
+            timerRef.current.resetTimer();
+        }
+    };
+    const handleLongPressHandleStart = () => {
+        timerRef.current.pause();
+    };
+    const handleLongPressHandleEnd = () => {
+        timerRef.current.resume();
+    };
+    const handleClick = (event) => {
+        const isNext = event.touches.startX > event.width / 2;
+        if (isNext) {
+            handleNextStep();
+            return;
+        }
+        handlePreviousStep();
+    };
+    const longPressEvents = (0, useTMALongPress_1.default)(handleLongPressHandleStart, handleLongPressHandleEnd, handleClick);
+    const swiperMemoized = (0, react_1.useMemo)(() => {
+        return ((0, jsx_runtime_1.jsx)(StyledSwiper, { className: "story-item-swiper", onBeforeInit: (swiper) => {
+                swiperRef.current = swiper;
+            }, onSlideChange: (sw) => setActiveStoryItemIndex(sw.activeIndex), modules: [modules_1.Navigation], slidesPerView: 1, speed: 400, ...longPressEvents, ...storyItemsSwiperProps, children: story?.items.map(({ image, subtitle, title, component }) => {
+                const haveComponent = Boolean(component);
+                return ((0, jsx_runtime_1.jsxs)(react_2.SwiperSlide, { className: "story-item-slide", children: [haveComponent && component, !haveComponent && ((0, jsx_runtime_1.jsxs)(Stack_1.default, { className: "story-item-wrapper", p: 2, rowGap: 6, pt: 90 / theme_1.BASE_SPACING, sx: { height: '100%' }, children: [(0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
+                                        marginX: 'auto',
+                                        height: '70%',
+                                        minHeight: '70%',
+                                        maxHeight: '70%',
+                                        width: '100%',
+                                        position: 'relative',
+                                    }, children: image && ((0, jsx_runtime_1.jsx)(image_1.default, { src: image, alt: title ?? '', fill: true, sizes: "100vw", style: { objectFit: 'contain' }, priority: true })) }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { sx: { minHeight: 300 }, rowGap: 12 / theme_1.BASE_SPACING, children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { className: "story-item-title", variant: storyItemTitleVariant, sx: { fontWeight: 590 }, children: title }), (0, jsx_runtime_1.jsx)(Typography_1.default, { className: "story-item-subtitle", sx: { whiteSpace: 'pre-wrap', lineHeight: '22px' }, variant: storyItemSubtitleVariant, children: subtitle })] })] }))] }, subtitle));
+            }) }));
+    }, [story, longPressEvents, storyItemsSwiperProps]);
+    return ((0, jsx_runtime_1.jsxs)(Drawer_1.default, { className: "story-drawer", anchor: "bottom", onTouchStart: timerRef.current?.pause, onTouchEnd: timerRef.current?.resume, open: Boolean(story), ModalProps: { onBackdropClick: onClose }, sx: {
+            '& .MuiDrawer-paperAnchorBottom.MuiPaper-root': {
+                borderTopLeftRadius: 0,
+                borderTopRightRadius: 0,
+                pb: 0,
+            },
+        }, children: [(0, jsx_runtime_1.jsx)(StoryProgress_1.StoryProgress, { activeStoryItemIndex: activeStoryItemIndex, onExpirationTimer: handleNextStep, onItemClick: (index) => swiperRef.current?.slideTo(index), story: story, timerRef: timerRef }), (0, jsx_runtime_1.jsx)(Stack_1.default, { className: "story-drawer-closer", justifyContent: "center", alignItems: "center", onClick: (event) => {
+                    event.preventDefault();
+                    onClose();
+                }, sx: {
+                    height: 40,
+                    width: 40,
+                    position: 'absolute',
+                    zIndex: 1000,
+                    top: 42,
+                    right: 16,
+                    borderRadius: '10px',
+                    cursor: 'pointer',
+                    background: '#2990FF26',
+                }, children: (0, jsx_runtime_1.jsx)(CloseOutlined_1.default, {}) }), swiperMemoized] }));
+};
+exports.TMAStoryDrawer = TMAStoryDrawer;

package/dist/cjs/components/TMABannersFeed/propsContext.d.ts

@@ -0,0 +1,5 @@
+import { TMABannersFeedProps } from './TMABannerFeed';
+export type TMABannerFeedPropsContextType = TMABannersFeedProps;
+export declare const tmaBannerFeedPropsContext: import("react").Context<TMABannersFeedProps>;
+export declare const useTMABannerFeedPropsContext: () => TMABannersFeedProps;
+//# sourceMappingURL=propsContext.d.ts.map

package/dist/cjs/components/TMABannersFeed/propsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"propsContext.d.ts","sourceRoot":"","sources":["../../../../src/components/TMABannersFeed/propsContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,MAAM,6BAA6B,GAAG,mBAAmB,CAAC;AAEhE,eAAO,MAAM,yBAAyB,8CAAsD,CAAC;AAE7F,eAAO,MAAM,4BAA4B,2BAGxC,CAAC"}

package/dist/cjs/components/TMABannersFeed/propsContext.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTMABannerFeedPropsContext = exports.tmaBannerFeedPropsContext = void 0;
+const react_1 = require("react");
+exports.tmaBannerFeedPropsContext = (0, react_1.createContext)(null);
+const useTMABannerFeedPropsContext = () => {
+    const value = (0, react_1.useContext)(exports.tmaBannerFeedPropsContext);
+    return (0, react_1.useMemo)(() => value, [value]);
+};
+exports.useTMABannerFeedPropsContext = useTMABannerFeedPropsContext;

package/dist/cjs/components/TMABarChart/ItemTooltip.d.ts

@@ -0,0 +1,12 @@
+export interface ItemTooltipProps {
+    value: number | string;
+    position: {
+        x: number;
+        y: number;
+    };
+    id?: number;
+    isFirst?: boolean;
+    isLast?: boolean;
+}
+export declare function ItemTooltip(props: ItemTooltipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ItemTooltip.d.ts.map

package/dist/cjs/components/TMABarChart/ItemTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/TMABarChart/ItemTooltip.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAmDlD"}

package/dist/cjs/components/TMABarChart/ItemTooltip.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemTooltip = ItemTooltip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const Popper_1 = __importDefault(require("@mui/material/Popper"));
+const theme_1 = require("../../theme");
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+function ItemTooltip(props) {
+    const { position, isFirst, isLast, value } = props;
+    const tooltipPosition = (0, react_1.useMemo)(() => ({
+        x: position.x,
+        y: position.y,
+    }), [position]);
+    return ((0, jsx_runtime_1.jsx)(material_1.NoSsr, { children: (0, jsx_runtime_1.jsx)(Popper_1.default, { sx: {
+                pointerEvents: 'none',
+                zIndex: (theme) => theme.zIndex.modal,
+            }, open: true, placement: isFirst ? 'top-start' : isLast ? 'top-end' : 'top', anchorEl: {
+                getBoundingClientRect: () => ({
+                    x: tooltipPosition.x,
+                    y: tooltipPosition.y,
+                    width: 0,
+                    height: 0,
+                    top: tooltipPosition.y,
+                    right: tooltipPosition.x,
+                    bottom: tooltipPosition.y,
+                    left: tooltipPosition.x,
+                }),
+            }, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { elevation: 0, sx: {
+                    p: 10 / theme_1.BASE_SPACING,
+                    backgroundColor: theme_1.commonColors.card_bg_color.dark,
+                    borderRadius: (12 / theme_1.BASE_SPACING) * 2,
+                }, children: (0, jsx_runtime_1.jsx)(Stack_1.default, { direction: "row", alignItems: "center", children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption1Regular", color: "white", children: value }) }) }) }) }));
+}

package/dist/cjs/components/TMABarChart/TMABarChart.d.ts

@@ -0,0 +1,10 @@
+export interface TMABarChartProps {
+    xTickLabels: any[];
+    data: number[];
+    tooltipSuffix?: string;
+    width?: number | string;
+    height?: number;
+    fullWidth?: boolean;
+}
+export declare const TMABarChart: (props: TMABarChartProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMABarChart.d.ts.map

package/dist/cjs/components/TMABarChart/TMABarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMABarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/TMABarChart/TMABarChart.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AASD,eAAO,MAAM,WAAW,UAAW,gBAAgB,4CA+HlD,CAAC"}

package/dist/cjs/components/TMABarChart/TMABarChart.js

@@ -0,0 +1,131 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TMABarChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const theme_1 = require("../../theme");
+const x_charts_1 = require("@mui/x-charts");
+const material_1 = require("@mui/material");
+const ItemTooltip_1 = require("./ItemTooltip");
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const formatNumberToK = (value) => {
+    if (value >= 1000) {
+        return `${value / 1000}K`;
+    }
+    return value.toString();
+};
+const TMABarChart = (props) => {
+    const { xTickLabels, data, tooltipSuffix, width = 400, height = 300, fullWidth, } = props;
+    const [tooltipData, setTooltipData] = (0, react_1.useState)(null);
+    const [selectedBarIndex, setSelectedBarIndex] = (0, react_1.useState)(null);
+    const chartRef = (0, react_1.useRef)(null);
+    const handleCloseTooltip = () => {
+        setTooltipData(null);
+        setSelectedBarIndex(null);
+    };
+    const handleToggleTooltip = (event, itemIdentifier) => {
+        event.preventDefault();
+        if (Number(tooltipData?.id) === itemIdentifier.dataIndex) {
+            handleCloseTooltip();
+            return;
+        }
+        setSelectedBarIndex(itemIdentifier.dataIndex);
+        let x = event.clientX;
+        let y = event.clientY;
+        const isFirst = itemIdentifier.dataIndex === 0;
+        const isLast = itemIdentifier.dataIndex === data.length - 1;
+        if (chartRef.current) {
+            const bars = chartRef.current.querySelectorAll('.MuiBarElement-root');
+            const bar = bars?.[itemIdentifier.dataIndex];
+            if (bar) {
+                const rect = bar.getBoundingClientRect();
+                x =
+                    rect.left + rect.width / 2 + (isFirst ? -15 : 0) + (isLast ? 15 : 0);
+                y = rect.top - 5;
+            }
+        }
+        setTooltipData({
+            value: `${data[itemIdentifier.dataIndex]}${tooltipSuffix ? ` ${tooltipSuffix}` : ''}`,
+            position: { x, y },
+            id: itemIdentifier.dataIndex,
+            isFirst,
+            isLast,
+        });
+    };
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('scroll', handleCloseTooltip);
+        return () => {
+            window.removeEventListener('scroll', handleCloseTooltip);
+        };
+    }, []);
+    const barColors = (0, react_1.useMemo)(() => data.map((_, index) => selectedBarIndex === index
+        ? theme_1.commonColors.accent_text_color.light
+        : theme_1.commonColors.section_header_text_color.light), [selectedBarIndex, data]);
+    const clipPathId = `${react_1.default.useId()}-clip-path`;
+    return ((0, jsx_runtime_1.jsx)(material_1.NoSsr, { children: (0, jsx_runtime_1.jsx)(Box_1.default, { onScroll: handleCloseTooltip, width: fullWidth ? '100%' : width, children: (0, jsx_runtime_1.jsxs)(x_charts_1.ResponsiveChartContainer, { height: height, margin: { bottom: 35, left: 40, right: 35, top: 35 }, ref: chartRef, xAxis: [
+                    {
+                        scaleType: 'band',
+                        tickLabelStyle: {
+                            angle: -90,
+                            position: 'absolute',
+                            textAnchor: 'end',
+                            ...theme_1.typography.caption2Regular,
+                        },
+                        data: xTickLabels,
+                        colorMap: {
+                            type: 'ordinal',
+                            colors: barColors,
+                        },
+                    },
+                ], yAxis: [
+                    {
+                        valueFormatter: (value) => formatNumberToK(value),
+                        tickLabelStyle: {
+                            ...theme_1.typography.caption1Regular,
+                        },
+                    },
+                ], series: [
+                    {
+                        type: 'bar',
+                        data,
+                    },
+                ], children: [(0, jsx_runtime_1.jsx)(x_charts_1.ChartsClipPath, { id: clipPathId }), (0, jsx_runtime_1.jsx)("g", { clipPath: clipPathId, children: (0, jsx_runtime_1.jsx)(x_charts_1.BarPlot, { onItemClick: handleToggleTooltip, borderRadius: 2 }) }), (0, jsx_runtime_1.jsx)(x_charts_1.ChartsXAxis, { disableTicks: true, disableLine: true }), (0, jsx_runtime_1.jsx)(x_charts_1.ChartsYAxis, { disableTicks: true, disableLine: true }), tooltipData && (0, jsx_runtime_1.jsx)(ItemTooltip_1.ItemTooltip, { ...(tooltipData || {}) })] }) }) }));
+};
+exports.TMABarChart = TMABarChart;

package/dist/cjs/components/TMABaseSection/TMABaseSection.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ContainerProps } from '@mui/material/Container';
+export interface TMABaseSectionProps extends ContainerProps {
+    children: React.ReactNode;
+}
+export declare const TMABaseSection: ({ children, sx, ...props }: TMABaseSectionProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMABaseSection.d.ts.map

package/dist/cjs/components/TMABaseSection/TMABaseSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMABaseSection.d.ts","sourceRoot":"","sources":["../../../../src/components/TMABaseSection/TMABaseSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAkB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,+BAIxB,mBAAmB,4CAerB,CAAC"}

package/dist/cjs/components/TMABaseSection/TMABaseSection.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TMABaseSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Container_1 = __importDefault(require("@mui/material/Container"));
+const TMABaseSection = ({ children, sx, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(Container_1.default, { sx: {
+            pt: 0,
+            pb: 4,
+            bgcolor: 'secondary_bg_color.main',
+            minHeight: '100dvh',
+            ...sx,
+        }, ...props, children: children }));
+};
+exports.TMABaseSection = TMABaseSection;

package/dist/cjs/components/TMACell/TMACell.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { LinkProps } from '@mui/material/Link';
+export interface TMACellProps {
+    title: string;
+    href: string;
+    LinkComponent?: LinkProps['component'];
+    image?: string;
+    imageComponent?: React.ReactNode;
+    shouldOpenInBlank?: boolean;
+}
+export declare const TMACell: ({ title, href, LinkComponent, image, imageComponent, shouldOpenInBlank, }: TMACellProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMACell.d.ts.map

package/dist/cjs/components/TMACell/TMACell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMACell.d.ts","sourceRoot":"","sources":["../../../../src/components/TMACell/TMACell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAOrD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,OAAO,8EAOjB,YAAY,4CAoBd,CAAC"}