@shohojdhara/atomix 0.1.25 → 0.1.26

package/dist/types/components/Breadcrumb/Breadcrumb.d.ts

@@ -38,6 +38,10 @@ export interface BreadcrumbProps {
      * Aria label for the navigation
      */
     ariaLabel?: string;
+    /**
+     * Optional custom link component
+     */
+    LinkComponent?: React.ElementType;
 }
 export declare const Breadcrumb: React.FC<BreadcrumbProps>;
 export default Breadcrumb;

package/dist/types/layouts/Grid/Container.d.ts

@@ -36,3 +36,4 @@ export interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
+export default Container;

package/dist/types/layouts/Grid/Grid.d.ts

@@ -35,3 +35,4 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+export default Grid;

package/dist/types/layouts/Grid/GridCol.d.ts

@@ -62,3 +62,4 @@ export interface GridColProps extends HTMLAttributes<HTMLDivElement> {
  * Uses the CSS grid column classes defined in _objects.grid.scss.
  */
 export declare const GridCol: React.ForwardRefExoticComponent<GridColProps & React.RefAttributes<HTMLDivElement>>;
+export default GridCol;

package/dist/types/layouts/Grid/Row.d.ts

@@ -36,3 +36,4 @@ export interface RowProps extends HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLDivElement>>;
+export default Row;

package/dist/types/layouts/MasonryGrid/MasonryGrid.d.ts

@@ -69,3 +69,4 @@ export interface MasonryGridProps extends HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export declare const MasonryGrid: React.ForwardRefExoticComponent<MasonryGridProps & React.RefAttributes<HTMLDivElement>>;
+export default MasonryGrid;

package/dist/types/layouts/MasonryGrid/MasonryGridItem.d.ts

@@ -22,3 +22,4 @@ export interface MasonryGridItemProps extends HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export declare const MasonryGridItem: React.ForwardRefExoticComponent<MasonryGridItemProps & React.RefAttributes<HTMLDivElement>>;
+export default MasonryGridItem;

package/dist/types/lib/types/components.d.ts

@@ -442,6 +442,10 @@ export interface NavItemProps extends BaseComponentProps {
      * Whether dropdown/mega menu is expanded
      */
     'aria-expanded'?: boolean;
+    /**
+     * Optional custom link component
+     */
+    LinkComponent?: React.ElementType;
 }
 /**
  * Nav dropdown properties
@@ -619,6 +623,10 @@ export interface SideMenuItemProps extends BaseComponentProps {
      * Link rel attribute
      */
     rel?: string;
+    /**
+     * Optional custom link component
+     */
+    LinkComponent?: React.ElementType;
 }
 /**
  * EdgePanel position options
@@ -1720,6 +1728,10 @@ export interface DropdownItemProps extends BaseComponentProps {
      * Item click handler
      */
     onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    /**
+     * Optional custom link component
+     */
+    LinkComponent?: React.ElementType;
 }
 /**
  * Dropdown divider properties

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "Atomix Design System - A modern component library for web applications",
   "main": "dist/js/atomix.react.cjs.js",
   "module": "dist/js/atomix.react.esm.js",
@@ -18,6 +18,7 @@
       "types": "./dist/types/index.d.ts",
       "import": "./dist/js/atomix.react.esm.js",
       "require": "./dist/js/atomix.react.cjs.js",
+      "browser": "./dist/js/atomix.react.umd.js",
       "default": "./dist/js/atomix.react.esm.js"
     },
     "./package.json": "./package.json",

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -48,12 +48,18 @@ export interface BreadcrumbProps {
    * Aria label for the navigation
    */
   ariaLabel?: string;
+
+  /**
+   * Optional custom link component
+   */
+  LinkComponent?: React.ElementType;
 }
 export const Breadcrumb: React.FC<BreadcrumbProps> = ({
   items,
   divider,
   className = '',
   ariaLabel = 'Breadcrumb',
+  LinkComponent,
 }) => {
   const breadcrumbClasses = [BREADCRUMB.CLASSES.BASE, className].filter(Boolean).join(' ');
 
@@ -76,12 +82,20 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
             </>
           );
 
+          const linkProps = {
+            href: item.href,
+            className: BREADCRUMB.CLASSES.LINK,
+            onClick: item.onClick,
+          };
+
           return (
             <li key={index} className={itemClasses}>
               {item.href && !item.active ? (
-                <a href={item.href} className={BREADCRUMB.CLASSES.LINK} onClick={item.onClick}>
-                  {linkContent}
-                </a>
+                LinkComponent ? (
+                  <LinkComponent {...linkProps}>{linkContent}</LinkComponent>
+                ) : (
+                  <a {...linkProps}>{linkContent}</a>
+                )
               ) : (
                 <span className={BREADCRUMB.CLASSES.LINK}>{linkContent}</span>
               )}

package/src/components/Dropdown/Dropdown.tsx

@@ -34,6 +34,7 @@ export const DropdownItem: React.FC<DropdownItemProps> = ({
   icon,
   onClick,
   className = '',
+  LinkComponent,
   ...props
 }) => {
   const { close } = useContext(DropdownContext);
@@ -61,20 +62,29 @@ export const DropdownItem: React.FC<DropdownItemProps> = ({
     .filter(Boolean)
     .join(' ');
 
+  const linkProps = {
+    href,
+    className: itemClasses,
+    onClick: handleClick,
+    role: 'menuitem',
+    tabIndex: 0,
+    ...props,
+  };
+
   if (href && !disabled) {
     return (
       <li>
-        <a
-          href={href}
-          className={itemClasses}
-          onClick={handleClick}
-          role="menuitem"
-          tabIndex={0}
-          {...props}
-        >
-          {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
-          {children}
-        </a>
+        {LinkComponent ? (
+          <LinkComponent {...linkProps}>
+            {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
+            {children}
+          </LinkComponent>
+        ) : (
+          <a {...linkProps}>
+            {icon && <span className="c-dropdown__menu-item-icon">{icon}</span>}
+            {children}
+          </a>
+        )}
       </li>
     );
   }

package/src/components/Navigation/Nav/NavItem.tsx

@@ -42,6 +42,7 @@ export const NavItem = forwardRef<HTMLLIElement, NavItemProps>(
       className = '',
       disabled = false,
       'aria-expanded': ariaExpanded,
+      LinkComponent,
     },
     ref
   ) => {
@@ -132,19 +133,25 @@ export const NavItem = forwardRef<HTMLLIElement, NavItemProps>(
     // Use aria-expanded from props if provided, otherwise use local state
     const expanded = typeof ariaExpanded !== 'undefined' ? ariaExpanded : isActive;
 
+    const linkProps = {
+      ref: itemRef,
+      href: href || '#',
+      className: navLinkClass,
+      onClick: dropdown || megaMenu ? handleDropdownToggle : handleClick(onClick),
+      'aria-disabled': disabled,
+      'aria-expanded': dropdown || megaMenu ? expanded : undefined,
+      'aria-current': (active && !dropdown && !megaMenu ? 'page' : undefined) as React.AriaAttributes['aria-current'],
+    };
+
     return (
       <li ref={ref} className={navItemClass} role="menuitem" aria-haspopup={dropdown || megaMenu}>
-        <a
-          ref={itemRef}
-          href={href || '#'}
-          className={navLinkClass}
-          onClick={dropdown || megaMenu ? handleDropdownToggle : handleClick(onClick)}
-          aria-disabled={disabled}
-          aria-expanded={dropdown || megaMenu ? expanded : undefined}
-          aria-current={active && !dropdown && !megaMenu ? 'page' : undefined}
-        >
-          {dropdown || megaMenu ? childContent[0] : children}
-        </a>
+        {LinkComponent ? (
+          <LinkComponent {...linkProps}>
+            {dropdown || megaMenu ? childContent[0] : children}
+          </LinkComponent>
+        ) : (
+          <a {...linkProps}>{dropdown || megaMenu ? childContent[0] : children}</a>
+        )}
 
         {(dropdown || megaMenu) && childContent.length > 1 && childContent[1]}
       </li>

package/src/components/Navigation/SideMenu/SideMenuItem.tsx

@@ -39,6 +39,7 @@ export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Si
       className = '',
       target,
       rel,
+      LinkComponent,
     },
     ref
   ) => {
@@ -50,20 +51,27 @@ export const SideMenuItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, Si
 
     const itemClass = generateSideMenuItemClass();
 
+    const linkProps = {
+      ref: ref as React.Ref<HTMLAnchorElement>,
+      href: disabled ? undefined : href,
+      className: itemClass,
+      onClick: handleClick(onClick),
+      'aria-disabled': disabled,
+      'aria-current': (active ? 'page' : undefined) as React.AriaAttributes['aria-current'],
+      target: target,
+      rel: rel,
+      tabIndex: disabled ? -1 : 0,
+    };
+
     // Render as link if href is provided
     if (href) {
-      return (
-        <a
-          ref={ref as React.Ref<HTMLAnchorElement>}
-          href={disabled ? undefined : href}
-          className={itemClass}
-          onClick={handleClick(onClick)}
-          aria-disabled={disabled}
-          aria-current={active ? 'page' : undefined}
-          target={target}
-          rel={rel}
-          tabIndex={disabled ? -1 : 0}
-        >
+      return LinkComponent ? (
+        <LinkComponent {...linkProps}>
+          {icon && <span className="c-side-menu__link-icon">{icon}</span>}
+          <span className="c-side-menu__link-text">{children}</span>
+        </LinkComponent>
+      ) : (
+        <a {...linkProps}>
           {icon && <span className="c-side-menu__link-icon">{icon}</span>}
           <span className="c-side-menu__link-text">{children}</span>
         </a>

package/src/components/index.ts

@@ -1,153 +1,42 @@
-// Components Index - Explicit exports for better tree-shaking and compatibility
-
-// Import components directly to ensure they exist before exporting
-import { Accordion } from './Accordion/Accordion';
-import { Avatar } from './Avatar/Avatar';
-import { AvatarGroup } from './Avatar/AvatarGroup';
-import { Badge } from './Badge/Badge';
-import { Breadcrumb } from './Breadcrumb/Breadcrumb';
-import { Button } from './Button/Button';
-import { Callout } from './Callout/Callout';
-import { Card } from './Card/Card';
-import { Checkbox } from './Form/Checkbox';
-import { ColorModeToggle } from './ColorModeToggle/ColorModeToggle';
-import { Container } from '../layouts/Grid/Container';
-import { Countdown } from './Countdown/Countdown';
-import { DataTable } from './DataTable/DataTable';
-import { DatePicker } from './DatePicker/DatePicker';
-import { Dropdown } from './Dropdown/Dropdown';
-import { EdgePanel } from './EdgePanel/EdgePanel';
-import { Form } from './Form/Form';
-import { Grid } from '../layouts/Grid/Grid';
-import { GridCol } from '../layouts/Grid/GridCol';
-import { Hero } from './Hero/Hero';
-import { Icon } from './Icon/Icon';
-import { Input } from './Form/Input';
-import { List } from './List/List';
-import { MasonryGrid } from '../layouts/MasonryGrid/MasonryGrid';
-import { MasonryGridItem } from '../layouts/MasonryGrid/MasonryGridItem';
-import { Messages } from './Messages/Messages';
-import { Modal } from './Modal/Modal';
-import { Navbar } from './Navigation/Navbar/Navbar';
-import { Pagination } from './Pagination/Pagination';
-import { PhotoViewer } from './PhotoViewer/PhotoViewer';
-import { Popover } from './Popover/Popover';
-import { ProductReview } from './ProductReview/ProductReview';
-import { Progress } from './Progress/Progress';
-import { Radio } from './Form/Radio';
-import { Rating } from './Rating/Rating';
-import { River } from './River/River';
-import { Row } from '../layouts/Grid/Row';
-import { SectionIntro } from './SectionIntro/SectionIntro';
-import { Select } from './Form/Select';
-import { Spinner } from './Spinner/Spinner';
-import { Steps } from './Steps/Steps';
-import { Tab } from './Tab/Tab';
-import { Testimonial } from './Testimonial/Testimonial';
-import { Textarea } from './Form/Textarea';
-import { Todo } from './Todo/Todo';
-import { Toggle } from './Toggle/Toggle';
-import { Tooltip } from './Tooltip/Tooltip';
-import { Upload } from './Upload/Upload';
-
-// Export types
-export type { AccordionProps } from './Accordion/Accordion';
-export type { AvatarProps } from './Avatar/Avatar';
-export type { AvatarGroupProps } from './Avatar/AvatarGroup';
-export type { BadgeProps } from './Badge/Badge';
-export type { BreadcrumbProps } from './Breadcrumb/Breadcrumb';
-export type { ButtonProps } from './Button/Button';
-export type { CalloutProps } from './Callout/Callout';
-export type { CardProps } from './Card/Card';
-export type { CheckboxProps } from './Form/Checkbox';
-export type { ColorModeToggleProps } from './ColorModeToggle/ColorModeToggle';
-export type { ContainerProps } from '../layouts/Grid/Container';
-export type { CountdownProps } from './Countdown/Countdown';
-export type { DataTableProps } from './DataTable/DataTable';
-export type { DatePickerProps } from './DatePicker/DatePicker';
-export type { DropdownProps } from './Dropdown/Dropdown';
-export type { EdgePanelProps } from './EdgePanel/EdgePanel';
-export type { FormProps } from './Form/Form';
-export type { GridProps } from '../layouts/Grid/Grid';
-export type { GridColProps } from '../layouts/Grid/GridCol';
-export type { HeroProps } from './Hero/Hero';
-export type { IconProps } from './Icon/Icon';
-export type { InputProps } from './Form/Input';
-export type { ListProps } from './List/List';
-export type { MasonryGridProps } from '../layouts/MasonryGrid/MasonryGrid';
-export type { MasonryGridItemProps } from '../layouts/MasonryGrid/MasonryGridItem';
-export type { MessagesProps } from './Messages/Messages';
-export type { ModalProps } from './Modal/Modal';
-export type { NavbarProps } from './Navigation/Navbar/Navbar';
-export type { PaginationProps } from './Pagination/Pagination';
-export type { PhotoViewerProps } from './PhotoViewer/PhotoViewer';
-export type { PopoverProps } from './Popover/Popover';
-export type { ProductReviewProps } from './ProductReview/ProductReview';
-export type { ProgressProps } from './Progress/Progress';
-export type { RadioProps } from './Form/Radio';
-export type { RatingProps } from './Rating/Rating';
-export type { RiverProps } from './River/River';
-export type { RowProps } from '../layouts/Grid/Row';
-export type { SectionIntroProps } from './SectionIntro/SectionIntro';
-export type { SelectProps } from './Form/Select';
-export type { SpinnerProps } from './Spinner/Spinner';
-export type { StepsProps } from './Steps/Steps';
-export type { TabProps } from './Tab/Tab';
-export type { TestimonialProps } from './Testimonial/Testimonial';
-export type { TextareaProps } from './Form/Textarea';
-export type { TodoProps } from './Todo/Todo';
-export type { ToggleProps } from './Toggle/Toggle';
-export type { TooltipProps } from './Tooltip/Tooltip';
-export type { UploadProps } from './Upload/Upload';
-
-// Export components
-export {
-  Accordion,
-  Avatar,
-  AvatarGroup,
-  Badge,
-  Breadcrumb,
-  Button,
-  Callout,
-  Card,
-  Checkbox,
-  ColorModeToggle,
-  Container,
-  Countdown,
-  DataTable,
-  DatePicker,
-  Dropdown,
-  EdgePanel,
-  Form,
-  Grid,
-  GridCol,
-  Hero,
-  Icon,
-  Input,
-  List,
-  MasonryGrid,
-  MasonryGridItem,
-  Messages,
-  Modal,
-  Navbar,
-  Pagination,
-  PhotoViewer,
-  Popover,
-  ProductReview,
-  Progress,
-  Radio,
-  Rating,
-  River,
-  Row,
-  SectionIntro,
-  Select,
-  Spinner,
-  Steps,
-  Tab,
-  Testimonial,
-  Textarea,
-  Todo,
-  Toggle,
-  Tooltip,
-  Upload
-};
+export { default as Accordion, type AccordionProps } from './Accordion/Accordion';
+export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
+export { default as AvatarGroup, type AvatarGroupProps } from './Avatar/AvatarGroup';
+export { default as Badge, type BadgeProps } from './Badge/Badge';
+export { default as Breadcrumb, type BreadcrumbProps } from './Breadcrumb/Breadcrumb';
+export { default as Button, type ButtonProps } from './Button/Button';
+export { default as Callout, type CalloutProps } from './Callout/Callout';
+export { default as Card, type CardProps } from './Card/Card';
+export { default as Checkbox, type CheckboxProps } from './Form/Checkbox';
+export { default as ColorModeToggle, type ColorModeToggleProps } from './ColorModeToggle/ColorModeToggle';
+export { default as Countdown, type CountdownProps } from './Countdown/Countdown';
+export { default as DataTable, type DataTableProps } from './DataTable/DataTable';
+export { default as DatePicker, type DatePickerProps } from './DatePicker/DatePicker';
+export { default as Dropdown, type DropdownProps } from './Dropdown/Dropdown';
+export { default as EdgePanel, type EdgePanelProps } from './EdgePanel/EdgePanel';
+export { default as Form, type FormProps } from './Form/Form';
+export { default as Hero, type HeroProps } from './Hero/Hero';
+export { default as Icon, type IconProps } from './Icon/Icon';
+export { default as Input, type InputProps } from './Form/Input';
+export { default as List, type ListProps } from './List/List';
+export { default as Messages, type MessagesProps } from './Messages/Messages';
+export { default as Modal, type ModalProps } from './Modal/Modal';
+export { default as Navbar, type NavbarProps } from './Navigation/Navbar/Navbar';
+export { default as Pagination, type PaginationProps } from './Pagination/Pagination';
+export { default as PhotoViewer, type PhotoViewerProps } from './PhotoViewer/PhotoViewer';
+export { default as Popover, type PopoverProps } from './Popover/Popover';
+export { default as ProductReview, type ProductReviewProps } from './ProductReview/ProductReview';
+export { default as Progress, type ProgressProps } from './Progress/Progress';
+export { default as Radio, type RadioProps } from './Form/Radio';
+export { default as Rating, type RatingProps } from './Rating/Rating';
+export { default as River, type RiverProps } from './River/River';
+export { default as SectionIntro, type SectionIntroProps } from './SectionIntro/SectionIntro';
+export { default as Select, type SelectProps } from './Form/Select';
+export { default as Spinner, type SpinnerProps } from './Spinner/Spinner';
+export { default as Steps, type StepsProps } from './Steps/Steps';
+export { default as Tab, type TabProps } from './Tab/Tab';
+export { default as Testimonial, type TestimonialProps } from './Testimonial/Testimonial';
+export { default as Textarea, type TextareaProps } from './Form/Textarea';
+export { default as Todo, type TodoProps } from './Todo/Todo';
+export { default as Toggle, type ToggleProps } from './Toggle/Toggle';
+export { default as Tooltip, type TooltipProps } from './Tooltip/Tooltip';
+export { default as Upload, type UploadProps } from './Upload/Upload';

package/src/layouts/Grid/Container.tsx

@@ -54,3 +54,5 @@ export const Container = forwardRef<HTMLDivElement, ContainerProps>(
 );
 
 Container.displayName = 'Container';
+
+export default Container;

package/src/layouts/Grid/Grid.tsx

@@ -65,3 +65,4 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
 );
 
 Grid.displayName = 'Grid';
+export default Grid;

package/src/layouts/Grid/GridCol.tsx

@@ -158,3 +158,4 @@ export const GridCol = forwardRef<HTMLDivElement, GridColProps>(
 );
 
 GridCol.displayName = 'GridCol';
+export default GridCol;

package/src/layouts/Grid/Row.tsx

@@ -66,3 +66,5 @@ export const Row = forwardRef<HTMLDivElement, RowProps>(
 );
 
 Row.displayName = 'Row';
+
+export default Row;

package/src/layouts/MasonryGrid/MasonryGrid.tsx

@@ -403,4 +403,6 @@ export const MasonryGrid = forwardRef<HTMLDivElement, MasonryGridProps>(
 
 MasonryGrid.displayName = 'MasonryGrid';
 
+export default MasonryGrid;
+
 // Ensure loadingImages state resets when items/columns/imagesLoaded change

package/src/layouts/MasonryGrid/MasonryGridItem.tsx

@@ -40,3 +40,5 @@ export const MasonryGridItem = forwardRef<HTMLDivElement, MasonryGridItemProps>(
 );
 
 MasonryGridItem.displayName = 'MasonryGridItem';
+
+export default MasonryGridItem;

package/src/layouts/index.ts

@@ -1,8 +1,3 @@
-// Export all layout components individually for better tree-shaking
-export * from './Grid';
-export * from './MasonryGrid';
-
-// Also provide a default export for convenience
 import * as Grid from './Grid';
 import * as MasonryGrid from './MasonryGrid';
 
@@ -11,4 +6,4 @@ const layouts = {
   ...MasonryGrid,
 };
 
-export default layouts;
+export default layouts;

package/src/lib/types/components.ts

@@ -553,6 +553,11 @@ export interface NavItemProps extends BaseComponentProps {
    * Whether dropdown/mega menu is expanded
    */
   'aria-expanded'?: boolean;
+
+  /**
+   * Optional custom link component
+   */
+  LinkComponent?: React.ElementType;
 }
 
 /**
@@ -763,6 +768,11 @@ export interface SideMenuItemProps extends BaseComponentProps {
    * Link rel attribute
    */
   rel?: string;
+
+  /**
+   * Optional custom link component
+   */
+  LinkComponent?: React.ElementType;
 }
 
 /**
@@ -2113,6 +2123,11 @@ export interface DropdownItemProps extends BaseComponentProps {
    * Item click handler
    */
   onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+
+  /**
+   * Optional custom link component
+   */
+  LinkComponent?: React.ElementType;
 }
 
 /**