@shohojdhara/atomix 0.4.2 → 0.4.3

package/package.json

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

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -121,14 +121,13 @@ export const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(
       ...linkProps,
     };
 
-    const LinkComponent = linkAs;
+    const LinkComponent = linkAs as React.ComponentType<any>;
 
     return (
       <li ref={ref} className={itemClasses} style={style} {...props}>
         {href && !active ? (
-          LinkComponent ? (
-            // @ts-ignore - Dynamic components are tricky in TS without stricter types
-            <LinkComponent href={href} {...commonLinkProps}>
+          linkAs && LinkComponent ? (
+            <LinkComponent href={href} to={href} {...commonLinkProps}>
               {linkContent}
             </LinkComponent>
           ) : (

package/src/components/Button/Button.tsx

@@ -10,7 +10,7 @@ export type ButtonAsProp = {
   as?: ElementType;
   to?: string;
   href?: string;
-  LinkComponent?: React.ComponentType<any>;
+  LinkComponent?: React.ElementType;
   [key: string]: any;
 };
 
@@ -227,6 +227,7 @@ export const Button = React.memo(
             ...buttonProps,
             ref: ref as any, // LinkComponent usually forwards ref to anchor
             href,
+            to: href,
             target,
             rel: target === '_blank' ? 'noopener noreferrer' : undefined,
           };

package/src/components/Card/Card.tsx

@@ -39,6 +39,8 @@ export const Card = React.memo(
         onFocus,
         href,
         target,
+        // Custom Link
+        LinkComponent,
         // Glass
         glass,
         // Accessibility
@@ -242,17 +244,35 @@ export const Card = React.memo(
 
       // Render as anchor if href is provided
       if (href && !isDisabled) {
-        const anchorElement = (
-          <a
-            {...commonProps}
-            ref={ref as React.Ref<HTMLAnchorElement>}
-            href={href}
-            target={target}
-            rel={target === '_blank' ? 'noopener noreferrer' : undefined}
-          >
-            {cardContent}
-          </a>
-        );
+        let anchorElement: React.ReactElement;
+
+        if (LinkComponent) {
+          const LinkComp = LinkComponent as React.ComponentType<any>;
+          anchorElement = (
+            <LinkComp
+              {...commonProps}
+              ref={ref as React.Ref<HTMLAnchorElement>}
+              href={href}
+              to={href}
+              target={target}
+              rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+            >
+              {cardContent}
+            </LinkComp>
+          );
+        } else {
+          anchorElement = (
+            <a
+              {...commonProps}
+              ref={ref as React.Ref<HTMLAnchorElement>}
+              href={href}
+              target={target}
+              rel={target === '_blank' ? 'noopener noreferrer' : undefined}
+            >
+              {cardContent}
+            </a>
+          );
+        }
 
         if (glass) {
           const glassProps = glass === true ? {} : glass;