@shohojdhara/atomix 0.5.5 → 0.5.7

package/src/components/Card/Card.tsx

@@ -3,7 +3,108 @@ import { CARD } from '../../lib/constants/components';
 import { CardProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Card = React.memo(
+// Card subcomponents for structured content
+
+export interface CardHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Header title
+   */
+  title?: React.ReactNode;
+  /**
+   * Header subtitle
+   */
+  subtitle?: React.ReactNode;
+  /**
+   * Action element (e.g., button) to display in header
+   */
+  action?: React.ReactNode;
+  /**
+   * Icon to display in header
+   */
+  icon?: React.ReactNode;
+}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ title, subtitle, action, icon, children, className = '', ...props }, ref) => {
+    const headerClasses = `${CARD.SELECTORS.HEADER.substring(1)} ${className}`.trim();
+
+    return (
+      <div ref={ref} className={headerClasses} {...props}>
+        {icon && <div className={CARD.SELECTORS.ICON.substring(1)}>{icon}</div>}
+        {(title || subtitle) && (
+          <div>
+            {title && <h3 className={CARD.SELECTORS.TITLE.substring(1)}>{title}</h3>}
+            {subtitle && <p className={CARD.SELECTORS.TEXT.substring(1)}>{subtitle}</p>}
+          </div>
+        )}
+        {action && <div className={CARD.SELECTORS.ACTIONS.substring(1)}>{action}</div>}
+        {children}
+      </div>
+    );
+  }
+);
+
+CardHeader.displayName = 'CardHeader';
+
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Make body scrollable
+   */
+  scrollable?: boolean;
+  /**
+   * Maximum height for scrollable body
+   */
+  maxHeight?: string | number;
+}
+
+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 bodyStyle: React.CSSProperties = {
+      ...style,
+      ...(scrollable && maxHeight
+        ? {
+            maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
+            overflowY: 'auto',
+          }
+        : {}),
+    };
+
+    return (
+      <div ref={ref} className={bodyClasses} style={bodyStyle} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+CardBody.displayName = 'CardBody';
+
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Footer alignment
+   */
+  align?: 'start' | 'center' | 'end' | 'between';
+}
+
+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();
+
+    return (
+      <div ref={ref} className={footerClasses} style={style} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+CardFooter.displayName = 'CardFooter';
+
+// Main Card component implementation
+const CardImpl = React.memo(
   forwardRef<HTMLDivElement | HTMLAnchorElement, CardProps>(
     (
       {
@@ -299,111 +400,24 @@ export const Card = React.memo(
   )
 );
 
-Card.displayName = 'Card';
-
-// Card subcomponents for structured content
-export interface CardHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * Header title
-   */
-  title?: React.ReactNode;
-  /**
-   * Header subtitle
-   */
-  subtitle?: React.ReactNode;
-  /**
-   * Action element (e.g., button) to display in header
-   */
-  action?: React.ReactNode;
-  /**
-   * Icon to display in header
-   */
-  icon?: React.ReactNode;
-}
-
-export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
-  ({ title, subtitle, action, icon, children, className = '', ...props }, ref) => {
-    const headerClasses = `${CARD.SELECTORS.HEADER.substring(1)} ${className}`.trim();
-
-    return (
-      <div ref={ref} className={headerClasses} {...props}>
-        {icon && <div className={CARD.SELECTORS.ICON.substring(1)}>{icon}</div>}
-        {(title || subtitle) && (
-          <div>
-            {title && <h3 className={CARD.SELECTORS.TITLE.substring(1)}>{title}</h3>}
-            {subtitle && <p className={CARD.SELECTORS.TEXT.substring(1)}>{subtitle}</p>}
-          </div>
-        )}
-        {action && <div className={CARD.SELECTORS.ACTIONS.substring(1)}>{action}</div>}
-        {children}
-      </div>
-    );
-  }
-);
-
-CardHeader.displayName = 'CardHeader';
-
-export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Make body scrollable
-   */
-  scrollable?: boolean;
-  /**
-   * Maximum height for scrollable body
-   */
-  maxHeight?: string | number;
-}
-
-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 bodyStyle: React.CSSProperties = {
-      ...style,
-      ...(scrollable && maxHeight
-        ? {
-            maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
-            overflowY: 'auto',
-          }
-        : {}),
-    };
-
-    return (
-      <div ref={ref} className={bodyClasses} style={bodyStyle} {...props}>
-        {children}
-      </div>
-    );
-  }
-);
-
-CardBody.displayName = 'CardBody';
-
-export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Footer alignment
-   */
-  align?: 'start' | 'center' | 'end' | 'between';
-}
-
-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();
+CardImpl.displayName = 'Card';
 
-    return (
-      <div ref={ref} className={footerClasses} style={style} {...props}>
-        {children}
-      </div>
-    );
-  }
-);
+/**
+ * Card component with subcomponents for creating card layouts
+ */
+type CardComponent = React.FC<CardProps> & {
+  Header: typeof CardHeader;
+  Body: typeof CardBody;
+  Footer: typeof CardFooter;
+};
 
-CardFooter.displayName = 'CardFooter';
+// Create compound component with proper typing
+const CardWithSubcomponents = CardImpl as unknown as CardComponent;
+CardWithSubcomponents.Header = CardHeader;
+CardWithSubcomponents.Body = CardBody;
+CardWithSubcomponents.Footer = CardFooter;
 
-// Attach subcomponents to Card
-(Card as any).Header = CardHeader;
-(Card as any).Body = CardBody;
-(Card as any).Footer = CardFooter;
+export const Card = CardWithSubcomponents;
 
 export type { CardProps };
 

package/src/components/Card/index.ts

@@ -6,11 +6,13 @@
  */
 
 // Export the main Card component with subcomponents
-export { default as Card, CardHeader, CardBody, CardFooter } from './Card';
-export type { CardHeaderProps, CardBodyProps, CardFooterProps } from './Card';
+export { Card, CardHeader, CardBody, CardFooter } from './Card';
+export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps } from './Card';
+
+// Export the ElevationCard component
+export { default as ElevationCard, type ElevationCardProps } from './ElevationCard';
+
 
-// Export the ElevationCard variant
-export { default as ElevationCard } from './ElevationCard';
 
 // Default export for the main Card component
-export { default } from './Card';
+export { default } from './Card';

package/src/components/Dropdown/Dropdown.tsx

@@ -8,6 +8,7 @@ import React, {
   memo,
   forwardRef,
   ReactNode,
+  ComponentType,
 } from 'react';
 import { DROPDOWN } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -27,6 +28,18 @@ export type DropdownContextType = {
   trigger: string;
 };
 
+// Type definitions for compound component handling
+type ExtendedComponentType<P = {}> = ComponentType<P> & {
+  displayName?: string;
+}
+
+interface DropdownTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+  onClick?: (e: React.MouseEvent) => void;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+}
+
+interface DropdownMenuProps extends React.HTMLAttributes<HTMLUListElement> {}
+
 // Create context for dropdown state management
 const DropdownContext = createContext<DropdownContextType>({
   isOpen: false,
@@ -140,7 +153,9 @@ export const DropdownItem: React.FC<DropdownItemProps> = memo(
         <li>
           {linkComponent ? (
             (() => {
-              const Component = linkComponent as React.ComponentType<any>;
+              const Component = linkComponent as React.ComponentType<
+                React.AnchorHTMLAttributes<HTMLAnchorElement>
+              >;
               return (
                 <Component {...linkProps}>
                   {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
@@ -402,7 +417,9 @@ export const Dropdown: DropdownComponent = memo(function DropdownBase({
   const hasCompoundComponents = React.Children.toArray(children).some(
     child =>
       React.isValidElement(child) &&
-      ['DropdownTrigger', 'DropdownMenu'].includes((child.type as any).displayName)
+      ['DropdownTrigger', 'DropdownMenu'].includes(
+        (child.type as React.ComponentType & { displayName?: string }).displayName || ''
+      )
   );
 
   let triggerContent: ReactNode;
@@ -412,23 +429,25 @@ export const Dropdown: DropdownComponent = memo(function DropdownBase({
     // Find Trigger and Menu in children
     React.Children.forEach(children, child => {
       if (React.isValidElement(child)) {
-        if ((child.type as any).displayName === 'DropdownTrigger') {
-          triggerContent = React.cloneElement(child, {
+        const component = child.type as ExtendedComponentType;
+        if (component.displayName === 'DropdownTrigger') {
+          const triggerProps: DropdownTriggerProps = {
             ref: toggleRef,
             onClick: (e: React.MouseEvent) => {
               handleToggleClick(e);
-              (child.props as any).onClick?.(e);
+              (child.props as DropdownTriggerProps).onClick?.(e);
             },
             onKeyDown: (e: React.KeyboardEvent) => {
               handleToggleKeyDown(e);
-              (child.props as any).onKeyDown?.(e);
+              (child.props as DropdownTriggerProps).onKeyDown?.(e);
             },
             'aria-haspopup': 'menu',
             'aria-expanded': isOpen,
             'aria-controls': dropdownId,
             tabIndex: 0,
-          } as any);
-        } else if ((child.type as any).displayName === 'DropdownMenu') {
+          };
+          triggerContent = React.cloneElement(child, triggerProps);
+        } else if (component.displayName === 'DropdownMenu') {
           menuContentNode = child;
         }
       }

package/src/components/EdgePanel/EdgePanel.tsx

@@ -1,10 +1,15 @@
-import React, { useRef, useEffect, memo, forwardRef } from 'react';
+import React, { useRef, useEffect, memo, forwardRef, ComponentType } from 'react';
 import { EdgePanelProps } from '../../lib/types/components';
 import { useEdgePanel } from '../../lib/composables/useEdgePanel';
 import { EDGE_PANEL } from '../../lib/constants/components';
 import { Icon } from '../Icon/Icon';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
+// Type-safe type alias for compound component detection
+type ExtendedComponentType<P = {}> = ComponentType<P> & {
+  displayName?: string;
+}
+
 // Subcomponents
 export const EdgePanelHeader = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ children, className = '', ...props }, ref) => (
@@ -146,7 +151,7 @@ const EdgePanelComponentBase = ({
     child =>
       React.isValidElement(child) &&
       ['EdgePanelHeader', 'EdgePanelBody', 'EdgePanelFooter'].includes(
-        (child.type as any).displayName
+        (child.type as ExtendedComponentType).displayName || ''
       )
   );
 

package/src/components/Modal/Modal.tsx

@@ -1,6 +1,21 @@
-import React, { useEffect, useRef, useState, useCallback, memo, forwardRef, ReactNode, useId } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  memo,
+  forwardRef,
+  ReactNode,
+  useId,
+  ComponentType,
+} from 'react';
 import { ModalProps } from '../../lib/types/components';
 import { MODAL } from '../../lib/constants/components';
+
+// Define ExtendedComponentType as a type alias instead of an interface to avoid TS2312 error
+type ExtendedComponentType<P = {}> = ComponentType<P> & {
+  displayName?: string;
+}
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 import { useFocusTrap } from '../../lib/composables/useFocusTrap';
 
@@ -225,9 +240,12 @@ const ModalImpl = memo(
       .join(' ');
 
     // Check for compound components usage
-    const hasCompoundComponents = React.Children.toArray(children).some((child) =>
-      React.isValidElement(child) &&
-      ['ModalHeader', 'ModalBody', 'ModalFooter'].includes((child.type as any).displayName)
+    const hasCompoundComponents = React.Children.toArray(children).some(
+      child =>
+        React.isValidElement(child) &&
+        ['ModalHeader', 'ModalBody', 'ModalFooter'].includes(
+          (child.type as ExtendedComponentType).displayName || ''
+        )
     );
 
     const modalContent = (
@@ -236,12 +254,13 @@ const ModalImpl = memo(
           React.Children.map(children, child => {
             if (
               React.isValidElement(child) &&
-              (child.type as any).displayName === 'ModalHeader'
+              (child.type as ExtendedComponentType).displayName === 'ModalHeader'
             ) {
-              return React.cloneElement(child, {
-                onClose: (child.props as any).onClose || close,
+              return React.cloneElement(child as React.ReactElement<ModalHeaderProps>, {
+                ...(child.props as ModalHeaderProps),
+                onClose: (child.props as ModalHeaderProps).onClose || close,
                 id: titleId,
-              } as any);
+              });
             }
             return child;
           })

package/src/components/Spinner/Spinner.tsx

@@ -1,52 +1,69 @@
-import React, { memo } from 'react';
+import React, { memo, forwardRef } from 'react';
 import { SpinnerProps } from '../../lib/types/components';
 import { useSpinner } from '../../lib/composables/useSpinner';
 import { SPINNER } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Spinner: React.FC<SpinnerProps> = memo(
-  ({
-    size = 'md',
-    variant = 'primary',
-    fullscreen = false,
-    className = '',
-    style,
-    glass,
-    'aria-label': ariaLabel,
-    role = 'status',
-  }) => {
-    const { generateSpinnerClass } = useSpinner({
-      size,
-      variant,
-      fullscreen,
-    });
-
-    const spinnerClass = generateSpinnerClass({
-      size,
-      variant,
-      fullscreen,
-      className: `${className} ${glass ? 'c-spinner--glass' : ''}`.trim(),
-    });
-
-    const spinnerContent = (
-      <div className={spinnerClass} style={style} role={role} aria-label={ariaLabel || 'Loading'}>
-        <span className={SPINNER.VISUALLY_HIDDEN}>{ariaLabel || 'Loading...'}</span>
-      </div>
-    );
-
-    if (glass) {
-      const defaultGlassProps = {
-        displacementScale: 20,
-        blurAmount: 1,
-        borderRadius: 999,
-        mode: 'shader' as const,
-      };
-      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
-      return <AtomixGlass {...glassProps}>{spinnerContent}</AtomixGlass>;
-    }
+export const Spinner = memo(
+  forwardRef<HTMLDivElement, SpinnerProps>(
+    (
+      {
+        size = 'md',
+        variant = 'primary',
+        fullscreen = false,
+        className = '',
+        style,
+        glass,
+        'aria-label': ariaLabel,
+        role = 'status',
+        'aria-live': ariaLive = 'polite',
+        'aria-describe': ariaDescribe,
+        ...rest
+      },
+      ref
+    ) => {
+      const { generateSpinnerClass } = useSpinner({
+        size,
+        variant,
+        fullscreen,
+      });
+
+      const spinnerClass = generateSpinnerClass({
+        size,
+        variant,
+        fullscreen,
+        className: `${className} ${glass ? 'c-spinner--glass' : ''}`.trim(),
+      });
+
+      const spinnerContent = (
+        <div
+          ref={ref}
+          className={spinnerClass}
+          style={style}
+          role={role}
+          aria-label={ariaLabel || 'Loading'}
+          aria-live={ariaLive}
+          aria-describe={ariaDescribe}
+          {...rest}
+        >
+          <span className={SPINNER.VISUALLY_HIDDEN}>{ariaLabel || 'Loading content...'}</span>
+        </div>
+      );
 
-    return spinnerContent;
-  }
+      if (glass) {
+        const defaultGlassProps = {
+          displacementScale: 20,
+          blurAmount: 1,
+          borderRadius: 999,
+          mode: 'shader' as const,
+        };
+        const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+        return <AtomixGlass {...glassProps}>{spinnerContent}</AtomixGlass>;
+      }
+
+      return spinnerContent;
+    }
+  )
 );
 
 export type { SpinnerProps };