koval-ui/dist/src/lib/Toast/Toast.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsx as e, jsxs as s } from "react/jsx-runtime";
import { forwardRef as A, useEffect as B } from "react";
import x from "classnames";
import { useLocalTheme as C, useRootTheme as S } from "css-vars-hook";
import { Portal as b } from "../../internal/Portal/Portal.js";
import { IconError as j } from "../../internal/Icons/IconError.js";
import { IconClose as k } from "../../internal/Icons/IconClose.js";
import { IconWarning as y } from "../../internal/Icons/IconWarning.js";
import { IconSuccess as E } from "../../internal/Icons/IconSuccess.js";
import { IconNotification as L } from "../../internal/Icons/IconNotification.js";
import { useInterval as O } from "../../internal/hooks/useInterval.js";
import { useInternalRef as P } from "../../internal/hooks/useInternalRef.js";
import { SlideBottom as W } from "../../internal/Transitions/SlideBottom.js";
import { ActionButton as $ } from "../../internal/Actions/ActionButton.js";
import { ActionsTree as q } from "../../internal/Actions/ActionsTree.js";
import { useToastState as z } from "./useToastState.js";
import o from "./Toast.module.css.js";
const D = A(
  ({
    children: F,
    className: p,
    actions: u = [],
    icon: c,
    variant: r = "default",
    title: h,
    body: i,
    onToggle: n = () => {
    },
    id: m,
    autoClose: l = null,
    closeLabel: N = "Close",
    ...v
  }, I) => {
    const { isOpen: t, closeToast: a } = z(m), { LocalRoot: T } = C(), { getTheme: w } = S(), R = c || {
      default: L,
      error: j,
      success: E,
      warning: y
    }[r];
    B(() => {
      n(t);
    }, [t, n]);
    const f = typeof l == "number", g = f ? l * 1e3 : null;
    O({ callback: a, interval: g, condition: f });
    const d = P(I);
    return /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(W, { show: t, nodeRef: d, children: /* @__PURE__ */ e(T, { className: o.provider, theme: w(), children: /* @__PURE__ */ s(
      "div",
      {
        ...v,
        className: x(
          o.toast,
          {
            [o.success]: r === "success",
            [o.warning]: r === "warning",
            [o.error]: r === "error"
            /* error */
          },
          p
        ),
        ref: d,
        children: [
          /* @__PURE__ */ s("div", { className: o.content, children: [
            /* @__PURE__ */ e("div", { className: o.left, children: /* @__PURE__ */ e(R, { className: o.icon }) }),
            /* @__PURE__ */ s("div", { className: o.right, children: [
              /* @__PURE__ */ e("div", { className: o.title, children: h }),
              i && /* @__PURE__ */ e("div", { className: o.body, children: i })
            ] })
          ] }),
          /* @__PURE__ */ s("footer", { className: o.actions, children: [
            /* @__PURE__ */ e(
              q,
              {
                actions: u,
                classNameAction: o.actionButton
              }
            ),
            /* @__PURE__ */ e("div", { className: o.row, children: /* @__PURE__ */ e(
              $,
              {
                className: o.actionButton,
                onClick: a,
                icon: k,
                title: N
              }
            ) }, `${m}-close`)
          ] })
        ]
      }
    ) }) }) });
  }
);
D.displayName = "Toast";
export {
  D as Toast
};
//# sourceMappingURL=Toast.js.map