@shohojdhara/atomix 0.1.14 → 0.1.16

package/src/components/Icon/Icon.tsx

@@ -7,7 +7,7 @@ export type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duoto
 // We need to filter out non-icon exports from the Phosphor package
 type PhosphorIconsType = Exclude<keyof typeof PhosphorIcons, 'Icon' | 'IconContext' | 'IconBase' | 'IconProps' | 'createIcon' | 'default' | 'SSR'>;
 
-interface IconProps {
+export interface IconProps {
   /**
    * Icon name from Phosphor Icons
    */
@@ -51,7 +51,7 @@ const sizeMap: Record<IconSize, number> = {
 /**
  * Icon component that displays a Phosphor icon
  */
-const Icon: React.FC<IconProps> = ({
+export const Icon: React.FC<IconProps> = ({
   name,
   size = 'md',
   weight = 'regular',
@@ -84,13 +84,6 @@ const Icon: React.FC<IconProps> = ({
   );
 };
 
-export type { IconProps  };
-
-// Set display name for debugging
 Icon.displayName = 'Icon';
 
-// Default export (primary)
-export default Icon;
-
-// Named export for compatibility
-export { Icon };
+export default Icon;

package/src/components/List/List.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ListProps } from '../../lib/types/components';
 import { LIST } from '../../lib/constants/components';
 
-const List: React.FC<ListProps> = ({
+export const List: React.FC<ListProps> = ({
   children,
   variant = 'default',
   className = '',
@@ -34,11 +34,6 @@ const List: React.FC<ListProps> = ({
 
 export type { ListProps  };
 
-// Set display name for debugging
 List.displayName = 'List';
 
-// Default export (primary)
-export default List;
-
-// Named export for compatibility
-export { List };
+export default List;

package/src/components/Messages/Messages.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Icon } from '../Icon';
-import { Avatar } from '../Avatar';
+import { Icon } from '../Icon/Icon';
+import { Avatar } from '../Avatar/Avatar';
 import { MESSAGES } from '../../lib/constants/components';
 import { MessagesProps } from '../../lib/types/components';
 import { useMessages } from '../../lib/composables/useMessages';
@@ -8,7 +8,7 @@ import { useMessages } from '../../lib/composables/useMessages';
 /**
  * Messages component for displaying a chat interface with messages, images, and file attachments
  */
-const Messages: React.FC<MessagesProps> = ({
+export const Messages: React.FC<MessagesProps> = ({
   messages = [],
   otherAvatar,
   selfAvatar,
@@ -162,11 +162,6 @@ const Messages: React.FC<MessagesProps> = ({
 
 export type { MessagesProps  };
 
-// Set display name for debugging
 Messages.displayName = 'Messages';
 
-// Default export (primary)
-export default Messages;
-
-// Named export for compatibility
-export { Messages };
+export default Messages;

package/src/components/Messages/index.ts

@@ -1,2 +1,3 @@
-export { default as Messages } from './Messages';
+export { Messages } from './Messages';
+export { default } from './Messages';
 export type { MessagesProps } from './Messages'; 

package/src/components/Messages/scripts/bundle.ts

@@ -19,7 +19,7 @@ interface MessagesNamespace {
 
 // Initialize global namespace
 if (typeof window !== 'undefined') {
-  if (!window.Atomix) {
+  if (!(window as any).Atomix) {
     (window as any).Atomix = {};
   }
 
@@ -46,7 +46,7 @@ if (typeof window !== 'undefined') {
 
 export {
   Messages,
-  MessagesOptions,
-  MessageItem,
+  type MessagesOptions,
+  type MessageItem,
   MessagesInteractions
 }; 

package/src/components/Modal/Modal.tsx

@@ -72,7 +72,7 @@ function useModal({
 /**
  * Modal component for displaying overlay content
  */
-const Modal: React.FC<ModalProps> = ({
+export const Modal: React.FC<ModalProps> = ({
   children,
   isOpen = false,
   onOpenChange,
@@ -105,7 +105,7 @@ const Modal: React.FC<ModalProps> = ({
 
   // Handle keyboard events for Escape key
   useEffect(() => {
-    if (!keyboard) return;
+    if (!keyboard) return undefined;
     
     const handleKeydown = (event: KeyboardEvent) => {
       if (event.key === 'Escape' && isOpenState) {
@@ -192,13 +192,6 @@ const Modal: React.FC<ModalProps> = ({
 
 Modal.displayName = 'Modal';
 
-export type { ModalProps  };
+export type { ModalProps };
 
-// Set display name for debugging
-Modal.displayName = 'Modal';
-
-// Default export (primary)
 export default Modal;
-
-// Named export for compatibility
-export { Modal };

package/src/components/Navbar/MegaMenu.tsx

@@ -1,15 +1,15 @@
-import React, { ReactNode } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 import { MegaMenuProps, MegaMenuColumnProps, MegaMenuLinkProps } from '../../lib/types/components';
-import { Icon } from '../Icon';
+import { Icon } from '../Icon/Icon';
 import { mapIconName } from './Menu'; // Import the mapping function
 
-export const MegaMenu: React.FC<MegaMenuProps> = ({
+export const MegaMenu: React.FC<MegaMenuProps> = forwardRef<HTMLDivElement, MegaMenuProps>(({
   children,
   className = '',
   disabled = false
-}) => {
+}, ref) => {
   return (
-    <div className={`c-menu c-menu--mega ${className}`}>
+    <div ref={ref} className={`c-menu c-menu--mega ${className}`}>
       <div className="c-menu__container">
         <div className="c-menu__grid o-grid">
           {React.Children.map(children, child => {
@@ -26,20 +26,20 @@ export const MegaMenu: React.FC<MegaMenuProps> = ({
       </div>
     </div>
   );
-};
+});
 
-export const MegaMenuColumn: React.FC<MegaMenuColumnProps> = ({
+export const MegaMenuColumn: React.FC<MegaMenuColumnProps> = forwardRef<HTMLDivElement, MegaMenuColumnProps>(({
   title,
   icon,
   children,
   width = 'auto',
   className = '',
   disabled = false
-}) => {
+}, ref) => {
   const columnClass = `o-grid__col o-grid__col--${width} ${className}`;
   
   return (
-    <div className={columnClass}>
+    <div ref={ref} className={columnClass}>
       {(title || icon) && (
         <div className="c-menu__header">
           {icon && (
@@ -83,15 +83,15 @@ export const MegaMenuColumn: React.FC<MegaMenuColumnProps> = ({
       </ul>
     </div>
   );
-};
+});
 
-export const MegaMenuLink: React.FC<MegaMenuLinkProps> = ({
+export const MegaMenuLink: React.FC<MegaMenuLinkProps> = forwardRef<HTMLAnchorElement, MegaMenuLinkProps>(({
   href,
   children,
   className = '',
   disabled = false,
   onClick
-}) => {
+}, ref) => {
   const handleClick = (e: React.MouseEvent) => {
     if (disabled) {
       e.preventDefault();
@@ -104,7 +104,7 @@ export const MegaMenuLink: React.FC<MegaMenuLinkProps> = ({
   };
   
   return (
-    <a 
+    <a ref={ref}
       href={href} 
       className={`c-menu__subitem-link ${disabled ? 'is-disabled' : ''} ${className}`}
       onClick={handleClick}
@@ -113,4 +113,4 @@ export const MegaMenuLink: React.FC<MegaMenuLinkProps> = ({
       {children}
     </a>
   );
-}; 
+});

package/src/components/Navbar/Menu.tsx

@@ -1,14 +1,14 @@
-import React, { ReactNode } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 import { MenuProps, MenuItemProps } from '../../lib/types/components';
-import { Icon } from '../Icon';
+import { Icon } from '../Icon/Icon';
 
-const Menu: React.FC<MenuProps> = ({
+export const Menu: React.FC<MenuProps> = forwardRef<HTMLDivElement, MenuProps>(({
   children,
   className = '',
   disabled = false
-}) => {
+}, ref) => {
   return (
-    <div className={`c-menu ${className}`}>
+    <div ref={ref} className={`c-menu ${className}`}>
       <ul className="c-menu__list" role="menu">
         {React.Children.map(children, child => {
           if (React.isValidElement(child)) {
@@ -23,19 +23,12 @@ const Menu: React.FC<MenuProps> = ({
       </ul>
     </div>
   );
-};
+});
 
 export type { MenuProps, MenuItemProps, MenuDividerProps };
 
-// Set display name for debugging
-Menu.displayName = 'Menu';
-
-// Default export (primary)
 export default Menu;
 
-// Named export for compatibility
-export { Menu };
-
 interface MenuDividerProps {
   /**
    * Additional CSS class names
@@ -43,7 +36,7 @@ interface MenuDividerProps {
   className?: string;
 }
 
-export const MenuItem: React.FC<MenuItemProps> = ({
+export const MenuItem: React.FC<MenuItemProps> = forwardRef<HTMLLIElement, MenuItemProps>(({
   children,
   href = '#',
   icon,
@@ -51,7 +44,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   disabled = false,
   onClick,
   className = ''
-}) => {
+}, ref) => {
   const handleClick = (e: React.MouseEvent) => {
     if (disabled) {
       e.preventDefault();
@@ -66,7 +59,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   const itemClass = `c-menu__item ${active ? 'is-active' : ''} ${disabled ? 'is-disabled' : ''} ${className}`;
   
   return (
-    <li className={itemClass} role="menuitem">
+    <li ref={ref} className={itemClass} role="menuitem">
       <a 
         href={href} 
         className="c-menu__link"
@@ -97,7 +90,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
       </a>
     </li>
   );
-};
+});
 
 // Map icon-lux names to Phosphor icon names
 export const mapIconName = (luxIconName: string): any => {
@@ -120,10 +113,10 @@ export const mapIconName = (luxIconName: string): any => {
   return iconMap[luxIconName] || 'Circle'; // Default to Circle if no mapping found
 };
 
-export const MenuDivider: React.FC<MenuDividerProps> = ({
+export const MenuDivider: React.FC<MenuDividerProps> = forwardRef<HTMLLIElement, MenuDividerProps>(({
   className = ''
-}) => {
+}, ref) => {
   return (
-    <li className={`c-menu__divider ${className}`} role="separator"></li>
+    <li ref={ref} className={`c-menu__divider ${className}`} role="separator"></li>
   );
-}; 
+}); 

package/src/components/Navbar/Nav.tsx

@@ -1,19 +1,19 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { NavProps } from '../../lib/types/components';
 import { useNav } from '../../lib/composables/useNavbar';
 
-const Nav: React.FC<NavProps> = ({
+export const Nav: React.FC<NavProps> = forwardRef<HTMLUListElement, NavProps>(({
   children,
   alignment = 'start',
   className = '',
   disabled = false
-}) => {
+}, ref) => {
   const { generateNavClass } = useNav({ alignment });
   
   const navClass = generateNavClass({ alignment, className });
   
   return (
-    <ul className={navClass} role="menubar" aria-orientation="horizontal">
+    <ul ref={ref} className={navClass} role="menubar" aria-orientation="horizontal">
       {React.Children.map(children, child => {
         if (React.isValidElement(child)) {
           // Pass disabled prop down to all children if Nav is disabled
@@ -26,14 +26,10 @@ const Nav: React.FC<NavProps> = ({
       })}
     </ul>
   );
-}; 
+});
 
 export type { NavProps  };
 
-// Set display name for debugging
 Nav.displayName = 'Nav';
 
-// Default export (primary)
-export { Nav };
-
 export default Nav;

package/src/components/Navbar/NavDropdown.tsx

@@ -1,17 +1,17 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, forwardRef} from 'react';
 import { NavDropdownProps } from '../../lib/types/components';
 import { useNavDropdown } from '../../lib/composables/useNavbar';
 import { NavItem } from './NavItem';
-import { Icon } from '../Icon';
+import { Icon } from '../Icon/Icon';
 
-export const NavDropdown: React.FC<NavDropdownProps> = ({
+export const NavDropdown: React.FC<NavDropdownProps> = forwardRef<HTMLLIElement, NavDropdownProps>(({
   title,
   children,
   alignment = 'start',
   megaMenu = false,
   className = '',
   disabled = false
-}) => {
+}, ref) => {
   const { generateDropdownMenuClass, getIconName } = useNavDropdown({ 
     alignment, megaMenu 
   });
@@ -34,7 +34,7 @@ export const NavDropdown: React.FC<NavDropdownProps> = ({
   
   // Handle click outside to close dropdown (desktop only)
   useEffect(() => {
-    if (!isActive) return;
+    if (!isActive) return undefined;
     
     const handleClickOutside = (e: MouseEvent) => {
       const isMobile = window.innerWidth < 768; // MD breakpoint
@@ -52,7 +52,7 @@ export const NavDropdown: React.FC<NavDropdownProps> = ({
   
   // Handle Escape key to close dropdown
   useEffect(() => {
-    if (!isActive) return;
+    if (!isActive) return undefined;
     
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
@@ -99,4 +99,10 @@ export const NavDropdown: React.FC<NavDropdownProps> = ({
       {menuContent}
     </NavItem>
   );
-}; 
+});
+
+export type { NavDropdownProps };
+
+NavDropdown.displayName = 'NavDropdown';
+
+export default NavDropdown;

package/src/components/Navbar/NavItem.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef, ReactNode } from 'react';
+import React, { useState, useEffect, useRef, ReactNode, forwardRef } from 'react';
 import { NavItemProps } from '../../lib/types/components';
 import { useNavItem } from '../../lib/composables/useNavbar';
 
-export const NavItem: React.FC<NavItemProps> = ({
+export const NavItem: React.FC<NavItemProps> = forwardRef<HTMLLIElement, NavItemProps>(({
   children,
   dropdown = false,
   megaMenu = false,
@@ -12,7 +12,7 @@ export const NavItem: React.FC<NavItemProps> = ({
   className = '',
   disabled = false,
   'aria-expanded': ariaExpanded,
-}) => {
+}, ref) => {
   const { generateNavItemClass, generateNavLinkClass, handleClick } = useNavItem({ 
     dropdown,
     megaMenu,
@@ -24,7 +24,7 @@ export const NavItem: React.FC<NavItemProps> = ({
   const [isActive, setIsActive] = useState(false);
   
   // Ref for detecting outside clicks
-  const itemRef = useRef<HTMLLIElement>(null);
+  const itemRef = useRef<HTMLAnchorElement>(null);
   
   // Toggle dropdown
   const handleDropdownToggle = (e: React.MouseEvent) => {
@@ -36,7 +36,7 @@ export const NavItem: React.FC<NavItemProps> = ({
   
   // Close dropdown on outside click (desktop only)
   useEffect(() => {
-    if ((!dropdown && !megaMenu) || !isActive) return;
+    if ((!dropdown && !megaMenu) || !isActive) return undefined;
     
     const handleOutsideClick = (e: MouseEvent) => {
       if (itemRef.current && !itemRef.current.contains(e.target as Node)) {
@@ -56,7 +56,7 @@ export const NavItem: React.FC<NavItemProps> = ({
   
   // Close dropdown on resize to desktop
   useEffect(() => {
-    if (!dropdown && !megaMenu) return;
+    if (!dropdown && !megaMenu) return undefined;
     
     const handleResize = () => {
       const isMobile = window.innerWidth < 768; // MD breakpoint
@@ -100,13 +100,12 @@ export const NavItem: React.FC<NavItemProps> = ({
   const expanded = typeof ariaExpanded !== 'undefined' ? ariaExpanded : isActive;
   
   return (
-    <li 
+    <li ref={ref}
       className={navItemClass} 
-      ref={itemRef}
       role="menuitem"
       aria-haspopup={dropdown || megaMenu}
     >
-      <a 
+      <a ref={itemRef}
         href={href || '#'} 
         className={navLinkClass}
         onClick={(dropdown || megaMenu) ? handleDropdownToggle : handleClick(onClick)}
@@ -120,4 +119,10 @@ export const NavItem: React.FC<NavItemProps> = ({
       {(dropdown || megaMenu) && childContent.length > 1 && childContent[1]}
     </li>
   );
-}; 
+});
+
+export type { NavItemProps };
+
+NavItem.displayName = 'NavItem';
+
+export default NavItem;

package/src/components/Navbar/Navbar.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, forwardRef } from 'react';
 import { NavbarProps } from '../../lib/types/components';
 import { useNavbar } from '../../lib/composables/useNavbar';
 import { NAVBAR } from '../../lib/constants/components';
 
-const Navbar: React.FC<NavbarProps> = ({
+export const Navbar: React.FC<NavbarProps> = forwardRef<HTMLDivElement, NavbarProps>(({
   brand,
   children,
   variant,
@@ -14,7 +14,7 @@ const Navbar: React.FC<NavbarProps> = ({
   onToggle,
   className = '',
   disabled = false
-}) => {
+}, ref) => {
   const { generateNavbarClass, generateContainerStyle, generateCollapseClass } = useNavbar({ 
     position, collapsible, expanded, onToggle
   });
@@ -81,7 +81,7 @@ const Navbar: React.FC<NavbarProps> = ({
   
   return (
     <nav className={navbarClass} aria-label="Main navigation">
-      <div className="c-navbar__container" style={containerStyle}>
+      <div ref={ref} className="c-navbar__container" style={containerStyle}>
         {brand && (
           typeof brand === 'string' ? (
             <a href="/" className="c-navbar__brand">{brand}</a>
@@ -114,16 +114,11 @@ const Navbar: React.FC<NavbarProps> = ({
       </div>
     </nav>
   );
-}; 
+});
 
 
 export type { NavbarProps };
 
-// Set display name for debugging
 Navbar.displayName = 'Navbar';
 
-// Default export (primary)
-export default Navbar;
-
-// Named export for compatibility
-export { Navbar };
+export default Navbar;

package/src/components/Pagination/Pagination.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { PaginationProps } from '../../lib/types/components';
 import { usePagination, DOTS } from '../../lib/composables/usePagination';
 import { PAGINATION_DEFAULTS } from '../../lib/constants/components';
-import { Icon, IconProps } from '../Icon';
+import { Icon, IconProps } from '../Icon/Icon';
 
 // @TODO: Add Search functionality for pagination
 
@@ -25,7 +25,7 @@ interface PaginationNavButtonProps {
 /**
  * PaginationNavButton component for rendering first, previous, next, and last buttons
  */
-const PaginationNavButton: React.FC<PaginationNavButtonProps> = ({ 
+export const PaginationNavButton: React.FC<PaginationNavButtonProps> = ({ 
   type, 
   onClick, 
   disabled, 
@@ -51,7 +51,7 @@ const PaginationNavButton: React.FC<PaginationNavButtonProps> = ({
 /**
  * Pagination component
  */
-const Pagination: React.FC<PaginationProps> = ({
+export const Pagination: React.FC<PaginationProps> = ({
   currentPage = PAGINATION_DEFAULTS.currentPage,
   totalPages = PAGINATION_DEFAULTS.totalPages,
   onPageChange,
@@ -165,14 +165,8 @@ const Pagination: React.FC<PaginationProps> = ({
   );
 };
 
-
 export type { PaginationProps  };
 
-// Set display name for debugging
 Pagination.displayName = 'Pagination';
 
-// Default export (primary)
-export default Pagination;
-
-// Named export for compatibility
-export { Pagination };
+export default Pagination;

package/src/components/PhotoViewer/PhotoViewer.tsx

@@ -24,7 +24,7 @@ import { PhotoViewerInfo } from "./PhotoViewerInfo";
  * @param props - PhotoViewerProps
  * @returns JSX.Element
  */
-const PhotoViewer: React.FC<PhotoViewerProps> = ({
+export const PhotoViewer: React.FC<PhotoViewerProps> = ({
   images,
   startIndex = 0,
   className = "",
@@ -256,13 +256,8 @@ const PhotoViewer: React.FC<PhotoViewerProps> = ({
   );
 };
 
-export type { PhotoViewerProps  };
+export type { PhotoViewerProps };
 
-// Set display name for debugging
 PhotoViewer.displayName = 'PhotoViewer';
 
-// Default export (primary)
 export default PhotoViewer;
-
-// Named export for compatibility
-export { PhotoViewer };

package/src/components/PhotoViewer/PhotoViewerImage.tsx

@@ -83,7 +83,7 @@ export const PhotoViewerImage: React.FC<PhotoViewerImageProps> = ({
   // Add non-passive event listeners to prevent page scrolling/zooming
   useEffect(() => {
     const container = effectiveContainerRef.current;
-    if (!container) return;
+    if (!container) return undefined;
     
     const handleWheelEvent = (e: WheelEvent) => {
       // Only call if mounted and handler exists

package/src/components/PhotoViewer/PhotoViewerNavigation.tsx

@@ -39,7 +39,7 @@ export const PhotoViewerNavigation: React.FC<PhotoViewerNavigationProps> = ({
 }) => {
   // Add keyboard navigation
   useEffect(() => {
-    if (!enableKeyboardNav) return;
+    if (!enableKeyboardNav) return undefined;
     
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'ArrowLeft') onPrev();

package/src/components/PhotoViewer/examples/ImageGallery.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { fn } from '@storybook/test';
-import { MasonryGrid, MasonryGridItem } from '../../../layouts/MasonryGrid';
-import { PhotoViewer } from '..';
-import { Card } from '../../Card';
+import { MasonryGridItem } from '../../../layouts/MasonryGrid/MasonryGridItem';
+import { MasonryGrid } from '../../../layouts/MasonryGrid/MasonryGrid';
+import { PhotoViewer } from '../PhotoViewer';
+import { Card } from '../../Card/Card';
 
 // Define the image gallery item type
 export interface GalleryImage {

package/src/components/PhotoViewer/examples/SimpleGallery.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { fn } from '@storybook/test';
-import { PhotoViewer } from '..';
+import { PhotoViewer } from '../PhotoViewer';
 
 const images = [
   'https://picsum.photos/id/10/800/600',

package/src/components/PhotoViewer/index.ts

@@ -1,4 +1,5 @@
-export { default, PhotoViewer } from './PhotoViewer';
+export { PhotoViewer } from './PhotoViewer';
+export { default } from './PhotoViewer';
 export { PhotoViewerHeader } from './PhotoViewerHeader';
 export { PhotoViewerNavigation } from './PhotoViewerNavigation';
 export { PhotoViewerImage } from './PhotoViewerImage';

package/src/components/PhotoViewer/scripts/bundle.ts

@@ -12,19 +12,12 @@ import {
   updateInstance
 } from './PhotoViewerInteractions';
 
-// Global namespace for PhotoViewer
-declare global {
-  interface Window {
-    Atomix: Record<string, any>;
-  }
-}
-
 if (typeof window !== 'undefined') {
   // Initialize the Atomix global object if it doesn't exist
-  (window as any).Atomix = (window as any).Atomix || {};
+  window.Atomix = window.Atomix || {};
   
   // Add PhotoViewer to the global Atomix object with comprehensive API
-  (window as any).Atomix.PhotoViewer = {
+  window.Atomix.PhotoViewer = {
     // Core class
     create: PhotoViewer,