@shohojdhara/atomix 0.2.4 → 0.2.5

package/src/lib/composables/useBarChart.ts

@@ -273,14 +273,21 @@ export function useBarChart(datasets: ChartDataset[], options: BarChartOptions =
 
   // Bar hover handlers
   const handleBarHover = useCallback(
-    (datasetIndex: number, pointIndex: number, chartX: number, chartY: number, clientX: number, clientY: number) => {
-      setHoveredBar({ 
-        datasetIndex, 
-        pointIndex, 
-        chartX, 
+    (
+      datasetIndex: number,
+      pointIndex: number,
+      chartX: number,
+      chartY: number,
+      clientX: number,
+      clientY: number
+    ) => {
+      setHoveredBar({
+        datasetIndex,
+        pointIndex,
+        chartX,
         chartY,
         clientX,
-        clientY 
+        clientY,
       });
     },
     []

package/src/lib/composables/useChart.ts

@@ -286,14 +286,20 @@ export function useChart(initialProps?: Partial<ChartProps>) {
       const rect = (event.target as Element).getBoundingClientRect();
 
       // Single touch - pan (only if pan is enabled)
-      if (touches.length === 1 && touches[0] && prev.isDragging && prev.dragStart && prev.panEnabled) {
+      if (
+        touches.length === 1 &&
+        touches[0] &&
+        prev.isDragging &&
+        prev.dragStart &&
+        prev.panEnabled
+      ) {
         const x = touches[0].x - rect.left;
         const y = touches[0].y - rect.top;
-        
+
         // Use previous touch position for delta calculation if available
         const prevTouch = prev.touchState.touches[0];
         let deltaX, deltaY;
-        
+
         if (prevTouch) {
           // Calculate delta from previous touch position
           const prevX = prevTouch.x - rect.left;
@@ -325,7 +331,7 @@ export function useChart(initialProps?: Partial<ChartProps>) {
             },
           };
         }
-        
+
         // Update touch state even if no panning occurred
         return {
           ...prev,
@@ -511,11 +517,11 @@ export function useChart(initialProps?: Partial<ChartProps>) {
       datasets: ChartDataset[],
       width: number = CHART.DEFAULT_WIDTH,
       height: number = CHART.DEFAULT_HEIGHT,
-      padding: { top: number; right: number; bottom: number; left: number } = { 
-        top: 20, 
-        right: 20, 
-        bottom: 30, 
-        left: 40 
+      padding: { top: number; right: number; bottom: number; left: number } = {
+        top: 20,
+        right: 20,
+        bottom: 30,
+        left: 40,
       },
       config?: ChartProps['config']
     ): ChartScales | null => {
@@ -541,9 +547,7 @@ export function useChart(initialProps?: Partial<ChartProps>) {
 
       const yScale = (value: number) => {
         // Invert Y axis (SVG coordinates start from top)
-        return (
-          padding.top + innerHeight - ((value - minValue) / valueRange) * innerHeight
-        );
+        return padding.top + innerHeight - ((value - minValue) / valueRange) * innerHeight;
       };
 
       return {
@@ -876,7 +880,7 @@ export function useChartPerformance(
     return datasets.map(dataset => {
       const values = dataset.data?.map(d => d.value).filter(v => typeof v === 'number') || [];
       const validValues = values.length > 0 ? values : [0];
-      
+
       return {
         label: dataset.label,
         dataLength: dataset.data?.length || 0,

package/src/lib/composables/useChartExport.ts

@@ -178,9 +178,15 @@ export function useChartExport() {
       rows.push(row);
     });
 
-    // Convert to CSV string
+    // Convert to CSV string with sanitization
     const csvContent = rows
-      .map(row => row.map(cell => `"${cell.replace(/"/g, '""')}"`).join(','))
+      .map(row => row.map(cell => {
+        // Sanitize cell content to prevent CSV injection
+        const sanitized = String(cell).replace(/[\r\n\t]/g, ' ').replace(/"/g, '""');
+        // Prevent formula injection by prefixing dangerous characters
+        const dangerous = /^[=+\-@]/;
+        return `"${dangerous.test(sanitized) ? `'${sanitized}` : sanitized}"`;
+      }).join(','))
       .join('\n');
 
     // Download
@@ -297,17 +303,21 @@ export function useChartExport() {
             break;
           case 'email':
             window.open(
-              `mailto:?subject=${encodeURIComponent('Chart Share')}&body=${encodeURIComponent(`${message}\n\n${url}`)}`,
+              `mailto:?subject=${encodeURIComponent(message)}&body=${encodeURIComponent(`${message} ${url}`)}`,
               '_blank'
             );
             break;
           case 'copy-link':
-            try {
+            if (navigator.clipboard) {
               await navigator.clipboard.writeText(url);
-              // You might want to show a toast notification here
-              console.log('Link copied to clipboard');
-            } catch (error) {
-              console.error('Failed to copy link:', error);
+            } else {
+              // Fallback for older browsers
+              const textArea = document.createElement('textarea');
+              textArea.value = url;
+              document.body.appendChild(textArea);
+              textArea.select();
+              document.execCommand('copy');
+              document.body.removeChild(textArea);
             }
             break;
         }
@@ -316,77 +326,8 @@ export function useChartExport() {
     []
   );
 
-  // Copy chart as image to clipboard
-  const copyToClipboard = useCallback(
-    async (svgElement: SVGSVGElement, options: Partial<ExportOptions> = {}): Promise<void> => {
-      try {
-        const canvas = await svgToCanvas(svgElement, { format: 'png', ...options });
-
-        canvas.toBlob(async blob => {
-          if (blob && navigator.clipboard && window.ClipboardItem) {
-            try {
-              await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
-              console.log('Chart copied to clipboard');
-            } catch (error) {
-              console.error('Failed to copy to clipboard:', error);
-            }
-          }
-        }, 'image/png');
-      } catch (error) {
-        console.error('Failed to copy chart:', error);
-        throw error;
-      }
-    },
-    [svgToCanvas]
-  );
-
-  // Print chart
-  const printChart = useCallback(
-    async (svgElement: SVGSVGElement, options: Partial<ExportOptions> = {}): Promise<void> => {
-      try {
-        const canvas = await svgToCanvas(svgElement, { format: 'png', ...options });
-        const dataUrl = canvas.toDataURL('image/png');
-
-        const printWindow = window.open('', '_blank');
-        if (printWindow) {
-          printWindow.document.write(`
-          <html>
-            <head>
-              <title>Chart Print</title>
-              <style>
-                body { margin: 0; padding: 20px; text-align: center; }
-                img { max-width: 100%; height: auto; }
-              </style>
-            </head>
-            <body>
-              <img src="${dataUrl}" alt="Chart" />
-            </body>
-          </html>
-        `);
-          printWindow.document.close();
-          printWindow.focus();
-          printWindow.print();
-        }
-      } catch (error) {
-        console.error('Failed to print chart:', error);
-        throw error;
-      }
-    },
-    [svgToCanvas]
-  );
-
   return {
     exportChart,
     shareChart,
-    copyToClipboard,
-    printChart,
-
-    // Individual export methods
-    exportAsPNG,
-    exportAsSVG,
-    exportAsPDF,
-    exportAsCSV,
-    exportAsJSON,
-    exportAsXLSX,
   };
-}
+}

package/src/lib/composables/useChartToolbar.ts

@@ -138,7 +138,6 @@ export function useChartToolbar(
           grid: false,
         };
 
-
       default:
         return baseDefaults;
     }

package/src/lib/composables/useEdgePanel.ts

@@ -98,135 +98,143 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
   /**
    * Open the panel
    */
-  const openPanel = useCallback((useFadeAnimation = false) => {
-    setIsOpen(true);
-    document.body.classList.add('is-edgepanel-open');
-
-    if (containerRef.current) {
-      const { mode } = defaultProps;
+  const openPanel = useCallback(
+    (useFadeAnimation = false) => {
+      setIsOpen(true);
+      document.body.classList.add('is-edgepanel-open');
+
+      if (containerRef.current) {
+        const { mode } = defaultProps;
+
+        // Only add animation if not in 'none' mode
+        if (mode !== 'none') {
+          if (useFadeAnimation) {
+            // Add fade animation class
+            containerRef.current.classList.add('is-fade-animating');
+
+            // Force a reflow before starting the animation
+            void containerRef.current.offsetHeight;
+
+            // Remove animation class after animation completes
+            const container = containerRef.current;
+            setTimeout(() => {
+              if (container) {
+                container.classList.remove('is-fade-animating');
+              }
+            }, EDGE_PANEL.ANIMATION_DURATION);
+          } else {
+            // Add transform animation class
+            containerRef.current.classList.add('is-animating');
+
+            // Force a reflow before starting the animation
+            void containerRef.current.offsetHeight;
+
+            // Remove animation class after animation completes
+            const container = containerRef.current;
+            setTimeout(() => {
+              if (container) {
+                container.classList.remove('is-animating');
+              }
+            }, EDGE_PANEL.ANIMATION_DURATION);
+          }
+        }
 
-      // Only add animation if not in 'none' mode
-      if (mode !== 'none') {
+        // Set transform or opacity based on animation type
         if (useFadeAnimation) {
-          // Add fade animation class
-          containerRef.current.classList.add('is-fade-animating');
-
-          // Force a reflow before starting the animation
-          void containerRef.current.offsetHeight;
-
-          // Remove animation class after animation completes
-          const container = containerRef.current;
-          setTimeout(() => {
-            if (container) {
-              container.classList.remove('is-fade-animating');
-            }
-          }, EDGE_PANEL.ANIMATION_DURATION);
+          containerRef.current.style.opacity = '1';
+          containerRef.current.style.transform = ''; // Remove transform for fade
         } else {
-          // Add transform animation class
-          containerRef.current.classList.add('is-animating');
-
-          // Force a reflow before starting the animation
-          void containerRef.current.offsetHeight;
-
-          // Remove animation class after animation completes
-          const container = containerRef.current;
-          setTimeout(() => {
-            if (container) {
-              container.classList.remove('is-animating');
-            }
-          }, EDGE_PANEL.ANIMATION_DURATION);
+          containerRef.current.style.transform = 'translate(0)';
         }
-      }
 
-      // Set transform or opacity based on animation type
-      if (useFadeAnimation) {
-        containerRef.current.style.opacity = '1';
-        containerRef.current.style.transform = ''; // Remove transform for fade
-      } else {
-        containerRef.current.style.transform = 'translate(0)';
+        // If push mode, adjust body padding
+        if (defaultProps.mode === 'push') {
+          adjustBodyPadding();
+        }
       }
 
-      // If push mode, adjust body padding
-      if (defaultProps.mode === 'push') {
-        adjustBodyPadding();
+      if (defaultProps.onOpenChange) {
+        defaultProps.onOpenChange(true);
       }
-    }
-
-    if (defaultProps.onOpenChange) {
-      defaultProps.onOpenChange(true);
-    }
-  }, [defaultProps, adjustBodyPadding]);
+    },
+    [defaultProps, adjustBodyPadding]
+  );
 
   /**
    * Close the panel
    */
-  const closePanel = useCallback((useFadeAnimation = false) => {
-    if (containerRef.current) {
-      const { position, mode } = defaultProps;
+  const closePanel = useCallback(
+    (useFadeAnimation = false) => {
+      if (containerRef.current) {
+        const { position, mode } = defaultProps;
+
+        // Only add animation if not in 'none' mode
+        if (mode !== 'none') {
+          if (useFadeAnimation) {
+            // Add fade out animation class
+            containerRef.current.classList.add('is-fade-animating-out');
+
+            // Capture container for setTimeout
+            const container = containerRef.current;
+
+            setTimeout(() => {
+              if (container) {
+                container.classList.remove('is-fade-animating-out');
+              }
+            }, EDGE_PANEL.ANIMATION_DURATION);
+          } else {
+            // Add transform animation class
+            containerRef.current.classList.add('is-animating-out');
+
+            // Capture container for setTimeout
+            const container = containerRef.current;
+
+            setTimeout(() => {
+              if (container) {
+                container.classList.remove('is-animating-out');
+              }
+            }, EDGE_PANEL.ANIMATION_DURATION);
+          }
+        }
 
-      // Only add animation if not in 'none' mode
-      if (mode !== 'none') {
+        // Set transform or opacity based on animation type
         if (useFadeAnimation) {
-          // Add fade out animation class
-          containerRef.current.classList.add('is-fade-animating-out');
-
-          // Capture container for setTimeout
-          const container = containerRef.current;
-
-          setTimeout(() => {
-            if (container) {
-              container.classList.remove('is-fade-animating-out');
-            }
-          }, EDGE_PANEL.ANIMATION_DURATION);
+          containerRef.current.style.opacity = '0';
+          containerRef.current.style.transform = ''; // Remove transform for fade
         } else {
-          // Add transform animation class
-          containerRef.current.classList.add('is-animating-out');
-
-          // Capture container for setTimeout
-          const container = containerRef.current;
+          // Then set transform
+          containerRef.current.style.transform = position
+            ? EDGE_PANEL.TRANSFORM_VALUES[position]
+            : '';
+        }
 
-          setTimeout(() => {
-            if (container) {
-              container.classList.remove('is-animating-out');
-            }
-          }, EDGE_PANEL.ANIMATION_DURATION);
+        // Reset body padding if push mode
+        if (defaultProps.mode === 'push') {
+          resetBodyPadding();
         }
-      }
 
-      // Set transform or opacity based on animation type
-      if (useFadeAnimation) {
-        containerRef.current.style.opacity = '0';
-        containerRef.current.style.transform = ''; // Remove transform for fade
-      } else {
-        // Then set transform
-        containerRef.current.style.transform = position ? EDGE_PANEL.TRANSFORM_VALUES[position] : '';
-      }
+        // Wait for animation to complete before hiding
+        const hideDelay = mode === 'none' ? 0 : EDGE_PANEL.ANIMATION_DURATION;
 
-      // Reset body padding if push mode
-      if (defaultProps.mode === 'push') {
-        resetBodyPadding();
-      }
+        setTimeout(() => {
+          setIsOpen(false);
+          document.body.classList.remove('is-edgepanel-open');
 
-      // Wait for animation to complete before hiding
-      const hideDelay = mode === 'none' ? 0 : EDGE_PANEL.ANIMATION_DURATION;
-
-      setTimeout(() => {
+          if (defaultProps.onOpenChange) {
+            defaultProps.onOpenChange(false);
+          }
+        }, hideDelay);
+      } else {
         setIsOpen(false);
         document.body.classList.remove('is-edgepanel-open');
 
         if (defaultProps.onOpenChange) {
           defaultProps.onOpenChange(false);
         }
-      }, hideDelay);
-    } else {
-      setIsOpen(false);
-      document.body.classList.remove('is-edgepanel-open');
-
-      if (defaultProps.onOpenChange) {
-        defaultProps.onOpenChange(false);
       }
-    }
-  }, [defaultProps, resetBodyPadding]);
+    },
+    [defaultProps, resetBodyPadding]
+  );
 
   /**
    * Handle Escape key press
@@ -304,4 +312,4 @@ export function useEdgePanel(initialProps?: Partial<EdgePanelProps>) {
     closePanel,
     handleBackdropClick,
   };
-}
+}

package/src/lib/composables/useFooter.ts

@@ -14,8 +14,6 @@ export interface UseFooterOptions {
   className?: string;
 }
 
-
-
 export function useFooter(options: UseFooterOptions = {}) {
   const {
     layout = FOOTER.DEFAULTS.LAYOUT,
@@ -38,6 +36,7 @@ export function useFooter(options: UseFooterOptions = {}) {
       `c-footer--${variant}`,
       FOOTER.CLASSES[size.toUpperCase() as keyof typeof FOOTER.CLASSES] || FOOTER.CLASSES.MD,
       sticky && FOOTER.CLASSES.STICKY,
+      showNewsletter && 'c-footer--with-newsletter',
       className,
     ];
     return classes.filter(Boolean).join(' ');
@@ -81,5 +80,6 @@ export function useFooter(options: UseFooterOptions = {}) {
     handleNewsletterSubmit,
     handleBackToTop,
     socialLinks,
+    showNewsletter,
   };
-}
+}

package/src/lib/composables/useGlassContainer.ts

@@ -18,7 +18,10 @@ export function useGlassContainer(props: GlassContainerProps) {
   const [isHovered, setIsHovered] = useState(false);
   const [isActive, setIsActive] = useState(false);
   const [currentGlassSize, setCurrentGlassSize] = useState(glassSize);
-  const [internalGlobalMousePos, setInternalGlobalMousePos] = useState<MousePosition>({ x: 0, y: 0 });
+  const [internalGlobalMousePos, setInternalGlobalMousePos] = useState<MousePosition>({
+    x: 0,
+    y: 0,
+  });
   const [internalMouseOffset, setInternalMouseOffset] = useState<MousePosition>({ x: 0, y: 0 });
 
   // Use external mouse position if provided, otherwise use internal
@@ -29,7 +32,7 @@ export function useGlassContainer(props: GlassContainerProps) {
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
       const container = mouseContainer?.current || glassRef.current;
-      if (!container) return;
+      if (!container) return undefined;
 
       const rect = container.getBoundingClientRect();
       const centerX = rect.left + rect.width / 2;
@@ -50,10 +53,10 @@ export function useGlassContainer(props: GlassContainerProps) {
 
   // Set up mouse tracking if no external mouse position is provided
   useEffect(() => {
-    if (externalGlobalMousePos && externalMouseOffset) return;
+    if (externalGlobalMousePos && externalMouseOffset) return undefined;
 
     const container = mouseContainer?.current || glassRef.current;
-    if (!container) return;
+    if (!container) return undefined;
 
     container.addEventListener('mousemove', handleMouseMove);
     return () => container.removeEventListener('mousemove', handleMouseMove);
@@ -89,8 +92,14 @@ export function useGlassContainer(props: GlassContainerProps) {
     const normalizedY = deltaY / centerDistance;
     const stretchIntensity = Math.min(centerDistance / 300, 1) * elasticity * fadeInFactor;
 
-    const scaleX = 1 + Math.abs(normalizedX) * stretchIntensity * 0.3 - Math.abs(normalizedY) * stretchIntensity * 0.15;
-    const scaleY = 1 + Math.abs(normalizedY) * stretchIntensity * 0.3 - Math.abs(normalizedX) * stretchIntensity * 0.15;
+    const scaleX =
+      1 +
+      Math.abs(normalizedX) * stretchIntensity * 0.3 -
+      Math.abs(normalizedY) * stretchIntensity * 0.15;
+    const scaleY =
+      1 +
+      Math.abs(normalizedY) * stretchIntensity * 0.3 -
+      Math.abs(normalizedX) * stretchIntensity * 0.15;
 
     return `scaleX(${Math.max(0.8, scaleX)}) scaleY(${Math.max(0.8, scaleY)})`;
   }, [globalMousePos, elasticity, currentGlassSize]);
@@ -165,4 +174,4 @@ export function useGlassContainer(props: GlassContainerProps) {
   };
 }
 
-export default useGlassContainer;
+export default useGlassContainer;

package/src/lib/composables/useLineChart.ts

@@ -253,7 +253,14 @@ export function useLineChart(datasets: ChartDataset[], options: LineChartOptions
 
   // Point hover handlers
   const handlePointHover = useCallback(
-    (datasetIndex: number, pointIndex: number, x: number, y: number, clientX: number, clientY: number) => {
+    (
+      datasetIndex: number,
+      pointIndex: number,
+      x: number,
+      y: number,
+      clientX: number,
+      clientY: number
+    ) => {
       setHoveredPoint({ datasetIndex, pointIndex, x, y, clientX, clientY });
     },
     []

package/src/lib/composables/useRiver.ts

@@ -70,6 +70,11 @@ export interface RiverProps {
    */
   className?: string;
 
+  /**
+   * Inline style for the component
+   */
+  style?: React.CSSProperties;
+
   /**
    * Background image source
    */