@shohojdhara/atomix 0.4.0 → 0.4.2

package/src/components/Callout/Callout.test.tsx

@@ -152,7 +152,7 @@ describe('Callout Component', () => {
 
       expect(glassProps).toMatchObject({
         displacementScale: 30,
-        cornerRadius: 8,
+        borderRadius: 8,
         elasticity: 0,
       });
     });
@@ -162,7 +162,7 @@ describe('Callout Component', () => {
         displacementScale: 60,
         blurAmount: 2,
         saturation: 180,
-        cornerRadius: 12,
+        borderRadius: 12,
       };
 
       render(
@@ -179,7 +179,7 @@ describe('Callout Component', () => {
         displacementScale: 60,
         blurAmount: 2,
         saturation: 180,
-        cornerRadius: 12,
+        borderRadius: 12,
         // Default values from Callout
         elasticity: 0,
       });

package/src/components/Callout/Callout.tsx

@@ -1,85 +1,206 @@
-import React from 'react';
+import React, { memo, forwardRef } from 'react';
 import { CalloutProps } from '../../lib/types/components';
 import { useCallout } from '../../lib/composables/useCallout';
 import { Icon } from '../Icon/Icon';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
+// Subcomponents
+export const CalloutIcon = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-callout__icon ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+CalloutIcon.displayName = 'CalloutIcon';
+
+export const CalloutMessage = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-callout__message ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+CalloutMessage.displayName = 'CalloutMessage';
+
+export const CalloutTitle = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-callout__title ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+CalloutTitle.displayName = 'CalloutTitle';
+
+export const CalloutText = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-callout__text ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+CalloutText.displayName = 'CalloutText';
+
+export const CalloutActions = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-callout__actions ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+CalloutActions.displayName = 'CalloutActions';
+
+export interface CalloutCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+export const CalloutCloseButton = forwardRef<HTMLButtonElement, CalloutCloseButtonProps>(
+  ({ onClick, className = '', ...props }, ref) => (
+    <button
+      ref={ref}
+      className={`c-callout__close-btn ${className}`.trim()}
+      onClick={onClick}
+      aria-label="Close"
+      {...props}
+    >
+      <Icon name="X" size="md" />
+    </button>
+  )
+);
+CalloutCloseButton.displayName = 'CalloutCloseButton';
+
+// Wrapper for content (icon + message)
+export const CalloutContent = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => (
+    <div ref={ref} className={`c-callout__content ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  )
+);
+CalloutContent.displayName = 'CalloutContent';
+
 /**
  * Callout component for displaying important messages, notifications, or alerts
  */
-export const Callout: React.FC<CalloutProps> = ({
-  title,
-  children,
-  icon,
-  variant = 'primary',
-  onClose,
-  actions,
-  compact = false,
-  isToast = false,
-  glass,
-  className,
-  style,
-  ...props
-}) => {
-  const { generateCalloutClass, handleClose } = useCallout({
-    variant,
-    compact,
-    isToast,
+type CalloutComponent = React.FC<CalloutProps> & {
+  Icon: typeof CalloutIcon;
+  Message: typeof CalloutMessage;
+  Title: typeof CalloutTitle;
+  Text: typeof CalloutText;
+  Actions: typeof CalloutActions;
+  CloseButton: typeof CalloutCloseButton;
+  Content: typeof CalloutContent;
+};
+
+export const Callout: CalloutComponent = memo(
+  ({
+    title,
+    children,
+    icon,
+    variant = 'primary',
+    onClose,
+    actions,
+    compact = false,
+    isToast = false,
     glass,
     className,
     style,
-  });
+    ...props
+  }: CalloutProps) => {
+    const { generateCalloutClass, handleClose } = useCallout({
+      variant,
+      compact,
+      isToast,
+      glass,
+      className,
+      style,
+    });
 
-  // Determine appropriate ARIA attributes based on variant
-  const getAriaAttributes = () => {
-    const baseAttributes: Record<string, string> = {
-      role: 'region',
-    };
+    // Determine appropriate ARIA attributes based on variant
+    const getAriaAttributes = () => {
+      const baseAttributes: Record<string, string> = {
+        role: 'region',
+      };
 
-    // For toast notifications or alerts, use appropriate role and live region
-    if (isToast) {
-      baseAttributes.role = 'alert';
-      baseAttributes['aria-live'] = 'polite';
-    } else if (['warning', 'error'].includes(variant)) {
-      baseAttributes.role = 'alert';
-      baseAttributes['aria-live'] = 'assertive';
-    } else if (['info', 'success'].includes(variant)) {
-      baseAttributes.role = 'status';
-      baseAttributes['aria-live'] = 'polite';
-    }
+      // For toast notifications or alerts, use appropriate role and live region
+      if (isToast) {
+        baseAttributes.role = 'alert';
+        baseAttributes['aria-live'] = 'polite';
+      } else if (['warning', 'error'].includes(variant)) {
+        baseAttributes.role = 'alert';
+        baseAttributes['aria-live'] = 'assertive';
+      } else if (['info', 'success'].includes(variant)) {
+        baseAttributes.role = 'status';
+        baseAttributes['aria-live'] = 'polite';
+      }
+
+      return baseAttributes;
+    };
 
-    return baseAttributes;
-  };
+    // Check for compound usage
+    const hasCompoundComponents = React.Children.toArray(children).some((child) =>
+      React.isValidElement(child) &&
+      [
+        'CalloutIcon',
+        'CalloutMessage',
+        'CalloutTitle',
+        'CalloutText',
+        'CalloutActions',
+        'CalloutContent',
+      ].includes((child.type as any).displayName)
+    );
 
-  const calloutContent = (
-    <>
-      <div className="c-callout__content">
-        {icon && <div className="c-callout__icon">{icon}</div>}
-        <div className="c-callout__message">
-          {title && <div className="c-callout__title">{title}</div>}
-          {children && <div className="c-callout__text">{children}</div>}
+    const calloutContent = hasCompoundComponents ? (
+      children
+    ) : (
+      <>
+        <div className="c-callout__content">
+          {icon && <div className="c-callout__icon">{icon}</div>}
+          <div className="c-callout__message">
+            {title && <div className="c-callout__title">{title}</div>}
+            {children && <div className="c-callout__text">{children}</div>}
+          </div>
         </div>
-      </div>
 
-      {actions && <div className="c-callout__actions">{actions}</div>}
-
-      {onClose && (
-        <button className="c-callout__close-btn" onClick={handleClose(onClose)} aria-label="Close">
-          <Icon name="X" size="md" />
-        </button>
-      )}
-    </>
-  );
-
-  if (glass) {
-    // Default glass settings for callouts
-    const defaultGlassProps = {
-      displacementScale: 30,
-      cornerRadius: 8,
-      elasticity: 0,
-    };
+        {actions && <div className="c-callout__actions">{actions}</div>}
+
+        {onClose && (
+          <button
+            className="c-callout__close-btn"
+            onClick={handleClose(onClose)}
+            aria-label="Close"
+          >
+            <Icon name="X" size="md" />
+          </button>
+        )}
+      </>
+    );
+
+    if (glass) {
+      // Default glass settings for callouts
+      const defaultGlassProps = {
+        displacementScale: 30,
+        borderRadius: 8,
+        elasticity: 0,
+      };
+
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      return (
+        <div
+          className={generateCalloutClass({ variant, compact, isToast, glass, className })}
+          {...getAriaAttributes()}
+          {...props}
+          style={style}
+        >
+          <AtomixGlass {...glassProps}>
+            <div
+              className="c-callout__glass-content"
+              style={{ borderRadius: glassProps.borderRadius }}
+            >
+              {calloutContent}
+            </div>
+          </AtomixGlass>
+        </div>
+      );
+    }
 
     return (
       <div
@@ -88,32 +209,23 @@ export const Callout: React.FC<CalloutProps> = ({
         {...props}
         style={style}
       >
-        <AtomixGlass {...glassProps}>
-          <div
-            className="c-callout__glass-content"
-            style={{ borderRadius: glassProps.cornerRadius }}
-          >
-            {calloutContent}
-          </div>
-        </AtomixGlass>
+        {calloutContent}
       </div>
     );
   }
-
-  return (
-    <div
-      className={generateCalloutClass({ variant, compact, isToast, glass, className })}
-      {...getAriaAttributes()}
-      {...props}
-      style={style}
-    >
-      {calloutContent}
-    </div>
-  );
-};
+) as unknown as CalloutComponent;
 
 Callout.displayName = 'Callout';
 
+// Attach subcomponents
+Callout.Icon = CalloutIcon;
+Callout.Message = CalloutMessage;
+Callout.Title = CalloutTitle;
+Callout.Text = CalloutText;
+Callout.Actions = CalloutActions;
+Callout.CloseButton = CalloutCloseButton;
+Callout.Content = CalloutContent;
+
 export type { CalloutProps };
 
 export default Callout;

package/src/components/Callout/CalloutCompound.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Callout } from './Callout';
+import React from 'react';
+
+describe('Callout Component', () => {
+  it('renders correctly with legacy props', () => {
+    render(
+      <Callout title="Legacy Title" icon={<span>Icon</span>}>
+        Legacy Content
+      </Callout>
+    );
+
+    expect(screen.getByText('Legacy Title')).toBeInTheDocument();
+    expect(screen.getByText('Legacy Content')).toBeInTheDocument();
+    expect(screen.getByText('Icon')).toBeInTheDocument();
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <Callout>
+        <Callout.Content>
+          <Callout.Icon>
+            <span>Compound Icon</span>
+          </Callout.Icon>
+          <Callout.Message>
+            <Callout.Title>Compound Title</Callout.Title>
+            <Callout.Text>Compound Text</Callout.Text>
+          </Callout.Message>
+        </Callout.Content>
+        <Callout.Actions>
+          <button>Action</button>
+        </Callout.Actions>
+        <Callout.CloseButton onClick={() => {}} />
+      </Callout>
+    );
+
+    expect(screen.getByText('Compound Icon')).toBeInTheDocument();
+    expect(screen.getByText('Compound Title')).toBeInTheDocument();
+    expect(screen.getByText('Compound Text')).toBeInTheDocument();
+    expect(screen.getByText('Action')).toBeInTheDocument();
+    expect(screen.getByLabelText('Close')).toBeInTheDocument();
+  });
+
+  it('prioritizes compound components over legacy props', () => {
+    render(
+      <Callout title="Legacy Title">
+        <Callout.Content>
+          <Callout.Message>
+            <Callout.Text>Compound Text</Callout.Text>
+          </Callout.Message>
+        </Callout.Content>
+      </Callout>
+    );
+
+    expect(screen.getByText('Compound Text')).toBeInTheDocument();
+    expect(screen.queryByText('Legacy Title')).not.toBeInTheDocument();
+  });
+
+  it('renders close button when used as compound', () => {
+    const onClose = vi.fn();
+    render(
+      <Callout>
+         <Callout.CloseButton onClick={onClose} />
+      </Callout>
+    );
+
+    const button = screen.getByLabelText('Close');
+    fireEvent.click(button);
+    expect(onClose).toHaveBeenCalled();
+  });
+});

package/src/components/Callout/README.md

@@ -94,7 +94,7 @@ Glass morphism adds a modern, translucent appearance with backdrop blur effects:
     blurAmount: 2,
     saturation: 180,
     aberrationIntensity: 1.5,
-    cornerRadius: 12
+    borderRadius: 12
   }}
   title="Custom Glass"
   variant="success"
@@ -113,7 +113,7 @@ When `glass={true}`, these default settings are used:
   blurAmount: 0,
   saturation: 160,
   aberrationIntensity: 1,
-  cornerRadius: 8,
+  borderRadius: 8,
   overLight: false,
   mode: 'standard'
 }

package/src/components/Chart/Chart.stories.tsx

@@ -250,7 +250,7 @@ export const GlassVariant: Story = {
                 glass={{
                   blurAmount: 0,
                   saturation: 180,
-                  enableBorderEffect: true,
+                  withBorder: true,
                 }}
                 showToolbar={true}
               />

package/src/components/Chart/Chart.tsx

@@ -278,8 +278,8 @@ const Chart = memo(
           saturation: 180,
           aberrationIntensity: 1.5,
           elasticity: 0, // No elastic effect for charts
-          enableLiquidBlur: false, // Keep it simple
-          enableBorderEffect: true,
+          withLiquidBlur: false, // Keep it simple
+          withBorder: true,
           mode: 'standard' as const,
           mouseContainer: chartContainerRef,
           reducedMotion: false,
@@ -300,8 +300,8 @@ const Chart = memo(
       const chartBorderRadius = useMemo(() => {
         // Use chart border-radius design token (typically 12px from $border-radius-lg)
         // AtomixGlass will extract from children if not provided
-        return glassProps?.cornerRadius || undefined;
-      }, [glassProps?.cornerRadius]);
+        return glassProps?.borderRadius || undefined;
+      }, [glassProps?.borderRadius]);
 
       // Create context value
       const chartContextValue = useMemo<ChartContextValue>(
@@ -404,7 +404,7 @@ const Chart = memo(
       const wrappedChart = glassProps ? (
         <AtomixGlass
           {...glassProps}
-          cornerRadius={chartBorderRadius}
+          borderRadius={chartBorderRadius}
           style={{
             width: '100%',
             height: '100%',

package/src/components/Chart/TreemapChart.tsx

@@ -98,21 +98,25 @@ interface TreemapChartProps extends Omit<ChartProps, 'type' | 'datasets'> {
   };
 }
 
+const DEFAULT_COLOR_CONFIG: NonNullable<TreemapChartProps['colorConfig']> = { scheme: 'category' };
+const DEFAULT_LABEL_CONFIG = {
+  showLabels: true,
+  minSize: 1000,
+  fontSize: 12,
+  textColor: 'white',
+};
+const DEFAULT_CONFIG = {};
+
 const TreemapChart = memo(
   forwardRef<HTMLDivElement, TreemapChartProps>(
     (
       {
         data = [],
         algorithm = 'squarified',
-        colorConfig = { scheme: 'category' },
-        labelConfig = {
-          showLabels: true,
-          minSize: 1000,
-          fontSize: 12,
-          textColor: 'white',
-        },
+        colorConfig = DEFAULT_COLOR_CONFIG,
+        labelConfig = DEFAULT_LABEL_CONFIG,
         onDataPointClick,
-        config = {},
+        config = DEFAULT_CONFIG,
         ...props
       },
       ref
@@ -122,9 +126,7 @@ const TreemapChart = memo(
       const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
 
       const treeData = useMemo(() => {
-        console.log('TreemapChart data:', data);
         if (!data.length) {
-          console.log('No data provided to TreemapChart');
           return null;
         }
 
@@ -357,16 +359,17 @@ const TreemapChart = memo(
         []
       );
 
-      const renderContent = ({
-        scales,
-        colors,
-        datasets: renderedDatasets,
-        handlers,
-        hoveredPoint,
-      }: ChartRenderContentParams) => {
-        if (!data.length) return null;
-
-        // Calculate available space with padding
+      const renderContent = useCallback(
+        ({
+          scales,
+          colors,
+          datasets: renderedDatasets,
+          handlers,
+          hoveredPoint,
+        }: ChartRenderContentParams) => {
+          if (!data.length) return null;
+
+          // Calculate available space with padding
         const padding = 20;
         const availableWidth = scales.width - padding * 2;
         const availableHeight = scales.height - padding * 2;
@@ -467,17 +470,22 @@ const TreemapChart = memo(
                 </g>
               );
             })}
-          </>
-        );
-      };
+            </>
+          );
+        },
+        [data, algorithm, generateColor, squarify, labelConfig, hoveredNode, selectedNode]
+      );
 
       // Convert data to datasets format for BaseChart
-      const datasets = [
-        {
-          label: 'Treemap Data',
-          data: data,
-        },
-      ];
+      const datasets = useMemo(
+        () => [
+          {
+            label: 'Treemap Data',
+            data: data,
+          },
+        ],
+        [data]
+      );
 
       return (
         <BaseChart

package/src/components/DatePicker/readme.md

@@ -152,7 +152,7 @@ const CustomGlassExample = () => {
           blurAmount: 0,
           saturation: 180,
           aberrationIntensity: 2,
-          cornerRadius: 16,
+          borderRadius: 16,
           overLight: false,
           mode: 'polar',
         }}
@@ -184,7 +184,7 @@ const GlassRangeExample = () => {
           blurAmount: 0,
           saturation: 160,
           aberrationIntensity: 1.5,
-          cornerRadius: 14,
+          borderRadius: 14,
           mode: 'prominent',
         }}
       />
@@ -203,7 +203,7 @@ When `glass` is an object, it accepts the same props as the `AtomixGlass` compon
 | `blurAmount` | `number` | `0` | Blur amount for the backdrop |
 | `saturation` | `number` | `160` | Saturation percentage for the backdrop |
 | `aberrationIntensity` | `number` | `1.5` | Chromatic aberration intensity |
-| `cornerRadius` | `number` | `12` | Corner radius in pixels |
+| `borderRadius` | `number` | `12` | Corner radius in pixels |
 | `overLight` | `boolean` | `false` | Whether the glass is over a light background |
 | `mode` | `'standard' \| 'polar' \| 'prominent' \| 'shader'` | `'standard'` | Glass effect mode |
 

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -505,7 +505,7 @@ export const GlassDropdownCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 1,
-      cornerRadius: 16,
+      borderRadius: 16,
       mode: 'polar',
     },
   },