@shohojdhara/atomix 0.4.0 → 0.4.2

package/src/components/AtomixGlass/stories/Playground.stories.tsx

@@ -66,7 +66,7 @@ const meta: Meta<typeof AtomixGlass> = {
       description: 'Elasticity factor for mouse interactions (default: 0.15)',
       table: { defaultValue: { summary: '0.15' } },
     },
-    cornerRadius: {
+    borderRadius: {
       control: { type: 'range', min: 0, max: 50, step: 1 },
       description: 'Corner radius in pixels (default: 20)',
       table: { defaultValue: { summary: '20' } },
@@ -137,12 +137,12 @@ const meta: Meta<typeof AtomixGlass> = {
       description: 'Override for high contrast preference (default: false)',
       table: { defaultValue: { summary: 'false' } },
     },
-    disableEffects: {
+    withoutEffects: {
       control: 'boolean',
       description: 'Disable all visual effects (default: false)',
       table: { defaultValue: { summary: 'false' } },
     },
-    enablePerformanceMonitoring: {
+    debugPerformance: {
       control: 'boolean',
       description: 'Enable performance monitoring (default: false)',
       table: { defaultValue: { summary: 'false' } },
@@ -299,13 +299,13 @@ export const Playground: Story = {
       saturation: 140,
       aberrationIntensity: 2,
       elasticity: 0.15,
-      cornerRadius: 20,
+      borderRadius: 20,
       overLight: false,
       reducedMotion: false,
       highContrast: false,
-      disableEffects: false,
-      enableLiquidBlur: false,
-      enableBorderEffect: true,
+      withoutEffects: false,
+      withLiquidBlur: false,
+      withBorder: true,
     });
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -333,13 +333,13 @@ export const Playground: Story = {
           saturation: 110,
           aberrationIntensity: 0.5,
           elasticity: 0.05,
-          cornerRadius: 12,
+          borderRadius: 12,
           overLight: false,
           reducedMotion: false,
           highContrast: false,
-          disableEffects: false,
-          enableLiquidBlur: false,
-          enableBorderEffect: true,
+          withoutEffects: false,
+          withLiquidBlur: false,
+          withBorder: true,
         },
         mode: 'standard' as const,
         shader: 'liquidGlass' as const,
@@ -353,13 +353,13 @@ export const Playground: Story = {
           saturation: 140,
           aberrationIntensity: 2,
           elasticity: 0.15,
-          cornerRadius: 20,
+          borderRadius: 20,
           overLight: false,
           reducedMotion: false,
           highContrast: false,
-          disableEffects: false,
-          enableLiquidBlur: false,
-          enableBorderEffect: true,
+          withoutEffects: false,
+          withLiquidBlur: false,
+          withBorder: true,
         },
         mode: 'standard' as const,
         shader: 'liquidGlass' as const,
@@ -373,13 +373,13 @@ export const Playground: Story = {
           saturation: 170,
           aberrationIntensity: 3.5,
           elasticity: 0.25,
-          cornerRadius: 28,
+          borderRadius: 28,
           overLight: false,
           reducedMotion: false,
           highContrast: false,
-          disableEffects: false,
-          enableLiquidBlur: true,
-          enableBorderEffect: true,
+          withoutEffects: false,
+          withLiquidBlur: true,
+          withBorder: true,
         },
         mode: 'prominent' as const,
         shader: 'plasma' as const,
@@ -393,13 +393,13 @@ export const Playground: Story = {
           saturation: 200,
           aberrationIntensity: 5,
           elasticity: 0.35,
-          cornerRadius: 32,
+          borderRadius: 32,
           overLight: false,
           reducedMotion: false,
           highContrast: false,
-          disableEffects: false,
-          enableLiquidBlur: true,
-          enableBorderEffect: true,
+          withoutEffects: false,
+          withLiquidBlur: true,
+          withBorder: true,
         },
         mode: 'shader' as const,
         shader: 'waves' as const,
@@ -420,15 +420,15 @@ export const Playground: Story = {
   saturation={${settings.saturation}}
   aberrationIntensity={${settings.aberrationIntensity}}
   elasticity={${settings.elasticity}}
-  cornerRadius={${settings.cornerRadius}}
+  borderRadius={${settings.borderRadius}}
   overLight={${settings.overLight}}
   mode="${selectedMode}"
   shaderVariant="${selectedShader}"
   reducedMotion={${settings.reducedMotion}}
   highContrast={${settings.highContrast}}
-  disableEffects={${settings.disableEffects}}
-  enableLiquidBlur={${settings.enableLiquidBlur}}
-  enableBorderEffect={${settings.enableBorderEffect}}
+  withoutEffects={${settings.withoutEffects}}
+  withLiquidBlur={${settings.withLiquidBlur}}
+  withBorder={${settings.withBorder}}
 >
   <div className="your-content">
     {/* Your content here */}
@@ -729,7 +729,7 @@ export const Playground: Story = {
                                 ? 300
                                 : key === 'aberrationIntensity'
                                   ? 10
-                                  : key === 'cornerRadius'
+                                  : key === 'borderRadius'
                                     ? 100
                                     : key === 'blurAmount'
                                       ? 10
@@ -872,13 +872,13 @@ export const Playground: Story = {
                           saturation: 140,
                           aberrationIntensity: 2,
                           elasticity: 0.15,
-                          cornerRadius: 20,
+                          borderRadius: 20,
                           overLight: false,
                           reducedMotion: false,
                           highContrast: false,
-                          disableEffects: false,
-                          enableLiquidBlur: false,
-                          enableBorderEffect: true,
+                          withoutEffects: false,
+                          withLiquidBlur: false,
+                          withBorder: true,
                         });
                         setSelectedMode('standard');
                         setSelectedShader('liquidGlass');
@@ -906,7 +906,7 @@ export const Playground: Story = {
                     <AtomixGlass
                       displacementScale={80}
                       aberrationIntensity={1}
-                      cornerRadius={16}
+                      borderRadius={16}
                       saturation={120}
                     >
                       <div style={{ padding: '2.5rem' }}>
@@ -980,15 +980,15 @@ export const Playground: Story = {
                     saturation={settings.saturation}
                     aberrationIntensity={settings.aberrationIntensity}
                     elasticity={settings.elasticity}
-                    cornerRadius={settings.cornerRadius}
+                    borderRadius={settings.borderRadius}
                     overLight={settings.overLight}
                     mode={selectedMode}
                     shaderVariant={selectedShader as any}
                     reducedMotion={settings.reducedMotion}
                     highContrast={settings.highContrast}
-                    disableEffects={settings.disableEffects}
-                    enableLiquidBlur={settings.enableLiquidBlur}
-                    enableBorderEffect={settings.enableBorderEffect}
+                    withoutEffects={settings.withoutEffects}
+                    withLiquidBlur={settings.withLiquidBlur}
+                    withBorder={settings.withBorder}
                     style={{ width: '100%' }}
                   >
                     <div style={{ padding: '2.5rem', textAlign: 'center' }}>
@@ -1150,31 +1150,31 @@ export const Playground: Story = {
                               style={{
                                 padding: '4px 12px',
                                 borderRadius: '12px',
-                                background: settings.enableLiquidBlur
+                                background: settings.withLiquidBlur
                                   ? 'rgba(122, 255, 215, 0.2)'
                                   : 'rgba(255,255,255,0.1)',
                                 fontSize: '0.75rem',
-                                border: settings.enableLiquidBlur
+                                border: settings.withLiquidBlur
                                   ? '1px solid #7AFFD7'
                                   : '1px solid transparent',
                               }}
                             >
-                              {settings.enableLiquidBlur ? '✓' : '○'} Liquid Blur
+                              {settings.withLiquidBlur ? '✓' : '○'} Liquid Blur
                             </div>
                             <div
                               style={{
                                 padding: '4px 12px',
                                 borderRadius: '12px',
-                                background: settings.enableBorderEffect
+                                background: settings.withBorder
                                   ? 'rgba(122, 255, 215, 0.2)'
                                   : 'rgba(255,255,255,0.1)',
                                 fontSize: '0.75rem',
-                                border: settings.enableBorderEffect
+                                border: settings.withBorder
                                   ? '1px solid #7AFFD7'
                                   : '1px solid transparent',
                               }}
                             >
-                              {settings.enableBorderEffect ? '✓' : '○'} Border Effect
+                              {settings.withBorder ? '✓' : '○'} Border Effect
                             </div>
                             <div
                               style={{
@@ -1238,7 +1238,7 @@ export const Playground: Story = {
                             <div>
                               <span className="u-opacity-70">Radius:</span>
                               <span className="u-font-semibold u-ml-2">
-                                {settings.cornerRadius}px
+                                {settings.borderRadius}px
                               </span>
                             </div>
                             <div>
@@ -1250,7 +1250,7 @@ export const Playground: Story = {
                             <div>
                               <span className="u-opacity-70">Effects:</span>
                               <span className="u-font-semibold u-ml-2">
-                                {settings.disableEffects ? 'Disabled' : 'Enabled'}
+                                {settings.withoutEffects ? 'Disabled' : 'Enabled'}
                               </span>
                             </div>
                           </div>

package/src/components/AtomixGlass/stories/Shaders.stories.tsx

@@ -125,7 +125,7 @@ export const LiquidGlass: Story = {
     saturation: 150,
     aberrationIntensity: 2,
     elasticity: 0.2,
-    cornerRadius: 32,
+    borderRadius: 32,
     mode: 'shader',
     shaderVariant: 'liquidGlass',
   },
@@ -246,7 +246,7 @@ export const AppleFluid: Story = {
     saturation: 150,
     aberrationIntensity: 2,
     elasticity: 0.2,
-    cornerRadius: 32,
+    borderRadius: 32,
     mode: 'shader',
     shaderVariant: 'appleFluid',
   },
@@ -367,7 +367,7 @@ export const PremiumGlass: Story = {
     saturation: 150,
     aberrationIntensity: 2,
     elasticity: 0.2,
-    cornerRadius: 32,
+    borderRadius: 32,
     mode: 'shader',
     shaderVariant: 'premiumGlass',
   },

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

@@ -389,7 +389,7 @@ export const WithCustomGlassSettings: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 1,
-      cornerRadius: 16,
+      borderRadius: 16,
       mode: 'polar',
     },
   },

package/src/components/Badge/Badge.tsx

@@ -60,7 +60,7 @@ export const Badge: React.FC<BadgeProps> = memo(
       // Default glass settings for badges
       const defaultGlassProps = {
         displacementScale: 20,
-        cornerRadius: ref.current?.getBoundingClientRect().width
+        borderRadius: ref.current?.getBoundingClientRect().width
           ? ref.current?.getBoundingClientRect().width / 2
           : 16,
         className: 'c-badge--glass',

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,7 +1,16 @@
-import React, { ReactNode, memo } from 'react';
+import React, {
+  ReactNode,
+  memo,
+  forwardRef,
+  Children,
+  cloneElement,
+  isValidElement,
+  ElementType,
+} from 'react';
 import { BREADCRUMB } from '../../lib/constants/components';
 
-export interface BreadcrumbItem {
+// Legacy Item Interface
+export interface BreadcrumbItemData {
   /**
    * Text to display
    */
@@ -38,11 +47,110 @@ export interface BreadcrumbItem {
   className?: string;
 }
 
+// Rename exported type to avoid conflict with the component constant
+export type BreadcrumbItemType = BreadcrumbItemData;
+
+// 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<any>) => void;
+
+  /**
+   * Optional custom link component
+   */
+  linkAs?: React.ElementType<any>;
+
+  /**
+   * 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,
+      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,
+    };
+
+    const LinkComponent = linkAs;
+
+    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}>
+              {linkContent}
+            </LinkComponent>
+          ) : (
+            <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,71 +176,83 @@ 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>
-    );
+const BreadcrumbComponent: React.FC<BreadcrumbProps> = memo(function BreadcrumbBase({
+  items,
+  divider,
+  className = '',
+  'aria-label': ariaLabel = 'Breadcrumb',
+  LinkComponent,
+  style,
+  children,
+}: BreadcrumbProps) {
+  const breadcrumbClasses = [BREADCRUMB.CLASSES.BASE, className].filter(Boolean).join(' ');
+
+  let content: ReactNode;
+
+  if (items && items.length > 0) {
+    // Legacy rendering
+    content = items.map((item: BreadcrumbItemData, index: number) => {
+      const isLast = index === items.length - 1;
+
+      return (
+        <BreadcrumbItem
+          key={index}
+          href={item.href}
+          active={item.active || isLast}
+          icon={item.icon}
+          onClick={item.onClick as any}
+          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;
+
+        // Extract props from the child element
+        const { active, linkAs, ...otherProps } = childProps;
+
+        const newProps = {
+          active: active ?? (isLast ? true : undefined),
+          linkAs: linkAs ?? LinkComponent,
+        };
+
+        return cloneElement(child, newProps as any);
+      }
+      return child;
+    });
   }
-);
+
+  return (
+    <nav aria-label={ariaLabel} style={style}>
+      <ol className={breadcrumbClasses}>{content}</ol>
+    </nav>
+  );
+});
+
+export type BreadcrumbType = typeof BreadcrumbComponent & {
+  Item: typeof BreadcrumbItem;
+};
+
+export const Breadcrumb = BreadcrumbComponent as BreadcrumbType;
 
 Breadcrumb.displayName = 'Breadcrumb';
+Breadcrumb.Item = BreadcrumbItem;
 
 export default Breadcrumb;
+export type { BreadcrumbItemData as BreadcrumbItemLegacy };

package/src/components/Breadcrumb/BreadcrumbCompound.test.tsx

@@ -0,0 +1,84 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Breadcrumb } from './Breadcrumb';
+import React from 'react';
+
+describe('Breadcrumb Component', () => {
+  it('renders correctly with legacy items prop', () => {
+    const items = [
+      { label: 'Home', href: '/' },
+      { label: 'Products', href: '/products' },
+      { label: 'Current', active: true },
+    ];
+    render(<Breadcrumb items={items} />);
+
+    expect(screen.getByText('Home').closest('a')).toHaveAttribute('href', '/');
+    expect(screen.getByText('Products').closest('a')).toHaveAttribute('href', '/products');
+    expect(screen.getByText('Current').closest('span')).toBeInTheDocument();
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <Breadcrumb>
+        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+        <Breadcrumb.Item href="/products">Products</Breadcrumb.Item>
+        <Breadcrumb.Item active>Current</Breadcrumb.Item>
+      </Breadcrumb>
+    );
+
+    expect(screen.getByText('Home').closest('a')).toHaveAttribute('href', '/');
+    expect(screen.getByText('Products').closest('a')).toHaveAttribute('href', '/products');
+    expect(screen.getByText('Current').closest('span')).toBeInTheDocument();
+  });
+
+  it('handles click events in compound components', () => {
+    const handleClick = vi.fn();
+    render(
+      <Breadcrumb>
+        <Breadcrumb.Item href="#" onClick={handleClick} active={false}>
+          Click Me
+        </Breadcrumb.Item>
+        <Breadcrumb.Item>Current</Breadcrumb.Item>
+      </Breadcrumb>
+    );
+
+    fireEvent.click(screen.getByText('Click Me'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('supports custom LinkComponent in compound components', () => {
+    const CustomLink = ({ href, children, ...props }: any) => (
+      <a href={href} data-testid="custom-link" {...props}>
+        {children} (Custom)
+      </a>
+    );
+
+    render(
+      <Breadcrumb LinkComponent={CustomLink}>
+        <Breadcrumb.Item href="/custom">Link</Breadcrumb.Item>
+        <Breadcrumb.Item>Current</Breadcrumb.Item>
+      </Breadcrumb>
+    );
+
+    const link = screen.getByTestId('custom-link');
+    expect(link).toHaveAttribute('href', '/custom');
+    expect(link).toHaveTextContent('Link (Custom)');
+  });
+
+  it('supports explicit linkAs prop on Item', () => {
+     const CustomLink = ({ href, children, ...props }: any) => (
+      <a href={href} data-testid="item-custom-link" {...props}>
+        {children}
+      </a>
+    );
+
+    render(
+      <Breadcrumb>
+        <Breadcrumb.Item href="/explicit" linkAs={CustomLink} active={false}>Explicit</Breadcrumb.Item>
+        <Breadcrumb.Item>Current</Breadcrumb.Item>
+      </Breadcrumb>
+    );
+
+    expect(screen.getByTestId('item-custom-link')).toHaveAttribute('href', '/explicit');
+  });
+});

package/src/components/Breadcrumb/index.ts

@@ -1,3 +1,3 @@
-export { Breadcrumb } from './Breadcrumb';
 export { default } from './Breadcrumb';
-export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItemProps, BreadcrumbType } from './Breadcrumb';
+export type { BreadcrumbItemLegacy as BreadcrumbItem } from './Breadcrumb';

package/src/components/Button/Button.stories.tsx

@@ -774,7 +774,7 @@ export const WithCustomGlassSettings: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 1,
-      cornerRadius: 16,
+      borderRadius: 16,
       mode: 'polar',
     },
   },