beautiful-snackbar 1.0.0

package/example/src/constants/theme.ts

@@ -0,0 +1,66 @@
+/**
+ * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
+ * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
+ */
+
+import '@/global.css';
+
+import { Platform } from 'react-native';
+
+export const Colors = {
+  light: {
+    text: '#000000',
+    background: '#ffffff',
+    backgroundElement: '#F0F0F3',
+    backgroundSelected: '#E0E1E6',
+    textSecondary: '#60646C',
+  },
+  dark: {
+    text: '#ffffff',
+    background: '#000000',
+    backgroundElement: '#212225',
+    backgroundSelected: '#2E3135',
+    textSecondary: '#B0B4BA',
+  },
+} as const;
+
+export type ThemeColor = keyof typeof Colors.light & keyof typeof Colors.dark;
+
+export const Fonts = Platform.select({
+  ios: {
+    /** iOS `UIFontDescriptorSystemDesignDefault` */
+    sans: 'system-ui',
+    /** iOS `UIFontDescriptorSystemDesignSerif` */
+    serif: 'ui-serif',
+    /** iOS `UIFontDescriptorSystemDesignRounded` */
+    rounded: 'ui-rounded',
+    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
+    mono: 'ui-monospace',
+  },
+  default: {
+    sans: 'normal',
+    serif: 'serif',
+    rounded: 'normal',
+    mono: 'monospace',
+  },
+  web: {
+    sans: 'var(--font-display)',
+    serif: 'var(--font-serif)',
+    rounded: 'var(--font-rounded)',
+    mono: 'var(--font-mono)',
+  },
+});
+
+export const Spacing = {
+  half: 2,
+  one: 4,
+  two: 8,
+  three: 16,
+  four: 24,
+  five: 32,
+  six: 64,
+  seven: 120,
+} as const;
+
+export const BottomTabInset = Platform.select({ ios: 50, android: 80 }) ?? 0;
+export const MaxContentWidth = 800;

package/example/src/global.css

@@ -0,0 +1,9 @@
+:root {
+  --font-display:
+    Spline Sans, Inter, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji,
+    Segoe UI Symbol, Noto Color Emoji;
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+  --font-rounded: 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif;
+  --font-serif: Georgia, 'Times New Roman', serif;
+}

package/example/src/hooks/use-color-scheme.ts

@@ -0,0 +1 @@
+export { useColorScheme } from 'react-native';

package/example/src/hooks/use-color-scheme.web.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { useColorScheme as useRNColorScheme } from 'react-native';
+
+/**
+ * To support static rendering, this value needs to be re-calculated on the client side for web
+ */
+export function useColorScheme() {
+  const [hasHydrated, setHasHydrated] = useState(false);
+
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+
+  const colorScheme = useRNColorScheme();
+
+  if (hasHydrated) {
+    return colorScheme;
+  }
+
+  return 'light';
+}

package/example/src/hooks/use-theme.ts

@@ -0,0 +1,14 @@
+/**
+ * Learn more about light and dark modes:
+ * https://docs.expo.dev/guides/color-schemes/
+ */
+
+import { Colors } from '@/constants/theme';
+import { useColorScheme } from '@/hooks/use-color-scheme';
+
+export function useTheme() {
+  const scheme = useColorScheme();
+  const theme = scheme === 'unspecified' ? 'light' : scheme;
+
+  return Colors[theme];
+}

package/example/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "react-native",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@/assets/*": [
+        "./assets/*"
+      ],
+      "beautiful-snackbar": [
+        "../src/index.ts"
+      ],
+      "react": [
+        "node_modules/react",
+        "node_modules/@types/react"
+      ],
+      "react-native": [
+        "node_modules/react-native",
+        "node_modules/@types/react-native"
+      ]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts",
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ]
+}

package/lib/components/ActionableSnackbar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SnackbarItem } from '../manager';
+interface ActionableSnackbarProps {
+    item: SnackbarItem;
+}
+export declare const ActionableSnackbar: ({ item }: ActionableSnackbarProps) => React.JSX.Element;
+export {};

package/lib/components/ActionableSnackbar.js

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionableSnackbar = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const manager_1 = require("../manager");
+const useSnackbarAnimation_1 = require("../useSnackbarAnimation");
+const ActionableSnackbar = ({ item }) => {
+    const { animStyle } = (0, useSnackbarAnimation_1.useSnackbarAnimation)(item);
+    const customContainerStyle = [
+        styles.wrap,
+        item.backgroundColor ? { backgroundColor: item.backgroundColor } : null,
+        item.containerStyle,
+    ];
+    const customMessageStyle = [
+        styles.message,
+        item.textColor ? { color: item.textColor } : null,
+        item.messageStyle,
+    ];
+    const customActionStyle = [
+        styles.actionText,
+        item.actionColor ? { color: item.actionColor } : null,
+        item.actionStyle,
+    ];
+    const isTop = (item.position || manager_1.snackbar.getPosition()) === 'top';
+    const positionStyle = isTop ? { top: 0 } : { bottom: 0 };
+    const handleActionPress = () => {
+        item.onActionPress?.();
+        item.onDismissRequested?.();
+    };
+    return (<react_native_1.Animated.View style={[styles.outer, positionStyle, animStyle]}>
+			<react_native_1.View style={customContainerStyle}>
+				<react_native_1.TouchableOpacity activeOpacity={1} style={styles.contentArea}>
+					{item.icon && <react_native_1.View style={styles.iconWrap}>{item.icon}</react_native_1.View>}
+					<react_native_1.Text numberOfLines={2} style={customMessageStyle}>
+						{item.message}
+					</react_native_1.Text>
+				</react_native_1.TouchableOpacity>
+				{item.actionLabel && (<react_native_1.TouchableOpacity onPress={handleActionPress} style={styles.actionBtn} activeOpacity={0.7}>
+						<react_native_1.Text style={customActionStyle}>
+							{item.actionLabel}
+						</react_native_1.Text>
+					</react_native_1.TouchableOpacity>)}
+			</react_native_1.View>
+		</react_native_1.Animated.View>);
+};
+exports.ActionableSnackbar = ActionableSnackbar;
+const styles = react_native_1.StyleSheet.create({
+    outer: {
+        width: '100%',
+        position: 'absolute',
+    },
+    wrap: {
+        paddingVertical: 14,
+        paddingHorizontal: 16,
+        marginHorizontal: 16,
+        backgroundColor: '#1E293B',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderRadius: 10,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 6,
+        elevation: 4,
+    },
+    contentArea: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flex: 1,
+        paddingRight: 12,
+    },
+    iconWrap: {
+        marginRight: 10,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    message: {
+        color: '#F8FAFC',
+        fontSize: 14,
+        fontWeight: '600',
+        flexShrink: 1,
+    },
+    actionBtn: {
+        justifyContent: 'center',
+    },
+    actionText: {
+        color: '#10B981', // Emerald 500
+        fontSize: 14,
+        fontWeight: '700',
+    },
+});

package/lib/components/BeautifulSnackbar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SnackbarItem } from '../manager';
+export interface BeautifulSnackbarProps {
+    navigation?: any;
+    avoidKeyboard?: boolean;
+    templates?: Record<string, React.ComponentType<{
+        item: SnackbarItem;
+        dismiss?: () => void;
+    }>>;
+}
+export declare const BeautifulSnackbar: ({ navigation, avoidKeyboard: propAvoidKeyboard, templates, }: BeautifulSnackbarProps) => React.JSX.Element;

package/lib/components/BeautifulSnackbar.js

@@ -0,0 +1,189 @@
+"use strict";
+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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BeautifulSnackbar = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const manager_1 = require("../manager");
+const StandardSnackbar_1 = require("./StandardSnackbar");
+const ActionableSnackbar_1 = require("./ActionableSnackbar");
+const useSnackbarAnimation_1 = require("../useSnackbarAnimation");
+const CustomTemplateWrapper = ({ item, Template, }) => {
+    const { animStyle } = (0, useSnackbarAnimation_1.useSnackbarAnimation)(item);
+    const isTop = (item.position || manager_1.snackbar.getPosition()) === 'top';
+    const positionStyle = isTop ? { top: 0 } : { bottom: 0 };
+    const dismiss = (0, react_1.useCallback)(() => {
+        item.onDismissRequested?.();
+    }, [item]);
+    return (<react_native_1.Animated.View style={[styles.customOuter, positionStyle, animStyle]}>
+			<Template item={item} dismiss={dismiss}/>
+		</react_native_1.Animated.View>);
+};
+const BeautifulSnackbar = ({ navigation, avoidKeyboard: propAvoidKeyboard, templates, }) => {
+    const [activeItems, setActiveItems] = (0, react_1.useState)([]);
+    const [avoidKeyboard, setAvoidKeyboard] = (0, react_1.useState)(manager_1.snackbar.getAvoidKeyboard());
+    const [globalPosition, setGlobalPosition] = (0, react_1.useState)(manager_1.snackbar.getPosition());
+    const [keyboardOffset] = (0, react_1.useState)(() => new react_native_1.Animated.Value(0));
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const bottomInset = insets.bottom;
+    (0, react_1.useEffect)(() => {
+        manager_1.snackbar.registerListener(setActiveItems);
+        const unregisterConfig = manager_1.snackbar.registerConfigListener((config) => {
+            setAvoidKeyboard(config.avoidKeyboard);
+            setGlobalPosition(config.position);
+        });
+        return () => {
+            manager_1.snackbar.unregisterListener();
+            unregisterConfig();
+        };
+    }, []);
+    // Prioritize prop value if specified, otherwise fall back to manager configuration
+    const finalAvoidKeyboard = propAvoidKeyboard !== undefined ? propAvoidKeyboard : avoidKeyboard;
+    (0, react_1.useEffect)(() => {
+        if (!finalAvoidKeyboard) {
+            react_native_1.Animated.timing(keyboardOffset, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: true,
+            }).start();
+            return;
+        }
+        const showEvent = react_native_1.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+        const hideEvent = react_native_1.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+        const showSubscription = react_native_1.Keyboard.addListener(showEvent, (e) => {
+            const targetOffset = Math.max(0, e.endCoordinates.height - bottomInset);
+            react_native_1.Animated.timing(keyboardOffset, {
+                toValue: targetOffset,
+                duration: e.duration || 250,
+                useNativeDriver: true,
+            }).start();
+        });
+        const hideSubscription = react_native_1.Keyboard.addListener(hideEvent, (e) => {
+            react_native_1.Animated.timing(keyboardOffset, {
+                toValue: 0,
+                duration: e.duration || 250,
+                useNativeDriver: true,
+            }).start();
+        });
+        return () => {
+            showSubscription.remove();
+            hideSubscription.remove();
+        };
+    }, [finalAvoidKeyboard, keyboardOffset, bottomInset]);
+    const handleNavigationStateChange = (0, react_1.useCallback)(() => {
+        activeItems.forEach((item) => {
+            if (item.dismissOnNavigation) {
+                item.onDismissRequested?.();
+            }
+        });
+    }, [activeItems]);
+    (0, react_1.useEffect)(() => {
+        let cleanup;
+        if (navigation && typeof navigation.addListener === 'function') {
+            try {
+                const isReady = typeof navigation.isReady === 'function' ? navigation.isReady() : true;
+                if (isReady) {
+                    cleanup = navigation.addListener('state', handleNavigationStateChange);
+                }
+            }
+            catch (e) {
+                console.warn('BeautifulSnackbar failed to bind navigation listener:', e);
+            }
+        }
+        return cleanup;
+    }, [handleNavigationStateChange, navigation]);
+    const renderItem = (item) => {
+        // Custom template checks
+        if (item.type && templates && templates[item.type]) {
+            const TemplateComponent = templates[item.type];
+            return (<CustomTemplateWrapper key={item.id} item={item} Template={TemplateComponent}/>);
+        }
+        if (item.actionLabel && item.onActionPress) {
+            return <ActionableSnackbar_1.ActionableSnackbar key={item.id} item={item}/>;
+        }
+        return <StandardSnackbar_1.StandardSnackbar key={item.id} item={item}/>;
+    };
+    const topItems = activeItems.filter((item) => (item.position || globalPosition) === 'top');
+    const bottomItems = activeItems.filter((item) => (item.position || globalPosition) === 'bottom');
+    return (<react_native_1.View style={styles.rootContainer} pointerEvents="box-none">
+			<react_native_1.View style={styles.topContainer} pointerEvents="box-none">
+				{topItems.map(renderItem)}
+			</react_native_1.View>
+			<react_native_1.Animated.View style={[
+            styles.bottomContainer,
+            {
+                transform: [
+                    {
+                        translateY: keyboardOffset.interpolate({
+                            inputRange: [0, 1000],
+                            outputRange: [0, -1000],
+                        }),
+                    },
+                ],
+            },
+        ]} pointerEvents="box-none">
+				{bottomItems.map(renderItem)}
+			</react_native_1.Animated.View>
+		</react_native_1.View>);
+};
+exports.BeautifulSnackbar = BeautifulSnackbar;
+const styles = react_native_1.StyleSheet.create({
+    rootContainer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        top: 0,
+    },
+    topContainer: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        justifyContent: 'flex-start',
+    },
+    bottomContainer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        justifyContent: 'flex-end',
+    },
+    customOuter: {
+        width: '100%',
+        position: 'absolute',
+    },
+});

package/lib/components/StandardSnackbar.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SnackbarItem } from '../manager';
+interface StandardSnackbarProps {
+    item: SnackbarItem;
+}
+export declare const StandardSnackbar: ({ item }: StandardSnackbarProps) => React.JSX.Element;
+export {};

package/lib/components/StandardSnackbar.js

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StandardSnackbar = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const manager_1 = require("../manager");
+const useSnackbarAnimation_1 = require("../useSnackbarAnimation");
+const StandardSnackbar = ({ item }) => {
+    const { animStyle } = (0, useSnackbarAnimation_1.useSnackbarAnimation)(item);
+    const customContainerStyle = [
+        styles.wrap,
+        item.backgroundColor ? { backgroundColor: item.backgroundColor } : null,
+        item.containerStyle,
+    ];
+    const customMessageStyle = [
+        styles.message,
+        item.textColor ? { color: item.textColor } : null,
+        item.messageStyle,
+    ];
+    const isTop = (item.position || manager_1.snackbar.getPosition()) === 'top';
+    const positionStyle = isTop ? { top: 0 } : { bottom: 0 };
+    return (<react_native_1.Animated.View style={[styles.outer, positionStyle, animStyle]}>
+			<react_native_1.View style={customContainerStyle}>
+				{item.icon && <react_native_1.View style={styles.iconWrap}>{item.icon}</react_native_1.View>}
+				<react_native_1.Text numberOfLines={2} style={customMessageStyle}>
+					{item.message}
+				</react_native_1.Text>
+			</react_native_1.View>
+		</react_native_1.Animated.View>);
+};
+exports.StandardSnackbar = StandardSnackbar;
+const styles = react_native_1.StyleSheet.create({
+    outer: {
+        width: '100%',
+        position: 'absolute',
+    },
+    wrap: {
+        paddingVertical: 14,
+        paddingHorizontal: 16,
+        marginHorizontal: 16,
+        backgroundColor: '#1E293B',
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderRadius: 10,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.15,
+        shadowRadius: 6,
+        elevation: 4,
+    },
+    iconWrap: {
+        marginRight: 10,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    message: {
+        color: '#F8FAFC',
+        fontSize: 14,
+        fontWeight: '600',
+        flexShrink: 1,
+    },
+});

package/lib/constants.d.ts

@@ -0,0 +1,7 @@
+import { SnackbarDuration } from './types';
+export declare const DURATION_SHORT = 1500;
+export declare const DURATION_MEDIUM = 2200;
+export declare const DURATION_LONG = 3200;
+export declare const DEFAULT_HEIGHT_LIMIT = 90;
+export declare const TRANSITION_SPEED = 200;
+export declare const getDurationMs: (duration?: SnackbarDuration) => number;

package/lib/constants.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDurationMs = exports.TRANSITION_SPEED = exports.DEFAULT_HEIGHT_LIMIT = exports.DURATION_LONG = exports.DURATION_MEDIUM = exports.DURATION_SHORT = void 0;
+exports.DURATION_SHORT = 1500;
+exports.DURATION_MEDIUM = 2200;
+exports.DURATION_LONG = 3200;
+exports.DEFAULT_HEIGHT_LIMIT = 90;
+exports.TRANSITION_SPEED = 200;
+const getDurationMs = (duration) => {
+    switch (duration) {
+        case 'long':
+            return exports.DURATION_LONG;
+        case 'medium':
+            return exports.DURATION_MEDIUM;
+        case 'short':
+        default:
+            return exports.DURATION_SHORT;
+    }
+};
+exports.getDurationMs = getDurationMs;

package/lib/index.d.ts

@@ -0,0 +1,5 @@
+export { BeautifulSnackbar } from './components/BeautifulSnackbar';
+export { snackbar, SnackbarManager, SnackbarItem } from './manager';
+export { useSnackbarAnimation } from './useSnackbarAnimation';
+export type { SnackbarOptions, SnackbarDuration, SnackbarPosition, SnackbarAnimationType } from './types';
+export type { BeautifulSnackbarProps } from './components/BeautifulSnackbar';

package/lib/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSnackbarAnimation = exports.SnackbarItem = exports.SnackbarManager = exports.snackbar = exports.BeautifulSnackbar = void 0;
+var BeautifulSnackbar_1 = require("./components/BeautifulSnackbar");
+Object.defineProperty(exports, "BeautifulSnackbar", { enumerable: true, get: function () { return BeautifulSnackbar_1.BeautifulSnackbar; } });
+var manager_1 = require("./manager");
+Object.defineProperty(exports, "snackbar", { enumerable: true, get: function () { return manager_1.snackbar; } });
+Object.defineProperty(exports, "SnackbarManager", { enumerable: true, get: function () { return manager_1.SnackbarManager; } });
+Object.defineProperty(exports, "SnackbarItem", { enumerable: true, get: function () { return manager_1.SnackbarItem; } });
+var useSnackbarAnimation_1 = require("./useSnackbarAnimation");
+Object.defineProperty(exports, "useSnackbarAnimation", { enumerable: true, get: function () { return useSnackbarAnimation_1.useSnackbarAnimation; } });

package/lib/manager.d.ts

@@ -0,0 +1,58 @@
+import { ViewStyle, TextStyle } from 'react-native';
+import React from 'react';
+import { SnackbarOptions, SnackbarDuration, SnackbarPosition, SnackbarAnimationType } from './types';
+export interface SnackbarConfig {
+    avoidKeyboard: boolean;
+    position: SnackbarPosition;
+    animationType: SnackbarAnimationType;
+    bottomOffset: number;
+    topOffset: number;
+}
+export declare class SnackbarItem {
+    id: string;
+    message: string;
+    messageStyle?: TextStyle;
+    containerStyle?: ViewStyle;
+    actionLabel?: string;
+    actionStyle?: TextStyle;
+    onActionPress?: () => void;
+    icon?: React.ReactNode;
+    duration: SnackbarDuration;
+    position?: SnackbarPosition;
+    animationType?: SnackbarAnimationType;
+    bottomOffset?: number;
+    topOffset?: number;
+    dismissOnNavigation: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    actionColor?: string;
+    type?: string;
+    data?: any;
+    onShowRequested: () => void;
+    onHideRequested: () => void;
+    onDismissRequested?: () => void;
+    constructor(options: SnackbarOptions, id: string);
+}
+export declare class SnackbarManager {
+    private stateListener?;
+    private configListeners;
+    private activeItems;
+    private counter;
+    private config;
+    registerListener(listener: (items: SnackbarItem[]) => void): void;
+    unregisterListener(): void;
+    registerConfigListener(listener: (config: SnackbarConfig) => void): () => void;
+    setAvoidKeyboard(val: boolean): void;
+    getAvoidKeyboard(): boolean;
+    setPosition(val: SnackbarPosition): void;
+    getPosition(): SnackbarPosition;
+    setAnimationType(val: SnackbarAnimationType): void;
+    getAnimationType(): SnackbarAnimationType;
+    setBottomOffset(val: number): void;
+    getBottomOffset(): number;
+    setTopOffset(val: number): void;
+    getTopOffset(): number;
+    show(options: SnackbarOptions): SnackbarItem;
+    dismiss(item: SnackbarItem): void;
+}
+export declare const snackbar: SnackbarManager;