@abstraks-dev/ui-library 2.2.0 → 2.3.0

package/dist/components/Modal.js

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Modal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _propTypes = require("prop-types");
+var _icons = require("../icons");
+var _ssrSafeId = require("../utils/ssrSafeId");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
+/**
+ * Modal - A stateless, accessible modal dialog component
+ *
+ * Features:
+ * - Portal rendering to document.body
+ * - Multiple sizes (sm, md, lg, xl, full)
+ * - Accessible with proper ARIA attributes and focus management
+ * - Keyboard support (Escape to close)
+ * - Backdrop click to close (optional)
+ * - Scroll lock on body
+ * - Header, body, and footer sections
+ * - Customizable close button
+ * - Animation support
+ *
+ * @component
+ * @example
+ * <Modal
+ *   isOpen={true}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Confirm Action"
+ *   size="md"
+ * >
+ *   <p>Are you sure you want to continue?</p>
+ * </Modal>
+ */
+const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)(({
+  // Core props
+  id,
+  className = '',
+  // Content props
+  title,
+  children,
+  footer,
+  headerContent,
+  // Behavior props
+  isOpen = false,
+  onClose,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  showCloseButton = true,
+  preventBodyScroll = true,
+  // Appearance props
+  size = 'md',
+  centered = true,
+  // Accessibility props
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+  'aria-labelledby': ariaLabelledBy,
+  role = 'dialog',
+  // Additional props
+  componentName = 'modal',
+  ...rest
+}, ref) => {
+  const generateId = (0, _ssrSafeId.useStableId)('modal');
+  const stableId = id || generateId();
+  const titleId = `${stableId}-title`;
+  const contentId = `${stableId}-content`;
+
+  // Handle Escape key press
+  const handleEscape = (0, _react.useCallback)(event => {
+    if (closeOnEscape && event.key === 'Escape' && isOpen) {
+      event.preventDefault();
+      onClose?.();
+    }
+  }, [closeOnEscape, isOpen, onClose]);
+
+  // Handle backdrop click
+  const handleBackdropClick = (0, _react.useCallback)(event => {
+    if (closeOnBackdropClick && event.target === event.currentTarget) {
+      onClose?.();
+    }
+  }, [closeOnBackdropClick, onClose]);
+
+  // Manage body scroll lock
+  (0, _react.useEffect)(() => {
+    if (isOpen && preventBodyScroll) {
+      const originalOverflow = document.body.style.overflow;
+      const originalPaddingRight = document.body.style.paddingRight;
+
+      // Get scrollbar width
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+
+      // Lock scroll
+      document.body.style.overflow = 'hidden';
+      if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
+      }
+      return () => {
+        document.body.style.overflow = originalOverflow;
+        document.body.style.paddingRight = originalPaddingRight;
+      };
+    }
+  }, [isOpen, preventBodyScroll]);
+
+  // Add/remove escape key listener
+  (0, _react.useEffect)(() => {
+    if (isOpen && closeOnEscape) {
+      document.addEventListener('keydown', handleEscape);
+      return () => {
+        document.removeEventListener('keydown', handleEscape);
+      };
+    }
+  }, [isOpen, closeOnEscape, handleEscape]);
+
+  // Focus management
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      // Store the currently focused element
+      const previousActiveElement = document.activeElement;
+
+      // Return focus when modal closes
+      return () => {
+        if (previousActiveElement && previousActiveElement.focus) {
+          previousActiveElement.focus();
+        }
+      };
+    }
+  }, [isOpen]);
+  if (!isOpen) {
+    return null;
+  }
+  const modalClassName = [componentName, `${componentName}--${size}`, centered && `${componentName}--centered`, className].filter(Boolean).join(' ');
+  const modalContent = /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}-overlay`,
+    onClick: handleBackdropClick
+  }, /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: ref,
+    id: stableId,
+    className: modalClassName,
+    role: role,
+    "aria-modal": "true",
+    "aria-label": ariaLabel || title,
+    "aria-labelledby": title ? titleId : ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy || contentId
+  }, rest), (title || headerContent || showCloseButton) && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}__header`
+  }, headerContent || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title && /*#__PURE__*/_react.default.createElement("h2", {
+    id: titleId,
+    className: `${componentName}__title`
+  }, title)), showCloseButton && /*#__PURE__*/_react.default.createElement("button", {
+    className: `${componentName}__close`,
+    onClick: onClose,
+    "aria-label": "Close modal",
+    type: "button"
+  }, /*#__PURE__*/_react.default.createElement(_icons.Close, {
+    dimensions: 24
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    id: contentId,
+    className: `${componentName}__body`
+  }, children), footer && /*#__PURE__*/_react.default.createElement("div", {
+    className: `${componentName}__footer`
+  }, footer)));
+
+  // Render modal in a portal
+  if (typeof window !== 'undefined') {
+    return /*#__PURE__*/(0, _reactDom.createPortal)(modalContent, document.body);
+  }
+  return null;
+});
+Modal.propTypes = {
+  id: _propTypes.string,
+  className: _propTypes.string,
+  title: _propTypes.string,
+  children: _propTypes.node,
+  footer: _propTypes.node,
+  headerContent: _propTypes.node,
+  isOpen: _propTypes.bool,
+  onClose: _propTypes.func,
+  closeOnBackdropClick: _propTypes.bool,
+  closeOnEscape: _propTypes.bool,
+  showCloseButton: _propTypes.bool,
+  preventBodyScroll: _propTypes.bool,
+  size: (0, _propTypes.oneOf)(['sm', 'md', 'lg', 'xl', 'full']),
+  centered: _propTypes.bool,
+  'aria-label': _propTypes.string,
+  'aria-describedby': _propTypes.string,
+  'aria-labelledby': _propTypes.string,
+  role: _propTypes.string,
+  componentName: _propTypes.string
+};
+Modal.displayName = 'Modal';
+var _default = exports.default = Modal;

package/dist/index.js

@@ -24,6 +24,7 @@ var _exportNames = {
   Hero: true,
   Label: true,
   Loader: true,
+  Modal: true,
   Paragraph: true,
   Radio: true,
   Search: true,
@@ -38,8 +39,14 @@ var _exportNames = {
   ArrowRight: true,
   BookOpen: true,
   CameraIcon: true,
+  Check: true,
   CheckCircle: true,
   ChevronDown: true,
+  even: true,
+  ChevronLeft: true,
+  ChevronRight: true,
+  ChevronRightCircle: true,
+  ChevronUpCircle: true,
   Close: true,
   Comment: true,
   EditSquare: true,
@@ -151,6 +158,12 @@ Object.defineProperty(exports, "CaretDown", {
     return _CaretDown.default;
   }
 });
+Object.defineProperty(exports, "Check", {
+  enumerable: true,
+  get: function () {
+    return _Check.Check;
+  }
+});
 Object.defineProperty(exports, "CheckCircle", {
   enumerable: true,
   get: function () {
@@ -169,6 +182,30 @@ Object.defineProperty(exports, "ChevronDown", {
     return _ChevronDown.ChevronDown;
   }
 });
+Object.defineProperty(exports, "ChevronLeft", {
+  enumerable: true,
+  get: function () {
+    return _ChevronLeft.ChevronLeft;
+  }
+});
+Object.defineProperty(exports, "ChevronRight", {
+  enumerable: true,
+  get: function () {
+    return _ChevronRight.ChevronRight;
+  }
+});
+Object.defineProperty(exports, "ChevronRightCircle", {
+  enumerable: true,
+  get: function () {
+    return _ChevronRightCircle.ChevronRightCircle;
+  }
+});
+Object.defineProperty(exports, "ChevronUpCircle", {
+  enumerable: true,
+  get: function () {
+    return _ChevronUpCircle.ChevronUpCircle;
+  }
+});
 Object.defineProperty(exports, "Close", {
   enumerable: true,
   get: function () {
@@ -319,6 +356,12 @@ Object.defineProperty(exports, "Magnify", {
     return _Magnify.Magnify;
   }
 });
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.default;
+  }
+});
 Object.defineProperty(exports, "News", {
   enumerable: true,
   get: function () {
@@ -397,6 +440,12 @@ Object.defineProperty(exports, "TrashX", {
     return _TrashX.TrashX;
   }
 });
+Object.defineProperty(exports, "even", {
+  enumerable: true,
+  get: function () {
+    return _ChevronDownCircle.even;
+  }
+});
 var _utils = require("./utils");
 Object.keys(_utils).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -441,6 +490,7 @@ var _Heading = _interopRequireDefault(require("./components/Heading"));
 var _Hero = _interopRequireDefault(require("./components/Hero"));
 var _Label = _interopRequireDefault(require("./components/Label"));
 var _Loader = _interopRequireDefault(require("./components/Loader"));
+var _Modal = _interopRequireDefault(require("./components/Modal"));
 var _Paragraph = _interopRequireDefault(require("./components/Paragraph"));
 var _Radio = require("./components/Radio");
 var _Search = require("./components/Search");
@@ -455,8 +505,14 @@ var _ArrowIcon = require("./icons/ArrowIcon");
 var _ArrowRight = require("./icons/ArrowRight");
 var _BookOpen = require("./icons/BookOpen");
 var _Camera = require("./icons/Camera");
+var _Check = require("./icons/Check");
 var _CheckCircle = require("./icons/CheckCircle");
 var _ChevronDown = require("./icons/ChevronDown");
+var _ChevronDownCircle = require("./icons/ChevronDownCircle");
+var _ChevronLeft = require("./icons/ChevronLeft");
+var _ChevronRight = require("./icons/ChevronRight");
+var _ChevronRightCircle = require("./icons/ChevronRightCircle");
+var _ChevronUpCircle = require("./icons/ChevronUpCircle");
 var _Close = require("./icons/Close");
 var _Comment = require("./icons/Comment");
 var _EditSquare = require("./icons/EditSquare");

package/dist/styles/main.css

@@ -7545,6 +7545,224 @@ body.scroll-locked {
   border: 0 !important;
 }
 
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  animation: fadeIn 0.2s ease-out;
+  overflow-y: auto;
+}
+@media (prefers-reduced-motion: reduce) {
+  .modal-overlay {
+    animation: none;
+  }
+}
+
+.modal {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 2rem);
+  width: 100%;
+  animation: slideIn 0.3s ease-out;
+  position: relative;
+}
+@media (prefers-reduced-motion: reduce) {
+  .modal {
+    animation: none;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .modal {
+    background: #1e1e1e;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+  }
+}
+.modal--sm {
+  max-width: 400px;
+}
+.modal--md {
+  max-width: 600px;
+}
+.modal--lg {
+  max-width: 800px;
+}
+.modal--xl {
+  max-width: 1200px;
+}
+.modal--full {
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100vh - 2rem);
+}
+.modal--centered {
+  margin: auto;
+}
+.modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-bottom: 1px solid #e9ecef;
+  flex-shrink: 0;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__header {
+    border-bottom-color: #333;
+  }
+}
+.modal__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #212529;
+  flex: 1;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__title {
+    color: #fff;
+  }
+}
+.modal__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 0.5rem;
+  margin: -0.5rem -0.5rem -0.5rem 1rem;
+  cursor: pointer;
+  color: #6c757d;
+  border-radius: 4px;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+}
+.modal__close:hover {
+  background: #f8f9fa;
+  color: #212529;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__close:hover {
+    background: #333;
+    color: #fff;
+  }
+}
+.modal__close:focus-visible {
+  outline: 2px solid #009900;
+  outline-offset: 2px;
+}
+.modal__close svg {
+  display: block;
+}
+.modal__body {
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+  color: #495057;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__body {
+    color: #dee2e6;
+  }
+}
+.modal__body::-webkit-scrollbar {
+  width: 8px;
+}
+.modal__body::-webkit-scrollbar-track {
+  background: #f8f9fa;
+  border-radius: 4px;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__body::-webkit-scrollbar-track {
+    background: #2a2a2a;
+  }
+}
+.modal__body::-webkit-scrollbar-thumb {
+  background: #ced4da;
+  border-radius: 4px;
+}
+.modal__body::-webkit-scrollbar-thumb:hover {
+  background: #adb5bd;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__body::-webkit-scrollbar-thumb {
+    background: #555;
+  }
+  .modal__body::-webkit-scrollbar-thumb:hover {
+    background: #666;
+  }
+}
+.modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1.5rem;
+  border-top: 1px solid #e9ecef;
+  flex-shrink: 0;
+}
+@media (prefers-color-scheme: dark) {
+  .modal__footer {
+    border-top-color: #333;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@media (max-width: 640px) {
+  .modal-overlay {
+    padding: 0.5rem;
+  }
+  .modal {
+    max-height: calc(100vh - 1rem);
+  }
+  .modal--sm, .modal--md, .modal--lg, .modal--xl {
+    max-width: 100%;
+  }
+  .modal__header, .modal__body, .modal__footer {
+    padding: 1rem;
+  }
+  .modal__title {
+    font-size: 1.125rem;
+  }
+}
+@media (prefers-contrast: high) {
+  .modal {
+    border: 2px solid currentColor;
+  }
+  .modal__header, .modal__footer {
+    border-color: currentColor;
+  }
+  .modal__close:focus-visible {
+    outline-width: 3px;
+  }
+}
 .logo {
   width: 50%;
   display: inline-flex;