@shohojdhara/atomix 0.5.4 → 0.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useId, memo, forwardRef } from 'react';
+import React, { ReactNode, useId, memo, forwardRef, ComponentType } from 'react';
 import { ACCORDION } from '../../lib/constants/components';
 import { useAccordion } from '../../lib/composables/useAccordion';
 import type {
@@ -9,6 +9,19 @@ import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export type AccordionProps = AccordionPropsType;
 
+// Type aliases for compound component detection
+type ExtendedComponentType<P = {}> = ComponentType<P> & {
+  displayName?: string;
+}
+
+// Props interface for type-safe props access
+interface AccordionChildProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick'> {
+  iconPosition?: 'left' | 'right';
+  panelRef?: React.RefObject<HTMLDivElement>;
+  contentRef?: React.RefObject<HTMLDivElement>;
+  onClick?: (e: React.MouseEvent) => void;
+}
+
 // Default icon
 const DefaultIcon = () => (
   <i className="c-accordion__icon" aria-hidden="true">
@@ -30,7 +43,8 @@ const DefaultIcon = () => (
   </i>
 );
 
-export interface AccordionHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
+export interface AccordionHeaderProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title'> {
   title?: ReactNode;
   icon?: ReactNode;
   iconPosition?: 'left' | 'right';
@@ -38,10 +52,7 @@ export interface AccordionHeaderProps extends Omit<React.ButtonHTMLAttributes<HT
 }
 
 export const AccordionHeader = forwardRef<HTMLButtonElement, AccordionHeaderProps>(
-  (
-    { title, icon, iconPosition = 'right', isOpen, children, className = '', ...props },
-    ref
-  ) => {
+  ({ title, icon, iconPosition = 'right', isOpen, children, className = '', ...props }, ref) => {
     // Determine icon to render. Explicit check for undefined to allow null/false to hide icon.
     const iconElement = icon === undefined ? <DefaultIcon /> : icon;
 
@@ -67,9 +78,11 @@ export interface AccordionBodyProps extends React.HTMLAttributes<HTMLDivElement>
 }
 
 // Helper to merge refs
-function mergeRefs<T = any>(...refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null)[]) {
+function mergeRefs<T = any>(
+  ...refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null)[]
+) {
   return (node: T) => {
-    refs.forEach((ref) => {
+    refs.forEach(ref => {
       if (typeof ref === 'function') {
         ref(node);
       } else if (ref != null) {
@@ -88,12 +101,9 @@ export const AccordionBody = forwardRef<HTMLDivElement, AccordionBodyProps>(
         ref={mergedPanelRef}
         className={className} // Parent injects class names
         role="region"
-        {...props}
+        {...props} // Spreads id, aria-labelledby, etc.
       >
-        <div
-          className={ACCORDION.SELECTORS.BODY.replace('.', '')}
-          ref={contentRef}
-        >
+        <div className={ACCORDION.SELECTORS.BODY.replace('.', '')} ref={contentRef}>
           {children}
         </div>
       </div>
@@ -147,9 +157,12 @@ const AccordionImpl = memo(
     const panelClassNames = ACCORDION.SELECTORS.PANEL.replace('.', '');
 
     // Check for compound usage
-    const hasCompoundComponents = React.Children.toArray(children).some((child) =>
-      React.isValidElement(child) &&
-      ['AccordionHeader', 'AccordionBody'].includes((child.type as any).displayName)
+    const hasCompoundComponents = React.Children.toArray(children).some(
+      child =>
+        React.isValidElement(child) &&
+        ['AccordionHeader', 'AccordionBody'].includes(
+          (child.type as ExtendedComponentType).displayName || ''
+        )
     );
 
     const content = (
@@ -160,29 +173,31 @@ const AccordionImpl = memo(
         {hasCompoundComponents ? (
           React.Children.map(children, child => {
             if (React.isValidElement(child)) {
-              if ((child.type as any).displayName === 'AccordionHeader') {
+              const childProps = child.props as AccordionChildProps;
+
+              if ((child.type as ExtendedComponentType).displayName === 'AccordionHeader') {
                 return React.cloneElement(child, {
                   id: buttonId,
-                  className: `${headerClassNames} ${(child.props as any).className || ''}`.trim(),
-                  onClick: (e: React.MouseEvent) => {
+                  className: `${headerClassNames} ${childProps.className || ''}`.trim(),
+                  onClick: (e: React.MouseEvent<HTMLElement>) => {
                     toggle();
-                    (child.props as any).onClick?.(e);
+                    childProps?.onClick?.(e);
                   },
                   'aria-expanded': state.isOpen,
                   'aria-controls': panelId,
                   'aria-disabled': disabled,
                   disabled: disabled,
-                  iconPosition: (child.props as any).iconPosition || iconPosition,
-                } as any);
+                  iconPosition: childProps.iconPosition || iconPosition,
+                } as Partial<AccordionHeaderProps>);
               }
-              if ((child.type as any).displayName === 'AccordionBody') {
+              if ((child.type as ExtendedComponentType).displayName === 'AccordionBody') {
                 return React.cloneElement(child, {
                   id: panelId,
-                  className: `${panelClassNames} ${(child.props as any).className || ''}`.trim(),
+                  className: `${panelClassNames} ${childProps.className || ''}`.trim(),
                   'aria-labelledby': buttonId,
                   panelRef: panelRef,
                   contentRef: contentRef,
-                } as any);
+                } as Partial<AccordionBodyProps>);
               }
             }
             return child;

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -6,6 +6,9 @@ import React, {
   cloneElement,
   isValidElement,
   ElementType,
+  ComponentType,
+  MouseEvent,
+  AnchorHTMLAttributes,
 } from 'react';
 import { BREADCRUMB } from '../../lib/constants/components';
 
@@ -50,6 +53,13 @@ export interface BreadcrumbItemData {
 // Rename exported type to avoid conflict with the component constant
 export type BreadcrumbItemType = BreadcrumbItemData;
 
+// Link component props interface
+interface LinkComponentProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href?: string;
+  to?: string;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
+
 // Compound Component Props
 export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement> {
   /**
@@ -70,17 +80,17 @@ export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement>
   /**
    * Optional click handler for the link
    */
-  onClick?: (event: React.MouseEvent<any>) => void;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 
   /**
    * Optional custom link component
    */
-  linkAs?: React.ElementType<any>;
+  linkAs?: ComponentType<LinkComponentProps>;
 
   /**
    * Link props to pass to the underlying anchor or linkComponent
    */
-  linkProps?: Record<string, any>;
+  linkProps?: Partial<LinkComponentProps>;
 }
 
 export const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(
@@ -114,14 +124,14 @@ export const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(
       </>
     );
 
-    const commonLinkProps = {
+    const commonLinkProps: LinkComponentProps = {
       className: BREADCRUMB.CLASSES.LINK,
-      onClick: onClick as any,
+      onClick: onClick,
       style, // Apply style to the link as per legacy behavior
       ...linkProps,
     };
 
-    const LinkComponent = linkAs as React.ComponentType<any>;
+    const LinkComponent = linkAs;
 
     return (
       <li ref={ref} className={itemClasses} style={style} {...props}>
@@ -206,7 +216,7 @@ const BreadcrumbComponent: React.FC<BreadcrumbProps> = memo(function BreadcrumbB
           href={item.href}
           active={item.active || isLast}
           icon={item.icon}
-          onClick={item.onClick as any}
+          onClick={item.onClick as (event: MouseEvent<HTMLAnchorElement>) => void}
           className={item.className}
           style={item.style}
           linkAs={linkComponent}
@@ -219,19 +229,18 @@ const BreadcrumbComponent: React.FC<BreadcrumbProps> = memo(function BreadcrumbB
     // Compound rendering
     const childrenCount = Children.count(children);
     content = Children.map(children, (child, index) => {
-      if (isValidElement(child)) {
+      if (isValidElement<BreadcrumbItemProps>(child)) {
         const isLast = index === childrenCount - 1;
-        const childProps = child.props as any;
 
-        // Extract props from the child element
-        const { active, linkAs, ...otherProps } = childProps;
+        // Extract props from the child element with proper typing
+        const { active, linkAs, ...otherProps } = child.props;
 
-        const newProps = {
+        const newProps: Partial<BreadcrumbItemProps> = {
           active: active ?? (isLast ? true : undefined),
           linkAs: linkAs ?? linkComponent,
         };
 
-        return cloneElement(child, newProps as any);
+        return cloneElement(child, newProps);
       }
       return child;
     });

package/src/components/Button/Button.tsx

@@ -12,7 +12,6 @@ export type ButtonAsProp = {
   to?: string;
   href?: string;
   linkComponent?: React.ElementType;
-  [key: string]: any;
 };
 
 export const Button = React.memo(
@@ -177,8 +176,8 @@ export const Button = React.memo(
                       ? 'primary'
                       : variant === 'danger'
                         ? 'error'
-                        : (variant as any),
-                } as any,
+                        : variant,
+                },
                 <Spinner
                   size={spinnerSize}
                   variant={
@@ -187,7 +186,7 @@ export const Button = React.memo(
                       ? 'primary'
                       : variant === 'danger'
                         ? 'error'
-                        : (variant as any)
+                        : variant
                   }
                 />
               )}
@@ -339,4 +338,4 @@ Button.displayName = 'Button';
 
 export type { ButtonProps };
 
-export default Button;
+export default Button;

package/src/components/Callout/Callout.tsx

@@ -1,9 +1,14 @@
-import React, { memo, forwardRef } from 'react';
+import React, { memo, forwardRef, ComponentType } from 'react';
 import { CalloutProps } from '../../lib/types/components';
 import { useCallout } from '../../lib/composables/useCallout';
 import { Icon } from '../Icon/Icon';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
+// Type-safe interface for compound component detection
+type ExtendedComponentType<P = {}> = ComponentType<P> & {
+  displayName?: string;
+};
+
 // Subcomponents
 export const CalloutIcon = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ children, className = '', ...props }, ref) => (
@@ -90,51 +95,52 @@ type CalloutComponent = React.FC<CalloutProps> & {
 };
 
 const CalloutComponentBase = ({
-    title,
-    children,
-    icon,
-    variant = 'primary',
-    onClose,
-    actions,
-    compact = false,
-    isToast = false,
+  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,
-    ...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',
-      };
-
-      // 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;
+  });
+
+  // Determine appropriate ARIA attributes based on variant
+  const getAriaAttributes = () => {
+    const baseAttributes: Record<string, string> = {
+      role: 'region',
     };
 
-    // Check for compound usage
-    const hasCompoundComponents = React.Children.toArray(children).some((child) =>
+    // 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;
+  };
+
+  // Check for compound usage
+  const hasCompoundComponents = React.Children.toArray(children).some(
+    child =>
       React.isValidElement(child) &&
       [
         'CalloutIcon',
@@ -143,63 +149,40 @@ const CalloutComponentBase = ({
         'CalloutText',
         'CalloutActions',
         'CalloutContent',
-      ].includes((child.type as any).displayName)
-    );
-
-    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>
+      ].includes((child.type as ExtendedComponentType).displayName || '')
+  );
+
+  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>
 
-        {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>
-        )}
-      </>
-    );
+      {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,
+    };
 
-    if (glass) {
-      // Default glass settings for callouts
-      const defaultGlassProps = {
-        displacementScale: 30,
-        borderRadius: 8,
-        elasticity: 0,
-      };
-
-      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>
-      );
-    }
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
     return (
       <div
@@ -208,9 +191,28 @@ const CalloutComponentBase = ({
         {...props}
         style={style}
       >
-        {calloutContent}
+        <AtomixGlass {...glassProps}>
+          <div
+            className="c-callout__glass-content"
+            style={{ borderRadius: glassProps.borderRadius }}
+          >
+            {calloutContent}
+          </div>
+        </AtomixGlass>
       </div>
     );
+  }
+
+  return (
+    <div
+      className={generateCalloutClass({ variant, compact, isToast, glass, className })}
+      {...getAriaAttributes()}
+      {...props}
+      style={style}
+    >
+      {calloutContent}
+    </div>
+  );
 };
 
 export const Callout = memo(CalloutComponentBase) as unknown as CalloutComponent;