@unbxd-ui/unbxd-react-components 0.2.145 → 0.2.146

package/components/ToastNotification/ToastNotificationWrapper.stories.js

@@ -0,0 +1,554 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.RealWorldExamples = exports.Positions = exports.PerformanceTest = exports.MultipleToasts = exports.Interactive = exports.Default = exports.AutoCloseTiming = exports.AllPositions = exports.AccessibilityDemo = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ToastNotificationWrapper = _interopRequireWildcard(require("./ToastNotificationWrapper"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var meta = {
+  title: 'Components/ToastNotification',
+  component: _ToastNotificationWrapper["default"],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'A flexible toast notification system with support for different types, auto-close functionality, progress indicators, and positioning. Position is controlled through function arguments, not component props.'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    // No position prop since it's handled through function arguments
+  }
+};
+var _default = exports["default"] = meta; // Wrapper component to demonstrate functionality
+var ToastDemo = function ToastDemo(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      padding: '2rem'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_ToastNotificationWrapper["default"], null), children);
+};
+
+// Basic usage
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(ToastDemo, null, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '1rem',
+        flexWrap: 'wrap'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.successToast)('Operation completed successfully!');
+      }
+    }, "Success Toast"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.errorToast)('Something went wrong!');
+      }
+    }, "Error Toast"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.warningToast)('Please check your input');
+      }
+    }, "Warning Toast"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.infoToast)('Here is some useful information');
+      }
+    }, "Info Toast")));
+  }
+};
+
+// Position demonstrations
+var Positions = exports.Positions = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '2rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_ToastNotificationWrapper["default"], null), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginBottom: '2rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h3", null, "Toast Positions"), /*#__PURE__*/_react["default"].createElement("p", null, "Click buttons to see toasts appear in different corners using toastPosition option:"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.resetToast)();
+      },
+      style: {
+        marginBottom: '1rem'
+      }
+    }, "Clear All")), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '2rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", null, "Top Positions"), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '1rem',
+        flexWrap: 'wrap',
+        marginBottom: '1rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.successToast)('Top-left success!', {
+          toastPosition: 'top-left'
+        });
+      }
+    }, "Top Left"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.errorToast)('Top-right error!', {
+          toastPosition: 'top-right'
+        });
+      }
+    }, "Top Right"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h4", null, "Bottom Positions"), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '1rem',
+        flexWrap: 'wrap'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.warningToast)('Bottom-left warning!', {
+          toastPosition: 'bottom-left'
+        });
+      }
+    }, "Bottom Left"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.infoToast)('Bottom-right info!', {
+          toastPosition: 'bottom-right'
+        });
+      }
+    }, "Bottom Right")))));
+  }
+};
+
+// All four positions at once
+var AllPositions = exports.AllPositions = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '2rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_ToastNotificationWrapper["default"], null), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginBottom: '2rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h3", null, "All Positions Demo"), /*#__PURE__*/_react["default"].createElement("p", null, "Click the buttons below to see toasts appear in all four corners simultaneously:")), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '1rem',
+        flexWrap: 'wrap'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        (0, _ToastNotificationWrapper.successToast)('Top-left success!', {
+          toastPosition: 'top-left'
+        });
+        (0, _ToastNotificationWrapper.successToast)('Top-right success!', {
+          toastPosition: 'top-right'
+        });
+        (0, _ToastNotificationWrapper.successToast)('Bottom-left success!', {
+          toastPosition: 'bottom-left'
+        });
+        (0, _ToastNotificationWrapper.successToast)('Bottom-right success!', {
+          toastPosition: 'bottom-right'
+        });
+      }
+    }, "Success in All Corners"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        (0, _ToastNotificationWrapper.errorToast)('Top-left error!', {
+          toastPosition: 'top-left'
+        });
+        (0, _ToastNotificationWrapper.warningToast)('Top-right warning!', {
+          toastPosition: 'top-right'
+        });
+        (0, _ToastNotificationWrapper.infoToast)('Bottom-left info!', {
+          toastPosition: 'bottom-left'
+        });
+        (0, _ToastNotificationWrapper.errorToast)('Bottom-right error!', {
+          toastPosition: 'bottom-right'
+        });
+      }
+    }, "Mixed Types All Corners"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.resetToast)();
+      }
+    }, "Clear All Toasts")));
+  }
+};
+
+// Different auto-close times
+var AutoCloseTiming = exports.AutoCloseTiming = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(ToastDemo, null, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '1rem',
+        flexWrap: 'wrap'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.successToast)('Quick toast (2 seconds)', {
+          fadeOutTime: 2000
+        });
+      }
+    }, "2 Second Toast"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.infoToast)('Standard toast (6 seconds)', {
+          fadeOutTime: 6000
+        });
+      }
+    }, "6 Second Toast"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.warningToast)('Long toast (10 seconds)', {
+          fadeOutTime: 10000
+        });
+      }
+    }, "10 Second Toast"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.errorToast)('Manual close required', {
+          autoClose: false
+        });
+      }
+    }, "No Auto-Close")));
+  }
+};
+
+// Multiple toasts
+var MultipleToasts = exports.MultipleToasts = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(ToastDemo, null, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '1rem',
+        flexWrap: 'wrap'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        (0, _ToastNotificationWrapper.successToast)('First toast message');
+        setTimeout(function () {
+          return (0, _ToastNotificationWrapper.infoToast)('Second toast message');
+        }, 500);
+        setTimeout(function () {
+          return (0, _ToastNotificationWrapper.warningToast)('Third toast message');
+        }, 1000);
+      }
+    }, "Show Multiple Toasts"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.resetToast)();
+      }
+    }, "Clear All Toasts")));
+  }
+};
+
+// Interactive demo
+var Interactive = exports.Interactive = {
+  render: function render() {
+    var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      message = _useState2[0],
+      setMessage = _useState2[1];
+    var _useState3 = (0, _react.useState)('info'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      toastType = _useState4[0],
+      setToastType = _useState4[1];
+    var _useState5 = (0, _react.useState)(6000),
+      _useState6 = _slicedToArray(_useState5, 2),
+      fadeOutTime = _useState6[0],
+      setFadeOutTime = _useState6[1];
+    var _useState7 = (0, _react.useState)(true),
+      _useState8 = _slicedToArray(_useState7, 2),
+      autoClose = _useState8[0],
+      setAutoClose = _useState8[1];
+    var _useState9 = (0, _react.useState)('bottom-left'),
+      _useState0 = _slicedToArray(_useState9, 2),
+      position = _useState0[0],
+      setPosition = _useState0[1];
+    var showCustomToast = function showCustomToast() {
+      if (!message.trim()) {
+        (0, _ToastNotificationWrapper.errorToast)('Please enter a message');
+        return;
+      }
+      var options = {
+        fadeOutTime: fadeOutTime,
+        autoClose: autoClose,
+        toastPosition: position
+      };
+      switch (toastType) {
+        case 'success':
+          (0, _ToastNotificationWrapper.successToast)(message, options);
+          break;
+        case 'error':
+          (0, _ToastNotificationWrapper.errorToast)(message, options);
+          break;
+        case 'warning':
+          (0, _ToastNotificationWrapper.warningToast)(message, options);
+          break;
+        case 'info':
+          (0, _ToastNotificationWrapper.infoToast)(message, options);
+          break;
+        default:
+          (0, _ToastNotificationWrapper.infoToast)(message, options);
+      }
+      setMessage('');
+    };
+    return /*#__PURE__*/_react["default"].createElement(ToastDemo, null, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        maxWidth: '500px',
+        marginBottom: '2rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h3", null, "Custom Toast Generator"), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginBottom: '1rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("label", {
+      style: {
+        display: 'block',
+        marginBottom: '0.5rem'
+      }
+    }, "Message:"), /*#__PURE__*/_react["default"].createElement("input", {
+      type: "text",
+      value: message,
+      onChange: function onChange(e) {
+        return setMessage(e.target.value);
+      },
+      placeholder: "Enter toast message...",
+      style: {
+        width: '100%',
+        padding: '0.5rem',
+        border: '1px solid #ccc',
+        borderRadius: '4px'
+      },
+      onKeyPress: function onKeyPress(e) {
+        return e.key === 'Enter' && showCustomToast();
+      }
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '1rem',
+        marginBottom: '1rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
+      style: {
+        display: 'block',
+        marginBottom: '0.5rem'
+      }
+    }, "Type:"), /*#__PURE__*/_react["default"].createElement("select", {
+      value: toastType,
+      onChange: function onChange(e) {
+        return setToastType(e.target.value);
+      },
+      style: {
+        width: '100%',
+        padding: '0.5rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("option", {
+      value: "success"
+    }, "Success"), /*#__PURE__*/_react["default"].createElement("option", {
+      value: "error"
+    }, "Error"), /*#__PURE__*/_react["default"].createElement("option", {
+      value: "warning"
+    }, "Warning"), /*#__PURE__*/_react["default"].createElement("option", {
+      value: "info"
+    }, "Info"))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
+      style: {
+        display: 'block',
+        marginBottom: '0.5rem'
+      }
+    }, "Position:"), /*#__PURE__*/_react["default"].createElement("select", {
+      value: position,
+      onChange: function onChange(e) {
+        return setPosition(e.target.value);
+      },
+      style: {
+        width: '100%',
+        padding: '0.5rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("option", {
+      value: "bottom-left"
+    }, "Bottom Left"), /*#__PURE__*/_react["default"].createElement("option", {
+      value: "bottom-right"
+    }, "Bottom Right"), /*#__PURE__*/_react["default"].createElement("option", {
+      value: "top-left"
+    }, "Top Left"), /*#__PURE__*/_react["default"].createElement("option", {
+      value: "top-right"
+    }, "Top Right")))), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '1rem',
+        marginBottom: '1rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
+      style: {
+        display: 'block',
+        marginBottom: '0.5rem'
+      }
+    }, "Duration (ms):"), /*#__PURE__*/_react["default"].createElement("input", {
+      type: "number",
+      value: fadeOutTime,
+      onChange: function onChange(e) {
+        return setFadeOutTime(Number(e.target.value));
+      },
+      min: "1000",
+      max: "30000",
+      step: "1000",
+      style: {
+        width: '100%',
+        padding: '0.5rem'
+      }
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        marginTop: '1.5rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("label", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("input", {
+      type: "checkbox",
+      checked: autoClose,
+      onChange: function onChange(e) {
+        return setAutoClose(e.target.checked);
+      }
+    }), "Auto-close"))), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '1rem'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: showCustomToast,
+      appearance: "primary"
+    }, "Show Toast"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.resetToast)();
+      }
+    }, "Clear All"))));
+  }
+};
+
+// Real-world examples
+var RealWorldExamples = exports.RealWorldExamples = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(ToastDemo, null, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '1rem',
+        flexWrap: 'wrap'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.successToast)('Profile updated successfully!');
+      }
+    }, "Save Profile"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.successToast)('File uploaded successfully!');
+      }
+    }, "Upload File"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.errorToast)('Failed to connect to server. Please try again.');
+      }
+    }, "Network Error"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.errorToast)('Invalid email format. Please check and try again.');
+      }
+    }, "Validation Error"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.warningToast)('You have unsaved changes. Save before leaving?');
+      }
+    }, "Unsaved Changes"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.warningToast)('Your session will expire in 5 minutes.');
+      }
+    }, "Session Warning"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.infoToast)('New features available! Check out the updates.');
+      }
+    }, "Feature Update"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.infoToast)('Maintenance scheduled for tonight at 2 AM EST.');
+      }
+    }, "Maintenance Notice")));
+  }
+};
+
+// Accessibility features
+var AccessibilityDemo = exports.AccessibilityDemo = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(ToastDemo, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h3", null, "Accessibility Features"), /*#__PURE__*/_react["default"].createElement("ul", {
+      style: {
+        marginBottom: '2rem',
+        lineHeight: '1.6'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Keyboard Navigation:"), " Close button is focusable"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Screen Reader:"), " Toast messages are announced"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "High Contrast:"), " Enhanced borders in high contrast mode"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Reduced Motion:"), " Respects motion preferences"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Color & Icons:"), " Uses both color and icons to convey meaning"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Positioning:"), " Toasts can appear in all four corners via function options")), /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '1rem',
+        flexWrap: 'wrap'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.successToast)('Accessible success message with checkmark icon');
+      }
+    }, "Test Success"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.errorToast)('Accessible error message with X icon');
+      }
+    }, "Test Error"))));
+  }
+};
+
+// Performance test
+var PerformanceTest = exports.PerformanceTest = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement(ToastDemo, null, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '1rem',
+        flexWrap: 'wrap'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        // Test duplicate filtering
+        for (var i = 0; i < 5; i++) {
+          (0, _ToastNotificationWrapper.successToast)('Duplicate message test');
+        }
+      }
+    }, "Test Duplicate Filtering"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        var _loop = function _loop(i) {
+          setTimeout(function () {
+            (0, _ToastNotificationWrapper.infoToast)("Rapid fire message ".concat(i + 1));
+          }, i * 200);
+        };
+        // Test rapid fire
+        for (var i = 0; i < 10; i++) {
+          _loop(i);
+        }
+      }
+    }, "Rapid Fire Test"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return (0, _ToastNotificationWrapper.resetToast)();
+      }
+    }, "Clear All")));
+  }
+};

package/components/ToastNotification/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+Object.defineProperty(exports, "errorToast", {
+  enumerable: true,
+  get: function get() {
+    return _ToastNotificationWrapper.errorToast;
+  }
+});
+Object.defineProperty(exports, "infoToast", {
+  enumerable: true,
+  get: function get() {
+    return _ToastNotificationWrapper.infoToast;
+  }
+});
+Object.defineProperty(exports, "resetToast", {
+  enumerable: true,
+  get: function get() {
+    return _ToastNotificationWrapper.resetToast;
+  }
+});
+Object.defineProperty(exports, "successToast", {
+  enumerable: true,
+  get: function get() {
+    return _ToastNotificationWrapper.successToast;
+  }
+});
+Object.defineProperty(exports, "warningToast", {
+  enumerable: true,
+  get: function get() {
+    return _ToastNotificationWrapper.warningToast;
+  }
+});
+var _ToastNotificationWrapper = _interopRequireWildcard(require("./ToastNotificationWrapper"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var _default = exports["default"] = _ToastNotificationWrapper["default"];

package/components/ToastNotification/toastNotificationCore.css

@@ -0,0 +1 @@
+.notification-outer-wrapper{position:fixed;z-index:200;display:flex;flex-direction:column;gap:10px;max-width:400px;width:100%}.notification-outer-wrapper.bottom-left{bottom:20px;left:30px}@media (max-width: 768px){.notification-outer-wrapper.bottom-left{bottom:10px;left:10px;right:10px;max-width:none}}.notification-outer-wrapper.top-left{top:20px;left:30px}@media (max-width: 768px){.notification-outer-wrapper.top-left{top:10px;left:10px;right:10px;max-width:none}}.notification-outer-wrapper.top-right{top:20px;right:30px}@media (max-width: 768px){.notification-outer-wrapper.top-right{top:10px;left:10px;right:10px;max-width:none}}.notification-outer-wrapper.bottom-right{bottom:20px;right:30px}@media (max-width: 768px){.notification-outer-wrapper.bottom-right{bottom:10px;left:10px;right:10px;max-width:none}}.notification-outer-wrapper.top-left,.notification-outer-wrapper.top-right{flex-direction:column-reverse}.notification-outer-wrapper.top-left .toast,.notification-outer-wrapper.bottom-left .toast{animation:slideInFromLeft 0.3s ease-out}.notification-outer-wrapper.top-right .toast,.notification-outer-wrapper.bottom-right .toast{animation:slideInFromRight 0.3s ease-out}.toast{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);background:#fff;margin-bottom:8px;min-height:56px;overflow:hidden}.toast.success{background-color:#E7EFE7}.toast.success .toast-success{color:#10b981}.toast.success .toast-success::before{content:"✓";font-weight:bold}.toast.error{background-color:#FFE7E7}.toast.error .toast-error{color:#ef4444}.toast.error .toast-error::before{content:"✕";font-weight:bold}.toast.warning{background-color:#FFF8E7}.toast.warning .toast-warn{color:#f59e0b}.toast.warning .toast-warn::before{content:"⚠";font-weight:bold}.toast.info{background-color:#E7EDFF}.toast.info .toast-info{color:#3b82f6}.toast.info .toast-info::before{content:"ℹ";font-weight:bold}.message-icon-box{display:flex;align-items:center;gap:12px;flex:1}.message-icon-box .message{color:#17173A;font-size:14px;font-weight:600;line-height:1.4;word-break:break-word;flex:1}.toast-close{background:none;border:none;color:#17173A;cursor:pointer;font-size:18px;padding:4px;margin-left:12px;border-radius:4px;display:flex;align-items:center;justify-content:center;min-width:24px;height:24px}.toast-close:hover{color:#6b7280}.toast-progress{position:absolute;bottom:0;left:0;height:3px;transition:width 0.1s linear}.toast-progress.success{background:#00C48C}.toast-progress.error{background:#F05C5C}.toast-progress.warning{background:#D5A555}.toast-progress.info{background:#3E71F2}@keyframes slideInFromLeft{from{transform:translateX(-100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideInFromRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideOutToLeft{from{transform:translateX(0);opacity:1}to{transform:translateX(-100%);opacity:0}}@keyframes slideOutToRight{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}@media (prefers-contrast: high){.toast{border-width:2px;box-shadow:0 2px 8px rgba(0,0,0,0.3)}}@media (prefers-reduced-motion: reduce){.notification-outer-wrapper .toast{animation:none !important}.toast-progress{transition:none}}