@shohojdhara/atomix 0.3.15 → 0.4.1

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,
+        cornerRadius: 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.cornerRadius }}
+            >
+              {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/Card/Card.stories.tsx

@@ -130,64 +130,64 @@ Cards are flexible containers for displaying content with optional headers, imag
         defaultValue: { summary: 'none' },
       },
     },
-    row: { 
-      control: 'boolean', 
+    row: {
+      control: 'boolean',
       description: 'Whether to arrange content horizontally',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    flat: { 
-      control: 'boolean', 
+    flat: {
+      control: 'boolean',
       description: 'Whether to remove border radius',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    active: { 
-      control: 'boolean', 
+    active: {
+      control: 'boolean',
       description: 'Whether the card is in active state',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    disabled: { 
-      control: 'boolean', 
+    disabled: {
+      control: 'boolean',
       description: 'Whether the card is disabled',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    loading: { 
-      control: 'boolean', 
+    loading: {
+      control: 'boolean',
       description: 'Whether the card is in loading state',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    selected: { 
-      control: 'boolean', 
+    selected: {
+      control: 'boolean',
       description: 'Whether the card is selected',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    interactive: { 
-      control: 'boolean', 
+    interactive: {
+      control: 'boolean',
       description: 'Whether the card responds to interactions',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: false },
       },
     },
-    className: { 
-      control: 'text', 
+    className: {
+      control: 'text',
       description: 'Additional CSS class names',
       table: {
         type: { summary: 'string' },
@@ -381,12 +381,14 @@ export const WithGlassEffect: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Demonstrates a card with glass morphism effect applied, creating a translucent, frosted appearance that works well over colorful backgrounds.',
+        story:
+          'Demonstrates a card with glass morphism effect applied, creating a translucent, frosted appearance that works well over colorful backgrounds.',
       },
     },
   },
   render: args => (
-    <div className="u-bg-cover u-h-80vh u-w-90vw u-grid u-rounded-xl u-overflow-hidden"
+    <div
+      className="u-bg-cover u-h-80vh u-w-90vw u-grid u-rounded-xl u-overflow-hidden"
       style={{
         backgroundImage: `url(https://picsum.photos/id/128/1920/1024)`,
       }}
@@ -720,7 +722,8 @@ export const AllGlassModesComparison: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Side-by-side comparison of all available glass morphism modes (standard, polar, prominent, shader) to help you choose the right effect for your design.',
+        story:
+          'Side-by-side comparison of all available glass morphism modes (standard, polar, prominent, shader) to help you choose the right effect for your design.',
       },
     },
   },
@@ -966,7 +969,8 @@ export const GlassCardGallery: Story = {
 // Glass Card Layouts
 export const GlassCardLayouts: Story = {
   render: () => (
-    <div className="u-bg-cover u-bg-center u-p-12 u-rounded-xl u-min-h-95vh u-min-w-95vw u-overflow-auto"
+    <div
+      className="u-bg-cover u-bg-center u-p-12 u-rounded-xl u-min-h-95vh u-min-w-95vw u-overflow-auto"
       style={{
         backgroundImage: 'url(https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=1920)',
       }}
@@ -979,9 +983,7 @@ export const GlassCardLayouts: Story = {
         <div className="u-flex u-gap-8">
           {/* Standard Layout */}
           <div className="u-w-50">
-            <h3 className="u-text-white u-mb-4 u-text-shadow">
-              Standard Layout
-            </h3>
+            <h3 className="u-text-white u-mb-4 u-text-shadow">Standard Layout</h3>
             <Card
               title="Standard Glass Card"
               text="This is a standard glass card with vertical layout."
@@ -999,9 +1001,7 @@ export const GlassCardLayouts: Story = {
 
           {/* Row Layout */}
           <div className="u-w-50">
-            <h3 className="u-text-white u-mb-4 u-text-shadow">
-              Row Layout
-            </h3>
+            <h3 className="u-text-white u-mb-4 u-text-shadow">Row Layout</h3>
             <Card
               title="Row Glass Card"
               text="This is a row glass card with horizontal layout."
@@ -1024,9 +1024,7 @@ export const GlassCardLayouts: Story = {
 
           {/* Flat Layout */}
           <div className="u-w-50">
-            <h3 className="u-text-white u-mb-4 u-text-shadow">
-              Flat Layout
-            </h3>
+            <h3 className="u-text-white u-mb-4 u-text-shadow">Flat Layout</h3>
             <Card
               title="Flat Glass Card"
               text="This is a flat glass card with edge-to-edge image."
@@ -1081,7 +1079,13 @@ export const SizeVariants: Story = {
 // Color Variants
 export const ColorVariants: Story = {
   render: () => (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }}>
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+        gap: '1rem',
+      }}
+    >
       <Card variant="primary" title="Primary Card" text="Primary variant card." />
       <Card variant="secondary" title="Secondary Card" text="Secondary variant card." />
       <Card variant="success" title="Success Card" text="Success variant card." />
@@ -1097,11 +1101,37 @@ export const ColorVariants: Story = {
 // Appearance Variants
 export const AppearanceVariants: Story = {
   render: () => (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }}>
-      <Card appearance="filled" variant="primary" title="Filled Card" text="Filled appearance with solid background." />
-      <Card appearance="outlined" variant="primary" title="Outlined Card" text="Outlined appearance with border only." />
-      <Card appearance="ghost" variant="primary" title="Ghost Card" text="Ghost appearance with minimal styling." />
-      <Card appearance="elevated" variant="primary" title="Elevated Card" text="Elevated appearance with shadow." />
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+        gap: '1rem',
+      }}
+    >
+      <Card
+        appearance="filled"
+        variant="primary"
+        title="Filled Card"
+        text="Filled appearance with solid background."
+      />
+      <Card
+        appearance="outlined"
+        variant="primary"
+        title="Outlined Card"
+        text="Outlined appearance with border only."
+      />
+      <Card
+        appearance="ghost"
+        variant="primary"
+        title="Ghost Card"
+        text="Ghost appearance with minimal styling."
+      />
+      <Card
+        appearance="elevated"
+        variant="primary"
+        title="Elevated Card"
+        text="Elevated appearance with shadow."
+      />
     </div>
   ),
 };
@@ -1188,7 +1218,8 @@ export const Comprehensive: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'A comprehensive example demonstrating various card features including sizes, variants, appearances, elevations, and states in a grid layout.',
+        story:
+          'A comprehensive example demonstrating various card features including sizes, variants, appearances, elevations, and states in a grid layout.',
       },
     },
   },

package/src/components/Card/Card.tsx

@@ -96,7 +96,24 @@ export const Card = React.memo(
           ]
             .filter(Boolean)
             .join(' '),
-        [size, variant, appearance, elevation, hoverable, hoverElevation, row, flat, active, disabled, loading, selected, interactive, isClickable, glass, className]
+        [
+          size,
+          variant,
+          appearance,
+          elevation,
+          hoverable,
+          hoverElevation,
+          row,
+          flat,
+          active,
+          disabled,
+          loading,
+          selected,
+          interactive,
+          isClickable,
+          glass,
+          className,
+        ]
       );
 
       // Determine ARIA role
@@ -239,11 +256,7 @@ export const Card = React.memo(
 
         if (glass) {
           const glassProps = glass === true ? {} : glass;
-          return (
-            <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>
-              {anchorElement}
-            </AtomixGlass>
-          );
+          return <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>{anchorElement}</AtomixGlass>;
         }
 
         return anchorElement;
@@ -258,11 +271,7 @@ export const Card = React.memo(
 
       if (glass) {
         const glassProps = glass === true ? {} : glass;
-        return (
-          <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>
-            {divElement}
-          </AtomixGlass>
-        );
+        return <AtomixGlass {...{ ...glassProps, elasticity: 0 }}>{divElement}</AtomixGlass>;
       }
 
       return divElement;
@@ -327,10 +336,16 @@ export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
   ({ scrollable = false, maxHeight, children, className = '', style, ...props }, ref) => {
-    const bodyClasses = `${CARD.SELECTORS.BODY.substring(1)} ${scrollable ? 'c-card__body--scrollable' : ''} ${className}`.trim();
+    const bodyClasses =
+      `${CARD.SELECTORS.BODY.substring(1)} ${scrollable ? 'c-card__body--scrollable' : ''} ${className}`.trim();
     const bodyStyle: React.CSSProperties = {
       ...style,
-      ...(scrollable && maxHeight ? { maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight, overflowY: 'auto' } : {}),
+      ...(scrollable && maxHeight
+        ? {
+            maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
+            overflowY: 'auto',
+          }
+        : {}),
     };
 
     return (
@@ -352,7 +367,8 @@ export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
   ({ align, children, className = '', style, ...props }, ref) => {
-    const footerClasses = `${CARD.SELECTORS.FOOTER.substring(1)} ${align ? `c-card__footer--align-${align}` : ''} ${className}`.trim();
+    const footerClasses =
+      `${CARD.SELECTORS.FOOTER.substring(1)} ${align ? `c-card__footer--align-${align}` : ''} ${className}`.trim();
 
     return (
       <div ref={ref} className={footerClasses} style={style} {...props}>