@shohojdhara/atomix 0.4.0 → 0.4.2

package/src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, useCallback, memo } from 'react';
+import React, { useEffect, useRef, useState, useCallback, memo, forwardRef, ReactNode } from 'react';
 import { ModalProps } from '../../lib/types/components';
 import { MODAL } from '../../lib/constants/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
@@ -73,10 +73,83 @@ function useModal({
   };
 }
 
+// Modal Subcomponents
+
+export interface ModalHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  closeButton?: boolean;
+  onClose?: () => void;
+}
+
+export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
+  ({ title, subtitle, closeButton, onClose, children, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={`c-modal__header ${className}`.trim()} {...props}>
+        <div className="c-modal__header-content">
+          {title && <h3 className="c-modal__title">{title}</h3>}
+          {subtitle && <p className="c-modal__sub">{subtitle}</p>}
+          {children}
+        </div>
+        {closeButton && (
+          <button
+            type="button"
+            className="c-modal__close c-btn js-modal-close"
+            onClick={onClose}
+            aria-label="Close modal"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 20 20"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z"
+                fill="#141414"
+              />
+            </svg>
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+ModalHeader.displayName = 'ModalHeader';
+
+export const ModalBody = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={`c-modal__body ${className}`.trim()} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+ModalBody.displayName = 'ModalBody';
+
+export const ModalFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className = '', ...props }, ref) => {
+    return (
+      <div ref={ref} className={`c-modal__footer ${className}`.trim()} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+ModalFooter.displayName = 'ModalFooter';
+
 /**
  * Modal component for displaying overlay content
  */
-export const Modal: React.FC<ModalProps> = memo(
+type ModalComponent = React.FC<ModalProps> & {
+  Header: typeof ModalHeader;
+  Body: typeof ModalBody;
+  Footer: typeof ModalFooter;
+};
+
+const ModalImpl = memo(
   ({
     children,
     isOpen = false,
@@ -94,7 +167,7 @@ export const Modal: React.FC<ModalProps> = memo(
     footer,
     glass,
     ...props
-  }) => {
+  }: ModalProps) => {
     const modalRef = useRef<HTMLDivElement>(null);
     const dialogRef = useRef<HTMLDivElement>(null);
     const backdropRef = useRef<HTMLDivElement>(null);
@@ -144,41 +217,40 @@ export const Modal: React.FC<ModalProps> = memo(
       .filter(Boolean)
       .join(' ');
 
+    // Check for compound components usage
+    const hasCompoundComponents = React.Children.toArray(children).some((child) =>
+      React.isValidElement(child) &&
+      ['ModalHeader', 'ModalBody', 'ModalFooter'].includes((child.type as any).displayName)
+    );
+
     const modalContent = (
       <div className="c-modal__content">
-        {(title || closeButton) && (
-          <div className="c-modal__header">
-            <div className="c-modal__header-content">
-              {title && <h3 className="c-modal__title">{title}</h3>}
-              {subtitle && <p className="c-modal__sub">{subtitle}</p>}
-            </div>
-            {closeButton && (
-              <button
-                type="button"
-                className="c-modal__close c-btn js-modal-close"
-                onClick={close}
-                aria-label="Close modal"
-              >
-                <svg
-                  width="20"
-                  height="20"
-                  viewBox="0 0 20 20"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M16.0672 15.1828C16.1253 15.2409 16.1713 15.3098 16.2028 15.3857C16.2342 15.4615 16.2504 15.5429 16.2504 15.625C16.2504 15.7071 16.2342 15.7884 16.2028 15.8643C16.1713 15.9402 16.1253 16.0091 16.0672 16.0672C16.0091 16.1252 15.9402 16.1713 15.8643 16.2027C15.7885 16.2342 15.7071 16.2503 15.625 16.2503C15.5429 16.2503 15.4616 16.2342 15.3857 16.2027C15.3098 16.1713 15.2409 16.1252 15.1828 16.0672L10 10.8836L4.8172 16.0672C4.69992 16.1844 4.54086 16.2503 4.37501 16.2503C4.20916 16.2503 4.0501 16.1844 3.93282 16.0672C3.81555 15.9499 3.74966 15.7908 3.74966 15.625C3.74966 15.4591 3.81555 15.3001 3.93282 15.1828L9.11642 9.99998L3.93282 4.81717C3.81555 4.69989 3.74966 4.54083 3.74966 4.37498C3.74966 4.20913 3.81555 4.05007 3.93282 3.93279C4.0501 3.81552 4.20916 3.74963 4.37501 3.74963C4.54086 3.74963 4.69992 3.81552 4.8172 3.93279L10 9.11639L15.1828 3.93279C15.3001 3.81552 15.4592 3.74963 15.625 3.74963C15.7909 3.74963 15.9499 3.81552 16.0672 3.93279C16.1845 4.05007 16.2504 4.20913 16.2504 4.37498C16.2504 4.54083 16.1845 4.69989 16.0672 4.81717L10.8836 9.99998L16.0672 15.1828Z"
-                    fill="#141414"
-                  />
-                </svg>
-              </button>
+        {hasCompoundComponents ? (
+          React.Children.map(children, child => {
+            if (
+              React.isValidElement(child) &&
+              (child.type as any).displayName === 'ModalHeader'
+            ) {
+              return React.cloneElement(child, {
+                onClose: (child.props as any).onClose || close,
+              } as any);
+            }
+            return child;
+          })
+        ) : (
+          <>
+            {(title || closeButton) && (
+              <ModalHeader
+                title={title}
+                subtitle={subtitle}
+                closeButton={closeButton}
+                onClose={close}
+              />
             )}
-          </div>
+            <ModalBody>{children}</ModalBody>
+            {footer && <ModalFooter>{footer}</ModalFooter>}
+          </>
         )}
-
-        <div className="c-modal__body">{children}</div>
-
-        {footer && <div className="c-modal__footer">{footer}</div>}
       </div>
     );
 
@@ -218,7 +290,15 @@ export const Modal: React.FC<ModalProps> = memo(
   }
 );
 
-Modal.displayName = 'Modal';
+ModalImpl.displayName = 'Modal';
+
+// Attach subcomponents
+const ModalWithSubcomponents = ModalImpl as unknown as ModalComponent;
+ModalWithSubcomponents.Header = ModalHeader;
+ModalWithSubcomponents.Body = ModalBody;
+ModalWithSubcomponents.Footer = ModalFooter;
+
+export const Modal = ModalWithSubcomponents;
 
 export type { ModalProps };
 

package/src/components/Modal/ModalCompound.test.tsx

@@ -0,0 +1,94 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Modal } from './Modal';
+import React from 'react';
+
+describe('Modal Component', () => {
+  it('renders correctly with legacy props', () => {
+    render(
+      <Modal isOpen={true} title="Legacy Title" footer="Legacy Footer">
+        Legacy Content
+      </Modal>
+    );
+
+    expect(screen.getByText('Legacy Title')).toBeInTheDocument();
+    expect(screen.getByText('Legacy Content')).toBeInTheDocument();
+    expect(screen.getByText('Legacy Footer')).toBeInTheDocument();
+
+    // Check structure classes
+    expect(document.querySelector('.c-modal__header')).toBeInTheDocument();
+    expect(document.querySelector('.c-modal__body')).toBeInTheDocument();
+    expect(document.querySelector('.c-modal__footer')).toBeInTheDocument();
+  });
+
+  it('renders correctly with compound components', () => {
+    render(
+      <Modal isOpen={true}>
+        <Modal.Header title="Compound Header" />
+        <Modal.Body>Compound Body</Modal.Body>
+        <Modal.Footer>Compound Footer</Modal.Footer>
+      </Modal>
+    );
+
+    expect(screen.getByText('Compound Header')).toBeInTheDocument();
+    expect(screen.getByText('Compound Body')).toBeInTheDocument();
+    expect(screen.getByText('Compound Footer')).toBeInTheDocument();
+
+    // Verify no double wrapping
+    // If double wrapping occurred, we might see nested .c-modal__body or similar issues,
+    // or the header inside the body if logic failed.
+
+    const header = document.querySelector('.c-modal__header');
+    const body = document.querySelector('.c-modal__body');
+    const footer = document.querySelector('.c-modal__footer');
+
+    // Header should be a direct child of .c-modal__content (or close to it)
+    expect(header?.parentElement).toHaveClass('c-modal__content');
+    expect(body?.parentElement).toHaveClass('c-modal__content');
+    expect(footer?.parentElement).toHaveClass('c-modal__content');
+  });
+
+  it('injects onClose into Modal.Header when used in compound mode', () => {
+    const onClose = vi.fn();
+    render(
+      <Modal isOpen={true} onClose={onClose}>
+        <Modal.Header closeButton data-testid="header" />
+        <Modal.Body>Content</Modal.Body>
+      </Modal>
+    );
+
+    const closeBtn = screen.getByLabelText('Close modal');
+    fireEvent.click(closeBtn);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('allows custom onClose in Modal.Header', () => {
+    const modalOnClose = vi.fn();
+    const headerOnClose = vi.fn();
+
+    render(
+      <Modal isOpen={true} onClose={modalOnClose}>
+        <Modal.Header closeButton onClose={headerOnClose} />
+        <Modal.Body>Content</Modal.Body>
+      </Modal>
+    );
+
+    const closeBtn = screen.getByLabelText('Close modal');
+    fireEvent.click(closeBtn);
+
+    expect(headerOnClose).toHaveBeenCalled();
+    expect(modalOnClose).not.toHaveBeenCalled();
+  });
+
+  it('prioritizes compound components over legacy props', () => {
+    render(
+      <Modal isOpen={true} title="Legacy Title">
+        <Modal.Header title="Compound Header" />
+        <Modal.Body>Compound Body</Modal.Body>
+      </Modal>
+    );
+
+    expect(screen.getByText('Compound Header')).toBeInTheDocument();
+    expect(screen.queryByText('Legacy Title')).not.toBeInTheDocument();
+  });
+});

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/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 => (