@shohojdhara/atomix 0.2.3 → 0.2.4

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

@@ -607,3 +607,343 @@ export const InteractiveDemo: Story = {
     onToggle: fn(),
   },
 };
+
+// Glass Morphism Effect Stories - Professional Showcase
+
+/**
+ * Background wrapper component for consistent glass effect demonstrations
+ */
+interface BackgroundWrapperProps {
+  children: React.ReactNode;
+  backgroundImage: string;
+  height?: string;
+  padding?: string;
+  overlay?: boolean;
+}
+
+const BackgroundWrapper = ({
+  children,
+  backgroundImage,
+  height = '90vh',
+  padding = '60px 40px',
+  overlay = false,
+}: BackgroundWrapperProps) => (
+  <div
+    style={{
+      position: 'relative',
+      width: '100%',
+      minHeight: height,
+      background: `url(${backgroundImage})`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundAttachment: 'fixed',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      padding: padding,
+      borderRadius: '12px',
+      gap: '3rem',
+    }}
+  >
+    {overlay && (
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0,0,0,0.3)',
+          borderRadius: '12px',
+        }}
+      />
+    )}
+    {children}
+  </div>
+);
+
+/**
+ * Glass Effect - Default
+ *
+ * Demonstrates the SideMenu component with default glass morphism settings.
+ * The glass effect provides a modern, frosted appearance perfect for sidebar navigation.
+ */
+export const Glass: Story = {
+  render: () => (
+    <BackgroundWrapper
+      backgroundImage="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=2940&auto=format&fit=crop"
+      overlay
+    >
+      <div style={{ position: 'relative', width: '300px' }}>
+        <SideMenu title="Navigation" glass>
+          <SideMenuList>
+            <SideMenuItem href="/" icon={<Icon name="House" size="sm" />} active>
+              Home
+            </SideMenuItem>
+            <SideMenuItem href="/explore" icon={<Icon name="Compass" size="sm" />}>
+              Explore
+            </SideMenuItem>
+            <SideMenuItem href="/services" icon={<Icon name="Briefcase" size="sm" />}>
+              Services
+            </SideMenuItem>
+            <SideMenuItem href="/contact" icon={<Icon name="Envelope" size="sm" />}>
+              Contact
+            </SideMenuItem>
+          </SideMenuList>
+          <SideMenuList>
+            <SideMenuItem href="/settings" icon={<Icon name="Gear" size="sm" />}>
+              Settings
+            </SideMenuItem>
+          </SideMenuList>
+        </SideMenu>
+      </div>
+      <div style={{ position: 'relative', zIndex: 1, flex: 1, maxWidth: '600px' }}>
+        <h2
+          style={{
+            color: 'white',
+            fontSize: '32px',
+            fontWeight: 600,
+            marginBottom: '16px',
+            textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+          }}
+        >
+          Glass SideMenu
+        </h2>
+        <p
+          style={{
+            color: 'rgba(255,255,255,0.9)',
+            fontSize: '18px',
+            lineHeight: 1.6,
+            textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+          }}
+        >
+          A modern sidebar navigation with glassmorphism effect. Perfect for dashboards, admin
+          panels, and application interfaces that require elegant navigation.
+        </p>
+      </div>
+    </BackgroundWrapper>
+  ),
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        story:
+          'Basic glass morphism effect with default settings. The sidebar maintains excellent readability while creating a beautiful frosted glass aesthetic.',
+      },
+    },
+  },
+};
+
+/**
+ * Glass with Custom Properties
+ *
+ * Demonstrates advanced customization of the glass effect with various
+ * displacement, blur, and corner radius settings.
+ */
+export const GlassCustom: Story = {
+  render: () => (
+    <BackgroundWrapper
+      backgroundImage="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2940&auto=format&fit=crop"
+      overlay
+    >
+      <div style={{ position: 'relative', width: '320px' }}>
+        <SideMenu
+          title="Nature Explorer"
+          glass={{
+            displacementScale: 70,
+            blurAmount: 2,
+            cornerRadius: 12,
+            mode: 'shader',
+          }}
+        >
+          <SideMenuList>
+            <SideMenuItem href="/" icon={<Icon name="House" size="sm" />} active>
+              Home
+            </SideMenuItem>
+            <SideMenuItem href="/trails" icon={<Icon name="MapPin" size="sm" />}>
+              Trails
+            </SideMenuItem>
+            <SideMenuItem href="/wildlife" icon={<Icon name="Sparkle" size="sm" />}>
+              Wildlife
+            </SideMenuItem>
+            <SideMenuItem href="/camping" icon={<Icon name="Tent" size="sm" />}>
+              Camping
+            </SideMenuItem>
+          </SideMenuList>
+          <SideMenuList>
+            <SideMenuItem href="/guides" icon={<Icon name="Book" size="sm" />}>
+              Guides
+            </SideMenuItem>
+            <SideMenuItem href="/gear" icon={<Icon name="Backpack" size="sm" />}>
+              Gear List
+            </SideMenuItem>
+          </SideMenuList>
+        </SideMenu>
+      </div>
+      <div style={{ position: 'relative', zIndex: 1, flex: 1, maxWidth: '600px' }}>
+        <h2
+          style={{
+            color: 'white',
+            fontSize: '32px',
+            fontWeight: 600,
+            marginBottom: '16px',
+            textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+          }}
+        >
+          Custom Glass Properties
+        </h2>
+        <p
+          style={{
+            color: 'rgba(255,255,255,0.9)',
+            fontSize: '18px',
+            lineHeight: 1.6,
+            textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+          }}
+        >
+          Enhanced glass effect with custom displacement, blur, and corner radius. Perfect for
+          creating unique visual experiences tailored to your brand.
+        </p>
+      </div>
+    </BackgroundWrapper>
+  ),
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        story:
+          'Customized glass effect with increased displacement and blur for a more pronounced visual impact. Demonstrates the flexibility of the glass morphism system.',
+      },
+    },
+  },
+};
+
+/**
+ * Glass Theme Variations
+ *
+ * A comprehensive showcase of glass sidebar across different themed
+ * backgrounds, demonstrating versatility and adaptability.
+ */
+export const GlassThemeShowcase: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+      {/* Ocean Theme */}
+      <BackgroundWrapper
+        backgroundImage="https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=80&w=2940&auto=format&fit=crop"
+        height="70vh"
+      >
+        <div style={{ position: 'relative', width: '300px' }}>
+          <SideMenu title="Ocean Explorer" glass>
+            <SideMenuList>
+              <SideMenuItem href="/" icon={<Icon name="House" size="sm" />} active>
+                Home
+              </SideMenuItem>
+              <SideMenuItem href="/beaches" icon={<Icon name="Sun" size="sm" />}>
+                Beaches
+              </SideMenuItem>
+              <SideMenuItem href="/diving" icon={<Icon name="Waves" size="sm" />}>
+                Diving
+              </SideMenuItem>
+            </SideMenuList>
+          </SideMenu>
+        </div>
+        <div style={{ position: 'relative', flex: 1 }}>
+          <h3
+            style={{
+              color: 'white',
+              fontSize: '24px',
+              fontWeight: 600,
+              textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+            }}
+          >
+            Ocean & Travel Theme
+          </h3>
+        </div>
+      </BackgroundWrapper>
+
+      {/* Urban Theme */}
+      <BackgroundWrapper
+        backgroundImage="https://images.unsplash.com/photo-1514565131-fce0801e5785?q=80&w=2940&auto=format&fit=crop"
+        height="70vh"
+      >
+        <div style={{ position: 'relative', width: '300px' }}>
+          <SideMenu title="Admin Panel" glass>
+            <SideMenuList>
+              <SideMenuItem href="/dashboard" icon={<Icon name="ChartBar" size="sm" />} active>
+                Dashboard
+              </SideMenuItem>
+              <SideMenuItem href="/analytics" icon={<Icon name="TrendUp" size="sm" />}>
+                Analytics
+              </SideMenuItem>
+              <SideMenuItem href="/users" icon={<Icon name="Users" size="sm" />}>
+                Users
+              </SideMenuItem>
+            </SideMenuList>
+          </SideMenu>
+        </div>
+        <div style={{ position: 'relative', flex: 1 }}>
+          <h3
+            style={{
+              color: 'white',
+              fontSize: '24px',
+              fontWeight: 600,
+              textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+            }}
+          >
+            Modern & Professional Theme
+          </h3>
+        </div>
+      </BackgroundWrapper>
+
+      {/* Sunset Theme */}
+      <BackgroundWrapper
+        backgroundImage="https://images.unsplash.com/photo-1495616811223-4d98c6e9c869?q=80&w=2940&auto=format&fit=crop"
+        height="70vh"
+      >
+        <div style={{ position: 'relative', width: '320px' }}>
+          <SideMenu
+            title="Travel Hub"
+            glass={{
+              displacementScale: 60,
+              blurAmount: 1.8,
+              cornerRadius: 16,
+              mode: 'shader',
+            }}
+          >
+            <SideMenuList>
+              <SideMenuItem href="/home" icon={<Icon name="House" size="sm" />} active>
+                Home
+              </SideMenuItem>
+              <SideMenuItem href="/destinations" icon={<Icon name="MapPin" size="sm" />}>
+                Destinations
+              </SideMenuItem>
+              <SideMenuItem href="/bookings" icon={<Icon name="Calendar" size="sm" />}>
+                Bookings
+              </SideMenuItem>
+            </SideMenuList>
+          </SideMenu>
+        </div>
+        <div style={{ position: 'relative', flex: 1 }}>
+          <h3
+            style={{
+              color: 'white',
+              fontSize: '24px',
+              fontWeight: 600,
+              textShadow: '0 2px 10px rgba(0,0,0,0.5)',
+            }}
+          >
+            Warm & Inviting Theme
+          </h3>
+        </div>
+      </BackgroundWrapper>
+    </div>
+  ),
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        story:
+          'A comprehensive showcase demonstrating how glass sidebar adapts to different themes and color palettes. Each example represents a different use case and aesthetic.',
+      },
+    },
+  },
+};

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

@@ -3,6 +3,8 @@ import { SideMenuProps } from '../../../lib/types/components';
 import { useSideMenu } from '../../../lib/composables/useSideMenu';
 import { SIDE_MENU } from '../../../lib/constants/components';
 import { Icon } from '../../Icon';
+import { AtomixGlass } from '../../AtomixGlass/AtomixGlass';
+import { log } from 'console';
 
 /**
  * SideMenu component provides a collapsible navigation menu with title and menu items.
@@ -31,6 +33,7 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
       disabled = false,
       toggleIcon,
       id,
+      glass,
     },
     ref
   ) => {
@@ -54,8 +57,8 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
     // Default toggle icon using Atomix Icon component
     const defaultToggleIcon = <Icon name="CaretRight" size="xs" />;
 
-    return (
-      <div ref={ref} className={sideMenuClass} id={id}>
+    const sideMenuContent = (
+      <>
         {title && collapsible && (
           <div
             className="c-side-menu__toggler"
@@ -89,6 +92,29 @@ export const SideMenu = forwardRef<HTMLDivElement, SideMenuProps>(
             {children}
           </div>
         </div>
+      </>
+    );
+
+    if (glass) {
+      const defaultGlassProps = {
+        displacementScale: 70,
+        blurAmount: 2,
+        cornerRadius: 12,
+        mode: 'shader' as const,
+      };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      return (
+        <AtomixGlass {...glassProps}>
+          <div ref={ref} className={sideMenuClass + ' c-side-menu--glass'} id={id}>
+            {sideMenuContent}
+          </div>
+        </AtomixGlass>
+      );
+    }
+
+    return (
+      <div ref={ref} className={sideMenuClass} id={id}>
+        {sideMenuContent}
       </div>
     );
   }

package/src/components/Progress/Progress.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import { ProgressProps } from '../../lib/types/components';
 import { useProgress } from '../../lib/composables/useProgress';
 import { PROGRESS } from '../../lib/constants/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
   (
@@ -12,6 +13,7 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
       className = '',
       disabled = false,
       ariaLabel = PROGRESS.DEFAULTS.ARIA_LABEL,
+      glass,
     },
     ref
   ) => {
@@ -22,10 +24,10 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
       className,
     });
 
-    return (
+    const progressContent = (
       <div
         ref={ref}
-        className={progressClasses}
+        className={progressClasses + (glass ? ' c-progress--glass' : '')}
         style={progressStyle}
         role="progressbar"
         aria-valuemin={0}
@@ -37,6 +39,19 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
         <div className={PROGRESS.CLASSES.BAR}></div>
       </div>
     );
+
+    if (glass) {
+      const defaultGlassProps = {
+        displacementScale: 30,
+        blurAmount: 0.5,
+        cornerRadius: 8,
+        mode: 'shader' as const,
+      };
+      const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+      return <AtomixGlass {...glassProps}>{progressContent}</AtomixGlass>;
+    }
+
+    return progressContent;
   }
 );
 

package/src/components/Spinner/Spinner.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 import { SpinnerProps } from '../../lib/types/components';
 import { useSpinner } from '../../lib/composables/useSpinner';
 import { SPINNER } from '../../lib/constants/components';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 export const Spinner: React.FC<SpinnerProps> = ({
   size = 'md',
   variant = 'primary',
   fullscreen = false,
   className = '',
+  glass,
 }) => {
   const { generateSpinnerClass } = useSpinner({
     size,
@@ -19,14 +21,27 @@ export const Spinner: React.FC<SpinnerProps> = ({
     size,
     variant,
     fullscreen,
-    className,
+    className: `${className} ${glass ? 'c-spinner--glass' : ''}`.trim(),
   });
 
-  return (
+  const spinnerContent = (
     <div className={spinnerClass} role="status">
       <span className={SPINNER.VISUALLY_HIDDEN}>Loading...</span>
     </div>
   );
+
+  if (glass) {
+    const defaultGlassProps = {
+      displacementScale: 20,
+      blurAmount: 1,
+      cornerRadius: 999,
+      mode: 'shader' as const,
+    };
+    const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+    return <AtomixGlass {...glassProps}>{spinnerContent}</AtomixGlass>;
+  }
+
+  return spinnerContent;
 };
 
 export type { SpinnerProps };

package/src/lib/composables/useBarChart.ts

@@ -101,8 +101,10 @@ export function useBarChart(datasets: ChartDataset[], options: BarChartOptions =
   const [hoveredBar, setHoveredBar] = useState<{
     datasetIndex: number;
     pointIndex: number;
-    x: number;
-    y: number;
+    chartX: number;
+    chartY: number;
+    clientX: number;
+    clientY: number;
   } | null>(null);
 
   const [animationProgress, setAnimationProgress] = useState(0);
@@ -119,6 +121,7 @@ export function useBarChart(datasets: ChartDataset[], options: BarChartOptions =
     ): BarDimensions[] => {
       if (!datasets.length) return [];
 
+      // Use provided dimensions and padding (from ChartRenderer scales)
       const innerWidth = width - padding.left - padding.right;
       const innerHeight = height - padding.top - padding.bottom;
       const numCategories = datasets[0]?.data?.length || 0;
@@ -270,8 +273,15 @@ export function useBarChart(datasets: ChartDataset[], options: BarChartOptions =
 
   // Bar hover handlers
   const handleBarHover = useCallback(
-    (datasetIndex: number, pointIndex: number, x: number, y: number) => {
-      setHoveredBar({ datasetIndex, pointIndex, x, y });
+    (datasetIndex: number, pointIndex: number, chartX: number, chartY: number, clientX: number, clientY: number) => {
+      setHoveredBar({ 
+        datasetIndex, 
+        pointIndex, 
+        chartX, 
+        chartY,
+        clientX,
+        clientY 
+      });
     },
     []
   );