npm - @sbcrmweb/sbcrmweb-tma-core - Versions diffs - 0.0.59 - Mend

@sbcrmweb/sbcrmweb-tma-core 0.0.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (239) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,419 @@
+# ui-core lib (for NextJs apps)
+## 1. How to connect:
+#### app routing
+```typescript jsx
+// app/layout.tsx
+import { ThemeProvider } from "sbcrmweb-tma-core";
+export default function AppLayout({ children }) {
+    return (
+        <html lang="ru" suppressHydrationWarning>
+            <body>
+                <ThemeProvider>
+                    {children}
+                </ThemeProvider>
+            </body>
+        </html>
+    );
+}
+```
+#### app routing & custom theme
+```typescript
+import { createTheme } from "@mui/material/styles";
+import { theme } from "sbcrmweb-tma-core";
+export default createTheme(theme, {
+    // .... override theme
+});
+```
+```typescript jsx
+// components/ThemeProvider
+"use client";
+import { ThemeProvider as BaseThemeProvider } from "sbcrmweb-tma-core";
+import theme from "@/theme";
+import { PropsWithChildren } from "react";
+export default function ThemeProvider({ children }: PropsWithChildren) {
+    return <BaseThemeProvider theme={theme}>{children}</BaseThemeProvider>;
+}
+```
+```typescript jsx
+// app/layout.tsx
+import ThemeProvider from "@/components/ThemeProvider";
+export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
+    return (
+        <html lang="ru" suppressHydrationWarning>
+            <body>
+                <ThemeProvider>{children}</ThemeProvider>
+            </body>
+        </html>
+    );
+}
+```
+## 2. Usage
+```typescript jsx
+// use theme parameters
+import { themeParams } from "sbcrmweb-tma-core";
+const { BASE_SPACING } = themeParams;
+// ...
+    return (
+        <Stack sx={{ py: 12 / BASE_SPACING, px: 8 / BASE_SPACING }}>
+            // ...
+        </Stack>
+    );
+```
+```typescript jsx
+// use components
+import { TMACounter } from 'sbcrmweb-tma-core';
+// ...
+    return (
+        <TMACounter
+            onLeave={(lastValue) => {
+                console.log({ lastValue });
+            }}
+            onChange={(nextValue) => {
+                console.log({ nextValue });
+            }}
+        />
+    );
+```
+## Colors
+```typescript
+export const commonColors: CommonColors = {
+  black: '#000000',
+  white: '#FFFFFF',
+  bg_color: {
+    light: '#FFFFFF',
+    dark: '#212121',
+  },
+  accent_text_color: {
+    light: '#007AFF',
+    dark: '#007AFF',
+  },
+  button_color: {
+    light: '#007AFF',
+    dark: '#2990FF',
+  },
+  button_text_color: {
+    light: '#FFFFFF',
+    dark: '#FFFFFF',
+  },
+  destructive_background: {
+    light: '#F12E2E05',
+    dark: '#F12E2E15',
+  },
+  destructive_text_color: {
+    light: '#E53935',
+    dark: '#E53935',
+  },
+  header_bg_color: {
+    light: '#FFFFFF',
+    dark: '#212121',
+  },
+  hint_color: {
+    light: '#707579',
+    dark: '#AAAAAA',
+  },
+  link_color: {
+    light: '#007AFF',
+    dark: '#2990FF',
+  },
+  secondary_bg_color: {
+    light: '#EFEFF4',
+    dark: '#0F0F0F',
+  },
+  section_bg_color: {
+    light: '#FFFFFF',
+    dark: '#212121',
+  },
+  section_header_text_color: {
+    light: '#707579',
+    dark: '#AAAAAA',
+  },
+  subtitle_text_color: {
+    light: '#707579',
+    dark: '#AAAAAA',
+  },
+  text_color: {
+    light: '#000000',
+    dark: '#FFFFFF',
+  },
+  divider: {
+    light: '#00000015',
+    dark: '#FFFFFF05',
+  },
+  card_bg_color: {
+    light: '#FFFFFF',
+    dark: '#323232',
+  },
+  skeleton: {
+    light: '#00000003',
+    dark: '#FFFFFF03',
+  },
+  secondary_fill: {
+    light: '#4378FF10',
+    dark: '#2990FF15',
+  },
+  secondary_hint_color: {
+    light: '#A2ACB0',
+    dark: '#78797E',
+  },
+  outline: {
+    light: '#00000005',
+    dark: '#FFFFFF10',
+  },
+  plain_foreground: {
+    light: '#00000080',
+    dark: '#FFFFFF95',
+  },
+  plain_background: {
+    light: '#00000004',
+    dark: '#FFFFFF0A',
+  },
+  toast_accent_color: {
+    light: '#55A6FF',
+    dark: '#55A6FF',
+  },
+};
+```
+## Typography
+```typescript
+const typography = {
+    largeTitleRegular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 34,
+        fontWeight: 400,
+        lineHeight: 1.3,
+        letterSpacing: 0.25,
+    },
+    largeTitleSemibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 34,
+        fontWeight: 600,
+        lineHeight: 1.3,
+        letterSpacing: 0.25,
+    },
+    largeTitleBold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 34,
+        fontWeight: 700,
+        lineHeight: 1.3,
+        letterSpacing: 0.25,
+    },
+    title1Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 28,
+        fontWeight: 400,
+        lineHeight: 1.12,
+        letterSpacing: 0.1,
+    },
+    title1Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 28,
+        fontWeight: 600,
+        lineHeight: 1.12,
+        letterSpacing: 0.1,
+    },
+    title1Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 28,
+        fontWeight: 700,
+        lineHeight: 1.12,
+        letterSpacing: 0.1,
+    },
+    title2Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 24,
+        fontWeight: 400,
+        lineHeight: 1.5,
+        letterSpacing: 0,
+    },
+    title2Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 24,
+        fontWeight: 600,
+        lineHeight: 1.5,
+        letterSpacing: 0,
+    },
+    title2Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 24,
+        fontWeight: 700,
+        lineHeight: 1.5,
+        letterSpacing: 0,
+    },
+    title3Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 20,
+        fontWeight: 400,
+        lineHeight: 1.5,
+        letterSpacing: 0.15,
+    },
+    title3Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 20,
+        fontWeight: 400,
+        lineHeight: 1.5,
+        letterSpacing: 0.15,
+    },
+    title3Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 20,
+        fontWeight: 400,
+        lineHeight: 1.5,
+        letterSpacing: 0.15,
+    },
+    headlineRegular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 19,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    headlineSemibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 19,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    headlineBold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 19,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    textRegular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 17,
+        fontWeight: 400,
+        lineHeight: 1.37,
+        letterSpacing: 0.15,
+    },
+    textMedium: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 17,
+        fontWeight: 500,
+        lineHeight: 1.37,
+        letterSpacing: 0.15,
+    },
+    textSemibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 17,
+        fontWeight: 600,
+        lineHeight: 1.37,
+        letterSpacing: 0.15,
+    },
+    textBold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 17,
+        fontWeight: 700,
+        lineHeight: 1.37,
+        letterSpacing: 0.15,
+    },
+    subheadline1Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 16,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline1Mono: {
+        fontFamily: SFProMono.style.fontFamily,
+        fontSize: 16,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline1Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 16,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline1Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 16,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline2Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 15,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline2Mono: {
+        fontFamily: SFProMono.style.fontFamily,
+        fontSize: 15,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline2Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 15,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    subheadline2Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 15,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption1Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 13,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption1Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 13,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption1Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 13,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption2Regular: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 400,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption2Semibold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 600,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+    caption2Bold: {
+        fontFamily: SFPro.style.fontFamily,
+        fontSize: 10,
+        fontWeight: 700,
+        lineHeight: 1.75,
+        letterSpacing: 0.15,
+    },
+};
+```

package/dist/cjs/components/TMAActionBar/TMAActionBar.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SwipeableDrawerProps } from '@mui/material/SwipeableDrawer';
+export interface TMAActionBarProps extends Omit<SwipeableDrawerProps, 'onOpen'> {
+    onOpen?: () => void;
+    isSwipeable?: boolean;
+    isOpen?: boolean;
+    children: React.ReactNode;
+}
+export declare const TMAActionBar: ({ children, sx, isSwipeable, isOpen, onClose, onOpen, ...props }: TMAActionBarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMAActionBar.d.ts.map

package/dist/cjs/components/TMAActionBar/TMAActionBar.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TMAActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/TMAActionBar/TMAActionBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAwB,EACtB,oBAAoB,EACrB,MAAM,+BAA+B,CAAC;AAEvC,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,qEAQtB,iBAAiB,4CA+CnB,CAAC"}

package/dist/cjs/components/TMAActionBar/TMAActionBar.js ADDED Viewed

@@ -0,0 +1,40 @@
+"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.TMAActionBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const react_1 = require("react");
+const SwipeableDrawer_1 = __importDefault(require("@mui/material/SwipeableDrawer"));
+const TMAActionBar = ({ children, sx, isSwipeable = false, isOpen = true, onClose, onOpen = () => { }, ...props }) => {
+    const contentRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!isSwipeable && contentRef.current) {
+            const height = contentRef.current.getBoundingClientRect().height;
+            document.body.style.paddingBottom = `${height}px`;
+        }
+    }, [isSwipeable, children]);
+    (0, react_1.useEffect)(() => {
+        if (!isSwipeable && contentRef.current) {
+            return () => {
+                document.body.style.paddingBottom = '0px';
+            };
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(SwipeableDrawer_1.default, { variant: isSwipeable ? 'temporary' : 'permanent', hideBackdrop: !isSwipeable, open: isSwipeable ? isOpen : true, onClose: onClose, onOpen: onOpen, anchor: "bottom", slotProps: {
+            root: {
+                keepMounted: isSwipeable,
+            },
+        }, children: (0, jsx_runtime_1.jsx)(Stack_1.default, { ref: contentRef, sx: {
+                px: 2,
+                pt: 2,
+                bgcolor: 'bg_color.main',
+                borderTopLeftRadius: 12,
+                borderTopRightRadius: 12,
+                ...sx,
+            }, ...props, children: children }) }));
+};
+exports.TMAActionBar = TMAActionBar;

package/dist/cjs/components/TMABannersFeed/StoryDrawer.d.ts ADDED Viewed

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

package/dist/cjs/components/TMABannersFeed/StoryDrawer.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"StoryDrawer.d.ts","sourceRoot":"","sources":["../../../../src/components/TMABannersFeed/StoryDrawer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAU,MAAM,sBAAsB,CAAC;AASvD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAM3C,UAAU,gBAAgB;IACxB,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,WAAW,4CAKrB,gBAAgB,4CA8KlB,CAAC"}

package/dist/cjs/components/TMABannersFeed/StoryDrawer.js ADDED Viewed

@@ -0,0 +1,121 @@
+"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.StoryDrawer = 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 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 propsContext_1 = require("./propsContext");
+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 StoryDrawer = ({ story, onClose, onFinished, onPrev, }) => {
+    const { storyItemsSwiperProps = {}, storyItemTitleVariant = 'title3Semibold', storyItemSubtitleVariant = 'textRegular', } = (0, propsContext_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);
+            goToSlide();
+            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%',
+                                    }, component: "img", src: image }), (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.StoryDrawer = StoryDrawer;

package/dist/cjs/components/TMABannersFeed/StoryProgress.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { TMAStory } from './TMABannerFeed';
+interface StoryProgressProps {
+    story: TMAStory | null;
+    activeStoryItemIndex: number;
+    onExpirationTimer: () => void;
+    onItemClick: (index: number) => void;
+    timerRef?: any;
+}
+export declare const StoryProgress: ({ story, activeStoryItemIndex, onExpirationTimer, onItemClick, timerRef, }: StoryProgressProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=StoryProgress.d.ts.map

package/dist/cjs/components/TMABannersFeed/StoryProgress.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"StoryProgress.d.ts","sourceRoot":"","sources":["../../../../src/components/TMABannersFeed/StoryProgress.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAK3C,UAAU,kBAAkB;IAC1B,KAAK,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAID,eAAO,MAAM,aAAa,+EAMvB,kBAAkB,4CA4GpB,CAAC"}