@sky-mavis/design-system 2.1.2-alpha

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { IntentType } from '../../commons/types';
+declare type InputHtmlProps = React.InputHTMLAttributes<HTMLInputElement>;
+interface SwitchProps extends InputHtmlProps {
+    /**
+     * Visual intent color apply to Switch element.
+     */
+    intent?: IntentType;
+    /**
+     * Text label for the Switch.
+     */
+    label?: React.ReactNode;
+}
+export declare const Switch: React.FC<SwitchProps>;
+export {};

package/dist/components/switch/Switch.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const types_1 = require("../../commons/types");
+const intent_1 = require("../../utils/intent");
+exports.Switch = react_1.forwardRef((props, ref) => {
+    const { label, intent = types_1.IntentType.Primary, id, disabled, className } = props, htmlProps = __rest(props, ["label", "intent", "id", "disabled", "className"]);
+    return (react_1.default.createElement("label", { className: classnames_1.default('ds-switch', className), htmlFor: id },
+        react_1.default.createElement("input", Object.assign({ ref: ref, className: "ds-switch-input", type: "checkbox", id: id, disabled: disabled }, htmlProps)),
+        react_1.default.createElement("span", { className: classnames_1.default('ds-switch-mask', intent_1.getIntentClassname(intent)) },
+            react_1.default.createElement("span", { className: "ds-switch-transition" },
+                react_1.default.createElement("span", { className: "ds-switch-mask-icon" }))),
+        react_1.default.createElement("span", { className: "ds-switch-label" }, label)));
+});
+exports.Switch.displayName = 'Switch';

package/dist/components/tabs/Tab.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TabId } from './Tabs';
+interface Props {
+    /**
+     * Id of this Tab, can be string or number.
+     */
+    id: TabId;
+    /**
+     * Should this Tab be selectable.
+     */
+    disabled?: boolean;
+    /**
+     * Title of the Tab appears on Tab navigator bar.
+     */
+    title: string;
+    /**
+     * Content of the Tab shown when it is selected.
+     */
+    children?: React.ReactNode;
+}
+export declare const Tab: React.FC<Props>;
+export declare const isTabElement: (object: any) => object is React.ReactElement<Props, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export {};

package/dist/components/tabs/Tab.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isTabElement = exports.Tab = void 0;
+const react_1 = __importDefault(require("react"));
+exports.Tab = props => react_1.default.createElement("div", null, props.children);
+exports.isTabElement = (object) => {
+    return react_1.default.isValidElement(object) && object.type === exports.Tab;
+};

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare type TabId = string | number;
+interface Props {
+    /**
+     * Active Tab id in the tab. This is used in controlled mode.
+     */
+    activeTabId?: TabId;
+    /**
+     * Trigger when user perform a Tab switching action.
+     */
+    onChange?: (id: TabId) => void;
+    /**
+     * Default tab when component mounted. This is used in uncontrolled mode.
+     */
+    defaultTabId?: TabId;
+    /**
+     * Should Tab apply vertical styles.
+     */
+    vertical?: boolean;
+    /**
+     * CSS width property is applied for all Tab.
+     */
+    fixedTabWidth?: string;
+}
+export declare const Tabs: React.FC<Props>;
+export {};

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.Tabs = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const Tab_1 = require("./Tab");
+exports.Tabs = props => {
+    var _a;
+    const { onChange, children, activeTabId: activeTabIdProps, defaultTabId: defaultTabIdProps, vertical, fixedTabWidth, } = props;
+    const tabs = react_1.default.Children.toArray(children).filter(Tab_1.isTabElement);
+    const enableTabs = tabs.filter(tab => !tab.props.disabled);
+    const firstEnableTabId = enableTabs[0] ? enableTabs[0].props.id : undefined;
+    const defaultTabId = onChange && activeTabIdProps ? activeTabIdProps : defaultTabIdProps || firstEnableTabId;
+    let [activeTabId, setActiveTabId] = react_1.useState(defaultTabId);
+    activeTabId = onChange && activeTabIdProps ? activeTabIdProps : activeTabId;
+    const tabWidthStyle = fixedTabWidth ? { width: fixedTabWidth } : {};
+    // WHY: Sliding underline style for selected Tab
+    const [underlineStyle, setUnderlineStyle] = react_1.useState();
+    const activeLIRef = react_1.useRef(null);
+    react_1.useEffect(() => {
+        const activeLIElement = activeLIRef.current;
+        if (activeLIElement) {
+            const newUnderlineStyle = !vertical
+                ? {
+                    left: activeLIElement.offsetLeft,
+                    width: activeLIElement.offsetWidth,
+                }
+                : {
+                    top: activeLIElement.offsetTop,
+                    height: activeLIElement.offsetHeight,
+                };
+            setUnderlineStyle(newUnderlineStyle);
+        }
+    }, [activeTabId]);
+    const onClickTab = (tabId) => (event) => {
+        event.preventDefault();
+        if (onChange && props.activeTabId) {
+            onChange(tabId);
+        }
+        else {
+            setActiveTabId(tabId);
+        }
+    };
+    return (react_1.default.createElement("div", { className: classnames_1.default('ds-tabs', {
+            vertical: vertical === true,
+        }) },
+        react_1.default.createElement("div", { className: "ds-tabs-bar-container" },
+            react_1.default.createElement("ul", { className: "ds-tab-list", role: "tablist" }, tabs.map(({ props }) => (react_1.default.createElement("li", { ref: props.id === activeTabId ? activeLIRef : null, tabIndex: 0, key: props.id, onClick: props.disabled !== true ? onClickTab(props.id) : undefined, title: props.title, className: classnames_1.default('ds-tab', {
+                    active: props.id === activeTabId,
+                    disabled: props.disabled === true,
+                }), style: tabWidthStyle }, props.title)))),
+            react_1.default.createElement("div", { className: "ds-tab-active-underline", style: underlineStyle })),
+        react_1.default.createElement("div", null, (_a = enableTabs.find(tab => tab.props.id === activeTabId)) === null || _a === void 0 ? void 0 : _a.props.children)));
+};

package/dist/components/tag/Tag.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { IntentType } from '../../commons/types';
+interface Props {
+    /**
+     * A space-delimited list of class names to pass along to a child element.
+     */
+    className?: string;
+    /**
+     * Background color of the Tag, IntentType can also be passed.
+     */
+    color?: IntentType | string;
+    /**
+     * Should Tag apply large styles.
+     */
+    large?: boolean;
+    /**
+     * Should Tag have the close button on right side. Clicking on this also
+     * trigger onRemove.
+     */
+    removable?: boolean;
+    /**
+     * Trigger when clicking close button on right side. Only available when removable=true.
+     */
+    onRemove?: React.MouseEventHandler;
+    /**
+     * Should Tag apply interactive styles.
+     */
+    interactive?: boolean;
+    /**
+     * Trigger when clicking on Tag, only when interactive=true
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * Should Tag apply minimal styles.
+     */
+    minimal?: boolean;
+    /**
+     * Leftmost icon of Tag.
+     * Can be customized SvgIcon component or any icon from Sky Mavis icon pack.
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Rightmost icon of Tag.
+     * Can be customized SvgIcon component or any icon from Sky Mavis icon pack.
+     */
+    rightIcon?: React.ReactNode;
+}
+export declare const Tag: React.FC<Props>;
+export {};

package/dist/components/tag/Tag.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const types_1 = require("../../commons/types");
+const Cross_1 = require("../../icons/Cross");
+const intent_1 = require("../../utils/intent");
+exports.Tag = props => {
+    const { large, leftIcon, rightIcon, interactive, minimal, removable, color, className } = props;
+    const intentClass = intent_1.getIntentClassname(color);
+    const isIntent = intent_1.isIntentDefined(color);
+    return (react_1.default.createElement("span", { style: {
+            background: color,
+            color: isIntent || color === undefined ? undefined : 'var(--color-white)',
+        }, className: classnames_1.default('ds-tag', intentClass, className, {
+            minimal: minimal === true,
+            interactive: interactive === true && (color === types_1.IntentType.Primary || !color),
+            large: large === true,
+            removable,
+        }) },
+        leftIcon ? react_1.default.createElement("span", { className: "left-icon" }, leftIcon) : undefined,
+        props.children,
+        rightIcon ? react_1.default.createElement("span", { className: "right-icon" }, rightIcon) : undefined,
+        removable && (react_1.default.createElement("span", { className: "remove" },
+            react_1.default.createElement(Cross_1.CrossIcon, { color: "currentColor" })))));
+};

package/dist/components/toast/Toast.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { IntentType } from '../../commons/types';
+import { SvgIconProps } from '../../icons/svg-icon/SvgIcon';
+export interface ToastProps {
+    /**
+     * The visual intent colour applies to Toast background, title and icon.
+     */
+    intent?: IntentType;
+    /**
+     * Content of title.
+     */
+    title?: string;
+    /**
+     * Icon of the Toast. Can use customized SvgIcon or any icon from Sky
+     * Mavis icon pack.
+     */
+    icon?: React.FC<SvgIconProps>;
+    /**
+     * Controls are Toast display or not.
+     */
+    open?: boolean;
+    /**
+     * Milliseconds to wait before automatically dismissing toast.
+     */
+    autoHideDuration?: number;
+    /**
+     * A space-delimited list of class names to pass along to a child element.
+     */
+    className?: string;
+    /**
+     * Callback invoked when the toast is dismissed, either by the user or by the timeout.
+     */
+    onDismiss?: (e?: React.SyntheticEvent) => void;
+    /**
+     * Controls is Close button display or not.
+     */
+    userDismissable?: boolean;
+}
+export declare const Toast: React.FC<ToastProps>;

package/dist/components/toast/Toast.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.Toast = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const Cross_1 = require("../../icons/Cross");
+const intent_1 = require("../../utils/intent");
+// TODO: implement resume and pause autoDismissDuration when hover Toast
+exports.Toast = props => {
+    const { children, intent, title, icon: Icon, open = false, autoHideDuration, className, onDismiss, userDismissable = true, } = props;
+    const intentClass = intent_1.getIntentClassname(intent);
+    const handleClose = () => {
+        if (!!onDismiss) {
+            onDismiss();
+        }
+    };
+    const dismissRef = react_1.useRef();
+    dismissRef.current = onDismiss;
+    react_1.useEffect(() => {
+        if (!open || !onDismiss || !autoHideDuration) {
+            return;
+        }
+        const idTimer = setTimeout(() => dismissRef.current && dismissRef.current(), autoHideDuration);
+        return () => clearTimeout(idTimer);
+    }, [open, autoHideDuration]);
+    if (!open) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: classnames_1.default('ds-toast', intentClass, className) },
+        Icon && react_1.default.createElement(Icon, { size: 40, className: "ds-toast-icon" }),
+        react_1.default.createElement("div", { className: "ds-toast-content" },
+            title && react_1.default.createElement("div", { className: "ds-toast-title" }, title),
+            children),
+        userDismissable && (react_1.default.createElement("span", { onClick: handleClose, className: "ds-toast-close" },
+            react_1.default.createElement(Cross_1.CrossIcon, { size: 24, className: "ds-toast-close-icon" })))));
+};

package/dist/components/toast/ToastContainer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ToastPlacement, ToastType } from './toastTypes';
+export interface ToastContainerProps {
+    placement: ToastPlacement;
+    toasts: ToastType[];
+    onRemoveToast: (id: string) => void;
+}
+export declare const ToastContainer: React.FC<ToastContainerProps>;

package/dist/components/toast/ToastContainer.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastContainer = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const react_transition_group_1 = require("react-transition-group");
+const Toast_1 = require("./Toast");
+exports.ToastContainer = props => {
+    const { placement, toasts, onRemoveToast } = props;
+    const reversedToasts = [...toasts].reverse();
+    const dismissWrapper = (toast) => (e) => {
+        onRemoveToast(toast.id);
+        !!toast.onDismiss && toast.onDismiss(e, toast);
+    };
+    return (react_1.default.createElement("div", { className: classnames_1.default('ds-toast-container', `ds-place-${placement}`) },
+        react_1.default.createElement(react_transition_group_1.TransitionGroup, { component: null }, reversedToasts
+            .filter(toast => {
+            return toast.placement === placement;
+        })
+            .map(toast => (react_1.default.createElement(react_transition_group_1.CSSTransition, { timeout: 500, classNames: "ds-toast-transition", key: toast.id },
+            react_1.default.createElement(Toast_1.Toast, { key: toast.id, intent: toast.intent, title: toast.title, icon: toast.icon, open: true, autoHideDuration: toast.autoHideDuration, className: toast.className, onDismiss: dismissWrapper(toast), userDismissable: toast.userDismissable }, toast.content)))))));
+};

package/dist/components/toast/ToastContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ShowToastOption } from './toastTypes';
+declare type ShowToastFuncType = (content: React.ReactNode, option?: ShowToastOption) => void;
+export interface ToastContextType {
+    showToast: ShowToastFuncType;
+    removeToast: (id: string) => void;
+}
+export declare const ToastContext: React.Context<ToastContextType>;
+export {};

package/dist/components/toast/ToastContext.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastContext = void 0;
+const react_1 = __importDefault(require("react"));
+const noop = () => { };
+exports.ToastContext = react_1.default.createContext({
+    showToast: noop,
+    removeToast: noop,
+});

package/dist/components/toast/ToastProvider.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ToastPlacement } from './toastTypes';
+export interface ToastProviderProps {
+    /**
+     * Position of Toast within ToastProvider.
+     */
+    placement?: ToastPlacement;
+    /**
+     * Milliseconds to wait before automatically dismissing toast.
+     */
+    defaultAutoHideDuration?: number;
+    /**
+     * Maximum active toasts.
+     */
+    maxActiveToast?: number;
+}
+export declare const ToastProvider: React.FC<ToastProviderProps>;

package/dist/components/toast/ToastProvider.js

@@ -0,0 +1,79 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastProvider = void 0;
+const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const generateUEID_1 = require("../../utils/generateUEID");
+const ToastContainer_1 = require("./ToastContainer");
+const ToastContext_1 = require("./ToastContext");
+const toastTypes_1 = require("./toastTypes");
+const canUseDOM = !!(typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement);
+exports.ToastProvider = props => {
+    const { children, placement = toastTypes_1.ToastPlacement.TopCenter, defaultAutoHideDuration = 5000, maxActiveToast = 3, } = props;
+    const [toasts, setToasts] = react_1.useState([]);
+    const showToast = (content, option = {}) => {
+        const id = generateUEID_1.generateUEID();
+        const { autoHideDuration = defaultAutoHideDuration } = option, otherOption = __rest(option, ["autoHideDuration"]);
+        const newToast = Object.assign({ id,
+            content,
+            placement,
+            autoHideDuration }, otherOption);
+        if (toasts.length < maxActiveToast) {
+            setToasts([...toasts, newToast]);
+        }
+        else {
+            const removedElement = toasts.shift();
+            if (!!(removedElement === null || removedElement === void 0 ? void 0 : removedElement.onDismiss)) {
+                removedElement.onDismiss();
+            }
+            setToasts([...toasts, newToast]);
+        }
+    };
+    const removeToast = (id) => {
+        const newToasts = toasts.filter((toast) => toast.id !== id);
+        setToasts(newToasts);
+    };
+    const handleRemoveToast = (id) => {
+        removeToast(id);
+    };
+    const providerValue = {
+        showToast,
+        removeToast,
+    };
+    return (react_1.default.createElement(ToastContext_1.ToastContext.Provider, { value: providerValue },
+        children,
+        canUseDOM &&
+            react_dom_1.createPortal(react_1.default.createElement(ToastContainer_1.ToastContainer, { key: `toast-container`, placement: placement, toasts: toasts, onRemoveToast: handleRemoveToast }), document.body)));
+};

package/dist/components/toast/toastTypes.d.ts

@@ -0,0 +1,31 @@
+import { IntentType } from '../../commons/types';
+import { SvgIconProps } from '../../icons/svg-icon/SvgIcon';
+export declare enum ToastPlacement {
+    TopLeft = "top-left",
+    TopCenter = "top-center",
+    TopRight = "top-right",
+    BottomLeft = "bottom-left",
+    BottomCenter = "bottom-center",
+    BottomRight = "bottom-right"
+}
+export interface ToastType {
+    id: string;
+    content: React.ReactNode;
+    placement: ToastPlacement;
+    intent?: IntentType;
+    title?: string;
+    icon?: React.FC<SvgIconProps>;
+    autoHideDuration?: number;
+    onDismiss?: (e?: React.SyntheticEvent, toast?: ToastType) => void;
+    userDismissable?: boolean;
+    className?: string;
+}
+export interface ShowToastOption {
+    intent?: IntentType;
+    title?: string;
+    icon?: React.FC<SvgIconProps>;
+    autoHideDuration?: number;
+    onDismiss?: (e?: React.SyntheticEvent, toast?: ToastType) => void;
+    userDismissable?: boolean;
+    className?: string;
+}

package/dist/components/toast/toastTypes.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastPlacement = void 0;
+var ToastPlacement;
+(function (ToastPlacement) {
+    ToastPlacement["TopLeft"] = "top-left";
+    ToastPlacement["TopCenter"] = "top-center";
+    ToastPlacement["TopRight"] = "top-right";
+    ToastPlacement["BottomLeft"] = "bottom-left";
+    ToastPlacement["BottomCenter"] = "bottom-center";
+    ToastPlacement["BottomRight"] = "bottom-right";
+})(ToastPlacement = exports.ToastPlacement || (exports.ToastPlacement = {}));

package/dist/components/toast/useToast.d.ts

@@ -0,0 +1,10 @@
+import { ShowToastOption } from './toastTypes';
+export declare const useToast: () => {
+    showBasic: (content: React.ReactNode, option?: ShowToastOption) => void;
+    showInfo: (content: React.ReactNode, option?: ShowToastOption) => void;
+    showSuccess: (content: React.ReactNode, option?: ShowToastOption) => void;
+    showDanger: (content: React.ReactNode, option?: ShowToastOption) => void;
+    showWarning: (content: React.ReactNode, option?: ShowToastOption) => void;
+    showToast: (content: import("react").ReactNode, option?: ShowToastOption | undefined) => void;
+    removeToast: (id: string) => void;
+};

package/dist/components/toast/useToast.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToast = void 0;
+const react_1 = require("react");
+const types_1 = require("../../commons/types");
+const FilledAlertCircle_1 = require("../../icons/FilledAlertCircle");
+const FilledCircleTick_1 = require("../../icons/FilledCircleTick");
+const FilledCrossCircle_1 = require("../../icons/FilledCrossCircle");
+const FilledInfo_1 = require("../../icons/FilledInfo");
+const ToastContext_1 = require("./ToastContext");
+exports.useToast = () => {
+    const context = react_1.useContext(ToastContext_1.ToastContext);
+    if (!context) {
+        throw Error('`useToast` hook must be called from a descendent of the `ToastProvider`.');
+    }
+    const { showToast } = context;
+    const showBasic = (content, option = {}) => {
+        const messageOption = Object.assign(Object.assign({ icon: FilledInfo_1.FilledInfoIcon }, option), { intent: undefined });
+        showToast(content, messageOption);
+    };
+    const showInfo = (content, option = {}) => {
+        const messageOption = Object.assign(Object.assign({ icon: FilledInfo_1.FilledInfoIcon }, option), { intent: types_1.IntentType.Primary });
+        showToast(content, messageOption);
+    };
+    const showSuccess = (content, option = {}) => {
+        const messageOption = Object.assign(Object.assign({ icon: FilledCircleTick_1.FilledCircleTickIcon }, option), { intent: types_1.IntentType.Success });
+        showToast(content, messageOption);
+    };
+    const showDanger = (content, option = {}) => {
+        const messageOption = Object.assign(Object.assign({ icon: FilledCrossCircle_1.FilledCrossCircleIcon }, option), { intent: types_1.IntentType.Danger });
+        showToast(content, messageOption);
+    };
+    const showWarning = (content, option = {}) => {
+        const messageOption = Object.assign(Object.assign({ icon: FilledAlertCircle_1.FilledAlertCircleIcon }, option), { intent: types_1.IntentType.Warning });
+        showToast(content, messageOption);
+    };
+    return Object.assign(Object.assign({}, context), { showBasic,
+        showInfo,
+        showSuccess,
+        showDanger,
+        showWarning });
+};