@shohojdhara/atomix 0.3.15 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shohojdhara/atomix",
-  "version": "0.3.15",
+  "version": "0.4.0",
   "description": "Atomix Design System - A modern component library for web applications",
   "type": "module",
   "sideEffects": [

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import { Accordion } from './Accordion'; 
+import { Accordion } from './Accordion';
 import { ACCORDION } from '../../lib/constants/components';
 import type { AtomixGlassProps } from '../../lib/types/components';
 
@@ -29,9 +29,7 @@ const mockHandlers = {
 // Sample content for stories
 const sampleContent = (
   <div>
-    <p>
-      This accordion contains rich HTML content including headings, paragraphs, and lists.
-    </p>
+    <p>This accordion contains rich HTML content including headings, paragraphs, and lists.</p>
     <ul>
       <li>
         List item with <a href="#">link</a>
@@ -396,28 +394,22 @@ export const ControlledState: Story = {
     title: 'Controlled Accordion',
     children: <p>This accordion is controlled by external state.</p>,
   },
-  render: (args) => {
+  render: args => {
     const [open, setOpen] = React.useState(false);
     return (
       <div>
-        <button 
-          className="c-btn c-btn--primary u-mb-3" 
-          onClick={() => setOpen(prev => !prev)}
-        >
+        <button className="c-btn c-btn--primary u-mb-3" onClick={() => setOpen(prev => !prev)}>
           Toggle Accordion (Controlled)
         </button>
-        <Accordion 
-          {...args} 
-          isOpen={open} 
-          onOpenChange={setOpen}
-        />
+        <Accordion {...args} isOpen={open} onOpenChange={setOpen} />
       </div>
     );
   },
   parameters: {
     docs: {
       description: {
-        story: 'This story demonstrates a controlled Accordion using the `isOpen` and `onOpenChange` props.',
+        story:
+          'This story demonstrates a controlled Accordion using the `isOpen` and `onOpenChange` props.',
       },
     },
   },
@@ -489,8 +481,14 @@ export const GlassEffect: Story = {
     children: <p>This accordion has a glass morphism effect applied.</p>,
     glass: true,
   },
-  render: (args) => (
-    <div className="u-bg-cover u-bg-center u-p-8 u-rounded-xl u-min-h-97vh u-flex u-items-center u-justify-center" style={{backgroundImage: 'url(https://images.unsplash.com/photo-1759915995309-404c743bfbf9?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)'}}>
+  render: args => (
+    <div
+      className="u-bg-cover u-bg-center u-p-8 u-rounded-xl u-min-h-97vh u-flex u-items-center u-justify-center"
+      style={{
+        backgroundImage:
+          'url(https://images.unsplash.com/photo-1759915995309-404c743bfbf9?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+      }}
+    >
       <div className="u-w-full u-max-w-md">
         <Accordion {...args} />
       </div>
@@ -499,7 +497,8 @@ export const GlassEffect: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'This story demonstrates an Accordion with glass morphism effect enabled against a gradient background.',
+        story:
+          'This story demonstrates an Accordion with glass morphism effect enabled against a gradient background.',
       },
     },
   },
@@ -516,8 +515,16 @@ export const GlassCustom: Story = {
       mode: 'polar',
     } as GlassProps,
   },
-  render: (args) => (
-    <div className="u-bg-cover u-bg-center u-p-8 u-rounded-xl u-min-h-97vh u-flex u-items-center u-justify-center" style={{backgroundImage: 'url(https://images.unsplash.com/photo-1754147965582-edcb63324a81?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)', backgroundSize: '120%', animation: 'gradient 15s ease infinite'}}>
+  render: args => (
+    <div
+      className="u-bg-cover u-bg-center u-p-8 u-rounded-xl u-min-h-97vh u-flex u-items-center u-justify-center"
+      style={{
+        backgroundImage:
+          'url(https://images.unsplash.com/photo-1754147965582-edcb63324a81?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)',
+        backgroundSize: '120%',
+        animation: 'gradient 15s ease infinite',
+      }}
+    >
       <style>
         {`
           @keyframes gradient {
@@ -538,7 +545,8 @@ export const GlassCustom: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'This story demonstrates an Accordion with custom glass morphism settings against a scenic background image.',
+        story:
+          'This story demonstrates an Accordion with custom glass morphism settings against a scenic background image.',
       },
     },
   },
@@ -567,7 +575,8 @@ export const KeyboardNavigation: Story = {
     title: 'Keyboard Accessible',
     children: (
       <p>
-        This accordion is fully operable via keyboard navigation. Press Tab to focus and Enter/Space to toggle.
+        This accordion is fully operable via keyboard navigation. Press Tab to focus and Enter/Space
+        to toggle.
       </p>
     ),
   },
@@ -578,4 +587,4 @@ export const KeyboardNavigation: Story = {
       },
     },
   },
-};
+};

package/src/components/Accordion/Accordion.test.tsx

@@ -4,54 +4,74 @@ import { Accordion } from './Accordion';
 import React from 'react';
 
 describe('Accordion Component', () => {
-    it('renders correctly with title', () => {
-        render(<Accordion title="Test Accordion">Content</Accordion>);
-        expect(screen.getByText('Test Accordion')).toBeInTheDocument();
-        expect(screen.getByText('Content')).toBeInTheDocument();
-    });
-
-    it('toggles when clicked', () => {
-        const onOpenChange = vi.fn();
-        render(<Accordion title="Test" onOpenChange={onOpenChange}>Content</Accordion>);
-        const button = screen.getByRole('button');
-
-        fireEvent.click(button);
-        expect(onOpenChange).toHaveBeenCalledWith(true);
-        expect(button).toHaveAttribute('aria-expanded', 'true');
-
-        fireEvent.click(button);
-        expect(onOpenChange).toHaveBeenCalledWith(false);
-        expect(button).toHaveAttribute('aria-expanded', 'false');
-    });
-
-    it('calls legacy onOpen/onClose handlers', () => {
-        const onOpen = vi.fn();
-        const onClose = vi.fn();
-        render(<Accordion title="Test" onOpen={onOpen} onClose={onClose}>Content</Accordion>);
-        const button = screen.getByRole('button');
-
-        fireEvent.click(button);
-        expect(onOpen).toHaveBeenCalled();
-
-        fireEvent.click(button);
-        expect(onClose).toHaveBeenCalled();
-    });
-
-    it('handles controlled state', () => {
-        const onOpenChange = vi.fn();
-        const { rerender } = render(<Accordion title="Test" isOpen={false} onOpenChange={onOpenChange}>Content</Accordion>);
-        const button = screen.getByRole('button');
-
-        fireEvent.click(button);
-        expect(onOpenChange).toHaveBeenCalledWith(true);
-        expect(button).toHaveAttribute('aria-expanded', 'false'); // Should not change internally
-
-        rerender(<Accordion title="Test" isOpen={true} onOpenChange={onOpenChange}>Content</Accordion>);
-        expect(button).toHaveAttribute('aria-expanded', 'true');
-    });
-
-    it('supports glass effect', () => {
-        const { container } = render(<Accordion title="Test" glass>Content</Accordion>);
-        expect(container.querySelector('.c-accordion--glass')).toBeInTheDocument();
-    });
+  it('renders correctly with title', () => {
+    render(<Accordion title="Test Accordion">Content</Accordion>);
+    expect(screen.getByText('Test Accordion')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('toggles when clicked', () => {
+    const onOpenChange = vi.fn();
+    render(
+      <Accordion title="Test" onOpenChange={onOpenChange}>
+        Content
+      </Accordion>
+    );
+    const button = screen.getByRole('button');
+
+    fireEvent.click(button);
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+
+    fireEvent.click(button);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('calls legacy onOpen/onClose handlers', () => {
+    const onOpen = vi.fn();
+    const onClose = vi.fn();
+    render(
+      <Accordion title="Test" onOpen={onOpen} onClose={onClose}>
+        Content
+      </Accordion>
+    );
+    const button = screen.getByRole('button');
+
+    fireEvent.click(button);
+    expect(onOpen).toHaveBeenCalled();
+
+    fireEvent.click(button);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('handles controlled state', () => {
+    const onOpenChange = vi.fn();
+    const { rerender } = render(
+      <Accordion title="Test" isOpen={false} onOpenChange={onOpenChange}>
+        Content
+      </Accordion>
+    );
+    const button = screen.getByRole('button');
+
+    fireEvent.click(button);
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    expect(button).toHaveAttribute('aria-expanded', 'false'); // Should not change internally
+
+    rerender(
+      <Accordion title="Test" isOpen={true} onOpenChange={onOpenChange}>
+        Content
+      </Accordion>
+    );
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('supports glass effect', () => {
+    const { container } = render(
+      <Accordion title="Test" glass>
+        Content
+      </Accordion>
+    );
+    expect(container.querySelector('.c-accordion--glass')).toBeInTheDocument();
+  });
 });

package/src/components/Accordion/Accordion.tsx

@@ -1,120 +1,125 @@
 import React, { ReactNode, useId, memo } from 'react';
 import { ACCORDION } from '../../lib/constants/components';
 import { useAccordion } from '../../lib/composables/useAccordion';
-import type { AccordionProps as AccordionPropsType, AtomixGlassProps } from '../../lib/types/components';
+import type {
+  AccordionProps as AccordionPropsType,
+  AtomixGlassProps,
+} from '../../lib/types/components';
 import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export type AccordionProps = AccordionPropsType;
 
-export const Accordion: React.FC<AccordionProps> = memo(({
-  title,
-  children,
-  defaultOpen = false,
-  isOpen: controlledOpen,
-  onOpenChange,
-  onOpen,
-  onClose,
-  disabled = false,
-  iconPosition = 'right',
-  icon,
-  className = '',
-  style,
-  glass,
-}) => {
-  // Generate unique IDs for accessibility
-  const instanceId = useId();
-  const buttonId = `accordion-header-${instanceId}`;
-  const panelId = `accordion-panel-${instanceId}`;
-
-  // Use composable hook for logic/state
-  const {
-    state,
-    toggle,
-    updatePanelHeight,
-    panelRef,
-    contentRef,
-    generateClassNames,
-    generateHeaderClassNames,
-  } = useAccordion({
-    defaultOpen,
-    disabled,
-    iconPosition,
+export const Accordion: React.FC<AccordionProps> = memo(
+  ({
+    title,
+    children,
+    defaultOpen = false,
     isOpen: controlledOpen,
     onOpenChange,
     onOpen,
     onClose,
-  });
+    disabled = false,
+    iconPosition = 'right',
+    icon,
+    className = '',
+    style,
+    glass,
+  }) => {
+    // Generate unique IDs for accessibility
+    const instanceId = useId();
+    const buttonId = `accordion-header-${instanceId}`;
+    const panelId = `accordion-panel-${instanceId}`;
 
-  // Default icon
-  const defaultIcon = (
-    <i className="c-accordion__icon" aria-hidden="true">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        aria-hidden="true"
-        focusable="false"
-      >
-        <polyline points="6 9 12 15 18 9"></polyline>
-      </svg>
-    </i>
-  );
+    // Use composable hook for logic/state
+    const {
+      state,
+      toggle,
+      updatePanelHeight,
+      panelRef,
+      contentRef,
+      generateClassNames,
+      generateHeaderClassNames,
+    } = useAccordion({
+      defaultOpen,
+      disabled,
+      iconPosition,
+      isOpen: controlledOpen,
+      onOpenChange,
+      onOpen,
+      onClose,
+    });
 
-  const accordionContent = (
-    <div
-      className={generateClassNames(className) + (glass ? ' c-accordion--glass' : '')}
-      style={style}
-    >
-      <button
-        id={buttonId}
-        className={generateHeaderClassNames()}
-        onClick={toggle}
-        aria-expanded={state.isOpen}
-        aria-controls={panelId}
-        aria-disabled={disabled}
-        disabled={disabled}
-        type="button"
-      >
-        <span className="c-accordion__title">{title}</span>
-        {icon || defaultIcon}
-      </button>
+    // Default icon
+    const defaultIcon = (
+      <i className="c-accordion__icon" aria-hidden="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </i>
+    );
+
+    const accordionContent = (
       <div
-        id={panelId}
-        className={ACCORDION.SELECTORS.PANEL.replace('.', '')}
-        ref={panelRef as React.RefObject<HTMLDivElement>}
-        role="region"
-        aria-labelledby={buttonId}
+        className={generateClassNames(className) + (glass ? ' c-accordion--glass' : '')}
+        style={style}
       >
+        <button
+          id={buttonId}
+          className={generateHeaderClassNames()}
+          onClick={toggle}
+          aria-expanded={state.isOpen}
+          aria-controls={panelId}
+          aria-disabled={disabled}
+          disabled={disabled}
+          type="button"
+        >
+          <span className="c-accordion__title">{title}</span>
+          {icon || defaultIcon}
+        </button>
         <div
-          className={ACCORDION.SELECTORS.BODY.replace('.', '')}
-          ref={contentRef as React.RefObject<HTMLDivElement>}
+          id={panelId}
+          className={ACCORDION.SELECTORS.PANEL.replace('.', '')}
+          ref={panelRef as React.RefObject<HTMLDivElement>}
+          role="region"
+          aria-labelledby={buttonId}
         >
-          {children}
+          <div
+            className={ACCORDION.SELECTORS.BODY.replace('.', '')}
+            ref={contentRef as React.RefObject<HTMLDivElement>}
+          >
+            {children}
+          </div>
         </div>
       </div>
-    </div>
-  );
+    );
 
-  if (glass) {
-    // Default glass settings for accordions
-    const defaultGlassProps = {
-      displacementScale: 20,
-      elasticity: 0,
-    };
+    if (glass) {
+      // Default glass settings for accordions
+      const defaultGlassProps = {
+        displacementScale: 20,
+        elasticity: 0,
+      };
 
-    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
 
-    return <AtomixGlass {...glassProps}>{accordionContent}</AtomixGlass>;
-  }
+      return <AtomixGlass {...glassProps}>{accordionContent}</AtomixGlass>;
+    }
 
-  return accordionContent;
-});
+    return accordionContent;
+  }
+);
 
 // Set display name for debugging
 Accordion.displayName = 'Accordion';

package/src/components/AtomixGlass/AtomixGlass.test.tsx

@@ -10,7 +10,7 @@ vi.mock('./shader-utils', () => ({
     updateShader() {
       return 'data:image/png;base64,mockBase64String';
     }
-    destroy() { }
+    destroy() {}
   },
   fragmentShaders: {
     liquidGlass: vi.fn(),

package/src/components/AtomixGlass/GlassFilter.tsx

@@ -35,12 +35,7 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
     aria-hidden="true"
   >
     <defs>
-      <radialGradient
-        id={`${id}-edge-mask`}
-        cx="50%"
-        cy="50%"
-        r="50%"
-      >
+      <radialGradient id={`${id}-edge-mask`} cx="50%" cy="50%" r="50%">
         <stop offset="0%" stopColor="black" stopOpacity="0" />
         <stop
           offset={`${Math.max(30, 80 - aberrationIntensity * 2)}%`}
@@ -49,14 +44,7 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
         />
         <stop offset="100%" stopColor="white" stopOpacity="1" />
       </radialGradient>
-      <filter
-        id={id}
-        x="-35%"
-        y="-35%"
-        width="170%"
-        height="170%"
-        colorInterpolationFilters="sRGB"
-      >
+      <filter id={id} x="-35%" y="-35%" width="170%" height="170%" colorInterpolationFilters="sRGB">
         <feImage
           id={`${id}-image`}
           x="0"
@@ -64,7 +52,13 @@ const GlassFilterComponent: React.FC<GlassFilterProps> = ({
           width="100%"
           height="100%"
           result="DISPLACEMENT_MAP"
-          href={getDisplacementMap(mode, displacementMap, polarDisplacementMap, prominentDisplacementMap, shaderMapUrl)}
+          href={getDisplacementMap(
+            mode,
+            displacementMap,
+            polarDisplacementMap,
+            prominentDisplacementMap,
+            shaderMapUrl
+          )}
           preserveAspectRatio="xMidYMid slice"
         />
 
@@ -178,4 +172,3 @@ export const GlassFilter = memo(GlassFilterComponent, (prevProps, nextProps) =>
     prevProps.blurAmount === nextProps.blurAmount
   );
 });
-

package/src/components/AtomixGlass/glass-utils.ts

@@ -45,7 +45,9 @@ export const calculateMouseInfluence = (mouseOffset: MousePosition): number => {
     return 0;
   }
   // Bounded calculation — keeps the glass effect subtle and stable
-  const influence = Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) / CONSTANTS.MOUSE_INFLUENCE_DIVISOR;
+  const influence =
+    Math.sqrt(mouseOffset.x * mouseOffset.x + mouseOffset.y * mouseOffset.y) /
+    CONSTANTS.MOUSE_INFLUENCE_DIVISOR;
   return Math.min(0.8, influence); // Tighter cap to prevent blur/filter blow-out
 };
 
@@ -59,7 +61,7 @@ export const calculateOverLightIntensity = (
   if (!mouseOffset || typeof mouseOffset.x !== 'number' || typeof mouseOffset.y !== 'number') {
     return baseIntensity;
   }
-  
+
   // Calculate additional intensity based on mouse position
   const mouseInfluence = calculateMouseInfluence(mouseOffset);
   return Math.min(1.0, baseIntensity * (1 + mouseInfluence * 0.3));
@@ -260,4 +262,3 @@ export const getDisplacementMap = (
       return displacementMap;
   }
 };
-