@shohojdhara/atomix 0.2.2 → 0.2.4

package/src/components/VideoPlayer/VideoPlayer.tsx

@@ -17,6 +17,7 @@ import { useVideoPlayer } from '../../lib/composables/useVideoPlayer';
 import { VIDEO_PLAYER } from '../../lib/constants/components';
 import { VideoPlayerProps } from '../../lib/types/components';
 import { extractYouTubeId, isYouTubeUrl } from '../../lib/utils';
+import { AtomixGlass } from '../AtomixGlass/AtomixGlass';
 
 /**
  * Advanced Video Player Component
@@ -51,6 +52,9 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
       subtitles,
       quality,
       ambientMode = false,
+      glass = false,
+      glassOpacity = 1,
+      glassContent,
       ...props
     },
     ref
@@ -59,6 +63,7 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
     const containerRef = useRef<HTMLDivElement>(null);
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const iframeRef = useRef<HTMLIFrameElement>(null);
+    const [containerBorderRadius, setContainerBorderRadius] = useState<number>(8);
 
     // Determine video source and type
     const isYouTube = type === 'youtube' || youtubeId || (src && isYouTubeUrl(src));
@@ -115,6 +120,10 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
     const [activeSubtitle, setActiveSubtitle] = useState<string | null>(
       subtitles?.find(sub => sub.default)?.srcLang || null
     );
+    const [videoDimensions, setVideoDimensions] = useState<{ width: number; height: number }>({
+      width: 0,
+      height: 0,
+    });
 
     const handleProgressClick = useCallback(
       (e: React.MouseEvent<HTMLDivElement>) => {
@@ -225,12 +234,107 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
       return undefined;
     }, [subtitles, setSubtitle, videoRef]);
 
+    // Track video/iframe dimensions for AtomixGlass
+    useEffect(() => {
+      const updateDimensions = () => {
+        if (isYouTube && iframeRef.current) {
+          const iframe = iframeRef.current;
+          const rect = iframe.getBoundingClientRect();
+          setVideoDimensions({ width: rect.width, height: rect.height });
+        } else if (videoRef.current) {
+          const video = videoRef.current;
+          const rect = video.getBoundingClientRect();
+          setVideoDimensions({ width: rect.width, height: rect.height });
+        }
+      };
+
+      // Initial measurement with slight delay to ensure element is rendered
+      const initialTimer = setTimeout(updateDimensions, 100);
+
+      // Use ResizeObserver to track size changes
+      const resizeObserver = new ResizeObserver(updateDimensions);
+
+      if (isYouTube && iframeRef.current) {
+        const iframe = iframeRef.current;
+        resizeObserver.observe(iframe);
+
+        // Listen for iframe load event
+        const handleIframeLoad = () => updateDimensions();
+        iframe.addEventListener('load', handleIframeLoad);
+
+        return () => {
+          clearTimeout(initialTimer);
+          resizeObserver.disconnect();
+          iframe.removeEventListener('load', handleIframeLoad);
+        };
+      } else if (videoRef.current) {
+        const video = videoRef.current;
+        resizeObserver.observe(video);
+
+        // Listen for video metadata loaded event
+        const handleLoadedMetadata = () => updateDimensions();
+        video.addEventListener('loadedmetadata', handleLoadedMetadata);
+
+        return () => {
+          clearTimeout(initialTimer);
+          resizeObserver.disconnect();
+          video.removeEventListener('loadedmetadata', handleLoadedMetadata);
+        };
+      }
+
+      // Also listen for window resize
+      window.addEventListener('resize', updateDimensions);
+
+      return () => {
+        clearTimeout(initialTimer);
+        resizeObserver.disconnect();
+        window.removeEventListener('resize', updateDimensions);
+      };
+    }, [isYouTube, videoRef, iframeRef]);
+
     const handleContainerClick = useCallback(() => {
       if (containerRef.current) {
         containerRef.current.focus();
       }
     }, []);
 
+    // Detect container border radius
+    useEffect(() => {
+      const detectBorderRadius = () => {
+        if (!containerRef.current) return;
+
+        const computedStyle = window.getComputedStyle(containerRef.current);
+        const borderRadius = computedStyle.borderRadius || computedStyle.borderTopLeftRadius;
+
+        // Parse the border radius value (remove 'px' and convert to number)
+        const radiusValue = parseFloat(borderRadius);
+        if (!isNaN(radiusValue)) {
+          setContainerBorderRadius(radiusValue);
+        }
+      };
+
+      // Detect border radius immediately
+      detectBorderRadius();
+
+      // Create ResizeObserver to watch for style changes
+      let resizeObserver: ResizeObserver | null = null;
+      if (typeof ResizeObserver !== 'undefined' && containerRef.current) {
+        resizeObserver = new ResizeObserver(detectBorderRadius);
+        resizeObserver.observe(containerRef.current);
+      }
+
+      // Also listen for window resize (in case styles change)
+      window.addEventListener('resize', detectBorderRadius);
+
+      return () => {
+        window.removeEventListener('resize', detectBorderRadius);
+        if (resizeObserver && containerRef.current) {
+          resizeObserver.unobserve(containerRef.current);
+          resizeObserver.disconnect();
+        }
+      };
+    }, []);
+
     const handleKeyDown = useCallback(
       (e: React.KeyboardEvent) => {
         switch (e.key) {
@@ -271,7 +375,7 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
     return (
       <div
         ref={containerRef}
-        className={`${VIDEO_PLAYER.CLASSES.BASE} ${isYouTube ? VIDEO_PLAYER.CLASSES.YOUTUBE : ''} ${ambientMode ? VIDEO_PLAYER.CLASSES.AMBIENT : ''} ${className}`}
+        className={`${VIDEO_PLAYER.CLASSES.BASE} ${isYouTube ? VIDEO_PLAYER.CLASSES.YOUTUBE : ''} ${ambientMode ? VIDEO_PLAYER.CLASSES.AMBIENT : ''} ${glass ? VIDEO_PLAYER.CLASSES.GLASS : ''} ${className}`}
         style={{
           width,
           height,
@@ -313,11 +417,13 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
         ) : (
           <video
             ref={element => {
-              videoRef.current = element;
+              if (videoRef && videoRef.current !== element) {
+                (videoRef as React.MutableRefObject<HTMLVideoElement | null>).current = element;
+              }
               if (typeof ref === 'function') {
                 ref(element);
-              } else if (ref) {
-                ref.current = element;
+              } else if (ref && ref.current !== element) {
+                (ref as React.MutableRefObject<HTMLVideoElement | null>).current = element;
               }
             }}
             className={VIDEO_PLAYER.CLASSES.VIDEO}
@@ -350,9 +456,60 @@ export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
           </div>
         )}
 
+        {/* Glass overlay - positioned between video and controls */}
+        {glass && (
+          <div className={VIDEO_PLAYER.CLASSES.GLASS_OVERLAY}>
+            <AtomixGlass
+              {...(typeof glass === 'boolean' ? {} : glass)}
+              style={{
+                borderRadius: 'inherit',
+              }}
+              mouseContainer={containerRef}
+              displacementScale={30}
+              blurAmount={0}
+              saturation={100}
+              aberrationIntensity={0}
+              cornerRadius={containerBorderRadius}
+              elasticity={0}
+            >
+              {!glassContent && (
+                <div
+                  style={{
+                    width: videoDimensions.width > 0 ? `${videoDimensions.width}px` : '100%',
+                    height: videoDimensions.height > 0 ? `${videoDimensions.height}px` : '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'transparent',
+                  }}
+                >
+                  {/* Glass effect background */}
+                </div>
+              )}
+            </AtomixGlass>
+          </div>
+        )}
+
+        {/* Custom glass content overlay */}
+        {glass && glassContent && (
+          <div
+            className={VIDEO_PLAYER.CLASSES.GLASS_CONTENT}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {glassContent}
+          </div>
+        )}
+
         {controls && !isYouTube && (
           <div
             className={`${VIDEO_PLAYER.CLASSES.CONTROLS} ${showControls ? VIDEO_PLAYER.CLASSES.CONTROLS_VISIBLE : ''}`}
+            style={{
+              zIndex: glass ? 3 : 'auto',
+            }}
           >
             <div className={VIDEO_PLAYER.CLASSES.PROGRESS_CONTAINER}>
               <div className={VIDEO_PLAYER.CLASSES.PROGRESS_BAR} onClick={handleProgressClick}>

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export type { SliderProps, VideoPlayerProps } from '../lib/types/components';
 export { default as Accordion, type AccordionProps } from './Accordion/Accordion';
 export { default as AtomixLogo, type AtomixLogoProps } from './AtomixLogo/AtomixLogo';
+export { default as AtomixGlass, type AtomixGlassProps } from './AtomixGlass';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup, type AvatarGroupProps } from './Avatar/AvatarGroup';
 export { default as Badge, type BadgeProps } from './Badge/Badge';

package/src/lib/composables/index.ts

@@ -32,6 +32,10 @@ export * from './useTodo';
 export * from './useCheckbox';
 export * from './useForm';
 export * from './useFormGroup';
+
+// GlassContainer composables
+export * from './useGlassContainer';
+export * from './useAtomixGlass';
 export * from './useInput';
 export * from './useRadio';
 export * from './useSelect';

package/src/lib/composables/useAtomixGlass.ts

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export interface UseAtomixGlassOptions {
+  size?: 'sm' | 'md' | 'lg';
+  mode?: 'standard' | 'polar' | 'prominent' | 'shader';
+  overLight?: boolean;
+  clickable?: boolean;
+  active?: boolean;
+  className?: string;
+}
+
+export interface UseAtomixGlassReturn {
+  generateGlassClass: (options: UseAtomixGlassOptions) => string;
+  generateElementClass: (element: string, modifier?: string) => string;
+}
+
+/**
+ * Hook for generating AtomixGlass CSS classes following BEM methodology
+ */
+export function useAtomixGlass(): UseAtomixGlassReturn {
+  // Generate CSS class for the main glass component
+  const generateGlassClass = useCallback((options: UseAtomixGlassOptions) => {
+    const classes = ['c-atomix-glass'];
+
+    // Add size modifier
+    if (options.size && options.size !== 'md') {
+      classes.push(`c-atomix-glass--${options.size}`);
+    }
+
+    // Add mode modifier
+    if (options.mode && options.mode !== 'standard') {
+      classes.push(`c-atomix-glass--${options.mode}`);
+    }
+
+    // Add state modifiers
+    if (options.clickable) {
+      classes.push('c-atomix-glass--clickable');
+    }
+
+    if (options.overLight) {
+      classes.push('c-atomix-glass--over-light');
+    }
+
+    if (options.active) {
+      classes.push('c-atomix-glass--active');
+    }
+
+    // Add custom className
+    if (options.className) {
+      classes.push(options.className);
+    }
+
+    return classes.filter(Boolean).join(' ');
+  }, []);
+
+  // Generate CSS class for elements
+  const generateElementClass = useCallback((element: string, modifier?: string) => {
+    const baseClass = `c-atomix-glass__${element}`;
+
+    if (modifier) {
+      return `${baseClass}--${modifier}`;
+    }
+
+    return baseClass;
+  }, []);
+
+  return {
+    generateGlassClass,
+    generateElementClass,
+  };
+}

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 
+      });
     },
     []
   );

package/src/lib/composables/useButton.ts

@@ -27,6 +27,7 @@ export function useButton(initialProps?: Partial<ButtonProps>) {
       disabled = defaultProps.disabled,
       rounded = defaultProps.rounded,
       iconOnly = false,
+      glass = defaultProps.glass,
       className = '',
     } = props;
 
@@ -34,8 +35,9 @@ export function useButton(initialProps?: Partial<ButtonProps>) {
     const iconOnlyClass = iconOnly ? 'c-btn--icon' : '';
     const roundedClass = rounded ? 'c-btn--rounded' : '';
     const disabledClass = disabled ? 'c-btn--disabled' : '';
+    const glassClass = glass ? 'c-btn--glass' : '';
 
-    return `c-btn c-btn--${variant} ${sizeClass} ${iconOnlyClass} ${roundedClass} ${disabledClass} ${className}`.trim();
+    return `c-btn c-btn--${variant} ${sizeClass} ${iconOnlyClass} ${roundedClass} ${disabledClass} ${glassClass} ${className}`.trim();
   };
 
   /**

package/src/lib/composables/useCallout.ts

@@ -11,6 +11,7 @@ export function useCallout(initialProps?: Partial<CalloutProps>) {
     variant: 'primary',
     oneLine: false,
     toast: false,
+    glass: false,
     ...initialProps,
   };
 
@@ -24,14 +25,16 @@ export function useCallout(initialProps?: Partial<CalloutProps>) {
       variant = defaultProps.variant,
       oneLine = defaultProps.oneLine,
       toast = defaultProps.toast,
+      glass = defaultProps.glass,
       className = '',
     } = props;
 
     const oneLineClass = oneLine ? 'c-callout--oneline' : '';
     const toastClass = toast ? 'c-callout--toast' : '';
     const variantClass = variant ? `c-callout--${variant}` : '';
+    const glassClass = glass ? 'c-callout--glass' : '';
 
-    return `c-callout ${variantClass} ${oneLineClass} ${toastClass} ${className}`.trim();
+    return `c-callout ${variantClass} ${oneLineClass} ${toastClass} ${glassClass} ${className}`.trim();
   };
 
   /**