@shohojdhara/atomix 0.3.4 → 0.3.5

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 };
 

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;