@shohojdhara/atomix 0.3.3 → 0.3.5

package/src/components/Form/Input.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { InputProps } from '../../lib/types/components';
 import { useInput } from '../../lib/composables/useInput';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -6,7 +6,8 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Input - A component for text input fields
  */
-export const Input = forwardRef<HTMLInputElement, InputProps>(
+export const Input = memo(
+  forwardRef<HTMLInputElement, InputProps>(
   (
     {
       type = 'text',
@@ -109,6 +110,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 
     return inputElement;
   }
+  )
 );
 
 Input.displayName = 'Input';

package/src/components/Form/Radio.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { RadioProps } from '../../lib/types/components';
 import { useRadio } from '../../lib/composables/useRadio';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -6,7 +6,7 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Radio - A component for radio button inputs
  */
-export const Radio: React.FC<RadioProps> = ({
+export const Radio: React.FC<RadioProps> = memo(({
   label,
   checked = false,
   onChange,
@@ -77,7 +77,7 @@ export const Radio: React.FC<RadioProps> = ({
   }
 
   return radioContent;
-};
+});
 
 export type { RadioProps };
 

package/src/components/Form/Select.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, memo } from 'react';
 import { SelectProps } from '../../lib/types/components';
 import { useSelect } from '../../lib/composables';
 import { SELECT } from '../../lib/constants/components';
@@ -7,7 +7,7 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Select - A component for dropdown selection
  */
-export const Select: React.FC<SelectProps> = ({
+export const Select: React.FC<SelectProps> = memo(({
   options = [],
   value,
   onChange,
@@ -204,7 +204,7 @@ export const Select: React.FC<SelectProps> = ({
   }
 
   return selectContent;
-};
+});
 
 export type { SelectProps };
 

package/src/components/Form/Textarea.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { TextareaProps } from '../../lib/types/components';
 import { useTextarea } from '../../lib/composables/useTextarea';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -6,7 +6,8 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Textarea - A component for multiline text input
  */
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+export const Textarea = memo(
+  forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     {
       value,
@@ -100,6 +101,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     return textareaElement;
   }
+  )
 );
 
 Textarea.displayName = 'Textarea';

package/src/components/List/List.stories.tsx

@@ -44,8 +44,8 @@ const ListItems = ({ variant }: { variant: string }) => (
   </>
 );
 
-const createListSection = (title: string, variant: string) => (
-  <div style={sectionStyle}>
+const createListSection = (title: string, variant: string, key?: string) => (
+  <div key={key} style={sectionStyle}>
     <h3 style={titleStyle}>{title}</h3>
     <List variant={variant as any}>
       <ListItems variant={variant} />
@@ -67,7 +67,7 @@ export const VariantsShowcase: Story = {
       <div className="u-d-flex u-flex-column u-gap-8">
         {['Default', 'Dash', 'Number', 'Text'].map((title, index) => {
           const variant = index === 0 ? 'default' : title.toLowerCase();
-          return createListSection(`${title} List`, variant);
+          return createListSection(`${title} List`, variant, variant);
         })}
       </div>
     );

package/src/components/List/List.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { ListProps } from '../../lib/types/components';
 import { LIST } from '../../lib/constants/components';
 
-export const List: React.FC<ListProps> = ({
+export const List: React.FC<ListProps> = memo(({
   children,
   variant = 'default',
   className = '',
@@ -27,7 +27,7 @@ export const List: React.FC<ListProps> = ({
       })}
     </ListElement>
   );
-};
+});
 
 export type { ListProps };
 

package/src/components/List/ListGroup.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { ListGroupProps } from '../../lib/types/components';
+import { ListGroupProps as ListGroupPropsType } from '../../lib/types/components';
 import { LIST_GROUP } from '../../lib/constants/components';
 import { List } from './List';
 
+export type ListGroupProps = ListGroupPropsType;
+
 export const ListGroup: React.FC<ListGroupProps> = ({
   children,
   className = '',

package/src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useCallback, memo } from 'react';
 import { ModalProps } from '../../lib/types/components';
 import { MODAL } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -76,7 +76,7 @@ function useModal({
 /**
  * Modal component for displaying overlay content
  */
-export const Modal: React.FC<ModalProps> = ({
+export const Modal: React.FC<ModalProps> = memo(({
   children,
   isOpen = false,
   onOpenChange,
@@ -213,7 +213,7 @@ export const Modal: React.FC<ModalProps> = ({
       </div>
     </div>
   );
-};
+});
 
 Modal.displayName = 'Modal';
 

package/src/components/Navigation/Menu/MegaMenu.tsx

@@ -7,7 +7,7 @@ import {
 import { Icon } from '../../Icon/Icon';
 import { mapIconName } from './Menu'; // Import the mapping function
 
-export const MegaMenu: React.FC<MegaMenuProps> = forwardRef<HTMLDivElement, MegaMenuProps>(
+export const MegaMenu = forwardRef<HTMLDivElement, MegaMenuProps>(
   ({ children, className = '', style, disabled = false }, ref) => {
     return (
       <div ref={ref} className={`c-menu c-menu--mega ${className}`} style={style}>
@@ -31,7 +31,9 @@ export const MegaMenu: React.FC<MegaMenuProps> = forwardRef<HTMLDivElement, Mega
   }
 );
 
-export const MegaMenuColumn: React.FC<MegaMenuColumnProps> = forwardRef<
+MegaMenu.displayName = 'MegaMenu';
+
+export const MegaMenuColumn = forwardRef<
   HTMLDivElement,
   MegaMenuColumnProps
 >(({ title, icon, children, width = 'auto', className = '', disabled = false }, ref) => {
@@ -80,7 +82,9 @@ export const MegaMenuColumn: React.FC<MegaMenuColumnProps> = forwardRef<
   );
 });
 
-export const MegaMenuLink: React.FC<MegaMenuLinkProps> = forwardRef<
+MegaMenuColumn.displayName = 'MegaMenuColumn';
+
+export const MegaMenuLink = forwardRef<
   HTMLAnchorElement,
   MegaMenuLinkProps
 >(({ href, children, className = '', disabled = false, onClick }, ref) => {
@@ -107,3 +111,5 @@ export const MegaMenuLink: React.FC<MegaMenuLinkProps> = forwardRef<
     </a>
   );
 });
+
+MegaMenuLink.displayName = 'MegaMenuLink';

package/src/components/Navigation/Menu/Menu.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, ReactNode } from 'react';
 import { MenuProps, MenuItemProps } from '../../../lib/types/components';
 import { Icon } from '../../Icon/Icon';
 
-export const Menu: React.FC<MenuProps> = forwardRef<HTMLDivElement, MenuProps>(
+export const Menu = forwardRef<HTMLDivElement, MenuProps>(
   ({ children, className = '', style, disabled = false }, ref) => {
     return (
       <div ref={ref} className={`c-menu ${className}`} style={style}>
@@ -24,6 +24,8 @@ export const Menu: React.FC<MenuProps> = forwardRef<HTMLDivElement, MenuProps>(
   }
 );
 
+Menu.displayName = 'Menu';
+
 export type { MenuProps, MenuItemProps, MenuDividerProps };
 
 export default Menu;
@@ -35,7 +37,7 @@ interface MenuDividerProps {
   className?: string;
 }
 
-export const MenuItem: React.FC<MenuItemProps> = forwardRef<HTMLLIElement, MenuItemProps>(
+export const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
   (
     { children, href = '#', icon, active = false, disabled = false, onClick, className = '' },
     ref
@@ -83,6 +85,8 @@ export const MenuItem: React.FC<MenuItemProps> = forwardRef<HTMLLIElement, MenuI
   }
 );
 
+MenuItem.displayName = 'MenuItem';
+
 // Map icon-lux names to Phosphor icon names
 export const mapIconName = (luxIconName: string): any => {
   const iconMap: Record<string, any> = {
@@ -104,8 +108,10 @@ export const mapIconName = (luxIconName: string): any => {
   return iconMap[luxIconName] || 'Circle'; // Default to Circle if no mapping found
 };
 
-export const MenuDivider: React.FC<MenuDividerProps> = forwardRef<HTMLLIElement, MenuDividerProps>(
+export const MenuDivider = forwardRef<HTMLLIElement, MenuDividerProps>(
   ({ className = '' }, ref) => {
     return <li ref={ref} className={`c-menu__divider ${className}`} role="separator"></li>;
   }
 );
+
+MenuDivider.displayName = 'MenuDivider';

package/src/components/Pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { PaginationProps } from '../../lib/types/components';
 import { usePagination, DOTS } from '../../lib/composables/usePagination';
 import { PAGINATION_DEFAULTS } from '../../lib/constants/components';
@@ -26,7 +26,7 @@ interface PaginationNavButtonProps {
 /**
  * PaginationNavButton component for rendering first, previous, next, and last buttons
  */
-export const PaginationNavButton: React.FC<PaginationNavButtonProps> = ({
+export const PaginationNavButton: React.FC<PaginationNavButtonProps> = memo(({
   type,
   onClick,
   disabled,
@@ -47,12 +47,12 @@ export const PaginationNavButton: React.FC<PaginationNavButtonProps> = ({
       <Icon name={iconName} size="sm" aria-hidden="true" />
     </button>
   </li>
-);
+));
 
 /**
  * Pagination component
  */
-export const Pagination: React.FC<PaginationProps> = ({
+export const Pagination: React.FC<PaginationProps> = memo(({
   currentPage = PAGINATION_DEFAULTS.currentPage,
   totalPages = PAGINATION_DEFAULTS.totalPages,
   onPageChange,
@@ -178,10 +178,11 @@ export const Pagination: React.FC<PaginationProps> = ({
   }
 
   return paginationContent;
-};
+});
 
 export type { PaginationProps };
 
 Pagination.displayName = 'Pagination';
+PaginationNavButton.displayName = 'PaginationNavButton';
 
 export default Pagination;

package/src/components/PhotoViewer/PhotoViewerImage.tsx

@@ -5,7 +5,7 @@ import React, { useRef, useEffect, useState } from 'react';
  */
 export interface PhotoViewerImageProps {
   /** Ref to the image element */
-  imageRef: React.RefObject<HTMLImageElement | null>;
+  imageRef: React.RefObject<HTMLImageElement>;
   /** Ref to the container element */
   containerRef?: React.RefObject<HTMLDivElement | null>;
   /** Image source URL */
@@ -134,7 +134,7 @@ export const PhotoViewerImage: React.FC<PhotoViewerImageProps> = ({
 
   return (
     <div
-      ref={effectiveContainerRef}
+      ref={effectiveContainerRef as React.LegacyRef<HTMLDivElement>}
       className={`c-photo-viewer__image-container ${isTransitioning ? 'is-transitioning' : ''}`}
       style={{
         cursor: isDragging ? 'grabbing' : zoomLevel > 1 ? 'grab' : 'default',

package/src/components/Popover/Popover.tsx

@@ -117,10 +117,8 @@ export const Popover: React.FC<PopoverProps> = ({
 /**
  * PopoverTrigger component to wrap the element that triggers the popover
  */
-export const PopoverTrigger: React.FC<PopoverTriggerProps> = forwardRef<
-  HTMLElement,
-  PopoverTriggerProps
->(({ children, trigger: triggerProp }, ref) => {
+export const PopoverTrigger = forwardRef<HTMLElement, PopoverTriggerProps>(
+  ({ children, trigger: triggerProp }, ref) => {
   const { isOpen, setIsOpen, triggerRef, popoverId, triggerType } =
     React.useContext(PopoverContext);
 
@@ -159,6 +157,8 @@ export const PopoverTrigger: React.FC<PopoverTriggerProps> = forwardRef<
   return React.cloneElement(child, triggerProps);
 });
 
+PopoverTrigger.displayName = 'PopoverTrigger';
+
 export type { PopoverProps, PopoverTriggerProps };
 
 Popover.displayName = 'Popover';

package/src/components/Progress/Progress.tsx

@@ -1,10 +1,11 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { ProgressProps } from '../../lib/types/components';
 import { useProgress } from '../../lib/composables/useProgress';
 import { PROGRESS } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
+export const Progress = memo(
+  forwardRef<HTMLDivElement, ProgressProps>(
   (
     {
       value,
@@ -54,8 +55,11 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
 
     return progressContent;
   }
+  )
 );
 
+Progress.displayName = 'Progress';
+
 export type { ProgressProps };
 
 export default Progress;

package/src/components/Rating/Rating.tsx

@@ -54,6 +54,9 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
         onChange,
       });
 
+    // Create forked ref - must be called unconditionally
+    const forkedRef = useForkRef(internalRef, ref);
+
     // Handle mouse enter on star with half-star support
     const handleMouseEnter = useCallback(
       (e: React.MouseEvent, starValue: number) => {
@@ -171,7 +174,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     // If using vanilla JS, just render the container
     if (useVanillaJS) {
       return (
-        <div className={ratingClasses} ref={useForkRef(internalRef, ref)} id={id} {...restProps}>
+        <div className={ratingClasses} ref={forkedRef} id={id} {...restProps}>
           {/* Stars will be generated by the vanilla JS implementation */}
         </div>
       );
@@ -268,7 +271,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     const ratingContent = (
       <div
         className={ratingClasses}
-        ref={useForkRef(internalRef, ref)}
+        ref={forkedRef}
         id={id}
         style={style}
         data-readonly={readOnly ? 'true' : 'false'}

package/src/components/Slider/Slider.tsx

@@ -25,16 +25,9 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     ...rest
   } = props;
 
-  if (!slides || slides.length === 0) {
-    return (
-      <div className="c-slider c-slider--empty" style={{ height, width, ...style }}>
-        <div className="c-slider__empty-message">No slides available</div>
-      </div>
-    );
-  }
-
+  // Hooks must be called unconditionally - before early return
   const slider = useSlider({
-    slides,
+    slides: slides || [],
     slidesToShow,
     spaceBetween,
     loop,
@@ -72,6 +65,14 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
     return allSlides.length * (slideWidth + spaceBetween) - spaceBetween;
   }, [allSlides.length, slideWidth, spaceBetween]);
 
+  if (!slides || slides.length === 0) {
+    return (
+      <div className="c-slider c-slider--empty" style={{ height, width, ...style }}>
+        <div className="c-slider__empty-message">No slides available</div>
+      </div>
+    );
+  }
+
   const containerClasses = [
     'c-slider',
     direction === 'vertical' && 'c-slider--vertical',

package/src/components/Spinner/Spinner.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { SpinnerProps } from '../../lib/types/components';
 import { useSpinner } from '../../lib/composables/useSpinner';
 import { SPINNER } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Spinner: React.FC<SpinnerProps> = ({
+export const Spinner: React.FC<SpinnerProps> = memo(({
   size = 'md',
   variant = 'primary',
   fullscreen = false,
@@ -43,7 +43,7 @@ export const Spinner: React.FC<SpinnerProps> = ({
   }
 
   return spinnerContent;
-};
+});
 
 export type { SpinnerProps };
 

package/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ReactNode } from 'react';
+import React, { useState, ReactNode, memo } from 'react';
 import { TAB } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
@@ -61,7 +61,7 @@ export interface TabsProps {
 /**
  * Tabs component for switching between different content panels
  */
-export const Tabs: React.FC<TabsProps> = ({
+export const Tabs: React.FC<TabsProps> = memo(({
   items,
   activeIndex = TAB.DEFAULTS.ACTIVE_INDEX,
   onTabChange,
@@ -137,7 +137,7 @@ export const Tabs: React.FC<TabsProps> = ({
   }
 
   return tabContent;
-};
+});
 
 Tabs.displayName = 'Tabs';
 

package/src/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, memo } from 'react';
 import { TOOLTIP } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { AtomixGlassProps } from '../../lib/types/components';
@@ -60,7 +60,7 @@ export interface TooltipProps {
   glass?: AtomixGlassProps | boolean;
 }
 
-export const Tooltip: React.FC<TooltipProps> = ({
+export const Tooltip: React.FC<TooltipProps> = memo(({
   content,
   children,
   position = TOOLTIP.DEFAULTS.POSITION,
@@ -162,7 +162,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       )}
     </div>
   );
-};
+});
 
 Tooltip.displayName = 'Tooltip';
 

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export type { SliderProps, VideoPlayerProps } from '../lib/types/components';
-export { default as Accordion, type AccordionProps } from './Accordion/Accordion';
+export { default as Accordion } from './Accordion/Accordion';
+export type { AccordionProps } from '../lib/types/components';
 export { default as AtomixLogo, type AtomixLogoProps } from './AtomixLogo/AtomixLogo';
 export { default as AtomixGlass, type AtomixGlassProps } from './AtomixGlass';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
@@ -37,7 +38,7 @@ export {
   type BubbleDataPoint,
   type CandlestickChartProps,
   type CandlestickDataPoint,
-  type ChartProps,
+  // ChartProps exported separately from lib/types/components to avoid conflict
   type DonutChartProps,
   type FunnelChartProps,
   type FunnelDataPoint,
@@ -56,6 +57,8 @@ export {
   type WaterfallChartProps,
   type WaterfallDataPoint,
 } from './Chart';
+// Export ChartProps from lib/types/components to avoid duplicate export conflict
+export type { ChartProps } from '../lib/types/components';
 export {
   default as ColorModeToggle,
   type ColorModeToggleProps,

package/src/layouts/MasonryGrid/MasonryGrid.tsx

@@ -374,7 +374,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
           const position = positions[index];
           if (!position) {
             return (
-              <div key={item.id} ref={item.ref} style={{ opacity: 0, position: 'absolute' }}>
+              <div key={item.id} ref={item.ref as React.LegacyRef<HTMLDivElement>} style={{ opacity: 0, position: 'absolute' }}>
                 {item.element}
               </div>
             );
@@ -382,7 +382,7 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
           return (
             <div
               key={item.id}
-              ref={item.ref}
+              ref={item.ref as React.LegacyRef<HTMLDivElement>}
               className="o-masonry-grid__item"
               style={{
                 position: 'absolute',