@shohojdhara/atomix 0.4.1 → 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,4 +1,12 @@
-import React, { ReactNode, memo, forwardRef, Children, cloneElement, isValidElement } from 'react';
+import React, {
+  ReactNode,
+  memo,
+  forwardRef,
+  Children,
+  cloneElement,
+  isValidElement,
+  ElementType,
+} from 'react';
 import { BREADCRUMB } from '../../lib/constants/components';
 
 // Legacy Item Interface
@@ -39,8 +47,8 @@ export interface BreadcrumbItemData {
   className?: string;
 }
 
-// Export legacy interface as type alias to preserve backward compatibility for type imports
-export type { BreadcrumbItemData as BreadcrumbItem };
+// Rename exported type to avoid conflict with the component constant
+export type BreadcrumbItemType = BreadcrumbItemData;
 
 // Compound Component Props
 export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement> {
@@ -62,12 +70,12 @@ export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement>
   /**
    * Optional click handler for the link
    */
-  onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLSpanElement>) => void;
+  onClick?: (event: React.MouseEvent<any>) => void;
 
   /**
    * Optional custom link component
    */
-  linkAs?: React.ElementType;
+  linkAs?: React.ElementType<any>;
 
   /**
    * Link props to pass to the underlying anchor or LinkComponent
@@ -85,13 +93,17 @@ export const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(
       onClick,
       className = '',
       style,
-      linkAs: LinkComponent,
+      linkAs,
       linkProps = {},
       ...props
     },
     ref
   ) => {
-    const itemClasses = [BREADCRUMB.CLASSES.ITEM, active ? BREADCRUMB.CLASSES.ACTIVE : '', className]
+    const itemClasses = [
+      BREADCRUMB.CLASSES.ITEM,
+      active ? BREADCRUMB.CLASSES.ACTIVE : '',
+      className,
+    ]
       .filter(Boolean)
       .join(' ');
 
@@ -109,18 +121,16 @@ export const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(
       ...linkProps,
     };
 
+    const LinkComponent = linkAs;
+
     return (
       <li ref={ref} className={itemClasses} style={style} {...props}>
         {href && !active ? (
           LinkComponent ? (
-            (() => {
-              const Component = LinkComponent;
-              return (
-                <Component href={href} {...commonLinkProps}>
-                  {linkContent}
-                </Component>
-              );
-            })()
+            // @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}
@@ -173,72 +183,76 @@ export interface BreadcrumbProps {
   children?: ReactNode;
 }
 
-type BreadcrumbComponent = React.FC<BreadcrumbProps> & {
+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 = 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;
+export const Breadcrumb = BreadcrumbComponent as BreadcrumbType;
 
 Breadcrumb.displayName = 'Breadcrumb';
 Breadcrumb.Item = BreadcrumbItem;
 
 export default Breadcrumb;
+export type { BreadcrumbItemData as BreadcrumbItemLegacy };

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',
     },
   },

package/src/components/Button/README.md

@@ -59,7 +59,7 @@ const CustomGlassExample = () => (
         blurAmount: 2,
         saturation: 180,
         aberrationIntensity: 2,
-        cornerRadius: 16,
+        borderRadius: 16,
         overLight: false,
         mode: 'polar'
       }}
@@ -113,7 +113,7 @@ When `glass` is an object, it accepts the same props as the `AtomixGlass` compon
 | `blurAmount` | `number` | `0` | Blur amount for the backdrop |
 | `saturation` | `number` | `160` | Saturation percentage for the backdrop |
 | `aberrationIntensity` | `number` | `1` | Chromatic aberration intensity |
-| `cornerRadius` | `number` | `8` | Corner radius in pixels |
+| `borderRadius` | `number` | `8` | Corner radius in pixels |
 | `overLight` | `boolean` | `false` | Whether the glass is over a light background |
 | `mode` | `'standard' \| 'polar' \| 'prominent' \| 'shader'` | `'standard'` | Glass effect mode |
 

package/src/components/Callout/Callout.test.tsx

@@ -152,7 +152,7 @@ describe('Callout Component', () => {
 
       expect(glassProps).toMatchObject({
         displacementScale: 30,
-        cornerRadius: 8,
+        borderRadius: 8,
         elasticity: 0,
       });
     });
@@ -162,7 +162,7 @@ describe('Callout Component', () => {
         displacementScale: 60,
         blurAmount: 2,
         saturation: 180,
-        cornerRadius: 12,
+        borderRadius: 12,
       };
 
       render(
@@ -179,7 +179,7 @@ describe('Callout Component', () => {
         displacementScale: 60,
         blurAmount: 2,
         saturation: 180,
-        cornerRadius: 12,
+        borderRadius: 12,
         // Default values from Callout
         elasticity: 0,
       });

package/src/components/Callout/Callout.tsx

@@ -177,7 +177,7 @@ export const Callout: CalloutComponent = memo(
       // Default glass settings for callouts
       const defaultGlassProps = {
         displacementScale: 30,
-        cornerRadius: 8,
+        borderRadius: 8,
         elasticity: 0,
       };
 
@@ -193,7 +193,7 @@ export const Callout: CalloutComponent = memo(
           <AtomixGlass {...glassProps}>
             <div
               className="c-callout__glass-content"
-              style={{ borderRadius: glassProps.cornerRadius }}
+              style={{ borderRadius: glassProps.borderRadius }}
             >
               {calloutContent}
             </div>

package/src/components/Callout/README.md

@@ -94,7 +94,7 @@ Glass morphism adds a modern, translucent appearance with backdrop blur effects:
     blurAmount: 2,
     saturation: 180,
     aberrationIntensity: 1.5,
-    cornerRadius: 12
+    borderRadius: 12
   }}
   title="Custom Glass"
   variant="success"
@@ -113,7 +113,7 @@ When `glass={true}`, these default settings are used:
   blurAmount: 0,
   saturation: 160,
   aberrationIntensity: 1,
-  cornerRadius: 8,
+  borderRadius: 8,
   overLight: false,
   mode: 'standard'
 }

package/src/components/Chart/Chart.stories.tsx

@@ -250,7 +250,7 @@ export const GlassVariant: Story = {
                 glass={{
                   blurAmount: 0,
                   saturation: 180,
-                  enableBorderEffect: true,
+                  withBorder: true,
                 }}
                 showToolbar={true}
               />

package/src/components/Chart/Chart.tsx

@@ -278,8 +278,8 @@ const Chart = memo(
           saturation: 180,
           aberrationIntensity: 1.5,
           elasticity: 0, // No elastic effect for charts
-          enableLiquidBlur: false, // Keep it simple
-          enableBorderEffect: true,
+          withLiquidBlur: false, // Keep it simple
+          withBorder: true,
           mode: 'standard' as const,
           mouseContainer: chartContainerRef,
           reducedMotion: false,
@@ -300,8 +300,8 @@ const Chart = memo(
       const chartBorderRadius = useMemo(() => {
         // Use chart border-radius design token (typically 12px from $border-radius-lg)
         // AtomixGlass will extract from children if not provided
-        return glassProps?.cornerRadius || undefined;
-      }, [glassProps?.cornerRadius]);
+        return glassProps?.borderRadius || undefined;
+      }, [glassProps?.borderRadius]);
 
       // Create context value
       const chartContextValue = useMemo<ChartContextValue>(
@@ -404,7 +404,7 @@ const Chart = memo(
       const wrappedChart = glassProps ? (
         <AtomixGlass
           {...glassProps}
-          cornerRadius={chartBorderRadius}
+          borderRadius={chartBorderRadius}
           style={{
             width: '100%',
             height: '100%',