@shohojdhara/atomix 0.1.24 → 0.1.26

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

@@ -0,0 +1 @@
+export * from './components';

package/dist/types/lib/utils/dom.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Check if element has a specific class
+ * @param element - DOM element to check
+ * @param className - Class name to check for
+ * @returns Whether element has the class
+ */
+export declare function hasClass(element: HTMLElement, className: string): boolean;
+/**
+ * Add class to element if not already present
+ * @param element - DOM element to modify
+ * @param className - Class name to add
+ */
+export declare function addClass(element: HTMLElement, className: string): void;
+/**
+ * Remove class from element if present
+ * @param element - DOM element to modify
+ * @param className - Class name to remove
+ */
+export declare function removeClass(element: HTMLElement, className: string): void;
+/**
+ * Toggle class on element
+ * @param element - DOM element to modify
+ * @param className - Class name to toggle
+ * @param force - If true, adds class; if false, removes class
+ */
+export declare function toggleClass(element: HTMLElement, className: string, force?: boolean): void;

package/dist/types/lib/utils/icons.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Create a Phosphor icon SVG element
+ * @param name - Icon name
+ * @param size - Icon size in pixels
+ * @returns SVG element as HTML string
+ */
+export declare function createPhosphorIcon(name: string, size?: number): string;
+/**
+ * Create an icon element
+ * @param name - Icon name
+ * @param size - Icon size in pixels
+ * @param className - Additional CSS class name
+ * @returns Icon element
+ */
+export declare function createIconElement(name: string, size?: number, className?: string): HTMLSpanElement;
+/**
+ * Get all available icon names
+ * @returns Array of icon names
+ */
+export declare function getAvailableIcons(): string[];

package/dist/types/lib/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './dom';
+export * from './icons';
+export * from './useForkRef';

package/dist/types/lib/utils/useForkRef.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * Utility to merge multiple React refs into one
+ */
+export declare function setRef<T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null, value: T | null): void;
+/**
+ * Combines two React refs into a single ref function
+ * This is used when you need to use and forward a ref at the same time
+ */
+export default function useForkRef<T>(refA: React.Ref<T> | null, refB: React.Ref<T> | null): React.RefCallback<T> | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.1.24",
+  "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",
@@ -30,7 +31,13 @@
       "default": "./dist/css/atomix.min.css"
     },
     "./scss": "./src/styles/index.scss",
-    "./dist/types/*": "./dist/types/*"
+    "./dist/types/*": "./dist/types/*",
+    "./components/*": {
+      "types": "./dist/types/components/*.d.ts",
+      "import": "./dist/js/components/*.js",
+      "require": "./dist/js/components/*.js",
+      "default": "./dist/js/components/*.js"
+    }
   },
   "typesVersions": {
     "*": {
@@ -107,7 +114,8 @@
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build": "npm-run-all clean:dist build:styles build:react build:types",
+    "build": "npm-run-all clean:dist build:styles build:react build:types fix:exports",
+    "fix:exports": "node scripts/fix-exports.js",
     "build:react": "webpack --mode production --env target=components --env format=all",
     "build:styles": "webpack --mode production --env target=styles",
     "build:types": "npm run clean:types && tsc --emitDeclarationOnly --declaration --declarationDir dist/types && node scripts/fix-types.js",

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,117 +1,42 @@
-// Components Index - Explicit exports for better tree-shaking and compatibility
-
-// Accordion
-export { Accordion, type AccordionProps } from './Accordion/Accordion';
-
-// Avatar
-export { Avatar, type AvatarProps } from './Avatar/Avatar';
-
-// AvatarGroup
-export { AvatarGroup, type AvatarGroupProps } from './Avatar/AvatarGroup';
-
-// Badge
-export { Badge, type BadgeProps } from './Badge/Badge';
-
-// Breadcrumb
-export { Breadcrumb, type BreadcrumbProps } from './Breadcrumb/Breadcrumb';
-
-// Button
-export { Button, type ButtonProps } from './Button/Button';
-
-// Callout
-export { Callout, type CalloutProps } from './Callout/Callout';
-
-// Card
-export { Card, type CardProps } from './Card/Card';
-
-// ColorModeToggle
-export { ColorModeToggle, type ColorModeToggleProps } from './ColorModeToggle/ColorModeToggle';
-
-// Countdown
-export { Countdown, type CountdownProps } from './Countdown/Countdown';
-
-// DataTable
-export { DataTable, type DataTableProps } from './DataTable/DataTable';
-
-// DatePicker
-export { DatePicker, type DatePickerProps } from './DatePicker/DatePicker';
-
-// Dropdown
-export { Dropdown, type DropdownProps } from './Dropdown/Dropdown';
-
-// EdgePanel
-export { EdgePanel, type EdgePanelProps } from './EdgePanel/EdgePanel';
-
-// Form components - you might want to break these down further
-export { Form, type FormProps } from './Form/Form';
-export { Input, type InputProps } from './Form/Input';
-export { Textarea, type TextareaProps } from './Form/Textarea';
-export { Select, type SelectProps } from './Form/Select';
-export { Checkbox, type CheckboxProps } from './Form/Checkbox';
-export { Radio, type RadioProps } from './Form/Radio';
-
-// Hero
-export { Hero, type HeroProps } from './Hero/Hero';
-
-// Icon
-export { Icon, type IconProps } from './Icon/Icon';
-
-// List
-export { List, type ListProps } from './List/List';
-
-// Messages
-export { Messages, type MessagesProps } from './Messages/Messages';
-
-// Modal
-export { Modal, type ModalProps } from './Modal/Modal';
-
-// Navbar
-export { Navbar, type NavbarProps } from './Navigation/Navbar/Navbar';
-
-// Pagination
-export { Pagination, type PaginationProps } from './Pagination/Pagination';
-
-// PhotoViewer
-export { PhotoViewer, type PhotoViewerProps } from './PhotoViewer/PhotoViewer';
-
-// Popover
-export { Popover, type PopoverProps } from './Popover/Popover';
-
-// ProductReview
-export { ProductReview, type ProductReviewProps } from './ProductReview/ProductReview';
-
-// Progress
-export { Progress, type ProgressProps } from './Progress/Progress';
-
-// Rating
-export { Rating, type RatingProps } from './Rating/Rating';
-
-// River
-export { River, type RiverProps } from './River/River';
-
-// SectionIntro
-export { SectionIntro, type SectionIntroProps } from './SectionIntro/SectionIntro';
-
-// Spinner
-export { Spinner, type SpinnerProps } from './Spinner/Spinner';
-
-// Steps
-export { Steps, type StepsProps } from './Steps/Steps';
-
-// Tab
-export { Tab, type TabProps } from './Tab/Tab';
-
-// Testimonial
-export { Testimonial, type TestimonialProps } from './Testimonial/Testimonial';
-
-// Todo
-export { Todo, type TodoProps } from './Todo/Todo';
-
-// Toggle
-export { Toggle, type ToggleProps } from './Toggle/Toggle';
-
-// Tooltip
-export { Tooltip, type TooltipProps } from './Tooltip/Tooltip';
-
-// Upload
-export { Upload, type UploadProps } from './Upload/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;
 }
 
 /**