@unbxd-ui/unbxd-react-components 0.2.220 → 0.3.0

package/components/NotificationComponent/NotificationComponent.stories.js

@@ -3,25 +3,177 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SimpleUsage = void 0;
+exports["default"] = exports.WithHTMLContent = exports.WithCloseButton = exports.Warning = exports.Success = exports.MultipleNotifications = exports.LongContent = exports.Info = exports.Error = exports.CustomFadeOut = exports.AutoUpdating = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _NotificationComponent = _interopRequireDefault(require("./NotificationComponent"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var _default = exports["default"] = {
-  title: "NotificationComponent"
-};
-var SimpleUsage = exports.SimpleUsage = function SimpleUsage() {
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
-    appearance: "success",
-    messageId: 1
-  }, "Data loaded successfully"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
-    appearance: "error",
-    messageId: 2
-  }, "Some error occured"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
-    appearance: "warning",
-    messageId: 3
-  }, "Doing this operation will erase all your data"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
-    appearance: "info",
-    messageId: 4
-  }, "The job is scheduled. You will get a notification once it is completed."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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/NotificationComponent',
+  component: _NotificationComponent["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    appearance: {
+      control: 'select',
+      options: ['success', 'error', 'warning', 'info'],
+      description: 'The appearance/type of the notification'
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes for the notification'
+    },
+    messageId: {
+      control: 'number',
+      description: 'Unique ID to represent this particular message'
+    },
+    fadeOut: {
+      control: 'boolean',
+      description: 'Whether the message should fade out automatically'
+    },
+    fadeOutTime: {
+      control: 'number',
+      description: 'Time in milliseconds before the notification fades out'
+    },
+    showClose: {
+      control: 'boolean',
+      description: 'Whether to show a close button on the notification'
+    }
+  }
+};
+var _default = exports["default"] = meta; // Basic notifications for different appearances
+var Success = exports.Success = {
+  args: {
+    children: 'Operation completed successfully!',
+    appearance: 'success'
+  }
+};
+var Error = exports.Error = {
+  args: {
+    children: 'An error occurred while processing your request.',
+    appearance: 'error',
+    fadeOut: false
+  }
+};
+var Warning = exports.Warning = {
+  args: {
+    children: 'Please review your changes before proceeding.',
+    appearance: 'warning',
+    fadeOut: false
+  }
+};
+var Info = exports.Info = {
+  args: {
+    children: 'Your session will expire in 5 minutes.',
+    appearance: 'info',
+    fadeOut: false
+  }
+};
+
+// Notification with custom fadeout time
+var CustomFadeOut = exports.CustomFadeOut = {
+  args: {
+    children: 'This message will fade out in 5 seconds',
+    appearance: 'success',
+    fadeOut: true,
+    fadeOutTime: 5000
+  }
+};
+
+// Notification with close button
+var WithCloseButton = exports.WithCloseButton = {
+  args: {
+    children: 'Click the X button to close this notification',
+    appearance: 'error',
+    showClose: true,
+    fadeOut: false
+  }
+};
+
+// Long content notification
+var LongContent = exports.LongContent = {
+  args: {
+    children: 'This is a notification with a longer content that might wrap to multiple lines. It demonstrates how the component handles larger amounts of text while maintaining its appearance and readability.',
+    appearance: 'info',
+    showClose: true,
+    fadeOut: false
+  }
+};
+
+// Notification with HTML content
+var WithHTMLContent = exports.WithHTMLContent = {
+  args: {
+    children: /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Important Update"), /*#__PURE__*/_react["default"].createElement("p", null, "This notification contains ", /*#__PURE__*/_react["default"].createElement("em", null, "formatted"), " text and ", /*#__PURE__*/_react["default"].createElement("a", {
+      href: "#",
+      style: {
+        color: 'inherit',
+        textDecoration: 'underline'
+      }
+    }, "links"), ".")),
+    appearance: 'info',
+    showClose: true,
+    fadeOut: false
+  }
+};
+
+// Multiple notifications demo
+var MultipleNotifications = exports.MultipleNotifications = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
+      appearance: "success"
+    }, "Success Message"), /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
+      appearance: "error"
+    }, "Error Message"), /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
+      appearance: "warning"
+    }, "Warning Message"), /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
+      appearance: "info"
+    }, "Info Message"));
+  }
+};
+
+// Auto-updating notification demo
+var AutoUpdating = exports.AutoUpdating = {
+  render: function render() {
+    var _React$useState = _react["default"].useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      count = _React$useState2[0],
+      setCount = _React$useState2[1];
+    var _React$useState3 = _react["default"].useState(1),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      messageId = _React$useState4[0],
+      setMessageId = _React$useState4[1];
+    _react["default"].useEffect(function () {
+      var timer = setInterval(function () {
+        setCount(function (prev) {
+          return prev + 1;
+        });
+        setMessageId(function (prev) {
+          return prev + 1;
+        });
+      }, 3000);
+      return function () {
+        return clearInterval(timer);
+      };
+    }, []);
+    return /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
+      appearance: "info",
+      messageId: messageId,
+      fadeOut: true,
+      showClose: true,
+      fadeOutTime: 2500
+    }, "This message has updated ", count, " times");
+  }
 };

package/components/NotificationComponent/index.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _NotificationComponent = _interopRequireDefault(require("./NotificationComponent"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var _default = exports["default"] = _NotificationComponent["default"];

package/components/NotificationComponent/notificationTheme.css

@@ -1 +1 @@
-.RCB-notif{padding:10px;border-radius:3px}.RCB-notif-success{color:#129274;border:solid 1px #2cb191;background-color:#edfffb}.RCB-notif-error{color:#d25b5b;border:solid 1px #e75178;background-color:#fff3f6}.RCB-notif-warning{color:#445870;border:solid 1px #efbf6a;background-color:#fffaf2}.RCB-notif-info{color:#509DB9;border:solid 1px #45b5c1;background-color:#f4fcff}
+.RCB-notif{padding:10px;border-radius:3px}.RCB-notif-success{color:#6DB886;border:solid 1px #6DB886;background-color:#DEF9E7}.RCB-notif-error{color:#CA4646;border:solid 1px #CA4646;background-color:#FFE4E4}.RCB-notif-warning{color:#D5A555;border:solid 1px #D5A555;background-color:#FFF8EC}.RCB-notif-info{color:#3E71F2;border:solid 1px #3E71F2;background-color:#E7EDFF}.notif-wrapper{flex:1;display:flex;align-items:center;justify-content:space-between}

package/components/PageLoader/PageLoader.js

@@ -0,0 +1,84 @@
+"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;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _excluded = ["className", "header", "messages", "showLoader", "messageInterval"];
+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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var PageLoader = function PageLoader(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    header = _ref.header,
+    _ref$messages = _ref.messages,
+    messages = _ref$messages === void 0 ? [] : _ref$messages,
+    _ref$showLoader = _ref.showLoader,
+    showLoader = _ref$showLoader === void 0 ? true : _ref$showLoader,
+    _ref$messageInterval = _ref.messageInterval,
+    messageInterval = _ref$messageInterval === void 0 ? 2500 : _ref$messageInterval,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentMessageIndex = _useState2[0],
+    setCurrentMessageIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fade = _useState4[0],
+    setFade = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if (messages.length > 1) {
+      var interval = setInterval(function () {
+        setFade(false); // Start fade-out
+        setTimeout(function () {
+          setCurrentMessageIndex(function (prev) {
+            return (prev + 1) % messages.length;
+          });
+          setFade(true); // Start fade-in
+        }, 250); // Adjust for smoother transition (half of fade duration)
+      }, messageInterval); // Change message every messageInterval
+      return function () {
+        return clearInterval(interval);
+      };
+    }
+  }, [messages, messageInterval]); // Add messageInterval to dependency array
+
+  if (!showLoader) return null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "loader-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("div", _extends({
+    className: "page-loader ".concat(className)
+  }, restProps), /*#__PURE__*/_react["default"].createElement("img", {
+    src: "https://d3t0v15wul5tya.cloudfront.net/selfserve-ui/prod/assets/images/blueLoader.svg",
+    alt: "Loading..."
+  })), header && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "loader-header"
+  }, header), messages.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "loader-messages ".concat(fade ? "fade-in" : "fade-out")
+  }, messages[currentMessageIndex]));
+};
+PageLoader.propTypes = {
+  /** Additional CSS classes for the loader */
+  className: _propTypes["default"].string,
+  /** Header text to display above the loader */
+  header: _propTypes["default"].string,
+  /** Array of messages that cycle automatically */
+  messages: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  /** Whether to show the loader */
+  showLoader: _propTypes["default"].bool,
+  /** Interval in milliseconds for message changes (default: 2500ms) */
+  messageInterval: _propTypes["default"].number
+};
+var _default = exports["default"] = PageLoader;

package/components/PageLoader/PageLoader.stories.js

@@ -0,0 +1,276 @@
+"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.WithSingleMessage = exports.WithHeader = exports.WithCyclingMessages = exports.SlowCyclingMessages = exports.MinimalLoader = exports.LongLoadingExample = exports.Interactive = exports.FastCyclingMessages = exports.Default = exports.DataLoadingSimulation = exports.CustomizableInterval = exports.CustomStyling = exports.AccessibilityFeatures = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _PageLoader = _interopRequireDefault(require("./PageLoader"));
+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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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/PageLoader',
+  component: _PageLoader["default"],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'A full-screen page loader with animated dots and cycling messages. Shows a wave-scanning animation with optional header and rotating status messages.'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes for the loader'
+    },
+    header: {
+      control: 'text',
+      description: 'Header text to display above the loader'
+    },
+    messages: {
+      control: 'object',
+      description: 'Array of messages that cycle automatically'
+    },
+    showLoader: {
+      control: 'boolean',
+      description: 'Whether to show the loader'
+    },
+    messageInterval: {
+      control: {
+        type: 'range',
+        min: 500,
+        max: 10000,
+        step: 500
+      },
+      description: 'Interval in milliseconds for message changes (default: 2500ms)'
+    }
+  }
+};
+var _default = exports["default"] = meta; // Default story
+var Default = exports.Default = {
+  args: {
+    showLoader: true
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// With header only
+var WithHeader = exports.WithHeader = {
+  args: {
+    showLoader: true,
+    header: "Loading Application"
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// With header and single message
+var WithSingleMessage = exports.WithSingleMessage = {
+  args: {
+    showLoader: true,
+    header: "Processing Request",
+    messages: ["Please wait while we process your request..."]
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// With cycling messages
+var WithCyclingMessages = exports.WithCyclingMessages = {
+  args: {
+    showLoader: true,
+    header: "Loading Dashboard",
+    messages: ["Initializing application...", "Loading user preferences...", "Fetching latest data...", "Almost ready..."],
+    messageInterval: 2000 // Slightly faster than default
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// Fast cycling messages
+var FastCyclingMessages = exports.FastCyclingMessages = {
+  args: {
+    showLoader: true,
+    header: "Fast Message Cycling",
+    messages: ["Message 1", "Message 2", "Message 3", "Message 4"],
+    messageInterval: 1000 // 1 second interval
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// Slow cycling messages
+var SlowCyclingMessages = exports.SlowCyclingMessages = {
+  args: {
+    showLoader: true,
+    header: "Slow Message Cycling",
+    messages: ["Taking time to process...", "This might take a while...", "Please be patient...", "Still working on it..."],
+    messageInterval: 5000 // 5 second interval
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// Customizable interval demo
+var CustomizableInterval = exports.CustomizableInterval = {
+  args: {
+    showLoader: true,
+    header: "Customizable Message Speed",
+    messages: ["Adjust the controls to change speed", "Use the messageInterval prop", "Perfect for different use cases", "From fast alerts to slow processes"],
+    messageInterval: 2500 // Default interval
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// Long loading simulation
+var LongLoadingExample = exports.LongLoadingExample = {
+  args: {
+    showLoader: true,
+    header: "Setting up your workspace",
+    messages: ["Connecting to servers...", "Downloading configuration...", "Installing dependencies...", "Optimizing performance...", "Finalizing setup...", "Almost there..."]
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// Interactive demo with toggle
+var Interactive = exports.Interactive = {
+  args: {
+    header: "Interactive Demo",
+    messages: ["Click the button to toggle the loader", "Watch the messages cycle", "Notice the smooth animations"]
+  },
+  render: function render(args) {
+    var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '2rem',
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "PageLoader Interactive Demo"), /*#__PURE__*/_react["default"].createElement("p", null, "Click the button below to show/hide the page loader:"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return setIsLoading(!isLoading);
+      },
+      appearance: "primary"
+    }, isLoading ? 'Hide Loader' : 'Show Loader'), /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], _extends({}, args, {
+      showLoader: isLoading
+    })));
+  }
+};
+
+// Minimal loader (just animation)
+var MinimalLoader = exports.MinimalLoader = {
+  args: {
+    showLoader: true
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// Custom styling example
+var CustomStyling = exports.CustomStyling = {
+  args: {
+    showLoader: true,
+    className: "custom-loader",
+    header: "Custom Styled Loader",
+    messages: ["This loader has custom styling applied"]
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("style", null, "\n        .custom-loader .RCB-page-loader-backdrop {\n          background: rgba(0, 0, 0, 0.8);\n        }\n        .custom-loader .RCB-page-loader-title {\n          color: #fff;\n        }\n        .custom-loader .RCB-page-loader-message {\n          color: #ccc;\n        }\n      "), /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args));
+  }
+};
+
+// Accessibility demo
+var AccessibilityFeatures = exports.AccessibilityFeatures = {
+  args: {
+    showLoader: true,
+    header: "Accessibility Demo",
+    messages: ["This loader includes ARIA attributes", "Supports reduced motion preferences", "Screen reader friendly", "High contrast mode compatible"]
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '2rem',
+        marginBottom: '1rem',
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h3", null, "Accessibility Features:"), /*#__PURE__*/_react["default"].createElement("ul", {
+      style: {
+        textAlign: 'left',
+        maxWidth: '600px',
+        margin: '0 auto'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "ARIA Labels:"), " Proper role, aria-modal, aria-label, aria-live attributes"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Reduced Motion:"), " Respects prefers-reduced-motion setting"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "High Contrast:"), " Adapts to high contrast mode"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Screen Readers:"), " Announces loading state and updates"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Keyboard Navigation:"), " Properly manages focus"))), /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args));
+  }
+};
+
+// Data loading simulation
+var DataLoadingSimulation = exports.DataLoadingSimulation = {
+  args: {
+    header: "Data Loading Simulation"
+  },
+  render: function render(args) {
+    var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentStep = _useState4[0],
+      setCurrentStep = _useState4[1];
+    var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isLoading = _useState6[0],
+      setIsLoading = _useState6[1];
+    var loadingSteps = ["Connecting to database...", "Authenticating user...", "Fetching user data...", "Loading preferences...", "Preparing dashboard...", "Complete!"];
+    var startLoading = function startLoading() {
+      setIsLoading(true);
+      setCurrentStep(0);
+      var interval = setInterval(function () {
+        setCurrentStep(function (prev) {
+          if (prev >= loadingSteps.length - 1) {
+            clearInterval(interval);
+            setTimeout(function () {
+              return setIsLoading(false);
+            }, 1000);
+            return prev;
+          }
+          return prev + 1;
+        });
+      }, 1500);
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '2rem',
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "Simulated Data Loading Process"), /*#__PURE__*/_react["default"].createElement("p", null, "This demo simulates a real loading sequence with step-by-step updates:"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: startLoading,
+      disabled: isLoading,
+      appearance: "primary"
+    }, "Start Loading Simulation"), /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], _extends({}, args, {
+      showLoader: isLoading,
+      messages: [loadingSteps[currentStep]]
+    })));
+  }
+};

package/components/PageLoader/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _PageLoader = _interopRequireDefault(require("./PageLoader"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = _PageLoader["default"];

package/components/PageLoader/pageLoaderCore.css

@@ -0,0 +1 @@
+.page-loader{width:100%;height:fit-content;display:flex;justify-content:center;align-items:center}.loader-wrapper{text-align:center}.loader-header{color:#17173A;font-weight:600;font-size:16px;margin-top:15px}.loader-messages{color:#6F6F8D;margin-top:5px;font-weight:400;font-size:14px;transition:opacity 0.4s ease-in-out}.loader-messages.fade-in{opacity:1}.loader-messages.fade-out{opacity:0}

package/components/ProgressBar/ProgressBar.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 var ProgressBar = function ProgressBar(props) {
   var progress = props.progress,
     height = props.height,