@shohojdhara/atomix 0.3.3 → 0.3.5

package/src/components/Accordion/Accordion.tsx

@@ -1,61 +1,12 @@
-import React, { ReactNode, useId } from 'react';
+import React, { ReactNode, useId, memo } from 'react';
 import { ACCORDION } from '../../lib/constants/components';
 import { useAccordion } from '../../lib/composables/useAccordion';
-import { BaseComponentProps, IconPosition, AtomixGlassProps } from '../../lib/types/components';
+import type { AccordionProps as AccordionPropsType, AtomixGlassProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-/**
- * Accordion component for showing/hiding content panels
- */
-export interface AccordionProps extends BaseComponentProps {
-  /**
-   * Title of the accordion
-   */
-  title: string;
+export type AccordionProps = AccordionPropsType;
 
-  /**
-   * Content to be shown when accordion is expanded
-   */
-  children: ReactNode;
-
-  /**
-   * Whether the accordion is initially open
-   */
-  defaultOpen?: boolean;
-
-  /**
-   * Position of the icon (right or left)
-   */
-  iconPosition?: IconPosition;
-
-  /**
-   * Custom icon for the accordion
-   */
-  icon?: ReactNode;
-
-  /**
-   * Controlled open state (overrides defaultOpen)
-   */
-  isOpen?: boolean;
-
-  /**
-   * Callback when open state changes (for controlled mode)
-   */
-  onOpenChange?: (open: boolean) => void;
-
-  /**
-   * Glass morphism effect for the accordion
-   * Can be a boolean to enable with default settings, or an object with AtomixGlassProps to customize the effect
-   */
-  glass?: AtomixGlassProps | boolean;
-
-  /**
-   * Custom style for the accordion
-   */
-  style?: React.CSSProperties;
-}
-
-export const Accordion: React.FC<AccordionProps> = ({
+export const Accordion: React.FC<AccordionProps> = memo(({
   title,
   children,
   defaultOpen = false,
@@ -159,7 +110,7 @@ export const Accordion: React.FC<AccordionProps> = ({
   }
 
   return accordionContent;
-};
+});
 
 // Set display name for debugging
 Accordion.displayName = 'Accordion';

package/src/components/Accordion/index.ts

@@ -1,3 +1,3 @@
 export { Accordion } from './Accordion';
 export { default } from './Accordion';
-export type { AccordionProps } from './Accordion';
+export type { AccordionProps } from '../../lib/types/components';

package/src/components/Avatar/Avatar.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import React, { useState, memo } from 'react';
 import { AvatarProps } from '../../lib/types/components';
 import { AVATAR } from '../../lib/constants/components';
 import { Icon } from '../Icon/Icon';
 
-export const Avatar: React.FC<AvatarProps> = ({
+export const Avatar: React.FC<AvatarProps> = memo(({
   src,
   alt = 'Avatar',
   initials,
@@ -62,7 +62,7 @@ export const Avatar: React.FC<AvatarProps> = ({
       )}
     </div>
   );
-};
+});
 
 Avatar.displayName = 'Avatar';
 

package/src/components/Badge/Badge.tsx

@@ -1,10 +1,10 @@
-import React, { useRef } from 'react';
+import React, { useRef, memo } from 'react';
 import { useBadge } from '../../lib/composables/useBadge';
 import { BADGE } from '../../lib/constants/components';
 import { BadgeProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Badge: React.FC<BadgeProps> = ({
+export const Badge: React.FC<BadgeProps> = memo(({
   label,
   variant = 'primary',
   size = 'md',
@@ -53,7 +53,7 @@ export const Badge: React.FC<BadgeProps> = ({
   }
 
   return badgeElement;
-};
+});
 
 Badge.displayName = 'Badge';
 

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, memo } from 'react';
 import { BREADCRUMB } from '../../lib/constants/components';
 
 export interface BreadcrumbItem {
@@ -69,7 +69,7 @@ export interface BreadcrumbProps {
    */
   style?: React.CSSProperties;
 }
-export const Breadcrumb: React.FC<BreadcrumbProps> = ({
+export const Breadcrumb: React.FC<BreadcrumbProps> = memo(({
   items,
   divider,
   className = '',
@@ -129,7 +129,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
       </ol>
     </nav>
   );
-};
+});
 
 Breadcrumb.displayName = 'Breadcrumb';
 

package/src/components/Button/Button.tsx

@@ -10,6 +10,7 @@ export type ButtonAsProp = {
   as?: ElementType;
   to?: string;
   href?: string;
+  LinkComponent?: React.ComponentType<any>;
   [key: string]: any;
 };
 
@@ -50,6 +51,7 @@ export const Button = React.memo(
         ariaControls,
         tabIndex,
         style,
+        LinkComponent,
         ...props
       },
       ref
@@ -253,6 +255,39 @@ export const Button = React.memo(
           type: undefined, 
           disabled: undefined,
         };
+        
+        // Use custom LinkComponent if provided (e.g., Next.js Link)
+        if (LinkComponent) {
+          const LinkComp = LinkComponent as React.ComponentType<any>;
+          const linkProps = {
+            ...anchorButtonProps,
+            ref: ref as React.Ref<HTMLAnchorElement>,
+            href,
+            target,
+            rel: target === '_blank' ? 'noopener noreferrer' : undefined,
+          };
+          
+          const linkElement = (
+            <LinkComp {...linkProps}>
+              {buttonContent}
+            </LinkComp>
+          );
+
+          if (glass) {
+            const defaultGlassProps = {
+              displacementScale: 20,
+              blurAmount: 0,
+              saturation: 200,
+              elasticity: 0,
+            };
+            const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+            return <AtomixGlass {...glassProps}>{linkElement}</AtomixGlass>;
+          }
+
+          return linkElement;
+        }
+
+        // Fallback to regular anchor tag
         const anchorElement = (
           <a {...anchorButtonProps} ref={ref as React.Ref<HTMLAnchorElement>} href={href} target={target} rel={target === '_blank' ? 'noopener noreferrer' : undefined}>
             {buttonContent}
@@ -300,4 +335,4 @@ Button.displayName = 'Button';
 
 export type { ButtonProps };
 
-export default Button;
+export default Button;

package/src/components/Card/ElevationCard.tsx

@@ -24,7 +24,7 @@ export const ElevationCard: React.FC<ElevationCardProps> = ({
   return (
     <div
       className={`${className} ${cardProps.className}`}
-      ref={cardProps.ref}
+      ref={cardProps.ref as React.LegacyRef<HTMLDivElement>}
       style={style}
       tabIndex={cardProps.tabIndex}
       role={cardProps.role}

package/src/components/Chart/AnimatedChart.tsx

@@ -45,6 +45,22 @@ const AnimatedChart = memo(
         }>
       >([]);
 
+      // Animation time tracking - moved outside callback
+      useEffect(() => {
+        const animateFrame = (timestamp: number) => {
+          timeRef.current = timestamp;
+          animationRef.current = requestAnimationFrame(animateFrame);
+        };
+
+        animationRef.current = requestAnimationFrame(animateFrame);
+
+        return () => {
+          if (animationRef.current) {
+            cancelAnimationFrame(animationRef.current);
+          }
+        };
+      }, []);
+
       const renderContent = useCallback(
         ({
           scales,
@@ -57,21 +73,6 @@ const AnimatedChart = memo(
         }: ChartRenderContentParams) => {
           // Use toolbar state if available, fallback to config for backward compatibility
           const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? true;
-          // Animation time tracking
-          useEffect(() => {
-            const animateFrame = (timestamp: number) => {
-              timeRef.current = timestamp;
-              animationRef.current = requestAnimationFrame(animateFrame);
-            };
-
-            animationRef.current = requestAnimationFrame(animateFrame);
-
-            return () => {
-              if (animationRef.current) {
-                cancelAnimationFrame(animationRef.current);
-              }
-            };
-          }, []);
 
           if (!chartDatasets.length) return null;
 
@@ -117,7 +118,7 @@ const AnimatedChart = memo(
 
               case 'area':
               case 'line':
-              default:
+              default: {
                 // Create animated line/area
                 const points = dataset.data.map((point: any, pointIndex: number) => ({
                   x: padding + (pointIndex / (dataset.data.length - 1)) * chartWidth,
@@ -181,6 +182,7 @@ const AnimatedChart = memo(
                   });
                 }
                 break;
+              }
             }
           });
 
@@ -213,7 +215,7 @@ const AnimatedChart = memo(
       return (
         <BaseChart
           ref={ref}
-          type="animated"
+          type="line"
           datasets={datasets}
           config={config}
           renderContent={renderContent}

package/src/components/Chart/AreaChart.tsx

@@ -100,7 +100,11 @@ const AreaChart = memo(
             {showTooltips && hoveredPoint && (
               <ChartTooltip
                 dataPoint={
-                  renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex]
+                  renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] ?? {
+                    label: '',
+                    value: 0,
+                    color: '',
+                  }
                 }
                 datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
                 datasetColor={

package/src/components/Chart/BarChart.tsx

@@ -58,6 +58,7 @@ const BarChart = memo(
           <>
             {barDimensions.map((bar, index) => {
               const dataset = renderedDatasets[bar.datasetIndex];
+              if (!dataset) return null;
               const point = dataset.data?.[bar.pointIndex];
               const color = dataset.color || colors[bar.datasetIndex];
               const isHovered =

package/src/components/Chart/BubbleChart.tsx

@@ -8,7 +8,7 @@ export interface BubbleDataPoint {
   x: number;
   y: number;
   size: number;
-  value?: number;
+  value: number;
   color?: string;
   metadata?: Record<string, any>;
 }
@@ -109,7 +109,7 @@ const BubbleChart = memo(
         hoveredPoint,
         toolbarState,
         config: renderConfig,
-      }: ChartRenderContentParams) => {
+      }: any) => {
         if (!bubbleData.length) return null;
 
         // Use toolbar state if available, fallback to config for backward compatibility
@@ -197,9 +197,10 @@ const BubbleChart = memo(
             {bubbles}
             {showTooltips &&
               hoveredPoint &&
-              hoveredPoint.pointIndex < bubbleData.length && (
+              hoveredPoint.pointIndex < bubbleData.length &&
+              bubbleData[hoveredPoint.pointIndex] && (
                 <ChartTooltip
-                  dataPoint={bubbleData[hoveredPoint.pointIndex]}
+                  dataPoint={bubbleData[hoveredPoint.pointIndex]!}
                   datasetLabel="Bubbles"
                   datasetColor={
                     bubbleData[hoveredPoint.pointIndex]?.color ||
@@ -220,7 +221,7 @@ const BubbleChart = memo(
         <BaseChart
           ref={ref}
           type="bubble"
-          datasets={datasets}
+          datasets={datasets as any}
           config={config}
           renderContent={renderContent}
           onDataPointClick={onDataPointClick}

package/src/components/Chart/ChartToolbar.tsx

@@ -201,6 +201,7 @@ const ChartToolbar = memo(
             document.removeEventListener('mousedown', handleClickOutside);
           };
         }
+        return undefined;
       }, [showExportMenu, showSettingsMenu]);
 
       // Handle keyboard shortcuts

package/src/components/Chart/FunnelChart.tsx

@@ -281,7 +281,7 @@ const FunnelChart = memo(
             <g>{elements}</g>
             {showTooltips && hoveredPoint && funnelData[hoveredPoint.pointIndex] && (
               <ChartTooltip
-                dataPoint={funnelData[hoveredPoint.pointIndex]}
+                dataPoint={funnelData[hoveredPoint.pointIndex]!}
                 datasetLabel="Funnel Data"
                 datasetColor={funnelData[hoveredPoint.pointIndex]?.color || colors[hoveredPoint.pointIndex % colors.length]}
                 position={{

package/src/components/Chart/RadarChart.tsx

@@ -97,6 +97,7 @@ const RadarChart = memo(
         const radius = Math.min(centerX, centerY) * 0.8;
 
         const firstDataset = renderedDatasets[0];
+        if (!firstDataset) return null;
         const dataPoints = firstDataset.data || [];
         const angleStep = (2 * Math.PI) / dataPoints.length;
 
@@ -195,24 +196,28 @@ const RadarChart = memo(
             points.push({ x, y, value, point: dataset.data[i] });
           }
 
-          if (points.length === 0) return null;
+          if (points.length === 0 || !points[0]) return null;
 
           // Generate path
           let path = '';
           if (smooth && points.length > 2) {
             // For smooth curves, we would implement a more complex algorithm
             // For now, we'll just connect the points with straight lines
-            path = `M ${points[0].x},${points[0].y}`;
+            path = `M ${points[0]!.x},${points[0]!.y}`;
             for (let i = 1; i < points.length; i++) {
-              path += ` L ${points[i].x},${points[i].y}`;
+              if (points[i]) {
+                path += ` L ${points[i]!.x},${points[i]!.y}`;
+              }
             }
-            path += ` L ${points[0].x},${points[0].y} Z`;
+            path += ` L ${points[0]!.x},${points[0]!.y} Z`;
           } else {
-            path = `M ${points[0].x},${points[0].y}`;
+            path = `M ${points[0]!.x},${points[0]!.y}`;
             for (let i = 1; i < points.length; i++) {
-              path += ` L ${points[i].x},${points[i].y}`;
+              if (points[i]) {
+                path += ` L ${points[i]!.x},${points[i]!.y}`;
+              }
             }
-            path += ` L ${points[0].x},${points[0].y} Z`;
+            path += ` L ${points[0]!.x},${points[0]!.y} Z`;
           }
 
           return (
@@ -246,9 +251,11 @@ const RadarChart = memo(
                         r={isHovered ? pointRadius * 1.5 : pointRadius}
                         fill={color}
                         className={`c-chart__radar-point ${isHovered ? 'c-chart__radar-point--hovered' : ''}`}
-                        onClick={() =>
-                          handlers.onDataPointClick?.(point.point, datasetIndex, pointIndex)
-                        }
+                        onClick={() => {
+                          if (point.point) {
+                            handlers.onDataPointClick?.(point.point, datasetIndex, pointIndex);
+                          }
+                        }}
                         onMouseEnter={e => {
                           const rect = e.currentTarget.getBoundingClientRect();
                           handlers.onPointHover(
@@ -276,10 +283,10 @@ const RadarChart = memo(
               {dataPaths}
               {axisLabels}
             </g>
-            {showTooltips && hoveredPoint && (
+            {showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
               <ChartTooltip
                 dataPoint={
-                  renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex]
+                  renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
                 }
                 datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
                 datasetColor={

package/src/components/Chart/ScatterChart.tsx

@@ -60,7 +60,7 @@ const ScatterChart = memo(
         renderedDatasets.forEach((dataset: ChartDataset, datasetIndex: number) => {
           const color = dataset.color || colors[datasetIndex % colors.length];
 
-          dataset.data?.forEach((point: ScatterDataPoint, pointIndex: number) => {
+          dataset.data?.forEach((point: any, pointIndex: number) => {
             const x =
               point.x !== undefined
                 ? scales.padding.left + (point.x / 100) * scales.innerWidth
@@ -125,10 +125,10 @@ const ScatterChart = memo(
         return (
           <>
             {points}
-            {showTooltips && hoveredPoint && (
+            {showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
               <ChartTooltip
                 dataPoint={
-                  renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex]
+                  renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
                 }
                 datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
                 datasetColor={

package/src/components/Chart/TreemapChart.tsx

@@ -197,7 +197,7 @@ const TreemapChart = memo(
           switch (scheme) {
             case 'category':
               return colors[index % colors.length];
-            case 'depth':
+            case 'depth': {
               const depthColors = [
                 'var(--atomix-blue-9)',
                 'var(--atomix-blue-6)',
@@ -206,6 +206,7 @@ const TreemapChart = memo(
                 'var(--atomix-blue-2)',
               ];
               return depthColors[Math.min(depth, depthColors.length - 1)];
+            }
             case 'value':
               if (data.length > 0) {
                 const maxValue = Math.max(...data.map(d => d.value));

package/src/components/Chart/WaterfallChart.tsx

@@ -409,4 +409,3 @@ const WaterfallChart = memo(
 
 WaterfallChart.displayName = 'WaterfallChart';
 export default WaterfallChart;
-export type { WaterfallChartProps, WaterfallDataPoint };

package/src/components/Chart/types.ts

@@ -289,9 +289,19 @@ export interface ChartProps extends BaseComponentProps {
 
 /**
  * Chart scales interface
- * Imported from useChart for consistency
  */
-export type { ChartScales } from '../../lib/composables/useChart';
+export interface ChartScales {
+  xScale: (index: number, dataLength?: number) => number;
+  yScale: (value: number) => number;
+  minValue: number;
+  maxValue: number;
+  valueRange: number;
+  innerWidth: number;
+  innerHeight: number;
+  width: number;
+  height: number;
+  padding: { top: number; right: number; bottom: number; left: number };
+}
 
 /**
  * Chart interaction state

package/src/components/Chart/utils.ts

@@ -5,7 +5,8 @@
  * @returns Color string
  */
 export const getColorFromScheme = (colorScheme: string[], index: number): string => {
-  return colorScheme[index % colorScheme.length];
+  const color = colorScheme[index % colorScheme.length];
+  return color || colorScheme[0] || '#000000';
 };
 
 /**
@@ -23,12 +24,12 @@ export const getColorFromValue = (
   colorScheme: string[]
 ): string => {
   if (minValue === maxValue) {
-    return colorScheme[0];
+    return colorScheme[0] || '#000000';
   }
 
   const normalized = (value - minValue) / (maxValue - minValue);
   const index = Math.floor(normalized * (colorScheme.length - 1));
-  return colorScheme[index];
+  return colorScheme[index] || colorScheme[0] || '#000000';
 };
 
 /**

package/src/components/DataTable/DataTable.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, memo } from 'react';
 import { DataTableProps } from '../../lib/types/components';
 import { useDataTable } from '../../lib/composables/useDataTable';
 import { DATA_TABLE_CLASSES } from '../../lib/constants/components';
@@ -19,7 +19,7 @@ import { Pagination } from '../Pagination/Pagination';
  * />
  * ```
  */
-export const DataTable: React.FC<DataTableProps> = ({
+export const DataTable: React.FC<DataTableProps> = memo(({
   data,
   columns,
   className,
@@ -205,7 +205,7 @@ export const DataTable: React.FC<DataTableProps> = ({
       {renderPagination()}
     </div>
   );
-};
+});
 
 export type { DataTableProps };
 

package/src/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback, createContext, useContext, useEffect } from 'react';
+import React, { useRef, useState, useCallback, createContext, useContext, useEffect, memo } from 'react';
 import { DROPDOWN } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import type {
@@ -27,7 +27,7 @@ const DropdownContext = createContext<DropdownContextType>({
 /**
  * DropdownItem component for menu items
  */
-export const DropdownItem: React.FC<DropdownItemProps> = ({
+export const DropdownItem: React.FC<DropdownItemProps> = memo(({
   children,
   href,
   active = false,
@@ -111,26 +111,26 @@ export const DropdownItem: React.FC<DropdownItemProps> = ({
       </button>
     </li>
   );
-};
+});
 
 /**
  * DropdownDivider component for separating groups of items
  */
-export const DropdownDivider: React.FC<DropdownDividerProps> = ({ className = '' }) => {
+export const DropdownDivider: React.FC<DropdownDividerProps> = memo(({ className = '' }) => {
   return <li className={`c-dropdown__divider ${className}`} role="separator" />;
-};
+});
 
 /**
  * DropdownHeader component for section headers
  */
-export const DropdownHeader: React.FC<DropdownHeaderProps> = ({ children, className = '' }) => {
+export const DropdownHeader: React.FC<DropdownHeaderProps> = memo(({ children, className = '' }) => {
   return <li className={`c-dropdown__header ${className}`}>{children}</li>;
-};
+});
 
 /**
  * Dropdown component for creating dropdown menus
  */
-export const Dropdown: React.FC<DropdownProps> = ({
+export const Dropdown: React.FC<DropdownProps> = memo(({
   children,
   menu,
   placement = 'bottom-start',
@@ -370,10 +370,13 @@ export const Dropdown: React.FC<DropdownProps> = ({
       </div>
     </div>
   );
-};
+});
 
 export type { DropdownProps, DropdownItemProps, DropdownDividerProps, DropdownHeaderProps };
 
 Dropdown.displayName = 'Dropdown';
+DropdownItem.displayName = 'DropdownItem';
+DropdownDivider.displayName = 'DropdownDivider';
+DropdownHeader.displayName = 'DropdownHeader';
 
 export default Dropdown;

package/src/components/Footer/FooterSection.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
-import { FooterSectionProps } from '@/lib/types/components';
-import { GridCol } from '@/layouts';
-import { useFooter } from '@/lib/composables/useFooter';
+import { FooterSectionProps } from '../../lib/types/components';
+import { GridCol } from '../../layouts';
+import { useFooter } from '../../lib/composables/useFooter';
 
 /**
  * FooterSection component provides a section within the footer for organizing links and content.

package/src/components/Form/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { CheckboxProps } from '../../lib/types/components';
 import { useCheckbox } from '../../lib/composables/useCheckbox';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -6,7 +6,7 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 /**
  * Checkbox - A component for checkbox inputs
  */
-export const Checkbox: React.FC<CheckboxProps> = ({
+export const Checkbox: React.FC<CheckboxProps> = memo(({
   label,
   checked = false,
   onChange,
@@ -81,7 +81,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   }
 
   return checkboxContent;
-};
+});
 
 export type { CheckboxProps };