@shohojdhara/atomix 0.4.1 → 0.4.3

package/src/components/EdgePanel/EdgePanel.stories.tsx

@@ -627,7 +627,7 @@ export const GlassCustom: Story = {
               displacementScale: 70,
               blurAmount: 1.8,
               saturation: 170,
-              cornerRadius: 0,
+              borderRadius: 0,
             } as any
           }
         >
@@ -693,7 +693,7 @@ export const GlassPremium: Story = {
               displacementScale: 180,
               blurAmount: 1,
               saturation: 60,
-              cornerRadius: 0,
+              borderRadius: 0,
             } as any
           }
         >
@@ -786,7 +786,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 25,
                 blurAmount: 1.2,
                 saturation: 140,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >
@@ -815,7 +815,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 35,
                 blurAmount: 1.5,
                 saturation: 160,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >
@@ -844,7 +844,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 50,
                 blurAmount: 2,
                 saturation: 180,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >
@@ -874,7 +874,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 70,
                 blurAmount: 1.8,
                 saturation: 170,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >
@@ -907,7 +907,7 @@ export const GlassShowcase: Story = {
                 displacementScale: 180,
                 blurAmount: 1,
                 saturation: 60,
-                cornerRadius: 0,
+                borderRadius: 0,
               } as any
             }
           >

package/src/components/Footer/FooterLink.tsx

@@ -49,10 +49,10 @@ export const FooterLink = forwardRef<HTMLAnchorElement, FooterLinkProps>(
 
     if (LinkComponent) {
       const Component = LinkComponent as React.ComponentType<any>;
-      // Only pass href if the link is not disabled and href exists
+      // Only pass href/to if the link is not disabled and href exists
       const componentProps = {
         ref,
-        ...(href && !disabled ? { to: href } : {}),
+        ...(href && !disabled ? { href, to: href } : {}),
         ...linkProps,
       };
 

package/src/components/Form/Checkbox.stories.tsx

@@ -252,7 +252,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     },
   },
   render: (args: any) => (

package/src/components/Form/Checkbox.tsx

@@ -117,7 +117,7 @@ export const Checkbox = React.memo(
           blurAmount: 1,
           saturation: 160,
           aberrationIntensity: 0.3,
-          cornerRadius: 6,
+          borderRadius: 6,
           mode: 'shader' as const,
         };
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

package/src/components/Form/Input.stories.tsx

@@ -432,7 +432,7 @@ export const GlassVariants: Story = {
             blurAmount: 2,
             saturation: 200,
             aberrationIntensity: 2,
-            cornerRadius: 12,
+            borderRadius: 12,
           }}
         />
       </div>

package/src/components/Form/Input.tsx

@@ -101,7 +101,7 @@ export const Input = memo(
           blurAmount: 1,
           saturation: 180,
           aberrationIntensity: 0.2,
-          cornerRadius: 12,
+          borderRadius: 12,
           mode: 'shader' as const,
         };
 

package/src/components/Form/Radio.stories.tsx

@@ -333,7 +333,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     } as any,
     onChange: () => {},
   },

package/src/components/Form/Radio.tsx

@@ -68,7 +68,7 @@ export const Radio: React.FC<RadioProps> = memo(
         blurAmount: 1,
         saturation: 160,
         aberrationIntensity: 0.3,
-        cornerRadius: 6,
+        borderRadius: 6,
         mode: 'shader' as const,
       };
 

package/src/components/Form/Select.stories.tsx

@@ -353,7 +353,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     },
   },
   render: (args: any) => (

package/src/components/Form/Select.tsx

@@ -245,7 +245,7 @@ export const Select: SelectComponent = memo(
         blurAmount: 1,
         saturation: 180,
         aberrationIntensity: 0.2,
-        cornerRadius: 12,
+        borderRadius: 12,
         mode: 'shader' as const,
       };
 

package/src/components/Form/Textarea.stories.tsx

@@ -343,7 +343,7 @@ export const GlassVariants: Story = {
             blurAmount: 2,
             saturation: 200,
             aberrationIntensity: 2,
-            cornerRadius: 12,
+            borderRadius: 12,
           }}
         />
       </div>

package/src/components/Form/Textarea.tsx

@@ -92,7 +92,7 @@ export const Textarea = memo(
           blurAmount: 1,
           saturation: 180,
           aberrationIntensity: 1,
-          cornerRadius: 8,
+          borderRadius: 8,
           mode: 'shader' as const,
         };
 

package/src/components/Hero/Hero.stories.tsx

@@ -433,7 +433,7 @@ export const WithCustomGlassEffect: Story = {
       blurAmount: -0.1,
       saturation: 130,
       aberrationIntensity: 0,
-      cornerRadius: 45,
+      borderRadius: 45,
       mode: 'standard',
       elasticity: 0.2,
       onClick: () => {
@@ -911,7 +911,7 @@ export const PremiumShowcase: Story = {
       blurAmount: 2,
       saturation: 150,
       aberrationIntensity: 0.5,
-      cornerRadius: 20,
+      borderRadius: 20,
       overLight: true,
       mode: 'standard',
     },

package/src/components/Hero/Hero.tsx

@@ -55,7 +55,7 @@ const HeroContent = ({ children, className, style, glass, ...props }: HeroConten
       blurAmount: 3,
       saturation: 180,
       aberrationIntensity: 0,
-      cornerRadius: 8,
+      borderRadius: 8,
       overLight: false,
       mode: 'standard' as const,
     } : glass;
@@ -389,7 +389,7 @@ export const Hero: React.FC<HeroProps> & {
               blurAmount={3}
               saturation={180}
               aberrationIntensity={0}
-              cornerRadius={8}
+              borderRadius={8}
               overLight={false}
               mode="standard"
             >

package/src/components/Messages/Messages.stories.tsx

@@ -192,7 +192,7 @@ export const GlassCustom: Story = {
     glass: {
       displacementScale: 30,
       blurAmount: 0,
-      cornerRadius: 16,
+      borderRadius: 16,
       elasticity: 0,
     },
   },

package/src/components/Messages/Messages.tsx

@@ -35,7 +35,7 @@ export const Messages: React.FC<MessagesProps> = ({
   // Default glass settings for messages
   const defaultGlassProps = {
     displacementScale: 150,
-    cornerRadius: 12,
+    borderRadius: 12,
     elasticity: 0,
     aberrationIntensity: 2,
   };
@@ -185,7 +185,7 @@ export const Messages: React.FC<MessagesProps> = ({
         <AtomixGlass {...glassProps}>
           <div
             className="c-messages__glass-content"
-            style={{ borderRadius: glassProps.cornerRadius }}
+            style={{ borderRadius: glassProps.borderRadius }}
           >
             {messagesContent}
           </div>

package/src/components/Modal/Modal.stories.tsx

@@ -589,7 +589,7 @@ export const GlassModalCustom: Story = {
               blurAmount: 3,
               saturation: 200,
               aberrationIntensity: 2,
-              cornerRadius: 20,
+              borderRadius: 20,
               mode: 'polar',
             } as GlassProps
           }

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

@@ -645,7 +645,7 @@ export const GlassCustom: Story = {
         glass={{
           displacementScale: 80,
           blurAmount: 2.5,
-          cornerRadius: 20,
+          borderRadius: 20,
           mode: 'shader',
         }}
       >
@@ -799,7 +799,7 @@ export const GlassThemeShowcase: Story = {
           glass={{
             displacementScale: 60,
             blurAmount: 2,
-            cornerRadius: 16,
+            borderRadius: 16,
             mode: 'shader',
           }}
         >

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

@@ -51,7 +51,7 @@ export const Nav = forwardRef<HTMLUListElement, NavProps>(
       const defaultGlassProps = {
         displacementScale: 60,
         blurAmount: 1.5,
-        cornerRadius: 8,
+        borderRadius: 8,
         mode: 'shader' as const,
       };
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef, ReactNode, forwardRef } from 'react';
 import { NavItemProps } from '../../../lib/types/components';
 import { useNavItem } from '../../../lib/composables/useNavbar';
+import useForkRef from '../../../lib/utils/useForkRef';
 
 /**
  * NavItem component represents a single navigation item that can be a link, dropdown trigger, or mega menu trigger.
@@ -57,7 +58,8 @@ export const NavItem = forwardRef<HTMLLIElement, NavItemProps>(
     const [isActive, setIsActive] = useState(false);
 
     // Ref for detecting outside clicks
-    const itemRef = useRef<HTMLAnchorElement>(null);
+    const itemRef = useRef<any>(null);
+    const combinedRef = useForkRef(ref as any, itemRef);
 
     // Toggle dropdown
     const handleDropdownToggle = (e: React.MouseEvent) => {
@@ -134,8 +136,9 @@ export const NavItem = forwardRef<HTMLLIElement, NavItemProps>(
     const expanded = typeof ariaExpanded !== 'undefined' ? ariaExpanded : isActive;
 
     const linkProps = {
-      ref: itemRef,
+      ref: combinedRef,
       href: href || '#',
+      to: href || '#',
       className: navLinkClass,
       onClick: dropdown || megaMenu ? handleDropdownToggle : handleClick(onClick),
       'aria-disabled': disabled,
@@ -146,7 +149,7 @@ export const NavItem = forwardRef<HTMLLIElement, NavItemProps>(
     };
 
     return (
-      <li ref={ref} className={navItemClass} role="menuitem" aria-haspopup={dropdown || megaMenu}>
+      <li className={navItemClass} role="menuitem" aria-haspopup={dropdown || megaMenu}>
         {LinkComponent ? (
           (() => {
             const Component = LinkComponent as React.ComponentType<any>;

package/src/components/Navigation/Navbar/Navbar.stories.tsx

@@ -715,7 +715,7 @@ export const GlassCustom: Story = {
           glass={{
             displacementScale: 100,
             blurAmount: 2.5,
-            cornerRadius: 0,
+            borderRadius: 0,
             mode: 'shader',
           }}
         >
@@ -773,7 +773,7 @@ export const GlassCustom: Story = {
     docs: {
       description: {
         story:
-          'Customized glass effect with increased displacement and blur for a more pronounced visual impact. The sharp corners (cornerRadius: 0) create a modern, edge-to-edge aesthetic.',
+          'Customized glass effect with increased displacement and blur for a more pronounced visual impact. The sharp corners (borderRadius: 0) create a modern, edge-to-edge aesthetic.',
       },
     },
   },
@@ -942,7 +942,7 @@ export const GlassThemeShowcase: Story = {
             glass={{
               displacementScale: 60,
               blurAmount: 2,
-              cornerRadius: 0,
+              borderRadius: 0,
               mode: 'shader',
             }}
           >

package/src/components/Navigation/Navbar/Navbar.tsx

@@ -146,7 +146,7 @@ export const Navbar = forwardRef<HTMLElement, NavbarProps>(
       const defaultGlassProps = {
         displacementScale: 30,
         blurAmount: 2,
-        cornerRadius: 0,
+        borderRadius: 0,
         elasticity: 0,
         mode: 'shader' as const,
         shaderVariant: 'premiumGlass' as const,

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

@@ -1140,7 +1140,7 @@ export const GlassCustom: Story = {
           glass={{
             displacementScale: 70,
             blurAmount: 2,
-            cornerRadius: 12,
+            borderRadius: 12,
             mode: 'shader',
           }}
         >
@@ -1293,7 +1293,7 @@ export const GlassThemeShowcase: Story = {
             glass={{
               displacementScale: 60,
               blurAmount: 1.8,
-              cornerRadius: 16,
+              borderRadius: 16,
               mode: 'shader',
             }}
           >

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

@@ -308,7 +308,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       const defaultGlassProps = {
         displacementScale: 70,
         blurAmount: 2,
-        cornerRadius: 12,
+        borderRadius: 12,
         mode: 'shader' as const,
       };
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

package/src/components/Pagination/Pagination.stories.tsx

@@ -285,7 +285,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     },
   },
   render: (args: any) => {

package/src/components/Pagination/Pagination.tsx

@@ -244,7 +244,7 @@ export const Pagination: React.FC<PaginationProps> = memo(
         blurAmount: 1,
         saturation: 160,
         aberrationIntensity: 0.5,
-        cornerRadius: 8,
+        borderRadius: 8,
         mode: 'shader' as const,
       };
 

package/src/components/Popover/Popover.stories.tsx

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

package/src/components/Popover/Popover.tsx

@@ -86,7 +86,7 @@ export const Popover: React.FC<PopoverProps> = ({
                   blurAmount: 1,
                   saturation: 160,
                   aberrationIntensity: 0.5,
-                  cornerRadius: 8,
+                  borderRadius: 8,
                   mode: 'shader' as const,
                 };
 

package/src/components/Progress/Progress.tsx

@@ -46,7 +46,7 @@ export const Progress = memo(
         const defaultGlassProps = {
           displacementScale: 30,
           blurAmount: 0.5,
-          cornerRadius: 8,
+          borderRadius: 8,
           mode: 'shader' as const,
         };
         const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

package/src/components/Rating/Rating.stories.tsx

@@ -212,7 +212,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     },
   },
   render: (args: any) => (

package/src/components/Rating/Rating.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import Rating from './Rating';
+
+// Mock AtomixGlass since it's used in Rating
+vi.mock('../AtomixGlass/AtomixGlass', () => ({
+  AtomixGlass: ({ children }: any) => <div data-testid="glass-wrapper">{children}</div>,
+}));
+
+describe('Rating', () => {
+  it('renders correctly', () => {
+    render(<Rating value={3} />);
+    const stars = screen.getAllByRole('button');
+    expect(stars).toHaveLength(5);
+    // 3 full stars, 2 empty
+    expect(stars[0]).toHaveAttribute('aria-checked', 'true');
+    expect(stars[1]).toHaveAttribute('aria-checked', 'true');
+    expect(stars[2]).toHaveAttribute('aria-checked', 'true');
+    expect(stars[3]).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('calculates half star on hover when allowHalf is true', () => {
+    render(<Rating allowHalf />);
+    const stars = screen.getAllByRole('button');
+    const firstStar = stars[0];
+
+    // Mock getBoundingClientRect
+    vi.spyOn(firstStar, 'getBoundingClientRect').mockReturnValue({
+      left: 100,
+      width: 20,
+      top: 0,
+      bottom: 20,
+      right: 120,
+      height: 20,
+      x: 100,
+      y: 0,
+      toJSON: () => {},
+    } as DOMRect);
+
+    // Hover on left half (105 is < 100 + 10 = 110)
+    fireEvent.mouseEnter(firstStar, { clientX: 105 });
+    fireEvent.mouseMove(firstStar, { clientX: 105 });
+
+    // Check if the star has the half class
+    // RATING.CLASSES.HALF is 'c-rating__star--half'
+    expect(firstStar).toHaveClass('c-rating__star--half');
+  });
+
+  it('calculates full star on hover right half when allowHalf is true', () => {
+    render(<Rating allowHalf />);
+    const stars = screen.getAllByRole('button');
+    const firstStar = stars[0];
+
+    vi.spyOn(firstStar, 'getBoundingClientRect').mockReturnValue({
+      left: 100,
+      width: 20,
+      top: 0,
+      bottom: 20,
+      right: 120,
+      height: 20,
+      x: 100,
+      y: 0,
+      toJSON: () => {},
+    } as DOMRect);
+
+    // Hover on right half (115 is > 100 + 10 = 110)
+    fireEvent.mouseEnter(firstStar, { clientX: 115 });
+    fireEvent.mouseMove(firstStar, { clientX: 115 });
+
+    expect(firstStar).toHaveClass('c-rating__star--full');
+  });
+});

package/src/components/Rating/Rating.tsx

@@ -5,6 +5,27 @@ import type { RatingProps } from '../../lib/types/components';
 import useForkRef from '../../lib/utils/useForkRef';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
+// Helper function to calculate star value based on mouse position
+const calculateStarValue = (
+  e: React.MouseEvent,
+  starValue: number,
+  allowHalf: boolean
+): number => {
+  if (!allowHalf) {
+    return starValue;
+  }
+
+  // Get the star element's bounding rectangle
+  const starRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+  // Calculate the x position within the star
+  const starCenterX = starRect.left + starRect.width / 2;
+  // If mouse is on the left half of the star, use half value
+  const isHalfStar = e.clientX < starCenterX;
+  const adjustedValue = isHalfStar ? starValue - 0.5 : starValue;
+
+  return Math.max(0.5, adjustedValue); // Ensure minimum of 0.5
+};
+
 /**
  * Rating component for displaying and collecting star ratings
  *
@@ -61,19 +82,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     const handleMouseEnter = useCallback(
       (e: React.MouseEvent, starValue: number) => {
         if (readOnly) return;
-
-        if (allowHalf) {
-          // Get the star element's bounding rectangle
-          const starRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-          // Calculate the x position within the star
-          const starCenterX = starRect.left + starRect.width / 2;
-          // If mouse is on the left half of the star, use half value
-          const isHalfStar = e.clientX < starCenterX;
-          const adjustedValue = isHalfStar ? starValue - 0.5 : starValue;
-          setHoverValue(Math.max(0.5, adjustedValue)); // Ensure minimum of 0.5
-        } else {
-          setHoverValue(starValue);
-        }
+        setHoverValue(calculateStarValue(e, starValue, !!allowHalf));
       },
       [readOnly, allowHalf, setHoverValue]
     );
@@ -82,15 +91,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     const handleMouseMove = useCallback(
       (e: React.MouseEvent, starValue: number) => {
         if (readOnly || !allowHalf) return;
-
-        // Get the star element's bounding rectangle
-        const starRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-        // Calculate the x position within the star
-        const starCenterX = starRect.left + starRect.width / 2;
-        // If mouse is on the left half of the star, use half value
-        const isHalfStar = e.clientX < starCenterX;
-        const adjustedValue = isHalfStar ? starValue - 0.5 : starValue;
-        setHoverValue(Math.max(0.5, adjustedValue)); // Ensure minimum of 0.5
+        setHoverValue(calculateStarValue(e, starValue, !!allowHalf));
       },
       [readOnly, allowHalf, setHoverValue]
     );
@@ -105,20 +106,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
     const handleClick = useCallback(
       (e: React.MouseEvent, starValue: number) => {
         if (readOnly) return;
-
-        let newValue = starValue;
-
-        if (allowHalf) {
-          // Get the star element's bounding rectangle
-          const starRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-          // Calculate the x position within the star
-          const starCenterX = starRect.left + starRect.width / 2;
-          // If click is on the left half of the star, use half value
-          const isHalfStar = e.clientX < starCenterX;
-          newValue = isHalfStar ? starValue - 0.5 : starValue;
-          newValue = Math.max(0.5, newValue); // Ensure minimum of 0.5
-        }
-
+        const newValue = calculateStarValue(e, starValue, !!allowHalf);
         onChange?.(newValue);
       },
       [readOnly, onChange, allowHalf]
@@ -291,7 +279,7 @@ export const Rating = forwardRef<HTMLDivElement, RatingProps>(
         blurAmount: 1,
         saturation: 160,
         aberrationIntensity: 0.5,
-        cornerRadius: 8,
+        borderRadius: 8,
         mode: 'shader' as const,
       };
 

package/src/components/Spinner/Spinner.tsx

@@ -38,7 +38,7 @@ export const Spinner: React.FC<SpinnerProps> = memo(
       const defaultGlassProps = {
         displacementScale: 20,
         blurAmount: 1,
-        cornerRadius: 999,
+        borderRadius: 999,
         mode: 'shader' as const,
       };
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };

package/src/components/Steps/Steps.stories.tsx

@@ -404,7 +404,7 @@ export const GlassCustom: Story = {
       blurAmount: 2,
       saturation: 200,
       aberrationIntensity: 0.8,
-      cornerRadius: 12,
+      borderRadius: 12,
     },
   },
   render: args => (

package/src/components/Steps/Steps.tsx

@@ -24,7 +24,7 @@ export interface StepItemData {
 export type { StepItemData as StepItem };
 
 // Compound Component Props
-export interface StepsItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface StepsItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
   /**
    * The number or icon for the step
    */
@@ -231,7 +231,7 @@ const StepsComp: React.FC<StepsProps> = ({
       blurAmount: 1,
       saturation: 160,
       aberrationIntensity: 0.5,
-      cornerRadius: 8,
+      borderRadius: 8,
       mode: 'shader' as const,
     };