UNPKG

@trail-ui/react

Version:
109 lines (106 loc) 4.11 kB
"use strict"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/toast/index.ts var toast_exports = {}; __export(toast_exports, { ToastNotification: () => ToastNotification }); module.exports = __toCommonJS(toast_exports); // src/toast/toast.tsx var import_react = require("react"); var import_toast = require("@react-aria/toast"); var import_toast2 = require("@react-stately/toast"); var import_icons = require("@trail-ui/icons"); var import_jsx_runtime = require("react/jsx-runtime"); function ToastNotification({ children, ...props }) { let state = (0, import_toast2.useToastState)({ maxVisibleToasts: 3 }); return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ children(state), state.visibleToasts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastRegion, { ...props, state }) ] }); } function ToastRegion({ state, ...props }) { let ref = (0, import_react.useRef)(null); let { regionProps } = (0, import_toast.useToastRegion)(props, state, ref); return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "div", { ...regionProps, ref, className: "toast-region fixed bottom-4 flex w-full flex-col items-center gap-2", children: state.visibleToasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Toast, { toast, variant: props.variant }, toast.key)) } ); } function Toast({ variant, ...props }) { let color; let borderColor; let flagIcon; let bgColor; switch (variant) { case "default": color = "text-neutral-900"; borderColor = "border-neutral-300"; flagIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.SettingsIcon, { height: 24, width: 24 }); bgColor = "bg-neutral-50"; break; case "success": color = "text-green-950"; borderColor = "border-green-950"; flagIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckCircleIcon, { height: 24, width: 24 }); bgColor = "bg-green-50"; break; case "error": color = "text-red-950"; borderColor = "border-red-950"; flagIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ErrorIcon, { height: 24, width: 24 }); bgColor = "bg-red-50"; break; case "warning": color = "text-yellow-950"; borderColor = "border-yellow-950"; flagIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.WarningIcon, { height: 24, width: 24 }); bgColor = "bg-yellow-50"; break; case "info": color = "text-blue-950"; borderColor = "border-blue-950"; flagIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.InfoIcon, { height: 24, width: 24 }); bgColor = "bg-blue-50"; break; default: break; } return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( "div", { className: `toast ${bgColor} ${color} ${borderColor} shadow-medium flex h-14 w-[370px] items-center rounded border-l-4 px-4 text-base`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-4 font-semibold", children: [ flagIcon, props.toast.content ] }) }) } ); } // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { ToastNotification });