@shohojdhara/atomix 0.3.15 → 0.4.1

package/src/components/Badge/Badge.stories.tsx

@@ -254,7 +254,8 @@ export const UsageExamples: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Practical examples demonstrating how badges can be used in real-world scenarios such as navigation menus, product cards, and task lists.',
+        story:
+          'Practical examples demonstrating how badges can be used in real-world scenarios such as navigation menus, product cards, and task lists.',
       },
     },
   },
@@ -325,7 +326,8 @@ export const AccessibilityFeatures: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Examples of accessible badge implementations with proper ARIA labels and keyboard navigation support.',
+        story:
+          'Examples of accessible badge implementations with proper ARIA labels and keyboard navigation support.',
       },
     },
   },
@@ -338,14 +340,11 @@ export const AccessibilityFeatures: Story = {
           <Badge label="Alert" variant="error" aria-label="Critical notification" />
         </div>
       </div>
-      
+
       <div>
         <h3 className="u-mt-0 u-mb-2">Interactive Badges</h3>
         <div className="u-flex u-gap-2">
-          <Badge 
-            label="Closable Tag" 
-            variant="info" 
-          />
+          <Badge label="Closable Tag" variant="info" />
         </div>
       </div>
     </div>
@@ -361,7 +360,13 @@ export const WithGlassEffect: Story = {
     variant: 'primary',
   },
   render: () => (
-    <div className="u-bg-cover u-bg-center u-rounded-xl u-p-24" style={{backgroundImage: 'url(https://cdn.pixabay.com/photo/2023/07/07/20/42/grasshopper-8113345_1280.jpg)'}}>
+    <div
+      className="u-bg-cover u-bg-center u-rounded-xl u-p-24"
+      style={{
+        backgroundImage:
+          'url(https://cdn.pixabay.com/photo/2023/07/07/20/42/grasshopper-8113345_1280.jpg)',
+      }}
+    >
       <div className="u-flex u-flex-wrap u-gap-2">
         {THEME_COLORS.map(color => (
           <Badge key={color} label={color} variant={color} glass={true} />
@@ -390,7 +395,13 @@ export const WithCustomGlassSettings: Story = {
   },
   decorators: [
     Story => (
-      <div className="u-bg-cover u-bg-center u-rounded-xl u-p-24" style={{backgroundImage: 'url(https://cdn.pixabay.com/photo/2021/06/14/22/46/milky-way-6337038_1280.jpg)'}}>
+      <div
+        className="u-bg-cover u-bg-center u-rounded-xl u-p-24"
+        style={{
+          backgroundImage:
+            'url(https://cdn.pixabay.com/photo/2021/06/14/22/46/milky-way-6337038_1280.jpg)',
+        }}
+      >
         <Story />
       </div>
     ),

package/src/components/Badge/Badge.test.tsx

@@ -4,48 +4,48 @@ import { Badge } from './Badge';
 
 // Mock AtomixGlass component
 vi.mock('../AtomixGlass/AtomixGlass', () => ({
-    AtomixGlass: ({ children, ...props }: any) => (
-        <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
-            {children}
-        </div>
-    ),
+  AtomixGlass: ({ children, ...props }: any) => (
+    <div data-testid="atomix-glass" data-glass-props={JSON.stringify(props)}>
+      {children}
+    </div>
+  ),
 }));
 
 describe('Badge Component', () => {
-    it('renders correctly', () => {
-        render(<Badge label="Test Badge" />);
-        expect(screen.getByText('Test Badge')).toBeInTheDocument();
-    });
-
-    it('renders with aria-label', () => {
-        render(<Badge label="Badge" aria-label="Accessible Badge" />);
-        expect(screen.getByLabelText('Accessible Badge')).toBeInTheDocument();
-    });
-
-    it('renders close button when onRemove is provided', () => {
-        const handleRemove = vi.fn();
-        render(<Badge label="Removable" onRemove={handleRemove} />);
-
-        const closeButton = screen.getByRole('button', { name: 'Remove badge' });
-        expect(closeButton).toBeInTheDocument();
-
-        fireEvent.click(closeButton);
-        expect(handleRemove).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not render close button when onRemove is not provided', () => {
-        render(<Badge label="Static" />);
-        expect(screen.queryByRole('button')).not.toBeInTheDocument();
-    });
-
-    it('disables close button when badge is disabled', () => {
-        const handleRemove = vi.fn();
-        render(<Badge label="Disabled" onRemove={handleRemove} disabled />);
-
-        const closeButton = screen.getByRole('button', { name: 'Remove badge' });
-        expect(closeButton).toBeDisabled();
-
-        fireEvent.click(closeButton);
-        expect(handleRemove).not.toHaveBeenCalled();
-    });
+  it('renders correctly', () => {
+    render(<Badge label="Test Badge" />);
+    expect(screen.getByText('Test Badge')).toBeInTheDocument();
+  });
+
+  it('renders with aria-label', () => {
+    render(<Badge label="Badge" aria-label="Accessible Badge" />);
+    expect(screen.getByLabelText('Accessible Badge')).toBeInTheDocument();
+  });
+
+  it('renders close button when onRemove is provided', () => {
+    const handleRemove = vi.fn();
+    render(<Badge label="Removable" onRemove={handleRemove} />);
+
+    const closeButton = screen.getByRole('button', { name: 'Remove badge' });
+    expect(closeButton).toBeInTheDocument();
+
+    fireEvent.click(closeButton);
+    expect(handleRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render close button when onRemove is not provided', () => {
+    render(<Badge label="Static" />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('disables close button when badge is disabled', () => {
+    const handleRemove = vi.fn();
+    render(<Badge label="Disabled" onRemove={handleRemove} disabled />);
+
+    const closeButton = screen.getByRole('button', { name: 'Remove badge' });
+    expect(closeButton).toBeDisabled();
+
+    fireEvent.click(closeButton);
+    expect(handleRemove).not.toHaveBeenCalled();
+  });
 });

package/src/components/Badge/Badge.tsx

@@ -4,75 +4,77 @@ import { BADGE } from '../../lib/constants/components';
 import { BadgeProps } from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
-export const Badge: React.FC<BadgeProps> = memo(({
-  label,
-  variant = 'primary',
-  size = 'md',
-  disabled = false,
-  icon,
-  onRemove,
-  'aria-label': ariaLabel,
-  className = '',
-  glass,
-  style,
-}) => {
-  const { generateBadgeClass } = useBadge({
-    variant,
-    size,
-    disabled,
-  });
+export const Badge: React.FC<BadgeProps> = memo(
+  ({
+    label,
+    variant = 'primary',
+    size = 'md',
+    disabled = false,
+    icon,
+    onRemove,
+    'aria-label': ariaLabel,
+    className = '',
+    glass,
+    style,
+  }) => {
+    const { generateBadgeClass } = useBadge({
+      variant,
+      size,
+      disabled,
+    });
 
-  const ref = useRef<HTMLSpanElement>(null);
+    const ref = useRef<HTMLSpanElement>(null);
 
-  const badgeClass = generateBadgeClass({
-    variant,
-    size,
-    disabled,
-    className: `${className} ${glass ? 'c-badge--glass' : ''}`.trim(),
-  });
+    const badgeClass = generateBadgeClass({
+      variant,
+      size,
+      disabled,
+      className: `${className} ${glass ? 'c-badge--glass' : ''}`.trim(),
+    });
 
-  const badgeElement = (
-    <span
-      className={badgeClass}
-      aria-disabled={disabled}
-      aria-label={ariaLabel}
-      ref={ref}
-      style={style}
-    >
-      {icon && <span className={BADGE.ICON_CLASS}>{icon}</span>}
-      <span>{label}</span>
-      {onRemove && (
-        <button
-          type="button"
-          className="c-badge__close"
-          onClick={onRemove}
-          aria-label="Remove badge"
-          disabled={disabled}
-        >
-          ×
-        </button>
-      )}
-    </span>
-  );
+    const badgeElement = (
+      <span
+        className={badgeClass}
+        aria-disabled={disabled}
+        aria-label={ariaLabel}
+        ref={ref}
+        style={style}
+      >
+        {icon && <span className={BADGE.ICON_CLASS}>{icon}</span>}
+        <span>{label}</span>
+        {onRemove && (
+          <button
+            type="button"
+            className="c-badge__close"
+            onClick={onRemove}
+            aria-label="Remove badge"
+            disabled={disabled}
+          >
+            ×
+          </button>
+        )}
+      </span>
+    );
 
-  if (glass) {
-    // Default glass settings for badges
-    const defaultGlassProps = {
-      displacementScale: 20,
-      cornerRadius: ref.current?.getBoundingClientRect().width
-        ? ref.current?.getBoundingClientRect().width / 2
-        : 16,
-      className: 'c-badge--glass',
-      elasticity: 0,
-    };
+    if (glass) {
+      // Default glass settings for badges
+      const defaultGlassProps = {
+        displacementScale: 20,
+        cornerRadius: ref.current?.getBoundingClientRect().width
+          ? ref.current?.getBoundingClientRect().width / 2
+          : 16,
+        className: 'c-badge--glass',
+        elasticity: 0,
+      };
 
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return <AtomixGlass {...glassProps}>{badgeElement}</AtomixGlass>;
-  }
+      return <AtomixGlass {...glassProps}>{badgeElement}</AtomixGlass>;
+    }
 
-  return badgeElement;
-});
+    return badgeElement;
+  }
+);
 
 Badge.displayName = 'Badge';
 

package/src/components/Block/Block.stories.tsx

@@ -178,7 +178,9 @@ export const ArticleLayout: Story = {
       <Block spacing="md" container={{ type: 'sm' }} background="secondary">
         <h3>Ready to get started?</h3>
         <p>Join thousands of developers building with our design system.</p>
-        <Button variant="primary" onClick={fn()}>Start Building</Button>
+        <Button variant="primary" onClick={fn()}>
+          Start Building
+        </Button>
       </Block>
     </div>
   ),
@@ -334,14 +336,22 @@ export const ContentPreview: Story = {
             <Card
               title="Cards"
               text="Flexible content containers with multiple options"
-              actions={<Button variant="primary" onClick={fn()}>View Details</Button>}
+              actions={
+                <Button variant="primary" onClick={fn()}>
+                  View Details
+                </Button>
+              }
             />
           </GridCol>
           <GridCol xs={12} md={6} lg={4}>
             <Card
               title="Blocks"
               text="Layout containers with consistent spacing and backgrounds"
-              actions={<Button variant="primary" onClick={fn()}>Learn More</Button>}
+              actions={
+                <Button variant="primary" onClick={fn()}>
+                  Learn More
+                </Button>
+              }
             />
           </GridCol>
         </Grid>
@@ -398,4 +408,4 @@ export const ContentPreview: Story = {
       </Block>
     </div>
   ),
-};
+};

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -181,18 +181,18 @@ export const WithMixedInteractions: Story = {
   args: {
     items: [
       { label: 'Home', href: '/' },
-      { 
-        label: 'Products', 
+      {
+        label: 'Products',
         onClick: fn(),
         // Simulating client-side navigation
       },
-      { 
-        label: 'Category', 
+      {
+        label: 'Category',
         href: '/products/category',
         icon: <Icon name="Folder" size="sm" />,
       },
-      { 
-        label: 'Product Name', 
+      {
+        label: 'Product Name',
         active: true,
         icon: <Icon name="Tag" size="sm" />,
       },
@@ -202,7 +202,8 @@ export const WithMixedInteractions: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Breadcrumb combining both traditional link navigation and client-side interactions.',
+        story:
+          'Breadcrumb combining both traditional link navigation and client-side interactions.',
       },
     },
   },
@@ -228,4 +229,4 @@ export const LongBreadcrumbPath: Story = {
       },
     },
   },
-};
+};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,7 +1,8 @@
-import React, { ReactNode, memo } from 'react';
+import React, { ReactNode, memo, forwardRef, Children, cloneElement, isValidElement } from 'react';
 import { BREADCRUMB } from '../../lib/constants/components';
 
-export interface BreadcrumbItem {
+// Legacy Item Interface
+export interface BreadcrumbItemData {
   /**
    * Text to display
    */
@@ -38,11 +39,108 @@ export interface BreadcrumbItem {
   className?: string;
 }
 
+// Export legacy interface as type alias to preserve backward compatibility for type imports
+export type { BreadcrumbItemData as BreadcrumbItem };
+
+// Compound Component Props
+export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  /**
+   * URL for the breadcrumb item
+   */
+  href?: string;
+
+  /**
+   * Whether this item is active (current page)
+   */
+  active?: boolean;
+
+  /**
+   * Optional icon to display before the label
+   */
+  icon?: ReactNode;
+
+  /**
+   * Optional click handler for the link
+   */
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLSpanElement>) => void;
+
+  /**
+   * Optional custom link component
+   */
+  linkAs?: React.ElementType;
+
+  /**
+   * Link props to pass to the underlying anchor or LinkComponent
+   */
+  linkProps?: Record<string, any>;
+}
+
+export const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(
+  (
+    {
+      children,
+      href,
+      active,
+      icon,
+      onClick,
+      className = '',
+      style,
+      linkAs: LinkComponent,
+      linkProps = {},
+      ...props
+    },
+    ref
+  ) => {
+    const itemClasses = [BREADCRUMB.CLASSES.ITEM, active ? BREADCRUMB.CLASSES.ACTIVE : '', className]
+      .filter(Boolean)
+      .join(' ');
+
+    const linkContent = (
+      <>
+        {icon && <span className="c-breadcrumb__icon">{icon}</span>}
+        {children}
+      </>
+    );
+
+    const commonLinkProps = {
+      className: BREADCRUMB.CLASSES.LINK,
+      onClick: onClick as any,
+      style, // Apply style to the link as per legacy behavior
+      ...linkProps,
+    };
+
+    return (
+      <li ref={ref} className={itemClasses} style={style} {...props}>
+        {href && !active ? (
+          LinkComponent ? (
+            (() => {
+              const Component = LinkComponent;
+              return (
+                <Component href={href} {...commonLinkProps}>
+                  {linkContent}
+                </Component>
+              );
+            })()
+          ) : (
+            <a href={href} {...(commonLinkProps as React.HTMLAttributes<HTMLAnchorElement>)}>
+              {linkContent}
+            </a>
+          )
+        ) : (
+          <span className={BREADCRUMB.CLASSES.LINK}>{linkContent}</span>
+        )}
+      </li>
+    );
+  }
+);
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
 export interface BreadcrumbProps {
   /**
-   * Array of breadcrumb items
+   * Array of breadcrumb items (Legacy)
    */
-  items: BreadcrumbItem[];
+  items?: BreadcrumbItemData[];
 
   /**
    * Custom divider character or element
@@ -68,69 +166,79 @@ export interface BreadcrumbProps {
    * Custom style for the breadcrumb
    */
   style?: React.CSSProperties;
+
+  /**
+   * Children (Compound)
+   */
+  children?: ReactNode;
 }
-export const Breadcrumb: React.FC<BreadcrumbProps> = memo(({
-  items,
-  divider,
-  className = '',
-  'aria-label': ariaLabel = 'Breadcrumb',
-  LinkComponent,
-  style,
-}) => {
-  const breadcrumbClasses = [BREADCRUMB.CLASSES.BASE, className].filter(Boolean).join(' ');
-
-  return (
-    <nav aria-label={ariaLabel} style={style}>
-      <ol className={breadcrumbClasses}>
-        {items.map((item, index) => {
-          const isLast = index === items.length - 1;
-          const itemClasses = [
-            BREADCRUMB.CLASSES.ITEM,
-            item.active || isLast ? BREADCRUMB.CLASSES.ACTIVE : '',
-          ]
-            .filter(Boolean)
-            .join(' ');
-
-          const linkContent = (
-            <>
-              {item.icon && <span className="c-breadcrumb__icon">{item.icon}</span>}
-              {item.label}
-            </>
-          );
-
-          const linkProps = {
-            href: item.href,
-            className: BREADCRUMB.CLASSES.LINK,
-            onClick: item.onClick,
-            style: item.style,
-          };
-
-          return (
-            <li key={index} className={itemClasses} style={item.style}>
-              {item.href && !item.active ? (
-                LinkComponent ? (
-                  (() => {
-                    const Component = LinkComponent as React.ComponentType<any>;
-                    return (
-                      <Component {...(linkProps as React.ComponentProps<React.ElementType>)}>
-                        {linkContent}
-                      </Component>
-                    );
-                  })()
-                ) : (
-                  <a {...(linkProps as React.ComponentProps<'a'>)}>{linkContent}</a>
-                )
-              ) : (
-                <span className={BREADCRUMB.CLASSES.LINK}>{linkContent}</span>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-});
+
+type BreadcrumbComponent = React.FC<BreadcrumbProps> & {
+  Item: typeof BreadcrumbItem;
+};
+
+export const Breadcrumb: BreadcrumbComponent = memo(
+  ({
+    items,
+    divider,
+    className = '',
+    'aria-label': ariaLabel = 'Breadcrumb',
+    LinkComponent,
+    style,
+    children,
+  }) => {
+    const breadcrumbClasses = [BREADCRUMB.CLASSES.BASE, className].filter(Boolean).join(' ');
+
+    let content: ReactNode;
+
+    if (items && items.length > 0) {
+      // Legacy rendering
+      content = items.map((item, index) => {
+        const isLast = index === items.length - 1;
+
+        return (
+          <BreadcrumbItem
+            key={index}
+            href={item.href}
+            active={item.active || isLast}
+            icon={item.icon}
+            onClick={item.onClick}
+            className={item.className}
+            style={item.style}
+            linkAs={LinkComponent}
+          >
+            {item.label}
+          </BreadcrumbItem>
+        );
+      });
+    } else {
+      // Compound rendering
+      const childrenCount = Children.count(children);
+      content = Children.map(children, (child, index) => {
+        if (isValidElement(child)) {
+          const isLast = index === childrenCount - 1;
+          const childProps = child.props as any;
+
+          return cloneElement(child, {
+            active: childProps.active ?? (isLast ? true : undefined),
+            linkAs: childProps.linkAs ?? LinkComponent,
+          } as any);
+        }
+        return child;
+      });
+    }
+
+    return (
+      <nav aria-label={ariaLabel} style={style}>
+        <ol className={breadcrumbClasses}>
+          {content}
+        </ol>
+      </nav>
+    );
+  }
+) as unknown as BreadcrumbComponent;
 
 Breadcrumb.displayName = 'Breadcrumb';
+Breadcrumb.Item = BreadcrumbItem;
 
 export default Breadcrumb;