@shohojdhara/atomix 0.5.1 → 0.5.4

package/src/components/Button/Button.tsx

@@ -5,6 +5,7 @@ import { Spinner } from '../Spinner/Spinner';
 import { Icon, type PhosphorIconsType } from '../Icon/Icon';
 import { BUTTON, THEME_NAMING } from '../../lib/constants/components';
 import { ThemeNaming } from '../../lib/utils/themeNaming';
+import { renderSlot } from '../../lib/patterns';
 
 export type ButtonAsProp = {
   as?: ElementType;
@@ -52,6 +53,7 @@ export const Button = React.memo(
         tabIndex,
         style,
         linkComponent,
+        slots,
         ...props
       },
       ref
@@ -161,17 +163,34 @@ export const Button = React.memo(
               )}
               aria-hidden="true"
             >
-              <Spinner
-                size={spinnerSize}
-                variant={
-                  variant === 'link' ||
-                  (typeof variant === 'string' && variant.startsWith('outline-'))
-                    ? 'primary'
-                    : variant === 'danger'
-                      ? 'error'
-                      : (variant as any)
-                }
-              />
+              {renderSlot(
+                slots?.spinner,
+                {
+                  className: ThemeNaming.bemClass(
+                    THEME_NAMING.BUTTON_PREFIX,
+                    THEME_NAMING.SPINNER_ELEMENT
+                  ),
+                  size: spinnerSize,
+                  variant:
+                    variant === 'link' ||
+                    (typeof variant === 'string' && variant.startsWith('outline-'))
+                      ? 'primary'
+                      : variant === 'danger'
+                        ? 'error'
+                        : (variant as any),
+                } as any,
+                <Spinner
+                  size={spinnerSize}
+                  variant={
+                    variant === 'link' ||
+                    (typeof variant === 'string' && variant.startsWith('outline-'))
+                      ? 'primary'
+                      : variant === 'danger'
+                        ? 'error'
+                        : (variant as any)
+                  }
+                />
+              )}
             </span>
           )}
           {iconElement && !loading && (
@@ -182,7 +201,18 @@ export const Button = React.memo(
               )}
               aria-hidden="true"
             >
-              {iconElement}
+              {renderSlot(
+                slots?.icon,
+                {
+                  className: ThemeNaming.bemClass(
+                    THEME_NAMING.BUTTON_PREFIX,
+                    THEME_NAMING.ICON_ELEMENT
+                  ),
+                  children: iconElement,
+                  size: iconSize,
+                } as any,
+                iconElement
+              )}
             </span>
           )}
           {!iconOnly && buttonText && (
@@ -192,7 +222,17 @@ export const Button = React.memo(
                 THEME_NAMING.LABEL_ELEMENT
               )}
             >
-              {buttonText}
+              {renderSlot(
+                slots?.label,
+                {
+                  className: ThemeNaming.bemClass(
+                    THEME_NAMING.BUTTON_PREFIX,
+                    THEME_NAMING.LABEL_ELEMENT
+                  ),
+                  children: buttonText,
+                } as any,
+                buttonText
+              )}
             </span>
           )}
         </>
@@ -218,48 +258,65 @@ export const Button = React.memo(
 
       let content: React.ReactElement;
 
-      // Render as anchor if href is provided
-      if (shouldRenderAsLink) {
-        // Use custom linkComponent if provided (e.g., Next.js Link)
-        if (linkComponent) {
-          const LinkComp = linkComponent as React.ComponentType<any>;
-          const linkProps = {
-            ...buttonProps,
-            ref: ref as any, // linkComponent usually forwards ref to anchor
-            href: isDisabled ? undefined : href,
-            to: isDisabled ? undefined : href,
-            target,
-            rel: target === '_blank' ? 'noopener noreferrer' : undefined,
-          };
+      // Render the button content using the root slot if provided
+      const buttonChildren = renderSlot(
+        slots?.root,
+        {
+          className: buttonClass,
+          children: buttonContent,
+          disabled: isDisabled,
+          loading: loading,
+          onClick: handleClickEvent,
+          type: type,
+          'aria-label': safeAriaLabel,
+          'aria-disabled': isDisabled,
+          'aria-busy': loading,
+        } as any,
+        (() => {
+          // Render as anchor if href is provided
+          if (shouldRenderAsLink) {
+            // Use custom linkComponent if provided (e.g., Next.js Link)
+            if (linkComponent) {
+              const LinkComp = linkComponent as React.ComponentType<any>;
+              const linkProps = {
+                ...buttonProps,
+                ref: ref as any, // linkComponent usually forwards ref to anchor
+                href: isDisabled ? undefined : href,
+                to: isDisabled ? undefined : href,
+                target,
+                rel: target === '_blank' ? 'noopener noreferrer' : undefined,
+              };
 
-          content = <LinkComp {...linkProps}>{buttonContent}</LinkComp>;
-        } else {
-          // Fallback to regular anchor tag
-          content = (
-            <a
-              {...buttonProps}
-              ref={ref as React.Ref<HTMLAnchorElement>}
-              href={isDisabled ? undefined : href}
-              target={target}
-              rel={target === '_blank' ? 'noopener noreferrer' : undefined}
-            >
-              {buttonContent}
-            </a>
-          );
-        }
-      } else {
-        // Default button rendering
-        content = (
-          <Component
-            {...buttonProps}
-            ref={ref}
-            type={Component === 'button' ? type : undefined}
-            disabled={isDisabled}
-          >
-            {buttonContent}
-          </Component>
-        );
-      }
+              return <LinkComp {...linkProps}>{buttonContent}</LinkComp>;
+            } else {
+              // Fallback to regular anchor tag
+              return (
+                <a
+                  {...buttonProps}
+                  ref={ref as React.Ref<HTMLAnchorElement>}
+                  href={isDisabled ? undefined : href}
+                  target={target}
+                  rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+                >
+                  {buttonContent}
+                </a>
+              );
+            }
+          } else {
+            // Default button rendering
+            return (
+              <Component
+                {...buttonProps}
+                ref={ref}
+                type={Component === 'button' ? type : undefined}
+                disabled={isDisabled}
+              >
+                {buttonContent}
+              </Component>
+            );
+          }
+        })()
+      );
 
       if (glass) {
         // Default glass props
@@ -270,10 +327,10 @@ export const Button = React.memo(
           elasticity: 0,
         };
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-        return <AtomixGlass {...glassProps}>{content}</AtomixGlass>;
+        return <AtomixGlass {...glassProps}>{buttonChildren}</AtomixGlass>;
       }
 
-      return content;
+      return buttonChildren;
     }
   )
 );
@@ -282,4 +339,4 @@ Button.displayName = 'Button';
 
 export type { ButtonProps };
 
-export default Button;
+export default Button;

package/src/components/Callout/Callout.tsx

@@ -89,8 +89,7 @@ type CalloutComponent = React.FC<CalloutProps> & {
   Content: typeof CalloutContent;
 };
 
-export const Callout: CalloutComponent = memo(
-  ({
+const CalloutComponentBase = ({
     title,
     children,
     icon,
@@ -212,8 +211,9 @@ export const Callout: CalloutComponent = memo(
         {calloutContent}
       </div>
     );
-  }
-) as unknown as CalloutComponent;
+};
+
+export const Callout = memo(CalloutComponentBase) as unknown as CalloutComponent;
 
 Callout.displayName = 'Callout';
 

package/src/components/Chart/ChartRenderer.tsx

@@ -273,7 +273,7 @@ const ChartRenderer = memo(
       const transform = useMemo(() => {
         if (!chartContext) return '';
         return `translate(${chartContext.panOffset.x}px, ${chartContext.panOffset.y}px) scale(${chartContext.zoomLevel})`;
-      }, [chartContext?.panOffset.x, chartContext?.panOffset.y, chartContext?.zoomLevel]);
+      }, [chartContext]);
 
       // Calculate chart data with enhanced features using responsive dimensions
       // This MUST be called before any early returns to maintain consistent hook order

package/src/components/Chart/DonutChart.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo, useMemo } from 'react';
 import BaseChart from './BaseChart';
 import ChartTooltip from './ChartTooltip';
 import { PieChartProps } from './PieChart';
-import { ChartDataPoint, ChartRenderContentParams } from './types';
+import { ChartDataPoint, ChartRenderContentParams, ChartDataset } from './types';
 
 interface DonutChartProps extends Omit<PieChartProps, 'type'> {
   /**
@@ -63,15 +63,18 @@ const DonutChart = memo(
       ref
     ) => {
       // Use the first dataset for donut chart
-      const dataset = datasets.length > 0 ? datasets[0] : { label: '', data: [] };
+      const dataset = useMemo(
+        () => (datasets.length > 0 ? (datasets[0] as ChartDataset) : { label: '', data: [] as ChartDataPoint[] }),
+        [datasets]
+      );
 
       // Prepare data for donut chart (calculations will be done in renderContent with actual dimensions)
       const chartData = useMemo(() => {
         if (!dataset?.data?.length) return null;
 
         // Filter out invalid data points
-        const validDataPoints = dataset?.data?.filter(
-          point =>
+        const validDataPoints = (dataset?.data || []).filter(
+          (point: ChartDataPoint) =>
             typeof point.value === 'number' &&
             !isNaN(point.value) &&
             isFinite(point.value) &&
@@ -117,16 +120,16 @@ const DonutChart = memo(
 
         const chartColors = dataset?.color
           ? [dataset.color]
-          : dataset?.data?.map((_, i) => defaultColors[i % defaultColors.length]) || defaultColors;
+          : dataset?.data?.map((_, i: number) => defaultColors[i % defaultColors.length]) || defaultColors;
 
         // Calculate total value
-        const total = chartData.validDataPoints.reduce((sum, point) => sum + point.value, 0);
+        const total = chartData.validDataPoints.reduce((sum: number, point: ChartDataPoint) => sum + point.value, 0);
 
         // Calculate angles for each slice
         const padAngleRad = ((pieOptions.padAngle || 1) * Math.PI) / 180;
         let currentAngle = ((pieOptions.startAngle || 0) * Math.PI) / 180;
 
-        const slices = chartData.validDataPoints.map((point, index) => {
+        const slices = chartData.validDataPoints.map((point: ChartDataPoint, index: number) => {
           const percentage = point.value / total;
           const sliceAngle = percentage * (2 * Math.PI) - padAngleRad;
           const startAngle = currentAngle;
@@ -176,7 +179,7 @@ const DonutChart = memo(
 
         return (
           <>
-            {slices.map((slice, index) => {
+            {slices.map((slice: any, index: number) => {
               const isHovered = hoveredPoint?.pointIndex === index;
 
               return (

package/src/components/EdgePanel/EdgePanel.tsx

@@ -33,19 +33,20 @@ export const EdgePanelFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<H
 );
 EdgePanelFooter.displayName = 'EdgePanelFooter';
 
-export const EdgePanelCloseButton = forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
-  ({ className = '', onClick, ...props }, ref) => (
-    <button
-      ref={ref}
-      className={`c-edge-panel__close c-btn c-btn--icon ${className}`.trim()}
-      onClick={onClick}
-      aria-label="Close panel"
-      {...props}
-    >
-      <Icon name="X" />
-    </button>
-  )
-);
+export const EdgePanelCloseButton = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ className = '', onClick, ...props }, ref) => (
+  <button
+    ref={ref}
+    className={`c-edge-panel__close c-btn c-btn--icon ${className}`.trim()}
+    onClick={onClick}
+    aria-label="Close panel"
+    {...props}
+  >
+    <Icon name="X" />
+  </button>
+));
 EdgePanelCloseButton.displayName = 'EdgePanelCloseButton';
 
 /**
@@ -82,113 +83,116 @@ type EdgePanelComponent = React.FC<EdgePanelProps> & {
   CloseButton: typeof EdgePanelCloseButton;
 };
 
-export const EdgePanel: EdgePanelComponent = memo(
-  ({
-    title,
-    children,
-    position = 'start',
-    mode = 'slide',
-    isOpen = false,
+const EdgePanelComponentBase = ({
+  title,
+  children,
+  position = 'start',
+  mode = 'slide',
+  isOpen = false,
+  onOpenChange,
+  backdrop = true,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  className = '',
+  style,
+  glass,
+}: EdgePanelProps) => {
+  const {
+    isOpen: isOpenState,
+    containerRef,
+    backdropRef,
+    generateEdgePanelClass,
+    closePanel,
+    handleBackdropClick,
+  } = useEdgePanel({
+    position,
+    mode,
+    isOpen,
     onOpenChange,
-    backdrop = true,
-    closeOnBackdropClick = true,
-    closeOnEscape = true,
-    className = '',
-    style,
+    backdrop,
+    closeOnBackdropClick,
+    closeOnEscape,
     glass,
-  }: EdgePanelProps) => {
-    const {
-      isOpen: isOpenState,
-      containerRef,
-      backdropRef,
-      generateEdgePanelClass,
-      closePanel,
-      handleBackdropClick,
-    } = useEdgePanel({
-      position,
-      mode,
-      isOpen,
-      onOpenChange,
-      backdrop,
-      closeOnBackdropClick,
-      closeOnEscape,
-      glass,
-    });
-
-    // Moved useRef outside of conditional rendering to fix hook order issue
-    const glassContentRef = useRef<HTMLDivElement>(null);
-
-    const panelClass = generateEdgePanelClass({
-      position,
-      isOpen,
-      className: glass ? `${className} c-edge-panel--glass` : className,
-    });
-
-    // If not open and not controlled by parent, don't render
-    // Note: useEdgePanel manages internal state if onOpenChange is not provided?
-    // Looking at useEdgePanel (implied): it seems to return isOpenState.
-    // If we return null here, animations might be cut off.
-    // Usually EdgePanel/Drawer should stay mounted but hidden or conditionally mounted.
-    // The original code returned null if !isOpenState && isOpen === false.
-    // Let's keep that logic.
-    if (!isOpenState && isOpen === false) {
-      return null;
-    }
-
-    const defaultGlassProps = {
-      elasticity: 0,
-    };
-
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-
-    // Check for compound components
-    const hasCompoundComponents = React.Children.toArray(children).some((child) =>
+  });
+
+  // Moved useRef outside of conditional rendering to fix hook order issue
+  const glassContentRef = useRef<HTMLDivElement>(null);
+
+  const panelClass = generateEdgePanelClass({
+    position,
+    isOpen,
+    className: glass ? `${className} c-edge-panel--glass` : className,
+  });
+
+  // If not open and not controlled by parent, don't render
+  // Note: useEdgePanel manages internal state if onOpenChange is not provided?
+  // Looking at useEdgePanel (implied): it seems to return isOpenState.
+  // If we return null here, animations might be cut off.
+  // Usually EdgePanel/Drawer should stay mounted but hidden or conditionally mounted.
+  // The original code returned null if !isOpenState && isOpen === false.
+  // Let's keep that logic.
+  if (!isOpenState && isOpen === false) {
+    return null;
+  }
+
+  const defaultGlassProps = {
+    elasticity: 0,
+  };
+
+  const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+  // Check for compound components
+  const hasCompoundComponents = React.Children.toArray(children).some(
+    child =>
       React.isValidElement(child) &&
-      ['EdgePanelHeader', 'EdgePanelBody', 'EdgePanelFooter'].includes((child.type as any).displayName)
-    );
-
-    const panelContent = hasCompoundComponents ? (
-      children
-    ) : (
-      <>
-        <div className="c-edge-panel__header">
-          <h4>{title}</h4>
-          <button
-            className="c-edge-panel__close c-btn c-btn--icon"
-            onClick={() => closePanel()}
-            aria-label="Close panel"
-          >
-            <Icon name="X" />
-          </button>
-        </div>
-        <div className="c-edge-panel__body">{children}</div>
-      </>
-    );
-
-    return (
-      <div className={panelClass} data-position={position} data-mode={mode} style={style}>
-        {backdrop && (
-          <div ref={backdropRef} className="c-edge-panel__backdrop" onClick={handleBackdropClick} />
+      ['EdgePanelHeader', 'EdgePanelBody', 'EdgePanelFooter'].includes(
+        (child.type as any).displayName
+      )
+  );
+
+  const panelContent = hasCompoundComponents ? (
+    children
+  ) : (
+    <>
+      <div className="c-edge-panel__header">
+        <h4>{title}</h4>
+        <button
+          className="c-edge-panel__close c-btn c-btn--icon"
+          onClick={() => closePanel()}
+          aria-label="Close panel"
+        >
+          <Icon name="X" />
+        </button>
+      </div>
+      <div className="c-edge-panel__body">{children}</div>
+    </>
+  );
+
+  return (
+    <div className={panelClass} data-position={position} data-mode={mode} style={style}>
+      {backdrop && (
+        <div ref={backdropRef} className="c-edge-panel__backdrop" onClick={handleBackdropClick} />
+      )}
+      <div ref={containerRef} className="c-edge-panel__container">
+        {glass ? (
+          <AtomixGlass {...glassProps}>
+            <div
+              ref={glassContentRef}
+              className="c-edge-panel__glass-content"
+              style={{ borderRadius: containerRef.current?.style.borderRadius }}
+            >
+              {panelContent}
+            </div>
+          </AtomixGlass>
+        ) : (
+          panelContent
         )}
-        <div ref={containerRef} className="c-edge-panel__container">
-          {glass ? (
-            <AtomixGlass {...glassProps}>
-              <div
-                ref={glassContentRef}
-                className="c-edge-panel__glass-content"
-                style={{ borderRadius: containerRef.current?.style.borderRadius }}
-              >
-                {panelContent}
-              </div>
-            </AtomixGlass>
-          ) : (
-            panelContent
-          )}
-        </div>
       </div>
-    );
-  }
-) as unknown as EdgePanelComponent;
+    </div>
+  );
+};
+
+export const EdgePanel = memo(EdgePanelComponentBase) as unknown as EdgePanelComponent;
 
 EdgePanel.displayName = 'EdgePanel';
 EdgePanel.Header = EdgePanelHeader;

package/src/components/Form/Select.tsx

@@ -12,8 +12,7 @@ export type SelectComponent = React.FC<SelectProps> & {
 /**
  * Select - A component for dropdown selection
  */
-export const Select: SelectComponent = memo(
-  ({
+const SelectComponentBase = ({
     options,
     value,
     onChange,
@@ -314,8 +313,9 @@ export const Select: SelectComponent = memo(
     }
 
     return selectContent;
-  }
-) as unknown as SelectComponent;
+};
+
+export const Select = memo(SelectComponentBase) as unknown as SelectComponent;
 
 export type { SelectProps };
 

package/src/components/List/List.tsx

@@ -9,8 +9,7 @@ export type ListComponent = React.FC<ListProps> & {
   Item: typeof ListItem;
 };
 
-export const List: ListComponent = memo(
-  ({ children, variant = 'default', className = '', style, ...props }: ListProps) => {
+const ListComponentBase = ({ children, variant = 'default', className = '', style, ...props }: ListProps) => {
     // Generate CSS classes
     const listClasses = [LIST.BASE_CLASS, variant !== 'default' && `c-list--${variant}`, className]
       .filter(Boolean)
@@ -34,8 +33,9 @@ export const List: ListComponent = memo(
         })}
       </ListElement>
     );
-  }
-) as unknown as ListComponent;
+};
+
+export const List = memo(ListComponentBase) as unknown as ListComponent;
 
 List.displayName = 'List';
 List.Item = ListItem;

package/src/components/Navigation/SideMenu/SideMenu.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, forwardRef } from 'react';
+import React, { useState, useEffect, useRef, forwardRef, useCallback } from 'react';
 import { SideMenuProps } from '../../../lib/types/components';
 import { useSideMenu } from '../../../lib/composables/useSideMenu';
 import { Icon } from '../../Icon';
@@ -116,16 +116,16 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
           delete nestedInnerRefs.current[index];
         }
       });
-    }, [menuItems?.length]);
+    }, [menuItems]);
 
     // Helper function to update nested wrapper height
-    const updateNestedHeight = (index: number, isOpen: boolean) => {
+    const updateNestedHeight = useCallback((index: number, isOpen: boolean) => {
       const wrapper = nestedWrapperRefs.current[index];
       const inner = nestedInnerRefs.current[index];
       if (wrapper && inner) {
         wrapper.style.height = isOpen ? `${inner.scrollHeight}px` : '0px';
       }
-    };
+    }, []);
 
     // Set initial heights for nested wrappers on mount and when menuItems change
     useEffect(() => {
@@ -141,7 +141,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       return () => clearTimeout(timeoutId);
       // Only run when menuItems change, nestedItemStates is read but not in deps to avoid loops
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [menuItems?.length]);
+    }, [menuItems, updateNestedHeight]);
 
     // Update nested wrapper heights when state changes
     useEffect(() => {
@@ -162,7 +162,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       return () => {
         frameIds.forEach(id => cancelAnimationFrame(id));
       };
-    }, [nestedItemStates, menuItems?.length]);
+    }, [nestedItemStates, menuItems, updateNestedHeight]);
 
     // Combine refs using utility
     const combinedRef = useForkRef(sideMenuRef, ref);

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>;
+  imageRef: React.RefObject<HTMLImageElement | null>;
   /** Ref to the container element */
   containerRef?: React.RefObject<HTMLDivElement | null>;
   /** Image source URL */